[
  {
    "path": ".babelrc",
    "content": "{\n  \"presets\": [\n    [\n      \"env\",\n      {\n        \"loose\": true,\n        \"modules\": false,\n        \"targets\": {\n          \"browsers\": [\"> 1%\", \"last 2 versions\", \"not ie <= 8\"]\n        }\n      }\n    ],\n    \"stage-2\"\n  ],\n  \"plugins\": [\"transform-vue-jsx\"],\n  \"env\": {\n    \"utils\": {\n      \"presets\": [\n        [\n          \"env\",\n          {\n            \"loose\": true,\n            \"modules\": \"commonjs\",\n            \"targets\": {\n              \"browsers\": [\"> 1%\", \"last 2 versions\", \"not ie <= 8\"]\n            }\n          }\n        ],\n      ],\n      \"plugins\": [\n        [\"module-resolver\", {\n          \"root\": [\"element-ui\"],\n          \"alias\": {\n            \"element-ui/src\": \"element-ui/lib\"\n          }\n        }]\n      ]\n    },\n    \"test\": {\n      \"plugins\": [\"istanbul\"]\n    }\n  }\n}\n"
  },
  {
    "path": ".eslintignore",
    "content": "src/utils/popper.js\nsrc/utils/date.js\nsrc/utils/lodash.js\nexamples/play\n*.sh\nnode_modules\nlib\ncoverage\n*.md\n*.scss\n*.woff\n*.ttf\n"
  },
  {
    "path": ".eslintrc",
    "content": "{\n  \"globals\": {\n    \"ga\": true,\n    \"chrome\": true\n  },\n  \"plugins\": [\"html\", \"json\"],\n  \"extends\": \"elemefe\",\n  \"rules\": {\n    \"no-restricted-globals\": [\"error\", \"event\", \"fdescribe\"]\n  },\n  \"parserOptions\": {\n    \"ecmaVersion\": 6,\n    \"ecmaFeatures\": {\n      \"jsx\": true\n    }\n  }\n}\n"
  },
  {
    "path": ".gitattributes",
    "content": "test/**/*.js linguist-language=Vue\n"
  },
  {
    "path": ".github/CONTRIBUTING.en-US.md",
    "content": "# Element UI Contributing Guide\n\nHi! Thank you for choosing Element UI.\n\nElement UI is a Vue 2.0 based component library for developers, designers and product managers.\n\nWe are excited that you are interested in contributing to Element. Before submitting your contribution though, please make sure to take a moment and read through the following guidelines.\n\n## Issue Guidelines\n\n- Issues are exclusively for bug reports, feature requests and design-related topics. Other questions may be closed directly. If any questions come up when you are using Element, please hit [Gitter](https://gitter.im/element-en/Lobby) for help.\n\n- Before submitting an issue, please check if similar problems have already been issued.\n\n- Please specify which version of `Element` and `Vue` you are using, and provide OS and browser information. [JSFiddle](https://jsfiddle.net/) is recommended to build a live demo so that your issue can be reproduced clearly.\n\n## Pull Request Guidelines\n\n- Fork this repository to your own account. Do not create branches here.\n\n- Commit info should be formatted as `[Component Name]: Info about commit.` (e.g. `Button: Fix xxx bug`)\n\n- **DO NOT** include files inside `lib` directory.\n\n- Make sure that running `npm run dist` outputs the correct files.\n\n- For the sake of compatibility and file size, our babel configuration only imported `preset-2015`, so APIs like `Array.prototype.find` and `Object.assign` in `ES2015` are not recommended. You can import third party polyfills if necessary.\n\n- Rebase before creating a PR to keep commit history clear.\n\n- Make sure PRs are created to `dev` branch instead of `master` branch.\n\n- If your PR fixes a bug, please provide a description about the related bug.\n\n- Merging a PR takes two maintainers: one approves the changes after reviewing, and then the other reviews and merges.\n\n## Prerequisites\n`Node.js 4+`, `yarn` and `npm 3+` are required. Note: we use yarn to lock dependency versions, so you should install dependencies using `yarn` instead of `npm install`.\n```shell\ngit clone git@github.com:ElemeFE/element.git\nnpm run dev\n\n# open http://localhost:8085\n```\n\n> **Notice**: modify `examples/play/index.vue` file, use the component you contribute, then run `npm run dev:play`, go ahead [http://localhost:8085](http://localhost:8085), get result, more quickly and friendly.\n\nTo build:\n\n```shell\nnpm run dist\n```\n\n## Component Developing Guidelines\n- Run `make new <component-name>` to create project directory for a new component. Test codes, entry file and documentation are included.\n- Refer to `Button` for nested components.\n- Refer to `Select` for components that depend on other components.\n\n## Code Style\nJust comply with the [ESLint](https://github.com/ElemeFE/eslint-config-elemefe) configuration of [ElemeFE](https://github.com/elemefe).\n"
  },
  {
    "path": ".github/CONTRIBUTING.es.md",
    "content": "# Guía para Contribuidores a `Element UI`\n\n¡Hola! Gracias por elegir [Element UI](http://element.eleme.io/#/en-US).\n\n`Element UI` es un archivo de componentes para desarrolladores y para gerentes de productos ‘web’ basado en [Vue 2.0](https://vuejs.org/)\n\nEstamos orgullosos de que usted esta interesado en contribuir al proyecto `Element`. Antes de someter sus contribuciones, por favor tome un momentito para leer estas simples guías para contribuidores.\n\n\n## Guía Para Reportar Problemas (“Issues”)\n\n- [“Issues”]( https://elementui.github.io/issue-generator) son exclusivamente para informar de errores, sugerencias o solicitaciones para funcionalidad adicional referente a diseño. Preguntas de otro tipo corren el riesgo de ser cerradas inmediatamente. Sí tiene preguntas sobre el uso de `Element`, vea [Gitter](https://gitter.im/element-en/Lobby) para más ayuda.\n\n- Antes de someter un informe sobre algún problema, sírvase de revisar  sí ya hubo un informe.\n\n- Por favor especifique que versión de `Element` y `Vue` que esta utilizando, y que versión de sistema operativo y que versión de navegador web que está utilizando. [JSFiddle](https://jsfiddle.net/) esta recomendado para crear un entorno para reproducir el problema claramente.\n\n\n## Guías para un “Pull Request (PR)”\n\n- Crea una bifurcación (“fork”) del repositorio a su propia cuenta en github.com. Por favor no crea ramas nuevas aquí.\n\n- Cuando cometa su cambio, formatea en esta forma: `[Nombre de componente]: Datos sobre el “commit”.` (por ejemplo. `Button: Reparación de xxx error`)\n\n- **DE NINGUNA MANERA** incluya archivos dentro del directorio `lib`.\n\n- Asegúrese de que el comando `npm run dist` produzca los archivos correctos.\n\n- Para asegurar compatibilidad y reducir tamaño de los archivos, nuestra configuración de `babel` solo importa `preset-2015`, así que IPAs como  Array.prototype.find` y `Object.assign` en `ES2015` no son recomendados. Puede importar “polyfills” terceros, sí es necesario.\n\n- “Rebase” antes de crear un “pull request (PR)” para mantener la historia de “commits” limpia.\n\n- Asegúrese que sus PRs se refrieran a la rama `dev`  y no a la rama  `master`.\n\n- Si su PR arregla un error técnico, por favor, haga referencia al error especifico.\n\n- Fusión de un PR requiere dos mantenedores: el primero aprueba los cambios después de revisar, y entonces el segundo mantenedor revisa los cambios y hace la fusión.\n\n\n## Requerimientos Técnicos\n`Node.js 4+`, `yarn` y `npm 3+` son requisitos. Nota: Usamos yarn para bloquear versiones de dependencias, por lo que debería instalar dependencias usando `yarn` en lugar de `npm install`.\n.\n```shell\ngit clone git@github.com:ElemeFE/element.git\nnpm run dev\n\n# abra http://localhost:8085\n```\n\n> **Notice**: modify `examples/play/index.vue` file, use the component you contribute, then run `npm run dev:play`, go ahead [http://localhost:8085](http://localhost:8085), get result, more quickly and friendly.\n\nPara armar:\n\n```\nshell\nnpm run dist\n```\n\n## Guía Para Desarrollo de Componentes\n- Corra el comando `make new <component-name>` para crear el directorio de su proyecto para un componente nuevo. Verifique su código fuente test, archivo de entrada y documentación están incluidos.\n- Refiérase al `Button` para componentes anidados.\n- Refiérase al `Select` para componentes que dependen de otros componentes.\n\n\n## Estilo de Desarrollo\nPor favor acate a este estilo [ESLint](https://github.com/ElemeFE/eslint-config-elemefe) configuración de [ElemeFE](https://github.com/elemefe).\n\n"
  },
  {
    "path": ".github/CONTRIBUTING.fr-FR.md",
    "content": "# Guide à destination des contributeurs d'Element UI\n\nBonjour! Merci d'avoir choisi Element UI.\n\nElement UI est une bibliothèque de composants basée sur Vue 2.0 pour les développeurs, les designers et les chefs de produits.\n\nNous sommes ravis que vous souhaitiez contribuer à Element. Avant de soumettre votre contribution, veuillez vous assurer de prendre un moment pour lire les indications suivantes.\n\n## Concernant les issues\n\n- Les issues concernent exclusivement les bugs, les demandes de fonctionnalités et les sujets liés à la conception. Les questions concernant d'autres sujets peuvent être fermées directement. Si vous avez des questions à propos de l'utilisation d'Element, veuillez vous rendre sur [Gitter](https://gitter.im/element-en/Lobby) pour obtenir de l'aide.\n\n- Avant de soumettre une issue, veuillez vérifier si des problèmes similaires n'ont pas déjà été signalés.\n\n- Veuillez spécifier la version de `Element` et `Vue` que vous utilisez, et fournir des informations sur le système d'exploitation et le navigateur. [JSFiddle](https://jsfiddle.net/) est recommandé afin de construire une démo pour que votre problème puisse être reproduit clairement.\n\n## Concernant les pull requests\n\n- Faites un fork de ce dépôt vers votre compte. Ne créez pas de branches ici.\n\n- Les informations de validation doivent être formatées en tant que `[Nom du composant] : Info à propos de ce commit` (par exemple `Button : Fix xxx bug`)\n\n- **NE PAS** inclure de fichiers dans le répertoire `lib`.\n\n- Assurez-vous que l'exécution de `npm run dist` génère les bons fichiers.\n\n- Pour des raisons de compatibilité et de taille de fichier, notre configuration babel n'importait que `preset-2015`, donc les API comme `Array.prototype.find` et `Object.assign` dans `ES2015` ne sont pas recommandées. Vous pouvez importer des polyfills si nécessaire.\n\n- Faites un rebase avant la création d'une PR pour garder l'historique clair.\n\n- Assurez-vous que les PRs sont créés dans la branche `dev` au lieu de la branche `master`.\n\n- Si votre PR corrige un bug, veuillez fournir une description du bug en question.\n\n- La fusion d'un PR nécessite deux responsables: l'un approuve les modifications après révision, puis l'autre les révise et les fusionne.\n\n## Pré-requis\n`Node.js 4+`, `yarn` et `npm 3+` sont requis. Note: nous utilisons yarn pour verrouiller les versions des dépendances, donc vous devriez installer les dépendances en utilisant `yarn` au lieu de `npm install`.\n```shell\ngit clone git@github.com:ElemeFE/element.git\nnpm run dev\n\n# open http://localhost:8085\n```\n\n> **Remarque** : modifiez le fichier `examples/play/index.vue`, utilisez le composant auquel vous contribuez, puis lancez `npm run dev:play`, allez sur [http://localhost:8085](http://localhost:8085), regardez le résultat rapidement et facilement.\n\nPour le build:\n\n```shell\nnpm run dist\n```\n\n## Concernant le développement de composants\n- Exécutez `make new <nom-du-composant>` pour créer un répertoire pour le nouveau composant. Les tests, le fichier d'entrée et la documentation sont inclus.\n- Reportez-vous au `Button` pour les composants imbriqués.\n- Reportez-vous à `Select` pour connaître les composants qui dépendent d'autres composants.\n\n## Style du code\nIl suffit de se conformer à la configuration [ESLint](https://github.com/ElemeFE/eslint-config-elemefe) de [ElemeFE](https://github.com/elemefe).\n"
  },
  {
    "path": ".github/CONTRIBUTING.zh-CN.md",
    "content": "# Element UI 贡献指南\n\nHi! 首先感谢你使用 Element UI。\n\nElement UI 是一套为开发者、设计师和产品经理准备的开源组件库，旨在快速搭建页面。它基于 Vue 2.0 开发，并提供了配套的设计资源，充分满足可定制化的需求。\n\nElement UI 的成长离不开大家的支持，如果你愿意为 Element UI 贡献代码或提供建议，请阅读以下内容。\n\n## Issue 规范\n- issue 仅用于提交 Bug 或 Feature 以及设计相关的内容，其它内容可能会被直接关闭。如果你在使用时产生了疑问，请到 Slack 或 [Gitter](https://gitter.im/ElemeFE/element) 里咨询。\n\n- 在提交 issue 之前，请搜索相关内容是否已被提出。\n\n- 请说明 Element UI 和 Vue 的版本号，并提供操作系统和浏览器信息。推荐使用 [JSFiddle](https://jsfiddle.net/) 生成在线 demo，这能够更直观地重现问题。\n\n## Pull Request 规范\n- 请先 fork 一份到自己的项目下，不要直接在仓库下建分支。\n\n- commit 信息要以`[组件名]: 描述信息` 的形式填写，例如 `Button: fix xxx bug`。\n\n- **不要提交** `lib` 里面打包的文件。\n\n- 执行 `npm run dist` 后可以正确打包文件。\n\n- 为了兼容性以及最终打包的文件体积考虑，我们的 babel 只引入了 `preset-2015`，所以不建议使用 ES2015 的 API，例如 `Array.prototype.find`、`Object.assign`等。如果有需要，请引入第三方的 polyfill。\n\n- 提交 PR 前请 rebase，确保 commit 记录的整洁。\n\n- 确保 PR 是提交到 `dev` 分支，而不是 `master` 分支。\n\n- 如果是修复 bug，请在 PR 中给出描述信息。\n\n- 合并代码需要两名维护人员参与：一人进行 review 后 approve，另一人再次 review，通过后即可合并。\n\n## 开发环境搭建\n首先你需要 Node.js 4+，yarn 和 npm 3+。注意：我们使用 yarn 进行依赖版本的锁定，所以请不要使用 `npm install` 安装依赖。\n```shell\ngit clone git@github.com:ElemeFE/element.git\nnpm run dev\n\n# open http://localhost:8085\n```\n\n> **提示**：可以运行 `npm run dev:play`，修改 `examples/play/index.vue` 文件，调用你修改后的组件，仍然访问 [http://localhost:8085](http://localhost:8085)，查看修改效果，更快更方便。\n\n打包代码：\n\n```shell\nnpm run dist\n```\n\n## 组件开发规范\n- 通过 `make new` 创建组件目录结构，包含测试代码、入口文件、文档\n- 如果包含父子组件，需要更改目录结构，参考 `Button`\n- 组件内如果依赖了其他组件，需要在当前组件内引入，参考 `Select`\n\n## 代码规范\n遵循饿了么前端的 [ESLint](https://github.com/ElemeFE/eslint-config-elemefe) 即可\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/config.yml",
    "content": "blank_issues_enabled: true\ncontact_links:\n  - name: Create new issue\n    url: https://elementui.github.io/issue-generator\n    about: The issue which is not created via https://elementui.github.io/issue-generator will be closed immediately.\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE.md",
    "content": "<!--\n重要: 请使用以下链接创建新 issue\n\n  https://elementui.github.io/issue-generator\n\n未通过以上链接创建的 issue 会被机器人直接关闭。\n\n########\n\nIMPORTANT: Please use the following link to create a new issue:\n\n  https://elementui.github.io/issue-generator\n\nIf your issue was not created using the app above, it will be closed immediately.\n-->\n"
  },
  {
    "path": ".github/PULL_REQUEST_TEMPLATE.md",
    "content": "Please make sure these boxes are checked before submitting your PR, thank you!\n\n* [ ] Make sure you follow Element's contributing guide ([中文](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.zh-CN.md) | [English](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.en-US.md) | [Español](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.es.md) | [Français](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.fr-FR.md)).\n* [ ] Make sure you are merging your commits to `dev` branch.\n* [ ] Add some descriptions and refer relative issues for you PR.\n"
  },
  {
    "path": ".github/stale.yml",
    "content": "# Number of days of inactivity before an issue becomes stale\ndaysUntilStale: 365\n# Number of days of inactivity before a stale issue is closed\ndaysUntilClose: 7\n# Issues with these labels will never be considered stale\n# exemptLabels:\n  # - pinned\n  # - security\n# Label to use when marking an issue as stale\nstaleLabel: stale\n# Comment to post when marking an issue as stale. Set to `false` to disable\nmarkComment: >\n  This issue has been automatically marked as stale because it has not had\n  recent activity. It will be closed if no further activity occurs. Thank you\n  for your contributions.\n# Comment to post when closing a stale issue. Set to `false` to disable\ncloseComment: false"
  },
  {
    "path": ".github/workflows/preview-build.yml",
    "content": "name: Preview Build\n\non: pull_request\n\njobs:\n  build:\n    name: Build\n    runs-on: ubuntu-latest\n    env:\n      PULL_REQUEST_NUMBER: ${{ github.event.number }}\n    steps:\n      - name: Checkout\n        uses: actions/checkout@v2\n\n      - name: Setup node\n        uses: actions/setup-node@v2\n        with:\n          node-version: '10.15.0'\n          registry-url: https://registry.npmjs.com/\n\n      - name: Build\n        run: npm run bootstrap && npm run deploy:build\n        \n\n      # share website dist\n      - name: Upload artifact\n        uses: actions/upload-artifact@v2\n        with:\n          name: docs\n          path: examples/element-ui/\n          retention-days: 1\n\n      # write pr.txt for share\n      - name: Save pr number\n        if: ${{ always() }}\n        run: echo ${PULL_REQUEST_NUMBER} > ./pr.txt\n\n      # share pr number\n      - name: Upload pr number\n        if: ${{ always() }}\n        uses: actions/upload-artifact@v2\n        with:\n          name: pr\n          path: ./pr.txt\n          retention-days: 1\n"
  },
  {
    "path": ".github/workflows/preview-deploy.yml",
    "content": "name: Preview Deploy\n\non:\n  workflow_run:\n    workflows: ['Preview Build']\n    types:\n      - completed\n\njobs:\n  success:\n    runs-on: ubuntu-latest\n    if: github.event.workflow_run.event == 'pull_request' && github.event.workflow_run.conclusion == 'success'\n    steps:\n      - name: download pr artifact\n        uses: dawidd6/action-download-artifact@v2\n        with:\n          workflow: ${{ github.event.workflow_run.workflow_id }}\n          name: pr\n\n      - name: save PR id\n        id: pr\n        run: echo \"::set-output name=id::$(<pr.txt)\"\n\n      - name: download docs artifact\n        uses: dawidd6/action-download-artifact@v2\n        with:\n          workflow: ${{ github.event.workflow_run.workflow_id }}\n          workflow_conclusion: success\n          name: docs\n\n      - name: upload surge service\n        id: deploy\n        run: |\n          export DEPLOY_DOMAIN=https://preview-pr-${{ steps.pr.outputs.id }}-element-ui.surge.sh\n          npx surge --project ./ --domain $DEPLOY_DOMAIN --token ${{ secrets.SURGE_TOKEN }}\n\n      - name: update status comment\n        uses: actions-cool/maintain-one-comment@v1.2.1\n        with:\n          token: ${{ secrets.GITHUB_TOKEN }}\n          body: |\n            🎊 PR Preview has been successfully built and deployed to https://preview-pr-${{ steps.pr.outputs.id }}-element-ui.surge.sh\n            <img width=\"300\" src=\"https://user-images.githubusercontent.com/507615/90250366-88233900-de6e-11ea-95a5-84f0762ffd39.png\">\n            <!-- Sticky Pull Request Comment -->\n          body-include: '<!-- Sticky Pull Request Comment -->'\n          number: ${{ steps.pr.outputs.id }}\n\n      - name: The job failed\n        if: ${{ failure() }}\n        uses: actions-cool/maintain-one-comment@v1.2.1\n        with:\n          token: ${{ secrets.GITHUB_TOKEN }}\n          body: |\n            😭 Deploy PR Preview failed.\n            <img width=\"300\" src=\"https://user-images.githubusercontent.com/507615/90250824-4e066700-de6f-11ea-8230-600ecc3d6a6b.png\">\n            <!-- Sticky Pull Request Comment -->\n          body-include: '<!-- Sticky Pull Request Comment -->'\n          number: ${{ steps.pr.outputs.id }}\n\n  failed:\n    runs-on: ubuntu-latest\n    if: github.event.workflow_run.event == 'pull_request' && github.event.workflow_run.conclusion == 'failure'\n    steps:\n      - name: download pr artifact\n        uses: dawidd6/action-download-artifact@v2\n        with:\n          workflow: ${{ github.event.workflow_run.workflow_id }}\n          name: pr\n\n      - name: save PR id\n        id: pr\n        run: echo \"::set-output name=id::$(<pr.txt)\"\n\n      - name: The job failed\n        uses: actions-cool/maintain-one-comment@v1.2.1\n        with:\n          token: ${{ secrets.GITHUB_TOKEN }}\n          body: |\n            😭 Deploy PR Preview failed.\n            <img width=\"300\" src=\"https://user-images.githubusercontent.com/507615/90250824-4e066700-de6f-11ea-8230-600ecc3d6a6b.png\">\n            <!-- Sticky Pull Request Comment -->\n          body-include: '<!-- Sticky Pull Request Comment -->'\n          number: ${{ steps.pr.outputs.id }}"
  },
  {
    "path": ".gitignore",
    "content": "node_modules\n.DS_Store\nnpm-debug.log\nyarn-debug.log\nyarn-error.log\nlerna-debug.log\nnpm-debug.log.*\nyarn-debug.log.*\nyarn-error.log.*\nlerna-debug.log.*\nlib\n.idea\n.vscode\nexamples/element-ui\nexamples/pages/en-US\nexamples/pages/zh-CN\nexamples/pages/es\nexamples/pages/fr-FR\nfe.element/element-ui\n.npmrc\ncoverage\nwaiter.config.js\nbuild/bin/algolia-key.js\n.envrc\n.history/"
  },
  {
    "path": ".travis.yml",
    "content": "sudo: false\nlanguage: node_js\nnode_js: 10\naddons:\n  chrome: stable\nbefore_install:\n- export TRAVIS_COMMIT_MSG=\"[deploy] $(git log --format='%h - %B' --no-merges -n 1)\"\n- export TRAVIS_COMMIT_USER=\"$(git log --no-merges -n 1 --format=%an)\"\n- export TRAVIS_COMMIT_EMAIL=\"$(git log --no-merges -n 1 --format=%ae)\"\nafter_success:\n- sh build/deploy-ci.sh\n- cat ./test/unit/coverage/lcov.info | ./node_modules/.bin/coveralls\n"
  },
  {
    "path": "CHANGELOG.en-US.md",
    "content": "## Changelog\n\n### 2.15.14\n\n*2023-08-24*\n\n#### Bug fixes\n- Img\n  - Delete referrerpolicy prop (#22651 by @xinguanhua)\n#### Optimization\n- Docs\n  - Update readme and website example links (#22642 by @lyfeyaj)\n  - Update popper links (#22539 by @brizer)\n- I18n\n  - Update translation of Spanish (#22430 by @jcardus)\n  - Add sr-Latn translation (#22567 by @N-M)\n  - Update Uzbek translation (#22390 by @akahon)\n- Statistics\n  - Fix doc; Optimized code (#22384 by @webvs2)\n- Table\n  - Add highlight selection row (#22382 by @wangdaodao)\n\n### 2.15.13\n\n*2023-02-12*\n\n#### Bug fixes\n- Docs\n  - Fix Statistic docs (#22383 by @JUST-Limbo) \n  - Fix Input docs (#22093 by @lm312)  \n  - Fix en-US docs (#22268 #22269 #22270 by @Hazel-Lin)  \n  - Fix Pagination docs (#22288 by @xujintai123)\n  - Fix: Links docs (#22370 by @itmier)    \n- Statistics\n  - fix slot display bug  (#22375 by @webvs2)\n- Chore\n  - missing web-type after publishing (#22271 by @loosheng)\n#### Optimization\n- InputNumber\n  - Fix touch one click trigger twice on the window touch pad (#22185 by @mrsai)\n- Image\n  - Add initialIndex prop (#22346 by @inkroom) \n- Statistics\n  - Updated countdown feature to localize lodash Closes (#22260 by @webvs2)\n  - Update code and doc (#22276 by @webvs2)\n- Other\n  - fix web-types type props (#22281 by @whzxc)\n\n### 2.15.12\n\n*2022-11-16*\n\n#### Bug fixes\n- Statistic：\n  - Fixed the thousandth bit bug (#22252 by @webvs2)\n- Other\n  - Fix 2.15.11 element-theme-chalk publish fail bug\n\n### 2.15.11\n\n*2022-11-15*\n\n#### Bug fixes\n- Docs\n  - Fix Radio docs (#22178 by @bchen1029) \n  - Fix Progress docs\n#### Optimization\n- I18n\n  - Update translation of Malaysian (#22185 by @z4q)\n  - Update translation of Norwegian (#22145 by @Barsnes)\n- Progress\n  - Add defineBackColor and textColor prop (#22089 by @lm312)\n- Statistics\n  - Add new component Statistics (#22159 by @webvs2)\n- Other\n  - Add Web Types to improve code assistance in WebStorm IDE and other JetBrains IDEs (#22135 by @piotrtomiak)\n\n### 2.15.10\n\n*2022-09-13*\n\n#### Bug fixes\n\n- DatePicker\n  - Fix props placement error (#21908 by @lqzhgood)\n- Loading\n  - Fix sticky DOM error (#22087 by @zzjjhh001)\n- Docs\n  - Fix Popover docs (#22083 by @lm312)\n  - Fix Skeleton docs (#22092 by @lm312)\n  - Fix DatePicker docs (#21970 by @guojiongwei)\n- Tree: \n  - fix lazy-load default check problem (#21934 by @kiss-yu)\n\n#### Optimization\n\n- I18n\n  - Add translation of Sinhalese (#21936 by @sayuri-gi)\n  - Update translation of Spanish (#21924 by @jcardus)\n  - Add translation of Malaysian (#22028 by @iorange0411)\n  - Update translation of Swahili (#21904 by @Cholowao)\n- Utils\n  - update date-util.js (#22099 by @Due07)  \n- DatePicker\n  - add months And years type (#21918 by @akiko123456)\n\n### 2.15.9\n\n*2022-06-02*\n\n#### Bug fixes\n\n- Table\n  - Fix Tabl-header shake bug (#21863 by @bofeng)\n  - Fix when partial import  show `el-checkbox not imported` error (#21828 by @bobohuochai)\n- FormItem\n  - Fix  change rules  verification not reset bug (#21892 by @bofeng)\n- Cascader\n  - Fix change options unexpect error (#21759 by @louiebb)\n- Docs\n  - Fix Popover docs (#21843 by @lod61)\n  - Fix Calendar docs (#21814 by @GoJam11)\n  - Fix TimePicker docs (#21803 by @Alanscut)\n  - Fix DatePicker docs (#21877 by @Nirvanaiu)\n- Other\n  - Fix codepen display bug (#21863 by @bofeng)\n\n#### Optimization\n\n- I18n\n  - Add translation of Swahili (#21895 by @quilltouch)\n- Chore\n  - Use launch-editor-middleware in dev environment (#21633 by @polemices)\n- DatePicker & Cascader\n  - Optimize the dropdown animation direction (#21806 by @XivLaw)\n- Tooltip\n  - Optimize `getFirstElement` code (#21886 by @zhankang)\n- Input\n  - Optimize scss code (#21558 by @cheese-git)\n\n### 2.15.8\n\n*2022-04-12*\n\n#### Bug fixes\n\n- Drawer\n  - Fix appendToBody failure problem (#21264 by @cs1707)\n- Switch\n  - Fix toggling value problem(#19473 by @EdwinBetanc0urt)\n- Docs\n  - Fix input docs (#21723 by @justforuse)\n  - Fix DatePicker docs (#21663 by @justforuse)\n  - Fix Skeleton docs (#21601 by @yanwydxf)\n- Others\n  - Fix vue version (#21736 by @ckvv)\n\n#### Optimization\n\n- I18n\n  - add translation of Azerbaijani (#21012 by @ricardotondello)\n  - update translation of Slovenian (#21729 by @patik123)\n  - update translation of Slovak (#21711 by @sjaustirni )\n  - add translation of Icelandic (#21709 by @aronhr)\n  - add translation of Bengali (#21485 by @llwwtt)\n\n#### Others\n\n- Due to compatibility considerations, the PR on node-sass (#21019 by @linxsbox) of 2.15.7 release has been withdrawn and will be published in an appropriate version after re-evaluation.\n\n### 2.15.7\n\n*2021-11-18*\n\n#### Bug fixes\n\n- Select\n  - fix click icon triggering dropdown (#21314 by @dennyak47)\n  - fix keydown event when composition (#21336 by @bchen1029)\n- Badge\n  - fix type class when is-dot (#21308 by @adaex)\n- Form\n  - validate method reject error info (#21374 by @cs1707)\n- Table\n  - fix resizeObserver loop limit exceeded (#21255 by @tomieric)\n  - fix toggleAllSelection bug when table is empty (#21456 by @cs1707)\n  - optimize performance (#21330 by @cs1707)\n- Button\n  - fix disabled priority (#21375 by @cs1707)\n- Descriptions\n  - fix label slot bug (#21462 by @cs1707)\n- SASS\n  - replace node-sass with dart-sass (#21019 by @linxsbox)\n- Docs\n  - fix skeleton typos (#21408 by @zhhbstudio)\n\n### 2.15.6\n\n*2021-09-02*\n\n#### Bug fixes\n\n- Cascader\n  - fix a bug that makes the browser jitter in zoom mode (#21207 by @cs1707)\n  - optimize performance (#21231 by @cs1707)\n- Select\n  - fix long text overflow in multiple mode (#21237 by @cs1707)\n- Dropdown\n  - add disabled property (#21235 by @mshioda)\n- Radio\n  - fix checked state when browser go back (#21250 by @cs1707)\n- Descriptions\n  - fix type declaration (#21265 by @adaex)\n  - avoid table style conflict (#21254 by @adaex)\n- Drawer\n  - fix append to body (#21264 by @cs1707)\n- Local\n  - fix italian mistake (#21012 by @ricardotondello)\n\n### 2.15.5\n\n*2021-08-04*\n\n#### Bug fixes\n\n- Select\n  - fix resetInputHeight (#21201 by @cs1707)\n\n### 2.15.4\n\n*2021-08-03*\n\n#### New features\n\n- Descriptions \n  - add description component (#21129 by @cs1707)\n- Result \n  - add result component (#21171 by @cs1707)\n\n#### Bug fixes\n\n- Utils \n  - fix isScroll (#21098 by @canvascat)\n- Translation \n  - update it.js (#21133 by @bliberi)\n- RadioGroup \n  - fix RadioGroup used in component causes exception #17908 (#20783 by @lceric)\n- Message \n  - fix message[type] (#21088 by @cs1707)\n- Carousel \n  - reset the timer when setActiveItem method is called (#20846 by @Nekojita1)\n- Cascader \n  - fix emitPath (#21185 by @cs1707)\n- Select \n  - fix select filterable bug (#17494 by @profore)\n  - fix a bug that makes the browser jitter in zoom mode (#21197 by @cs1707)\n- Tree \n  - fix insertChild (#21194 by @cs1707)\n  \n### 2.15.3\n\n*2021-06-29*\n\n#### New features\n\n- Skeleton\n  - add skeleton component (#21038 by @cs1707)\n- Empty\n  - add empty component (#21080 by @cs1707)\n\n#### Bug fixes\n\n- Local\n  - fix week translations for hr locale (#21040 by @cs1707)\n- Table\n  - fix lazy load data (#21041 by @cs1707)\n- Docs\n  - fix form hide-required-asterisk description (#21045 by @cs1707)\n- Drawer:\n  - fix destroy (#20715 by @zj9495)\n- Row\n  - fix align top (#20963 by @cs1707)\n- Select\n  - fix the bug when the value is Boolean (#21052 by @cs1707)\n- Calendar\n  - fix first-day-of-week (#21057 by @cs1707)\n- Utils\n  - fix isScroll (#21065 by @cs1707)\n  - fix(utils.dom by @fw6)\n- TypeScript\n  - add CascaderPanel export type (#21070 by @qige2016)\n  - add spinner.d.ts (#21090 by @qige2016)\n\n### 2.15.2\n\n*2021-05-28*\n\n#### Bug fixes\n\n- Image\n  - fix z-index and keydown event add stopPropagation (#20859 by @cs1707)\n- Input\n  - fix show password cursor (#20870 by @cs1707)\n  - fix show password icon in edge (#20902 by @cs1707)\n- Carousel\n  - fix interval and scale bug (#20931 by @cs1707)\n- Cascader\n  - fix delete tag bug (#20939 by @cs1707)\n- Drawer\n  - add overflow auto (#20948 by @cs1707)\n- Others\n  - fix isFunction (#20912 by @cs1707)\n\n### 2.15.1\n\n*2021-02-23*\n\n#### Bug fixes\n\n- Drawer\n  - bugfix (by @cs1707)\n- Image\n  - fix incorrect image object fit ratio in IE (#19583 by @charlie0228)\n- Cascader\n  - fix cascader panel active path (#20730 by @cs1707)\n- Calendar \n  - fix calendar component i18n bug (#20758 by @iamkun)\n- ColorPicker\n  - fix bugs (by @UxieVerity)\n\n#### Optimization\n\n- Doc\n  - update Axure resource v2.1.0 (by @iamkun)\n\n### 2.15.0\n\n*2021-01-15*\n\n#### Bug fixes\n\n- Select\n  - Fix placeholder i18n bug (#17644 by @nzh63)\n- Popconfirm\n  - Popconfirm i18n bug by @iamkun)\n- Drawer\n  - Fix focus bug (#20626 by @cs1707)\n- Image\n  - Preview optimization (#20652 by @cs1707)\n\n#### Optimization\n\n- Doc\n  - Fix typo in french translation of datetime-picker.md (#20543 by @lonk)\n  - Add format attribute description to the progress component (#20641 by @cs1707)\n\n### 2.14.1\n\n*2020-11-11*\n\n#### Bug fixes\n\n- Popover\n  - Compatible with Vue 2.6 new v-slot syntax (#20424 by @iamkun)\n\n#### Optimization\n\n- I18n\n  - Update Arabic translation (#20202 by @elkattan)\n  - Update Uighur translation (#20177 by @IlhamTahir)\n\n### 2.14.0\n\n*2020-10-29*\n\n#### Breaking changes\n\n- Popconfirm\n  - Rename event name to `confirm`, `cancel` (#20240 by @hugiron)\n\n#### Bug fixes\n\n- Progress\n  - Fix attribute error (#19985 by @Caaalabash)\n\n#### Optimization\n\n- I18n\n  - Update Russian translation (#19451 by @yangirov)\n  - Update Khmer translation (#20077 by @Sovai)\n  - Update Ukrainian translation (#20344 by @MammutAlex)\n\n### 2.13.2\n\n*2020-05-18*\n\n#### Bug fixes\n\n- Autocomplete\n  - Fix change event bug (#19200 by @sxzz)\n- Image\n  - Update error status (#19194 by @lhx6538665)\n\n#### Optimization\n\n- I18n\n  - Update ru-RU popconfirm translation (#19220 by @Opppex)\n  - Update vi translation (#19244 by @quangln2810)\n  - Update Catalan and Spanish translations (#19296 by @Ismaaa)\n  - Update Indonesia translation (#19320) by @therour)\n  - Update Brazilian Portuguese translation (#19374 by @diegomengarda)\n\n### 2.13.1\n\n*2020-04-13*\n\n#### New features\n- Autocomplete\n  - Add change event (#17913 by @sxzz)\n\n#### Bug fixes\n\n- Autocomplete\n  - Fix suggestion error when textarea (#18478 by @Roojay)\n- Carousel\n  - Fix console typo bug (#18264 by @IceFox)\n- Image\n  - Fix preview dose not show when preview list not contain src issue (#18975) (#19130 by @luckyCao)\n  - Fix shortcut key not work at second time issue (#18983) (#19156 by @luckyCao)\n  - Don't show image-viewer when preview is false (#18967 by @inooNgt)\n- Transfer\n  - Fix incorrect line-height of el-transfer's first list item when it was used with  el-form-item (#18917 by @Hanx)\n- InputNumber\n  - Correctly compute inputNumberDisabled (#18439 by @ashuser-pendo)\n- Chore\n  - Remove index intro (#19155 by @iamkun)\n- Doc\n  - Popconfirm doc update (#18324 by @iamkun)\n  - Fix step-strictly docs typo (#18705 by @dream2023)\n  - Fix a type error in document of steps component (#17555 by @haoranyu)\n\n### 2.13.0\n\n*2019-11-26*\n\n#### New features\n\n- Popconfirm\n  - Add popconfirm component (#17548 by @iamkun)\n\n#### Bug fixes\n\n- BackTop\n  - Use cubic bezier scrolling (by @lon)\n- DatePicker\n  - Fix bug of only select min date of date range problem (#17191 by @smk0621)\n- Select\n  - Fix select test cases by (@msidolphin)\n- Tree\n  - Add font-size for the style of tree empty-text (#17094 by @spengjie)\n- Table\n  - Column header can be costumed (#17291 by @ziyoung)\n  - Update table header cell style (#17284 by @ziyoung)\n  - Fix table header height after filter (#17348 by @ziyoung)\n  - Fixed row-style with display not work (#17002 by @a631807682)\n  - Fix header table not display (#17341 by @ziyoung)\n- Calendar\n  - Import el-button and el-button-group (#17376 by @masongzhi)\n- MessageBox\n  - Fix icon position error (#17410 by @nullptru)\n- TimePicker\n  - Set the selection range after scrolling up or down (#16868 by @mattheyan)\n- Message\n  - Fix close instace offsetHeight（#17564） (#17852 by @gzwgq222)\n- Form\n  - Callback of validateField should be optional (#17314 by @CarterLi)\n- Cascader\n  - Fix TypeScript 3.7 compatibility (#17881 by @CarterLi)\n- Menu\n  - Fix router NavigationDuplicated error when using vue-router@^3.1.0 (#17269 by @iamkun)\n- Dropdown\n  - Update type file (#17550 by @iamkun)\n- Progress\n  - Add strokeLinecap prop (#17552 by @iamkun)\n- InfiniteScroll\n  - Skip trigger event on invisible element (#17553 by @iamkun)\n- Image\n  - Perfect picture preview behavior (#16985 by @luckyCao)\n  - Fix shield the page when preview big image (#16796 by @luckyCao)\n- Drawer \n  - Bugfix drawer-append-to-body-not-working (#16953 by @JeremyWuuuuu)\n- Select\n  - Fix tag show value or empty issue (17199 by @luckyCao)\n- Scrollbar\n  - Fix FireFox scroll bar width (#18091 by @iamkun)\n  \n#### Optimization\n\n- I18n\n  - Update sv-SE.js (#17926 by @FOLLGAD)\n  - Update avatar component fr doc (#17762 by @blombard)\n- Docs\n  - Fix time-select typo (#17250 by @wacky6)\n  - Fix Drawer attribute accepted value typo in es (#17122 by @haoranyu)\n  - Update Spanish changelog 2.12.0 (#17364 by @Gonzalo2310)\n  - Fix Changelog typo (#17874 by @renlixin)\n  - Fix Loading demo (#17862 by @MBearo)\n  - Add input event in input Events Table (#18061 by @zhouxinyong)\n  - Delete Input repeat change event (#18085 by @zhouxinyong)\n\n### 2.12.0\n\n*2019-08-29*\n\n#### New features\n\n- Popover\n  - Add close-delay prop (#16671 by @LachlanStuart)\n- Theme\n  - Add Chrome Extension: Element Theme Extension (#16686 by @iamkun)\n- Icon\n  - Add font-display to @font-face declaration (#16805 by @iamfaizalandyka)\n\n#### Bug fixes\n\n- Carousel\n  - Fix onChange emit value (#16705 by @iamkun)\n- Notification\n  - Fix modifying incoming option object (#16704 by @iamkun)\n- DatePicker\n  - Add className for picker option (#16632 by @iamkun)\n- DateTimePicker\n  - Fix time-spinner not scroll to right position (#16854 by @jesse-li)\n- Table\n  - Prevent click handler after drag (#16850 by @ziyoung)\n  - Fix chrome crash when set thead css display to none (#16956 by @luckyCao)\n  - Fix wrong empty block height (#16861 by @ziyoung)\n  - Not throw error when calling toggleExpansion (#16304 by @yyjjqq94)\n  - Not trigger sort-change event when mounted (#17113 by @a631807682)\n  - Fix setCurrentRow unable to clear highlight row (#16879 by @ziyoung)\n  - Fix expand-row-keys not work when data is loaded asynchronously (#16899 by @ziyoung)\n  - set toggleAllSelection as instance property (#17137 by @ziyoung)\n- Tree\n  - Fix distance between label and checkbox (#16799 by @Hazlank)\n- Tabs\n  - Fix incorrect TabItem's position (#16520 by @victorting)\n  - Fix activated tab is out of visual range bug (#17033 by @nullptru)\n- Calendar\n  - Fix weekdays i18n issue (#16772 by @ubitoffee)\n  - fix locale error (#17208 by @iamkun)\n- Cascader\n  - Fix CascaderPanel display error (#16716 by @zhangHongEn)\n  - Fix disable status and close button issue (#16224 by @yyjjqq94)\n- Input\n  - Fix Korean composition event (#15069 by @MoonHyuk)\n  - Fix click event of clear button not trigger when using v-loading (#16576 by @a631807682)\n- Select\n  - Not toggle dropdown when filtering (#17205 by @luckyCao)\n- Transfer\n  - Fix style error  (#17206 by @iamkun)\n- Dialog\n  - update sass var (#16365 by @haoranyu)\n- RadioGroup\n  - Not produce invalid HTML in table if \"is\" attribute is specify (#17070 by @nullptru)\n- Divider\n  - Support custom classes (#17078 by @island205)\n\n#### Optimization\n\n- Checkbox\n  - Improve screen reader experience (#16575 by @tylertrotter)\n- Docs\n  - Update changelog (#16773 by @SimonaliaChen)\n  - Update contributing guide (#14800 by @sinchang)\n  - Fix typo in Drawer docs (#16848 by @winkay)\n  - Update custom theme (#16983 by @iamkun)\n  - Add Esperanto translation (#16955 by @maxkoryukov)\n  - Update input-number document about change event (#16316 by @luckyCao)\n  - Update spanish doc 2.11.1 (#16961 by @Gonzalo2310)\n- I18n\n  - Remove translation of 'year' in catalan language as in the other languages (#14722 by @oscaralbareda)\n  - Update spanish changelog 2.10.0 and 2.10.1 (#16548 by @Gonzalo2310)\n  - Update ar.js (#16653 by @l3op)\n- Test\n  - Correct spelling error (#16672 by @boomler)\n  - Refactor unit test to use data-uri (#16847 by @a631807682)\n- Types\n  - Fix httprequest type (#16633 by @luckyCao)\n\n### 2.11.1\n\n*2019-07-26*\n\n#### Bug fixes\n\n- Image\n  - Fix Image component SSR compatibility (#16737 by @luckyCao)\n- Chore\n  - Update dart-sass compatibility (#16744 by @LewisChennnnn)\n\n### 2.11.0\n\n*2019-07-25*\n\n#### New features\n\n- Drawer\n  - Add drawer component (#16577 by @JeremyWuuuuu)\n\n#### Bug fixes\n\n- Checkbox\n  - Enhance css selector (#16006 by @Hazlank)\n- Tree\n  - Make el-tree generic (#15934 by @JeremyWuuuuu)\n  - Set isCurrent prop to False (#15870 by @kkkisme)\n- Dropdown\n  - Fix split-button caret default color (#15931 by @JuniorTour)\n- Cascader\n  - Fix level 1 children is empty update problem (#16399 by @luckyCao)\n  - Add sets default values when lazy is true (#16420 by @luckyCao)\n  - Fix display errors when node value is duplicate (#15935 by @junyiz)\n  - Expose getCheckedNodes and fix options change bug (#16709 by @SimonaliaChen)\n- Calendar\n  - Display correct header when range is specified (#16354 by @ziyoung)\n- Submenu\n  - Fix prop append-to-body (#16289 by @a631807682)\n- Table \n  - Fix tree table when updating data (#16481 by @island205)\n- Select\n  - Fix memory leak issue (#16463 by @island205)\n- InfiniteScroll\n  - Update naming & doc (#16698 by @iamkun)\n- Avatar\n  - Fix image not center vertically issue (#16489 by @luckyCao)\n- Dialog\n  - Add destroyOnClose attribute (#16455 by @ziyoung)\n- Image\n  - Add big Image preview feature (#16333 by @luckyCao)\n\n#### Optimization\n\n- Docs\n  - Fix dropdown demo (#16193 by @webxmsj)\n  - Fix typo in table documents (#15971 by @howiefh)\n- I18n\n  - Update translation of Thai language (#16689 by @ponkrit)\n- Chore\n  - Update theme base api (#16607 by @iamkun)\n  - Add form theme token (#16699 by @iamkun)\n  - Mark ali inner user's access (#16609 by @iamkun)\n  - Fix doc anchor bug (#16692 by @iamkun)\n\n### 2.10.1\n\n*2019-07-02*\n\n#### Bug fixes\n\n- Table\n  - Fix sort icon (#15439 by @bezany)\n  - Fix layout breaks when append slot exists (#16332 by @ziyoung)\n  - Fix showOverflowTooltip not reactive (#16295 by @a631807682)\n  - Register scrollbar in filter-panel (#16246 by @ziyoung)\n- Chore\n  - Fix 2.9 docs (#16233 by @ziyoung)\n  - Fix index page theme intro english css style issue (#16254 by @iamkun)\n\n#### Optimization\n\n- Tag\n  - Compatible with IE (#16334 by @ziyoung)\n- Chore\n  - Update Dingtalk Group QR image (#16236 by @iamkun)\n- Doc\n  - Update online theme roller doc (#16244 by @iamkun)\n\n### 2.10.0\n\n*2019-06-25*\n\n#### New features\n\n- I18n\n  - Added Uzbek language (#15796 by @ogabek96)\n- Calendar\n  - Add first-day-of-week attribute (#16047 by @ziyoung)\n- Avatar\n  - Add avatar component (#16144 by @luckyCao)\n- Upload:\n  - Add capability to customize thumbnail template (#13192 by @victorzhuk)\n\n#### Bug fixes\n\n- Tree\n  - Not highlight tree node when currentKey is null (#15668 by @yyjjqq94)\n  - Fix issue #15538 caused by two Tree sharing the same data (#15615 by @VanMess)\n- Upload\n  - Update the parameter `fileList` type (#15716 by @underfin)\n- Table\n  - Fix loading icon not display (#15868 by @ziyoung)\n  - Fix background color of complex table when hovering (#15504 by @cnlon)\n  - Fix current-row-key and select event bug (#15983 by @ziyoung)\n  - Height accepts more units (#16013 by @ziyoung)\n  - Fix reserve-selection not work (#16135 by @ziyoung)\n- Docs\n  - Fix Divider attribute type in zh-cn (#15889 by @haoranyu)\n- Menu\n  - Fixed submenu hidden bug after adding popper-append-to-body (#15391 by @PanJiaChen)\n- Select\n  - Fix initialInputHeight (#15989 by @yyjjqq94)\n  - Fix default-first-option behavior when typing Chinese (#15431 by @VanMess)\n  - fix double import problem (#16215 by @lengband)\n- Message\n  - Add type def for offset option (#16027 by @matjaz)\n- Timeline\n  - Fix reverse broken (#16091 by @ziyoung)\n- Slider\n  - Fix #15545 by adding explains about \"input\" event in Chinese (#15588 by @VanMess)\n- InfiniteScroll\n  - Update package name (#16125 by @iamkun)\n- MessageBox\n  - Fix  distinguishCancelAndClose action not same as docs bug (#15438 by @qingdengyue)\n- PopupManager\n  - Fix z-index cannot be rewritten at first using (#15738 by @luckyCao)\n- Docs\n  - Delete an incorrect closing html tag and empty block code (#16194 by @Alexeykhr)\n- Chore\n  - Update test api host (#15807 by @iamkun)\n\n#### Optimization\n\n- Tree\n  - Modify loop conditions to improve performance (#15699 by @KingJeason)\n- Theme\n  - Refine GA track & Update footer link forward to online theme roller (#16007 by @island205)\n- Badge\n  - Update badge prop check (#16198 by @iamkun)\n- Avatar\n  - Update theme config var (#16202 by @luckyCao)\n- I18n\n  - Update pt-br.js (#15776 by @gigioSouza)\n  - Update Farsi translation (#15881 by @pamenary)\n- Docs\n  - Add missing components in quickstart (#16063 by @pape2016)\n  - Update french translation (#16208 by @blombard)\n  - Add description $slots.default (#15444 by @Alexeykhr)\n  - Update Spanish Doc 2.9.1 (#15840 by @Gonzalo2310)\n  - Fix spelling mistakes in fr (#15837 by @blombard)\n  - Update changelog 2.9.2 Spanish (#16185 by @Gonzalo2310)\n\n#### Breaking changes\n\n- Form\n  - Remove success status (#16159 by @ziyoung)\n\n### 2.9.2\n\n*2019-06-21*\n\n#### Bug fixes\n\n- Chore\n  - Fix TS definitions file (#15805 by @NateScarlet)\n\n### 2.9.1\n\n*2019-05-30*\n\n#### New features\n\n- Table\n  - default-expand-all, expand-row-keys, toggle-row-expansion method and expand-change event are supported in Tree Table (#15709 by @ziyoung)\n\n#### Bug fixes\n\n- Table\n  - Fix some bugs (#15709 by @ziyoung)\n- Theme\n  - Update api host (#15784 by @iamkun)\n\n#### Optimization\n\n- Chore\n  - Update InfiniteScroll type (#15794 by @iamkun)\n\n### 2.9.0\n\n*2019-05-30*\n\n#### New features\n\n- Backtop\n  - Add Backtop component (#15541 by @iamkun)\n- PageHeader\n  - Add PageHeader component (#15714 by @ziyoung)\n- InfiniteScroll\n  - Add InfiniteScroll directive (#15567 by @iamkun)\n- Cascader\n  - Add multiple mode and filter-method (#15611 by @SimonaliaChen)\n- Message\n  - Display in stack mode (#15639 by @island205)\n- Tag\n  - Add prop effect (#15725 by @SimonaliaChen)\n- Tabs\n  - Left align title when type is card (#15695 by @luckyCao)\n- DatePicker\n  - Support literal strings (#15525 by island205)\n- Image\n  - Add support for transmit attrs and listeners (#15578 by @VanMess)\n- Theme\n  - Add popup background (#15412 by @iamkun)\n- Chore\n  - Update new 2.9.0 index page (#15682 by @iamkun)\n\n#### Bug fixes\n\n- Table\n  - Fix sort-change behaviour when sort condition is null (#15012 by @joelxr)\n- Image\n  - Fix ssr and object-fit compatibility (#15346 by @SimonaliaChen)\n- Input\n  - Fix show-word-count style in el-form (#15359 by @lvjiaxuan)\n  - Fix clear icon is not centered (#15354 by @YiiGuxing)\n- Calendar\n  - Fix not correct day of week when the day is Sunday (#15399 by @qingdengyue)\n  - Fix October disappear bug (#15394 by @qingdengyue)\n- Tabs\n  - Fix basic tab nested in card tab padding error (#15461 by @SimonaliaChen)\n- Tag\n  - Fix stop propagation problem (#15150 by @infjer)\n- Form\n  - Fix input-group within form-item height error (#15457 by @SimonaliaChen)\n  - Fix resetFields issue (15181 by @luckyCao)\n- Tooltip\n  - Fix custom tabindex not work (#15619 by @SimonaliaChen )\n- Link\n  - Fix link icon style class (#15752 by @iamkun)\n- Select\n  - Revert set value to null when cleared (#15447 by @iamkun)\n- Loading\n  - Fix dom not change when loading state change quickly (#15123 by @FAKER-A)\n- Switch\n  - Label with el-switch repeating event (#15178 by @FAKER-A)\n- Slider\n  - Fix style problem when clicking slider bar(#15561 by @luckyCao)\n- Radio\n  - Fix issue 14808 (#14809 by @OverTree)\n- Form\n  - Fix resetFields issue (15181 by @luckyCao)\n- Chore\n  - Upgrade dependencies and fix demo bug (#15324 by ziyoung)\n- Type\n  - Fix loading type definition (#15635 by @iamkun)\n  - Fix Icon type (#15634 by @iamkun)\n  - Fix Link type definition (#15402 by @iamkun)\n\n#### Optimization\n\n- Cascader\n  - Refactor (#15611 by @SimonaliaChen)\n- Chore\n  - Update make new component logic (by @iamkun)\n- Docs\n  - Rename variable in docs (#15185 by @liupl)\n  - Fix image attribute type and default value (#15423 by @haoranyu)\n  - Fix form doc bug (#15228 by @SHERlocked93)\n\n### 2.8.2\n\n*2019-04-25*\n\n#### Bug fixes\n\n- Icon\n  - Update icon (#15272 by @iamkun)\n- Docs\n  - Fix Form and Input doc style (#15273 by @ziyoung)\n\n### 2.8.1\n\n*2019-04-25*\n\n#### Bug fixes\n\n- Icon\n  - Update icon of cascader and select (#15264 by @SimonaliaChen)\n  - Update icon (#15258 #15268 by @iamkun)\n\n#### Optimization\n\n- Chore\n  - Update build script (#15267 by @ziyoung)\n- Docs\n  - Fix link underline color (#15265 by @iamkun)\n- Other\n  - Fix migrating config not compatible with camel case props and events (#15260 by @SimonaliaChen)\n\n### 2.8.0\n\n*2019-04-25*\n\n#### New features\n\n- Divider\n  - Add divider component (#15055 by @island205)\n- Rate\n  - Add custom colors and icon-classes by passing a object (#15051 by @SimonaliaChen)\n- Link\n  - Add link component (#15052 by @iamkun)\n- Calendar\n  - Add calendar component (#14908 by @ziyoung)\n- Icon\n  - Add icon (#15214 by @iamkun)\n- Alert\n  - Add dark theme (#15041 by @island205)\n- Image\n  - Add image component (#15117 by @SimonaliaChen)\n- Collapse\n  - CollapseItem can be disabled (#15076 by @ziyoung)\n- Carousel\n  - Add direction attribute and support vertical direction (#15122 by @ziyoung)\n- Pagination\n  - Add hide-on-single-page attribute (#15096 by @ziyoung)\n- Slider\n  - Add marks attribute (#15133 by @luckyCao)\n- Input\n  - Add show-word-count attribute (#15075 by @luckyCao)\n- InputNumber\n  - Add step-strictly attribute (#15050 by @luckyCao)\n- Tooltip, Dropdown, Popover\n  - Support tabindex attribute (#15167 by @ziyoung)\n\n#### Bug fixes\n\n- Notification\n  - Fix title word break (#15008 by @iamkun)\n- Form\n  - Fix switching the rules in el-form not work (#14985 by @luckyCao)\n  - Fix label style (#14969 by @ziyoung)\n  - Required FormItem displays asterisk when label is auto (#15144 by @ziyoung)\n- Pagination\n  - Fix slot not updated (#14711 by @lucyhao)\n- Table\n  - Fix load bug in lazy mode (#15101 by @ziyoung)\n  - Fix cell width when colspan is grater than 1 (#15196 by @ziyoung)\n  - Improve performance (#14868 by @ziyoung)\n  - Don't emit triggers sort-change during initialization (#14625 by @PeanutWatson)\n  - Equal behaviour for height and max-height (#14660 by @arthurdenner)\n- Dialog\n  - Fix dialog body correctly break long words (#15027 by @iamkun)\n- Alert\n  - update type definition (#15186 by @ziyoung)\n- Tabs\n  - Fix issue where Promise rejection was hitting application (#14816 by @ffxsam)\n  - Rerender when slot changes (#15238 by @ziyoung)\n- Message\n  - Fix type definition (#14968 by @agoni1212)\n- Select\n  - Fix error when value is undefined or null (#15022 by @luckyCao)\n- Tree\n  - Delete current node after it removed (#14604 by @sinchang)\n  - Improve performance (#14881 by @ChenZhuoSteve)\n- Dropdown\n  - Fix style (#14907 by @doing123)\n- Slider\n  - Fix broken keyboard a11y bug (#14792 by @erezsob)\n- Menu\n  - ActiveIndex value shall be null if defaultIndex does not exist(#14074 by @hoythan)\n- Directive\n  - RepeatClick: use Date.now() instead of new Date() (#14776 by @pavelmash)\n- Upload\n  - Fix Upload transparent picture display style (#15039 by @iamkun)\n- Theme\n  - Add zero border (#15256 by @iamkun)\n\n#### Optimization\n\n- Chore\n  - Update changelog zh-cn (#14965 by @iamkun)\n  - Hide demo description when it's empty (#15014 by @ziyoung)\n  - Display dev server info by default by @iamkun)\n  - Fix 2.6.0 changelog error (#15026 by @iamkun)\n  - Update build config (#14821 by @abc3660170)\n  - Add hmr (#15221 by @SimonaliaChen)\n  - Use sourcemap in dev environment (#15087 by @ibufu)\nDocs\n  - Rename variable in docs (#14602 #15003 #15094 #15105 by @liupl)\n  - Fix upload doc error (#15023 by @iamkun)\n  - Update Form custom validator doc (#15040 by @iamkun)\n  - Update Tabs docs to display vertical tabs (#15053 by @iamkun)\n  - Use eleme.cn as domain (#15139 by @ziyoung)\n  - Fix Image route name (#15194 by @iamkun)\n  - Remove duplicated fr translation (#15207 by @iamkun)\n\n#### Breaking changes\n\n- Rate\n  - Fix decimal display support in disabled mode (#15089 by @haoranyu)\n- Select\n  - Use placeholder option label to set placeholder in filter mode (#14989 by @ibufu)\n\n### 2.7.2\n\n*2019-04-03*\n\n#### Bug fixes\n\n- Form\n  - Fix auto `label-width` style (#14955 by @ziyoung)\n\n#### Optimization\n- Docs\n  - Fix doc img link error (#14957 by @iamkun)\n- Chore\n  - Fix deploy mkdir error (#14952 by @iamkun)\n\n### 2.7.1\n\n*2019-04-03*\n\n#### Bug fixes\n\n- Select\n  - Set value to null when cleared (#14322 by @aaronfulkerson)\n- Input\n  - Update DOM dependent values on type change (#14889 by @wacky6)\n- Table\n  - Make `defaultExpandAll` works when expanded column exists (#14935 by @ziyoung)\n- Dialog\n  - Background color can be configured (#14939 by @ziyoung)\n- Form\n  - `label-width` supports auto width (#14944 by @ziyoung)\n\n#### Optimization\n- Docs\n  - Update Spanish docs (#14913 by @Gonzalo2310)\n  - Add French doc for new component (#14924 by @ziyoung)\n  - Optimize Tabs docs (#14938 by @ziyoung)\n\n### 2.7.0\n\n*2019-03-28*\n\n#### New features\n\n- Table\n  - Add support tree structure data (#14632 by @ziyoung)\n\n#### Bug fixes\n\n- Tabs\n  - Use primary color as boxShadow color (#14558 by @Richard-Choooou)\n  - Rerender when label changes (#14496 by @akki-jat)\n- Table\n  - Footer follows body cell align (#14730 by @ziyoung)\n- NavMenu\n  - Fix click el-submenu trigger childMenu pop again bug (#14443 by @PanJiaChen)\n- Dropdown\n  - Make compatible with 2.6 new v-slot syntax (#14832 by @ziyoung)\n- ColorPicker\n  - Fix handle error hex color string (#14793 by @iamkun)\n- Tree\n  - Revert pr #13349 (#14847 by @ziyoung)\n- Tooltip\n  - Display when initial value is true (#14826 by @ziyoung)\n- Docs\n  - Update cascader docs (#14442 by @panhezeng)\n- Style\n  - Fix media query in sm-only, md-only, lg-only (#14611 by @sinchang)\n\n#### Optimization\n\n- Chore\n  - Add webpage description (#14802 by @iamkun)\n\n### 2.6.3\n\n*2019-03-21*\n\n#### Bug fixes\n\n- Fix Cascader demo style (#14789 by @ziyoung)\n- Remove unnecessary DOM operation (#14788 by @ziyoung)\n- Fix DatePicker default-value DST (#14562 by @wacky6)\n\n### 2.6.2\n\n*2019-03-21*\n\n#### New features\n\n- DatePicker\n  - Add monthrange for type attribute (#14487 by @zxyRealm)\n- i18n\n  - Add Croatian locale (#14360 by @danijelh)\n\n#### Bug fixes\n\n- Input\n  - Fix regression (#14572 by @wacky6)\n- DatePicker\n  - Fix first-day-of-week computation (#14523 by @sinchang)\n  - Fix week picker's value-format (#13754 by @wacky6)\n- Steps\n  - Fix issue #14502 (#14596 by @sinchang)\n  - Fix style with simple theme (#14610 by @sinchang)\n- Docs\n  - Update french doc for 2.6.1 and fix typos (#14555 by @smalesys)\n  - Rename variable in Table docs (#14587 by @likwotsing)\n  - Add french search index (#14565 by @iamkun)\n  - Fix TimePicker page style (#14579 by @ziyoung)\n  - Rename variable in Upload docs (#14593 by @liupl)\n  - French translation update (#14643 by @smalesys)\n  - Update Form async validator docs (#14694 by @iamkun)\n  - Fix tooltip doc error (#14748 by @iamkun)\n  - Fix typo (#14751 by @2bj)\n  - Fix highlighting control elements for Webkit touch (#14703 by @VladG0r)\n\n#### Optimization\n\n- Chore\n  - Update ci build script (#14600 by @ziyoung)\n  - Update ga tracking (#14560 by @iamkun)\n  - Add more ga event (#14633 by @iamkun)\n  - Update discusion group (#14741 by @iamkun)\n  - Update test deps and conf (#14735 by @wacky6)\n  - Upgrade gulp (#14745 by @ziyoung)\n  - Use codepen to display demo & fix doc error (#14747 by @ziyoung)\n\n### 2.6.1\n\n*2019-03-03*\n\n#### Bug fixes\n\n- **Don't specify node version** (by @iamkun in #14546)\n- Fix doc directory in `deloy-faas.sh` (by @ziyoung in #14553)\n- Fix date style issue in changelog for 2.6.0 (by @island205 in #14547)\n- Fix doc typo (by @wack6 in #14552)\n\n### 2.6.0\n\n*2019-03-01*\n\n#### New features\n- Timeline\n  - Add timeline component (by @jikkai in #14248)\n- DropdownItem\n  - Add icon prop to `el-dropdown-item` (by @gabrielboliveira in #14088)\n- Input\n  - Add show-password props (by @phshy0607 in #13966)\n- Select\n  - Add slot `empty` (by @elfman in #13785)\n- Autocomplete\n  - Add highlight-first-item prop (by @YamenSharaf in #14269)\n- I18n\n  - Created Armenian locale (by @hamletbarsamyan in #14214)\n- Docs\n  - French translation (by @smalesys in #12153, #14418, #14434)\n\n#### Optimization\n- Alert\n  - Update alert description default slot class (by @iamkun in #14488)\n- Input\n  - Update input password (by @iamkun in #14480)\n- InputNumber\n  - Remove unnecessary parseFloat (by @JuniorTour in #14172)\n- Menu\n  - Add support for `el-menu-item` without index (by @georgyfarniev in #13298)\n- Table\n  - Remove some html DOM operations (by @elfman in #13643)\n- Upload\n  - Optimize code (by @elfman in #13973)\n- Popup\n  - Optimize code (by @KAionro in #14413)\n- Docs\n  - Add more detail about how to run play mode for contribution (by @island205 in #14355)\n  - Warn input as a controlled component (by @wacky6 in #14463)\n  - Update Table doc (by @luguokong in #14329)\n  - Update input doc (by @iamkun in #14437)\n  - Update custom-theme docs (by @wangguohao in #14297)\n  - Make the icon style change when hover on it (by @tuxinghuan in #14295)\n- Build\n  - Minimizing css and js for Element doc site (by @iamkun in #14430)\n  - Speeding up webpack (by @hetech in #14484)\n  - Use cli to select release version (by @hetech in #14354)\n- Install stale for issue handling (by @island205 in #14392)\n\n#### Bug fixes\n- Menu\n  - Fix subMenu focus bug when switch browser tab (by @liupl in #13976)\n- MessageBox\n  - Fix type definition (by @NateScarlet in #14278)\n- ScrollBar\n  - Prevent right button click on thumb (by @xifeiwu in #14196)\n- Switch\n  - Trigger form validation if value changes (by @hetech in #14426)\n- Table\n  - Make toggleAllSelection method an instance method (by @letanure in #14075)\n- Tabs & Dropdown\n  - Fix style (by @hetech in #14452)\n- Tree\n  - Empty-text tips are different from tables (by @ColinCll in #14331)\n- Docs\n  - Fix DatetimePicker format doc error (by @iamkun in #14290)\n  - Spelling issue in datepicker documentation (by @helmut in #14481)\n  - Fix pagination doc style (by @liuchuzhang in #14451)\n\n#### Breaking changes\n- Table\n  - Fix params order of row events (by @jikkai in #12086)\n\n### 2.5.4\n\n*2019-02-01*\n\n#### Bug fixes\n\n- Build: Fix babel config issue which lead to collapse transition broken (by @island205 in #14282)\n\n### 2.5.3\n\n*2019-01-31*\n\n#### Optimization\n\n- Optimize code of Message (by @vok123 in #14029)\n- Retire gh-pages (by @ziyoung in #14266)\n- Add IssueHunt link (by @island205 in #14261)\n\n#### Bug fixes\n\n- Fix UMD module error on server side (by @island205 in #14242)\n- Fix active TabBar style (by @iamkun in #14240)\n- Fix Table demo code error (by @xunmeng in #14253)\n\n### 2.5.2\n\n*2019-01-27*\n\n#### Optimization\n- Docs:\n  - Update ChangeLog ES 2.5.1 (by @Gonzalo2310 in #14231)\n\n#### Bug fixes\n- Build:\n  - Delete unremoved comments in umd module `lib/index.js` (by @island205 in #14233)\n  - Fix export error fired in commonjs module used in nuxt.js (by @island205 in #14232)\n  - Fix 2.5.1 build issues (by @iamkun in #14228)\n\n### 2.5.1\n\n*2019-01-26*\n\n#### Optimization\n- DatePicker: highlight current month and year (by @Debiancc in #14211)\n- Update 2.5.0 changelog (by @wacky6 in #14217)\n\n#### Bug fixes\n- Fix export issue generate by webpack upgrading (by @island205 in #14220)\n- Keep 2.4.11 docs && new sub folder for 2.5+ (by @iamkun in #14222)\n\n### 2.5.0\n\n*2019-01-25*\n\n#### New features\n- DatePicker\n  - Add `validate-event` attribute (by @ziyoung in #13531)\n- DateTimePicker\n  - `pickerOptions` support `selectableRange` option (by @eeeeeeeason)\n- Tag\n  - Add `click` event (by @licdream in #14106)\n- I18n\n  - support Kyrgyz language (by @zzjframework in #14174)\n\n#### Optimization\n- Upgrade to webpack@4 (by @jikkai in #14173)\n- Input\n  - Simplify implementation, follow one-way data flow. Fix several related bugs (by @wacky6 in #13471)\n- Update Axure file，add new components (by @ziyoung in #13773)\n\n#### Bug fixes\n- Autocomplete\n  - Fix dropdown's last line beging clipped (by @ziyoung in #13597)\n  - Fix missing popper arrow (by @liuchuzhang in #13762)\n- Carousel\n  - Cleanup timer when component is destroyed (by @elfman in #13820)\n- Cascader\n  - Remove deprecated property of computed props (by @iamkun in #13737)\n  - Fix CascaderOption's type definition in TypeScript (by @NateScarlet in #13613)\n  - Fix icon covering the text (by @ziyoung in #13596)\n- Checkbox\n  - Refine style (by @PanJiaChen)\n- DatePicker\n  - Add missing v-for `key` in TimeSpinner (by @Ende93 in #13547)\n  - Fix week highlight on year boundary (by @suyi91 in #13883)\n- Input\n  - Fix textarea DOM node reference (by @laomu1988 @island205 in #13803)\n- Pagination\n  - Input value won't be less than 1 (by @elfman in #13727)\n- Popover\n  - Fix popover issues with hover trigger (by @goldengecko in #13104)\n  - Fix popper instance memory leak (by @qpxtWhite in #13988)\n- Radio\n  - Refine style (by @ohhoney1)\n- Table\n  - Enhanced table sorting when clicking on the sorting arrow (by @ohhoney1 in #12890)\n  - Fix empty text vertical alignment issue on IE10+ (by @imzjy in #13638)\n  - Fix index type documentation (by @ilovefafa in #13628)\n  - Fix `show-summary` display issue when multilevel header has fixed attr (by @luckyCao in #13914)\n- Tabs\n  - Fix auto scroll bug (by @iamkun in #13696)\n  - Get the correct tab through tab name (by @iamkun in #13705)\n  - Use paneName instead of name to determine pane style (by @iamkun in #13733)\n- Tree\n  - Fix `showCheckbox` prop on `Tree` can not affect their children `tree-node` (by @KidneyFlower)\n  - Update doc and definition file (by @ziyoung in #13540)\n- Upload\n  - Add `url` prop to upload file when `list-type` changed (by @elfman in #13771)\n- Slider\n  - Fix source code indentation (by @wacky6 in #13955)\n- I18n\n  - Add missing Catalan translations (by @jaumesala)\n  - Add missing ru translation (by @justlp in #13658)\n  - Fix Finnish translations (by @jenkrisu in #14137)\n- Doc\n  - Update Spanish doc 2.4.11 (by @Gonzalo2310 in #13522)\n- Others\n  - Remove unnecessary script (by @ziyoung)\n  - Fix error anchor link (by @iamkun in #13753)\n  - Fix inconsistent capitalization in documentation (by @wonderjar)\n  - Add DingDing chat group qr code to readme (by @iamkun in #13957)\n  - Add yarn logs to .gitignore (by @mimimi in #13922)\n  - Remove sponsor duotai (by @island205 in #14156)\n  - Update readme qr code src (by @iamkun in #13960)\n  - Update CDN link, fix typo (by @ziyoung)\n\n### 2.4.11\n\n*2018-11-21*\n\n- Revert pr #13296. Fixed clicking on Menu external causing Submenu collapsed, #13478\n- Adjust small screen (xs) media query breakpoints, #13468 (by @alekoshen712)\n\n### 2.4.10\n\n*2018-11-16*\n\n- Fixed multiple clicks on Select to display the drop-down list, #13268\n- The clear icon for input is not displayed when Form is disabled, #13208\n- Adjust the style of Select, Progress, Autocomplete, Tooltip, Collaspe, TimePicker, #13188 (by @porcelainHeart) #13210 #13266 #13257 #13290 #13347 (by @PanJiaChen)\n- Carousel component added `loop` attribute, #13217\n- When the data of Table changes, the highlighted line will remain, #13200\n- Table header scoped slot can receive parameters, #13263\n- Table's `clearFilter` method supports arguments, #13176\n- Tooltip is no longer created when there is no content in the Table cell, #13152 (by @rongxingsun)\n- The input box contents of the ColorPicker panel can be displayed correctly, #13278\n- ColorPicker no longer triggers form validation when dragging, #13299\n- InputNumber added `select `method, #13286 (by @st-sloth)\n- Autocomplete added `clear` event, #12171(by arthurdenner) #13326\n- You can close Menu by clicking on Menu outside, #13296\n- Form's `validateField` method can receive arguments, #13319\n- Cascader added `visible-change` event, #13415\n- DatePicker added range-separator slot, #13272 (by @milworm)\n- Tree adds `iconClass` and `currentNodeKey` properties, #13337 #13197 (by @isnifer)\n- Progress's` status` added text #13198 (by @ali-master)\n- Fixing tree's `defaultCheckedKeys` caused an error, #13349 (by @dive2Pro)\n\n### 2.4.9\n\n*2018-10-26*\n\n- The parameter of Form's `clearValidate` supports string, #12990 (by @codinglobster)\n- Added type attribute for Badge, #12991\n- Users can use scoped-slot to customize table column header #13012 (by @ivanseidel)\n- Fixed the input box of Select unable to type text under IE, #13034 (by @GaliMU)\n- Select option does not wrap when space is enough, #12329 (by @akki-jat)\n- When dropdown list of Select is expanded, the arrow icon will also display correctly, #12353 (by @firesh)\n- Fixed that the size attribute of Select does not work, #13070\n- Select multiple values can be cleared, #13049 (by @ZSkycat)\n- Fixed the last TabNav unable be deleted, #13039\n- Fixed that TabNav label is not displayed correctly, #13178\n- Added title slot for Alert, #13082 (by @Kingwl)\n- Fixed an issue where the tooltip content in Table was incorrect, #13159 (by @elfman)\n- Optimize the animation of Upload when file is deleted, #12987\n- Adjusted style of InputNumber when control button is not displayed, #13052\n\n### 2.4.8\n\n- Not displaying outline when Switch is focused, #12771\n- Fixed Dropdown's style in ButtonGroup, #12819 (by @bluejfox)\n- Added opened event for Dialog, #12828\n- Fixed the incorrect display order of TabNav, #12846\n- Fixed the problem that Tabs did not scroll to the selected tab, #12948\n- Fixed the problem that the identifier does not display when the Tree node is dragged, #12854\n- The validate event parameter of Form contains the validation message, #12860 (by @YamenSharaf)\n- Fixed DatePicker not to verify the validity of user input time, #12898\n- Fixed the problem that `render-header` attribute of Table header doesn't work, #12914\n\n### 2.4.7\n\n*2018-09-14*\n\n- Fixed DatePicker not triggering form validation, #12328 #12348\n- Fixed DatePicker throwing errors in multiple mode, #12347\n- Fixed incorrect position of DatePicker spinner, #12415 (by @rang-ali)\n- Fixed automatic filling of DatePicker input box, #12521 (by @abdallanayer)\n- Fixed Input not highlighted in Cascader, #12341\n- Fixed wrong order of Tabpane, #12346\n- Fixed incorrect position of ColorPicker cursor, #12376 (by @cnwhy)\n- Fixed the style of Submenu, #2457\n- Fixed not highlighted after Submenu is selected, #12479\n- Fixed incorrect values selected by Cascader, #12508 (by @huangjinqiang)\n- Fixed incorrect value of Pagination input box, #12525\n- Fixed order that Pagination triggers events, #12530\n- Fixed Table Filter not displayed, #12539\n- Fixed Tree unable to delete nodes, #12684\n- Fixed height of Select Input changing in single mode, #12719\n- Fixed style of FormItem label in nested Form, #12748\n- Added `autocomplete` attribute for Input, deprecated `auto-complete`, #12514 (by @axetroy)\n- Added slots-scope for Form to display validation information, #12715 (by @YamenSharaf)\n\n### 2.4.6\n\n*2018-08-09*\n\n- Fixed Table not showing filter icon when `filters` is assigned empty array, #12165\n- Fixed Menu not saving active state when `collapse` is changed, #12178 (by @elfman)\n- Fixed Cascader not escaping special characters for Regexp, #12248\n- Fixed disabled RadioButton showing box-shadow when clicked, #12262\n- Fixed arrow key not effect when default value is `undefined`,#12322\n- Fixed query function of Select not debounced in multi mode, #12181\n- Fixed query keyword of Select disappearing in multi mode, #12304\n- Fixed incorrect width of Dialog when it is displayed in full screen, #12203\n- Fixed incorrect display of Main on IE, #12237\n- Fixed Input triggering two form validations, #12260\n- Fixed adding new Tree node causing nodes to disappear, #12256\n- Fixed Tree node not deleted after dragging, #12279\n- Fixed Popover not visible when InputNumber focuses, #12284\n- Added `popper-append-to-body` attribute for Autocomplete, #12241\n- Added `sync` modifier support for Pagination's `page-size` attribute, #12281\n\n### 2.4.5\n\n*2018-07-26*\n\n- Fixed Table setting `class-name` does not work for `expand` column, #12006\n- Added `toggleAllSelection` method for Table, #12047\n- Fixed wrong position of suffix slot when Input contains Select, #12108\n- Fixed `line-height` of Option unable to set, #12120\n- Fixed TimeSelect with default value of `null` could not be assigned after executing `resetField`, #12010\n- Fixed keydown event which is not arrow key does not work in Tree, #12008\n- Fixed parent node checked in lazy mode, #12106\n- Added `includeHalfChecked` parameter for getCheckedNodes of Tree, #12014\n\n### 2.4.4\n\n*2018-07-13*\n\n- Fixed triggering Select validation after Form resetting, #11837\n- Fixed wrong position of Input `suffix` slot when `suffix` slot with `append` slot, #11951\n- Fixed clearable Input still displaying the clear icon when readonly, #11967\n- Fixed Tree node checked when it's disabled, #11847\n- Fixed Tree's `default-checked-keys` not working, #11971\n- Fixed `empty-text` not visible when Tree node filtered, #11971\n- Fixed the position of oversized `empty-text` in Table, #11965\n- Fixed Table row not be unhighlighted when `current-row-key` is assigned to `null`, #11866\n- Fixed showing filter dropdown when `filters` is an empty array, #11864\n- Fixed Radio's label does not stop event propagation, #11912\n\n### 2.4.3\n\n*2018-07-03*\n\n- Fixed `allow-drop` not working properly when Tree nodes have a custom height, #11797\n- Now you can pass a parameter to the `clearValidate` method of Form, specifying which FormItems' validation results need to be cleared, #11821\n- Added `distinguishCancelAndClose` attribute for MessageBox, #11831\n\n### 2.4.2\n\n*2018-06-26*\n\n- Now `class-name` and `label-class-name` of Table are reactive, #11626\n- Fixed Table still highlighting clicked row when `highlight-current-row` is `false`, #11646\n- Fixed a style bug of ButtonGroup when it has only one `round` or `circle` Button, #11605\n- Fixed style of page size Select of Pagination, #11622\n- Fixed Menu's `open` method error when `collapse` is dynamically changed, #11646\n- Added `activeName` and `oldActiveName` parameters to the before-leave hook of Tabs, #11713\n- Fixed Cascader focused after outside clicked, #11588\n- Fixed Cascader not closing when option is clicked when `change-on-select` is true, #11623\n- Now updating Select's value programmatically will trigger form validation, #11672\n\n### 2.4.1\n\n*2018-06-08*\n\n- Removed Autocomplete's duplicate type declaration, #11388\n- Fixed Select's dropdown arrow style in FireFox when nested in Form, #11427\n- Fixed clear icon of Select still showing when the initial value is `null`, #11460\n- Fixed disabled radio showing box-shadow when clicked, #11462\n- Added `iconClass` attribute for MessageBox, #11499\n- Added `stretch` attribute for Tabs, #11476\n- Fixed rendering order issue of TabPane when Tabs is `lazy`, #11461\n- Fixed Table not retaining current highlight row when expanded, #11464\n- Fixed focusing state when `before-leave` returns a resolved promise, #11386\n- Fixed disabled Popover still creating poppers, #11426\n- Fixed Tree's endless loop when a new node is added in lazy mode, #11430 (by @wangjingf)\n- Added `closed` event for Dialog, #11490\n\n### 2.4.0 Fullerene\n\n*2018-05-28*\n\n#### New features\n- General\n  - Dev tool and bundler is switched to native webpack, #11216\n  - Now you can globally set the initial z-index of popups, #11257\n- Autocomplete\n  - Added `hide-loading` attribute, #11260\n- Button\n  - Now you can use the `size` attribute on circle buttons to control their sizes, #11275\n- InputNumber\n  - Added `precision` attribute, #11281\n- Tabs\n  - Added `before-leave` attribute, #11259\n  - Added `lazy` attribute, #11167(by @Kingwl)\n- Table\n  - Added `sort` method to manually sort the table, #11311\n\n#### Bug fixes\n- Input\n  - Fixed an issue that causes a re-render when using the Chinese IME to quickly input text, #11235 (by @STLighter)\n- Popover\n  - Fixed the console error when the triggering element is Radio or Checkbox, #11265\n- Breadcrumb\n  - Fixed the `to` attribute not supporting dynamic update, #11286\n- Upload\n  - Fixed the console error when a File is resolved in the returned Promise of the `beforeUpload` method, #11297 (by @qusiba)\n- Tooltip\n  - Fixed arrow not positioned correctly when content is empty, #11335\n- Autocomplete\n  - Fixed incorrect input suggestions after deleting keyword quickly, #11323\n- ColorPicker\n  - Fixed `active-change` event incorrectly triggering when picker dropdown is closed, #11304\n- Table\n  - Fixed style error of oversized filter panel, #11314\n  - Fixed currently selected row not retained when the table is sorted, #11348\n- Checkbox\n  - Fixed single checkbox not supporting validation, #11271\n- Radio\n  - Fixed disabled Radio still being selected when pressing space key, #11303\n- MessageBox\n  - Fixed the `el-popup-parent--hidden` class not removed when opening MessageBox in succession, #11371\n\n### 2.3.9\n\n*2018-05-18*\n\n- Fixed when the source data does not have the field specified by a TableColumn's `prop` attribute, an error would occur when the mouse moves into that column's cells, #11137\n- The `lockScroll` attribute of pop up components no longer adds an inline style to the parent element, but instead adds a class name, #11114\n- Fixed the icon of Progress not displaying when its `status` is exception, #11172\n- Fixed options' `disabled` attribute not working in filterable Cascader's filter result list, #11185\n- Fixed an issue where Table's expanded row cannot be collapsed if the data source is updated after its expansion, #11186\n- `setCurrentKey` of Tree now accepts `null` as its param to cancel the currently highlighted node, #11205\n\n### 2.3.8\n\n*2018-05-11*\n\n- Fixed DatePicker panel jumping to the current month after picking a date in a non-current month when `type` is dates, #10973\n- Fixed clearable Input still displaying the clear icon when readonly, #10912\n- Fixed closing the DatePicker panel without changing the value incorrectly triggering the `change` event, #11017\n- Fixed keyboard navigation not working properly when Select has grouped options, #11058\n- Added `prefix` named slot for Select, #11063\n- Added `clearValidate` method for FormItem, #11076\n- Added `checkOnClickNode` attribute for Tree, #11111\n\n### 2.3.7\n\n*2018-04-29*\n\n- Fixed Table not updating its header widths when the scroll bar disappears due to filtering, #10834\n- Fixed clearable Input still showing the clear icon when its initial value is `null`, #10912\n- Fixed incorrect trigger of the `active-change` event after changing ColorPicker's binding value programatically, #10903 (by @zhangbobell)\n- Fixed filterable Select causing an infinite loop when navigating options using keyboard if all options are disabled, #10945\n\n### 2.3.6\n\n*2018-04-21*\n\n- Fixed wrong behavior of Tree's `allow-drop` callback when `type` parameter is used, #10821\n- Now you can properly enter keywords in filterable single Select in IE11, #10822\n- Fixed single Select incorrectly triggering `blur` event after clicking an option, #10822\n\n### 2.3.5\n\n*2018-04-20*\n\n- Fixed incorrect highlights in DatePicker panel when `type` is week, #10712\n- Fixed InputNumber being empty when its initial value is 0, #10714\n- Added `automatic-dropdown` attribute for Select, #10042 (by @Seebiscuit)\n- Fixed disabled Rate's value still being updated by navigation keys, #10726 (by @Richard-Choooou)\n- Now DatePicker's `type` attribute can be `'dates'`, where you can pick multiple dates in one picker, #10650 (by @Mini256)\n- Added `prev-click` and `next-click` events for Pagination, #10755\n- Added `pager-count` attribute for Pagination, #10493 (by @chongjohn716)\n- Added `type` as the 3rd param of Tree's `allow-drop` attribute callback, #10792\n- Now we use ResizeObserver to detect DOM element resizing, #10779\n\n### 2.3.4\n\n*2018-04-12*\n\n- Deleted duplicate `showTimeout` attribute in SubMenu's TypeScript declaration, #10566 (by @kimond)\n- Now you can customize Transfer's data item using scoped slot, #10577\n- Fixed clicking disabled prev and next button of Pagination still triggers `current-change` event, #10628\n- Fixed Textarea displaying `undefined` in SSR when its value is not set, #10630\n- Fixed disabled TabItem style when `type` is border-card, #10640\n- Added `$index` as `formatter`'s fourth param of Table, #10645\n- Fixed CheckboxButton not exported in TypeScript declaration, #10666\n\n### 2.3.3\n\n*2018-04-04*\n\n- Added `shadow` attribute for Card, #10418 (by @YunYouJun)\n- Fixed Badge being hidden when `value` is `0`, #10470\n- Fixed some bugs of draggable Tree, #10474 #10494\n- Added `placement` for Autocomplete, #10475\n- Now `default-time` attribute also works in non-range DateTimePicker, #10321 (by @RickMacTurk)\n- Removed the blue outline of TabItem after the browser blurs or is minimized, #10503\n- Added `popper-append-to-body` attribute for SubMenu, #10515\n- Removed visual feedback when hovering on non-link BreadcrumbItem, #10551\n- Fixed InputNumber's `change` event to ensure the component's binding value is updated in the event handler, #10553\n\n### 2.3.2\n\n*2018-03-29*\n\n- Fixed an Autocomplete regression, #10442\n\n### 2.3.1\n\n*2018-03-29*\n\n- Fixed a regression that `type` of Input is not passed down to the native input element, #10415\n- Added `blur` method for Select, #10416\n\n### 2.3.0 Diamond\n\n*2018-03-28*\n\n#### New features\n- Table\n  - Now `formatter` of TableColumn can be dynamically updated, #10184 (by @elfman)\n  - Added `select-on-indeterminate` attribute, #9924 (by @syn-zeta)\n- Menu\n  - Added `collapse-transition` attribute, #8809 (by @limichange)\n- Input\n  - Added `select` method, #10229\n  - Added `blur` method, #10356\n- ColorPicker\n  - Added `predefine` attribute, #10170 (by @elfman)\n- Tree\n  - Added `draggable`, `allow-drop` and `allow-drag` attributes, and `node-drag-start`, `node-drag-enter`, `node-drag-leave`, `node-drag-over`, `node-drag-end` and `node-drop` events, #9251 #10372 (by @elfman)\n- Form\n  - `validate` method now has a second parameter, containing information of form items that failed the validation, #10279\n  - Added `validate` event, #10351\n- Progress\n  - Added `color` attribute, #10352 (by @YunYouJun)\n- Button\n  - Added `circle` attribute, #10359 (by @YunYouJun)\n\n#### Bug fixes\n- Form\n  - Fixed label of FormItem not align with mixed Input, #10189\n- Menu\n  - Now collapsed Menu will only show the Tooltip when the `title` slot of MenuItem is set, #10193 (by @PanJiaChen)\n- Pagination\n  - Fixed `current-change` event wrongly triggering without user interaction, #10247\n- DatePicker\n  - Now the date and time value in the dropdown panel are correctly formatted based on the `format` attribute, #10174(by @remizovvv)\n- Upload\n  - Fixed `accept` attribute not working when `drag` is true, #10278\n\n### 2.2.2\n\n*2018-03-14*\n\n- Added `clear` event for Input, #9988 (by @blackmiaool)\n- Now manual input of ColorPicker supports `hsl`, `hsv` and `rgb` modes, #9991\n- Fixed DatePicker not triggering `change` event when its initial value is cleared, #9986\n- Now icon class related attributes of Rate support dynamic updates, #10003\n- Fixed Table with fixed columns not updating its height correctly if `max-height` is set, #10034\n- Now DatePicker's range mode supports reverse selection (clicking the end date, then clicking the start date), #8156 (by @earlymeme)\n- Added `disabled` attribute for Pagination, #10006\n- Added `after-enter` and ` after-leave` events for Popover, #10047\n- Fixed Select not triggering validation when user selects an option after executing `resetFields` of Form, #10105\n- Fixed incorrect widths of fixed columns of Table in some cases, #10130\n- Fixed MessageBox inheriting the `title` attribute of its previous instance when called without `title`, #10126 (by @Pochodaydayup)\n- Added `input-size` attribute for Slider, #10154\n- Added `left-check-change` and `right-check-change` events for Transfer, #10156\n\n### 2.2.1\n\n*2018-03-02*\n\n- Fixed Aside, Header and Footer shrinking in some layout, #9812\n- Fixed Table with a `height` attribute not rendering in SSR, #9876\n- Fixed expandable Table not calculating its height when a row is expanded, #9848\n- Fixed `change` event not trigger when manually typing date in DateTimePicker, #9913\n- Fixed Select showing its options when the input box is right-clicked, #9894 (by @openks)\n- Added `tooltip-class` attribute for Slider, #9957\n- Now Select will stay focused after selection, #9857 (by @Seebiscuit)\n- Added `target-order` attribute for Transfer, #9960\n\n### 2.2.0 Graphite\n\n*2018-02-12*\n\n#### New features\n- Menu\n  - Added `popper-class` and `disabled` attributes for SubMenu, #9604 #9771\n  - Horizontal Menu now supports multi-layered SubMenu, #9741\n- Tree\n  - Added `node-contextmenu` event, #9678\n  - Now you can customize node template using scoped slot, #9686\n  - Added `getNode`, `remove`, `append`, `insertBefore`, `insertAfter`, `getCheckedKeys`, `getHalfCheckedNodes`, `getHalfCheckedKeys` methods and `check` event, #9718 #9730\n- Transfer\n  - Added `clearQuery` method, #9753\n- Select\n  - Added `popper-append-to-body` attribute, #9782\n\n#### Bug fixes\n- Table\n  - Fixed clicking expanding icon of an expandable row triggers `row-click` event, #9654\n  - Fixed layout not update when column width is changed by user dragging, #9668\n  - Fixed style issue when summary row co-exists with fixed columns, #9667\n- Container\n  - Fixed container components not stretching in IE11, #9655\n- Loading\n  - Fixed Loading not showing when the value of `v-loading` is changed to true in the `mounted` hook, #9722\n- Switch\n  - Fixed two native click events are triggered when Switch is clicked, #9760\n\n### 2.1.0 Charcoal\n\n*2018-01-31*\n\n#### New features\n- Cascader\n  - Added `focus` and `blur` events, #9184 (by @viewweiwu)\n- Table\n  - The `filter-method` now has a third param `column`, #9196 (by @liyanlong)\n- DatePicker\n  - Added `prefix-icon` and `clear-icon` attributes, #9237 (by @AdamSGit)\n  - Added `default-time` attribute, #9094 (by @nighca)\n  - `value-format` now supports `timestamp`, #9319 (by @wacky6)\n- InputNumber\n  - Now the binding value can be `undefined`, #9361\n- Select\n  - Added `auto-complete` attribute, #9388\n- Form\n  - Added `disabled` attribute, #9529\n  - Added `validateOnRuleChange` attribute, #8141\n- Notificaition\n  - Added `closeAll` method, #9514\n\n#### Bug fixes\n- InputNumber\n  - Fixed value resetting when typing decimal point, #9116\n- Dropdown\n  - Fixed dropdown menu incorrect positioning when the page only has a horizontal scrollbar in some browsers, #9138 (by @banzhuanmei)\n- Table\n  - Fixed an error in calculating number of fixed columns after the column data changes, #9188(by @kolesoffac)\n  - Fixed the border of the last column of the grouped header not properly displayed, #9326\n  - Fixed incorrect positioning of table header in Safari, #9327\n  - Fixed expanded row collapsing when the table data changes, #9462\n  - Fixed unnecessary multiple renders in some conditions, #9426\n  - Fixed column width calculation error when `width` of TableColumn changes, #9426\n- Loading\n  - Fixed Loading not hiding correctly in some conditions, #9313\n- DatePicker\n  - Fixed `focus` method not working in range mode, #9437\n  - Fixed clicking the \"now\" button still selecting the current date even if it is disabled, #9470 (by @wacky6)\n  - Fixed date clamping when navigating, #9577 (by @wacky6)\n- Steps\n  - Fixed style error in IE 11, #9454\n\n#### Breaking changes\n- Menu\n  - The popup menu in `collapse` mode now appends directly to `body`, so that it is visible when nested in Aside, #9263\n- Table\n  - Now checking the checkboxes in multi-selection Table doesn't trigger `row-click` event, #9467\n- Loading\n  - The `z-index` of non-fullscreen loading mask is changed to 2000. The `z-index` of fullscreen loading mask will update dynamically with the popup components, #9522\n- Dropdown\n  - `show-timeout` and `hide-timeout` attributes now only works when trigger is `hover`, #9573\n\n### 2.0.11\n\n*2018-01-08*\n\n- Fixed border color issue of Select when in `prepend` or `append` slot of Input, #9089\n- Fixed `remove-tag` event's parameter of Select, #9090\n- Added `show-timeout` and `hide-timeout` attributes for SubMenu, #8934 (by @HugoLew)\n- Fixed missing Tooltip style of `show-overflow-tooltip` when Table is imported on demand, #9130\n- Fixed Table column's sorting malfunctioning after `clearSort` is executed on that column, #9100 (by @zEmily)\n- i18n config file for Czech is renamed from `cz` to `cs-CZ`, #9164\n\n### 2.0.10\n\n*2017-12-29*\n\n- Fixed wrong max height calculation of Table when fixed column and summary row co-exist, #9026\n- Fixed uncompiled color style of empty text in Table, #9028\n- Now DatePicker only emits `change` event when value is truly changed, #9029 (by @remizovvv)\n- Added `tabindex` attribute for Input, #9041 (by @dicklwm)\n\n### 2.0.9🎄\n\n*2017-12-24*\n\n- Added `before-remove` hook function for Upload, #8788 (by @firesh)\n- Fixed initial value of `error` not working for FormItem, #8840\n- Now Loading directive supports custom class name by assigning `element-loading-custom-class` attribute, #8826 (by @earlymeme)\n- Fixed CarouselItem becoming invisible when data is asynchronously updated, #8921\n- Added `renderAfterExpand` attribute for Tree, #8972\n\n### 2.0.8\n\n*2017-12-12*\n\n- Added Spanish documentation\n- Fixed `show-timeout` of Dropdown not working when trigger is click, #8734 (by @presidenten)\n- Fixed Form validation timing for rules whose trigger is blur, #8776\n- Fixed blur event of ranged DatePicker, #8784\n- `format` of TimePicker now supports AM/PM, #8620 (by @firesh)\n\n### 2.0.7\n\n*2017-11-29*\n\n- Fixed disabled text button style, #8570\n\n### 2.0.6\n\n*2017-11-29*\n\n- Fixed style bug of Table's sorting icons, #8405\n- Fixed trigger mechanism for Popover when its `trigger` is manual, #8467\n- Added `prefix-icon` and `suffix-icon` attributes for Autocomplete, #8446 (by @liyanlong)\n- Added `separator` attribute for Cascader, #8501\n- Added `clearable` attribute for Input, #8509 (by @lbogdan)\n- Added `background` attribute for Pagination, #8553\n\n### 2.0.5\n\n*2017-11-17*\n\n- Fixed Popover, Tree, Breadcrumb and Cascader regression in 2.0.4, #8188 #8217 #8283\n- Fixed memory leak of clickoutside directive, #8168 #8225 (by @badpunman @STLighter)\n- Fixed multiple Select height when its value is cleared, #8317 (by @luciy)\n- Added `collapse-tags` attribute for multiple Select to replace tags with one line of text, #8190\n- Fixed high CPU consumption caused by hidden Table, #8351\n- Now you can use `doLayout` method of Table to update its layout, #8351\n\n### 2.0.4\n\n*2017-11-10*\n\n- Improved accessibility for Cascader, Dropdown, Message, Notification, Popover, Tooltip and Tree\n- Fixed Container resize when the width of viewport decreases, #8042\n- Fixed Tree's `updateKeyChildren` incorrectly deleting child nodes, #8100\n- Fixed bordered CheckboxButton's height when nested in a Form, #8100\n- Fixed Menu's parsing error for custom colors, #8153 (by @zhouyixiang)\n\n### 2.0.3\n\n*2017-11-03*\n\n- Fixed `editable` and `readonly` attributes for ranged DatePicker, #7922\n- Fixed style error of nested Tabs, #7941\n- Fixed style error of the last Step of vertical Steps, #7980\n- Fixed trigger timing of `current-change` event for Pagination, #7995\n- Fixed unregistered Tooltip in Menu, #7995\n\n### 2.0.2\n\n*2017-10-31*\n\n- Now right-clicking the buttons of InputNumber won't change its value, #7817\n- `validate` method of Form can now wait for asynchronous validations before executing its callback, #7774 (by @Allenice)\n- Fixed range selection of DatePicker not working in Chromium 53-57 browsers, #7838\n- Fixed missing preview and delete icons of Upload when its `list-type` is picture-card, #7857\n- Added `sort-by` attribute for TableColumn, #7828 (by @wangfengming)\n- Fixed DatePicker sometimes displaying wrong year number when selecting the first week in week mode, #7860 (by @hh23485)\n- Fixed icon style error of vertical Steps, #7891\n- The hot area for node arrows in Tree is expanded, #7891\n\n### 2.0.1\n\n*2017-10-28*\n\n- Fixed style error of RadioButton and CheckboxButton, #7793\n- Fixed TimePicker not respond to mouse scroll in some conditions, #7811\n- Fixed incomplete styles of some components when imported on demand, #7811\n\n### 2.0.0 Carbon\n\n*2017-10-27*\n\n#### New features\n- General\n  - A new theme: `theme-chalk`\n  - Accessibility of the following components are improved: Alert, AutoComplete, Breadcrumb, Button, Checkbox, Collapse, Input, InputNumber, Menu, Progress, Radio, Rate, Slider, Switch, Upload\n  - Added TypeScript typings\n  - All existing icons are redesigned. Some new icons are added\n  - Added a series of breakpoint-based utility classes that hide elements when the viewport size meets certain conditions\n  - Added layout components: Container, Header, Aside, Main, Footer\n  - Now you can configure component sizes globally. When importing Element, you can add a global config object with a `size` prop to configure default sizes for all components.\n- Button\n  - Added `round` attribute. It's used for round-cornered Buttons #6643\n- TimeSelect\n  - Now can be navigated by `Up` and `Down`, and hitting `Enter` selects the time #6023\n- TimePicker\n  - Now can be navigated by arrow keys, and hitting `Enter` selects the time #6050\n  - Added `start-placeholder` and `end-placeholder`. They're placeholders for the two input boxes in range mode #7169\n  - Added `arrow-control` attribute to spin the time with arrows #7438\n- Tree\n  - Now child nodes don't render before the first expand #6257\n  - Added `check-descendants` attribute. It determines if child nodes are checked when checking their parent node in `lazy` mode #6235\n- Tag\n  - Added `size` attribute #7203\n- Datepicker\n  - Now `timeFormat` can format the TimePicker when type is set to `datetimerange` #6052\n  - Added `start-placeholder` and `end-placeholder`. They're placeholders for the two input boxes in range mode #7169\n  - Added `value-format` attribute to customize the format of the binding value, #7367\n  - Added `unlink-panels` attribute to unlink the two date panels when selecting a date range\n- MessageBox\n  - Added `closeOnHashChange` attribute #6043\n  - Added `center` attribute so that the content can be centered #7029\n  - Added `roundButton` attribute to display round Buttons #7029\n  - Added `dangerouslyUseHTMLString` attribute. When set to `true`, `message` will be parsed as HTML string<sup>*</sup> #6043\n  - Added `inputType` attribute to assign type for the inner input box, #7651\n- Dialog\n  - Added `width`、`fullscreen`、`append-to-body` attributes. Now Dialog can be nested\n  - Added `center` attribute so that the content can be centered #7042\n  - Added `focus-after-closed`、`focus-after-open` to improve accessibility #6511\n- ColorPicker\n  - Now you can type colors in the input box #6167\n  - Added `size` and `disabled` attributes #7026\n  - Added `popper-class` attribute #7351\n- Message\n  - Now color of the icons can be overridden by CSS #6207\n  - Added `dangerouslyUseHTMLString` attribute. When set to `true`, `message` will be parsed as HTML string<sup>*</sup> #6207\n  - Added `center` attribute so that the content can be centered #6875\n- Notification\n  - Added `position` attribute to configure where Notification pops up #6231\n  - Added `dangerouslyUseHTMLString` attribute. When set to `true`, `message` will be parsed as HTML string<sup>*</sup> #6231\n  - Added `showClose` attribute to hide the close button #6402\n- Rate\n  - Added `show-score` attribute to determine if current score is displayed #6295\n- Tabs\n  - Added `tab-position` attribute #6096\n- Radio\n  - Added `border` and `size` attributes #6690\n- Checkbox\n  - Added `border` and `size` attributes #6690\n- Alert\n  - Added `center` attribute so that the content can be centered #6876\n- Menu\n  - Added `background-color`, `text-color` and `active-text-color` attributes #7064\n  - Added `open` and `close` methods to open and close SubMenu programmatically, #7412\n- Form\n  - Added `inline-message` attribute to determine if the validation message is displayed in inline style #7032\n  - Added `status-icon` attribute to display a feedback icon when validated #7032\n  - Form and FormItem now have a `size` attribute. Inner components will inherit this size if not specified on themselves, #7428\n  - `validate` method will now return a promise if the callback is omitted, #7405\n  - Added `clearValidate` method for clearing validating results for all form items, #7623\n- Input\n  - Added `suffix` and `prefix` named slots, `suffixIcon` and `prefixIcon` attributes to add contents inside the input box #7032\n- Breadcrumb\n  - Added `separator-class` attribute to support icons as item separators #7203\n- Steps\n  - Added `simple` attribute to activate simple-styled Steps #7274\n- Pagination\n  - Added `prev-text` and `next-text` attributes to customize texts of previous page and next page #7005\n- Loading\n  - Now you can customize spinner icon and background color with `spinner` and `background` prop, #7390\n- Autocomplete\n  - Added `debounce` attribute, #7413\n- Upload\n  - Added `limit` and `on-exceed` attributes to limit the amount of files, #7405\n- DateTimePicker\n  - Added `time-arrow-control` attribute to activate `arrow-control` of the nesting TimePicker, #7438\n- Layout\n  - Added a new breakpoint `xl` for viewport wider than 1920px\n- Table\n  - Added `span-method` attribute for merging cells\n  - Added `clearSort` method to clear sorting programmatically\n  - Added `clearFilter` method to clear filter programmatically\n  - For expandable rows, when a row is expanded, a `.expanded` class will be added to its class list, so that you can customize its style\n  - Added `size` attribute\n  - Added `toggleRowExpansion` method to expand or collapse expandable rows programmatically\n  - Added `cell-class-name` attribute to assign class name for cells\n  - Added `cell-style` attribute to style cells\n  - Added `header-row-class-name` attribute to assign class name for header rows\n  - Added `header-row-style` attribute to style header rows\n  - Added `header-cell-class-name` attribute to assign class name for header cells\n  - Added `header-cell-style` attribute to style header cells\n  - TableColumn's `prop` attribute now accepts `object[key]` notations\n  - Added `index` attribute for TableColumn to customize row indices\n- Select\n  - Added `reserve-keyword` attribute for reserving current search keyword after selecting an option\n\n#### Bug fixes\n- DatePicker\n  - Fixed `v-model` returning the second day of the selected week in week mode #6038\n  - Fixed the first input being cleared in `daterange` type #6021\n- DateTimePicker\n  - Fixed DateTimePicker and TimePicker affecting each other when picked #6090\n  - Fixed hour and second can be beyond limit when selecting time #6076\n- TimePicker\n  - Fixed `v-model` not update correctly when blurred #6023\n- Dialog\n  - Fixed texts having blurry edges when opening and closing nesting dropdowns #6088\n- Select\n  - Improved performance. Now Vue dev-tool won't crash when a large number of Selects are destroyed #6151\n- Table\n  - Fixed a bug that Table remains hiding when its parent element appears from `display: none`\n  - Fixed Table expanding its width when its parent element has `display: flex`\n  - Fixed a bug that fixed columns of a Table with `append` slot would disappear when data is dynamically fetched\n  - Fixed `expand-row-keys` attribute not working with initial value\n  - Fixed filter failing when `data` updates\n  - Fixed a calculation error of fixed columns layout with grouped headers\n  - Fixed a dynamic `max-height` bug\n  - Fixed some style calculation errors\n\n#### Breaking changes\n- General\n  - Removed `theme-default`\n  - Compatible with Vue 2.5.2+ and IE 10+\n  - `change` event of form components and `current-change` event of Pagination now only trigger on user interaction\n  - `size` attribute of Button and form components now accept `medium`, `small` and `mini`\n  - To facilitate the use of third-party icons, `icon` attribute of Button and Steps, `prefix-icon` and `suffix-icon` attributes of Input now require a full class name\n- Dialog\n  - Removed `size` attribute. Now the size of Dialog can be configured by `width` and `fullscreen`\n  - Now the visibility of Dialog cannot be controlled by `v-model`\n- Rate\n  - `text-template` is renamed to `score-template`\n- Dropdown\n  - `menu-align` is renamed to `placement`. Now it supports more positions\n- Transfer\n  - `footer-format` is renamed to `format`\n- Switch\n  - Attributes starting with `on-*` will be parsed to events in JSX, making all `on-*` attributes of Switch not\n  able to work in JSX. So `on-*` attributes are renamed to `active-*`, and accordingly `off-*` attributes are renamed to `inactive-*`. This change affects the following attributes: `on-icon-class`, `off-icon-class`, `on-text`, `off-text`, `on-color`, `off-color`, `on-value`, `off-value`\n  - `active-text` and `inactive-text` attributes now don't have default values\n- Tag\n  - `type` attribute now accepts `success`, `info`, `warning` and `danger`\n- Menu\n  - Removed `theme` attribute. The color of Menu can be configured using `background-color`, `text-color` and `active-text-color`\n- Input\n  - Removed `icon` attribute. Now the suffix icon can be configured using `suffix-icon` attribute or `suffix` named slot\n  - Removed `on-icon-click` attribute and `click` event. Now to add click handler on icons, please use named slots\n  - `change` event now behaves like the native input element, which triggers only on blur or pressing enter. If you need to respond to user input in real time, you can use `input` event.\n- Autocomplete\n  - Removed `custom-item` attribute. Now the template of input suggestions can be customized using `scoped slot`\n  - Removed `props` attribute. Now you can use `value-key` attribute to designate key name of the input suggestion object for display\n- Steps\n  - Removed `center` attribute\n  - Now the Steps will fill its parent container by default\n- DatePicker\n  - The params of DatePicker's `change` event is now the binding value itself. Its format is controlled by `value-format`\n- Table\n  - Removed support for customizing column template using `inline-template`\n  - `sort-method` now aligns with `Array.sort`. It should return a number instead of a boolean\n  - `append` slot is moved outside the `tbody` element to avoid multiple rendering\n  - `expand` event is renamed to `expand-change`\n  - The params of `row-class-name` and `row-style` method is now an object\n\n##\n<i><sup>*</sup> 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.</i>\n"
  },
  {
    "path": "CHANGELOG.es.md",
    "content": "## Changelog\n\n### 2.15.14\n\n*2023-08-24*\n\n#### Bug fixes\n- Img\n  - Delete referrerpolicy prop (#22651 by @xinguanhua)\n#### Optimization\n- Docs\n  - Update readme and website example links (#22642 by @lyfeyaj)\n  - Update popper links (#22539 by @brizer)\n- I18n\n  - Update translation of Spanish (#22430 by @jcardus)\n  - Add sr-Latn translation (#22567 by @N-M)\n  - Update Uzbek translation (#22390 by @akahon)\n- Statistics\n  - Fix doc; Optimized code (#22384 by @webvs2)\n- Table\n  - Add highlight selection row (#22382 by @wangdaodao)\n\n### 2.15.13\n\n*2023-02-12*\n\n#### Bug fixes\n- Docs\n  - Fix Statistic docs (#22383 by @JUST-Limbo) \n  - Fix Input docs (#22093 by @lm312)  \n  - Fix en-US docs (#22268 #22269 #22270 by @Hazel-Lin)  \n  - Fix Pagination docs (#22288 by @xujintai123)\n  - Fix: Links docs (#22370 by @itmier)    \n- Statistics\n  - fix slot display bug  (#22375 by @webvs2)\n- Chore\n  - missing web-type after publishing (#22271 by @loosheng)\n#### Optimization\n- InputNumber\n  - Fix touch one click trigger twice on the window touch pad (#22185 by @mrsai)\n- Image\n  - Add initialIndex prop (#22346 by @inkroom) \n- Statistics\n  - Updated countdown feature to localize lodash Closes (#22260 by @webvs2)\n  - Update code and doc (#22276 by @webvs2)\n- Other\n  - fix web-types type props (#22281 by @whzxc)\n\n### 2.15.12\n\n*2022-11-16*\n\n#### Bug fixes\n- Statistic：\n  - Fixed the thousandth bit bug (#22252 by @webvs2)\n- Other\n  - Fix 2.15.11 element-theme-chalk publish fail bug\n\n### 2.15.11\n\n*2022-11-15*\n\n#### Bug fixes\n- Docs\n  - Fix Radio docs (#22178 by @bchen1029) \n  - Fix Progress docs\n#### Optimization\n- I18n\n  - Update translation of Malaysian (#22185 by @z4q)\n  - Update translation of Norwegian (#22145 by @Barsnes)\n- Progress\n  - Add defineBackColor and textColor prop (#22089 by @lm312)\n- Statistics\n  - Add new component Statistics (#22159 by @webvs2)\n- Other\n  - Add Web Types to improve code assistance in WebStorm IDE and other JetBrains IDEs (#22135 by @piotrtomiak)\n\n### 2.15.10\n\n*2022-09-13*\n\n#### Bug fixes\n\n- DatePicker\n  - Fix props placement error (#21908 by @lqzhgood)\n- Loading\n  - Fix sticky DOM error (#22087 by @zzjjhh001)\n- Docs\n  - Fix Popover docs (#22083 by @lm312)\n  - Fix Skeleton docs (#22092 by @lm312)\n  - Fix DatePicker docs (#21970 by @guojiongwei)\n- Tree: \n  - fix lazy-load default check problem (#21934 by @kiss-yu)\n\n#### Optimization\n\n- I18n\n  - Add translation of Sinhalese (#21936 by @sayuri-gi)\n  - Update translation of Spanish (#21924 by @jcardus)\n  - Add translation of Malaysian (#22028 by @iorange0411)\n  - Update translation of Swahili (#21904 by @Cholowao)\n- Utils\n  - update date-util.js (#22099 by @Due07)  \n- DatePicker\n  - add months And years type (#21918 by @akiko123456)\n\n### 2.15.9\n\n*2022-06-02*\n\n#### Bug fixes\n\n- Table\n  - Fix Tabl-header shake bug (#21863 by @bofeng)\n  - Fix when partial import  show `el-checkbox not imported` error (#21828 by @bobohuochai)\n- FormItem\n  - Fix  change rules  verification not reset bug (#21892 by @bofeng)\n- Cascader\n  - Fix change options unexpect error (#21759 by @louiebb)\n- Docs\n  - Fix Popover docs (#21843 by @lod61)\n  - Fix Calendar docs (#21814 by @GoJam11)\n  - Fix TimePicker docs (#21803 by @Alanscut)\n  - Fix DatePicker docs (#21877 by @Nirvanaiu)\n- Other\n  - Fix codepen display bug (#21863 by @bofeng)\n\n#### Optimization\n\n- I18n\n  - Add translation of Swahili (#21895 by @quilltouch)\n- Chore\n  - Use launch-editor-middleware in dev environment (#21633 by @polemices)\n- DatePicker & Cascader\n  - Optimize the dropdown animation direction (#21806 by @XivLaw)\n- Tooltip\n  - Optimize `getFirstElement` code (#21886 by @zhankang)\n- Input\n  - Optimize scss code (#21558 by @cheese-git)\n\n### 2.15.8\n\n*2022-04-12*\n\n#### Bug fixes\n\n- Drawer\n  - Fix appendToBody failure problem (#21264 by @cs1707)\n- Switch\n  - Fix toggling value problem(#19473 by @EdwinBetanc0urt)\n- Docs\n  - Fix input docs (#21723 by @justforuse)\n  - Fix DatePicker docs (#21663 by @justforuse)\n  - Fix Skeleton docs (#21601 by @yanwydxf)\n- Others\n  - Fix vue version (#21736 by @ckvv)\n\n#### Optimization\n\n- I18n\n  - add translation of Azerbaijani (#21012 by @ricardotondello)\n  - update translation of Slovenian (#21729 by @patik123)\n  - update translation of Slovak (#21711 by @sjaustirni )\n  - add translation of Icelandic (#21709 by @aronhr)\n  - add translation of Bengali (#21485 by @llwwtt)\n\n#### Others\n\n- Due to compatibility considerations, the PR on node-sass (#21019 by @linxsbox) of 2.15.7 release has been withdrawn and will be published in an appropriate version after re-evaluation.\n\n### 2.15.7\n\n*2021-11-18*\n\n#### Bug fixes\n\n- Select\n  - fix click icon triggering dropdown (#21314 by @dennyak47)\n  - fix keydown event when composition (#21336 by @bchen1029)\n- Badge\n  - fix type class when is-dot (#21308 by @adaex)\n- Form\n  - validate method reject error info (#21374 by @cs1707)\n- Table\n  - fix resizeObserver loop limit exceeded (#21255 by @tomieric)\n  - fix toggleAllSelection bug when table is empty (#21456 by @cs1707)\n  - optimize performance (#21330 by @cs1707)\n- Button\n  - fix disabled priority (#21375 by @cs1707)\n- Descriptions\n  - fix label slot bug (#21462 by @cs1707)\n- SASS\n  - replace node-sass with dart-sass (#21019 by @linxsbox)\n- Docs\n  - fix skeleton typos (#21408 by @zhhbstudio)\n\n### 2.15.6\n\n*2021-09-02*\n\n#### Bug fixes\n\n- Cascader\n  - fix a bug that makes the browser jitter in zoom mode (#21207 by @cs1707)\n  - optimize performance (#21231 by @cs1707)\n- Select\n  - fix long text overflow in multiple mode (#21237 by @cs1707)\n- Dropdown\n  - add disabled property (#21235 by @mshioda)\n- Radio\n  - fix checked state when browser go back (#21250 by @cs1707)\n- Descriptions\n  - fix type declaration (#21265 by @adaex)\n  - avoid table style conflict (#21254 by @adaex)\n- Drawer\n  - fix append to body (#21264 by @cs1707)\n- Local\n  - fix italian mistake (#21012 by @ricardotondello)\n\n### 2.15.5\n\n*2021-08-04*\n\n#### Bug fixes\n\n- Select\n  - fix resetInputHeight (#21201 by @cs1707)\n\n### 2.15.4\n\n*2021-08-03*\n\n#### New features\n\n- Descriptions \n  - add description component (#21129 by @cs1707)\n- Result \n  - add result component (#21171 by @cs1707)\n\n#### Bug fixes\n\n- Utils \n  - fix isScroll (#21098 by @canvascat)\n- Translation \n  - update it.js (#21133 by @bliberi)\n- RadioGroup \n  - fix RadioGroup used in component causes exception #17908 (#20783 by @lceric)\n- Message \n  - fix message[type] (#21088 by @cs1707)\n- Carousel \n  - reset the timer when setActiveItem method is called (#20846 by @Nekojita1)\n- Cascader \n  - fix emitPath (#21185 by @cs1707)\n- Select \n  - fix select filterable bug (#17494 by @profore)\n  - fix a bug that makes the browser jitter in zoom mode (#21197 by @cs1707)\n- Tree \n  - fix insertChild (#21194 by @cs1707)\n\n### 2.15.3\n\n*2021-06-29*\n\n#### New features\n\n- Skeleton\n  - add skeleton component (#21038 by @cs1707)\n- Empty\n  - add empty component (#21080 by @cs1707)\n\n#### Bug fixes\n\n- Local\n  - fix week translations for hr locale (#21040 by @cs1707)\n- Table\n  - fix lazy load data (#21041 by @cs1707)\n- Docs\n  - fix form hide-required-asterisk description (#21045 by @cs1707)\n- Drawer:\n  - fix destroy (#20715 by @zj9495)\n- Row\n  - fix align top (#20963 by @cs1707)\n- Select\n  - fix the bug when the value is Boolean (#21052 by @cs1707)\n- Calendar\n  - fix first-day-of-week (#21057 by @cs1707)\n- Utils\n  - fix isScroll (#21065 by @cs1707)\n  - fix(utils.dom by @fw6)\n- TypeScript\n  - add CascaderPanel export type (#21070 by @qige2016)\n  - add spinner.d.ts (#21090 by @qige2016)\n  \n### 2.15.2\n\n*2021-05-28*\n\n#### Bug fixes\n\n- Image\n  - fix z-index and keydown event add stopPropagation (#20859 by @cs1707)\n- Input\n  - fix show password cursor (#20870 by @cs1707)\n  - fix show password icon in edge (#20902 by @cs1707)\n- Carousel\n  - fix interval and scale bug (#20931 by @cs1707)\n- Cascader\n  - fix delete tag bug (#20939 by @cs1707)\n- Drawer\n  - add overflow auto (#20948 by @cs1707)\n- Others\n  - fix isFunction (#20912 by @cs1707)\n\n### 2.15.1\n\n*2021-02-23*\n\n#### Bug fixes\n\n- Drawer\n  - bugfix (by @cs1707)\n- Image\n  - fix incorrect image object fit ratio in IE (#19583 by @charlie0228)\n- Cascader\n  - fix cascader panel active path (#20730 by @cs1707)\n- Calendar \n  - fix calendar component i18n bug (#20758 by @iamkun)\n- ColorPicker\n  - fix bugs (by @UxieVerity)\n\n#### Optimization\n\n- Doc\n  - update Axure resource v2.1.0 (by @iamkun)\n### 2.15.0\n\n*2021-01-15*\n\n#### Bug fixes\n\n- Select\n  - Fix placeholder i18n bug (#17644 by @nzh63)\n- Popconfirm\n  - Popconfirm i18n bug by @iamkun\n- Drawer\n  - Fix focus bug (#20626 by @cs1707)\n- Image\n  - Preview optimization (#20652 by @cs1707)\n\n#### Optimization\n\n- Doc\n  - Fix typo in french translation of datetime-picker.md (#20543 by @lonk)\n  - Add format attribute description to the progress component (#20641 by @cs1707)\n\n### 2.14.1\n\n*2020-11-11*\n\n#### Bug fixes\n\n- Popover\n  - Compatible with Vue 2.6 new v-slot syntax (#20424 by @iamkun)\n\n#### Optimization\n\n- I18n\n  - Update Arabic translation (#20202 by @elkattan)\n  - Update Uighur translation (#20177 by @IlhamTahir)\n\n### 2.14.0\n\n*2020-10-29*\n\n#### Breaking changes\n\n- Popconfirm\n  - Rename event name to `confirm`, `cancel` (#20240 by @hugiron)\n\n#### Bug fixes\n\n- Progress\n  - Fix attribute error (#19985 by @Caaalabash)\n\n#### Optimization\n\n- I18n\n  - Update Russian translation (#19451 by @yangirov)\n  - Update Khmer translation (#20077 by @Sovai)\n  - Update Ukrainian translation (#20344 by @MammutAlex)\n\n### 2.13.2\n\n*2020-05-18*\n\n#### Corrección de errores\n\n- Autocomplete\n  - Arreglado el error cuando se daba el evento change (#19200 by @sxzz)\n- Image\n  - Actualizado el estado de error  (#19194 by @lhx6538665)\n\n#### Optimización\n\n- I18n\n  - Actualización de la traducción del popconfirm al Ruso (#19220 by @Opppex)\n  - Actualización  de la traducción al vi (#19244 by @quangln2810)\n  - Actualización de la traducción al Catalán y al Español (#19296 by @Ismaaa)\n  - Actualización de la traducción al Indonesio (#19320) by @therour)\n  - Actualización de la traducción al Portugués Brasileño (#19374 by @diegomengarda)\n\n\n### 2.13.1\n\n*2020-04-13*\n\n#### Nuevas características\n- Autocomplete\n  - Agregado el evento change (#17913 by @sxzz)\n\n#### Corrección de errores\n\n- Autocomplete\n  - Solucionado el error de la sugerencia en textarea (#18478 by @Roojay)\n- Carousel\n  - Arreglado el error de escritura de la consola (#18264 by @IceFox)\n- Image\n  - Solucionado el error de que no se mostraba el preview si no existía el src  (#18975) (#19130 by @luckyCao)\n  - Arreglado el problema de que el shortcut key no funcionaba la segunda vez (#18983) (#19156 by @luckyCao)\n  - No muestra la imagen cuando preview es falso (#18967 by @inooNgt)\n- Transfer\n  - Corregida la altura (line-height) incorrecta del primer elemento del el-transfer cuando era usado con el-form-item (#18917 by @Hanx)\n- InputNumber\n  - Calculo correcto de inputNumberDisabled (#18439 by @ashuser-pendo)\n- Tarea\n  - Se quito la introducción del index (#19155 by @iamkun)\n- Documentación\n  - Actualización de la documentación de Popconfirm (#18324 by @iamkun)\n  - Arreglado el error tipográfico de la documentación de Fix step-strictly (#18705 by @dream2023)\n  - Corregido un type error en la documentación de steps component (#17555 by @haoranyu)\n\n### 2.13.0\n\n*2019-11-26*\n\n#### Nuevas características\n\n- Popconfirm\n  - Agregado componente popconfirm (#17548 by @iamkun)\n\n#### Corrección de errores\n\n- BackTop\n  - Se usa cubic bezier para el scroll (by @lon)\n- DatePicker\n  - Arreglado el fallo cuando solo se elegía fecha mínima en un rango de fechas (#17191 by @smk0621)\n- Select\n  - Arreglado los casos de test del select (by @msidolphin)\n- Tree\n  - Agregado font-size para el estilo del texto cuando esta vacío el tree (#17094 by @spengjie)\n- Table\n  - La cabecera de la columna puede modificarse (#17291 by @ziyoung)\n  - Se actualizo el estilo de la cabecera de la tabla de la celda  (#17284 by @ziyoung)\n  - Se soluciono el problema de height de la cabecera de la tabla después de un filtro (#17348 by @ziyoung)\n  - Corregido el estilo de la fila que con display no funcionaba (#17002 by @a631807682)\n  - Arreglado que la cabecera de la tabla no se mostraba (#17341 by @ziyoung)\n- Calendar\n  - La importación de el-button y el-button-group (#17376 by @masongzhi)\n- MessageBox\n  - Corregido el error de posición del icono (#17410 by @nullptru)\n- TimePicker\n  - Establecido el rango de selección después de hacer scroll (#16868 by @mattheyan)\n- Message\n  - Corregido el offsetHeight al cerrar la instancia（#17564） (#17852 by @gzwgq222)\n- Form\n  - La función de llamada de validateField es opcional (#17314 by @CarterLi)\n- Cascader\n  - Corregida la compatibilidad con TypeScript 3.7 (#17881 by @CarterLi)\n- Menu\n  - Corregido el error de la ruta de navegación duplicada cuando se usaba vue-router@^3.1.0 (#17269 by @iamkun)\n- Dropdown\n  - Actualización del tipo de archivo (#17550 by @iamkun)\n- Progress\n  - Agregada la prop strokeLinecap (#17552 by @iamkun)\n- InfiniteScroll\n  - Salto del disparo de evento en elementos invisibles (#17553 by @iamkun)\n- Image\n  - Comportamiento perfecto de personalización de imágenes (#16985 by @luckyCao)\n  - Corregida la pagina cuando se hace preview de imágenes grandes (#16796 by @luckyCao)\n- Drawer \n  - Corregido el fallo del append-to-body del drawer que no funcionaba (#16953 by @JeremyWuuuuu)\n- Select\n  - Corregido:  ahora muestra el tag o el valor vacío (17199 by @luckyCao)\n- Scrollbar\n  - Arreglado el ancho del scroll en FireFox  (#18091 by @iamkun)\n  \n#### Optimización\n\n- I18n\n  - Actualizado sv-SE.js (#17926 by @FOLLGAD)\n  - Actualizada la documentación para francés para el componente avatar (#17762 by @blombard)\n- Docs\n  - Arreglada la typografia de time-select (#17250 by @wacky6)\n  - Arreglado en Drawer, ahora el atributo value acepta tipografías en español (#17122 by @haoranyu)\n  - Actualización del Changelog 2.12.0 al español (#17364 by @Gonzalo2310)\n  - Arreglo de la tipografía del Changelog (#17874 by @renlixin)\n  - Arreglada la demo de Loading (#17862 by @MBearo)\n  - Agregado el evento input en los inputs de Table (#18061 by @zhouxinyong)\n  - Eliminado el evento repetitivo change de los input (#18085 by @zhouxinyong)\n\n### 2.12.0\n\n*2019-08-29*\n\n#### Nuevas características\n\n- Popover\n  - Agregada la prop close-delay  (#16671 by @LachlanStuart)\n- Theme\n  - Añadida la extensión Chrome: Element Theme Extensión (#16686 by @iamkun)\n- Icon\n  - Añadido font-display a la declaración @font-face (#16805 by @iamfaizalandyka)\n\n#### Corrección de errores\n\n- Carousel\n  - Corregido el valor emitido por onChange (#16705 by @iamkun)\n- Notification\n  - Corrección de la modificación del objeto de opción entrante (#16704 by @iamkun)\n- DatePicker\n  - Agregado el className para la opción picker (#16632 by @iamkun)\n- DateTimePicker\n  - Corrección del  time-spinner que no se desplazaba a la posición correcta (#16854 by @jesse-li)\n- Table\n  - Evitar la propagación del click después del arrastre (#16850 by @ziyoung)\n  - Corregido una error en chrome que se producía cuando el css de thead tenia display: none  (#16956 by @luckyCao)\n  - Corregida la altura incorrecta de los bloques vacíos  (#16861 by @ziyoung)\n  - No hay lanzamiento de error cuando se llama a toggleExpansion (#16304 by @yyjjqq94)\n  - No se lanza el evento sort-change cuando esta montado (#17113 by @a631807682)\n  - Corregido que el setCurrentRow no borraba la linea resaltada (#16879 by @ziyoung)\n  - Corregido que expand-row-keys no funcionaba cuando los datos eran cargados asincrónicamente (#16899 by @ziyoung)\n  - Establecido toggleAllSelection como propiedad instanciada (#17137 by @ziyoung)\n- Tree\n  - Corregida la distancia entre label y checkbox (#16799 by @Hazlank)\n- Tabs\n  - Corregida la posición incorrecta de los item's del Tab (#16520 by @victorting)\n  - Corregido el error de que la pestaña activada estaba fuera del rango visual (#17033 by @nullptru)\n- Calendar\n  - Arreglado el problema de los días de la semana con i18n (#16772 by @ubitoffee)\n  - Corregido el error de localización (#17208 by @iamkun)\n- Cascader\n  - Corregido un error de visualización del CascaderPanel  (#16716 by @zhangHongEn)\n  - Corregido el problema de disable status y close button (#16224 by @yyjjqq94)\n- Input\n  - Arreglado el evento de composición coreana (#15069 by @MoonHyuk)\n  - Arreglado el evento click del botón clear que no se lanzaba cuando se usaba v-loading (#16576 by @a631807682)\n- Select\n  - No cambiaba el dropdown cuando se filtraba (#17205 by @luckyCao)\n- Transfer\n  - Arreglado un error de estilo (#17206 by @iamkun)\n- Dialog\n  - Actualizada las variables Sass  (#16365 by @haoranyu)\n- RadioGroup\n  - No produce HTML invalido en la tabla si el atributo 'is' es especificado (#17070 by @nullptru)\n- Divider\n  - Soporta clases personalizadas (#17078 by @island205)\n\n#### Optimización\n\n- Checkbox\n  - Mejorada la experiencia del lector de pantalla (#16575 by @tylertrotter)\n- Docs\n  - Actualizado changelog (#16773 by @SimonaliaChen)\n  - Actualizada la guía de contribución (#14800 by @sinchang)\n  - Arreglado typo en la documentación de Drawer (#16848 by @winkay)\n  - Actualizado el tema personalizado (#16983 by @iamkun)\n  - Agregada traducción en Esperanto (#16955 by @maxkoryukov)\n  - Actualizada la documentación de input-number sobre el evento change (#16316 by @luckyCao)\n  - Actualizada la documentación en Español 2.11.1 (#16961 by @Gonzalo2310)\n- I18n\n  - Eliminada la traducción de 'year' en idioma Catalán como en otros idiomas (#14722 by @oscaralbareda)\n  - Actualizado el changelog de las versiones 2.10.0 y 2.10.1 en Español (#16548 by @Gonzalo2310)\n  - Actualizado ar.js (#16653 by @l3op)\n- Test\n  - Corregir error ortográfico (#16672 by @boomler)\n  - Refractorizacion del unit test para usar data-uri (#16847 by @a631807682)\n- Types\n  - Corrección del tipo httprequest (#16633 by @luckyCao)\n\n### 2.11.1\n\n*2019-07-26*\n\n#### Corrección de errores\n\n- Image\n  - Corregido el componente Image para compatibilidad SSR (#16737 by @luckyCao)\n- Tarea\n  - Actualizado para compatibilidad con dart-sass by @LewisChennnnn)\n\n### 2.11.0\n\n*2019-07-25*\n\n#### Nuevas características\n\n- Drawer\n  - Agregado componente drawer (#16577 by @JeremyWuuuuu)\n\n#### Corrección de errores\n\n- Checkbox\n  - Mejora del selector css (#16006 by @Hazlank)\n- Tree\n  - Establecido el el-tree como genérico (#15934 by @JeremyWuuuuu)\n  - Establecido la prop  isCurrent como False (#15870 by @kkkisme)\n- Dropdown\n  - Corregido el color predeterminado de los split-button (#15931 by @JuniorTour)\n- Cascader\n  - Corregido un problema de actualización cuando el nivel 1 de children estaba vació (#16399 by @luckyCao)\n  - Ahora se muestra correctamente header cuando range esta especificado (#16354 by @ziyoung)\n  - Agregados valores por defecto cuando lazy es true (#16420 by @luckyCao)\n  - Solucionado problemas de visualización (#15935 by @junyiz)\n  - Expuestos los getCheckedNodes y corrección de errores en el cambio de opciones (#16709 by @SimonaliaChen)\n- Submenu\n  - Corregida la prop append-to-body (#16289 by @a631807682)\n- Table \n  - Arreglado un fallo en la actualizacion de los datos de tree table (#16481 by @island205)\n- Select\n  - Arreglado un problema de fuga de memoria (#16463 by @island205)\n- InfiniteScroll\n  - Actualizada la nomenclatura y la documentacion (#16698 by @iamkun)\n- Avatar\n  - Arreglado que la imagen no se centraba verticalmente (#16489 by @luckyCao)\n- Dialog\n  - Agregado el atributo destroyOnClosee (#16455 by @ziyoung)\n- Image\n  - Agregada la función de vista previa grande de imágenes (#16333 by @luckyCao)\n\n#### Optimización\n\n- Documentación\n  - Arreglada la demo de dropdown (#16193 by @webxmsj)\n  - Corrección de errores tipográficos en las tablas de documentos (#15971 by @howiefh)\n- I18n\n  - Actualizada la traduccion del lenguage Thai (#16689 by @ponkrit)\n- Tareas\n  - Actualizada la api base del tema (#16607 by @iamkun)\n  - Añadido token del formulario del tema (#16699 by @iamkun)\n  - Marcar todos los accesos internos del usuario (#16609 by @iamkun)\n  - Corrección del error de anclaje del documento (#16692 by @iamkun)\n\n### 2.10.1\n\n*2019-07-02*\n\n#### Corrección de errores\n\n\n- Table\n  - Corregido el icono de ordenación  (#15439 by @bezany)\n  - Corregidas las rupturas del layout cuando existía un slot (#16332 by @ziyoung)\n  - Corregido showOverflowTooltip no era reactivo (#16295 by @a631807682)\n  - Registrada la scrollbar en el panel de filtro (#16246 by @ziyoung)\n- Tareas\n  - Arreglada la documentación 2.9 (#16233 by @ziyoung)\n  - Corregido el índice de la página de introducción del tema en inglés que tenia un error en los estilos css  (#16254 by @iamkun)\n\n#### Optimización\n\n- Tag\n  - Compatible con IE (#16334 by @ziyoung)\n- Tarea\n  - Actualizada la imagen QR de Dingtalk Group (#16236 by @iamkun)\n- Doc\n  - Actualizada la documentación online del theme roller (#16244 by @iamkun)\n\n### 2.10.0\n\n*2019-06-25*\n\n#### Nuevas características\n\n- I18n\n  - Añadido idioma Uzbeko (#15796 by @ogabek96)\n- Calendar\n  - Añadido el atributo del primer día de la semana (#16047 by @ziyoung)\n- Avatar\n  - Agregado componente Avatar (#16144 by @luckyCao)\n- Upload:\n  - Añade capacidad para personalizar la plantilla de miniaturas (#13192 by @victorzhuk)\n\n#### Corrección de errores\n\n- Tree\n  - No resaltar el nodo de árbol cuando currentKey es nulo (#15668 by @yyjjqq94)\n  - Solucionado el problema #15538 causado por dos Tree que compartian los mismos datos.(#15615 by @VanMess)\n- Upload\n  - Actualizado el tipo del parámetro `fileList`  (#15716 by @underfin)\n- Table\n  - Solucionado que el icono de loading no se mostraba (#15868 by @ziyoung)\n  - Corregido el color de fondo de una tabla compleja cuando se desplaza el cursor (#15504 by @cnlon)\n  - Corregido current-row-key y el bug del evento select (#15983 by @ziyoung)\n  - Height acepta más unidades (#16013 by @ziyoung)\n  - Solucionado reserve-selection no funcionaba (#16135 by @ziyoung)\n- Docs\n  - Corregido el tipo de atributo Divider en zh-cn  (#15889 by @haoranyu)\n  - Se elimina una etiqueta html de cierre incorrecta y el código de bloque vacío (#16194 por @Alexeykhr)\n- Menu\n  - Corregido un error oculto en el submenú después de añadir popper-append-to-body (#15391 by @PanJiaChen)\n- Select\n  - Arreglado initialInputHeight (#15989 by @yyjjqq94)\n  - Corregido el comportamiento de default-first-option cuando se escribe chino (#15431 by @VanMess)\n  - Corregido el problema de importación doble (#16215 by @lengband)\n- Message\n  - Añadida la opción type def para offset (#16027 by @matjaz)\n- Timeline\n  - Arreglado reverso roto (#16091 by @ziyoung)\n- Slider\n  - Corregido #15545 agregando explicaciones sobre el evento \"input\" en chino (#15588 by @VanMess)\n- InfiniteScroll\n  - Actualización del nombre del paquete (#16125 by @iamkun)\n- MessageBox\n  - Arreglado el bug de distinguishCancelAndClose, la acción no era la misma que la documentada (#15438 by @qingdengyue)\n- PopupManager\n  - Arreglado que el z-index no podía ser reescrito la primera vez que se usaba (#15738 by @luckyCao)\n- Tarea\n  - Actualizado el test del api host  (#15807 by @iamkun)\n\n#### Optimizacion\n\n- Tree\n  - Modificar las condiciones del bucle para mejorar el rendimiento (#15699 by @KingJeason)\n- Theme\n  - Refinado  GA track & actualizado el link del pie que lleva al theme roller online (#16007 by @island205)\n- Badge\n  - Actualizado el check del prop badge (#16198 by @iamkun)\n- Avatar\n  - Actualizado el var del config del theme (#16202 by @luckyCao)\n- I18n\n  - Actualizada la traducción del portugués (#15776 by @gigioSouza)\n  - Actualizada la traducción del idioma Farsi (#15881 by @pamenary)\n- Docs\n  - Agregado componentes faltantes en el quick start (#16063 by @pape2016)\n  - Actualizada la traducción al francés (#16208 by @blombard)\n  - Agregada descripción $slots.default (#15444 by @Alexeykhr)\n  - Actualizada la Doc en Español 2.9.1 (#15840 by @Gonzalo2310)\n  - Corrección de errores ortográficos en fr (#15837 by @blombard)\n  - Actualizado el changelog 2.9.2 en español (#16185 by @Gonzalo2310)\n\n#### Breaking changes\n\n- Form\n  - Eliminado el estado success (#16159 by @ziyoung)\n\n### 2.9.2\n\n*2019-06-21*\n\n#### Corrección de errores\n\n- Tareas\n  - Solucionadas las definiciones de archivos TS (#15805 by @NateScarlet)\n\n### 2.9.1\n\n*2019-05-30*\n\n#### Nuevas características\n\n- Table\n  - Los metodos tree-props，default-expand-all, expand-row-keys, toggle-row-expansion y el evento expand-change son compatibles con Tree Table (#15709 by @ziyoung)\n\n#### Corrección de errores\n\n- Table\n  - Corrección de algunos errores (#15709 by @ziyoung)\n- Theme\n  - Actualización del host de la api (#15784 by @iamkun)\n\n#### Optimización\n\n- Tarea\n  - Una actualización del tipo InfiniteScroll (#15794 by @iamkun)\n\n### 2.9.0\n\n*2019-05-30*\n\n#### Nuevas características\n\n- Backtop\n  - Añadido componente Backtop (#15541 by @iamkun)\n- PageHeader\n  - Añadido el componente PageHeader (#15714 by @ziyoung)\n- InfiniteScroll\n  - Añadida la directiva InfiniteScroll (#15567 by @iamkun)\n- Cascader\n  - Agregado modo múltiple y método de filtro (#15611 by @SimonaliaChen)\n- Message\n  - Visualización en modo stack (#15639 by @island205)\n- Tag\n  - Añadido prop effect (#15725 by @SimonaliaChen)\n- Tabs\n  - Alinea el título a la izquierda cuando el tipo es card (#15695 by @luckyCao)\n- DatePicker\n  - Soporta cadenas literales (#15525 by island205)\n- Image\n  - Añadido soporte para transmitir attrs y listeners (#15578 by @VanMess)\n- Theme\n  - Añadido fondo al popup (#15412 by @iamkun)\n- Tarea\n  - Actualizada la nueva página de índice 2.9.0 (#15682 by @iamkun)\n\n#### Corrección de errores\n\n- Table\n  - Corregido el comportamiento de cambio de orden cuando la condición de orden es nula (#15012 by @joelxr)\n- Image\n  - Corregido ssr y compatibilidad de ajuste de objetos (#15346 by @SimonaliaChen)\n- Input\n  - Corregido estilo show-word-count en el-form (#15359 by @lvjiaxuan)\n  - Corregido el icono de borrar que no estaba centrado (#15354 by @YiiGuxing)\n- Calendar\n  - Corregido día de la semana no correcto cuando el día es domingo (#15399 by @qingdengyue)\n  - Corregido error de desaparición de octubre (#15394 by @qingdengyue)\n- Tabs\n  - Corrección de la pestaña básica anidada en el error de relleno de la pestaña de la tarjeta (#15461 by @SimonaliaChen)\n- Tag\n  - Corregido problema de propagación de stop (#15150 by @infjer)\n- Form\n  - Corregido el error de grupo de entrada dentro de la altura del elemento de formulario (#15457 by @SimonaliaChen)\n  - Solucionado el problema de resetFields (15181 by @luckyCao)\n- Tooltip\n  - Corregido tabindex personalizado no funcionaba (#15619 by @SimonaliaChen )\n- Link\n  - Arreglada la clase de estilo del icono de enlace (#15752 by @iamkun)\n- Select\n  - Revertir el valor establecido a nulo cuando se borra (#15447 by @iamkun)\n- Loading\n  - Corregido dom no cambia cuando el estado de carga cambia rápidamente (#15123 by @FAKER-A)\n- Switch\n  - Etiqueta con el evento de repetición del interruptor (#15178 by @FAKER-A)\n- Slider\n  - Arreglado el problema de estilo al hacer clic en la barra deslizante (#15561 by @luckyCao)\n- Radio\n  - Solucionado el problema 14808 (#14809 by @OverTree)\n- Form\n  - Solucionado el problema de resetFields (15181 by @luckyCao)\n- Tarea\n  - Se actualizaron las dependencias y se corrigió el error de demostración (#15324 by ziyoung)\n - Type\n  - Corregida la definición del tipo de carga (#15635 by @iamkun)\n  - Corregido tipo Icono (#15634 by @iamkun)\n  - Corregida la definición del tipo de enlace (#15402 by @iamkun)\n\n#### Optimización\n\n- Cascader\n  - Refractorización (#15611 by @SimonaliaChen)\n- Tarea\n  - Actualización hacer nueva lógica de componentes (by @iamkun)\n- Documentación\n  - Renombrar variable en docs (#15185 by @liupl)\n  - Corregido el atributo type de imagen y el valor por defecto (#15423 by @haoranyu)\n  - Corregido error en la doc de form (#15228 by @SHERlocked93)\n\n### 2.8.2\n\n*2019-04-25*\n\n#### Corrección de errores\n\n- Icon\n  - Actualizado icon (#15272 by @iamkun)\n- Docs\n  - Arreglada la documentacion de Form e Input (#15273 by @ziyoung)\n\n### 2.8.1\n\n*2019-04-25*\n\n#### Corrección de errores\n\n- Icon\n  - Actualizado el icono de cascader y select (#15264 by @SimonaliaChen)\n  - Actualizado icon (#15258 #15268 by @iamkun)\n\n#### Optimización\n\n- Chore\n  - Actualizado build script (#15267 by @ziyoung)\n- Docs\n  - Arreglado el color underline de link (#15265 by @iamkun)\n- Other\n  - Arreglada la migracion de la configuracion no compatible con camel case props y eventos (#15260 by @SimonaliaChen)\n\n### 2.8.0\n\n*2019-04-25*\n\n#### Nuevas características\n\n- Divider\n  - Agregado el componente Divider (#15055 by @island205)\n- Rate\n  - Agregados colores personalizados y clases de iconos pasando un objeto (#15051 by @SimonaliaChen)\n- Link\n  - Agregado componente Link (#15052 by @iamkun)\n- Calendar\n  - Agregado el componente Calendar (#14908 by @ziyoung)\n- Icon\n  - Agregado Icon (#15214 by @iamkun)\n- Alert\n  - Agregado tema dark (#15041 by @island205)\n- Image\n  - Agregado componente image (#15117 by @SimonaliaChen)\n- Collapse\n  - CollapseItem puede ser disabled (#15076 by @ziyoung)\n- Carousel\n  - Agregado atributo direction y soporte para la direccion vertical (#15122 by @ziyoung)\n- Pagination\n  - Agregado atributo hide-on-single-page (#15096 by @ziyoung)\n- Slider\n  - Agregado atributo marks (#15133 by @luckyCao)\n- Input\n  - Agregado attributo show-word-count (#15075 by @luckyCao)\n- InputNumber\n  - Agregado atributo step-strictly (#15050 by @luckyCao)\n- Tooltip, Dropdown, Popover\n  - Soporte para el atributo tabindex (#15167 by @ziyoung)\n\n#### Corrección de errores\n\n- Notification\n  - Arreglado el word break del titulo (#15008 by @iamkun)\n- Form\n  - Arreglado que cuando se cambiaban las reglas en el-form no funcionaba (#14985 by @luckyCao)\n  - Arreglado el estilo del label (#14969 by @ziyoung)\n  - Los FormItem requeridos muestran astericos cuando el label es auto (#15144 by @ziyoung)\n- Pagination\n  - Arreglado que el slot no se actualizaba (#14711 by @lucyhao)\n- Table\n  - Arreglado un bug del load en el modo lazy (#15101 by @ziyoung)\n  - Arreglado el ancho de la celda cuando colspan es mayor que 1 (#15196 by @ziyoung)\n  - Mejora en el rendimiento (#14868 by @ziyoung)\n  - No se emiten disparadores del evento sort-change durante la inicializacion (#14625 by @PeanutWatson)\n  - Igual comportamiento para height y max-height (#14660 by @arthurdenner)\n- Dialog\n  - Arreglado que el cuerpo del dialog quiebre las palabras correctamente en las palabras largas (#15027 by @iamkun)\n- Alert\n  - Actualizada la definicion de type (#15186 by @ziyoung)\n- Tabs\n  - Solucionado el problema por el que el rechazo de la promesa estaba afectando a la aplicación (#14816 by @ffxsam)\n  - Rerender cuando hay cambios en el slot (#15238 by @ziyoung)\n- Message\n  - Actualizada la definicion de type (#14968 by @agoni1212)\n- Select\n  - Solucionado el error cuando value es undefined o null (#15022 by @luckyCao)\n- Tree\n  - Eliminar el nodo actual despues de removido (#14604 by @sinchang)\n  - Mejora en el rendimiento (#14881 by @ChenZhuoSteve)\n- Dropdown\n  - Estilo arreglado (#14907 by @doing123)\n- Slider\n  - Corrección de un fallo en el teclado a11y (#14792 by @erezsob)\n- Menu\n  - El valor de ActiveIndex será nulo si el defaultIndex no existe (#14074 by @hoythan)\n- Directive\n  - RepeatClick: usa Date.now() en lugar de new Date() (#14776 by @pavelmash)\n- Upload\n  - Arreglado el estilo para mostrar imagenes transparentes (#15039 by @iamkun)\n- Theme\n  - Agregado zero border (#15256 by @iamkun)\n\n#### Optimización\n\n- Tareas\n  - Actualizado changelog zh-cn (#14965 by @iamkun)\n\n  - Ocultar la descripcion de la demo cuando esta vacia (#15014 by @ziyoung)\n\n  - Muestra la info dev del server por defecto @iamkun)\n\n  - Arreglado un error del changelog v2.6.0 (#15026 by @iamkun)\n\n  - Actualizado build config (#14821 by @abc3660170)\n\n  - Agregado hmr (#15221 by @SimonaliaChen)\n\n  - Uso de sourcemap en entorno dev (#15087 by @ibufu) Docs\n\n  - Cambio de nombre de variable en docs (#14602 #15003 #15094 #15105 by @liupl)\n\n  - Arreglado un error en la documentacion de upload (#15023 by @iamkun)\n\n  - Actualizada la documentacion del custom validator del Form (#15040 by @iamkun)\n\n  - Actualizada la documentacion de Tabs de como mostrar tabs verticales (#15053 by @iamkun)\n\n  - Uso del dominio eleme.cn (#15139 by @ziyoung)\n\n  - Arreglado el nombre de la ruta de imágenes (#15194 by @iamkun)\n\n  - Eliminada la traducción duplicada en francés (#15207 by @iamkun)\n\n\n\n#### Breaking changes\n\n- Rate\n  - Arreglado Fix decimal display support in disabled mode (#15089 by @haoranyu)\n- Select\n  - Se usa la opcion placeholder del label para poner el placeholder en el modo filter (#14989 by @ibufu)\n\n### 2.7.2\n\n*2019-04-03*\n\n#### Corrección de errores\n\n- Form\n  - Arreglado el estilo auto `label-width` (#14955 by @ziyoung)\n\n#### Optimización\n- Docs\n  - Arreglado un error de link de una imagen (#14957 by @iamkun)\n- Chore\n  - Arreglado un error de mkdir en el deploy (#14952 by @iamkun)\n\n### 2.7.1\n\n*2019-04-03*\n\n#### Corrección de errores\n\n- Select\n  - Se asigna null a value cuando se limpia (#14322 by @aaronfulkerson)\n- Input\n  - Actualiza los valores dependientes en el DOM cuando el tipo cambia (#14889 by @wacky6)\n- Table\n  - Hacer que defaultExpandAll funcione cuando exista una columna expandida (#14935 by @ziyoung)\n- Dialog\n  - El color de fondo puede ser configurado (#14939 by @ziyoung)\n- Form\n  - `label-width` soporta auto width (#14944 by @ziyoung)\n\n#### Optimización\n- Docs\n  - Actualización de la documentación en español (#14913 by @Gonzalo2310)\n  - Agregada documentación en francés para el nuevo componente (#14924 by @ziyoung)\n  - Documentación de los Tabs optimizada (#14938 by @ziyoung)\n\n### 2.7.0\n\n*2019-03-28*\n\n#### Nuevas características\n\n- Table\n  - Agregado soporte de datos con estructura tree (#14632 by @ziyoung)\n\n#### Corrección de errores\n\n- Tabs\n  - Uso de color primario como boxShadow color (#14558 by @Richard-Choooou)\n  - Renderización cuando cambia la etiqueta (#14496 by @akki-jat)\n- Table\n  - El pie de página sigue la alineación de las celdas del body (#14730 by @ziyoung)\n- NavMenu\n  - Se ha corregido que al hacer click en el el-submenu se disparaba childMenu nuevamente (#14443 by @PanJiaChen)\n- Dropdown\n  - Compatible con la nueva sintaxis de v-slot en V 2.6 (#14832 by @ziyoung)\n- ColorPicker\n  - Corregido el manejo de error de string en hex color (#14793 by @iamkun)\n- Tree\n  - Revertido pr #13349 (#14847 by @ziyoung)\n- Tooltip\n  - Muestra cuando el valor inicial es verdadero (#14826 by @ziyoung)\n- Docs\n  - Actualización de documentos de cascader (#14442 by @panhezeng)\n- Style\n  - Corrección de la media query en sm-only, md-only, lg-only (#14611 by @sinchang)\n\n#### Optimización\n\n- Chore\n  - Añadido descripción de la página web (#14802 by @iamkun)\n\n### 2.6.3\n\n*2019-03-21*\n\n#### Corrección de errores\n\n- Corrección del estilo de demostración de Cascader (#14789 by @ziyoung)\n- Eliminación de la operación DOM innecesaria (#14788 by @ziyoung)\n- Corrección del valor predeterminado del DST de DatePicker (#14562 by @wacky6)\n\n### 2.6.2\n\n*2019-03-21*\n\n#### Nuevas características\n\n- DatePicker\n  - Añadido monthrange para el atributo type (#14487 by @zxyRealm)\n- i18n\n  - Añadido Locale Croata (#14360 by @danijelh)\n- Docs\n  - Actualización del documento en francés para 2.6.1 y corrección de errores tipográficos (#14555 by @smalesys)\n  - Actualización de la traducción al francés (#14643 by @smalesys)\n\n#### Corrección de errores\n\n- Input\n  - Corregida regresión (#14572 by @wacky6)\n- DatePicker\n  - Corrección del cálculo del primer día de la semana (#14523 by @sinchang)\n  - Corregido el formato de valor del selector de semana (#13754 by @wacky6)\n- Steps\n  - Corregida issue #14502 (#14596 by @sinchang)\n  - Arreglado estilo con tema simple (#14610 by @sinchang)\n- Docs\n  - Renombrada variable en documentos de Table (#14587 by @likwotsing)\n  - Añadido índice de búsqueda en francés (#14565 by @iamkun)\n  - Corrección del estilo de página TimePicker (#14579 by @ziyoung)\n  - Renombrada variable en Upload docs (#14593 by @liupl)\n  - Actualización de los documentos del Form async validator (#14694 by @iamkun)\n  - Solucionado el error de tooltip doc (#14748 by @iamkun)\n  - Corregido error tipográfico (#14751 by @2bj)\n  - Corregido los elementos de control de resaltado para Webkit touch (#14703 by @VladG0r)\n\n\n#### Optimización\n\n- Chore\n  - Actualización del script de construcción de ci (#14600 by @ziyoung)\n  - Actualización ga tracking (#14560 por @iamkun)\n  - Añadido más evento ga (#14633 by @iamkun)\n  - Actualización del grupo de discusión (#14741 por @iamkun)\n  - Actualización de los deps y conf de las pruebas (#14735 by @wacky6)\n  - Actualización gulp (#14745 by @ziyoung)\n  - Uso de codepen para mostrar la demo y corregir el error doc (#14747 por @ziyoung)\n\n### 2.6.1\n\n*2019-03-03*\n\n#### Corrección de errores\n\n- **Don't specify node version** (by @iamkun in #14546)\n- Corrección del directorio doc en `deloy-faas.sh` (by @ziyoung in #14553)\n- Arreglado el estilo de date en changelog para 2.6.0 (by @island205 in #14547)\n- Corregido error tipográfico en doc (by @wack6 in #14552)\n\n### 2.6.0\n\n*2019-03-01*\n\n#### Nuevas características\n- Timeline\n  - Agregado componente timeline (by @jikkai in #14248)\n- DropdownItem\n  - Añadida la prop icon a `el-dropdown-item` (by @gabrielboliveira in #14088)\n- Input\n  - Añadida la prop show-password (by @phshy0607 in #13966)\n- Select\n  - Añadido el slot `empty` (by @elfman in #13785)\n- Autocomplete\n  - Añadida la prop highlight-first-item (by @YamenSharaf in #14269)\n- I18n\n  - Locale Armenio creado (by @hamletbarsamyan in #14214)\n- Docs\n  - Traducción al francés (by @smalesys in #12153, #14418, #14434)\n\n#### Optimización\n- Alert\n  - Actualizada la descripción de Alert (by @iamkun in #14488)\n- Input\n  - Actualizado input password (by @iamkun in #14480)\n- InputNumber\n  - Removido parseFloat innecesario (by @JuniorTour in #14172)\n- Menu\n  - Añadido soporte para `el-menu-item` sin índice (by @georgyfarniev in #13298)\n- Table\n  - Eliminadas algunas operaciones DOM html (by @elfman in #13643)\n- Upload\n  - Optimizado el código (by @elfman in #13973)\n- Popup\n  - Optimizado el código (by @KAionro in #14413)\n- Docs\n  - Se han agregado más detalles sobre cómo ejecutar el modo de play para contribuir (by @island205 in #14355)\n  - Warn input como componente de control. (by @wacky6 in #14463)\n  - Actualizacion de la documentacion de Table (by @luguokong in #14329)\n  - Actualizacion de la documentacion de input (by @iamkun in #14437)\n  - Actualizacion de la documentacion de custom-theme (by @wangguohao in #14297)\n  - Se ha hecho que el icono cambie de estilo en hover (by @tuxinghuan in #14295)\n- Build\n  - Minimización de css y js para la doc del sitio de Element (by @iamkun in #14430)\n  - Aceleración de webpack (by @hetech in #14484)\n  - Uso de cli para seleccionar la versión de lanzamiento (by @hetech in #14354)\n- Instalación de stale para el manejo de issues (by @island205 in #14392)\n\n#### Corrección de errores\n- Menu\n  - Corregido el error de focus del submenú cuando se cambiaba la pestaña del navegador (by @liupl in #13976)\n- MessageBox\n  - Corregida la definicion de type (by @NateScarlet in #14278)\n- ScrollBar\n  - Prevenido el clic del botón derecho en la miniatura (by @xifeiwu in #14196)\n- Switch\n  - Activación de la validación de formularios si el valor cambia (by @hetech in #14426)\n- Table\n  - Se ha convertido el método toggleAllSelection en un método de instancia (by @letanure in #14075)\n- Tabs & Dropdown\n  - Estilo arreglado (by @hetech in #14452)\n- Tree\n  - Los tips de texto vacío son diferentes de las tablas (by @ColinCll in #14331)\n- Docs\n  - Corregido el error de formato de la documentacion de DatetimePicker (by @iamkun in #14290)\n  - Problema de ortografía en la documentación de datepicker (by @helmut in #14481)\n  - Arreglado estilo doc de paginación (by @liuchuzhang in #14451)\n\n#### Breaking changes\n- Table\n  - Cambiar el orden de los parámetros enviados en los eventos de las filas (by @jikkai in #12086)\n\n### 2.5.4\n\n*2019-02-01*\n\n#### Corrección de errores\n\n- Build: Se ha solucionado el problema de configuración de babel que provocaba que el efecto de transicion de collpase se rompiera (por @island205 en #14282)\n\n### 2.5.3\n\n*2019-01-31*\n\n#### Optimización\n\n- Optimización del código de Message (por @vok123 en #14029)\n- Retirada de gh-pages (por @ziyoung en #14266)\n- Añadido enlace IssueHunt (por @island205 en #14261)\n\n#### Corrección de errores\n\n- Corregido el error del módulo UMD en el lado del servidor (por @island205 en #14242)\n- Corregido el estilo activo de TabBar (por @iamkun en #14240)\n- Corregido el error de código de demo de la tabla (por @xunmeng en #14253)\n\n\n### 2.5.2\n\n*2019-01-27*\n\n#### Optimización\n- Docs:\n  - Actualizacion ChangeLog ES 2.5.1 (by @Gonzalo2310 in #14231)\n\n#### Corrección de errores\n- Build:\n  - Eliminar comentarios no borrados en el módulo umd `lib/index.js` (por @island205 en #14233)\n  - Corregido el error de exportación disparado en el módulo commonjs usado en nuxt.js (por @island205 en #14232)\n  - Corrección de problemas de compilación de 2.5.1 (por @iamkun en #14228)\n\n### 2.5.1\n\n*2019-01-26*\n\n#### Optimización\n- DatePicker: resalta el mes y año actual (por @Debiancc en #14211)\n- Actualizacion del changelog 2.5.0 (por @wacky6 en #14217)\n\n#### Corrección de errores\n- Arreglado el problema de exportación generado por la actualización de webpack (por @island205 en #14220)\n- Guardados los documentos 2.4.11 y la nueva subcarpeta para 2.5+ (por @iamkun en #14222)\n\n### 2.5.0\n\n*2019-01-25*\n\n#### Corrección de errores\n- Autocompletar\n  - Corregida la última línea del menú desplegable que comenzaba recortada (#13597) (por @ziyoung)\n  - Arreglada la popper arrow que faltaba (#13762) (por @liuchuzhang)\n- Carrusel\n  - Contador de limpieza cuando el componente es destruido (#13820) (por @elfman)\n- Cascader\n  - Retirada de los props computados obsoletos (#13737) (por @iamkun)\n  - Se corrigió la definición de tipo de las opciónes de Cascader en TypeScript (#13613) (por @NateScarlet)\n  - Corregido icono que cubre el texto (#13596) (por @ziyoung)\n- Checkbox\n  - Refinado el estilo (por @PanJiaChen)\n- DatePicker\n  - Añade el `key` en v-for de TimeSpinner (#13547) (por @Ende93)\n  - Corregido el resaltado de la semana en el límite del año (#13883) (por @suyi91)\n- Input\n  - Corregida la referencia del nodo DOM del textarea (#13803) (por @laomu1988 @island205)\n- Pagination\n  - El valor de entrada no será menor que 1 (#13727) (por @elfman)\n- Popover\n  - Corrección de problemas de popover con el disparador de hover (#13104) (por @goldengecko)\n  - Corregido el fallo de memoria de instancia de popper (#13988) (por @qpxtWhite)\n- Radio\n  - Refinado el estilo (por @ohhoney1)\n- Table\n  - Mejorada la ordenación de tablas al hacer clic en la flecha de ordenación (#12890) (por @ohhoney1)\n  - Solucionado el problema de alineación vertical de texto vacío en IE10+ (#13638) (por @imzjjy)\n  - Corregida la documentación del tipo de índice (#13628) (por @ilovefafa)\n  - Corrección del problema de visualización de `show-summary` cuando el encabezado multinivel tiene el attr fixed (#13914) (por @luckyCao)\n- Tabs\n  - Corregido error de autodesplazamiento (#13696) (por @iamkun)\n  - Obtener la tab correcta a través del nombre de tab (#13705) (por @iamkun)\n  - Uso de paneName en lugar de name para determinar el estilo del panel (#13733) (por @iamkun)\n- Tree\n  - Corregido que `showCheckbox` prop en `Tree` no puede afectar a los hijos `tree-node` (por @KidneyFlower)\n  - Actualizado documento y archivo de definición (#13540) (por @ziyoung)\n- Upload\n  - Agregada la prop `url` para subir el archivo cuando `list-type` cambia (#13771) (por @elfman)\n- Slider\n  - Corrección de la sangría del código fuente (#13955) (por @wacky6)\n- I18n\n  - Añadidas las traducciones de catalán que faltaban (por @jaumesala)\n  - Añadidas las traducciónes de ruso que faltaban (#13658) (por @justlp)\n  - Corrección de las traducciones al finés (#14137) (por @jenkrisu)\n- Doc\n  - Actualización del documento 2.4.11 (#13522) (por @Gonzalo2310)\n- Otros\n  - Eliminar scripts innecesarios (por @ziyoung)\n  - Corregido el error de anchor link (#13753) (por @iamkun)\n  - Corrección de la capitalización inconsistente en la documentación (por @wonderjar)\n  - Añadido código qr del grupo de chat DingDing al readme (by @iamkun in #13957)\n  - Añadido logs de hilo a .gitignore (#13922) (por @mimimi)\n  - Eliminada la cuota de patrocinadores (#14156) (por @island205)\n  - Actualizado readme qr code src (#13960) (por @iamkun)\n  - Actualizado enlace CDN, corregido error tipográfico (por @ziyoung)\n\n### 2.4.11\n\n*2018-11-21*\n\n- Revertido pr #13296. Arreglado que al hacer clic fuera del Menú causaba que el Submenú colapsara, #13478\n- Ajustados los media query breakpoints de las pantallas pequeñas (xs), #13468 (por @alekoshen712)\n\n### 2.4.10\n\n*2018-11-16*\n\n- Se corrigio que se necesitaban varios clics en Select para mostrar la lista desplegable, #13268\n- El icono de limpiado para el input no se muestraba cuando Form estaba deshabilitado, #13208\n- Ajustados los estilos de Select, Progress, Autocomplete, Tooltip, Collaspe, TimePicker, #13188 (by @porcelainHeart) #13210 #13266 #13257 #13290 #13347 (by @PanJiaChen)\n- Se agregó el atributo `loop` al componente carrusel, #13217\n- Cuando los datos de Table cambian, la línea resaltada permanecerá, #13200\n- Table header scoped slot puede recibir parámetros, #13263\n- El método `clearFilter` de la tabla soporta argumentos, #13176\n- El tooltip ya no se crea cuando no hay contenido en la celda de Table, #13152 (por @rongxingsun)\n- El contenido del input del panel ColorPicker se muestra correctamente, #13278\n- ColorPicker ya no activa la validación de formularios al arrastrar, #13299\n- InputNumber se le ha añadido el método `select`, #13286 (por @st-sloth)\n- Autocompletar agregó el evento `clear`, #12171(by arthurdenner) #13326\n- Puede cerrar Menú haciendo clic fuera del Menú, #13296\n- El método `validateField` de Form puede recibir argumentos, #13319\n- Cascader añadió el evento `visible-change`, #13415\n- DatePicker agregó slot para separador de rango, #13272 (por @milworm)\n- Tree añade las propiedades `iconClass` y `currentNodeKey`, #13337 #13197 (por @isnifer)\n- Progress permite texto en el atributo `status` #13198 (por @ali-master)\n- Corregidas las `defaultCheckedKeys` de Tree que causaba un error, #13349 (por @dive2Pro)\n\n\n### 2.4.9\n\n*2018-10-26*\n\n- El parámetro de Form's `clearValidate` soporta cadenas, #12990 (by @codinglobster)\n- Se agregó el atributo `type` para Badge, #12991\n- Ser puede usar scoped-slot para personalizar el encabezado de la columna de Table #13012 (por @ivanseidel)\n- Arreglado que el input box de Select no se podia escrbir en IE, #13034 (by @GaliMU)\n- La opción Seleccionar no se cerraba cuando el espacio era insuficiente, #12329 (by @akki-jat)\n- Cuando se expande la lista desplegable de Seleccionar, el icono de flecha también se mostrará correctamente, #12353 (by @firesh)\n- Arreglado que el atributo size de Select no funcionaba, #13070\n- Select multiple values pueden ser limpiado en lote, #13049 (by @ZSkycat)\n- Arreglado el último TabNav que no se podía borrar, #13039\n- Arreglado que la etiqueta del TabNav no se mostraba correctamente, #13178\n- Añadido title slot para Alert, #13082 (by @Kingwl)\n- Corregido un problema por el cual el contenido del tooltip en Table era incorrecto, #13159 (by @elfman)\n- Optimizada la animación de Upload cuando el archivo es eliminado, #12987\n- Ajustado el estilo de InputNumber cuando no se muestra el botón de control, #13052\n\n### 2.4.8\n\n- No se muestra el contorno cuando Switch está enfocado, #12771\n- Arreglado el estilo del Dropdown en ButtonGroup, #12819 (por @bluejfox)\n- Añadido evento opened para Dialog, #12828\n- Corregido el orden incorrecto de visualización de TabNav, #12846\n- Corregido el problema de que Tabs no se desplazaba a la pestaña seleccionada, #12948\n- Corregido el problema de que el identificador no se mostraba cuando se arrastraba el Tree node, #12854\n- El parámetro validar evento de Form contiene el mensaje de validación, #12860 (por @YamenSharaf)\n- Se ha corregido el DatePicker que no verificaba la validez de la hora de entrada del usuario, #12898\n- Arreglado el problema de que el atributo `render-header` del encabezado de Table no funcionaba, #12914\n\n### 2.4.7\n\n*2018-09-14*\n\n- Corregido que DatePicker no activaba la validación del Form, #12328 #12348\n- Corregidos el lanzamiento de errores del DatePicker en modo múltiple, #12347\n- Corregida la posición incorrecta del spinner del DatePicker, #12415 (por @rang-ali)\n- Se ha corregido el llenado automático del input del DatePicker, #12521 (por @abdallanayer)\n- Corregida el input no resaltada en Cascader, #12341\n- Corregido el orden incorrecto de Tabpane, #12346\n- Corregida la posición incorrecta del cursor de ColorPicker, #12376 (por @cnwhy)\n- Corregido el estilo del Submenú, #2457\n- Corregido el resaltado después de seleccionar el Submenú, #12479\n- Corregidos los valores incorrectos seleccionados por Cascader, #12508 (por @huangjinqiang)\n- Corregido el valor incorrecto del input de Paginación, #12525\n- Se ha corregido el orden en que la paginación desencadena los eventos, #12530\n- Corregido que no se mostraba el Table Filter, #12539\n- Corregido Tree que era incapaz de borrar nodos, #12684\n- Corregida la altura de los Select Input que cambiaba en modo simple, #12719\n- Arreglado el estilo de la etiqueta FormItem en Form anidado, #12748\n- Añadido el atributo `autocomplete` para Input, obsoleto `auto-complete`, #12514 (por @axetroy)\n- Añadido el slots-scope de Form para mostrar la información de validación, #12715 (por @YamenSharaf)\n\n### 2.4.6\n\n*2018-08-09*\n\n- Arreglada la tabla que no mostraba el ícono del filtro cuando a `filter` se les asignaba un array vacío, #12165\n- Arreglado Menu que no guardaba el estado activo cuando cambiaba `collapse` #12178 (por @elfman)\n- Se ha corregido que Cascader no escapaba a los caracteres especiales para Regexp, #12248\n- Se ha corregido que el RadioBotón deshabilitado mostraba la sombra de la caja cuando se hacía clic, #12262\n- Arreglado el efecto de la tecla de flecha en Select cuando el valor por defecto es `undefined`,#12322\n- Corregida la función de consulta de Select not debounced en modo multi, #12181\n- Corregida que la palabra clave de consulta de Select desaparecía en modo multi, #12304\n- Corregido el ancho incorrecto de Dialog cuando se muestra a pantalla completa, #12203\n- Corregida la visualización incorrecta de Main en IE, #12237\n- Corregido el trigger de Input con dos validaciones de Form, #12260\n- Arreglado el añadir un nuevo nodo de árbol que causaba que los nodos desaparecieran, #12256\n- Arreglado el nodo Tree no se borraba después de arrastrar, #12279\n- Popover corregido porque no era visible cuando InputNumber no enfocaba, #12284\n- Añadido el atributo `popper-append-to-body` para Autocompletar, #12241\n- Añadido el modificador `sync` para el atributo `page-size` de Pagination, #12281\n\n### 2.4.5\n\n*2018-07-26*\n\n- Se ha corregido en Table que `class-name` no funcionaba para las columnas `expand`, #12006\n- Se ha añadido el método `toggleAllSelection` para Table, #12047\n- Corregida la posición incorrecta del `suffix slot` cuando Input contiene Select, #12108\n- Corregido que el `line-height` de Option no se establecia, #12120\n- Corregido que TimeSelect con valor por defecto `null` no podia ser asignado después de ejecutar `resetField`, #12010\n- Arreglado el evento `keydown` que cuando no era una tecla de flecha no funciona en Tree, #12008\n- Corregido nodo padre checked en modo lazy, #12106\n- Añadido el parámetro `includeHalfChecked` para getCheckedNodes de Tree, #12014\n\n### 2.4.4\n\n*2018-07-13*\n\n- Corregido que se disparaba la validacion del Select después de reajustar el formulario, #11837\n- Corregida la posición incorrecta del slot Input `suffix` cuando se usaba el slot `suffix` con el slot `append` , #11951\n- Corregido el clearable Input que muestraba el icono de borrado cuando era readonly, #11967\n- Arreglado el nodo Tree checked cuando estaba disabled, #11847\n- Corregido que `default-checked-keys` no funcionaba en Tree, #11971\n- Corregido que el `empty-text` no era visible cuando el nodo Tree se filtraba, #11971\n- Arreglada la posición de texto vacío sobredimensionado en Table, #11965\n- Corregido que la fila de la tabla no se modificado el resaltado cuando `current-row-key` era asignada a null, #11866\n- Arreglado que mostraba el filtro del dropdown cuando los filtros eran un array vacío, #11864\n- Corregido que el cambio de label de Radio no detenia propagacion de eventos, #11912\n\n### 2.4.3\n\n*2018-07-03*\n\n- Corregido `allow-drop` que no funcionaba correctamente cuando los nodos de árbol tenian una altura personalizada, #11797\n- Ahora puede pasar un parámetro al método `clearValidate` de Form, especificando qué resultados de validación de `FormItems` necesita borrar, #11821\n- Añadido el atributo `distinguishCancelAndClose` para MessageBox, #11831\n\n### 2.4.2\n\n*2018-06-26*\n\n- Ahora el `class-name` y el `label-class-name` de la tabla son reactivos, #11626\n- Arreglado que Table seguia resaltando la fila en la que se había hecho clic cuando `highlight-current-row` era `false`, #11646\n- Corregido un error de estilo de ButtonGroup cuando sólo habia un botón `round` o `circle`, #11605\n- Arreglado estilo del tamaño de página del Select de Pagination, #11622\n- Corregido un error del método `open` de los Menús cuando se cambiaba dinámicamente `collapse`, #11646\n- Añadidos los parámetros `activeName` y `oldActiveName` al gancho before-leave de Tabs, #11713\n- Arreglado el focus en Cascader después de hacer clic fuera, #11588\n- Arreglado que Cascader no se cerraba cuando se hacia clic en la opción estando `change-on-select` como `true`, #11623\n- Ahora la actualización del valor de Select programáticamente activará la validación de formulario, #11672\n\n### 2.4.1\n\n*2018-06-08*\n\n- Removida la declaración duplicada de type en Autocompletar, #11388\n- Corregido el estilo de flecha en el dropdown de Select en FireFox cuando se anidaba en el formulario, #11427\n- Corregido que el ícono `clear` de Select seguia apareciendo cuando el valor inicial era `null`, #11460\n- Arreglado que cuando el radio estaba `disabled` mostraba el box-shadow al hacer click, #11462\n- Añadido el atributo `iconClass` para MessageBox, #11499\n- Añadido el atributo `stretch` para Tabs, #11476\n- Arreglado el problema de orden de renderizado de TabPane cuando Tabs es `lazy`, #11461\n- Arreglado que Table no retenia la fila actual de resaltados cuando se expandia, #11464\n- Arreglado que focusing state cuando `before-leave` devolvia una promesa resuelta, #11386\n- Arreglado que Popover deshabilitado seguia creando poppers, #11426\n- Arreglado el bucle sin fin de Tree cuando se añadia un nuevo nodo en modo `lazy`, #11430 (por @wangjingf)\n- Añadido el evento `closed` para Dialog, #11490\n\n### 2.4.0 Fullerene\n\n*2018-05-28*\n\n#### Nuevas características\n- Generalidades\n  - La herramienta de desarrollo y el empaquetador se cambiaron a webpack nativo, #11216\n  - Ahora puede configurar globalmente el z-index inicial de los popups, #11257\n- Autocomplete\n  - Añadido el atributo `hide-loading`, #11260\n- Button\n  - Ahora se puede usar el atributo `size` en los botones circulares para controlar sus tamaños, #11275\n- InputNumber\n  - Añadido el atributo `precision`, #11281\n- Tabs\n  - Añadido el atributo `before-leave`, #11259\n  - Añadido el atributo `lazy`, #11167（by @Kingwl）\n- Table\n  - Añadido el método `sort` para ordenar manualmente la tabla, #11311\n\n#### Corrección de errores\n- Input\n  - Se ha corregido un problema que provocaba que se volviera a procesar al utilizar el IME chino para introducir texto rápidamente, #11235 (por @STLighter).\n- Popover\n  - Corregido el error de la consola cuando el elemento disparador es Radio o Checkbox, #11265\n- Breadcrumb\n  - Arreglado el atributo `to` que no soportaba la actualización dinámica, #11286\n- Upload\n  - Corregido el error de la consola cuando se resolvia el Archivo en la Promesa devuelta del método `beforeUpload`, #11297 (por @qusiba)\n- Tooltip\n  - Solucionado que la flecha no se posicionaba correctamente cuando el contenido estaba vacío, #11335\n- Autocompletar\n  - Corregido que las sugerencias de entrada eran incorrectas después de eliminar la palabra clave rápidamente, #11323\n- ColorPicker\n  - Corregido el evento `active-change` que se disparaba incorrectamente cuando el menú desplegable del picker estaba cerrado, #11304\n- Table\n  - Corregido el error de estilo del panel de filtro cuando se sobredimensionaba, #11314\n  - Corregida que la fila seleccionada actualmente no se retenia cuando se ordenaba la tabla, #11348\n- CheckBox\n  - Arreglado que cuando el checkbox era único no soportaba validación, #11271\n- Radio\n  - Arreglado que el Radio desactivado seguia estando seleccionada cuando se pulsaba la tecla espaciadora, #11303\n- MessageBox\n  - Corregida la clase `el-popup-parent--hidden` que no se eliminaba al abrir MessageBox sucesivamente, #11371\n\n### 2.3.9\n\n*2018-05-18*\n\n- Corregido que cuando los datos de origen no tenian el campo especificado por el atributo `prop` de una TableColumn, se producía un error al moverse el ratón dentro de las celdas de esa columna, #11137.\n- El atributo `lockScroll` de los componentes pop-up ya no añade un inline style al elemento padre, sino que añade un nombre de clase, #1111114.\n- Arreglado el icono de Progreso que no se mostraba cuando su `status` era `exception`, #11172\n- El atributo `disabled` no funcionaba en la lista de resultados del filtro de Cascader, #11185\n- Se ha corregido un problema por el que la fila expandida de la Tabla no se podía contraer si los datos de origen se actualizaban después de su expansión, #11186.\n- `setCurrentKey` de Tree ahora acepta `null` como parámetro para cancelar el nodo actualmente resaltado, #11205\n\n### 2.3.8\n\n*2018-05-11*\n\n- Corregido que el panel DatePicker saltaba al mes actual después de escoger una fecha en un mes diferente cuando el tipo era `dates`, #10973\n- Arreglado que el `clearable Input` seguía mostrando el icono de borrado cuando era sólo de lectura, #10912\n- Arreglado que al cerrar el panel DatePicker sin modificar el valor se desencadenaba incorrectamente el evento `change`, #11017\n- Arreglado que la navegación por el teclado no funcionaba correctamente cuando Select tenia opciones agrupadas, #11058\n- Agregado el `slot named` `prefix` para Select, #11063\n- Agregado el metodo `clearValidate` para FormItem, #11076\n- Agregado el atributo `checkOnClickNode` para Tree, #11111\n\n### 2.3.7\n\n*2018-04-29*\n\n- Corregido que Table no actualizaba el ancho de encabezado cuando la barra de desplazamiento desaparecia debido al filtrado, #10834\n- Corregido input borrable que mostraba el icono de borrado cuando su valor inicial era `nulo`, #10912\n- Corregido el disparador incorrecto del evento `active-change` después de cambiar el valor enlazado de ColorPicker programáticamente, #10903 (por @zhangbobell)\n- Corregido filterable Select que causaba un bucle infinito al navegar por las opciones usando el teclado si todas las opciones estában deshabilitadas, #10945\n\n### 2.3.6\n\n*2018-04-21*\n\n- Corregido el comportamiento incorrecto del callback `allow-drop` de Tree cuando se usaba el parámetro `type`, #10821\n- Ahora puede introducir correctamente las palabras clave en filterable Single Select en IE11, #10822\n- Corregido Single Select activaba incorrectamente el evento `blur` después de hacer clic en una opción, #10822\n\n### 2.3.5\n\n*2018-04-20*\n\n- Arreglado los incorrectos realces en el panel de DatePicker cuando `type` es week, #10712\n- Arreglado que InputNumber comenzaba vacio cuando el valor inicial era 0, #10714\n- Agregado el atributo `automatic-dropdown` para Select, #10042 (by @Seebiscuit)\n- Arreglado que el valor del Rate pasaba a `disabled` cuando se comenzaba a actualizar con las teclas de navegacion, #10726 (by @Richard-Choooou)\n- Ahora el atributo `type` de DatePicker's puede ser `'dates'`, donde puede elegir varias fechas en un solo picker, #10650 (by @Mini256)\n- Agregados los eventos `prev-click` y `next-click` para Pagination, #10755\n- Agregado el atributo `pager-count` para Pagination, #10493 (by @chongjohn716)\n- Agregado `type` como 3rd parametro del atributo `allow-drop` de Tree, #10792\n- Ahora usamos ResizeObserver para detectar el redimensionamiento de elementos DOM, #10779\n\n### 2.3.4\n\n*2018-04-12*\n\n- Eliminado el atributo duplicado `showTimeout` en SubMenu's en la declaracion TypeScript, #10566 (by @kimond)\n- Ahora se puede personalizar los datos de los items de Transfer usando scoped slot, #10577\n- Arreglado que los click de los botones `next` y `prev` en Pagination se deshabilitaban cuando se disparaba el evento `current-change`, #10628\n- Arreglado que Textarea mostraba `undefined` en SSR cuando el valor no era asignado, #10630\n- Arreglado que se deshabilitaba el estilo del TabItem cuando `type` era border-card, #10640\n- Agregado `$index` como cuarto parametro en el atributo de las columnas de Table `formatter` , #10645\n- Arreglado que CheckboxButton no se exportaba en la declaracion de TypeScript, #10666\n\n### 2.3.3\n\n*2018-04-04*\n\n- Agregar atributo `shadow` para Card, #10418 (by @YunYouJun)\n- Se ha corregido el error de ocultar Badge cuando `value` es `0`, #10470\n- Arreglados algunos bugs del draggable Tree, #10474 #10494\n- Agregado `placement` para Autocomplete, #10475\n- Ahora el atributo `default-time` también funciona en un rango que no es el rango DateTimePicker, #10321 (by @RickMacTurk)\n- Eliminado el contorno azul de TabItem después de que el navegador se desdibuja o se minimiza, #10503\n- Agregado el atributo `popper-append-to-body` para SubMenu, #10515\n- Eliminado el feedback visual cuando se desplaza sobre non-link BreadcrumbItem, #10551\n- Se ha corregido el evento `change` de InputNumber para garantizar que el valor de ligado del componente se actualiza en el control de eventos, #10553\n\n### 2.3.2\n\n*2018-03-29*\n\n- Arreglada una regresión de Autocompletar, #10442\n\n### 2.3.1\n\n*2018-03-29*\n\n- Se ha corregido una regresión por la que el `type` de input no se transmitia al elemento de entrada nativo, #10415\n- Agregado el metodo `blur` para Select, #10416\n\n### 2.3.0 Diamond\n\n*2018-03-28*\n\n#### Nuevas características\n- Table\n  - Ahora `formatter` de TableColumn puede ser actualizado dinámicamente, #10184 (by @elfman)\n  - Agregado el atributo `select-on-indeterminate`, #9924 (by @syn-zeta)\n- Menu\n  - Agregado el atributo `collapse-transition`, #8809 (by @limichange)\n- Input\n  - Agregado el metodo `select` , #10229\n  - Agregado el metodo `blur`, #10356\n- ColorPicker\n  - Agregado el atributo `predefine`, #10170 (by @elfman)\n- Tree\n  - Agregados los atributos `draggable`, `allow-drop` y `allow-drag`, y los eventos `node-drag-start`, `node-drag-enter`, `node-drag-leave`, `node-drag-over`, `node-drag-end` y `node-drop`, #9251 #10372 (by @elfman)\n- Form\n  - El metodo `validate` ahora acepta un segundo parametro, que contiene información de los ítems del formulario que no superaron la validación, #10279\n  - Agregado el evento `validate`, #10351\n- Progress\n  - Agregado el atributo `color`, #10352 (by @YunYouJun)\n- Button\n  - Agregado el atributo `circle`, #10359 (by @YunYouJun)\n\n#### Bug's arreglados\n- Form\n  - Solucionado: Label del FormItem no se alineaba adecuadamente con Input mixto, #10189\n- Menu\n  - Ahora collapsed Menu sólo mostrará el Tooltip cuando el slot `title` de MenuItem esté configurado, #10193 (by @PanJiaChen)\n- Pagination\n  - Corregido el evento `current-change` que se disparaba erróneamente sin interacción del usuario, #10247\n- DatePicker\n  - Ahora la fecha y la hora en el panel desplegable están correctamente formateadas según el atributo `format`, #10174（by @remizovvv）\n- Upload\n  - Solucionado el atributo `accept` no trabajaba cuando `drag` era true, #10278\n\n### 2.2.2\n\n*2018-03-14*\n\n- Agregado el evento `clear` para Input, #9988 (by @blackmiaool)\n- Ahora la entrada manual de ColorPicker soporta los modos `hsl`, `hsv` y `rgb`, #9991\n- Arreglado DatePicker no desencadenaba el evento `change` cuando se borraba su valor inicial, #9986\n- Ahora la clase de iconos relacionadas con los atributos de Rate soporta actualizaciones dinamicas, #10003\n- Arreglado Table que con columnas `fixed` no actualizaban correctamente su altura si se fijaba `max-height`, #10034\n- Ahora DatePicker en modo rango admite la selección inversa (haciendo clic en la fecha final y, a continuación, haciendo clic en la fecha de inicio), #8156 (by @earlymeme)\n- Agregado el atributo `disabled` para Pagination, #10006\n- Agregados los eventos `after-enter` y ` after-leave` para Popover, #10047\n- Arreglado Select no disparaba validación cuando el usuario seleccionaba una opción después de ejecutar `resetFields` de Form, #10105\n- Arreglado anchos incorrectos de columnas fijas de Table en algunos casos, #10130\n- Corregido MessageBox heredaba el atributo `title` de su instancia anterior cuando se llamaba sin `title`, #10126 (by @Pochodaydayup)\n- Agregado el atributo `input-size` para Slider, #10154\n- Agregados los eventos `left-check-change` y `right-check-change` para Transfer, #10156\n\n### 2.2.1\n\n*2018-03-02*\n\n- Corregido Aside, Header y Footer que se contraia en algunos layout, #9812\n- Corregido Table con un atributo `height` no renderizaba en SSR, #9876\n- Corregido Table con fila expandible no calculaba la altura cuando la fila era expandida, #9484\n- Corregido que cuando se escribia la fecha de forma manual en DateTimePicker no se disparaba el evento `change`, #9913\n- Corregido que Select mostraba sus opciones cuando se hacia click con el botón derecho del mouse en el Input, #9894 (by @openks)\n- Agregado el atributo `tooltip-class` para Slider, #9957\n- Ahora Select permanecera enfocado despues de la selección, #9857 (by @Seebiscuit)\n- Agregado el atributo `target-order` para Transfer, #9960\n\n### 2.2.0 Graphite\n\n*2018-02-12*\n\n#### New features\n- Menu\n  - Agregados los atributos `popper-class` y `disabled` para SubMenu, #9604 #9771\n  - Menu Horizontal ahora soporta SubMenu multi-capas, #9741\n- Tree\n  - Agregado el evento `node-contextmenu`, #9678\n  - Ahora se puede personalizar el template del nodo usando scoped slot, #9686\n  - Agregados los metodos `getNode`, `remove`, `append`, `insertBefore`, `insertAfter`, `getCheckedKeys`, `getHalfCheckedNodes`, `getHalfCheckedKeys` y el evento `check`, #9718 #9730\n- Transfer\n  - Agregado el metodo `clearQuery`, #9753\n- Select\n  - Agregado el atributo `popper-append-to-body`, #9782\n\n#### Bug fixes\n- Table\n  - Corregido el icono de expansión de una fila expandible que al hacer click activaba el evento `row-click`, #9654\n  - Corregido el layout que no se actualizaba cuando el ancho de columna era cambiado por el usuario arrastrando, #9668\n  - Corregido problema de estilo cuando la fila de resumen coexistia con columnas fijas, #9667\n- Container\n\n  - Corregido componentes del Container que no se estiraban en IE11, #9655\n- Loading\n\n  - Corregido Loading no se mostraba cuando el valor de `v-loading` era cambiado a true en el `hook` `mounted`, #9722\n- Switch\n  - Corregido se disparaban los dos eventos nativos de click cuando se hacia click en el Switch, #9760\n\n\n\n### 2.1.0 Charcoal\n\n*2018-01-31*\n\n#### New features\n- Cascader\n  - Agregados los eventos `focus` y `blur`, #9184 (by @viewweiwu)\n- Table\n  - El `filter-method` ahora tiene un tercer parámetro `column`, #9196 (by @liyanlong)\n- DatePicker\n  - Agregados los atributos `prefix-icon` y `clear-icon`, #9237 (by @AdamSGit)\n  - Agregado el atributo `default-time`, #9094 (by @nighca)\n  - `value-format` ahora soporta `timestamp`, #9319 (by @wacky6)\n- InputNumber\n  - Ahora el valor vinculado puede ser `undefined`, #9361\n- Select\n  - Agregado el atributo `auto-complete`, #9388\n- Form\n  - Agregado el atributo `disabled`, #9529\n  - Agregado el atributo `validateOnRuleChange`, #8141\n- Notification\n  - Agregado el metodo `closeAll`, #9514\n\n#### Bug fixes\n- InputNumber\n  - Arreglado el reseteo del valor cuando tiene punto decimal, #9116\n- Dropdown\n  - Arreglado el dropdown menu que tenia un posicionamiento incorrecto cuando la página sólo tiene una barra de desplazamiento horizontal en algunos navegadores, #9138 (by @banzhuanmei)\n- Table\n  - Corregido un error en el cálculo del número de columnas fijas después de que los datos de la columna cambian, #9188（by @kolesoffac）\n  - Corregido el borde de la última columna de la cabecera agrupada que no se visualizaba correctamente., #9326\n  - Corregido el posicionamiento incorrecto del header de la tabla en Safari, #9327\n  - Corregido fila expandida colapsaba cuando cambiaban los datos de la tabla, #9462\n  - Corregido renders múltiples innecesarios en algunas condiciones, #9426\n  - Corregido un error de calculo en el ancho de la columna cuando `width` cambiaba en TableColumn, #9426\n- Loading\n  - Corregido que en algunas ocasiones el loading no se ocultaba correctamente, #9313\n- DatePicker\n  - Corregido el metodo `focus` que no funcionaba en modo `range`, #9437\n  - Corregido si se hacia clic en el botón \"now\" seguia seleccionando la fecha actual aunque estuviera desactivado, #9470 (by @wacky6)\n  - Corregido fijación de fechas al navegar, #9577 (by @wacky6)\n- Steps\n  - Corregido error de estilos en IE 11, #9454\n\n#### Breaking changes\n- Menu\n  - El menú desplegable en modo `collapse` ahora se agrega directamente al `body`, de modo que es visible cuando está anidado en Aside, #9263\n- Table\n  - Ahora, al marcar los checkboxes en la Tabla de selección múltiple no se activa el evento `row-click`, #9467\n- Loading\n  - El `z-index` de la máscara de carga non-fullscreen se cambia a 2000. El `z-index` de la máscara de carga fullscreen se actualiza dinámicamente con los componentes emergentes, #9522\n- Dropdown\n  - Los atributos `show-timeout` y `hide-timeout` ahora solo trabajan si se dispara `hover`, #9573\n\n### 2.0.11\n\n*2018-01-08*\n\n- Corregido el problema de color del borde del Select cuando está el slot `prepend` o `append` del Input, #9089\n- Corregido el parámetro `remove-tag` de Select, #9090\n- Añadido los atributos `show-timeout` y `hide-timeout` para SubMenu, #8934 (por @HugoLew)\n- Corregido el estilo de Tooltip de `show-overflow-tooltip` que faltaba cuando Table era importada bajo demanda, #9130\n- Se ha corregido el mal funcionamiento de ordenación de la columna de Table despues que `clearSort` era ejecutado en esa columna, #9100 (por @zEmily)\n- El fichero de configuración i18n para el checo se renombra de `cz` a `cs-CZ`, #9164\n\n### 2.0.10\n\n*2017-12-29*\n\n- Corregido el calculo incorrecto de la altura máxima de Table cuando fixed column y summary row coexisten, #9026\n- Solucionado el estilo de color que no lo compilaba para textos vacíos en Table, #9028\n- Ahora DatePicker sólo emite el evento `change` cuando el valor cambia verdaderamente, #9029 (by @remizovvv)\n- Añadido atributo `tabindex` para Input, #9041 (by @dicklwm)\n\n### 2.0.9🎄\n\n*2017-12-24*\n\n- Añadida la función de enganche (hook) `before-remove` para Upload, #8788 (by @firesh)\n- Arreglado el valor inicial de error que no funcionaba para FormItem, #8840\n- Ahora la directiva Loading soporta nombre de clase personalizado asignando el atributo `element-loading-custom-class`, #8826 (por @earlymeme)\n- Arreglado CarouselItem que se ponía invisible cuando los datos eran actualizados asincrónicamente, #8921\n- Añadido el atributo `renderAfterExpand` para Tree, #8972\n\n### 2.0.8\n\n*2017-12-12*\n\n- Agregada la documentacion en español\n- Arreglado `show-timeout` de Dropdown que no funcionaba cuando se disparaba el click, #8734 (por @presidenten)\n- Arreglado el tiempo de validacion del Form cuando se disparaba el blur, #8776\n- Arreglado el evento de perdida de foco (blur) del DatePicker por rangos, #8784\n- `format` de TimePicker ahora soporta AM/PM, #8620 (por @firesh)\n\n### 2.0.7\n\n*2017-11-29*\n\n- Solucionado el estilo disabled en el texto de button, #8570\n\n### 2.0.6\n\n*2017-11-29*\n\n- Corregido error de estilo de los iconos de ordenación de Table, #8405\n- Corregido activacion para Popover cuando `trigger` es manual, #8467\n- Añadidos los atributos `prefix-icon` y `suffix-icon` para Autocomplete, #8446 (por @liyanlong)\n- Añadido el atributo `separator` para Cascader, #8501\n- Añadido atributo `clearable` para Input, #8509 (por @lbogdan)\n- Añadido atributo `background` para Pagination, #8553\n\n### 2.0.5\n\n*2017-11-17*\n\n- Solucionado regresion en 2.0.4 de Popover, Tree, Breadcrumb and Cascader, #8188 #8217 #8283\n- Solucionado Fuga de memoria de la directiva clickoutside, #8168 #8225 (por @badpunman @STLighter)\n- Solucionada la altura en multiple Select cuando se borra su valor, #8317 (por @luciy)\n- Añadido el atributo `collapse-tags` para multiple Select para reemplazar las tags con una línea de texto, #8190\n- Solucionado el alto consumo de CPU causado por Table cuando esta oculta, #8351\n- Ahora puede usar el método `doLayout` de Table para actualizar su diseño, #8351\n\n### 2.0.4\n\n*2017-11-10*\n\n- Accesibilidad mejorada para Cascader, Dropdown, Message, Notification, Popover, Tooltip y Tree\n- Arreglado el cambio de tamaño del Container cuando el ancho de la vista disminuye, #8042\n- Arreglado Tree's `updateKeyChildren` borraba incorrectamente los nodos hijos, #8100\n- Arreglado la altura de los bordes de CheckboxBotón's cuando esta anidado en un Form, #8100\n- Arreglado error de análisis de los Menu's para los colores personalizados, #8153 (por @zhouyixiang)\n\n### 2.0.3\n\n*2017-11-03*\n\n- Solucionado atributos `editable` and `readonly` de DatePicker de los rangos, #7922\n- Corregido error de estilo de los Tabs anidados, #7941\n- Corregido error de estilo del último Step de Steps verticales, #7980\n- Corregido el tiempo de activación del evento `current-change` para Pagination, #7995\n- Corregido Tooltip no registrado en el Menu, #7995\n\n### 2.0.2\n\n*2017-10-31*\n\n- Ahora haciendo clic con el botón derecho del ratón en los botones de InputNumber no cambiará su valor, #7817\n- El metodo `validate` de Form ahora puede esperar por validaciones asíncronas antes de ejecutar su devolución de llamada, #7774 (por @Allenice)\n- Corregido la selección de rango de DatePicker no funcionaba en los navegadores Chromium 53-57, #7838\n- Corregido la perdida de previsualización e iconos de eliminar de Upload cuando su `list-type` es picture-card, #7857\n- Añadido el atributo `sort-by` para TableColumn, #7828 (por @wangfengming)\n- Corregido que a veces DatePicker muestra un número de año incorrecto al seleccionar la primera semana en modo week, #7860 (por @hh23485)\n- Corregido error de estilo de icono de Step vertical, #7891\n- El área hot para las flechas de nodo en Tree se expandia, #7891\n\n### 2.0.1\n\n*2017-10-28*\n\n- Corregido error de estilo de RadioButton y CheckboxButton, #7793\n- Corregido TimePicker no responde al desplazamiento del ratón en algunas condiciones, #7811\n- Corregido estilos incompletos de algunos componentes cuando se importan bajo demanda, #7811\n\n### 2.0.0 Carbon\n\n*2017-10-27*\n\n#### New features\n\n- General\n  - Un nuevo tema: `theme-chalk`\n  - Se ha mejorado la accesibilidad de los siguientes componentes: Alert, AutoComplete, Breadcrumb, Button, Checkbox, Collapse, Input, InputNumber, Menu, Progress, Radio, Rate, Slider, Switch, Upload\n  - Añadido tipografías TypeScript\n  - Todos los iconos existentes son rediseñados. Se han añadido algunos iconos nuevos\n  - Añadida una serie de clases de utilidades basadas en puntos de ruptura que ocultan elementos cuando el tamaño del viewport cumple ciertas condiciones\n  - Componentes de diseño añadidos: Container, Header, Aside, Main, Footer.\n  - Ahora puede configurar los tamaños de componentes a nivel global. Al importar Element, puede añadir un objeto de configuración global con un prop `size` para configurar tamaños predeterminados para todos los componentes.\n- Button\n  - Atributo `round` añadido. Se usa para botones de esquinas redondas #6643\n- TimeSelect\n  - Ahora puede ser navegado por `Up` y `Down`, y presionando `Enter` selecciona la hora #6023\n- TimePicker\n  - Ahora puede ser navegado por `Up` y `Down`, y presionando `Enter` selecciona la hora #6050\n  - Añadido `start-placeholder` y `end-placeholder`. Son placeholder's para las dos casillas de input en modo range #7169\n  - Añadido el atributo `arrow-control` para hacer girar el tiempo con las flechas #7438\n- Tree\n  - Ahora los nodos hijo no se renderizan antes de la primera expansión #6257\n  - Añadido el atributo `check-descendants`. Determina si los nodos hijo se seleccionan al seleccionar su nodo padre en modo `lazy` #6235\n- Tag\n  - Atributo `size` añadido #7203\n- Datepicker\n  - Ahora `timeFormat` puede dar formato al TimePicker cuando type está configurado en `datetimerange` #6052\n  - Añadido `start-placeholder` y `end-placeholder`. Son placeholder's para las dos casillas de input en modo range #7169\n  - Atributo `value-format` añadido para personalizar el formato del valor enlazado, #7367\n  - Añadido el atributo `unlink-panels` para desacoplar los dos paneles de fechas al seleccionar un rango.\n- MessageBox\n  - Añadido el atributo `closeOnHashChange` #6043\n  - Atributo `center` agregado para que el contenido pueda ser centrado #7029\n  - Añadido atributo `roundButton` para mostrar Botones redondeados #7029\n  - Añadido atributo `dangerouslyUseHTMLString`. Cuando está configurado en true, el mensaje será analizado como cadena HTML<sup>*</sup> #6043\n  - Añadido atributo `inputType` para asignar el tipo para el input interno, #7651\n- Dialog\n  - Añadidos los atributos `width`, `fullscreen`, `append-to-body`. Ahora Dialog puede ser anidado\n  - Atributo `center` agregado para que el contenido pueda ser centrado #7042\n  - Añadidos `focus-after-closed`, `focus-after-open` para mejorar la accesibilidad #6511\n- ColorPicker\n  - Ahora puede escribir colores en el input #6167\n  - Añadidos atributos `size` y `disabled` #7026\n  - Añadido atributo `popper-class` #7351\n- Message\n  - Ahora el color de los iconos puede ser sustituido por CSS #6207\n  - Añadido atributo `dangerouslyUseHTMLString`. Cuando está configurado en true, el mensaje será analizado como cadena HTML<sup>*</sup> #6207\n  - Atributo `center` agregado para que el contenido pueda ser centrado #6875\n- Notification\n  - Añadido atributo `position` para configurar donde aparece Notification #6231\n  - Añadido atributo `dangerouslyUseHTMLString` . Cuando está configurado en true, el mensaje será analizado como cadena HTML<sup>*</sup> #6231\n  - Añadido el atributo `showClose` para ocultar el botón de cierre #6402\n- Rate\n  - Añadido el atributo `show-score` para determinar si la puntuación actual se muestra #6295\n- Tabs\n  - Añadido el atributo `tab-position` #6096\n- Radio\n  - Añadidos los atributos `border` y `size` #6690\n- Checkbox\n  - Añadidos los atributos `border` y `size` #6690\n- Alert\n  - Atributo `center` agregado para que el contenido pueda ser centrado #6876\n- Menu\n  - Añadidos los atributos `background-color`, `text-color` y `active-text-color` #7064\n  - Añadidos los methods `open` and `close` para abrir y cerrar los SubMenu con programación, #7412\n- Form\n  - Añadido el atributo `inline-message` para determinar si el mensaje de validación se muestra inline #7032\n  - Añadido el atributo `status-icon` para mostrar un icono de retroalimentación cuando se valida #7032\n  - Form y FormItem ahora tienen un atributo `size`. Los componentes internos heredarán este tamaño si no se especifica en ellos mismos, #7428\n  - Método `validate` devolverá ahora una promesa si se omite la llamada de retorno, #7405\n  - Añadido método `clearValidate` para limpiar los resultados de las validaciones de todos los form items, #7623\n- Input\n  - Añadido slots con nombres `suffix` y `prefix` y atributos `suffixIcon` y `prefixIcon` para añadir contenido dentro del input #7032\n- Breadcrumb\n  - Añadido el atributo `separator-class` para dar soporte a los iconos como separadores de items #7203\n- Steps\n  - Añadido atributo `simple` para activar Steps de estilo sencillo #7274\n- Pagination\n  - Añadidos los atributos `prev-text` y `next-text` para personalizar los textos de la página anterior y de la página siguiente #7005\n- Loading\n  - Ahora usted puede personalizar el ícono del spinner y el color de fondo con los props `spinner` y `background` , #7390\n- Autocomplete\n  - Añadido atributo `debounce`, #7413\n- Upload\n  - Añadidos los atributos `limit` and `on-exceed` para limitar la cantidad de archivos, #7405\n- DateTimePicker\n  - Añadido el atributo `time-arrow-control` para activar `arrow-control` del TimePicker anidado, #7438\n- Layout\n  - Añadido un nuevo breakpoint `xl` para viewport más ancho que 1920px\n- Table\n  - Añadido el atributo `span-method` para combinar celdas\n  - Añadido el método `clearSort` para borrar la clasificación programáticamente\n  - Añadido el método `clearFilter` para limpiar el filtro de forma programática\n  - Para las filas ampliables, cuando se amplía una fila, se añadirá una clase `.expanded` a su lista de clases, para que pueda personalizar su estilo.\n  - Atributo de `size` añadido\n  - Añadido el método `toggleRowExpansion` para expandir o contraer filas expandibles programáticamente.\n  - Añadido el atributo `cell-class-name` para asignar el nombre de la clase para las celdas\n  - Añadido atributo `cell-style` para dar estilo a las celdas\n  - Añadido atributo `header-row-class-name` para asignar el nombre de clase para las filas de encabezado.\n  - Añadido un atributo `header-row-style` para el estilo de encabezado\n  - Añadido el atributo `header-cell-class-name` para asignar el nombre de la clase para las celdas de encabezado.\n  - Añadido el atributo `header-cell-style` a las celdas de encabezado de estilo\n  - El atributo prop de TableColumn ahora acepta las notaciones `object[key]`\n  - Atributo de `index` añadido para TableColumn para personalizar índices de filas\n- Select\n  - Añadido el atributo `reserve-keyword` para reservar la palabra clave de búsqueda actual después de seleccionar una opción.\n\n#### Bug fixes\n\n- DatePicker\n  - Arreglado `v-model` que devolvia el segundo día de la semana seleccionada en modo week #6038\n  - Arreglado el primer input comenzaba borrado con el type `daterange` #6021\n- DateTimePicker\n  - Arreglado DateTimePicker y TimePicker que se afectaban entre sí cuando se seleccionaban #6090\n  - Arreglado la hora y el segundo podian estar más allá del límite al seleccionar el tiempo #6076\n- TimePicker\n  - Arreglado `v-model` que no se actualizaba correctamente cuando no tenia el foco #6023\n- Dialog\n  - Arreglado textos que tenian bordes borrosos al abrir y cerrar dropdowns anidados #6088\n- Select\n  - Rendimiento mejorado. Ahora Vue dev-tool no se bloqueará cuando un gran número de Selects sean destruidos #6151\n- Table\n  - Corregido un bug de Table permanecía oculto cuando su elemento padre tenia el atributo `display: none`\n  - Arreglado Table ahora amplia su ancho cuando el elemento padre tiene `display: flex`\n  - Arreglado un bug que corregía las columnas de una tabla con slot con nombre `append` que desaparecia cuando los datos eran recuperados dinámicamente.\n  - Arreglado el atributo `expand-row-keys` que no funcionan con el valor inicial\n  - Fallo del filtro corregido al actualizar los datos\n  - Se ha corregido un error de cálculo de la disposición de columnas fijas con cabeceras agrupadas.\n  - Corregido un error de `max-height` dinámico\n  - Corregidos algunos errores de cálculo de estilo\n\n#### Breaking changes\n\n- General\n  - Eliminado `theme-default`\n  - Compatible con Vue 2.5.2+ e IE 10+\n  - Evento `change` de componentes del formulario y evento `current-change` de Pagination ahora sólo se activa en la interacción del usuario.\n  - El atributo `size` del botón y los componentes del formulario aceptan ahora los tamaños `medium`, `small` y `mini`.\n  - Para facilitar el uso de iconos de terceros, los atributos `icon` de Button y Steps y los atributos `prefix-icon` y `suffix-icon` del input ahora requieren un nombre de clase completo.\n- Dialog\n  - Atributo `size` eliminado. Ahora el tamaño de Dialog se puede configurar con `width` y `fullscreen`\n  - Ahora la visibilidad del Diálogo no puede ser controlada por `v-model`\n- Rate\n  - `text-template` a sido renombrado a `score-template`\n- Dropdown\n  - `menu-align` a sido renombrado a `placement`. Ahora soporta más posiciones\n- Transfer\n  - `footer-format` a sido renombrado a `format`\n- Switch\n  - Los atributos que comienzan con `on*` serán analizados en eventos en JSX, haciendo que todos los atributos `on*` de Switch no puedan trabajar en JSX. Por lo tanto, los atributos `on*` se renombran a `active-*`, y por consiguiente los atributos `off-*` se renombran a `inactivado-*`. Este cambio afecta a los siguientes atributos: `on-icon-class`, `off-icon-class`, `on-text`, `off-text`, `on-color`, `off-color`, `on-value`, `off-value`.\n  - Los atributos `active-text` y `inactive-text` ahora no tienen valores por defecto.\n- Tag\n  - El atributo type acepta ahora `success`, `info`, `warning` y `danger`\n- Menu\n  - Atributo `theme` eliminado. El color de Menu se puede configurar utilizando `background-color`, `text-color` y `active-text-color`\n- Input\n  - Atributo `icon` eliminado. Ahora el icono del sufijo puede configurarse usando el atributo `suffix-icon` o el slot con nombre `suffix`.\n  - Eliminado el atributo `on-icon-click` y el evento `click`. Ahora para añadir el manejador de clics en los iconos, por favor use los slots con nombre.\n  - El evento `change` se comporta ahora como el nativo, que se activa sólo en la perdida del foco o presionando enter. Si necesita responder a las entradas de usuario en tiempo real, puede utilizar el evento `input`.\n- Autocomplete\n  - Atributo `custom-item` eliminado. Ahora la plantilla de sugerencias del input se puede personalizar utilizando `scoped slot`\n  - Atributo `props` eliminado. Ahora puede utilizar el atributo `value-key` para designar el nombre de la clave del objeto de sugerencia del input para su visualización.\n- Steps\n  - Atributo `center` eliminado\n  - Ahora Steps llenara su contenedor padre por defecto\n- DatePicker\n  - Los parámetros del evento `change` de DatePicker son ahora el valor vinculante en sí mismo. Su formato es controlado por `value-format`\n- Table\n  - Soporte eliminado para personalizar la plantilla de columnas mediante `inline-template`\n  - `sort-method` ahora se alinea con `Array.sort`. Debería devolver un número en lugar de un booleano\n  - El slot `append` se desplazo fuera del elemento `tbody` para evitar múltiples renderizados.\n  - Evento `expand` se renombro a `expand-change`\n  - Los parametros de los métodos `row-class-name` y `row-style` son ahora un objeto\n\n# #\n\n<i><sup>*</sup> El procesamiento dinámico de HTML arbitrario en su sitio web puede ser muy peligroso porque puede conducir fácilmente a [ataques XSS](https://en.wikipedia.org/wiki/Cross-site_scripting). Por lo tanto, cuando `dangerouslyUseHTMLString` está encendido, por favor asegúrese de que el contenido de `message` es confiable, y **nunca** asigne el `message` al contenido proporcionado por el usuario.</i>``"
  },
  {
    "path": "CHANGELOG.fr-FR.md",
    "content": "## Changelog\n\n### 2.15.14\n\n*2023-08-24*\n\n#### Bug fixes\n- Img\n  - Delete referrerpolicy prop (#22651 by @xinguanhua)\n#### Optimization\n- Docs\n  - Update readme and website example links (#22642 by @lyfeyaj)\n  - Update popper links (#22539 by @brizer)\n- I18n\n  - Update translation of Spanish (#22430 by @jcardus)\n  - Add sr-Latn translation (#22567 by @N-M)\n  - Update Uzbek translation (#22390 by @akahon)\n- Statistics\n  - Fix doc; Optimized code (#22384 by @webvs2)\n- Table\n  - Add highlight selection row (#22382 by @wangdaodao)\n\n### 2.15.13\n\n*2023-02-12*\n\n#### Bug fixes\n- Docs\n  - Fix Statistic docs (#22383 by @JUST-Limbo) \n  - Fix Input docs (#22093 by @lm312)  \n  - Fix en-US docs (#22268 #22269 #22270 by @Hazel-Lin)  \n  - Fix Pagination docs (#22288 by @xujintai123)\n  - Fix: Links docs (#22370 by @itmier)    \n- Statistics\n  - fix slot display bug  (#22375 by @webvs2)\n- Chore\n  - missing web-type after publishing (#22271 by @loosheng)\n#### Optimization\n- InputNumber\n  - Fix touch one click trigger twice on the window touch pad (#22185 by @mrsai)\n- Image\n  - Add initialIndex prop (#22346 by @inkroom) \n- Statistics\n  - Updated countdown feature to localize lodash Closes (#22260 by @webvs2)\n  - Update code and doc (#22276 by @webvs2)\n- Other\n  - fix web-types type props (#22281 by @whzxc)\n\n### 2.15.12\n\n*2022-11-16*\n\n#### Bug fixes\n- Statistic：\n  - Fixed the thousandth bit bug (#22252 by @webvs2)\n- Other\n  - Fix 2.15.11 element-theme-chalk publish fail bug\n\n### 2.15.11\n\n*2022-11-15*\n\n#### Bug fixes\n- Docs\n  - Fix Radio docs (#22178 by @bchen1029) \n  - Fix Progress docs\n#### Optimization\n- I18n\n  - Update translation of Malaysian (#22185 by @z4q)\n  - Update translation of Norwegian (#22145 by @Barsnes)\n- Progress\n  - Add defineBackColor and textColor prop (#22089 by @lm312)\n- Statistics\n  - Add new component Statistics (#22159 by @webvs2)\n- Other\n  - Add Web Types to improve code assistance in WebStorm IDE and other JetBrains IDEs (#22135 by @piotrtomiak)\n\n### 2.15.10\n\n*2022-09-13*\n\n#### Bug fixes\n\n- DatePicker\n  - Fix props placement error (#21908 by @lqzhgood)\n- Loading\n  - Fix sticky DOM error (#22087 by @zzjjhh001)\n- Docs\n  - Fix Popover docs (#22083 by @lm312)\n  - Fix Skeleton docs (#22092 by @lm312)\n  - Fix DatePicker docs (#21970 by @guojiongwei)\n- Tree: \n  - fix lazy-load default check problem (#21934 by @kiss-yu)\n\n#### Optimization\n\n- I18n\n  - Add translation of Sinhalese (#21936 by @sayuri-gi)\n  - Update translation of Spanish (#21924 by @jcardus)\n  - Add translation of Malaysian (#22028 by @iorange0411)\n  - Update translation of Swahili (#21904 by @Cholowao)\n- Utils\n  - update date-util.js (#22099 by @Due07)  \n- DatePicker\n  - add months And years type (#21918 by @akiko123456)\n\n### 2.15.9\n\n*2022-06-02*\n\n#### Bug fixes\n\n- Table\n  - Fix Tabl-header shake bug (#21863 by @bofeng)\n  - Fix when partial import  show `el-checkbox not imported` error (#21828 by @bobohuochai)\n- FormItem\n  - Fix  change rules  verification not reset bug (#21892 by @bofeng)\n- Cascader\n  - Fix change options unexpect error (#21759 by @louiebb)\n- Docs\n  - Fix Popover docs (#21843 by @lod61)\n  - Fix Calendar docs (#21814 by @GoJam11)\n  - Fix TimePicker docs (#21803 by @Alanscut)\n  - Fix DatePicker docs (#21877 by @Nirvanaiu)\n- Other\n  - Fix codepen display bug (#21863 by @bofeng)\n\n#### Optimization\n\n- I18n\n  - Add translation of Swahili (#21895 by @quilltouch)\n- Chore\n  - Use launch-editor-middleware in dev environment (#21633 by @polemices)\n- DatePicker & Cascader\n  - Optimize the dropdown animation direction (#21806 by @XivLaw)\n- Tooltip\n  - Optimize `getFirstElement` code (#21886 by @zhankang)\n- Input\n  - Optimize scss code (#21558 by @cheese-git)\n\n### 2.15.8\n\n*2022-04-12*\n\n#### Bug fixes\n\n- Drawer\n  - Fix appendToBody failure problem (#21264 by @cs1707)\n- Switch\n  - Fix toggling value problem(#19473 by @EdwinBetanc0urt)\n- Docs\n  - Fix input docs (#21723 by @justforuse)\n  - Fix DatePicker docs (#21663 by @justforuse)\n  - Fix Skeleton docs (#21601 by @yanwydxf)\n- Others\n  - Fix vue version (#21736 by @ckvv)\n\n#### Optimization\n\n- I18n\n  - add translation of Azerbaijani (#21012 by @ricardotondello)\n  - update translation of Slovenian (#21729 by @patik123)\n  - update translation of Slovak (#21711 by @sjaustirni )\n  - add translation of Icelandic (#21709 by @aronhr)\n  - add translation of Bengali (#21485 by @llwwtt)\n\n#### Others\n\n- Due to compatibility considerations, the PR on node-sass (#21019 by @linxsbox) of 2.15.7 release has been withdrawn and will be published in an appropriate version after re-evaluation.\n\n### 2.15.7\n\n*2021-11-18*\n\n#### Bug fixes\n\n- Select\n  - fix click icon triggering dropdown (#21314 by @dennyak47)\n  - fix keydown event when composition (#21336 by @bchen1029)\n- Badge\n  - fix type class when is-dot (#21308 by @adaex)\n- Form\n  - validate method reject error info (#21374 by @cs1707)\n- Table\n  - fix resizeObserver loop limit exceeded (#21255 by @tomieric)\n  - fix toggleAllSelection bug when table is empty (#21456 by @cs1707)\n  - optimize performance (#21330 by @cs1707)\n- Button\n  - fix disabled priority (#21375 by @cs1707)\n- Descriptions\n  - fix label slot bug (#21462 by @cs1707)\n- SASS\n  - replace node-sass with dart-sass (#21019 by @linxsbox)\n- Docs\n  - fix skeleton typos (#21408 by @zhhbstudio)\n\n### 2.15.6\n\n*2021-09-02*\n\n#### Bug fixes\n\n- Cascader\n  - fix a bug that makes the browser jitter in zoom mode (#21207 by @cs1707)\n  - optimize performance (#21231 by @cs1707)\n- Select\n  - fix long text overflow in multiple mode (#21237 by @cs1707)\n- Dropdown\n  - add disabled property (#21235 by @mshioda)\n- Radio\n  - fix checked state when browser go back (#21250 by @cs1707)\n- Descriptions\n  - fix type declaration (#21265 by @adaex)\n  - avoid table style conflict (#21254 by @adaex)\n- Drawer\n  - fix append to body (#21264 by @cs1707)\n- Local\n  - fix italian mistake (#21012 by @ricardotondello)\n\n### 2.15.5\n\n*2021-08-04*\n\n#### Bug fixes\n\n- Select\n  - fix resetInputHeight (#21201 by @cs1707)\n\n### 2.15.4\n\n*2021-08-03*\n\n#### New features\n\n- Descriptions \n  - add description component (#21129 by @cs1707)\n- Result \n  - add result component (#21171 by @cs1707)\n\n#### Bug fixes\n\n- Utils \n  - fix isScroll (#21098 by @canvascat)\n- Translation \n  - update it.js (#21133 by @bliberi)\n- RadioGroup \n  - fix RadioGroup used in component causes exception #17908 (#20783 by @lceric)\n- Message \n  - fix message[type] (#21088 by @cs1707)\n- Carousel \n  - reset the timer when setActiveItem method is called (#20846 by @Nekojita1)\n- Cascader \n  - fix emitPath (#21185 by @cs1707)\n- Select \n  - fix select filterable bug (#17494 by @profore)\n  - fix a bug that makes the browser jitter in zoom mode (#21197 by @cs1707)\n- Tree \n  - fix insertChild (#21194 by @cs1707)\n\n### 2.15.3\n\n*2021-06-29*\n\n#### New features\n\n- Skeleton\n  - add skeleton component (#21038 by @cs1707)\n- Empty\n  - add empty component (#21080 by @cs1707)\n\n#### Bug fixes\n\n- Local\n  - fix week translations for hr locale (#21040 by @cs1707)\n- Table\n  - fix lazy load data (#21041 by @cs1707)\n- Docs\n  - fix form hide-required-asterisk description (#21045 by @cs1707)\n- Drawer:\n  - fix destroy (#20715 by @zj9495)\n- Row\n  - fix align top (#20963 by @cs1707)\n- Select\n  - fix the bug when the value is Boolean (#21052 by @cs1707)\n- Calendar\n  - fix first-day-of-week (#21057 by @cs1707)\n- Utils\n  - fix isScroll (#21065 by @cs1707)\n  - fix(utils.dom by @fw6)\n- TypeScript\n  - add CascaderPanel export type (#21070 by @qige2016)\n  - add spinner.d.ts (#21090 by @qige2016)\n  \n### 2.15.2\n\n*2021-05-28*\n\n#### Bug fixes\n\n- Image\n  - fix z-index and keydown event add stopPropagation (#20859 by @cs1707)\n- Input\n  - fix show password cursor (#20870 by @cs1707)\n  - fix show password icon in edge (#20902 by @cs1707)\n- Carousel\n  - fix interval and scale bug (#20931 by @cs1707)\n- Cascader\n  - fix delete tag bug (#20939 by @cs1707)\n- Drawer\n  - add overflow auto (#20948 by @cs1707)\n- Others\n  - fix isFunction (#20912 by @cs1707)\n\n### 2.15.1\n\n*2021-02-23*\n\n#### Bug fixes\n\n- Drawer\n  - bugfix (by @cs1707)\n- Image\n  - fix incorrect image object fit ratio in IE (#19583 by @charlie0228)\n- Cascader\n  - fix cascader panel active path (#20730 by @cs1707)\n- Calendar \n  - fix calendar component i18n bug (#20758 by @iamkun)\n- ColorPicker\n  - fix bugs (by @UxieVerity)\n\n#### Optimization\n\n- Doc\n  - update Axure resource v2.1.0 (by @iamkun)\n\n### 2.15.0\n\n*2021-01-15*\n\n#### Bug fixes\n\n- Select\n  - Fix placeholder i18n bug (#17644 by @nzh63)\n- Popconfirm\n  - Popconfirm i18n bug by @iamkun\n- Drawer\n  - Fix focus bug (#20626 by @cs1707)\n- Image\n  - Preview optimization (#20652 by @cs1707)\n\n#### Optimization\n\n- Doc\n  - Fix typo in french translation of datetime-picker.md (#20543 by @lonk)\n  - Add format attribute description to the progress component (#20641 by @cs1707)\n\n### 2.14.1\n\n*2020-11-11*\n\n#### Bug fixes\n\n- Popover\n  - Compatible with Vue 2.6 new v-slot syntax (#20424 by @iamkun)\n\n#### Optimization\n\n- I18n\n  - Update Arabic translation (#20202 by @elkattan)\n  - Update Uighur translation (#20177 by @IlhamTahir)\n\n### 2.14.0\n\n*2020-10-29*\n\n#### Breaking changes\n\n- Popconfirm\n  - Rename event name to `confirm`, `cancel` (#20240 by @hugiron)\n\n#### Bug fixes\n\n- Progress\n  - Fix attribute error (#19985 by @Caaalabash)\n\n#### Optimization\n\n- I18n\n  - Update Russian translation (#19451 by @yangirov)\n  - Update Khmer translation (#20077 by @Sovai)\n  - Update Ukrainian translation (#20344 by @MammutAlex)\n\n### 2.13.2\n\n*2020-05-18*\n\n#### Bug fixes\n\n- Autocomplete\n  - Fix change event bug (#19200 by @sxzz)\n- Image\n  - Update error status (#19194 by @lhx6538665)\n\n#### Optimization\n\n- I18n\n  - Update ru-RU popconfirm translation (#19220 by @Opppex)\n  - Update vi translation (#19244 by @quangln2810)\n  - Update Catalan and Spanish translations (#19296 by @Ismaaa)\n  - Update Indonesia translation (#19320) by @therour)\n  - Update Brazilian Portuguese translation (#19374 by @diegomengarda)\n\n\n### 2.13.1\n\n*2020-04-13*\n\n#### New features\n- Autocomplete\n  - Add change event (#17913 by @sxzz)\n\n#### Bug fixes\n\n- Autocomplete\n  - Fix suggestion error when textarea (#18478 by @Roojay)\n- Carousel\n  - Fix console typo bug (#18264 by @IceFox)\n- Image\n  - Fix preview dose not show when preview list not contain src issue (#18975) (#19130 by @luckyCao)\n  - Fix shortcut key not work at second time issue (#18983) (#19156 by @luckyCao)\n  - Don't show image-viewer when preview is false (#18967 by @inooNgt)\n- Transfer\n  - Fix incorrect line-height of el-transfer's first list item when it was used with  el-form-item (#18917 by @Hanx)\n- InputNumber\n  - Correctly compute inputNumberDisabled (#18439 by @ashuser-pendo)\n- Chore\n  - Remove index intro (#19155 by @iamkun)\n- Doc\n  - Popconfirm doc update (#18324 by @iamkun)\n  - Fix step-strictly docs typo (#18705 by @dream2023)\n  - Fix a type error in document of steps component (#17555 by @haoranyu)\n\n### 2.13.0\n\n*2019-11-26*\n\n#### New features\n\n- Popconfirm\n  - Add popconfirm component (#17548 by @iamkun)\n\n#### Bug fixes\n\n- BackTop\n  - Use cubic bezier scrolling (by @lon)\n- DatePicker\n  - Fix bug of only select min date of date range problem (#17191 by @smk0621)\n- Select\n  - Fix select test cases (by @msidolphin)\n- Tree\n  - Add font-size for the style of tree empty-text (#17094 by @spengjie)\n- Table\n  - Column header can be costumed (#17291 by @ziyoung)\n  - Update table header cell style (#17284 by @ziyoung)\n  - Fix table header height after filter (#17348 by @ziyoung)\n  - Fixed row-style with display not work (#17002 by @a631807682)\n  - Fix header table not display (#17341 by @ziyoung)\n- Calendar\n  - Import el-button and el-button-group (#17376 by @masongzhi)\n- MessageBox\n  - Fix icon position error (#17410 by @nullptru)\n- TimePicker\n  - Set the selection range after scrolling up or down (#16868 by @mattheyan)\n- Message\n  - Fix close instace offsetHeight（#17564） (#17852 by @gzwgq222)\n- Form\n  - Callback of validateField should be optional (#17314 by @CarterLi)\n- Cascader\n  - Fix TypeScript 3.7 compatibility (#17881 by @CarterLi)\n- Menu\n  - Fix router NavigationDuplicated error when using vue-router@^3.1.0 (#17269 by @iamkun)\n- Dropdown\n  - Update type file (#17550 by @iamkun)\n- Progress\n  - Add strokeLinecap prop (#17552 by @iamkun)\n- InfiniteScroll\n  - Skip trigger event on invisible element (#17553 by @iamkun)\n- Image\n  - Perfect picture preview behavior (#16985 by @luckyCao)\n  - Fix shield the page when preview big image (#16796 by @luckyCao)\n- Drawer \n  - Bugfix drawer-append-to-body-not-working (#16953 by @JeremyWuuuuu)\n- Select\n  - Fix tag show value or empty issue (17199 by @luckyCao)\n- Scrollbar\n  - Fix FireFox scroll bar width (#18091 by @iamkun)\n  \n#### Optimization\n\n- I18n\n  - Update sv-SE.js (#17926 by @FOLLGAD)\n  - Update avatar component fr doc (#17762 by @blombard)\n- Docs\n  - Fix time-select typo (#17250 by @wacky6)\n  - Fix Drawer attribute accepted value typo in es (#17122 by @haoranyu)\n  - Update Spanish changelog 2.12.0 (#17364 by @Gonzalo2310)\n  - Fix Changelog typo (#17874 by @renlixin)\n  - Fix Loading demo (#17862 by @MBearo)\n  - Add input event in input Events Table (#18061 by @zhouxinyong)\n  - Delete Input repeat change event (#18085 by @zhouxinyong)\n\n### 2.12.0\n\n*2019-08-29*\n\n#### New features\n\n- Popover\n  - Add close-delay prop (#16671 by @LachlanStuart)\n- Theme\n  - Add Chrome Extension: Element Theme Extension (#16686 by @iamkun)\n- Icon\n  - Add font-display to @font-face declaration (#16805 by @iamfaizalandyka)\n\n#### Bug fixes\n\n- Carousel\n  - Fix onChange emit value (#16705 by @iamkun)\n- Notification\n  - Fix modifying incoming option object (#16704 by @iamkun)\n- DatePicker\n  - Add className for picker option (#16632 by @iamkun)\n- DateTimePicker\n  - Fix time-spinner not scroll to right position (#16854 by @jesse-li)\n- Table\n  - Prevent click handler after drag (#16850 by @ziyoung)\n  - Fix chrome crash when set thead css display to none (#16956 by @luckyCao)\n  - Fix wrong empty block height (#16861 by @ziyoung)\n  - Not throw error when calling toggleExpansion (#16304 by @yyjjqq94)\n  - Not trigger sort-change event when mounted (#17113 by @a631807682)\n  - Fix setCurrentRow unable to clear highlight row (#16879 by @ziyoung)\n  - Fix expand-row-keys not work when data is loaded asynchronously (#16899 by @ziyoung)\n  - set toggleAllSelection as instance property (#17137 by @ziyoung)\n- Tree\n  - Fix distance between label and checkbox (#16799 by @Hazlank)\n- Tabs\n  - Fix incorrect TabItem's position (#16520 by @victorting)\n  - Fix activated tab is out of visual range bug (#17033 by @nullptru)\n- Calendar\n  - Fix weekdays i18n issue (#16772 by @ubitoffee)\n  - fix locale error by (#17208 by @iamkun)\n- Cascader\n  - Fix CascaderPanel display error (#16716 by @zhangHongEn)\n  - Fix disable status and close button issue (#16224 by @yyjjqq94)\n- Input\n  - Fix Korean composition event (#15069 by @MoonHyuk)\n  - Fix click event of clear button not trigger when using v-loading (#16576 by @a631807682)\n- Select\n  - Not toggle dropdown when filtering (#17205 by @luckyCao)\n- Transfer\n  - Fix style error  (#17206 by @iamkun)\n- Dialog\n  - update sass var (#16365 by @haoranyu)\n- RadioGroup\n  - Not produce invalid HTML in table if \"is\" attribute is specify (#17070 by @nullptru)\n- Divider\n  - Support custom classes (#17078 by @island205)\n\n#### Optimization\n\n- Checkbox\n  - Improve screen reader experience (#16575 by @tylertrotter)\n- Docs\n  - Update changelog (#16773 by @SimonaliaChen)\n  - Update contributing guide (#14800 by @sinchang)\n  - Fix typo in Drawer docs (#16848 by @winkay)\n  - Update custom theme (#16983 by @iamkun)\n  - Add Esperanto translation (#16955 by @maxkoryukov)\n  - Update input-number document about change event (#16316 by @luckyCao)\n  - Update spanish doc 2.11.1 (#16961 by @Gonzalo2310)\n- I18n\n  - Remove translation of 'year' in catalan language as in the other languages (#14722 by @oscaralbareda)\n  - Update spanish changelog 2.10.0 and 2.10.1 (#16548 by @Gonzalo2310)\n  - Update ar.js (#16653 by @l3op)\n- Test\n  - Correct spelling error (#16672 by @boomler)\n  - Refactor unit test to use data-uri (#16847 by @a631807682)\n- Types\n  - Fix httprequest type (#16633 by @luckyCao)\n\n### 2.11.1\n\n*2019-07-26*\n\n#### Bug fixes\n\n- Image\n  - Fix Image component SSR compatibility (#16737 by @luckyCao)\n- Chore\n  - Update dart-sass compatibility (#16744 by @LewisChennnnn)\n\n### 2.11.0\n\n*2019-07-25*\n\n#### New features\n\n- Drawer\n  - Add drawer component (#16577 by @JeremyWuuuuu)\n\n#### Bug fixes\n\n- Checkbox\n  - Enhance css selector (#16006 by @Hazlank)\n- Tree\n  - Make el-tree generic (#15934 by @JeremyWuuuuu)\n  - Set isCurrent prop to False (#15870 by @kkkisme)\n- Dropdown\n  - Fix split-button caret default color (#15931 by @JuniorTour)\n- Cascader\n  - Fix level 1 children is empty update problem (#16399 by @luckyCao)\n  - Add sets default values when lazy is true (#16420 by @luckyCao)\n  - Fix display errors when node value is duplicate (#15935 by @junyiz)\n  - Expose getCheckedNodes and fix options change bug (#16709 by @SimonaliaChen)\n- Calendar\n  - Display correct header when range is specified (#16354 by @ziyoung)\n- Submenu\n  - Fix prop append-to-body (#16289 by @a631807682)\n- Table \n  - Fix tree table when updating data (#16481 by @island205)\n- Select\n  - Fix memory leak issue (#16463 by @island205)\n- InfiniteScroll\n  - Update naming & doc (#16698 by @iamkun)\n- Avatar\n  - Fix image not center vertically issue (#16489 by @luckyCao)\n- Dialog\n  - Add destroyOnClose attribute (#16455 by @ziyoung)\n- Image\n  - Add big Image preview feature (#16333 by @luckyCao)\n\n#### Optimization\n\n- Docs\n  - Fix dropdown demo (#16193 by @webxmsj)\n  - Fix typo in table documents (#15971 by @howiefh)\n- I18n\n  - Update translation of Thai language (#16689 by @ponkrit)\n- Chore\n  - Update theme base api (#16607 by @iamkun)\n  - Add form theme token (#16699 by @iamkun)\n  - Mark ali inner user's access (#16609 by @iamkun)\n  - Fix doc anchor bug (#16692 by @iamkun)\n\n### 2.10.1\n\n*2019-07-02*\n\n#### Bug fixes\n\n- Table\n  - Fix sort icon (#15439 by @bezany)\n  - Fix layout breaks when append slot exists (#16332 by @ziyoung)\n  - Fix showOverflowTooltip not reactive (#16295 by @a631807682)\n  - Register scrollbar in filter-panel (#16246 by @ziyoung)\n- Chore\n  - Fix 2.9 docs (#16233 by @ziyoung)\n  - Fix index page theme intro english css style issue (#16254 by @iamkun)\n\n#### Optimization\n\n- Tag\n  - Compatible with IE (#16334 by @ziyoung)\n- Chore\n  - Update Dingtalk Group QR image (#16236 by @iamkun)\n- Doc\n  - Update online theme roller doc (#16244 by @iamkun)\n\n### 2.10.0\n\n*2019-06-25*\n\n#### New features\n\n- I18n\n  - Added Uzbek language (#15796 by @ogabek96)\n- Calendar\n  - Add first-day-of-week attribute (#16047 by @ziyoung)\n- Avatar\n  - Add avatar component (#16144 by @luckyCao)\n- Upload:\n  - Add capability to customize thumbnail template (#13192 by @victorzhuk)\n\n#### Bug fixes\n\n- Tree\n  - Not highlight tree node when currentKey is null (#15668 by @yyjjqq94)\n  - Fix issue #15538 caused by two Tree sharing the same data. (#15615 by @VanMess)\n- Upload\n  - Update the parameter `fileList` type (#15716 by @underfin)\n- Table\n  - Fix loading icon not display (#15868 by @ziyoung)\n  - Fix background color of complex table when hovering (#15504 by @cnlon)\n  - Fix current-row-key and select event bug (#15983 by @ziyoung)\n  - Height accepts more units (#16013 by @ziyoung)\n  - Fix reserve-selection not work (#16135 by @ziyoung)\n- Docs\n  - Fix Divider attribute type in zh-cn (#15889 by @haoranyu)\n- Menu\n  - Fixed submenu hidden bug after adding popper-append-to-body (#15391 by @PanJiaChen)\n- Select\n  - Fix initialInputHeight (#15989 by @yyjjqq94)\n  - Fix default-first-option behavior when typing Chinese (#15431 by @VanMess)\n  - fix double import problem (#16215 by @lengband)\n- Message\n  - Add type def for offset option (#16027 by @matjaz)\n- Timeline\n  - Fix reverse broken (#16091 by @ziyoung)\n- Slider\n  - Fix #15545 by adding explains about \"input\" event in Chinese (#15588 by @VanMess)\n- InfiniteScroll\n  - Update package name (#16125 by @iamkun)\n- MessageBox\n  - Fix  distinguishCancelAndClose action not same as docs bug (#15438 by @qingdengyue)\n- PopupManager\n  - Fix z-index cannot be rewritten at first using (#15738 by @luckyCao)\n- Docs\n  - Delete an incorrect closing html tag and empty block code (#16194 by @Alexeykhr)\n- Chore\n  - Update test api host (#15807 by @iamkun)\n\n#### Optimization\n\n- Tree\n  - Modify loop conditions to improve performance (#15699 by @KingJeason)\n- Theme\n  - Refine GA track & Update footer link forward to online theme roller (#16007 by @island205)\n- Badge\n  - Update badge prop check (#16198 by @iamkun)\n- Avatar\n  - Update theme config var (#16202 by @luckyCao)\n- I18n\n  - Update pt-br.js (#15776 by @gigioSouza)\n  - Update Farsi translation (#15881 by @pamenary)\n- Docs\n  - Add missing components in quickstart (#16063 by @pape2016)\n  - Update french translation (#16208 by @blombard)\n  - Add description $slots.default (#15444 by @Alexeykhr)\n  - Update Spanish Doc 2.9.1 (#15840 by @Gonzalo2310)\n  - Fix spelling mistakes in fr (#15837 by @blombard)\n  - Update changelog 2.9.2 Spanish (#16185 by @Gonzalo2310)\n\n#### Breaking changes\n\n- Form\n  - Remove success status (#16159 by @ziyoung)\n\n### 2.9.2\n\n*2019-06-21*\n\n#### Correction de bugs\n\n- Chore\n  - Correction du fichier de définitions TS (#15805 by @NateScarlet)\n\n### 2.9.1\n\n*2019-05-30*\n\n#### Nouvelles fonctionnalités\n\n- Table\n  - les événements tree-props，default-expand-all, expand-row-keys, toggle-row-expansion method and expand-change sont pris en charge dans Tree Table (#15709 by @ziyoung)\n\n#### Correction de bugs\n\n- Table\n  - Correction de quelques bugs (#15709 by @ziyoung)\n- Theme\n  - Mise à jour de l'hôte api (#15784 by @iamkun)\n\n#### Optimisation\n\n- Chore\n  - Mise à jour de InfiniteScroll type (#15794 by @iamkun)\n\n### 2.9.0\n\n*2019-05-30*\n\n#### Nouvelles fonctionnalités\n\n- Backtop\n  - Ajout du composant Backtop (#15541 by @iamkun)\n- PageHeader\n  - Ajout du composant PageHeader (#15714 by @ziyoung)\n- InfiniteScroll\n  - Ajout de la directive InfiniteScroll (#15567 by @iamkun)\n- Cascader\n  - Ajouter plusieurs mode et filter-method (#15611 by @SimonaliaChen)\n- Message\n  - Affichage en mode pile (#15639 by @island205)\n- Tag\n  - Ajout d'un effet de prop (#15725 by @SimonaliaChen)\n- Tabs\n  - Aligner le titre à gauche lorsque le type est carte (#15695 by @luckyCao)\n- DatePicker\n  - Supporte les chaînes de caractères littérales (#15525 by island205)\n- Image\n  - Ajout du support pour les attributs de transmission et listeners (#15578 by @VanMess)\n- Theme\n  - Ajout d'un popup en arrière plan (#15412 by @iamkun)\n- Chore\n  - Mise à jour de la nouvelle page d'index 2.9.0 (#15682 by @iamkun)\n\n#### Correction de bugs\n\n- Table\n  - Correction du comportement de sort-change lorsque la condition de tri est nulle (#15012 by @joelxr)\n- Image\n  - Correction de la compatibilité ssr et object-fit (#15346 by @SimonaliaChen)\n- Input\n  - Correction du style de show-word-count dans el-form (#15359 by @lvjiaxuan)\n  - Correction de l'icône d'erreur pas centrée (#15354 by @YiiGuxing)\n- Calendar\n  - Correction du mauvais jour de la semaine quand le jour est dimanche (#15399 by @qingdengyue)\n  - Correction du bug de disparition d'octobre (#15394 by @qingdengyue)\n- Tabs\n  - Correction de l'onglet de base imbriqué dans l'erreur de remplissage de card (#15461 by @SimonaliaChen)\n- Tag\n  - Correction du problème de propagation d'arrêt (#15150 by @infjer)\n- Form\n  - Correction de input-group dans l'erreur de hauteur de form-item (#15457 by @SimonaliaChen)\n  - Résolution de l'issue de resetFields (15181 by @luckyCao)\n- Tooltip\n  - Correction de tabindex personnalisé ne fonctionnant pas (#15619 by @SimonaliaChen )\n- Link\n  - Correction de la classe de style d'icône (#15752 by @iamkun)\n- Select\n  - Revert définit la valeur à null une fois effacée (#15447 by @iamkun)\n- Loading\n  - Résolution du problème de mise à jour de dom lorsque l'état de chargement change rapidement (#15123 by @FAKER-A)\n- Switch\n  - Label avec les événements récurrents el-switch (#15178 by @FAKER-A)\n- Slider\n  - Correction d'un problème de style lorsque la barre de défilement est cliquée (#15561 by @luckyCao)\n- Radio\n  - Résolution de l'issue 14808 (#14809 by @OverTree)\n- Form\n  - Résolution du problème de resetFields (15181 by @luckyCao)\n- Chore\n  - Mise à jour des dépendances et corrige le bug de démonstration (#15324 by ziyoung)\n- Type\n  - Correction du type de chargement (#15635 by @iamkun)\n  - Correction du type d'icône (#15634 by @iamkun)\n  - Fixe la définition du type de lien (#15402 by @iamkun)\n\n#### Optimisation\n\n- Cascader\n  - Refactor (#15611 by @SimonaliaChen)\n- Chore\n  - Mise à jour de la logique du nouveau composant (by @iamkun)\n- Docs\n  - Renommage de variables dans la documentation (#15185 by @liupl)\n  - Correction du type d'attribut d'image et de la valeur par défaut (#15423 by @haoranyu)\n  - Correction d'un bug de formulaire (#15228 by @SHERlocked93)\n\n### 2.8.2\n\n*2019-04-25*\n\n#### Corrections de bugs\n\n- Icon\n  - Mise à jour (#15272 par @iamkun)\n- Docs\n  - Correction du style de Form et Input (#15273 par @ziyoung)\n\n### 2.8.1\n\n*2019-04-25*\n\n#### Corrections de bugs\n\n- Icon\n  - Mise à jour de l'icône du cascadeur et du select (#15264 par @SimonaliaChen)\n  - Mise à jour (#15258 #15268 par @iamkun)\n\n#### Optimisation\n\n- Chore\n  - Mise à jour du script de build (#15267 par @ziyoung)\n- Docs\n  - Correction de la couleur de souslignage d'un lien (#15265 par @iamkun)\n- Autre\n  - Correction d'une configuration de migration non compatible avec les propriétés et évènements en camelCase (#15260 par @SimonaliaChen)\n\n### 2.8.0\n\n*2019-04-25*\n\n#### Nouvelles fonctionnalités\n\n- Divider\n  - Ajout du composant divider (#15055 par @island205)\n- Rate\n  - Ajout des couleurs et des classes d'icônes personnalisées en passant un objet (#15051 par @SimonaliaChen)\n- Link\n  - Ajout du composant Link (#15052 par @iamkun)\n- Calendar\n  - Ajout du composant calendar (#14908 by @ziyoung)\n- Icon\n  - Ajout d'une icône (#15214 par @iamkun)\n- Alert\n  - Ajout d'un thème sombre (#15041 par @island205)\n- Image\n  - Ajout du composant image (#15117 par @SimonaliaChen)\n- Collapse\n  - CollapseItem peut être désactivé (#15076 par @ziyoung)\n- Carousel\n  - Ajout d'un attribut de direction et support de la direction verticale (#15122 by @ziyoung)\n- Pagination\n  - Ajout d'un attribut caché sur une seule page (#15096 par @ziyoung)\n- Slider\n  - Ajout des marqueurs (#15133 par @luckyCao)\n- Input\n  - Ajout de l'attribut show-word-count (#15075 par @luckyCao)\n- InputNumber\n  - Ajout de l'attribut step-strictly (#15050 par @luckyCao)\n- Tooltip, Dropdown, Popover\n  - Support de l'attribut tabindex (#15167 by @ziyoung)\n\n#### Corrections de bugs\n\n- Notification\n  - Correction du word-break du titre (#15008 par @iamkun)\n- Form\n  - Correction d'une erreur dans les règles de validation (#14985 par @luckyCao)\n  - Correction du style du label (#14969 par @ziyoung)\n  - Les FormItem requis affiche un astérisque lorsque le label est auto (#15144 by @ziyoung)\n- Pagination\n  - Fix du slot non mis à jour (#14711 par @lucyhao)\n- Table\n  - Correction d'un bug de chargement en mode lazy (#15101 by @ziyoung)\n  - Correction de la largeur des cellules lorsque colspan est supérieur à 1 (#15196 by @ziyoung)\n  - Amélioration des performances (#14868 by @ziyoung)\n  - Ne pas émettre de déclencheurs de changement de tri pendant l'initialisation (#14625 by @PeanutWatson)\n  - Comportement égal pour height et max-height (#14660 by @arthurdenner)\n- Dialog\n  - Correction de la casse des longs mots (#15027 par @iamkun)\n- Alert\n  - Mise à jour (#15186 par @ziyoung)\n- Tabs\n  - Correction d'un problème où le rejet d'une promesse touchait l'application (#14816 par @ffxsam)\n  - Rerendu lors d'un changement de slots (#1523238 by @ziyoung)\n- Message\n  - Mise à jour (#14968 par @agoni121212)\n- Select\n  - Correction d'une erreur lorsque la valeur est indéfinie ou nulle (#15022 par @luckyCao)\n- Tree\n  - Détruire le noeud courant après sa suppression (#14604 par @sinchang)\n  - Amélioration des performances (#14881 par @ChenZhuoSteve)\n- Dropdown\n  - Correction de style (#14907 par @doing123)\n- Slider\n  - Correction d'un bug clavier a11y cassé (#14792 by @erezsob)\n- Menu\n  - La valeur ActiveIndex sera nulle si defaultIndex n'existe pas (#14074 par @hoythan)\n- Directive\n  - RepeatClick : utilisation de Date.now() au lieu de Date() (#14776 par @pavelmash)\n- Upload\n  - Correction du style d'affichage des images transparentes (#15039 par @iamkun)\n- Thème\n  - Ajout d'une bordure (#1525256 par @iamkun)\n\n#### Optimisation\n\n- Chore\n  - Mise à jour du changelog zh-cn (#14965 par @iamkun)\n  - Masquer la description de la démo quand elle est vide (#15014 par @ziyoung)\n  - Afficher les informations du serveur de développement par défaut par @iamkun)\n  - Correction d'une erreur de changelog 2.6.0 (#15026 par @iamkun)\n  - Mise à jour de la configuration de compilation (#14821 par @abc3660170)\n  - Ajout d'hmr (#15221 par @SimonaliaChen)\n  - Utilisation de sourcemap dans l'environnement dev (#15087 par @ibufu)\nDocs\n  - Renommage de la variable dans docs (#14602 #15003 #15094 #15105 par @liupl)\n  - Correction d'une erreur de téléchargement de doc (#15023 par @iamkun)\n  - Mise à jour du validateur de formulaire personnalisé doc (#15040 par @iamkun)\n  - Mise à jour des onglets docs pour afficher les onglets verticaux (#15053 par @iamkun)\n  - Utiliser eleme.cn comme domaine (#15139 par @ziyoung)\n  - Correction du nom de route Image (#15194 par @iamkun)\n  - Suppression de la traduction en double (#15207 par @iamkun)\n\n#### Breaking changes\n\n- Rate\n  - Correction du support de l'affichage décimal en mode désactivé (#15089 par @haoranyu)\n- Select\n  - Utiliser le label de l'option pour régler le placeholder en mode filtre (#14989 par @ibufu)\n\n### 2.7.2\n\n*2019-04-03*\n\n#### Corrections de bugs\n\n- Form\n  - Correction du style de `label-width` auto (#14955 par @ziyoung)\n\n#### Optimisation\n- Docs\n  - Correction d'une erreur de lien img (#14957 par @iamkun)\n- Chore\n  - Correction d'une erreur de déploiement mkdir (#14952 par @iamkun)\n\n### 2.7.1\n\n*2019-04-03*\n\n#### Corrections de bugs\n\n- Select\n  - Définir la valeur à null lorsqu'elle est effacée (#14322 par @aaronfulkerson)\n- Input\n  - Mise à jour des valeurs dépendantes du DOM lors d'un changement de type (#14889 par @wacky6)\n- Table\n  - Faire fonctionner `defaultExpandAll' lorsqu'une colonne étendue existe (#14935 par @ziyoung)\n- Dialog\n  - Couleur d'arrière-plan configurable (#14939 par @ziyoung)\n- Form\n  - `label-width` supporte la largeur automatique (#14944 by @ziyoung)\n\n#### Optimisation\n- Docs\n  - Mise à jour de la documentation en espagnol (#14913 par @Gonzalo2310)\n  - Ajout d'un document en français pour le nouveau composant (#14924 by @ziyoung)\n  - Optimiser la documentation des onglets (#14938 by @ziyoung)\n\n### 2.7.0\n\n*2019-03-28*\n\n#### Nouvelles fonctionnalités\n\n- Table\n  - Ajout du support de l'arborescence des données (#14632 by @ziyoung)\n\n#### Corrections de bugs\n\n- Tabs\n  - Utilise la couleur primaire comme couleur de l'ombre (#14558 par @Richard-Choooou)\n  - Rerendu lorsque label change (#14496 par @akki-jat)\n- Table\n  - Le pied de page suit l'alignement des cellules du corps (#14730 by @ziyoung)\n- NavMenu\n  - Correction d'un bug de clic sur el-submenu (#14443 par @PanJiaChen)\n- Dropdown\n  - Compatible avec la nouvelle syntaxe v-slot 2.6 (#14832 by @ziyoung)\n- ColorPicker\n  - Correction d'une erreur de couleur hexadécimale (#14793 par @iamkun)\n- Tree\n  - Revert pr #13349 (#14847 par @ziyoung)\n- Tooltip\n  - Affichage lorsque la valeur initiale est vraie (#14826 by @ziyoung)\n- Docs\n  - Mise à jour de la documentation du cascader (#14442 par @panhezeng)\n- Style\n  - Correction des media queries dans sm-only, md-only, lg-only (#14611 by @sinchang)\n\n#### Optimisation\n\n- Chore\n  - Ajouter la description de la page web (#14802 par @iamkun)\n\n### 2.6.3\n\n*2019-03-21*\n\n#### Corrections de bugs\n\n- Correction du style de la démo de Cascader (#14789 par @ziyoung)\n- Suppression des opérations DOM inutiles (#14788 by @ziyoung)\n- Correction DatePicker valeur par défaut DST (#14562 par @wacky6)\n\n### 2.6.2\n\n*2019-03-21*\n\n##### Nouvelles fonctionnalités\n\n- DatePicker\n  - Ajout d'une plage de mois pour l'attribut type (#14487 par @zxyRealm)\n- i18n\n  - Ajout de la locale croate (#14360 par @danijelh)\n\n##### Corrections de bugs\n\n- Input\n  - Correction d'un régression (#14572 par @wacky6)\n- DatePicker\n  - Correction du calcul du premier jour de la semaine (#14523 par @sinchang)\n  - Correction du format de valeur du sélecteur de semaine (#13754 par @wacky6)\n- Steps\n  - Correction du problème #14502 (#14596 par @sinchang)\n  - Correction du style avec le thème simple (#14610 par @sinchang)\n- Docs\n  - Mise à jour de la doc française pour la 2.6.1 et correction de fautes de frappe (#1455555 par @smalesys)\n  - Renommage d'une variable dans la documentation de la table (#14587 par @likwotsing)\n  - Ajout de l'index de recherche en français (#14565 par @iamkun)\n  - Correction du style de la page TimePicker (#14579 par @ziyoung)\n  - Renommage d'une variable dans la page Upload (#14593 par @liupl)\n  - Mise à jour de la traduction française (#14643 par @smalesys)\n  - Mise à jour de la documentation du validateur de formulaire asynchrone (#14694 par @iamkun)\n  - Correction d'une erreur de doc tooltip (#14748 par @iamkun)\n  - Correction d'une coquille (#14751 par @2bj)\n  - Correction de la surbrillance pour Webkit touch (#14703 by @VladG0r)\n\n##### Optimisation\n\n- Tâche\n  - Mise à jour du script de build dans le ci (#14600 par @ziyoung)\n  - Mise à jour du tracking ga (#14560 par @iamkun)\n  - Ajout d'un événement ga supplémentaire (#14633 par @iamkun)\n  - Mise à jour du groupe de discussion (#14741 par @iamkun)\n  - Mise à jour des deps de test et conf (#14735 par @wacky6)\n  - Mise à jour de Gulp (#14745 by @ziyoung)\n  - Utilisez le codepen pour afficher les démos et correction d'une erreur de doc (#14747 by @ziyoung)\n\n### 2.6.1\n\n*2019-03-03*\n\n#### Corrections de bugs\n\n- **Ne pas spécifier la version de node** (par @iamkun dans #14546)\n- Correction du répertoire doc dans `deloy-faas.sh` (par @ziyoung dans #14553)\n- Correction d'un problème de style de date dans le changelog de la 2.6.0 (par @island205 dans #14547)\n- Correction d'une typo dans la doc (par @wack6 dans #14552)\n\n### 2.6.0\n\n*2019-03-01*\n\n#### Nouvelles fonctionnalités\n- Timeline\n  - Ajout d'un composant timeline (par @jikkai dans #14248)\n- DropdownItem\n  - Ajout de la propriété `icon` à `el-dropdown-item` (par @gabrielboliveira dans #14088)\n- Input\n  - Ajout de propriétés pour afficher les mots de passe (par @phshy0607 dans #13966)\n- Select\n  - Ajout du slot `empty` (par @elfman au #13785)\n- Autocomplete\n  - Ajout de la propriété `highlight-first-item` (par @YamenSharaf dans #14269)\n- I18n\n  - Création de la locale Arménienne (par @hamletbarsamyan dans #14214)\n- Docs\n  - Traduction française (par @smalesys dans #12153, #14418, #14434)\n\n#### Optimisation\n- Alert\n  - Mise à jour de la classe du slot par défaut de la description de Alert (par @iamkun dans #14488)\n- Input\n  - Mise à jour de l'input de type password (par @iamkun dans #14480)\n- InputNumber\n  - Retrait d'un parseFloat inutile (par @JuniorTour au #14172)\n- Menu\n  - Ajout du support de `el-menu-item` sans index (par @georgyfarniev dans #13298)\n- Table\n  - Suppression de certaines opérations du DOM (par @elfman dans #13643)\n- Upload\n  - Optimisation du code (par @elfman dans #13973)\n- Popup\n  - Optimisation du code (par @KAionro dans #14413)\n- Docs\n  - Ajout de détails sur la façon d'exécuter le mode play pour les contributeurs (par @island205 dans #14355)\n  - Ajout d'un avertissement concernant Input (par @wacky6 dans #14463)\n  - Mise à jour de la doc de Table (par @luguokong dans #14329)\n  - Mise à jour de la doc d'Input (par @iamkun dans #14437)\n  - Mise à jour de la doc sur le thème (par @wangguohaohao dans #14297)\n  - Le style de l'icône change lorsque vous passez dessus (par @tuxinghuan dans #14295)\n- Build\n  - Minification du CSS et du JS pour le site d'Element (par @iamkun dans #14430)\n  - Accélération de webpack (par @hetech dans #14484)\n  - Utilisation du cli pour sélectionner la version de publication (par @hetech dans #14354)\n- Installation de stale pour la gestion des issues (par @island205 dans #14392)\n\n#### Corrections de bugs\n- Menu\n  - Correction d'un bug de focus des sous-menus lors du changement d'onglet du navigateur (par @liupl dans #13976)\n- MessageBox\n  - Correction de la définition du type (par @NateScarlet dans #14278)\n- ScrollBar\n  - Empêche le clic droit sur le bouton du pouce (par @xifeiwu dans #14196)\n- Switch\n  - Déclenchement de la validation du formulaire si la valeur change (par @hetech dans #14426)\n- Table\n  - La méthode toggleAllSelection est maintenant une méthode d'instance (par @letanure dans #14075)\n- Tabs & Dropdown\n  - Correction du style (par @hetech dans #14452)\n- Tree\n  - Les tips sont différents des tableaux (par @ColinCll dans #14331)\n- Docs\n  - Correction d'une erreur de doc du DatetimePicker (par @iamkun dans #14290)\n  - Problème d'orthographe dans la documentation du DatePicker (par @helmut dans #14481)\n  - Correction du style de la doc de Pagination(par @liuchuzhang dans #14451)\n\n#### Breaking changes\n- Table\n  - Fix params order of row events (by @jikkai in #12086)\n\n### 2.5.4\n\n*2019-02-01*\n\n#### Corrections de bugs\n\n- Build: Correction d'un problème de configuration de babel qui cassait la transition collapse (par @island205 dans #14282)\n\n### 2.5.3\n\n*2019-01-31*\n\n#### Optimisation\n\n- Optimisation du code de Message (par @vok123 dans #14029)\n- Suppression des gh-pages (par @ziyoung dans #14266)\n- Ajout du lien IssueHunt (par @island205 dans #14261)\n\n#### Corrections de bugs\n\n- Correction d'une erreur du module UMD côté serveur (par @island205 dans #14242)\n- Correction du style du TabBar actif (par @iamkun dans #14240)\n- Correction d'une erreur de code dans la démo de Table (par @xunmeng dans #14253)\n\n### 2.5.2\n\n*2019-01-27*\n\n#### Optimisation\n- Docs:\n  - Mise à jour du ChangeLog ES 2.5.1 (par @Gonzalo2310 dans #14231)\n\n#### Corrections de bugs\n- Build:\n  - Suppression des commentaires non supprimés dans le module umd `lib/index.js` (par @island205 dans #14233)\n  - Correction d'une erreur d'exportation dans le module commonjs utilisé dans nuxt.js (par @island205 dans #14232)\n  - Correction des problèmes de build 2.5.1 (par @iamkun dans #14228)\n\n### 2.5.1\n\n*2019-01-26*\n\n#### Optimisation\n- DatePicker: surbrillance du mois et de l'année courants (par @Debiancc dans #14211)\n- Mise à jour du changelog 2.5.0 (par @wacky6 dans #14217)\n\n#### Corrections de bugs\n- Correction d'un problème d'exportation due par la mise à jour du webpack (par @island205 dans #14220)\n- Conservation de la docs 2.4.11 && nouveau sous-dossier pour 2.5+ (par @iamkun dans #14222)\n\n### 2.5.0\n\n*2019-01-25*\n\n#### Nouvelles fonctionnalités\n- DatePicker\n  - Ajout de l'attribut `validate-event` (par @ziyoung dans #13531)\n- DateTimePicker\n  - `pickerOptions` supporte l'option `selectableRange` (par @eeeeeeeeeeeason)\n- Tag\n  - Ajout de l'événement `click` (par @licdream dans #14106)\n- I18n\n  - Support de la langue kirghize (par @zzjframework dans #14174)\n\n#### Optimisation\n- Mise à niveau vers webpack@4 (par @jikkai dans #14173)\n- Input\n  - Simplification de l'implémentation, suivant un flux de données à sens unique. Correction de plusieurs bugs liés. (par @wacky6 dans #13471)\n- Mise à jour du fichier Axure avec de nouveaux composants (par @ziyoung dans #13773)\n\n#### Corrections de bugs\n- Autocomplete\n  - Correction de la dernière ligne du menu déroulant qui était coupée (#13597) (par @ziyoung)\n  - Correction d'une flèche de popper manquante (#13762) (par @liuchuzhang)\n- Carrousel\n  - Nettoyage du timer lorsque le composant est détruit (#13820) (par @elfman)\n- Cascader\n  - Suppression de la propriété obsolète des props calculées (#13737) (par @iamkun)\n  - Correction de la définition du type CascaderOption dans TypeScript (#13613) (par @NateScarlet)\n  - Correction de l'icône couvrant le texte (#13596) (par @ziyoung)\n- Checkbox\n  - Refonte du style (par @PanJiaChen)\n- DatePicker\n  - Ajout d'un `key` de v-for manquant dans TimeSpinner (#13547) (par @Ende93)\n  - Correction du surlignage de la semaine dans la bordure de l'année (#13883) (par @suyi91)\n- Input\n  - Correction de la référence de textarea dans le DOM (#13803) (par @laomu1988 @island205)\n- Pagination\n  - La valeur d'entrée ne sera pas inférieure à 1 (#13727) (par @elfman)\n- Popover\n  - Correction d'un problème de popover avec le déclencheur de hover (#13104) (par @goldengecko)\n  - Correction d'une fuite de mémoire de l'instance popper (#13988) (par @qpxtWhite)\n- Radio\n  - Refonte du style (par @ohhhoney1)\n- Table\n  - Amélioration du tri des tables en cliquant sur la flèche de tri (#12890) (par @ohhoney1)\n  - Correction d'un problème d'alignement vertical du texte vide sur IE10+ (#13638) (par @imzjy)\n  - Correction de la documentation sur le type d'index (#13628) (par @ilovefafafa)\n  - Correction du problème d'affichage `show-summary` lorsque le header multi-niveaux est fixe (#13914) (par @luckyCao)\n- Tabs\n  - Correction d'un bug de défilement automatique (#13696) (par @iamkun)\n  - Obtenir l'onglet correct par le nom de l'onglet (#13705) (par @iamkun)\n  - Utilisez paneName au lieu de name pour déterminer le style du panneau (#13733) (par @iamkun)\n- Tree\n  - Correction de la propriété `showCheckbox` sur `Tree` qui ne pouvait pas affecter leurs `tree-node` enfants(par @KidneyFlower)\n  - Mise à jour des fichiers de doc et de définition (#13540) (par @ziyoung)\n- Upload\n  - Ajout de le propriété `url` au fichier uploadé lorsque `list-type` est modifié (#13771) (par @elfman)\n- Slider\n  - Correction de l'indentation du code source (#13955) (par @wacky6)\n- I18n\n  - Ajout des traductions manquantes en catalan (par @jaumesala)\n  - Ajout de la traduction russe manquante (#13658) (par @justlp)\n  - Correction des traductions en finnois (#14137) (par @jenkrisu)\n- Doc\n  - Mise à jour de la documentation espagnol depuis la 2.4.11 (#13522) (par @Gonzalo2310)\n- Autres\n  - Suppression d'un script inutile (par @ziyoung)\n  - Correction des ancres (#13753) (par @iamkun)\n  - Correction de l'incohérence des majuscules dans la documentation (par @wonderjar)\n  - Ajout du QR code du chat DingDing au readme (#13957) (par @iamkun)\n  - Ajout des logs yarn au .gitignore (#13922) (par @mimimi)\n  - Suppression du sponsor duotai (#14156) (par @island205)\n  - Mise à jour du QR code dans le readme (#13960) (par @iamkun)\n  - Mise à jour du lien CDN, correction d'une typo (par @ziyoung)\n\n### 2.4.11\n\n*2018-11-21*\n\n- Revert pr #13296. Correction d'un clic sur Menu externe causant l'effondrement du SubMenu, #13478\n- Ajustement des points de rupture media query sur petit écran (xs), #13468 (par @alekoshen712)\n\n### 2.4.10\n\n*2018-11-16*\n\n- Correction des clics multiples sur Select pour afficher la liste déroulante, #13268\n- L'icône d'effacement des champs n'est pas affichée lorsque Form est désactivé, #13208\n- Ajustement des styles de Select, Progress, Autocomplete, Tooltip, Collaspe, TimePicker, #13188 (par @porcelainHeart) #13210 #13266 #13266 #13257 #13290 #13347 (par @PanJiaChen)\n- Ajout de l'attribut `loop` dans le composant Carrousel, #13217\n- Lorsque les données de Table changent, la ligne en surbrillance reste, #13200\n- Le slot du header de Table peut recevoir des paramètres, #13263\n- La méthode `clearFilter` de Table peut recevoir des arguments, #13176\n- La bulle d'aide n'est plus créée lorsqu'il n'y a pas de contenu dans la cellule de Table, #13152 (par @rongxingsun)\n- Le contenu de la zone de saisie du panneau ColorPicker peut être affiché correctement, #13278\n- ColorPicker ne déclenche plus la validation des formulaires lors du glisser-déposer, #13299\n- InputNumber: ajout de la méthode `select`, #13286 (par @st-sloth)\n- AutoComplete: ajout de l'événement `clear`, #12171(par arthurdenner) #13326\n- Vous pouvez fermer Menu en cliquant à l'extérieur, #13296\n- La méthode `validateField` du formulaire peut recevoir des arguments, #13319\n- Cascader: ajout de l'événement `visible-change`, #13415\n- DatePicker: a ajout d'un slot pour les séparateurs d'intervalle, #13272 (par @milworm)\n- Tree: ajout des propriétés `iconClass` et `currentNodeKey`, #13337 #13197 (par @isnifer)\n- Progress: ajout du texte de statut #13198 (par @ali-master)\n- Correction de `defaultCheckedKeys` de Tree, #13349 (par @dive2Pro)\n\n### 2.4.9\n\n*2018-10-26*\n\n- Le paramètre `clearValidate` de Form supporte les strings #12990 (par @codinglobster)\n- Ajout de l'attribut `type` pour Badge, #12991\n- Les utilisateurs peuvent utiliser scoped-slot pour personnaliser l'en-tête de colonne de Table #13012 (par @ivanseidel)\n- Correction du champ de Select incapable d'entrer du texte sous IE, #13034 (par @GaliMU)\n- Les options Select ne s'enroule pas lorsque l'espace est suffisant, #12329 (par @akki-jat)\n- Lorsque la liste déroulante de Select est ouverte, l'icône de la flèche s'affichera également correctement, #12353 (par @firesh)\n- Correction de l'attribut de taille de Select qui ne fonctionnait pas, #13070\n- La sélection de plusieurs valeurs peut aussi être effacée, #13049 (par @ZSkycat)\n- Correction du dernier TabNav qui ne pouvait pas être supprimé, #13039\n- Correction d'un problème d'affichage du label TabNav, #13178\n- Ajout d'un slot de titre pour Alert, #13082 (par @Kingwl)\n- Correction d'un problème où le contenu de l'infobulle de Table était incorrect, #13159 (par @elfman)\n- Optimisation de l'animation de Upload lorsque le fichier est supprimé, #12987\n- Style ajusté pour InputNumber lorsque le bouton de commande n'est pas affiché, #13052\n\n### 2.4.8\n\n- Ne pas afficher le contour lorsque le Switch est focus, #12771\n- Correction du style de Dropdown dans ButtonGroup, #12819 (par @bluejfox)\n- Ajout d'un événement d'ouverture pour Dialog, #12828\n- Correction de l'ordre d'affichage incorrect de TabNav, #12846\n- Correction d'un problème qui empêchait les Tabs de défiler jusqu'à l'onglet sélectionné, #12948\n- Correction d'un problème de l'identificateur qui ne s'affiche pas lorsque le noeud de Tree est glissé, #12854\n- Le paramètre de l'événement validation du formulaire contient le message de validation #12860 (par @YamenSharaf).\n- Correction de DatePicker pour ne pas vérifier la validité du temps d'entrée de l'utilisateur, #12898\n- Correction d'un problème avec l'attribut `render-header` de l'en-tête de table qui ne fonctionnait pas, #12914\n\n### 2.4.7\n\n*2018-09-14*\n\n- Correction de DatePicker ne déclenchant pas la validation du formulaire, #12328 #12348\n- Correction des erreurs lancées par DatePicker en mode multiple, #12347\n- Correction d'une position incorrecte du spinner de DatePicker, #12415 (par @rang-ali)\n- Correction du remplissage automatique de la zone de saisie de DatePicker, #12521 (par @abdallanayer)\n- Correction du champ non-subrillant dans Cascader, #12341\n- Correction d'un mauvais ordre de Tabpane, #12346\n- Correction d'une position incorrecte du curseur ColorPicker, #12376 (par @cnwhy)\n- Correction du style de SubMenu, #2457\n- Correction de la surbrillance après la sélection de SubMenu, #12479\n- Correction des valeurs incorrectes sélectionnées par Cascader, #12508 (par @huangjinqiang)\n- Correction d'une valeur incorrecte dans le champ d'entrée Pagination, #12525\n- Correction de l'ordre dans lequel la Pagination déclenche les événements, #12530\n- Correction des filtres de table non-affichés, #12539\n- Correction de l'arbre incapable de supprimer des nœuds, #12684\n- Correction de la hauteur de Select Input changeant en mode simple, #12719\n- Correction d'un style du label de FormItem sous forme imbriquée, #12748\n- Ajout de l'attribut `autocomplete` pour Input, `auto-complete` devenant obsolète, #12514 (par @axetroy)\n- Ajout des slots-scope pour Form pour afficher les informations de validation, #12715 (par @YamenSharaf)\n\n### 2.4.6\n\n*2018-08-09*\n\n- Correction de Table n'affichant pas l'icône de filtre lorsque `filters` est un tableau vide, #12165\n- Correction de Menu ne sauvegardant pas l'état actif lorsque `collapse` change, #12178 (par @elfman)\n- Correction du Cascader n'échappant pas les caractères spéciaux poue les Regexp, #12248\n- Correction d'un bouton Radio désactivé affichant l'ombre d'une case lorsqu'on clique dessus, #12262\n- Correction de arrow key qui n'a pas d'effet lorsque la valeur par défaut est `undefined`, #12322\n- Correction de la fonction de requête de Select non-stabilisée en mode multi, #12181\n- Correction du mot-clé de la requête Select disparaissant en mode multi, #12304\n- Correction d'une largeur incorrecte de Dialog lorsqu'il est affiché en plein écran, #12203\n- Correction de l'affichage incorrect de Main sur IE, #12237\n- Correction de Input déclenchant deux validations de formulaire, #12260\n- Correction de l'ajout d'un nouveau nœud d'arborescence provoquant la disparition des nœuds, #12256\n- Correction d'un nœud d'arborescence non supprimé après avoir glissé, #12279\n- Correction du Popover non-visible quand InputNumber a le focus, #12284\n- Ajout de l'attribut `popper-append-to-body` pour Autocomplete, #12241\n- Ajout du support du modificateur `sync` pour l'attribut `page-size` de Pagination, #12281\n\n### 2.4.5\n\n*2018-07-26*\n\n- Correction du réglage de Table `class-name` qui ne fonctionne pas pour les colonnes `expand`, #12006\n- Ajout de la méthode `toggleAllSelection` pour Table, #12047\n- Correction d'une mauvaise position du slot de suffixe lorsque Input contient Select, #12108\n- Correction de `line-height` de l'option impossible à régler, #12120\n- Correction de TimeSelect avec la valeur par défaut `null` ne pouvant être assigné après avoir exécuté `resetField`, #12010\n- Correction d'un événement keydown qui n'étant pas arrow key ne fonctionne pas dans Tree, #12008\n- Correction d'un nœud parent vérifié en mode lazy, #12106\n- Ajout du paramètre `includeHalfChecked` pour getCheckedNodes de Tree, #12014\n\n### 2.4.4\n\n*2018-07-13*\n\n- Correction du déclenchement de la validation de Select après la réinitialisation du formulaire, #11837\n- Correction d'une mauvaise position du slot `suffix` de Input lorsque le slot `suffixe` est avec le slot `append`, #11951\n- Correction de Input affichant toujours l'icône clear même en lecture seule, #11967\n- Correction d'un nœud d'arborescence coché lorsqu'il est désactivé, #11847\n- Correction des `default-checked-keys` qui ne fonctionnait pas, #11971\n- Correction de `empty-text` non visible lorsque le noeud de Tree est filtré, #11971\n- Correction de la position du `empty-text` surdimensionné dans Table, #11965\n- Correction de la surbrillance de la ligne de Table lorsque `current-row-key` est assignée à `null`, #11866\n- Correction de l'affichage de la liste déroulante des filtres lorsque `filters` est un tableau vide, #11864\n- Correction du label de Radio qui n'arrête pas la propagation des événements, #11912\n\n### 2.4.3\n\n*2018-07-03*\n\n- Correction de `allow-drop` qui ne fonctionnait pas correctement lorsque les nœuds de Tree avaient une hauteur personnalisée, #11797\n- Maintenant vous pouvez passer un paramètre à la méthode `clearValidate` du formulaire, en spécifiant quels résultats de validation FormItems doivent être effacés, #11821\n- Ajout de l'attribut `distinguishCancelAndClose` pour MessageBox, #11831\n\n### 2.4.2\n\n*2018-06-26*\n\n- Maintenant `class-name` et `label-class-name` de Table sont réactifs, #11626\n- Correction de Table qui mettait toujours en surbrillance la ligne cliquée lorsque `highlight-current-row` était `false`, #11646\n- Correction d'un bug de style de ButtonGroup lorsqu'il n'a qu'un seul bouton `round` ou `circle`, #11605\n- Correction du style du Select de Pagination, #11622\n- Correction de la méthode `open` du menu quand `collapse` est dynamiquement changé, #11646\n- Ajout des paramètres `activeName` et `oldActiveName` au hook before-leave de Tabs, #11713\n- Correction de Cascader ayant le focus après avoir cliqué à l'extérieur, #11588\n- Correction de Cascader ne se fermant pas quand l'option est cliquée quand `change-on-select` est `true`, #11623\n- La mise à jour programmatique de la valeur de Select déclenchera la validation du formulaire, #11672\n\n### 2.4.1\n\n*2018-06-08*\n\n- Suppression du duplicata de la déclaration de type pour Autocomplete, #11388\n- Correction du style de flèche déroulante de Select dans FireFox lorsqu'il est imbriqué dans Form, #11427\n- Correction de l'icône de l'option de Select qui s'affiche toujours lorsque la valeur initiale est `null`, #11460\n- Correction d'un Radio désactivé affichant l'ombre de la boîte quand on clique dessus, #11462\n- Ajout de l'attribut `iconClass` pour MessageBox, #11499\n- Ajout de l'attribut `stretch` pour Tabs, #11476\n- Correction d'un problème d'ordre de rendu de TabPane lorsque Tabs est `lazy`, #11461\n- Correction de Table ne conservant pas la surbrillance de la ligne actuelle lors de son ouverture, #11464\n- Correction de l'état de la mise au point lorsque `before-leave` renvoie une promesse résolue, #11386\n- Correction de la désactivation du Popover qui créait encore des poppers, #11426\n- Correction de la boucle sans fin de Tree lorsqu'un nouveau noeud est ajouté en mode lazy, #11430 (par @wangjingf)\n- Ajout de l'événement `closed` pour Dialog, #11490\n\n### 2.4.0 Fullerene\n\n*2018-05-28*\n\n#### Nouvelles fonctionnalités\n- Général\n  - L'outil de développement et le bundler sont basculés vers le webpack natif, #11216\n  - Vous pouvez maintenant définir globalement l'index z initial des popups, #11257\n- Autocomplete\n  - Ajout de l'attribut `hide-loading`, #11260\n- Button\n  - Vous pouvez maintenant utiliser l'attribut `size` sur les boutons circulaires pour contrôler leur taille, #11275\n- InputNumber\n  - Ajout de l'attribut `precision`, #11281\n- Tabs\n  - Ajout de l'attribut `before-leave`, #11259\n  - Ajout de l'attribut `lazy`, #11167（by @Kingwl）\n- Table\n  - Ajout de la méthode `sort` pour trier manuellement la table, #11311\n\n#### Corrections de bugs\n- Input\n  - Correction d'un problème qui provoquait un re-rendu lors de l'utilisation de l'IME chinois pour saisir rapidement du texte, #11235 (par @STLighter)\n- Popover\n  - Correction de l'erreur de console lorsque l'élément déclencheur est Radio ou Checkbox, #11265\n- Breadcrumb\n  - Correction de l'attribut `to` ne supportant pas la mise à jour dynamique, #11286\n- Upload\n  - Correction de l'erreur de console lorsqu'un fichier est résolu dans la promesse retournée de la méthode `beforeUpload`, #11297 (par @qusiba)\n- Infobulle\n  - Correction d'une flèche mal positionnée lorsque le contenu est vide, #11335\n- Autocomplete\n  - Correction de suggestions d'entrée incorrectes après la suppression rapide d'un mot-clé, #11323\n- ColorPicker\n  - Correction d'un événement `active-change` se déclenchant incorrectement lorsque le menu déroulant du picker est fermé, #11304\n- Table\n  - Correction d'une erreur de style du panneau de filtre surdimensionné, #11314\n  - Correction de la ligne actuellement sélectionnée qui n'était pas conservée lors du tri de la table, #11348\n- Checkbox\n  - Correction d'une checkbox unique ne supportant pas la validation, #11271\n- Radio\n  - Correction du Radio désactivé quand même sélectionné en appuyant sur la touche espace, #11303\n- MessageBox\n  - Correction de la classe `el-popup-parent-hidden` qui n'était pas supprimée à l'ouverture successive de MessageBox, #11371\n\n### 2.3.9\n\n*2018-05-18*\n\n- Correction d'une erreur lorsque les données source n'ont pas le champ spécifié par l'attribut `prop` d'une TableColumn, lorsque la souris se déplace dans les cellules de cette colonne, #11137\n- L'attribut `lockScroll` des composants popup n'ajoute plus un style en ligne à l'élément parent, mais ajoute un nom de classe, #1111114\n- Correction de l'icône de Progression qui ne s'affichait pas quand son `status` était une exception, #11172\n- Correction de l'attribut `désactivé` qui ne fonctionnait pas dans la liste des résultats de filtrage du Cascader filtrable, #11185\n- Correction d'un problème où la ligne étendue de la table ne peut pas être réduite si la source de données est mise à jour après son extension, #11186\n- `setCurrentKey` de Tree accepte maintenant `null` comme paramètre pour annuler le noeud actuellement mis en surbrillance, #11205\n\n### 2.3.8\n\n*2018-05-11*\n\n- Correction du saut du panneau DatePicker au mois courant après avoir choisi une date dans un mois non courant quand `type` est dates, #10973\n- Correction de l'Input effaçable affichant toujours l'icône d'effacement en lecture seule, #10912\n- Correction de la fermeture du panneau DatePicker sans changer la valeur déclenchant incorrectement l'événement `change`, #11017\n- Correction d'un problème de navigation du clavier lorsque Select a regroupé les options, #11058\n- Ajout du slot nommé `préfixe` pour Select, #11063\n- Ajout de la méthode `clearValidate` pour FormItem, #11076\n- Ajout de l'attribut `checkOnClickNode` pour Tree, #1111111\n\n### 2.3.7\n\n*2018-04-29*\n\n- Correction d'une table qui ne mettait pas à jour ses largeurs de headers lorsque la barre de défilement disparaissait à cause du filtrage, #10834\n- Correction de l'Input effaçable affichant toujours l'icône d'effacement lorsque sa valeur initiale est `null`, #10912\n- Correction d'un déclencheur incorrect de l'événement `active-change` après avoir changé la valeur liée de ColorPicker par programmation, #10903 (par @zhangbobell)\n- Correction du Select filtrable qui provoquait une boucle infinie lors de la navigation dans les options à l'aide du clavier si toutes les options sont désactivées, #10945\n\n### 2.3.6\n\n*2018-04-21*\n\n- Correction d'un comportement incorrect du callback `allow-drop` de Tree lorsque le paramètre `type` est utilisé, #10821\n- Maintenant vous pouvez entrer correctement les mots-clés dans le Select simple filtrable dans IE11, #10822\n- Correction d'un Select simple déclenchant incorrectement un événement `blur` après avoir cliqué sur une option, #10822\n\n### 2.3.5\n\n*2018-04-20*\n\n- Correction d'une surbrillance incorrecte dans le panneau DatePicker lorsque `type` est la semaine, #10712\n- Correction d'un InputNumber vide lorsque sa valeur initiale est 0, #10714\n- Ajout de l'attribut `automatic-dropdown` pour Select, #10042 (par @Seebiscuit)\n- Correction de Rate désactivé quand même mis à jour par les touches de navigation, #10726 (par @Richard-Choooou)\n- L'attribut `type` de DatePicker peut être `dates`, où vous pouvez choisir plusieurs dates dans un sélecteur, #10650 (par @Mini256)\n- Ajout des événements `prev-click` et `next-click` pour Pagination, #10755\n- Ajout de l'attribut `pager-count` pour Pagination, #10493 (par @chongjohn716)\n- Ajout de `type` comme 3ème paramètre de l'attribut `allow-drop` de Tree, #10792\n- Nous utilisons maintenant ResizeObserver pour détecter le redimensionnement des éléments DOM, #10779\n\n### 2.3.4\n\n*2018-04-12*\n\n- Suppression du double de l'attribut `showTimeout` dans la déclaration TypeScript de SubMenu, #10566 (par @kimond)\n- Vous pouvez maintenant personnaliser les éléments de Transfert en utilisant le scoped slot, #10577\n- Correction d'un clic sur le bouton précédent désactivé et le bouton suivant de la pagination déclenchant toujours l'événement `current-current-change`, #10628\n- Correction de Textarea affichant `undefined` dans le SSR lorsque sa valeur n'est pas définie, #10630\n- Correction de la désactivation du style TabItem lorsque `type` est border-card, #10640\n- Ajout de `$index` comme quatrième paramètre du `formatter` de la Table, #10645\n- Correction de CheckboxButton non exporté dans la déclaration TypeScript, #10666\n\n### 2.3.3\n\n*2018-04-04*\n\n- Ajout de l'attribut `shadow` pour Card, #10418 (par @YunYouJun)\n- Correction de Badge masqué lorsque `value` est `0`, #10470\n- Correction de quelques bugs de Tree, #10474 #10494\n- Ajout de `placement` pour Autocomplete, #10475\n- L'attribut `default-time` fonctionne également dans DateTimePicker, #10321 (par @RickMacTurk)\n- Suppression du contour bleu de TabItem après que le navigateur n'ait plus le focus ou soit minimisé, #10503\n- Ajout de l'attribut `popper-append-to-body` pour SubMenu, #10515\n- Suppression du feedback visuel lors du survol d'un élément BreadcrumbItem non lié, #10551\n- Correction de l'événement `change` d'InputNumber pour s'assurer que la valeur liée du composant est mise à jour dans le gestionnaire d'événements, #10553\n\n### 2.3.2\n\n*2018-03-29*\n\n- Correction d'une régression d'Autocomplete, #10442\n\n### 2.3.1\n\n*2018-03-29*\n\n- Correction d'une régression de `type` d'Inputqui n'était pas transmis à l'élément natif, #10415\n- Ajout de la méthode `blur` pour Select, #10416\n\n#### 2.3.0 Diamant\n\n*2018-03-28*\n\n#### Nouvelles fonctionnalités\n- Table\n  - Maintenant le `formatter` de TableColumn peut être mis à jour dynamiquement, #10184 (par @elfman)\n  - Ajout de l'attribut `select-on-indeterminate`, #9924 (par @syn-zeta)\n- Menu\n  - Ajout de l'attribut `collapse-transition`, #8809 (par @limichange)\n- Input\n  - Ajout de la méthode `select`, #10229\n  - Ajout de la méthode `blur`, #10356\n- ColorPicker\n  - Ajout de l'attribut `predefine`, #10170 (par @elfman)\n- Tree\n  - Ajout des attributs `draggable`, `allow-drop` et `allow-drag`, et `node-drag-start`, `node-drag-enter`, `node-drag-leave`, `node-drag-leave`, `node-drag-over`, `node-drag-end` et `node-drop`, #9251 #10372 (par @elfman)\n- Form\n  - La méthode `validate` a maintenant un deuxième paramètre, contenant l'information des éléments de formulaire qui ont échoué à la validation, #10279\n  - Ajout de l'événement `validate`, #10351\n- Progress\n  - Ajout de l'attribut `color`, #10352 (par @YunYouJun)\n- Button\n  - Ajout de l'attribut `circle`, #10359 (par @YunYouJun)\n\n#### Corrections de bugs\n- Form\n  - Correction du label de FormItem non aligné avec l'Input mixte, #10189\n- Menu\n  - Désormais, le menu réduit n'affichera la bulle d'aide que lorsque le slot `title` de l'élément MenuItem est défini, #10193 (par @PanJiaChen).\n- Pagination\n  - Correction d'un événement `current-current-change` qui se déclenchait incorrectement sans interaction de l'utilisateur, #10247\n- DatePicker\n  - Maintenant, la date et l'heure dans le panneau déroulant sont correctement formatées en fonction de l'attribut `format`, #10174（by @remizovvv）\n- Upload\n  - Correction de l'attribut `accept` qui ne fonctionnait pas quand `drag` est vrai, #10278\n\n### 2.2.2\n\n*2018-03-14*\n\n- Ajout de l'événement `clear` pour Input, #9988 (par @blackmiaool)\n- Maintenant la saisie manuelle de ColorPicker supporte les modes `hsl`, `hsv` et `rgb`, #9991\n- Correction de DatePicker ne déclenchant pas l'événement `change` lorsque sa valeur initiale est effacée, #9986\n- Maintenant les attributs liés à la classe d'icônes de Rate supportent les mises à jour dynamiques, #10003\n- Correction de Table avec des colonnes fixes dont la hauteur n'est pas mise à jour correctement si `max-height` est réglé, #10034\n- Maintenant le mode plage de DatePicker supporte la sélection inverse (en cliquant sur la date de fin, puis sur la date de début), #8156 (par @earlymeme)\n- Ajout de l'attribut `désactivé` pour Pagination, #10006\n- Ajout des événements `after-enter` et `after-leave` pour Popover, #10047\n- Correction de Select ne déclenchant pas la validation lorsque l'utilisateur sélectionne une option après avoir exécuté `resetFields` du formulaire, #10105\n- Correction des largeurs incorrectes des colonnes fixes de Table dans certains cas, #10130\n- Correction de MessageBox héritant de l'attribut `title` de son instance précédente lorsqu'il était appelé sans `title`, #10126 (par @Pochodaydaydayup)\n- Ajout de l'attribut `input-size` pour Slider, #10154\n- Ajout des événements `left-check-change` et `right-check-change` pour Transfer, #10156\n\n### 2.2.1\n\n*2018-03-02*\n\n- Correction d'un rétrécissement de Aside, Header et Footer dans certaines mises en page, #9812\n- Correction de Table avec un attribut `height` qui ne rendait pas dans SSR, #9876\n- Correction d'une Table extensible ne calculant pas sa hauteur lorsqu'une rangée est agrandie, #9848\n- Correction d'un événement `change` qui ne se déclenchait pas lors de la saisie manuelle de la date dans DateTimePicker, #9913\n- Correction de Select affichant ses options lorsque la boîte de saisie est cliquée avec le bouton droit de la souris, #9894 (par @openks)\n- Ajout de l'attribut `tooltip-class` pour Slider, #9957\n- Maintenant Select garde le focus après la sélection, #9857 (par @Seebiscuit)\n- Ajout de l'attribut `target-order` pour Transfer, #9960\n\n### 2.2.0 Graphite\n\n*2018-02-12*\n\n#### Nouvelles fonctionnalités\n- Menu\n  - Ajout des attributs `popper-class` et `disabled` pour le sous-menu, #9604 #9771\n  - Le menu horizontal prend maintenant en charge le sous-menu multicouche, #9741\n- Tree\n  - Ajout de l'évènement `node-contextmenu`, #9678\n  - Vous pouvez maintenant personnaliser le modèle de nœud en utilisant un slot avec portée, #9686\n  - Ajout des méthodes `getNode`, `remove`, `remove`, `append`, `insertBefore`, `insertAfter`, `getCheckedKeys`, `getHalfCheckedNodes`, `getHalfCheckedNodes`, `getHalfCheckedKeys` et de l'événement `check`, #9718 #9730\n- Transfer\n  - Ajout de la méthode `clearQuery`, #9753\n- Select\n  - Ajout de l'attribut `popper-append-to-body`, #9782\n\n#### Corrections de bugs\n- Table\n  - Correction d'un clic sur l'icône d'expansion d'une ligne extensible qui déclenche l'événement `row-click`, #9654\n  - Correction de la mise en page non mise à jour lorsque la largeur des colonnes est modifiée par glisser-déposer de l'utilisateur, #9668\n  - Correction d'un problème de style lorsque la ligne de résumé coexiste avec des colonnes fixes, #9667\n- Container\n  - Les composants fixes de Container ne s'étirent pas dans IE11, #9655\n- Loading\n  - Correction du chargement n'apparaissant pas lorsque la valeur de `v-loading` est changée en true dans le hook `mounted`, #9722\n- Switch\n  - Correction de deux événements de clics natifs déclenchés lorsque Switch est cliqué, #9760\n\n### 2.1.0 Charcoal\n\n*2018-01-31*\n\n#### Nouvelles fonctionnalités\n- Cascader\n  - Ajout des événements `focus` et `blur`, #9184 (par @viewweiwu)\n- Table\n  - La méthode `filter-method` a maintenant un troisième paramètre `column`, #9196 (par @liyanlong)\n- DatePicker\n  - Ajout des attributs `prefix-icon` et `clear-icon`, #9237 (par @AdamSGit)\n  - Ajout de l'attribut `default-time`, #9094 (par @nighca)\n  - Le format `value-format` supporte maintenant `timestamp`, #9319 (par @wacky6)\n- InputNumber\n  - Maintenant la valeur liée peut être `undefined`, #9361\n- Select\n  - Ajouté l'attribut `auto-complete`, #9388\n- Form\n - Ajout de l'attribut `désactivé`, #9529\n - Ajout de l'attribut `validateOnRuleChange`, #8141\n- Notification\n  - Ajout de la méthode `closeAll`, #9514\n\n#### Corrections de bugs\n- InputNumber\n  - Correstion du reset lors de la saisie du point des nombres décimaux, #9116\n- Dropdown\n  - Correction du mauvais positionnement du menu déroulant lorsque la page n'a qu'une barre de défilement horizontale dans certains navigateurs, #9138 (par @banzhuanmei)\n- Table\n  - Correction d'une erreur dans le calcul du nombre de colonnes fixes après les changements de données des colonnes, #9188（by @kolesoffac）\n  - Correction de la bordure de la dernière colonne de l'en-tête groupé qui n'était pas correctement affichée, #9326\n  - Correction d'un positionnement incorrect de l'en-tête du tableau dans Safari, #9327\n  - Correction de la réduction des lignes extensibles lorsque les données de la table changent, #9462\n  - Correction de rendus multiples inutiles dans certaines conditions, #9426\n  - Correction d'une erreur de calcul de la largeur de colonne lors de la modification de `width` de TableColumn, #9426\n- Loading\n  - Correction de Loading ne se cachant pas correctement dans certaines conditions, #9313\n- DatePicker\n  - Correction de la méthode `focus` qui ne fonctionnait pas en mode \"range\", #9437\n  - Correction du clic sur le bouton \"now\" qui sélectionnait toujours la date actuelle même si elle était désactivée, #9470 (par @wacky6)\n  - Correction d'une date trop serrée lors de la navigation, #9577 (par @wacky6)\n- Steps\n  - Correction d'une erreur de style dans IE 11, #9454\n\n#### Changements\n- Menu\n  - Le menu contextuel en mode `collapse` s'ajoute maintenant directement à `body`, de sorte qu'il est visible lorsqu'il est imbriqué dans Aside, #9263\n- Table\n  - Maintenant, cocher les cases dans la Table multi-sélection ne déclenche pas l'événement `row-click`, #9467\n- Loading\n  - Le `z-index` du masque de chargement non plein écran est changé à 2000. Le `z-index` du masque de chargement plein écran se mettra à jour dynamiquement avec les composants popup, #9522\n- Dropdown\n  - Les attributs `show-timeout` et `hide-timeout` ne fonctionnent maintenant que lorsque le déclencheur est `hover`, #9573\n\n### 2.0.11\n\n*2018-01-08*\n\n- Correction d'un problème de couleur de bordure de Select dans les slots `prepend` ou `append` de Input, #9089\n- Correction du paramètre `remove-tag` de l'événement Select, #909090\n- Ajout des attributs `show-timeout` et `hide-timeout` pour le sous-menu, #8934 (par @HugoLew)\n- Correction d'un style Tooltip manquant de `show-overflow-tooltip` lors de l'importation de Table sur demande, #9130\n- Correction d'un dysfonctionnement du tri des colonnes de la table après l'exécution de `clearSort` sur cette colonne, #9100 (par @zEmily)\n- Le fichier de configuration i18n pour le tchèque est renommé de `cz` en `cs-CZ`, #9164\n\n### 2.0.10\n\n*2017-12-29*\n\n- Calcul erroné de la hauteur du tableau lorsque la colonne fixe et la ligne de somme coexistent, #9026\n- Correction d'un style de couleur non compilé du texte vide dans le tableau, #9028\n- Maintenant, DatePicker n'émet que l'événement `change` quand la valeur est vraiment changée, #9029 (par @remizovvvv)\n- Ajout de l'attribut `tabindex` pour Input, #9041 (par @dicklwm)\n\n### 2.0.9🎄\n\n*2017-12-24*\n\n- Ajouté la fonction de hook \"avant suppression\" pour Upload, #8788 (par @firesh)\n- Correction de la valeur initiale de `error` qui ne fonctionnait pas pour FormItem, #8840\n- La directive Loading prend maintenant en charge le nom de classe personnalisé grâce à l'attribut `element-loading-custom-class`, #8826 (par @earlymeme)\n- Correction CarouselItem devenant invisible lorsque les données sont mises à jour de manière asynchrone, #8921\n- Ajout de l'attribut `renderAfterExpand` pour Tree, #8972\n\n### 2.0.8\n\n*2017-12-12*\n\n- Ajout de la documentation en espagnol\n- Correction du `show-timeout` de Dropdown qui ne fonctionnait pas quand le déclencheur est click, #8734 (par @presidenten)\n- Correction du temps de validation des formulaires pour les règles dont le déclencheur est blur, #8776\n- Correction d'un événement de blur de DatePicker avec intervalle, #8784\n- L'attribut `format` de TimePicker supporte maintenant AM/PM, #8620 (par @firesh)\n\n### 2.0.7\n\n*2017-11-29*\n\n- Correction du style du bouton de type texte désactivé, #8570\n\n### 2.0.6\n\n*2017-11-29*\n\n- Correction d'un bug de style des icônes de tri de la table, #8405\n- Correction du mécanisme de déclenchement de Popover lorsque son `trigger` est manuel, #8467\n- Ajout des attributs `prefix-icon` et `suffix-icon` pour Autocomplete, #8446 (par @liyanlong)\n- Ajout de l'attribut `separator` pour Cascader, #8501\n- Ajout de l'attribut `clearable` pour Input, #8509 (par @lbogdan)\n- Ajout de l'attribut `background` pour Pagination, #8553\n\n### 2.0.5\n\n*2017-11-17*\n\n- Correction de la régression Popover, Tree, Breadcrumb et Cascader dans 2.0.4, #8188 #8217 #8283\n- Correction d'une fuite de mémoire de la directive `clickoutside`, #8168 #8225 (par @badpunman @STLighter)\n- Correction de la hauteur du Select multiple lorsque sa valeur est effacée, #8317 (par @luciy)\n- Ajout de l'attribut `collapse-tags` pour plusieurs Sélectionner pour remplacer les balises par une ligne de texte, #8190\n- Correction d'une consommation CPU élevée causée par la table cachée, #8351\n- Maintenant vous pouvez utiliser la méthode `doLayout` de la Table pour mettre à jour sa disposition, #8351\n\n### 2.0.4\n\n*2017-11-10*\n\n- Accessibilité améliorée pour Cascader, Dropdown, Message, Notification, Popover, Tooltip et Tree.\n- Correction du redimensionnement de Container lorsque la largeur de la fenêtre d'affichage diminue, #8042\n- Correction de la suppression incorrecte de `updateKeyChildren` dans Tree, #8100\n- Correction de la hauteur de la CheckboxButton avec bordure lorsque le bouton est imbriqué dans un formulaire, #8100\n- Correction d'une erreur d'analyse du menu pour les couleurs personnalisées, #8153 (par @zhouyixiang)\n\n### 2.0.3\n\n*2017-11-03*\n\n- Correction des attributs `éditable` et `readonly` pour DatePicker avec intervalle, #7922\n- Correction d'une erreur de style des Tabs imbriqués, #7941\n- Correction d'une erreur de style de la dernière étape des Steps verticales, #7980\n- Correction de la synchronisation du déclenchement de l'événement `current-current-change` pour Pagination, #7995\n- Correction d'une infobulle non enregistrée dans Menu, #7995\n\n### 2.0.2\n\n*2017-10-31*\n\n- Un clic droit sur les boutons de InputNumber ne changera pas sa valeur, #7817\n- La méthode `validate` de Form peut maintenant attendre des validations asynchrones avant d'exécuter son callback, #7774 (par @Allenice)\n- Correction de la plage de sélection de DatePicker ne fonctionnant pas dans les navigateurs Chromium 53-57, #7838\n- Correction des icônes manquantes de prévisualisation et de suppression de Upload lorsque son `list-type` est picture-card, #7857\n- Ajout de l'attribut `sort-by` pour TableColumn, #7828 (par @wangfengming)\n- Correction de DatePicker affichant parfois un mauvais numéro d'année lors de la sélection de la première semaine en mode semaine, #7860 (par @hhh23485)\n- Correction d'une erreur de style d'icône des Steps verticales, #7891\n- La 'hot area' pour les flèches de nœud dans Tree est étendue, #7891\n\n### 2.0.1\n\n*2017-10-28*\n\n- Correction d'une erreur de style de RadioButton et CheckboxButton, #7793\n- Correction de TimePicker qui ne répondait pas au défilement de la souris dans certaines conditions, #7811\n- Correction des styles incomplets de certains composants lors de l'importation à la demande, #7811\n\n### 2.0.0 Carbon\n\n*2017-10-27*\n\n#### Nouvelles fonctionnalités\n- Général\n  - Un nouveau thème : `theme-chalk`.\n  - L'accessibilité des éléments suivants est améliorée : Alert, AutoComplete, Breadcrumb, Button, Checkbox, Collapse, Input, InputNumber, Menu, Progress, Radio, Rate, Slider, Switch, Upload\n  - Ajout du typage TypeScript\n  - Toutes les icônes existantes sont redessinées. De nouvelles icônes sont ajoutées\n  - Ajout d'une série de classes basées sur les breakpoints qui masquent les éléments lorsque la taille de la fenêtre remplit certaines conditions\n  - Ajout des composants de mise en page : Container, Header, Aside, Main, Footer\n  - Vous pouvez maintenant configurer la taille des composants de manière globale. Lors de l'importation d'un élément, vous pouvez ajouter un objet de configuration global avec une propriété `size` pour configurer les tailles par défaut pour tous les composants.\n- Button\n  - Ajout de l'attribut `round`. Il est utilisé pour les boutons à coins ronds #6643\n- TimeSelect\n  - Vous pouvez maintenant naviguer en appuyant sur les touches `Up` et `Down`, et en appuyant sur `Enter` vous sélectionnez l'heure #6023.\n- TimePicker\n  - Vous pouvez maintenant naviguer à l'aide des touches fléchées, et en appuyant sur `Entrée` vous sélectionnez l'heure #6050.\n  - Ajout de `start-placeholder` et de `end-placeholder`. Ce sont des placeholders pour les deux champs en mode intervalle #7169\n  - Ajout de l'attribut `farrow-control` pour faire tourner le temps avec les flèches #7438\n- Tree\n  - Maintenant les noeuds enfants ne font pas de rendu avant la première ouverture #6257\n  - Ajout de l'attribut `check-descendants`. Il détermine si les nœuds enfants sont vérifiés lors du contrôle de leur nœud parent en mode `lazy` #6235\n- Tag\n  - Ajouté l'attribut `size` #7203\n- Datepicker\n  - Maintenant `timeFormat` peut formater le TimePicker quand le type est réglé sur `datetimerange` #6052\n  - Ajout de `start-placeholder` et de `end-placeholder`. Ce sont des placeholders pour les deux champs en mode intervalle #7169\n  - Ajout de l'attribut `value-format` pour personnaliser le format de la valeur liée, #7367\n  - Ajout de l'attribut `unlink-panels` pour dissocier les deux panneaux de date lors de la sélection d'une plage de dates\n- MessageBox\n  - Ajout de l'attribut `closeOnHashChange` #6043\n  - Ajout de l'attribut `center` pour que le contenu puisse être centré #7029\n  - Ajout de l'attribut `roundButton` pour afficher les boutons ronds #7029\n  - Ajout de l'attribut `dangerouslyUseHTMLString`. Lorsqu'il est réglé sur `true`, `message` sera interprété comme une chaîne HTML<sup>\\*</sup> #6043\n  - Ajout de l'attribut `inputType` pour assigner le type de l'input intérieur, #7651\n- Dialog\n  - Ajout des attributs `width`、`fullscreen`、`append-to-body`. La boîte de dialogue peut maintenant être imbriquée\n  - Ajout de l'attribut `center` pour que le contenu puisse être centré #7042\n  - Ajout de `focus-after-closed`、`focus-after-open` pour améliorer l'accessibilité #6511\n- ColorPicker\n  - Maintenant vous pouvez taper les couleurs dans le champ de saisie #6167\n  - Ajout des attributs `size` et `disabled` #7026\n  - Ajout de l'attribut `popper-class` #7351\n- Message\n  - Maintenant la couleur des icônes peut être modifiée par CSS #6207\n  - Ajout de l'attribut `dangerouslyUseHTMLString`. Lorsqu'il est réglé sur `true`, `message` sera interprété comme une chaîne HTML<sup>\\*</sup> #6207\n  - Ajout de l'attribut `center` pour que le contenu puisse être centré #6875\n- Notification\n  - Ajout de l'attribut `position` pour configurer où Notification apparaît #6231\n  - Ajout de l'attribut `dangerouslyUseHTMLString`. Lorsqu'il est réglé sur `true`, `message` sera interprété comme une chaîne HTML<sup>\\*</sup> #6231\n  - Ajout de l'attribut `showClose` pour cacher le bouton de fermeture #6402\n- Rate\n  - Ajout de l'attribut `show-score` pour déterminer si le score actuel est affiché #6295\n- Tabs\n  - Ajout de l'attribut `tab-position` #6096\n- Radio\n  - Ajout des attributs `border` et `size` #6690\n- Checkbox\n  - Ajout des attributs `border` et `size` #6690\n- Alert\n  - Ajout de l'attribut `center` pour que le contenu puisse être centré #6876\n- Menu\n  - Ajout des attributs `background-color`, `text-color` et `active-text-color` #7064\n  - Ajout des méthodes `open` et `close` pour ouvrir et fermer les sous-menus par programmation, #7412\n- Form\n  - Ajout de l'attribut `inline-message` pour déterminer si le message de validation est affiché en ligne #7032\n  - Ajout de l'attribut `status-icon` pour afficher une icône de feedback après validation #7032\n  - Form et FormItem ont maintenant un attribut `size`. Les composants internes hériteront de cette taille s'ils ne sont pas spécifiés sur eux-mêmes, #7428\n  - La méthode `validate` retournera maintenant une promesse si le rappel est omis, #7405\n  - Ajout de la méthode `clearValidate` pour la validation des résultats pour tous les éléments de formulaire, #7623\n- Input\n  - Ajout des attributs `suffixe` et `préfixe` des slots nommés, `suffixIcon` et `prefixIcon` pour ajouter du contenu dans la zone de saisie #7032\n- Breadcrumb\n  - Ajout de l'attribut `separator-class` pour supporter les icônes comme séparateurs d'éléments #7203\n- Steps\n  - Ajout de l'attribut `simple` pour activer les étapes de style simple #7274\n- Pagination\n  - Ajout des attributs `prev-text` et `next-text` pour personnaliser les textes des pages précédente et suivante #7005\n- Loading\n  - Maintenant vous pouvez personnaliser l'icône et la couleur de fond avec les propriétés `spinner` et `background` #7390\n- Autocomplete\n  - Ajout de l'attribut `debounce`, #7413\n- Upload\n  - Ajout des attributs `limit` et `on-exceed` pour limiter le nombre de fichiers, #7405\n- DateTimePicker\n  - Ajout de l'attribut `time-arrow-control` pour activer `arrow-control` du TimePicker imbriqué, #743838\n- Layout\n  - Ajout d'un nouveau point d'arrêt `xl` pour les fenêtres plus larges que 1920px\n- Table\n  - Ajout de l'attribut `span-method` pour la fusion de cellules\n  - Ajout de la méthode `clearSort` pour effacer le tri par programmation\n  - Ajout de la méthode `clearFilter` pour effacer le filtre par programmation\n  - Pour les lignes extensibles, lorsqu'une ligne est étendue, une classe `.expanded` sera ajoutée à sa liste de classes, afin que vous puissiez personnaliser son style\n  - Ajout de l'attribut `size`\n  - Ajout de la méthode `toggleRowExpansionRowExpansion` pour ouvrir ou réduire les lignes extensibles par programmation\n  - Ajout de l'attribut `cell-class-name` pour assigner un nom de classe aux cellules\n  - Ajout de l'attribut `cell-style` pour le style des cellules\n  - Ajout de l'attribut `header-row-class-name` pour assigner un nom de classe aux lignes d'en-tête\n  - Ajout de l'attribut `header-row-style` pour le style d'en-tête\n  - Ajout de l'attribut `header-cell-class-name` pour assigner un nom de classe aux cellules d'en-tête\n  - Ajout de l'attribut `header-cell-style` pour le style des cellules d'en-tête\n  - L'attribut `prop` de la tableColumn accepte maintenant les notations `object[key]`\n  - Ajout de l'attribut `index` pour TableColumn pour personnaliser les index de lignes\n- Select\n  - Ajout de l'attribut `reserve-keyword` pour réserver le mot-clé de la recherche courante après avoir sélectionné une option.\n\n#### Corrections de bugs\n- DatePicker\n  - Correction de `v-model` retournant le deuxième jour de la semaine sélectionnée en mode semaine #6038\n  - Correction de la première entrée effacée dans le type `daterange` #6021\n- DateTimePicker\n  - Correction de DateTimePicker et TimePicker s'affectant l'un l'autre lors de la sélection #6090\n  - Correction de l'heure et de la seconde qui peuvent être au-delà de la limite en sélectionnant l'heure #6076\n- TimePicker\n  - Correction de `v-model` qui ne se mettait pas à jour correctement lors du blur #6023\n- Dialog\n  - Correction des textes ayant des bords flous lors de l'ouverture et de la fermeture des listes déroulantes imbriquées #6088\n- Select\n  - Performances améliorées. Maintenant Vue dev-tool ne crashera pas quand un grand nombre de Select sont détruits #6151\n- Table\n  - Correction d'un bug ou la table reste masquée lorsque son élément parent apparaît depuis `display : none`\n  - Correction de l'extension de la largeur de la table lorsque l'élément parent a `display : flex`\n  - Correction d'un bug qui corrigeait le fait que les colonnes d'une table avec l'emplacement `append` disparaissaient lorsque les données étaient récupérées dynamiquement\n  - Correction de l'attribut `expand-row-keys` qui ne fonctionnait pas avec la valeur initiale\n  - Correction d'une défaillance du filtre lors de la mise à jour de `data`\n  - Correction d'une erreur de calcul dans la mise en page des colonnes fixes avec en-têtes groupés\n  - Correction d'un bug dynamique de `max-height`\n  - Correction de quelques erreurs de calcul de style\n\n#### Breaking changes\n- Général\n  - Suppression de `theme-default`.\n  - Compatible avec Vue 2.5.2+ et IE 10+\n  - L'événement `change` des composants de formulaire et l'événement `current-current-change` de la pagination ne se déclenchent plus que lors de l'interaction de l'utilisateur\n  - L'attribut `size` de Button et les composants de formulaire acceptent maintenant `medium`, `small` et `mini`\n  - Pour faciliter l'utilisation d'icônes tierces, les attributs `icon` du bouton et des étapes, `prefix-icon` et `suffix-icon` d'Input nécessitent maintenant un nom de classe complet\n- Dialog\n  - Suppression de l'attribut `taille`. Maintenant la taille de Dialog peut être configurée par `width` et `fullscreen`\n  - Maintenant la visibilité de Dialog ne peut plus être contrôlée par `v-model`\n- Rate\n  - Le `text-template` est renommé `score-template`\n- Dropdown\n  - `menu-align` est renommé en `placement`. Maintenant il supporte plus de positions\n- Transfert\n  - le `footer-format` est renommé en `format`\n- Switch\n  - Les attributs commençant par `on-**` seront analysés pour les événements dans JSX, ce qui rend tous les attributs `on-*` de Switch incapable de fonctionner en JSX. Ainsi, les attributs `on-**` sont renommés en `active-*`, et par conséquent les attributs `off-*` sont renommés en `inactive-*`. Cette modification affecte les attributs suivants: `on-icon-class`, `off-icon-class`, `on-text`, `off-text`, `off-text`, `on-color`, `off-color`, `on-value`, `off-value`\n  - Les attributs `active-text` et `inactive-text` n'ont plus de valeurs par défaut\n- Tag\n  - L'attribut `type` accepte maintenant `success`, `info`, ` warning` et `danger`\n- Menu\n  - Suppression de l'attribut `theme`. La couleur du menu peut être configurée en utilisant `background-color`, `text-color` et `active-text-color`\n- Input\n  - Suppression de l'attribut `icon`. L'icône du suffixe peut maintenant être configurée à l'aide de l'attribut `suffix-icon` ou du slot `suffix-icon`\n  - Suppression de l'attribut `on-icon-click` et de l'événement `click`. Maintenant pour ajouter le gestionnaire de clic sur les icônes, veuillez utiliser les slots nommés\n  - L'événement `change` se comporte maintenant comme dans l'input natif, qui ne se déclenche qu'en cas de blur ou en appuyant sur Entrée. Si vous avez besoin de répondre à l'entrée de l'utilisateur en temps réel, vous pouvez utiliser l'événement `input`\n- Autocomplete\n  - Suppression de l'attribut `custom-item`. Le template de suggestions d'entrée peut maintenant être personnalisé en utilisant `scoped slot`.\n  - Suppression de l'attribut `props`. Vous pouvez maintenant utiliser l'attribut `value-key` pour désigner le nom de clé de l'objet de suggestion d'entrée pour l'affichage.\n- Steps\n  - Suppression de l'attribut `center`\n  - Maintenant le Steps va remplir son conteneur parent par défaut\n- DatePicker\n  - Le paramètre de l'événement `change` de DatePicker est maintenant la valeur liée elle-même. Son format est contrôlé par `value-format`\n- Table\n  - Suppression de la prise en charge de la personnalisation du modèle de colonne à l'aide de `inline-template`\n  - `sort-method` s'aligne maintenant avec `Array.sort`. Il devrait retourner un nombre au lieu d'un booléen\n  - L'emplacement `append` est déplacé à l'extérieur de l'élément `tbody` pour éviter les rendus multiples\n  - L'événement `expand` est renommé en `expand-change`\n  - Les paramètres de la méthode `row-class-name` et `row-style` sont maintenant un objet\n\n##\n<i><sup>*</sup> Rendre du HTML arbitraire de façon dynamique sur votre site Web peut être très dangereux car cela peut facilement mener à[des attaques XSS](https://en.wikipedia.org/wiki/Cross-site_scripting). Donc quand `dangerouslyUseHTMLString' est activé, assurez-vous que le contenu du `message' est fiable, et **ne jamais** assigner `message` au contenu fourni par l'utilisateur.</i>.\n"
  },
  {
    "path": "CHANGELOG.zh-CN.md",
    "content": "## 更新日志\n\n### 2.15.14\n\n*2023-08-24*\n\n#### Bug 修复\n- Img\n  - 删除 referrerpolicy 属性 (#22651 by @xinguanhua)\n#### 优化\n- Docs\n  - 更新 readme and website example links (#22642 by @lyfeyaj)\n  - 更新 popper 官方文档链接 (#22539 by @brizer)\n- I18n\n  - 更新 西班牙语 翻译 (#22430 by @jcardus)\n  - 新增 塞尔维亚语（拉丁) 翻译 (#22567 by @N-M)\n  - 更新 乌兹别克语 翻译 (#22390 by @akahon)\n- Statistics\n  - 文档更新; 代码优化 (#22384 by @webvs2)\n- Table\n  - 增加高亮选中行属性 (#22382 by @wangdaodao)\n\n### 2.15.13\n\n*2023-02-12*\n\n#### Bug 修复\n- Docs\n  - 修复 Statistic 文案 (#22383 by @JUST-Limbo) \n  - 修复 Input 文案 (#22093 by @lm312)  \n  - 修复 en-US 文案 (#22268 #22269 #22270 by @Hazel-Lin)  \n  - 修复 Pagination 文案 (#22288 by @xujintai123)  \n  - 修复 Links 文案 (#22370 by @itmier)  \n- Statistics\n  - 修复 slot 显示问题 (#22375 by @webvs2)\n- Chore\n  - 修复 web-type 文件丢失问题 (#22271 by @loosheng)\n#### 优化\n- InputNumber\n  - windows触摸屏响应优化 (#22185 by @mrsai)\n- Image\n  - 新增 initialIndex 属性 (#22346 by @inkroom) \n- Statistics\n  - countdown 特性更新 (#22260 by @webvs2)\n  - 代码优化及doc更新 (#22276 by @webvs2)\n- 其他\n  - web-type代码优化 (#22281 by @whzxc)\n\n### 2.15.12\n\n*2022-11-16*\n\n#### Bug 修复\n- Statistics\n  - 修改 千分位 问题 (#22252 by @webvs2)\n- 其他\n  - 修复 2.15.11版本element-theme-chalk未成功发布 问题\n\n### 2.15.11\n\n*2022-11-15*\n\n#### Bug 修复\n- Docs\n  - 修复 Radio 文案 (#22178 by @bchen1029)\n  - 修复 Progress 文案 \n#### 优化\n- I18n\n  - 更新 马来西亚语 翻译 (#22185 by @z4q)\n  - 更新 挪威语 翻译 (#22145 by @Barsnes)\n- Progress\n  - 新增 defineBackColor 和 textColor 属性 (#22089 by @lm312) \n- Statistics\n  - 新增组件 Statistics (#22159 by @webvs2)\n- Other\n  - 改进WebStorm IDE和其他JetBrains IDE中的代码帮助 (#22135 by @piotrtomiak)\n\n### 2.15.10\n\n*2022-09-13*\n\n#### Bug 修复\n\n- DatePicker\n  - 修复 props placement 报错信息 问题 (#21908 by @lqzhgood)\n- Loading\n  - 修复 使用 Loading 的DOM元素 sticky失效 问题 (#22087 by @zzjjhh001)\n- Docs\n  - 修复 Popover 文案 (#22083 by @lm312)\n  - 修复 Skeleton 文案 (#22092 by @lm312)\n  - 修复 DatePicker 文案 (#21970 by @guojiongwei)\n- Tree\n  - 修复 懒加载默认选中 问题 (#21934 by @kiss-yu)\n\n#### 优化\n\n- I18n\n  - 新增 僧伽罗语 翻译 (#21936 by @sayuri-gi)\n  - 更新 西班牙语 翻译 (#21924 by @jcardus)\n  - 新增 马来西亚语 翻译 (#22028 by @iorange0411)\n  - 更新 斯瓦希里语 翻译 (#21904 by @Cholowao)\n- Utils\n  - 更新 date-util.js (#22099 by @Due07)\n- DatePicker\n  - 新增 months 和 years 类型 (#21918 by @akiko123456)\n\n### 2.15.9\n\n*2022-06-02*\n\n#### Bug 修复\n\n- Table\n  - 表头抖动修复 (#21863 by @bofeng)\n  - 按需引用时 `el-checkbox not imported` 修复 (#21828 by @bobohuochai)\n- FormItem\n  - 修复 rules 切换为 null 时校验未重置 问题 (#21892 by @bofeng)\n- Cascader\n  - 修复 切换 options 时错误报错信息 问题 (#21759 by @louiebb)\n- Docs\n  - 修复 Popover 文案 (#21843 by @lod61)\n  - 修复 Calendar 文案 (#21814 by @GoJam11)\n  - 修复 TimePicker 文案 (#21803 by @Alanscut)\n  - 修复 DatePicker 文案 (#21877 by @Nirvanaiu)\n- 其他\n  - 官网在线演示功能修复 (#21863 by @bofeng)\n\n#### 优化\n\n- I18n\n  - 新增 斯瓦希里语 翻译 (#21895 by @quilltouch)\n- Chore\n  - 本地开发时可从 devTools 工具跳转源代码 (#21633 by @polemices)\n- DatePicker & Cascader\n  - 弹窗方向优化 (#21806 by @XivLaw)\n- Tooltip\n  - 优化 `getFirstElement` 代码 (#21886 by @zhankang)\n- Input\n  - 优化 scss 代码 (#21558 by @cheese-git)\n\n### 2.15.8\n\n*2022-04-12*\n\n#### Bug 修复\n\n- Drawer\n  - 修复 appendToBody 失效问题 (#21264 by @cs1707)\n- Switch\n  - 修复 toggling value 问题(#19473 by @EdwinBetanc0urt)\n- Docs\n  - 修复 input 文案 (#21723 by @justforuse)\n  - 修复 DatePicker 文案 (#21663 by @justforuse)\n  - 修复 Skeleton 文案 (#21601 by @yanwydxf)\n- 其他\n  - 修复 vue 版本(#21736 by @ckvv)\n\n#### 优化\n\n- I18n\n  - 新增 阿塞拜疆语 翻译 (#21012 by @ricardotondello)\n  - 更新 斯洛文尼亚语 翻译 (#21729 by @patik123)\n  - 更新 斯洛伐克语 翻译 (#21711 by @sjaustirni )\n  - 新增 冰岛语 的翻译 (#21709 by @aronhr)\n  - 新增 孟加拉 语的翻译 (#21485 by @llwwtt)\n\n#### 其他\n\n- 因兼容性考虑，撤回2.15.7关于node-sass的更新(#21019 by @linxsbox)，重新评估后会在后续合适版本上线\n\n### 2.15.7\n\n*2021-11-18*\n\n#### Bug 修复\n\n- Select\n  - 修复 filter 模式下，点击图标不能触发下拉的 bug (#21314 by @dennyak47)\n  - 修复 composition 模式下 keydown 事件 (#21336 by @bchen1029)\n- Badge\n  - 修复 is-dot class (#21308 by @adaex)\n- Form\n  - validate 方法返回错误信息 (#21374 by @cs1707)\n- Table\n  - 修复 resizeObserver loop limit exceeded (#21255 by @tomieric)\n  - 修复 toggleAllSelection (#21456 by @cs1707)\n  - 优化 table 性能 (#21330 by @cs1707)\n- Button\n  - 修复 disabled 优先级 (#21375 by @cs1707)\n- Descriptions\n  - 修复 label slot bug (#21462 by @cs1707)\n- SASS\n  - node-sass 替换为 dart-sass (#21019 by @linxsbox)\n- Docs\n  - 修复 skeleton 文案 (#21408 by @zhhbstudio)\n\n### 2.15.6\n\n*2021-09-02*\n\n#### Bug 修复\n\n- Cascader\n  - 修复浏览器缩放模式下抖动的 bug (#21207 by @cs1707)\n  - 优化性能 (#21231 by @cs1707)\n- Select\n  - 修复多选模式下文字溢出的 bug (#21237 by @cs1707)\n- Dropdown\n  - 增加 disabled 属性 (#21235 by @mshioda)\n- Radio\n  - 修复浏览器返回后保留状态的 bug (#21250 by @cs1707)\n- Descriptions\n  - 修复类型定义 (#21265 by @adaex)\n  - 修复与表格组件混用样式冲突的问题 (#21254 by @adaex)\n- Drawer\n  - 修复 append-to-body (#21264 by @cs1707)\n- Local\n  - 修复 italian 翻译错误 (#21012 by @ricardotondello)\n\n### 2.15.5\n\n*2021-08-04*\n\n#### Bug 修复\n\n- Select\n  - 修复 resetInputHeight 报错的 bug (#21201 by @cs1707)\n\n### 2.15.4\n\n*2021-08-03*\n\n#### 新特性\n\n- Descriptions\n  - 新增 Descriptions 组件 (#21129 by @cs1707)\n- Result\n  - 新增 Result 组件 (#21171 by @cs1707)\n\n#### Bug 修复\n\n- Utils\n  - 修复 isScroll (#21098 by @canvascat)\n- Translation\n  - 更新 it.js (#21133 by @bliberi)\n- RadioGroup\n  - 修复 RadioGroup 与 component 兼容的 bug (#20783 by @lceric)\n- Message\n  - 修复 message[type] (#21088 by @cs1707)\n- Carousel\n  - 修复 setActiveItem 重置计时 (#20846 by @Nekojita1)\n- Cascader\n  - 修复 emitPath (#21185 by @cs1707)\n- Select\n  - 修复 filterable bug (#17494 by @profore)\n  - 修复浏览器缩放模式下抖动的 bug (#21197 by @cs1707)\n- Tree\n  - 修复 insertChild (#21194 by @cs1707)\n\n### 2.15.3\n\n*2021-06-29*\n#### 新特性\n\n- Skeleton\n  - 新增 Skeleton 组件 (#21038 by @cs1707)\n- Empty\n  - 新增 Empty 组件 (#21080 by @cs1707)\n\n#### Bug 修复\n\n- Local\n  - 修复 hr 语言 week 翻译 (#21040 by @cs1707)\n- Table\n  - 修复 lazy load data (#21041 by @cs1707)\n- Docs\n  - 修改 form 组件\b hide-required-asterisk 描述 (#21045 by @cs1707)\n- Drawer:\n  - 修复 destroy (#20715 by @zj9495)\n- Row\n  - 修复 align top (#20963 by @cs1707)\n- Select\n  - 修复 value 为 Boolean 类型的bug (#21052 by @cs1707)\n- Calendar\n  - 修复 first-day-of-week (#21057 by @cs1707)\n- Utils\n  - 修复 fix isScroll (#21065 by @cs1707)\n  - 修复 (utils.dom by @fw6)\n- TypeScript\n  - 增加 CascaderPanel 类型导出 (#21070 by @qige2016)\n  - 增加 spinner.d.ts (#21090 by @qige2016)\n\n### 2.15.2\n\n*2021-05-28*\n\n#### Bug 修复\n\n- Image\n  - 修复 z-index 增加 keydown 事件 添加 stopPropagation (#20859 by @cs1707)\n- Input\n  - 修复 password cursor 展示 (#20870 by @cs1707)\n  - 修复 password icon 在 edge 下的展示 (#20902 by @cs1707)\n- Carousel\n  - 修复 interval 和 scale bug (#20931 by @cs1707)\n- Cascader\n  - 修复 delete tag bug (#20939 by @cs1707)\n- Drawer\n  - 支持 overflow auto (#20948 by @cs1707)\n- 其他\n  - 修复 isFunction (#20912 by @cs1707)\n\n### 2.15.1\n\n*2021-02-23*\n\n#### Bug 修复\n\n- Drawer\n  - 修复 Drawer bug (by @cs1707)\n- Image\n  - 修复 image object fit ratio 在 IE 下的 bug  (#19583 by @charlie0228)\n- Cascader\n  - 修复 cascader panel active path (#20730 by @cs1707)\n- Calendar \n  - 修复 calendar 国际化 bug (#20758 by @iamkun)\n- ColorPicker\n  - 修复 bugs (by @UxieVerity)\n\n#### 优化\n\n- Doc\n  - 更新 Axure 设计资源 v2.1.0 (by @iamkun)\n\n### 2.15.0\n\n*2021-01-15*\n\n#### Bug 修复\n\n- Select\n  - 修复 placeholder 国际化 bug (#17644 by @nzh63)\n- Popconfirm\n  - 修复 Popconfirm 国际化 bug by @iamkun\n- Drawer\n  - 修复 focus bug (#20626 by @cs1707)\n- Image\n  - 图片预览优化 (#20652 by @cs1707)\n\n#### 优化\n\n- Doc\n  - 更新法语文档 datetime-picker.md (#20543 by @lonk)\n  - 更新 Progress 组件文档 (#20641 by @cs1707)\n\n### 2.14.1\n\n*2020-11-11*\n\n#### Bug 修复\n\n- Popover\n  - 兼容 Vue 2.6 新 v-slot 语法 (#20424 by @iamkun)\n\n#### 优化\n\n- I18n\n  - 更新阿拉伯语翻译 (#20202 by @elkattan)\n  - 更新维吾尔语翻译 (#20177 by @IlhamTahir)\n\n### 2.14.0\n\n*2020-10-29*\n\n#### 非兼容性更新\n\n- Popconfirm\n  - 事件名称修改为 `confirm`, `cancel` (#20240 by @hugiron)\n\n#### Bug 修复\n\n- Progress\n  - 修复参数错误的问题 (#19985 by @Caaalabash)\n\n#### 优化\n\n- I18n\n  - 更新俄语翻译 (#19451 by @yangirov)\n  - 更新高棉语翻译 (#20077 by @Sovai)\n  - 更新乌克兰语翻译 (#20344 by @MammutAlex)\n\n### 2.13.2\n\n*2020-05-18*\n\n#### Bug 修复\n\n- Autocomplete\n  - 修复 'change event' 错误 (#19200 by @sxzz)\n- Image\n  - 更新错误状态 (#19194 by @lhx6538665)\n\n#### 优化\n\n- I18n\n  - 更新 ru-RU popconfirm 翻译 (#19220 by @Opppex)\n  - 更新 vi 翻译 (#19244 by @quangln2810)\n  - 更新 Catalan 和 Spanish 翻译 (#19296 by @Ismaaa)\n  - 更新 Indonesia 翻译 (#19320) by @therour)\n  - 更新 Brazilian Portuguese 翻译 (#19374 by @diegomengarda)\n\n\n### 2.13.1\n\n*2020-04-13*\n\n#### 新特性\n- Autocomplete\n  - 添加 change 事件 (#17913 by @sxzz)\n\n#### Bug 修复\n\n- Autocomplete\n  - 修复类型为 textarea 时建议错误问题 (#18478 by @Roojay)\n- Carousel\n  - 修复 console.warn 文案拼写错误 (#18264 by @IceFox)\n- Image\n  - 修复当 preview-src-list 属性不包含 src 时图片预览大图展示为空的问题 (#18975) (#19130 by @luckyCao)\n  - 修复第二次图片预览时快捷键失效问题 (#18983) (#19156 by @luckyCao)\n  - 修复 preview-src-list 为空时点击图片会给 body 添加 overflow: scroll 的问题 (#18967 by @inooNgt)\n- Transfer\n  - 修复和 Form 组件一起使用时错误的行高问题 (#18917 by @Hanx)\n- InputNumber\n  - 正确计算 inputNumberDisabled (#18439 by @ashuser-pendo)\n- Chore\n  - 更新首页文案 (#19155 by @iamkun)\n- Doc\n  - 更新 Popconfirm 文档 (#18324 by @iamkun)\n  - 修复 step-strictly 文档拼写问题 (#18705 by @dream2023)\n  - 修复 Steps 组件文档问题 (#17555 by @haoranyu)\n\n### 2.13.0\n\n*2019-11-26*\n\n#### 新特性\n\n- Popconfirm\n  - 新增 Popconfirm 组件 (#17548 by @iamkun)\n\n#### Bug fixes\n\n- BackTop\n  - 平滑过渡动画 (by @lon)\n- DatePicker\n  - 修复选择最小日期的 bug (#17191 by @smk0621)\n- Select\n  - 修复测试用例  (by @msidolphin)\n- Tree\n  - 增加 font-size 样式 (#17094 by @spengjie)\n- Table\n  - 头部可自定义 (#17291 by @ziyoung)\n  - 更新头部样式 (#17284 by @ziyoung)\n  - 修复时候 filter 之后高度问题 (#17348 by @ziyoung)\n  - 修复 row-style 失效的 bug (#17002 by @a631807682)\n  - 修复头部消失的 bug (#17341 by @ziyoung)\n- Calendar\n  - 导入 el-button 和 el-button-group (#17376 by @masongzhi)\n- MessageBox\n  - 修复图表位置 (#17410 by @nullptru)\n- TimePicker\n  - 滚动后设置正确的位置 (#16868 by @mattheyan)\n- Message\n  - 修复关闭的 offsetHeight（#17564） (#17852 by @gzwgq222)\n- Form\n  - ValidateField 的回调应为可选项 (#17314 by @CarterLi)\n- Cascader\n  - 修复 TypeScript 3.7 的兼容问题 (#17881 by @CarterLi)\n- Menu\n  - 修复 NavigationDuplicated 在 vue-router@^3.1.0 的报错 (#17269 by @iamkun)\n- Dropdown\n  - 更新类型文件 (#17550 by @iamkun)\n- Progress\n  - 增加 strokeLinecap 属性 (#17552 by @iamkun)\n- InfiniteScroll\n  - 跳过不可见元素触发 (#17553 by @iamkun)\n- Image\n  - 优化用户体验 (#16985 by @luckyCao)\n  - 优化大图片展示问题 (#16796 by @luckyCao)\n- Drawer \n  - 修复 drawer-append-to-body 失效的 bug (#16953 by @JeremyWuuuuu)\n- Select\n  - 修复空 tag 的 bug (17199 by @luckyCao)\n- Scrollbar\n  - 修复 FireFox 双滚动条的 bug (#18091 by @iamkun)\n  \n#### Optimization\n\n- I18n\n  - 更新 sv-SE.js (#17926 by @FOLLGAD)\n  - 更新 avatar 组件法语文档 (#17762 by @blombard)\n- Docs\n  - 修复 time-select 文档错误 (#17250 by @wacky6)\n  - 修复 Drawer 文档错误 (#17122 by @haoranyu)\n  - 更新 Spanish changelog 2.12.0 (#17364 by @Gonzalo2310)\n  - 修复 Changelog 文档错误 (#17874 by @renlixin)\n  - 修复 Loading 示例 (#17862 by @MBearo)\n  - 增加 input event 相关文档 (#18061 by @zhouxinyong)\n  - 移除 Input repeat change event 相关文档 (#18085 by @zhouxinyong)\n\n### 2.12.0\n\n*2019-08-29*\n\n#### 新特性\n\n- Popover\n  - 添加 close-delay 属性 (#16671 by @LachlanStuart)\n- Theme\n  - 增加 Chrome 插件: Element Theme Extension (#16686 by @iamkun)\n- Icon\n  - 支持 font-display 属性的配置 (#16805 by @iamfaizalandyka)\n\n#### Bug fixes\n\n- Table\n  - 在表头拖拽后阻止 click 事件的触发 (#16850 by @ziyoung)\n  - 修复表头 display 为 none 造成浏览器崩溃的问题 (#16956 by @luckyCao)\n  - 修复没有数据的时表格高度问题 (#16861 by @ziyoung)\n  - 调用 toggleExpansion 不再抛出异常 (#16304 by @yyjjqq94)\n  - 挂载时不再触发 sort-change 事件 (#17113 by @a631807682)\n  - 修复 setCurrentRow 方法不生效的问题 (#16879 by @ziyoung)\n  - 修复当数据异步加载时，expand-row-keys 不生效的问题 (#16899 by @ziyoung)\n  - 把 toggleAllSelection 设置为 Table 示例的属性 (#17137 by @ziyoung)\n- Tree\n  - 修复文字与复选框之间的距离 (#16799 by @Hazlank)\n- Tabs\n  - 修复 TabItem 位置不正确的问题 (#16520 by @victorting)\n  - 修复高亮的 Tab 不在可视区的问题 (#17033 by @nullptru)\n- Calendar\n  - 修复日期的显示问题 (#16772 by @ubitoffee)\n  - 修复在夏令时的显示问题 (#17208 by @iamkun)\n- Cascader\n  - 修复 CascaderPanel 的显示问题 (#16716 by @zhangHongEn)\n  - 禁用状态下，关闭按钮不显示 (#16224 by @yyjjqq94)\n- Input\n  - 修复韩语输入问题 (#15069 by @MoonHyuk)\n  - 触发清除按钮的点击事件 (#16576 by @a631807682)\n- Select\n  - 过滤时，不收起下拉框 (#17205 by @luckyCao)\n- Transfer\n  - 修复样式问题 (#17206 by @iamkun)\n- Dialog\n  - 添加 SCSS 变量 (#16365 by @haoranyu)\n- RadioGroup\n  - is 指定时，不产生非法的 HTML 片段 (#17070 by @nullptru)\n- Divider\n  - 支持自定义类 (#17078 by @island205)\n- Carousel\n  - 修复 change 的触发时机 (#16705 by @iamkun)\n- Notification\n  - 不修改传入的 option (#16704 by @iamkun)\n- DatePicker\n  - 给 picker-option 添加 className 属性 (#16632 by @iamkun)\n- DateTimePicker\n  - 修复时间选择滚动条的问题 (#16854 by @jesse-li)\n\n#### Optimization\n\n- Checkbox\n  - 提高可访问性 (#16575 by @tylertrotter)\n- Docs\n  - 更新 changelog (#16773 by @SimonaliaChen)\n  - 更新贡献指南 (#14800 by @sinchang)\n  - 修复 Drawer 文档中的拼写错误 (#16848 by @winkay)\n  - 更新自定义主题 (#16983 by @iamkun)\n  - 新增 Esperanto 翻译 (#16955 by @maxkoryukov)\n  - 更新 input-number 文档 (#16316 by @luckyCao)\n  - 更新 Spanish 文档 (#16961 #16548 by @Gonzalo2310)\n- I18n\n  - 更新加泰罗尼亚语翻译 (#14722 by @oscaralbareda)\n  - 更新阿拉伯语翻译 (#16653 by @l3op)\n- Test\n  - 修复拼写错误 (#16672 by @boomler)\n  - 优化 image 的单元测试 (#16847 by @a631807682)\n- Types\n  - 修复 httprequest 的类型 (#16633 by @luckyCao)\n\n### 2.11.1\n\n*2019-07-26*\n\n#### Bug 修复\n\n- Image\n  - 修复 Image 组件 SSR 兼容性 (#16737 by @luckyCao)\n- Chore\n  - 更新 dart-sass 的兼容性 (#16744 by @LewisChennnnn)\n\n### 2.11.0\n\n*2019-07-25*\n\n#### 新特性\n\n- Drawer\n  - 新增抽屉组件 (#16577 by @JeremyWuuuuu)\n\n#### Bug 修复\n\n- Checkbox\n  - 修复 CSS 样式问题 (#16006 by @Hazlank)\n- Tree\n  - 更新类型定义为泛类型 (#15934 by @JeremyWuuuuu)\n  - 修复设置节点 isCurrent 的为 false 的问题 (#15870 by @kkkisme)\n- Dropdown\n  - 更新 split-button 默认颜色 (#15931 by @JuniorTour)\n- Cascader\n  - 修复一级菜单更新问题 (#16399 by @luckyCao)\n  - 懒加载时设默认值 (#16420 by @luckyCao)\n  - 修复当节点值重复时的显示问题 (#15935 by @junyiz)\n  - 对外暴露 getCheckedNodes 和修复 options 改变会影响选中的问题 (#16709 by @SimonaliaChen)\n- Calendar\n  - 更新显示正确的 header 的逻辑 (#16354 by @ziyoung)\n- Submenu\n  - 修复 append-to-body 问题 (#16289 by @a631807682)\n- Table \n  - 修复 tree table 数据更新问题 (#16481 by @island205)\n- Select\n  - 修复内存泄漏问题 (#16463 by @island205)\n- InfiniteScroll\n  - 更新命名和说明 (#16698 by @iamkun)\n- Avatar\n  - 修复图片不居中的问题 (#16489 by @luckyCao)\n- Dialog\n  - 增加 destroyOnClose 属性 (#16455 by @ziyoung)\n- Image\n  - 增加大图预览 (#16333 by @luckyCao)\n\n#### 优化\n\n- Docs\n  - 修复 dropdown 示例 (#16193 by @webxmsj)\n  - 修正笔误 (#15971 by @howiefh)\n- I18n\n  - 更新泰文翻译 (#16689 by @ponkrit)\n- Chore\n  - 更新基础 API 地址 (#16607 by @iamkun)\n  - 增加 Form 的主题 token (#16699 by @iamkun)\n  - 更新统计 (#16609 by @iamkun)\n  - 修复文档锚点问题 (#16692 by @iamkun)\n\n### 2.10.1\n\n*2019-07-02*\n\n#### Bug 修复\n\n- Table\n  - 排序 icon 问题修复 (#15439 by @bezany)\n  - 修复 `append` slot 存在时布局错位问题 (#16332 by @ziyoung)\n  - 修复 `showOverflowTooltip` 更新无效的问题 (#16295 by @a631807682)\n  - 修复 `FilterPanel` 中 `Scrollbar` 未注册问题  (#16246 by @ziyoung)\n- Chore\n  - 更新版本号，修复文档问题 (#16233 by @ziyoung)\n  - 修复英文首页样式问题 (#16254 by @iamkun)\n\n#### 优化\n\n- Tag\n  - 兼容 IE (#16334 by @ziyoung)\n- Chore\n  - 更新钉钉3群二维码 (#16236 by @iamkun)\n- Doc\n  - 更新主题编辑器文档 (#16244 by @iamkun)\n\n### 2.10.0\n\n*2019-06-25*\n\n#### 新特性\n\n- I18n\n  - 支持乌兹别克语 (#15796 by @ogabek96)\n- Calendar\n  - 支持 `first-day-of-week` 配置 (#16047 by @ziyoung)\n- Avatar\n  - 新增 `Avatar` 组件 (#16144 by @luckyCao)\n- Upload:\n  - 支持自定义缩略图模版 (#13192 by @victorzhuk)\n\n\n#### Bug 修复\n\n- Tree\n  - 当 `currentKey` 为 `null` 时取消对树节点的高亮 (#15668 by @yyjjqq94)\n  - 修复多实例共享数据的问题 #15538 (#15615 by @VanMess)\n- Upload\n  - 更新 `fileList` 的类型定义 (#15716 by @underfin)\n- Table\n  - 修复加载 icon 不显示的问题 (#15868 by @ziyoung)\n  - 修复复杂表格中 hover 行背景色问题 (#15504 by @cnlon)\n  - 修复 `current-row-key` 和选择事件的问题 (#15983 by @ziyoung)\n  - `height` 属性接受更多单位 (#16013 by @ziyoung)\n  - 修复 `reserve-selection` 无效的问题 (#16135 by @ziyoung)\n- Menu\n  - 修复 `popper-append-to-body` 设置后，子菜单无法收起的问题 (#15391 by @PanJiaChen)\n- Select\n  - 修复 `initialInputHeight` 问题 (#15989 by @yyjjqq94)\n  - 修复输入中文时 `default-first-option` 的行为问题 (#15431 by @VanMess)\n  - `import` 重复 (#16215 by @lengband)\n- Message\n  - 类型定义中添加 `offset` 属性 (#16027 by @matjaz)\n- Timeline\n  - 修复逆序问题 (#16091 by @ziyoung)\n- Slider\n  - 补充 `input` 事件文档 (#15588 by @VanMess)\n- InfiniteScroll\n  - 更新包名 (#16125 by @iamkun)\n- MessageBox\n  - 修复 `distinguishCancelAndClose` 行为与文档不符的问题 (#15438 by @qingdengyue)\n- PopupManager\n  - 修复无法复写 `z-index` 的问题 (#15738 by @luckyCao)\n- Docs\n  - 删除不必要的内容 (#16194 by @Alexeykhr)\n  - 更正 `Divider` 属性类型 (#15889 by @haoranyu)\n- Chore\n  - 更新测试 API 地址 (#15807 by @iamkun)\n\n#### 优化\n\n- Tree\n  -优化循环性能 (#15699 by @KingJeason)\n- Theme\n  - 更新 GA 打点，修改页底地址链接到主题编辑器 (#16007 by @island205)\n- Badge\n  - 更新类型定义 (#16198 by @iamkun)\n- Avatar\n  - 更新主题变量配置 (#16202 by @luckyCao)\n- I18n\n  - 更新葡萄牙语 (#15776 by @gigioSouza)\n  - 更新波斯语 (#15881 by @pamenary)\n- Docs\n  - 补充入门文档中的组件列表 (#16063 by @pape2016)\n  - 更新法语文档 (#16208 by @blombard)\n  - 为 `Alert` 添加 默认插槽文档 (#15444 by @Alexeykhr)\n  - 更新西班牙语文档 (#15840 by @Gonzalo2310)\n  - 更新法语文档中的拼写错误 (#15837 by @blombard)\n  - 更新 2.9.2 西班牙文档 (#16185 by @Gonzalo2310)\n\n#### 非兼容性更新\n\n- Form\n  - 移除输入框的成功状态 (#16159 by @ziyoung)\n\n### 2.9.2\n\n*2019-06-21*\n\n#### Bug 修复\n\n- Chore\n  - 修复 TS 定义文件 (#15805 by @NateScarlet)\n\n### 2.9.1\n\n*2019-05-30*\n\n#### 新特性\n\n- Table\n  - Tree Table 支持 tree-props，default-expand-all，expand-row-keys 属性, toggle-row-expansion 方法，expand-change 事件 (#15709 by @ziyoung)\n\n#### Bug 修复\n\n- Table\n  - 修复了一些问题 (#15709 by @ziyoung)\n- Theme\n  - 更新接口域名 (#15784 by @iamkun)\n\n#### 优化\n\n- Chore\n  - 更新 InfiniteScroll 组件定义文件 (#15794 by @iamkun)\n\n### 2.9.0\n\n*2019-05-30*\n\n#### 新特性\n\n- Backtop\n  - 新增 Backtop 组件 (#15541 by @iamkun)\n- PageHeader\n  - 新增 PageHeader 组件 (#15714 by @ziyoung)\n- InfiniteScroll\n  - 新增 InfiniteScroll 指令 (#15567 by @iamkun)\n- Cascader\n  - 新增多选模式和 filter-method 方法 (#15611 by @SimonaliaChen)\n- Message\n  - 信息依次展示 (#15639 by @island205)\n- Tag\n  - 新增 effect 属性 (#15725 by @SimonaliaChen)\n- Tabs\n  - 卡片模式下标题左对齐 (#15695 by @luckyCao)\n- DatePicker\n  - 支持字符串常量 (#15525 by island205)\n- Image\n  - 支持 attrs 和 listeners (#15578 by @VanMess)\n- Theme\n  - 新增 popup 背景配置 (#15412 by @iamkun)\n- Chore\n  - 更新文档首页 (#15682 by @iamkun)\n\n#### Bug 修复\n\n- Table\n  - 修复排序条件为空时的排序问题 (#15012 by @joelxr)\n- Image\n  - 修复 ssr 问题和 object-fit 的兼容性 (#15346 by @SimonaliaChen)\n- Input\n  - 修复 show-word-count 样式问题 (#15359 by @lvjiaxuan)\n  - 修复删除图标样式 (#15354 by @YiiGuxing)\n- Calendar\n  - 修复星期展示错误 (#15399 by @qingdengyue)\n  - 修复十月展示问题 (#15394 by @qingdengyue)\n- Tabs\n  - 修复 padding 问题 (#15461 by @SimonaliaChen)\n- Tag\n  - 修复阻止冒泡问题 (#15150 by @infjer)\n- Form\n  - 修复 form-item 的高度错误 (#15457 by @SimonaliaChen)\n  - 修复 resetFields 问题 (15181 by @luckyCao)\n- Tooltip\n  - 修复自定义 tabindex 不生效问题 (#15619 by @SimonaliaChen)\n- Link\n  - 修复图标 class 问题 (#15752 by @iamkun)\n- Select\n  - 回滚清除时，设置 value 为 null 的修改 (#15447 by @iamkun)\n- Loading\n  - 修复 Dom 不更新的问题 (#15123 by @FAKER-A)\n- Switch\n  - 修复事件重复触发问题 (#15178 by @FAKER-A)\n- Slider\n  - 修复点击时样式问题 (#15561 by @luckyCao)\n- Radio\n  - 修复 value 不更新的问题 (#14809 by @OverTree)\n- Form\n  - 修复 resetFields 问题 (15181 by @luckyCao)\n- Chore\n  - 更新依赖 (#15324 by ziyoung)\n- Type\n  - 修复 Loading 定义文件 (#15635 by @iamkun)\n  - 修复 Icon 定义文件 (#15634 by @iamkun)\n  - 修复 Link 定义文件 (#15402 by @iamkun)\n\n#### 优化\n\n- Cascader\n  - 重构 (#15611 by @SimonaliaChen)\n- Chore\n  - 更新新建组件的脚本 (by @iamkun)\n- Docs\n  - 重新命名文档变量 (#15185 by @liupl)\n  - 更新 Image 组件文档 (#15423 by @haoranyu)\n  - 修复 Form 组件文档错误 (#15228 by @SHERlocked93)\n\n### 2.8.2\n\n*2019-04-25*\n\n#### Bug 修复\n\n- Icon\n  - 更新 icon (#15272 by @iamkun)\n- 文档\n  - 修复 Form 与 Input 文档样式 (#15273 by @ziyoung)\n\n### 2.8.1\n\n*2019-04-25*\n\n#### Bug 修复\n\n- Icon\n  - 更新 Select 与 Cascader 的 icon (#15264 by @SimonaliaChen)\n  - 更新 icon (#15258 by @iamkun)\n\n#### 优化\n\n- Chore\n  - 更新构建脚本 (#15267 by @ziyoung)\n- Docs\n  - 修复 link 的样式 (#15265 by @iamkun)\n- 其他\n  - migrating 配置兼容驼峰名称 (#15260 by @SimonaliaChen)\n\n### 2.8.0\n\n*2019-04-25*\n\n#### 新特性\n\n- Divider\n  - 新增 Divider 组件 (#15055 by @island205)\n- Rate\n  - 支持通过对象自定义 colors 与 icon-classes 属性 (#15051 by @SimonaliaChen)\n- Link\n  - 新增 Link 组件 (#15052 by @iamkun)\n- Calendar\n  - 新增 Calendar 组件 (#14908 by @ziyoung)\n- Icon\n  - 新增图标 (#15214 by @iamkun)\n- Alert\n  - 新增高饱和度主题 (#15041 by @island205)\n- Image\n  - 新增 Image 组件 (#15117 by @SimonaliaChen)\n- Collapse\n  - CollapseItem 支持禁用 (#15076 by @ziyoung)\n- Carousel\n  - 新增 direction 属性，支持垂直方向切换 (#15122 by @ziyoung)\n- Pagination\n  - 新增 hide-on-single-page 属性 (#15096 by @ziyoung)\n- Slider\n  - 新增 marks 属性 (#15133 by @luckyCao)\n- Input\n  - 新增 show-word-count 属性 (#15075 by @luckyCao)\n- InputNumber\n  - 新增 step-strictly 属性 (#15050 by @luckyCao)\n- Tooltip, Dropdown, Popover\n  - 新增 tabindex 属性 (#15167 by @ziyoung)\n\n#### Bug 修复\n\n- Notification\n  - 修复标题不换行的问题 (#15008 by @iamkun)\n- Form\n  - 修复动态表单校验规则不生效的问题 (#14985 by @luckyCao)\n  - 修复 label 的样式 (#14969 by @ziyoung)\n  - 当 required 为 true 时，显示星号 (#15144 by @ziyoung)\n- Pagination\n  - 修复 slot 未更新的问题 (#14711 by @lucyhao)\n- Table\n  - 修复懒加载时加载数据的 bug (#15101 by @ziyoung)\n  - 在合并单元格时，修复单元格的宽度计算不正确的问题 (#15196 by @ziyoung)\n  - 提升表格的性能 (#14868 by @ziyoung)\n  - 初始化时不再触发 sort-change 事件 (#14625 by @PeanutWatson)\n  - 让 height 与 max-height 属性的行为保持一致 (#14660 by @arthurdenner)\n- Dialog\n  - 修复内容不换行的问题 (#15027 by @iamkun)\n- Alert\n  - 更新 typescript 定义文件 (#15186 by @ziyoung)\n- Tabs\n  - Fix issue where Promise rejection was hitting application (#14816 by @ffxsam)\n  - slot 改变时，重新渲染 (#15238 by @ziyoung)\n- Message\n  - 修复 typescript 定义文件 (#14968 by @agoni1212)\n- Select\n  - 修复当 value 为 undefined 或者 null 的报错 (#15022 by @luckyCao)\n- Tree\n  - 当前节点被删除后，选中的节点也应该删除 (#14604 by @sinchang)\n  - 提升性能 (#14881 by @ChenZhuoSteve)\n- Dropdown\n  - 修复样式 (#14907 by @doing123)\n- Slider\n  - 修复可访问性问题 (#14792 by @erezsob)\n- Menu\n  - 如果 defaultIndex 不存在，activeIndex 应该为空 (#14074 by @hoythan)\n- Directive\n  - RepeatClick: 使用 Date.now 提升性能 (#14776 by @pavelmash)\n- Upload\n  - 修复 Upload 的背景颜色 (#15039 by @iamkun)\n- Theme\n  - 添加无圆角变量 (#15256 by @iamkun)\n\n#### 优化\n\n- Chore\n  - 更新中文 changelog (#14965 by @iamkun)\n  - 当 demo 描述为空时，不再显示 (#15014 by @ziyoung)\n  - 显示 DevServer 的信息 (#15028 by @iamkun)\n  - 修复 2.6 changelog 的 bug (#15026 by @iamkun)\n  - 更新构建脚本 (#14821 by @abc3660170)\n  - 本次开发时支持热更新 (#15221 by @SimonaliaChen)\n  - 本地开发时，加载 sourcemap (#15087 by @ibufu)\nDocs\n  - 重命名 demo 中的变量 (#14602 #15003 #15094 #15105 by @liupl)\n  - 修复 upload 文档中的错误 (#15023 by @iamkun)\n  - 更新 Form 文档 (#15040 by @iamkun)\n  - 更新 Tabs 文档 (#15053 by @iamkun)\n  - 使用 eleme.cn 作为新域名 (#15139 by @ziyoung)\n  - 修复 Image 组件的路由名 (#15194 by @iamkun)\n  - 删除多余的法语翻译 (#15207 by @iamkun)\n\n#### 非兼容性更新\n\n- Rate\n  - 禁用情况下，显示小位数 (#15089 by @haoranyu)\n- Select\n  - 过滤情况下，placeholder 为选中选项的 label (#14989 by @ibufu)\n\n### 2.7.2\n\n*2019-04-03*\n\n#### 修复\n\n- Form\n  - 修复 `label-width` 为 `auto` 的样式 (#14955 by @ziyoung)\n\n#### 优化\n- Docs\n  - 修复文档内图片链接错误 (#14957 by @iamkun)\n- Chore\n  - 修复发布时 mkdir 异常 (#14952 by @iamkun)\n\n### 2.7.1\n\n*2019-04-03*\n\n#### 修复\n\n- Select\n  - 清空时设置 value 为 null (#14322 by @aaronfulkerson)\n- Input\n  - 当类型改变时更新 DOM (#14889 by @wacky6)\n- Table\n  - 修复当有展开列时 `defaultExpandAll` 的行为 (#14935 by @ziyoung)\n- Dialog\n  - 可以设置背景色 (#14939 by @ziyoung)\n- Form\n  - `label-width` 支持自动宽度 (#14944 by @ziyoung)\n\n#### 优化\n- Docs\n  - 更新西班牙语文档 (#14913 by @Gonzalo2310)\n  - 新增组件自动生成法语文档 (#14924 by @ziyoung)\n  - 更新 Tabs 文档 (#14938 by @ziyoung)\n\n### 2.7.0\n\n*2019-03-28*\n\n#### 新特性\n\n- Table\n  - 增加对树形结构数据的支持 (#14632 by @ziyoung)\n\n#### 修复\n\n- Tabs\n  - 阴影样式使用全局主颜色 (#14558 by @Richard-Choooou)\n  - 当 label 改变时触发更新 (#14496 by @akki-jat)\n- Table\n  - Table footer 与 body 的对齐一致 (#14730 by @ziyoung)\n- NavMenu\n  - 修复点击 el-submenu 多次触发 childMenu 问题 (#14443 by @PanJiaChen)\n- Dropdown\n  - 兼容 Vue 2.6 新 v-slot 语法 (#14832 by @ziyoung)\n- ColorPicker\n  - 修复十六进制颜色字符串解析问题 (#14793 by @iamkun)\n- Tree\n  - 恢复 pr #13349 (#14847 by @ziyoung)\n- Tooltip\n  - 当初始值为 true 时默认显示 (#14826 by @ziyoung)\n- Docs\n  - 更新 Cascader 文档 (#14442 by @panhezeng)\n- Style\n  - 修复媒体查询 sm-only, md-only, lg-only 问题 (#14611 by @sinchang)\n\n#### 优化\n\n- Chore\n  - 增加网页描述信息 (#14802 by @iamkun)\n\n### 2.6.3\n\n*2019-03-21*\n\n#### 修复\n\n- 修复 Cascader 文档页的样式 (#14789 by @ziyoung)\n- 移除 Cascader 中多余的 DOM 操作 (#14788 by @ziyoung)\n- DateRange 支持夏令时 (#14562 by @wacky6)\n\n### 2.6.2\n\n*2019-03-21*\n\n#### 新特性\n\n- DatePicker\n  - 支持 monthrange 类型 (#14487 by @zxyRealm)\n- i18n\n  - 添加 Croatian 语言包 (#14360 by @danijelh)\n- Docs\n  - 更新 2.6.1 法语文档，修复笔误 (#14555 by @smalesys)\n  - 更新法语翻译 (#14643 by @smalesys)\n\n#### 修复\n\n- Input\n  - Fix regression (#14572 by @wacky6)\n- DatePicker\n  - 修复 first-day-of-week 的计算 (#14523 by @sinchang)\n  - 修复 WeekPicker value-format 的问题 (#13754 by @wacky6)\n- Steps\n  - 修复 #14502 (#14596 by @sinchang)\n  - 修复简单模式下的样式 (#14610 by @sinchang)\n- Docs\n  - 重命名 Table 文档中的变量 (#14587 by @likwotsing)\n  - 添加法语文档索引 (#14565 by @iamkun)\n  - 修复 TimePicker 文档页的样式 (#14579 by @ziyoung)\n  - 重命名 Upload 文档中的变量 (#14593 by @liupl)\n  - 在 Form 文档中 添加的 async-validator 文档 (#14694 by @iamkun)\n  - 修复 Tooltip 文档的 bug (#14748 by @iamkun)\n  - 修复笔误 (#14751 by @2bj)\n  - 修复 Switch 在移动端 Webkit 浏览器的高亮问题 (#14703 by @VladG0r)\n\n#### 优化\n\n- Chore:\n  - 更新 ci 构建脚本 (#14600 by @ziyoung)\n  - 更新谷歌统计 (#14560 by @iamkun)\n  - 添加更多谷歌统计事件 (#14633 by @iamkun)\n  - 更新聊天组信息 (#14741 by @iamkun)\n  - 升级测试依赖 (#14735 by @wacky6)\n  - 升级 gulp (#14745 by @ziyoung)\n  - 使用 codepen 显示 demo，修复文档中的错误 (#14747 by @ziyoung)\n\n### 2.6.1\n\n*2019-03-03*\n\n#### 修复\n\n- **不再指定 node 版本** (by @iamkun in #14546)\n- 调整 `deloy-faas.sh` 中的文档目录 (by @ziyoung in #14553)\n- 调整 2.6.0 中 changelog 日期样式 (by @island205 in #14547)\n- 修复拼写错误 (by @wack6 in #14552)\n\n### 2.6.0\n\n*2019-03-01*\n\n#### 新特性\n- Timeline\n  - 添加 Timeline 组件 (by @jikkai in #14248)\n- DropdownItem\n  - `el-dropdown-item` 支持添加 icon (by @gabrielboliveira in #14088)\n- Input\n  - 添加 `show-password` 属性，支持配置显示密码按钮 (by @phshy0607 in #13966)\n- Select\n  - 添加 slot `empty` (by @elfman in #13785)\n- Autocomplete\n  - 添加 `highlight-first-item` 属性，控制是否默认突出显示远程搜索建议中的第一项 (by @YamenSharaf in #14269)\n- I18n\n  - 添加亚美尼亚语支持 (by @hamletbarsamyan in #14214)\n- Docs\n  - 新增法语文档 (by @smalesys in #12153, #14418, #14434)\n\n#### 优化\n- Alert\n  - 组件对通过 slot 传入的 description 也应用默认样式类 (by @iamkun in #14488)\n- InputNumber\n  -移除多余的 `parseFloat` (by @JuniorTour in #14172)\n- Menu\n  - 支持 `el-menu-item` 不添加 index (by @georgyfarniev in #13298)\n- Table\n  - 移除无用的 DOM 操作 (by @elfman in #13643)\n- Upload\n  - 代码优化 (by @elfman in #13973)\n- Popup\n  - 移除无用代码 (by @KAionro in #14413)\n- Docs\n  - 添加更多文档说明如何贡献代码 (by @island205 in #14355)\n  - 添加 `el-input` 是受控组件的警示 (by @wacky6 in #14463)\n  - 优化 Table 的文档 (by @luguokong in #14329)\n  - 更新 Input 文档 (by @iamkun in #14437)\n  - 优化自定义主题文档 (by @wangguohao in #14297)\n  - 为 Icon 文档添加 hover 效果 (by @tuxinghuan in #14295)\n- Build\n  - 压缩 Element 文档站的 JS 和 CSS 文件 (by @iamkun in #14430)\n  - 优化 Webpack 打包速度，从6分钟优化到1分多 (by @hetech in #14484)\n  - 添加 CLI 工具，选择版本号 (by @hetech in #14354)\n- 使用 Stale 来管理过时（暂定1年）的 Issue 和 PR (by @island205 in #14392)\n\n#### 问题修复\n- Menu\n  - 修复浏览器标签切换引起的 focus 问题 (by @liupl in #13976)\n- MessageBox\n  - 修复 TS 定义 (by @NateScarlet in #14278)\n- ScrollBar\n  - 修复点击鼠标右键导致拖动的问题 (by @xifeiwu in #14196)\n- Switch\n  - 添加 `validate-event` 属性，设置改变 Switch 状态时是否触发表单的校验 (by @hetech in #14426)\n- Table\n  - 修复多 Table 实例共享 `toggleAllSelection` 方法，造成无法切换问题 (by @letanure in #14075)\n- Tabs & Dropdown\n  - 修复样式问题 (by @hetech in #14452)\n- Tree\n  - 与 Table 统一占位文样式 (by @ColinCll in #14331)\n- Docs\n  - 修复 DatetimePicker 文档问题 (by @iamkun in #14290)\n  - 修复 DatePicker 文档拼写问题 (by @helmut in #14481)\n  - 修复分页组件文档样式问题 (by @liuchuzhang in #14451)\n\n#### 非兼容性更新\n- Table\n  - 修复 row 事件的参数顺序 (by @jikkai in #12086)\n\n### 2.5.4\n\n*2019-02-01*\n\n#### 修复\n\n- 构建: 修复 `.babelrc` 配置问题——导致 Tree 等组件没有动画 (by @island205 in #14282)\n\n### 2.5.3\n\n*2019-01-31*\n\n#### 优化\n\n- 优化 Message 的代码 (by @vok123 in #14029)\n- 移除 gh-pages (by @ziyoung in #14266)\n- 添加 IssueHunt 的链接 (by @island205 in #14261)\n\n#### 修复\n\n- 修复 UMD 包在服务器端运行出错的问题 (by @island205 in #14242)\n- 修复 Tabbar 高亮时的样式 (by @iamkun in #14240)\n- 修复 Table 示例代码的错误 (by @xunmeng in #14253)\n\n### 2.5.2\n\n*2019-01-27*\n\n#### 优化\n- 文档:\n  - 2.5.1 版本西班牙语文档更新 (by @Gonzalo2310 in #14231)\n\n#### 修复\n- 构建:\n  - 删除 umd 模块 `lib/index.js` 中本没有的注释 (by @island205 in #14233)\n  - 修复 nuxt.js 中关于 `export` 关键字的报错 (by @island205 in #14232)\n  - 修复发布 2.5.1 过程中的错误 (by @iamkun in #14228)\n\n### 2.5.1\n\n*2019-01-26*\n\n#### 优化\n- DatePicker：添加月、年高亮的样式（by @Debiancc in #14211）\n- 更新 2.5.0 changelog （by @wacky6 in #14217）\n\n\n#### 修复\n- 修复升级 Webpack 4 产生的问题，无法具名 `import` 组件，`ELEMENT.locale()` 调用报错。（by @island205 in #14220）\n- 恢复 2.4.11 文档 (by @iamkun in #14222)\n\n\n### 2.5.0\n\n*2019-01-25*\n\n#### 新特性\n- DatePicker\n  - 新增 `validate-event` 属性 (by @ziyoung in #13531)\n- DateTimePicker\n  - `pickerOptions` 支持 `selectableRange` 选项 (by @eeeeeeeason)\n- Tag\n  - 新增 `click` 事件 (by @licdream in #14106)\n- I18n\n  - 新增 柯尔克孜语 (Kyrgyz) (by @zzjframework in #14174)\n\n#### 优化\n- 升级到 webpack@4 (by @jikkai in #14173)\n- Input\n  - 简化内部实现，遵循单向数据流；修复若干相关 Bug (by @wacky6 in #13471)\n- 更新 Axure 文件，增加新组件 (by @ziyoung in #13773)\n\n#### 修复\n- Autocomplete\n  - 修正下拉框最后一行显示不完整的问题 (by @ziyoung in #13597)\n  - 修正下拉框箭头 (by @liuchuzhang in #13762)\n- Carousel\n  - 组件销毁时释放内部 Timer (by @elfman in #13820)\n- Cascader\n  - 移除已废弃的计算属性的 cache 属性 (by @iamkun in #13737)\n  - 修正 TypeScript 中 CascaderOption 类型定义 (by @NateScarlet in #13613)\n  - 修正图标覆盖文字的问题 (by @ziyoung in #13596)\n- Checkbox\n  - 改进显示样式 (by @PanJiaChen)\n- DatePicker\n  - 修正 TimeSpinner 中缺失的 v-for `key` 属性 (by @Ende93 in #13547)\n  - 修正周选择器在跨年时的高亮行为 (by @suyi91 in #13883)\n- Input\n  - 修复 textarea 时的 DOM 节点引用 (by @laomu1988 @island205 in #13803)\n- Pagination\n  - 输入框的值不会小于 1 (by @elfman in #13727)\n- Popover\n  - 修正 hover 的触发行为 (by @goldengecko in #13104)\n  - 修正弹出框的内存泄漏 (by @qpxtWhite in #13988)\n- Radio\n  - 改进显示样式 (by @ohhoney1)\n- Table\n  - 改进点击排序箭头时的行为 (by @ohhoney1 in #12890)\n  - 修正 IE10+ 中 “暂无数据” 提示的垂直布局 (by @imzjy in #13638)\n  - 修正文档中 `index` 的类型说明 (by @ilovefafa in #13628)\n  - 修正多级表头使用 `fixed` 属性时，表尾合计行的显示样式 (by @luckyCao in #13914)\n- Tabs\n  - 修正自动滚动 (by @iamkun in #13696)\n  - 通过面板名称查找面板 (by @iamkun in #13705)\n  - 使用 `paneName` 计算面板样式 (by @iamkun in #13733)\n- Tree\n  - 修正 `showCheckbox` 不能影响子节点的问题 (by @KidneyFlower)\n  - 更新文档和 TypeScript 定义 (by @ziyoung in #13540)\n- Upload\n  - `list-type` 改变时，保留 `url` 属性 (by @elfman in #13771)\n- Slider\n  - 修正源代码缩进 (by @wacky6 in #13955)\n- I18n\n  - 补充加泰罗尼亚语 (Catalan) 翻译 (by @jaumesala)\n  - 补充俄语 (Russian) 翻译 (by @justlp in #13658)\n  - 补充芬兰语 (Finnish) 翻译 (by @jenkrisu in #14137)\n- Doc\n  - 更新西班牙语文档至 2.4.11 (by @Gonzalo2310 in #13522)\n- 其它\n  - 移除多余的构建脚本 (by @ziyoung)\n  - 修正文档超链接 (by @iamkun in #13753)\n  - 修正文档中不一致的大小写 (by @wonderjar)\n  - 增加钉钉群的二维码 (by @iamkun in #13957)\n  - .gitignore 增加 yarn 日志文件 (by @mimimi in #13922)\n  - 移除赞助商 多态 (by @island205 in #14156)\n  - Update readme qr code src (by @iamkun in #13960)\n  - 更新 CDN 链接，修正错别字 (by @ziyoung)\n\n### 2.4.11\n\n*2018-11-21*\n\n- 撤销 pr #13296，修复点击 Menu 外部导致 Submenu 收起的问题，#13478\n- 调整小屏幕（xs）媒体查询断点，#13468 （by @alekoshen712）\n\n### 2.4.10\n\n*2018-11-16*\n\n- 修复多次点击 Select 才显示下拉列表的问题，#13268\n- Form 禁用时不显示 Input 的 clear 图标，#13208\n- 调整 Select，Progress，Autocomplete，Tooltip，Collaspe，TimePicker 的样式，#13188 (by @porcelainHeart) #13210 #13266 #13257 #13290 #13347 (by @PanJiaChen)\n- Carousel 组件新增 `loop` 属性，#13217\n- Table 的 data 改变时，高亮行会继续保留，#13200\n- Table 的 header slot 可以接收参数，#13263\n- Table 的 `clearFilter` 方法支持参数，#13176\n- Table 单元格内没有内容时不再创建 Tooltip，#13152 (by @rongxingsun)\n- ColorPicker 面板的输入框内容可以正常显示了，#13278\n- 在拖拽时，ColorPicker 不再触发表单校验，#13299\n- InputNumber 新增 `select` 方法，#13286 (by @st-sloth)\n- Autocomplete 新增 `clear` 事件，#12171(by arthurdenner) #13326\n- 可以通过点击 Menu 外部来关闭 Menu，#13296\n- Form 的 `validateField` 方法可以接收参数，#13319\n- Cascader 新增 `visible-change` 事件，#13415\n- DatePicker 新增 range-separator slot， #13272 (by @milworm)\n- Tree 新增 `iconClass` 与 `currentNodeKey` 属性，#13337 #13197 (by @isnifer)\n- Progress 的 `status` 添加了 text #13198 (by @ali-master)\n- 修复 Tree 的 `defaultCheckedKeys` 导致显示的错误，#13349 (by @dive2Pro)\n\n### 2.4.9\n\n*2018-10-26*\n\n- Form 组件 clearValidate 方法参数支持字符串，#12990 （by @codinglobster）\n- Badge 新增 type 属性，#12991\n- 用户可以使用 scoped-slot 来自定义表头，#13012（by @ivanseidel）\n- 修复 IE 下 Select 输入框不能输入的问题，#13034（by @GaliMU）\n- Select 多选时，选项不换行，#12329 （by @akki-jat）\n- Select 下拉列表展开后，箭头图标也可以正确显示，#12353（by @firesh）\n- 修复 Select 的 size 属性不生效的问题，#13070\n- 多选时可以清除 Select 已选中的值，#13049（by @ZSkycat）\n- 修复最后一个 TabNav 不能删除的问题，#13039\n- 修复 TabNav 中 label 显示不正确的问题，#13178\n- Alert 新增 title slot，#13082（by @Kingwl）\n- 修复 Table 中的 tooltip 内容不正确的问题，#13159（by @elfman）\n- 优化 Upload 文件列表删除时的动画，#12987\n- 当 InputNumber 控制按钮不显示时，调整了边距，#13052\n\n### 2.4.8\n\n- Switch 聚焦时不显示轮廓，#12771\n- 修复 Dropdown 在 ButtonGroup 中样式问题，#12819 （by @bluejfox）\n- Dialog 新增 opened 事件，#12828\n- 修复 TabNav 显示顺序不正确的问题，#12846\n- 修复 Tabs 没有滑动到选中 tab 的问题，#12948\n- 修复 Tree 节点在拖拽时标识符不显示的问题，#12854\n- Form 的 validate 事件参数中包含了校验的信息，#12860 （by @YamenSharaf）\n- 修复 DatePicker 没有校验用户输入时间的合法性问题，#12898\n- 修复 Table 表头的 `render-header`属性不生效的问题，#12914\n\n### 2.4.7\n\n*2018-09-14*\n\n- 修复 DatePicker 未触发表单检验的问题，#12328，#12348\n- 修复 DatePicker 多选时报错的问题，#12347\n- 修复 DatePicker 选择时间时 spinner 位置不正确的问题，#12415 （by @rang-ali）\n- 修复 Datepicker 输入框自动填充的问题，#12521 （by @abdallanayer）\n- 修复 Cascader 中 Input 未高亮的问题，#12341\n- 修复 Tabpane 顺序不正确的问题，#12346\n- 修复 ColorPicker 取色光标位置不正确的问题，#12376 （by @cnwhy）\n- 调整 Submenu 的样式，#12457\n- 修复 Submenu 选中后没有高亮的问题，#12479\n- 修复 Cascader 选择值不正确的问题，#12508 （by @huangjinqiang）\n- 修复 Pagination 输入框值不正确的问题，#12525\n- 调整 Pagination 触发事件的顺序，#12530\n- 修复 Table 的 filter 不显示的问题，#12539\n- 修复 Tree 无法删除节点的问题，#12684\n- 修复 Select 在单选时 Input 高度变化的问题，#12719\n- 修复 Form 在嵌套时 label 显示不正确的问题，#12748\n- 新增 Input 的 autocomplete 属性，废弃 auto-complete 属性，#12514 （by @axetroy）\n- 新增 Form 的 slot-scope 展示表单校验信息，#12715 （by @YamenSharaf）\n\n### 2.4.6\n\n*2018-08-09*\n\n- 修复 Table 的 filter 初始值为空数组时不显示筛选图标的问题，#12165\n- 修复 Menu 在更改 `collapse` 时不保存菜单激活状态的问题，#12178 (by @elfman)\n- 修复 Cascader 未转义特殊字符的问题，#12248\n- 修复禁用的 RadioButton 在点击时显示 box-shadow 的问题，#12262\n- 修复 Select 初始值为 `undefined` 时方向键失效的问题，#12322\n- 修复 Select 多选时输入的关键字消失的问题，#12304\n- 修复 Select 多选时查询函数没有去抖的问题，#12181\n- 修复 Dialog 在全屏显示时宽度不正确的问题，#12203\n- 修复 Main 在 IE 下的显示不正确的问题，#12237\n- 修复 Input 触发两次表单校验的问题，#12260\n- 修复 Tree 在懒加载时添加节点导致节点消失的问题，#12256\n- 修复 Tree 节点在拖拽后无法删除的问题，#12279\n- 修复 Popover 在 InputNumber 聚焦时不显示的问题，#12284\n- 添加 Autocomplete 的 popper-append-to-body 属性，#12241\n- 添加 Pagination 的 `page-size` 属性 `sync` 修饰符的支持，#12281\n\n### 2.4.5\n\n*2018-07-26*\n\n- 修复 Table 设置 `class-name` 对 `expand` 列不生效的问题，#12006\n- 新增 Table 的 `toggleAllSelection` 方法，#12047\n- 修复 Input 包含 Select 时，suffix 插槽位置显示不正确的问题，#12108\n- 修复 Option 的 `line-height` 无法设置的问题，#12120\n- 修复初始值为 `null` 的 TimeSelect 在执行 `resetField` 后无法再赋值的问题，#12010\n- 修复 Tree 组件中不响应方向键以外 keydown 事件的问题，#12008\n- 修复 Tree 在懒加载情况下选中父节点的问题，#12106\n- Tree 的 `getCheckedNodes` 方法新增 `includeHalfChecked` 参数，#12014\n\n### 2.4.4\n\n*2018-07-13*\n\n- 修复重置表单后触发 Select 组件校验问题，#11837\n- 修复 Input 组件 `suffix` 与 `append` 共存时样式错乱问题，#11951\n- 修复可清空的只读 Input 仍会显示清空图标的问题，#11967\n- 修复 Tree 节点禁用时仍可以选中的问题，#11847\n- 修复 Tree `default-checked-keys` 属性不生效的问题，#11971\n- 修复 Tree 在过滤节点时下 `empty-text` 不显示的问题，#11971\n- 修复 Table 的 `empty-text` 过长时的位置样式问题，#11965\n- 修复 Table 的 `current-row-key` 设置为 `null` 时高亮行不清除的问题，#11866\n- 修复当 `filters` 为空数组时显示过滤器下拉列表的问题，#11864\n- 修复 Radio 的 label 不阻止事件冒泡的问题，#11912\n\n### 2.4.3\n\n*2018-07-03*\n\n- 修复当自定义 Tree 节点高度时，`allow-drop` 不能正常工作的问题，#11797\n- 现在 Form 的 `clearValidate` 方法支持传入参数，指定需要清空校验结果的 FormItem，#11821\n- 新增 MessageBox 的 `distinguishCancelAndClose` 属性，#11831\n\n### 2.4.2\n\n*2018-06-26*\n\n- 修复 Table 的 `class-name` 和 `label-class-name` 属性不支持动态更新的问题，#11626\n- 修复 Table 在 `highlight-current-row` 为 `false` 时点击行也会触发高亮的问题，#11691 #11563\n- 修复 ButtonGroup 中只有一个 `round` 或 `circle` 的 Button 时的样式错误，#11605\n- 修复在某些情况下 Pagination 的条目数选择器的样式错误，#11622\n- 修复 Menu 的 `collapse` 属性变化后无法使用 `open` 方法的问题，#11646\n- Tabs 的 `before-leave` 钩子添加了 `activeName` 和 `oldActiveName` 参数，#11713\n- 修复 Cascader 关闭后的聚焦问题，#11588\n- 修复 Cascader 在 `change-on-select` 状态下点击选项不关闭的问题，#11623\n- 现在通过代码改变 Select 的值后会触发表单校验，与 Input 行为一致，#11672\n\n### 2.4.1\n\n*2018-06-08*\n\n- 移除 Autocomplete 的重复类型声明，#11388\n- 修复嵌套在 Form 内的 Select 在 FireFox 浏览器中下拉箭头错位的问题，#11427\n- 修复 Select 的初始值为 `null` 时仍然显示清除图标的问题，#11460\n- 修复禁用的 Radio 在点击时显示 box-shadow 的问题，#11462\n- 新增 MessageBox 的 `iconClass` 属性，#11499\n- 新增 Tabs 的 `stretch` 属性，#11476\n- 修复 Tabs 开启 `lazy` 时渲染顺序异常的问题，#11461\n- 修复 Table 展开行时无法保留选中行样式的问题，#11464\n- 修复 Tabs 调用 `before-leave` 并返回 Promise 的时候，Tabs 会存在 focus 状态的问题，#11386\n- 修复 Popover 禁用状态下创建弹出框的问题，#11426\n- 修复 Tree 在懒加载状态下添加新节点造成无限循环的问题，#11430 （by @wangjingf）\n- 新增 Dialog 的 `closed` 事件，#11490\n\n### 2.4.0 Fullerene\n\n*2018-05-28*\n\n#### 新特性\n- 综合\n  - 使用原生 webpack 作为构建和打包工具，#11216\n  - 可以全局配置弹出层的初始 z-index，#11257\n- Autocomplete\n  - 新增 `hide-loading` 属性，#11260\n- Button\n  - 现在圆形按钮也支持通过 `size` 属性改变其尺寸了，#11275\n- InputNumber\n  - 新增 `precision` 属性，#11281\n- Tabs\n  - 新增 `before-leave` 钩子，#11259\n  - 新增 `lazy` 属性，#11167（by @Kingwl）\n- Table\n  - 新增 `sort` 方法，支持手动排序，#11311\n\n#### 修复\n- Input\n  - 修复使用中文输入法快速输入文字时会导致视图重新渲染的问题，#11235（by @STLighter）\n- Popover\n  - 修复当触发元素为 Radio 或 Checkbox 时控制台报错的问题，#11265\n- Breadcrumb\n  - 修复 `to` 属性不支持动态更新的问题，#11286\n- Upload\n  - 修复在 `beforeUpload` 方法返回的 Promise 中 resolve 一个 File 时控制台报错的问题，#11297（by @qusiba）\n- Tooltip\n  - 修复内容为空时箭头错位的问题，#11335\n- Autocomplete\n  - 修复在快速删除搜索内容后输入建议不正确的问题，#11323\n- ColorPicker\n  - 修复关闭选色器时触发 `active-change` 事件的问题，#11304\n- Table\n  - 修复筛选列表过长导致样式超出的问题，#11314\n  - 修复排序后导致无法正常显示选中行样式的问题，#11348\n- Checkbox\n  - 修复单个 Checkbox 不支持表单验证的问题，#11271\n- Radio\n  - 修复通过空格可以选中被禁用的 Radio 的问题，#11303\n- MessageBox\n  - 修复连续打开两个 MessageBox 时 `el-popup-parent--hidden` 无法移除的问题，#11371\n\n### 2.3.9\n\n*2018-05-18*\n\n- 修复当 TableColumn 的 `prop` 属性指定的字段在数据源中不存在时，鼠标移入该列单元格会报错的问题，#11137\n- 弹出类组件的 `lockScroll` 属性不再为父元素添加内联样式，而是添加相应类名，#11114\n- 修复 Progress 在 `status` 为 exception 时图标不显示的问题，#11172\n- 修复可搜索的 Cascader 在输入关键词后，选项的 `disabled` 属性失效的问题，#11185\n- 修复可展开的 Table 在展开某一行后更新数据源会造成该行无法收起的问题，#11186\n- Tree 的 `setCurrentKey` 方法支持传入 `null`，可取消当前高亮的节点，#11205\n\n### 2.3.8\n\n*2018-05-11*\n\n- 修复 `type` 为 dates 的 DatePicker 在选择非当前月的日期后，面板会跳转至当前月的问题，#10973\n- 修复可清空的只读 Input 仍会显示清空图标的问题，#10912\n- 修复范围选择的 DatePicker 在未改变值的情况下关闭下拉面板仍会触发 `change` 事件的问题，#11017\n- 修复 Select 在有分组选项时不能正确通过键盘导航的问题，#11058\n- 新增 Select 的 `prefix` 具名 slot，#11063\n- 新增 FormItem 的 `clearValidate` 方法，#11076\n- 新增 Tree 的 `checkOnClickNode` 属性，#11111\n\n### 2.3.7\n\n*2018-04-29*\n\n- 修复 Table 在由于筛选而使原有的滚动条消失后表头各列宽度未及时更新的问题，#10834\n- 修复可清空的 Input 在初始值为 `null` 时仍然显示清空图标的问题，#10912\n- 修复在通过代码改变 ColorPicker 的绑定值后错误地触发 `active-change` 事件的问题，#10903（by @zhangbobell）\n- 修复可搜索的 Select 在备选项均被禁用时，通过键盘导航会造成无限循环的问题，#10945\n\n### 2.3.6\n\n*2018-04-21*\n\n- 修复 Tree 的 `allow-drop` 回调在使用 `type` 参数后的错误行为，#10821\n- 修复可搜索的单选 Select 在 IE11 中无法输入搜索关键词的问题，#10822\n- 修复单选 Select 在使用鼠标选中某个选项后错误地触发 `blur` 事件的问题，#10822\n\n### 2.3.5\n\n*2018-04-20*\n\n- 修复 DatePicker 的 `type` 为 week 时面板错误高亮的问题，#10712\n- 修复 InputNumber 初始值为 0 时输入框为空的问题，#10714\n- 新增 Select 的 `automatic-dropdown` 属性，#10042（by @Seebiscuit）\n- 修复 `disabled` 的 Rate 仍能通过键盘左右键改变组件值的问题，#10726（by @Richard-Choooou）\n- 现在 DatePicker 的 `type` 属性可以接收 `'dates'`，用于选择多个日期，#10650（by @Mini256）\n- 新增 Pagination 的 `prev-click` 和 `next-click` 事件，#10755\n- 新增 Pagination 的 `pager-count` 属性，#10493（by @chongjohn716）\n- 新增 `type` 作为 Tree 的 `allow-drop` 属性回调的第三个参数，#10792\n- 改用 ResizeObserver 对元素的尺寸变化进行监测，#10779\n\n### 2.3.4\n\n*2018-04-12*\n\n- 删除 SubMenu 在 TypeScript 类型声明中重复的 `showTimeout` 属性，#10566（by @kimond）\n- 现在 Transfer 数据项的渲染支持通过 scoped slot 自定义，#10577\n- 修复点击 Pagination 禁用的上一页、下一页按钮仍会触发 `current-change` 事件的问题，#10628\n- 修复未绑定值的 Textarea 在 SSR 中会显示 `undefined` 的问题，#10630\n- 修复 `type` 为 border-card 的 Tabs 中被禁用标签项的样式，#10640\n- 新增 `$index` 作为 Table 的 `formatter` 属性回调的第四个参数，#10645\n- 修复 TypeScript 类型声明未导出 CheckboxButton 的问题，#10666\n\n### 2.3.3\n\n*2018-04-04*\n\n- 新增 Card 的 `shadow` 属性，#10418（by @YunYouJun）\n- 修复 Badge 在 `value` 属性为 `0` 时不显示上标的问题，#10470\n- 修复 Tree 节点拖拽相关的问题，#10474 #10494\n- 新增 Autocomplete 的 `placement` 属性，#10475\n- 现在 `default-time` 属性也可用于非范围选择的 DateTimePicker 了，#10321（by @RickMacTurk）\n- 修复 TabItem 在浏览器失焦和隐藏后出现蓝色边框的问题，#10503\n- 新增 SubMenu 的 `popper-append-to-body` 属性，#10515\n- 现在非链接的 BreadcrumbItem 在 hover 时不再具有视觉反馈，#10551\n- 调整 InputNumber `change` 事件的触发时机，使得在回调中能够取得最新的组件绑定值，#10553\n\n### 2.3.2\n\n*2018-03-29*\n\n- 修复 Autocomplete 报错的问题，#10442\n\n### 2.3.1\n\n*2018-03-29*\n\n- 修复 Input 的 `type` 属性未传递至原生 input 元素的问题，#10415\n- 新增 Select 的 `blur` 方法，#10416\n\n### 2.3.0 Diamond\n\n*2018-03-28*\n\n#### 新特性\n- Table\n  - 现在 TableColumn 的 `formatter` 属性可以是动态的，#10184（by @elfman）\n  - 新增 `select-on-indeterminate` 属性，#9924（by @syn-zeta）\n- Menu\n  - 新增 `collapse-transition` 属性，#8809（by @limichange）\n- Input\n  - 新增 `select` 方法，#10229\n  - 新增 `blur` 方法，#10356\n- ColorPicker\n  - 新增 `predefine` 属性，#10170（by @elfman）\n- Tree\n  - 新增 `draggable`、`allow-drop` 和 `allow-drag` 属性，以及 `node-drag-start`、`node-drag-enter`、`node-drag-leave`、`node-drag-over`、`node-drag-end` 和 `node-drop` 事件，#9251 #10372（by @elfman）\n- Form\n  - `validate` 方法新增第二个参数，包含未通过本次校验的表单项信息，#10279\n  - 新增 `validate` 事件，#10351\n- Progress\n  - 新增 `color` 属性，#10352（by @YunYouJun）\n- Button\n  - 新增 `circle` 属性，#10359（by @YunYouJun）\n\n#### 修复\n- Form\n  - 修复嵌套复合型 Input 时，FormItem 标签与输入框未对齐的问题，#10189\n- Menu\n  - 现在折叠状态的菜单项仅在传入 `title` slot 时才显示 Tooltip，#10193（by @PanJiaChen）\n- Pagination\n  - 修复 `current-change` 在未发生用户交互时错误触发的问题，#10247\n- DatePicker\n  - 现在时间日期选择器下拉面板中的值能够正确地从 `format` 属性中获取对应格式了，#10174（by @remizovvv）\n- Upload\n  - 现在拖拽上传会拦截不在 `accept` 属性范围内的文件，#10278\n\n### 2.2.2\n\n*2018-03-14*\n\n- 新增 Input 的 `clear` 事件，#9988（by @blackmiaool）\n- 现在 ColorPicker 的手动输入支持 `hsl`、`hsv` 和 `rgb` 格式了，#9991\n- 修复 DatePicker 在清除初始值时不触发 `change` 事件的问题，#9986\n- 现在 Rate 的图标类相关属性支持动态更新了，#10003\n- 修复含有固定列的 Table 在设置 `max-height` 属性后有时不能及时更新布局高度的问题，#10034\n- 现在 DatePicker 的范围选择支持先点选结束日期，再点选开始日期了，#8156（by @earlymeme）\n- 新增 Pagination 的 `disabled` 属性，#10006\n- 新增 Popover 的 `after-enter` 和 `after-leave` 事件，#10047\n- 修复重置表单后，用户第一次改变 Select 的值时不触发校验的问题，#10105\n- 修复 Table 的固定列在某些情况下宽度不正确的问题，#10130\n- 修复调用 MessageBox 未传入 `title` 时，打开的 MessageBox 会继承上一个实例的 `title` 属性的问题，#10126（by @Pochodaydayup）\n- 新增 Slider 的 `input-size` 属性，#10154\n- 新增 Transfer 的 `left-check-change` 和 `right-check-change` 事件，#10156\n\n### 2.2.1\n\n*2018-03-02*\n\n- 修复 Aside、Header 和 Footer 在某些布局中被压缩的问题，#9812\n- 修复设置了 `height` 属性的 Table 在服务端渲染时无法加载的问题，#9876\n- 修复可展开的 Table 在展开某一行后高度未重新计算的问题，#9848\n- 修复在 DateTimePicker 中手动输入日期后不能正确触发 `change` 事件的问题，#9913\n- 修复鼠标右键点击 Select 的输入框会展开选项的问题，#9894（by @openks）\n- 新增 Slider 的 `tooltip-class` 属性，#9957\n- 现在的 Select 在选中选项后仍然处于 focus 状态，#9857（by @Seebiscuit）\n- 新增 Transfer 的 `target-order` 属性，#9960\n\n### 2.2.0 Graphite\n\n*2018-02-12*\n\n#### 新特性\n- Menu\n  - SubMenu 新增 `popper-class` 和 `disabled` 属性，#9604 #9771\n  - 现在水平模式下的 Menu 支持多级 SubMenu 了，#9741\n- Tree\n  - 新增 `node-contextmenu` 事件，#9678\n  - 现在可以使用 scoped slot 自定义树节点的模板了，#9686\n  - 新增 `getNode`、`remove`、`append`、`insertBefore`、`insertAfter`、`getCheckedKeys`、`getHalfCheckedNodes`、`getHalfCheckedKeys` 方法和 `check` 事件，#9718 #9730\n- Transfer\n  - 新增 `clearQuery` 方法，#9753\n- Select\n  - 新增 `popper-append-to-body` 属性，#9782\n\n#### 修复\n- Table\n  - 修复点击可展开行的展开图标会触发 `row-click` 事件的问题，#9654\n  - 修复某些情况下通过拖动改变列宽后，布局没有同步更新的问题，#9668\n  - 修复合计行与固定列并存时的样式问题，#9667\n- Container\n  - 修复布局组件在 IE11 中无法自动填充可用空间的问题，#9655\n- Loading\n  - 修复在 `mounted` 中修改 `v-loading` 的值为 true 时不能正确显示 Loading 的问题，#9722\n- Switch\n  - 修复点击时会触发两次原生 click 事件的问题，#9760\n\n### 2.1.0 Charcoal\n\n*2018-01-31*\n\n#### 新特性\n- Cascader\n  - 新增 `focus` 和 `blur` 事件，#9184（by @viewweiwu）\n- Table\n  - `filter-method` 方法加入第三个参数 `column`，#9196（by @liyanlong）\n- DatePicker\n  - 新增 `prefix-icon` 和 `clear-icon` 属性，#9237（by @AdamSGit）\n  - 新增 `default-time` 属性，#9094（by @nighca）\n  - `value-format` 属性增加对 `timestamp` 的支持，#9319（by @wacky6）\n- InputNumber\n  - 组件绑定变量的值支持 `undefined`，#9361\n- Select\n  - 新增 `auto-complete` 属性，#9388\n- Form\n  - 新增 `disabled` 属性，#9529\n  - 新增 `validateOnRuleChange` 属性，#8141\n- Notificaition\n  - 新增 `closeAll` 方法，#9514\n\n#### 修复\n- InputNumber\n  - 修复初始输入小数点时被重置的问题，#9116\n- Dropdown\n  - 修复当页面仅有水平滚动条时，某些浏览器下拉菜单定位错误的问题，#9138（by @banzhuanmei）\n- Table\n  - 修复带有固定列的 Table 在列数据变化后固定列的个数计算错误的问题，#9188（by @kolesoffac）\n  - 修复多级表头最后一列的边框不能正确显示的问题，#9326\n  - 修复在 Safari 浏览器中表头错位的问题，#9327\n  - 修复带有展开行的表格在展开某一行后，当表格数据更新但 `row-key` 值不变时，该行会自动收起的问题，#9462\n  - 修复在一些情况下不必要的多次渲染问题，#9426\n  - 修复动态改变 TableColumn 的 `width` 属性时，其宽度计算错误的问题，#9426\n- Loading\n  - 修复某些情况下 Loading 不能被正确隐藏的问题，#9313\n- DatePicker\n  - 修复 `focus` 方法在范围选择时无效的问题，#9437\n  - 修复当目前时刻处于不可选择的范围内时，点击面板上的「此刻」按钮仍能选中目前时刻的问题，#9470（by @wacky6）\n  - 修复当在月选择面板中选中天数较少的月份时，日期面板呈现下一个月的问题，#9577（by @wacky6）\n- Steps\n  - 修复在 IE 11 中的样式问题，#9454\n\n#### 非兼容性更新\n- Menu\n  - `collapse` 状态下的弹出菜单现在会插入至 body 元素，修复其位于 Aside 内时弹出菜单不可见的问题，#9263\n- Table\n  - 勾选多选表格的 checkbox 时不再同时触发 `row-click` 事件，#9467\n- Loading\n  - 非全屏 Loading 遮罩层的 `z-index` 修改为 2000；全屏 Loading 遮罩层的 `z-index` 值会随页面上的弹出组件动态更新，#9522\n- Dropdown\n  - `show-timeout` 和 `hide-timeout` 属性现在仅在 trigger 为 `hover` 时生效，#9573\n\n### 2.0.11\n\n*2018-01-08*\n\n- 修复 Input 的 `prepend` 或 `append` slot 中 Select 的边框颜色错误，#9089\n- 修复 Select 的 `remove-tag` 事件参数与文档不符的问题，#9090\n- 新增 SubMenu 的 `show-timeout` 和 `hide-timeout` 属性，#8934（by @HugoLew）\n- 修复按需引入 Table 时 `show-overflow-tooltip` 的 Tooltip 样式丢失的问题，#9130\n- 修复 Table 在执行 `clearSort` 后点击对应列的排序图标无法正常排序的问题，#9100（by @zEmily）\n- 捷克语的 i18n 配置文件由 `cz` 重命名为 `cs-CZ`，#9164\n\n### 2.0.10\n\n*2017-12-29*\n\n- 修复了 Table 在固定列和合计行并存时的高度计算错误的问题，#9026\n- 修复了 Table 样式 SCSS 文件错误编译的问题，#9028\n- 现在 DatePicker 的 `change` 事件只会在 `value` 真正改变的时候触发，#9029（by @remizovvv）\n- 新增 Input 的 `tabindex` 属性，#9041（by @dicklwm）\n\n### 2.0.9🎄\n\n*2017-12-24*\n\n- 新增 Upload 的 `before-remove` 钩子方法，#8788（by @firesh）\n- 修复 FormItem 的 `error` 属性初始值无效的问题，#8840\n- 通过指令调用的 Loading 现在支持以 `element-loading-custom-class` 属性的方式设置自定义类名，#8826（by @earlymeme）\n- 修复 CarouselItem 为异步获取时被隐藏的问题，#8921\n- 新增 Tree 的 `renderAfterExpand` 属性，#8972\n\n### 2.0.8\n\n*2017-12-12*\n\n- 新增西班牙语文档\n- 修复 `show-timeout` 对点击触发的 Dropdown 无效的问题，#8734（by @presidenten）\n- 修复 Form 对于 `trigger` 为 blur 的校验规则触发时机有误的问题，#8776\n- 修复 DatePicker 在范围选择时 blur 事件触发时机有误的问题，#8784\n- TimePicker 的 `format` 新增对 AM/PM 的支持，#8620（by @firesh）\n\n### 2.0.7\n\n*2017-11-29*\n\n- 修复禁用文字按钮的样式问题，#8570\n\n### 2.0.6\n\n*2017-11-29*\n\n- 修复 Table 排序图标的样式问题，#8405\n- 修复 `trigger` 为 manual 的 Popover 的触发问题，#8467\n- 新增 Autocomplete 的 `prefix-icon` 和 `suffix-icon` 属性，#8446（by @liyanlong）\n- 新增 Cascader 的 `separator` 属性，#8501\n- 新增 Input 的 `clearable` 属性，#8509（by @lbogdan）\n- 新增 Pagination 的 `background` 属性，#8553\n\n### 2.0.5\n\n*2017-11-17*\n\n- 修复上个版本引入的 Popover、Tree、Breadcrumb、Cascader 的 bug，#8188 #8217 #8283\n- 修复 clickoutside 指令的内存泄露问题，#8168 #8225（by @badpunman @STLighter）\n- 修复默认尺寸的多选 Select 在清空选项后输入框高度不随之更新的问题，#8317（by @luciy）\n- 新增 Select 的 `collapse-tags` 属性，用于在多选时以文字代替 Tag，避免组件高度的增大，#8190\n- 修复被隐藏的 Table 会造成 CPU 占用持续增加的问题，#8351\n- 开放 Table 的 `doLayout` 方法，用于重新计算 Table 的布局，#8351\n\n### 2.0.4\n\n*2017-11-10*\n\n- 提升 Cascader、Dropdown、Message、Notification、Popover、Tooltip、Tree 的可访问性\n- 修复当视口变窄时 Container 无法同步更新其宽度的问题，#8042\n- 修复 Tree 的 `updateKeyChildren` 在删除子节点时的行为错误，#8100\n- 修复带有边框的 CheckboxButton 在 Form 中高度错误的问题，#8100\n- 修复 Menu 在解析自定义颜色时的错误，#8153（by @zhouyixiang）\n\n### 2.0.3\n\n*2017-11-03*\n\n- 修复范围选择的 DatePicker `editable` 和 `readonly` 属性无法正常工作的问题，#7922\n- 修复嵌套的 Tabs 的样式错误，#7941\n- 修复纵向 Steps 中最后一个 Step 的样式错误，#7980\n- 修复 Pagination 的 `current-change` 事件触发时机错误的问题，#7995\n- 修复由于 Menu 使用了未注册的 Tooltip 造成其在按需引入时报错的问题，#7995\n\n### 2.0.2\n\n*2017-10-31*\n\n- 在 InputNumber 的加减按钮上单击鼠标右键不再触发值的改变，#7817\n- Form 的 `validate` 方法现在能够正确地在异步校验完成后执行回调了，#7774（by @Allenice）\n- 修复 DatePicker 的范围选择在内核为 Chromium 53-57 的浏览器中无法使用的问题，#7838\n- 修复 `list-type` 为 picture-card 的 Upload 预览和删除图标丢失的问题，#7857\n- 新增 TableColumn 的 `sort-by` 属性，#7828（by @wangfengming）\n- 修复周模式下的 DatePicker 在选择某年第一周可能会显示为前一年第一周的问题，#7860（by @hh23485）\n- 修复垂直模式的 Steps 中图标宽度的样式错误，#7891\n- 增大了 Tree 中展开箭头的点击热区，#7891\n\n### 2.0.1\n\n*2017-10-28*\n\n- 修复 RadioButton 和 CheckboxButton 的样式问题，#7793\n- 修复 TimePicker 在某些情况下无法滚动的问题，#7811\n- 修复部分组件在按需引入时样式不完整的问题，#7811\n\n### 2.0.0 Carbon\n\n*2017-10-27*\n\n#### 新特性\n- 综合\n  - 新增 `theme-chalk` 主题\n  - 增强以下组件的可访问性：Alert、AutoComplete、Breadcrumb、Button、Checkbox、Collapse、Input、InputNumber、Menu、Progress、Radio、Rate、Slider、Switch 和 Upload\n  - 新增布局组件 Container、Header、Aside、Main 和 Footer\n  - 新增 TypeScript 类型声明\n  - 重绘了全部图标，并新增了部分图标\n  - 新增了一系列基于断点的工具类，用于当视口尺寸满足一定条件时隐藏元素\n  - 新增全局配置组件尺寸的功能。在引入 Element 时，配置 `size` 字段可以改变所有组件的默认尺寸\n- Button\n  - 新增 `round` 属性，用于圆角按钮 #6643\n- TimeSelect\n  - 可以用 `Up`、`Down` 导航，用 `Enter` 选中时间 #6023\n- TimePicker\n  - 可以用方向键导航，用 `Enter` 选中时间 #6050\n  - 新增 `start-placeholder` 和 `end-placeholder`，用于设置范围选择时两个输入框的占位符 #7169\n  - 新增 `arrow-control` 属性，提供另一种交互形式，#7438\n- Tree\n  - 子节点在首次被展开之前不进行渲染 #6257\n  - 新增 `check-descendants` 属性，设置 `lazy` 模式下勾选节点时，是否完全展开整个子树 #6235\n- Tag\n  - 新增 `size` 属性 #7203\n- Datepicker\n  - type 为 `datetimerange` 时可以使用 `timeFormat` 格式化时间选择器 #6052\n  - 新增 `start-placeholder` 和 `end-placeholder`，用于设置范围选择时两个输入框的占位符 #7169\n  - 新增 `value-format` 属性，支持对绑定值的格式进行自定义，#7367\n  - 新增 `unlink-panels` 属性，用于在选择日期范围时取消两个日期面板之间的联动\n- MessageBox\n  - 新增 `closeOnHashChange` 属性 #6043\n  - 新增 `center` 属性，提供居中布局 #7029\n  - 新增 `roundButton` 属性，使得内部按钮为圆角按钮 #7029\n  - 新增 `dangerouslyUseHTMLString` 属性，使得 `message` 支持传入 HTML 字符串<sup>*</sup> #6043\n  - 新增 `inputType` 属性，用户指定内部输入框的类型，#7651\n- Dialog\n  - 新增 `width`、`fullscreen`、`append-to-body` 属性，支持嵌套使用\n  - 新增 `center` 属性，提供居中布局 #7042\n  - 新增 `focus-after-closed`、`focus-after-open`属性，支持无障碍访问 #6511\n- ColorPicker\n  - 增加手动输入色值的支持 #6167\n  - 新增 `size` 属性，用于控制组件的大小 #7026\n  - 新增 `disabled` 属性，用于禁用组件 #7026\n  - 新增 `popper-class` 属性，#7351\n- Message\n  - 图标部分使用 icon 代替图片，从而支持通过 CSS 修改图标背景色 #6207\n  - 新增 `dangerouslyUseHTMLString` 属性，使得 `message` 属性支持传入 HTML 字符串<sup>*</sup> #6207\n  - 新增 `center` 属性，提供居中布局 #6875\n- Notification\n  - 新增 `position` 属性，用于配置 Notification 出现的位置 #6231\n  - 新增 `dangerouslyUseHTMLString` 属性，使得 `message` 属性支持传入 HTML 字符串<sup>*</sup> #6231\n  - 新增 `showClose` 属性，用于隐藏关闭按钮 #6402\n- Rate\n  - 新增 `show-score` 属性，控制是否在右侧显示当前分数 #6295\n- Tabs\n  - 新增 `tab-position` 属性，控制选项面板内容显示的上、下、左、右四个方向 #6096\n- Radio\n  - 增加 `border` 属性和 `size` 属性 #6690\n- Checkbox\n  - 增加 `border` 属性和 `size` 属性 #6690\n- Alert\n  - 新增 `center` 属性，提供居中布局 #6876\n- Menu\n  - 新增 `background-color`、`text-color` 和 `active-text-color` 属性，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色 #7064\n  - 新增 `open` 和 `close` 方法，支持手动打开和关闭 SubMenu，#7412\n- Form\n  - 新增 `inline-message` 属性，设置后校验信息会以行内样式显示 #7032\n  - 新增 `status-icon` 属性，用于在输入框中显示校验结果反馈图标 #7032\n  - Form 和 FormItem 新增 `size` 属性，用于控制表单内组件的尺寸，#7428\n  - `validate` 方法在不传入 callback 的情况下返回 promise，#7405\n  - 新增 `clearValidate` 方法，用于清空所有表单项的验证信息，#7623\n- Input\n  - 新增 `suffix`、`prefix` 的 slot，以及 `suffixIcon`、`prefixIcon` 属性，用于给输入框内部增加前置和后置内容 #7032\n- Breadcrumb\n  - 新增 `separator-class` 属性，可使用图标作为分隔符 #7203\n- Steps\n  - 新增 `simple` 属性，用于开启简洁风格的步骤条 #7274\n- Pagination\n  - 新增 `prev-text` 和 `next-text` 属性，用于自定义上一页和下一页的文本 #7005\n- Loading\n  - 配置对象新增 `spinner` 和 `background` 字段，支持自定义加载图标和背景色，#7390\n- Autocomplete\n  - 新增 `debounce` 属性，#7413\n- Upload\n  - 新增 `limit` 和 `on-exceed` 属性，支持对上传文件的个数进行限制，#7405\n- DateTimePicker\n  - 新增 `time-arrow-control` 属性，用于开启时间选择器的 `arrow-control`，#7438\n- Layout\n  - 新增断点 `xl`，适用于宽度大于 1920px 的视口\n- Table\n  - 新增 `span-method` 属性，用于合并行或列\n  - 新增 `clearSort` 方法，用于清空排序状态\n  - 新增 `clearFilter` 方法，用于清空过滤状态\n  - 对于可展开行，当该行展开时会获得一个 `.expanded` 类名，方便自定义样式\n  - 新增 `size` 属性，用于控制表格尺寸\n  - 新增 `toggleRowExpansion` 方法，用于手动展开或关闭行\n  - 新增 `cell-class-name` 属性，用于指定单元格的类名\n  - 新增 `cell-style` 属性，用于指定单元格的样式\n  - 新增 `header-row-class-name` 属性，用于指定表头行的类名\n  - 新增 `header-row-style` 属性，用于指定表头行的样式\n  - 新增 `header-cell-class-name` 属性，用于指定表头单元格的类名\n  - 新增 `header-cell-style` 属性，用于指定表头单元格的样式\n  - TableColumn 的 `prop` 属性支持 `object[key]` 格式\n  - TableColumn 新增 `index` 属性，用于自定义索引值\n- Select\n  - 新增 `reserve-keyword` 属性，用于在选择某个选项后保留当前的搜索关键词\n\n#### 修复\n- DatePicker\n  - 选择周数时，`v-model` 结果返回该周第二天的问题 #6038\n  - 在 `daterange` 类型中，第一次的输入会被清空的问题 #6021\n- DateTimePicker\n  - 和 TimePicker 相互影响的问题 #6090\n  - 选择时间小时和秒可超出限制的问题 #6076\n- TimePicker\n  - 失去焦点时无法正确改变 `v-model` 值的问题 #6023\n- Dialog\n  - 当含有下拉框时，下拉框的打开和关闭会造成文字虚晃的问题 #6088\n- Select\n  - 提升性能，修复组件销毁时可能导致 Vue dev-tool 卡死的问题 #6151\n- Table\n  - 修复 Table 在父元素从 `display: none` 变成其他状态时会隐藏的问题\n  - 修复 Table 在父元素为 `display: flex` 时可能出现的宽度逐渐变大的问题\n  - 修复 `append` 具名 slot 和固定列并存时，动态获取表格数据会导致固定列消失的问题\n  - 修复 `expand-row-keys` 属性初始化无效的问题\n  - 修复 `data` 改变时过滤条件失效的问题\n  - 修复多级表头时固定列隐藏情况计算错误的问题\n  - 修复 `max-height` 变更后无法恢复的问题\n  - 修复一些样式上的计算错误\n\n#### 非兼容性更新\n- 综合\n  - 移除 `theme-default`\n  - 最低兼容 Vue 2.5.2 和 IE 10\n  - 表单组件的 `change` 事件和 Pagination 的 `current-change` 事件现在仅响应用户交互\n  - Button 和表单组件的 `size` 属性现在可接受 `medium`、`small` 和 `mini`\n  - 为了方便使用第三方图标，Button 的 `icon` 属性、Input 的 `prefix-icon` 和 `suffix-icon` 属性、Steps 的 `icon` 属性现在需要传入完整的图标类名\n- Dialog\n  - 移除 `size` 属性。现在 Dialog 的尺寸由 `width` 和 `fullscreen` 控制\n  - 移除通过 `v-model` 控制 Dialog 显示和隐藏的功能\n- Rate\n  - `text-template` 属性更名为 `score-template`\n- Dropdown\n  - `menu-align` 属性变更为 `placement`，增加更多方位属性\n- Transfer\n  - `footer-format` 属性更名为 `format`\n- Switch\n  - 由于 `on-*` 属性在 JSX 中会被识别为事件，导致 Switch 所有 `on-*` 属性在 JSX 中无法正常工作，所以 `on-*` 属性更名为 `active-*`，对应地，`off-*` 属性更名为 `inactive-*`。受到影响的属性有：`on-icon-class`、`off-icon-class`、`on-text`、`off-text`、`on-color`、`off-color`、`on-value`、`off-value`\n  - `active-text` 和 `inactive-text` 属性不再有默认值\n- Tag\n  - `type` 属性现在支持 `success`、`info`、`warning` 和 `danger` 四个值\n- Menu\n  - 移除 `theme` 属性。现在通过 `background-color`、`text-color` 和 `active-text-color` 属性进行颜色的自定义\n- Input\n  - 移除 `icon` 属性。现在通过 `suffix-icon` 属性或者 `suffix` 具名 slot 来加入尾部图标\n  - 移除 `on-icon-click` 属性和 `click` 事件。现在如果需要为输入框中的图标添加点击事件，请以具名 slot 的方式添加图标\n  - `change` 事件现在仅在输入框失去焦点或用户按下回车时触发，与原生 input 元素一致。如果需要实时响应用户的输入，可以使用 `input` 事件\n- Autocomplete\n  - 移除 `custom-item` 属性。现在通过 `scoped slot` 自定义输入建议列表项的内容\n  - 移除 `props` 属性，现在使用 `value-key` 属性指定输入建议对象中用于显示的键名\n- Steps\n  - 移除 `center` 属性\n  - 现在步骤条将默认充满父容器\n- DatePicker\n  - `change` 事件参数现在为组件的绑定值，格式由 `value-format` 控制\n- Table\n  - 移除通过 `inline-template` 自定义列模板的功能\n  - `sort-method` 现在和 `Array.sort` 保持一致的逻辑，要求返回一个数字\n  - 将 `append` slot 移至 `tbody` 元素以外，以保证其只被渲染一次\n  - `expand` 事件更名为 `expand-change`，以保证 API 的命名一致性\n  - `row-class-name` 和 `row-style` 的函数参数改为对象，以保证 API 的一致性\n\n##\n<i><sup>*</sup> 在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。因此请在 `dangerouslyUseHTMLString` 打开的情况下，确保 `message` 的内容是可信的，**永远不要**将用户提交的内容赋值给 `message` 属性。</i>\n"
  },
  {
    "path": "FAQ.md",
    "content": "## 常见问题\n\n<details>\n  <summary>给组件绑定的事件为什么无法触发？</summary>\n  \n  在 Vue 2.0 中，为**自定义**组件绑定**原生**事件必须使用 `.native` 修饰符：\n  ```html\n  <my-component @click.native=\"handleClick\">Click Me</my-component>\n  ```\n  \n  从易用性的角度出发，我们对 `Button` 组件进行了处理，使它可以监听 `click` 事件：\n  ```html\n  <el-button @click=\"handleButtonClick\">Click Me</el-button>\n  ```\n  \n  但是对于其他组件，还是需要添加 `.native` 修饰符。\n</details>\n\n<details>\n  <summary>如何在 Table 组件的每一行添加操作该行数据的按钮？</summary>\n  \n  使用 [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots) 即可：\n  ```html\n  <el-table-column label=\"操作\">\n    <template slot-scope=\"props\">\n      <el-button @click.native=\"showDetail(props.row)\">查看详情</el-button>\n    </template>\n  </el-table-column>\n  ```\n  参数 `row` 即为对应行的数据。\n</details>\n\n<details>\n  <summary>Tree 组件的 `render-content` 和 Table 组件的 `render-header` 怎么用？</summary>\n  \n  请阅读 Vue 文档 [Render Function](http://vuejs.org/v2/guide/render-function.html) 的相关内容。注意，使用 JSX 来写 Render Function 的话，需要安装 `babel-plugin-transform-vue-jsx`，并参照其[文档](https://github.com/vuejs/babel-plugin-transform-vue-jsx)进行配置。\n</details>\n\n<details>\n  <summary>所有组件的任意属性都支持 `.sync` 修饰符吗？</summary>\n  \n  不是。对于支持 `.sync` 修饰符的属性，我们会在文档的 API 表格中注明。更多 `.sync` 的用法请查看 [Vue 文档](https://vuejs.org/v2/guide/components.html#sync-Modifier)。\n</details>\n\n<details>\n  <summary>你们的文档怎么偷偷更新了？</summary>\n  \n  我们只会在 Element 发布新版本时同步更新文档，以体现最新的变化。详细的更新内容可以查看 [changelog](https://github.com/ElemeFE/element/blob/master/CHANGELOG.zh-CN.md)。\n</details>\n\n<details>\n  <summary>在项目中引入 Element，但是 CSS 报错/字体文件报错/组件没有样式是什么原因？</summary>\n  \n  请参考我们提供的 [starter kit](https://github.com/ElementUI/element-starter)，在 webpack 的 loaders 中正确配置 file-loader、css-loader 和 style-loader。此外，我们还提供了基于 [cooking](https://github.com/ElementUI/element-cooking-starter) 和 [laravel](https://github.com/ElementUI/element-in-laravel-starter) 的项目模板。\n</details>\n\n<details>\n  <summary>将 Element 克隆至本地，运行时为何会报错/跑不起来？</summary>\n  \n  首先，确保克隆的是 master 分支的最新代码，并且文件完整。其次，确保本地的 node 版本在 4.0 以上，npm 版本在 3.0 以上。最后，可以启动开发环境：\n  \n  ```bash\n  npm run dev\n  ```\n  \n  或是直接打包：\n  \n  ```bash\n  npm run dist\n  ```\n</details>\n\n## FAQ\n\n<details>\n  <summary>Why are my event listeners not working?</summary>\n  \n  In Vue 2.0, adding **native** event handlers in **custom** components requires a `.native` modifier:\n  ```html\n  <my-component @click.native=\"handleClick\">Click Me</my-component>\n  ```\n  \n  For the sake of usability, we processed `Button` so it can listen to `click` events:\n  ```html\n  <el-button @click=\"handleButtonClick\">Click Me</el-button>\n  ```\n  \n  For other components, the `.native` modifier is still mandatory.\n</details>\n\n<details>\n  <summary>How do I add buttons in each row of Table to operate data of that row?</summary>\n  \n  Just use [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots):\n  ```html\n  <el-table-column label=\"Operations\">\n    <template slot-scope=\"props\">\n      <el-button @click.native=\"showDetail(props.row)\">Details</el-button>\n    </template>\n  </el-table-column>\n  ```\n  The parameter `row` is the data object of corresponding row.\n</details>\n\n<details>\n  <summary>How do `render-content` of Tree and `render-header` of Table work?</summary>\n  \n  Please refer to [Render Function](http://vuejs.org/v2/guide/render-function.html) in Vue's documentation. In addition, if you are writing render functions with JSX, `babel-plugin-transform-vue-jsx` is required. See [here](https://github.com/vuejs/babel-plugin-transform-vue-jsx) for its configurations.\n</details>\n\n<details>\n  <summary>Can I use `.sync` modifier on every attribute?</summary>\n  \n  No, only a few attributes supports the `.sync` modifier, and we have explicitly marked them on the documentation's API table. For more information about `.sync`, please refer to [Vue documentation](https://vuejs.org/v2/guide/components.html#sync-Modifier).\n</details>\n\n<details>\n  <summary>When do you update documentations of Element?</summary>\n  \n  We update documentations only when a new version of Element is published so that it reflects all the changes introduced in that version. Updated changed can be found in the [changelog](https://github.com/ElemeFE/element/blob/master/CHANGELOG.en-US.md)。\n</details>\n\n<details>\n  <summary>I imported Element in my project, but why does it report CSS error/font file error/components have no style?</summary>\n  \n  Please refer to our [starter kit](https://github.com/ElementUI/element-starter) and correctly configure file-loader, css-loader and style-loader in webpack config file. Besides, we also provide templated based on [cooking](https://github.com/ElementUI/element-cooking-starter) and [laravel](https://github.com/ElementUI/element-in-laravel-starter).\n</details>\n\n<details>\n  <summary>I cloned Element's repo, but failed to run it. How do I solve it?</summary>\n  \n  First, please make sure to clone the latest code in master branch and cloned files are intact. Then, note that the version of Nodejs should be 4.0+ and npm 3.0+. Finally, activate development:\n  \n  ```bash\n  npm run dev\n  ```\n  \n  or build it:\n  \n  ```bash\n  npm run dist\n  ```\n</details>\n\n## Preguntas más frecuentes\n\n<details>\n  <summary>¿Porque mis receptores de eventos no funcionan?</summary>\n  \n  En Vue 2.0, agregando **nativos** receptores de evento **a medida** componentes requiere el modificador `.native`:\n  ```\n  html\n  <mi-componente @click.native=\"handleClick\">Haga Clic Aquí</mi-componente>\n  ```\n  \n  Para conveniencia, hemos ya procesado eventos para el componente `Button` para que el interfaz sea consistente con `clic` eventos de otros componentes:\n  \n  ```html\n  <el-button @click=\"handleButtonClick\">Haga Clic Aquí</el-button>\n  ```\n  \n  Para otros componentes el uso del modificador `.native` sigue siendo obligatorio.\n</details>\n\n<details>\n  <summary>¿Como agrego botones en cada linea de una tabla para que operen en los datos de esa linea?</summary>\n  \n  Simplemente agregue [“Scoped slot”](https://vuejs.org/v2/guide/components.html#Scoped-Slots):\n  ```html\n  <el-table-column label=\"Operaciones\">\n    <template slot-scope=\"props\">\n      <el-button @click.native=\"verDetalles(props.row)\">Detalles</el-button>\n    </template>\n  </el-table-column>\n  ```\n  El parámetro `row` contiene los datos de la linea correspondiente de la tabla.\n</details>\n\n<details>\n  <summary>¿Como funcionan `render-content` de `Tree` y `render-header` de `Table`?</summary>\n  \n  Por favor refiérase a [Función de representación](http://vuejs.org/v2/guide/render-function.html) en la documentación de `Vue`. Adicionalmente, sí usted está escribiendo funciones de representar con JSX, se requiere el componente `babel-plugin-transform-vue-jsx`. Más información [aquí](https://github.com/vuejs/babel-plugin-transform-vue-jsx) para su uso y configuración.\n</details>\n\n<details>\n  <summary>¿Puedo usar el modificador `.sync` con cada atributo?</summary>\n  \n  No, solamente un grupo pequeño de atributos apoyan el modificador `.sync`, y están anotados claramente en la documentación del IPA. Para información adicional sobre `.sync`, por favor refiérase a [documentación de Vue](https://vuejs.org/v2/guide/components.html#sync-Modifier).\n</details>\n\n<details>\n  <summary>¿Cuando añaden a la documentación de `Element`?</summary>\n  \n  Añadamos la documentación con cada versión nueva de `Element` y los cambios reflejan los cambios del software de esa versión. Los cambios actuales y históricos se encuentran [aquí](https://github.com/ElemeFE/element/blob/master/CHANGELOG.en-US.md).\n</details>\n\n<details>\n  <summary>¿Importé `Element` a mi proyecto pero tengo errores con `CSS` y/o fuentes y mis componentes no tienen ningún estilo?</summary>\n  \n  Refiérase a [nuestro ‘kit’ de inicio](https://github.com/ElementUI/element-starter) y configure correctamente `file-loader`, `css-loader` y `style-loader` en el archivo `webpack config`. Además, proveemos un ejemplar para [cooking](https://github.com/ElementUI/element-cooking-starter) y para [laravel](https://github.com/ElementUI/element-in-laravel-starter).\n</details>\n\n<details>\n  <summary>Hice un clon del repositorio de `Element` pero no arranca. ¿Como lo resuelvo?</summary>\n  \n  Primero, pro favor, asegúrese de usar la versión más corriente en la rama  `master` y que los archivos están en orden. Después, revise sí la versión de `Nodejs` es 4.0+ y `npm` debe ser 3.0+. Finalmente active el modo desarrollo:\n  \n  ```bash\n  npm run dev\n  ```\n  \n  O arme su aplicación así:\n  \n  ```bash\n  npm run dist\n  ```\n</details>\n"
  },
  {
    "path": "LICENSE",
    "content": "The MIT License (MIT)\n\nCopyright (c) 2016-present ElemeFE\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "Makefile",
    "content": ".PHONY: dist test\ndefault: help\n\n# build all theme\nbuild-theme:\n\tnpm run build:theme\n\ninstall:\n\tnpm install\n\ninstall-cn:\n\tnpm install --registry=http://registry.npm.taobao.org\n\ndev:\n\tnpm run dev\n\nplay:\n\tnpm run dev:play\n\nnew:\n\tnode build/bin/new.js $(filter-out $@,$(MAKECMDGOALS))\n\nnew-lang:\n\tnode build/bin/new-lang.js $(filter-out $@,$(MAKECMDGOALS))\n\ndist: install\n\tnpm run dist\n\ndeploy:\n\t@npm run deploy\n\npub:\n\tnpm run pub\n\ntest:\n\tnpm run test:watch\n\nhelp:\n\t@echo \"   \\033[35mmake\\033[0m \\033[1m命令使用说明\\033[0m\"\n\t@echo \"   \\033[35mmake install\\033[0m\\t\\033[0m\\t\\033[0m\\t\\033[0m\\t---  安装依赖\"\n\t@echo \"   \\033[35mmake new <component-name> [中文名]\\033[0m\\t---  创建新组件 package. 例如 'make new button 按钮'\"\n\t@echo \"   \\033[35mmake dev\\033[0m\\t\\033[0m\\t\\033[0m\\t\\033[0m\\t---  开发模式\"\n\t@echo \"   \\033[35mmake dist\\033[0m\\t\\033[0m\\t\\033[0m\\t\\033[0m\\t---  编译项目，生成目标文件\"\n\t@echo \"   \\033[35mmake deploy\\033[0m\\t\\033[0m\\t\\033[0m\\t\\033[0m\\t---  部署 demo\"\n\t@echo \"   \\033[35mmake pub\\033[0m\\t\\033[0m\\t\\033[0m\\t\\033[0m\\t---  发布到 npm 上\"\n\t@echo \"   \\033[35mmake new-lang <lang>\\033[0m\\t\\033[0m\\t\\033[0m\\t---  为网站添加新语言. 例如 'make new-lang fr'\"\n"
  },
  {
    "path": "README.md",
    "content": "<p align=\"center\">\n  <img src=\"https://cdn.rawgit.com/ElemeFE/element/dev/element_logo.svg\">\n</p>\n\n<p align=\"center\">\n  <a href=\"https://travis-ci.org/ElemeFE/element\">\n    <img src=\"https://travis-ci.org/ElemeFE/element.svg?branch=master\">\n  </a>\n  <a href=\"https://coveralls.io/github/ElemeFE/element?branch=master\">\n    <img src=\"https://coveralls.io/repos/github/ElemeFE/element/badge.svg?branch=master\">\n  </a>\n  <a href=\"https://cdnjs.com/libraries/element-ui\">\n    <img src=\"https://img.shields.io/cdnjs/v/element-ui.svg\">\n  </a>\n  <a href=\"https://www.npmjs.org/package/element-ui\">\n    <img src=\"https://img.shields.io/npm/v/element-ui.svg\">\n  </a>\n  <a href=\"https://npmcharts.com/compare/element-ui?minimal=true\">\n    <img src=\"http://img.shields.io/npm/dm/element-ui.svg\">\n  </a>\n  <br>\n  <a href=\"http://img.badgesize.io/https://unpkg.com/element-ui/lib/index.js?compression=gzip&label=gzip%20size:%20JS\">\n    <img src=\"http://img.badgesize.io/https://unpkg.com/element-ui/lib/index.js?compression=gzip&label=gzip%20size:%20JS\">\n  </a>\n  <a href=\"http://img.badgesize.io/https://unpkg.com/element-ui/lib/theme-chalk/index.css?compression=gzip&label=gzip%20size:%20CSS\">\n    <img src=\"http://img.badgesize.io/https://unpkg.com/element-ui/lib/theme-chalk/index.css?compression=gzip&label=gzip%20size:%20CSS\">\n  </a>\n  <a href=\"#backers\">\n    <img src=\"https://opencollective.com/element/backers/badge.svg\">\n  </a>\n  <a href=\"#sponsors\">\n    <img src=\"https://opencollective.com/element/sponsors/badge.svg\">\n  </a>\n  <a href=\"LICENSE\">\n    <img src=\"https://img.shields.io/badge/License-MIT-yellow.svg\">\n  </a>\n</p>\n\n> A Vue.js 2.0 UI Toolkit for Web.\n\nElement will stay with Vue 2.x\n\nFor Vue 3.0, we recommend using [Element Plus](https://github.com/element-plus/element-plus)(Element Plus is a community develop project)\n\nFor MiniProgram development, we recommend using [MorJS](https://github.com/eleme/morjs)\n\n## Links\n- Homepage and documentation\n  - [International users](http://element.eleme.io/#/en-US)\n  - [Chinese users](http://element.eleme.io/#/zh-CN)\n  - [Spanish users](http://element.eleme.io/#/es)\n  - [French users](http://element.eleme.io/#/fr-FR)\n- [awesome-element](https://github.com/ElementUI/awesome-element)\n- [FAQ](./FAQ.md)\n- [Vue.js 3.0 migration](https://github.com/element-plus/element-plus)\n- [Customize theme](http://element.eleme.io/#/en-US/component/custom-theme)\n- [Preview and generate theme online](https://elementui.github.io/theme-chalk-preview)\n- [Element for React](https://github.com/elemefe/element-react)\n- [Element for Angular](https://github.com/ElemeFE/element-angular)\n- [Atom helper](https://github.com/ElemeFE/element-helper)\n- [Visual Studio Code helper](https://github.com/ElemeFE/vscode-element-helper)\n- Starter kit\n  - [element-starter](https://github.com/ElementUI/element-starter)\n  - [element-in-laravel-starter](https://github.com/ElementUI/element-in-laravel-starter)\n- [Design resources](https://github.com/ElementUI/Resources)\n- Gitter\n  - [International users](https://gitter.im/element-en/Lobby)\n  - [Chinese users](https://gitter.im/ElemeFE/element)\n\n## Install\n```shell\nnpm install element-ui -S\n```\n\n## Quick Start\n``` javascript\nimport Vue from 'vue'\nimport Element from 'element-ui'\n\nVue.use(Element)\n\n// or\nimport {\n  Select,\n  Button\n  // ...\n} from 'element-ui'\n\nVue.component(Select.name, Select)\nVue.component(Button.name, Button)\n```\nFor more information, please refer to [Quick Start](http://element.eleme.io/#/en-US/component/quickstart) in our documentation.\n\n## Browser Support\nModern browsers and Internet Explorer 10+.\n\n## Development\nSkip this part if you just want to use Element.\n\nFor those who are interested in contributing to Element, please refer to our contributing guide ([中文](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.zh-CN.md) | [English](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.en-US.md) | [Español](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.es.md) | [Français](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.fr-FR.md)) to see how to run this project.\n\n## Changelog\nDetailed changes for each release are documented in the [release notes](https://github.com/ElemeFE/element/releases).\n\n## FAQ\nWe have collected some [frequently asked questions](https://github.com/ElemeFE/element/blob/master/FAQ.md). Before reporting an issue, please search if the FAQ has the answer to your problem.\n\n## Contribution\nPlease make sure to read the contributing guide ([中文](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.zh-CN.md) | [English](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.en-US.md) | [Español](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.es.md) | [Français](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.fr-FR.md)) before making a pull request.\n\n## Special Thanks\nEnglish documentation is brought to you by SwiftGG Translation Team:\n- [raychenfj](https://github.com/raychenfj)\n- [kevin](http://thekevin.cn/)\n- [曾小涛](https://github.com/zengxiaotao)\n- [湾仔王二](https://github.com/wanzaiwanger)\n- [BlooDLine](http://www.ibloodline.com/)\n- [陈铭嘉](https://chenmingjia.github.io/)\n- [千叶知风](http://mpc6.com/)\n- [梁杰](http://numbbbbb.com)\n- [Changing](https://github.com/sunzhuo11)\n- [mmoaay](https://github.com/mmoaay)\n\nSpanish documentation is made possible by these community developers:\n- [adavie1](https://github.com/adavie1)\n- [carmencitaqiu](https://github.com/carmencitaqiu)\n- [coderdiaz](https://github.com/coderdiaz)\n- [fedegar33](https://github.com/fedegar33)\n- [Gonzalo2310](https://github.com/Gonzalo2310)\n- [lesterbx](https://github.com/lesterbx)\n- [ProgramerGuy](https://github.com/ProgramerGuy)\n- [SantiagoGdaR](https://github.com/SantiagoGdaR)\n- [sigfriedCub1990](https://github.com/sigfriedCub1990)\n- [thechosenjuan](https://github.com/thechosenjuan)\n\nFrench documentation is made possible by these community developers:\n- [smalesys](https://github.com/smalesys)\n- [blombard](https://github.com/blombard)\n\n## Join Discussion Group\n\nScan the QR code using [Dingtalk App](https://www.dingtalk.com/) to join in discussion group :\n\n<img alt=\"Join Discusion Group\" src=\"https://user-images.githubusercontent.com/17680888/93177882-0ae92d80-f766-11ea-870d-3fa2d7f06454.png\" width=\"300\">\n\n\n## LICENSE\n[MIT](LICENSE)\n"
  },
  {
    "path": "build/bin/build-entry.js",
    "content": "var Components = require('../../components.json');\nvar fs = require('fs');\nvar render = require('json-templater/string');\nvar uppercamelcase = require('uppercamelcase');\nvar path = require('path');\nvar endOfLine = require('os').EOL;\n\nvar OUTPUT_PATH = path.join(__dirname, '../../src/index.js');\nvar IMPORT_TEMPLATE = 'import {{name}} from \\'../packages/{{package}}/index.js\\';';\nvar INSTALL_COMPONENT_TEMPLATE = '  {{name}}';\nvar MAIN_TEMPLATE = `/* Automatically generated by './build/bin/build-entry.js' */\n\n{{include}}\nimport locale from 'element-ui/src/locale';\nimport CollapseTransition from 'element-ui/src/transitions/collapse-transition';\n\nconst components = [\n{{install}},\n  CollapseTransition\n];\n\nconst install = function(Vue, opts = {}) {\n  locale.use(opts.locale);\n  locale.i18n(opts.i18n);\n\n  components.forEach(component => {\n    Vue.component(component.name, component);\n  });\n\n  Vue.use(InfiniteScroll);\n  Vue.use(Loading.directive);\n\n  Vue.prototype.$ELEMENT = {\n    size: opts.size || '',\n    zIndex: opts.zIndex || 2000\n  };\n\n  Vue.prototype.$loading = Loading.service;\n  Vue.prototype.$msgbox = MessageBox;\n  Vue.prototype.$alert = MessageBox.alert;\n  Vue.prototype.$confirm = MessageBox.confirm;\n  Vue.prototype.$prompt = MessageBox.prompt;\n  Vue.prototype.$notify = Notification;\n  Vue.prototype.$message = Message;\n\n};\n\n/* istanbul ignore if */\nif (typeof window !== 'undefined' && window.Vue) {\n  install(window.Vue);\n}\n\nexport default {\n  version: '{{version}}',\n  locale: locale.use,\n  i18n: locale.i18n,\n  install,\n  CollapseTransition,\n  Loading,\n{{list}}\n};\n`;\n\ndelete Components.font;\n\nvar ComponentNames = Object.keys(Components);\n\nvar includeComponentTemplate = [];\nvar installTemplate = [];\nvar listTemplate = [];\n\nComponentNames.forEach(name => {\n  var componentName = uppercamelcase(name);\n\n  includeComponentTemplate.push(render(IMPORT_TEMPLATE, {\n    name: componentName,\n    package: name\n  }));\n\n  if (['Loading', 'MessageBox', 'Notification', 'Message', 'InfiniteScroll'].indexOf(componentName) === -1) {\n    installTemplate.push(render(INSTALL_COMPONENT_TEMPLATE, {\n      name: componentName,\n      component: name\n    }));\n  }\n\n  if (componentName !== 'Loading') listTemplate.push(`  ${componentName}`);\n});\n\nvar template = render(MAIN_TEMPLATE, {\n  include: includeComponentTemplate.join(endOfLine),\n  install: installTemplate.join(',' + endOfLine),\n  version: process.env.VERSION || require('../../package.json').version,\n  list: listTemplate.join(',' + endOfLine)\n});\n\nfs.writeFileSync(OUTPUT_PATH, template);\nconsole.log('[build entry] DONE:', OUTPUT_PATH);\n\n"
  },
  {
    "path": "build/bin/build-locale.js",
    "content": "var fs = require('fs');\nvar save = require('file-save');\nvar resolve = require('path').resolve;\nvar basename = require('path').basename;\nvar localePath = resolve(__dirname, '../../src/locale/lang');\nvar fileList = fs.readdirSync(localePath);\n\nvar transform = function(filename, name, cb) {\n  require('babel-core').transformFile(resolve(localePath, filename), {\n    plugins: [\n      'add-module-exports',\n      ['transform-es2015-modules-umd', {loose: true}]\n    ],\n    moduleId: name\n  }, cb);\n};\n\nfileList\n  .filter(function(file) {\n    return /\\.js$/.test(file);\n  })\n  .forEach(function(file) {\n    var name = basename(file, '.js');\n\n    transform(file, name, function(err, result) {\n      if (err) {\n        console.error(err);\n      } else {\n        var code = result.code;\n\n        code = code\n          .replace('define(\\'', 'define(\\'element/locale/')\n          .replace('global.', 'global.ELEMENT.lang = global.ELEMENT.lang || {}; \\n    global.ELEMENT.lang.');\n        save(resolve(__dirname, '../../lib/umd/locale', file)).write(code);\n\n        console.log(file);\n      }\n    });\n  });\n"
  },
  {
    "path": "build/bin/gen-cssfile.js",
    "content": "var fs = require('fs');\nvar path = require('path');\nvar Components = require('../../components.json');\nvar themes = [\n  'theme-chalk'\n];\nComponents = Object.keys(Components);\nvar basepath = path.resolve(__dirname, '../../packages/');\n\nfunction fileExists(filePath) {\n  try {\n    return fs.statSync(filePath).isFile();\n  } catch (err) {\n    return false;\n  }\n}\n\nthemes.forEach((theme) => {\n  var isSCSS = theme !== 'theme-default';\n  var indexContent = isSCSS ? '@import \"./base.scss\";\\n' : '@import \"./base.css\";\\n';\n  Components.forEach(function(key) {\n    if (['icon', 'option', 'option-group'].indexOf(key) > -1) return;\n    var fileName = key + (isSCSS ? '.scss' : '.css');\n    indexContent += '@import \"./' + fileName + '\";\\n';\n    var filePath = path.resolve(basepath, theme, 'src', fileName);\n    if (!fileExists(filePath)) {\n      fs.writeFileSync(filePath, '', 'utf8');\n      console.log(theme, ' 创建遗漏的 ', fileName, ' 文件');\n    }\n  });\n  fs.writeFileSync(path.resolve(basepath, theme, 'src', isSCSS ? 'index.scss' : 'index.css'), indexContent);\n});\n"
  },
  {
    "path": "build/bin/gen-indices.js",
    "content": "'use strict';\n\nconst fs = require('fs');\nconst path = require('path');\nconst algoliasearch = require('algoliasearch');\nconst slugify = require('transliteration').slugify;\nconst key = require('./algolia-key');\n\nconst client = algoliasearch('4C63BTGP6S', key);\nconst langs = {\n  'zh-CN': 'element-zh',\n  'en-US': 'element-en',\n  'es': 'element-es',\n  'fr-FR': 'element-fr'\n};\n\n['zh-CN', 'en-US', 'es', 'fr-FR'].forEach(lang => {\n  const indexName = langs[lang];\n  const index = client.initIndex(indexName);\n  index.clearIndex(err => {\n    if (err) return;\n    fs.readdir(path.resolve(__dirname, `../../examples/docs/${ lang }`), (err, files) => {\n      if (err) return;\n      let indices = [];\n      files.forEach(file => {\n        const component = file.replace('.md', '');\n        const content = fs.readFileSync(path.resolve(__dirname, `../../examples/docs/${ lang }/${ file }`), 'utf8');\n        const matches = content\n          .replace(/:::[\\s\\S]*?:::/g, '')\n          .replace(/```[\\s\\S]*?```/g, '')\n          .match(/#{2,4}[^#]*/g)\n          .map(match => match.replace(/\\n+/g, '\\n').split('\\n').filter(part => !!part))\n          .map(match => {\n            const length = match.length;\n            if (length > 2) {\n              const desc = match.slice(1, length).join('');\n              return [match[0], desc];\n            }\n            return match;\n          });\n\n        indices = indices.concat(matches.map(match => {\n          const isComponent = match[0].indexOf('###') < 0;\n          const title = match[0].replace(/#{2,4}/, '').trim();\n          const index = { component, title };\n          index.ranking = isComponent ? 2 : 1;\n          index.anchor = slugify(title);\n          index.content = (match[1] || title).replace(/<[^>]+>/g, '');\n          return index;\n        }));\n      });\n\n      index.addObjects(indices, (err, res) => {\n        console.log(err, res);\n      });\n    });\n  });\n});\n"
  },
  {
    "path": "build/bin/i18n.js",
    "content": "'use strict';\n\nvar fs = require('fs');\nvar path = require('path');\nvar langConfig = require('../../examples/i18n/page.json');\n\nlangConfig.forEach(lang => {\n  try {\n    fs.statSync(path.resolve(__dirname, `../../examples/pages/${ lang.lang }`));\n  } catch (e) {\n    fs.mkdirSync(path.resolve(__dirname, `../../examples/pages/${ lang.lang }`));\n  }\n\n  Object.keys(lang.pages).forEach(page => {\n    var templatePath = path.resolve(__dirname, `../../examples/pages/template/${ page }.tpl`);\n    var outputPath = path.resolve(__dirname, `../../examples/pages/${ lang.lang }/${ page }.vue`);\n    var content = fs.readFileSync(templatePath, 'utf8');\n    var pairs = lang.pages[page];\n\n    Object.keys(pairs).forEach(key => {\n      content = content.replace(new RegExp(`<%=\\\\s*${ key }\\\\s*>`, 'g'), pairs[key]);\n    });\n\n    fs.writeFileSync(outputPath, content);\n  });\n});\n"
  },
  {
    "path": "build/bin/iconInit.js",
    "content": "'use strict';\n\nvar postcss = require('postcss');\nvar fs = require('fs');\nvar path = require('path');\nvar fontFile = fs.readFileSync(path.resolve(__dirname, '../../packages/theme-chalk/src/icon.scss'), 'utf8');\nvar nodes = postcss.parse(fontFile).nodes;\nvar classList = [];\n\nnodes.forEach((node) => {\n  var selector = node.selector || '';\n  var reg = new RegExp(/\\.el-icon-([^:]+):before/);\n  var arr = selector.match(reg);\n\n  if (arr && arr[1]) {\n    classList.push(arr[1]);\n  }\n});\n\nclassList.reverse(); // 希望按 css 文件顺序倒序排列\n\nfs.writeFile(path.resolve(__dirname, '../../examples/icon.json'), JSON.stringify(classList), () => {});\n"
  },
  {
    "path": "build/bin/new-lang.js",
    "content": "'use strict';\n\nconsole.log();\nprocess.on('exit', () => {\n  console.log();\n});\n\nif (!process.argv[2]) {\n  console.error('[language] is required!');\n  process.exit(1);\n}\n\nvar fs = require('fs');\nconst path = require('path');\nconst fileSave = require('file-save');\nconst lang = process.argv[2];\n// const configPath = path.resolve(__dirname, '../../examples/i18n', lang);\n\n// 添加到 components.json\nconst componentFile = require('../../examples/i18n/component.json');\nif (componentFile.some(item => item.lang === lang)) {\n  console.error(`${lang} already exists.`);\n  process.exit(1);\n}\nlet componentNew = Object.assign({}, componentFile.filter(item => item.lang === 'en-US')[0], { lang });\ncomponentFile.push(componentNew);\nfileSave(path.join(__dirname, '../../examples/i18n/component.json'))\n  .write(JSON.stringify(componentFile, null, '  '), 'utf8')\n  .end('\\n');\n\n// 添加到 page.json\nconst pageFile = require('../../examples/i18n/page.json');\nlet pageNew = Object.assign({}, pageFile.filter(item => item.lang === 'en-US')[0], { lang });\npageFile.push(pageNew);\nfileSave(path.join(__dirname, '../../examples/i18n/page.json'))\n  .write(JSON.stringify(pageFile, null, '  '), 'utf8')\n  .end('\\n');\n\n// 添加到 route.json\nconst routeFile = require('../../examples/i18n/route.json');\nrouteFile.push({ lang });\nfileSave(path.join(__dirname, '../../examples/i18n/route.json'))\n  .write(JSON.stringify(routeFile, null, '  '), 'utf8')\n  .end('\\n');\n\n// 添加到 nav.config.json\nconst navFile = require('../../examples/nav.config.json');\nnavFile[lang] = navFile['en-US'];\nfileSave(path.join(__dirname, '../../examples/nav.config.json'))\n  .write(JSON.stringify(navFile, null, '  '), 'utf8')\n  .end('\\n');\n\n// docs 下新建对应文件夹\ntry {\n  fs.statSync(path.resolve(__dirname, `../../examples/docs/${ lang }`));\n} catch (e) {\n  fs.mkdirSync(path.resolve(__dirname, `../../examples/docs/${ lang }`));\n}\n\nconsole.log('DONE!');\n"
  },
  {
    "path": "build/bin/new.js",
    "content": "'use strict';\n\nconsole.log();\nprocess.on('exit', () => {\n  console.log();\n});\n\nif (!process.argv[2]) {\n  console.error('[组件名]必填 - Please enter new component name');\n  process.exit(1);\n}\n\nconst path = require('path');\nconst fs = require('fs');\nconst fileSave = require('file-save');\nconst uppercamelcase = require('uppercamelcase');\nconst componentname = process.argv[2];\nconst chineseName = process.argv[3] || componentname;\nconst ComponentName = uppercamelcase(componentname);\nconst PackagePath = path.resolve(__dirname, '../../packages', componentname);\nconst Files = [\n  {\n    filename: 'index.js',\n    content: `import ${ComponentName} from './src/main';\n\n/* istanbul ignore next */\n${ComponentName}.install = function(Vue) {\n  Vue.component(${ComponentName}.name, ${ComponentName});\n};\n\nexport default ${ComponentName};`\n  },\n  {\n    filename: 'src/main.vue',\n    content: `<template>\n  <div class=\"el-${componentname}\"></div>\n</template>\n\n<script>\nexport default {\n  name: 'El${ComponentName}'\n};\n</script>`\n  },\n  {\n    filename: path.join('../../examples/docs/zh-CN', `${componentname}.md`),\n    content: `## ${ComponentName} ${chineseName}`\n  },\n  {\n    filename: path.join('../../examples/docs/en-US', `${componentname}.md`),\n    content: `## ${ComponentName}`\n  },\n  {\n    filename: path.join('../../examples/docs/es', `${componentname}.md`),\n    content: `## ${ComponentName}`\n  },\n  {\n    filename: path.join('../../examples/docs/fr-FR', `${componentname}.md`),\n    content: `## ${ComponentName}`\n  },\n  {\n    filename: path.join('../../test/unit/specs', `${componentname}.spec.js`),\n    content: `import { createTest, destroyVM } from '../util';\nimport ${ComponentName} from 'packages/${componentname}';\n\ndescribe('${ComponentName}', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', () => {\n    vm = createTest(${ComponentName}, true);\n    expect(vm.$el).to.exist;\n  });\n});\n`\n  },\n  {\n    filename: path.join('../../packages/theme-chalk/src', `${componentname}.scss`),\n    content: `@import \"mixins/mixins\";\n@import \"common/var\";\n\n@include b(${componentname}) {\n}`\n  },\n  {\n    filename: path.join('../../types', `${componentname}.d.ts`),\n    content: `import { ElementUIComponent } from './component'\n\n/** ${ComponentName} Component */\nexport declare class El${ComponentName} extends ElementUIComponent {\n}`\n  }\n];\n\n// 添加到 components.json\nconst componentsFile = require('../../components.json');\nif (componentsFile[componentname]) {\n  console.error(`${componentname} 已存在.`);\n  process.exit(1);\n}\ncomponentsFile[componentname] = `./packages/${componentname}/index.js`;\nfileSave(path.join(__dirname, '../../components.json'))\n  .write(JSON.stringify(componentsFile, null, '  '), 'utf8')\n  .end('\\n');\n\n// 添加到 index.scss\nconst sassPath = path.join(__dirname, '../../packages/theme-chalk/src/index.scss');\nconst sassImportText = `${fs.readFileSync(sassPath)}@import \"./${componentname}.scss\";`;\nfileSave(sassPath)\n  .write(sassImportText, 'utf8')\n  .end('\\n');\n\n// 添加到 element-ui.d.ts\nconst elementTsPath = path.join(__dirname, '../../types/element-ui.d.ts');\n\nlet elementTsText = `${fs.readFileSync(elementTsPath)}\n/** ${ComponentName} Component */\nexport class ${ComponentName} extends El${ComponentName} {}`;\n\nconst index = elementTsText.indexOf('export') - 1;\nconst importString = `import { El${ComponentName} } from './${componentname}'`;\n\nelementTsText = elementTsText.slice(0, index) + importString + '\\n' + elementTsText.slice(index);\n\nfileSave(elementTsPath)\n  .write(elementTsText, 'utf8')\n  .end('\\n');\n\n// 创建 package\nFiles.forEach(file => {\n  fileSave(path.join(PackagePath, file.filename))\n    .write(file.content, 'utf8')\n    .end('\\n');\n});\n\n// 添加到 nav.config.json\nconst navConfigFile = require('../../examples/nav.config.json');\n\nObject.keys(navConfigFile).forEach(lang => {\n  let groups = navConfigFile[lang][4].groups;\n  groups[groups.length - 1].list.push({\n    path: `/${componentname}`,\n    title: lang === 'zh-CN' && componentname !== chineseName\n      ? `${ComponentName} ${chineseName}`\n      : ComponentName\n  });\n});\n\nfileSave(path.join(__dirname, '../../examples/nav.config.json'))\n  .write(JSON.stringify(navConfigFile, null, '  '), 'utf8')\n  .end('\\n');\n\nconsole.log('DONE!');\n"
  },
  {
    "path": "build/bin/template.js",
    "content": "const path = require('path');\nconst templates = path.resolve(process.cwd(), './examples/pages/template');\n\nconst chokidar = require('chokidar');\nlet watcher = chokidar.watch([templates]);\n\nwatcher.on('ready', function() {\n  watcher\n    .on('change', function() {\n      exec('npm run i18n');\n    });\n});\n\nfunction exec(cmd) {\n  return require('child_process').execSync(cmd).toString().trim();\n}\n"
  },
  {
    "path": "build/bin/version.js",
    "content": "var fs = require('fs');\nvar path = require('path');\nvar version = process.env.VERSION || require('../../package.json').version;\nvar content = { '1.4.13': '1.4', '2.0.11': '2.0', '2.1.0': '2.1', '2.2.2': '2.2', '2.3.9': '2.3', '2.4.11': '2.4', '2.5.4': '2.5', '2.6.3': '2.6', '2.7.2': '2.7', '2.8.2': '2.8', '2.9.2': '2.9', '2.10.1': '2.10', '2.11.1': '2.11', '2.12.0': '2.12', '2.13.2': '2.13', '2.14.1': '2.14' };\nif (!content[version]) content[version] = '2.15';\nfs.writeFileSync(path.resolve(__dirname, '../../examples/versions.json'), JSON.stringify(content));\n"
  },
  {
    "path": "build/config.js",
    "content": "var path = require('path');\nvar fs = require('fs');\nvar nodeExternals = require('webpack-node-externals');\nvar Components = require('../components.json');\n\nvar utilsList = fs.readdirSync(path.resolve(__dirname, '../src/utils'));\nvar mixinsList = fs.readdirSync(path.resolve(__dirname, '../src/mixins'));\nvar transitionList = fs.readdirSync(path.resolve(__dirname, '../src/transitions'));\nvar externals = {};\n\nObject.keys(Components).forEach(function(key) {\n  externals[`element-ui/packages/${key}`] = `element-ui/lib/${key}`;\n});\n\nexternals['element-ui/src/locale'] = 'element-ui/lib/locale';\nutilsList.forEach(function(file) {\n  file = path.basename(file, '.js');\n  externals[`element-ui/src/utils/${file}`] = `element-ui/lib/utils/${file}`;\n});\nmixinsList.forEach(function(file) {\n  file = path.basename(file, '.js');\n  externals[`element-ui/src/mixins/${file}`] = `element-ui/lib/mixins/${file}`;\n});\ntransitionList.forEach(function(file) {\n  file = path.basename(file, '.js');\n  externals[`element-ui/src/transitions/${file}`] = `element-ui/lib/transitions/${file}`;\n});\n\nexternals = [Object.assign({\n  vue: 'vue'\n}, externals), nodeExternals()];\n\nexports.externals = externals;\n\nexports.alias = {\n  main: path.resolve(__dirname, '../src'),\n  packages: path.resolve(__dirname, '../packages'),\n  examples: path.resolve(__dirname, '../examples'),\n  'element-ui': path.resolve(__dirname, '../')\n};\n\nexports.vue = {\n  root: 'Vue',\n  commonjs: 'vue',\n  commonjs2: 'vue',\n  amd: 'vue'\n};\n\nexports.jsexclude = /node_modules|utils\\/popper\\.js|utils\\/date\\.js|utils\\/lodash\\.js/;\n"
  },
  {
    "path": "build/deploy-ci.sh",
    "content": "#! /bin/sh\nmkdir temp_web\ngit config --global user.name \"element-bot\"\ngit config --global user.email \"wallement@gmail.com\"\n\nif [ \"$ROT_TOKEN\" = \"\" ]; then\n  echo \"Bye~\"\n  exit 0\nfi\n\n# release\nif [ \"$TRAVIS_TAG\" ]; then\n  # build lib\n  npm run dist\n  cd temp_web\n  git clone https://$ROT_TOKEN@github.com/ElementUI/lib.git && cd lib\n  rm -rf `find * ! -name README.md`\n  cp -rf ../../lib/** .\n  git add -A .\n  git commit -m \"[build] $TRAVIS_TAG\"\n  git tag $TRAVIS_TAG\n  git push origin master --tags\n  cd ../..\n\n  # build theme-chalk\n  cd temp_web\n  git clone https://$ROT_TOKEN@github.com/ElementUI/theme-chalk.git && cd theme-chalk\n  rm -rf *\n  cp -rf ../../packages/theme-chalk/** .\n  git add -A .\n  git commit -m \"[build] $TRAVIS_TAG\"\n  git tag $TRAVIS_TAG\n  git push origin master --tags\n  cd ../..\n\n  # build site\n  npm run deploy:build\n  cd temp_web\n  git clone --depth 1 -b gh-pages --single-branch https://$ROT_TOKEN@github.com/ElemeFE/element.git && cd element\n  # build sub folder\n  echo $TRAVIS_TAG\n\n  SUB_FOLDER='2.15'\n  mkdir $SUB_FOLDER\n  rm -rf *.js *.css *.map static\n  rm -rf $SUB_FOLDER/**\n  cp -rf ../../examples/element-ui/** .\n  cp -rf ../../examples/element-ui/** $SUB_FOLDER/\n  git add -A .\n  git commit -m \"$TRAVIS_COMMIT_MSG\"\n  git push origin gh-pages\n  cd ../..\n\n  echo \"DONE, Bye~\"\n  exit 0\nfi\n\n# build dev site\nnpm run build:file && CI_ENV=/dev/$TRAVIS_BRANCH/ node_modules/.bin/cross-env NODE_ENV=production node_modules/.bin/webpack --config build/webpack.demo.js\ncd temp_web\ngit clone https://$ROT_TOKEN@github.com/ElementUI/dev.git && cd dev\nmkdir $TRAVIS_BRANCH\nrm -rf $TRAVIS_BRANCH/**\ncp -rf ../../examples/element-ui/** $TRAVIS_BRANCH/\ngit add -A .\ngit commit -m \"$TRAVIS_COMMIT_MSG\"\ngit push origin master\ncd ../..\n\n# push dev theme-chalk\ncd temp_web\ngit clone -b $TRAVIS_BRANCH https://$ROT_TOKEN@github.com/ElementUI/theme-chalk.git && cd theme-chalk\nrm -rf *\ncp -rf ../../packages/theme-chalk/** .\ngit add -A .\ngit commit -m \"$TRAVIS_COMMIT_MSG\"\ngit push origin $TRAVIS_BRANCH\ncd ../..\n"
  },
  {
    "path": "build/deploy-faas.sh",
    "content": "#! /bin/sh\nset -ex\nmkdir temp_web\nnpm run deploy:build\ncd temp_web\ngit clone --depth 1 -b gh-pages --single-branch https://github.com/ElemeFE/element.git && cd element\n\n# build sub folder\nSUB_FOLDER='2.15'\nmkdir -p $SUB_FOLDER\nrm -rf *.js *.css *.map static\nrm -rf $SUB_FOLDER/**\ncp -rf ../../examples/element-ui/** .\ncp -rf ../../examples/element-ui/** $SUB_FOLDER/\ncd ../..\n\n# deploy domestic site\nfaas deploy daily -P element\nrm -rf temp_web\n"
  },
  {
    "path": "build/gen-single-config.js",
    "content": "var path = require('path');\nvar config = require('./config');\n\nmodule.exports = function(context, moduleName, entry) {\n  return {\n    entry: {\n      index: path.resolve(context, entry || 'index.js')\n    },\n    dist: path.resolve(context, 'lib'),\n    template: false,\n    format: 'umd',\n    moduleName: moduleName,\n    extends: ['vue2'],\n    alias: config.alias,\n    externals: { vue: config.vue }\n  };\n};\n"
  },
  {
    "path": "build/git-release.sh",
    "content": "#!/usr/bin/env sh\ngit checkout dev\n\nif test -n \"$(git status --porcelain)\"; then\n  echo 'Unclean working tree. Commit or stash changes first.' >&2;\n  exit 128;\nfi\n\nif ! git fetch --quiet 2>/dev/null; then\n  echo 'There was a problem fetching your branch. Run `git fetch` to see more...' >&2;\n  exit 128;\nfi\n\nif test \"0\" != \"$(git rev-list --count --left-only @'{u}'...HEAD)\"; then\n  echo 'Remote history differ. Please pull changes.' >&2;\n  exit 128;\nfi\n\necho 'No conflicts.' >&2;\n"
  },
  {
    "path": "build/md-loader/config.js",
    "content": "const Config = require('markdown-it-chain');\nconst anchorPlugin = require('markdown-it-anchor');\nconst slugify = require('transliteration').slugify;\nconst containers = require('./containers');\nconst overWriteFenceRule = require('./fence');\n\nconst config = new Config();\n\nconfig\n  .options.html(true).end()\n\n  .plugin('anchor').use(anchorPlugin, [\n    {\n      level: 2,\n      slugify: slugify,\n      permalink: true,\n      permalinkBefore: true\n    }\n  ]).end()\n\n  .plugin('containers').use(containers).end();\n\nconst md = config.toMd();\noverWriteFenceRule(md);\n\nmodule.exports = md;\n"
  },
  {
    "path": "build/md-loader/containers.js",
    "content": "const mdContainer = require('markdown-it-container');\n\nmodule.exports = md => {\n  md.use(mdContainer, 'demo', {\n    validate(params) {\n      return params.trim().match(/^demo\\s*(.*)$/);\n    },\n    render(tokens, idx) {\n      const m = tokens[idx].info.trim().match(/^demo\\s*(.*)$/);\n      if (tokens[idx].nesting === 1) {\n        const description = m && m.length > 1 ? m[1] : '';\n        const content = tokens[idx + 1].type === 'fence' ? tokens[idx + 1].content : '';\n        return `<demo-block>\n        ${description ? `<div>${md.render(description)}</div>` : ''}\n        <!--element-demo: ${content}:element-demo-->\n        `;\n      }\n      return '</demo-block>';\n    }\n  });\n\n  md.use(mdContainer, 'tip');\n  md.use(mdContainer, 'warning');\n};\n"
  },
  {
    "path": "build/md-loader/fence.js",
    "content": "// 覆盖默认的 fence 渲染策略\nmodule.exports = md => {\n  const defaultRender = md.renderer.rules.fence;\n  md.renderer.rules.fence = (tokens, idx, options, env, self) => {\n    const token = tokens[idx];\n    // 判断该 fence 是否在 :::demo 内\n    const prevToken = tokens[idx - 1];\n    const isInDemoContainer = prevToken && prevToken.nesting === 1 && prevToken.info.trim().match(/^demo\\s*(.*)$/);\n    if (token.info === 'html' && isInDemoContainer) {\n      return `<template slot=\"highlight\"><pre v-pre><code class=\"html\">${md.utils.escapeHtml(token.content)}</code></pre></template>`;\n    }\n    return defaultRender(tokens, idx, options, env, self);\n  };\n};\n"
  },
  {
    "path": "build/md-loader/index.js",
    "content": "const {\n  stripScript,\n  stripTemplate,\n  genInlineComponentText\n} = require('./util');\nconst md = require('./config');\n\nmodule.exports = function(source) {\n  const content = md.render(source);\n\n  const startTag = '<!--element-demo:';\n  const startTagLen = startTag.length;\n  const endTag = ':element-demo-->';\n  const endTagLen = endTag.length;\n\n  let componenetsString = '';\n  let id = 0; // demo 的 id\n  let output = []; // 输出的内容\n  let start = 0; // 字符串开始位置\n\n  let commentStart = content.indexOf(startTag);\n  let commentEnd = content.indexOf(endTag, commentStart + startTagLen);\n  while (commentStart !== -1 && commentEnd !== -1) {\n    output.push(content.slice(start, commentStart));\n\n    const commentContent = content.slice(commentStart + startTagLen, commentEnd);\n    const html = stripTemplate(commentContent);\n    const script = stripScript(commentContent);\n    let demoComponentContent = genInlineComponentText(html, script);\n    const demoComponentName = `element-demo${id}`;\n    output.push(`<template slot=\"source\"><${demoComponentName} /></template>`);\n    componenetsString += `${JSON.stringify(demoComponentName)}: ${demoComponentContent},`;\n\n    // 重新计算下一次的位置\n    id++;\n    start = commentEnd + endTagLen;\n    commentStart = content.indexOf(startTag, start);\n    commentEnd = content.indexOf(endTag, commentStart + startTagLen);\n  }\n\n  // 仅允许在 demo 不存在时，才可以在 Markdown 中写 script 标签\n  // todo: 优化这段逻辑\n  let pageScript = '';\n  if (componenetsString) {\n    pageScript = `<script>\n      export default {\n        name: 'component-doc',\n        components: {\n          ${componenetsString}\n        }\n      }\n    </script>`;\n  } else if (content.indexOf('<script>') === 0) { // 硬编码，有待改善\n    start = content.indexOf('</script>') + '</script>'.length;\n    pageScript = content.slice(0, start);\n  }\n\n  output.push(content.slice(start));\n  return `\n    <template>\n      <section class=\"content element-doc\">\n        ${output.join('')}\n      </section>\n    </template>\n    ${pageScript}\n  `;\n};\n"
  },
  {
    "path": "build/md-loader/util.js",
    "content": "const { compileTemplate } = require('@vue/component-compiler-utils');\nconst compiler = require('vue-template-compiler');\n\nfunction stripScript(content) {\n  const result = content.match(/<(script)>([\\s\\S]+)<\\/\\1>/);\n  return result && result[2] ? result[2].trim() : '';\n}\n\nfunction stripStyle(content) {\n  const result = content.match(/<(style)\\s*>([\\s\\S]+)<\\/\\1>/);\n  return result && result[2] ? result[2].trim() : '';\n}\n\n// 编写例子时不一定有 template。所以采取的方案是剔除其他的内容\nfunction stripTemplate(content) {\n  content = content.trim();\n  if (!content) {\n    return content;\n  }\n  return content.replace(/<(script|style)[\\s\\S]+<\\/\\1>/g, '').trim();\n}\n\nfunction pad(source) {\n  return source\n    .split(/\\r?\\n/)\n    .map(line => `  ${line}`)\n    .join('\\n');\n}\n\nfunction genInlineComponentText(template, script) {\n  // https://github.com/vuejs/vue-loader/blob/423b8341ab368c2117931e909e2da9af74503635/lib/loaders/templateLoader.js#L46\n  const finalOptions = {\n    source: `<div>${template}</div>`,\n    filename: 'inline-component', // TODO：这里有待调整\n    compiler\n  };\n  const compiled = compileTemplate(finalOptions);\n  // tips\n  if (compiled.tips && compiled.tips.length) {\n    compiled.tips.forEach(tip => {\n      console.warn(tip);\n    });\n  }\n  // errors\n  if (compiled.errors && compiled.errors.length) {\n    console.error(\n      `\\n  Error compiling template:\\n${pad(compiled.source)}\\n` +\n        compiled.errors.map(e => `  - ${e}`).join('\\n') +\n        '\\n'\n    );\n  }\n  let demoComponentContent = `\n    ${compiled.code}\n  `;\n  // todo: 这里采用了硬编码有待改进\n  script = script.trim();\n  if (script) {\n    script = script.replace(/export\\s+default/, 'const democomponentExport =');\n  } else {\n    script = 'const democomponentExport = {}';\n  }\n  demoComponentContent = `(function() {\n    ${demoComponentContent}\n    ${script}\n    return {\n      render,\n      staticRenderFns,\n      ...democomponentExport\n    }\n  })()`;\n  return demoComponentContent;\n}\n\nmodule.exports = {\n  stripScript,\n  stripStyle,\n  stripTemplate,\n  genInlineComponentText\n};\n"
  },
  {
    "path": "build/release.sh",
    "content": "#!/usr/bin/env sh\nset -e\n\ngit checkout master\ngit merge dev\n\nVERSION=`npx select-version-cli`\n\nread -p \"Releasing $VERSION - are you sure? (y/n)\" -n 1 -r\necho    # (optional) move to a new line\nif [[ $REPLY =~ ^[Yy]$ ]]\nthen\n  echo \"Releasing $VERSION ...\"\n\n  # build\n  VERSION=$VERSION npm run dist\n\n  # ssr test\n  node test/ssr/require.test.js            \n\n  # publish theme\n  echo \"Releasing theme-chalk $VERSION ...\"\n  cd packages/theme-chalk\n  npm version $VERSION --message \"[release] $VERSION\"\n  if [[ $VERSION =~ \"beta\" ]]\n  then\n    npm publish --tag beta\n  else\n    npm publish\n  fi\n  cd ../..\n\n  # commit\n  git add -A\n  git commit -m \"[build] $VERSION\"\n  npm version $VERSION --message \"[release] $VERSION\"\n\n  # publish\n  git push eleme master\n  git push eleme refs/tags/v$VERSION\n  git checkout dev\n  git rebase master\n  git push eleme dev\n\n  if [[ $VERSION =~ \"beta\" ]]\n  then\n    npm publish --tag beta\n  else\n    npm publish\n  fi\nfi\n"
  },
  {
    "path": "build/webpack.common.js",
    "content": "const path = require('path');\nconst ProgressBarPlugin = require('progress-bar-webpack-plugin');\nconst VueLoaderPlugin = require('vue-loader/lib/plugin');\n\nconst config = require('./config');\n\nmodule.exports = {\n  mode: 'production',\n  entry: {\n    app: ['./src/index.js']\n  },\n  output: {\n    path: path.resolve(process.cwd(), './lib'),\n    publicPath: '/dist/',\n    filename: 'element-ui.common.js',\n    chunkFilename: '[id].js',\n    libraryExport: 'default',\n    library: 'ELEMENT',\n    libraryTarget: 'commonjs2'\n  },\n  resolve: {\n    extensions: ['.js', '.vue', '.json'],\n    alias: config.alias,\n    modules: ['node_modules']\n  },\n  externals: config.externals,\n  performance: {\n    hints: false\n  },\n  stats: {\n    children: false\n  },\n  optimization: {\n    minimize: false\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.(jsx?|babel|es6)$/,\n        include: process.cwd(),\n        exclude: config.jsexclude,\n        loader: 'babel-loader'\n      },\n      {\n        test: /\\.vue$/,\n        loader: 'vue-loader',\n        options: {\n          compilerOptions: {\n            preserveWhitespace: false\n          }\n        }\n      },\n      {\n        test: /\\.css$/,\n        loaders: ['style-loader', 'css-loader']\n      },\n      {\n        test: /\\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\\?\\S*)?$/,\n        loader: 'url-loader',\n        query: {\n          limit: 10000,\n          name: path.posix.join('static', '[name].[hash:7].[ext]')\n        }\n      }\n    ]\n  },\n  plugins: [\n    new ProgressBarPlugin(),\n    new VueLoaderPlugin()\n  ]\n};\n"
  },
  {
    "path": "build/webpack.component.js",
    "content": "const path = require('path');\nconst ProgressBarPlugin = require('progress-bar-webpack-plugin');\nconst VueLoaderPlugin = require('vue-loader/lib/plugin');\n\nconst Components = require('../components.json');\nconst config = require('./config');\n\nconst webpackConfig = {\n  mode: 'production',\n  entry: Components,\n  output: {\n    path: path.resolve(process.cwd(), './lib'),\n    publicPath: '/dist/',\n    filename: '[name].js',\n    chunkFilename: '[id].js',\n    libraryTarget: 'commonjs2'\n  },\n  resolve: {\n    extensions: ['.js', '.vue', '.json'],\n    alias: config.alias,\n    modules: ['node_modules']\n  },\n  externals: config.externals,\n  performance: {\n    hints: false\n  },\n  stats: 'none',\n  optimization: {\n    minimize: false\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.(jsx?|babel|es6)$/,\n        include: process.cwd(),\n        exclude: config.jsexclude,\n        loader: 'babel-loader'\n      },\n      {\n        test: /\\.vue$/,\n        loader: 'vue-loader',\n        options: {\n          compilerOptions: {\n            preserveWhitespace: false\n          }\n        }\n      },\n      {\n        test: /\\.css$/,\n        loaders: ['style-loader', 'css-loader']\n      },\n      {\n        test: /\\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\\?\\S*)?$/,\n        loader: 'url-loader',\n        query: {\n          limit: 10000,\n          name: path.posix.join('static', '[name].[hash:7].[ext]')\n        }\n      }\n    ]\n  },\n  plugins: [\n    new ProgressBarPlugin(),\n    new VueLoaderPlugin()\n  ]\n};\n\nmodule.exports = webpackConfig;\n"
  },
  {
    "path": "build/webpack.conf.js",
    "content": "const path = require('path');\nconst ProgressBarPlugin = require('progress-bar-webpack-plugin');\nconst VueLoaderPlugin = require('vue-loader/lib/plugin');\nconst TerserPlugin = require('terser-webpack-plugin');\n\nconst config = require('./config');\n\nmodule.exports = {\n  mode: 'production',\n  entry: {\n    app: ['./src/index.js']\n  },\n  output: {\n    path: path.resolve(process.cwd(), './lib'),\n    publicPath: '/dist/',\n    filename: 'index.js',\n    chunkFilename: '[id].js',\n    libraryTarget: 'umd',\n    libraryExport: 'default',\n    library: 'ELEMENT',\n    umdNamedDefine: true,\n    globalObject: 'typeof self !== \\'undefined\\' ? self : this'\n  },\n  resolve: {\n    extensions: ['.js', '.vue', '.json'],\n    alias: config.alias\n  },\n  externals: {\n    vue: config.vue\n  },\n  optimization: {\n    minimizer: [\n      new TerserPlugin({\n        terserOptions: {\n          output: {\n            comments: false\n          }\n        }\n      })\n    ]\n  },\n  performance: {\n    hints: false\n  },\n  stats: {\n    children: false\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.(jsx?|babel|es6)$/,\n        include: process.cwd(),\n        exclude: config.jsexclude,\n        loader: 'babel-loader'\n      },\n      {\n        test: /\\.vue$/,\n        loader: 'vue-loader',\n        options: {\n          compilerOptions: {\n            preserveWhitespace: false\n          }\n        }\n      }\n    ]\n  },\n  plugins: [\n    new ProgressBarPlugin(),\n    new VueLoaderPlugin()\n  ]\n};\n"
  },
  {
    "path": "build/webpack.demo.js",
    "content": "const path = require('path');\nconst webpack = require('webpack');\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\nconst CopyWebpackPlugin = require('copy-webpack-plugin');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst ProgressBarPlugin = require('progress-bar-webpack-plugin');\nconst VueLoaderPlugin = require('vue-loader/lib/plugin');\nconst OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');\nconst UglifyJsPlugin = require('uglifyjs-webpack-plugin');\nconst launchEditorMiddleware = require('launch-editor-middleware');\n\nconst config = require('./config');\n\nconst isProd = process.env.NODE_ENV === 'production';\nconst isPlay = !!process.env.PLAY_ENV;\n\nconst webpackConfig = {\n  mode: process.env.NODE_ENV,\n  entry: isProd ? {\n    docs: './examples/entry.js'\n  } : (isPlay ? './examples/play.js' : './examples/entry.js'),\n  output: {\n    path: path.resolve(process.cwd(), './examples/element-ui/'),\n    publicPath: process.env.CI_ENV || '',\n    filename: '[name].[hash:7].js',\n    chunkFilename: isProd ? '[name].[hash:7].js' : '[name].js'\n  },\n  resolve: {\n    extensions: ['.js', '.vue', '.json'],\n    alias: config.alias,\n    modules: ['node_modules']\n  },\n  devServer: {\n    host: '0.0.0.0',\n    port: 8085,\n    publicPath: '/',\n    hot: true,\n    before: (app) => {\n      /*\n       * 编辑器类型 :此处的指令表示的时各个各个编辑器在cmd或terminal中的命令\n       * webstorm\n       * code // vscode\n       * idea\n      */\n      app.use('/__open-in-editor', launchEditorMiddleware('code'));\n    }\n  },\n  performance: {\n    hints: false\n  },\n  stats: {\n    children: false\n  },\n  module: {\n    rules: [\n      {\n        enforce: 'pre',\n        test: /\\.(vue|jsx?)$/,\n        exclude: /node_modules/,\n        loader: 'eslint-loader'\n      },\n      {\n        test: /\\.(jsx?|babel|es6)$/,\n        include: process.cwd(),\n        exclude: config.jsexclude,\n        loader: 'babel-loader'\n      },\n      {\n        test: /\\.vue$/,\n        loader: 'vue-loader',\n        options: {\n          compilerOptions: {\n            preserveWhitespace: false\n          }\n        }\n      },\n      {\n        test: /\\.(scss|css)$/,\n        use: [\n          isProd ? MiniCssExtractPlugin.loader : 'style-loader',\n          'css-loader',\n          'sass-loader'\n        ]\n      },\n      {\n        test: /\\.md$/,\n        use: [\n          {\n            loader: 'vue-loader',\n            options: {\n              compilerOptions: {\n                preserveWhitespace: false\n              }\n            }\n          },\n          {\n            loader: path.resolve(__dirname, './md-loader/index.js')\n          }\n        ]\n      },\n      {\n        test: /\\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\\?\\S*)?$/,\n        loader: 'url-loader',\n        // todo: 这种写法有待调整\n        query: {\n          limit: 10000,\n          name: path.posix.join('static', '[name].[hash:7].[ext]')\n        }\n      }\n    ]\n  },\n  plugins: [\n    new webpack.HotModuleReplacementPlugin(),\n    new HtmlWebpackPlugin({\n      template: './examples/index.tpl',\n      filename: './index.html',\n      favicon: './examples/favicon.ico'\n    }),\n    new CopyWebpackPlugin([\n      { from: 'examples/versions.json' }\n    ]),\n    new ProgressBarPlugin(),\n    new VueLoaderPlugin(),\n    new webpack.DefinePlugin({\n      'process.env.FAAS_ENV': JSON.stringify(process.env.FAAS_ENV)\n    }),\n    new webpack.LoaderOptionsPlugin({\n      vue: {\n        compilerOptions: {\n          preserveWhitespace: false\n        }\n      }\n    })\n  ],\n  optimization: {\n    minimizer: []\n  },\n  devtool: '#eval-source-map'\n};\n\nif (isProd) {\n  webpackConfig.externals = {\n    vue: 'Vue',\n    'vue-router': 'VueRouter',\n    'highlight.js': 'hljs'\n  };\n  webpackConfig.plugins.push(\n    new MiniCssExtractPlugin({\n      filename: '[name].[contenthash:7].css'\n    })\n  );\n  webpackConfig.optimization.minimizer.push(\n    new UglifyJsPlugin({\n      cache: true,\n      parallel: true,\n      sourceMap: false\n    }),\n    new OptimizeCSSAssetsPlugin({})\n  );\n  // https://webpack.js.org/configuration/optimization/#optimizationsplitchunks\n  webpackConfig.optimization.splitChunks = {\n    cacheGroups: {\n      vendor: {\n        test: /\\/src\\//,\n        name: 'element-ui',\n        chunks: 'all'\n      }\n    }\n  };\n  webpackConfig.devtool = false;\n}\n\nmodule.exports = webpackConfig;\n"
  },
  {
    "path": "build/webpack.extension.js",
    "content": "const path = require('path');\nconst CopyWebpackPlugin = require('copy-webpack-plugin');\nconst demoConfig = require('./webpack.demo');\nconst webpack = require('webpack');\nconst ProgressBarPlugin = require('progress-bar-webpack-plugin');\nconst VueLoaderPlugin = require('vue-loader/lib/plugin');\n\ndemoConfig.entry = {\n  background: path.join(process.cwd(), './examples/extension/src/background'),\n  entry: path.join(process.cwd(), './examples/extension/src/entry')\n};\ndemoConfig.output = {\n  path: path.join(process.cwd(), './examples/extension/dist'),\n  filename: '[name].js'\n};\ndemoConfig.plugins = [\n  new CopyWebpackPlugin([\n    { from: 'examples/extension/src/manifest.json' },\n    { from: 'examples/extension/src/icon.png' }\n  ]),\n  new VueLoaderPlugin(),\n  new ProgressBarPlugin(),\n  new webpack.LoaderOptionsPlugin({\n    vue: {\n      compilerOptions: {\n        preserveWhitespace: false\n      }\n    }\n  }),\n  new webpack.HotModuleReplacementPlugin()\n];\ndemoConfig.module.rules.find(a => a.loader === 'url-loader').query = {};\nmodule.exports = demoConfig;\n"
  },
  {
    "path": "build/webpack.test.js",
    "content": "const path = require('path');\nconst ProgressBarPlugin = require('progress-bar-webpack-plugin');\nconst VueLoaderPlugin = require('vue-loader/lib/plugin');\n\nconst config = require('./config');\n\nconst webpackConfig = {\n  mode: 'development',\n  entry: {\n    app: ['./src/index.js']\n  },\n  output: {\n    path: path.resolve(process.cwd(), './dist'),\n    publicPath: '/dist/',\n    filename: '[name].js',\n    chunkFilename: '[id].js'\n  },\n  resolve: {\n    extensions: ['.js', '.vue', '.json'],\n    alias: Object.assign(config.alias, {\n      'vue$': 'vue/dist/vue.common.js'\n    }),\n    modules: ['node_modules']\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.(jsx?|babel|es6)$/,\n        include: process.cwd(),\n        exclude: config.jsexclude,\n        loader: 'babel-loader'\n      },\n      {\n        test: /\\.vue$/,\n        loader: 'vue-loader',\n        options: {\n          compilerOptions: {\n            preserveWhitespace: false\n          }\n        }\n      },\n      {\n        test: /\\.css$/,\n        loaders: ['style-loader', 'css-loader']\n      },\n      {\n        test: /\\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\\?\\S*)?$/,\n        loader: 'url-loader',\n        query: {\n          limit: 10000,\n          name: path.posix.join('static', '[name].[hash:7].[ext]')\n        }\n      }\n    ]\n  },\n  plugins: [\n    new VueLoaderPlugin()\n  ]\n};\n\nif (!process.env.CI_ENV) {\n  webpackConfig.plugins.push(\n    new ProgressBarPlugin()\n  );\n}\n\nmodule.exports = webpackConfig;\n"
  },
  {
    "path": "components.json",
    "content": "{\n  \"pagination\": \"./packages/pagination/index.js\",\n  \"dialog\": \"./packages/dialog/index.js\",\n  \"autocomplete\": \"./packages/autocomplete/index.js\",\n  \"dropdown\": \"./packages/dropdown/index.js\",\n  \"dropdown-menu\": \"./packages/dropdown-menu/index.js\",\n  \"dropdown-item\": \"./packages/dropdown-item/index.js\",\n  \"menu\": \"./packages/menu/index.js\",\n  \"submenu\": \"./packages/submenu/index.js\",\n  \"menu-item\": \"./packages/menu-item/index.js\",\n  \"menu-item-group\": \"./packages/menu-item-group/index.js\",\n  \"input\": \"./packages/input/index.js\",\n  \"input-number\": \"./packages/input-number/index.js\",\n  \"radio\": \"./packages/radio/index.js\",\n  \"radio-group\": \"./packages/radio-group/index.js\",\n  \"radio-button\": \"./packages/radio-button/index.js\",\n  \"checkbox\": \"./packages/checkbox/index.js\",\n  \"checkbox-button\": \"./packages/checkbox-button/index.js\",\n  \"checkbox-group\": \"./packages/checkbox-group/index.js\",\n  \"switch\": \"./packages/switch/index.js\",\n  \"select\": \"./packages/select/index.js\",\n  \"option\": \"./packages/option/index.js\",\n  \"option-group\": \"./packages/option-group/index.js\",\n  \"button\": \"./packages/button/index.js\",\n  \"button-group\": \"./packages/button-group/index.js\",\n  \"table\": \"./packages/table/index.js\",\n  \"table-column\": \"./packages/table-column/index.js\",\n  \"date-picker\": \"./packages/date-picker/index.js\",\n  \"time-select\": \"./packages/time-select/index.js\",\n  \"time-picker\": \"./packages/time-picker/index.js\",\n  \"popover\": \"./packages/popover/index.js\",\n  \"tooltip\": \"./packages/tooltip/index.js\",\n  \"message-box\": \"./packages/message-box/index.js\",\n  \"breadcrumb\": \"./packages/breadcrumb/index.js\",\n  \"breadcrumb-item\": \"./packages/breadcrumb-item/index.js\",\n  \"form\": \"./packages/form/index.js\",\n  \"form-item\": \"./packages/form-item/index.js\",\n  \"tabs\": \"./packages/tabs/index.js\",\n  \"tab-pane\": \"./packages/tab-pane/index.js\",\n  \"tag\": \"./packages/tag/index.js\",\n  \"tree\": \"./packages/tree/index.js\",\n  \"alert\": \"./packages/alert/index.js\",\n  \"notification\": \"./packages/notification/index.js\",\n  \"slider\": \"./packages/slider/index.js\",\n  \"loading\": \"./packages/loading/index.js\",\n  \"icon\": \"./packages/icon/index.js\",\n  \"row\": \"./packages/row/index.js\",\n  \"col\": \"./packages/col/index.js\",\n  \"upload\": \"./packages/upload/index.js\",\n  \"progress\": \"./packages/progress/index.js\",\n  \"spinner\": \"./packages/spinner/index.js\",\n  \"message\": \"./packages/message/index.js\",\n  \"badge\": \"./packages/badge/index.js\",\n  \"card\": \"./packages/card/index.js\",\n  \"rate\": \"./packages/rate/index.js\",\n  \"steps\": \"./packages/steps/index.js\",\n  \"step\": \"./packages/step/index.js\",\n  \"carousel\": \"./packages/carousel/index.js\",\n  \"scrollbar\": \"./packages/scrollbar/index.js\",\n  \"carousel-item\": \"./packages/carousel-item/index.js\",\n  \"collapse\": \"./packages/collapse/index.js\",\n  \"collapse-item\": \"./packages/collapse-item/index.js\",\n  \"cascader\": \"./packages/cascader/index.js\",\n  \"color-picker\": \"./packages/color-picker/index.js\",\n  \"transfer\": \"./packages/transfer/index.js\",\n  \"container\": \"./packages/container/index.js\",\n  \"header\": \"./packages/header/index.js\",\n  \"aside\": \"./packages/aside/index.js\",\n  \"main\": \"./packages/main/index.js\",\n  \"footer\": \"./packages/footer/index.js\",\n  \"timeline\": \"./packages/timeline/index.js\",\n  \"timeline-item\": \"./packages/timeline-item/index.js\",\n  \"link\": \"./packages/link/index.js\",\n  \"divider\": \"./packages/divider/index.js\",\n  \"image\": \"./packages/image/index.js\",\n  \"calendar\": \"./packages/calendar/index.js\",\n  \"backtop\": \"./packages/backtop/index.js\",\n  \"infinite-scroll\": \"./packages/infinite-scroll/index.js\",\n  \"page-header\": \"./packages/page-header/index.js\",\n  \"cascader-panel\": \"./packages/cascader-panel/index.js\",\n  \"avatar\": \"./packages/avatar/index.js\",\n  \"drawer\": \"./packages/drawer/index.js\",\n  \"statistic\": \"./packages/statistic/index.js\",\n  \"popconfirm\": \"./packages/popconfirm/index.js\",\n  \"skeleton\": \"./packages/skeleton/index.js\",\n  \"skeleton-item\": \"./packages/skeleton-item/index.js\",\n  \"empty\": \"./packages/empty/index.js\",\n  \"descriptions\": \"./packages/descriptions/index.js\",\n  \"descriptions-item\": \"./packages/descriptions-item/index.js\",\n  \"result\": \"./packages/result/index.js\"\n}\n"
  },
  {
    "path": "examples/app.vue",
    "content": "<template>\n  <div id=\"app\" :class=\"{ 'is-component': isComponent }\">\n    <main-header v-if=\"lang !== 'play'\"></main-header>\n    <div class=\"main-cnt\">\n      <router-view></router-view>\n    </div>\n    <main-footer v-if=\"lang !== 'play' && !isComponent\"></main-footer>\n  </div>\n</template>\n\n<script>\n  import { use } from 'main/locale';\n  import zhLocale from 'main/locale/lang/zh-CN';\n  import enLocale from 'main/locale/lang/en';\n  import esLocale from 'main/locale/lang/es';\n  import frLocale from 'main/locale/lang/fr';\n\n  const lang = location.hash.replace('#', '').split('/')[1] || 'zh-CN';\n  const localize = lang => {\n    switch (lang) {\n      case 'zh-CN':\n        use(zhLocale);\n        break;\n      case 'es':\n        use(esLocale);\n        break;\n      case 'fr-FR':\n        use(frLocale);\n        break;\n      default:\n        use(enLocale);\n    }\n  };\n  localize(lang);\n\n  export default {\n    name: 'app',\n\n    computed: {\n      lang() {\n        return this.$route.path.split('/')[1] || 'zh-CN';\n      },\n      isComponent() {\n        return /^component-/.test(this.$route.name || '');\n      }\n    },\n\n    watch: {\n      lang(val) {\n        if (val === 'zh-CN') {\n          this.suggestJump();\n        }\n        localize(val);\n      }\n    },\n\n    methods: {\n      suggestJump() {\n        if (process.env.NODE_ENV !== 'production') return;\n\n        const href = location.href;\n        const preferGithub = localStorage.getItem('PREFER_GITHUB');\n        const cnHref = href.indexOf('eleme.cn') > -1 || href.indexOf('element-cn') > -1 || href.indexOf('element.faas') > -1;\n        if (cnHref || preferGithub) return;\n        setTimeout(() => {\n          if (this.lang !== 'zh-CN') return;\n          this.$confirm('建议大陆用户访问部署在国内的站点，是否跳转？', '提示')\n            .then(() => {\n              location.replace('https://element.eleme.cn');\n            })\n            .catch(() => {\n              localStorage.setItem('PREFER_GITHUB', 'true');\n            });\n        }, 1000);\n      }\n    },\n\n    mounted() {\n      localize(this.lang);\n      if (this.lang === 'zh-CN') {\n        this.suggestJump();\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "examples/assets/styles/common.css",
    "content": "html, body {\n  margin: 0;\n  padding: 0;\n  height: 100%;\n  font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;\n  font-weight: 400;\n  -webkit-font-smoothing: antialiased;\n  -webkit-tap-highlight-color: transparent;\n\n  &.is-component {\n    overflow: hidden;\n  }\n}\n\n#app {\n  height: 100%;\n  \n  &.is-component {\n    overflow-y: hidden;\n\n    .main-cnt {\n      padding: 0;\n      margin-top: 0;\n      height: 100%;\n      min-height: auto;\n    }\n\n    .headerWrapper {\n      position: fixed;\n      width: 100%;\n      left: 0;\n      top: 0;\n      z-index: 1500;\n      \n      .container {\n        padding: 0;\n      }\n    }\n  }\n}\n\na {\n  color: #409EFF;\n  text-decoration: none;\n}\n\ncode {\n  background-color: #f9fafc;\n  padding: 0 4px;\n  border: 1px solid #eaeefb;\n  border-radius: 4px;\n}\n\nbutton, input, select, textarea {\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  color: inherit;\n}\n\n.hljs {\n  line-height: 1.8;\n  font-family: Menlo, Monaco, Consolas, Courier, monospace;\n  font-size: 12px;\n  padding: 18px 24px;\n  background-color: #fafafa;\n  border: solid 1px #eaeefb;\n  margin-bottom: 25px;\n  border-radius: 4px;\n  -webkit-font-smoothing: auto;\n}\n\n.main-cnt {\n  margin-top: -80px;\n  padding: 80px 0 340px;\n  box-sizing: border-box;\n  min-height: 100%;\n}\n\n.container,\n.page-container {\n  width: 1140px;\n  padding: 0;\n  margin: 0 auto;\n}\n\n.page-container {\n  padding-top: 55px;\n\n  h2 {\n    font-size: 28px;\n    color: #1f2d3d;\n    margin: 0;\n  }\n  h3 {\n    font-size: 22px;\n  }\n  h2, h3, h4, h5 {\n    font-weight: normal;\n    color: #1f2f3d;\n\n    &:hover a {\n      opacity: .4;\n    }\n\n    a {\n      float: left;\n      margin-left: -20px;\n      opacity: 0;\n      cursor: pointer;\n\n      &:hover {\n        opacity: .4;\n      }\n    }\n  }\n\n  p {\n    font-size: 14px;\n    color: #5e6d82;\n    line-height: 1.5em;\n  }\n\n  .tip {\n    padding: 8px 16px;\n    background-color: #ECF8FF;\n    border-radius: 4px;\n    border-left: #50bfff 5px solid;\n    margin: 20px 0;\n\n    code {\n      background-color: rgba(255, 255, 255, .7);\n      color: #445368;\n    }\n  }\n\n  .warning {\n    padding: 8px 16px;\n    background-color: #fff6f7;\n    border-radius: 4px;\n    border-left: #FE6C6F 5px solid;\n    margin: 20px 0;\n\n    code {\n      background-color: rgba(255, 255, 255, .7);\n      color: #445368;\n    }\n  }\n}\n.demo {\n  margin: 20px 0;\n}\n@media (max-width: 1140px) {\n  .container,\n  .page-container {\n    width: 100%;\n  }\n}\n\n@media (max-width: 768px) {\n  .container,\n  .page-container {\n    padding: 0 20px;\n  }\n\n  #app.is-component .headerWrapper .container {\n    padding: 0 12px;\n  }\n}\n"
  },
  {
    "path": "examples/assets/styles/fonts/style.css",
    "content": "@font-face {\n  font-family: 'icomoon';\n  src:  url('icomoon.eot?h6xgdm');\n  src:  url('icomoon.eot?h6xgdm#iefix') format('embedded-opentype'),\n    url('icomoon.ttf?h6xgdm') format('truetype'),\n    url('icomoon.woff?h6xgdm') format('woff'),\n    url('icomoon.svg?h6xgdm#icomoon') format('svg');\n  font-weight: normal;\n  font-style: normal;\n}\n\n[class^=\"icon-\"], [class*=\" icon-\"] {\n  /* use !important to prevent issues with browser extensions that change fonts */\n  font-family: 'icomoon' !important;\n  speak: none;\n  font-style: normal;\n  font-weight: normal;\n  font-variant: normal;\n  text-transform: none;\n  line-height: 1;\n\n  /* Better Font Rendering =========== */\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.icon-rate-face-off:before {\n  content: \"\\e900\";\n}\n.icon-rate-face-1:before {\n  content: \"\\e901\";\n}\n.icon-rate-face-2:before {\n  content: \"\\e902\";\n}\n.icon-rate-face-3:before {\n  content: \"\\e903\";\n}\n\n"
  },
  {
    "path": "examples/bus.js",
    "content": "import Vue from 'vue';\nexport default new Vue();\n"
  },
  {
    "path": "examples/color.js",
    "content": "export const tintColor = (c, tint) => {\n  const color = c.replace('#', '');\n  let red = parseInt(color.slice(0, 2), 16);\n  let green = parseInt(color.slice(2, 4), 16);\n  let blue = parseInt(color.slice(4, 6), 16);\n\n  if (tint === 0) { // when primary color is in its rgb space\n    return [red, green, blue].join(',');\n  } else {\n    red += Math.round(tint * (255 - red));\n    green += Math.round(tint * (255 - green));\n    blue += Math.round(tint * (255 - blue));\n    red = red.toString(16);\n    green = green.toString(16);\n    blue = blue.toString(16);\n    return `#${ red }${ green }${ blue }`;\n  }\n};\n"
  },
  {
    "path": "examples/components/demo-block.vue",
    "content": "<template>\n  <div\n    class=\"demo-block\"\n    :class=\"[blockClass, { 'hover': hovering }]\"\n    @mouseenter=\"hovering = true\"\n    @mouseleave=\"hovering = false\">\n    <div class=\"source\">\n      <slot name=\"source\"></slot>\n    </div>\n    <div class=\"meta\" ref=\"meta\">\n      <div class=\"description\" v-if=\"$slots.default\">\n        <slot></slot>\n      </div>\n      <div class=\"highlight\">\n        <slot name=\"highlight\"></slot>\n      </div>\n    </div>\n    <div\n      class=\"demo-block-control\"\n      ref=\"control\"\n      :class=\"{ 'is-fixed': fixedControl }\"\n      @click=\"isExpanded = !isExpanded\">\n      <transition name=\"arrow-slide\">\n        <i :class=\"[iconClass, { 'hovering': hovering }]\"></i>\n      </transition>\n      <transition name=\"text-slide\">\n        <span v-show=\"hovering\">{{ controlText }}</span>\n      </transition>\n      <el-tooltip effect=\"dark\" :content=\"langConfig['tooltip-text']\" placement=\"right\">\n        <transition name=\"text-slide\">\n          <el-button\n            v-show=\"hovering || isExpanded\"\n            size=\"small\"\n            type=\"text\"\n            class=\"control-button\"\n            @click.stop=\"goCodepen\">\n            {{ langConfig['button-text'] }}\n          </el-button>\n        </transition>\n      </el-tooltip>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\">\n  .demo-block {\n    border: solid 1px #ebebeb;\n    border-radius: 3px;\n    transition: .2s;\n\n    &.hover {\n      box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5);\n    }\n\n    code {\n      font-family: Menlo, Monaco, Consolas, Courier, monospace;\n    }\n\n    .demo-button {\n      float: right;\n    }\n\n    .source {\n      padding: 24px;\n    }\n\n    .meta {\n      background-color: #fafafa;\n      border-top: solid 1px #eaeefb;\n      overflow: hidden;\n      height: 0;\n      transition: height .2s;\n    }\n\n    .description {\n      padding: 20px;\n      box-sizing: border-box;\n      border: solid 1px #ebebeb;\n      border-radius: 3px;\n      font-size: 14px;\n      line-height: 22px;\n      color: #666;\n      word-break: break-word;\n      margin: 10px;\n      background-color: #fff;\n\n      p {\n        margin: 0;\n        line-height: 26px;\n      }\n\n      code {\n        color: #5e6d82;\n        background-color: #e6effb;\n        margin: 0 4px;\n        display: inline-block;\n        padding: 1px 5px;\n        font-size: 12px;\n        border-radius: 3px;\n        height: 18px;\n        line-height: 18px;\n      }\n    }\n\n    .highlight {\n      pre {\n        margin: 0;\n      }\n\n      code.hljs {\n        margin: 0;\n        border: none;\n        max-height: none;\n        border-radius: 0;\n\n        &::before {\n          content: none;\n        }\n      }\n    }\n\n    .demo-block-control {\n      border-top: solid 1px #eaeefb;\n      height: 44px;\n      box-sizing: border-box;\n      background-color: #fff;\n      border-bottom-left-radius: 4px;\n      border-bottom-right-radius: 4px;\n      text-align: center;\n      margin-top: -1px;\n      color: #d3dce6;\n      cursor: pointer;\n      position: relative;\n    \n      &.is-fixed {\n        position: fixed;\n        bottom: 0;\n        width: 868px;\n      }\n\n      i {\n        font-size: 16px;\n        line-height: 44px;\n        transition: .3s;\n        &.hovering {\n          transform: translateX(-40px);\n        }\n      }\n\n      > span {\n        position: absolute;\n        transform: translateX(-30px);\n        font-size: 14px;\n        line-height: 44px;\n        transition: .3s;\n        display: inline-block;\n      }\n\n      &:hover {\n        color: #409EFF;\n        background-color: #f9fafc;\n      }\n\n      & .text-slide-enter,\n      & .text-slide-leave-active {\n        opacity: 0;\n        transform: translateX(10px);\n      }\n      \n      .control-button {\n        line-height: 26px;\n        position: absolute;\n        top: 0;\n        right: 0;\n        font-size: 14px;\n        padding-left: 5px;\n        padding-right: 25px;\n      }\n    }\n  }\n</style>\n\n<script type=\"text/babel\">\n  import compoLang from '../i18n/component.json';\n  import Element from 'main/index.js';\n  import { stripScript, stripStyle, stripTemplate } from '../util';\n  const { version } = Element;\n\n  export default {\n    data() {\n      return {\n        codepen: {\n          script: '',\n          html: '',\n          style: ''\n        },\n        hovering: false,\n        isExpanded: false,\n        fixedControl: false,\n        scrollParent: null\n      };\n    },\n\n    methods: {\n      goCodepen() {\n        // since 2.6.2 use code rather than jsfiddle https://blog.codepen.io/documentation/api/prefill/\n        const { script, html, style } = this.codepen;\n        const resourcesTpl = '<scr' + 'ipt src=\"//unpkg.com/vue@2/dist/vue.js\"></scr' + 'ipt>' +\n        '\\n<scr' + `ipt src=\"//unpkg.com/element-ui@${ version }/lib/index.js\"></scr` + 'ipt>';\n        let jsTpl = (script || '').replace(/export default/, 'var Main =').trim();\n        let htmlTpl = `${resourcesTpl}\\n<div id=\"app\">\\n${html.trim()}\\n</div>`;\n        let cssTpl = `@import url(\"//unpkg.com/element-ui@${ version }/lib/theme-chalk/index.css\");\\n${(style || '').trim()}\\n`;\n        jsTpl = jsTpl\n          ? jsTpl + '\\nvar Ctor = Vue.extend(Main)\\nnew Ctor().$mount(\\'#app\\')'\n          : 'new Vue().$mount(\\'#app\\')';\n        const data = {\n          js: jsTpl,\n          css: cssTpl,\n          html: htmlTpl\n        };\n        const form = document.getElementById('fiddle-form') || document.createElement('form');\n        while (form.firstChild) {\n          form.removeChild(form.firstChild);\n        }\n        form.method = 'POST';\n        form.action = 'https://codepen.io/pen/define/';\n        form.target = '_blank';\n        form.style.display = 'none';\n\n        const input = document.createElement('input');\n        input.setAttribute('name', 'data');\n        input.setAttribute('type', 'hidden');\n        input.setAttribute('value', JSON.stringify(data));\n\n        form.appendChild(input);\n        document.body.appendChild(form);\n\n        form.submit();\n      },\n\n      scrollHandler() {\n        const { top, bottom, left } = this.$refs.meta.getBoundingClientRect();\n        this.fixedControl = bottom > document.documentElement.clientHeight &&\n          top + 44 <= document.documentElement.clientHeight;\n        this.$refs.control.style.left = this.fixedControl ? `${ left }px` : '0';\n      },\n\n      removeScrollHandler() {\n        this.scrollParent && this.scrollParent.removeEventListener('scroll', this.scrollHandler);\n      }\n    },\n\n    computed: {\n      lang() {\n        return this.$route.path.split('/')[1];\n      },\n\n      langConfig() {\n        return compoLang.filter(config => config.lang === this.lang)[0]['demo-block'];\n      },\n\n      blockClass() {\n        return `demo-${ this.lang } demo-${ this.$router.currentRoute.path.split('/').pop() }`;\n      },\n\n      iconClass() {\n        return this.isExpanded ? 'el-icon-caret-top' : 'el-icon-caret-bottom';\n      },\n\n      controlText() {\n        return this.isExpanded ? this.langConfig['hide-text'] : this.langConfig['show-text'];\n      },\n\n      codeArea() {\n        return this.$el.getElementsByClassName('meta')[0];\n      },\n\n      codeAreaHeight() {\n        if (this.$el.getElementsByClassName('description').length > 0) {\n          return this.$el.getElementsByClassName('description')[0].clientHeight +\n            this.$el.getElementsByClassName('highlight')[0].clientHeight + 20;\n        }\n        return this.$el.getElementsByClassName('highlight')[0].clientHeight;\n      }\n    },\n\n    watch: {\n      isExpanded(val) {\n        this.codeArea.style.height = val ? `${ this.codeAreaHeight + 1 }px` : '0';\n        if (!val) {\n          this.fixedControl = false;\n          this.$refs.control.style.left = '0';\n          this.removeScrollHandler();\n          return;\n        }\n        setTimeout(() => {\n          this.scrollParent = document.querySelector('.page-component__scroll > .el-scrollbar__wrap');\n          this.scrollParent && this.scrollParent.addEventListener('scroll', this.scrollHandler);\n          this.scrollHandler();\n        }, 200);\n      }\n    },\n\n    created() {\n      const highlight = this.$slots.highlight;\n      if (highlight && highlight[0]) {\n        let code = '';\n        let cur = highlight[0];\n        if (cur.tag === 'pre' && (cur.children && cur.children[0])) {\n          cur = cur.children[0];\n          if (cur.tag === 'code') {\n            code = cur.children[0].text;\n          }\n        }\n        if (code) {\n          this.codepen.html = stripTemplate(code);\n          this.codepen.script = stripScript(code);\n          this.codepen.style = stripStyle(code);\n        }\n      }\n    },\n\n    mounted() {\n      this.$nextTick(() => {\n        let highlight = this.$el.getElementsByClassName('highlight')[0];\n        if (this.$el.getElementsByClassName('description').length === 0) {\n          highlight.style.width = '100%';\n          highlight.borderRight = 'none';\n        }\n      });\n    },\n\n    beforeDestroy() {\n      this.removeScrollHandler();\n    }\n  };\n</script>\n"
  },
  {
    "path": "examples/components/footer-nav.vue",
    "content": "<template>\n  <div class=\"footer-nav\">\n    <span\n      v-if=\"leftNav\"\n      class=\"footer-nav-link footer-nav-left\"\n      @click=\"handleNavClick('prev')\">\n      <i class=\"el-icon-arrow-left\"></i>\n      {{ leftNav.title || leftNav.name }}\n    </span>\n    <span\n      v-if=\"rightNav\"\n      class=\"footer-nav-link footer-nav-right\"\n      @click=\"handleNavClick('next')\">\n      {{ rightNav.title || rightNav.name }}\n      <i class=\"el-icon-arrow-right\"></i>\n    </span>\n  </div>\n</template>\n\n<style lang=\"scss\">\n  .footer-nav {\n    padding: 40px 0;\n    color: #333;\n    font-size: 14px;\n    \n    &::after {\n      content: '';\n      display: block;\n      clear: both;\n    }\n     \n    & i {\n      transition: .3s;\n      color: #999;\n      vertical-align: baseline;\n    }\n  }\n  \n  .footer-nav-link {\n    cursor: pointer;\n    transition: .3s;\n    \n    &:hover {\n      color: #409EFF;\n     \n      & i {\n        color: #409EFF;\n      }\n    }\n  }\n  \n  .footer-nav-left {\n    float: left;\n    margin-left: -4px;\n  }\n  \n  .footer-nav-right {\n    float: right;\n    margin-right: -4px;\n  }\n</style>\n\n<script>\n  import navConfig from '../nav.config.json';\n\n  export default {\n    data() {\n      return {\n        currentComponent: null,\n        nav: [],\n        currentIndex: -1,\n        leftNav: null,\n        rightNav: null\n      };\n    },\n\n    computed: {\n      lang() {\n        return this.$route.meta.lang;\n      }\n    },\n\n    watch: {\n      '$route.path'() {\n        this.setNav();\n        this.updateNav();\n      }\n    },\n\n    methods: {\n      setNav() {\n        let nav = navConfig[this.lang];\n        this.nav = [nav[0]].concat(nav[3].children);\n        nav[4].groups.map(group => group.list).forEach(list => {\n          this.nav = this.nav.concat(list);\n        });\n      },\n\n      updateNav() {\n        this.currentComponent = '/' + this.$route.path.split('/')[3];\n        for (let i = 0, len = this.nav.length; i < len; i++) {\n          if (this.nav[i].path === this.currentComponent) {\n            this.currentIndex = i;\n            break;\n          }\n        }\n        this.leftNav = this.nav[this.currentIndex - 1];\n        this.rightNav = this.nav[this.currentIndex + 1];\n      },\n\n      handleNavClick(direction) {\n        this.$router.push(`/${ this.lang }/component${ direction === 'prev' ? this.leftNav.path : this.rightNav.path }`);\n      }\n    },\n\n    created() {\n      this.setNav();\n      this.updateNav();\n    }\n  };\n</script>"
  },
  {
    "path": "examples/components/footer.vue",
    "content": "<template>\n  <footer class=\"footer\">\n    <div class=\"container\">\n      <div class=\"footer-main\">\n        <h4>{{ langConfig.links }}</h4>\n        <a href=\"https://github.com/ElemeFE/element\" class=\"footer-main-link\" target=\"_blank\">{{ langConfig.repo }}</a>\n        <a href=\"https://github.com/ElemeFE/element/releases\" class=\"footer-main-link\" target=\"_blank\">{{ langConfig.changelog }}</a>\n        <a href=\"https://github.com/ElemeFE/element/blob/dev/FAQ.md\" class=\"footer-main-link\" target=\"_blank\">{{ langConfig.faq }}</a>\n        <a href=\"https://github.com/ElementUI/element-starter\" class=\"footer-main-link\" target=\"_blank\">{{ langConfig.starter }}</a>\n        <a :href=\"'/#/' + lang + '/component/custom-theme'\" class=\"footer-main-link\" target=\"_blank\">{{ langConfig.theme }}</a>\n        <a href=\"https://github.com/elemefe/element-react\" class=\"footer-main-link\" target=\"_blank\">Element-React</a>\n        <a href=\"https://github.com/ElemeFE/element-angular\" class=\"footer-main-link\" target=\"_blank\">Element-Angular</a>\n        <a href=\"https://github.com/eleme/morjs\" class=\"footer-main-link\" target=\"_blank\">MorJS</a>\n      </div>\n      <div class=\"footer-main\">\n        <h4>{{ langConfig.community }}</h4>\n        <a :href=\"gitterLink\" class=\"footer-main-link\" target=\"_blank\">{{ langConfig.gitter }}</a>\n        <a href=\"https://github.com/ElemeFE/element/issues\" class=\"footer-main-link\" target=\"_blank\">{{ langConfig.feedback }}</a>\n        <a :href=\"`https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.${ lang }.md`\" class=\"footer-main-link\" target=\"_blank\">{{ langConfig.contribution }}</a>\n        <a href=\"https://segmentfault.com/t/element-ui\" class=\"footer-main-link\" target=\"_blank\">SegmentFault</a>\n        <a href=\"https://github.com/ElementUI/awesome-element\" class=\"footer-main-link\" target=\"_blank\">Awesome Element</a>\n      </div>\n      <div class=\"footer-social\">\n        <p class=\"footer-social-title\">Element {{ version && version.slice(0, 3) }} Fullerene</p>\n        <el-popover\n          ref=\"weixin\"\n          placement=\"top\"\n          width=\"120\"\n          popper-class=\"footer-popover\"\n          trigger=\"hover\">\n          <div class=\"footer-popover-title\">{{ langConfig.elemeTech }}</div>\n          <img src=\"https://gw.alicdn.com/imgextra/i4/O1CN01dBDgJP1t4R3qikGBP_!!6000000005848-0-tps-344-344.jpg\" alt=\"\">\n        </el-popover>\n        <el-popover\n          ref=\"weixin\"\n          placement=\"top\"\n          width=\"120\"\n          popper-class=\"footer-popover\"\n          trigger=\"hover\">\n          <div class=\"footer-popover-title\">{{ langConfig.elemeDesign }}</div>\n          <img src=\"https://gw.alicdn.com/imgextra/i4/O1CN015ha1O71yg3g1QaKEi_!!6000000006607-0-tps-1280-1280.jpg\" alt=\"\">\n        </el-popover>\n        <i class=\"doc-icon-weixin elementdoc\" v-popover:weixin></i>\n        <a href=\"https://github.com/elemefe\" target=\"_blank\">\n          <i class=\"doc-icon-github elementdoc\"></i>\n        </a>\n        <a :href=\"gitterLink\" target=\"_blank\">\n          <i class=\"doc-icon-gitter elementdoc\"></i>\n        </a>\n      </div>\n    </div>\n  </footer>\n</template>\n\n<style lang=\"scss\">\n  .footer {\n    background-color: #F7FBFD;\n    width: 100%;\n    padding: 40px 150px;\n    margin-top: -340px;\n    box-sizing: border-box;\n    height: 340px;\n\n    .container {\n      box-sizing: border-box;\n      width: auto;\n    }\n\n    .footer-main {\n      font-size: 0;\n      display: inline-block;\n      vertical-align: top;\n      margin-right: 110px;\n\n      h4 {\n        font-size: 18px;\n        color: #333;\n        line-height: 1;\n        margin: 0 0 15px 0;\n      }\n\n      .footer-main-link {\n        display: block;\n        margin: 0;\n        line-height: 2;\n        font-size: 14px;\n        color: #666;\n\n        &:hover {\n          color: #333;\n        }\n      }\n    }\n\n    .footer-social {\n      float: right;\n      text-align: right;\n\n      .footer-social-title {\n        color: #666;\n        font-size: 18px;\n        line-height: 1;\n        margin: 0 0 20px 0;\n        padding: 0;\n        font-weight: bold;\n      }\n\n      .elementdoc {\n        transition: .3s;\n        display: inline-block;\n        line-height: 32px;\n        text-align: center;\n        color: #c8d6e8;\n        background-color: transparent;\n        size: 32px;\n        font-size: 32px;\n        vertical-align: middle;\n        margin-right: 20px;\n        &:hover {\n          transform: scale(1.2);\n          color: #8D99AB;\n        }\n      }\n\n      .doc-icon-gitter {\n        margin-right: 0;\n      }\n    }\n  }\n\n  .el-popover.footer-popover {\n    padding: 0;\n    min-width: 120px;\n    line-height: normal;\n    box-shadow: 0 0 11px 0 rgba(174, 187, 211, 0.24);\n\n    .footer-popover-title {\n      border-bottom: solid 1px #eaeefb;\n      height: 30px;\n      line-height: 30px;\n      text-align: center;\n      color: #99a9bf;\n      background-color: #f8f9fe;\n    }\n\n    img {\n      width: 100px;\n      margin: 10px;\n    }\n  }\n  @media (max-width: 1140px) {\n    .footer {\n      height: auto;\n    }\n  }\n\n  @media (max-width: 1000px) {\n    .footer-social {\n      display: none;\n    }\n  }\n\n  @media (max-width: 768px) {\n    .footer {\n      .footer-main {\n        margin-bottom: 30px;\n      }\n    }\n  }\n</style>\n\n<script type=\"text/babel\">\n  import compoLang from '../i18n/component.json';\n  import Element from 'main/index.js';\n  const { version } = Element;\n\n  export default {\n    data() {\n      return {\n        version\n      };\n    },\n\n    computed: {\n      lang() {\n        return this.$route.path.split('/')[1] || 'zh-CN';\n      },\n\n      langConfig() {\n        return compoLang.filter(config => config.lang === this.lang)[0]['footer'];\n      },\n\n      gitterLink() {\n        return this.lang === 'zh-CN' ? 'https://gitter.im/ElemeFE/element' : 'https://gitter.im/element-en/Lobby';\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "examples/components/header.vue",
    "content": "<style lang=\"scss\" scoped>\n  .headerWrapper {\n    height: 80px;\n  }\n\n  #v3-banner {\n    background-color: #409EFF;\n    min-height: 30px;\n    padding: 5px 60px;\n    z-index: 19;\n    box-sizing: border-box;\n    text-align: center;\n    color: #eee;\n  }\n\n  #v3-banner a {\n    color: #FFF;\n    font-weight: bold;\n  }\n\n  .header {\n    height: 80px;\n    background-color: #fff;\n    color: #fff;\n    top: 0;\n    left: 0;\n    width: 100%;\n    line-height: 80px;\n    z-index: 100;\n    position: relative;\n\n    .container {\n      height: 100%;\n      box-sizing: border-box;\n      border-bottom: 1px solid #DCDFE6;\n    }\n\n    .nav-lang-spe {\n      color: #888;\n    }\n\n    h1 {\n      margin: 0;\n      float: left;\n      font-size: 32px;\n      font-weight: normal;\n\n      a {\n        color: #333;\n        text-decoration: none;\n        display: block;\n      }\n\n      span {\n        font-size: 12px;\n        display: inline-block;\n        width: 34px;\n        height: 18px;\n        border: 1px solid rgba(255, 255, 255, .5);\n        text-align: center;\n        line-height: 18px;\n        vertical-align: middle;\n        margin-left: 10px;\n        border-radius: 3px;\n      }\n    }\n\n    .nav {\n      float: right;\n      height: 100%;\n      line-height: 80px;\n      background: transparent;\n      padding: 0;\n      margin: 0;\n      &::before, &::after {\n        display: table;\n        content: \"\";\n      }\n      &::after {\n        clear: both;\n      }\n    }\n\n    .nav-gap {\n      position: relative;\n      width: 1px;\n      height: 80px;\n      padding: 0 20px;\n\n      &::before {\n        content: '';\n        position: absolute;\n        top: calc(50% - 8px);\n        width: 1px;\n        height: 16px;\n        background: #ebebeb;\n      }\n    }\n\n    .nav-logo,\n    .nav-logo-small {\n      vertical-align: sub;\n    }\n\n    .nav-logo-small {\n      display: none;\n    }\n\n    .nav-item {\n      margin: 0;\n      float: left;\n      list-style: none;\n      position: relative;\n      cursor: pointer;\n\n      &.nav-algolia-search {\n        cursor: default;\n      }\n\n      &.lang-item,\n      &:last-child {\n        cursor: default;\n        margin-left: 34px;\n\n        span {\n          opacity: .8;\n        }\n\n        .nav-lang {\n          cursor: pointer;\n          display: inline-block;\n          height: 100%;\n          color: #888;\n\n          &:hover {\n            color: #409EFF;\n          }\n          &.active {\n             font-weight: bold;\n             color: #409EFF;\n           }\n        }\n      }\n\n      a {\n        text-decoration: none;\n        color: #1989FA;\n        opacity: 0.5;\n        display: block;\n        padding: 0 22px;\n\n        &.active,\n        &:hover {\n          opacity: 1;\n        }\n\n        &.active::after {\n          content: '';\n          display: inline-block;\n          position: absolute;\n          bottom: 0;\n          left: calc(50% - 15px);\n          width: 30px;\n          height: 2px;\n          background: #409EFF;\n        }\n      }\n    }\n  }\n\n  .nav-dropdown {\n    margin-bottom: 6px;\n    padding-left: 18px;\n    width: 100%;\n\n    span {\n      display: block;\n      width: 100%;\n      font-size: 16px;\n      color: #888;\n      line-height: 40px;\n      transition: .2s;\n      padding-bottom: 6px;\n      user-select: none;\n\n      &:hover {\n         cursor: pointer;\n       }\n    }\n\n    i {\n      transition: .2s;\n      font-size: 12px;\n      color: #979797;\n      transform: translateY(-2px);\n    }\n\n    .is-active {\n      span, i {\n        color: #409EFF;\n      }\n      i {\n        transform: rotateZ(180deg) translateY(3px);\n      }\n    }\n\n    &:hover {\n      span, i {\n        color: #409EFF;\n      }\n    }\n  }\n\n  .nav-dropdown-list {\n    width: auto;\n  }\n\n  @media (max-width: 850px) {\n    .header {\n      .nav-logo {\n        display: none;\n      }\n      .nav-logo-small {\n        display: inline-block;\n      }\n      .nav-item {\n        margin-left: 6px;\n\n        &.lang-item,\n        &:last-child {\n          margin-left: 10px;\n        }\n\n        a {\n          padding: 0 5px;\n        }\n      }\n      .nav-theme-switch, .nav-algolia-search {\n        display: none;\n      }\n    }\n  }\n\n  @media (max-width: 700px) {\n    .header {\n      .container {\n        padding: 0 12px;\n      }\n      .nav-item {\n        a {\n          font-size: 12px;\n          vertical-align: top;\n        }\n\n        &.lang-item {\n          height: 100%;\n\n          .nav-lang {\n            display: flex;\n            align-items: center;\n\n            span {\n              padding-bottom: 0;\n            }\n          }\n        }\n      }\n      .nav-dropdown {\n        padding: 0;\n        span {\n          font-size: 12px;\n        }\n      }\n      .nav-gap {\n        padding: 0 8px;\n      }\n      .nav-versions {\n        display: none;\n      }\n    }\n  }\n</style>\n<template>\n  <div class=\"headerWrapper\">\n    <div id=\"v3-banner\" v-if=\"isHome\">\n      <template v-if=\"lang === 'zh-CN'\">\n        您正在浏览基于 Vue 2.x 的文档;\n        <a href=\"https://element-plus.org/#/zh-CN\">点击查看 Vue 3.x 版本。</a>\n        饿了么开源了自研多端框架 MorJS，\n        <a href=\"https://github.com/eleme/morjs\">欢迎点击查看或试用 👏🏻</a>\n      </template>\n      <template v-else>\n        You’re browsing the documentation of Element UI for Vue 2.x version.\n        <a href=\"https://element-plus.org\">Click here</a> for Vue 3.x version\n      </template>\n    </div>\n    <header class=\"header\" ref=\"header\">\n      <div class=\"container\">\n        <h1><router-link :to=\"`/${ lang }`\">\n          <!-- logo -->\n          <slot>\n            <img\n              src=\"../assets/images/element-logo.svg\"\n              alt=\"element-logo\"\n              class=\"nav-logo\">\n            <img\n              src=\"../assets/images/element-logo-small.svg\"\n              alt=\"element-logo\"\n              class=\"nav-logo-small\">\n          </slot>\n\n        </router-link></h1>\n\n        <!-- nav -->\n        <ul class=\"nav\">\n          <li class=\"nav-item nav-algolia-search\" v-show=\"isComponentPage\">\n            <algolia-search></algolia-search>\n          </li>\n          <li class=\"nav-item\">\n            <router-link\n              active-class=\"active\"\n              :to=\"`/${ lang }/guide`\">{{ langConfig.guide }}\n            </router-link>\n          </li>\n          <li class=\"nav-item\">\n            <router-link\n              active-class=\"active\"\n              :to=\"`/${ lang }/component`\">{{ langConfig.components }}\n            </router-link>\n          </li>\n          <li\n            class=\"nav-item nav-item-theme\"\n          >\n            <router-link\n              active-class=\"active\"\n              :to=\"`/${ lang }/theme`\">{{ langConfig.theme }}\n            </router-link>\n          </li>\n          <li class=\"nav-item\">\n            <router-link\n              active-class=\"active\"\n              :to=\"`/${ lang }/resource`\"\n              exact>{{ langConfig.resource }}\n            </router-link>\n          </li>\n\n          <!-- gap -->\n          <li class=\"nav-item\" v-show=\"isComponentPage\">\n            <div class=\"nav-gap\"></div>\n          </li>\n\n          <!-- 版本选择器 -->\n          <li class=\"nav-item nav-versions\" v-show=\"isComponentPage\">\n            <el-dropdown\n              trigger=\"click\"\n              class=\"nav-dropdown\"\n              :class=\"{ 'is-active': verDropdownVisible }\">\n              <span>\n                {{ version }}\n                <i class=\"el-icon-arrow-down el-icon--right\"></i>\n              </span>\n              <el-dropdown-menu\n                slot=\"dropdown\"\n                class=\"nav-dropdown-list\"\n                @input=\"handleVerDropdownToggle\">\n                <el-dropdown-item\n                  v-for=\"item in Object.keys(versions)\"\n                  :key=\"item\"\n                  @click.native=\"switchVersion(item)\">\n                  {{ item }}\n                </el-dropdown-item>\n              </el-dropdown-menu>\n            </el-dropdown>\n          </li>\n\n          <!-- 语言选择器 -->\n          <li class=\"nav-item lang-item\">\n            <el-dropdown\n              trigger=\"click\"\n              class=\"nav-dropdown nav-lang\"\n              :class=\"{ 'is-active': langDropdownVisible }\">\n              <span>\n                {{ displayedLang }}\n                <i class=\"el-icon-arrow-down el-icon--right\"></i>\n              </span>\n              <el-dropdown-menu\n                slot=\"dropdown\"\n                class=\"nav-dropdown-list\"\n                @input=\"handleLangDropdownToggle\">\n                <el-dropdown-item\n                  v-for=\"(value, key) in langs\"\n                  :key=\"key\"\n                  @click.native=\"switchLang(key)\">\n                  {{ value }}\n                </el-dropdown-item>\n              </el-dropdown-menu>\n            </el-dropdown>\n          </li>\n        </ul>\n      </div>\n    </header>\n  </div>\n</template>\n<script>\n  import ThemePicker from './theme-picker.vue';\n  import AlgoliaSearch from './search.vue';\n  import compoLang from '../i18n/component.json';\n  import Element from 'main/index.js';\n  import themeLoader from './theme/loader';\n  import bus from '../bus';\n  import { ACTION_USER_CONFIG_UPDATE } from './theme/constant.js';\n\n  const { version } = Element;\n\n  export default {\n    data() {\n      return {\n        active: '',\n        versions: [],\n        version,\n        verDropdownVisible: true,\n        langDropdownVisible: true,\n        langs: {\n          'zh-CN': '中文',\n          'en-US': 'English',\n          'es': 'Español',\n          'fr-FR': 'Français'\n        }\n      };\n    },\n\n    mixins: [themeLoader],\n\n    components: {\n      ThemePicker,\n      AlgoliaSearch\n    },\n\n    computed: {\n      lang() {\n        return this.$route.path.split('/')[1] || 'zh-CN';\n      },\n      displayedLang() {\n        return this.langs[this.lang] || '中文';\n      },\n      langConfig() {\n        return compoLang.filter(config => config.lang === this.lang)[0]['header'];\n      },\n      isComponentPage() {\n        return /^component/.test(this.$route.name);\n      },\n      isHome() {\n        return /^home/.test(this.$route.name);\n      }\n    },\n    mounted() {\n      const testInnerImg = new Image();\n      testInnerImg.onload = () => {\n        this.$isEle = true;\n        ga('send', 'event', 'DocView', 'Ali', 'Inner');\n      };\n      testInnerImg.onerror = (err) => {\n        ga('send', 'event', 'DocView', 'Ali', 'Outer');\n        console.error(err);\n      };\n      testInnerImg.src = `https://private-alipayobjects.alipay.com/alipay-rmsdeploy-image/rmsportal/VmvVUItLdPNqKlNGuRHi.png?t=${Date.now()}`;\n    },\n    methods: {\n      switchVersion(version) {\n        if (version === this.version) return;\n        location.href = `${ location.origin }/${ this.versions[version] }/${ location.hash } `;\n      },\n\n      switchLang(targetLang) {\n        if (this.lang === targetLang) return;\n        localStorage.setItem('ELEMENT_LANGUAGE', targetLang);\n        this.$router.push(this.$route.path.replace(this.lang, targetLang));\n      },\n\n      handleVerDropdownToggle(visible) {\n        this.verDropdownVisible = visible;\n      },\n\n      handleLangDropdownToggle(visible) {\n        this.langDropdownVisible = visible;\n      }\n    },\n\n    created() {\n      const xhr = new XMLHttpRequest();\n      xhr.onreadystatechange = _ => {\n        if (xhr.readyState === 4 && xhr.status === 200) {\n          const versions = JSON.parse(xhr.responseText);\n          this.versions = Object.keys(versions).reduce((prev, next) => {\n            prev[next] = versions[next];\n            return prev;\n          }, {});\n        }\n      };\n      xhr.open('GET', '/versions.json');\n      xhr.send();\n      let primaryLast = '#409EFF';\n      bus.$on(ACTION_USER_CONFIG_UPDATE, (val) => {\n        let primaryColor = val.global['$--color-primary'];\n        if (!primaryColor) primaryColor = '#409EFF';\n        const base64svg = 'data:image/svg+xml;base64,';\n        const imgSet = document.querySelectorAll('h1 img');\n        imgSet.forEach((img) => {\n          img.src = `${base64svg}${window.btoa(window.atob(img.src.replace(base64svg, '')).replace(primaryLast, primaryColor))}`;\n        });\n        primaryLast = primaryColor;\n      });\n    }\n  };\n</script>\n"
  },
  {
    "path": "examples/components/search.vue",
    "content": "<template>\n  <el-autocomplete\n    v-model=\"query\"\n    size=\"small\"\n    :popper-class=\"`algolia-search${ isEmpty ? ' is-empty' : '' }`\"\n    :fetch-suggestions=\"querySearch\"\n    :placeholder=\"placeholder\"\n    :trigger-on-focus=\"false\"\n    @select=\"handleSelect\"\n    highlight-first-item>\n    <template slot-scope=\"props\">\n      <p class=\"algolia-search-title\" v-if=\"props.item.title\">\n        <span v-html=\"props.item.highlightedCompo\"></span>\n        <span class=\"algolia-search-separator\"></span>\n        <span v-html=\"props.item.title\"></span>\n      </p>\n      <p\n        class=\"algolia-search-content\"\n        v-if=\"props.item.content\"\n        v-html=\"props.item.content\"></p>\n      <a\n        class=\"algolia-search-link\"\n        v-if=\"props.item.img\"\n        target=\"_blank\"\n        href=\"https://www.algolia.com/docsearch\">\n        <img\n          class=\"algolia-search-logo\"\n          src=\"../assets/images/search-by-algolia.svg\"\n          alt=\"algolia-logo\">\n      </a>\n      <p\n        class=\"algolia-search-empty\"\n        v-if=\"props.item.isEmpty\">{{ emptyText }}</p>\n    </template>\n  </el-autocomplete>\n</template>\n\n<style lang=\"scss\">\n  .algolia-search {\n    width: 450px !important;\n\n    &.is-empty {\n      .el-autocomplete-suggestion__list {\n        padding-bottom: 0;\n      }\n    }\n\n    .el-autocomplete-suggestion__list {\n      position: static !important;\n      padding-bottom: 28px;\n    }\n\n    li {\n      border-bottom: solid 1px #ebebeb;\n\n      &:last-child {\n         border-bottom: none;\n       }\n    }\n\n    .algolia-highlight {\n      color: #409EFF;\n      font-weight: bold;\n    }\n\n    .algolia-search-title {\n      font-size: 14px;\n      margin: 6px 0;\n      line-height: 1.8;\n    }\n\n    .algolia-search-separator {\n      padding: 0 6px;\n    }\n\n    .algolia-search-content {\n      font-size: 12px;\n      margin: 6px 0;\n      line-height: 2.4;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .algolia-search-link {\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      padding-right: 20px;\n      background-color: #e4e7ed;\n      border-bottom-left-radius: 4px;\n      border-bottom-right-radius: 4px;\n      box-sizing: border-box;\n      text-align: right;\n\n      &:hover {\n         background-color: #e4e7ed;\n       }\n\n      img {\n        display: inline-block;\n        height: 17px;\n        margin-top: 10px;\n      }\n    }\n\n    .algolia-search-empty {\n      margin: 5px 0;\n      text-align: center;\n      color: #999;\n    }\n  }\n</style>\n\n<script>\n  import algoliasearch from 'algoliasearch';\n\n  export default {\n    data() {\n      return {\n        index: null,\n        query: '',\n        isEmpty: false,\n        langs: {\n          'zh-CN': {\n            search: '搜索文档',\n            empty: '无匹配结果',\n            index: 'zh'\n          },\n          'en-US': {\n            search: 'Search',\n            empty: 'No results',\n            index: 'en'\n          },\n          'es': {\n            search: 'Buscar',\n            empty: 'No hay datos que coincidan',\n            index: 'es'\n          },\n          'fr-FR': {\n            search: 'Rechercher',\n            empty: 'Aucun résultat',\n            index: 'fr'\n          }\n        }\n      };\n    },\n\n    computed: {\n      lang() {\n        return this.$route.meta.lang;\n      },\n\n      placeholder() {\n        return this.lang ? this.langs[this.lang].search : '';\n      },\n\n      emptyText() {\n        return this.lang ? this.langs[this.lang].empty : '';\n      }\n    },\n\n    watch: {\n      lang() {\n        this.initIndex();\n      }\n    },\n\n    methods: {\n      initIndex() {\n        const client = algoliasearch('4C63BTGP6S', '0729c3c7f4dc8db7395ad0b19c0748d2');\n        this.index = client.initIndex(`element-${ this.lang ? this.langs[this.lang].index : 'zh' }`);\n      },\n\n      querySearch(query, cb) {\n        if (!query) return;\n        this.index.search({ query, hitsPerPage: 6 }, (err, res) => {\n          if (err) {\n            console.error(err);\n            return;\n          }\n          if (res.hits.length > 0) {\n            this.isEmpty = false;\n            cb(res.hits.map(hit => {\n              let content = hit._highlightResult.content.value.replace(/\\s+/g, ' ');\n              const highlightStart = content.indexOf('<span class=\"algolia-highlight\">');\n              if (highlightStart > -1) {\n                const startEllipsis = highlightStart - 15 > 0;\n                content = (startEllipsis ? '...' : '') +\n                  content.slice(Math.max(0, highlightStart - 15), content.length);\n              } else if (content.indexOf('|') > -1) {\n                content = '';\n              }\n              return {\n                anchor: hit.anchor,\n                component: hit.component,\n                highlightedCompo: hit._highlightResult.component.value,\n                title: hit._highlightResult.title.value,\n                content\n              };\n            }).concat({ img: true }));\n          } else {\n            this.isEmpty = true;\n            cb([{ isEmpty: true }]);\n          }\n        });\n      },\n\n      handleSelect(val) {\n        if (val.img || val.isEmpty) return;\n        const component = val.component || '';\n        const anchor = val.anchor;\n        this.$router.push(`/${ this.lang }/component/${ component }${ anchor ? `#${ anchor }` : '' }`);\n      }\n    },\n\n    mounted() {\n      this.initIndex();\n    }\n  };\n</script>\n"
  },
  {
    "path": "examples/components/side-nav.vue",
    "content": "<style lang=\"scss\">\n  .side-nav {\n    width: 100%;\n    box-sizing: border-box;\n    padding-right: 30px;\n    transition: opacity .3s;\n    &.is-fade {\n      transition: opacity 3s;\n    }\n\n    li {\n      list-style: none;\n    }\n\n    ul {\n      padding: 0;\n      margin: 0;\n      overflow: hidden;\n    }\n    \n    > ul > .nav-item > a {\n      margin-top: 15px;\n    }\n\n    > ul > .nav-item:nth-child(-n + 4) > a {\n      margin-top: 0;\n    }\n\n    .nav-item {\n      a {\n        font-size: 16px;\n        color: #333;\n        line-height: 40px;\n        height: 40px;\n        margin: 0;\n        padding: 0;\n        text-decoration: none;\n        display: block;\n        position: relative;\n        transition: .15s ease-out;\n        font-weight: bold;\n\n        &.active {\n          color: #409EFF;\n        }\n      }\n\n      .nav-item {\n        a {\n          display: block;\n          height: 40px;\n          color: #444;\n          line-height: 40px;\n          font-size: 14px;\n          overflow: hidden;\n          white-space: nowrap;\n          text-overflow: ellipsis;\n          font-weight: normal;\n\n          &:hover,\n          &.active {\n            color: #409EFF;\n          }\n        }\n      }\n  \n      &.sponsors {\n        & > .sub-nav {\n          margin-top: -10px;\n        }\n        \n        & > a {\n          color: #777;\n          font-weight: 300;\n          font-size: 14px;\n        }\n        \n        .nav-item {\n          display: inline-block;\n        \n          a {\n            height: auto;\n            display: inline-block;\n            vertical-align: middle;\n            margin: 8px 12px 12px 0;\n\n            img {\n              width: 42px;\n            }\n          }\n\n          &:first-child a img {\n            width: 36px;\n          }\n        }\n      }\n    }\n\n    .nav-group__title {\n      font-size: 12px;\n      color: #999;\n      line-height: 26px;\n      margin-top: 15px;\n    }\n\n    #code-sponsor-widget {\n      margin: 0 0 0 -20px;\n    }\n  }\n  .nav-dropdown-list {\n    width: 120px;\n    margin-top: -8px;\n    li {\n      font-size: 14px;\n    }\n  }\n</style>\n<template>\n  <div\n    class=\"side-nav\"\n    @mouseenter=\"isFade = false\"\n    :class=\"{ 'is-fade': isFade }\"\n    :style=\"navStyle\">\n    <ul>\n      <li\n        class=\"nav-item\"\n        v-for=\"(item, key) in data\"\n        :key=\"key\">\n        <a v-if=\"!item.path && !item.href\" @click=\"expandMenu\">{{item.name}}</a>\n        <a v-if=\"item.href\" :href=\"item.href\" target=\"_blank\">{{item.name}}</a>\n        <router-link\n          v-if=\"item.path\"\n          active-class=\"active\"\n          :to=\"base + item.path\"\n          exact\n          v-text=\"item.title || item.name\">\n        </router-link>\n        <ul class=\"pure-menu-list sub-nav\" v-if=\"item.children\">\n          <li\n            class=\"nav-item\"\n            v-for=\"(navItem, key) in item.children\"\n            :key=\"key\">\n            <router-link\n              class=\"\"\n              active-class=\"active\"\n              :to=\"base + navItem.path\"\n              exact\n              v-text=\"navItem.title || navItem.name\">\n            </router-link>\n          </li>\n        </ul>\n        <template v-if=\"item.groups\">\n          <div\n            class=\"nav-group\"\n            v-for=\"(group, key) in item.groups\"\n            :key=\"key\"\n            >\n            <div class=\"nav-group__title\" @click=\"expandMenu\">{{group.groupName}}</div>\n            <ul class=\"pure-menu-list\">\n              <li\n                class=\"nav-item\"\n                v-for=\"(navItem, key) in group.list\"\n                v-show=\"!navItem.disabled\"\n                :key=\"key\">\n                <router-link\n                  active-class=\"active\"\n                  :to=\"base + navItem.path\"\n                  exact\n                  v-text=\"navItem.title\"></router-link>\n              </li>\n            </ul>\n          </div>\n        </template>\n      </li>\n    </ul>\n    <!--<div id=\"code-sponsor-widget\"></div>-->\n  </div>\n</template>\n<script>\n  import bus from '../bus';\n  import compoLang from '../i18n/component.json';\n\n  export default {\n    props: {\n      data: Array,\n      base: {\n        type: String,\n        default: ''\n      }\n    },\n    data() {\n      return {\n        highlights: [],\n        navState: [],\n        isSmallScreen: false,\n        isFade: false\n      };\n    },\n    watch: {\n      '$route.path'() {\n        this.handlePathChange();\n      },\n      isFade(val) {\n        bus.$emit('navFade', val);\n      }\n    },\n    computed: {\n      navStyle() {\n        const style = {};\n        if (this.isSmallScreen) {\n          style.paddingBottom = '60px';\n        }\n        style.opacity = this.isFade ? '0.5' : '1';\n        return style;\n      },\n      lang() {\n        return this.$route.meta.lang;\n      },\n      langConfig() {\n        return compoLang.filter(config => config.lang === this.lang)[0]['nav'];\n      }\n    },\n    methods: {\n      handleResize() {\n        this.isSmallScreen = document.documentElement.clientWidth < 768;\n        this.handlePathChange();\n      },\n      handlePathChange() {\n        if (!this.isSmallScreen) {\n          this.expandAllMenu();\n          return;\n        }\n        this.$nextTick(() => {\n          this.hideAllMenu();\n          let activeAnchor = this.$el.querySelector('a.active');\n          let ul = activeAnchor.parentNode;\n          while (ul.tagName !== 'UL') {\n            ul = ul.parentNode;\n          }\n          ul.style.height = 'auto';\n        });\n      },\n      hideAllMenu() {\n        [].forEach.call(this.$el.querySelectorAll('.pure-menu-list'), ul => {\n          ul.style.height = '0';\n        });\n      },\n      expandAllMenu() {\n        [].forEach.call(this.$el.querySelectorAll('.pure-menu-list'), ul => {\n          ul.style.height = 'auto';\n        });\n      },\n      expandMenu(event) {\n        if (!this.isSmallScreen) return;\n        let target = event.currentTarget;\n        if (!target.nextElementSibling || target.nextElementSibling.tagName !== 'UL') return;\n        this.hideAllMenu();\n        event.currentTarget.nextElementSibling.style.height = 'auto';\n      }\n    },\n    created() {\n      bus.$on('fadeNav', () => {\n        this.isFade = true;\n      });\n    },\n    mounted() {\n      this.handleResize();\n      window.addEventListener('resize', this.handleResize);\n    },\n    beforeDestroy() {\n      window.removeEventListener('resize', this.handleResize);\n    }\n  };\n</script>\n"
  },
  {
    "path": "examples/components/theme/basic-tokens-preview.vue",
    "content": "<style lang=\"scss\">\n.component-preview {\n  .heading>div{\n    margin-bottom: 15px;\n  }\n  .title {\n    font-size: 18px;\n    font-weight:400;\n    padding: 0 20px\n  }\n  .paragraph {\n    padding: 0 20px\n  }\n  .demo-color-box {\n    margin: 0;\n  }\n  .color {\n    margin-right: -12%;\n  }\n}\n</style>\n<template>\n  <div class=\"component-preview\">\n    <h4>Color</h4>\n    <div class=\"color\">\n      <el-row :gutter=\"12\">\n        <el-col :span=\"4\" v-for=\"(color, key) in colorLine\" :key=\"key\">\n          <div class=\"demo-color-box\" :style=\"{ background: dataProxy(color) }\">\n            {{color}}\n            <div class=\"value\">{{dataProxy(color)}}</div>\n            <div class=\"bg-color-sub\">\n              <div\n                class=\"bg-success-sub-item\"\n                v-for=\"(item, key) in Array(2)\"\n                :key=\"key\"\n                :style=\"{ background: tintColor(dataProxy(color), (key + 8) / 10) }\"\n              ></div>\n            </div>\n          </div>\n        </el-col>\n      </el-row>\n      <el-row :gutter=\"12\">\n        <el-col :span=\"4\">\n          <div class=\"demo-color-box demo-color-box-other\" :style=\"{ background: color_text_primary }\">\n            Primary Text\n            <div class=\"value\">{{color_text_primary}}</div>\n          </div>\n        </el-col>\n        <el-col :span=\"4\">\n          <div class=\"demo-color-box demo-color-box-other\" :style=\"{ background: color_text_regular }\">\n            Regular Text\n            <div class=\"value\">{{color_text_regular}}</div>\n          </div>\n        </el-col>\n        <el-col :span=\"4\">\n          <div class=\"demo-color-box demo-color-box-other\" :style=\"{ background: color_text_secondary }\">\n            Secondary Text\n            <div class=\"value\">{{color_text_secondary}}</div>\n          </div>\n        </el-col>\n        <el-col :span=\"4\">\n          <div class=\"demo-color-box demo-color-box-other\" :style=\"{ background: color_text_placeholder }\">\n            Placeholder\n            <div class=\"value\">{{color_text_placeholder}}</div>\n          </div>\n        </el-col>\n      </el-row>\n\n      <el-row :gutter=\"12\">\n        <el-col :span=\"4\">\n          <div\n            class=\"demo-color-box demo-color-box-other demo-color-box-lite\"\n            :style=\"{ background: border_color_base }\"\n          >\n            Border Base\n            <div class=\"value\">{{border_color_base}}</div>\n          </div>\n        </el-col>\n        <el-col :span=\"4\">\n          <div\n            class=\"demo-color-box demo-color-box-other demo-color-box-lite\"\n            :style=\"{ background: border_color_light }\"\n          >\n            Border Light\n            <div class=\"value\">{{border_color_light}}</div>\n          </div>\n        </el-col>\n        <el-col :span=\"4\">\n          <div\n            class=\"demo-color-box demo-color-box-other demo-color-box-lite\"\n            :style=\"{ background: border_color_lighter }\"\n          >\n            Border Lighter\n            <div class=\"value\">{{border_color_lighter}}</div>\n          </div>\n        </el-col>\n        <el-col :span=\"4\">\n          <div\n            class=\"demo-color-box demo-color-box-other demo-color-box-lite\"\n            :style=\"{ background: border_color_extra_light }\"\n          >\n            Border Extralight\n            <div class=\"value\">{{border_color_extra_light}}</div>\n          </div>\n        </el-col>\n      </el-row>\n\n      <el-row :gutter=\"12\">\n        <el-col :span=\"4\">\n          <div class=\"demo-color-box demo-color-box-other\" :style=\"{ background: color_black }\">\n            Background B\n            <div class=\"value\">{{color_black}}</div>\n          </div>\n        </el-col>\n        <el-col :span=\"4\">\n          <div\n            class=\"demo-color-box demo-color-box-other\"\n            :style=\"{ background: color_white, color: '#303133', border: '1px solid #eee' }\"\n          >\n            Background W\n            <div class=\"value\">{{color_white}}</div>\n          </div>\n        </el-col>\n        <el-col :span=\"4\">\n          <div class=\"demo-color-box demo-color-box-other bg-transparent\">\n            Background\n            <div class=\"value\">Transparent</div>\n          </div>\n        </el-col>\n      </el-row>\n    </div>\n    <h4>Typography</h4>\n    <el-row :gutter=\"12\">\n      <el-col :span=\"6\" class=\"heading\">\n        <div :style=\"{ fontSize: font_size_extra_large }\">Heading1</div>\n        <div :style=\"{ fontSize: font_size_large }\">Heading2</div>\n        <div :style=\"{ fontSize: font_size_medium }\">Heading3</div>\n        <div :style=\"{ fontSize: font_size_base }\">Heading4</div>\n        <div :style=\"{ fontSize: font_size_small }\">Heading5</div>\n        <div :style=\"{ fontSize: font_size_extra_small }\">Heading6</div>\n      </el-col>\n      <el-col :span=\"9\">\n        <div class=\"title\">Example body text</div>\n        <p \n          class=\"paragraph\"\n          :style=\"{ \n            fontSize: font_size_base,\n            fontWeight: font_weight_primary, \n            lineHeight: font_line_height_primary\n          }\" >\n          With MySpace becoming more popular every day, there is the constant need to be different. There are millions of users. If MySpace layouts are chosen well, then you can enhance your profile a great deal.</p>\n      </el-col>\n      <el-col :span=\"9\">\n        <div class=\"title\">Example small text</div>\n        <p \n          class=\"paragraph\"\n          :style=\"{ \n            fontSize: font_size_small,\n            fontWeight: font_weight_secondary, \n            lineHeight: font_line_height_secondary\n          }\" >\n          Computers have become ubiquitous in almost every facet of our lives. At work, desk jockeys spend hours in front of their desktops, while delivery people scan bar codes with handhelds and workers in the field stay in touch with the central office via their notebooks. Computer hardware weaves itself through the fabric of our lives.</p>\n      </el-col>\n    </el-row>\n  </div>\n</template>\n\n<script>\nimport bus from '../../bus';\nimport { tintColor } from '../../color.js';\nimport {\n  ACTION_COMPONECT_SELECT,\n  ACTION_USER_CONFIG_UPDATE\n} from './constant.js';\n\nconst original = {\n  'color_primary': '#409EFF',\n  'color_success': '#67C23A',\n  'color_warning': '#E6A23C',\n  'color_danger': '#F56C6C',\n  'color_info': '#909399',\n  'color_white': '#FFFFFF',\n  'color_black': '#000000',\n  'color_text_primary': '#303133',\n  'color_text_regular': '#606266',\n  'color_text_secondary': '#909399',\n  'color_text_placeholder': '#C0C4CC',\n  'border_color_base': '#DCDFE6',\n  'border_color_light': '#E4E7ED',\n  'border_color_lighter': '#EBEEF5',\n  'border_color_extra_light': '#F2F6FC',\n  'font_size_extra_large': '20px',\n  'font_size_large': '18px',\n  'font_size_medium': '16px',\n  'font_size_base': '14px',\n  'font_size_small': '13px',\n  'font_size_extra_small': '12px',\n  'font_weight_primary': 500,\n  'font_weight_secondary': 100,\n  'font_line_height_primary': '24px',\n  'font_line_height_secondary': '16px'\n};\n\nexport default {\n  created() {\n    bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);\n    bus.$on(ACTION_COMPONECT_SELECT, (val) => {\n      this.$nextTick(() => {\n        const getSelectElement = Array.from(document.querySelectorAll('h4')).filter((el) => (el.innerText.toLowerCase() === val));\n        if (getSelectElement[0]) {\n          const elementTop = getSelectElement[0].getBoundingClientRect().top;\n          window.scrollTo(0, window.pageYOffset + elementTop - 20); // 20 for padding\n        }\n      });\n    });\n  },\n  mounted() {\n    this.setGlobal();\n  },\n  methods: {\n    tintColor(a, b) {\n      return tintColor(a, b);\n    },\n    dataProxy(value) {\n      return this[`color_${value.toLowerCase()}`];\n    },\n    setGlobal() {\n      if (window.userThemeConfig) {\n        this.global = window.userThemeConfig.global;\n      }\n    }\n  },\n  watch: {\n    global: {\n      immediate: true,\n      handler(value) {\n        Object.keys(original).forEach((v) => {\n          const key = `$--${v.replace(/_/g, '-')}`;\n          if (value[key]) {\n            this[v] = value[key];\n          } else {\n            this[v] = original[v];\n          }\n        });\n      }\n    }\n  },\n  data() {\n    return {\n      global: {},\n      colorLine: ['Primary', 'Success', 'Warning', 'Danger', 'Info'],\n      'color_primary': '',\n      'color_success': '',\n      'color_warning': '',\n      'color_danger': '',\n      'color_info': '',\n      'color_white': '',\n      'color_black': '',\n      'color_text_primary': '',\n      'color_text_regular': '',\n      'color_text_secondary': '',\n      'color_text_placeholder': '',\n      'border_color_base': '',\n      'border_color_light': '',\n      'border_color_lighter': '',\n      'border_color_extra_light': '',\n      'font_size_extra_large': '',\n      'font_size_large': '',\n      'font_size_medium': '',\n      'font_size_base': '',\n      'font_size_small': '',\n      'font_size_extra_small': '',\n      'font_weight_primary': 0,\n      'font_weight_secondary': 0,\n      'font_line_height_primary': '',\n      'font_line_height_secondary': ''\n    };\n  }\n};\n</script>\n"
  },
  {
    "path": "examples/components/theme/components-preview.vue",
    "content": "<style lang=\"scss\">\n.component-preview {\n  padding-right: 10px;\n  &:last-of-type {\n    padding-bottom: 20px;\n  }\n  h4 {\n    font-size: 20px;\n    margin: 40px 0 20px;\n    color: #909399\n  }\n  .demo-item {\n    margin-top: 10px;\n    margin-right: 40px;\n  }\n\n  .demo-line {\n    margin: 15px 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n + 1) {\n    background-color: #d3dce6;\n  }\n\n  .el-avatar:not(:last-child) {\n    margin-right: 20px;\n  }\n\n  .avatar-demo {\n    display: flex;\n    align-items: center;\n  }\n}\n</style>\n<template>\n  <div class=\"component-preview\">\n    <h4>Button</h4>\n    <el-row class=\"demo-line\">\n      <el-button>Default</el-button>\n      <el-button type=\"primary\">Primary</el-button>\n      <el-button type=\"success\">Success</el-button>\n      <el-button type=\"info\">Info</el-button>\n      <el-button type=\"warning\">Warning</el-button>\n      <el-button type=\"danger\">Danger</el-button>\n    </el-row>\n    <el-row class=\"demo-line\">\n      <el-button plain>Plain</el-button>\n      <el-button type=\"primary\" plain>Primary</el-button>\n      <el-button type=\"success\" plain>Success</el-button>\n      <el-button type=\"info\" plain>Info</el-button>\n      <el-button type=\"warning\" plain>Warning</el-button>\n      <el-button type=\"danger\" plain>Danger</el-button>\n    </el-row>\n    <el-row class=\"demo-line\">\n      <el-button round>Round</el-button>\n      <el-button type=\"primary\" round>Primary</el-button>\n      <el-button type=\"success\" round>Success</el-button>\n      <el-button type=\"info\" round>Info</el-button>\n      <el-button type=\"warning\" round>Warning</el-button>\n      <el-button type=\"danger\" round>Danger</el-button>\n    </el-row>\n    <el-row class=\"demo-line\">\n      <el-button icon=\"el-icon-search\" circle></el-button>\n      <el-button type=\"primary\" icon=\"el-icon-edit\" circle></el-button>\n      <el-button type=\"success\" icon=\"el-icon-check\" circle></el-button>\n      <el-button type=\"info\" icon=\"el-icon-message\" circle></el-button>\n      <el-button type=\"warning\" icon=\"el-icon-star-off\" circle></el-button>\n      <el-button type=\"danger\" icon=\"el-icon-delete\" circle></el-button>\n    </el-row>\n    <el-row class=\"demo-line\">\n      <el-button>Default</el-button>\n      <el-button size=\"medium\">Medium</el-button>\n      <el-button size=\"small\">Small</el-button>\n      <el-button size=\"mini\">Mini</el-button>\n    </el-row>\n    <h4>Radio</h4>\n    <el-row class=\"demo-line\">\n      <el-radio v-model=\"radio\" label=\"1\">Option A</el-radio>\n      <el-radio v-model=\"radio\" label=\"2\">Option B</el-radio>\n    </el-row>\n    <el-row class=\"demo-line\">\n      <el-radio-group v-model=\"radio1\">\n        <el-radio-button label=\"New York\"></el-radio-button>\n        <el-radio-button label=\"Washington\"></el-radio-button>\n        <el-radio-button label=\"Los Angeles\"></el-radio-button>\n        <el-radio-button label=\"Chicago\"></el-radio-button>\n      </el-radio-group>\n    </el-row>\n    <el-row class=\"demo-line\">\n      <el-radio v-model=\"radio2\" label=\"1\" border>Option A</el-radio>\n      <el-radio v-model=\"radio2\" label=\"2\" border>Option B</el-radio>\n    </el-row>\n    <h4>Checkbox</h4>\n    <el-row class=\"demo-line\">\n      <el-checkbox v-model=\"checked\">Option</el-checkbox>\n    </el-row>\n    <el-row class=\"demo-line\">\n      <el-checkbox-group v-model=\"checked1\">\n        <el-checkbox-button v-for=\"city in ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen']\" :label=\"city\" :key=\"city\">{{city}}</el-checkbox-button>\n      </el-checkbox-group>\n    </el-row>\n    <el-row class=\"demo-line\">\n      <el-checkbox v-model=\"checked2\" label=\"Option1\" border></el-checkbox>\n    </el-row>\n    <h4>Input</h4>\n    <el-row style=\"width: 180px\">\n      <el-input placeholder=\"Please input\" v-model=\"input\"></el-input>\n    </el-row>\n    <h4>InputNumber</h4>\n    <el-row>\n      <el-input-number v-model=\"inputNumber\" :min=\"1\" :max=\"10\"></el-input-number>\n    </el-row>\n    <h4>Select</h4>\n    <el-row>\n      <el-select v-model=\"selectValue\" placeholder=\"Select\">\n        <el-option\n          v-for=\"item in selectOptions\"\n          :key=\"item.value\"\n          :label=\"item.label\"\n          :value=\"item.value\"\n        ></el-option>\n      </el-select>\n    </el-row>\n    <h4>Cascader</h4>\n    <el-row>\n      <el-cascader :options=\"cascadeOptions\" v-model=\"cascaderValue\"></el-cascader>\n    </el-row>\n    <h4>Switch</h4>\n    <el-row>\n      <el-switch v-model=\"switchValue\"></el-switch>\n      <el-switch\n        style=\"margin-left: 40px\"\n        v-model=\"switchValue\"\n        active-text=\"Pay by month\"\n        inactive-text=\"Pay by year\">\n      </el-switch>\n    </el-row>\n    <h4>Slider</h4>\n    <el-row style=\"width: 380px\">\n      <el-slider v-model=\"slider\"></el-slider>\n    </el-row>\n    <h4>DatePicker</h4>\n    <el-row>\n      <el-date-picker v-model=\"datePicker\" type=\"date\"></el-date-picker>\n    </el-row>\n    <h4>Rate</h4>\n    <el-row>\n      <el-rate class=\"demo-line\" v-model=\"rate\"></el-rate>\n      <el-rate\n        class=\"demo-line\"\n        v-model=\"rate\"\n        show-score\n        text-color=\"#ff9900\"\n        score-template=\"{value} points\">\n      </el-rate>\n    </el-row>\n    <h4>Transfer</h4>\n    <el-row>\n      <el-transfer v-model=\"transfer\" filterable :data=\"transferData\">\n        <el-button class=\"transfer-footer\" slot=\"left-footer\" size=\"small\">Operation</el-button>\n        <el-button class=\"transfer-footer\" slot=\"right-footer\" size=\"small\">Operation</el-button>\n      </el-transfer>\n    </el-row>\n    <h4>Table</h4>\n    <el-row>\n      <el-table :data=\"tableData\" style=\"width: 70%\">\n        <el-table-column prop=\"date\" label=\"Date\" width=\"180\"></el-table-column>\n        <el-table-column prop=\"name\" label=\"Name\" width=\"180\"></el-table-column>\n        <el-table-column prop=\"address\" label=\"Address\"></el-table-column>\n      </el-table>\n    </el-row>\n    <h4>Tag</h4>\n    <el-row>\n      <el-tag class=\"demo-item\" closable>Tag One</el-tag>\n      <el-tag class=\"demo-item\" closable type=\"success\">Tag Two</el-tag>\n      <el-tag class=\"demo-item\" closable type=\"info\">Tag Three</el-tag>\n      <el-tag class=\"demo-item\" closable type=\"warning\">Tag Four</el-tag>\n      <el-tag class=\"demo-item\" closable type=\"danger\">Tag Five</el-tag>\n    </el-row>\n    <h4>Progress</h4>\n    <el-row style=\"width: 380px\">\n      <el-progress :percentage=\"20\"></el-progress>\n      <el-progress :percentage=\"60\" status=\"exception\"></el-progress>\n      <el-progress :percentage=\"100\" status=\"success\"></el-progress>\n    </el-row>\n    <h4>Tree</h4>\n    <el-row style=\"width: 380px\">\n      <el-tree :data=\"treeData\" :props=\"defaultTreeProps\" ></el-tree>\n    </el-row>\n    <h4>Pagination</h4>\n    <el-row>\n      <el-pagination layout=\"prev, pager, next\" :total=\"1000\"></el-pagination>\n    </el-row>\n    <h4>Badge</h4>\n    <el-row>\n      <el-badge :value=\"12\" class=\"demo-item\">\n        <el-button size=\"small\">comments</el-button>\n      </el-badge>\n      <el-badge :value=\"3\" class=\"demo-item\">\n        <el-button size=\"small\">replies</el-button>\n      </el-badge>\n      <el-badge :value=\"1\" class=\"demo-item\" type=\"primary\">\n        <el-button size=\"small\">comments</el-button>\n      </el-badge>\n      <el-badge :value=\"2\" class=\"demo-item\" type=\"warning\">\n        <el-button size=\"small\">replies</el-button>\n      </el-badge>\n    </el-row>\n    <h4>Alert</h4>\n    <el-row style=\"width: 380px;\">\n      <el-alert class=\"demo-item\" title=\"success alert\" type=\"success\" show-icon></el-alert>\n      <el-alert class=\"demo-item\" title=\"info alert\" type=\"info\" close-text=\"Gotcha\" show-icon></el-alert>\n      <el-alert class=\"demo-item\" title=\"warning alert\" type=\"warning\" show-icon></el-alert>\n      <el-alert\n        class=\"demo-item\"\n        title=\"error alert\"\n        type=\"error\"\n        description=\"more text description\"\n        show-icon>\n      </el-alert>\n    </el-row>\n    <h4>Loading</h4>\n    <el-row>\n      <el-table :data=\"tableData\" style=\"width: 90%\" v-loading=\"true\">\n        <el-table-column prop=\"date\" label=\"Date\" width=\"180\"></el-table-column>\n        <el-table-column prop=\"name\" label=\"Name\" width=\"180\"></el-table-column>\n        <el-table-column prop=\"address\" label=\"Address\"></el-table-column>\n      </el-table>\n    </el-row>\n    <h4>Message</h4>\n    <el-row>\n      <div role=\"alert\" class=\"demo-item el-message el-message--success el-message-fade-leave-active el-message-fade-leave-to\" style=\"top: 0;left: 0;width: 100px; opacity: 1; position: relative;transform: none;\"><i class=\"el-message__icon el-icon-success\"></i><p class=\"el-message__content\">Congrats, this is a success message.</p><!----></div>\n      <div role=\"alert\" class=\"demo-item el-message el-message--warning el-message-fade-leave-active el-message-fade-leave-to\" style=\"top: 0;left: 0;width: 100px; opacity: 1; position: relative;transform: none;\"><i class=\"el-message__icon el-icon-warning\"></i><p class=\"el-message__content\">Warning, this is a warning message.</p><!----></div>\n      <div role=\"alert\" class=\"demo-item el-message el-message--info el-message-fade-leave-active el-message-fade-leave-to\" style=\"top: 0;left: 0;width: 100px; opacity: 1; position: relative;transform: none;\"><i class=\"el-message__icon el-icon-info\"></i><p class=\"el-message__content\">This is a message.</p><!----></div>\n      <div role=\"alert\" class=\"demo-item el-message el-message--error is-closable el-message-fade-leave-active el-message-fade-leave-to\" style=\"top: 0;left: 0;width: 100px; opacity: 1; position: relative;transform: none;\"><i class=\"el-message__icon el-icon-error\"></i><p class=\"el-message__content\">Oops, this is a error message.</p><i class=\"el-message__closeBtn el-icon-close\"></i></div>\n    </el-row>\n    <h4>MessageBox</h4>\n    <el-row>\n      <div class=\"el-message-box\"><div class=\"el-message-box__header\"><div class=\"el-message-box__title\"><!----><span>Warning</span></div><button type=\"button\" aria-label=\"Close\" class=\"el-message-box__headerbtn\"><i class=\"el-message-box__close el-icon-close\"></i></button></div><div class=\"el-message-box__content\"><div class=\"el-message-box__status el-icon-warning\"></div><div class=\"el-message-box__message\"><p>This will permanently delete the file. Continue?</p></div><div class=\"el-message-box__input\" style=\"display: none;\"><div class=\"el-input\"><!----><input type=\"text\" autocomplete=\"off\" placeholder=\"\" class=\"el-input__inner\"><!----><!----><!----></div><div class=\"el-message-box__errormsg\" style=\"visibility: hidden;\"></div></div></div><div class=\"el-message-box__btns\"><button type=\"button\" class=\"el-button el-button--default el-button--small\"><!----><!----><span>\n          Cancel\n        </span></button><button type=\"button\" class=\"el-button el-button--default el-button--small el-button--primary \"><!----><!----><span>\n          OK\n        </span></button></div></div>\n    </el-row>\n    <h4>Notification</h4>\n    <el-row>\n      <div role=\"alert\" class=\"el-notification right\" style=\"position: relative; left: 0;\"><!----><div class=\"el-notification__group\"><span class=\"el-notification__title\">Notification</span><div class=\"el-notification__content\"><div>This is a message </div></div><div class=\"el-notification__closeBtn el-icon-close\"></div></div></div>\n    </el-row>\n    <h4>Menu</h4>\n    <el-row>\n      <el-menu :default-active=\"menu\" class=\"el-menu-demo\" mode=\"horizontal\">\n        <el-menu-item index=\"1\">Processing Center</el-menu-item>\n        <el-submenu index=\"2\">\n          <template slot=\"title\">Workspace</template>\n          <el-menu-item index=\"2-1\">item one</el-menu-item>\n          <el-menu-item index=\"2-2\">item two</el-menu-item>\n          <el-menu-item index=\"2-3\">item three</el-menu-item>\n          <el-submenu index=\"2-4\">\n            <template slot=\"title\">item four</template>\n            <el-menu-item index=\"2-4-1\">item one</el-menu-item>\n            <el-menu-item index=\"2-4-2\">item two</el-menu-item>\n            <el-menu-item index=\"2-4-3\">item three</el-menu-item>\n          </el-submenu>\n        </el-submenu>\n        <el-menu-item index=\"3\" disabled>Info</el-menu-item>\n        <el-menu-item index=\"4\">\n          <a href=\"https://www.ele.me\" target=\"_blank\">Orders</a>\n        </el-menu-item>\n      </el-menu>\n      <el-menu\n        default-active=\"2\"\n        class=\"demo-line\"\n      >\n        <el-submenu index=\"1\">\n          <template slot=\"title\">\n            <i class=\"el-icon-location\"></i>\n            <span>Navigator One</span>\n          </template>\n          <el-menu-item-group title=\"Group One\">\n            <el-menu-item index=\"1-1\">item one</el-menu-item>\n            <el-menu-item index=\"1-2\">item one</el-menu-item>\n          </el-menu-item-group>\n          <el-menu-item-group title=\"Group Two\">\n            <el-menu-item index=\"1-3\">item three</el-menu-item>\n          </el-menu-item-group>\n          <el-submenu index=\"1-4\">\n            <template slot=\"title\">item four</template>\n            <el-menu-item index=\"1-4-1\">item one</el-menu-item>\n          </el-submenu>\n        </el-submenu>\n        <el-menu-item index=\"2\">\n          <i class=\"el-icon-menu\"></i>\n          <span>Navigator Two</span>\n        </el-menu-item>\n        <el-menu-item index=\"3\" disabled>\n          <i class=\"el-icon-document\"></i>\n          <span>Navigator Three</span>\n        </el-menu-item>\n        <el-menu-item index=\"4\">\n          <i class=\"el-icon-setting\"></i>\n          <span>Navigator Four</span>\n        </el-menu-item>\n      </el-menu>\n    </el-row>\n    <h4>Tabs</h4>\n    <el-row>\n      <el-tabs v-model=\"tab\" class=\"demo-item\">\n        <el-tab-pane label=\"User\" name=\"first\">User</el-tab-pane>\n        <el-tab-pane label=\"Config\" name=\"second\">Config</el-tab-pane>\n        <el-tab-pane label=\"Role\" name=\"third\">Role</el-tab-pane>\n        <el-tab-pane label=\"Task\" name=\"fourth\">Task</el-tab-pane>\n      </el-tabs>\n      <el-tabs type=\"card\" class=\"demo-item\">\n        <el-tab-pane label=\"User\">User</el-tab-pane>\n        <el-tab-pane label=\"Config\">Config</el-tab-pane>\n        <el-tab-pane label=\"Role\">Role</el-tab-pane>\n        <el-tab-pane label=\"Task\">Task</el-tab-pane>\n      </el-tabs>\n    </el-row>\n    <h4>Dialog</h4>\n    <el-row>\n      <div role=\"dialog\" aria-modal=\"true\" aria-label=\"Tips\" class=\"el-dialog\" style=\"margin: 0\"><div class=\"el-dialog__header\"><span class=\"el-dialog__title\">Tips</span><button type=\"button\" aria-label=\"Close\" class=\"el-dialog__headerbtn\"><i class=\"el-dialog__close el-icon el-icon-close\"></i></button></div><div class=\"el-dialog__body\"><span>This is a message</span> </div><div class=\"el-dialog__footer\"><span class=\"dialog-footer\"><button type=\"button\" class=\"el-button el-button--default\"><!----><!----><span>Cancel</span></button> <button type=\"button\" class=\"el-button el-button--primary\"><!----><!----><span>Confirm</span></button></span></div></div>\n    </el-row>\n    <h4>Tooltip</h4>\n    <el-row>\n      <div role=\"tooltip\" x-placement=\"top\" class=\"el-tooltip__popper is-dark\" style=\"position: relative; width: 40px;text-align: center;\">Dark<div x-arrow=\"\" class=\"popper__arrow\"></div>\n      </div>\n      <div role=\"tooltip\" x-placement=\"top\" class=\"el-tooltip__popper is-light\" style=\"margin-top: 10px;position: relative; width: 40px;text-align: center;\">Light<div x-arrow=\"\" class=\"popper__arrow\"></div>\n      </div>\n    </el-row>\n    <h4>Popover</h4>\n    <el-row>\n      <div role=\"tooltip\" x-placement=\"top\" id=\"el-popover-2936\" aria-hidden=\"true\" class=\"el-popover el-popper el-popover--plain\" tabindex=\"0\" style=\"width: 200px; position: relative; \"><div class=\"el-popover__title\">Title</div>this is content, this is content, this is content<div x-arrow=\"\" class=\"popper__arrow\"></div></div>\n    </el-row>\n    <h4>Card</h4>\n    <el-row>\n      <el-card class=\"box-card\">\n        <div slot=\"header\" class=\"clearfix\">\n          <span>Card name</span>\n        </div>\n      </el-card>\n    </el-row>\n    <h4>Carousel</h4>\n    <el-row>\n      <el-carousel height=\"150px\">\n        <el-carousel-item v-for=\"item in 4\" :key=\"item\">\n          <h3>{{ item }}</h3>\n        </el-carousel-item>\n      </el-carousel>\n    </el-row>\n    <h4>Collapse</h4>\n    <el-row>\n      <el-collapse v-model=\"collapse\">\n        <el-collapse-item title=\"Consistent\" name=\"1\">\n          <div>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;</div>\n        </el-collapse-item>\n        <el-collapse-item title=\"Feedback\" name=\"2\">\n          <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n        </el-collapse-item>\n      </el-collapse>\n    </el-row>\n    <h4>Avatar</h4>\n    <el-row class=\"demo-line avatar-demo\">\n      <el-avatar icon=\"el-icon-user-solid\"/>\n      <el-avatar> avatar </el-avatar>\n      <el-avatar shape=\"square\" fit=\"contain\" :src=\"avatarData.url\"></el-avatar>\n      <el-avatar size=\"large\"> large </el-avatar>\n      <el-avatar size=\"medium\"> medium </el-avatar>\n      <el-avatar size=\"small\"> small </el-avatar>\n    </el-row>\n  </div>\n</template>\n<script>\nexport default {\n  data() {\n    return {\n      radio: '1',\n      radio1: 'Washington',\n      radio2: '1',\n      checked: true,\n      checked1: ['Shanghai'],\n      checked2: true,\n      input: 'Element',\n      inputNumber: 1,\n      selectOptions: [\n        {\n          value: 'Option1',\n          label: 'Option1'\n        },\n        {\n          value: 'Option2',\n          label: 'Option2'\n        },\n        {\n          value: 'Option3',\n          label: 'Option3'\n        },\n        {\n          value: 'Option4',\n          label: 'Option4'\n        },\n        {\n          value: 'Option5',\n          label: 'Option5'\n        }\n      ],\n      selectValue: '',\n      cascadeOptions: [\n        {\n          value: 'guide',\n          label: 'Guide',\n          children: [\n            {\n              value: 'disciplines',\n              label: 'Disciplines',\n              children: [\n                {\n                  value: 'consistency',\n                  label: 'Consistency'\n                },\n                {\n                  value: 'feedback',\n                  label: 'Feedback'\n                }\n              ]\n            }\n          ]\n        },\n        {\n          value: 'resource',\n          label: 'Resource',\n          children: [\n            {\n              value: 'axure',\n              label: 'Axure Components'\n            },\n            {\n              value: 'sketch',\n              label: 'Sketch Templates'\n            },\n            {\n              value: 'docs',\n              label: 'Design Documentation'\n            }\n          ]\n        }\n      ],\n      cascaderValue: [],\n      switchValue: true,\n      slider: 28,\n      datePicker: '',\n      rate: null,\n      transferData: (() => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `Option ${i}`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      })(),\n      transfer: [1, 4],\n      tableData: [\n        {\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        },\n        {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        },\n        {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        },\n        {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }\n      ],\n      menu: '1',\n      tab: 'first',\n      collapse: ['1'],\n      treeData: [{\n        label: 'Level one 1',\n        children: [{\n          label: 'Level two 1-1',\n          children: [{\n            label: 'Level three 1-1-1'\n          }]\n        }]\n      }, {\n        label: 'Level one 2',\n        children: [{\n          label: 'Level two 2-1',\n          children: [{\n            label: 'Level three 2-1-1'\n          }]\n        }, {\n          label: 'Level two 2-2',\n          children: [{\n            label: 'Level three 2-2-1'\n          }]\n        }]\n      }, {\n        label: 'Level one 3',\n        children: [{\n          label: 'Level two 3-1',\n          children: [{\n            label: 'Level three 3-1-1'\n          }]\n        }, {\n          label: 'Level two 3-2',\n          children: [{\n            label: 'Level three 3-2-1'\n          }]\n        }]\n      }],\n      defaultTreeProps: {\n        children: 'children',\n        label: 'label'\n      },\n      avatarData: {\n        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'\n      }\n    };\n  }\n};\n</script>\n"
  },
  {
    "path": "examples/components/theme/constant.js",
    "content": "export const DEFAULT_THEME_CONFIG = {\n  global: {},\n  local: {}\n};\n\nexport const ELEMENT_THEME_USER_CONFIG = 'ELEMENT_THEME_USER_CONFIG';\n\nexport const ELEMENT_THEME_PREVIEW_CONFIG = 'ELEMENT_THEME_PREVIEW_CONFIG';\n\nexport const ACTION_DOWNLOAD_THEME = 'ELEMENT_THEME_ACTION_DOWNLOAD';\n\nexport const ACTION_APPLY_THEME = 'ELEMENT_THEME_ACTION_ALLPY_CSS';\n\nexport const ACTION_COMPONECT_SELECT = 'ELEMENT_THEME_ACTION_COMPONECT_SELECT';\n\nexport const ACTION_USER_CONFIG_UPDATE = 'ELEMENT_THEME_USER_CONFIG_UPDATE';\n"
  },
  {
    "path": "examples/components/theme/loader/ajax.js",
    "content": "const defaultError = 'Server Error 500';\nconst defaultTimeout = 'Request Timeout';\nconst xhr = (method, url, data = null, cb) => {\n  return new window.Promise((resolve, reject) => {\n    const xhr = new XMLHttpRequest();\n    const doReject = (xhr) => {\n      reject(xhr.response || xhr.statusText || defaultError);\n    };\n    xhr.open(method, url);\n    xhr.setRequestHeader('Content-Type', 'application/json');\n    xhr.timeout = 10000;\n    if (cb) cb(xhr);\n    xhr.onload = () => {\n      if (xhr.readyState === 4) {\n        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {\n          let response = xhr.response;\n          const type = xhr.getResponseHeader('Content-Type');\n          if (type.indexOf('zip') > -1) {\n            let filename = 'style.zip';\n            const disposition = xhr.getResponseHeader('content-disposition');\n            if (disposition && disposition.indexOf('attachment') !== -1) {\n              var filenameRegex = /filename[^;=\\n]*=((['\"]).*?\\2|[^;\\n]*)/;\n              var matches = filenameRegex.exec(disposition);\n              if (matches != null && matches[1]) {\n                filename = matches[1].replace(/['\"]/g, '');\n              }\n            }\n            var blob = new Blob([response], { type });\n            var zipUrl = URL.createObjectURL(blob);\n            var link = document.createElement('a');\n            link.href = zipUrl;\n            link.download = filename;\n            link.click();\n            resolve(response);\n            return;\n          }\n          try {\n            response = JSON.parse(xhr.response);\n          } catch (e) {}\n          resolve(response);\n        } else {\n          doReject(xhr);\n        }\n      } else {\n        doReject(xhr);\n      }\n    };\n    xhr.onerror = () => {\n      doReject(xhr);\n    };\n    xhr.ontimeout = () => {\n      xhr.abort();\n      reject(defaultTimeout);\n    };\n    xhr.send(JSON.stringify(data));\n  });\n};\n\nexport const post = (url, data, cb) => {\n  return xhr('POST', url, data, cb);\n};\n\nexport const get = (url) => {\n  return xhr('GET', url);\n};\n"
  },
  {
    "path": "examples/components/theme/loader/api.js",
    "content": "import Element from 'main/index.js';\nimport { post, get } from './ajax';\n\nconst { version } = Element;\n\nconst hostList = {\n  local: 'http://localhost:3008/',\n  production: 'https://element-api.ele.me/element/theme/'\n};\n\nconst host = hostList[process.env.FAAS_ENV] || hostList.production;\n\nexport const getVars = () => {\n  return get(`${host}getVariable?version=${version}`);\n};\n\nexport const updateVars = (data, cb) => {\n  return post(`${host}updateVariable?version=${version}`, data, cb);\n};\n"
  },
  {
    "path": "examples/components/theme/loader/docStyle.vue",
    "content": "<script>\nconst ORIGINAL_THEME = '#409EFF';\nimport { get as ajaxGet } from './ajax.js';\nimport { updateDomHeadStyle } from '../utils.js';\n\nexport default {\n  data() {\n    return {\n      docs: '', // content of docs css\n      theme: ORIGINAL_THEME,\n      asyncCb: true\n    };\n  },\n  methods: {\n    updateDocStyle(e, cb) {\n      const val = e.global['$--color-primary'] || ORIGINAL_THEME;\n      const oldVal = this.theme;\n      const getHandler = (variable, id) => {\n        return () => {\n          let newStyle = this.updateStyle(this[variable], ORIGINAL_THEME, val);\n          updateDomHeadStyle(id, newStyle);\n          this.asyncCb && cb();\n        };\n      };\n      const docsHandler = getHandler('docs', 'docs-style');\n      if (!this.docs) {\n        const links = [].filter.call(document.querySelectorAll('link'), link => {\n          return /docs\\..+\\.css/.test(link.href || '');\n        });\n        if (links[0]) {\n          this.getCSSString(links[0].href, docsHandler, 'docs');\n        } else {\n          this.asyncCb = false;\n        }\n      } else {\n        docsHandler();\n      }\n      const styles = [].slice.call(document.querySelectorAll('style'))\n        .filter(style => {\n          const text = style.innerText;\n          return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text);\n        });\n      styles.forEach(style => {\n        const { innerText } = style;\n        if (typeof innerText !== 'string') return;\n        style.innerText = this.updateStyle(innerText, oldVal, val);\n      });\n      this.theme = val;\n      !this.asyncCb && cb();\n    },\n    updateStyle(style, oldColor, newColor) {\n      return style.replace(new RegExp(oldColor, 'ig'), newColor);\n    },\n    getCSSString(url, callback, variable) {\n      ajaxGet(url).then((res) => {\n        this[variable] = res;\n        callback();\n      });\n    }\n  }\n};\n</script>\n"
  },
  {
    "path": "examples/components/theme/loader/index.vue",
    "content": "<script>\nimport bus from '../../../bus.js';\nimport Loading from './loading';\nimport DocStyle from './docStyle';\nimport { updateVars } from './api.js';\nimport { updateDomHeadStyle } from '../utils.js';\nimport {\n  ACTION_APPLY_THEME,\n  ACTION_DOWNLOAD_THEME,\n  ACTION_USER_CONFIG_UPDATE\n} from '../constant.js';\nimport {\n  loadUserThemeFromLocal,\n  loadPreviewFromLocal\n} from '../localstorage.js';\nimport { getActionDisplayName } from '../../theme-configurator/utils/utils';\n\nexport default {\n  mixins: [Loading, DocStyle],\n  mounted() {\n    this.checkLocalThemeConfig();\n    bus.$on(ACTION_APPLY_THEME, val => {\n      this.userConfig = val;\n      this.onAction();\n    });\n    bus.$on(ACTION_DOWNLOAD_THEME, (themeConfig, themeName) => {\n      this.onDownload(themeConfig, themeName);\n    });\n  },\n  data() {\n    return {\n      userConfig: {},\n      lastApply: 0\n    };\n  },\n  methods: {\n    applyStyle(res, time) {\n      if (time < this.lastApply) return;\n      this.updateDocs(() => {\n        updateDomHeadStyle('chalk-style', res);\n      });\n      this.lastApply = time;\n    },\n    onDownload(themeConfig, themeName) {\n      this.triggertProgressBar(true);\n      updateVars(\n        Object.assign({}, themeConfig, { download: true }),\n        xhr => {\n          xhr.responseType = 'blob';\n        }\n      ).then()\n        .catch((err) => {\n          this.onError(err);\n        })\n        .then(() => {\n          this.triggertProgressBar(false);\n        });\n      ga('send', 'event', 'ThemeConfigurator', 'Download', themeName);\n    },\n    onAction() {\n      this.triggertProgressBar(true);\n      const time = +new Date();\n      updateVars(this.userConfig)\n        .then(res => {\n          this.applyStyle(res, time);\n        })\n        .catch(err => {\n          this.onError(err);\n        })\n        .then(() => {\n          this.triggertProgressBar(false);\n        });\n    },\n    onError(err) {\n      let message;\n      try {\n        message = JSON.parse(err).message;\n      } catch (e) {\n        message = err;\n      }\n      this.$message.error(message);\n    },\n    triggertProgressBar(isLoading) {\n      bus.$emit('user-theme-config-loading', isLoading);\n    },\n    updateDocs(cb) {\n      window.userThemeConfig = JSON.parse(JSON.stringify(this.userConfig));\n      bus.$emit(ACTION_USER_CONFIG_UPDATE, this.userConfig);\n      this.updateDocStyle(this.userConfig, cb);\n    },\n    checkLocalThemeConfig() {\n      // load user local theme\n      const previewConfig = loadPreviewFromLocal();\n      if (previewConfig.type === 'user') {\n        const userConfig = loadUserThemeFromLocal();\n        this.$message(getActionDisplayName('load-local-theme-config'));\n        const config = userConfig.filter(theme => (theme.name === previewConfig.name));\n        if (config && config[0]) {\n          this.userConfig = JSON.parse(config[0].theme);\n          this.onAction();\n        }\n      }\n    }\n  }\n};\n</script>"
  },
  {
    "path": "examples/components/theme/loader/loading/index.vue",
    "content": "<style>\n  .loadingClass {\n    z-index: 0!important;\n    .el-loading-spinner {\n      top: 0%;\n      margin-top: 30%;\n    }\n  }\n</style>\n<script>\n\nimport bus from '../../../../bus.js';\nimport './progress.js';\n\nexport default {\n  data() {\n    return {\n      count: 0\n    };\n  },\n  created() {\n    bus.$on('user-theme-config-loading', val => {\n      if (val) {\n        this.count++;\n        if (this.count > 1) return;\n        this.$bar.start();\n      } else {\n        this.count--;\n        if (this.count) return;\n        this.$bar.finish();\n      }\n    });\n  }\n};\n</script>\n"
  },
  {
    "path": "examples/components/theme/loader/loading/progress.js",
    "content": "import Vue from 'vue';\nimport ProgressBar from './progress.vue';\n\nVue.prototype.$bar = new Vue(ProgressBar).$mount();\n\ndocument.body.appendChild(Vue.prototype.$bar.$el);\n"
  },
  {
    "path": "examples/components/theme/loader/loading/progress.vue",
    "content": "<template>\n  <div class=\"progress\" :style=\"{\n    'width': percent+'%',\n    'height': height,\n    'background-color': canSuccess? successColor() : failedColor(),\n    'opacity': show ? 1 : 0\n  }\"></div>\n</template>\n\n<script>\n/* eslint-disable */\nexport default {\n  data () {\n    return {\n      percent: 0,\n      show: false,\n      canSuccess: true,\n      duration: 3000,\n      height: '2px'\n    }\n  },\n  methods: {\n    successColor() {\n      return this.userSelectColor()['$--color-primary'] || '#409EFF';\n    },\n    failedColor() {\n      return this.userSelectColor()['$--color-danger'] || '#F56C6C';\n    },\n    userSelectColor() {\n      return window.userThemeConfig && window.userThemeConfig.global || {}\n    },\n    start () {\n      this.show = true\n      this.canSuccess = true\n      if (this._timer) {\n        clearInterval(this._timer)\n        this.percent = 0\n      }\n      // Code from Nuxt.js!\n      this._cut = 10000 / Math.floor(this.duration)\n      this._timer = setInterval(() => {\n        this.increase(this._cut * Math.random())\n        if (this.percent >= 90) {\n          this.percent = 90;\n        }\n      }, 100)\n      return this\n    },\n    set (num) {\n      this.show = true\n      this.canSuccess = true\n      this.percent = Math.floor(num)\n      return this\n    },\n    get () {\n      return Math.floor(this.percent)\n    },\n    increase (num) {\n      this.percent = this.percent + Math.floor(num)\n      return this\n    },\n    decrease (num) {\n      this.percent = this.percent - Math.floor(num)\n      return this\n    },\n    finish () {\n      this.percent = 100\n      this.hide()\n      return this\n    },\n    pause () {\n      clearInterval(this._timer)\n      return this\n    },\n    hide () {\n      clearInterval(this._timer)\n      this._timer = null\n      setTimeout(() => {\n        this.show = false\n        this.$nextTick(() => {\n          setTimeout(() => {\n            this.percent = 0\n          }, 200)\n        })\n      }, 500)\n      return this\n    },\n    fail () {\n      this.canSuccess = false\n      return this\n    }\n  }\n}\n</script>\n\n<style scoped>\n.progress {\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  right: 0px;\n  height: 2px;\n  width: 0%;\n  transition: width 0.2s, opacity 0.4s;\n  opacity: 1;\n  z-index: 999999;\n}\n</style>"
  },
  {
    "path": "examples/components/theme/localstorage.js",
    "content": "import {\n  ELEMENT_THEME_PREVIEW_CONFIG,\n  ELEMENT_THEME_USER_CONFIG\n} from './constant';\n\nexport const saveToLocal = (key, value) => {\n  localStorage.setItem(key, JSON.stringify(value));\n};\n\nexport const loadFromLocal = (key) => {\n  try {\n    return JSON.parse(localStorage.getItem(key));\n  } catch (e) {\n    console.error(e);\n    return null;\n  }\n};\n\nexport const savePreviewToLocal = (value) => {\n  saveToLocal(ELEMENT_THEME_PREVIEW_CONFIG, value);\n};\n\nexport const loadPreviewFromLocal = () => {\n  return loadFromLocal(ELEMENT_THEME_PREVIEW_CONFIG) || {};\n};\n\nexport const removePreviewFromLocal = () => {\n  return localStorage.removeItem(ELEMENT_THEME_PREVIEW_CONFIG);\n};\n\nexport const saveUserThemeToLocal = (value) => {\n  saveToLocal(ELEMENT_THEME_USER_CONFIG, value);\n};\n\nexport const loadUserThemeFromLocal = () => {\n  return loadFromLocal(ELEMENT_THEME_USER_CONFIG);\n};\n\n"
  },
  {
    "path": "examples/components/theme/theme-card.vue",
    "content": "<style lang=\"scss\">\n.theme-card-item {\n  user-select: none;\n  border-radius: 4px;\n  overflow: hidden;\n  background: #fff;\n  height: 90%;\n  margin: 25px 0;\n  box-shadow: 0 0 1px 0 #666;\n  &.is-hidden {\n    opacity: 0;\n    height: 0;\n  }\n  .upload {\n    cursor: pointer;\n    background: #f5f7fa;\n    height: 100%;\n    width: 100%;\n    display: flex;\n    justify-content: center;\n    align-items:center;\n    .upload-action {\n      width: 40%;\n      margin: 0 auto;\n      text-align: center;\n      color: #606266;\n      img {\n        display: block;\n        margin: 0 auto;\n      }\n      span {\n        display: block;\n        font-size: 14px;\n        margin-top: 8px;\n      }\n    }\n  }\n  .preview {\n    position: relative;\n    height: 70%;\n    width: 100%;\n    .line {\n      height: 50%;\n    }\n    .line-2 {\n      width: 50%;\n      height: 100%;\n      display: inline-block;\n    }\n    .line-4 {\n      width: 25%;\n      height: 100%;\n      display: inline-block;\n    }\n    .action {\n      transition: all .3s;\n      position: absolute;\n      opacity: 0;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      .action-mask {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background: #000;\n        opacity: 0.4;\n      }\n      .action-block {\n        position: absolute;\n        width: 50%;\n        height: 50%;\n        left: 25%;\n        top: 25%;\n      }\n      .action-item {\n        cursor: pointer;\n        display: inline-block;\n        height: 100%;\n        width: 30%;\n        color: #eee;\n        &:hover {\n          color: #fff;\n          .circle {\n            border-color: #fff;\n          }\n        }\n        .icon {\n          height: 50%;\n          font-size: 22px;\n          text-align: center;\n          display: flex;\n          justify-content:center;\n          align-items:center;\n          img {\n            width: 130%;\n          }\n        }\n        .name {\n          font-size: 12px;\n          height: 50%;\n          text-align: center;\n          display: flex;\n          justify-content:center;\n          align-items:center;\n          margin-top: 4px;\n        }\n      }\n      .action-item-right {\n        margin-left: 40%;\n      }\n    }\n  }\n  .info {\n    height: 30%;\n    line-height: 16px;\n    display: flex;\n    align-items: center;\n    .info-center {\n      width: 100%;\n    }\n    .title {\n      font-weight: bold;\n      font-size: 16px;\n      color: #303133;\n      padding: 0 12px;\n      justify-content: space-between;\n    }\n    .right {\n      float: right;\n      font-weight: normal;\n      font-size: 14px;\n      color: #909399;\n    }\n    .more {\n      font-size: 16px;\n      cursor: pointer;\n    }\n    .description {\n      padding: 0 12px;\n      font-size: 14px;\n      color: #606266;\n      margin-top: 10px;\n    }\n  }\n  &.is-upload {\n    box-shadow: none;\n    border: 1px dashed #DCDFE6;\n  }\n  &.is-upload:hover {\n    box-shadow: none;\n  }\n\n  &:hover {\n    box-shadow: 0 0 10px 0 #999;\n    .action {\n      opacity: 1;\n    }\n  }\n}\n</style>\n\n<template>\n  <section class=\"theme-card-item\" :class=\"{'is-hidden': !config || !config.name, 'is-upload': isUpload}\">\n    <template v-if=\"isUpload\">\n      <div class=\"upload\" @click=\"uploadClick\">\n        <div class=\"upload-action\">\n          <img src=\"../../assets/images/icon-upload.svg\"/>\n          <span>{{getActionDisplayName('upload-theme')}}</span>\n        </div>\n      </div>\n      <input\n        class=\"el-upload__input\"\n        type=\"file\"\n        ref=\"input\"\n        @change=\"uploadAction\"\n        accept=\"application/json\"\n      />\n    </template>\n    <template v-else>\n      <div class=\"preview\">\n        <div class=\"line\">\n          <span class=\"line-2\" :style=\"{background: mainColor}\"></span>\n          <span class=\"line-2\" :style=\"{background: textPrimaryColor}\"></span>\n        </div>\n        <div class=\"line\">\n          <span class=\"line-4\" :style=\"{background: mainColor50}\"></span>\n          <span class=\"line-4\" :style=\"{background: mainColor80}\"></span>\n          <span class=\"line-4\" :style=\"{background: borderBaseColor}\"></span>\n          <span class=\"line-4\" :style=\"{background: textSecondaryColor}\"></span>\n        </div>\n        <div class=\"action\">\n          <div class=\"action-mask\"></div>\n          <div class=\"action-block\">\n            <div\n              class=\"action-item\"\n              :class=\"index && 'action-item-right'\"\n              v-for=\"(item, index) in actionArray\"\n              :key=\"index\"\n              @click=\"iconClick(item.action)\"\n            >\n              <div class=\"icon\">\n                <img :src=\"item.icon\"/>\n                <span class=\"circle\"></span>\n              </div>\n              <div class=\"name\">\n                <span>{{item.name}}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"info\">\n        <div class=\"info-center\">\n          <div class=\"title\">\n            <span>{{config.name}}</span>\n            <span class=\"right\" v-if=\"isOfficial\">by {{config.author}}</span>\n            <span class=\"right more\" v-else>\n              <el-dropdown @command=\"actionClick\">\n                <i class=\"el-icon-more\"></i>\n                <el-dropdown-menu slot=\"dropdown\">\n                  <el-dropdown-item command=\"rename\">{{getActionDisplayName('rename-theme')}}</el-dropdown-item>\n                  <el-dropdown-item command=\"copy\">{{getActionDisplayName('copy-theme')}}</el-dropdown-item>\n                  <el-dropdown-item\n                      command=\"delete\"\n                      style=\"color: #F56C6C;\"\n                    >\n                      {{getActionDisplayName('delete-theme')}}\n                    </el-dropdown-item>\n                </el-dropdown-menu>\n              </el-dropdown>\n            </span>\n          </div>\n          <div class=\"description\" v-if=\"isOfficial\">{{getActionDisplayName(getDescriptionKey(config.name))}} </div>\n          <div class=\"description\" v-else>{{getActionDisplayName('last-modified')}} {{formatDate(config.update)}}</div>\n        </div>\n      </div>\n    </template>\n  </section>\n</template>\n\n<script>\nimport bus from '../../bus';\nimport {\n  DEFAULT_THEME_CONFIG,\n  ACTION_DOWNLOAD_THEME\n} from './constant.js';\nimport { savePreviewToLocal } from './localstorage';\nimport { tintColor } from '../../color.js';\nimport dateUtil from 'element-ui/src/utils/date';\nimport { getActionDisplayName } from '../theme-configurator/utils/utils';\n\nexport default {\n  props: {\n    config: Object,\n    type: String,\n    base: {\n      type: String,\n      default: ''\n    },\n    from: String\n  },\n  data() {\n    return {\n      deleteVisible: false\n    };\n  },\n  methods: {\n    getActionDisplayName(key) {\n      return getActionDisplayName(key);\n    },\n    getDescriptionKey(name) {\n      return name ? `description-${name.toLowerCase()}` : '';\n    },\n    formatDate(timestamp) {\n      if (!timestamp) return '';\n      return dateUtil.format(new Date(timestamp), 'yyyy-MM-dd HH:mm');\n    },\n    uploadClick() {\n      this.$refs.input.value = null;\n      this.$refs.input.click();\n    },\n    uploadAction(ev) {\n      const files = ev.target.files;\n      if (!files) return;\n      var reader = new FileReader();\n      reader.onload = (e) => {\n        try {\n          const jsonString = e.target.result;\n          const jsonObject = JSON.parse(jsonString);\n          if (!jsonObject.global || !jsonObject.local) {\n            return this.$message.error('JSON format error');\n          }\n          this.$emit('action', 'upload', jsonString);\n        } catch (e) {\n          this.$message.error('Upload error');\n          console.error(e);\n        }\n      };\n      reader.readAsText(files[0]);\n    },\n    actionClick(e) {\n      this.$emit('action', e, this.config);\n    },\n    iconClick(e) {\n      switch (e) {\n        case 'preview':\n        case 'edit':\n          if (this.from) {\n            this.$emit('action', e, this.config);\n            return;\n          }\n          const { name, theme } = this.config;\n          savePreviewToLocal({\n            type: this.type,\n            name,\n            theme\n          });\n          this.$router.push({\n            name: `theme-preview-${this.$route.meta.lang}`,\n            params: {\n              refer: 'theme'\n            }\n          });\n          this.$nextTick(() => {\n            window.scrollTo(0, 0);\n          });\n          break;\n        case 'download':\n          bus.$emit(ACTION_DOWNLOAD_THEME, this.theme, this.config.name);\n          break;\n        default:\n          this.$emit('action', e, this.config);\n          return;\n      }\n    },\n    deleteUserTheme() {\n      this.deleteVisible = false;\n      this.$emit('action', 'delete', this.config);\n    }\n  },\n  computed: {\n    isUpload() {\n      return this.type === 'upload';\n    },\n    theme() {\n      if (this.config.theme) {\n        return JSON.parse(this.config.theme);\n      }\n      return DEFAULT_THEME_CONFIG;\n    },\n    mainColor() {\n      return this.theme.global['$--color-primary'] || '#1989FA';\n    },\n    mainColor50() {\n      return tintColor(this.mainColor, 0.5);\n    },\n    mainColor80() {\n      return tintColor(this.mainColor, 0.8);\n    },\n    textPrimaryColor() {\n      return this.theme.global['$--color-text-primary'] || '#303133';\n    },\n    borderBaseColor() {\n      return this.theme.global['$--border-color-base'] || '#DCDFE6';\n    },\n    textSecondaryColor() {\n      return this.theme.global['$--color-text-secondary'] || '#909399';\n    },\n    isOfficial() {\n      return this.type === 'official';\n    },\n    actionArray() {\n      if (this.isOfficial) {\n        return [\n          {\n            icon: require('../../assets/images/icon-check.png'),\n            name: getActionDisplayName('theme-check'),\n            action: 'preview'\n          },\n          {\n            icon: require('../../assets/images/icon-copy.png'),\n            name: getActionDisplayName('theme-copy'),\n            action: 'copy'\n          }\n        ];\n      }\n      return [\n        {\n          icon: require('../../assets/images/icon-edit.png'),\n          name: getActionDisplayName('theme-edit'),\n          action: 'edit'\n        },\n        {\n          icon: require('../../assets/images/icon-download.png'),\n          name: getActionDisplayName('download-theme'),\n          action: 'download'\n        }\n      ];\n    }\n  }\n};\n</script>"
  },
  {
    "path": "examples/components/theme/theme-list.js",
    "content": "export const themeList = [\n  {\n    name: 'Element',\n    author: 'Element',\n    theme: '{\"global\":{\"$--color-primary\":\"#409EFF\"},\"local\":{}}'\n  }\n];\n\nexport const eleThemeList = [\n  {\n    name: 'Kiwi',\n    author: 'Element',\n    theme: '{\"global\":{\"$--color-primary\":\"#1989FA\",\"$--color-success\":\"#5CB87A\",\"$--color-warning\":\"#E6A23C\",\"$--color-danger\":\"#F56C6C\",\"$--color-info\":\"#8896B3\",\"$--font-size-small\":\"13px\",\"$--font-size-base\":\"14px\",\"$--font-size-medium\":\"16px\",\"$--font-size-large\":\"22px\",\"$--font-size-extra-large\":\"28px\",\"$--font-line-height-secondary\":\"20px\"},\"local\":{\"$--button-primary-background-color\":\"$--color-primary\",\"$--switch-font-size\":\"14px\",\"$--datepicker-active-color\":\"$--color-primary\",\"$--tooltip-border-color\":\"$--border-color-base\",\"$--tooltip-color\":\"#FFFFFF\",\"$--tooltip-padding\":\"10px\",\"$--collapse-header-font-size\":\"14px\",\"$--collapse-content-font-size\":\"14px\",\"$--collapse-content-font-color\":\"$--color-text-regular\",\"$--radio-input-background-color\":\"#FFFFFF\",\"$--radio-icon-color\":\"$--color-warning\",\"$--radio-button-checked-background-color\":\"$--color-primary\",\"$--input-border-radius\":\"$--border-radius-base\",\"$--select-input-focus-border-color\":\"$--color-primary\",\"$--select-font-size\":\"14px\",\"$--select-option-selected-font-color\":\"$--color-primary\",\"$--select-input-font-size\":\"14px\",\"$--select-option-height\":\"34px\",\"$--slider-main-background-color\":\"$--color-primary\",\"$--tag-font-color\":\"$--color-primary\",\"$--tag-default-hover-background-color\":\"$--color-primary\",\"$--message-warning-font-color\":\"$--color-warning\",\"$--alert-title-font-size\":\"14px\",\"$--alert-icon-size\":\"14px\",\"$--alert-icon-large-size\":\"22px\",\"$--alert-close-customed-font-size\":\"12px\",\"$--notification-title-font-size\":\"16px\",\"$--notification-content-font-size\":\"14px\",\"$--menu-item-font-color\":\"$--color-primary\"}}'\n  }\n];\n"
  },
  {
    "path": "examples/components/theme/utils.js",
    "content": "export const isEmptyObject = (obj) => (JSON.stringify(obj) === '{}');\n\nexport const getThemeConfigObject = (config) => {\n  try {\n    const conf = JSON.parse(config);\n    const { global, local } = conf;\n    if (!isEmptyObject(global) || !isEmptyObject(local)) {\n      return conf;\n    }\n    return false;\n  } catch (e) {\n    return false;\n  }\n};\n\nexport const updateDomHeadStyle = (id, styleContent) => {\n  let styleTag = document.getElementById(id);\n  if (!styleTag) {\n    styleTag = document.createElement('style');\n    styleTag.setAttribute('id', id);\n    document.head.appendChild(styleTag);\n  }\n  styleTag.innerText = styleContent.replace(/@font-face{[^}]+}/, '');\n};\n"
  },
  {
    "path": "examples/components/theme-configurator/action.vue",
    "content": "<template>\n  <div class=\"configurator-action\">\n      <div class=\"action-group\">\n        <el-tooltip :content=\"getActionDisplayName('undo')\">\n          <img \n            src=\"../../assets/images/icon-undo.svg\"\n            @click=\"onUndo\"\n            :class=\"{ 'active': userConfigHistory.length > 0 }\"\n          />\n        </el-tooltip>\n        <el-tooltip :content=\"getActionDisplayName('redo')\">\n          <img \n            src=\"../../assets/images/icon-redo.svg\"\n            @click=\"onRedo\"\n            :class=\"{ 'active': userConfigRedoHistory.length > 0 }\"\n          />\n        </el-tooltip>\n        <div class=\"button-group\">\n          <el-button \n            class=\"reset\"\n            type=\"primary\" \n            round \n            size=\"mini\"\n            :disabled=\"isOfficial\"\n            @click=\"onReset\"\n          >\n            {{getActionDisplayName('reset-theme')}}\n          </el-button>\n          <el-button \n            class=\"download\"\n            type=\"primary\" \n            round \n            size=\"mini\"\n            :disabled=\"downloadDisabled\"\n            @click=\"onDownload\"\n          >\n            {{getActionDisplayName('download-theme')}}\n          </el-button>\n        </div>\n      </div>\n      <el-select v-model=\"selectedComponent\" class=\"selector\">\n        <el-option\n          v-for=\"item in selectOptions\"\n          :key=\"item.value\"\n          :label=\"item.label\"\n          :value=\"item.value\">\n        </el-option>\n      </el-select>\n      <div class=\"line\"></div>\n    </div>\n</template>\n\n<style lang=\"scss\">\n.configurator-action {\n  padding: 15px 18px 0;\n  .action-group {\n    padding: 5px 0;\n    img {\n      cursor: not-allowed;\n      width: 16px;\n      height: 16px;\n      padding: 7px 0;\n      margin-left: 5px;\n      opacity: .5;\n      &.active {\n        opacity: 1;\n        cursor: pointer;\n      }\n      &:last-of-type {\n        margin-left: 10px;\n      }\n    }\n    .button-group {\n      float: right;\n      .el-button {\n        padding: 6px 15px;\n        &.is-disabled {\n          color: #C0C4CC;\n          background-color: #fff;\n          border-color: #EBEEF5;\n        }\n      }\n      .reset {\n        background: #E6F1FC;\n        color: #1989FA;\n        border-color: #A2CFFC;\n      }\n      .download {\n        background: #1989FA;\n        color: #FFF;\n        border-color: #1989FA\n      }\n    }\n  }\n  .selector {\n    width: 100%;\n    input {\n      background: #f5f7fa;\n      border: none;\n      font-size: 18px;\n      padding-left: 0;\n      color: #606266;\n    }\n  }\n  .line {\n    width: 100%;\n    height: 0;\n    border-bottom: 1px solid #DCDFE6;\n  }\n}\n</style>\n\n<script>\nimport { getActionDisplayName } from './utils/utils';\nexport default {\n  props: {\n    selectOptions: Array,\n    userConfigHistory: Array,\n    userConfigRedoHistory: Array,\n    isOfficial: Boolean,\n    onUndo: Function,\n    onRedo: Function\n  },\n  data() {\n    return {\n      selectedComponent: 'color',\n      downloadDisabled: false\n    };\n  },\n  watch: {\n    selectedComponent: {\n      handler(val) {\n        this.$emit('select', val);\n      }\n    }\n  },\n  methods: {\n    getActionDisplayName(key) {\n      return getActionDisplayName(key);\n    },\n    onReset() {\n      this.$parent.onReset();\n    },\n    onDownload() {\n      this.downloadDisabled = true;\n      this.$parent.onDownload();\n      setTimeout(() => {\n        this.downloadDisabled = false;\n      }, 2500);\n    }\n  }\n};\n</script>"
  },
  {
    "path": "examples/components/theme-configurator/editor/borderRadius.vue",
    "content": "<template>\n  <section class=\"config\" :key=\"displayName\">\n    <div class=\"config-label\">\n      <el-tooltip :content=\"displayName\" placement=\"top\">\n        <span>{{displayKeyName}}</span>\n      </el-tooltip>\n    </div>\n    <div class=\"config-content\">\n      <theme-input \n        v-if=\"isGlobal\"\n        :val=\"value\"\n        @change=\"onChange\"\n      ></theme-input>\n      <el-select \n        size=\"medium\"\n        v-if=\"!isGlobal\"\n        v-model=\"value\" \n        class=\"select\"\n        @change=\"onSelectChange\"\n      >\n        <el-option\n          v-for=\"item in options\"\n          :key=\"item.value\"\n          :label=\"item.label\"\n          :value=\"item.value\">\n        </el-option>\n      </el-select>\n    </div>\n  </section>\n</template>\n\n<style>\n.select {\n  width: 100%;\n}\n</style>\n\n<script>\nimport Mixin from './mixin';\nimport Input from './input';\nimport { getStyleDisplayName } from '../utils/utils.js';\n\nexport default {\n  data() {\n    return {\n      options: [],\n      value: ''\n    };\n  },\n  components: {\n    themeInput: Input\n  },\n  mixins: [Mixin],\n  computed: {\n    isGlobalInputValue() {\n      return this.config.value.startsWith('$');\n    }\n  },\n  methods: {\n    onSelectChange(e) {\n      this.onChange(e);\n    },\n    initSelectOption() {\n      this.options = [];\n      const golbalV = this.golbalValue.border;\n      if (golbalV) {\n        Object.keys(golbalV).forEach((font) => {\n          if (font.includes('border-radius')) {\n            const size = golbalV[font];\n            this.options.push({\n              value: size.key,\n              label: getStyleDisplayName(size)\n            });\n          }\n        });\n      }\n    }\n  },\n  watch: {\n    'mergedValue': {\n      immediate: true,\n      handler(value) {\n        this.initSelectOption();\n        this.value = this.mergedValue;\n      }\n    }\n  }\n};\n</script>"
  },
  {
    "path": "examples/components/theme-configurator/editor/boxShadow.vue",
    "content": "<template>\n  <section class=\"config\" :key=\"displayName\">\n    <div class=\"config-label\">\n      <el-tooltip :content=\"displayName\" placement=\"top\">\n        <span>{{displayKeyName}}</span>\n      </el-tooltip>\n      <el-button \n        class=\"plus-button\" \n        size=\"mini\" \n        round \n        icon=\"el-icon-plus\"\n        @click.stop=\"onAddShadow\"\n      >\n      </el-button>\n    </div>\n    <div class=\"config-content\" v-for=\"(each, key) in valueArr\" :key=\"key\">\n      <div class=\"content-10\">\n        <color-picker \n          size=\"mini\"\n          class=\"colorPicker\"\n          v-model=\"each.color\" \n          @change=\"val => onInputChange(val, key, 'color')\"\n          show-alpha\n        ></color-picker>\n        <span class=\"content-tip\">Color</span>\n      </div>\n      <div class=\"content-20\">\n        <theme-input  \n          size=\"mini\"\n          :val=\"each.offsetX\" \n          @change=\"val => onInputChange(Number(val), key, 'offsetX')\"\n        >\n        </theme-input>\n        <span class=\"content-tip\">X-px</span>\n      </div>\n      <div class=\"content-20\">\n        <theme-input \n          size=\"mini\"\n          :val=\"each.offsetY\" \n          @change=\"val => onInputChange(Number(val), key, 'offsetY')\"\n        >\n        </theme-input>\n        <span class=\"content-tip\">Y-px</span>\n      </div>\n      <div class=\"content-20\">\n        <theme-input \n          size=\"mini\"\n          :val=\"each.spreadRadius\" \n          @change=\"val => onInputChange(Number(val), key, 'spreadRadius')\"\n        >\n        </theme-input>\n        <span class=\"content-tip\">Spread</span>\n      </div>\n      <div class=\"content-20\">\n        <theme-input \n          size=\"mini\"\n          :val=\"each.blurRadius\" \n          @change=\"val => onInputChange(Number(val), key, 'blurRadius')\"\n        >\n        </theme-input>\n        <span class=\"content-tip\">Blur</span>\n      </div>\n      <div class=\"content-10\">\n        <el-button \n          size=\"mini\" \n          round \n          icon=\"el-icon-minus\"\n          @click.stop=\"val => onMinusShadow(key)\"\n        ></el-button>\n      </div>\n    </div>\n  </section>\n</template>\n\n<style scoped>\n.plus-button {\n  position: absolute;\n  left: 90%;\n  margin-top: 4px;\n}\n.colorPicker {\n  margin-left: 0;\n}\n.content-20 .el-input__suffix-inner span{\n  line-height: 28px;\n}\n.content-20 {\n  padding: 0 3px;\n}\n.content-10 { \n  vertical-align: top;\n}\n.content-tip {\n  color: #909399;\n  font-size: 12px;\n}\n.config-content {\n  padding: 5px 0;\n}\n/* Element buton style override */\n.el-button--mini.is-round {\n  padding: 3px 3px;  \n}\n</style>\n<script>\nimport Mixin from './mixin';\nimport Input from './input';\nimport { parse as parseShaodw, stringify as stringifyShaodw } from '../utils/boxShadow.js';\nimport ColorPicker from './color-picker';\n\nexport default {\n  components: {\n    ColorPicker,\n    themeInput: Input\n  },\n  data() {\n    return {\n      valueArr: []\n    };\n  },\n  mixins: [Mixin],\n  methods: {\n    onAddShadow() {\n      this.valueArr.push({\n        offsetX: 0,\n        offsetY: 0,\n        spreadRadius: 0,\n        blurRadius: 0,\n        color: 'rgba(0,0,0,0)',\n        inset: false\n      });\n    },\n    onMinusShadow(index) {\n      this.valueArr.splice(index, 1);\n      this.onShadowChange();\n    },\n    onInputChange(e, index, key) {\n      const arr = this.valueArr[index];\n      arr[key] = e;\n      this.valueArr.splice(index, 1, arr);\n      this.onShadowChange();\n    },\n    onShadowChange() {\n      this.onChange(\n        stringifyShaodw(this.valueArr)\n      );\n    }\n  },\n  watch: {\n    'mergedValue': {\n      immediate: true,\n      handler(value) {\n        this.valueArr = parseShaodw(value);\n      }\n    }\n  }\n};\n</script>"
  },
  {
    "path": "examples/components/theme-configurator/editor/color-picker/index.js",
    "content": "import ColorPicker from './src/main';\n\n/* istanbul ignore next */\nColorPicker.install = function(Vue) {\n  Vue.component(ColorPicker.name, ColorPicker);\n};\n\nexport default ColorPicker;\n"
  },
  {
    "path": "examples/components/theme-configurator/editor/color-picker/src/color.js",
    "content": "const hsv2hsl = function(hue, sat, val) {\n  return [\n    hue,\n    (sat * val / ((hue = (2 - sat) * val) < 1 ? hue : 2 - hue)) || 0,\n    hue / 2\n  ];\n};\n\n// Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1\n// <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>\nconst isOnePointZero = function(n) {\n  return typeof n === 'string' && n.indexOf('.') !== -1 && parseFloat(n) === 1;\n};\n\nconst isPercentage = function(n) {\n  return typeof n === 'string' && n.indexOf('%') !== -1;\n};\n\n// Take input from [0, n] and return it as [0, 1]\nconst bound01 = function(value, max) {\n  if (isOnePointZero(value)) value = '100%';\n\n  const processPercent = isPercentage(value);\n  value = Math.min(max, Math.max(0, parseFloat(value)));\n\n  // Automatically convert percentage into number\n  if (processPercent) {\n    value = parseInt(value * max, 10) / 100;\n  }\n\n  // Handle floating point rounding errors\n  if ((Math.abs(value - max) < 0.000001)) {\n    return 1;\n  }\n\n  // Convert into [0, 1] range if it isn't already\n  return (value % max) / parseFloat(max);\n};\n\nconst INT_HEX_MAP = { 10: 'A', 11: 'B', 12: 'C', 13: 'D', 14: 'E', 15: 'F' };\n\nconst toHex = function({ r, g, b }) {\n  const hexOne = function(value) {\n    value = Math.min(Math.round(value), 255);\n    const high = Math.floor(value / 16);\n    const low = value % 16;\n    return '' + (INT_HEX_MAP[high] || high) + (INT_HEX_MAP[low] || low);\n  };\n\n  if (isNaN(r) || isNaN(g) || isNaN(b)) return '';\n\n  return '#' + hexOne(r) + hexOne(g) + hexOne(b);\n};\n\nconst HEX_INT_MAP = { A: 10, B: 11, C: 12, D: 13, E: 14, F: 15 };\n\nconst parseHexChannel = function(hex) {\n  if (hex.length === 2) {\n    return (HEX_INT_MAP[hex[0].toUpperCase()] || +hex[0]) * 16 + (HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1]);\n  }\n\n  return HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1];\n};\n\nconst hsl2hsv = function(hue, sat, light) {\n  sat = sat / 100;\n  light = light / 100;\n  let smin = sat;\n  const lmin = Math.max(light, 0.01);\n  let sv;\n  let v;\n\n  light *= 2;\n  sat *= (light <= 1) ? light : 2 - light;\n  smin *= lmin <= 1 ? lmin : 2 - lmin;\n  v = (light + sat) / 2;\n  sv = light === 0 ? (2 * smin) / (lmin + smin) : (2 * sat) / (light + sat);\n\n  return {\n    h: hue,\n    s: sv * 100,\n    v: v * 100\n  };\n};\n\n// `rgbToHsv`\n// Converts an RGB color value to HSV\n// *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]\n// *Returns:* { h, s, v } in [0,1]\nconst rgb2hsv = function(r, g, b) {\n  r = bound01(r, 255);\n  g = bound01(g, 255);\n  b = bound01(b, 255);\n\n  const max = Math.max(r, g, b);\n  const min = Math.min(r, g, b);\n  let h, s;\n  let v = max;\n\n  const d = max - min;\n  s = max === 0 ? 0 : d / max;\n\n  if (max === min) {\n    h = 0; // achromatic\n  } else {\n    switch (max) {\n      case r:\n        h = (g - b) / d + (g < b ? 6 : 0);\n        break;\n      case g:\n        h = (b - r) / d + 2;\n        break;\n      case b:\n        h = (r - g) / d + 4;\n        break;\n    }\n    h /= 6;\n  }\n\n  return { h: h * 360, s: s * 100, v: v * 100 };\n};\n\n// `hsvToRgb`\n// Converts an HSV color value to RGB.\n// *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]\n// *Returns:* { r, g, b } in the set [0, 255]\nconst hsv2rgb = function(h, s, v) {\n  h = bound01(h, 360) * 6;\n  s = bound01(s, 100);\n  v = bound01(v, 100);\n\n  const i = Math.floor(h);\n  const f = h - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const mod = i % 6;\n  const r = [v, q, p, p, t, v][mod];\n  const g = [t, v, v, q, p, p][mod];\n  const b = [p, p, t, v, v, q][mod];\n\n  return {\n    r: Math.round(r * 255),\n    g: Math.round(g * 255),\n    b: Math.round(b * 255)\n  };\n};\n\nexport default class Color {\n  constructor(options) {\n    this._hue = 0;\n    this._saturation = 100;\n    this._value = 100;\n    this._alpha = 100;\n\n    this.enableAlpha = false;\n    this.format = 'hex';\n    this.value = '';\n\n    options = options || {};\n\n    for (let option in options) {\n      if (options.hasOwnProperty(option)) {\n        this[option] = options[option];\n      }\n    }\n\n    this.doOnChange();\n  }\n\n  set(prop, value) {\n    if (arguments.length === 1 && typeof prop === 'object') {\n      for (let p in prop) {\n        if (prop.hasOwnProperty(p)) {\n          this.set(p, prop[p]);\n        }\n      }\n\n      return;\n    }\n\n    this['_' + prop] = value;\n    this.doOnChange();\n  }\n\n  get(prop) {\n    return this['_' + prop];\n  }\n\n  toRgb() {\n    return hsv2rgb(this._hue, this._saturation, this._value);\n  }\n\n  fromString(value) {\n    if (!value) {\n      this._hue = 0;\n      this._saturation = 100;\n      this._value = 100;\n\n      this.doOnChange();\n      return;\n    }\n\n    const fromHSV = (h, s, v) => {\n      this._hue = Math.max(0, Math.min(360, h));\n      this._saturation = Math.max(0, Math.min(100, s));\n      this._value = Math.max(0, Math.min(100, v));\n\n      this.doOnChange();\n    };\n\n    if (value.indexOf('hsl') !== -1) {\n      const parts = value.replace(/hsla|hsl|\\(|\\)/gm, '')\n        .split(/\\s|,/g).filter((val) => val !== '').map((val, index) => index > 2 ? parseFloat(val) : parseInt(val, 10));\n\n      if (parts.length === 4) {\n        this._alpha = Math.floor(parseFloat(parts[3]) * 100);\n      } else if (parts.length === 3) {\n        this._alpha = 100;\n      }\n      if (parts.length >= 3) {\n        const { h, s, v } = hsl2hsv(parts[0], parts[1], parts[2]);\n        fromHSV(h, s, v);\n      }\n    } else if (value.indexOf('hsv') !== -1) {\n      const parts = value.replace(/hsva|hsv|\\(|\\)/gm, '')\n        .split(/\\s|,/g).filter((val) => val !== '').map((val, index) => index > 2 ? parseFloat(val) : parseInt(val, 10));\n\n      if (parts.length === 4) {\n        this._alpha = Math.floor(parseFloat(parts[3]) * 100);\n      } else if (parts.length === 3) {\n        this._alpha = 100;\n      }\n      if (parts.length >= 3) {\n        fromHSV(parts[0], parts[1], parts[2]);\n      }\n    } else if (value.indexOf('rgb') !== -1) {\n      const parts = value.replace(/rgba|rgb|\\(|\\)/gm, '')\n        .split(/\\s|,/g).filter((val) => val !== '').map((val, index) => index > 2 ? parseFloat(val) : parseInt(val, 10));\n\n      if (parts.length === 4) {\n        this._alpha = Math.floor(parseFloat(parts[3]) * 100);\n      } else if (parts.length === 3) {\n        this._alpha = 100;\n      }\n      if (parts.length >= 3) {\n        const { h, s, v } = rgb2hsv(parts[0], parts[1], parts[2]);\n        fromHSV(h, s, v);\n      }\n    } else if (value.indexOf('#') !== -1) {\n      const hex = value.replace('#', '').trim();\n      let r, g, b;\n\n      if (hex.length === 3) {\n        r = parseHexChannel(hex[0] + hex[0]);\n        g = parseHexChannel(hex[1] + hex[1]);\n        b = parseHexChannel(hex[2] + hex[2]);\n      } else if (hex.length === 6 || hex.length === 8) {\n        r = parseHexChannel(hex.substring(0, 2));\n        g = parseHexChannel(hex.substring(2, 4));\n        b = parseHexChannel(hex.substring(4, 6));\n      }\n\n      if (hex.length === 8) {\n        this._alpha = Math.floor(parseHexChannel(hex.substring(6)) / 255 * 100);\n      } else if (hex.length === 3 || hex.length === 6) {\n        this._alpha = 100;\n      }\n\n      const { h, s, v } = rgb2hsv(r, g, b);\n      fromHSV(h, s, v);\n    }\n  }\n\n  compare(color) {\n    return Math.abs(color._hue - this._hue) < 2 &&\n      Math.abs(color._saturation - this._saturation) < 1 &&\n      Math.abs(color._value - this._value) < 1 &&\n      Math.abs(color._alpha - this._alpha) < 1;\n  }\n\n  doOnChange() {\n    const { _hue, _saturation, _value, _alpha, format } = this;\n\n    if (this.enableAlpha) {\n      switch (format) {\n        case 'hsl':\n          const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100);\n          this.value = `hsla(${ _hue }, ${ Math.round(hsl[1] * 100) }%, ${ Math.round(hsl[2] * 100) }%, ${ _alpha / 100})`;\n          break;\n        case 'hsv':\n          this.value = `hsva(${ _hue }, ${ Math.round(_saturation) }%, ${ Math.round(_value) }%, ${ _alpha / 100})`;\n          break;\n        default:\n          const { r, g, b } = hsv2rgb(_hue, _saturation, _value);\n          this.value = `rgba(${r}, ${g}, ${b}, ${ _alpha / 100 })`;\n      }\n    } else {\n      switch (format) {\n        case 'hsl':\n          const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100);\n          this.value = `hsl(${ _hue }, ${ Math.round(hsl[1] * 100) }%, ${ Math.round(hsl[2] * 100) }%)`;\n          break;\n        case 'hsv':\n          this.value = `hsv(${ _hue }, ${ Math.round(_saturation) }%, ${ Math.round(_value) }%)`;\n          break;\n        case 'rgb':\n          const { r, g, b } = hsv2rgb(_hue, _saturation, _value);\n          this.value = `rgb(${r}, ${g}, ${b})`;\n          break;\n        default:\n          this.value = toHex(hsv2rgb(_hue, _saturation, _value));\n      }\n    }\n  }\n};\n"
  },
  {
    "path": "examples/components/theme-configurator/editor/color-picker/src/components/alpha-slider.vue",
    "content": "<template>\n  <div class=\"el-color-alpha-slider\" :class=\"{ 'is-vertical': vertical }\">\n    <div class=\"el-color-alpha-slider__bar\"\n         @click=\"handleClick\"\n         ref=\"bar\"\n         :style=\"{\n           background: background\n         }\">\n    </div>\n    <div class=\"el-color-alpha-slider__thumb\"\n         ref=\"thumb\"\n         :style=\"{\n           left: thumbLeft + 'px',\n           top: thumbTop + 'px'\n         }\">\n    </div>\n  </div>\n</template>\n\n<script>\n  import draggable from '../draggable';\n\n  export default {\n    name: 'el-color-alpha-slider',\n\n    props: {\n      color: {\n        required: true\n      },\n      vertical: Boolean\n    },\n\n    watch: {\n      'color._alpha'() {\n        this.update();\n      },\n\n      'color.value'() {\n        this.update();\n      }\n    },\n\n    methods: {\n      handleClick(event) {\n        const thumb = this.$refs.thumb;\n        const target = event.target;\n\n        if (target !== thumb) {\n          this.handleDrag(event);\n        }\n      },\n\n      handleDrag(event) {\n        const rect = this.$el.getBoundingClientRect();\n        const { thumb } = this.$refs;\n\n        if (!this.vertical) {\n          let left = event.clientX - rect.left;\n          left = Math.max(thumb.offsetWidth / 2, left);\n          left = Math.min(left, rect.width - thumb.offsetWidth / 2);\n\n          this.color.set('alpha', Math.round((left - thumb.offsetWidth / 2) / (rect.width - thumb.offsetWidth) * 100));\n        } else {\n          let top = event.clientY - rect.top;\n          top = Math.max(thumb.offsetHeight / 2, top);\n          top = Math.min(top, rect.height - thumb.offsetHeight / 2);\n\n          this.color.set('alpha', Math.round((top - thumb.offsetHeight / 2) / (rect.height - thumb.offsetHeight) * 100));\n        }\n      },\n\n      getThumbLeft() {\n        if (this.vertical) return 0;\n        const el = this.$el;\n        const alpha = this.color._alpha;\n\n        if (!el) return 0;\n        const thumb = this.$refs.thumb;\n        return Math.round(alpha * (el.offsetWidth - thumb.offsetWidth / 2) / 100);\n      },\n\n      getThumbTop() {\n        if (!this.vertical) return 0;\n        const el = this.$el;\n        const alpha = this.color._alpha;\n\n        if (!el) return 0;\n        const thumb = this.$refs.thumb;\n        return Math.round(alpha * (el.offsetHeight - thumb.offsetHeight / 2) / 100);\n      },\n\n      getBackground() {\n        if (this.color && this.color.value) {\n          const { r, g, b } = this.color.toRgb();\n          return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`;\n        }\n        return null;\n      },\n\n      update() {\n        this.thumbLeft = this.getThumbLeft();\n        this.thumbTop = this.getThumbTop();\n        this.background = this.getBackground();\n      }\n    },\n\n    data() {\n      return {\n        thumbLeft: 0,\n        thumbTop: 0,\n        background: null\n      };\n    },\n\n    mounted() {\n      const { bar, thumb } = this.$refs;\n\n      const dragConfig = {\n        drag: (event) => {\n          this.handleDrag(event);\n        },\n        end: (event) => {\n          this.handleDrag(event);\n        }\n      };\n\n      draggable(bar, dragConfig);\n      draggable(thumb, dragConfig);\n      this.update();\n    }\n  };\n</script>\n"
  },
  {
    "path": "examples/components/theme-configurator/editor/color-picker/src/components/color-list.vue",
    "content": "<template>\n  <div class=\"el-color-predefine color-list-container\">\n    <div class=\"el-color-predefine__colors color-list\">\n      <div class=\"color-list-item\"\n           :class=\"{selected: item.selected, 'is-alpha': item._alpha < 100}\"\n           v-for=\"(item, index) in rgbaColors\"\n           :key=\"colors[index].variable\"\n           @click=\"handleSelect(index)\">\n        <span class=\"color-list-item-ball\" :style=\"{'background-color': item.value}\">\n        </span>\n        <div class=\"color-list-item-label\">\n          {{item.info.label}} \n          <div class=\"color-list-item-value\">\n            {{item.info.value}} \n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n<style>\n  .color-list-container {\n    border-top: 1px solid #EBEEF5;\n    margin-top: 15px;\n    padding-top: 10px;\n    width: 100%;\n  }\n  .color-list {\n    max-height: 138px;\n    overflow: auto;\n  }\n  .color-list-item {\n    height: 24px;\n    width: 100%;\n    cursor: pointer;\n    margin: 2px 0;\n    position: relative;\n  }\n  .color-list-item:hover {\n    background: #efefef;\n  }\n  .color-list-item-ball {\n    height: 20px;\n    width: 20px;\n    margin-top: 2px;\n    margin-left: 5px;\n    border-radius: 100%;\n    display: block;\n    position: absolute;\n  }\n  .color-list-item-label {\n    margin-left: 35px;\n    font-size: 13px;\n    line-height: 24px;\n    display: inline-block;\n    width: 85%;\n    overflow: hidden;\n  }\n  .color-list-item-value { \n    float: right;\n  }\n</style>\n\n<script>\n  import Color from '../color';\n\n  export default {\n    props: {\n      colors: { type: Array, required: true },\n      color: { required: true }\n    },\n    data() {\n      return {\n        rgbaColors: this.parseColors(this.colors, this.color)\n      };\n    },\n    methods: {\n      handleSelect(index) {\n        this.color.fromString(this.colors[index].value);\n        this.$emit('select', this.colors[index]);\n      },\n      parseColors(colors, color) {\n        return colors.map(value => {\n          const c = new Color();\n          c.enableAlpha = true;\n          c.format = 'rgba';\n          c.fromString(value.value);\n          c.info = value;\n          c.selected = c.value === color.value;\n          return c;\n        });\n      }\n    },\n    watch: {\n      '$parent.currentColor'(val) {\n        const color = new Color();\n        color.fromString(val);\n\n        this.rgbaColors.forEach(item => {\n          item.selected = color.compare(item);\n        });\n      },\n      colors(newVal) {\n        this.rgbaColors = this.parseColors(newVal, this.color);\n      },\n      color(newVal) {\n        this.rgbaColors = this.parseColors(this.colors, newVal);\n      }\n    }\n  };\n</script>"
  },
  {
    "path": "examples/components/theme-configurator/editor/color-picker/src/components/hue-slider.vue",
    "content": "<template>\n  <div class=\"el-color-hue-slider\" :class=\"{ 'is-vertical': vertical }\">\n    <div class=\"el-color-hue-slider__bar\" @click=\"handleClick\" ref=\"bar\"></div>\n    <div class=\"el-color-hue-slider__thumb\"\n         :style=\"{\n           left: thumbLeft + 'px',\n           top: thumbTop + 'px'\n         }\"\n         ref=\"thumb\">\n    </div>\n  </div>\n</template>\n\n<script>\n  import draggable from '../draggable';\n\n  export default {\n    name: 'el-color-hue-slider',\n\n    props: {\n      color: {\n        required: true\n      },\n\n      vertical: Boolean\n    },\n\n    data() {\n      return {\n        thumbLeft: 0,\n        thumbTop: 0\n      };\n    },\n\n    computed: {\n      hueValue() {\n        const hue = this.color.get('hue');\n        return hue;\n      }\n    },\n\n    watch: {\n      hueValue() {\n        this.update();\n      }\n    },\n\n    methods: {\n      handleClick(event) {\n        const thumb = this.$refs.thumb;\n        const target = event.target;\n\n        if (target !== thumb) {\n          this.handleDrag(event);\n        }\n      },\n\n      handleDrag(event) {\n        const rect = this.$el.getBoundingClientRect();\n        const { thumb } = this.$refs;\n        let hue;\n\n        if (!this.vertical) {\n          let left = event.clientX - rect.left;\n          left = Math.min(left, rect.width - thumb.offsetWidth / 2);\n          left = Math.max(thumb.offsetWidth / 2, left);\n\n          hue = Math.round((left - thumb.offsetWidth / 2) / (rect.width - thumb.offsetWidth) * 360);\n        } else {\n          let top = event.clientY - rect.top;\n          top = Math.min(top, rect.height - thumb.offsetHeight / 2);\n          top = Math.max(thumb.offsetHeight / 2, top);\n\n          hue = Math.round((top - thumb.offsetHeight / 2) / (rect.height - thumb.offsetHeight) * 360);\n        }\n\n        this.color.set('hue', hue);\n      },\n\n      getThumbLeft() {\n        if (this.vertical) return 0;\n        const el = this.$el;\n        const hue = this.color.get('hue');\n\n        if (!el) return 0;\n        const thumb = this.$refs.thumb;\n        return Math.round(hue * (el.offsetWidth - thumb.offsetWidth / 2) / 360);\n      },\n\n      getThumbTop() {\n        if (!this.vertical) return 0;\n        const el = this.$el;\n        const hue = this.color.get('hue');\n\n        if (!el) return 0;\n        const thumb = this.$refs.thumb;\n        return Math.round(hue * (el.offsetHeight - thumb.offsetHeight / 2) / 360);\n      },\n\n      update() {\n        this.thumbLeft = this.getThumbLeft();\n        this.thumbTop = this.getThumbTop();\n      }\n    },\n\n    mounted() {\n      const { bar, thumb } = this.$refs;\n\n      const dragConfig = {\n        drag: (event) => {\n          this.handleDrag(event);\n        },\n        end: (event) => {\n          this.handleDrag(event);\n        }\n      };\n\n      draggable(bar, dragConfig);\n      draggable(thumb, dragConfig);\n      this.update();\n    }\n  };\n</script>\n"
  },
  {
    "path": "examples/components/theme-configurator/editor/color-picker/src/components/picker-dropdown.vue",
    "content": "<template>\n  <transition name=\"el-zoom-in-top\" @after-leave=\"doDestroy\">\n    <div\n      class=\"el-color-dropdown\"\n      v-show=\"showPopper\">\n      <div class=\"el-color-dropdown__main-wrapper\">\n        <hue-slider ref=\"hue\" :color=\"color\" vertical style=\"float: right;\"></hue-slider>\n        <sv-panel ref=\"sl\" :color=\"color\"></sv-panel>\n      </div>\n      <alpha-slider v-if=\"showAlpha\" ref=\"alpha\" :color=\"color\"></alpha-slider>\n      <predefine v-if=\"predefine\" :color=\"color\" :colors=\"predefine\"></predefine>\n      <div class=\"el-color-dropdown__btns\">\n        <span class=\"el-color-dropdown__value\">\n          <el-input\n            v-model=\"customInput\"\n            @keyup.native.enter=\"handleConfirm\"\n            @blur=\"handleConfirm\"\n            :validate-event=\"false\"\n            size=\"mini\">\n          </el-input>\n        </span>\n        <!-- <el-button\n          size=\"mini\"\n          type=\"text\"\n          class=\"el-color-dropdown__link-btn\"\n          @click=\"$emit('clear')\">\n          {{ t('el.colorpicker.clear') }}\n        </el-button> -->\n        <el-button\n          plain\n          size=\"mini\"\n          type=\"primary\"\n          class=\"el-color-dropdown__btn\"\n          @click=\"confirmValue\">\n          {{ t('el.colorpicker.confirm') }}\n        </el-button>\n      </div>\n      <color-list \n        v-if=\"colorList && colorList.length > 0\" \n        :color=\"color\" \n        :colors=\"colorList\"\n        @select=onColorListSelect\n      ></color-list>\n    </div>\n  </transition>\n</template>\n\n<script>\n  import SvPanel from './sv-panel';\n  import HueSlider from './hue-slider';\n  import AlphaSlider from './alpha-slider';\n  import Predefine from './predefine';\n  import ColorList from './color-list';\n  import Popper from 'element-ui/src/utils/vue-popper';\n  import Locale from 'element-ui/src/mixins/locale';\n  import ElInput from 'element-ui/packages/input';\n  import ElButton from 'element-ui/packages/button';\n\n  export default {\n    name: 'el-color-picker-dropdown',\n\n    mixins: [Popper, Locale],\n\n    components: {\n      SvPanel,\n      HueSlider,\n      AlphaSlider,\n      ElInput,\n      ElButton,\n      Predefine,\n      ColorList\n    },\n\n    props: {\n      color: {\n        required: true\n      },\n      showAlpha: Boolean,\n      predefine: Array,\n      colorList: Array\n    },\n\n    data() {\n      return {\n        customInput: ''\n      };\n    },\n\n    computed: {\n      currentColor() {\n        const parent = this.$parent;\n        return !parent.value && !parent.showPanelColor ? '' : parent.color.value;\n      }\n    },\n\n    methods: {\n      confirmValue() {\n        this.$emit('pick');\n      },\n\n      onColorListSelect(e) {\n        this.$emit('pick', e);\n      },\n\n      handleConfirm() {\n        this.color.fromString(this.customInput);\n      }\n    },\n\n    mounted() {\n      this.$parent.popperElm = this.popperElm = this.$el;\n      this.referenceElm = this.$parent.$el;\n    },\n\n    watch: {\n      showPopper(val) {\n        if (val === true) {\n          this.$nextTick(() => {\n            const { sl, hue, alpha } = this.$refs;\n            sl && sl.update();\n            hue && hue.update();\n            alpha && alpha.update();\n          });\n        }\n      },\n\n      currentColor: {\n        immediate: true,\n        handler(val) {\n          this.customInput = val;\n        }\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "examples/components/theme-configurator/editor/color-picker/src/components/predefine.vue",
    "content": "<template>\n  <div class=\"el-color-predefine\">\n    <div class=\"el-color-predefine__colors\">\n      <div class=\"el-color-predefine__color-selector\"\n           :class=\"{selected: item.selected, 'is-alpha': item._alpha < 100}\"\n           v-for=\"(item, index) in rgbaColors\"\n           :key=\"colors[index]\"\n           @click=\"handleSelect(index)\">\n        <div :style=\"{'background-color': item.value}\">\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\n  import Color from '../color';\n\n  export default {\n    props: {\n      colors: { type: Array, required: true },\n      color: { required: true }\n    },\n    data() {\n      return {\n        rgbaColors: this.parseColors(this.colors, this.color)\n      };\n    },\n    methods: {\n      handleSelect(index) {\n        this.color.fromString(this.colors[index]);\n      },\n      parseColors(colors, color) {\n        return colors.map(value => {\n          const c = new Color();\n          c.enableAlpha = true;\n          c.format = 'rgba';\n          c.fromString(value);\n          c.selected = c.value === color.value;\n          return c;\n        });\n      }\n    },\n    watch: {\n      '$parent.currentColor'(val) {\n        const color = new Color();\n        color.fromString(val);\n\n        this.rgbaColors.forEach(item => {\n          item.selected = color.compare(item);\n        });\n      },\n      colors(newVal) {\n        this.rgbaColors = this.parseColors(newVal, this.color);\n      },\n      color(newVal) {\n        this.rgbaColors = this.parseColors(this.colors, newVal);\n      }\n    }\n  };\n</script>"
  },
  {
    "path": "examples/components/theme-configurator/editor/color-picker/src/components/sv-panel.vue",
    "content": "<template>\n  <div class=\"el-color-svpanel\"\n      :style=\"{\n        backgroundColor: background\n      }\">\n    <div class=\"el-color-svpanel__white\"></div>\n    <div class=\"el-color-svpanel__black\"></div>\n    <div class=\"el-color-svpanel__cursor\"\n      :style=\"{\n        top: cursorTop + 'px',\n        left: cursorLeft + 'px'\n      }\">\n      <div></div>\n    </div>\n  </div>\n</template>\n\n<script>\n  import draggable from '../draggable';\n\n  export default {\n    name: 'el-sl-panel',\n\n    props: {\n      color: {\n        required: true\n      }\n    },\n\n    computed: {\n      colorValue() {\n        const hue = this.color.get('hue');\n        const value = this.color.get('value');\n        return { hue, value };\n      }\n    },\n\n    watch: {\n      colorValue() {\n        this.update();\n      }\n    },\n\n    methods: {\n      update() {\n        const saturation = this.color.get('saturation');\n        const value = this.color.get('value');\n\n        const el = this.$el;\n        let { clientWidth: width, clientHeight: height } = el;\n\n        this.cursorLeft = saturation * width / 100;\n        this.cursorTop = (100 - value) * height / 100;\n\n        this.background = 'hsl(' + this.color.get('hue') + ', 100%, 50%)';\n      },\n\n      handleDrag(event) {\n        const el = this.$el;\n        const rect = el.getBoundingClientRect();\n\n        let left = event.clientX - rect.left;\n        let top = event.clientY - rect.top;\n        left = Math.max(0, left);\n        left = Math.min(left, rect.width);\n\n        top = Math.max(0, top);\n        top = Math.min(top, rect.height);\n\n        this.cursorLeft = left;\n        this.cursorTop = top;\n        this.color.set({\n          saturation: left / rect.width * 100,\n          value: 100 - top / rect.height * 100\n        });\n      }\n    },\n\n    mounted() {\n      draggable(this.$el, {\n        drag: (event) => {\n          this.handleDrag(event);\n        },\n        end: (event) => {\n          this.handleDrag(event);\n        }\n      });\n\n      this.update();\n    },\n\n    data() {\n      return {\n        cursorTop: 0,\n        cursorLeft: 0,\n        background: 'hsl(0, 100%, 50%)'\n      };\n    }\n  };\n</script>\n"
  },
  {
    "path": "examples/components/theme-configurator/editor/color-picker/src/draggable.js",
    "content": "import Vue from 'vue';\nlet isDragging = false;\n\nexport default function(element, options) {\n  if (Vue.prototype.$isServer) return;\n  const moveFn = function(event) {\n    if (options.drag) {\n      options.drag(event);\n    }\n  };\n  const upFn = function(event) {\n    document.removeEventListener('mousemove', moveFn);\n    document.removeEventListener('mouseup', upFn);\n    document.onselectstart = null;\n    document.ondragstart = null;\n\n    isDragging = false;\n\n    if (options.end) {\n      options.end(event);\n    }\n  };\n  element.addEventListener('mousedown', function(event) {\n    if (isDragging) return;\n    document.onselectstart = function() { return false; };\n    document.ondragstart = function() { return false; };\n\n    document.addEventListener('mousemove', moveFn);\n    document.addEventListener('mouseup', upFn);\n    isDragging = true;\n\n    if (options.start) {\n      options.start(event);\n    }\n  });\n}\n"
  },
  {
    "path": "examples/components/theme-configurator/editor/color-picker/src/main.vue",
    "content": "<template>\n  <div\n    :class=\"[\n      'el-color-picker',\n      colorDisabled ? 'is-disabled' : '',\n      colorSize ? `el-color-picker--${ colorSize }` : ''\n    ]\"\n    v-clickoutside=\"hide\">\n    <div class=\"el-color-picker__mask\" v-if=\"colorDisabled\"></div>\n    <div class=\"el-color-picker__trigger\" @click=\"handleTrigger\">\n      <span class=\"el-color-picker__color\" :class=\"{ 'is-alpha': showAlpha }\">\n        <span class=\"el-color-picker__color-inner\"\n          :style=\"{\n            backgroundColor: displayedColor\n          }\"></span>\n        <span class=\"el-color-picker__empty el-icon-close\" v-if=\"!value && !showPanelColor\"></span>\n      </span>\n      <span class=\"el-color-picker__icon el-icon-arrow-down\" v-show=\"value || showPanelColor\"></span>\n    </div>\n    <picker-dropdown\n       ref=\"dropdown\"\n       :class=\"['el-color-picker__panel', popperClass || '']\"\n       v-model=\"showPicker\"\n       @pick=\"confirmValue\"\n       @clear=\"clearValue\"\n       :color=\"color\"\n       :show-alpha=\"showAlpha\"\n       :predefine=\"predefine\"\n       :colorList=\"colorList\">\n    </picker-dropdown>\n  </div>\n</template>\n\n<script>\n  import Color from './color';\n  import PickerDropdown from './components/picker-dropdown.vue';\n  import Clickoutside from 'element-ui/src/utils/clickoutside';\n  import Emitter from 'element-ui/src/mixins/emitter';\n\n  export default {\n    name: 'ElColorPicker',\n\n    mixins: [Emitter],\n\n    props: {\n      value: String,\n      showAlpha: Boolean,\n      colorFormat: String,\n      disabled: Boolean,\n      size: String,\n      popperClass: String,\n      predefine: Array,\n      colorList: Array\n    },\n\n    inject: {\n      elForm: {\n        default: ''\n      },\n      elFormItem: {\n        default: ''\n      }\n    },\n\n    directives: { Clickoutside },\n\n    computed: {\n      displayedColor() {\n        if (!this.value && !this.showPanelColor) {\n          return 'transparent';\n        }\n\n        return this.displayedRgb(this.color, this.showAlpha);\n      },\n\n      _elFormItemSize() {\n        return (this.elFormItem || {}).elFormItemSize;\n      },\n\n      colorSize() {\n        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;\n      },\n\n      colorDisabled() {\n        return this.disabled || (this.elForm || {}).disabled;\n      }\n    },\n\n    watch: {\n      value(val) {\n        if (!val) {\n          this.showPanelColor = false;\n        } else if (val && val !== this.color.value) {\n          this.color.fromString(val);\n        }\n      },\n      color: {\n        deep: true,\n        handler() {\n          this.showPanelColor = true;\n        }\n      },\n      displayedColor(val) {\n        if (!this.showPicker) return;\n        const currentValueColor = new Color({\n          enableAlpha: this.showAlpha,\n          format: this.colorFormat\n        });\n        currentValueColor.fromString(this.value);\n\n        const currentValueColorRgb = this.displayedRgb(currentValueColor, this.showAlpha);\n        if (val !== currentValueColorRgb) {\n          this.$emit('active-change', val);\n        }\n      }\n    },\n\n    methods: {\n      handleTrigger() {\n        if (this.colorDisabled) return;\n        this.showPicker = !this.showPicker;\n      },\n      confirmValue(selection) {\n        const value = selection || this.color.value;\n        this.$emit('input', value);\n        this.$emit('change', value);\n        this.dispatch('ElFormItem', 'el.form.change', value);\n        this.showPicker = false;\n      },\n      clearValue() {\n        this.$emit('input', null);\n        this.$emit('change', null);\n        if (this.value !== null) {\n          this.dispatch('ElFormItem', 'el.form.change', null);\n        }\n        this.showPanelColor = false;\n        this.showPicker = false;\n        this.resetColor();\n      },\n      hide() {\n        this.showPicker = false;\n        this.resetColor();\n      },\n      resetColor() {\n        this.$nextTick(_ => {\n          if (this.value) {\n            this.color.fromString(this.value);\n          } else {\n            this.showPanelColor = false;\n          }\n        });\n      },\n      displayedRgb(color, showAlpha) {\n        if (!(color instanceof Color)) {\n          throw Error('color should be instance of Color Class');\n        }\n\n        const { r, g, b } = color.toRgb();\n        return showAlpha\n          ? `rgba(${ r }, ${ g }, ${ b }, ${ color.get('alpha') / 100 })`\n          : `rgb(${ r }, ${ g }, ${ b })`;\n      }\n    },\n\n    mounted() {\n      const value = this.value;\n      if (value) {\n        this.color.fromString(value);\n      }\n      this.popperElm = this.$refs.dropdown.$el;\n    },\n\n    data() {\n      const color = new Color({\n        enableAlpha: this.showAlpha,\n        format: this.colorFormat\n      });\n\n      return {\n        color,\n        showPicker: false,\n        showPanelColor: false\n      };\n    },\n\n    components: {\n      PickerDropdown\n    }\n  };\n</script>\n"
  },
  {
    "path": "examples/components/theme-configurator/editor/color.vue",
    "content": "<template>\n  <section class=\"config\" :key=\"displayName\">\n    <div class=\"config-label\">\n      <el-tooltip :content=\"displayName\" placement=\"top\">\n        <span>{{displayKeyName}}</span>\n      </el-tooltip>\n    </div>\n    <div class=\"config-content\">\n      <div class=\"content-80\">\n        <el-input\n          size=\"medium\"\n          :value=displayValue\n          readonly\n          slot=\"reference\"\n          @click.native=\"onInputClick\"\n        ></el-input>\n      </div>\n      <div class=\"content-20\">\n        <color-picker \n          size=\"medium\"\n          ref=\"colorPicker\"\n          class=\"colorPicker\"\n          v-model=\"pickerColor\" \n          @change=onPickerChange\n          :colorList=\"golbalColorList\"\n        ></color-picker>\n      </div>\n    </div>\n  </section>\n</template>\n\n<style>\ninput {\n  cursor: pointer;\n}\n.colorPicker {\n  margin-left: 10px;\n  vertical-align: bottom;\n}\n</style>\n\n<script>\nimport Mixin from './mixin';\nimport { getStyleDisplayValue, getStyleDisplayName } from '../utils/utils.js';\nimport ColorPicker from './color-picker';\n\nexport default {\n  components: {\n    ColorPicker\n  },\n  data() {\n    return {\n      pickerColor: ''\n    };\n  },\n  mixins: [Mixin],\n  watch: {\n    displayValue: {\n      immediate: true,\n      handler(value) {\n        if (value.startsWith('#')) {\n          this.pickerColor = value;\n        }\n      }\n    }\n  },\n  computed: {\n    golbalColor() {\n      return this.golbalValue.color;\n    },\n    displayValue() {\n      return getStyleDisplayValue(this.mergedValue, this.golbalColor);\n    },\n    golbalColorList() {\n      return this.isGlobal ? [] : Object.keys(this.golbalColor).map((c) => (\n        {\n          label: getStyleDisplayName(this.golbalColor[c]),\n          value: this.golbalColor[c].value,\n          variable: c\n        }\n      ));\n    }\n  },\n  methods: {\n    onInputClick() {\n      this.$refs.colorPicker && this.$refs.colorPicker.handleTrigger();\n    },\n    onPickerChange(e) {\n      this.onChange(e.variable || e);\n    }\n  }\n};\n</script>"
  },
  {
    "path": "examples/components/theme-configurator/editor/fontLineHeight.vue",
    "content": "<template>\n  <section class=\"config\" :key=\"displayName\">\n    <div class=\"config-label\">\n      <el-tooltip :content=\"displayName\" placement=\"top\">\n        <span>{{displayKeyName}}</span>\n      </el-tooltip>\n    </div>\n    <div class=\"config-content\">\n      <el-select \n        v-model=\"value\" \n        class=\"select\"\n        size=\"medium\"\n        @change=\"onSelectChange\"\n      >\n        <el-option\n          v-for=\"item in options\"\n          :key=\"item.value\"\n          :label=\"item.label\"\n          :value=\"item.value\">\n        </el-option>\n      </el-select>\n    </div>\n  </section>\n</template>\n\n<style>\n.select {\n  width: 100%;\n}\n</style>\n\n<script>\nconst defaultFontLineHeight = [\n  '1',\n  '1.3',\n  '1.5',\n  '1.7',\n  '12px',\n  '16px',\n  '20px',\n  '24px',\n  '28px'\n];\nimport Mixin from './mixin';\nimport { getStyleDisplayName } from '../utils/utils.js';\n\nexport default {\n  props: {\n    componentName: {\n      type: String\n    },\n    golbalValue: {\n      type: Object\n    }\n  },\n  data() {\n    return {\n      options: [],\n      value: ''\n    };\n  },\n  mixins: [Mixin],\n  computed: {\n    isGlobalInputValue() {\n      return this.config.value.startsWith('$');\n    }\n  },\n  methods: {\n    onSelectChange(e) {\n      this.onChange(e);\n    },\n    initSelectOption() {\n      this.options = [];\n      defaultFontLineHeight.forEach((size) => {\n        this.options.push({\n          value: size,\n          label: size\n        });\n      });\n      const golbalTypography = this.golbalValue.typography;\n      if (this.isGlobalInputValue && golbalTypography) {\n        Object.keys(golbalTypography).forEach((font) => {\n          if (font.includes('font-line-height')) {\n            const size = golbalTypography[font];\n            this.options.push({\n              value: size.key,\n              label: getStyleDisplayName(size)\n            });\n          }\n        });\n      }\n    }\n  },\n  watch: {\n    'mergedValue': {\n      immediate: true,\n      handler(value) {\n        this.initSelectOption();\n        this.value = this.mergedValue;\n      }\n    }\n  }\n};\n</script>"
  },
  {
    "path": "examples/components/theme-configurator/editor/fontSize.vue",
    "content": "<template>\n  <section class=\"config\" :key=\"displayName\">\n    <div class=\"config-label\">\n      <el-tooltip :content=\"displayName\" placement=\"top\">\n        <span>{{displayKeyName}}</span>\n      </el-tooltip>\n    </div>\n    <div class=\"config-content\">\n      <el-select \n        v-model=\"value\" \n        class=\"select\"\n        size=\"medium\"\n        @change=\"onSelectChange\"\n      >\n        <el-option\n          v-for=\"item in options\"\n          :key=\"item.value\"\n          :label=\"item.label\"\n          :value=\"item.value\">\n        </el-option>\n      </el-select>\n    </div>\n  </section>\n</template>\n\n<style>\n.select {\n  width: 100%;\n}\n</style>\n\n<script>\nconst defaultFontSize = [\n  '12px',\n  '13px',\n  '14px',\n  '16px',\n  '18px',\n  '20px',\n  '22px',\n  '28px',\n  '36px',\n  '48px'\n];\nimport Mixin from './mixin';\nimport { getStyleDisplayName } from '../utils/utils.js';\n\nexport default {\n  props: {\n    componentName: {\n      type: String\n    },\n    golbalValue: {\n      type: Object\n    }\n  },\n  data() {\n    return {\n      options: [],\n      value: ''\n    };\n  },\n  mixins: [Mixin],\n  computed: {\n    isGlobalInputValue() {\n      return this.config.value.startsWith('$');\n    }\n  },\n  methods: {\n    onSelectChange(e) {\n      this.onChange(e);\n    },\n    initSelectOption() {\n      this.options = [];\n      defaultFontSize.forEach((size) => {\n        this.options.push({\n          value: size,\n          label: size\n        });\n      });\n      const golbalTypography = this.golbalValue.typography;\n      if (this.isGlobalInputValue && golbalTypography) {\n        Object.keys(golbalTypography).forEach((font) => {\n          if (font.includes('font-size')) {\n            const size = golbalTypography[font];\n            this.options.push({\n              value: size.key,\n              label: getStyleDisplayName(size)\n            });\n          }\n        });\n      }\n    }\n  },\n  watch: {\n    'mergedValue': {\n      immediate: true,\n      handler(value) {\n        this.initSelectOption();\n        this.value = this.mergedValue;\n      }\n    }\n  }\n};\n</script>"
  },
  {
    "path": "examples/components/theme-configurator/editor/fontWeight.vue",
    "content": "<template>\n  <section class=\"config\" :key=\"displayName\">\n    <div class=\"config-label\">\n      <el-tooltip :content=\"displayName\" placement=\"top\">\n        <span>{{displayKeyName}}</span>\n      </el-tooltip>\n    </div>\n    <div class=\"config-content\">\n      <el-select \n        v-model=\"value\" \n        class=\"select\"\n        size=\"medium\"\n        @change=\"onSelectChange\"\n      >\n        <el-option\n          v-for=\"item in options\"\n          :key=\"item.value\"\n          :label=\"item.label\"\n          :value=\"item.value\">\n        </el-option>\n      </el-select>\n    </div>\n  </section>\n</template>\n\n<style>\n.select {\n  width: 100%;\n}\n</style>\n\n<script>\nconst defaultFontWeight = [\n  'normal',\n  'bold',\n  'bolder',\n  'lighter',\n  '100',\n  '200',\n  '300',\n  '400',\n  '500',\n  '600',\n  '700',\n  '800',\n  '900',\n  'inherit'\n];\nimport Mixin from './mixin';\nimport { getStyleDisplayName } from '../utils/utils.js';\n\nexport default {\n  props: {\n    componentName: {\n      type: String\n    },\n    golbalValue: {\n      type: Object\n    }\n  },\n  data() {\n    return {\n      options: [],\n      value: ''\n    };\n  },\n  mixins: [Mixin],\n  computed: {\n    isGlobalInputValue() {\n      return this.config.value.startsWith('$');\n    }\n  },\n  methods: {\n    onSelectChange(e) {\n      this.onChange(e);\n    },\n    initSelectOption() {\n      this.options = [];\n      defaultFontWeight.forEach((weight) => {\n        this.options.push({\n          value: weight,\n          label: weight\n        });\n      });\n      const golbalTypography = this.golbalValue.typography;\n      if (this.isGlobalInputValue && golbalTypography) {\n        Object.keys(golbalTypography).forEach((font) => {\n          if (font.includes('font-weight')) {\n            const weight = golbalTypography[font];\n            this.options.push({\n              value: weight.key,\n              label: getStyleDisplayName(weight)\n            });\n          }\n        });\n      }\n    }\n  },\n  watch: {\n    'mergedValue': {\n      immediate: true,\n      handler(value) {\n        this.initSelectOption();\n        this.value = this.mergedValue;\n      }\n    }\n  }\n};\n</script>"
  },
  {
    "path": "examples/components/theme-configurator/editor/input.vue",
    "content": "<template>\n  <el-input \n    @keyup.enter.native=\"onUpdate\"\n    v-model=\"value\"\n    @blur=\"onUpdate\"\n    v-bind=\"$attrs\"\n  >\n    <template slot=\"suffix\">\n      <slot name=\"suffix\"></slot>\n    </template>\n  </el-input>\n</template>\n\n<script>\n\nexport default {\n  props: ['val', 'onChange'],\n  data() {\n    return {\n      value: '',\n      oldValue: ''\n    };\n  },\n  methods: {\n    onUpdate(e) {\n      const { value } = e.target;\n      if (value !== this.oldValue) {\n        this.oldValue = value;\n        this.$emit('change', value);\n      }\n    }\n  },\n  watch: {\n    val: {\n      immediate: true,\n      handler(value) {\n        this.value = value;\n        if (!this.oldValue) {\n          this.oldValue = value;\n        }\n      }\n    }\n  }\n};\n</script>"
  },
  {
    "path": "examples/components/theme-configurator/editor/mixin.vue",
    "content": "<style>\n    .config {\n      padding: 5px 0;\n    }\n    .config-label {\n      color: #606266;;\n      font-size: 14px;\n      padding-bottom: 8px;\n      position: relative;\n    }\n    .config-content {\n\n    }\n    .content-80 {\n      box-sizing: border-box;\n      display: inline-block;\n      width: 80%;\n    }\n    .content-20 {\n      box-sizing: border-box;\n      display: inline-block;\n      width: 20%;\n      vertical-align: bottom;\n    }\n    .content-10 {\n      box-sizing: border-box;\n      display: inline-block;\n      width: 10%;\n      vertical-align: bottom;\n    }\n    .content-15 {\n      box-sizing: border-box;\n      display: inline-block;\n      width: 15%;\n      vertical-align: bottom;\n    }\n</style>\n<script>\nimport { getStyleDisplayName } from '../utils/utils.js';\nexport default {\n  props: {\n    config: {\n      type: Object\n    },\n    userConfig: {\n      type: Object\n    },\n    golbalValue: {\n      type: Object\n    },\n    componentName: {\n      type: String\n    }\n  },\n  computed: {\n    mergedValue() {\n      return this.userConfig[this.config.key] || this.config.value;\n    },\n    displayName() {\n      return getStyleDisplayName(this.config, this.componentName);\n    },\n    displayKeyName() {\n      if (this.config.name) {\n        return this.config.key.replace('$--', '');\n      }\n      return this.config.key.replace(`$--${this.componentName}-`, '');\n    },\n    isGlobal() {\n      return !this.config.value.startsWith('$');\n    }\n  },\n  methods: {\n    onChange(value) {\n      this.$emit('onChange', {\n        key: this.config.key,\n        value\n      });\n    }\n  }\n};\n</script>"
  },
  {
    "path": "examples/components/theme-configurator/editor/simpleText.vue",
    "content": "<template>\n  <section class=\"config\" :key=\"displayName\">\n    <div class=\"config-label\">\n      <el-tooltip :content=\"displayName\" placement=\"top\">\n        <span>{{displayKeyName}}</span>\n      </el-tooltip>\n    </div>\n    <div class=\"config-content\">\n      <theme-input \n        :val=\"value\"\n        size=\"medium\"\n        @change=\"onChange\"\n      ></theme-input>\n    </div>\n  </section>\n</template>\n\n<script>\nimport Input from './input';\nimport Mixin from './mixin';\n\nexport default {\n  components: {\n    themeInput: Input\n  },\n  data() {\n    return {\n      value: ''\n    };\n  },\n  mixins: [Mixin],\n  watch: {\n    'mergedValue': {\n      immediate: true,\n      handler(value) {\n        this.value = this.mergedValue;\n      }\n    }\n  }\n};\n</script>"
  },
  {
    "path": "examples/components/theme-configurator/index.vue",
    "content": "<template>\n  <div class=\"main-configurator\" ref='configurator'>\n    <action-panel\n      :selectOptions=\"selectOptions\"\n      :userConfigHistory=\"userConfigHistory\"\n      :userConfigRedoHistory=\"userConfigRedoHistory\"\n      :onUndo=\"undo\"\n      :onRedo=\"redo\"\n      :isOfficial=\"isOfficial\"\n      @select=\"onSelectChange\"\n    ></action-panel>\n    <main-panel\n      v-if=\"defaultConfig\"\n      :currentConfig=\"currentConfig\"\n      :defaultConfig=\"defaultConfig\"\n      :userConfig=\"userConfig\"\n      :globalValue=\"globalValue\"\n      @onChange=\"userConfigChange\"\n    ></main-panel>\n  </div>\n</template>\n\n<style lang=\"scss\">\n.main-configurator {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n</style>\n\n<script>\nimport bus from '../../bus.js';\nimport { getVars } from '../theme/loader/api.js';\nimport mainPanel from './main';\nimport actionPanel from './action';\nimport {\n  filterConfigType,\n  filterGlobalValue,\n  getActionDisplayName\n} from './utils/utils.js';\nimport Shortcut from './shortcut';\nimport {\n  ACTION_APPLY_THEME,\n  ACTION_DOWNLOAD_THEME,\n  ACTION_COMPONECT_SELECT\n} from '../theme/constant.js';\n\nexport default {\n  props: {\n    themeConfig: Object,\n    previewConfig: Object,\n    isOfficial: Boolean,\n    onUserConfigUpdate: Function\n  },\n  components: {\n    mainPanel,\n    actionPanel\n  },\n  data() {\n    return {\n      init: false,\n      defaultConfig: null,\n      currentConfig: null,\n      userConfig: {\n        global: {},\n        local: {}\n      },\n      userConfigHistory: [],\n      userConfigRedoHistory: [],\n      hasLocalConfig: false,\n      selectOptions: [],\n      selectedComponent: 'color'\n    };\n  },\n  mixins: [Shortcut],\n  computed: {\n    globalValue() {\n      return filterGlobalValue(this.defaultConfig, this.userConfig);\n    }\n  },\n  mounted() {\n    ga('send', 'event', 'ThemeConfigurator', 'Init');\n    this.showConfigurator();\n    this.enableShortcut();\n  },\n  beforeDestroy() {\n    this.disableShortcut();\n  },\n  methods: {\n    getActionDisplayName(key) {\n      return getActionDisplayName(key);\n    },\n    showConfigurator() {\n      if (this.init) return;\n      this.$nextTick(() => {\n        const loading = this.$loading({\n          target: this.$refs.configurator\n        });\n        let defaultConfig;\n        getVars()\n          .then(res => {\n            defaultConfig = res;\n          })\n          .catch(err => {\n            this.onError && this.onError(err);\n          })\n          .then(() => {\n            setTimeout(() => {\n              if (defaultConfig) {\n                this.defaultConfig = defaultConfig;\n                this.setSelectOption();\n                this.filterCurrentConfig();\n                this.init = true;\n              }\n              loading.close();\n            }, 300); // action after transition\n          });\n      });\n    },\n    setSelectOption() {\n      this.selectOptions = this.defaultConfig.map((config) => ({\n        label: config.name.charAt(0).toUpperCase() + config.name.slice(1),\n        value: config.name\n      })).sort((a, b) => {\n        const A = a.label;\n        const B = b.label;\n        if (A < B) return -1;\n        if (A > B) return 1;\n        return 0;\n      });\n    },\n    filterCurrentConfig() {\n      this.currentConfig = this.defaultConfig.find(config => {\n        return (\n          config.name === this.selectedComponent\n        );\n      });\n    },\n    userConfigChange(e) {\n      this.userConfigHistory.push(JSON.stringify(this.userConfig));\n      this.userConfigRedoHistory = [];\n      this.$set(\n        this.userConfig[filterConfigType(this.currentConfig.name)],\n        e.key,\n        e.value\n      );\n      this.onAction();\n    },\n    onReset() {\n      this.userConfigRedoHistory = [];\n      this.userConfigHistory = [];\n      this.userConfig = {\n        global: {},\n        local: {}\n      };\n      this.onAction();\n    },\n    onDownload() {\n      bus.$emit(ACTION_DOWNLOAD_THEME, this.userConfig, this.previewConfig.name);\n    },\n    onAction() {\n      this.onUserConfigUpdate(this.userConfig);\n      bus.$emit(ACTION_APPLY_THEME, this.userConfig);\n    },\n    undo() {\n      if (this.userConfigHistory.length > 0) {\n        this.userConfigRedoHistory.push(JSON.stringify(this.userConfig));\n        this.userConfig = JSON.parse(this.userConfigHistory.pop());\n        this.onAction();\n      }\n    },\n    redo() {\n      if (this.userConfigRedoHistory.length > 0) {\n        this.userConfigHistory.push(JSON.stringify(this.userConfig));\n        this.userConfig = JSON.parse(this.userConfigRedoHistory.shift());\n        this.onAction();\n      }\n    },\n    onSelectChange(val) {\n      bus.$emit(ACTION_COMPONECT_SELECT, val);\n      this.selectedComponent = val;\n      this.filterCurrentConfig();\n    }\n  },\n  watch: {\n    themeConfig: {\n      handler(val, oldVal) {\n        if (!oldVal.globnal) {\n          this.userConfig = val;\n        }\n      }\n    }\n  }\n};\n</script>"
  },
  {
    "path": "examples/components/theme-configurator/main.vue",
    "content": "<template>\n  <div class=\"editor-main\" ref=\"mainPanel\">\n    <!-- <span>{{configName}}</span> -->\n    <div v-for=\"(config, key) in configByOrder\" :key=\"key\">\n      <span \n        v-if=\"showCategory(config.category, key + 1)\"\n        class=\"category-name\"\n      >\n        {{config.category}}\n      </span>\n      <component \n        :is=\"editorComponent(config.type)\"\n        :componentName=configName\n        :config=config\n        :userConfig=userConfigByType\n        :golbalValue=globalValue\n        @onChange=onChange\n      >\n      </component>\n    </div>\n  </div>\n</template>\n\n<style>\n.editor-main {\n  padding: 0 18px 15px;\n  overflow-y: auto;\n}\n.category-name {\n  color: #C0C4CC;\n  font-size: 18px;\n  display: block;\n  margin: 13px 0 3px 0;\n}\n</style>\n\n<script>\nimport ColorEditor from './editor/color';\nimport fontWeightEditor from './editor/fontWeight';\nimport fontSizeEditor from './editor/fontSize';\nimport fontLineHeightEditor from './editor/fontLineHeight';\nimport borderRadiusEditor from './editor/borderRadius';\nimport boxShadowEditor from './editor/boxShadow';\nimport simpleTextEditor from './editor/simpleText';\nimport { filterConfigType } from './utils/utils.js';\n\nexport default {\n  components: {\n    ColorEditor,\n    fontSizeEditor,\n    fontLineHeightEditor,\n    simpleTextEditor,\n    borderRadiusEditor,\n    boxShadowEditor,\n    fontWeightEditor\n  },\n  props: {\n    defaultConfig: {\n      type: Array\n    },\n    currentConfig: {\n      type: Object\n    },\n    userConfig: {\n      type: Object\n    },\n    globalValue: {\n      type: Object\n    }\n  },\n  computed: {\n    configName() {\n      return this.currentConfig.name;\n    },\n    userConfigByType() {\n      return this.userConfig[filterConfigType(this.configName)];\n    },\n    configByOrder() {\n      return this.currentConfig.config.sort((a, b) => (a.order - b.order));\n    }\n  },\n  methods: {\n    editorComponent(type) {\n      switch (type) {\n        case 'color':\n          return ColorEditor;\n        case 'fontWeight':\n          return fontWeightEditor;\n        case 'fontSize':\n          return fontSizeEditor;\n        case 'fontLineHeight':\n          return fontLineHeightEditor;\n        case 'borderRadius':\n          return borderRadiusEditor;\n        case 'boxShadow':\n          return boxShadowEditor;\n        default:\n          return simpleTextEditor;\n      }\n    },\n    onChange(e) {\n      this.$emit('onChange', e);\n    },\n    showCategory(name, key) {\n      if (!name) {\n        return false;\n      }\n      if (!this.categoryDisplay[name] || this.categoryDisplay[name] === key) {\n        this.categoryDisplay[name] = key;\n        return true;\n      }\n      return false;\n    }\n  },\n  data() {\n    return {\n      categoryDisplay: {}\n    };\n  },\n  watch: {\n    currentConfig: {\n      handler() {\n        this.$nextTick(() => {\n          this.$refs.mainPanel.scrollTo(0, 0);\n        });\n      }\n    }\n  }\n};\n</script>"
  },
  {
    "path": "examples/components/theme-configurator/shortcut.vue",
    "content": "\n<script>\nexport default {\n  data() {\n    return {\n      downloading: false\n    };\n  },\n  methods: {\n    shortcut(e) {\n      if (e.keyCode === 90 && (e.ctrlKey || e.metaKey)) {\n        if (e.shiftKey) {\n          this.redo();\n        } else {\n          this.undo();\n        }\n      }\n    },\n    enableShortcut() {\n      document.addEventListener('keydown', this.shortcut);\n    },\n    disableShortcut() {\n      document.removeEventListener('keydown', this.shortcut);\n    }\n  }\n};\n</script>"
  },
  {
    "path": "examples/components/theme-configurator/utils/boxShadow.js",
    "content": "const VALUES_REG = /,(?![^\\(]*\\))/;\nconst PARTS_REG = /\\s(?![^(]*\\))/;\nconst LENGTH_REG = /^[0-9]+[a-zA-Z%]+?$/;\n\nconst parseValue = str => {\n  const parts = str.split(PARTS_REG);\n  const inset = parts.includes('inset');\n  const last = parts.slice(-1)[0];\n  const color = !isLength(last) ? last : undefined;\n\n  const nums = parts\n    .filter(n => n !== 'inset')\n    .filter(n => n !== color)\n    .map(toNum);\n  const [ offsetX, offsetY, blurRadius, spreadRadius ] = nums;\n\n  return {\n    inset,\n    offsetX,\n    offsetY,\n    blurRadius,\n    spreadRadius,\n    color\n  };\n};\n\nconst stringifyValue = obj => {\n  const {\n    inset,\n    offsetX = 0,\n    offsetY = 0,\n    blurRadius = 0,\n    spreadRadius,\n    color\n  } = obj || {};\n\n  return [\n    (inset ? 'inset' : null),\n    offsetX,\n    offsetY,\n    blurRadius,\n    spreadRadius,\n    color\n  ].filter(v => v !== null && v !== undefined)\n    .map(toPx)\n    .map(s => ('' + s).trim())\n    .join(' ');\n};\n\nconst isLength = v => v === '0' || LENGTH_REG.test(v);\nconst toNum = v => {\n  if (!/px$/.test(v) && v !== '0') return v;\n  const n = parseFloat(v);\n  return !isNaN(n) ? n : v;\n};\nconst toPx = n => typeof n === 'number' && n !== 0 ? (n + 'px') : n;\n\nexport const parse = str => str.split(VALUES_REG).map(s => s.trim()).map(parseValue);\nexport const stringify = arr => arr.map(stringifyValue).join(', ');\n"
  },
  {
    "path": "examples/components/theme-configurator/utils/utils.js",
    "content": "import deepmerge from 'deepmerge';\nimport constant from '../../../i18n/theme-editor.json';\n\nexport const filterConfigType = (name) => {\n  switch (name) {\n    case 'color':\n    case 'typography':\n    case 'border':\n      return 'global';\n    default:\n      return 'local';\n  }\n};\n\nexport const filterGlobalValue = (defaultConfig, userConfig) => {\n  const valueObject = {};\n  const globalArr = ['color', 'typography', 'border'];\n  globalArr.forEach((global) => {\n    const configObj = {};\n    defaultConfig\n      .find(config => (config.name === global))\n      .config.forEach(c => (configObj[c.key] = deepmerge({}, c)));\n    valueObject[global] = configObj;\n    Object.keys(configObj).forEach((c) => {\n      if (userConfig.global[c]) {\n        configObj[c].value = userConfig.global[c];\n      }\n    });\n  });\n  return valueObject;\n};\n\nexport const getStyleDisplayValue = (displayValue, global) => {\n  if (displayValue.startsWith('$')) {\n    return global[displayValue].value;\n  }\n  return displayValue;\n};\n\nconst getLang = () => {\n  return location.hash.replace('#', '').split('/')[1] || 'zh-CN';\n};\n\nconst getNameFromI18N = (name) => {\n  const lang = getLang();\n  return constant.filter(config => config.lang === lang)[0][name];\n};\n\nexport const getVariableDisplayName = (key) => {\n  return getNameFromI18N('variable-name')[key] || key;\n};\n\nexport const getStyleDisplayName = (config, componentName) => {\n  const displayNameMap = getNameFromI18N('display-name');\n  if (config.name) {\n    return getVariableDisplayName(config.key.replace('$--', ''));\n  }\n  let displayName = config.key.replace(`$--${componentName}-`, '');\n  Object.keys(displayNameMap).forEach((name) => {\n    displayName = displayName.replace(name, displayNameMap[name]);\n  });\n  displayName = displayName.replace(/-/g, ' ');\n  return displayName.trim();\n};\n\nexport const getActionDisplayName = (key) => {\n  return getNameFromI18N('action')[key] || key;\n};\n"
  },
  {
    "path": "examples/components/theme-picker.vue",
    "content": "<template>\n  <el-color-picker\n    class=\"theme-picker\"\n    popper-class=\"theme-picker-dropdown\"\n    v-model=\"theme\"></el-color-picker>\n</template>\n\n<style lang=\"scss\">\n  .theme-picker {\n    height: 80px;\n    display: inline-block;\n    // @utils-vertical-center;\n  }\n\n  .theme-picker .el-color-picker__trigger {\n    vertical-align: middle;\n  }\n  \n  .theme-picker-dropdown .el-color-dropdown__link-btn {\n    display: none;\n  }\n</style>\n\n<script>\n  import Element from 'main/index.js';\n  const { version } = Element;\n\n  const ORIGINAL_THEME = '#409EFF';\n  export default {\n    data() {\n      return {\n        chalk: '', // content of theme-chalk css\n        docs: '', // content of docs css\n        theme: ORIGINAL_THEME\n      };\n    },\n\n    watch: {\n      theme(val, oldVal) {\n        if (typeof val !== 'string') return;\n        const themeCluster = this.getThemeCluster(val.replace('#', ''));\n        const originalCluster = this.getThemeCluster(oldVal.replace('#', ''));\n        const getHandler = (variable, id) => {\n          return () => {\n            const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''));\n            let newStyle = this.updateStyle(this[variable], originalCluster, themeCluster);\n\n            let styleTag = document.getElementById(id);\n            if (!styleTag) {\n              styleTag = document.createElement('style');\n              styleTag.setAttribute('id', id);\n              document.head.appendChild(styleTag);\n            }\n            styleTag.innerText = newStyle;\n          };\n        };\n\n        const chalkHandler = getHandler('chalk', 'chalk-style');\n        const docsHandler = getHandler('docs', 'docs-style');\n\n        if (!this.chalk) {\n          const url = `https://unpkg.com/element-ui@${ version }/lib/theme-chalk/index.css`;\n          this.getCSSString(url, chalkHandler, 'chalk');\n        } else {\n          chalkHandler();\n        }\n\n        if (!this.docs) {\n          const links = [].filter.call(document.querySelectorAll('link'), link => {\n            return /docs\\..+\\.css/.test(link.href || '');\n          });\n          links[0] && this.getCSSString(links[0].href, docsHandler, 'docs');\n        } else {\n          docsHandler();\n        }\n\n        const styles = [].slice.call(document.querySelectorAll('style'))\n          .filter(style => {\n            const text = style.innerText;\n            return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text);\n          });\n        styles.forEach(style => {\n          const { innerText } = style;\n          if (typeof innerText !== 'string') return;\n          style.innerText = this.updateStyle(innerText, originalCluster, themeCluster);\n        });\n      }\n    },\n\n    methods: {\n      updateStyle(style, oldCluster, newCluster) {\n        let newStyle = style;\n        oldCluster.forEach((color, index) => {\n          newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index]);\n        });\n        return newStyle;\n      },\n\n      getCSSString(url, callback, variable) {\n        const xhr = new XMLHttpRequest();\n        xhr.onreadystatechange = () => {\n          if (xhr.readyState === 4 && xhr.status === 200) {\n            this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '');\n            callback();\n          }\n        };\n        xhr.open('GET', url);\n        xhr.send();\n      },\n\n      getThemeCluster(theme) {\n        const tintColor = (color, tint) => {\n          let red = parseInt(color.slice(0, 2), 16);\n          let green = parseInt(color.slice(2, 4), 16);\n          let blue = parseInt(color.slice(4, 6), 16);\n\n          if (tint === 0) { // when primary color is in its rgb space\n            return [red, green, blue].join(',');\n          } else {\n            red += Math.round(tint * (255 - red));\n            green += Math.round(tint * (255 - green));\n            blue += Math.round(tint * (255 - blue));\n\n            red = red.toString(16);\n            green = green.toString(16);\n            blue = blue.toString(16);\n\n            return `#${ red }${ green }${ blue }`;\n          }\n        };\n\n        const shadeColor = (color, shade) => {\n          let red = parseInt(color.slice(0, 2), 16);\n          let green = parseInt(color.slice(2, 4), 16);\n          let blue = parseInt(color.slice(4, 6), 16);\n\n          red = Math.round((1 - shade) * red);\n          green = Math.round((1 - shade) * green);\n          blue = Math.round((1 - shade) * blue);\n\n          red = red.toString(16);\n          green = green.toString(16);\n          blue = blue.toString(16);\n\n          return `#${ red }${ green }${ blue }`;\n        };\n\n        const clusters = [theme];\n        for (let i = 0; i <= 9; i++) {\n          clusters.push(tintColor(theme, Number((i / 10).toFixed(2))));\n        }\n        clusters.push(shadeColor(theme, 0.1));\n        return clusters;\n      }\n    }\n  };\n</script>"
  },
  {
    "path": "examples/demo-styles/alert.scss",
    "content": ".demo-block.demo-alert .el-alert {\n  margin: 20px 0 0;\n}\n\n.demo-block.demo-alert .el-alert:first-child {\n  margin: 0;\n}\n"
  },
  {
    "path": "examples/demo-styles/avatar.scss",
    "content": ".demo-avatar {\n\n  &.demo-basic {\n    text-align: center;\n\n    .demo-basic--circle, .demo-basic--square {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      .block {\n        flex: 1;\n      }\n\n      .block:not(:last-child) {\n        border-right: 1px solid rgba(224, 230, 237, 0.5);\n      }\n    }\n\n  }\n\n  .sub-title {\n    margin-bottom: 10px;\n    font-size: 14px;\n    color: #8492a6;\n  }\n\n  .el-col:not(:last-child) {\n    border-right: 1px solid rgba(224,230,237,.5);\n  }\n\n  .demo-type {\n    display: flex;\n\n    >div {\n      flex: 1;\n      text-align: center;\n    }\n\n    >div:not(:last-child) {\n      border-right: 1px solid rgba(224,230,237,.5);\n    }\n  }\n\n  .demo-fit {\n    display: flex;\n    text-align: center;\n    justify-content: space-between;\n\n    .block {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      flex-grow: 0;\n    }\n\n    .title {\n      margin-bottom: 10px;\n      font-size: 14px;\n      color: #8492a6;\n    }\n  }\n}\n"
  },
  {
    "path": "examples/demo-styles/badge.scss",
    "content": ".demo-badge.demo-block .el-dropdown {\n  vertical-align: middle;\n}\n.demo-badge.demo-block {\n  .share-button {\n    width: 36px;\n    padding: 10px;\n  }\n\n  .mark {\n    margin-top: 8px;\n    line-height: 1;\n    float: right;\n  }\n\n  .item {\n    margin-right: 40px;\n  }\n}\n"
  },
  {
    "path": "examples/demo-styles/border.scss",
    "content": ".demo-border .text {\n  width: 15%;\n}\n.demo-border .line {\n  width: 70%;\n}\n.demo-border .line div {\n  width: 100%;\n  height: 0;\n  border-top: 1px solid #eee;\n}\n.demo-border .line .dashed {\n  border-top: 2px dashed #eee;\n}\n.demo-shadow {\n  height: 100px;\n  width: 50%;\n  border: 1px solid #eee;\n}\n.demo-shadow-text {\n  line-height: 50px;\n  color: #666;\n  font-size: 14px;\n}\n.demo-radius .title {\n  color: #666;\n  font-size: 18px;\n  margin: 10px 0;\n}\n.demo-radius .value {\n  color: #333;\n  font-size: 16px;\n  margin: 10px 0;\n}\n.demo-radius .radius {\n  height: 60px;\n  width: 70%;\n  border: 1px solid #d7dae2;\n  border-radius: 0;\n  margin-top: 20px;\n}\n.demo-radius .radius-30 {\n  border-radius: 30px;\n}\n"
  },
  {
    "path": "examples/demo-styles/button.scss",
    "content": ".demo-block.demo-button {\n  .el-row {\n    margin-bottom: 20px;\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-button + .el-button {\n    margin-left: 10px;\n  }\n  .el-button-group {\n    .el-button + .el-button {\n      margin-left: 0;\n    }\n\n    & + .el-button-group {\n      margin-left: 10px;\n    }\n  }\n}\n"
  },
  {
    "path": "examples/demo-styles/calendar.scss",
    "content": ".demo-calendar.demo-block {\n  .is-selected {\n    color: #1989FA;\n  } \n}\n"
  },
  {
    "path": "examples/demo-styles/card.scss",
    "content": ".demo-block.demo-card {\n  .text {\n    font-size: 14px;\n  }\n\n  .time {\n    font-size: 13px;\n    color: #999;\n  }\n\n  .bottom {\n    margin-top: 13px;\n    line-height: 12px;\n  }\n\n  .item {\n    margin-bottom: 18px;\n  }\n\n  .button {\n    padding: 0;\n    float: right;\n  }\n\n  .image {\n    width: 100%;\n    display: block;\n  }\n\n  .box-card {\n    width: 480px;\n  }\n}\n"
  },
  {
    "path": "examples/demo-styles/carousel.scss",
    "content": ".demo-carousel .block {\n  padding: 30px;\n  text-align: center;\n  border-right: solid 1px #eff2f6;\n  display: inline-block;\n  width: 49%;\n  box-sizing: border-box;\n  &:last-child {\n    border-right: none;\n  }\n}\n\n.demo-carousel .demonstration {\n  display: block;\n  color: #8492a6;\n  font-size: 14px;\n  margin-bottom: 20px;\n}\n\n.demo-carousel .el-carousel__container {\n  text-align: center;\n}\n\n.demo-carousel .el-carousel__item {\n  h3 {\n    color: #fff;\n    font-size: 18px;\n    line-height: 300px;\n    margin: 0;\n    &.small {\n      font-size: 14px;\n      line-height: 150px;\n    }\n    &.medium {\n      font-size: 14px;\n      line-height: 200px;\n    }\n  }\n  &:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n  &:nth-child(2n + 1) {\n    background-color: #d3dce6;\n  }\n}\n\n"
  },
  {
    "path": "examples/demo-styles/cascader.scss",
    "content": ".demo-cascader {\n  .el-cascader {\n    width: 222px;\n  }\n}\n.demo-cascader-size {\n  .el-cascader {\n    vertical-align: top;\n    margin-right: 15px;\n  }\n}\n.demo-cascader .source > div {\n  display: flex;\n}\n.demo-cascader .block {\n  padding: 30px 0;\n  text-align: center;\n  border-right: solid 1px #eff2f6;\n  width: 50%;\n  box-sizing: border-box;\n  &:last-child {\n    border-right: none;\n  }\n}\n.demo-cascader .demonstration {\n  display: block;\n  color: #8492a6;\n  font-size: 14px;\n  margin-bottom: 20px;\n}\n"
  },
  {
    "path": "examples/demo-styles/collapse.scss",
    "content": ".demo-collapse {\n  .el-collapse-item__header {\n    .header-icon {\n      margin-left: 5px;\n    }\n  }\n}\n"
  },
  {
    "path": "examples/demo-styles/color-picker.scss",
    "content": ".demo-color-picker .block {\n  padding: 30px 0;\n  text-align: center;\n  border-right: solid 1px #eff2f6;\n  display: inline-block;\n  width: 50%;\n  box-sizing: border-box;\n  &:last-child {\n    border-right: none;\n  }\n}\n.demo-color-picker .demonstration {\n  display: block;\n  color: #8492a6;\n  font-size: 14px;\n  margin-bottom: 20px;\n}\n.demo-color-picker .el-color-picker + .el-color-picker {\n  margin-left: 20px;\n}\n"
  },
  {
    "path": "examples/demo-styles/color.scss",
    "content": ".demo-color-box {\n  position: relative;\n  border-radius: 4px;\n  padding: 20px;\n  margin: 5px 0;\n  height: 114px;\n  box-sizing: border-box;\n  color: #fff;\n  font-size: 14px;\n\n  & .value {\n    font-size: 12px;\n    opacity: 0.69;\n    line-height: 24px;\n  }\n}\n.demo-color-box-other {\n  height: 74px;\n  margin: 10px 0 !important;\n  border-radius: 4px 4px 4px 4px !important;\n  padding: 15px 20px;\n}\n.demo-color-box-group {\n  .demo-color-box {\n    border-radius: 0;\n    margin: 0;\n  }\n  .demo-color-box:first-child {\n    border-radius: 4px 4px 0 0;\n  }\n  .demo-color-box:last-child {\n    border-radius: 0 0 4px 4px;\n  }\n}\n.bg-color-sub {\n  width: 100%;\n  height: 40px;\n  left: 0;\n  bottom: 0;\n  position: absolute;\n  border-radius: 0 0 4px 4px;\n}\n.bg-blue-sub-item {\n  width: 11.1111111%;\n  height: 100%;\n  display: inline-block;\n}\n.bg-blue-sub-item:first-child {\n  border-radius: 0 0 0 4px;\n}\n.bg-success-sub-item {\n  width: 50%;\n  height: 100%;\n  display: inline-block;\n}\n.bg-success-sub-item:first-child {\n  border-radius: 0 0 0 4px;\n}\n.bg-success-sub-item:last-child {\n  border-radius: 0 0 4px 0;\n}\n.bg-transparent {\n  border: 1px solid #fcc3c3;\n  color: #303133;\n  background: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M0 98 L100 0 L100 1 L1 98' fill='%23FCC3C3' /></svg>\");\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: 100% 100%, auto;\n}\n.demo-color-box-lite {\n  color: #303133;\n}\n"
  },
  {
    "path": "examples/demo-styles/container.scss",
    "content": ".el-header,\n.el-footer {\n  background-color: #b3c0d1;\n  color: #333;\n  line-height: 60px;\n}\n\n.el-aside {\n  color: #333;\n}\n\n#chang-jian-ye-mian-bu-ju + .demo-container {\n  .el-header,\n  .el-footer {\n    text-align: center;\n  }\n\n  .el-aside {\n    background-color: #d3dce6;\n    text-align: center;\n    line-height: 200px;\n  }\n\n  .el-main {\n    background-color: #e9eef3;\n    color: #333;\n    text-align: center;\n    line-height: 160px;\n  }\n\n  & > .source > .el-container {\n    margin-bottom: 40px;\n\n    &:nth-child(5) .el-aside,\n    &:nth-child(6) .el-aside {\n      line-height: 260px;\n    }\n\n    &:nth-child(7) .el-aside {\n      line-height: 320px;\n    }\n  }\n}\n"
  },
  {
    "path": "examples/demo-styles/date-picker.scss",
    "content": ".demo-block.demo-date-picker .source > div {\n  padding: 0;\n  display: flex;\n  flex-wrap: wrap;\n}\n\n.demo-date-picker .block {\n  padding: 30px 0;\n  text-align: center;\n  border-right: solid 1px #eff2f6;\n  flex: 1;\n  &:last-child {\n    border-right: none;\n  }\n}\n\n.demo-date-picker .container {\n  flex: 1;\n  border-right: solid 1px #eff2f6;\n  .block {\n    border-right: none;\n    &:last-child {\n      border-top: solid 1px #eff2f6;\n    }\n  }\n  &:last-child {\n    border-right: none;\n  }\n}\n\n.demo-date-picker .demonstration {\n  display: block;\n  color: #8492a6;\n  font-size: 14px;\n  margin-bottom: 20px;\n}\n"
  },
  {
    "path": "examples/demo-styles/datetime-picker.scss",
    "content": ".demo-block.demo-datetime-picker .source > div {\n  padding: 0;\n  display: flex;\n}\n\n.demo-datetime-picker .block {\n  padding: 30px 0;\n  text-align: center;\n  border-right: solid 1px #eff2f6;\n  flex: 1;\n  &:last-child {\n    border-right: none;\n  }\n}\n\n.demo-datetime-picker .demonstration {\n  display: block;\n  color: #8492a6;\n  font-size: 14px;\n  margin-bottom: 20px;\n}\n"
  },
  {
    "path": "examples/demo-styles/descriptions.scss",
    "content": ".demo-block.demo-descriptions {\n  .margin-top {\n    margin-top: 20px;\n  }\n\n  .my-label {\n    background: #E1F3D8;\n  }\n\n  .my-content {\n    background: #FDE2E2;\n  }\n}\n"
  },
  {
    "path": "examples/demo-styles/dialog.scss",
    "content": ".demo-block.demo-dialog {\n  .dialog-footer button:first-child {\n    margin-right: 10px;\n  }\n  .full-image {\n    width: 100%;\n  }\n  .el-dialog__wrapper {\n    margin: 0;\n  }\n  .el-select {\n    width: 300px;\n  }\n  .el-input {\n    width: 300px;\n  }\n  .el-button--text {\n    margin-right: 15px;\n  }\n}\n"
  },
  {
    "path": "examples/demo-styles/divider.scss",
    "content": ".demo-divider-container-1 {\n  display: inline-block;\n  width: 33%;\n}\n\n.demo-divider-container-2 {\n  display: inline-block;\n  width: 50%;\n}"
  },
  {
    "path": "examples/demo-styles/drawer.scss",
    "content": ".demo-drawer {\n  &__content {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    form {\n      flex: 1;\n    }\n  }\n\n  &__footer {\n    display: flex;\n    button {\n      flex: 1;\n    }\n  }\n}\n\n.el-drawer__body {\n  padding: 20px;\n}\n"
  },
  {
    "path": "examples/demo-styles/dropdown.scss",
    "content": ".demo-block {\n  .el-dropdown {\n    vertical-align: top;\n\n    & + .el-dropdown {\n      margin-left: 15px;\n    }\n  }\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409eff;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n}\n\n.block-col-2 {\n  margin: -24px;\n\n  .el-col {\n    padding: 30px 0;\n    text-align: center;\n    border-right: 1px solid #eff2f6;\n\n    &:last-child {\n      border-right: 0;\n    }\n  }\n}\n\n.demo-dropdown .demonstration {\n  display: block;\n  color: #8492a6;\n  font-size: 14px;\n  margin-bottom: 20px;\n}\n"
  },
  {
    "path": "examples/demo-styles/form.scss",
    "content": ".demo-form {\n  .el-select .el-input {\n    width: 380px;\n  }\n  .el-form {\n    width: 460px;\n  }\n\n  .line {\n    text-align: center;\n  }\n\n  .el-checkbox-group {\n    width: 320px;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n\n    &:after,\n    &:before {\n      content: \" \";\n      display: table;\n    }\n    &:after {\n      clear: both;\n      visibility: hidden;\n      font-size: 0;\n      height: 0;\n    }\n\n    .el-checkbox {\n      float: left;\n      width: 160px;\n      padding-right: 20px;\n      margin: 0;\n      padding: 0;\n\n      + .el-checkbox {\n        margin-left: 0;\n      }\n    }\n  }\n  .demo-form-normal {\n    width: 460px;\n  }\n  .demo-form-inline {\n    width: auto;\n\n    .el-input {\n      width: 150px;\n    }\n    > * {\n      margin-right: 10px;\n    }\n  }\n  .demo-ruleForm {\n    width: 460px;\n\n    .el-select .el-input {\n      width: 360px;\n    }\n  }\n  .demo-dynamic {\n    .el-input {\n      margin-right: 10px;\n      width: 270px;\n      vertical-align: top;\n    }\n  }\n  .fr {\n    float: right;\n  }\n}\n"
  },
  {
    "path": "examples/demo-styles/i18n.scss",
    "content": "ul.language-list {\n  color: #5e6d82;\n  font-size: 14px;\n  padding-left: 20px;\n  li {\n    line-height: 1.8;\n  }\n}\n"
  },
  {
    "path": "examples/demo-styles/icon.scss",
    "content": ".demo-icon .source > div > i {\n  color: #606266;\n  margin: 0 20px;\n  font-size: 1.5em;\n  vertical-align: middle;\n}\n\n.demo-icon .source button {\n  margin: 0 20px;\n}\n\n.page-component .content > ul.icon-list {\n  overflow: hidden;\n  list-style: none;\n  padding: 0!important;\n  border: solid 1px #eaeefb;\n  border-radius: 4px;\n}\n.icon-list li {\n  float: left;\n  width: 16.66%;\n  text-align: center;\n  height: 120px;\n  line-height: 120px;\n  color: #666;\n  font-size: 13px;\n  border-right: 1px solid #eee;\n  border-bottom: 1px solid #eee;\n  margin-right: -1px;\n  margin-bottom: -1px;\n\n  &::after {\n    display: inline-block;\n    content: \"\";\n    height: 100%;\n    vertical-align: middle;\n  }\n\n  span {\n    display: inline-block;\n    line-height: normal;\n    vertical-align: middle;\n    font-family: \"Helvetica Neue\", Helvetica, \"PingFang SC\", \"Hiragino Sans GB\",\n      \"Microsoft YaHei\", SimSun, sans-serif;\n    color: #99a9bf;\n    transition: color 0.15s linear;\n  }\n\n  i {\n    display: block;\n    font-size: 32px;\n    margin-bottom: 15px;\n    color: #606266;\n    transition: color 0.15s linear;\n  }\n\n  .icon-name {\n    display: inline-block;\n    padding: 0 3px;\n    height: 1em;\n  }\n\n  &:hover {\n    span,\n    i {\n      color: rgb(92, 182, 255);\n    }\n  }\n}\n"
  },
  {
    "path": "examples/demo-styles/image.scss",
    "content": "@keyframes dot {\n  0% { width: 0; margin-right: 1em; }\n  100% { width: 1em; margin-right: 0; }\n}\n\n.demo-image {\n  .block {\n    padding: 30px 0;\n    text-align: center;\n    border-right: solid 1px #eff2f6;\n    display: inline-block;\n    width: 20%;\n    box-sizing: border-box;\n    vertical-align: top;\n    &:last-child {\n      border-right: none;\n    }\n  }\n\n  .demonstration {\n    display: block;\n    color: #8492a6;\n    font-size: 14px;\n    margin-bottom: 20px;\n  }\n}\n\n.demo-image__placeholder, .demo-image__error {\n  @extend .demo-image;\n\n  .block {\n    width: 49%;\n  }\n\n  .el-image {\n    width: 300px;\n    height: 200px;\n  }\n\n  .image-slot {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n    background: #f5f7fa;\n    color: #909399;\n    font-size: 14px;\n  }\n}\n\n.demo-image__placeholder {\n  .dot {\n    animation: dot 2s infinite steps(3, start);\n    overflow: hidden;\n  }\n}\n\n.demo-image__error {\n  .image-slot {\n    font-size: 30px;\n  }\n}\n\n.demo-image__lazy {\n  height: 400px;\n  overflow-y: auto;\n\n  .el-image {\n    display: block;\n    min-height: 200px;\n    margin-bottom: 10px;\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n}\n"
  },
  {
    "path": "examples/demo-styles/index.scss",
    "content": "@import \"./alert.scss\";\n@import \"./badge.scss\";\n@import \"./border.scss\";\n@import \"./button.scss\";\n@import \"./calendar.scss\";\n@import \"./card.scss\";\n@import \"./carousel.scss\";\n@import \"./cascader.scss\";\n@import \"./collapse.scss\";\n@import \"./color-picker.scss\";\n@import \"./color.scss\";\n@import \"./container.scss\";\n@import \"./date-picker.scss\";\n@import \"./datetime-picker.scss\";\n@import \"./dialog.scss\";\n@import \"./dropdown.scss\";\n@import \"./form.scss\";\n@import \"./i18n.scss\";\n@import \"./icon.scss\";\n@import \"./input-number.scss\";\n@import \"./input.scss\";\n@import \"./layout.scss\";\n@import \"./loading.scss\";\n@import \"./menu.scss\";\n@import \"./pagination.scss\";\n@import \"./popover.scss\";\n@import \"./progress.scss\";\n@import \"./rate.scss\";\n@import \"./select.scss\";\n@import \"./slider.scss\";\n@import \"./switch.scss\";\n@import \"./table.scss\";\n@import \"./tag.scss\";\n@import \"./time-picker.scss\";\n@import \"./timeline.scss\";\n@import \"./tooltip.scss\";\n@import \"./transition.scss\";\n@import \"./transfer.scss\";\n@import \"./tree.scss\";\n@import \"./typography.scss\";\n@import \"./upload.scss\";\n@import \"./divider.scss\";\n@import \"./image.scss\";\n@import \"./infinite-scroll.scss\";\n@import \"./avatar.scss\";\n@import \"./drawer.scss\";\n@import \"./skeleton.scss\";\n@import \"./descriptions.scss\";\n\n"
  },
  {
    "path": "examples/demo-styles/infinite-scroll.scss",
    "content": ".infinite-list {\n  height: 300px;\n  padding: 0;\n  margin: 0;\n  list-style: none;\n\n  .infinite-list-item {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 50px;\n    background: #e8f3fe;\n    margin: 10px;\n    color: lighten(#1989fa, 20%);\n    & + .list-item {\n      margin-top: 10px\n    }\n  } \n}\n\n.infinite-list-wrapper {\n  height: 300px;\n  text-align: center;\n\n  .list{\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n    \n\n  .list-item{\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 50px;\n    background: #fff6f6;\n    color: #ff8484;\n    & + .list-item {\n      margin-top: 10px\n    }\n  }\n}\n   \n\n \n"
  },
  {
    "path": "examples/demo-styles/input-number.scss",
    "content": ".demo-block.demo-input-number {\n  .el-input-number + .el-input-number {\n    margin-left: 10px;\n  }\n}\n"
  },
  {
    "path": "examples/demo-styles/input.scss",
    "content": ".demo-input {\n  .el-select .el-input {\n    width: 130px;\n  }\n  .el-input {\n    width: 180px;\n  }\n  .el-textarea {\n    width: 414px;\n  }\n  .el-input-group {\n    width: 100%;\n  }\n  .demo-input-size {\n    .el-input {\n      vertical-align: top;\n      margin: 0 10px 10px 0;\n    }\n  }\n  .input-with-select .el-input-group__prepend {\n    background-color: #fff;\n  }\n  .demo-autocomplete {\n    text-align: center;\n\n    .sub-title {\n      margin-bottom: 10px;\n      font-size: 14px;\n      color: #8492a6;\n    }\n\n    .el-col:not(:last-child) {\n      border-right: 1px solid rgba(224, 230, 237, 0.5);\n    }\n\n    .el-autocomplete {\n      text-align: left;\n    }\n  }\n}\n.el-autocomplete-suggestion.my-autocomplete {\n  li {\n    line-height: normal;\n    padding-top: 7px;\n    padding-bottom: 7px;\n\n    .name {\n      text-overflow: ellipsis;\n      overflow: hidden;\n    }\n    .addr {\n      font-size: 12px;\n      color: #b4b4b4;\n    }\n    .highlighted .addr {\n      color: #ddd;\n    }\n  }\n}\n.demo-input-suffix {\n  margin-bottom: 15px;\n  .el-input {\n    margin-right: 15px;\n  }\n}\n"
  },
  {
    "path": "examples/demo-styles/layout.scss",
    "content": ".demo-layout {\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n}\n"
  },
  {
    "path": "examples/demo-styles/loading.scss",
    "content": ".demo-loading .el-table {\n  border: none;\n}\n"
  },
  {
    "path": "examples/demo-styles/menu.scss",
    "content": ".demo-block.demo-menu {\n  .el-menu-demo {\n    padding-left: 55px;\n  }\n  .el-menu-vertical-demo:not(.el-menu--collapse) {\n    width: 240px;\n    min-height: 400px;\n  }\n  .line {\n    height: 1px;\n    background-color: #e0e6ed;\n    margin: 35px -24px;\n  }\n  h5 {\n    font-size: 14px;\n    color: #8492a6;\n    margin-top: 10px;\n  }\n  .tac {\n    text-align: center;\n\n    .el-menu-vertical-demo {\n      display: inline-block;\n      text-align: left;\n    }\n  }\n}\n"
  },
  {
    "path": "examples/demo-styles/pagination.scss",
    "content": ".demo-pagination .source.first {\n  padding: 0;\n}\n\n.demo-pagination .first .block {\n  padding: 30px 0;\n  text-align: center;\n  border-right: solid 1px #eff2f6;\n  display: inline-block;\n  width: 50%;\n  box-sizing: border-box;\n\n  &:last-child {\n    border-right: none;\n  }\n}\n\n.demo-pagination .first .demonstration {\n  display: block;\n  color: #8492a6;\n  font-size: 14px;\n  margin-bottom: 20px;\n}\n\n.demo-pagination .source.last {\n  padding: 0;\n}\n\n.demo-pagination .last .block {\n  padding: 30px 24px;\n  border-bottom: solid 1px #eff2f6;\n  &:last-child {\n    border-bottom: none;\n  }\n}\n\n.demo-pagination .last .demonstration {\n  font-size: 14px;\n  color: #8492a6;\n  line-height: 44px;\n}\n\n.demo-pagination .last .demonstration + .el-pagination {\n  width: 70%;\n  margin: 5px 20px 0 0;\n}\n"
  },
  {
    "path": "examples/demo-styles/popover.scss",
    "content": ".demo-block.demo-popover {\n  .el-popover + .el-popover {\n    margin-left: 10px;\n  }\n  .el-input {\n    width: 360px;\n  }\n  .el-button {\n    margin-left: 10px;\n  }\n}\n"
  },
  {
    "path": "examples/demo-styles/progress.scss",
    "content": ".demo-block.demo-progress {\n  .el-progress--line {\n    margin-bottom: 15px;\n    width: 350px;\n  }\n  .el-progress--circle {\n    margin-right: 15px;\n  }\n}\n"
  },
  {
    "path": "examples/demo-styles/rate.scss",
    "content": ".demo-rate .block {\n  padding: 30px 0;\n  text-align: center;\n  border-right: solid 1px #eff2f6;\n  display: inline-block;\n  width: 49%;\n  box-sizing: border-box;\n  &:last-child {\n    border-right: none;\n  }\n}\n\n.demo-rate .demonstration {\n  display: block;\n  color: #8492a6;\n  font-size: 14px;\n  margin-bottom: 20px;\n}\n"
  },
  {
    "path": "examples/demo-styles/select.scss",
    "content": ".demo-select .el-select {\n  width: 240px;\n}\n"
  },
  {
    "path": "examples/demo-styles/skeleton.scss",
    "content": ".demo-block.demo-skeleton {\n  .el-card {\n    margin-bottom: 16px;\n  }\n\n  .card-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  .time {\n    font-size: 13px;\n    color: #999;\n  }\n\n  .bottom {\n    margin-top: 13px;\n    line-height: 12px;\n  }\n\n  .button {\n    padding: 0;\n    min-height: auto;\n  }\n\n  .image {\n    &.multi-content {\n      width: 400px;\n      height: 267px;\n    }\n\n    width: 100%;\n    display: block;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n    display: table;\n    content: '';\n  }\n\n  .clearfix:after {\n    clear: both;\n  }\n}\n"
  },
  {
    "path": "examples/demo-styles/slider.scss",
    "content": ".demo-block.demo-slider .source {\n  padding: 0;\n}\n\n.demo-block.demo-slider .block {\n  padding: 30px 24px;\n  overflow: hidden;\n  border-bottom: solid 1px #eff2f6;\n  &:last-child {\n    border-bottom: none;\n  }\n}\n\n.demo-block.demo-slider .demonstration {\n  font-size: 14px;\n  color: #8492a6;\n  line-height: 44px;\n}\n\n.demo-block.demo-slider .demonstration + .el-slider {\n  float: right;\n  width: 70%;\n  margin-right: 20px;\n}\n"
  },
  {
    "path": "examples/demo-styles/switch.scss",
    "content": ".demo-block.demo-switch {\n  .el-switch {\n    margin: 20px 20px 20px 0;\n  }\n}\n"
  },
  {
    "path": "examples/demo-styles/table.scss",
    "content": ".el-table .warning-row {\n  background: oldlace;\n}\n\n.el-table .success-row {\n  background: #f0f9eb;\n}\n\n.demo-table .name-wrapper {\n  display: inline-block;\n}\n\n.demo-table .demo-table-expand {\n  label {\n    width: 90px;\n    color: #99a9bf;\n  }\n  .el-form-item {\n    margin-right: 0;\n    margin-bottom: 0;\n    width: 50%;\n  }\n}\n"
  },
  {
    "path": "examples/demo-styles/tag.scss",
    "content": ".demo-block.demo-tag {\n  .el-tag + .el-tag {\n    margin-left: 10px;\n  }\n\n  .button-new-tag {\n    margin-left: 10px;\n    height: 32px;\n    line-height: 30px;\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n\n  .input-new-tag {\n    width: 90px;\n    margin-left: 10px;\n    vertical-align: bottom;\n  }\n\n  .tag-group {\n    display: flex;\n    align-items: center;\n\n    &__title {\n      width: 45px;\n      font-size: 14px;\n      color: #606266;\n    }\n\n    &+.tag-group  {\n      margin-top: 10px;\n    }\n  }\n}\n"
  },
  {
    "path": "examples/demo-styles/time-picker.scss",
    "content": ".demo-block {\n  .el-date-editor + .el-date-editor {\n    margin-left: 10px;\n  }\n}\n"
  },
  {
    "path": "examples/demo-styles/timeline.scss",
    "content": ".demo-timeline .source .radio {\n  margin-bottom: 20px;\n}\n.demo-timeline .source .radio .el-radio-group {\n  margin-left: 20px;\n}\n"
  },
  {
    "path": "examples/demo-styles/tooltip.scss",
    "content": ".demo-tooltip {\n  .el-tooltip + .el-tooltip {\n    margin-left: 15px;\n  }\n  .box {\n    width: 400px;\n\n    .top {\n      text-align: center;\n    }\n\n    .left {\n      float: left;\n      width: 60px;\n    }\n\n    .right {\n      float: right;\n      width: 60px;\n    }\n\n    .bottom {\n      clear: both;\n      text-align: center;\n    }\n\n    .item {\n      margin: 4px;\n    }\n\n    .left .el-tooltip__popper,\n    .right .el-tooltip__popper {\n      padding: 8px 10px;\n    }\n    .el-tooltip {\n      margin-left: 0;\n    }\n  }\n}\n"
  },
  {
    "path": "examples/demo-styles/transfer.scss",
    "content": ".demo-transfer {\n  .transfer-footer {\n    margin-left: 15px;\n    padding: 6px 5px;\n  }\n}\n"
  },
  {
    "path": "examples/demo-styles/transition.scss",
    "content": ".demo-transition {\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    margin-right: 20px;\n    box-sizing: border-box;\n  }\n}\n"
  },
  {
    "path": "examples/demo-styles/tree.scss",
    "content": ".demo-tree {\n  .leaf {\n    width: 20px;\n    background: #ddd;\n  }\n\n  .folder {\n    width: 20px;\n    background: #888;\n  }\n\n  .buttons {\n    margin-top: 20px;\n  }\n\n  .filter-tree {\n    margin-top: 20px;\n  }\n\n  .custom-tree-container {\n    display: flex;\n    margin: -24px;\n  }\n\n  .block {\n    flex: 1;\n    padding: 8px 24px 24px;\n\n    &:first-child {\n      border-right: solid 1px #eff2f6;\n    }\n\n    > p {\n      text-align: center;\n      margin: 0;\n      line-height: 4;\n    }\n  }\n\n  .custom-tree-node {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    font-size: 14px;\n    padding-right: 8px;\n  }\n}\n"
  },
  {
    "path": "examples/demo-styles/typography.scss",
    "content": ".demo-typo-size {\n  .color-dark-light {\n    color: #99a9bf;\n  }\n}\n.demo-term-box img {\n  width: 24%;\n  margin: 0 4% 20px 0;\n}\n\n.lineH-left {\n  display: inline-block;\n  height: 80px;\n}\n.lineH-right {\n  display: inline-block;\n  list-style: none;\n  padding: 0 0 0 90px;\n  margin: 0;\n  vertical-align: top;\n}\n.lineH-right li {\n  font-size: 13px;\n  color: #666;\n  height: 20px;\n  line-height: 20px;\n}\n.lineH-right li span {\n  padding-left: 40px;\n}\n"
  },
  {
    "path": "examples/demo-styles/upload.scss",
    "content": ".upload-tip {\n  color: #8492a6;\n  font-size: 12px;\n  margin-top: 7px;\n}\n.demo-block {\n  margin-bottom: 24px;\n\n  .upload-demo {\n    width: 360px;\n  }\n  .avatar-uploader {\n    .el-upload {\n      border: 1px dashed #d9d9d9;\n      border-radius: 6px;\n      cursor: pointer;\n      position: relative;\n      overflow: hidden;\n\n      &:hover,\n      &:focus {\n        border-color: #409eff;\n      }\n    }\n    .avatar-uploader-icon {\n      font-size: 28px;\n      color: #8c939d;\n      width: 178px;\n      height: 178px;\n      line-height: 178px;\n      text-align: center;\n    }\n    .avatar {\n      width: 178px;\n      height: 178px;\n      display: block;\n    }\n  }\n}\n"
  },
  {
    "path": "examples/docs/en-US/alert.md",
    "content": "## Alert\n\nDisplays important alert messages.\n\n### Basic usage\n\nAlert components are non-overlay elements in the page that does not disappear automatically.\n\n:::demo Alert provides 4 types of themes defined by `type`, whose default value is `info`.\n\n```html\n<template>\n  <el-alert\n    title=\"success alert\"\n    type=\"success\">\n  </el-alert>\n  <el-alert\n    title=\"info alert\"\n    type=\"info\">\n  </el-alert>\n  <el-alert\n    title=\"warning alert\"\n    type=\"warning\">\n  </el-alert>\n  <el-alert\n    title=\"error alert\"\n    type=\"error\">\n  </el-alert>\n</template>\n```\n:::\n\n### Theme\n\nAlert provide two different themes, `light` and `dark`.\n\n:::demo Set `effect` to change theme, default is `light`.\n```html\n<template>\n  <el-alert\n    title=\"success alert\"\n    type=\"success\"\n    effect=\"dark\">\n  </el-alert>\n  <el-alert\n    title=\"info alert\"\n    type=\"info\"\n    effect=\"dark\">\n  </el-alert>\n  <el-alert\n    title=\"warning alert\"\n    type=\"warning\"\n    effect=\"dark\">\n  </el-alert>\n  <el-alert\n    title=\"error alert\"\n    type=\"error\"\n    effect=\"dark\">\n  </el-alert>\n</template>\n```\n:::\n\n### Customizable close button\n\nCustomize the close button as texts or other symbols.\n\n:::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.\n\n```html\n<template>\n  <el-alert\n    title=\"unclosable alert\"\n    type=\"success\"\n    :closable=\"false\">\n  </el-alert>\n  <el-alert\n    title=\"customized close-text\"\n    type=\"info\"\n    close-text=\"Gotcha\">\n  </el-alert>\n  <el-alert\n    title=\"alert with callback\"\n    type=\"warning\"\n    @close=\"hello\">\n  </el-alert>\n</template>\n\n<script>\n  export default {\n    methods: {\n      hello() {\n        alert('Hello World!');\n      }\n    }\n  }\n</script>\n```\n:::\n\n### With icon\n\nDisplaying an icon improves readability.\n\n:::demo Setting the `show-icon` attribute displays an icon that corresponds with the current Alert type.\n\n```html\n<template>\n  <el-alert\n    title=\"success alert\"\n    type=\"success\"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title=\"info alert\"\n    type=\"info\"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title=\"warning alert\"\n    type=\"warning\"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title=\"error alert\"\n    type=\"error\"\n    show-icon>\n  </el-alert>\n</template>\n```\n:::\n\n## Centered text\n\nUse the `center` attribute to center the text.\n\n:::demo\n\n```html\n<template>\n  <el-alert\n    title=\"success alert\"\n    type=\"success\"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title=\"info alert\"\n    type=\"info\"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title=\"warning alert\"\n    type=\"warning\"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title=\"error alert\"\n    type=\"error\"\n    center\n    show-icon>\n  </el-alert>\n</template>\n```\n:::\n\n### With description\n\nDescription includes a message with more detailed information.\n\n:::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.\n\n```html\n<template>\n  <el-alert\n    title=\"with description\"\n    type=\"success\"\n    description=\"This is a description.\">\n  </el-alert>\n</template>\n```\n:::\n\n### With icon and description\n\n:::demo At last, this is an example with both icon and description.\n\n```html\n<template>\n  <el-alert\n    title=\"success alert\"\n    type=\"success\"\n    description=\"more text description\"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title=\"info alert\"\n    type=\"info\"\n    description=\"more text description\"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title=\"warning alert\"\n    type=\"warning\"\n    description=\"more text description\"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title=\"error alert\"\n    type=\"error\"\n    description=\"more text description\"\n    show-icon>\n  </el-alert>\n</template>\n```\n:::\n\n### Attributes\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| title     | title         | string | — | — |\n| type | Component type | string | success/warning/info/error | info |\n| description | Descriptive text. Can also be passed with the default slot | string | — | — |\n| closable | If closable or not | boolean | — | true |\n| center | Whether to center the text | boolean | — | false |\n| close-text | Customized close button text | string | — | — |\n| show-icon | If a type icon is displayed | boolean | — | false |\n| effect | Choose theme  | string | light/dark | light |\n\n### Slot\n\n| Name | Description |\n|------|--------|\n| — | description |\n| title | content of the Alert title |\n\n### Events\n| Event Name | Description | Parameters |\n|---------- |-------- |---------- |\n| close | fires when alert is closed | — |\n"
  },
  {
    "path": "examples/docs/en-US/avatar.md",
    "content": "## Avatar avatar\n\nAvatars can be used to represent people or objects. It supports images, Icons, or characters.\n\n### Basic\n\nuse `shape` and `size` prop to set avatar's shape and size\n\n:::demo\n```html\n<template>\n  <el-row class=\"demo-avatar demo-basic\">\n    <el-col :span=\"12\">\n      <div class=\"sub-title\">circle</div>\n      <div class=\"demo-basic--circle\">\n        <div class=\"block\"><el-avatar :size=\"50\" :src=\"circleUrl\"></el-avatar></div>\n        <div class=\"block\" v-for=\"size in sizeList\" :key=\"size\">\n          <el-avatar :size=\"size\" :src=\"circleUrl\"></el-avatar>\n        </div>\n      </div>\n    </el-col>  \n    <el-col :span=\"12\">\n      <div class=\"sub-title\">square</div>\n      <div class=\"demo-basic--circle\">\n        <div class=\"block\"><el-avatar shape=\"square\" :size=\"50\" :src=\"squareUrl\"></el-avatar></div>\n        <div class=\"block\" v-for=\"size in sizeList\" :key=\"size\">\n          <el-avatar shape=\"square\" :size=\"size\" :src=\"squareUrl\"></el-avatar>\n        </div>\n      </div>\n    </el-col> \n  </el-row>\n</template>\n<script>\n  export default {\n    data () {\n      return {\n        circleUrl: \"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png\",\n        squareUrl: \"https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png\",\n        sizeList: [\"large\", \"medium\", \"small\"]\n      }\n    }\n  }\n</script>\n\n```\n:::\n\n### Types\n\nIt supports images, Icons, or characters\n\n:::demo\n```html\n<template>\n  <div class=\"demo-type\">\n    <div>\n      <el-avatar icon=\"el-icon-user-solid\"></el-avatar>\n    </div>\n    <div>\n      <el-avatar src=\"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png\"></el-avatar>\n    </div>\n    <div>\n      <el-avatar> user </el-avatar>\n    </div>\n  </div>\n</template>\n```\n:::\n\n### Fallback when image load error\n\nfallback when image load error\n\n:::demo\n```html\n<template>\n  <div class=\"demo-type\">\n    <el-avatar :size=\"60\" src=\"https://empty\" @error=\"errorHandler\">\n      <img src=\"https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png\"/>\n      </el-avatar>\n  </div>\n</template>\n<script>\n  export default {\n    methods: {\n      errorHandler() {\n        return true\n      }\n    }\n  }\n</script>\n\n```\n:::\n\n### How the image fit its container\n\nSet 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).\n\n:::demo\n```html\n<template>\n  <div class=\"demo-fit\">\n    <div class=\"block\" v-for=\"fit in fits\" :key=\"fit\">\n        <span class=\"title\">{{ fit }}</span>\n        <el-avatar shape=\"square\" :size=\"100\" :fit=\"fit\" :src=\"url\"></el-avatar>\n    </div>\n  </div>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],\n        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'\n      }\n    }\n  }\n</script>\n\n```\n:::\n\n### Attributes\n\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n| ----------------- | -------------------------------- | --------------- | ------ | ------ |\n| icon              | set representation type to Icon, more info on Icon Component   | string          |        |        |\n| size              | set avatar size                     | number/string | number / large / medium / small | large  |\n| shape             | set avatar shape  | string |    circle / square     |   circle  |\n| src               | the address of the image for an image avatar | string |        |      |\n| srcSet            | A list of one or more strings separated by commas indicating a set of possible image sources for the user agent to use | string |        |      |\n| alt               | This attribute defines an alternative text description of the image | string |        |      |\n| fit               | set how the image fit its container for an image avatar | string |    fill / contain / cover / none / scale-down    |   cover   |\n\n### Events\n\n| Event Name | Description         | Parameters  |\n| ------ | ------------------ | -------- |\n| error  | handler when img load error, return false to prevent default fallback behavior |(e: Event)  |\n\n### Slot\n\n| Slot Name | Description | \n| default  | customize avatar content |\n"
  },
  {
    "path": "examples/docs/en-US/backtop.md",
    "content": "## Backtop\n\nA button to back to top\n\n### Basic usage\n\nScroll down to see the bottom-right button.\n:::demo\n\n```html\n<template>\n  Scroll down to see the bottom-right button.\n  <el-backtop target=\".page-component__scroll .el-scrollbar__wrap\"></el-backtop>\n</template>\n```\n\n:::\n\n### Customizations\n\nDisplay area is 40px \\* 40px.\n:::demo\n\n```html\n<template>\n  Scroll down to see the bottom-right button.\n  <el-backtop target=\".page-component__scroll .el-scrollbar__wrap\" :bottom=\"100\">\n    <div\n      style=\"{\n        height: 100%;\n        width: 100%;\n        background-color: #f2f5f6;\n        box-shadow: 0 0 6px rgba(0,0,0, .12);\n        text-align: center;\n        line-height: 40px;\n        color: #1989fa;\n      }\"\n    >\n      UP\n    </div>\n  </el-backtop>\n</template>\n```\n\n:::\n\n### Attributes\n\n| Attribute         | Description                                                         | Type            | Accepted Values | Default |\n| ----------------- | ------------------------------------------------------------------- | --------------- | --------------- | ------- |\n| target            | the target to trigger scroll                                        | string          |                 |         |\n| visibility-height | the button will not show until the scroll height reaches this value | number |                 | 200     |\n| right             | right distance                                                      | number |                 | 40      |\n| bottom            | bottom distance                                                     | number |                 | 40      |\n\n### Events\n\n| Event Name | Description         | Parameters  |\n| ---------- | ------------------- | ----------- |\n| click      | triggers when click | click event |\n"
  },
  {
    "path": "examples/docs/en-US/badge.md",
    "content": "## Badge\n\nA number or status mark on buttons and icons.\n\n### Basic usage\n\nDisplays the amount of new messages.\n\n:::demo The amount is defined with `value` which accepts `Number` or `String`.\n\n```html\n<el-badge :value=\"12\" class=\"item\">\n  <el-button size=\"small\">comments</el-button>\n</el-badge>\n<el-badge :value=\"3\" class=\"item\">\n  <el-button size=\"small\">replies</el-button>\n</el-badge>\n<el-badge :value=\"1\" class=\"item\" type=\"primary\">\n  <el-button size=\"small\">comments</el-button>\n</el-badge>\n<el-badge :value=\"2\" class=\"item\" type=\"warning\">\n  <el-button size=\"small\">replies</el-button>\n</el-badge>\n\n<el-dropdown trigger=\"click\">\n  <span class=\"el-dropdown-link\">\n    Click Me<i class=\"el-icon-caret-bottom el-icon--right\"></i>\n  </span>\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item class=\"clearfix\">\n      comments\n      <el-badge class=\"mark\" :value=\"12\" />\n    </el-dropdown-item>\n    <el-dropdown-item class=\"clearfix\">\n      replies\n      <el-badge class=\"mark\" :value=\"3\" />\n    </el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n```\n:::\n\n### Max value\n\nYou can customize the max value.\n\n:::demo The max value is defined by property `max` which is a `Number`. Note that it only works when `value` is also a `Number`.\n\n```html\n<el-badge :value=\"200\" :max=\"99\" class=\"item\">\n  <el-button size=\"small\">comments</el-button>\n</el-badge>\n<el-badge :value=\"100\" :max=\"10\" class=\"item\">\n  <el-button size=\"small\">replies</el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n```\n:::\n\n### Customizations\n\nDisplays text content other than numbers.\n\n:::demo When `value` is a `String`, it can display customized text.\n\n```html\n<el-badge value=\"new\" class=\"item\">\n  <el-button size=\"small\">comments</el-button>\n</el-badge>\n<el-badge value=\"hot\" class=\"item\">\n  <el-button size=\"small\">replies</el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n```\n:::\n\n### Little red dot\n\nUse a red dot to mark content that needs to be noticed.\n\n:::demo Use the attribute `is-dot`. It is a `Boolean`.\n\n```html\n<el-badge is-dot class=\"item\">query</el-badge>\n<el-badge is-dot class=\"item\">\n  <el-button class=\"share-button\" icon=\"el-icon-share\" type=\"primary\"></el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n```\n:::\n\n### Attributes\n| Attribute     | Description     | Type            | Accepted Values       | Default |\n|-------------  |---------------- |---------------- |---------------------- |-------- |\n| value         | display value   | string, number  |          —            |    —    |\n| max           |  maximum value, shows '{max}+' when exceeded. Only works if `value` is a `Number`   | number  |         —              |     —    |\n| is-dot        | if a little dot is displayed | boolean   |    —           |  false  |\n| hidden        | hidden badge    | boolean         |          —            |  false  |\n| type          | button type     | string          | primary / success / warning / danger / info |   —  |\n"
  },
  {
    "path": "examples/docs/en-US/border.md",
    "content": "<script>\n  import bus from '../../bus';\n  import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';\n  const varMap = {\n    '$--box-shadow-light': 'boxShadowLight',\n    '$--box-shadow-base': 'boxShadowBase',\n    '$--border-radius-base': 'borderRadiusBase',\n    '$--border-radius-small': 'borderRadiusSmall'\n  };\n  const original = {\n    boxShadowLight: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',\n    boxShadowBase: '0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)',\n    borderRadiusBase: '4px',\n    borderRadiusSmall: '2px'\n  }\n  export default {\n    created() {\n      bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);\n    },\n    mounted() {\n      this.setGlobal();\n    },\n    methods: {\n      setGlobal() {\n        if (window.userThemeConfig) {\n          this.global = window.userThemeConfig.global;\n        }\n      }\n    },\n    data() {\n      return {\n        global: {},\n        boxShadowLight: '',\n        boxShadowBase: '',\n        borderRadiusBase: '',\n        borderRadiusSmall: ''\n      }\n    },\n    watch: {\n      global: {\n        immediate: true,\n        handler(value) {\n          Object.keys(varMap).forEach((c) => {\n            if (value[c]) {\n              this[varMap[c]] = value[c]\n            } else {\n              this[varMap[c]] = original[varMap[c]]\n            }\n          });\n        }\n      }\n    }\n  }\n</script>\n\n## Border\n\nWe standardize the borders that can be used in buttons, cards, pop-ups and other components.\n\n### Border\n\nThere are few border styles to choose.\n\n<table class=\"demo-border\">\n  <tbody>\n    <tr>\n      <td class=\"text\">Name</td>\n      <td class=\"text\">Thickness</td>\n      <td class=\"line\">Demo</td>\n    </tr>\n    <tr>\n      <td class=\"text\">Solid</td>\n      <td class=\"text\">1px</td>\n      <td class=\"line\">\n        <div></div>\n      </td>\n    </tr>\n    <tr>\n      <td class=\"text\">Dashed</td>\n      <td class=\"text\">2px</td>\n      <td class=\"line\">\n        <div class=\"dashed\"></div>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n### Radius\n\nThere are few radius styles to choose.\n\n<el-row :gutter=\"12\" class=\"demo-radius\">\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"title\">No Radius</div>\n    <div class=\"value\">border-radius: 0px</div>\n    <div class=\"radius\"></div>\n  </el-col>\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"title\">Small Radius</div>\n    <div class=\"value\">border-radius: {{borderRadiusSmall}}</div>\n    <div \n      class=\"radius\" \n      :style=\"{ borderRadius: borderRadiusSmall }\"\n    ></div>\n  </el-col>\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"title\">Large Radius</div>\n    <div class=\"value\">border-radius: {{borderRadiusBase}}</div>\n    <div \n      class=\"radius\"\n      :style=\"{ borderRadius: borderRadiusBase }\"\n    ></div>\n  </el-col>\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"title\">Round Radius</div>\n    <div class=\"value\">border-radius: 30px</div>\n    <div class=\"radius radius-30\"></div>\n  </el-col>\n</el-row>\n\n### Shadow\n\nThere are few shadow styles to choose.\n\n<div \nclass=\"demo-shadow\"\n:style=\"{ boxShadow: boxShadowBase }\"\n></div>\n<span class=\"demo-shadow-text\">Basic Shadow box-shadow: {{boxShadowBase}}</span>\n\n<div \nclass=\"demo-shadow\"\n:style=\"{ boxShadow: boxShadowLight }\"\n></div>\n<span class=\"demo-shadow-text\">Light Shadow box-shadow: {{boxShadowLight}}</span>\n"
  },
  {
    "path": "examples/docs/en-US/breadcrumb.md",
    "content": "## Breadcrumb\n\nDisplays the location of the current page, making it easier to browser back.\n\n### Basic usage\n\n\n:::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 '/'.\n\n```html\n<el-breadcrumb separator=\"/\">\n  <el-breadcrumb-item :to=\"{ path: '/' }\">homepage</el-breadcrumb-item>\n  <el-breadcrumb-item><a href=\"/\">promotion management</a></el-breadcrumb-item>\n  <el-breadcrumb-item>promotion list</el-breadcrumb-item>\n  <el-breadcrumb-item>promotion detail</el-breadcrumb-item>\n</el-breadcrumb>\n```\n:::\n\n### Icon separator\n\n:::demo Set `separator-class` to use `iconfont` as the separator，it will cover `separator`\n\n```html\n<el-breadcrumb separator-class=\"el-icon-arrow-right\">\n  <el-breadcrumb-item :to=\"{ path: '/' }\">homepage</el-breadcrumb-item>\n  <el-breadcrumb-item>promotion management</el-breadcrumb-item>\n  <el-breadcrumb-item>promotion list</el-breadcrumb-item>\n  <el-breadcrumb-item>promotion detail</el-breadcrumb-item>\n</el-breadcrumb>\n```\n:::\n\n### Breadcrumb Attributes\n| Attribute      | Description          | Type      | Accepted Values            | Default|\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| separator | separator character | string | — | / |\n| separator-class | class name of icon separator | string | — | - |\n\n### Breadcrumb Item Attributes\n| Attribute      | Description          | Type      | Accepted Values            | Default|\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| to | target route of the link, same as `to` of `vue-router` | string/object | — | — |\n| replace | if `true`, the navigation will not leave a history record | boolean | — | false |\n\n\n\n\n\n"
  },
  {
    "path": "examples/docs/en-US/button.md",
    "content": "## Button\n\nCommonly used button.\n\n### Basic usage\n\n:::demo Use `type`, `plain`, `round` and `circle` to define Button's style.\n\n```html\n<el-row>\n  <el-button>Default</el-button>\n  <el-button type=\"primary\">Primary</el-button>\n  <el-button type=\"success\">Success</el-button>\n  <el-button type=\"info\">Info</el-button>\n  <el-button type=\"warning\">Warning</el-button>\n  <el-button type=\"danger\">Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain>Plain</el-button>\n  <el-button type=\"primary\" plain>Primary</el-button>\n  <el-button type=\"success\" plain>Success</el-button>\n  <el-button type=\"info\" plain>Info</el-button>\n  <el-button type=\"warning\" plain>Warning</el-button>\n  <el-button type=\"danger\" plain>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button round>Round</el-button>\n  <el-button type=\"primary\" round>Primary</el-button>\n  <el-button type=\"success\" round>Success</el-button>\n  <el-button type=\"info\" round>Info</el-button>\n  <el-button type=\"warning\" round>Warning</el-button>\n  <el-button type=\"danger\" round>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button icon=\"el-icon-search\" circle></el-button>\n  <el-button type=\"primary\" icon=\"el-icon-edit\" circle></el-button>\n  <el-button type=\"success\" icon=\"el-icon-check\" circle></el-button>\n  <el-button type=\"info\" icon=\"el-icon-message\" circle></el-button>\n  <el-button type=\"warning\" icon=\"el-icon-star-off\" circle></el-button>\n  <el-button type=\"danger\" icon=\"el-icon-delete\" circle></el-button>\n</el-row>\n```\n:::\n\n### Disabled Button\n\nThe `disabled` attribute determines if the button is disabled.\n\n:::demo Use `disabled` attribute to determine whether a button is disabled. It accepts a `Boolean` value.\n\n```html\n<el-row>\n  <el-button disabled>Default</el-button>\n  <el-button type=\"primary\" disabled>Primary</el-button>\n  <el-button type=\"success\" disabled>Success</el-button>\n  <el-button type=\"info\" disabled>Info</el-button>\n  <el-button type=\"warning\" disabled>Warning</el-button>\n  <el-button type=\"danger\" disabled>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain disabled>Plain</el-button>\n  <el-button type=\"primary\" plain disabled>Primary</el-button>\n  <el-button type=\"success\" plain disabled>Success</el-button>\n  <el-button type=\"info\" plain disabled>Info</el-button>\n  <el-button type=\"warning\" plain disabled>Warning</el-button>\n  <el-button type=\"danger\" plain disabled>Danger</el-button>\n</el-row>\n```\n:::\n\n### Text Button\n\nButtons without border and background.\n\n:::demo\n```html\n<el-button type=\"text\">Text Button</el-button>\n<el-button type=\"text\" disabled>Text Button</el-button>\n```\n:::\n\n### Icon Button\n\nUse icons to add more meaning to Button. You can use icon alone to save some space, or use it with text.\n\n:::demo Use the `icon` attribute to add icon. You can find the icon list in Element icon component. Adding icons to the right side of the text is achievable with an `<i>` tag. Custom icons can be used as well.\n\n```html\n<el-button type=\"primary\" icon=\"el-icon-edit\"></el-button>\n<el-button type=\"primary\" icon=\"el-icon-share\"></el-button>\n<el-button type=\"primary\" icon=\"el-icon-delete\"></el-button>\n<el-button type=\"primary\" icon=\"el-icon-search\">Search</el-button>\n<el-button type=\"primary\">Upload<i class=\"el-icon-upload el-icon-right\"></i></el-button>\n```\n:::\n\n### Button Group\n\nDisplayed as a button group, can be used to group a series of similar operations.\n\n:::demo Use tag `<el-button-group>` to group your buttons.\n\n```html\n<el-button-group>\n  <el-button type=\"primary\" icon=\"el-icon-arrow-left\">Previous Page</el-button>\n  <el-button type=\"primary\">Next Page<i class=\"el-icon-arrow-right el-icon-right\"></i></el-button>\n</el-button-group>\n<el-button-group>\n  <el-button type=\"primary\" icon=\"el-icon-edit\"></el-button>\n  <el-button type=\"primary\" icon=\"el-icon-share\"></el-button>\n  <el-button type=\"primary\" icon=\"el-icon-delete\"></el-button>\n</el-button-group>\n```\n:::\n\n### Loading Button\n\nClick the button to load data, then the button displays a loading state.\n\n:::demo Set `loading` attribute to `true` to display loading state.\n\n```html\n<el-button type=\"primary\" :loading=\"true\">Loading</el-button>\n```\n:::\n\n### Sizes\n\nBesides default size, Button component provides three additional sizes for you to choose among different scenarios.\n\n:::demo Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.\n\n```html\n<el-row>\n  <el-button>Default</el-button>\n  <el-button size=\"medium\">Medium</el-button>\n  <el-button size=\"small\">Small</el-button>\n  <el-button size=\"mini\">Mini</el-button>\n</el-row>\n<el-row>\n  <el-button round>Default</el-button>\n  <el-button size=\"medium\" round>Medium</el-button>\n  <el-button size=\"small\" round>Small</el-button>\n  <el-button size=\"mini\" round>Mini</el-button>\n</el-row>\n```\n:::\n\n### Attributes\n| Attribute      | Description    | Type      | Accepted values       | Default   |\n|---------- |-------- |---------- |-------------  |-------- |\n| size     | button size   | string  |   medium / small / mini            |    —     |\n| type     | button type   | string    |   primary / success / warning / danger / info / text |     —    |\n| plain     | determine whether it's a plain button   | boolean    | — | false   |\n| round     | determine whether it's a round button   | boolean    | — | false   |\n| circle     | determine whether it's a circle button   | boolean    | — | false   |\n| loading   | determine whether it's loading   | boolean    | — | false   |\n| disabled  | disable the button    | boolean   | —   | false   |\n| icon  | icon class name | string   |  —  |  —  |\n| autofocus  | same as native button's `autofocus` | boolean   |  —  |  false  |\n| native-type | same as native button's `type` | string | button / submit / reset | button |"
  },
  {
    "path": "examples/docs/en-US/calendar.md",
    "content": "## Calendar\n\nDisplay date.\n\n### Basic\n\n:::demo Set `value` to specify the currently displayed month. If `value` is not specified, current month is displayed. `value` supports two-way binding.\n```html\n<el-calendar v-model=\"value\">\n</el-calendar>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: new Date()\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Custom Content\n\n:::demo Customize what is displayed in the calendar cell by setting `scoped-slot` named `dateCell`. 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.\n```html\n<el-calendar>\n  <!-- Use 2.5 slot syntax. If you use Vue 2.6, please use new slot syntax-->\n  <template\n    slot=\"dateCell\"\n    slot-scope=\"{date, data}\">\n    <p :class=\"data.isSelected ? 'is-selected' : ''\">\n      {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}\n    </p>\n  </template>\n</el-calendar>\n<style>\n  .is-selected {\n    color: #1989FA;\n  }\n</style>\n```\n:::\n\n### Range\n\n:::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.\n```html\n<el-calendar :range=\"['2019-03-04', '2019-03-24']\">\n</el-calendar>\n```\n:::\n\n### Attributes\n| Attribute       | Description        | Type      | Accepted Values       | Default  |\n|-----------------|------------------- |---------- |---------------------- |--------- |\n| value / v-model | binding value      | Date/string/number | —            | —        |\n| 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. | Array  | —  | —  |\n| first-day-of-week | first day of week| Number    | 1 to 7                |  1       |\n\n### dateCell Scoped Slot Parameters\n| Attribute       | Description   | Type      | Accepted Values       | Default  |\n|-----------------|-------------- |---------- |---------------------- |--------- |\n| date            | date the cell represents  | Date      | —                     | —        |\n| data            | { type, isSelected, day}. The `type` property indicates which month the date belongs, optional values are `prev-month`, `current-month`, `next-month`. The `isSelected` property indicates whether the date is selected. The `day` property is the formatted date in the format yyyy-MM-dd    | Object      | —           | —      |\n"
  },
  {
    "path": "examples/docs/en-US/card.md",
    "content": "## Card\nIntegrate information in a card container.\n\n### Basic usage\n\nCard includes title, content and operations.\n\n:::demo Card is made up of `header` and `body`. `header` is optional, and its content distribution depends on a named slot.\n```html\n<el-card class=\"box-card\">\n  <div slot=\"header\" class=\"clearfix\">\n    <span>Card name</span>\n    <el-button style=\"float: right; padding: 3px 0\" type=\"text\">Operation button</el-button>\n  </div>\n  <div v-for=\"o in 4\" :key=\"o\" class=\"text item\">\n    {{'List item ' + o }}\n  </div>\n</el-card>\n\n<style>\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    margin-bottom: 18px;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n    display: table;\n    content: \"\";\n  }\n  .clearfix:after {\n    clear: both\n  }\n\n  .box-card {\n    width: 480px;\n  }\n</style>\n```\n:::\n\n### Simple card\n\nThe header part can be omitted.\n\n:::demo\n```html\n<el-card class=\"box-card\">\n  <div v-for=\"o in 4\" :key=\"o\" class=\"text item\">\n    {{'List item ' + o }}\n  </div>\n</el-card>\n\n<style>\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    padding: 18px 0;\n  }\n\n  .box-card {\n    width: 480px;\n  }\n</style>\n```\n:::\n\n### With images\n\nDisplay richer content by adding some configs.\n\n:::demo The `body-style` attribute defines CSS style of custom `body`. This example also uses `el-col` for layout.\n```html\n<el-row>\n  <el-col :span=\"8\" v-for=\"(o, index) in 2\" :key=\"o\" :offset=\"index > 0 ? 2 : 0\">\n    <el-card :body-style=\"{ padding: '0px' }\">\n      <img src=\"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png\" class=\"image\">\n      <div style=\"padding: 14px;\">\n        <span>Yummy hamburger</span>\n        <div class=\"bottom clearfix\">\n          <time class=\"time\">{{ currentDate }}</time>\n          <el-button type=\"text\" class=\"button\">Operating</el-button>\n        </div>\n      </div>\n    </el-card>\n  </el-col>\n</el-row>\n\n<style>\n  .time {\n    font-size: 13px;\n    color: #999;\n  }\n  \n  .bottom {\n    margin-top: 13px;\n    line-height: 12px;\n  }\n\n  .button {\n    padding: 0;\n    float: right;\n  }\n\n  .image {\n    width: 100%;\n    display: block;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n      display: table;\n      content: \"\";\n  }\n  \n  .clearfix:after {\n      clear: both\n  }\n</style>\n\n<script>\nexport default {\n  data() {\n    return {\n      currentDate: new Date()\n    };\n  }\n}\n</script>\n```\n:::\n\n### Shadow\n\nYou can define when to show the card shadows\n\n:::demo The `shadow` attribute determines when the card shadows are displayed. It can be `always`, `hover` or `never`.\n```html\n<el-row :gutter=\"12\">\n  <el-col :span=\"8\">\n    <el-card shadow=\"always\">\n      Always\n    </el-card>\n  </el-col>\n  <el-col :span=\"8\">\n    <el-card shadow=\"hover\">\n      Hover\n    </el-card>\n  </el-col>\n  <el-col :span=\"8\">\n    <el-card shadow=\"never\">\n      Never\n    </el-card>\n  </el-col>\n</el-row>\n```\n:::\n\n### Attributes\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------- |---------- |-------------  |-------- |\n| header | title of the card. Also accepts a DOM passed by `slot#header` | string| — | — |\n| body-style | CSS style of body | object| — | { padding: '20px' } |\n| shadow | when to show card shadows | string | always / hover / never | always |\n"
  },
  {
    "path": "examples/docs/en-US/carousel.md",
    "content": "## Carousel\n\nLoop a series of images or texts in a limited space\n\n### Basic usage\n\n:::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.\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">Switch when indicator is hovered (default)</span>\n    <el-carousel height=\"150px\">\n      <el-carousel-item v-for=\"item in 4\" :key=\"item\">\n        <h3 class=\"small\">{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Switch when indicator is clicked</span>\n    <el-carousel trigger=\"click\" height=\"150px\">\n      <el-carousel-item v-for=\"item in 4\" :key=\"item\">\n        <h3 class=\"small\">{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 150px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n```\n:::\n\n### Indicators\n\nIndicators can be displayed outside the carousel\n\n:::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.\n```html\n<template>\n  <el-carousel indicator-position=\"outside\">\n    <el-carousel-item v-for=\"item in 4\" :key=\"item\">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 18px;\n    opacity: 0.75;\n    line-height: 300px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n```\n:::\n\n### Arrows\n\nYou can define when arrows are displayed\n\n:::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.\n```html\n<template>\n  <el-carousel :interval=\"5000\" arrow=\"always\">\n    <el-carousel-item v-for=\"item in 4\" :key=\"item\">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 18px;\n    opacity: 0.75;\n    line-height: 300px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n```\n:::\n\n### Card mode\n\nWhen a page is wide enough but has limited height, you can activate card mode for carousels\n\n:::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.\n```html\n<template>\n  <el-carousel :interval=\"4000\" type=\"card\" height=\"200px\">\n    <el-carousel-item v-for=\"item in 6\" :key=\"item\">\n      <h3 class=\"medium\">{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 200px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n```\n:::\n\nBy default, `direction` is `horizontal`. Let carousel be displayed in the vertical direction by setting `direction` to `vertical`.\n\n:::demo\n```html\n<template>\n  <el-carousel height=\"200px\" direction=\"vertical\" :autoplay=\"false\">\n    <el-carousel-item v-for=\"item in 4\" :key=\"item\">\n      <h3 class=\"medium\">{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 200px;\n    margin: 0;\n  }\n  \n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n  \n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n```\n:::\n\n### Carousel Attributes\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| height | height of the carousel | string | — | — |\n| initial-index | index of the initially active slide (starting from 0) | number | — | 0 |\n| trigger | how indicators are triggered | string | hover/click | hover |\n| autoplay | whether automatically loop the slides | boolean | — | true |\n| interval | interval of the auto loop, in milliseconds | number | — | 3000 |\n| indicator-position | position of the indicators | string | outside/none | — |\n| arrow | when arrows are shown | string | always/hover/never | hover |\n| type | type of the Carousel | string | card | — |\n| loop | display the items in loop | boolean | - | true |\n| direction | display direction | string | horizontal/vertical | horizontal |\n\n### Carousel Events\n| Event Name | Description | Parameters |\n|---------|---------|---------|\n| change | triggers when the active slide switches | index of the new active slide, index of the old active slide |\n\n### Carousel Methods\n| Method | Description | Parameters |\n|---------- |-------------- | -- |\n| setActiveItem | manually switch slide | index of the slide to be switched to, starting from 0; or the `name` of corresponding `el-carousel-item` |\n| prev | switch to the previous slide | — |\n| next | switch to the next slide | — |\n\n### Carousel-Item Attributes\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| name | name of the item, can be used in `setActiveItem` | string | — | — |\n| label | text content for the corresponding indicator | string | — | — |\n"
  },
  {
    "path": "examples/docs/en-US/cascader.md",
    "content": "## Cascader\n\nIf the options have a clear hierarchical structure, Cascader can be used to view and select them.\n\n### Basic usage\n\nThere are two ways to expand child option items.\n\n:::demo Assigning the `options` attribute to an array of options renders a Cascader. The `props.expandTrigger` attribute defines how child options are expanded.\n```html\n<div class=\"block\">\n  <span class=\"demonstration\">Child options expand when clicked (default)</span>\n  <el-cascader\n    v-model=\"value\"\n    :options=\"options\"\n    @change=\"handleChange\"></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Child options expand when hovered</span>\n  <el-cascader\n    v-model=\"value\"\n    :options=\"options\"\n    :props=\"{ expandTrigger: 'hover' }\"\n    @change=\"handleChange\"></el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: [],\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Disabled option\n\nDisable an option by setting a `disabled` field in the option object.\n\n:::demo In this example, the first item in `options` array has a `disabled: true` field, so it is disabled. By default, Cascader checks the `disabled` field in each option object; if you are using another field name to indicate whether an option is disabled, you can assign it in the `props.disabled` attribute (see the API table below for details). And of course, field name `value`, `label` and `children` can also be customized in the same way.\n```html\n<el-cascader :options=\"options\"></el-cascader>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          disabled: true,\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Clearable\n\nSet `clearable` attribute for `el-cascader` and a clear icon will appear when selected and hovered\n\n:::demo\n```html\n<el-cascader :options=\"options\" clearable></el-cascader>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Display only the last level\n\nThe input can display only the last level instead of all levels.\n\n:::demo The `show-all-levels` attribute defines if all levels are displayed. If it is `false`, only the last level is displayed.\n```html\n<el-cascader :options=\"options\" :show-all-levels=\"false\"></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Multiple Selection\n\nSet `props.multiple = true` to use multiple selection.\n\n:::demo When using multiple selection, all selected tags will display by default, You can set `collapse-tags = true` to fold selected tags.\n```html\n<div class=\"block\">\n  <span class=\"demonstration\">Display all tags (default)</span>\n  <el-cascader\n    :options=\"options\"\n    :props=\"props\"\n    clearable></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Collapse tags</span>\n  <el-cascader\n    :options=\"options\"\n    :props=\"props\"\n    collapse-tags\n    clearable></el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        props: { multiple: true },\n        options: [{\n          value: 1,\n          label: 'Asia',\n          children: [{\n            value: 2,\n            label: 'China',\n            children: [\n              { value: 3, label: 'Beijing' },\n              { value: 4, label: 'Shanghai' },\n              { value: 5, label: 'Hangzhou' }\n            ]\n          }, {\n            value: 6,\n            label: 'Japan',\n            children: [\n              { value: 7, label: 'Tokyo' },\n              { value: 8, label: 'Osaka' },\n              { value: 9, label: 'Kyoto' }\n            ]\n          }, {\n            value: 10,\n            label: 'Korea',\n            children: [\n              { value: 11, label: 'Seoul' },\n              { value: 12, label: 'Busan' },\n              { value: 13, label: 'Taegu' }\n            ]\n          }]\n        }, {\n          value: 14,\n          label: 'Europe',\n          children: [{\n            value: 15,\n            label: 'France',\n            children: [\n              { value: 16, label: 'Paris' },\n              { value: 17, label: 'Marseille' },\n              { value: 18, label: 'Lyon' }\n            ]\n          }, {\n            value: 19,\n            label: 'UK',\n            children: [\n              { value: 20, label: 'London' },\n              { value: 21, label: 'Birmingham' },\n              { value: 22, label: 'Manchester' }\n            ]\n          }]\n        }, {\n          value: 23,\n          label: 'North America',\n          children: [{\n            value: 24,\n            label: 'US',\n            children: [\n              { value: 25, label: 'New York' },\n              { value: 26, label: 'Los Angeles' },\n              { value: 27, label: 'Washington' }\n            ]\n          }, {\n            value: 28,\n            label: 'Canada',\n            children: [\n              { value: 29, label: 'Toronto' },\n              { value: 30, label: 'Montreal' },\n              { value: 31, label: 'Ottawa' }\n            ]\n          }]\n        }]\n      };\n    }\n  };\n</script>\n```\n:::\n\n\n### Select any level of options\n\nIn single selection, only the leaf nodes can be checked, and in multiple selection, check parent nodes will lead to leaf nodes be checked eventually. When enable this feature, it can make parent and child nodes unlinked and you can select any level of options.\n\n:::demo Set `props.checkStrictly = true` to make checked state of a node not affects its parent nodes and child nodes, and then you can select any level of options.\n```html\n<div class=\"block\">\n  <span class=\"demonstration\">Select any level of options (Single selection)</span>\n  <el-cascader\n    :options=\"options\"\n    :props=\"{ checkStrictly: true }\"\n    clearable></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Select any level of options (Multiple selection)</span>\n  <el-cascader\n    :options=\"options\"\n    :props=\"{ multiple: true, checkStrictly: true }\"\n    clearable></el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Dynamic loading\n\nDynamic load its child nodes when checked a node.\n\n:::demo Set `lazy = true` to use dynamic loading, and you have to specify how to load the data source by `lazyload`. There are two parameters of `lazyload`,the first parameter `node` is the node currently clicked, and the `resolve` is a callback that indicate loading is finished which must invoke. To display the status of node more accurately, you can add a `leaf` field (can be modified by `props.leaf`) to indicate whether it is a leaf node. Otherwise, it will be inferred by if has any child nodes.\n```html\n<el-cascader :props=\"props\"></el-cascader>\n\n<script>\n  let id = 0;\n\n  export default {\n    data() {\n      return {\n        props: {\n          lazy: true,\n          lazyLoad (node, resolve) {\n            const { level } = node;\n            setTimeout(() => {\n              const nodes = Array.from({ length: level + 1 })\n                .map(item => ({\n                  value: ++id,\n                  label: `Option - ${id}`,\n                  leaf: level >= 2\n                }));\n              // Invoke `resolve` callback to return the child nodes data and indicate the loading is finished.\n              resolve(nodes);\n            }, 1000);\n          }\n        }\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Filterable\n\nSearch and select options with a keyword.\n\n:::demo Adding `filterable` to `el-cascader` enables filtering. Cascader will match nodes whose label or parent's label (according to `show-all-levels`) includes input keyword. Of course, you can customize search logic by `filter-method` which accepts a function, the first parameter is `node`, the second is `keyword`, and need return a boolean value indicating whether it hits.\n```html\n<div class=\"block\">\n  <span class=\"demonstration\">Filterable (Single selection)</span>\n  <el-cascader\n    placeholder=\"Try searchingL Guide\"\n    :options=\"options\"\n    filterable></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Filterable (Multiple selection)</span>\n  <el-cascader\n    placeholder=\"Try searchingL Guide\"\n    :options=\"options\"\n    :props=\"{ multiple: true }\"\n    filterable></el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Custom option content\n\nYou can customize the content of cascader node.\n\n:::demo You can customize the content of cascader node by `scoped slot`. You'll have access to `node` and `data` in the scope,  standing for the Node object and node data of the current node respectively。\n```html\n<el-cascader :options=\"options\">\n  <template slot-scope=\"{ node, data }\">\n    <span>{{ data.label }}</span>\n    <span v-if=\"!node.isLeaf\"> ({{ data.children.length }}) </span>\n  </template>\n</el-cascader>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Cascader panel\n\n`CascaderPanel` is the core component of `Cascader` which has various of features such as single selection, multiple selection, dynamic loading and so on.\n\n:::demo Just like `el-cascader`, you can set alternative options by `options`, and enable other features by `props`, see the API form below for details.\n```html\n<el-cascader-panel :options=\"options\"></el-cascader-panel>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Cascader Attributes\n| Attribute | Description | Type  | Accepted Values | Default |\n|---------- |-------- |---------- |-------------  |-------- |\n| value / v-model | binding value | - | — | — |\n| options | data of the options，the key of `value` and `label` can be customize by `Props`.| array | — | — |\n| props | configuration options, see the following table. | object | — | — |\n| size | size of input | string | medium / small / mini | — |\n| placeholder | placeholder of input | string | — | Select |\n| disabled | whether Cascader is disabled | boolean | — | false |\n| clearable | whether selected value can be cleared | boolean | — | false |\n| show-all-levels | whether to display all levels of the selected value in the input | boolean | — | true |\n| collapse-tags | whether to collapse tags in multiple selection mode | boolean | - | false |\n| separator | option label separator | string | — | ' / ' |\n| filterable | whether the options can be searched | boolean | — | — |\n| filter-method | customize search logic, the first parameter is `node`, the second is `keyword`, and need return a boolean value indicating whether it hits. | function(node, keyword) | - | - |\n| debounce | debounce delay when typing filter keyword, in milliseconds | number | — | 300 |\n| before-filter | hook function before filtering with the value to be filtered as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, filtering will be aborted | function(value) | — | — |\n| popper-class | custom class name for Cascader's dropdown   | string | —  | — |\n\n### Cascader Events\n| Event Name | Description | Parameters |\n|---------- |-------- |---------- |\n| change | triggers when the binding value changes | value |\n| expand-change | triggers when expand option changes | an array of the expanding node's parent nodes |\n| blur | triggers when Cascader blurs | (event: Event) |\n| focus | triggers when Cascader focuses | (event: Event) |\n| visible-change | triggers when the dropdown appears/disappears | true when it appears, and false otherwise |\n| remove-tag | triggers when remove tag in multiple selection mode | the value of the tag which is removed |\n\n### Cascader Methods\n| Method Name | Description | Parameters |\n| ---- | ---- | ---- |\n| getCheckedNodes | get an array of currently selected node | (leafOnly) whether only return the leaf checked nodes, default is `false` |\n\n### Cascader Slots\n| Slot Name | Description |\n|---------|-------------|\n| - | the custom content of cascader node, the parameter is { node, data }, which are current Node object and node data respectively. |\n| empty  | content when there is no matched options. |\n\n### CascaderPanel Attributes\n| Attribute | Description | Type  | Accepted Values | Default |\n|---------- |-------- |---------- |-------------  |-------- |\n| value / v-model | binding value | - | — | — |\n| options | data of the options，the key of `value` and `label` can be customize by `Props`.| array | — | — |\n| props | configuration options, see the following table. | object | — | — |\n\n### CascaderPanel Events\n| Event Name | Description | Parameters |\n|---------- |-------- |---------- |\n| change | triggers when the binding value changes | value |\n| expand-change | triggers when expand option changes | an array of the expanding node's parent nodes |\n\n### CascaderPanel Methods\n| Method Name | Description | Parameters |\n| ---- | ---- | ---- |\n| getCheckedNodes | get an array of currently selected node | (leafOnly) whether only return the leaf checked nodes, default is `false` |\n| clearCheckedNodes | clear checked nodes | - |\n\n### CascaderPanel Slots\n| Slot Name | Description |\n|---------|-------------|\n| - | the custom content of cascader node, the parameter is { node, data }, which are current Node object and node data respectively. |\n\n### Props\n| Attribute | Description | Type  | Accepted Values | Default |\n| -------- | ----------------- | ------ | ------ | ------ |\n| expandTrigger | trigger mode of expanding options | string | click / hover | 'click' |\n| multiple | whether multiple selection is enabled | boolean | - | false |\n| checkStrictly | whether checked state of a node not affects its parent and child nodes | boolean | - | false |\n| emitPath | when checked nodes change, whether to emit an array of node's path, if false, only emit the value of node. | boolean | - | true |\n| lazy | whether to dynamic load child nodes, use with `lazyload` attribute | boolean | - | false |\n| lazyLoad | method for loading child nodes data, only works when `lazy` is true | function(node, resolve) | - | - |\n| value    | specify which key of node object is used as the node's value | string | — | 'value' |\n| label    | specify which key of node object is used as the node's label | string | — | 'label' |\n| children | specify which key of node object is used as the node's children | string | — | 'children' |\n| disabled | specify which key of node object is used as the node's disabled | string | — | 'disabled' |\n| leaf     | specify which key of node object is used as the node's leaf field | string | — | 'leaf' |\n"
  },
  {
    "path": "examples/docs/en-US/checkbox.md",
    "content": "## Checkbox\n\nA group of options for multiple choices.\n\n### Basic usage\n\nCheckbox can be used alone to switch between two states.\n\n:::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.\n\n```html\n<template>\n  <!-- `checked` should be true or false -->\n  <el-checkbox v-model=\"checked\">Option</el-checkbox>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        checked: true\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Disabled State\n\nDisabled state for checkbox.\n\n:::demo Set the `disabled` attribute.\n\n```html\n<template>\n  <el-checkbox v-model=\"checked1\" disabled>Option</el-checkbox>\n  <el-checkbox v-model=\"checked2\" disabled>Option</el-checkbox>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        checked1: false,\n        checked2: true\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Checkbox group\n\nIt is used for multiple checkboxes which are bound in one group, and indicates whether one option is selected by checking if it is checked.\n\n:::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.\n\n```html\n<template>\n  <el-checkbox-group v-model=\"checkList\">\n    <el-checkbox label=\"Option A\"></el-checkbox>\n    <el-checkbox label=\"Option B\"></el-checkbox>\n    <el-checkbox label=\"Option C\"></el-checkbox>\n    <el-checkbox label=\"disabled\" disabled></el-checkbox>\n    <el-checkbox label=\"selected and disabled\" disabled></el-checkbox>\n  </el-checkbox-group>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        checkList: ['selected and disabled','Option A']\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Indeterminate\n\nThe `indeterminate` property can help you to achieve a 'check all' effect.\n\n:::demo\n\n```html\n<template>\n  <el-checkbox :indeterminate=\"isIndeterminate\" v-model=\"checkAll\" @change=\"handleCheckAllChange\">Check all</el-checkbox>\n  <div style=\"margin: 15px 0;\"></div>\n  <el-checkbox-group v-model=\"checkedCities\" @change=\"handleCheckedCitiesChange\">\n    <el-checkbox v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n<script>\n  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n  export default {\n    data() {\n      return {\n        checkAll: false,\n        checkedCities: ['Shanghai', 'Beijing'],\n        cities: cityOptions,\n        isIndeterminate: true\n      };\n    },\n    methods: {\n      handleCheckAllChange(val) {\n        this.checkedCities = val ? cityOptions : [];\n        this.isIndeterminate = false;\n      },\n      handleCheckedCitiesChange(value) {\n        let checkedCount = value.length;\n        this.checkAll = checkedCount === this.cities.length;\n        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Minimum / Maximum items checked\n\nThe `min` and `max` properties can help you to limit the number of checked items.\n\n:::demo\n\n```html\n<template>\n  <el-checkbox-group \n    v-model=\"checkedCities\"\n    :min=\"1\"\n    :max=\"2\">\n    <el-checkbox v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n<script>\n  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n  export default {\n    data() {\n      return {\n        checkedCities: ['Shanghai', 'Beijing'],\n        cities: cityOptions\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Button style\n\nCheckbox with button styles.\n\n:::demo You just need to change `el-checkbox` element into `el-checkbox-button` element. We also provide `size` attribute.\n```html\n<template>\n  <div>\n    <el-checkbox-group v-model=\"checkboxGroup1\">\n      <el-checkbox-button v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-checkbox-group v-model=\"checkboxGroup2\" size=\"medium\">\n      <el-checkbox-button v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-checkbox-group v-model=\"checkboxGroup3\" size=\"small\">\n      <el-checkbox-button v-for=\"city in cities\" :label=\"city\" :disabled=\"city === 'Beijing'\" :key=\"city\">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-checkbox-group v-model=\"checkboxGroup4\" size=\"mini\" disabled>\n      <el-checkbox-button v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n</template>\n<script>\n  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n\n  export default {\n    data () {\n      return {\n        checkboxGroup1: ['Shanghai'],\n        checkboxGroup2: ['Shanghai'],\n        checkboxGroup3: ['Shanghai'],\n        checkboxGroup4: ['Shanghai'],\n        cities: cityOptions\n      };\n    }\n  }\n</script>\n```\n:::\n\n### With borders\n\n:::demo The `border` attribute adds a border to Checkboxes.\n```html\n<template>\n  <div>\n    <el-checkbox v-model=\"checked1\" label=\"Option1\" border></el-checkbox>\n    <el-checkbox v-model=\"checked2\" label=\"Option2\" border></el-checkbox>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-checkbox v-model=\"checked3\" label=\"Option1\" border size=\"medium\"></el-checkbox>\n    <el-checkbox v-model=\"checked4\" label=\"Option2\" border size=\"medium\"></el-checkbox>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-checkbox-group v-model=\"checkboxGroup1\" size=\"small\">\n      <el-checkbox label=\"Option1\" border></el-checkbox>\n      <el-checkbox label=\"Option2\" border disabled></el-checkbox>\n    </el-checkbox-group>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-checkbox-group v-model=\"checkboxGroup2\" size=\"mini\" disabled>\n      <el-checkbox label=\"Option1\" border></el-checkbox>\n      <el-checkbox label=\"Option2\" border></el-checkbox>\n    </el-checkbox-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        checked1: true,\n        checked2: false,\n        checked3: false,\n        checked4: true,\n        checkboxGroup1: [],\n        checkboxGroup2: []\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Checkbox Attributes\n| Attribute      | Description         | Type    | Options                         | Default|\n|---------- |-------- |---------- |-------------  |-------- |\n| value / v-model | binding value | string / number / boolean | — | — |\n| label     | value of the Checkbox when used inside a `checkbox-group`   | string / number / boolean   |       —        |     —    |\n| true-label | value of the Checkbox if it's checked   | string / number    |       —        |     —    |\n| false-label | value of the Checkbox if it's not checked   | string / number    |      —         |     —    |\n| disabled  | whether the Checkbox is disabled   | boolean   |  — | false   |\n| border  | whether to add a border around Checkbox  | boolean   | — | false   |\n| size  | size of the Checkbox, only works when `border` is true  | string  | medium / small / mini | — |\n| name | native 'name' attribute | string    |      —         |     —    |\n| checked  | if the Checkbox is checked   | boolean   |  — | false   |\n| indeterminate  | same as `indeterminate` in native checkbox | boolean   |  — | false   |\n\n### Checkbox Events\n| Event Name | Description | Parameters |\n|---------- |-------- |---------- |\n| change  | triggers when the binding value changes | the updated value |\n\n### Checkbox-group Attributes\n| Attribute      | Description         | Type    | Options                         | Default|\n|---------- |-------- |---------- |-------------  |-------- |\n| value / v-model | binding value | array | — | — |\n|size | size of checkbox buttons or bordered checkboxes | string | medium / small / mini | — |\n| disabled  | whether the nesting checkboxes are disabled | boolean   | — | false   |\n| min     | minimum number of checkbox checked   | number    |       —        |     —    |\n| max     | maximum number of checkbox checked   | number    |       —        |     —    |\n|text-color | font color when button is active | string   | — | #ffffff   |\n|fill  | border and background color when button is active | string   | — | #409EFF   |\n\n### Checkbox-group Events\n| Event Name | Description | Parameters |\n|---------- |-------- |---------- |\n| change  | triggers when the binding value changes | the updated value |\n\n### Checkbox-button Attributes\n| Attribute      | Description         | Type    | Options                         | Default|\n|---------- |-------- |---------- |-------------  |-------- |\n| label     | value of the checkbox when used inside a `checkbox-group` | string / number / boolean  |       —        |     —    |\n| true-label | value of the checkbox if it's checked | string / number | — |     —    |\n| false-label | value of the checkbox if it's not checked | string / number    |      —         |     —    |\n| disabled  | whether the checkbox is disabled | boolean   |  — | false   |\n| name | native 'name' attribute | string    |      —         |     —    |\n| checked  | if the checkbox is checked | boolean   |  — | false   |\n"
  },
  {
    "path": "examples/docs/en-US/collapse.md",
    "content": "## Collapse\n\nUse Collapse to store contents.\n\n### Basic usage\n\nYou can expand multiple panels\n\n:::demo\n```html\n<el-collapse v-model=\"activeNames\" @change=\"handleChange\">\n  <el-collapse-item title=\"Consistency\" name=\"1\">\n    <div>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;</div>\n    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title=\"Feedback\" name=\"2\">\n    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n  </el-collapse-item>\n  <el-collapse-item title=\"Efficiency\" name=\"3\">\n    <div>Simplify the process: keep operating process simple and intuitive;</div>\n    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n  </el-collapse-item>\n  <el-collapse-item title=\"Controllability\" name=\"4\">\n    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n  </el-collapse-item>\n</el-collapse>\n<script>\n  export default {\n    data() {\n      return {\n        activeNames: ['1']\n      };\n    },\n    methods: {\n      handleChange(val) {\n        console.log(val);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Accordion\n\nIn accordion mode, only one panel can be expanded at once\n\n:::demo Activate accordion mode using the `accordion` attribute.\n```html\n<el-collapse v-model=\"activeName\" accordion>\n  <el-collapse-item title=\"Consistency\" name=\"1\">\n    <div>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;</div>\n    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title=\"Feedback\" name=\"2\">\n    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n  </el-collapse-item>\n  <el-collapse-item title=\"Efficiency\" name=\"3\">\n    <div>Simplify the process: keep operating process simple and intuitive;</div>\n    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n  </el-collapse-item>\n  <el-collapse-item title=\"Controllability\" name=\"4\">\n    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n  </el-collapse-item>\n</el-collapse>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: '1'\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Custom title\n\nBesides using the `title` attribute, you can customize panel title with named slots, which makes adding custom content, e.g. icons, possible.\n\n:::demo\n```html\n<el-collapse accordion>\n  <el-collapse-item name=\"1\">\n    <template slot=\"title\">\n      Consistency<i class=\"header-icon el-icon-info\"></i>\n    </template>\n    <div>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;</div>\n    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title=\"Feedback\" name=\"2\">\n    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n  </el-collapse-item>\n  <el-collapse-item title=\"Efficiency\" name=\"3\">\n    <div>Simplify the process: keep operating process simple and intuitive;</div>\n    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n  </el-collapse-item>\n  <el-collapse-item title=\"Controllability\" name=\"4\">\n    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n  </el-collapse-item>\n</el-collapse>\n```\n:::\n\n### Collapse Attributes\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| value / v-model | currently active panel | string (accordion mode) / array (non-accordion mode) | — | — |\n| accordion | whether to activate accordion mode | boolean | — | false |\n\n### Collapse Events\n| Event Name | Description | Parameters |\n|---------|---------|---------|\n| change | triggers when active panels change | (activeNames: array (non-accordion mode) / string (accordion mode)) |\n\n### Collapse Item Attributes\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| name      | unique identification of the panel | string/number | — | — |\n| title     | title of the panel                 | string        | — | — |\n| disabled  | disable the collapse item          | boolean       | — | — |"
  },
  {
    "path": "examples/docs/en-US/color-picker.md",
    "content": "## ColorPicker\n\nColorPicker is a color selector supporting multiple color formats.\n\n### Basic usage\n\n:::demo ColorPicker requires a string typed variable to be bound to v-model.\n```html\n<div class=\"block\">\n  <span class=\"demonstration\">With default value</span>\n  <el-color-picker v-model=\"color1\"></el-color-picker>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">With no default value</span>\n  <el-color-picker v-model=\"color2\"></el-color-picker>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        color1: '#409EFF',\n        color2: null\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Alpha\n\n:::demo ColorPicker supports alpha channel selecting. To activate alpha selecting, just add the `show-alpha` attribute.\n```html\n<el-color-picker v-model=\"color\" show-alpha></el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color: 'rgba(19, 206, 102, 0.8)'\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Predefined colors\n\n:::demo ColorPicker supports predefined color options\n```html\n<el-color-picker\n  v-model=\"color\"\n  show-alpha\n  :predefine=\"predefineColors\">\n</el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color: 'rgba(255, 69, 0, 0.68)',\n        predefineColors: [\n          '#ff4500',\n          '#ff8c00',\n          '#ffd700',\n          '#90ee90',\n          '#00ced1',\n          '#1e90ff',\n          '#c71585',\n          'rgba(255, 69, 0, 0.68)',\n          'rgb(255, 120, 0)',\n          'hsv(51, 100, 98)',\n          'hsva(120, 40, 94, 0.5)',\n          'hsl(181, 100%, 37%)',\n          'hsla(209, 100%, 56%, 0.73)',\n          '#c7158577'\n        ]\n      }\n    }\n  };\n</script>\n```\n:::\n\n\n### Sizes\n\n:::demo\n```html\n<el-color-picker v-model=\"color\"></el-color-picker>\n<el-color-picker v-model=\"color\" size=\"medium\"></el-color-picker>\n<el-color-picker v-model=\"color\" size=\"small\"></el-color-picker>\n<el-color-picker v-model=\"color\" size=\"mini\"></el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color: '#409EFF'\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Attributes\n| Attribute | Description | Type | Accepted Values | Default |\n|---------- |-------- |---------- |-------------  |-------- |\n| value / v-model | binding value | string | — | — |\n| disabled | whether to disable the ColorPicker | boolean | — | false |\n| size | size of ColorPicker | string | — | medium / small / mini |\n| show-alpha | whether to display the alpha slider | boolean | — | false |\n| color-format | color format of v-model | string | hsl / hsv / hex / rgb | hex (when show-alpha is false)/ rgb (when show-alpha is true) |\n| popper-class | custom class name for ColorPicker's dropdown | string | — | — |\n| predefine | predefined color options | array | — | — |\n\n### Events\n| Event Name | Description | Parameters |\n|---------|--------|---------|\n| change | triggers when input value changes | color value |\n| active-change | triggers when the current active color changes | active color value |"
  },
  {
    "path": "examples/docs/en-US/color.md",
    "content": "<script>\n  import bus from '../../bus';\n  import { tintColor } from '../../color.js';\n  import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';\n  const varMap = {\n    'primary': '$--color-primary',\n    'success': '$--color-success',\n    'warning': '$--color-warning',\n    'danger': '$--color-danger',\n    'info': '$--color-info',\n    'white': '$--color-white',\n    'black': '$--color-black',\n    'textPrimary': '$--color-text-primary',\n    'textRegular': '$--color-text-regular',\n    'textSecondary': '$--color-text-secondary',\n    'textPlaceholder': '$--color-text-placeholder',\n    'borderBase': '$--border-color-base',\n    'borderLight': '$--border-color-light',\n    'borderLighter': '$--border-color-lighter',\n    'borderExtraLight': '$--border-color-extra-light'\n  };\n  const original = {\n    primary: '#409EFF',\n    success: '#67C23A',\n    warning: '#E6A23C',\n    danger: '#F56C6C',\n    info: '#909399',\n    white: '#FFFFFF',\n    black: '#000000',\n    textPrimary: '#303133',\n    textRegular: '#606266',\n    textSecondary: '#909399',\n    textPlaceholder: '#C0C4CC',\n    borderBase: '#DCDFE6',\n    borderLight: '#E4E7ED',\n    borderLighter: '#EBEEF5',\n    borderExtraLight: '#F2F6FC'\n  }\n  export default {\n    created() {\n      bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);\n    },\n    mounted() {\n      this.setGlobal();\n    },\n    methods: {\n      tintColor(color, tint) {\n        return tintColor(color, tint);\n      },\n      setGlobal() {\n        if (window.userThemeConfig) {\n          this.global = window.userThemeConfig.global;\n        }\n      }\n    },\n    data() {\n      return {\n        global: {},\n        primary: '',\n        success: '',\n        warning: '',\n        danger: '',\n        info: '',\n        white: '',\n        black: '',\n        textPrimary: '',\n        textRegular: '',\n        textSecondary: '',\n        textPlaceholder: '',\n        borderBase: '',\n        borderLight: '',\n        borderLighter: '',\n        borderExtraLight: ''\n      }\n    },\n    watch: {\n      global: {\n        immediate: true,\n        handler(value) {\n          Object.keys(original).forEach((o) => {\n            if (value[varMap[o]]) {\n              this[o] = value[varMap[o]]\n            } else {\n              this[o] = original[o]\n            }\n          });\n        }\n      }\n    },\n  }\n</script>\n\n## Color\n\nElement uses a specific set of palettes to specify colors to provide a consistent look and feel for the products you build.\n\n### Main Color\n\nThe main color of Element is bright and friendly blue.\n\n<el-row :gutter=\"12\">\n  <el-col :span=\"10\" :xs=\"{span: 12}\">\n    <div \n      class=\"demo-color-box\"\n      :style=\"{ background: primary }\"\n    >\n      Brand Color<div class=\"value\">#409EFF</div>\n    <div \n      class=\"bg-color-sub\"\n      :style=\"{ background: tintColor(primary, 0.9) }\"\n    >\n    <div \n      class=\"bg-blue-sub-item\" \n      v-for=\"(item, key) in Array(8)\"\n      :key=\"key\"\n      :style=\"{ background: tintColor(primary, (key + 1) / 10) }\"\n        >\n    </div>\n    </div>\n    </div>\n  </el-col>\n</el-row>\n\n### Secondary Color\n\nBesides the main color, you need to use different scene colors in different scenarios (for example, dangerous color indicates dangerous operation)\n\n<el-row :gutter=\"12\">\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"demo-color-box\"\n    :style=\"{ background: success }\"\n    >Success<div class=\"value\">#67C23A</div>\n      <div \n        class=\"bg-color-sub\"\n      >\n        <div \n          class=\"bg-success-sub-item\" \n          v-for=\"(item, key) in Array(2)\"\n          :key=\"key\"\n          :style=\"{ background: tintColor(success, (key + 8) / 10) }\"\n            >\n        </div>\n      </div>\n    </div>\n  </el-col>\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"demo-color-box\"\n    :style=\"{ background: warning }\"\n    >Warning<div class=\"value\">#E6A23C</div>\n      <div \n          class=\"bg-color-sub\"\n        >\n        <div \n          class=\"bg-success-sub-item\" \n          v-for=\"(item, key) in Array(2)\"\n          :key=\"key\"\n          :style=\"{ background: tintColor(warning, (key + 8) / 10) }\"\n            >\n        </div>\n      </div>\n    </div>\n  </el-col>\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"demo-color-box\"\n    :style=\"{ background: danger }\"\n    >Danger<div class=\"value\">#F56C6C</div>\n      <div \n          class=\"bg-color-sub\"\n        >\n        <div \n          class=\"bg-success-sub-item\" \n          v-for=\"(item, key) in Array(2)\"\n          :key=\"key\"\n          :style=\"{ background: tintColor(danger, (key + 8) / 10) }\"\n            >\n        </div>\n      </div>\n    </div>\n  </el-col>\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"demo-color-box\"\n    :style=\"{ background: info }\"\n    >Info<div class=\"value\">#909399</div>\n      <div \n          class=\"bg-color-sub\"\n        >\n        <div \n          class=\"bg-success-sub-item\" \n          v-for=\"(item, key) in Array(2)\"\n          :key=\"key\"\n          :style=\"{ background: tintColor(info, (key + 8) / 10) }\"\n            >\n        </div>\n      </div>\n    </div>\n  </el-col>\n</el-row>\n\n### Neutral Color\n\nNeutral colors are for text, background and border colors. You can use different neutral colors to represent the hierarchical structure.\n\n<el-row :gutter=\"12\">\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"demo-color-box-group\">\n      <div class=\"demo-color-box demo-color-box-other\"\n      :style=\"{ background: textPrimary }\"\n      >Primary Text<div class=\"value\">{{textPrimary}}</div></div>\n      <div class=\"demo-color-box demo-color-box-other\"\n      :style=\"{ background: textRegular }\"\n      >\n      Regular Text<div class=\"value\">{{textRegular}}</div></div>\n      <div class=\"demo-color-box demo-color-box-other\"\n      :style=\"{ background: textSecondary }\"\n      >Secondary Text<div class=\"value\">{{textSecondary}}</div></div>\n      <div class=\"demo-color-box demo-color-box-other\"\n      :style=\"{ background: textPlaceholder }\"\n      >Placeholder Text<div class=\"value\">{{textPlaceholder}}</div></div>\n    </div>\n  </el-col>\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"demo-color-box-group\">\n      <div class=\"demo-color-box demo-color-box-other demo-color-box-lite\"\n      :style=\"{ background: borderBase }\"\n      >Base Border<div class=\"value\">{{borderBase}}</div></div>\n      <div class=\"demo-color-box demo-color-box-other demo-color-box-lite\"\n      :style=\"{ background: borderLight }\"\n      >Light Border<div class=\"value\">{{borderLight}}</div></div>\n      <div class=\"demo-color-box demo-color-box-other demo-color-box-lite\"\n      :style=\"{ background: borderLighter }\"\n      >Lighter Border<div class=\"value\">{{borderLighter}}</div></div>\n      <div class=\"demo-color-box demo-color-box-other demo-color-box-lite\"\n      :style=\"{ background: borderExtraLight }\"\n      >Extra Light Border<div class=\"value\">{{borderExtraLight}}</div></div>\n    </div>\n  </el-col>\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"demo-color-box-group\">\n      <div \n      class=\"demo-color-box demo-color-box-other\"\n      :style=\"{ background: black }\"\n      >Basic Black<div class=\"value\">{{black}}</div></div>\n      <div\n      class=\"demo-color-box demo-color-box-other\"\n      :style=\"{ background: white, color: '#303133', border: '1px solid #eee' }\"\n      >Basic White<div class=\"value\">{{white}}</div></div>\n      <div class=\"demo-color-box demo-color-box-other bg-transparent\">Transparent<div class=\"value\">Transparent</div>\n      </div>\n    </div>\n  </el-col>\n</el-row>\n"
  },
  {
    "path": "examples/docs/en-US/container.md",
    "content": "## Container\nContainer components for scaffolding basic structure of the page:\n\n`<el-container>`: wrapper container. When nested with a `<el-header>` or `<el-footer>`, all its child elements will be vertically arranged. Otherwise horizontally.\n\n`<el-header>`: container for headers.\n\n`<el-aside>`: container for side sections (usually a side nav).\n\n`<el-main>`: container for main sections.\n\n`<el-footer>`: container for footers.\n\n:::tip\nThese 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>`.\n:::\n\n### Common layouts\n\n:::demo\n```html\n<el-container>\n  <el-header>Header</el-header>\n  <el-main>Main</el-main>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-main>Main</el-main>\n  <el-footer>Footer</el-footer>\n</el-container>\n\n<el-container>\n  <el-aside width=\"200px\">Aside</el-aside>\n  <el-main>Main</el-main>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-container>\n    <el-aside width=\"200px\">Aside</el-aside>\n    <el-main>Main</el-main>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-container>\n    <el-aside width=\"200px\">Aside</el-aside>\n    <el-container>\n      <el-main>Main</el-main>\n      <el-footer>Footer</el-footer>\n    </el-container>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-aside width=\"200px\">Aside</el-aside>\n  <el-container>\n    <el-header>Header</el-header>\n    <el-main>Main</el-main>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-aside width=\"200px\">Aside</el-aside>\n  <el-container>\n    <el-header>Header</el-header>\n    <el-main>Main</el-main>\n    <el-footer>Footer</el-footer>\n  </el-container>\n</el-container>\n\n<style>\n  .el-header, .el-footer {\n    background-color: #B3C0D1;\n    color: #333;\n    text-align: center;\n    line-height: 60px;\n  }\n  \n  .el-aside {\n    background-color: #D3DCE6;\n    color: #333;\n    text-align: center;\n    line-height: 200px;\n  }\n  \n  .el-main {\n    background-color: #E9EEF3;\n    color: #333;\n    text-align: center;\n    line-height: 160px;\n  }\n  \n  body > .el-container {\n    margin-bottom: 40px;\n  }\n  \n  .el-container:nth-child(5) .el-aside,\n  .el-container:nth-child(6) .el-aside {\n    line-height: 260px;\n  }\n  \n  .el-container:nth-child(7) .el-aside {\n    line-height: 320px;\n  }\n</style>\n```\n:::\n\n### Example\n\n:::demo\n```html\n<el-container style=\"height: 500px; border: 1px solid #eee\">\n  <el-aside width=\"200px\" style=\"background-color: rgb(238, 241, 246)\">\n    <el-menu :default-openeds=\"['1', '3']\">\n      <el-submenu index=\"1\">\n        <template slot=\"title\"><i class=\"el-icon-message\"></i>Navigator One</template>\n        <el-menu-item-group>\n          <template slot=\"title\">Group 1</template>\n          <el-menu-item index=\"1-1\">Option 1</el-menu-item>\n          <el-menu-item index=\"1-2\">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title=\"Group 2\">\n          <el-menu-item index=\"1-3\">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index=\"1-4\">\n          <template slot=\"title\">Option4</template>\n          <el-menu-item index=\"1-4-1\">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-submenu index=\"2\">\n        <template slot=\"title\"><i class=\"el-icon-menu\"></i>Navigator Two</template>\n        <el-menu-item-group>\n          <template slot=\"title\">Group 1</template>\n          <el-menu-item index=\"2-1\">Option 1</el-menu-item>\n          <el-menu-item index=\"2-2\">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title=\"Group 2\">\n          <el-menu-item index=\"2-3\">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index=\"2-4\">\n          <template slot=\"title\">Option 4</template>\n          <el-menu-item index=\"2-4-1\">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-submenu index=\"3\">\n        <template slot=\"title\"><i class=\"el-icon-setting\"></i>Navigator Three</template>\n        <el-menu-item-group>\n          <template slot=\"title\">Group 1</template>\n          <el-menu-item index=\"3-1\">Option 1</el-menu-item>\n          <el-menu-item index=\"3-2\">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title=\"Group 2\">\n          <el-menu-item index=\"3-3\">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index=\"3-4\">\n          <template slot=\"title\">Option 4</template>\n          <el-menu-item index=\"3-4-1\">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n    </el-menu>\n  </el-aside>\n  \n  <el-container>\n    <el-header style=\"text-align: right; font-size: 12px\">\n      <el-dropdown>\n        <i class=\"el-icon-setting\" style=\"margin-right: 15px\"></i>\n        <el-dropdown-menu slot=\"dropdown\">\n          <el-dropdown-item>View</el-dropdown-item>\n          <el-dropdown-item>Add</el-dropdown-item>\n          <el-dropdown-item>Delete</el-dropdown-item>\n        </el-dropdown-menu>\n      </el-dropdown>\n      <span>Tom</span>\n    </el-header>\n    \n    <el-main>\n      <el-table :data=\"tableData\">\n        <el-table-column prop=\"date\" label=\"Date\" width=\"140\">\n        </el-table-column>\n        <el-table-column prop=\"name\" label=\"Name\" width=\"120\">\n        </el-table-column>\n        <el-table-column prop=\"address\" label=\"Address\">\n        </el-table-column>\n      </el-table>\n    </el-main>\n  </el-container>\n</el-container>\n\n<style>\n  .el-header {\n    background-color: #B3C0D1;\n    color: #333;\n    line-height: 60px;\n  }\n  \n  .el-aside {\n    color: #333;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      const item = {\n        date: '2016-05-02',\n        name: 'Tom',\n        address: 'No. 189, Grove St, Los Angeles'\n      };\n      return {\n        tableData: Array(20).fill(item)\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Container Attributes\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| direction | layout direction for child elements | string | horizontal / vertical | vertical when nested with `el-header` or `el-footer`; horizontal otherwise |\n\n### Header Attributes\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| height | height of the header | string | — | 60px |\n\n### Aside Attributes\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| width | width of the side section | string | — | 300px |\n\n### Footer Attributes\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| height | height of the footer | string | — | 60px |"
  },
  {
    "path": "examples/docs/en-US/custom-theme.md",
    "content": "## Custom theme\nElement 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.\n\n### Theme Roller\nUse [Online Theme Roller](./#/en-US/theme) to customize all Design Tokens of global variables and components，and preview the new theme in real-time.and it can generate a complete style package based on the new theme for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' part of this section).\n\nAlso, use [Theme Roller Chrome Extension](https://chrome.google.com/webstore/detail/element-theme-roller/lifkjlojflekabbmlddfccdkphlelmim)，to customize theme and preview in real-time on any website developed by Element.\n\n<img src=\"https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png\" style=\"width: 100%;margin: 30px auto 0;display: block;\">\n\n### Changing theme color\nIf you just want to change the theme color of Element, the [theme preview website](https://elementui.github.io/theme-chalk-preview/#/en-US) is recommended. The theme color of Element is bright and friendly blue. By changing it, you can make Element more visually connected to specific projects.\n\nThe above website enables you to preview theme of a new theme color in real-time, and it can generate a complete style package based on the new theme color for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' or 'Import component theme on demand' part of this section).\n\n### Update SCSS variables in your project\n`theme-chalk` is written in SCSS. If your project also uses SCSS, you can directly change Element style variables. Create a new style file, e.g. `element-variables.scss`:\n\n```html\n/* theme color */\n$--color-primary: teal;\n\n/* icon font path, required */\n$--font-path: '~element-ui/lib/theme-chalk/fonts';\n\n@import \"~element-ui/packages/theme-chalk/src/index\";\n```\n\nThen in the entry file of your project, import this style file instead of Element's built CSS:\n```JS\nimport Vue from 'vue'\nimport Element from 'element-ui'\nimport './element-variables.scss'\n\nVue.use(Element)\n```\n\n:::tip\nNote that it is required to override icon font path to the relative path of Element's font files.\n:::\n\n### CLI theme tool\nIf you project doesn't use SCSS, you can customize themes with our CLI theme tool:\n\n#### <strong>Install</strong>\nFirst install the theme generator globally or locally. Local install is recommended because in this way, when others clone your project, npm will automatically install it for them.\n```shell\nnpm i element-theme -g\n```\n\nThen install the chalk theme from npm or GitHub.\n```shell\n# from npm\nnpm i element-theme-chalk -D\n\n# from GitHub\nnpm i https://github.com/ElementUI/theme-chalk -D\n```\n\n#### <strong>Initialize variable file</strong>\nAfter successfully installing the above packages, a command named `et` is available in CLI (if the packages are installed locally, use `node_modules/.bin/et` instead). Run `-i` to initialize the variable file which outputs to `element-variables.scss` by default. And you can specify its output directory as you will.\n\n```shell\net -i [custom output file]\n\n> ✔ Generator variables file\n```\n\nIn `element-variables.scss` you can find all the variables we used to style Element and they are defined in SCSS format. Here's a snippet:\n```css\n$--color-primary: #409EFF !default;\n$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */\n$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */\n$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */\n$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */\n$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */\n$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */\n$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */\n$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */\n$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */\n\n$--color-success: #67c23a !default;\n$--color-warning: #e6a23c !default;\n$--color-danger: #f56c6c !default;\n$--color-info: #909399 !default;\n\n...\n```\n\n#### <strong>Modify variables</strong>\nJust edit `element-variables.scss`, e.g. changing the theme color to red:\n```CSS\n$--color-primary: red;\n```\n\n#### <strong>Build theme</strong>\nAfter saving the variable file, use `et` to build your theme. You can activate `watch` mode by adding a parameter `-w`. And if you customized the variable file's output, you need to add a parameter `-c` and variable file's name. By default the build theme file is placed inside `./theme`. You can specify its output directory with parameter `-o`. \n```shell\net\n\n> ✔ build theme font\n> ✔ build element theme\n```\n### Use custom theme\n#### <strong>Import custom theme</strong>\nImporting your own theme is just like importing the default theme, only this time you import the file built from \"Online Theme Roller\" or \"CLI tool\":\n\n```javascript\nimport '../theme/index.css'\nimport ElementUI from 'element-ui'\nimport Vue from 'vue'\n\nVue.use(ElementUI)\n```\n\n#### <strong>Import component theme on demand</strong>\nIf you are using `babel-plugin-component` for on-demand import, just modify `.babelrc` and specify `styleLibraryName` to the path where your custom theme is located relative to `.babelrc`. Note that `~` is required:\n```json\n{\n  \"plugins\": [\n    [\n      \"component\",\n      {\n        \"libraryName\": \"element-ui\",\n        \"styleLibraryName\": \"~theme\"\n      }\n    ]\n  ]\n}\n```\n\nIf you are unfamiliar with `babel-plugin-component`, please refer to <a href=\"./#/en-US/component/quickstart\">Quick Start</a>. For more details, check out the [project repository](https://github.com/ElementUI/element-theme) of `element-theme`."
  },
  {
    "path": "examples/docs/en-US/date-picker.md",
    "content": "\n## DatePicker\n\nUse Date Picker for date input.\n\n###  Enter Date\n\nBasic date picker measured by 'day'.\n\n:::demo The measurement is determined by the `type` attribute. You can enable quick options by creating a `picker-options` object with `shortcuts` property. The disabled date is set by `disabledDate`, which is a function.\n\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">Default</span>\n    <el-date-picker\n      v-model=\"value1\"\n      type=\"date\"\n      placeholder=\"Pick a day\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Picker with quick options</span>\n    <el-date-picker\n      v-model=\"value2\"\n      type=\"date\"\n      placeholder=\"Pick a day\"\n      :picker-options=\"pickerOptions\">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions: {\n          disabledDate(time) {\n            return time.getTime() > Date.now();\n          },\n          shortcuts: [{\n            text: 'Today',\n            onClick(picker) {\n              picker.$emit('pick', new Date());\n            }\n          }, {\n            text: 'Yesterday',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit('pick', date);\n            }\n          }, {\n            text: 'A week ago',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit('pick', date);\n            }\n          }]\n        },\n        value1: '',\n        value2: '',\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Other measurements\n\nYou can choose week, month, year or multiple dates by extending the standard date picker component.\n\n:::demo\n\n```html\n<div class=\"container\">\n  <div class=\"block\">\n    <span class=\"demonstration\">Week</span>\n    <el-date-picker\n      v-model=\"value1\"\n      type=\"week\"\n      format=\"Week WW\"\n      placeholder=\"Pick a week\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Month</span>\n    <el-date-picker\n      v-model=\"value2\"\n      type=\"month\"\n      placeholder=\"Pick a month\">\n    </el-date-picker>\n  </div>\n</div>\n<div class=\"container\">\n  <div class=\"block\">\n    <span class=\"demonstration\">Year</span>\n    <el-date-picker\n      v-model=\"value3\"\n      type=\"year\"\n      placeholder=\"Pick a year\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Dates</span>\n    <el-date-picker\n      type=\"dates\"\n      v-model=\"value4\"\n      placeholder=\"Pick one or more dates\">\n    </el-date-picker>\n  </div>\n</div>\n<div class=\"container\">\n  <div class=\"block\">\n    <span class=\"demonstration\">months</span>\n    <el-date-picker\n      type=\"months\"\n      v-model=\"value5\"\n      placeholder=\"Pick one or more months\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">years</span>\n    <el-date-picker\n      type=\"years\"\n      v-model=\"value6\"\n      placeholder=\"Pick one or more years\">\n    </el-date-picker>\n  </div>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: '',\n        value2: '',\n        value3: '',\n        value4: '',\n        value5: '',\n        value6: ''\n      };\n    }\n  };\n</script>\n```\n\n:::\n\n###  Date Range\n\nPicking a date range is supported.\n\n:::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.\n\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">Default</span>\n    <el-date-picker\n      v-model=\"value1\"\n      type=\"daterange\"\n      range-separator=\"To\"\n      start-placeholder=\"Start date\"\n      end-placeholder=\"End date\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">With quick options</span>\n    <el-date-picker\n      v-model=\"value2\"\n      type=\"daterange\"\n      align=\"right\"\n      unlink-panels\n      range-separator=\"To\"\n      start-placeholder=\"Start date\"\n      end-placeholder=\"End date\"\n      :picker-options=\"pickerOptions\">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions: {\n          shortcuts: [{\n            text: 'Last week',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit('pick', [start, end]);\n            }\n          }, {\n            text: 'Last month',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit('pick', [start, end]);\n            }\n          }, {\n            text: 'Last 3 months',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit('pick', [start, end]);\n            }\n          }]\n        },\n        value1: '',\n        value2: ''\n      };\n    }\n  };\n</script>\n```\n\n:::\n\n### Month Range\n\nPicking a month range is supported.\n\n:::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.\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">Default</span>\n    <el-date-picker\n      v-model=\"value1\"\n      type=\"monthrange\"\n      range-separator=\"To\"\n      start-placeholder=\"Start month\"\n      end-placeholder=\"End month\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">With quick options</span>\n    <el-date-picker\n      v-model=\"value2\"\n      type=\"monthrange\"\n      align=\"right\"\n      unlink-panels\n      range-separator=\"To\"\n      start-placeholder=\"Start month\"\n      end-placeholder=\"End month\"\n      :picker-options=\"pickerOptions\">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions: {\n          shortcuts: [{\n            text: 'This month',\n            onClick(picker) {\n              picker.$emit('pick', [new Date(), new Date()]);\n            }\n          }, {\n            text: 'This year',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date(new Date().getFullYear(), 0);\n              picker.$emit('pick', [start, end]);\n            }\n          }, {\n            text: 'Last 6 months',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setMonth(start.getMonth() - 6);\n              picker.$emit('pick', [start, end]);\n            }\n          }]\n        },\n        value1: '',\n        value2: ''\n      };\n    }\n  };\n</script>\n```\n:::\n\n###  Default Value\n\nIf 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()`.\n\nIf type is `daterange`, `default-value` sets the left side calendar.\n\n:::demo\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">date</span>\n    <el-date-picker\n      v-model=\"value1\"\n      type=\"date\"\n      placeholder=\"Pick a date\"\n      default-value=\"2010-10-01\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">daterange</span>\n    <el-date-picker\n      v-model=\"value2\"\n      type=\"daterange\"\n      align=\"right\"\n      start-placeholder=\"Start Date\"\n      end-placeholder=\"End Date\"\n      default-value=\"2010-10-01\">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: '',\n        value2: ''\n      };\n    }\n  };\n</script>\n```\n:::\n\n###  Date Formats\nUse `format` to control displayed text's format in the input box. Use `value-format` to control binding value's format.\n\nBy default, the component accepts and emits a `Date` object. Below are supported format strings, using UTC 2017-01-02 03:04:05 as an example:\n\n:::warning\nPay attention to capitalization\n:::\n\n| format | meaning | note | example |\n|------|------|------|------|------|\n| `yyyy` | year | | 2017 |\n| `M`  | month | no leading 0 | 1 |\n| `MM` | month | | 01 |\n| `MMM` | month | | Jan |\n| `MMMM` | month | | January |\n| `W`  | week | only for week picker's `format`; no leading 0 | 1 |\n| `WW` | week | only for week picker's `format`| 01 |\n| `d`  | day | no leading 0 | 2 |\n| `dd` | day | | 02 |\n| `H`  | hour | 24-hour clock; no leading 0 | 3 |\n| `HH` | hour | 24-hour clock | 03 |\n| `h`  | hour | 12-hour clock; must be used with `A` or `a`; no leading 0 | 3 |\n| `hh` | hour | 12-hour clock; must be used with `A` or `a` | 03 |\n| `m`  | minute | no leading 0 | 4 |\n| `mm` | minute | | 04 |\n| `s`  | second | no leading 0 | 5 |\n| `ss` | second | | 05 |\n| `A`  | AM/PM | only for `format`, uppercased | AM |\n| `a`  | am/pm | only for `format`, lowercased | am |\n| `timestamp` | JS timestamp | only for `value-format`; binding value will be a `number` | 1483326245000 |\n| `[MM]` | No escape characters | To escape characters, wrap them in square brackets (e.g. [A] [MM]) | MM |\n\n:::demo\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">Emits Date object</span>\n    <div class=\"demonstration\">Value: {{ value1 }}</div>\n    <el-date-picker\n      v-model=\"value1\"\n      type=\"date\"\n      placeholder=\"Pick a Date\"\n      format=\"yyyy/MM/dd\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Use value-format</span>\n    <div class=\"demonstration\">Value: {{ value2 }}</div>\n    <el-date-picker\n      v-model=\"value2\"\n      type=\"date\"\n      placeholder=\"Pick a Date\"\n      format=\"yyyy/MM/dd\"\n      value-format=\"yyyy-MM-dd\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Timestamp</span>\n    <div class=\"demonstration\">Value：{{ value3 }}</div>\n    <el-date-picker\n      v-model=\"value3\"\n      type=\"date\"\n      placeholder=\"Pick a Date\"\n      format=\"yyyy/MM/dd\"\n      value-format=\"timestamp\">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: '',\n        value2: '',\n        value3: ''\n      };\n    }\n  };\n</script>\n```\n:::\n\n###  Default time for start date and end date\n\nWhen picking a date range, you can assign the time part for start date and end date.\n\n:::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 strings with the format of `12:00:00`. The first string sets the time for the start date, and the second for the end date.\n```html\n<template>\n  <div class=\"block\">\n    <p>Component value：{{ value }}</p>\n    <el-date-picker\n      v-model=\"value\"\n      type=\"daterange\"\n      start-placeholder=\"Start date\"\n      end-placeholder=\"End date\"\n      :default-time=\"['00:00:00', '23:59:59']\">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: ''\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Attributes\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| value / v-model | binding value | date(DatePicker) / array(DateRangePicker) | — | — |\n| readonly | whether DatePicker is read only | boolean | — | false |\n| disabled | whether DatePicker is disabled | boolean | — | false |\n| size | size of Input | string | large/small/mini | — |\n| editable | whether the input is editable | boolean | — | true |\n| clearable | whether to show clear button | boolean | — | true |\n| placeholder | placeholder in non-range mode | string | — | — |\n| start-placeholder | placeholder for the start date in range mode | string | — | — |\n| end-placeholder | placeholder for the end date in range mode | string | — | — |\n| type | type of the picker | string | year/month/date/dates/months/years/datetime/ week/datetimerange/daterange/ monthrange | date |\n| format | format of the displayed value in the input box | string | see [date formats](#/en-US/component/date-picker#date-formats) | yyyy-MM-dd |\n| align | alignment | left/center/right | left |\n| popper-class | custom class name for DatePicker's dropdown | string | — | — |\n| picker-options | additional options, check the table below | object | — | {} |\n| range-separator | range separator | string | — | '-' |\n| default-value | optional, default date of the calendar | Date | anything accepted by `new Date()` | — |\n| default-time | optional, the time value to use when selecting date range | string[] | Array with length 2, each item is a string like `12:00:00`. The first item for the start date and then second item for the end date | — |\n| 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) | — |\n| name | same as `name` in native input | string | — | — |\n| unlink-panels | unlink two date-panels in range-picker | boolean | — | false |\n| prefix-icon | Custom prefix icon class | string | — | el-icon-date |\n| clear-icon | Custom clear icon class | string | — | el-icon-circle-close |\n| validate-event | whether to trigger form validation | boolean | - | true |\n| append-to-body | whether to append DatePicker itself to body | boolean   | — | true |\n\n### Picker Options\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| shortcuts | a { text, onClick } object array to set shortcut options, check the table below | object[] | — | — |\n| disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |\n| cellClassName | set custom className | Function(Date) | — | — |\n| firstDayOfWeek | first day of week | Number | 1 to 7 | 7 |\n| onPick | a callback that triggers when the selected date is changed. Only for `daterange` and `datetimerange`. | Function({ maxDate, minDate }) | - | - |\n\n### shortcuts\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| text | title of the shortcut | string | — | — |\n| onClick | callback function, triggers when the shortcut is clicked, with the `vm` as its parameter. You can change the picker value by emitting the `pick` event. Example: `vm.$emit('pick', new Date())`| function | — | — |\n\n\n### Events\n| Event Name | Description | Parameters |\n|---------|--------|---------|\n| change | triggers when user confirms the value | component's binding value |\n| blur | triggers when Input blurs | component instance |\n| focus | triggers when Input focuses | component instance |\n\n### Methods\n| Method | Description | Parameters |\n|------|--------|-------|\n| focus | focus the Input component | — |\n\n### Slots\n| Name    | Description |\n|---------|-------------|\n| range-separator  | custom range separator content |\n"
  },
  {
    "path": "examples/docs/en-US/datetime-picker.md",
    "content": "## DateTimePicker\n\nSelect date and time in one picker.\n\n:::tip\nDateTimePicker is derived from DatePicker and TimePicker. For a more detailed explanation on `pickerOptions` and other attributes, you can refer to DatePicker and TimePicker.\n:::\n\n###  Date and time\n\n:::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.\n\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">Default</span>\n    <el-date-picker\n      v-model=\"value1\"\n      type=\"datetime\"\n      placeholder=\"Select date and time\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">With shortcuts</span>\n    <el-date-picker\n      v-model=\"value2\"\n      type=\"datetime\"\n      placeholder=\"Select date and time\"\n      :picker-options=\"pickerOptions\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">With default time</span>\n    <el-date-picker\n      v-model=\"value3\"\n      type=\"datetime\"\n      placeholder=\"Select date and time\"\n      default-time=\"12:00:00\">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions: {\n          shortcuts: [{\n            text: 'Today',\n            onClick(picker) {\n              picker.$emit('pick', new Date());\n            }\n          }, {\n            text: 'Yesterday',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit('pick', date);\n            }\n          }, {\n            text: 'A week ago',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit('pick', date);\n            }\n          }]\n        },\n        value1: '',\n        value2: '',\n        value3: ''\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Date and time range\n\n:::demo You can select date and time range by setting `type` to `datetimerange`.\n\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">Default</span>\n    <el-date-picker\n      v-model=\"value1\"\n      type=\"datetimerange\"\n      range-separator=\"To\"\n      start-placeholder=\"Start date\"\n      end-placeholder=\"End date\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">With shortcuts</span>\n    <el-date-picker\n      v-model=\"value2\"\n      type=\"datetimerange\"\n      :picker-options=\"pickerOptions\"\n      range-separator=\"To\"\n      start-placeholder=\"Start date\"\n      end-placeholder=\"End date\"\n      align=\"right\">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions: {\n          shortcuts: [{\n            text: 'Last week',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit('pick', [start, end]);\n            }\n          }, {\n            text: 'Last month',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit('pick', [start, end]);\n            }\n          }, {\n            text: 'Last 3 months',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit('pick', [start, end]);\n            }\n          }]\n        },\n        value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],\n        value2: ''\n      };\n    }\n  };\n</script>\n```\n:::\n\n###  Default time value for start date and end date\n\n:::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 strings. The first item controls time value of the start date and the second item controls time value of the end date.\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">Start date time 12:00:00</span>\n    <el-date-picker\n      v-model=\"value1\"\n      type=\"datetimerange\"\n      start-placeholder=\"Start Date\"\n      end-placeholder=\"End Date\"\n      :default-time=\"['12:00:00']\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Start date time 12:00:00, end date time 08:00:00</span>\n    <el-date-picker\n      v-model=\"value2\"\n      type=\"datetimerange\"\n      align=\"right\"\n      start-placeholder=\"Start Date\"\n      end-placeholder=\"End Date\"\n      :default-time=\"['12:00:00', '08:00:00']\">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: '',\n        value2: ''\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Attributes\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| value / v-model | binding value | date(DateTimePicker) / array(DateTimeRangePicker) | — | — |\n| readonly | whether DatePicker is read only | boolean | — | false |\n| disabled | whether DatePicker is disabled | boolean | — | false |\n| editable | whether the input is editable | boolean | — | true |\n| clearable | whether to show clear button | boolean | — | true |\n|size | size of Input | string | large/small/mini | — |\n| placeholder | placeholder in non-range mode | string | — | — |\n| start-placeholder | placeholder for the start date in range mode | string | — | — |\n| end-placeholder | placeholder for the end date in range mode | string | — | — |\n| time-arrow-control | whether to pick time using arrow buttons | boolean | — | false |\n| type | type of the picker | string | year/month/date/datetime/ week/datetimerange/daterange | date |\n| 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 |\n| align | alignment | left/center/right | left |\n| popper-class | custom class name for DateTimePicker's dropdown | string | — | — |\n| picker-options | additional options, check the table below | object | — | {} |\n| range-separator | range separator | string | - | '-' |\n| default-value | optional, default date of the calendar | Date | anything accepted by `new Date()` | — |\n| default-time | the default time value after picking a date | non-range: string / range: string[] | non-range: a string like `12:00:00`, range: array of two strings, and the first item is for the start date and second for the end date. `00:00:00` will be used if not specified | — |\n| 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) | — |\n| name | same as `name` in native input | string | — | — |\n| unlink-panels | unlink two date-panels in range-picker | boolean | — | false |\n| prefix-icon | Custom prefix icon class | string | — | el-icon-date |\n| clear-icon | Custom clear icon class | string | — | el-icon-circle-close |\n\n### Picker Options\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| shortcuts | a { text, onClick } object array to set shortcut options, check the table below | object[] | — | — |\n| disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |\n| cellClassName | set custom className | Function(Date) | — | — |\n| firstDayOfWeek | first day of week | Number | 1 to 7 | 7 |\n\n### shortcuts\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| text | title of the shortcut | string | — | — |\n| onClick | callback function, triggers when the shortcut is clicked, with the `vm` as its parameter. You can change the picker value by emitting the `pick` event. Example: `vm.$emit('pick', new Date())`| function | — | — |\n\n### Events\n| Event Name | Description | Parameters |\n|---------|--------|---------|\n| change | triggers when user confirms the value | component's binding value |\n| blur | triggers when Input blurs | component instance |\n| focus | triggers when Input focuses | component instance |\n\n### Methods\n| Method | Description | Parameters |\n|------|--------|-------|\n| focus | focus the Input component | — |\n"
  },
  {
    "path": "examples/docs/en-US/descriptions.md",
    "content": "## Descriptions\n\nDisplay multiple fields in list form.\n\n### Basic usage\n\n:::demo\n\n```html\n<el-descriptions title=\"User Info\">\n    <el-descriptions-item label=\"Username\">kooriookami</el-descriptions-item>\n    <el-descriptions-item label=\"Telephone\">18100000000</el-descriptions-item>\n    <el-descriptions-item label=\"Place\">Suzhou</el-descriptions-item>\n    <el-descriptions-item label=\"Remarks\">\n      <el-tag size=\"small\">School</el-tag>\n    </el-descriptions-item>\n    <el-descriptions-item label=\"Address\">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>\n</el-descriptions>\n```\n:::\n\n### Sizes\n\n:::demo\n\n```html\n<template>\n  <el-radio-group v-model=\"size\">\n    <el-radio label=\"\">Default</el-radio>\n    <el-radio label=\"medium\">Medium</el-radio>\n    <el-radio label=\"small\">Small</el-radio>\n    <el-radio label=\"mini\">Mini</el-radio>\n  </el-radio-group>\n\n  <el-descriptions class=\"margin-top\" title=\"With border\" :column=\"3\" :size=\"size\" border>\n    <template slot=\"extra\">\n      <el-button type=\"primary\" size=\"small\">Operation</el-button>\n    </template>\n    <el-descriptions-item>\n      <template slot=\"label\">\n        <i class=\"el-icon-user\"></i>\n        Username\n      </template>\n      kooriookami\n    </el-descriptions-item>\n    <el-descriptions-item>\n      <template slot=\"label\">\n        <i class=\"el-icon-mobile-phone\"></i>\n        Telephone\n      </template>\n      18100000000\n    </el-descriptions-item>\n    <el-descriptions-item>\n      <template slot=\"label\">\n        <i class=\"el-icon-location-outline\"></i>\n        Place\n      </template>\n      Suzhou\n    </el-descriptions-item>\n    <el-descriptions-item>\n      <template slot=\"label\">\n        <i class=\"el-icon-tickets\"></i>\n        Remarks\n      </template>\n      <el-tag size=\"small\">School</el-tag>\n    </el-descriptions-item>\n    <el-descriptions-item>\n      <template slot=\"label\">\n        <i class=\"el-icon-office-building\"></i>\n        Address\n      </template>\n      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province\n    </el-descriptions-item>\n  </el-descriptions>\n\n  <el-descriptions class=\"margin-top\" title=\"Without border\" :column=\"3\" :size=\"size\">\n    <template slot=\"extra\">\n      <el-button type=\"primary\" size=\"small\">Operation</el-button>\n    </template>\n    <el-descriptions-item label=\"Username\">kooriookami</el-descriptions-item>\n    <el-descriptions-item label=\"Telephone\">18100000000</el-descriptions-item>\n    <el-descriptions-item label=\"Place\">Suzhou</el-descriptions-item>\n    <el-descriptions-item label=\"Remarks\">\n      <el-tag size=\"small\">School</el-tag>\n    </el-descriptions-item>\n    <el-descriptions-item label=\"Address\">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>\n  </el-descriptions>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        size: ''\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Vertical List\n\n:::demo\n\n```html\n<el-descriptions title=\"Vertical list with border\" direction=\"vertical\" :column=\"4\" border>\n  <el-descriptions-item label=\"Username\">kooriookami</el-descriptions-item>\n  <el-descriptions-item label=\"Telephone\">18100000000</el-descriptions-item>\n  <el-descriptions-item label=\"Place\" :span=\"2\">Suzhou</el-descriptions-item>\n  <el-descriptions-item label=\"Remarks\">\n    <el-tag size=\"small\">School</el-tag>\n  </el-descriptions-item>\n  <el-descriptions-item label=\"Address\">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>\n</el-descriptions>\n\n<el-descriptions class=\"margin-top\" title=\"Vertical list without border\" :column=\"4\" direction=\"vertical\">\n  <el-descriptions-item label=\"Username\">kooriookami</el-descriptions-item>\n  <el-descriptions-item label=\"Telephone\">18100000000</el-descriptions-item>\n  <el-descriptions-item label=\"Place\" :span=\"2\">Suzhou</el-descriptions-item>\n  <el-descriptions-item label=\"Remarks\">\n    <el-tag size=\"small\">School</el-tag>\n  </el-descriptions-item>\n  <el-descriptions-item label=\"Address\">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>\n</el-descriptions>\n```\n:::\n\n### Customized Style\n\n:::demo\n\n```html\n<el-descriptions title=\"Customized style list\" :column=\"3\" border>\n  <el-descriptions-item label=\"Username\" label-class-name=\"my-label\" content-class-name=\"my-content\">kooriookami</el-descriptions-item>\n  <el-descriptions-item label=\"Telephone\">18100000000</el-descriptions-item>\n  <el-descriptions-item label=\"Place\">Suzhou</el-descriptions-item>\n  <el-descriptions-item label=\"Remarks\">\n    <el-tag size=\"small\">School</el-tag>\n  </el-descriptions-item>\n  <el-descriptions-item label=\"Address\" :content-style=\"{'text-align': 'right'}\">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>\n</el-descriptions>\n<style>\n  .my-label {\n    background: #E1F3D8;\n  }\n\n  .my-content {\n    background: #FDE2E2;\n  }\n</style>\n```\n:::\n\n### Descriptions Attributes\n| Attribute     | Description       | Type       | Accepted Values        | Default   |\n|-------------  |---------------- |---------------- |---------------------- |-------- |\n| border        | with or without border      | boolean  |          —             |    false     |\n| column        | numbers of `Descriptions Item` in one line  | number | — |    3  |\n| direction     | direction of list  | string | vertical / horizontal |    horizontal  |\n| size          | size of list    | string  |    medium / small / mini  |  — |\n| title         | title text, display on the top left    | string  |    —  |  — |\n| extra         | extra text, display on the top right    | string  |    —  |  — |\n| colon | change default props colon value of Descriptions Item   | boolean |    —  |  true |\n| labelClassName          | custom label class name         | string  |          —             |    —     |\n| contentClassName          | custom content class name         | string  |          —             |    —     |\n| labelStyle          | custom label style | object |          —             |    —     |\n| contentStyle         | custom content style | object |          —             |    —     |\n\n### Descriptions Slots\n\n| Name | Description |\n|------|--------|\n| title | custom title, display on the top left  |\n| extra | custom extra area, display on the top right  |\n\n### Descriptions Item Attributes\n| Attribute       | Description        | Type       | Accepted Values       | Default   |\n|-------------  |---------------- |---------------- |---------------------- |-------- |\n| label          | label text         | string  |          —             |    —     |\n| span          | colspan of column       | number  |          —             |    1     |\n| labelClassName          | custom label class name         | string  |          —             |    —     |\n| contentClassName          | custom content class name         | string  |          —             |    —     |\n| labelStyle          | custom label style | object |          —             |    —     |\n| contentStyle         | custom content style | object |          —             |    —     |\n\n### Descriptions Item Slots\n\n| Name | Description |\n|------|--------|\n| label | custom label  |\n"
  },
  {
    "path": "examples/docs/en-US/dialog.md",
    "content": "## Dialog\n\nInforms users while preserving the current page state.\n\n### Basic usage\n\nDialog pops up a dialog box, and it's quite customizable.\n\n:::demo Set the `visible` 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.\n\n```html\n<el-button type=\"text\" @click=\"dialogVisible = true\">click to open the Dialog</el-button>\n\n<el-dialog\n  title=\"Tips\"\n  :visible.sync=\"dialogVisible\"\n  width=\"30%\"\n  :before-close=\"handleClose\">\n  <span>This is a message</span>\n  <span slot=\"footer\" class=\"dialog-footer\">\n    <el-button @click=\"dialogVisible = false\">Cancel</el-button>\n    <el-button type=\"primary\" @click=\"dialogVisible = false\">Confirm</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm('Are you sure to close this dialog?')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n</script>\n```\n:::\n\n:::tip\n`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.\n:::\n\n### Customizations\n\nThe content of Dialog can be anything, even a table or a form. This example shows how to use Element Table and Form with Dialog。\n\n:::demo\n\n```html\n<!-- Table -->\n<el-button type=\"text\" @click=\"dialogTableVisible = true\">open a Table nested Dialog</el-button>\n\n<el-dialog title=\"Shipping address\" :visible.sync=\"dialogTableVisible\">\n  <el-table :data=\"gridData\">\n    <el-table-column property=\"date\" label=\"Date\" width=\"150\"></el-table-column>\n    <el-table-column property=\"name\" label=\"Name\" width=\"200\"></el-table-column>\n    <el-table-column property=\"address\" label=\"Address\"></el-table-column>\n  </el-table>\n</el-dialog>\n\n<!-- Form -->\n<el-button type=\"text\" @click=\"dialogFormVisible = true\">open a Form nested Dialog</el-button>\n\n<el-dialog title=\"Shipping address\" :visible.sync=\"dialogFormVisible\">\n  <el-form :model=\"form\">\n    <el-form-item label=\"Promotion name\" :label-width=\"formLabelWidth\">\n      <el-input v-model=\"form.name\" autocomplete=\"off\"></el-input>\n    </el-form-item>\n    <el-form-item label=\"Zones\" :label-width=\"formLabelWidth\">\n      <el-select v-model=\"form.region\" placeholder=\"Please select a zone\">\n        <el-option label=\"Zone No.1\" value=\"shanghai\"></el-option>\n        <el-option label=\"Zone No.2\" value=\"beijing\"></el-option>\n      </el-select>\n    </el-form-item>\n  </el-form>\n  <span slot=\"footer\" class=\"dialog-footer\">\n    <el-button @click=\"dialogFormVisible = false\">Cancel</el-button>\n    <el-button type=\"primary\" @click=\"dialogFormVisible = false\">Confirm</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: '2016-05-02',\n          name: 'John Smith',\n          address: 'No.1518,  Jinshajiang Road, Putuo District'\n        }, {\n          date: '2016-05-04',\n          name: 'John Smith',\n          address: 'No.1518,  Jinshajiang Road, Putuo District'\n        }, {\n          date: '2016-05-01',\n          name: 'John Smith',\n          address: 'No.1518,  Jinshajiang Road, Putuo District'\n        }, {\n          date: '2016-05-03',\n          name: 'John Smith',\n          address: 'No.1518,  Jinshajiang Road, Putuo District'\n        }],\n        dialogTableVisible: false,\n        dialogFormVisible: false,\n        form: {\n          name: '',\n          region: '',\n          date1: '',\n          date2: '',\n          delivery: false,\n          type: [],\n          resource: '',\n          desc: ''\n        },\n        formLabelWidth: '120px'\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Nested Dialog\nIf a Dialog is nested in another Dialog, `append-to-body` is required.\n:::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.\n```html\n<template>\n  <el-button type=\"text\" @click=\"outerVisible = true\">open the outer Dialog</el-button>\n  \n  <el-dialog title=\"Outer Dialog\" :visible.sync=\"outerVisible\">\n    <el-dialog\n        width=\"30%\"\n        title=\"Inner Dialog\"\n        :visible.sync=\"innerVisible\"\n        append-to-body>\n    </el-dialog>\n    <div slot=\"footer\" class=\"dialog-footer\">\n      <el-button @click=\"outerVisible = false\">Cancel</el-button>\n      <el-button type=\"primary\" @click=\"innerVisible = true\">open the inner Dialog</el-button>\n    </div>\n  </el-dialog>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        outerVisible: false,\n        innerVisible: false\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Centered content\nDialog's content can be centered.\n\n:::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.\n\n```html\n<el-button type=\"text\" @click=\"centerDialogVisible = true\">Click to open the Dialog</el-button>\n\n<el-dialog\n  title=\"Warning\"\n  :visible.sync=\"centerDialogVisible\"\n  width=\"30%\"\n  center>\n  <span>It should be noted that the content will not be aligned in center by default</span>\n  <span slot=\"footer\" class=\"dialog-footer\">\n    <el-button @click=\"centerDialogVisible = false\">Cancel</el-button>\n    <el-button type=\"primary\" @click=\"centerDialogVisible = false\">Confirm</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        centerDialogVisible: false\n      };\n    }\n  };\n</script>\n```\n:::\n\n:::tip\nThe 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.\n:::\n\n:::tip\nIf the variable bound to `visible` is managed in Vuex store, the `.sync` can not work properly. In this case, please remove the `.sync` modifier, listen to `open` and `close` events of Dialog, and commit Vuex mutations to update the value of that variable in the event handlers.\n:::\n\n### Attributes\n\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| visible   | visibility of Dialog, supports the .sync modifier | boolean | — | false |\n| title     | title of Dialog. Can also be passed with a named slot (see the following table) | string    | — | — |\n| width     | width of Dialog | string    | — | 50% |\n| fullscreen     | whether the Dialog takes up full screen | boolean    | — | false |\n| top      | value for `margin-top` of Dialog CSS | string    | — | 15vh |\n| modal     | whether a mask is displayed | boolean   | — | true |\n| modal-append-to-body     | whether to append modal to body element. If false, the modal will be appended to Dialog's parent element | boolean   | — | true |\n| append-to-body     | whether to append Dialog itself to body. A nested Dialog should have this attribute set to `true` | boolean   | — | false |\n| lock-scroll     | whether scroll of body is disabled while Dialog is displayed | boolean   | — | true |\n| custom-class      | custom class names for Dialog | string    | — | — |\n| close-on-click-modal | whether the Dialog can be closed by clicking the mask | boolean    | — | true |\n| close-on-press-escape | whether the Dialog can be closed by pressing ESC | boolean    | — | true |\n| show-close | whether to show a close button | boolean    | — | true |\n| before-close | callback before Dialog closes, and it will prevent Dialog from closing | function(done)，done is used to close the Dialog | — | — |\n| center | whether to align the header and footer in center | boolean | — | false |\n| destroy-on-close | Destroy elements in Dialog when closed   | boolean | — | false |\n\n### Slot\n\n| Name | Description |\n|------|--------|\n| — | content of Dialog |\n| title | content of the Dialog title |\n| footer | content of the Dialog footer |\n\n### Events\n| Event Name | Description | Parameters |\n|---------- |-------- |---------- |\n| open | triggers when the Dialog opens | — |\n| opened | triggers when the Dialog opening animation ends | — |\n| close | triggers when the Dialog closes | — |\n| closed | triggers when the Dialog closing animation ends | — |\n"
  },
  {
    "path": "examples/docs/en-US/divider.md",
    "content": "## Divider\n\nThe dividing line that separates the content.\n\n### Basic usage\n\nDivide the text of different paragraphs.\n\n:::demo\n```html\n<template>\n  <div>\n    <span>I sit at my window this morning where the world like a passer-by stops for a moment, nods to me and goes.</span>\n    <el-divider></el-divider>\n    <span>There little thoughts are the rustle of leaves; they have their whisper of joy in my mind.</span>\n  </div>\n</template>\n```\n:::\n\n### Custom content\n\nYou can customize the content on the divider line.\n\n\n:::demo\n```html\n<template>\n  <div>\n    <span>What you are you do not see, what you see is your shadow. </span>\n    <el-divider content-position=\"left\">Rabindranath Tagore</el-divider>\n    <span>I cannot choose the best. The best chooses me.</span>\n    <el-divider><i class=\"el-icon-star-on\"></i></el-divider>\n    <span>My wishes are fools, they shout across thy song, my Master. Let me but listen.</span>\n    <el-divider content-position=\"right\">Rabindranath Tagore</el-divider>\n  </div>\n</template>\n```\n:::\n\n### Vertical divider\n\n:::demo\n```html\n<template>\n  <div>\n    <span>Rain</span>\n    <el-divider direction=\"vertical\"></el-divider>\n    <span>Home</span>\n    <el-divider direction=\"vertical\"></el-divider>\n    <span>Grass</span>\n  </div>\n</template>\n```\n:::\n\n### Divider Attributes\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|-------------  |---------------- |---------------- |---------------------- |-------- |\n| direction      | Set divider's direction  | string  |          horizontal / vertical           |    horizontal     |\n| content-position      | customize the content on the divider line | String  |  left / right / center  |  center |"
  },
  {
    "path": "examples/docs/en-US/drawer.md",
    "content": "## Drawer\n\nSometimes, `Dialog` does not always satisfy our requirements, let's say you have a massive form, or you need space to display something like `terms & conditions`, `Drawer` has almost identical API with `Dialog`, but it introduces different user experience.\n\n### Basic Usage\n\nCallout a temporary drawer, from multiple direction\n\n:::demo You must set `visible` for `Drawer` like `Dialog` does to control the visibility of `Drawer` itself, it's `boolean` type. `Drawer` has to parts: `title` & `body`, the `title` is a named slot, you can also set the title through attribute named `title`, default to an empty string, the `body` part is the main area of `Drawer`, which contains user defined content. When opening, `Drawer` expand itself from the **right corner to left** which size is **30%** of the browser window by default. You can change that default behavior by setting `direction` and `size` attribute. This show case also demonstrated how to use the `before-close` API, check the Attribute section for more detail\n\n```html\n<el-radio-group v-model=\"direction\">\n  <el-radio label=\"ltr\">left to right</el-radio>\n  <el-radio label=\"rtl\">right to left</el-radio>\n  <el-radio label=\"ttb\">top to bottom</el-radio>\n  <el-radio label=\"btt\">bottom to top</el-radio>\n</el-radio-group>\n\n<el-button @click=\"drawer = true\" type=\"primary\" style=\"margin-left: 16px;\">\n  open\n</el-button>\n\n<el-drawer\n  title=\"I am the title\"\n  :visible.sync=\"drawer\"\n  :direction=\"direction\"\n  :before-close=\"handleClose\">\n  <span>Hi, there!</span>\n</el-drawer>\n\n<script>\n  export default {\n    data() {\n      return {\n        drawer: false,\n        direction: 'rtl',\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm('Are you sure you want to close this?')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n</script>\n```\n:::\n\n### No Title\n\nWhen you no longer need a title, you can remove title from drawer.\n\n:::demo Set the `withHeader` attribute to **false**, you can remove the title from drawer, thus your drawer can have more space on screen. If you want to be accessible, make sure to set the `title` attribute.\n\n```html\n<el-button @click=\"drawer = true\" type=\"primary\" style=\"margin-left: 16px;\">\n  open\n</el-button>\n\n<el-drawer\n  title=\"I am the title\"\n  :visible.sync=\"drawer\"\n  :with-header=\"false\">\n  <span>Hi there!</span>\n</el-drawer>\n\n<script>\n  export default {\n    data() {\n      return {\n        drawer: false,\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Customization Content\n\nLike `Dialog`, `Drawer` can do many diverse interaction as you wanted.\n\n:::demo\n\n```html\n<el-button type=\"text\" @click=\"table = true\">Open Drawer with nested table</el-button>\n<el-button type=\"text\" @click=\"dialog = true\">Open Drawer with nested form</el-button>\n<el-drawer\n  title=\"I have a nested table inside!\"\n  :visible.sync=\"table\"\n  direction=\"rtl\"\n  size=\"50%\">\n   <el-table :data=\"gridData\">\n      <el-table-column property=\"date\" label=\"Date\" width=\"150\"></el-table-column>\n      <el-table-column property=\"name\" label=\"Name\" width=\"200\"></el-table-column>\n      <el-table-column property=\"address\" label=\"Address\"></el-table-column>\n    </el-table>\n</el-drawer>\n\n<el-drawer\n  title=\"I have a nested form inside!\"\n  :before-close=\"handleClose\"\n  :visible.sync=\"dialog\"\n  direction=\"ltr\"\n  custom-class=\"demo-drawer\"\n  ref=\"drawer\"\n  >\n  <div class=\"demo-drawer__content\">\n    <el-form :model=\"form\">\n      <el-form-item label=\"Name\" :label-width=\"formLabelWidth\">\n        <el-input v-model=\"form.name\" autocomplete=\"off\"></el-input>\n      </el-form-item>\n      <el-form-item label=\"Area\" :label-width=\"formLabelWidth\">\n        <el-select v-model=\"form.region\" placeholder=\"Please select activity area\">\n          <el-option label=\"Area1\" value=\"shanghai\"></el-option>\n          <el-option label=\"Area2\" value=\"beijing\"></el-option>\n        </el-select>\n      </el-form-item>\n    </el-form>\n    <div class=\"demo-drawer__footer\">\n      <el-button @click=\"cancelForm\">Cancel</el-button>\n      <el-button type=\"primary\" @click=\"$refs.drawer.closeDrawer()\" :loading=\"loading\">{{ loading ? 'Submitting ...' : 'Submit' }}</el-button>\n    </div>\n  </div>\n</el-drawer>\n\n<script>\nexport default {\n  data() {\n    return {\n      table: false,\n      dialog: false,\n      loading: false,\n      gridData: [{\n        date: '2016-05-02',\n        name: 'Peter Parker',\n        address: 'Queens, New York City'\n      }, {\n        date: '2016-05-04',\n        name: 'Peter Parker',\n        address: 'Queens, New York City'\n      }, {\n        date: '2016-05-01',\n        name: 'Peter Parker',\n        address: 'Queens, New York City'\n      }, {\n        date: '2016-05-03',\n        name: 'Peter Parker',\n        address: 'Queens, New York City'\n      }],\n      form: {\n        name: '',\n        region: '',\n        date1: '',\n        date2: '',\n        delivery: false,\n        type: [],\n        resource: '',\n        desc: ''\n      },\n      formLabelWidth: '80px',\n      timer: null,\n    };\n  },\n  methods: {\n    handleClose(done) {\n      if (this.loading) {\n        return;\n      }\n      this.$confirm('Do you want to submit?')\n        .then(_ => {\n          this.loading = true;\n          this.timer = setTimeout(() => {\n            done();\n            // animation takes time\n            setTimeout(() => {\n              this.loading = false;\n            }, 400);\n          }, 2000);\n        })\n        .catch(_ => {});\n    },\n    cancelForm() {\n      this.loading = false;\n      this.dialog = false;\n      clearTimeout(this.timer);\n    }\n  }\n}\n</script>\n```\n:::\n\n### Nested Drawer\n\nYou can also have multiple layer of `Drawer` just like `Dialog`.\n:::demo If you need multiple Drawer in different layer, you must set the `append-to-body` attribute to **true**\n\n```html\n\n<el-button @click=\"drawer = true\" type=\"primary\" style=\"margin-left: 16px;\">\n  open\n</el-button>\n\n<el-drawer\n  title=\"I'm outer Drawer\"\n  :visible.sync=\"drawer\"\n  size=\"50%\">\n  <div>\n   <el-button @click=\"innerDrawer = true\">Click me!</el-button>\n   <el-drawer\n     title=\"I'm inner Drawer\"\n     :append-to-body=\"true\"\n     :before-close=\"handleClose\"\n     :visible.sync=\"innerDrawer\">\n     <p>_(:зゝ∠)_</p>\n   </el-drawer>\n  </div>\n</el-drawer>\n\n<script>\n  export default {\n    data() {\n      return {\n        drawer: false,\n        innerDrawer: false,\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm('You still have unsaved data, proceed?')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n</script>\n\n```\n:::\n\n:::tip\n\nThe content inside Drawer should be lazy rendered, which means that the content inside Drawer will not impact the initial render performance, therefore any DOM operation should be performed through `ref` or after `open` event emitted.\n\n:::\n\n:::tip\n\nDrawer provides an API called `destroyOnClose`, which is a flag variable that indicates should destroy the children content inside Drawer after Drawer was closed. You can use this API when you need your `mounted` life cycle to be called every time the Drawer opens.\n\n:::\n\n:::tip\n\nIf the variable bound to `visible` is managed in Vuex store, the `.sync` can not work properly. In this case, please remove the `.sync` modifier, listen to `open` and `close` events of Dialog, and commit Vuex mutations to update the value of that variable in the event handlers.\n\n:::\n\n### Drawer Attributes\n\n| Parameter| Description | Type      | Acceptable Values                           | Defaults  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| append-to-body | Controls should Drawer be inserted to DocumentBody Element, nested Drawer must assign this param to **true**| boolean   | — | false |\n| before-close | If set, closing procedure will be halted | function(done), done is function type that accepts a boolean as parameter, calling done with true or without parameter will abort the close procedure | — | — |\n| close-on-press-escape | Indicates whether Drawer can be closed by pressing ESC | boolean | — | true |\n| custom-class | Extra class names for Drawer | string | — | — |\n| destroy-on-close | Indicates whether children should be destroyed after Drawer closed | boolean | - | false |\n| modal | Should show shadowing layer | boolean | — | true |\n| modal-append-to-body | Indicates should shadowing layer be insert into DocumentBody element | boolean   | — | true |\n| direction | Drawer's opening direction | Direction | rtl / ltr / ttb / btt | rtl |\n| show-close | Should show close button at the top right of Drawer | boolean | — | true |\n| size | Drawer's size, if Drawer is horizontal mode, it effects the width property, otherwise it effects the height property, when size is `number` type, it describes the size by unit of pixels; when size is `string` type, it should be used with `x%` notation, other wise it will be interpreted to pixel unit | number / string | - | '30%' |\n| title | Drawer's title, can also be set by named slot, detailed descriptions can be found in the slot form | string | — | — |\n| visible | Should Drawer be displayed, also support the `.sync` notation | boolean | — | false |\n| wrapperClosable | Indicates whether user can close Drawer by clicking the shadowing layer. | boolean | - | true |\n| withHeader | Flag that controls the header section's existance, default to true, when withHeader set to false, both `title attribute` and `title slot` won't work | boolean | - | true |\n\n### Drawer Slot\n\n| Name | Description |\n|------|--------|\n| — | Drawer's Content |\n| title | Drawer Title Section |\n\n### Drawer Methods\n\n| Name | Description |\n| ---- | ---  |\n| closeDrawer | In order to close Drawer, this method will call `before-close`. |\n\n### Drawer Events\n\n| Event Name | Description | Parameter |\n|---------- |-------- |---------- |\n| open  | Triggered before Drawer opening animation begins  | — |\n| opened  | Triggered after Drawer opening animation ended | — |\n| close  | Triggered before Drawer closing animation begins | — |\n| closed | Triggered after Drawer closing animation ended | — |\n"
  },
  {
    "path": "examples/docs/en-US/dropdown.md",
    "content": "## Dropdown\nToggleable menu for displaying lists of links and actions.\n\n### Basic usage\nHover on the dropdown menu to unfold it for more actions.\n\n:::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.\n\n```html\n<el-dropdown>\n  <span class=\"el-dropdown-link\">\n    Dropdown List<i class=\"el-icon-arrow-down el-icon--right\"></i>\n  </span>\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n```\n\n:::\n\n### Triggering element\n\nUse the button to trigger the dropdown list.\n\n:::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.\n```html\n<el-dropdown>\n  <el-button type=\"primary\">\n    Dropdown List<i class=\"el-icon-arrow-down el-icon--right\"></i>\n  </el-button>\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n    <el-dropdown-item>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n<el-dropdown split-button type=\"primary\" @click=\"handleClick\">\n  Dropdown List\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n    <el-dropdown-item>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown {\n    vertical-align: top;\n  }\n  .el-dropdown + .el-dropdown {\n    margin-left: 15px;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      handleClick() {\n        alert('button click');\n      }\n    }\n  }\n</script>\n```\n:::\n\n### How to trigger\n\nClick the triggering element or hover on it.\n\n:::demo Use the attribute `trigger`. By default, it is `hover`.\n\n```html\n<el-row class=\"block-col-2\">\n  <el-col :span=\"12\">\n    <span class=\"demonstration\">hover to trigger</span>\n    <el-dropdown>\n      <span class=\"el-dropdown-link\">\n        Dropdown List<i class=\"el-icon-arrow-down el-icon--right\"></i>\n      </span>\n      <el-dropdown-menu slot=\"dropdown\">\n        <el-dropdown-item icon=\"el-icon-plus\">Action 1</el-dropdown-item>\n        <el-dropdown-item icon=\"el-icon-circle-plus\">Action 2</el-dropdown-item>\n        <el-dropdown-item icon=\"el-icon-circle-plus-outline\">Action 3</el-dropdown-item>\n        <el-dropdown-item icon=\"el-icon-check\">Action 4</el-dropdown-item>\n        <el-dropdown-item icon=\"el-icon-circle-check\">Action 5</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n  <el-col :span=\"12\">\n    <span class=\"demonstration\">click to trigger</span>\n    <el-dropdown trigger=\"click\">\n      <span class=\"el-dropdown-link\">\n        Dropdown List<i class=\"el-icon-arrow-down el-icon--right\"></i>\n      </span>\n      <el-dropdown-menu slot=\"dropdown\">\n        <el-dropdown-item icon=\"el-icon-plus\">Action 1</el-dropdown-item>\n        <el-dropdown-item icon=\"el-icon-circle-plus\">Action 2</el-dropdown-item>\n        <el-dropdown-item icon=\"el-icon-circle-plus-outline\">Action 3</el-dropdown-item>\n        <el-dropdown-item icon=\"el-icon-check\">Action 4</el-dropdown-item>\n        <el-dropdown-item icon=\"el-icon-circle-check\">Action 5</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n</el-row>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n  .demonstration {\n    display: block;\n    color: #8492a6;\n    font-size: 14px;\n    margin-bottom: 20px;\n  }\n</style>\n```\n:::\n\n### Menu hiding behavior\n\nUse `hide-on-click` to define if menu closes on clicking.\n\n:::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.\n```html\n<el-dropdown :hide-on-click=\"false\">\n  <span class=\"el-dropdown-link\">\n    Dropdown List<i class=\"el-icon-arrow-down el-icon--right\"></i>\n  </span>\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n```\n:::\n\n### Command event\n\nClicking each dropdown item fires an event whose parameter is assigned by each item.\n\n:::demo\n```html\n<el-dropdown @command=\"handleCommand\">\n  <span class=\"el-dropdown-link\">\n    Dropdown List<i class=\"el-icon-arrow-down el-icon--right\"></i>\n  </span>\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item command=\"a\">Action 1</el-dropdown-item>\n    <el-dropdown-item command=\"b\">Action 2</el-dropdown-item>\n    <el-dropdown-item command=\"c\">Action 3</el-dropdown-item>\n    <el-dropdown-item command=\"d\" disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item command=\"e\" divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      handleCommand(command) {\n        this.$message('click on item ' + command);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Sizes\n\nBesides default size, Dropdown component provides three additional sizes for you to choose among different scenarios.\n\n:::demo Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.\n\n```html\n<el-dropdown split-button type=\"primary\">\n  Default\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size=\"medium\" split-button type=\"primary\">\n  Medium\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size=\"small\" split-button type=\"primary\">\n  Small\n  <el-dropdown-menu slot=\"dropdown\">\n   <el-dropdown-item>Action 1</el-dropdown-item>\n   <el-dropdown-item>Action 2</el-dropdown-item>\n   <el-dropdown-item>Action 3</el-dropdown-item>\n   <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size=\"mini\" split-button type=\"primary\">\n  Mini\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n```\n:::\n\n\n### Dropdown Attributes\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|-------------  |---------------- |---------------- |---------------------- |-------- |\n| type          | menu button type, refer to `Button` Component, only works when `split-button` is true  | string  |  —   |    —     |\n| size          | menu size, also works on the split button  | string  | medium / small / mini  |    —     |\n| split-button | whether a button group is displayed | boolean         |     —       | false   |\n| placement    | placement of pop menu | string | top/top-start/top-end/bottom/bottom-start/bottom-end  | bottom-end |\n| trigger       | how to trigger     | string  |    hover/click  |  hover |\n| hide-on-click | whether to hide menu after clicking menu-item     | boolean          | — | true |\n| show-timeout | Delay time before show a dropdown (only works when trigger is `hover`) | number | — | 250 |\n| hide-timeout | Delay time before hide a dropdown (only works when trigger is `hover`) | number | — | 150 |\n| tabindex     | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Dropdown | number | — | 0 |\n| disabled     | whether the Dropdown is disabled | boolean | — | false |\n\n### Dropdown Slots\n\n| Name | Description |\n|------|--------|\n| — | content of Dropdown. Notice: Must be a valid html dom element (ex. `<span>, <button> etc.`) or `el-component`, to attach the trigger listener  |\n| dropdown | content of the Dropdown Menu, usually a `<el-dropdown-menu>` element |\n\n### Dropdown Events\n| Event Name | Description | Parameters |\n|---------- |-------- |---------- |\n| click | if `split-button` is `true`, triggers when left button is clicked | — |\n| command | triggers when a dropdown item is clicked | the command dispatched from the dropdown item |\n| visible-change | triggers when the dropdown appears/disappears | true when it appears, and false otherwise |\n\n### Dropdown Menu Item Attributes\n| Attribute     | Description          | Type      | Accepted Values       | Default  |\n|-------------  |---------------- |---------------- |---------------------- |-------- |\n| command       | a command to be dispatched to Dropdown's `command` callback | string/number/object  |          —             |    —     |\n| disabled      | whether the item is disabled  | boolean  |          —             |    false     |\n| divided       | whether a divider is displayed  | boolean  |          —             |    false     |\n| icon          | icon class name | string   |  —  |  —  |\n"
  },
  {
    "path": "examples/docs/en-US/empty.md",
    "content": "## Empty\n\nPlaceholder hints for empty states.\n\n### Basic usage\n\n:::demo\n\n```html\n<el-empty description=\"description\"></el-empty>\n```\n:::\n\n### Custom image\n\nUse `image` prop to set image URL.\n\n:::demo\n\n```html\n<el-empty image=\"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png\"></el-empty>\n```\n:::\n\n### Image size\n\nUse `image-size` prop to control image size.\n\n:::demo\n\n```html\n<el-empty :image-size=\"200\"></el-empty>\n```\n:::\n\n### Bottom content\n\nUse the default slot to insert content at the bottom.\n\n:::demo\n```html\n<el-empty>\n  <el-button type=\"primary\">Button</el-button>\n</el-empty>\n```\n:::\n\n### Empty Attributes\n| Attribute       | Description      | Type         | Acceptable Value    | Default   |\n|-------------  |---------------- |---------------- |---------------------- |-------- |\n| image          | image URL       | string  |          —             |    —     |\n| image-size    | image size (width)  | number | — |    —  |\n| description  | description    | string  |    —  |  — |\n\n### Empty Slots\n\n| Name | Description |\n|------|--------|\n| default | Custom bottom content  |\n| image | Custom image     |\n| description | Custom description     |\n"
  },
  {
    "path": "examples/docs/en-US/form.md",
    "content": "## Form\n\nForm consists of `input`, `radio`, `select`, `checkbox` and so on. With form, you can collect, verify and submit data.\n\n### Basic form\n\nIt includes all kinds of input items, such as `input`, `select`, `radio` and `checkbox`.\n\n:::demo In each `form` component, you need a `form-item` field to be the container of your input item.\n\n```html\n<el-form ref=\"form\" :model=\"form\" label-width=\"120px\">\n  <el-form-item label=\"Activity name\">\n    <el-input v-model=\"form.name\"></el-input>\n  </el-form-item>\n  <el-form-item label=\"Activity zone\">\n    <el-select v-model=\"form.region\" placeholder=\"please select your zone\">\n      <el-option label=\"Zone one\" value=\"shanghai\"></el-option>\n      <el-option label=\"Zone two\" value=\"beijing\"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label=\"Activity time\">\n    <el-col :span=\"11\">\n      <el-date-picker type=\"date\" placeholder=\"Pick a date\" v-model=\"form.date1\" style=\"width: 100%;\"></el-date-picker>\n    </el-col>\n    <el-col class=\"line\" :span=\"2\">-</el-col>\n    <el-col :span=\"11\">\n      <el-time-picker placeholder=\"Pick a time\" v-model=\"form.date2\" style=\"width: 100%;\"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label=\"Instant delivery\">\n    <el-switch v-model=\"form.delivery\"></el-switch>\n  </el-form-item>\n  <el-form-item label=\"Activity type\">\n    <el-checkbox-group v-model=\"form.type\">\n      <el-checkbox label=\"Online activities\" name=\"type\"></el-checkbox>\n      <el-checkbox label=\"Promotion activities\" name=\"type\"></el-checkbox>\n      <el-checkbox label=\"Offline activities\" name=\"type\"></el-checkbox>\n      <el-checkbox label=\"Simple brand exposure\" name=\"type\"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label=\"Resources\">\n    <el-radio-group v-model=\"form.resource\">\n      <el-radio label=\"Sponsor\"></el-radio>\n      <el-radio label=\"Venue\"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label=\"Activity form\">\n    <el-input type=\"textarea\" v-model=\"form.desc\"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type=\"primary\" @click=\"onSubmit\">Create</el-button>\n    <el-button>Cancel</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        form: {\n          name: '',\n          region: '',\n          date1: '',\n          date2: '',\n          delivery: false,\n          type: [],\n          resource: '',\n          desc: ''\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log('submit!');\n      }\n    }\n  }\n</script>\n```\n:::\n\n:::tip\n[W3C](https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2) regulates that\n> <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>\n\nTo prevent this behavior, you can add `@submit.native.prevent` on `<el-form>`.\n  :::\n\n### Inline form\n\nWhen the vertical space is limited and the form is relatively simple, you can put it in one line.\n\n:::demo Set the `inline` attribute to `true` and the form will be inline.\n\n```html\n<el-form :inline=\"true\" :model=\"formInline\" class=\"demo-form-inline\">\n  <el-form-item label=\"Approved by\">\n    <el-input v-model=\"formInline.user\" placeholder=\"Approved by\"></el-input>\n  </el-form-item>\n  <el-form-item label=\"Activity zone\">\n    <el-select v-model=\"formInline.region\" placeholder=\"Activity zone\">\n      <el-option label=\"Zone one\" value=\"shanghai\"></el-option>\n      <el-option label=\"Zone two\" value=\"beijing\"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item>\n    <el-button type=\"primary\" @click=\"onSubmit\">Query</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        formInline: {\n          user: '',\n          region: ''\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log('submit!');\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Alignment\n\nDepending on your design, there are several different ways to align your label element.\n\n:::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.\n\n```html\n<el-radio-group v-model=\"labelPosition\" size=\"small\">\n  <el-radio-button label=\"left\">Left</el-radio-button>\n  <el-radio-button label=\"right\">Right</el-radio-button>\n  <el-radio-button label=\"top\">Top</el-radio-button>\n</el-radio-group>\n<div style=\"margin: 20px;\"></div>\n<el-form :label-position=\"labelPosition\" label-width=\"100px\" :model=\"formLabelAlign\">\n  <el-form-item label=\"Name\">\n    <el-input v-model=\"formLabelAlign.name\"></el-input>\n  </el-form-item>\n  <el-form-item label=\"Activity zone\">\n    <el-input v-model=\"formLabelAlign.region\"></el-input>\n  </el-form-item>\n  <el-form-item label=\"Activity form\">\n    <el-input v-model=\"formLabelAlign.type\"></el-input>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        labelPosition: 'right',\n        formLabelAlign: {\n          name: '',\n          region: '',\n          type: ''\n        }\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Validation\n\nForm component allows you to verify your data, helping you find and correct errors.\n\n:::demo Just add the `rules` attribute for `Form` component, pass validation rules, and set `prop` attribute for `Form-Item` as a specific key that needs to be validated. See more information at [async-validator](https://github.com/yiminghe/async-validator).\n\n```html\n<el-form :model=\"ruleForm\" :rules=\"rules\" ref=\"ruleForm\" label-width=\"120px\" class=\"demo-ruleForm\">\n  <el-form-item label=\"Activity name\" prop=\"name\">\n    <el-input v-model=\"ruleForm.name\"></el-input>\n  </el-form-item>\n  <el-form-item label=\"Activity zone\" prop=\"region\">\n    <el-select v-model=\"ruleForm.region\" placeholder=\"Activity zone\">\n      <el-option label=\"Zone one\" value=\"shanghai\"></el-option>\n      <el-option label=\"Zone two\" value=\"beijing\"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label=\"Activity time\" required>\n    <el-col :span=\"11\">\n      <el-form-item prop=\"date1\">\n        <el-date-picker type=\"date\" placeholder=\"Pick a date\" v-model=\"ruleForm.date1\" style=\"width: 100%;\"></el-date-picker>\n      </el-form-item>\n    </el-col>\n    <el-col class=\"line\" :span=\"2\">-</el-col>\n    <el-col :span=\"11\">\n      <el-form-item prop=\"date2\">\n        <el-time-picker placeholder=\"Pick a time\" v-model=\"ruleForm.date2\" style=\"width: 100%;\"></el-time-picker>\n      </el-form-item>\n    </el-col>\n  </el-form-item>\n  <el-form-item label=\"Instant delivery\" prop=\"delivery\">\n    <el-switch v-model=\"ruleForm.delivery\"></el-switch>\n  </el-form-item>\n  <el-form-item label=\"Activity type\" prop=\"type\">\n    <el-checkbox-group v-model=\"ruleForm.type\">\n      <el-checkbox label=\"Online activities\" name=\"type\"></el-checkbox>\n      <el-checkbox label=\"Promotion activities\" name=\"type\"></el-checkbox>\n      <el-checkbox label=\"Offline activities\" name=\"type\"></el-checkbox>\n      <el-checkbox label=\"Simple brand exposure\" name=\"type\"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label=\"Resources\" prop=\"resource\">\n    <el-radio-group v-model=\"ruleForm.resource\">\n      <el-radio label=\"Sponsorship\"></el-radio>\n      <el-radio label=\"Venue\"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label=\"Activity form\" prop=\"desc\">\n    <el-input type=\"textarea\" v-model=\"ruleForm.desc\"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type=\"primary\" @click=\"submitForm('ruleForm')\">Create</el-button>\n    <el-button @click=\"resetForm('ruleForm')\">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        ruleForm: {\n          name: '',\n          region: '',\n          date1: '',\n          date2: '',\n          delivery: false,\n          type: [],\n          resource: '',\n          desc: ''\n        },\n        rules: {\n          name: [\n            { required: true, message: 'Please input Activity name', trigger: 'blur' },\n            { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }\n          ],\n          region: [\n            { required: true, message: 'Please select Activity zone', trigger: 'change' }\n          ],\n          date1: [\n            { type: 'date', required: true, message: 'Please pick a date', trigger: 'change' }\n          ],\n          date2: [\n            { type: 'date', required: true, message: 'Please pick a time', trigger: 'change' }\n          ],\n          type: [\n            { type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change' }\n          ],\n          resource: [\n            { required: true, message: 'Please select activity resource', trigger: 'change' }\n          ],\n          desc: [\n            { required: true, message: 'Please input activity form', trigger: 'blur' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Custom validation rules\n\nThis example shows how to customize your own validation rules to finish a two-factor password verification.\n\n:::demo Here we use `status-icon` to reflect validation result as an icon.\n```html\n<el-form :model=\"ruleForm\" status-icon :rules=\"rules\" ref=\"ruleForm\" label-width=\"120px\" class=\"demo-ruleForm\">\n  <el-form-item label=\"Password\" prop=\"pass\">\n    <el-input type=\"password\" v-model=\"ruleForm.pass\" autocomplete=\"off\"></el-input>\n  </el-form-item>\n  <el-form-item label=\"Confirm\" prop=\"checkPass\">\n    <el-input type=\"password\" v-model=\"ruleForm.checkPass\" autocomplete=\"off\"></el-input>\n  </el-form-item>\n  <el-form-item label=\"Age\" prop=\"age\">\n    <el-input v-model.number=\"ruleForm.age\"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type=\"primary\" @click=\"submitForm('ruleForm')\">Submit</el-button>\n    <el-button @click=\"resetForm('ruleForm')\">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      var checkAge = (rule, value, callback) => {\n        if (!value) {\n          return callback(new Error('Please input the age'));\n        }\n        setTimeout(() => {\n          if (!Number.isInteger(value)) {\n            callback(new Error('Please input digits'));\n          } else {\n            if (value < 18) {\n              callback(new Error('Age must be greater than 18'));\n            } else {\n              callback();\n            }\n          }\n        }, 1000);\n      };\n      var validatePass = (rule, value, callback) => {\n        if (value === '') {\n          callback(new Error('Please input the password'));\n        } else {\n          if (this.ruleForm.checkPass !== '') {\n            this.$refs.ruleForm.validateField('checkPass');\n          }\n          callback();\n        }\n      };\n      var validatePass2 = (rule, value, callback) => {\n        if (value === '') {\n          callback(new Error('Please input the password again'));\n        } else if (value !== this.ruleForm.pass) {\n          callback(new Error('Two inputs don\\'t match!'));\n        } else {\n          callback();\n        }\n      };\n      return {\n        ruleForm: {\n          pass: '',\n          checkPass: '',\n          age: ''\n        },\n        rules: {\n          pass: [\n            { validator: validatePass, trigger: 'blur' }\n          ],\n          checkPass: [\n            { validator: validatePass2, trigger: 'blur' }\n          ],\n          age: [\n            { validator: checkAge, trigger: 'blur' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n</script>\n```\n:::\n\n:::tip\nCustom validate callback function must be called. See more advanced usage at [async-validator](https://github.com/yiminghe/async-validator).\n:::\n\n### Delete or add form items dynamically\n\n:::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.\n\n```html\n<el-form :model=\"dynamicValidateForm\" ref=\"dynamicValidateForm\" label-width=\"120px\" class=\"demo-dynamic\">\n  <el-form-item\n    prop=\"email\"\n    label=\"Email\"\n    :rules=\"[\n      { required: true, message: 'Please input email address', trigger: 'blur' },\n      { type: 'email', message: 'Please input correct email address', trigger: ['blur', 'change'] }\n    ]\"\n  >\n    <el-input v-model=\"dynamicValidateForm.email\"></el-input>\n  </el-form-item>\n  <el-form-item\n    v-for=\"(domain, index) in dynamicValidateForm.domains\"\n    :label=\"'Domain' + index\"\n    :key=\"domain.key\"\n    :prop=\"'domains.' + index + '.value'\"\n    :rules=\"{\n      required: true, message: 'domain can not be null', trigger: 'blur'\n    }\"\n  >\n    <el-input v-model=\"domain.value\"></el-input><el-button @click.prevent=\"removeDomain(domain)\">Delete</el-button>\n  </el-form-item>\n  <el-form-item>\n    <el-button type=\"primary\" @click=\"submitForm('dynamicValidateForm')\">Submit</el-button>\n    <el-button @click=\"addDomain\">New domain</el-button>\n    <el-button @click=\"resetForm('dynamicValidateForm')\">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        dynamicValidateForm: {\n          domains: [{\n            key: 1,\n            value: ''\n          }],\n          email: ''\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      },\n      removeDomain(item) {\n        var index = this.dynamicValidateForm.domains.indexOf(item);\n        if (index !== -1) {\n          this.dynamicValidateForm.domains.splice(index, 1);\n        }\n      },\n      addDomain() {\n        this.dynamicValidateForm.domains.push({\n          key: Date.now(),\n          value: ''\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Number Validate\n\n:::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 Vuejs.\n```html\n<el-form :model=\"numberValidateForm\" ref=\"numberValidateForm\" label-width=\"100px\" class=\"demo-ruleForm\">\n  <el-form-item\n    label=\"age\"\n    prop=\"age\"\n    :rules=\"[\n      { required: true, message: 'age is required'},\n      { type: 'number', message: 'age must be a number'}\n    ]\"\n  >\n    <el-input v-model.number=\"numberValidateForm.age\" autocomplete=\"off\"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type=\"primary\" @click=\"submitForm('numberValidateForm')\">Submit</el-button>\n    <el-button @click=\"resetForm('numberValidateForm')\">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        numberValidateForm: {\n          age: ''\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n</script>\n```\n:::\n\n:::tip\nWhen 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.\n:::\n\n### Size control\n\nAll components in a Form inherit their `size` attribute from that Form. Similarly, FormItem also has a `size` attribute.\n\n:::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.\n```html\n<el-form ref=\"form\" :model=\"sizeForm\" label-width=\"120px\" size=\"mini\">\n  <el-form-item label=\"Activity name\">\n    <el-input v-model=\"sizeForm.name\"></el-input>\n  </el-form-item>\n  <el-form-item label=\"Activity zone\">\n    <el-select v-model=\"sizeForm.region\" placeholder=\"please select your zone\">\n      <el-option label=\"Zone one\" value=\"shanghai\"></el-option>\n      <el-option label=\"Zone two\" value=\"beijing\"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label=\"Activity time\">\n    <el-col :span=\"11\">\n      <el-date-picker type=\"date\" placeholder=\"Pick a date\" v-model=\"sizeForm.date1\" style=\"width: 100%;\"></el-date-picker>\n    </el-col>\n    <el-col class=\"line\" :span=\"2\">-</el-col>\n    <el-col :span=\"11\">\n      <el-time-picker placeholder=\"Pick a time\" v-model=\"sizeForm.date2\" style=\"width: 100%;\"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label=\"Activity type\">\n    <el-checkbox-group v-model=\"sizeForm.type\">\n      <el-checkbox-button label=\"Online activities\" name=\"type\"></el-checkbox-button>\n      <el-checkbox-button label=\"Promotion activities\" name=\"type\"></el-checkbox-button>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label=\"Resources\">\n    <el-radio-group v-model=\"sizeForm.resource\" size=\"medium\">\n      <el-radio border label=\"Sponsor\"></el-radio>\n      <el-radio border label=\"Venue\"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item size=\"large\">\n    <el-button type=\"primary\" @click=\"onSubmit\">Create</el-button>\n    <el-button>Cancel</el-button>\n  </el-form-item>\n</el-form>\n\n<script>\n  export default {\n    data() {\n      return {\n        sizeForm: {\n          name: '',\n          region: '',\n          date1: '',\n          date2: '',\n          delivery: false,\n          type: [],\n          resource: '',\n          desc: ''\n        }\n      };\n    },\n    methods: {\n      onSubmit() {\n        console.log('submit!');\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Form Attributes\n\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n| ---- | ----| ---- | ---- | ---- |\n| model| data of form component | object | — | — |\n| rules | validation rules of form | object | — | — |\n| inline | whether the form is inline | boolean | — | false |\n| label-position | position of label. If set to 'left' or 'right', `label-width` prop is also required | string | left / right / top | right |\n| label-width    | width of label, e.g. '50px'. All its direct child form items will inherit this value. Width `auto` is supported.        | string | — | — |\n| label-suffix | suffix of the label | string | — | — |\n| hide-required-asterisk | whether to hide a red asterisk (star) next to the required field label. | boolean | — | false |\n| show-message  | whether to show the error message | boolean | — | true |\n| inline-message  | whether to display the error message inline with the form item | boolean | — | false |\n| status-icon  | whether to display an icon indicating the validation result | boolean | — | false |\n| validate-on-rule-change  | whether to trigger validation when the `rules` prop is changed | boolean | — | true |\n| size  | control the size of components in this form | string | medium / small / mini | — |\n| disabled | whether to disabled all components in this form. If set to true, it cannot be overridden by its inner components' `disabled` prop | boolean | — | false |\n\n### Form Methods\n\n| Method | Description | Parameters |\n| ---- | ---- | ---- |\n| validate | validate the whole form. Takes a callback as a param. After validation, the callback will be executed with two params: a boolean indicating if the validation has passed, and an object containing all fields that fail the validation. Returns a promise if callback is omitted | Function(callback: Function(boolean, object)) |\n| validateField | validate one or several form items | Function(props: string \\| array, callback: Function(errorMessage: string)) |\n| resetFields | reset all the fields and remove validation result | — |\n| clearValidate | clear validation message for certain fields. The parameter is prop name or an array of prop names of the form items whose validation messages will be removed. When omitted, all fields' validation messages will be cleared | Function(props: string \\| array) |\n\n### Form Events\n| Event Name | Description | Parameters |\n|----------- |------------ |----------- |\n| validate   | triggers after a form item is validated | prop name of the form item being validated, whether validation is passed and the error message if not |\n\n### Form-Item Attributes\n\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n| ---- | ----| ---- | ---- | ---- |\n| prop | a key of `model`. In the use of validate and resetFields method, the attribute is required | string | keys of model that passed to `form` |\n| label | label | string | — | — |\n| label-width | width of label, e.g. '50px'. Width `auto` is supported. | string | — | — |\n| required | whether the field is required or not, will be determined by validation rules if omitted | boolean |  — | false |\n| rules | validation rules of form | object | — | — |\n| error | field error message, set its value and the field will validate error and show this message immediately | string | — | — |\n| show-message  | whether to show the error message | boolean | — | true |\n| inline-message  | inline style validate message | boolean | — | false |\n| size  | control the size of components in this form-item | string | medium / small / mini | - |\n\n### Form-Item Slot\n| Name | Description |\n|------|--------|\n| — | content of Form Item |\n| label | content of label |\n\n### Form-Item Scoped Slot\n|      Name     | Description |\n|---------------|-------------|\n|      error    | Custom content to display validation message. The scope parameter is { error } |\n\n### Form-Item Methods\n\n| Method | Description | Parameters |\n| ---- | ---- | ---- |\n| resetField | reset current field and remove validation result | — |\n| clearValidate | remove validation status of the field | - |\n"
  },
  {
    "path": "examples/docs/en-US/i18n.md",
    "content": "## Internationalization\n\nThe default language of Element is Chinese. If you wish to use another language, you'll need to do some i18n configuration. In your entry file, if you are importing Element entirely:\n\n```javascript\nimport Vue from 'vue'\nimport ElementUI from 'element-ui'\nimport locale from 'element-ui/lib/locale/lang/en'\n\nVue.use(ElementUI, { locale })\n```\n\nOr if you are importing Element on demand:\n\n```javascript\nimport Vue from 'vue'\nimport { Button, Select } from 'element-ui'\nimport lang from 'element-ui/lib/locale/lang/en'\nimport locale from 'element-ui/lib/locale'\n\n// configure language\nlocale.use(lang)\n\n// import components\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n```\n\nThe Chinese language pack is imported by default, even if you're using another language. But with `NormalModuleReplacementPlugin` provided by webpack you can replace default locale:\n\nwebpack.config.js\n```javascript\n{\n  plugins: [\n    new webpack.NormalModuleReplacementPlugin(/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/, 'element-ui/lib/locale/lang/en')\n  ]\n}\n```\n\n## Compatible with `vue-i18n@5.x`\n\nElement is compatible with [vue-i18n@5.x](https://github.com/kazupon/vue-i18n), which makes multilingual switching even easier.\n\n```javascript\nimport Vue from 'vue'\nimport VueI18n from 'vue-i18n'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\nVue.use(Element)\n\nVue.config.lang = 'zh-cn'\nVue.locale('zh-cn', zhLocale)\nVue.locale('en', enLocale)\n```\n\n## Compatible with other i18n plugins\nElement may not be compatible with i18n plugins other than vue-i18n, but you can customize how Element processes i18n.\n\n```javascript\nimport Vue from 'vue'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(Element, {\n  i18n: function (path, options) {\n    // ...\n  }\n})\n```\n\n## Compatible with `vue-i18n@6.x`\n\nYou need to manually handle it for compatibility with `6.x`.\n\n```javascript\nimport Vue from 'vue'\nimport Element from 'element-ui'\nimport VueI18n from 'vue-i18n'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\n\nconst messages = {\n  en: {\n    message: 'hello',\n    ...enLocale // Or use `Object.assign({ message: 'hello' }, enLocale)`\n  },\n  zh: {\n    message: '你好',\n    ...zhLocale // Or use `Object.assign({ message: '你好' }, zhLocale)`\n  }\n}\n// Create VueI18n instance with options\nconst i18n = new VueI18n({\n  locale: 'en', // set locale\n  messages, // set locale messages\n})\n\nVue.use(Element, {\n  i18n: (key, value) => i18n.t(key, value)\n})\n\nnew Vue({ i18n }).$mount('#app')\n```\n\n## Custom i18n in on-demand components\n\n```js\nimport Vue from 'vue'\nimport DatePicker from 'element/lib/date-picker'\nimport VueI18n from 'vue-i18n'\n\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\nimport ElementLocale from 'element-ui/lib/locale'\n\nVue.use(VueI18n)\nVue.use(DatePicker)\n\nconst messages = {\n  en: {\n    message: 'hello',\n    ...enLocale\n  },\n  zh: {\n    message: '你好',\n    ...zhLocale\n  }\n}\n// Create VueI18n instance with options\nconst i18n = new VueI18n({\n  locale: 'en', // set locale\n  messages, // set locale messages\n})\n\nElementLocale.i18n((key, value) => i18n.t(key, value))\n```\n\n## Import via CDN\n\n```html\n<script src=\"//unpkg.com/vue@2\"></script>\n<script src=\"//unpkg.com/element-ui\"></script>\n<script src=\"//unpkg.com/element-ui/lib/umd/locale/en.js\"></script>\n\n<script>\n  ELEMENT.locale(ELEMENT.lang.en)\n</script>\n```\n\nCompatible with `vue-i18n`\n\n```html\n<script src=\"//unpkg.com/vue@2\"></script>\n<script src=\"//unpkg.com/vue-i18n/dist/vue-i18n.js\"></script>\n<script src=\"//unpkg.com/element-ui\"></script>\n<script src=\"//unpkg.com/element-ui/lib/umd/locale/zh-CN.js\"></script>\n<script src=\"//unpkg.com/element-ui/lib/umd/locale/en.js\"></script>\n\n<script>\n  Vue.locale('en', ELEMENT.lang.en)\n  Vue.locale('zh-cn', ELEMENT.lang.zhCN)\n</script>\n```\n\nCurrently Element ships with the following languages:\n<ul class=\"language-list\">\n  <li>Simplified Chinese (zh-CN)</li>\n  <li>English (en)</li>\n  <li>German (de)</li>\n  <li>Portuguese (pt)</li>\n  <li>Spanish (es)</li>\n  <li>Danish (da)</li>\n  <li>French (fr)</li>\n  <li>Norwegian (nb-NO)</li>\n  <li>Traditional Chinese (zh-TW)</li>\n  <li>Italian (it)</li>\n  <li>Korean (ko)</li>\n  <li>Japanese (ja)</li>\n  <li>Dutch (nl)</li>\n  <li>Vietnamese (vi)</li>\n  <li>Russian (ru-RU)</li>\n  <li>Turkish (tr-TR)</li>\n  <li>Brazilian Portuguese (pt-br)</li>\n  <li>Farsi (fa)</li>\n  <li>Thai (th)</li>\n  <li>Indonesian (id)</li>\n  <li>Bulgarian (bg)</li>\n  <li>Polish (pl)</li>\n  <li>Finnish (fi)</li>\n  <li>Swedish (sv-SE)</li>\n  <li>Greek (el)</li>\n  <li>Slovak (sk)</li>\n  <li>Catalunya (ca)</li>\n  <li>Czech (cs-CZ)</li>\n  <li>Ukrainian (ua)</li>\n  <li>Turkmen (tk)</li>\n  <li>Tamil (ta)</li>\n  <li>Latvian (lv)</li>\n  <li>Afrikaans (af-ZA)</li>\n  <li>Estonian (ee)</li>\n  <li>Slovenian (sl)</li>\n  <li>Arabic (ar)</li>\n  <li>Hebrew (he)</li>\n  <li>Lithuanian (lt)</li>\n  <li>Mongolian (mn)</li>\n  <li>Kazakh (kz)</li>\n  <li>Hungarian (hu)</li>\n  <li>Romanian (ro)</li>\n  <li>Kurdish (ku)</li>\n  <li>Uighur (ug-CN)</li>\n  <li>Khmer (km)</li>\n  <li>Serbian (sr)</li>\n  <li>Basque (eu)</li>\n  <li>Kyrgyz (kg)</li>\n  <li>Armenian (hy)</li>\n  <li>Croatian (hr)</li>\n  <li>Esperanto (eo)</li>\n</ul>\n\nIf your target language is not included, you are more than welcome to contribute: just add another language config [here](https://github.com/ElemeFE/element/tree/dev/src/locale/lang) and create a pull request.\n"
  },
  {
    "path": "examples/docs/en-US/icon.md",
    "content": "## Icon\n\nElement provides a set of common icons.\n\n### Basic usage\n\nJust assign the class name to `el-icon-iconName`.\n\n:::demo\n\n```html\n<i class=\"el-icon-edit\"></i>\n<i class=\"el-icon-share\"></i>\n<i class=\"el-icon-delete\"></i>\n<el-button type=\"primary\" icon=\"el-icon-search\">Search</el-button>\n\n```\n:::\n\n### Icons\n\n<ul class=\"icon-list\">\n  <li v-for=\"name in $icon\" :key=\"name\">\n    <span>\n      <i :class=\"'el-icon-' + name\"></i>\n      <span class=\"icon-name\">{{'el-icon-' + name}}</span>\n    </span>\n  </li>\n</ul>\n"
  },
  {
    "path": "examples/docs/en-US/image.md",
    "content": "## Image\nBesides the native features of img, support lazy load, custom placeholder and load failure, etc.\n\n### Basic Usage\n\n:::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)。\n```html\n<div class=\"demo-image\">\n  <div class=\"block\" v-for=\"fit in fits\" :key=\"fit\">\n    <span class=\"demonstration\">{{ fit }}</span>\n    <el-image\n      style=\"width: 100px; height: 100px\"\n      :src=\"url\"\n      :fit=\"fit\"></el-image>\n  </div>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],\n        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Placeholder\n\n:::demo Custom placeholder content when image hasn't loaded yet by `slot = placeholder`\n```html\n<div class=\"demo-image__placeholder\">\n  <div class=\"block\">\n    <span class=\"demonstration\">Default</span>\n    <el-image :src=\"src\"></el-image>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Custom</span>\n    <el-image :src=\"src\">\n      <div slot=\"placeholder\" class=\"image-slot\">\n        Loading<span class=\"dot\">...</span>\n      </div>\n    </el-image>\n  </div>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Load Failed\n\n:::demo Custom failed content when error occurs to image load by `slot = error`\n```html\n<div class=\"demo-image__error\">\n  <div class=\"block\">\n    <span class=\"demonstration\">Default</span>\n    <el-image></el-image>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Custom</span>\n    <el-image>\n      <div slot=\"error\" class=\"image-slot\">\n        <i class=\"el-icon-picture-outline\"></i>\n      </div>\n    </el-image>\n  </div>\n</div>\n```\n:::\n\n### Lazy Load\n\n:::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.\n```html\n<div class=\"demo-image__lazy\">\n  <el-image v-for=\"url in urls\" :key=\"url\" :src=\"url\" lazy></el-image>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        urls: [\n          'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',\n          'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',\n          'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',\n          'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',\n          'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',\n          'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',\n          'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'\n        ]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Image Preview\n\n:::demo allow big image preview by setting `previewSrcList` prop.\n```html\n<div class=\"demo-image__preview\">\n  <el-image \n    style=\"width: 100px; height: 100px\"\n    :src=\"url\" \n    :preview-src-list=\"srcList\">\n  </el-image>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',\n        srcList: [\n          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',\n          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'\n        ]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Attributes\n| Attribute | Description | Type  | Accepted values | Default   |\n|---------- |-------- |---------- |-------------  |-------- |\n| src | Image source, same as native | string | — | - |\n| 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) | string | fill / contain / cover / none / scale-down | - |\n| alt | Native alt | string | - | - |\n| referrer-policy | Native referrerPolicy | string | - | - |\n| lazy | Whether to use lazy load | boolean | — | false |\n| 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 |\n| preview-src-list | allow big image preview | Array | — | - |\n| z-index | set image preview z-index | Number | — | 2000 |\n| initial-index | set image preview array index | Number | — | - |\n\n### Events\n| Event Name | Description | Parameters |\n|---------- |-------- |---------- |\n| load | Same as native load | (e: Event) |\n| error | Same as native error | (e: Error) |\n\n### Slots\n| Slot Name | Description |\n|---------|-------------|\n| placeholder | Triggers when image load |\n| error | Triggers when image load failed |\n\n\n"
  },
  {
    "path": "examples/docs/en-US/infiniteScroll.md",
    "content": "## InfiniteScroll\n\nLoad more data while reach bottom of the page\n\n### Basic usage\nAdd `v-infinite-scroll` to the list to automatically execute loading method when scrolling to the bottom.\n:::demo\n```html\n<template>\n  <ul class=\"infinite-list\" v-infinite-scroll=\"load\" style=\"overflow:auto\">\n    <li v-for=\"i in count\" class=\"infinite-list-item\">{{ i }}</li>\n  </ul>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        count: 0\n      }\n    },\n    methods: {\n      load () {\n        this.count += 2\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Disable Loading\n\n:::demo\n```html\n<template>\n  <div class=\"infinite-list-wrapper\" style=\"overflow:auto\">\n    <ul\n      class=\"list\"\n      v-infinite-scroll=\"load\"\n      infinite-scroll-disabled=\"disabled\">\n      <li v-for=\"i in count\" class=\"list-item\">{{ i }}</li>\n    </ul>\n    <p v-if=\"loading\">Loading...</p>\n    <p v-if=\"noMore\">No more</p>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        count: 10,\n        loading: false\n      }\n    },\n    computed: {\n      noMore () {\n        return this.count >= 20\n      },\n      disabled () {\n        return this.loading || this.noMore\n      }\n    },\n    methods: {\n      load () {\n        this.loading = true\n        setTimeout(() => {\n          this.count += 2\n          this.loading = false\n        }, 2000)\n      }\n    }\n  }\n</script>\n```\n:::\n\n\n### Attributes\n\n| Attribute | Description | Type  | Accepted values | Default   |\n| -------------- | ------------------------------ | --------- | ------------------------------------ | ------- |\n| infinite-scroll-disabled | is disabled           | boolean      | - |false |\n| infinite-scroll-delay   | throttle delay (ms)   | number       |   - |200   |\n| infinite-scroll-distance| trigger distance (px) | number   |- |0 |\n| infinite-scroll-immediate |Whether to execute the loading method immediately, in case the content cannot be filled up in the initial state. | boolean | - |true |\n"
  },
  {
    "path": "examples/docs/en-US/input-number.md",
    "content": "## InputNumber\n\nInput numerical values with a customizable range.\n\n### Basic usage\n\n:::demo Bind a variable to `v-model` in `<el-input-number>` element and you are set.\n\n```html\n<template>\n  <el-input-number v-model=\"num\" @change=\"handleChange\" :min=\"1\" :max=\"10\"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value)\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Disabled\n\n:::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`.\n\n```html\n<template>\n  <el-input-number v-model=\"num\" :disabled=\"true\"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num: 1\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Steps\n\nAllows you to define incremental steps.\n\n:::demo Add `step` attribute to set the step.\n\n```html\n<template>\n  <el-input-number v-model=\"num\" :step=\"2\"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num: 5\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Step strictly\n\n:::demo The `step-strictly` attribute accepts a `boolean`. if this attribute is `true`, input value can only be multiple of step.\n\n```html\n<template>\n  <el-input-number v-model=\"num\" :step=\"2\" step-strictly></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num: 2\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Precision\n\n:::demo Add `precision` attribute to set the precision of input value.\n\n```html\n<template>\n  <el-input-number v-model=\"num\" :precision=\"2\" :step=\"0.1\" :max=\"10\"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num: 1\n      }\n    }\n  };\n</script>\n```\n\n:::\n\n:::tip\nThe value of `precision` must be a non negative integer and should not be less than the decimal places of `step`.\n:::\n\n### Size\n\nUse attribute `size` to set additional sizes with `medium`, `small` or `mini`.\n\n:::demo\n\n```html\n<template>\n  <el-input-number v-model=\"num1\"></el-input-number>\n    <el-input-number size=\"medium\" v-model=\"num2\"></el-input-number>\n    <el-input-number size=\"small\" v-model=\"num3\"></el-input-number>\n    <el-input-number size=\"mini\" v-model=\"num4\"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num1: 1,\n        num2: 1,\n        num3: 1,\n        num4: 1\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Controls Position\n\n:::demo Set `controls-position` to decide the position of control buttons.\n```html\n<template>\n  <el-input-number v-model=\"num\" controls-position=\"right\" @change=\"handleChange\" :min=\"1\" :max=\"10\"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Attributes\n\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|----| ----| ---| ----| -----|\n|value / v-model | binding value| number | — | 0 |\n|min | the minimum allowed value | number | — | `-Infinity` |\n|max | the maximum allowed value | number | — | `Infinity` |\n|step | incremental step | number | — | 1 |\n|step-strictly | whether input value can only be multiple of step | boolean | — | false |\n|precision | precision of input value | number | — | — |\n|size | size of the component | string | large/small| — |\n|disabled| whether the component is disabled | boolean | — | false |\n|controls| whether to enable the control buttons | boolean | — | true |\n|controls-position | position of the control buttons | string | right | - |\n|name | same as `name` in native input | string | — | — |\n|label | label text | string | — | — |\n|placeholder | placeholder in input | string | - | - |\n\n### Events\n\n| Event Name | Description | Parameters |\n|----| ---- | -----|\n|change | triggers when the value changes | currentValue, oldValue |\n| blur | triggers when Input blurs | (event: Event) |\n| focus | triggers when Input focuses | (event: Event) |\n\n### Methods\n| Method | Description | Parameters |\n|------|--------|-------|\n| focus | focus the Input component | - |\n| select | select the text in input element | — |\n\n"
  },
  {
    "path": "examples/docs/en-US/input.md",
    "content": "## Input\n\nInput data using mouse or keyboard.\n\n:::warning\nInput is a controlled component, it **always shows Vue binding value**.\n\nUnder 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.\n\nDo not support `v-model` modifiers.\n:::\n\n\n### Basic usage\n\n:::demo\n\n```html\n<el-input placeholder=\"Please input\" v-model=\"input\"></el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input: ''\n    }\n  }\n}\n</script>\n```\n:::\n\n### Disabled\n\n:::demo Disable the Input with the `disabled` attribute.\n\n```html\n<el-input\n  placeholder=\"Please input\"\n  v-model=\"input\"\n  :disabled=\"true\">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input: ''\n    }\n  }\n}\n</script>\n```\n:::\n\n### Clearable\n\n:::demo Make the Input clearable with the `clearable` attribute.\n\n```html\n<el-input\n  placeholder=\"Please input\"\n  v-model=\"input\"\n  clearable>\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input: ''\n    }\n  }\n}\n</script>\n```\n:::\n\n### Password box\n\n:::demo Make a toggleable password Input with the `show-password` attribute.\n\n```html\n<el-input placeholder=\"Please input password\" v-model=\"input\" show-password></el-input>\n\n<script>\n  export default {\n    data() {\n      return {\n        input: ''\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Input with icon\n\nAdd an icon to indicate input type.\n\n:::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.\n```html\n<div class=\"demo-input-suffix\">\n  <span class=\"demo-input-label\">Using attributes</span>\n  <el-input\n    placeholder=\"Pick a date\"\n    suffix-icon=\"el-icon-date\"\n    v-model=\"input1\">\n  </el-input>\n  <el-input\n    placeholder=\"Type something\"\n    prefix-icon=\"el-icon-search\"\n    v-model=\"input2\">\n  </el-input>\n</div>\n<div class=\"demo-input-suffix\">\n  <span class=\"demo-input-label\">Using slots</span>\n  <el-input\n    placeholder=\"Pick a date\"\n    v-model=\"input3\">\n    <i slot=\"suffix\" class=\"el-input__icon el-icon-date\"></i>\n  </el-input>\n  <el-input\n    placeholder=\"Type something\"\n    v-model=\"input4\">\n    <i slot=\"prefix\" class=\"el-input__icon el-icon-search\"></i>\n  </el-input>\n</div>\n\n<style>\n  .demo-input-label {\n    display: inline-block;\n    width: 130px;\n  }\n</style>\n\n<script>\nexport default {\n  data() {\n    return {\n      input1: '',\n      input2: '',\n      input3: '',\n      input4: ''\n    }\n  }\n}\n</script>\n```\n:::\n\n### Textarea\n\nResizable for entering multiple lines of text information. Add attribute `type=\"textarea\"` to change `input` into native `textarea`.\n\n:::demo Control the height by setting the `rows` prop.\n\n```html\n<el-input\n  type=\"textarea\"\n  :rows=\"2\"\n  placeholder=\"Please input\"\n  v-model=\"textarea\">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      textarea: ''\n    }\n  }\n}\n</script>\n```\n:::\n\n### Autosize Textarea\n\nSetting 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.\n\n:::demo\n\n```html\n<el-input\n  type=\"textarea\"\n  autosize\n  placeholder=\"Please input\"\n  v-model=\"textarea1\">\n</el-input>\n<div style=\"margin: 20px 0;\"></div>\n<el-input\n  type=\"textarea\"\n  :autosize=\"{ minRows: 2, maxRows: 4}\"\n  placeholder=\"Please input\"\n  v-model=\"textarea2\">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      textarea1: '',\n      textarea2: ''\n    }\n  }\n}\n</script>\n```\n:::\n\n### Mixed input\n\nPrepend or append an element, generally a label or a button.\n\n:::demo Use `slot` to distribute elements that prepend or append to Input.\n\n```html\n<div>\n  <el-input placeholder=\"Please input\" v-model=\"input1\">\n    <template slot=\"prepend\">Http://</template>\n  </el-input>\n</div>\n<div style=\"margin-top: 15px;\">\n  <el-input placeholder=\"Please input\" v-model=\"input2\">\n    <template slot=\"append\">.com</template>\n  </el-input>\n</div>\n<div style=\"margin-top: 15px;\">\n  <el-input placeholder=\"Please input\" v-model=\"input3\" class=\"input-with-select\">\n    <el-select v-model=\"select\" slot=\"prepend\" placeholder=\"Select\">\n      <el-option label=\"Restaurant\" value=\"1\"></el-option>\n      <el-option label=\"Order No.\" value=\"2\"></el-option>\n      <el-option label=\"Tel\" value=\"3\"></el-option>\n    </el-select>\n    <el-button slot=\"append\" icon=\"el-icon-search\"></el-button>\n  </el-input>\n</div>\n\n<style>\n  .el-select .el-input {\n    width: 110px;\n  }\n  .input-with-select .el-input-group__prepend {\n    background-color: #fff;\n  }\n</style>\n<script>\nexport default {\n  data() {\n    return {\n      input1: '',\n      input2: '',\n      input3: '',\n      select: ''\n    }\n  }\n}\n</script>\n```\n:::\n\n### Sizes\n\n:::demo Add `size` attribute to change the size of Input. In addition to the default size, there are three other options: `medium`, `small` and `mini`.\n```html\n<div class=\"demo-input-size\">\n  <el-input\n    placeholder=\"Please Input\"\n    v-model=\"input1\">\n  </el-input>\n  <el-input\n    size=\"medium\"\n    placeholder=\"Please Input\"\n    v-model=\"input2\">\n  </el-input>\n  <el-input\n    size=\"small\"\n    placeholder=\"Please Input\"\n    v-model=\"input3\">\n  </el-input>\n  <el-input\n    size=\"mini\"\n    placeholder=\"Please Input\"\n    v-model=\"input4\">\n  </el-input>\n</div>\n\n<script>\nexport default {\n  data() {\n    return {\n      input1: '',\n      input2: '',\n      input3: '',\n      input4: ''\n    }\n  }\n}\n</script>\n```\n:::\n\n### Autocomplete\n\nYou can get some recommended tips based on the current input.\n\n:::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.\n```html\n<el-row class=\"demo-autocomplete\">\n  <el-col :span=\"12\">\n    <div class=\"sub-title\">list suggestions when activated</div>\n    <el-autocomplete\n      class=\"inline-input\"\n      v-model=\"state1\"\n      :fetch-suggestions=\"querySearch\"\n      placeholder=\"Please Input\"\n      @select=\"handleSelect\"\n    ></el-autocomplete>\n  </el-col>\n  <el-col :span=\"12\">\n    <div class=\"sub-title\">list suggestions on input</div>\n    <el-autocomplete\n      class=\"inline-input\"\n      v-model=\"state2\"\n      :fetch-suggestions=\"querySearch\"\n      placeholder=\"Please Input\"\n      :trigger-on-focus=\"false\"\n      @select=\"handleSelect\"\n    ></el-autocomplete>\n  </el-col>\n</el-row>\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state1: '',\n        state2: ''\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n        // call callback function to return suggestions\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { \"value\": \"vue\", \"link\": \"https://github.com/vuejs/vue\" },\n          { \"value\": \"element\", \"link\": \"https://github.com/ElemeFE/element\" },\n          { \"value\": \"cooking\", \"link\": \"https://github.com/ElemeFE/cooking\" },\n          { \"value\": \"mint-ui\", \"link\": \"https://github.com/ElemeFE/mint-ui\" },\n          { \"value\": \"vuex\", \"link\": \"https://github.com/vuejs/vuex\" },\n          { \"value\": \"vue-router\", \"link\": \"https://github.com/vuejs/vue-router\" },\n          { \"value\": \"babel\", \"link\": \"https://github.com/babel/babel\" }\n         ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  }\n</script>\n```\n:::\n\n### Custom template\n\nCustomize how suggestions are displayed.\n\n:::demo Use `scoped slot` to customize suggestion items. In the scope, you can access the suggestion object via the `item` key.\n```html\n<el-autocomplete\n  popper-class=\"my-autocomplete\"\n  v-model=\"state\"\n  :fetch-suggestions=\"querySearch\"\n  placeholder=\"Please input\"\n  @select=\"handleSelect\">\n  <i\n    class=\"el-icon-edit el-input__icon\"\n    slot=\"suffix\"\n    @click=\"handleIconClick\">\n  </i>\n  <template slot-scope=\"{ item }\">\n    <div class=\"value\">{{ item.value }}</div>\n    <span class=\"link\">{{ item.link }}</span>\n  </template>\n</el-autocomplete>\n\n<style>\n  .my-autocomplete {\n    li {\n      line-height: normal;\n      padding: 7px;\n\n      .value {\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n      .link {\n        font-size: 12px;\n        color: #b4b4b4;\n      }\n    }\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state: ''\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n        // call callback function to return suggestion objects\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { \"value\": \"vue\", \"link\": \"https://github.com/vuejs/vue\" },\n          { \"value\": \"element\", \"link\": \"https://github.com/ElemeFE/element\" },\n          { \"value\": \"cooking\", \"link\": \"https://github.com/ElemeFE/cooking\" },\n          { \"value\": \"mint-ui\", \"link\": \"https://github.com/ElemeFE/mint-ui\" },\n          { \"value\": \"vuex\", \"link\": \"https://github.com/vuejs/vuex\" },\n          { \"value\": \"vue-router\", \"link\": \"https://github.com/vuejs/vue-router\" },\n          { \"value\": \"babel\", \"link\": \"https://github.com/babel/babel\" }\n         ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      },\n      handleIconClick(ev) {\n        console.log(ev);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  }\n</script>\n```\n:::\n\n### Remote search\n\nSearch data from server-side.\n\n:::demo\n```html\n<el-autocomplete\n  v-model=\"state\"\n  :fetch-suggestions=\"querySearchAsync\"\n  placeholder=\"Please input\"\n  @select=\"handleSelect\"\n></el-autocomplete>\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state: '',\n        timeout:  null\n      };\n    },\n    methods: {\n      loadAll() {\n        return [\n          { \"value\": \"vue\", \"link\": \"https://github.com/vuejs/vue\" },\n          { \"value\": \"element\", \"link\": \"https://github.com/ElemeFE/element\" },\n          { \"value\": \"cooking\", \"link\": \"https://github.com/ElemeFE/cooking\" },\n          { \"value\": \"mint-ui\", \"link\": \"https://github.com/ElemeFE/mint-ui\" },\n          { \"value\": \"vuex\", \"link\": \"https://github.com/vuejs/vuex\" },\n          { \"value\": \"vue-router\", \"link\": \"https://github.com/vuejs/vue-router\" },\n          { \"value\": \"babel\", \"link\": \"https://github.com/babel/babel\" }\n         ];\n      },\n      querySearchAsync(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n\n        clearTimeout(this.timeout);\n        this.timeout = setTimeout(() => {\n          cb(results);\n        }, 3000 * Math.random());\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  };\n</script>\n```\n:::\n\n### Limit length\n\n:::demo `maxlength` and `minlength` are attributes of native 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.\n\n```html\n<el-input\n  type=\"text\"\n  placeholder=\"Please input\"\n  v-model=\"text\"\n  maxlength=\"10\"\n  show-word-limit\n>\n</el-input>\n<div style=\"margin: 20px 0;\"></div>\n<el-input\n  type=\"textarea\"\n  placeholder=\"Please input\"\n  v-model=\"textarea\"\n  maxlength=\"30\"\n  show-word-limit\n>\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      text: '',\n      textarea: ''\n    }\n  }\n}\n</script>\n```\n:::\n\n### Input Attributes\n\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n| ----| ----| ----| ---- | ----- |\n|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 |\n|value / v-model| binding value | string / number| — | — |\n|maxlength| same as `maxlength` in native input | number| — | — |\n|minlength| same as `minlength` in native input | number | — | — |\n|show-word-limit | whether show word count，only works when `type` is 'text' or 'textarea' | boolean    |  —  | false |\n|placeholder| placeholder of Input| string | — | — |\n| clearable | whether to show clear button | boolean | — | false |\n| show-password | whether to show toggleable password input| boolean         | — | false |\n|disabled | whether Input is disabled | boolean | — | false |\n|size | size of Input, works when `type` is not 'textarea' | string | medium / small / mini | — |\n| prefix-icon   | prefix icon class  | string          | — | — |\n| suffix-icon   | suffix icon class  | string          | — | — |\n|rows | number of rows of textarea, only works when `type` is 'textarea' | number | — | 2 |\n|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 |\n|autocomplete | same as `autocomplete` in native input | string | on/off | off |\n|auto-complete | @DEPRECATED in next major version | string | on/off | off |\n|name | same as `name` in native input | string | — | — |\n| readonly | same as `readonly` in native input | boolean | — | false |\n|max | same as `max` in native input | — | — | — |\n|min | same as `min` in native input | — | — | — |\n|step| same as `step` in native input | — | — | — |\n|resize| control the resizability | string | none, both, horizontal, vertical | — |\n|autofocus | same as `autofocus` in native input | boolean | — | false |\n|form | same as `form` in native input | string | — | — |\n| label | label text | string | — | — |\n| tabindex | input tabindex | string | - | - |\n| validate-event | whether to trigger form validation | boolean | - | true |\n\n### Input slots\n\n| Name | Description |\n|------|--------|\n| prefix | content as Input prefix, only works when `type` is 'text' |\n| suffix | content as Input suffix, only works when `type` is 'text' |\n| prepend | content to prepend before Input, only works when `type` is 'text' |\n| append | content to append after Input, only works when `type` is 'text' |\n\n### Input Events\n\n| Event Name | Description | Parameters |\n|----| ----| ----|\n| blur | triggers when Input blurs | (event: Event) |\n| focus | triggers when Input focuses | (event: Event) |\n| change | triggers only when the input box loses focus or the user presses Enter | (value: string \\| number) |\n| input | triggers when the Input value change | (value: string \\| number) |\n| clear | triggers when the Input is cleared by clicking the clear button | — |\n\n### Input Methods\n\n| Method | Description | Parameters |\n|------|--------|-------|\n| focus | focus the input element | — |\n| blur | blur the input element | — |\n| select | select the text in input element | — |\n\n### Autocomplete Attributes\n\nAttribute | Description | Type | Options | Default\n|----| ----| ----| ---- | -----|\n|placeholder| the placeholder of Autocomplete| string | — | — |\n| clearable | whether to show clear button | boolean | — | false |\n|disabled | whether Autocomplete is disabled  | boolean | — | false|\n| value-key | key name of the input suggestion object for display | string | — | value |\n|icon | icon name | string | — | — |\n|value | binding value | string | — | — |\n| debounce | debounce delay when typing, in milliseconds | number | — | 300 |\n| placement | placement of the popup menu | string | top / top-start / top-end / bottom / bottom-start / bottom-end | bottom-start |\n|fetch-suggestions | a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete | Function(queryString, callback) | — | — |\n| popper-class | custom class name for autocomplete's dropdown | string | — | — |\n| trigger-on-focus | whether show suggestions when input focus | boolean | — | true |\n| name | same as `name` in native input | string | — | — |\n| select-when-unmatched | whether to emit a `select` event on enter when there is no autocomplete match | boolean | — | false |\n| label | label text | string | — | — |\n| prefix-icon | prefix icon class | string | — | — |\n| suffix-icon | suffix icon class | string | — | — |\n| hide-loading | whether to hide the loading icon in remote search | boolean | — | false |\n| popper-append-to-body | 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 | - | true |\n| highlight-first-item | whether to highlight first item in remote search suggestions by default | boolean | — | false |\n\n### Autocomplete Slots\n\n| Name | Description |\n|------|--------|\n| prefix | content as Input prefix |\n| suffix | content as Input suffix |\n| prepend | content to prepend before Input |\n| append | content to append after Input |\n\n### Autocomplete Scoped Slot\n| Name | Description |\n|------|--------|\n| — | Custom content for input suggestions. The scope parameter is { item } |\n\n### Autocomplete Events\n\n| Event Name | Description | Parameters |\n|----| ----| ----|\n|select | triggers when a suggestion is clicked | suggestion being clicked |\n| change | triggers when the icon inside Input value change | (value: string \\| number) |\n\n### Autocomplete Methods\n\n| Method | Description | Parameters |\n|------|--------|-------|\n| focus | focus the input element | — |\n"
  },
  {
    "path": "examples/docs/en-US/installation.md",
    "content": "## Installation\n\n### npm\n\nInstalling with npm is recommended and it works seamlessly with [webpack](https://webpack.js.org/).\n\n```shell\nnpm i element-ui -S\n```\n\n### CDN\n\nGet the latest version from [unpkg.com/element-ui](https://unpkg.com/element-ui/) , and import JavaScript and CSS file in your page.\n\n```html\n<!-- import CSS -->\n<link rel=\"stylesheet\" href=\"https://unpkg.com/element-ui/lib/theme-chalk/index.css\">\n<!-- import JavaScript -->\n<script src=\"https://unpkg.com/element-ui/lib/index.js\"></script>\n```\n\n:::tip\nWe recommend our users to lock Element's version when using CDN. Please refer to [unpkg.com](https://unpkg.com) for more information.\n:::\n\n### Hello world\n\nIf you are using CDN, a hello-world page is easy with Element. [Online Demo](https://codepen.io/bofeng/pen/poaEmJY)\n\n<iframe height=\"265\" style=\"width: 100%;\" scrolling=\"no\" title=\"Element demo\" src=\"//codepen.io/bofeng/embed/poaEmJY/?height=265&theme-id=light&default-tab=html\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href='https://codepen.io/bofeng/pen/poaEmJY/'>Element demo</a> by hetech\n  (<a href='https://codepen.io/bofeng'>@bofeng</a>) on <a href='https://codepen.io'>CodePen</a>.\n</iframe>\n\nIf you are using npm and wish to apply webpack, please continue to the next page: [Quick Start](/#/en-US/component/quickstart).\n"
  },
  {
    "path": "examples/docs/en-US/layout.md",
    "content": "## Layout\n\nQuickly and easily create layouts with the basic 24-column.\n\n### Basic layout\n\nCreate basic grid layout using columns.\n\n:::demo With `row` and `col`, we can easily manipulate the layout using the `span` attribute.\n```html\n<el-row>\n  <el-col :span=\"24\"><div class=\"grid-content bg-purple-dark\"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span=\"12\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"12\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span=\"8\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"8\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"8\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n```\n:::\n\n### Column spacing\n\nColumn spacing is supported.\n\n:::demo Row provides `gutter` attribute to specify spacings between columns, and its default value is 0.\n```html\n<el-row :gutter=\"20\">\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n```\n:::\n\n### Hybrid layout\n\nForm a more complex hybrid layout by combining the basic 1/24 columns.\n\n:::demo\n```html\n<el-row :gutter=\"20\">\n  <el-col :span=\"16\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"8\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row :gutter=\"20\">\n  <el-col :span=\"8\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"8\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row :gutter=\"20\">\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"16\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n```\n:::\n\n### Column offset\n\nYou can specify column offsets.\n\n:::demo You can specify the number of column offset by setting the value of `offset` attribute of Col.\n\n```html\n<el-row :gutter=\"20\">\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\" :offset=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row :gutter=\"20\">\n  <el-col :span=\"6\" :offset=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\" :offset=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row :gutter=\"20\">\n  <el-col :span=\"12\" :offset=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n```\n:::\n\n### Alignment\n\nUse the flex layout to make flexible alignment of columns.\n\n:::demo You can enable flex layout by setting `type` attribute to 'flex', and define the layout of child elements by setting `justify` attribute with start, center, end, space-between or space-around.\n```html\n<el-row type=\"flex\" class=\"row-bg\">\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row type=\"flex\" class=\"row-bg\" justify=\"center\">\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row type=\"flex\" class=\"row-bg\" justify=\"end\">\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row type=\"flex\" class=\"row-bg\" justify=\"space-between\">\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row type=\"flex\" class=\"row-bg\" justify=\"space-around\">\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n```\n:::\n\n### Responsive Layout\n\nTaking example by Bootstrap's responsive design, five breakpoints are preset: xs, sm, md, lg and xl.\n\n:::demo\n```html\n<el-row :gutter=\"10\">\n  <el-col :xs=\"8\" :sm=\"6\" :md=\"4\" :lg=\"3\" :xl=\"1\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :xs=\"4\" :sm=\"6\" :md=\"8\" :lg=\"9\" :xl=\"11\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :xs=\"4\" :sm=\"6\" :md=\"8\" :lg=\"9\" :xl=\"11\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :xs=\"8\" :sm=\"6\" :md=\"4\" :lg=\"3\" :xl=\"1\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n</el-row>\n\n<style>\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n</style>\n```\n:::\n\n### Utility classes for hiding elements\n\nAdditionally, Element 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:\n\n```js\nimport 'element-ui/lib/theme-chalk/display.css';\n```\n\nThe classes are:\n- `hidden-xs-only` - hide when on extra small viewports only\n- `hidden-sm-only` - hide when on small viewports and down\n- `hidden-sm-and-down` - hide when on small viewports and down\n- `hidden-sm-and-up` - hide when on small viewports and up\n- `hidden-md-only` - hide when on medium viewports only\n- `hidden-md-and-down` - hide when on medium viewports and down\n- `hidden-md-and-up` - hide when on medium viewports and up\n- `hidden-lg-only` - hide when on large viewports only\n- `hidden-lg-and-down` - hide when on large viewports and down\n- `hidden-lg-and-up` - hide when on large viewports and up\n- `hidden-xl-only` - hide when on extra large viewports only\n\n### Row Attributes\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| gutter | grid spacing | number | — | 0 |\n| type | layout mode, you can use flex, works in modern browsers | string | — | — |\n| justify | horizontal alignment of flex layout | string | start/end/center/space-around/space-between | start |\n| align | vertical alignment of flex layout | string | top/middle/bottom | — |\n| tag | custom element tag | string | * | div |\n\n### Col Attributes\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| span | number of column the grid spans | number | — | 24 |\n| offset | number of spacing on the left side of the grid | number | — | 0 |\n| push |  number of columns that grid moves to the right | number | — | 0 |\n| pull |  number of columns that grid moves to the left | number | — | 0 |\n| xs | `<768px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |\n| sm | `≥768px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |\n| md | `≥992px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |\n| lg | `≥1200px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |\n| xl | `≥1920px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |\n| tag | custom element tag | string | * | div |\n\n\n"
  },
  {
    "path": "examples/docs/en-US/link.md",
    "content": "## Link\n\nText hyperlink\n\n### Basic\n\nBasic text link\n:::demo\n\n```html\n<div>\n  <el-link href=\"https://element.eleme.io\" target=\"_blank\">default</el-link>\n  <el-link type=\"primary\">primary</el-link>\n  <el-link type=\"success\">success</el-link>\n  <el-link type=\"warning\">warning</el-link>\n  <el-link type=\"danger\">danger</el-link>\n  <el-link type=\"info\">info</el-link>\n</div>\n```\n\n:::\n\n### Disabled\n\nDisabled state of link\n:::demo\n\n```html\n<div>\n  <el-link disabled>default</el-link>\n  <el-link type=\"primary\" disabled>primary</el-link>\n  <el-link type=\"success\" disabled>success</el-link>\n  <el-link type=\"warning\" disabled>warning</el-link>\n  <el-link type=\"danger\" disabled>danger</el-link>\n  <el-link type=\"info\" disabled>info</el-link>\n</div>\n```\n\n:::\n\n### Underline\n\nUnderline of link\n:::demo\n\n```html\n<div>\n  <el-link :underline=\"false\">Without Underline</el-link>\n  <el-link>With Underline</el-link>\n</div>\n```\n\n:::\n\n### Icon\n\nLink with icon\n:::demo\n\n```html\n<div>\n  <el-link icon=\"el-icon-edit\">Edit</el-link>\n  <el-link>Check<i class=\"el-icon-view el-icon--right\"></i> </el-link>\n</div>\n```\n\n:::\n\n### Attributes\n\n| Attribute | Description                         | Type    | Options                                     | Default |\n| --------- | ----------------------------------- | ------- | ------------------------------------------- | ------- |\n| type      | type                                | string  | primary / success / warning / danger / info | default |\n| underline | whether the component has underline | boolean | —                                           | true    |\n| disabled  | whether the component is disabled   | boolean | —                                           | false   |\n| href      | same as native hyperlink's `href`   | string  | —                                           | -       |\n| icon      | class name of icon                  | string  | —                                           | -       |\n"
  },
  {
    "path": "examples/docs/en-US/loading.md",
    "content": "## Loading\n\nShow animation while loading data.\n\n### Loading inside a container\n\nDisplays animation in a container (such as a table) while loading data.\n\n:::demo Element 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.\n\n```html\n<template>\n  <el-table\n    v-loading=\"loading\"\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  body {\n    margin: 0;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: 'John Smith',\n          address: 'No.1518,  Jinshajiang Road, Putuo District'\n        }, {\n          date: '2016-05-04',\n          name: 'John Smith',\n          address: 'No.1518,  Jinshajiang Road, Putuo District'\n        }, {\n          date: '2016-05-01',\n          name: 'John Smith',\n          address: 'No.1518,  Jinshajiang Road, Putuo District'\n        }],\n        loading: true\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Customization\n\nYou can customize loading text, loading spinner and background color.\n\n:::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, `element-loading-spinner` and `element-loading-background` are for customizing loading spinner class name and background color.\n```html\n<template>\n  <el-table\n    v-loading=\"loading\"\n    element-loading-text=\"Loading...\"\n    element-loading-spinner=\"el-icon-loading\"\n    element-loading-background=\"rgba(0, 0, 0, 0.8)\"\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: 'John Smith',\n          address: 'No.1518,  Jinshajiang Road, Putuo District'\n        }, {\n          date: '2016-05-04',\n          name: 'John Smith',\n          address: 'No.1518,  Jinshajiang Road, Putuo District'\n        }, {\n          date: '2016-05-01',\n          name: 'John Smith',\n          address: 'No.1518,  Jinshajiang Road, Putuo District'\n        }],\n        loading: true\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Full screen loading\n\nShow a full screen animation while loading data.\n\n:::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.\n\n```html\n<template>\n  <el-button\n    type=\"primary\"\n    @click=\"openFullScreen1\"\n    v-loading.fullscreen.lock=\"fullscreenLoading\">\n    As a directive\n  </el-button>\n  <el-button\n    type=\"primary\"\n    @click=\"openFullScreen2\">\n    As a service\n  </el-button>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        fullscreenLoading: false\n      }\n    },\n    methods: {\n      openFullScreen1() {\n        this.fullscreenLoading = true;\n        setTimeout(() => {\n          this.fullscreenLoading = false;\n        }, 2000);\n      },\n      openFullScreen2() {\n        const loading = this.$loading({\n          lock: true,\n          text: 'Loading',\n          spinner: 'el-icon-loading',\n          background: 'rgba(0, 0, 0, 0.7)'\n        });\n        setTimeout(() => {\n          loading.close();\n        }, 2000);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Service\nYou can also invoke Loading with a service. Import Loading service:\n```javascript\nimport { Loading } from 'element-ui';\n```\nInvoke it:\n```javascript\nLoading.service(options);\n```\nThe 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:\n```javascript\nlet loadingInstance = Loading.service(options);\nthis.$nextTick(() => { // Loading should be closed asynchronously\n  loadingInstance.close();\n});\n```\nNote 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:\n```javascript\nlet loadingInstance1 = Loading.service({ fullscreen: true });\nlet loadingInstance2 = Loading.service({ fullscreen: true });\nconsole.log(loadingInstance1 === loadingInstance2); // true\n```\nCalling the `close` method on any one of them can close this full screen Loading.\n\nIf Element is imported entirely, a globally method `$loading` will be registered to Vue.prototype. You can invoke it like this: `this.$loading(options)`, and it also returns a Loading instance.\n\n### Options\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| 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 |\n| body | same as the `body` modifier of `v-loading` | boolean | — | false |\n| fullscreen | same as the `fullscreen` modifier of `v-loading` | boolean | — | true |\n| lock | same as the `lock` modifier of `v-loading` | boolean | — | false |\n| text | loading text that displays under the spinner | string | — | — |\n| spinner | class name of the custom spinner | string | — | — |\n| background | background color of the mask | string | — | — |\n| customClass | custom class name for Loading | string | — | — |"
  },
  {
    "path": "examples/docs/en-US/menu.md",
    "content": "## NavMenu\n\nMenu that provides navigation for your website.\n\n### Top bar\n\nTop bar NavMenu can be used in a variety of scenarios.\n\n:::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 submenu component to create a second level menu. Menu provides `background-color`, `text-color` and `active-text-color` to customize the colors.\n```html\n<el-menu :default-active=\"activeIndex\" class=\"el-menu-demo\" mode=\"horizontal\" @select=\"handleSelect\">\n  <el-menu-item index=\"1\">Processing Center</el-menu-item>\n  <el-submenu index=\"2\">\n    <template slot=\"title\">Workspace</template>\n    <el-menu-item index=\"2-1\">item one</el-menu-item>\n    <el-menu-item index=\"2-2\">item two</el-menu-item>\n    <el-menu-item index=\"2-3\">item three</el-menu-item>\n    <el-submenu index=\"2-4\">\n      <template slot=\"title\">item four</template>\n      <el-menu-item index=\"2-4-1\">item one</el-menu-item>\n      <el-menu-item index=\"2-4-2\">item two</el-menu-item>\n      <el-menu-item index=\"2-4-3\">item three</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index=\"3\" disabled>Info</el-menu-item>\n  <el-menu-item index=\"4\"><a href=\"https://www.ele.me\" target=\"_blank\">Orders</a></el-menu-item>\n</el-menu>\n<div class=\"line\"></div>\n<el-menu\n  :default-active=\"activeIndex2\"\n  class=\"el-menu-demo\"\n  mode=\"horizontal\"\n  @select=\"handleSelect\"\n  background-color=\"#545c64\"\n  text-color=\"#fff\"\n  active-text-color=\"#ffd04b\">\n  <el-menu-item index=\"1\">Processing Center</el-menu-item>\n  <el-submenu index=\"2\">\n    <template slot=\"title\">Workspace</template>\n    <el-menu-item index=\"2-1\">item one</el-menu-item>\n    <el-menu-item index=\"2-2\">item two</el-menu-item>\n    <el-menu-item index=\"2-3\">item three</el-menu-item>\n    <el-submenu index=\"2-4\">\n      <template slot=\"title\">item four</template>\n      <el-menu-item index=\"2-4-1\">item one</el-menu-item>\n      <el-menu-item index=\"2-4-2\">item two</el-menu-item>\n      <el-menu-item index=\"2-4-3\">item three</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index=\"3\" disabled>Info</el-menu-item>\n  <el-menu-item index=\"4\"><a href=\"https://www.ele.me\" target=\"_blank\">Orders</a></el-menu-item>\n</el-menu>\n\n<script>\n  export default {\n    data() {\n      return {\n        activeIndex: '1',\n        activeIndex2: '1'\n      };\n    },\n    methods: {\n      handleSelect(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Side bar\n\nVertical NavMenu with sub-menus.\n\n:::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.\n```html\n<el-row class=\"tac\">\n  <el-col :span=\"12\">\n    <h5>Default colors</h5>\n    <el-menu\n      default-active=\"2\"\n      class=\"el-menu-vertical-demo\"\n      @open=\"handleOpen\"\n      @close=\"handleClose\">\n      <el-submenu index=\"1\">\n        <template slot=\"title\">\n          <i class=\"el-icon-location\"></i>\n          <span>Navigator One</span>\n        </template>\n        <el-menu-item-group title=\"Group One\">\n          <el-menu-item index=\"1-1\">item one</el-menu-item>\n          <el-menu-item index=\"1-2\">item one</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title=\"Group Two\">\n          <el-menu-item index=\"1-3\">item three</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index=\"1-4\">\n          <template slot=\"title\">item four</template>\n          <el-menu-item index=\"1-4-1\">item one</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index=\"2\">\n        <i class=\"el-icon-menu\"></i>\n        <span>Navigator Two</span>\n      </el-menu-item>\n      <el-menu-item index=\"3\" disabled>\n        <i class=\"el-icon-document\"></i>\n        <span>Navigator Three</span>\n      </el-menu-item>\n      <el-menu-item index=\"4\">\n        <i class=\"el-icon-setting\"></i>\n        <span>Navigator Four</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n  <el-col :span=\"12\">\n    <h5>Custom colors</h5>\n    <el-menu\n      default-active=\"2\"\n      class=\"el-menu-vertical-demo\"\n      @open=\"handleOpen\"\n      @close=\"handleClose\"\n      background-color=\"#545c64\"\n      text-color=\"#fff\"\n      active-text-color=\"#ffd04b\">\n      <el-submenu index=\"1\">\n        <template slot=\"title\">\n          <i class=\"el-icon-location\"></i>\n          <span>Navigator One</span>\n        </template>\n        <el-menu-item-group title=\"Group One\">\n          <el-menu-item index=\"1-1\">item one</el-menu-item>\n          <el-menu-item index=\"1-2\">item one</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title=\"Group Two\">\n          <el-menu-item index=\"1-3\">item three</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index=\"1-4\">\n          <template slot=\"title\">item four</template>\n          <el-menu-item index=\"1-4-1\">item one</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index=\"2\">\n        <i class=\"el-icon-menu\"></i>\n        <span>Navigator Two</span>\n      </el-menu-item>\n      <el-menu-item index=\"3\" disabled>\n        <i class=\"el-icon-document\"></i>\n        <span>Navigator Three</span>\n      </el-menu-item>\n      <el-menu-item index=\"4\">\n        <i class=\"el-icon-setting\"></i>\n        <span>Navigator Four</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n</el-row>\n\n<script>\n  export default {\n    methods: {\n      handleOpen(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Collapse\n\nVertical NavMenu could be collapsed.\n\n:::demo\n```html\n<el-radio-group v-model=\"isCollapse\" style=\"margin-bottom: 20px;\">\n  <el-radio-button :label=\"false\">expand</el-radio-button>\n  <el-radio-button :label=\"true\">collapse</el-radio-button>\n</el-radio-group>\n<el-menu default-active=\"2\" class=\"el-menu-vertical-demo\" @open=\"handleOpen\" @close=\"handleClose\" :collapse=\"isCollapse\">\n  <el-submenu index=\"1\">\n    <template slot=\"title\">\n      <i class=\"el-icon-location\"></i>\n      <span slot=\"title\">Navigator One</span>\n    </template>\n    <el-menu-item-group>\n      <span slot=\"title\">Group One</span>\n      <el-menu-item index=\"1-1\">item one</el-menu-item>\n      <el-menu-item index=\"1-2\">item two</el-menu-item>\n    </el-menu-item-group>\n    <el-menu-item-group title=\"Group Two\">\n      <el-menu-item index=\"1-3\">item three</el-menu-item>\n    </el-menu-item-group>\n    <el-submenu index=\"1-4\">\n      <span slot=\"title\">item four</span>\n      <el-menu-item index=\"1-4-1\">item one</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index=\"2\">\n    <i class=\"el-icon-menu\"></i>\n    <span slot=\"title\">Navigator Two</span>\n  </el-menu-item>\n  <el-menu-item index=\"3\" disabled>\n    <i class=\"el-icon-document\"></i>\n    <span slot=\"title\">Navigator Three</span>\n  </el-menu-item>\n  <el-menu-item index=\"4\">\n    <i class=\"el-icon-setting\"></i>\n    <span slot=\"title\">Navigator Four</span>\n  </el-menu-item>\n</el-menu>\n\n<style>\n  .el-menu-vertical-demo:not(.el-menu--collapse) {\n    width: 200px;\n    min-height: 400px;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        isCollapse: true\n      };\n    },\n    methods: {\n      handleOpen(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Menu Attribute\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------- |---------- |-------------  |-------- |\n| mode     | menu display mode   | string  |   horizontal / vertical   | vertical |\n| collapse  | whether the menu is collapsed (available only in vertical mode) | boolean  |   —   | false |\n| background-color  | background color of Menu (hex format) | string |   —   | #ffffff |\n| text-color  | text color of Menu (hex format) | string |   —   | #303133 |\n| active-text-color  | text color of currently active menu item (hex format) | string |   —   | #409EFF |\n| default-active | index of currently active menu | string    | — | — |\n| default-openeds | array that contains indexes of currently active sub-menus  | Array    | — | — |\n| unique-opened  |  whether only one sub-menu can be active  | boolean   | — | false   |\n| menu-trigger | how sub-menus are triggered, only works when `mode` is 'horizontal' | string    | hover / click | hover |\n| router  | whether `vue-router` mode is activated. If true, index will be used as 'path' to activate the route action | boolean   | — | false   |\n| collapse-transition  | whether to enable the collapse transition | boolean   | — | true   |\n\n### Menu Methods\n| Methods Name | Description | Parameters |\n|---------- |-------- |---------- |\n| open  | open a specific sub-menu | index: index of the sub-menu to open |\n| close  | close a specific sub-menu | index: index of the sub-menu to close |\n\n### Menu Events\n| Event Name | Description | Parameters |\n|---------- |-------- |---------- |\n| select  | callback function when menu is activated | index: index of activated menu, indexPath: index path of activated menu  |\n| open  | callback function when sub-menu expands | index: index of expanded sub-menu, indexPath: index path of expanded sub-menu |\n| close  | callback function when sub-menu collapses | index: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu |\n\n### Menu-Item Events\n| Event Name | Description | Parameters |\n|---------- |-------- |---------- |\n| click  | callback function when menu-item is clicked | el: menu-item instance  |\n\n### SubMenu Attribute\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------- |---------- |-------------  |-------- |\n| index     | unique identification   | string  | — | — |\n| popper-class | custom class name for the popup menu | string | — | — |\n| show-timeout | timeout before showing a sub-menu | number | — | 300 |\n| hide-timeout | timeout before hiding a sub-menu | number | — | 300 |\n| disabled | whether the sub-menu is disabled | boolean | — | false |\n| popper-append-to-body | 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 |\n\n### Menu-Item Attribute\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------- |---------- |-------------  |-------- |\n| index     | unique identification   | string/null  | — | null |\n| route     | Vue Router object   | object | — | — |\n| disabled | whether disabled | boolean | — | false |\n\n### Menu-Group Attribute\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------- |---------- |-------------  |-------- |\n| title     | group title   | string  | — | — |\n"
  },
  {
    "path": "examples/docs/en-US/message-box.md",
    "content": "## MessageBox\n\nA set of modal boxes simulating system message box, mainly for alerting information, confirm operations and prompting messages.\n:::tip\nBy design MessageBox provides simulations of system's `alert`, `confirm` and `prompt`，so it's content should be simple. For more complicated contents, please use Dialog.\n:::\n\n### Alert\n\nAlert interrupts user operation until the user confirms.\n\n:::demo Open an alert by calling the `$alert` method. It simulates the system's `alert`, and cannot be closed by pressing ESC or clicking outside the box. In this example, two parameters `message` and `title` are received. It is worth mentioning that when the box is closed, it returns a `Promise` object for further processing. If you are not sure if your target browsers support `Promise`, you should import a third party polyfill or use callbacks instead like this example.\n\n```html\n<template>\n  <el-button type=\"text\" @click=\"open\">Click to open the Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$alert('This is a message', 'Title', {\n          confirmButtonText: 'OK',\n          callback: action => {\n            this.$message({\n              type: 'info',\n              message: `action: ${ action }`\n            });\n          }\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Confirm\n\nConfirm is used to ask users' confirmation.\n\n:::demo Call `$confirm` method to open a confirm, and it simulates the system's `confirm`. We can also highly customize Message Box by passing a third attribute `options` which is a literal object. The attribute `type` indicates the message type, and it's value can be `success`, `error`, `info` and `warning`. Note that the second attribute `title` must be a `string`, and if it is an `object`, it will be handled as the attribute `options`. Here we use `Promise` to handle further processing. \n\n```html\n<template>\n  <el-button type=\"text\" @click=\"open\">Click to open the Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          type: 'warning'\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: 'Delete completed'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Delete canceled'\n          });          \n        });\n      }\n    }\n  }\n</script>\n```\n\n:::\n\n### Prompt\n\nPrompt is used when user input is required.\n\n:::demo Call `$prompt` method to open a prompt, and it simulates the system's `prompt`. You can use `inputPattern` parameter to specify your own RegExp pattern. Use `inputValidator` to specify validation method, and it should return `Boolean` or `String`. Returning `false` or `String` means the validation has failed, and the string returned will be used as the `inputErrorMessage`. In addition, you can customize the placeholder of the input box with `inputPlaceholder` parameter.\n\n```html\n<template>\n  <el-button type=\"text\" @click=\"open\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$prompt('Please input your e-mail', 'Tip', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          inputPattern: /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n          inputErrorMessage: 'Invalid Email'\n        }).then(({ value }) => {\n          this.$message({\n            type: 'success',\n            message: 'Your email is:' + value\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Input canceled'\n          });       \n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Customization\n\nCan be customized to show various content.\n\n:::demo The three methods mentioned above are repackagings of the `$msgbox` method. This example calls `$msgbox` method directly using the `showCancelButton` attribute, which is used to indicate if a cancel button is displayed. Besides we can use `cancelButtonClass` to add a custom style and `cancelButtonText` to customize the button text (the confirm button also has these fields, and a complete list of fields can be found at the end of this documentation). This example also uses the `beforeClose` attribute. It is a method and will be triggered when the MessageBox instance will be closed, and its execution will stop the instance from closing. It has three parameters: `action`, `instance` and `done`. Using it enables you to manipulate the instance before it closes, e.g. activating `loading` for confirm button; you can invoke the `done` method to close the MessageBox instance (if `done` is not called inside `beforeClose`, the instance will not be closed).\n\n```html\n<template>\n  <el-button type=\"text\" @click=\"open\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        const h = this.$createElement;\n        this.$msgbox({\n          title: 'Message',\n          message: h('p', null, [\n            h('span', null, 'Message can be '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ]),\n          showCancelButton: true,\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          beforeClose: (action, instance, done) => {\n            if (action === 'confirm') {\n              instance.confirmButtonLoading = true;\n              instance.confirmButtonText = 'Loading...';\n              setTimeout(() => {\n                done();\n                setTimeout(() => {\n                  instance.confirmButtonLoading = false;\n                }, 300);\n              }, 3000);\n            } else {\n              done();\n            }\n          }\n        }).then(action => {\n          this.$message({\n            type: 'info',\n            message: 'action: ' + action\n          });\n        });\n      },\n    }\n  }\n</script>\n```\n:::\n\n:::tip\nThe content of MessageBox can be `VNode`, allowing us to pass custom components. When opening the MessageBox, Vue compares new `VNode` with old `VNode`, then figures out how to efficiently update the UI, so the components may not be completely re-rendered ([#8931](https://github.com/ElemeFE/element/issues/8931)). In this case, you can add a unique key to `VNode` each time MessageBox opens: [example](https://jsfiddle.net/zhiyang/ezmhq2ef).\n:::\n\n### Use HTML String\n\n`message` supports HTML string.\n\n:::demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string.\n\n```html\n<template>\n  <el-button type=\"text\" @click=\"open\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {\n          dangerouslyUseHTMLString: true\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n:::warning\nAlthough `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.\n:::\n\n### Distinguishing cancel and close\n\nIn some cases, clicking the cancel button and close button may have different meanings.\n\n:::demo By default, the parameters of Promise's reject callback and `callback` are 'cancel' when the user cancels (clicking the cancel button) and closes (clicking the close button or mask layer, pressing the ESC key) the MessageBox. If `distinguishCancelAndClose` is set to true, the parameters of the above two operations are 'cancel' and 'close' respectively.\n\n```html\n<template>\n  <el-button type=\"text\" @click=\"open\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$confirm('You have unsaved changes, save and proceed?', 'Confirm', {\n          distinguishCancelAndClose: true,\n          confirmButtonText: 'Save',\n          cancelButtonText: 'Discard Changes'\n        })\n          .then(() => {\n            this.$message({\n              type: 'info',\n              message: 'Changes saved. Proceeding to a new route.'\n            });\n          })\n          .catch(action => {\n            this.$message({\n              type: 'info',\n              message: action === 'cancel'\n                ? 'Changes discarded. Proceeding to a new route.'\n                : 'Stay in the current route'\n            })\n          });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Centered content\nContent of MessageBox can be centered.\n\n:::demo Setting `center` to `true` will center the content\n\n```html\n<template>\n  <el-button type=\"text\" @click=\"open\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          type: 'warning',\n          center: true\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: 'Delete completed'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Delete canceled'\n          });\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Global method\n\nIf Element is fully imported, it will add the following global methods for Vue.prototype: `$msgbox`, `$alert`, `$confirm` and `$prompt`. So in a Vue instance you can call `MessageBox` like what we did in this page. The parameters are:\n- `$msgbox(options)`\n- `$alert(message, title, options)` or `$alert(message, options)`\n- `$confirm(message, title, options)` or `$confirm(message, options)`\n- `$prompt(message, title, options)` or `$prompt(message, options)`\n\n### Local import\n\nIf you prefer importing `MessageBox` on demand:\n\n```javascript\nimport { MessageBox } from 'element-ui';\n```\n\nThe corresponding methods are: `MessageBox`, `MessageBox.alert`, `MessageBox.confirm` and `MessageBox.prompt`. The parameters are the same as above.\n\n### Options\n\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| title | title of the MessageBox | string | — | — |\n| message | content of the MessageBox | string | — | — |\n| dangerouslyUseHTMLString | whether `message` is treated as HTML string | boolean | — | false |\n| type | message type, used for icon display | string | success / info / warning / error | — |\n| iconClass | custom icon's class, overrides `type` | string | — | — |\n| customClass | custom class name for MessageBox | string | — | — |\n| callback | MessageBox closing callback if you don't prefer Promise | function(action), where action can be 'confirm', 'cancel' or 'close', and `instance` is the MessageBox instance. You can access to that instance's attributes and methods | — | — |\n| showClose | whether to show close icon of MessageBox | boolean | — | true |\n| beforeClose | callback before MessageBox closes, and it will prevent MessageBox from closing | function(action, instance, done), where `action` can be 'confirm', 'cancel' or 'close'; `instance` is the MessageBox instance, and you can access to that instance's attributes and methods; `done` is for closing the instance | — | — |\n| distinguishCancelAndClose | whether to distinguish canceling and closing the MessageBox | boolean | — | false |\n| lockScroll | whether to lock body scroll when MessageBox prompts | boolean | — | true |\n| showCancelButton | whether to show a cancel button | boolean | — | false (true when called with confirm and prompt) |\n| showConfirmButton | whether to show a confirm button | boolean | — | true |\n| cancelButtonText | text content of cancel button | string | — | Cancel |\n| confirmButtonText | text content of confirm button | string | — | OK |\n| cancelButtonClass | custom class name of cancel button | string | — | — |\n| confirmButtonClass | custom class name of confirm button | string | — | — |\n| closeOnClickModal | whether MessageBox can be closed by clicking the mask | boolean | — | true (false when called with alert) |\n| closeOnPressEscape | whether MessageBox can be closed by pressing the ESC | boolean | — | true (false when called with alert) |\n| closeOnHashChange | whether to close MessageBox when hash changes | boolean | — | true |\n| showInput | whether to show an input | boolean | — | false (true when called with prompt) |\n| inputPlaceholder | placeholder of input | string | — | — |\n| inputType | type of input | string | — | text |\n| inputValue | initial value of input | string | — | — |\n| inputPattern | regexp for the input | regexp | — | — |\n| inputValidator | validation function for the input. Should returns a boolean or string. If a string is returned, it will be assigned to inputErrorMessage | function | — | — |\n| inputErrorMessage | error message when validation fails | string | — | Illegal input |\n| center | whether to align the content in center | boolean | — | false |\n| roundButton | whether to use round button | boolean | — | false |\n"
  },
  {
    "path": "examples/docs/en-US/message.md",
    "content": "## Message\n\nUsed to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification.\n\n### Basic usage\n\nDisplays at the top, and disappears after 3 seconds.\n\n:::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 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.\n\n```html\n<template>\n  <el-button :plain=\"true\" @click=\"open\">Show message</el-button>\n  <el-button :plain=\"true\" @click=\"openVn\">VNode</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$message('This is a message.');\n      },\n\n      openVn() {\n        const h = this.$createElement;\n        this.$message({\n          message: h('p', null, [\n            h('span', null, 'Message can be '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ])\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Types\n\nUsed to show the feedback of Success, Warning, Message and Error activities.\n\n:::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`.\n```html\n<template>\n  <el-button :plain=\"true\" @click=\"open2\">success</el-button>\n  <el-button :plain=\"true\" @click=\"open3\">warning</el-button>\n  <el-button :plain=\"true\" @click=\"open1\">message</el-button>\n  <el-button :plain=\"true\" @click=\"open4\">error</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open1() {\n        this.$message('This is a message.');\n      },\n      open2() {\n        this.$message({\n          message: 'Congrats, this is a success message.',\n          type: 'success'\n        });\n      },\n\n      open3() {\n        this.$message({\n          message: 'Warning, this is a warning message.',\n          type: 'warning'\n        });\n      },\n\n      open4() {\n        this.$message.error('Oops, this is a error message.');\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Closable\n\nA close button can be added.\n\n:::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`.\n```html\n<template>\n  <el-button :plain=\"true\" @click=\"open1\">message</el-button>\n  <el-button :plain=\"true\" @click=\"open2\">success</el-button>\n  <el-button :plain=\"true\" @click=\"open3\">warning</el-button>\n  <el-button :plain=\"true\" @click=\"open4\">error</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open1() {\n        this.$message({\n          showClose: true,\n          message: 'This is a message.'\n        });\n      },\n\n      open2() {\n        this.$message({\n          showClose: true,\n          message: 'Congrats, this is a success message.',\n          type: 'success'\n        });\n      },\n\n      open3() {\n        this.$message({\n          showClose: true,\n          message: 'Warning, this is a warning message.',\n          type: 'warning'\n        });\n      },\n\n      open4() {\n        this.$message({\n          showClose: true,\n          message: 'Oops, this is a error message.',\n          type: 'error'\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Centered text\nUse the `center` attribute to center the text.\n\n:::demo\n\n```html\n<template>\n  <el-button :plain=\"true\" @click=\"openCenter\">Centered text</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      openCenter() {\n        this.$message({\n          message: 'Centered text',\n          center: true\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Use HTML string\n`message` supports HTML string.\n\n:::demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string.\n\n```html\n<template>\n  <el-button :plain=\"true\" @click=\"openHTML\">Use HTML String</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      openHTML() {\n        this.$message({\n          dangerouslyUseHTMLString: true,\n          message: '<strong>This is <i>HTML</i> string</strong>'\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n:::warning\nAlthough `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.\n:::\n\n### Global method\n\nElement has added a global method `$message` for Vue.prototype. So in a vue instance you can call `Message` like what we did in this page.\n\n### Local import\n\nImport `Message`:\n\n```javascript\nimport { Message } from 'element-ui';\n```\n\nIn this case you should call `Message(options)`. We have also registered methods for different types, e.g. `Message.success(options)`. You can call `Message.closeAll()` to manually close all the instances.\n\n### Options\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| message | message text | string / VNode | — | — |\n| type | message type | string | success/warning/info/error | info |\n| iconClass | custom icon's class, overrides `type` | string | — | — |\n| dangerouslyUseHTMLString | whether `message` is treated as HTML string | boolean | — | false |\n| customClass | custom class name for Message | string | — | — |\n| duration | display duration, millisecond. If set to 0, it will not turn off automatically | number | — | 3000 |\n| showClose | whether to show a close button | boolean | — | false |\n| center | whether to center the text | boolean | — | false |\n| onClose | callback function when closed with the message instance as the parameter | function | — | — |\n| offset | set the distance to the top of viewport | number | — | 20 |\n\n### Methods\n`Message` and `this.$message` returns the current Message instance. To manually close the instance, you can call `close` on it.\n| Method | Description |\n| ---- | ---- |\n| close | close the Message |\n"
  },
  {
    "path": "examples/docs/en-US/notification.md",
    "content": "## Notification\n\nDisplays a global notification message at a corner of the page.\n\n### Basic usage\n\n:::demo Element 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.\n\n```html\n<template>\n  <el-button\n    plain\n    @click=\"open1\">\n    Closes automatically\n  </el-button>\n  <el-button\n    plain\n    @click=\"open2\">\n    Won't close automatically\n    </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open1() {\n        const h = this.$createElement;\n\n        this.$notify({\n          title: 'Title',\n          message: h('i', { style: 'color: teal' }, 'This is a reminder')\n        });\n      },\n\n      open2() {\n        this.$notify({\n          title: 'Prompt',\n          message: 'This is a message that does not automatically close',\n          duration: 0\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### With types\n\nWe provide four types: success, warning, info and error.\n\n:::demo Element 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.\n```html\n<template>\n  <el-button\n    plain\n    @click=\"open1\">\n    Success\n  </el-button>\n  <el-button\n    plain\n    @click=\"open2\">\n    Warning\n  </el-button>\n  <el-button\n    plain\n    @click=\"open3\">\n    Info\n  </el-button>\n  <el-button\n    plain\n    @click=\"open4\">\n    Error\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open1() {\n        this.$notify({\n          title: 'Success',\n          message: 'This is a success message',\n          type: 'success'\n        });\n      },\n\n      open2() {\n        this.$notify({\n          title: 'Warning',\n          message: 'This is a warning message',\n          type: 'warning'\n        });\n      },\n\n      open3() {\n        this.$notify.info({\n          title: 'Info',\n          message: 'This is an info message'\n        });\n      },\n\n      open4() {\n        this.$notify.error({\n          title: 'Error',\n          message: 'This is an error message'\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Custom position\n\nNotification can emerge from any corner you like.\n\n:::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`.\n```html\n<template>\n  <el-button\n    plain\n    @click=\"open1\">\n    Top Right\n  </el-button>\n  <el-button\n    plain\n    @click=\"open2\">\n    Bottom Right\n  </el-button>\n  <el-button\n    plain\n    @click=\"open3\">\n    Bottom Left\n  </el-button>\n  <el-button\n    plain\n    @click=\"open4\">\n    Top Left\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open1() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the top right corner'\n        });\n      },\n\n      open2() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the bottom right corner',\n          position: 'bottom-right'\n        });\n      },\n\n      open3() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the bottom left corner',\n          position: 'bottom-left'\n        });\n      },\n\n      open4() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the top left corner',\n          position: 'top-left'\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### With offset\n\nCustomize Notification's offset from the edge of the screen.\n\n:::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.\n```html\n<template>\n  <el-button\n    plain\n    @click=\"open\">\n    Notification with offset\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$notify.success({\n          title: 'Success',\n          message: 'This is a success message',\n          offset: 100\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Use HTML string\n`message` supports HTML string.\n\n:::demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string.\n```html\n<template>\n  <el-button\n    plain\n    @click=\"open\">\n    Use HTML String\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$notify({\n          title: 'HTML String',\n          dangerouslyUseHTMLString: true,\n          message: '<strong>This is <i>HTML</i> string</strong>'\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n:::warning\nAlthough `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.\n:::\n\n### Hide close button\n\nIt is possible to hide the close button\n\n:::demo Set the `showClose` attribute to `false` so the notification cannot be closed by the user.\n```html\n<template>\n  <el-button\n    plain\n    @click=\"open\">\n    Hide close button\n    </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$notify.success({\n          title: 'Info',\n          message: 'This is a message without close button',\n          showClose: false\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Global method\n\nElement has added a global method `$notify` for Vue.prototype. So in a vue instance you can call `Notification` like what we did in this page.\n\n### Local import\n\nImport `Notification`:\n\n```javascript\nimport { Notification } from 'element-ui';\n```\n\nIn this case you should call `Notification(options)`. We have also registered methods for different types, e.g. `Notification.success(options)`. You can call `Notification.closeAll()` to manually close all the instances.\n\n### Options\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| title | title | string | — | — |\n| message | description text | string/Vue.VNode | — | — |\n| dangerouslyUseHTMLString | whether `message` is treated as HTML string | boolean | — | false |\n| type | notification type | string | success/warning/info/error | — |\n| iconClass | custom icon's class. It will be overridden by `type` | string | — | — |\n| customClass | custom class name for Notification | string | — | — |\n| duration | duration before close. It will not automatically close if set 0 | number | — | 4500 |\n| position | custom position | string | top-right/top-left/bottom-right/bottom-left | top-right |\n| showClose | whether to show a close button | boolean | — | true |\n| onClose | callback function when closed | function | — | — |\n| onClick | callback function when notification clicked | function | — | — |\n| offset | offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset | number | — | 0 |\n\n### Methods\n`Notification` and `this.$notify` returns the current Notification instance. To manually close the instance, you can call `close` on it.\n| Method | Description |\n| ---- | ---- |\n| close | close the Notification |\n"
  },
  {
    "path": "examples/docs/en-US/page-header.md",
    "content": "## PageHeader\n\nIf path of the page is simple, it is recommended to use PageHeader instead of the Breadcrumb.\n\n### Basic\n\n:::demo\n```html\n<el-page-header @back=\"goBack\" content=\"detail\">\n</el-page-header>\n\n<script>\n  export default {\n    methods: {\n      goBack() {\n        console.log('go back');\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Attributes\n| Attribute | Description   | Type      | Accepted Values               | Default |\n|---------- |-------------- |---------- |------------------------------ | ------ |\n| title     | main title    | string    |  —                            | Back   |\n| content   | content       | string    |  —                            | —      |\n\n### Events\n| Event Name | Description   | Parameters |\n|----------- |-------------- |----------- |\n| back       | triggers when right side is clicked | — |\n\n### Slots\n| slot      | Description            |\n|---------- | ---------------------- |\n| title     | title content          |\n| content   | content                |\n"
  },
  {
    "path": "examples/docs/en-US/pagination.md",
    "content": "## Pagination\n\nIf you have too much data to display in one page, use pagination.\n\n### Basic usage\n\n:::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).\n```html\n<div class=\"block\">\n  <span class=\"demonstration\">When you have few pages</span>\n  <el-pagination\n    layout=\"prev, pager, next\"\n    :total=\"50\">\n  </el-pagination>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">When you have more than 7 pages</span>\n  <el-pagination\n    layout=\"prev, pager, next\"\n    :total=\"1000\">\n  </el-pagination>\n</div>\n```\n:::\n\n### Number of pagers\n\n:::demo By default, Pagination collapses extra pager buttons when it has more than 7 pages. This can be configured with the `pager-count` attribute.\n```html\n<el-pagination\n  :page-size=\"20\"\n  :pager-count=\"11\"\n  layout=\"prev, pager, next\"\n  :total=\"1000\">\n</el-pagination>\n```\n:::\n\n### Buttons with background color\n\n:::demo Set the `background` attribute and the buttons will have a background color.\n```html\n<el-pagination\n  background\n  layout=\"prev, pager, next\"\n  :total=\"1000\">\n</el-pagination>\n```\n:::\n\n### Small Pagination\n\nUse small pagination in the case of limited space.\n\n:::demo Just set the `small` attribute to `true` and the Pagination becomes smaller.\n```html\n<el-pagination\n  small\n  layout=\"prev, pager, next\"\n  :total=\"50\">\n</el-pagination>\n```\n:::\n\n### More elements\n\nAdd more modules based on your scenario.\n\n:::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.\n\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">Total item count</span>\n    <el-pagination\n      @size-change=\"handleSizeChange\"\n      @current-change=\"handleCurrentChange\"\n      :current-page.sync=\"currentPage1\"\n      :page-size=\"100\"\n      layout=\"total, prev, pager, next\"\n      :total=\"1000\">\n    </el-pagination>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Change page size</span>\n    <el-pagination\n      @size-change=\"handleSizeChange\"\n      @current-change=\"handleCurrentChange\"\n      :current-page.sync=\"currentPage2\"\n      :page-sizes=\"[100, 200, 300, 400]\"\n      :page-size=\"100\"\n      layout=\"sizes, prev, pager, next\"\n      :total=\"1000\">\n    </el-pagination>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Jump to</span>\n    <el-pagination\n      @size-change=\"handleSizeChange\"\n      @current-change=\"handleCurrentChange\"\n      :current-page.sync=\"currentPage3\"\n      :page-size=\"100\"\n      layout=\"prev, pager, next, jumper\"\n      :total=\"1000\">\n    </el-pagination>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">All combined</span>\n    <el-pagination\n      @size-change=\"handleSizeChange\"\n      @current-change=\"handleCurrentChange\"\n      :current-page.sync=\"currentPage4\"\n      :page-sizes=\"[100, 200, 300, 400]\"\n      :page-size=\"100\"\n      layout=\"total, sizes, prev, pager, next, jumper\"\n      :total=\"400\">\n    </el-pagination>\n  </div>\n</template>\n<script>\n  export default {\n    methods: {\n      handleSizeChange(val) {\n        console.log(`${val} items per page`);\n      },\n      handleCurrentChange(val) {\n        console.log(`current page: ${val}`);\n      }\n    },\n    data() {\n      return {\n        currentPage1: 5,\n        currentPage2: 5,\n        currentPage3: 5,\n        currentPage4: 4\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Hide pagination when there is only one page\n\nWhen there is only one page, hide the pagination by setting the `hide-on-single-page` attribute.\n\n:::demo\n```html\n<div>\n <el-switch v-model=\"value\">\n </el-switch>\n <el-pagination\n  :hide-on-single-page=\"value\"\n  :total=\"5\"\n  layout=\"prev, pager, next\">\n</el-pagination>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: false\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Attributes\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|--------------------|----------------------------------------------------------|-------------------|-------------|--------|\n| small              |   whether to use small pagination    | boolean |      —       | false |\n| background | whether the buttons have a background color | boolean | — | false |\n| page-size              | item count of each page, supports the .sync modifier  | number |      —       | 10 |\n| total | total item count | number | — | — |\n| 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 | — | — |\n| pager-count | number of pagers. Pagination collapses when the total page count exceeds this value | number | odd number between 5 and 21 | 7 |\n| current-page | current page number, supports the .sync modifier | number | — | 1 |\n| layout | layout of Pagination, elements separated with a comma | string | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total'  |\n| page-sizes | options of item count per page | number[] | — |  [10, 20, 30, 40, 50, 100] |\n| popper-class | custom class name for the page size Select's dropdown | string | — | — |\n| prev-text | text for the prev button | string | — | — |\n| next-text | text for the next button | string | — | — |\n| disabled | whether Pagination is disabled | boolean | — | false |\n| hide-on-single-page | whether to hide when there's only one page | boolean | — | - |\n\n### Events\n| Event Name | Description | Parameters |\n|---------|--------|---------|\n| size-change | triggers when `page-size` changes | the new page size |\n| current-change | triggers when `current-page` changes | the new current page |\n| prev-click | triggers when the prev button is clicked and current page changes | the new current page |\n| next-click | triggers when the next button is clicked and current page changes | the new current page |\n\n### Slot\n| Name | Description |\n| --- | --- |\n| — | custom content. To use this, you need to declare `slot` in `layout` |\n"
  },
  {
    "path": "examples/docs/en-US/popconfirm.md",
    "content": "## Popconfirm \n\nA simple confirmation dialog of an element click action.\n\n### Basic usage\n\nPopconfirm is similar to Popover. So for some duplicated attributes, please refer to the documentation of Popover.\n\n:::demo Only `title` attribute is avaliable in Popconfirm, `content` will be ignored.\n```html\n<template>\n<el-popconfirm\n  title=\"Are you sure to delete this?\"\n>\n  <el-button slot=\"reference\">Delete</el-button>\n</el-popconfirm>\n</template>\n````\n:::\n\n### Customise\nYou can customise Popconfirm like:\n:::demo\n```html\n<template>\n<el-popconfirm\n  confirm-button-text='OK'\n  cancel-button-text='No, Thanks'\n  icon=\"el-icon-info\"\n  icon-color=\"red\"\n  title=\"Are you sure to delete this?\"\n>\n  <el-button slot=\"reference\">Delete</el-button>\n</el-popconfirm>\n</template>\n```\n:::\n\n### Attributes\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|--------------------|----------------------------------------------------------|-------------------|-------------|--------|\n|  title              | Title | String | — | — |\n|  confirm-button-text              | Confirm button text | String | — | — |\n|  cancel-button-text              | Cancel button text | String | — | — |\n|  confirm-button-type              | Confirm button type | String | — | Primary |\n|  cancel-button-type              | Cancel button type | String | — | Text |\n|  icon              | Icon | String | — | el-icon-question |\n|  icon-color              | Icon color | String | — | #f90 |\n|  hide-icon              | is hide Icon | Boolean | — | false |\n\n### Slot\n| Name | Description |\n|--- | ---|\n| reference | HTML element that triggers Popconfirm |\n\n### Events\n| Event Name | Description | Parameters |\n|---------|--------|---------|\n| confirm | triggers when click confirm button | — |\n| cancel | triggers when click cancel button | — |"
  },
  {
    "path": "examples/docs/en-US/popover.md",
    "content": "## Popover\n\n### Basic usage\n\nSimilar to Tooltip, Popover is also built with `Vue-popper`. So for some duplicated attributes, please refer to the documentation of Tooltip.\n\n:::demo The `trigger` attribute is used to define how popover is triggered: `hover`, `click`, `focus` or `manual`. As for the triggering element, you can write it in two different ways: use the `slot=\"reference\"` named slot, or use the `v-popover` directive and set it to Popover's `ref`.\n\n```html\n<template>\n  <el-popover\n    placement=\"top-start\"\n    title=\"Title\"\n    width=\"200\"\n    trigger=\"hover\"\n    content=\"this is content, this is content, this is content\">\n    <el-button slot=\"reference\">Hover to activate</el-button>\n  </el-popover>\n\n  <el-popover\n    placement=\"bottom\"\n    title=\"Title\"\n    width=\"200\"\n    trigger=\"click\"\n    content=\"this is content, this is content, this is content\">\n    <el-button slot=\"reference\">Click to activate</el-button>\n  </el-popover>\n\n  <el-popover\n    ref=\"popover\"\n    placement=\"right\"\n    title=\"Title\"\n    width=\"200\"\n    trigger=\"focus\"\n    content=\"this is content, this is content, this is content\">\n  </el-popover>\n  <el-button v-popover:popover>Focus to activate</el-button>\n\n  <el-popover\n    placement=\"bottom\"\n    title=\"Title\"\n    width=\"200\"\n    trigger=\"manual\"\n    content=\"this is content, this is content, this is content\"\n    v-model=\"visible\">\n    <el-button slot=\"reference\" @click=\"visible = !visible\">Manual to activate</el-button>\n  </el-popover>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        visible: false\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Nested information\n\nOther components can be nested in popover. Following is an example of nested table.\n\n:::demo replace the `content` attribute with a default `slot`.\n\n```html\n<el-popover\n  placement=\"right\"\n  width=\"400\"\n  trigger=\"click\">\n  <el-table :data=\"gridData\">\n    <el-table-column width=\"150\" property=\"date\" label=\"date\"></el-table-column>\n    <el-table-column width=\"100\" property=\"name\" label=\"name\"></el-table-column>\n    <el-table-column width=\"300\" property=\"address\" label=\"address\"></el-table-column>\n  </el-table>\n  <el-button slot=\"reference\">Click to activate</el-button>\n</el-popover>\n\n<script>\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: '2016-05-02',\n          name: 'Jack',\n          address: 'New York City'\n        }, {\n          date: '2016-05-04',\n          name: 'Jack',\n          address: 'New York City'\n        }, {\n          date: '2016-05-01',\n          name: 'Jack',\n          address: 'New York City'\n        }, {\n          date: '2016-05-03',\n          name: 'Jack',\n          address: 'New York City'\n        }]\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Nested operation\n\nOf course, you can nest other operations. It's more light-weight than using a dialog.\n\n:::demo\n```html\n<el-popover\n  placement=\"top\"\n  width=\"160\"\n  v-model=\"visible\">\n  <p>Are you sure to delete this?</p>\n  <div style=\"text-align: right; margin: 0\">\n    <el-button size=\"mini\" type=\"text\" @click=\"visible = false\">cancel</el-button>\n    <el-button type=\"primary\" size=\"mini\" @click=\"visible = false\">confirm</el-button>\n  </div>\n  <el-button slot=\"reference\">Delete</el-button>\n</el-popover>\n\n<script>\n  export default {\n    data() {\n      return {\n        visible: false,\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Attributes\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|--------------------|----------------------------------------------------------|-------------------|-------------|--------|\n| trigger | how the popover is triggered | string  | click/focus/hover/manual |    click    |\n|  title              | popover title | string | — | — |\n|  content        |  popover content, can be replaced with a default `slot`    | string            | — | — |\n|  width        |  popover width  | string, number            | — | Min width 150px |\n|  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 |\n|  disabled       |  whether Popover is disabled  | boolean    | — |  false |\n|  value / v-model        |  whether popover is visible  | Boolean           | — |  false |\n|  offset        |  popover offset  | number           | — |  0 |\n|  transition     |  popover transition animation      | string             | — | el-fade-in-linear |\n|  visible-arrow   |  whether a tooltip arrow is displayed or not. For more info, please refer to [Vue-popper](https://github.com/element-component/vue-popper) | boolean | — | true |\n|  popper-options        | parameters for [popper.js](https://popper.js.org/docs/v2/) | object            | please refer to [popper.js](https://popper.js.org/docs/v2/) | `{ boundariesElement: 'body', gpuAcceleration: false }` |\n|  popper-class        |  custom class name for popover | string | — | — |\n|  open-delay        | delay before appearing when `trigger` is hover, in milliseconds | number | — | — |\n|  close-delay        | delay before disappearing when `trigger` is hover, in milliseconds | number | — | 200 |\n|  tabindex          | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Popover | number | — | 0 |\n\n### Slot\n| Name | Description |\n| --- | --- |\n| — | text content of popover |\n| reference | HTML element that triggers popover |\n\n### Events\n| Event Name | Description | Parameters |\n|---------|--------|---------|\n| show | triggers when popover shows | — |\n| after-enter | triggers when the entering transition ends | — |\n| hide | triggers when popover hides | — |\n| after-leave | triggers when the leaving transition ends | — |\n"
  },
  {
    "path": "examples/docs/en-US/progress.md",
    "content": "## Progress\n\nProgress is used to show the progress of current operation, and inform the user the current status.\n\n### Linear progress bar\n\n:::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`.\n```html\n<el-progress :percentage=\"50\"></el-progress>\n<el-progress :percentage=\"100\" :format=\"format\"></el-progress>\n<el-progress :percentage=\"100\" status=\"success\"></el-progress>\n<el-progress :percentage=\"100\" status=\"warning\"></el-progress>\n<el-progress :percentage=\"50\" status=\"exception\"></el-progress>\n\n<script>\n  export default {\n    methods: {\n      format(percentage) {\n        return percentage === 100 ? 'Full' : `${percentage}%`;\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Internal percentage\n\nIn this case the percentage takes no additional space.\n\n:::demo `stroke-width` attribute decides the `width` of progress bar, and use `text-inside` attribute to put description inside the progress bar.\n```html\n<el-progress :text-inside=\"true\" :stroke-width=\"26\" :percentage=\"70\"></el-progress>\n<el-progress :text-inside=\"true\" :stroke-width=\"24\" :percentage=\"100\" status=\"success\"></el-progress>\n<el-progress :text-inside=\"true\" :stroke-width=\"22\" :percentage=\"80\" status=\"warning\"></el-progress>\n<el-progress :text-inside=\"true\" :stroke-width=\"20\" :percentage=\"50\" status=\"exception\"></el-progress>\n```\n:::\n\n### Custom color\n\nYou can use `color` attr to set the progress bar color. it accepts color string, function, or array.\n\n:::demo\n\n```html\n<el-progress :percentage=\"percentage\" :color=\"customColor\"></el-progress>\n\n<el-progress :percentage=\"percentage\" :color=\"customColorMethod\"></el-progress>\n\n<el-progress :percentage=\"percentage\" :color=\"customColors\"></el-progress>\n<div>\n  <el-button-group>\n    <el-button icon=\"el-icon-minus\" @click=\"decrease\"></el-button>\n    <el-button icon=\"el-icon-plus\" @click=\"increase\"></el-button>\n  </el-button-group>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        percentage: 20,\n        customColor: '#409eff',\n        customColors: [\n          {color: '#f56c6c', percentage: 20},\n          {color: '#e6a23c', percentage: 40},\n          {color: '#5cb87a', percentage: 60},\n          {color: '#1989fa', percentage: 80},\n          {color: '#6f7ad3', percentage: 100}\n        ]\n      };\n    },\n    methods: {\n      customColorMethod(percentage) {\n        if (percentage < 30) {\n          return '#909399';\n        } else if (percentage < 70) {\n          return '#e6a23c';\n        } else {\n          return '#67c23a';\n        }\n      },\n      increase() {\n        this.percentage += 10;\n        if (this.percentage > 100) {\n          this.percentage = 100;\n        }\n      },\n      decrease() {\n        this.percentage -= 10;\n        if (this.percentage < 0) {\n          this.percentage = 0;\n        }\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Circular progress bar\n\n:::demo You can specify `type` attribute to `circle` to use circular progress bar, and use `width` attribute to change the size of circle.\n```html\n<el-progress type=\"circle\" :percentage=\"0\"></el-progress>\n<el-progress type=\"circle\" :percentage=\"25\"></el-progress>\n<el-progress type=\"circle\" :percentage=\"100\" status=\"success\"></el-progress>\n<el-progress type=\"circle\" :percentage=\"70\" status=\"warning\"></el-progress>\n<el-progress type=\"circle\" :percentage=\"50\" status=\"exception\"></el-progress>\n```\n:::\n\n### Dashboard progress bar\n\nYou also can specify `type` attribute to `dashboard` to use dashboard progress bar.\n\n:::demo\n\n```html\n<el-progress type=\"dashboard\" :percentage=\"percentage\" :color=\"colors\"></el-progress>\n<div>\n  <el-button-group>\n    <el-button icon=\"el-icon-minus\" @click=\"decrease\"></el-button>\n    <el-button icon=\"el-icon-plus\" @click=\"increase\"></el-button>\n  </el-button-group>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        percentage: 10,\n        colors: [\n          {color: '#f56c6c', percentage: 20},\n          {color: '#e6a23c', percentage: 40},\n          {color: '#5cb87a', percentage: 60},\n          {color: '#1989fa', percentage: 80},\n          {color: '#6f7ad3', percentage: 100}\n        ]\n      };\n    },\n    methods: {\n      increase() {\n        this.percentage += 10;\n        if (this.percentage > 100) {\n          this.percentage = 100;\n        }\n      },\n      decrease() {\n        this.percentage -= 10;\n        if (this.percentage < 0) {\n          this.percentage = 0;\n        }\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Attributes\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n| --- | ---- | ---- | ---- | ---- |\n| **percentage** | percentage, **required** | number | 0-100 | 0 |\n| type | the type of progress bar | string | line/circle/dashboard | line |\n| stroke-width | the width of progress bar | number | — | 6 |\n| text-inside | whether to place the percentage inside progress bar, only works when `type` is 'line' | boolean | — | false |\n| status | the current status of progress bar | string | success/exception/warning | — |\n| color  | background color of progress bar. Overrides `status` prop | string/function/array | — | '' |\n| width | the canvas width of circle progress bar | number | — | 126 |\n| show-text | whether to show percentage | boolean | — | true |\n| stroke-linecap  | circle/dashboard type shape at the end path | string | butt/round/square | round |\n| format  | custom text format  | function(percentage) | — | — |\n| define-back-color  | background color of progress bar (hex format) | string | — | — |\n| text-color  | text color of progress bar (hex format) | string | — | — |"
  },
  {
    "path": "examples/docs/en-US/quickstart.md",
    "content": "## Quick start\n\nThis part walks you through the process of using Element in a webpack project.\n\n### Use vue-cli@3\n\nWe provide an [Element plugin](https://github.com/ElementUI/vue-cli-plugin-element) for vue-cli@3, which you can use to quickly build an Element-based project.\n\n### Use Starter Kit\n\nWe provide a general [project template](https://github.com/ElementUI/element-starter) for you. For Laravel users, we also have a [template](https://github.com/ElementUI/element-in-laravel-starter). You can download and use them directly.\n\nIf you prefer not to use them, please read the following.\n\n### Import Element\n\nYou can import Element entirely, or just import what you need. Let's start with fully import.\n\n#### Fully import\n\nIn main.js:\n\n```javascript\nimport Vue from 'vue';\nimport ElementUI from 'element-ui';\nimport 'element-ui/lib/theme-chalk/index.css';\nimport App from './App.vue';\n\nVue.use(ElementUI);\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});\n```\n\nThe above imports Element entirely. Note that CSS file needs to be imported separately.\n\n#### On demand\n\nWith the help of [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component), we can import components we actually need, making the project smaller than otherwise.\n\nFirst, install babel-plugin-component:\n\n```bash\nnpm install babel-plugin-component -D\n```\n\nThen edit .babelrc:\n\n```json\n{\n  \"presets\": [[\"es2015\", { \"modules\": false }]],\n  \"plugins\": [\n    [\n      \"component\",\n      {\n        \"libraryName\": \"element-ui\",\n        \"styleLibraryName\": \"theme-chalk\"\n      }\n    ]\n  ]\n}\n```\n\nNext, if you need Button and Select, edit main.js:\n\n```javascript\nimport Vue from 'vue';\nimport { Button, Select } from 'element-ui';\nimport App from './App.vue';\n\nVue.component(Button.name, Button);\nVue.component(Select.name, Select);\n/* or\n * Vue.use(Button)\n * Vue.use(Select)\n */\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});\n```\n\nFull example (Component list reference [components.json](https://github.com/ElemeFE/element/blob/master/components.json))\n\n```javascript\nimport Vue from 'vue';\nimport {\n  Pagination,\n  Dialog,\n  Autocomplete,\n  Dropdown,\n  DropdownMenu,\n  DropdownItem,\n  Menu,\n  Submenu,\n  MenuItem,\n  MenuItemGroup,\n  Input,\n  InputNumber,\n  Radio,\n  RadioGroup,\n  RadioButton,\n  Checkbox,\n  CheckboxButton,\n  CheckboxGroup,\n  Switch,\n  Select,\n  Option,\n  OptionGroup,\n  Button,\n  ButtonGroup,\n  Table,\n  TableColumn,\n  DatePicker,\n  TimeSelect,\n  TimePicker,\n  Popover,\n  Tooltip,\n  Breadcrumb,\n  BreadcrumbItem,\n  Form,\n  FormItem,\n  Tabs,\n  TabPane,\n  Tag,\n  Tree,\n  Alert,\n  Slider,\n  Icon,\n  Row,\n  Col,\n  Upload,\n  Progress,\n  Spinner,\n  Badge,\n  Card,\n  Rate,\n  Steps,\n  Step,\n  Carousel,\n  CarouselItem,\n  Collapse,\n  CollapseItem,\n  Cascader,\n  ColorPicker,\n  Transfer,\n  Container,\n  Header,\n  Aside,\n  Main,\n  Footer,\n  Timeline,\n  TimelineItem,\n  Link,\n  Divider,\n  Image,\n  Calendar,\n  Backtop,\n  PageHeader,\n  CascaderPanel,\n  Loading,\n  MessageBox,\n  Message,\n  Notification\n} from 'element-ui';\n\nVue.use(Pagination);\nVue.use(Dialog);\nVue.use(Autocomplete);\nVue.use(Dropdown);\nVue.use(DropdownMenu);\nVue.use(DropdownItem);\nVue.use(Menu);\nVue.use(Submenu);\nVue.use(MenuItem);\nVue.use(MenuItemGroup);\nVue.use(Input);\nVue.use(InputNumber);\nVue.use(Radio);\nVue.use(RadioGroup);\nVue.use(RadioButton);\nVue.use(Checkbox);\nVue.use(CheckboxButton);\nVue.use(CheckboxGroup);\nVue.use(Switch);\nVue.use(Select);\nVue.use(Option);\nVue.use(OptionGroup);\nVue.use(Button);\nVue.use(ButtonGroup);\nVue.use(Table);\nVue.use(TableColumn);\nVue.use(DatePicker);\nVue.use(TimeSelect);\nVue.use(TimePicker);\nVue.use(Popover);\nVue.use(Tooltip);\nVue.use(Breadcrumb);\nVue.use(BreadcrumbItem);\nVue.use(Form);\nVue.use(FormItem);\nVue.use(Tabs);\nVue.use(TabPane);\nVue.use(Tag);\nVue.use(Tree);\nVue.use(Alert);\nVue.use(Slider);\nVue.use(Icon);\nVue.use(Row);\nVue.use(Col);\nVue.use(Upload);\nVue.use(Progress);\nVue.use(Spinner);\nVue.use(Badge);\nVue.use(Card);\nVue.use(Rate);\nVue.use(Steps);\nVue.use(Step);\nVue.use(Carousel);\nVue.use(CarouselItem);\nVue.use(Collapse);\nVue.use(CollapseItem);\nVue.use(Cascader);\nVue.use(ColorPicker);\nVue.use(Transfer);\nVue.use(Container);\nVue.use(Header);\nVue.use(Aside);\nVue.use(Main);\nVue.use(Footer);\nVue.use(Timeline);\nVue.use(TimelineItem);\nVue.use(Link);\nVue.use(Divider);\nVue.use(Image);\nVue.use(Calendar);\nVue.use(Backtop);\nVue.use(PageHeader);\nVue.use(CascaderPanel);\n\nVue.use(Loading.directive);\n\nVue.prototype.$loading = Loading.service;\nVue.prototype.$msgbox = MessageBox;\nVue.prototype.$alert = MessageBox.alert;\nVue.prototype.$confirm = MessageBox.confirm;\nVue.prototype.$prompt = MessageBox.prompt;\nVue.prototype.$notify = Notification;\nVue.prototype.$message = Message;\n```\n\n### Global config\n\nWhen importing Element, you can define a global config object. For now this object has two properties: `size` and `zIndex`. The property `size` sets the default size for all components and the property `zIndex` sets the initial z-index (default: 2000) for modal boxes:\n\nFully import Element：\n\n```js\nimport Vue from 'vue';\nimport Element from 'element-ui';\nVue.use(Element, { size: 'small', zIndex: 3000 });\n```\n\nPartial import Element：\n\n```js\nimport Vue from 'vue';\nimport { Button } from 'element-ui';\n\nVue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };\nVue.use(Button);\n```\n\nWith the above config, the default size of all components that have size attribute will be 'small', and the initial z-index of modal boxes is 3000.\n\n### Start coding\n\nNow you have implemented Vue and Element to your project, and it's time to write your code. Please refer to each component's documentation to learn how to use them.\n\n### Use Nuxt.js\n\nWe can also start a project using [Nuxt.js](https://nuxtjs.org/):\n\n<div class=\"glitch-embed-wrap\" style=\"height: 420px; width: 100%;\">\n  <iframe src=\"https://glitch.com/embed/#!/embed/nuxt-with-element?path=nuxt.config.js&previewSize=0&attributionHidden=true\" alt=\"nuxt-with-element on glitch\" style=\"height: 100%; width: 100%; border: 0;\"></iframe>\n</div>\n"
  },
  {
    "path": "examples/docs/en-US/radio.md",
    "content": "## Radio\n\nSingle selection among multiple options.\n\n### Basic usage\n\nRadio should not have too many options. Otherwise, use the Select component instead.\n\n:::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`.\n```html\n<template>\n  <el-radio v-model=\"radio\" label=\"1\">Option A</el-radio>\n  <el-radio v-model=\"radio\" label=\"2\">Option B</el-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio: '1'\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Disabled\n\n`disabled` attribute is used to disable the radio.\n\n:::demo You just need to add the `disabled` attribute.\n```html\n<template>\n  <el-radio disabled v-model=\"radio\" label=\"disabled\">Option A</el-radio>\n  <el-radio disabled v-model=\"radio\" label=\"selected and disabled\">Option B</el-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio: 'selected and disabled'\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Radio button group\n\nSuitable for choosing from some mutually exclusive options.\n\n:::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.\n\n```html\n<el-radio-group v-model=\"radio\">\n  <el-radio :label=\"3\">Option A</el-radio>\n  <el-radio :label=\"6\">Option B</el-radio>\n  <el-radio :label=\"9\">Option C</el-radio>\n</el-radio-group>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio: 3\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Button style\n\nRadio with button styles.\n\n:::demo You just need to change `el-radio` element into `el-radio-button` element. We also provide `size` attribute.\n```html\n<template>\n  <div>\n    <el-radio-group v-model=\"radio1\">\n      <el-radio-button label=\"New York\"></el-radio-button>\n      <el-radio-button label=\"Washington\"></el-radio-button>\n      <el-radio-button label=\"Los Angeles\"></el-radio-button>\n      <el-radio-button label=\"Chicago\"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-radio-group v-model=\"radio2\" size=\"medium\">\n      <el-radio-button label=\"New York\" ></el-radio-button>\n      <el-radio-button label=\"Washington\"></el-radio-button>\n      <el-radio-button label=\"Los Angeles\"></el-radio-button>\n      <el-radio-button label=\"Chicago\"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-radio-group v-model=\"radio3\" size=\"small\">\n      <el-radio-button label=\"New York\"></el-radio-button>\n      <el-radio-button label=\"Washington\" disabled ></el-radio-button>\n      <el-radio-button label=\"Los Angeles\"></el-radio-button>\n      <el-radio-button label=\"Chicago\"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-radio-group v-model=\"radio4\" disabled size=\"mini\">\n      <el-radio-button label=\"New York\"></el-radio-button>\n      <el-radio-button label=\"Washington\"></el-radio-button>\n      <el-radio-button label=\"Los Angeles\"></el-radio-button>\n      <el-radio-button label=\"Chicago\"></el-radio-button>\n    </el-radio-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio1: 'New York',\n        radio2: 'New York',\n        radio3: 'New York',\n        radio4: 'New York'\n      };\n    }\n  }\n</script>\n```\n:::\n\n### With borders\n\n:::demo The `border` attribute adds a border to Radios.\n```html\n<template>\n  <div>\n    <el-radio v-model=\"radio1\" label=\"1\" border>Option A</el-radio>\n    <el-radio v-model=\"radio1\" label=\"2\" border>Option B</el-radio>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-radio v-model=\"radio2\" label=\"1\" border size=\"medium\">Option A</el-radio>\n    <el-radio v-model=\"radio2\" label=\"2\" border size=\"medium\">Option B</el-radio>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-radio-group v-model=\"radio3\" size=\"small\">\n      <el-radio label=\"1\" border>Option A</el-radio>\n      <el-radio label=\"2\" border disabled>Option B</el-radio>\n    </el-radio-group>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-radio-group v-model=\"radio4\" size=\"mini\" disabled>\n      <el-radio label=\"1\" border>Option A</el-radio>\n      <el-radio label=\"2\" border>Option B</el-radio>\n    </el-radio-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio1: '1',\n        radio2: '1',\n        radio3: '1',\n        radio4: '1'\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Radio Attributes\n\n Attribute      | Description          | Type      | Accepted Values       | Default\n---- | ---- | ---- | ---- | ----\nvalue / v-model | binding value | string / number / boolean | — | —\nlabel | the value of Radio | string / number / boolean | — | —\ndisabled | whether Radio is disabled | boolean | — | false\nborder  | whether to add a border around Radio  | boolean   | — | false\nsize  | size of the Radio, only works when `border` is true  | string  | medium / small / mini | —\nname | native 'name' attribute | string    |      —         |     —\n\n### Radio Events\n\n| Event Name | Description | Parameters |\n| --- | --- | --- |\n| change | triggers when the bound value changes | the label value of the chosen radio |\n\n### Radio-group Attributes\n\n Attribute      | Description          | Type      | Accepted Values       | Default\n---- | ---- | ---- | ---- | ----\nvalue / v-model | binding value | string / number / boolean | — | —\nsize | the size of radio buttons or bordered radios | string | medium / small / mini | —\ndisabled  | whether the nesting radios are disabled | boolean   | — | false\ntext-color | font color when button is active | string   | — | #ffffff   |\nfill  | border and background color when button is active | string   | — | #409EFF   |\n\n### Radio-group Events\n\n| Event Name | Description | Parameters |\n| --- | --- | --- |\n| change | triggers when the bound value changes | the label value of the chosen radio |\n\n### Radio-button Attributes\n\n Attribute      | Description          | Type      | Accepted Values       | Default\n---- | ---- | ---- | ---- | ----\nlabel | the value of radio | string / number | — | —\ndisabled | whether radio is disabled | boolean | — | false\nname | native 'name' attribute | string    |      —         |     —\n"
  },
  {
    "path": "examples/docs/en-US/rate.md",
    "content": "## Rate\n\nUsed for rating\n\n### Basic usage\n\n:::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.\n\n```html\n<div class=\"block\">\n  <span class=\"demonstration\">Default</span>\n  <el-rate v-model=\"value1\"></el-rate>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Color for different levels</span>\n  <el-rate\n    v-model=\"value2\"\n    :colors=\"colors\">\n  </el-rate>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: null,\n        value2: null,\n        colors: ['#99A9BF', '#F7BA2A', '#FF9900'] // same as { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }\n      }\n    }\n  }\n</script>\n```\n:::\n\n### With text\n\nUsing text to indicate rating score\n\n:::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`.\n\n```html\n<el-rate\n  v-model=\"value\"\n  :texts=\"['oops', 'disappointed', 'normal', 'good', 'great']\"\n  show-text>\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: null\n      }\n    }\n  }\n</script>\n```\n:::\n\n### More icons\n\nYou can use different icons to distinguish different rate components.\n\n:::demo You can customize icons by passing `icon-classes` an array with three elements or a object which key is the threshold between two levels and value is the corresponding icon class. In this example, we also use `void-icon-class` to set the icon if it is unselected.\n\n```html\n<el-rate\n  v-model=\"value\"\n  :icon-classes=\"iconClasses\"\n  void-icon-class=\"icon-rate-face-off\"\n  :colors=\"['#99A9BF', '#F7BA2A', '#FF9900']\">\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: null,\n        iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'] // same as { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Read-only\n\nRead-only Rate is for displaying rating score. Half star is supported.\n\n:::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.\n\n```html\n<el-rate\n  v-model=\"value\"\n  disabled\n  show-score\n  text-color=\"#ff9900\"\n  score-template=\"{value} points\">\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: 3.7\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Attributes\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------- |---------- |-------------  |-------- |\n| value / v-model | binding value | number | — | 0 |\n| max | max rating score | number | — | 5 |\n| disabled | whether Rate is read-only | boolean | — | false |\n| allow-half | whether picking half start is allowed | boolean | — | false |\n| low-threshold | threshold value between low and medium level. The value itself will be included in low level | number | — | 2 |\n| high-threshold | threshold value between medium and high level. The value itself will be included in high level | number | — | 4 |\n| 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'] |\n| void-color | color of unselected icons | string | — | #C6D1DE |\n| disabled-void-color | color of unselected read-only icons | string | — | #EFF2F7 |\n| icon-classes | class names of icons. 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 class | array/object | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |\n| void-icon-class | class name of unselected icons | string | — | el-icon-star-off |\n| disabled-void-icon-class | class name of unselected read-only icons | string | — | el-icon-star-on |\n| show-text | whether to display texts | boolean | — | false |\n| show-score | whether to display current score. show-score and show-text cannot be true at the same time | boolean | — | false |\n| text-color | color of texts | string | — | #1F2D3D |\n| texts | text array | array | — | ['极差', '失望', '一般', '满意', '惊喜'] |\n| score-template | score template | string | — | {value} |\n\n### Events\n| Event Name | Description | Parameters |\n|---------- |-------- |---------- |\n| change | Triggers when rate value is changed | value after changing |\n"
  },
  {
    "path": "examples/docs/en-US/result.md",
    "content": "## Result\n\nUsed to give feedback on the result of user's operation or access exception.\n\n### Basic usage\n\n:::demo\n\n```html\n<el-row>\n  <el-col :sm=\"12\" :lg=\"6\">\n    <el-result icon=\"success\" title=\"Success Tip\" subTitle=\"Please follow the instructions\">\n      <template slot=\"extra\">\n        <el-button type=\"primary\" size=\"medium\">Back</el-button>\n      </template>\n    </el-result>\n  </el-col>\n  <el-col :sm=\"12\" :lg=\"6\">\n    <el-result icon=\"warning\" title=\"Warning Tip\" subTitle=\"Please follow the instructions\">\n      <template slot=\"extra\">\n        <el-button type=\"primary\" size=\"medium\">Back</el-button>\n      </template>\n    </el-result>\n  </el-col>\n  <el-col :sm=\"12\" :lg=\"6\">\n    <el-result icon=\"error\" title=\"Error Tip\" subTitle=\"Please follow the instructions\">\n      <template slot=\"extra\">\n        <el-button type=\"primary\" size=\"medium\">Back</el-button>\n      </template>\n    </el-result>\n  </el-col>\n  <el-col :sm=\"12\" :lg=\"6\">\n    <el-result icon=\"info\" title=\"Info Tip\" subTitle=\"Please follow the instructions\">\n      <template slot=\"extra\">\n        <el-button type=\"primary\" size=\"medium\">Back</el-button>\n      </template>\n    </el-result>\n  </el-col>\n</el-row>\n```\n\n:::\n\n### Customized content\n\n:::demo\n\n```html\n<el-result title=\"404\" subTitle=\"Sorry, request error\">\n  <template slot=\"icon\">\n    <el-image src=\"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png\"></el-image>\n  </template>\n  <template slot=\"extra\">\n    <el-button type=\"primary\" size=\"medium\">Back</el-button>\n  </template>\n</el-result>\n```\n\n:::\n\n### Result Attributes\n\n| Attribute     | Description    | Type            | Accepted Values      | Default   |\n|-------------  |---------------- |---------------- |---------------------- |-------- |\n| title          | title         | string  |          —             |    —     |\n| sub-title    | sub title  | string | — |    —  |\n| icon  | icon type    | string  |    success / warning / info / error  |  info |\n\n### Result Slots\n\n| Name | Description |\n|------|--------|\n| icon | custom icon  |\n| title | custom title     |\n| subTitle | custom sub title     |\n| extra | custom  extra area    |\n"
  },
  {
    "path": "examples/docs/en-US/select.md",
    "content": "## Select\n\nWhen there are plenty of options, use a drop-down menu to display and select desired ones.\n\n### Basic usage\n\n:::demo `v-model` is the value of `el-option` that is currently selected.\n\n```html\n<template>\n  <el-select v-model=\"value\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value: ''\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Disabled option\n\n:::demo Set the value of `disabled` in `el-option` to `true` to disable this option.\n\n```html\n<template>\n  <el-select v-model=\"value\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\"\n      :disabled=\"item.disabled\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2',\n          disabled: true\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value: ''\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Disabled select\n\nDisable the whole component.\n\n:::demo Set `disabled` of `el-select` to make it disabled.\n```html\n<template>\n  <el-select v-model=\"value\" disabled placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value: ''\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Clearable single select\n\nYou can clear Select using a clear icon.\n\n:::demo Set `clearable` attribute for `el-select` and a clear icon will appear. Note that `clearable` is only for single select.\n```html\n<template>\n  <el-select v-model=\"value\" clearable placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value: ''\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Basic multiple select\n\nMultiple select uses tags to display selected options.\n\n:::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.\n```html\n<template>\n  <el-select v-model=\"value1\" multiple placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n  \n  <el-select\n    v-model=\"value2\"\n    multiple\n    collapse-tags\n    style=\"margin-left: 20px;\"\n    placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value1: [],\n        value2: []\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Custom template\n\nYou can customize HTML templates for options.\n\n:::demo Insert customized HTML templates into the slot of `el-option`.\n\n```html\n<template>\n  <el-select v-model=\"value\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in cities\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n      <span style=\"float: left\">{{ item.label }}</span>\n      <span style=\"float: right; color: #8492a6; font-size: 13px\">{{ item.value }}</span>\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        cities: [{\n          value: 'Beijing',\n          label: 'Beijing'\n        }, {\n          value: 'Shanghai',\n          label: 'Shanghai'\n        }, {\n          value: 'Nanjing',\n          label: 'Nanjing'\n        }, {\n          value: 'Chengdu',\n          label: 'Chengdu'\n        }, {\n          value: 'Shenzhen',\n          label: 'Shenzhen'\n        }, {\n          value: 'Guangzhou',\n          label: 'Guangzhou'\n        }],\n        value: ''\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Grouping\n\nDisplay options in groups.\n\n:::demo Use `el-option-group` to group the options, and its `label` attribute stands for the name of the group.\n\n```html\n<template>\n  <el-select v-model=\"value\" placeholder=\"Select\">\n    <el-option-group\n      v-for=\"group in options\"\n      :key=\"group.label\"\n      :label=\"group.label\">\n      <el-option\n        v-for=\"item in group.options\"\n        :key=\"item.value\"\n        :label=\"item.label\"\n        :value=\"item.value\">\n      </el-option>\n    </el-option-group>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          label: 'Popular cities',\n          options: [{\n            value: 'Shanghai',\n            label: 'Shanghai'\n          }, {\n            value: 'Beijing',\n            label: 'Beijing'\n          }]\n        }, {\n          label: 'City name',\n          options: [{\n            value: 'Chengdu',\n            label: 'Chengdu'\n          }, {\n            value: 'Shenzhen',\n            label: 'Shenzhen'\n          }, {\n            value: 'Guangzhou',\n            label: 'Guangzhou'\n          }, {\n            value: 'Dalian',\n            label: 'Dalian'\n          }]\n        }],\n        value: ''\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Option filtering\n\nYou can filter options for your desired ones.\n\n:::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.\n```html\n<template>\n  <el-select v-model=\"value\" filterable placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value: ''\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Remote Search\n\nEnter keywords and search data from server.\n\n:::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.\n\n```html\n<template>\n  <el-select\n    v-model=\"value\"\n    multiple\n    filterable\n    remote\n    reserve-keyword\n    placeholder=\"Please enter a keyword\"\n    :remote-method=\"remoteMethod\"\n    :loading=\"loading\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [],\n        value: [],\n        list: [],\n        loading: false,\n        states: [\"Alabama\", \"Alaska\", \"Arizona\",\n        \"Arkansas\", \"California\", \"Colorado\",\n        \"Connecticut\", \"Delaware\", \"Florida\",\n        \"Georgia\", \"Hawaii\", \"Idaho\", \"Illinois\",\n        \"Indiana\", \"Iowa\", \"Kansas\", \"Kentucky\",\n        \"Louisiana\", \"Maine\", \"Maryland\",\n        \"Massachusetts\", \"Michigan\", \"Minnesota\",\n        \"Mississippi\", \"Missouri\", \"Montana\",\n        \"Nebraska\", \"Nevada\", \"New Hampshire\",\n        \"New Jersey\", \"New Mexico\", \"New York\",\n        \"North Carolina\", \"North Dakota\", \"Ohio\",\n        \"Oklahoma\", \"Oregon\", \"Pennsylvania\",\n        \"Rhode Island\", \"South Carolina\",\n        \"South Dakota\", \"Tennessee\", \"Texas\",\n        \"Utah\", \"Vermont\", \"Virginia\",\n        \"Washington\", \"West Virginia\", \"Wisconsin\",\n        \"Wyoming\"]\n      }\n    },\n    mounted() {\n      this.list = this.states.map(item => {\n        return { value: `value:${item}`, label: `label:${item}` };\n      });\n    },\n    methods: {\n      remoteMethod(query) {\n        if (query !== '') {\n          this.loading = true;\n          setTimeout(() => {\n            this.loading = false;\n            this.options = this.list.filter(item => {\n              return item.label.toLowerCase()\n                .indexOf(query.toLowerCase()) > -1;\n            });\n          }, 200);\n        } else {\n          this.options = [];\n        }\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Create new items\nCreate and select new items that are not included in select options\n:::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.\n```html\n<template>\n  <el-select\n    v-model=\"value\"\n    multiple\n    filterable\n    allow-create\n    default-first-option\n    placeholder=\"Choose tags for your article\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'HTML',\n          label: 'HTML'\n        }, {\n          value: 'CSS',\n          label: 'CSS'\n        }, {\n          value: 'JavaScript',\n          label: 'JavaScript'\n        }],\n        value: []\n      }\n    }\n  }\n</script>\n```\n:::\n\n:::tip\nIf the binding value of Select is an object, make sure to assign `value-key` as its unique identity key name.\n:::\n\n### Select Attributes\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| value / v-model | binding value | boolean / string / number | — | — |\n| multiple | whether multiple-select is activated | boolean | — | false |\n| disabled | whether Select is disabled | boolean | — | false |\n| value-key | unique identity key name for value, required when value is an object | string | — | value |\n| size | size of Input | string | large/small/mini | — |\n| clearable | whether select can be cleared | boolean | — | false |\n| collapse-tags | whether to collapse tags to a text when multiple selecting | boolean | — | false |\n| multiple-limit | maximum number of options user can select when `multiple` is `true`. No limit when set to 0 | number | — | 0 |\n| name | the name attribute of select input | string | — | — |\n| autocomplete | the autocomplete attribute of select input | string | — | off |\n| auto-complete | @DEPRECATED in next major version | string | — | off |\n| placeholder | placeholder | string | — | Select |\n| filterable | whether Select is filterable | boolean | — | false |\n| allow-create | whether creating new items is allowed. To use this, `filterable` must be true | boolean | — | false |\n| filter-method | custom filter method | function | — | — |\n| remote | whether options are loaded from server | boolean | — | false |\n| remote-method | custom remote search method | function | — | — |\n| loading | whether Select is loading data from server | boolean | — | false |\n| loading-text | displayed text while loading data from server | string | — | Loading |\n| no-match-text | displayed text when no data matches the filtering query, you can also use slot `empty` | string | — | No matching data |\n| no-data-text | displayed text when there is no options, you can also use slot `empty` | string | — | No data |\n| popper-class | custom class name for Select's dropdown | string | — | — |\n| reserve-keyword | when `multiple` and `filter` is true, whether to reserve current keyword after selecting an option | boolean | — | false |\n| default-first-option | select first matching option on enter key. Use with `filterable` or `remote` | boolean | - | false |\n| popper-append-to-body| 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 |\n| automatic-dropdown | for non-filterable Select, this prop decides if the option menu pops up when the input is focused | boolean | - | false |\n\n### Select Events\n| Event Name | Description | Parameters |\n|---------|---------|---------|\n| change | triggers when the selected value changes | current selected value |\n| visible-change | triggers when the dropdown appears/disappears | true when it appears, and false otherwise |\n| remove-tag | triggers when a tag is removed in multiple mode | removed tag value |\n| clear | triggers when the clear icon is clicked in a clearable Select | — |\n| blur | triggers when Input blurs | (event: Event) |\n| focus | triggers when Input focuses | (event: Event) |\n\n### Select Slots\n| Name    | Description |\n|---------|-------------|\n|    —    | Option component list |\n| prefix  | content as Select prefix |\n| empty  | content when there is no options |\n\n### Option Group Attributes\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| label | name of the group | string | — | — |\n| disabled | whether to disable all options in this group | boolean | — | false |\n\n### Option Attributes\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| value | value of option | string/number/object | — | — |\n| label | label of option, same as `value` if omitted | string/number | — | — |\n| disabled | whether option is disabled | boolean | — | false |\n\n### Methods\n| Method | Description | Parameters |\n|------|--------|-------|\n| focus | focus the Input component | - |\n| blur | blur the Input component, and hide the dropdown | - |\n"
  },
  {
    "path": "examples/docs/en-US/skeleton.md",
    "content": "## Skeleton\n\nWhen loading data, and you need a rich experience for visual and interactions for your end users, you can choose `skeleton`.\n\n### Basic usage\n\nThe basic skeleton.\n\n:::demo\n\n```html\n<template>\n  <el-skeleton />\n</template>\n```\n\n:::\n\n### Configurable Rows\n\nYou can configure the row numbers yourself, we are rendering a title row with 33% width of the others.\n\n:::demo\n\n```html\n<el-skeleton :rows=\"6\" />\n```\n\n:::\n\n### Animation\nWe 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\n\n:::demo\n\n```html\n<el-skeleton :rows=\"6\" animated />\n```\n\n:::\n\n### Customized Template\nElement only provides the most common template, sometimes that could be a problem, so you have a slot named `template` to do that work.\n\nAlso 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.\n\n:::demo\n\n```html\n<template>\n  <el-skeleton style=\"width: 240px\">\n    <template slot=\"template\">\n      <el-skeleton-item variant=\"image\" style=\"width: 240px; height: 240px;\" />\n      <div style=\"padding: 14px;\">\n        <el-skeleton-item variant=\"p\" style=\"width: 50%\" />\n        <div\n          style=\"display: flex; align-items: center; justify-items: space-between;\"\n        >\n          <el-skeleton-item variant=\"text\" style=\"margin-right: 16px;\" />\n          <el-skeleton-item variant=\"text\" style=\"width: 30%;\" />\n        </div>\n      </div>\n    </template>\n  </el-skeleton>\n</template>\n```\n\n:::\n\n### Loading state\n\nWhen `Loading` ends, we always need to show the real UI with data to our end users. with the attribtue `loading` we can control whether showing the DOM. You can also use slot `default` to structure the real DOM element.\n\n:::demo\n\n```html\n<template>\n  <div style=\"width: 240px\">\n    <p>\n      <label style=\"margin-right: 16px;\">Switch Loading</label>\n      <el-switch v-model=\"loading\" />\n    </p>\n    <el-skeleton style=\"width: 240px\" :loading=\"loading\" animated>\n      <template slot=\"template\">\n        <el-skeleton-item\n          variant=\"image\"\n          style=\"width: 240px; height: 240px;\"\n        />\n        <div style=\"padding: 14px;\">\n          <el-skeleton-item variant=\"h3\" style=\"width: 50%;\" />\n          <div\n            style=\"display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;\"\n          >\n            <el-skeleton-item variant=\"text\" style=\"margin-right: 16px;\" />\n            <el-skeleton-item variant=\"text\" style=\"width: 30%;\" />\n          </div>\n        </div>\n      </template>\n      <template>\n        <el-card :body-style=\"{ padding: '0px', marginBottom: '1px' }\">\n          <img\n            src=\"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png\"\n            class=\"image\"\n          />\n          <div style=\"padding: 14px;\">\n            <span>Delicious hamberger</span>\n            <div class=\"bottom card-header\">\n              <span class=\"time\">{{ currentDate }}</span>\n              <el-button type=\"text\" class=\"button\">Operation button</el-button>\n            </div>\n          </div>\n        </el-card>\n      </template>\n    </el-skeleton>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        loading: true,\n        currentDate: '2021-06-01'\n      }\n    },\n  }\n</script>\n```\n\n:::\n\n\n### Rendering a list of data\n\nMost 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.\n\n\n:::tip\nWe 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.\n:::\n\n:::demo\n\n```html\n<template>\n  <div style=\"width: 400px\">\n    <p>\n      <el-button @click=\"setLoading\">Click me to reload</el-button>\n    </p>\n    <el-skeleton style=\"width:400px\" :loading=\"loading\" animated :count=\"3\">\n      <template slot=\"template\">\n        <el-skeleton-item\n          variant=\"image\"\n          style=\"width: 400px; height: 267px;\"\n        />\n        <div style=\"padding: 14px;\">\n          <el-skeleton-item variant=\"h3\" style=\"width: 50%;\" />\n          <div\n            style=\"display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;\"\n          >\n            <el-skeleton-item variant=\"text\" style=\"margin-right: 16px;\" />\n            <el-skeleton-item variant=\"text\" style=\"width: 30%;\" />\n          </div>\n        </div>\n      </template>\n      <template>\n        <el-card\n          :body-style=\"{ padding: '0px', marginBottom: '1px' }\"\n          v-for=\"item in lists\"\n          :key=\"item.name\"\n        >\n          <img :src=\"item.imgUrl\" class=\"image multi-content\" />\n          <div style=\"padding: 14px;\">\n            <span>Delicious hamberger</span>\n            <div class=\"bottom card-header\">\n              <span class=\"time\">{{ currentDate }}</span>\n              <el-button type=\"text\" class=\"button\">Operation button</el-button>\n            </div>\n          </div>\n        </el-card>\n      </template>\n    </el-skeleton>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        loading: true,\n        currentDate: '2021-06-01',\n        lists: [],\n      }\n    },\n    mounted() {\n      this.loading = false\n      this.lists = [\n        {\n          imgUrl:\n            'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',\n          name: 'Deer',\n        },\n        {\n          imgUrl:\n            'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',\n          name: 'Horse',\n        },\n        {\n          imgUrl:\n            'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',\n          name: 'Mountain Lion',\n        },\n      ]\n    },\n    methods: {\n      setLoading() {\n        this.loading = true\n        setTimeout(() => (this.loading = false), 2000)\n      },\n    },\n  }\n</script>\n```\n\n:::\n\n### Avoiding rendering bouncing.\nSometimes 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.\n\n\n:::demo\n\n```html\n<template>\n  <div style=\"width: 240px\">\n    <p>\n      <label style=\"margin-right: 16px;\">Switch Loading</label>\n      <el-switch v-model=\"loading\" />\n    </p>\n    <el-skeleton\n      style=\"width: 240px\"\n      :loading=\"loading\"\n      animated\n      :throttle=\"500\"\n    >\n      <template slot=\"template\">\n        <el-skeleton-item\n          variant=\"image\"\n          style=\"width: 240px; height: 240px;\"\n        />\n        <div style=\"padding: 14px;\">\n          <el-skeleton-item variant=\"h3\" style=\"width: 50%;\" />\n          <div\n            style=\"display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;\"\n          >\n            <el-skeleton-item variant=\"text\" style=\"margin-right: 16px;\" />\n            <el-skeleton-item variant=\"text\" style=\"width: 30%;\" />\n          </div>\n        </div>\n      </template>\n      <template>\n        <el-card :body-style=\"{ padding: '0px', marginBottom: '1px'}\">\n          <img\n            src=\"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png\"\n            class=\"image\"\n          />\n          <div style=\"padding: 14px;\">\n            <span>Delicious hamberger</span>\n            <div class=\"bottom card-header\">\n              <span class=\"time\">{{ currentDate }}</span>\n              <el-button type=\"text\" class=\"button\">operation button</el-button>\n            </div>\n          </div>\n        </el-card>\n      </template>\n    </el-skeleton>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        loading: false,\n        currentDate: '2021-06-01'\n      }\n    },\n  }\n</script>\n```\n:::\n\n### Skeleton Attributes\n\n| Attribute    | Description  | Type    | Acceptable Value | Default |\n| ------- | ---------------- | ------- | ------------ | ------ |\n| animated | whether showing the animation | boolean | true / false | false |\n| count   | how many fake items to render to the DOM | number | integer | 1 |\n| loading | whether showing the skeleton | boolean | true / false | true  |\n| rows    | numbers of the row, only useful when no template slot were given | number  | integer  | 4      |\n| throttle | Rendering delay in millseconds | number | integer | 0 |\n\n\n### Skeleton Item Attributes\n| Attribute    | Description             | Type    | Acceptable Value       | Default  |\n| ------- | ---------------- | ------- | ------------ | ------ |\n| variant | The current rendering skeleton type | Enum(string) | p / h1 / h3 / text / caption / button / image / circle / rect | text |\n\n\n### Skeleton Slots\n\n| Name | Description |\n| ---- | ----------- |\n| default | \bReal rendering DOM |\n| template | Custom rendering skeleton template |\n"
  },
  {
    "path": "examples/docs/en-US/slider.md",
    "content": "## Slider\n\nDrag the slider within a fixed range.\n\n### Basic usage\n\nThe current value is displayed when the slider is being dragged.\n\n:::demo Customize the initial value of the slider by setting the binding value.\n\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">Default value</span>\n    <el-slider v-model=\"value1\"></el-slider>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Customized initial value</span>\n    <el-slider v-model=\"value2\"></el-slider>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Hide Tooltip</span>\n    <el-slider v-model=\"value3\" :show-tooltip=\"false\"></el-slider>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Format Tooltip</span>\n    <el-slider v-model=\"value4\" :format-tooltip=\"formatTooltip\"></el-slider>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Disabled</span>\n    <el-slider v-model=\"value5\" disabled></el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: 0,\n        value2: 50,\n        value3: 36,\n        value4: 48,\n        value5: 42\n      }\n    },\n    methods: {\n      formatTooltip(val) {\n        return val / 100;\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Discrete values\n\nThe options can be discrete.\n\n:::demo Set step size with the `step` attribute. You can display breakpoints by setting the `show-stops` attribute.\n\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">Breakpoints not displayed</span>\n    <el-slider\n      v-model=\"value1\"\n      :step=\"10\">\n    </el-slider>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Breakpoints displayed</span>\n    <el-slider\n      v-model=\"value2\"\n      :step=\"10\"\n      show-stops>\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: 0,\n        value2: 0\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Slider with input box\n\nSet value via a input box.\n\n:::demo Set the `show-input` attribute to display an input box on the right.\n\n```html\n<template>\n  <div class=\"block\">\n    <el-slider\n      v-model=\"value\"\n      show-input>\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: 0\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Range selection\n\nSelecting a range of values is supported.\n\n:::demo Setting the `range` attribute activates range mode, where the binding value is an array made up of two boundary values.\n```html\n<template>\n  <div class=\"block\">\n    <el-slider\n      v-model=\"value\"\n      range\n      show-stops\n      :max=\"10\">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: [4, 8]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Vertical mode\n\n:::demo Setting the `vertical` attribute to `true` enables vertical mode. In vertical mode, the `height` attribute is required.\n```html\n<template>\n  <div class=\"block\">\n    <el-slider\n      v-model=\"value\"\n      vertical\n      height=\"200px\">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: 0\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Show marks\n\n:::demo Setting this `marks` attribute can show mark on slider.\n```html\n<template>\n  <div class=\"block\">\n    <el-slider\n      v-model=\"value\"\n      range\n      :marks=\"marks\">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: [30, 60],\n        marks: {\n          0: '0°C',\n          8: '8°C',\n          37: '37°C',\n          50: {\n            style: {\n              color: '#1989FA'\n            },\n            label: this.$createElement('strong', '50%')\n          }\n        }\n      }\n    }\n  }\n</script>\n```\n:::\n\n## Attributes\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| value / v-model | binding value | number | — | 0 |\n| min | minimum value | number | — | 0 |\n| max | maximum value | number | — | 100 |\n| disabled | whether Slider is disabled | boolean | — | false |\n| step | step size | number | — | 1 |\n| show-input | whether to display an input box, works when `range` is false | boolean | — | false |\n| show-input-controls | whether to display control buttons when `show-input` is true | boolean | — | true |\n| input-size | size of the input box | string | large / medium / small / mini | small |\n| show-stops | whether to display breakpoints | boolean | — | false |\n| show-tooltip | whether to display tooltip value | boolean | — | true |\n| format-tooltip | format to display tooltip value | function(value) | — | — |\n| range | whether to select a range | boolean | — | false |\n| vertical | vertical mode | boolean | — | false |\n| height | Slider height, required in vertical mode | string | — | — |\n| label | label for screen reader | string | — | — |\n| debounce | debounce delay when typing, in milliseconds, works when `show-input` is true | number | — | 300 |\n| tooltip-class | custom class name for the tooltip | string | — | — |\n| marks | marks， type of key must be `number` and must in closed interval `[min, max]`, each mark can custom style| object | — | — |\n\n## Events\n| Event Name | Description | Parameters |\n|---------- |-------- |---------- |\n| change | triggers when the value changes (if the mouse is being dragged, this event only fires when the mouse is released) | value after changing |\n| input | triggers when the data changes (It'll be emitted in real time during sliding) | value after changing |\n\n"
  },
  {
    "path": "examples/docs/en-US/statistic.md",
    "content": "## Statistic\n\nUsed to highlight a certain number or group of numbers, such as showing a numerical value, such as a dollar amount, ranking, etc.\n\nCountdown mode\n\n### Basic usage\n\nThe component provides a thousandth place display, but you can use rate to set the 10,000th place, and so on\n:::demo\n\n```html\n<template>\n  <div>\n    <el-row :gutter=\"20\">\n      <el-col :span=\"6\">\n        <div>\n          <el-statistic\n            group-separator=\",\"\n            :precision=\"2\"\n            :value=\"value2\"\n            :title=\"title\"\n          ></el-statistic>\n        </div>\n      </el-col>\n      <el-col :span=\"6\">\n        <div>\n          <el-statistic title=\"Gender Distribution\">\n            <template slot=\"formatter\">\n              456/2\n            </template>\n          </el-statistic>\n        </div>\n      </el-col>\n      <el-col :span=\"6\">\n        <div>\n          <el-statistic\n            group-separator=\",\"\n            :precision=\"2\"\n            decimal-separator=\".\"\n            :value=\"value1\"\n            :title=\"title\"\n          >\n            <template slot=\"prefix\">\n              <i class=\"el-icon-s-flag\" style=\"color: red\"></i>\n            </template>\n            <template slot=\"suffix\">\n              <i class=\"el-icon-s-flag\" style=\"color: blue\"></i>\n            </template>\n          </el-statistic>\n        </div>\n      </el-col>\n      <el-col :span=\"6\">\n        <div>\n          <el-statistic :value=\"like ? 521 : 520\" title=\"Feedback\">\n            <template slot=\"suffix\">\n              <span @click=\"like = !like\" class=\"like\">\n                <i\n                  class=\"el-icon-star-on\"\n                  style=\"color:red\"\n                  v-show=\"!!like\"\n                ></i>\n                <i class=\"el-icon-star-off\" v-show=\"!like\"></i>\n              </span>\n            </template>\n          </el-statistic>\n        </div>\n      </el-col>\n    </el-row>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        like: true,\n        value1: 4154.564,\n        value2: 2222,\n        title: \"Growth this year\",\n      };\n    },\n  };\n</script>\n<style lang=\"scss\">\n  .like {\n    cursor: pointer;\n    font-size: 25px;\n    display: inline-block;\n  }\n</style>\n```\n\n:::\n\n### Count down\n\n:::warning\nSuspend is tentative, it ** just pauses the countdown, not the time, because value points to a future time node **\n\nIf you need to add time to the original, please note that the overall time (the amount of time added and the original time) must be a ** future ** time node, otherwise it is still the end of the countdown\n:::\n:::demo Providing a future time via 'value' will enable the countdown function\n\n```html\n<template>\n  <div>\n    <el-row :gutter=\"20\">\n      <el-col :span=\"14\">\n        <el-card shadow=\"hover\" style=\"width: 100%; \">\n          <div style=\"width: 100%; display: inline-block; \">\n            <el-statistic\n              :value=\"deadline2\"\n              time-indices\n              title=\"🎉Price reduction of goods🎉\"\n            >\n              <template slot=\"suffix\">\n               panic purchase\n              </template>\n            </el-statistic>\n          </div>\n        </el-card>\n        <el-card shadow=\"hover\" style=\"width: 100%;margin-top: 20px; \">\n          <div style=\"width: 100%; display: inline-block;\">\n            <el-statistic\n              @finish=\"hilarity\"\n              :value=\"deadline3\"\n              time-indices\n              title=\"The Value of Time\"\n            >\n              <template slot=\"suffix\">\n                <el-button type=\"primary \" size=\"small\" @click=\"add\"\n                  >add 10s</el-button\n                >\n              </template>\n            </el-statistic>\n          </div>\n        </el-card>\n      </el-col>\n      <el-col :span=\"10\">\n        <el-card shadow=\"hover\" style=\"width: 100%;\">\n          <div slot=\"header\" class=\"clearfix\">\n            <span style=\"font-size: 14px;\">Henry·Wadsworth·Longfellow</span>\n            <el-button\n              style=\"float: right; padding: 3px 0\"\n              type=\"text\"\n              @click=\"clickFn\"\n              >suspend</el-button\n            >\n          </div>\n          <div style=\"font-size: 16px;text-align: left;\">\n            Don't sigh in the past, it is no longer back\n          </div>\n          <div style=\"font-size: 16px;text-align: left;margin-top: 15px;\">\n            Be wise to improve the present\n          </div>\n          <div style=\"font-size: 16px;text-align: left;margin-top: 15px;\">\n            To not worry not afraid of the firm will into the complicated future\n          </div>\n          <div style=\"margin-top: 40px;\"></div>\n          <el-statistic\n            ref=\"statistic\"\n            @finish=\"hilarity\"\n            format=\"HH:mm:ss\"\n            :value=\"deadline4\"\n            title=\"Distance to Tomorrow:\"\n            time-indices\n          >\n          </el-statistic>\n        </el-card>\n      </el-col>\n    </el-row>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        deadline2: Date.now() + 1000 * 60 * 60 * 8,\n        deadline3: Date.now() + 1000 * 60 * 30,\n        deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),\n        stop: true,\n      };\n    },\n    methods: {\n      hilarity() {\n        this.$notify({\n          title: \"Prompt\",\n          message:\n            \"Time is up, do you know that an inch of gold can't buy an inch of time?\",\n          duration: 0,\n        });\n      },\n      clickFn() {\n        this.$refs.statistic.suspend(this.stop);\n        this.stop = !this.stop;\n      },\n      add() {\n        this.deadline3 = this.deadline3 + 1000 * 10;\n      },\n    },\n  };\n</script>\n```\n\n:::\n\n### Statistic Attributes\n\n| Attribute         | Description                    | Type                        | Accepted Values | Default |\n| ----------------- | ------------------------------ | --------------------------- | --------------- | ------- |\n| value             | Numerical content              | string \\| number            | -               | -       |\n| decimal-separator | Setting the decimal point      | string                      | -               | .       |\n| formatter         | Custom numerical presentation  | v-slot \\|({value}) => VNode | -               | -       |\n| group-separator   | Sets the thousandth identifier | string                      | -               | ,       |\n| precision         | numerical precision            | number                      | -               | -       |\n| prefix            | Sets the prefix of a number    | string \\| v-slot            | -               | -       |\n| suffix            | Sets the suffix of a number    | string \\| v-slot            | -               | -       |\n| title             | Numeric titles                 | string \\| v-slot            | -               | -       |\n| value-style       | Styles numeric values          | style                       | -               | -       |\n| rate              | Set the ratio                  | number                      | -               | 1000    |\n\n### Statistic Slots\n\n| Name      | Description                 |\n| --------- | --------------------------- |\n| prefix    | Numeric prefix              |\n| suffix    | Suffixes for numeric values |\n| formatter | Numerical content           |\n| title     | Numeric titles              |\n\n### Statistic.Countdown Attributes\n\n| Attribute    | Description                              | Type    | Options     | Default    |\n| ------------ | ---------------------------------------- | ------- | ----------- | ---------- |\n| time-indices | Whether to enable the countdown function | boolean | true\\|false | false      |\n| value        | Required value, enter the bound value    | string  | —           | —          |\n| format       | Formatting the countdown display         | string  | —           | 'HH:mm:ss' |\n\n### Statistic.Countdown Events\n\n| Method | Description                                | Parameters       |\n| ------ | ------------------------------------------ | ---------------- |\n| change | Enable in the 'countdown' function         | (value: Date)    |\n| finish | Launched after the 'countdown' is complete | (value: boolean) |\n\n### Statistic Methods\n\n| Method  | Description         | Parameters      | CallBack      |\n| ------- | ------------------- | --------------- | ------------- |\n| suspend | Pause the countdown | (value:boolean) | (value: Date) |\n"
  },
  {
    "path": "examples/docs/en-US/steps.md",
    "content": "## Steps\n\nGuide 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.\n\n### Basic usage\n\nSimple step bar.\n\n:::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.\n\n```html\n<el-steps :active=\"active\" finish-status=\"success\">\n  <el-step title=\"Step 1\"></el-step>\n  <el-step title=\"Step 2\"></el-step>\n  <el-step title=\"Step 3\"></el-step>\n</el-steps>\n\n<el-button style=\"margin-top: 12px;\" @click=\"next\">Next step</el-button>\n\n<script>\n  export default {\n    data() {\n      return {\n        active: 0\n      };\n    },\n\n    methods: {\n      next() {\n        if (this.active++ > 2) this.active = 0;\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Step bar that contains status\n\nShows the status of the step for each step.\n\n:::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.\n\n```html\n<el-steps :space=\"200\" :active=\"1\" finish-status=\"success\">\n  <el-step title=\"Done\"></el-step>\n  <el-step title=\"Processing\"></el-step>\n  <el-step title=\"Step 3\"></el-step>\n</el-steps>\n```\n:::\n\n### Center\n\nTitle and desription can be centered.\n\n:::demo\n```html\n<el-steps :active=\"2\" align-center>\n  <el-step title=\"Step 1\" description=\"Some description\"></el-step>\n  <el-step title=\"Step 2\" description=\"Some description\"></el-step>\n  <el-step title=\"Step 3\" description=\"Some description\"></el-step>\n  <el-step title=\"Step 4\" description=\"Some description\"></el-step>\n</el-steps>\n```\n:::\n\n### Step bar with description\n\nThere is description for each step.\n\n:::demo\n```html\n<el-steps :active=\"1\">\n  <el-step title=\"Step 1\" description=\"Some description\"></el-step>\n  <el-step title=\"Step 2\" description=\"Some description\"></el-step>\n  <el-step title=\"Step 3\" description=\"Some description\"></el-step>\n</el-steps>\n```\n:::\n\n### Step bar with icon\n\nA variety of custom icons can be used in the step bar.\n\n:::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`.\n\n```html\n<el-steps :active=\"1\">\n  <el-step title=\"Step 1\" icon=\"el-icon-edit\"></el-step>\n  <el-step title=\"Step 2\" icon=\"el-icon-upload\"></el-step>\n  <el-step title=\"Step 3\" icon=\"el-icon-picture\"></el-step>\n</el-steps>\n```\n:::\n\n### Vertical step bar\n\nVertical step bars.\n\n:::demo You only need to set the `direction` attribute to` vertical` in the `el-steps` element.\n\n```html\n<div style=\"height: 300px;\">\n  <el-steps direction=\"vertical\" :active=\"1\">\n    <el-step title=\"Step 1\"></el-step>\n    <el-step title=\"Step 2\"></el-step>\n    <el-step title=\"Step 3\"></el-step>\n  </el-steps>\n</div>\n```\n:::\n\n### Simple step bar\nSimple step bars, where `align-center`, `description`, `direction` and `space` will be ignored.\n\n:::demo\n```html\n\n<el-steps :space=\"200\" :active=\"1\" simple>\n  <el-step title=\"Step 1\" icon=\"el-icon-edit\"></el-step>\n  <el-step title=\"Step 2\" icon=\"el-icon-upload\"></el-step>\n  <el-step title=\"Step 3\" icon=\"el-icon-picture\"></el-step>\n</el-steps>\n\n<el-steps :active=\"1\" finish-status=\"success\" simple style=\"margin-top: 20px\">\n  <el-step title=\"Step 1\" ></el-step>\n  <el-step title=\"Step 2\" ></el-step>\n  <el-step title=\"Step 3\" ></el-step>\n</el-steps>\n```\n:::\n\n### Steps Attributes\n\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------- |---------- |-------------  |-------- |\n| space | the spacing of each step, will be responsive if omitted. Supports percentage. | number / string | — | — |\n| direction | display direction | string | vertical/horizontal | horizontal |\n| active | current activation step  | number | — | 0 |\n| process-status | status of current step | string | wait / process / finish / error / success | process |\n| finish-status | status of end step | string | wait / process / finish / error / success | finish |\n| align-center | center title and description | boolean | — | false |\n| simple | whether to apply simple theme | boolean | - | false |\n\n### Step Attributes\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------- |---------- |-------------  |-------- |\n| title | step title | string | — | — |\n| description | step description | string | — | — |\n| icon | step icon | step icon's class name. Icons can be passed via named slot as well | string | — |\n| status | current status. It will be automatically set by Steps if not configured. | wait / process / finish / error / success | - |\n\n### Step Slot\n| Name | Description |\n|----|----|\n| icon | custom icon |\n| title | step title |\n| description | step description |\n\n"
  },
  {
    "path": "examples/docs/en-US/switch.md",
    "content": "## Switch\n\nSwitch is used for switching between two opposing states.\n\n### Basic usage\n:::demo Bind `v-model` to a `Boolean` typed variable. The `active-color` and `inactive-color` attribute decides the background color in two states.\n\n```html\n<el-switch v-model=\"value1\">\n</el-switch>\n<el-switch\n  v-model=\"value2\"\n  active-color=\"#13ce66\"\n  inactive-color=\"#ff4949\">\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: true,\n        value2: true\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Text description\n:::demo You can add `active-text` and `inactive-text` attribute to show texts.\n\n```html\n<el-switch\n  v-model=\"value1\"\n  active-text=\"Pay by month\"\n  inactive-text=\"Pay by year\">\n</el-switch>\n<el-switch\n  style=\"display: block\"\n  v-model=\"value2\"\n  active-color=\"#13ce66\"\n  inactive-color=\"#ff4949\"\n  active-text=\"Pay by month\"\n  inactive-text=\"Pay by year\">\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: true,\n        value2: true\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Extended value types\n\n:::demo You can set `active-value` and `inactive-value` attributes. They both receive a `Boolean`, `String` or `Number` typed value.\n\n```html\n<el-tooltip :content=\"'Switch value: ' + value\" placement=\"top\">\n  <el-switch\n    v-model=\"value\"\n    active-color=\"#13ce66\"\n    inactive-color=\"#ff4949\"\n    active-value=\"100\"\n    inactive-value=\"0\">\n  </el-switch>\n</el-tooltip>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: '100'\n      }\n    }\n  };\n</script>\n```\n\n:::\n\n### Disabled\n\n:::demo Adding the `disabled` attribute disables Switch.\n\n```html\n<el-switch\n  v-model=\"value1\"\n  disabled>\n</el-switch>\n<el-switch\n  v-model=\"value2\"\n  disabled>\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: true,\n        value2: false\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Attributes\n\n| Attribute      | Description          | Type      | Accepted Values       | Default |\n|-----| ----| ----| ----|---- |\n| value / v-model | binding value | boolean / string / number | — | — |\n| disabled | whether Switch is disabled | boolean | — | false |\n| width | width of Switch | number | — | 40 |\n| active-icon-class | class name of the icon displayed when in `on` state, overrides `active-text` | string | — | — |\n| inactive-icon-class |class name of the icon displayed when in `off` state, overrides `inactive-text`| string | — | — |\n| active-text | text displayed when in `on` state | string | — | — |\n| inactive-text | text displayed when in `off` state | string | — | — |\n| active-value  | switch value when in `on` state | boolean / string / number | — | true |\n| inactive-value  | switch value when in `off` state | boolean / string / number | — | false |\n| active-color | background color when in `on` state | string | — | #409EFF |\n| inactive-color | background color when in `off` state | string | — | #C0CCDA |\n| name           | input name of Switch | string | — | — |\n| validate-event | whether to trigger form validation | boolean | - | true |\n\n### Events\n\n| Event Name | Description | Parameters |\n| ---- | ----| ---- |\n| change | triggers when value changes | value after changing |\n\n### Methods\n| Method | Description | Parameters |\n| ------|--------|------- |\n| focus | focus the Switch component | — |\n"
  },
  {
    "path": "examples/docs/en-US/table.md",
    "content": "## Table\n\nDisplay multiple data with similar format. You can sort, filter, compare your data in a table.\n\n### Basic table\n\nBasic table is just for data display.\n\n:::demo After setting attribute `data` of `el-table` with an object array, you can use `prop` (corresponding to a key of the object in `data` array) in `el-table-column` to insert data to table columns, and set the attribute `label` to define the column name. You can also use the attribute `width` to define the width of columns.\n\n```html\n  <template>\n    <el-table\n      :data=\"tableData\"\n      style=\"width: 100%\">\n      <el-table-column\n        prop=\"date\"\n        label=\"Date\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"name\"\n        label=\"Name\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"address\"\n        label=\"Address\">\n      </el-table-column>\n    </el-table>\n  </template>\n\n  <script>\n    export default {\n      data() {\n        return {\n          tableData: [{\n            date: '2016-05-03',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-02',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-04',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-01',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }]\n        }\n      }\n    }\n  </script>\n```\n:::\n\n### Striped Table\n\nStriped table makes it easier to distinguish different rows.\n\n:::demo Attribute `stripe` accepts a `Boolean`. If `true`, table will be striped.\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    stripe\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Table with border\n\n:::demo By default, Table has no vertical border. If you need it, you can set attribute `border` to `true`.\n\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    border\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Table with status\n\nYou can highlight your table content to distinguish between \"success, information, warning, danger\" and other states.\n\n:::demo Use `row-class-name` in `el-table` to add custom classes to a certain row. Then you can style it with custom classes.\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    :row-class-name=\"tableRowClassName\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  .el-table .warning-row {\n    background: oldlace;\n  }\n\n  .el-table .success-row {\n    background: #f0f9eb;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      tableRowClassName({row, rowIndex}) {\n        if (rowIndex === 1) {\n          return 'warning-row';\n        } else if (rowIndex === 3) {\n          return 'success-row';\n        }\n        return '';\n      }\n    },\n    data() {\n      return {\n        tableData:  [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Table with fixed header\n\nWhen there are too many rows, you can use a fixed header.\n\n:::demo By setting the attribute `height` of `el-table`, you can fix the table header without any other codes.\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    height=\"250\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }],\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Table with fixed column\n\nWhen there are too many columns, you can fix some of them.\n\n:::demo Attribute `fixed` is used in `el-table-column`, it accepts a `Boolean`. If `true`, the column will be fixed at left. It also accepts two string literals: 'left' and 'right', both indicating that the column will be fixed at corresponding direction.\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Date\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"State\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"City\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Zip\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      fixed=\"right\"\n      label=\"Operations\"\n      width=\"120\">\n      <template slot-scope=\"scope\">\n        <el-button @click=\"handleClick\" type=\"text\" size=\"small\">Detail</el-button>\n        <el-button type=\"text\" size=\"small\">Edit</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    methods: {\n      handleClick() {\n        console.log('click');\n      }\n    },\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Table with fixed columns and header\n\nWhen you have huge chunks of data to put in a table, you can fix the header and columns at the same time.\n\n:::demo  Fix columns and header at the same time by combining the above two examples.\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    height=\"250\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Date\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"State\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"City\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Zip\"\n      width=\"120\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Fluid-height Table with fixed header (and columns)\n\nWhen the the data is dynamically changed, you might want the table to have a maximum height rather than a fixed height and to show the scroll bar if needed.\n\n:::demo  By setting the attribute `max-height` of `el-table`, you can fix the table header. The table body scrolls only if the height of the rows exceeds the max height value.\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    max-height=\"250\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Date\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"State\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"City\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Zip\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      fixed=\"right\"\n      label=\"Operations\"\n      width=\"120\">\n      <template slot-scope=\"scope\">\n        <el-button\n          @click.native.prevent=\"deleteRow(scope.$index, tableData)\"\n          type=\"text\"\n          size=\"small\">\n          Remove\n        </el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    methods: {\n      deleteRow(index, rows) {\n        rows.splice(index, 1);\n      }\n    },\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Grouping table head\n\nWhen the data structure is complex, you can use group header to show the data hierarchy.\n\n:::demo Only need to place el-table-column inside a el-table-column, you can achieve group header.\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column label=\"Delivery Info\">\n      <el-table-column\n        prop=\"name\"\n        label=\"Name\"\n        width=\"120\">\n      </el-table-column>\n      <el-table-column label=\"Address Info\">\n        <el-table-column\n          prop=\"state\"\n          label=\"State\"\n          width=\"120\">\n        </el-table-column>\n        <el-table-column\n          prop=\"city\"\n          label=\"City\"\n          width=\"120\">\n        </el-table-column>\n        <el-table-column\n          prop=\"address\"\n          label=\"Address\"\n          width=\"300\">\n        </el-table-column>\n        <el-table-column\n          prop=\"zip\"\n          label=\"Zip\"\n          width=\"120\">\n        </el-table-column>\n      </el-table-column>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Single select\n\nSingle row selection is supported.\n\n:::demo Table supports single row selection. You can activate it by adding the `highlight-current-row` attribute. An event called `current-change` will be triggered when row selection changes, and its parameters are the rows after and before this change: `currentRow` and `oldCurrentRow`. If you need to display row index, you can add a new `el-table-column` with its `type` attribute assigned to `index`, and you will see the index starting from 1.\n```html\n<template>\n  <el-table\n    ref=\"singleTable\"\n    :data=\"tableData\"\n    highlight-current-row\n    @current-change=\"handleCurrentChange\"\n    style=\"width: 100%\">\n    <el-table-column\n      type=\"index\"\n      width=\"50\">\n    </el-table-column>\n    <el-table-column\n      property=\"date\"\n      label=\"Date\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      property=\"name\"\n      label=\"Name\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      property=\"address\"\n      label=\"Address\">\n    </el-table-column>\n  </el-table>\n  <div style=\"margin-top: 20px\">\n    <el-button @click=\"setCurrent(tableData[1])\">Select second row</el-button>\n    <el-button @click=\"setCurrent()\">Clear selection</el-button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }],\n        currentRow: null\n      }\n    },\n\n    methods: {\n      setCurrent(row) {\n        this.$refs.singleTable.setCurrentRow(row);\n      },\n      handleCurrentChange(val) {\n        this.currentRow = val;\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Multiple select\n\nYou can also select multiple rows.\n\n:::demo Activating multiple selection is easy: simply add an `el-table-column` with its `type` set to `selection`. Apart from multiple selection, this example also uses `show-overflow-tooltip`: by default, if the content is too long, it will break into multiple lines. If you want to keep it in one line, use attribute `show-overflow-tooltip`, which accepts a `Boolean` value. When set `true`, the extra content will show in tooltip when hover on the cell.\n```html\n<template>\n  <el-table\n    ref=\"multipleTable\"\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    @selection-change=\"handleSelectionChange\">\n    <el-table-column\n      type=\"selection\"\n      width=\"55\">\n    </el-table-column>\n    <el-table-column\n      label=\"Date\"\n      width=\"120\">\n      <template slot-scope=\"scope\">{{ scope.row.date }}</template>\n    </el-table-column>\n    <el-table-column\n      property=\"name\"\n      label=\"Name\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      property=\"address\"\n      label=\"Address\"\n      show-overflow-tooltip>\n    </el-table-column>\n  </el-table>\n  <div style=\"margin-top: 20px\">\n    <el-button @click=\"toggleSelection([tableData[1], tableData[2]])\">Toggle selection status of second and third rows</el-button>\n    <el-button @click=\"toggleSelection()\">Clear selection</el-button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }],\n        multipleSelection: []\n      }\n    },\n\n    methods: {\n      toggleSelection(rows) {\n        if (rows) {\n          rows.forEach(row => {\n            this.$refs.multipleTable.toggleRowSelection(row);\n          });\n        } else {\n          this.$refs.multipleTable.clearSelection();\n        }\n      },\n      handleSelectionChange(val) {\n        this.multipleSelection = val;\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Sorting\n\nSort the data to find or compare data quickly.\n\n:::demo Set attribute `sortable` in a certain column to sort the data based on this column. It accepts `Boolean` with a default value `false`. Set table attribute `default-sort` to determine default sort column and order. To apply your own sorting rules, use `sort-method` or `sort-by`. If you need remote sorting from backend, set `sortable` to `custom`, and listen to the `sort-change` event on Table. In the event handler, you have access to the sorting column and sorting order so that you can fetch sorted table data from API. In this example we use another attribute named `formatter` to format the value of certain columns. It accepts a function which has two parameters: `row` and `column`. You can handle it according to your own needs.\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    :default-sort = \"{prop: 'date', order: 'descending'}\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\"\n      :formatter=\"formatter\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    },\n    methods: {\n      formatter(row, column) {\n        return row.address;\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Filter\n\nFilter the table to find desired data.\n\n:::demo Set attribute `filters` and `filter-method` in `el-table-column` makes this column filterable. `filters` is an array, and `filter-method` is a function deciding which rows are displayed. It has three parameters: `value`, `row` and `column`.\n```html\n<template>\n  <el-button @click=\"resetDateFilter\">reset date filter</el-button>\n  <el-button @click=\"clearFilter\">reset all filters</el-button>\n  <el-table\n    ref=\"filterTable\"\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      sortable\n      width=\"180\"\n      column-key=\"date\"\n      :filters=\"[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]\"\n      :filter-method=\"filterHandler\"\n    >\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\"\n      :formatter=\"formatter\">\n    </el-table-column>\n    <el-table-column\n      prop=\"tag\"\n      label=\"Tag\"\n      width=\"100\"\n      :filters=\"[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]\"\n      :filter-method=\"filterTag\"\n      filter-placement=\"bottom-end\">\n      <template slot-scope=\"scope\">\n        <el-tag\n          :type=\"scope.row.tag === 'Home' ? 'primary' : 'success'\"\n          disable-transitions>{{scope.row.tag}}</el-tag>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Office'\n        }]\n      }\n    },\n    methods: {\n      resetDateFilter() {\n        this.$refs.filterTable.clearFilter('date');\n      },\n      clearFilter() {\n        this.$refs.filterTable.clearFilter();\n      },\n      formatter(row, column) {\n        return row.address;\n      },\n      filterTag(value, row) {\n        return row.tag === value;\n      },\n      filterHandler(value, row, column) {\n        const property = column['property'];\n        return row[property] === value;\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Custom column template\n\nCustomize table column so it can be integrated with other components.\n:::demo You have access to the following data: row, column, $index and store (state management of Table) by [Scoped slot](https://v2.vuejs.org/v2/guide/components-slots#Scoped-Slots).\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      label=\"Date\"\n      width=\"180\">\n      <template slot-scope=\"scope\">\n        <i class=\"el-icon-time\"></i>\n        <span style=\"margin-left: 10px\">{{ scope.row.date }}</span>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label=\"Name\"\n      width=\"180\">\n      <template slot-scope=\"scope\">\n        <el-popover trigger=\"hover\" placement=\"top\">\n          <p>Name: {{ scope.row.name }}</p>\n          <p>Addr: {{ scope.row.address }}</p>\n          <div slot=\"reference\" class=\"name-wrapper\">\n            <el-tag size=\"medium\">{{ scope.row.name }}</el-tag>\n          </div>\n        </el-popover>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label=\"Operations\">\n      <template slot-scope=\"scope\">\n        <el-button\n          size=\"mini\"\n          @click=\"handleEdit(scope.$index, scope.row)\">Edit</el-button>\n        <el-button\n          size=\"mini\"\n          type=\"danger\"\n          @click=\"handleDelete(scope.$index, scope.row)\">Delete</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Table with custom header\n\nCustomize table header so it can be even more customized.\n:::demo You can customize how the header looks by header [scoped slots](https://v2.vuejs.org/v2/guide/components-slots#Scoped-Slots).\n```html\n<template>\n  <el-table\n    :data=\"tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))\"\n    style=\"width: 100%\">\n    <el-table-column\n      label=\"Date\"\n      prop=\"date\">\n    </el-table-column>\n    <el-table-column\n      label=\"Name\"\n      prop=\"name\">\n    </el-table-column>\n    <el-table-column\n      align=\"right\">\n      <template slot=\"header\" slot-scope=\"scope\">\n        <el-input\n          v-model=\"search\"\n          size=\"mini\"\n          placeholder=\"Type to search\"/>\n      </template>\n      <template slot-scope=\"scope\">\n        <el-button\n          size=\"mini\"\n          @click=\"handleEdit(scope.$index, scope.row)\">Edit</el-button>\n        <el-button\n          size=\"mini\"\n          type=\"danger\"\n          @click=\"handleDelete(scope.$index, scope.row)\">Delete</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'John',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Morgan',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Jessy',\n          address: 'No. 189, Grove St, Los Angeles'\n        }],\n        search: '',\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    },\n  }\n</script>\n```\n:::\n\n### Expandable row\n\nWhen the row content is too long and you do not want to display the horizontal scroll bar, you can use the expandable row feature.\n:::demo Activate expandable row by adding type=\"expand\" and scoped slot. The template for el-table-column will be rendered as the contents of the expanded row, and you can access the same attributes as when you are using `Scoped slot` in custom column templates.\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column type=\"expand\">\n      <template slot-scope=\"props\">\n        <p>State: {{ props.row.state }}</p>\n        <p>City: {{ props.row.city }}</p>\n        <p>Address: {{ props.row.address }}</p>\n        <p>Zip: {{ props.row.zip }}</p>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label=\"Date\"\n      prop=\"date\">\n    </el-table-column>\n    <el-table-column\n      label=\"Name\"\n      prop=\"name\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Tree data and lazy mode\n\n:::demo You can display tree structure data. When row contains the `children` field, it is treated as nested data. For rendering nested data, the prop `row-key` is required。Also, child row data can be loaded asynchronously. Set `lazy` property of Table to true and the function `load`. Specify `hasChildren` attribute in row to determine which row contains children. Both `children` and `hasChildren` can be configured via `tree-props`.\n\n```html\n<template>\n<div>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%;margin-bottom: 20px;\"\n    row-key=\"id\"\n    border\n    default-expand-all>\n    <el-table-column\n      prop=\"date\"\n      label=\"date\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n  </el-table>\n\n  <el-table\n    :data=\"tableData1\"\n    style=\"width: 100%\"\n    row-key=\"id\"\n    border\n    lazy\n    :load=\"load\"\n    :tree-props=\"{children: 'children', hasChildren: 'hasChildren'}\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"180\">\n    </el-table-column>\n  </el-table>\n</div>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: 1,\n          date: '2016-05-02',\n          name: 'wangxiaohu'\n        }, {\n          id: 2,\n          date: '2016-05-04',\n          name: 'wangxiaohu'\n        }, {\n          id: 3,\n          date: '2016-05-01',\n          name: 'wangxiaohu',\n          children: [{\n              id: 31,\n              date: '2016-05-01',\n              name: 'wangxiaohu'\n            }, {\n              id: 32,\n              date: '2016-05-01',\n              name: 'wangxiaohu'\n          }]\n        }, {\n          id: 4,\n          date: '2016-05-03',\n          name: 'wangxiaohu'\n        }],\n        tableData1: [{\n          id: 1,\n          date: '2016-05-02',\n          name: 'wangxiaohu'\n        }, {\n          id: 2,\n          date: '2016-05-04',\n          name: 'wangxiaohu'\n        }, {\n          id: 3,\n          date: '2016-05-01',\n          name: 'wangxiaohu',\n          hasChildren: true\n        }, {\n          id: 4,\n          date: '2016-05-03',\n          name: 'wangxiaohu'\n        }]\n      }\n    },\n    methods: {\n      load(tree, treeNode, resolve) {\n        setTimeout(() => {\n          resolve([\n            {\n              id: 31,\n              date: '2016-05-01',\n              name: 'wangxiaohu'\n            }, {\n              id: 32,\n              date: '2016-05-01',\n              name: 'wangxiaohu'\n            }\n          ])\n        }, 1000)\n      }\n    },\n  }\n</script>\n```\n:::\n\n### Summary row\n\nFor table of numbers, you can add an extra row at the table footer displaying each column's sum.\n:::demo You can add the summary row by setting `show-summary` to `true`. By default, for the summary row, the first column does not sum anything up but always displays 'Sum' (you can configure the displayed text using `sum-text`), while other columns sum every number in that column up and display them. You can of course define your own sum behaviour. To do so, pass a method to `summary-method`, which returns an array, and each element of the returned array will be displayed in the columns of the summary row. The second table of this example is a detailed demo.\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    border\n    show-summary\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"id\"\n      label=\"ID\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\">\n    </el-table-column>\n    <el-table-column\n      prop=\"amount1\"\n      sortable\n      label=\"Amount 1\">\n    </el-table-column>\n    <el-table-column\n      prop=\"amount2\"\n      sortable\n      label=\"Amount 2\">\n    </el-table-column>\n    <el-table-column\n      prop=\"amount3\"\n      sortable\n      label=\"Amount 3\">\n    </el-table-column>\n  </el-table>\n\n  <el-table\n    :data=\"tableData\"\n    border\n    height=\"200\"\n    :summary-method=\"getSummaries\"\n    show-summary\n    style=\"width: 100%; margin-top: 20px\">\n    <el-table-column\n      prop=\"id\"\n      label=\"ID\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\">\n    </el-table-column>\n    <el-table-column\n      prop=\"amount1\"\n      label=\"Cost 1 ($)\">\n    </el-table-column>\n    <el-table-column\n      prop=\"amount2\"\n      label=\"Cost 2 ($)\">\n    </el-table-column>\n    <el-table-column\n      prop=\"amount3\"\n      label=\"Cost 3 ($)\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: '12987122',\n          name: 'Tom',\n          amount1: '234',\n          amount2: '3.2',\n          amount3: 10\n        }, {\n          id: '12987123',\n          name: 'Tom',\n          amount1: '165',\n          amount2: '4.43',\n          amount3: 12\n        }, {\n          id: '12987124',\n          name: 'Tom',\n          amount1: '324',\n          amount2: '1.9',\n          amount3: 9\n        }, {\n          id: '12987125',\n          name: 'Tom',\n          amount1: '621',\n          amount2: '2.2',\n          amount3: 17\n        }, {\n          id: '12987126',\n          name: 'Tom',\n          amount1: '539',\n          amount2: '4.1',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      getSummaries(param) {\n        const { columns, data } = param;\n        const sums = [];\n        columns.forEach((column, index) => {\n          if (index === 0) {\n            sums[index] = 'Total Cost';\n            return;\n          }\n          const values = data.map(item => Number(item[column.property]));\n          if (!values.every(value => isNaN(value))) {\n            sums[index] = '$ ' + values.reduce((prev, curr) => {\n              const value = Number(curr);\n              if (!isNaN(value)) {\n                return prev + curr;\n              } else {\n                return prev;\n              }\n            }, 0);\n          } else {\n            sums[index] = 'N/A';\n          }\n        });\n\n        return sums;\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Rowspan and colspan\n\nConfiguring rowspan and colspan allows you to merge cells\n:::demo Use the `span-method` attribute to configure rowspan and colspan. It accepts a method, and passes an object to that method including current row `row`, current column `column`, current row index `rowIndex` and current column index `columnIndex`. The method should return an array of two numbers, the first number being `rowspan` and second `colspan`. It can also return an object with `rowspan` and `colspan` props.\n\n```html\n<template>\n  <div>\n    <el-table\n      :data=\"tableData\"\n      :span-method=\"arraySpanMethod\"\n      border\n      style=\"width: 100%\">\n      <el-table-column\n        prop=\"id\"\n        label=\"ID\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"name\"\n        label=\"Name\">\n      </el-table-column>\n      <el-table-column\n        prop=\"amount1\"\n        sortable\n        label=\"Amount 1\">\n      </el-table-column>\n      <el-table-column\n        prop=\"amount2\"\n        sortable\n        label=\"Amount 2\">\n      </el-table-column>\n      <el-table-column\n        prop=\"amount3\"\n        sortable\n        label=\"Amount 3\">\n      </el-table-column>\n    </el-table>\n\n    <el-table\n      :data=\"tableData\"\n      :span-method=\"objectSpanMethod\"\n      border\n      style=\"width: 100%; margin-top: 20px\">\n      <el-table-column\n        prop=\"id\"\n        label=\"ID\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"name\"\n        label=\"Name\">\n      </el-table-column>\n      <el-table-column\n        prop=\"amount1\"\n        label=\"Amount 1\">\n      </el-table-column>\n      <el-table-column\n        prop=\"amount2\"\n        label=\"Amount 2\">\n      </el-table-column>\n      <el-table-column\n        prop=\"amount3\"\n        label=\"Amount 3\">\n      </el-table-column>\n    </el-table>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: '12987122',\n          name: 'Tom',\n          amount1: '234',\n          amount2: '3.2',\n          amount3: 10\n        }, {\n          id: '12987123',\n          name: 'Tom',\n          amount1: '165',\n          amount2: '4.43',\n          amount3: 12\n        }, {\n          id: '12987124',\n          name: 'Tom',\n          amount1: '324',\n          amount2: '1.9',\n          amount3: 9\n        }, {\n          id: '12987125',\n          name: 'Tom',\n          amount1: '621',\n          amount2: '2.2',\n          amount3: 17\n        }, {\n          id: '12987126',\n          name: 'Tom',\n          amount1: '539',\n          amount2: '4.1',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      arraySpanMethod({ row, column, rowIndex, columnIndex }) {\n        if (rowIndex % 2 === 0) {\n          if (columnIndex === 0) {\n            return [1, 2];\n          } else if (columnIndex === 1) {\n            return [0, 0];\n          }\n        }\n      },\n\n      objectSpanMethod({ row, column, rowIndex, columnIndex }) {\n        if (columnIndex === 0) {\n          if (rowIndex % 2 === 0) {\n            return {\n              rowspan: 2,\n              colspan: 1\n            };\n          } else {\n            return {\n              rowspan: 0,\n              colspan: 0\n            };\n          }\n        }\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Custom index\n\nYou can customize row index in `type=index` columns.\n:::demo To customize row indices, use `index` attribute on `el-table-column` with `type=index`. If it is assigned to a number, all indices will have an offset of that number. It also accepts a method with each index (starting from `0`) as parameter, and the returned value will be displayed as index.\n\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      type=\"index\"\n      :index=\"indexMethod\">\n    </el-table-column>\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Name\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Address\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }],\n      }\n    },\n    methods: {\n      indexMethod(index) {\n        return index * 2;\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Table Attributes\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|----------------|----------------------|-----------|-----------------------|----------|\n| data | Table data | array | — | — |\n| height | Table's height. By default it has an `auto` height. If its value is a number, the height is measured in pixels; if its value is a string, the value will be assigned to element's style.height, the height is affected by external styles | string/number | — | — |\n| max-height | Table's max-height. The legal value is a number or the height in px. | string/number | — | — |\n| stripe | whether Table is striped | boolean | — | false |\n| border | whether Table has vertical border | boolean | — | false |\n| size | size of Table | string | medium / small / mini | — |\n| fit | whether width of column automatically fits its container | boolean | — | true |\n| show-header | whether Table header is visible | boolean | — | true |\n| highlight-current-row | whether current row is highlighted | boolean | — | false |\n| highlight-selection-row | whether selection row is highlighted | boolean | — | false |\n| current-row-key | key of current row, a set only prop | string,number | — | — |\n| row-class-name | function that returns custom class names for a row, or a string assigning class names for every row | Function({row, rowIndex})/String | — | — |\n| row-style | function that returns custom style for a row, or an object assigning custom style for every row | Function({row, rowIndex})/Object | — | — |\n| cell-class-name | function that returns custom class names for a cell, or a string assigning class names for every cell | Function({row, column, rowIndex, columnIndex})/String | — | — |\n| cell-style | function that returns custom style for a cell, or an object assigning custom style for every cell | Function({row, column, rowIndex, columnIndex})/Object | — | — |\n| header-row-class-name | function that returns custom class names for a row in table header, or a string assigning class names for every row in table header | Function({row, rowIndex})/String | — | — |\n| header-row-style | function that returns custom style for a row in table header, or an object assigning custom style for every row in table header | Function({row, rowIndex})/Object | — | — |\n| header-cell-class-name | function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header | Function({row, column, rowIndex, columnIndex})/String | — | — |\n| header-cell-style | function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header | Function({row, column, rowIndex, columnIndex})/Object | — | — |\n| row-key | key of row data, used for optimizing rendering. Required if `reserve-selection` is on or display tree data. When its type is String, multi-level access is supported, e.g. `user.info.id`, but `user.info[0].id` is not supported, in which case `Function` should be used. | Function(row)/String | — | — |\n| empty-text | Displayed text when data is empty. You can customize this area with `slot=\"empty\"` | String | — | No Data |\n| default-expand-all | whether expand all rows by default, works when the table has a column type=\"expand\" or contains tree structure data | Boolean | — | false |\n| expand-row-keys | set expanded rows by this prop, prop's value is the keys of expand rows, you should set row-key before using this prop | Array | — | |\n| default-sort | set the default sort column and order. property `prop` is used to set default sort column, property `order` is used to set default sort order | Object | `order`: ascending, descending | if `prop` is set, and `order` is not set, then `order` is default to ascending |\n| tooltip-effect | tooltip `effect` property | String | dark/light | | dark |\n| show-summary | whether to display a summary row | Boolean | — | false |\n| sum-text | displayed text for the first column of summary row | String | — | Sum |\n| summary-method | custom summary method | Function({ columns, data }) | — | — |\n| span-method | method that returns rowspan and colspan | Function({ row, column, rowIndex, columnIndex }) | — | — |\n| select-on-indeterminate | controls the behavior of master checkbox in multi-select tables when only some rows are selected (but not all). If true, all rows will be selected, else deselected. | Boolean | — | true |\n| indent      | horizontal indentation of tree data | Number | — | 16 |\n| lazy        | whether to lazy loading data           | Boolean| — | —  |\n| load        | method for loading child row data, only works when `lazy` is true | Function(row, treeNode, resolve) | — | — |\n| tree-props  | configuration for rendering nested data| Object | — | { hasChildren: 'hasChildren', children: 'children' } |\n\n### Table Events\n| Event Name | Description | Parameters |\n| ---- | ---- | ---- |\n| select | triggers when user clicks the checkbox in a row | selection, row |\n| select-all | triggers when user clicks the checkbox in table header | selection |\n| selection-change | triggers when selection changes | selection |\n| cell-mouse-enter | triggers when hovering into a cell| row, column, cell, event |\n| cell-mouse-leave | triggers when hovering out of a cell | row, column, cell, event |\n| cell-click | triggers when clicking a cell | row, column, cell, event |\n| cell-dblclick | triggers when double clicking a cell | row, column, cell, event |\n| row-click | triggers when clicking a row | row, column, event |\n| row-contextmenu | triggers when user right clicks on a row | row, column, event |\n| row-dblclick | triggers when double clicking a row | row, column, event |\n| header-click | triggers when clicking a column header | column, event |\n| header-contextmenu | triggers when user right clicks on a column header | column, event |\n| sort-change | triggers when Table's sorting changes | { column, prop, order } |\n| filter-change | column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered | filters |\n| current-change | triggers when current row changes | currentRow, oldCurrentRow |\n| header-dragend | triggers after changing a column's width by dragging the column header's border | newWidth, oldWidth, column, event |\n| expand-change | triggers when user expands or collapses a row (for expandable table, second param is expandedRows; for tree Table, second param is expanded) | row, (expandedRows \\| expanded) |\n\n### Table Methods\n| Method | Description | Parameters |\n|------|--------|-------|\n| clearSelection | used in multiple selection Table, clear user selection | — |\n| toggleRowSelection | used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected | row, selected |\n| toggleAllSelection | used in multiple selection Table, toggle the selected state of all rows | - |\n| toggleRowExpansion | used in expandable Table or tree Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed | row, expanded |\n| setCurrentRow | used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection. | row |\n| clearSort | clear sorting, restore data to the original order | — |\n| clearFilter | clear filters of the columns whose `columnKey` are passed in. If no params, clear all filters | columnKeys |\n| doLayout | refresh the layout of Table. When the visibility of Table changes, you may need to call this method to get a correct layout | — |\n| sort | sort Table manually. Property `prop` is used to set sort column, property `order` is used to set sort order | prop: string, order: string |\n\n### Table Slot\n| Name | Description |\n|------|--------|\n| append | Contents to be inserted after the last row. You may need this slot if you want to implement infinite scroll for the table. This slot will be displayed above the summary row if there is one. |\n\n### Table-column Attributes\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| type | type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1). If set to `expand`, the column will display expand icon.  | string | selection/index/expand | — |\n| index | customize indices for each row, works on columns with `type=index` | number, Function(index) | - | - |\n| label | column label | string | — | — |\n| column-key | column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered | string | string | — | — |\n| prop |  field name. You can also use its alias: `property` | string | — | — |\n| width | column width | string | — | — |\n| 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 | string | — | — |\n| fixed | whether column is fixed at left/right. Will be fixed at left if `true` | string/boolean | true/left/right | — |\n| render-header | render function for table header of this column | Function(h, { column, $index }) | — | — |\n| sortable | whether column can be sorted. Remote sorting can be done by setting this attribute to 'custom' and listening to the `sort-change` event of Table | boolean, string | true, false, custom | false |\n| sort-method | sorting method, works when `sortable` is `true`. Should return a number, just like Array.sort | Function(a, b) | — | — |\n| sort-by | specify which property to sort by, works when `sortable` is `true` and `sort-method` is `undefined`. If set to an Array, the column will sequentially sort by the next property if the previous one is equal | Function(row, index)/String/Array | — | — |\n| sort-orders | the order of the sorting strategies used when sorting the data, works when `sortable` is `true`. Accepts an array, as the user clicks on the header, the column is sorted in order of the elements in the array | array | the elements in the array need to be one of the following: `ascending`, `descending` and `null` (restores to the original order) | ['ascending', 'descending', null] |\n| resizable | whether column width can be resized, works when `border` of `el-table` is `true` | boolean | — | false |\n| formatter | function that formats cell content | Function(row, column, cellValue, index) | — | — |\n| show-overflow-tooltip | whether to hide extra content and show them in a tooltip when hovering on the cell | boolean | — | false |\n| align | alignment | string | left/center/right | left |\n| header-align | alignment of the table header. If omitted, the value of the above `align` attribute will be applied | String | left/center/right | — |\n| class-name | class name of cells in the column | string | — | — |\n| label-class-name | class name of the label of this column | string | — | — |\n| selectable | function that determines if a certain row can be selected, works when `type` is 'selection' | Function(row, index) | — | — |\n| reserve-selection | whether to reserve selection after data refreshing, works when `type` is 'selection'. Note that `row-key` is required for this to work | boolean | — | false |\n| filters | an array of data filtering options. For each element in this array, `text` and `value` are required | Array[{ text, value }] | — | — |\n| filter-placement | placement for the filter dropdown | String | same as Tooltip's `placement` | — |\n| filter-multiple | whether data filtering supports multiple options | Boolean | — | true |\n| filter-method | data filtering method. If `filter-multiple` is on, this method will be called multiple times for each row, and a row will display if one of the calls returns `true` | Function(value, row, column) | — | — |\n| filtered-value | filter value for selected data, might be useful when table header is rendered with `render-header` | Array | — | — |\n\n### Table-column Scoped Slot\n| Name | Description |\n|------|--------|\n| — | Custom content for table columns. The scope parameter is { row, column, $index } |\n| header | Custom content for table header. The scope parameter is { column, $index } |\n"
  },
  {
    "path": "examples/docs/en-US/tabs.md",
    "content": "## Tabs\n\nDivide data collections which are related yet belong to different types.\n\n### Basic usage\n\nBasic and concise tabs.\n\n:::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.\n\n```html\n<template>\n  <el-tabs v-model=\"activeName\" @tab-click=\"handleClick\">\n    <el-tab-pane label=\"User\" name=\"first\">User</el-tab-pane>\n    <el-tab-pane label=\"Config\" name=\"second\">Config</el-tab-pane>\n    <el-tab-pane label=\"Role\" name=\"third\">Role</el-tab-pane>\n    <el-tab-pane label=\"Task\" name=\"fourth\">Task</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: 'first'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Card Style\n\nTabs styled as cards.\n\n:::demo Set `type` to `card` can get a card-styled tab.\n\n```html\n<template>\n  <el-tabs type=\"card\" @tab-click=\"handleClick\">\n    <el-tab-pane label=\"User\">User</el-tab-pane>\n    <el-tab-pane label=\"Config\">Config</el-tab-pane>\n    <el-tab-pane label=\"Role\">Role</el-tab-pane>\n    <el-tab-pane label=\"Task\">Task</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: 'first'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Border card\n\nBorder card tabs.\n\n:::demo Set `type` to `border-card`.\n\n```html\n<el-tabs type=\"border-card\">\n  <el-tab-pane label=\"User\">User</el-tab-pane>\n  <el-tab-pane label=\"Config\">Config</el-tab-pane>\n  <el-tab-pane label=\"Role\">Role</el-tab-pane>\n  <el-tab-pane label=\"Task\">Task</el-tab-pane>\n</el-tabs>\n```\n\n:::\n\n### Tab position\n\nYou can use `tab-position` attribute to set the tab's position.\n\n:::demo You can choose from four directions: `tabPosition=\"left|right|top|bottom\"`\n\n```html\n<template>\n  <el-radio-group v-model=\"tabPosition\" style=\"margin-bottom: 30px;\">\n    <el-radio-button label=\"top\">top</el-radio-button>\n    <el-radio-button label=\"right\">right</el-radio-button>\n    <el-radio-button label=\"bottom\">bottom</el-radio-button>\n    <el-radio-button label=\"left\">left</el-radio-button>\n  </el-radio-group>\n\n  <el-tabs :tab-position=\"tabPosition\" style=\"height: 200px;\">\n    <el-tab-pane label=\"User\">User</el-tab-pane>\n    <el-tab-pane label=\"Config\">Config</el-tab-pane>\n    <el-tab-pane label=\"Role\">Role</el-tab-pane>\n    <el-tab-pane label=\"Task\">Task</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        tabPosition: 'left'\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Custom Tab\n\nYou can use named slot to customize the tab label content.\n\n:::demo\n```html\n<el-tabs type=\"border-card\">\n  <el-tab-pane>\n    <span slot=\"label\"><i class=\"el-icon-date\"></i> Route</span>\n    Route\n  </el-tab-pane>\n  <el-tab-pane label=\"Config\">Config</el-tab-pane>\n  <el-tab-pane label=\"Role\">Role</el-tab-pane>\n  <el-tab-pane label=\"Task\">Task</el-tab-pane>\n</el-tabs>\n```\n:::\n\n### Add & close tab\n\nOnly card type Tabs support addable & closeable.\n\n:::demo\n```html\n<el-tabs v-model=\"editableTabsValue\" type=\"card\" editable @edit=\"handleTabsEdit\">\n  <el-tab-pane\n    v-for=\"(item, index) in editableTabs\"\n    :key=\"item.name\"\n    :label=\"item.title\"\n    :name=\"item.name\"\n  >\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n<script>\n  export default {\n    data() {\n      return {\n        editableTabsValue: '2',\n        editableTabs: [{\n          title: 'Tab 1',\n          name: '1',\n          content: 'Tab 1 content'\n        }, {\n          title: 'Tab 2',\n          name: '2',\n          content: 'Tab 2 content'\n        }],\n        tabIndex: 2\n      }\n    },\n    methods: {\n      handleTabsEdit(targetName, action) {\n        if (action === 'add') {\n          let newTabName = ++this.tabIndex + '';\n          this.editableTabs.push({\n            title: 'New Tab',\n            name: newTabName,\n            content: 'New Tab content'\n          });\n          this.editableTabsValue = newTabName;\n        }\n        if (action === 'remove') {\n          let tabs = this.editableTabs;\n          let activeName = this.editableTabsValue;\n          if (activeName === targetName) {\n            tabs.forEach((tab, index) => {\n              if (tab.name === targetName) {\n                let nextTab = tabs[index + 1] || tabs[index - 1];\n                if (nextTab) {\n                  activeName = nextTab.name;\n                }\n              }\n            });\n          }\n          \n          this.editableTabsValue = activeName;\n          this.editableTabs = tabs.filter(tab => tab.name !== targetName);\n        }\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Customized trigger button of new tab\n\n:::demo\n```html\n<div style=\"margin-bottom: 20px;\">\n  <el-button\n    size=\"small\"\n    @click=\"addTab(editableTabsValue)\"\n  >\n    add tab\n  </el-button>\n</div>\n<el-tabs v-model=\"editableTabsValue\" type=\"card\" closable @tab-remove=\"removeTab\">\n  <el-tab-pane\n    v-for=\"(item, index) in editableTabs\"\n    :key=\"item.name\"\n    :label=\"item.title\"\n    :name=\"item.name\"\n  >\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n<script>\n  export default {\n    data() {\n      return {\n        editableTabsValue: '2',\n        editableTabs: [{\n          title: 'Tab 1',\n          name: '1',\n          content: 'Tab 1 content'\n        }, {\n          title: 'Tab 2',\n          name: '2',\n          content: 'Tab 2 content'\n        }],\n        tabIndex: 2\n      }\n    },\n    methods: {\n      addTab(targetName) {\n        let newTabName = ++this.tabIndex + '';\n        this.editableTabs.push({\n          title: 'New Tab',\n          name: newTabName,\n          content: 'New Tab content'\n        });\n        this.editableTabsValue = newTabName;\n      },\n      removeTab(targetName) {\n        let tabs = this.editableTabs;\n        let activeName = this.editableTabsValue;\n        if (activeName === targetName) {\n          tabs.forEach((tab, index) => {\n            if (tab.name === targetName) {\n              let nextTab = tabs[index + 1] || tabs[index - 1];\n              if (nextTab) {\n                activeName = nextTab.name;\n              }\n            }\n          });\n        }\n        \n        this.editableTabsValue = activeName;\n        this.editableTabs = tabs.filter(tab => tab.name !== targetName);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Tabs Attributes\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------- |---------- |-------------  |-------- |\n| value / v-model  | binding value, name of the selected tab  | string   |  —  |  name of first tab |\n| type     | type of Tab | string   | card/border-card  |     —    |\n| closable  | whether Tab is closable | boolean   | — |  false  |\n| addable  | whether Tab is addable   | boolean   | — |  false  |\n| editable  | whether Tab is addable and closable | boolean   | — |  false  |\n| tab-position  | position of tabs | string   |  top/right/bottom/left  |  top |\n| stretch  | whether width of tab automatically fits its container | boolean   |  -  |  false |\n| 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) | — | — |\n\n### Tabs Events\n| Event Name | Description | Parameters |\n|---------- |-------- |---------- |\n| tab-click  | triggers when a tab is clicked | clicked tab |\n| tab-remove  | triggers when tab-remove button is clicked | name of the removed tab |\n| tab-add  | triggers when tab-add button is clicked  | — |\n| edit  | triggers when tab-add button or tab-remove is clicked | (targetName, action) |\n\n### Tab-pane Attributes\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------- |---------- |-------------  |-------- |\n| label     | title of the tab   | string   | — |    —     |\n| disabled | whether Tab is disabled | boolean | — | false |\n| name      | identifier corresponding to the name of Tabs, representing the alias of the tab-pane | string | — | ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '1' |\n| closable  | whether Tab is closable | boolean   | — |  false  |\n| lazy  | whether Tab is lazily rendered   | boolean   | — |  false  |"
  },
  {
    "path": "examples/docs/en-US/tag.md",
    "content": "## Tag\n\nUsed for marking and selection.\n\n### Basic usage\n\n:::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.\n\n```html\n<el-tag>Tag 1</el-tag>\n<el-tag type=\"success\">Tag 2</el-tag>\n<el-tag type=\"info\">Tag 3</el-tag>\n<el-tag type=\"warning\">Tag 4</el-tag>\n<el-tag type=\"danger\">Tag 5</el-tag>\n```\n:::\n\n### Removable Tag\n\n:::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.\n\n```html\n<el-tag\n  v-for=\"tag in tags\"\n  :key=\"tag.name\"\n  closable\n  :type=\"tag.type\">\n  {{tag.name}}\n</el-tag>\n\n<script>\n  export default {\n    data() {\n      return {\n        tags: [\n          { name: 'Tag 1', type: '' },\n          { name: 'Tag 2', type: 'success' },\n          { name: 'Tag 3', type: 'info' },\n          { name: 'Tag 4', type: 'warning' },\n          { name: 'Tag 5', type: 'danger' }\n        ]\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Edit Dynamically\n\nYou can use the `close` event to add and remove tag dynamically.\n\n:::demo\n```html\n<el-tag\n  :key=\"tag\"\n  v-for=\"tag in dynamicTags\"\n  closable\n  :disable-transitions=\"false\"\n  @close=\"handleClose(tag)\">\n  {{tag}}\n</el-tag>\n<el-input\n  class=\"input-new-tag\"\n  v-if=\"inputVisible\"\n  v-model=\"inputValue\"\n  ref=\"saveTagInput\"\n  size=\"mini\"\n  @keyup.enter.native=\"handleInputConfirm\"\n  @blur=\"handleInputConfirm\"\n>\n</el-input>\n<el-button v-else class=\"button-new-tag\" size=\"small\" @click=\"showInput\">+ New Tag</el-button>\n\n<style>\n  .el-tag + .el-tag {\n    margin-left: 10px;\n  }\n  .button-new-tag {\n    margin-left: 10px;\n    height: 32px;\n    line-height: 30px;\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .input-new-tag {\n    width: 90px;\n    margin-left: 10px;\n    vertical-align: bottom;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],\n        inputVisible: false,\n        inputValue: ''\n      };\n    },\n    methods: {\n      handleClose(tag) {\n        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);\n      },\n\n      showInput() {\n        this.inputVisible = true;\n        this.$nextTick(_ => {\n          this.$refs.saveTagInput.$refs.input.focus();\n        });\n      },\n\n      handleInputConfirm() {\n        let inputValue = this.inputValue;\n        if (inputValue) {\n          this.dynamicTags.push(inputValue);\n        }\n        this.inputVisible = false;\n        this.inputValue = '';\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Sizes\n\nBesides default size, Tag component provides three additional sizes for you to choose among different scenarios.\n\n:::demo Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.\n\n```html\n<el-tag>Default</el-tag>\n<el-tag size=\"medium\">Medium</el-tag>\n<el-tag size=\"small\">Small</el-tag>\n<el-tag size=\"mini\">Mini</el-tag>\n```\n:::\n\n\n### Theme\n\nTag provide three different themes: `dark`、`light` and `plain`\n\n:::demo Using `effect` to change, default is `light`\n```html\n<div class=\"tag-group\">\n  <span class=\"tag-group__title\">Dark</span>\n  <el-tag\n    v-for=\"item in items\"\n    :key=\"item.label\"\n    :type=\"item.type\"\n    effect=\"dark\">\n    {{ item.label }}\n  </el-tag>\n</div>\n<div class=\"tag-group\">\n  <span class=\"tag-group__title\">Plain</span>\n  <el-tag\n    v-for=\"item in items\"\n    :key=\"item.label\"\n    :type=\"item.type\"\n    effect=\"plain\">\n    {{ item.label }}\n  </el-tag>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        items: [\n          { type: '', label: 'Tag 1' },\n          { type: 'success', label: 'Tag 2' },\n          { type: 'info', label: 'Tag 3' },\n          { type: 'danger', label: 'Tag 4' },\n          { type: 'warning', label: 'Tag 5' }\n        ]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Attributes\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| type | component type | string | success/info/warning/danger | — |\n| closable | whether Tag can be removed | boolean | — | false |\n| disable-transitions | whether to disable animations | boolean | — | false |\n| hit | whether Tag has a highlighted border | boolean | — | false |\n| color | background color of the Tag | string | — | — |\n| size | tag size | string | medium / small / mini | — |\n| effect | component theme | string | dark / light / plain | light |\n\n\n### Events\n| Event Name | Description | Parameters |\n|---------- |-------- |---------- |\n| click | triggers when Tag is clicked | — |\n| close | triggers when Tag is removed | — |\n"
  },
  {
    "path": "examples/docs/en-US/time-picker.md",
    "content": "## TimePicker\n\nUse Time Picker for time input.\n\n### Fixed time picker\n\nProvide a list of fixed time for users to choose.\n\n:::demo Use `el-time-select` label, then assign start time, end time and time step with `start`, `end` and `step`.\n```html\n<el-time-select\n  v-model=\"value\"\n  :picker-options=\"{\n    start: '08:30',\n    step: '00:15',\n    end: '18:30'\n  }\"\n  placeholder=\"Select time\">\n</el-time-select>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: ''\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Arbitrary time picker\n\nCan pick an arbitrary time.\n\n:::demo Use `el-time-picker` label, and you can limit the time range by specifying `selectableRange`. 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.\n\n```html\n<template>\n  <el-time-picker\n    v-model=\"value1\"\n    :picker-options=\"{\n      selectableRange: '18:30:00 - 20:30:00'\n    }\"\n    placeholder=\"Arbitrary time\">\n  </el-time-picker>\n  <el-time-picker\n    arrow-control\n    v-model=\"value2\"\n    :picker-options=\"{\n      selectableRange: '18:30:00 - 20:30:00'\n    }\"\n    placeholder=\"Arbitrary time\">\n  </el-time-picker>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: new Date(2016, 9, 10, 18, 40),\n        value2: new Date(2016, 9, 10, 18, 40)\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Fixed time range\n\nIf start time is picked at first, then the end time will change accordingly.\n\n:::demo\n```html\n<template>\n  <el-time-select\n    placeholder=\"Start time\"\n    v-model=\"startTime\"\n    :picker-options=\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30'\n    }\">\n  </el-time-select>\n  <el-time-select\n    placeholder=\"End time\"\n    v-model=\"endTime\"\n    :picker-options=\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30',\n      minTime: startTime\n    }\">\n  </el-time-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        startTime: '',\n        endTime: ''\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Arbitrary time range\n\nCan pick an arbitrary time range.\n\n:::demo We can pick a time range by adding an `is-range` attribute. Also, `arrow-control` is supported in range mode.\n```html\n<template>\n  <el-time-picker\n    is-range\n    v-model=\"value1\"\n    range-separator=\"To\"\n    start-placeholder=\"Start time\"\n    end-placeholder=\"End time\">\n  </el-time-picker>\n  <el-time-picker\n    is-range\n    arrow-control\n    v-model=\"value2\"\n    range-separator=\"To\"\n    start-placeholder=\"Start time\"\n    end-placeholder=\"End time\">\n  </el-time-picker>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],\n        value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Attributes\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| value / v-model | binding value | date(TimePicker) / string(TimeSelect) | - | - |\n| readonly | whether TimePicker is read only | boolean | — | false |\n| disabled | whether TimePicker is disabled | boolean | — | false |\n| editable | whether the input is editable | boolean | — | true |\n| clearable | whether to show clear button | boolean | — | true |\n| size | size of Input | string | medium / small / mini | — |\n| placeholder | placeholder in non-range mode | string | — | — |\n| start-placeholder | placeholder for the start time in range mode | string | — | — |\n| end-placeholder | placeholder for the end time in range mode | string | — | — |\n| is-range | whether to pick a time range, only works with `<el-time-picker>` | boolean | — | false |\n| arrow-control | whether to pick time using arrow buttons, only works with `<el-time-picker>` | boolean | — | false |\n| align | alignment | left / center / right | left |\n| popper-class | custom class name for TimePicker's dropdown | string | — | — |\n| picker-options | additional options, check the table below | object | — | {} |\n| range-separator | range separator | string | - | '-' |\n| default-value | optional, default date of the calendar | Date for TimePicker, string for TimeSelect | anything accepted by `new Date()` for TimePicker, selectable value for TimeSelect | — |\n| value-format | optional, only for TimePicker, 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) | — |\n| name | same as `name` in native input | string | — | — |\n| prefix-icon | Custom prefix icon class | string | — | el-icon-time |\n| clear-icon | Custom clear icon class | string | — | el-icon-circle-close |\n\n### Time Select Options\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| start | start time | string | — | 09:00 |\n| end | end time | string | — | 18:00 |\n| step | time step | string | — | 00:30 |\n| minTime | minimum time, any time before this time will be disabled | string | — | 00:00 |\n| maxTime | maximum time, any time after this time will be disabled | string | — | — |\n\n### Time Picker Options\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| selectableRange | available time range, e.g.`'18:30:00 - 20:30:00'`or`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string / array | — | — |\n| format | format of the picker | string | hour `HH`, minute `mm`, second `ss`, AM/PM `A` | HH:mm:ss |\n\n\n### Events\n| Event Name | Description | Parameters |\n|---------|--------|---------|\n| change | triggers when user confirms the value | component's binding value |\n| blur | triggers when Input blurs | component instance |\n| focus | triggers when Input focuses | component instance |\n\n### Methods\n| Method | Description | Parameters |\n| ---- | ---- | ---- |\n| focus | focus the Input component | - |\n"
  },
  {
    "path": "examples/docs/en-US/timeline.md",
    "content": "## Timeline\n\nVisually display timeline.\n\n### Basic usage\n\nTimeline can be split into multiple activities in ascending or descending. Timestamps are important features that distinguish them from other components. Note the difference with Steps.\n\n:::demo\n```html\n<div class=\"block\">\n  <div class=\"radio\">\n    Order: \n    <el-radio-group v-model=\"reverse\">\n      <el-radio :label=\"true\">descending</el-radio>\n      <el-radio :label=\"false\">ascending</el-radio>\n    </el-radio-group>\n  </div>\n\n  <el-timeline :reverse=\"reverse\">\n    <el-timeline-item\n      v-for=\"(activity, index) in activities\"\n      :key=\"index\"\n      :timestamp=\"activity.timestamp\">\n      {{activity.content}}\n    </el-timeline-item>\n  </el-timeline>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        reverse: true,\n        activities: [{\n          content: 'Event start',\n          timestamp: '2018-04-15'\n        }, {\n          content: 'Approved',\n          timestamp: '2018-04-13'\n        }, {\n          content: 'Success',\n          timestamp: '2018-04-11'\n        }]\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Custom node\n\nSize, color, and icons can be customized in node.\n\n:::demo\n```html\n<div class=\"block\">\n  <el-timeline>\n    <el-timeline-item\n      v-for=\"(activity, index) in activities\"\n      :key=\"index\"\n      :icon=\"activity.icon\"\n      :type=\"activity.type\"\n      :color=\"activity.color\"\n      :size=\"activity.size\"\n      :timestamp=\"activity.timestamp\">\n      {{activity.content}}\n    </el-timeline-item>\n  </el-timeline>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        activities: [{\n          content: 'Custom icon',\n          timestamp: '2018-04-12 20:46',\n          size: 'large',\n          type: 'primary',\n          icon: 'el-icon-more'\n        }, {\n          content: 'Custom color',\n          timestamp: '2018-04-03 20:46',\n          color: '#0bbd87'\n        }, {\n          content: 'Custom size',\n          timestamp: '2018-04-03 20:46',\n          size: 'large'\n        }, {\n          content: 'Default node',\n          timestamp: '2018-04-03 20:46'\n        }]\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Custom timestamp\n\nTimestamp can be placed on top of content when content is too high.\n\n:::demo\n```html\n<div class=\"block\">\n  <el-timeline>\n    <el-timeline-item timestamp=\"2018/4/12\" placement=\"top\">\n      <el-card>\n        <h4>Update Github template</h4>\n        <p>Tom committed 2018/4/12 20:46</p>\n      </el-card>\n    </el-timeline-item>\n    <el-timeline-item timestamp=\"2018/4/3\" placement=\"top\">\n      <el-card>\n        <h4>Update Github template</h4>\n        <p>Tom committed 2018/4/3 20:46</p>\n      </el-card>\n    </el-timeline-item>\n    <el-timeline-item timestamp=\"2018/4/2\" placement=\"top\">\n      <el-card>\n        <h4>Update Github template</h4>\n        <p>Tom committed 2018/4/2 20:46</p>\n      </el-card>\n    </el-timeline-item>\n  </el-timeline>\n</div>\n```\n:::\n\n### Timeline Attributes\n| Attribute      | Description    | Type      | Accepted Values | Default   |\n|---------- |-------- |---------- |-------------  |-------- |\n| reverse | whether the node is ascending or descending, default is ascending | boolean | — | false |\n\n### Timeline-item Attributes\n| Attribute      | Description    | Type      | Accepted Values | Default   |\n|---------- |-------- |---------- |-------------  |-------- |\n| timestamp     | timestamp content | string  | - | — |\n| hide-timestamp  | whether to show timestamp | boolean | — | false |\n| placement | position of timestamp | string | top / bottom | bottom |\n| type | node type | string | primary / success / warning / danger / info | - |\n| color | background color of node | string | hsl / hsv / hex / rgb | - |\n| size | node size | string | normal / large | normal |\n| icon | icon class name | string | — | - |\n\n### Timeline-Item Slot\n| name | Description |\n|------|--------|\n| — | Custom content for timeline item |\n| dot | Custom defined node |\n"
  },
  {
    "path": "examples/docs/en-US/tooltip.md",
    "content": "## Tooltip\n\nDisplay prompt information for mouse hover.\n\n### Basic usage\n\nTooltip has 9 placements.\n\n:::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.\n```html\n<div class=\"box\">\n  <div class=\"top\">\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Top Left prompts info\" placement=\"top-start\">\n      <el-button>top-start</el-button>\n    </el-tooltip>\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Top Center prompts info\" placement=\"top\">\n      <el-button>top</el-button>\n    </el-tooltip>\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Top Right prompts info\" placement=\"top-end\">\n      <el-button>top-end</el-button>\n    </el-tooltip>\n  </div>\n  <div class=\"left\">\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Left Top prompts info\" placement=\"left-start\">\n      <el-button>left-start</el-button>\n    </el-tooltip>\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Left Center prompts info\" placement=\"left\">\n      <el-button>left</el-button>\n    </el-tooltip>\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Left Bottom prompts info\" placement=\"left-end\">\n      <el-button>left-end</el-button>\n    </el-tooltip>\n  </div>\n\n  <div class=\"right\">\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Right Top prompts info\" placement=\"right-start\">\n      <el-button>right-start</el-button>\n    </el-tooltip>\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Right Center prompts info\" placement=\"right\">\n      <el-button>right</el-button>\n    </el-tooltip>\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Right Bottom prompts info\" placement=\"right-end\">\n      <el-button>right-end</el-button>\n    </el-tooltip>\n  </div>\n  <div class=\"bottom\">\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Bottom Left prompts info\" placement=\"bottom-start\">\n      <el-button>bottom-start</el-button>\n    </el-tooltip>\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Bottom Center prompts info\" placement=\"bottom\">\n      <el-button>bottom</el-button>\n    </el-tooltip>\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Bottom Right prompts info\" placement=\"bottom-end\">\n      <el-button>bottom-end</el-button>\n    </el-tooltip>\n  </div>\n</div>\n\n<style>\n  .box {\n    width: 400px;\n\n    .top {\n      text-align: center;\n    }\n\n    .left {\n      float: left;\n      width: 110px;\n    }\n\n    .right {\n      float: right;\n      width: 110px;\n    }\n\n    .bottom {\n      clear: both;\n      text-align: center;\n    }\n\n    .item {\n      margin: 4px;\n    }\n\n    .left .el-tooltip__popper,\n    .right .el-tooltip__popper {\n      padding: 8px 10px;\n    }\n\n    .el-button {\n      width: 110px;\n    }\n  }\n</style>\n```\n:::\n\n\n### Theme\n\nTooltip has two themes: `dark` and `light`。\n\n:::demo Set `effect` to modify theme, and the default value is `dark`.\n```html\n<el-tooltip content=\"Top center\" placement=\"top\">\n  <el-button>Dark</el-button>\n</el-tooltip>\n<el-tooltip content=\"Bottom center\" placement=\"bottom\" effect=\"light\">\n  <el-button>Light</el-button>\n</el-tooltip>\n```\n:::\n\n### More Content\n\nDisplay multiple lines of text and set their format.\n\n:::demo Override attribute `content` of `el-tooltip` by adding a slot named `content`.\n```html\n<el-tooltip placement=\"top\">\n  <div slot=\"content\">multiple lines<br/>second line</div>\n  <el-button>Top center</el-button>\n</el-tooltip>\n```\n:::\n\n### Advanced usage\n\nIn addition to basic usages, there are some attributes that allow you to customize your own:\n\n`transition` attribute allows you to customize the animation in which the tooltip shows or hides, and the default value is el-fade-in-linear.\n\n`disabled` attribute allows you to disable `tooltip`. You just need set it to `true`.\n\nIn fact, Tooltip is an extension based on [Vue-popper](https://github.com/element-component/vue-popper), you can use any attribute that are allowed in Vue-popper.\n\n:::demo\n```html\n<template>\n  <el-tooltip :disabled=\"disabled\" content=\"click to close tooltip function\" placement=\"bottom\" effect=\"light\">\n    <el-button @click=\"disabled = !disabled\">click to {{disabled ? 'active' : 'close'}} tooltip function</el-button>\n  </el-tooltip>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        disabled: false\n      };\n    }\n  };\n</script>\n\n<style>\n  .slide-fade-enter-active {\n    transition: all .3s ease;\n  }\n  .slide-fade-leave-active {\n    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);\n  }\n  .slide-fade-enter, .expand-fade-leave-active {\n    margin-left: 20px;\n    opacity: 0;\n  }\n</style>\n```\n:::\n\n\n:::tip\nThe `router-link` component is not supported in tooltip, please use `vm.$router.push`.\n\nDisabled 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.\n:::\n\n\n### Attributes\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|----------------|---------|-----------|-------------|--------|\n|  effect   |  Tooltip theme  | string   | dark/light  | dark  |\n|  content  | display content, can be overridden by `slot#content` | String   | — | — |\n|  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 |\n|  value / v-model | visibility of Tooltip | boolean           | — |  false |\n|  disabled       |  whether Tooltip is disabled  | boolean    | — |  false |\n|  offset        |  offset of the Tooltip   | number    | — |  0 |\n|  transition     |  animation name | string             | — | el-fade-in-linear |\n|  visible-arrow   |  whether an arrow is displayed. For more information, check [Vue-popper](https://github.com/element-component/vue-popper) page | boolean | — | true |\n|  popper-options        | [popper.js](https://popper.js.org/docs/v2/) parameters | Object            | refer to [popper.js](https://popper.js.org/docs/v2/) doc | `{ boundariesElement: 'body', gpuAcceleration: false }` |\n| open-delay | delay of appearance, in millisecond | number | — | 0 |\n| manual | whether to control Tooltip manually. `mouseenter` and `mouseleave` won't have effects if set to `true` | boolean | — | false |\n|  popper-class  |  custom class name for Tooltip's popper | string | — | — |\n| enterable | whether the mouse can enter the tooltip | Boolean | — | true |\n| hide-after | timeout in milliseconds to hide tooltip | number | — | 0 |\n| tabindex   | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Tooltip | number | — | 0 |\n"
  },
  {
    "path": "examples/docs/en-US/transfer.md",
    "content": "## Transfer\n\n### Basic usage\n:::demo Data is passed to Transfer via the `data` attribute. The data needs to be an object array, and each object should have these attributes: `key` being the identification of the data item, `label` being the displayed text, and `disabled` indicating if the data item is disabled. Items inside the target list are in sync with the variable binding to `v-model`, and the value of that variable is an array of target item keys. So, if you don't want the target list be initially empty, you can initialize the `v-model` with an array.\n```html\n<template>\n  <el-transfer\n    v-model=\"value\"\n    :data=\"data\">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value: [1, 4]\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Filterable\n\nYou can search and filter data items.\n\n:::demo Set the `filterable` attribute to `true` to enable filter mode. By default, if the data item `label` contains the search keyword, it will be included in the search result. Also, you can implement you own filter method with the `filter-method` attribute. It takes a method and passes search keyword and each data item to it whenever the keyword changes. For a certain data item, if the method returns true, it will be included in the result list.\n```html\n<template>\n  <el-transfer\n    filterable\n    :filter-method=\"filterMethod\"\n    filter-placeholder=\"State Abbreviations\"\n    v-model=\"value\"\n    :data=\"data\">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];\n        const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];\n        states.forEach((city, index) => {\n          data.push({\n            label: city,\n            key: index,\n            initial: initials[index]\n          });\n        });\n        return data;\n      };\n      return {\n        data: generateData(),\n        value: [],\n        filterMethod(query, item) {\n          return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;\n        }\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Customizable\n\nYou can customize list titles, button texts, render function for data items, checking status texts in list footer and list footer contents.\n\n:::demo Use `titles`, `button-texts`, `render-content` and `format` to respectively customize list titles, button texts, render function for data items, checking status texts in list header. Plus, you can also use scoped slot to customize data items. For list footer contents, two named slots are provided: `left-footer` and `right-footer`. Plus, if you want some items initially checked, you can use `left-default-checked` and `right-default-checked`. Finally, this example demonstrate the `change` event. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, `render-content` will work if relevant dependencies are correctly configured.\n```html\n<template>\n  <p style=\"text-align: center; margin: 0 0 20px\">Customize data items using render-content</p>\n  <div style=\"text-align: center\">\n    <el-transfer\n      style=\"text-align: left; display: inline-block\"\n      v-model=\"value\"\n      filterable\n      :left-default-checked=\"[2, 3]\"\n      :right-default-checked=\"[1]\"\n      :render-content=\"renderFunc\"\n      :titles=\"['Source', 'Target']\"\n      :button-texts=\"['To left', 'To right']\"\n      :format=\"{\n        noChecked: '${total}',\n        hasChecked: '${checked}/${total}'\n      }\"\n      @change=\"handleChange\"\n      :data=\"data\">\n      <el-button class=\"transfer-footer\" slot=\"left-footer\" size=\"small\">Operation</el-button>\n      <el-button class=\"transfer-footer\" slot=\"right-footer\" size=\"small\">Operation</el-button>\n    </el-transfer>\n    <p style=\"text-align: center; margin: 50px 0 20px\">Customize data items using scoped slot</p>\n    <div style=\"text-align: center\">\n      <el-transfer\n        style=\"text-align: left; display: inline-block\"\n        v-model=\"value4\"\n        filterable\n        :left-default-checked=\"[2, 3]\"\n        :right-default-checked=\"[1]\"\n        :titles=\"['Source', 'Target']\"\n        :button-texts=\"['To left', 'To right']\"\n        :format=\"{\n          noChecked: '${total}',\n          hasChecked: '${checked}/${total}'\n        }\"\n        @change=\"handleChange\"\n        :data=\"data\">\n        <span slot-scope=\"{ option }\">{{ option.key }} - {{ option.label }}</span>\n        <el-button class=\"transfer-footer\" slot=\"left-footer\" size=\"small\">Operation</el-button>\n        <el-button class=\"transfer-footer\" slot=\"right-footer\" size=\"small\">Operation</el-button>\n      </el-transfer>\n    </div>\n  </div>\n</template>\n\n<style>\n  .transfer-footer {\n    margin-left: 20px;\n    padding: 6px 5px;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value: [1],\n        value4: [1],\n        renderFunc(h, option) {\n          return <span>{ option.key } - { option.label }</span>;\n        }\n      };\n    },\n\n    methods: {\n      handleChange(value, direction, movedKeys) {\n        console.log(value, direction, movedKeys);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Prop aliases\n\nBy default, Transfer looks for `key`, `label` and `disabled` in a data item. If your data items have different key names, you can use the `props` attribute to define aliases.\n:::demo The data items in this example do not have `key`s or `label`s, instead they have `value`s and `desc`s. So you need to set aliases for `key` and `label`.\n```html\n<template>\n  <el-transfer\n    v-model=\"value\"\n    :props=\"{\n      key: 'value',\n      label: 'desc'\n    }\"\n    :data=\"data\">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            value: i,\n            desc: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value: []\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Attributes\n| Attribute | Description | Type  | Accepted Values | Default |\n|---------- |-------- |---------- |-------------  |-------- |\n| value / v-model | binding value | array | — | — |\n| data | data source | array[{ key, label, disabled }] | — | [ ] |\n| filterable | whether Transfer is filterable | boolean | — | false |\n| filter-placeholder | placeholder for the filter input | string | — | Enter keyword |\n| filter-method | custom filter method | function | — | — |\n| target-order | order strategy for elements in the target list. If set to `original`, the elements will keep the same order as the data source. If set to `push`, the newly added elements will be pushed to the bottom. If set to `unshift`, the newly added elements will be inserted on the top | string | original / push / unshift | original |\n| titles | custom list titles | array | — | ['List 1', 'List 2'] |\n| button-texts | custom button texts | array | — | [ ] |\n| render-content | custom render function for data items | function(h, option) | — | — |\n| format | texts for checking status in list header | object{noChecked, hasChecked} | — | { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' } |\n| props | prop aliases for data source | object{key, label, disabled} | — | — |\n| left-default-checked | key array of initially checked data items of the left list | array | — | [ ] |\n| right-default-checked | key array of initially checked data items of the right list | array | — | [ ] |\n\n### Slot\n| Name | Description |\n|------|--------|\n| left-footer | content of left list footer |\n| right-footer | content of right list footer |\n\n### Scoped Slot\n| Name | Description |\n|------|--------|\n| — | Custom content for data items. The scope parameter is { option } |\n\n### Methods\n| Method | Description | Parameters |\n| ---- | ---- | ---- |\n| clearQuery | clear the filter keyword of a certain panel | 'left' / 'right' |\n\n### Events\n| Event Name | Description | Parameters |\n|---------- |-------- |---------- |\n| change | triggers when data items change in the right list | key array of current data items in the right list, transfer direction (left or right), moved item keys |\n| left-check-change | triggers when end user changes the checked state of any data item in the left list | key array of currently checked items, key array of items whose checked state have changed |\n| right-check-change | triggers when end user changes the checked state of any data item in the right list | key array of currently checked items, key array of items whose checked state have changed |\n"
  },
  {
    "path": "examples/docs/en-US/transition.md",
    "content": "## Built-in transition\n\nYou can use Element's built-in transitions directly. Before that, please read the [transition docs](https://v2.vuejs.org/v2/api/#transition).\n\n### fade\n\n:::demo We have two fading effects: `el-fade-in-linear` and `el-fade-in`.\n```html\n<template>\n  <div>\n    <el-button @click=\"show = !show\">Click Me</el-button>\n\n    <div style=\"display: flex; margin-top: 20px; height: 100px;\">\n      <transition name=\"el-fade-in-linear\">\n        <div v-show=\"show\" class=\"transition-box\">.el-fade-in-linear</div>\n      </transition>\n      <transition name=\"el-fade-in\">\n        <div v-show=\"show\" class=\"transition-box\">.el-fade-in</div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show: true\n    })\n  }\n</script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n```\n:::\n\n### zoom\n\n:::demo `el-zoom-in-center`, `el-zoom-in-top` and `el-zoom-in-bottom` are provided.\n```html\n<template>\n  <div>\n    <el-button @click=\"show2 = !show2\">Click Me</el-button>\n\n    <div style=\"display: flex; margin-top: 20px; height: 100px;\">\n      <transition name=\"el-zoom-in-center\">\n        <div v-show=\"show2\" class=\"transition-box\">.el-zoom-in-center</div>\n      </transition>\n\n      <transition name=\"el-zoom-in-top\">\n        <div v-show=\"show2\" class=\"transition-box\">.el-zoom-in-top</div>\n      </transition>\n\n      <transition name=\"el-zoom-in-bottom\">\n        <div v-show=\"show2\" class=\"transition-box\">.el-zoom-in-bottom</div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show2: true\n    })\n  }\n</script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n```\n:::\n\n\n### collapse\n\nFor collapse effect, use the `el-collapse-transition` component.\n\n:::demo\n```html\n<template>\n  <div>\n    <el-button @click=\"show3 = !show3\">Click Me</el-button>\n\n    <div style=\"margin-top: 20px; height: 200px;\">\n      <el-collapse-transition>\n        <div v-show=\"show3\">\n          <div class=\"transition-box\">el-collapse-transition</div>\n          <div class=\"transition-box\">el-collapse-transition</div>\n        </div>\n      </el-collapse-transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show3: true\n    })\n  }\n</script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n```\n:::\n\n### On demand\n\n```js\n// fade/zoom\nimport 'element-ui/lib/theme-chalk/base.css';\n// collapse\nimport CollapseTransition from 'element-ui/lib/transitions/collapse-transition';\nimport Vue from 'vue'\n\nVue.component(CollapseTransition.name, CollapseTransition)\n```\n"
  },
  {
    "path": "examples/docs/en-US/tree.md",
    "content": "## Tree\n\nDisplay a set of data with hierarchies.\n\n### Basic usage\n\nBasic tree structure.\n\n:::demo\n```html\n<el-tree :data=\"data\" :props=\"defaultProps\" @node-click=\"handleNodeClick\"></el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: 'Level one 1',\n          children: [{\n            label: 'Level two 1-1',\n            children: [{\n              label: 'Level three 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 2',\n          children: [{\n            label: 'Level two 2-1',\n            children: [{\n              label: 'Level three 2-1-1'\n            }]\n          }, {\n            label: 'Level two 2-2',\n            children: [{\n              label: 'Level three 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 3',\n          children: [{\n            label: 'Level two 3-1',\n            children: [{\n              label: 'Level three 3-1-1'\n            }]\n          }, {\n            label: 'Level two 3-2',\n            children: [{\n              label: 'Level three 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Selectable\n\nUsed for node selection.\n\n:::demo This example also shows how to load node data asynchronously.\n```html\n<el-tree\n  :props=\"props\"\n  :load=\"loadNode\"\n  lazy\n  show-checkbox\n  @check-change=\"handleCheckChange\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        props: {\n          label: 'name',\n          children: 'zones'\n        },\n        count: 1\n      };\n    },\n    methods: {\n      handleCheckChange(data, checked, indeterminate) {\n        console.log(data, checked, indeterminate);\n      },\n      handleNodeClick(data) {\n        console.log(data);\n      },\n      loadNode(node, resolve) {\n        if (node.level === 0) {\n          return resolve([{ name: 'Root1' }, { name: 'Root2' }]);\n        }\n        if (node.level > 3) return resolve([]);\n\n        var hasChild;\n        if (node.data.name === 'region1') {\n          hasChild = true;\n        } else if (node.data.name === 'region2') {\n          hasChild = false;\n        } else {\n          hasChild = Math.random() > 0.5;\n        }\n\n        setTimeout(() => {\n          var data;\n          if (hasChild) {\n            data = [{\n              name: 'zone' + this.count++\n            }, {\n              name: 'zone' + this.count++\n            }];\n          } else {\n            data = [];\n          }\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Custom leaf node in lazy mode\n\n:::demo A node's data is not fetched until it is clicked, so the Tree cannot predict whether a node is a leaf node. That's why a drop-down button is added to each node, and if it is a leaf node, the drop-down button will disappear when clicked. That being said, you can also tell the Tree in advance whether the node is a leaf node, avoiding the render of the drop-down button before a leaf node.\n```html\n<el-tree\n  :props=\"props\"\n  :load=\"loadNode\"\n  lazy\n  show-checkbox>\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        props: {\n          label: 'name',\n          children: 'zones',\n          isLeaf: 'leaf'\n        },\n      };\n    },\n    methods: {\n      loadNode(node, resolve) {\n        if (node.level === 0) {\n          return resolve([{ name: 'region' }]);\n        }\n        if (node.level > 1) return resolve([]);\n\n        setTimeout(() => {\n          const data = [{\n            name: 'leaf',\n            leaf: true\n          }, {\n            name: 'zone'\n          }];\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Disabled checkbox\n\nThe checkbox of a node can be set as disabled.\n\n:::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.\n```html\n<el-tree\n  :data=\"data\"\n  :props=\"defaultProps\"\n  show-checkbox\n  @check-change=\"handleCheckChange\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          id: 1,\n          label: 'Level one 1',\n          children: [{\n            id: 3,\n            label: 'Level two 2-1',\n            children: [{\n              id: 4,\n              label: 'Level three 3-1-1'\n            }, {\n              id: 5,\n              label: 'Level three 3-1-2',\n              disabled: true\n            }]\n          }, {\n            id: 2,\n            label: 'Level two 2-2',\n            disabled: true,\n            children: [{\n              id: 6,\n              label: 'Level three 3-2-1'\n            }, {\n              id: 7,\n              label: 'Level three 3-2-2',\n              disabled: true\n            }]\n          }]\n        }],\n        defaultProps: {\n            children: 'children',\n            label: 'label',\n            disabled: 'disabled',\n        },\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Default expanded and default checked\nTree nodes can be initially expanded or checked\n\n:::demo Use `default-expanded-keys` and `default-checked-keys` to set initially expanded and initially checked nodes respectively. Note that for them to work, `node-key` is required. Its value is the name of a key in the data object, and the value of that key should be unique across the whole tree.\n```html\n<el-tree\n  :data=\"data\"\n  show-checkbox\n  node-key=\"id\"\n  :default-expanded-keys=\"[2, 3]\"\n  :default-checked-keys=\"[5]\"\n  :props=\"defaultProps\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          id: 1,\n          label: 'Level one 1',\n          children: [{\n            id: 4,\n            label: 'Level two 1-1',\n            children: [{\n              id: 9,\n              label: 'Level three 1-1-1'\n            }, {\n              id: 10,\n              label: 'Level three 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Level one 2',\n          children: [{\n            id: 5,\n            label: 'Level two 2-1'\n          }, {\n            id: 6,\n            label: 'Level two 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Level one 3',\n          children: [{\n            id: 7,\n            label: 'Level two 3-1'\n          }, {\n            id: 8,\n            label: 'Level two 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Checking tree nodes\n\n:::demo This example shows how to get and set checked nodes. They both can be done in two approaches: node and key. If you are taking the key approach, `node-key` is required.\n```html\n<el-tree\n  :data=\"data\"\n  show-checkbox\n  default-expand-all\n  node-key=\"id\"\n  ref=\"tree\"\n  highlight-current\n  :props=\"defaultProps\">\n</el-tree>\n\n<div class=\"buttons\">\n  <el-button @click=\"getCheckedNodes\">get by node</el-button>\n  <el-button @click=\"getCheckedKeys\">get by key</el-button>\n  <el-button @click=\"setCheckedNodes\">set by node</el-button>\n  <el-button @click=\"setCheckedKeys\">set by key</el-button>\n  <el-button @click=\"resetChecked\">reset</el-button>\n</div>\n\n<script>\n  export default {\n    methods: {\n      getCheckedNodes() {\n        console.log(this.$refs.tree.getCheckedNodes());\n      },\n      getCheckedKeys() {\n        console.log(this.$refs.tree.getCheckedKeys());\n      },\n      setCheckedNodes() {\n        this.$refs.tree.setCheckedNodes([{\n          id: 5,\n          label: 'Level two 2-1'\n        }, {\n          id: 9,\n          label: 'Level three 1-1-1'\n        }]);\n      },\n      setCheckedKeys() {\n        this.$refs.tree.setCheckedKeys([3]);\n      },\n      resetChecked() {\n        this.$refs.tree.setCheckedKeys([]);\n      }\n    },\n\n    data() {\n      return {\n        data: [{\n          id: 1,\n          label: 'Level one 1',\n          children: [{\n            id: 4,\n            label: 'Level two 1-1',\n            children: [{\n              id: 9,\n              label: 'Level three 1-1-1'\n            }, {\n              id: 10,\n              label: 'Level three 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Level one 2',\n          children: [{\n            id: 5,\n            label: 'Level two 2-1'\n          }, {\n            id: 6,\n            label: 'Level two 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Level one 3',\n          children: [{\n            id: 7,\n            label: 'Level two 3-1'\n          }, {\n            id: 8,\n            label: 'Level two 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Custom node content\nThe content of tree nodes can be customized, so you can add icons or buttons as you will\n\n:::demo There are two ways to customize template for tree nodes: `render-content` and scoped slot. Use `render-content` to assign a render function that returns the content of tree nodes. See Vue's documentation for a detailed introduction of render functions. If you prefer scoped slot, you'll have access to `node` and `data` in the scope, standing for the TreeNode object and node data of the current node respectively. Note that the `render-content` demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, `render-content` will work if relevant dependencies are correctly configured.\n```html\n<div class=\"custom-tree-container\">\n  <div class=\"block\">\n    <p>Using render-content</p>\n    <el-tree\n      :data=\"data\"\n      show-checkbox\n      node-key=\"id\"\n      default-expand-all\n      :expand-on-click-node=\"false\"\n      :render-content=\"renderContent\">\n    </el-tree>\n  </div>\n  <div class=\"block\">\n    <p>Using scoped slot</p>\n    <el-tree\n      :data=\"data\"\n      show-checkbox\n      node-key=\"id\"\n      default-expand-all\n      :expand-on-click-node=\"false\">\n      <span class=\"custom-tree-node\" slot-scope=\"{ node, data }\">\n        <span>{{ node.label }}</span>\n        <span>\n          <el-button\n            type=\"text\"\n            size=\"mini\"\n            @click=\"() => append(data)\">\n            Append\n          </el-button>\n          <el-button\n            type=\"text\"\n            size=\"mini\"\n            @click=\"() => remove(node, data)\">\n            Delete\n          </el-button>\n        </span>\n      </span>\n    </el-tree>\n  </div>\n</div>\n\n<script>\n  let id = 1000;\n\n  export default {\n    data() {\n      const data = [{\n        id: 1,\n        label: 'Level one 1',\n        children: [{\n          id: 4,\n          label: 'Level two 1-1',\n          children: [{\n            id: 9,\n            label: 'Level three 1-1-1'\n          }, {\n            id: 10,\n            label: 'Level three 1-1-2'\n          }]\n        }]\n      }, {\n        id: 2,\n        label: 'Level one 2',\n        children: [{\n          id: 5,\n          label: 'Level two 2-1'\n        }, {\n          id: 6,\n          label: 'Level two 2-2'\n        }]\n      }, {\n        id: 3,\n        label: 'Level one 3',\n        children: [{\n          id: 7,\n          label: 'Level two 3-1'\n        }, {\n          id: 8,\n          label: 'Level two 3-2'\n        }]\n      }];\n      return {\n        data: JSON.parse(JSON.stringify(data)),\n        data: JSON.parse(JSON.stringify(data))\n      }\n    },\n\n    methods: {\n      append(data) {\n        const newChild = { id: id++, label: 'testtest', children: [] };\n        if (!data.children) {\n          this.$set(data, 'children', []);\n        }\n        data.children.push(newChild);\n      },\n\n      remove(node, data) {\n        const parent = node.parent;\n        const children = parent.data.children || parent.data;\n        const index = children.findIndex(d => d.id === data.id);\n        children.splice(index, 1);\n      },\n\n      renderContent(h, { node, data, store }) {\n        return (\n          <span class=\"custom-tree-node\">\n            <span>{node.label}</span>\n            <span>\n              <el-button size=\"mini\" type=\"text\" on-click={ () => this.append(data) }>Append</el-button>\n              <el-button size=\"mini\" type=\"text\" on-click={ () => this.remove(node, data) }>Delete</el-button>\n            </span>\n          </span>);\n      }\n    }\n  };\n</script>\n\n<style>\n  .custom-tree-node {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    font-size: 14px;\n    padding-right: 8px;\n  }\n</style>\n```\n:::\n\n### Tree node filtering\nTree nodes can be filtered\n\n:::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.\n```html\n<el-input\n  placeholder=\"Filter keyword\"\n  v-model=\"filterText\">\n</el-input>\n\n<el-tree\n  class=\"filter-tree\"\n  :data=\"data\"\n  :props=\"defaultProps\"\n  default-expand-all\n  :filter-node-method=\"filterNode\"\n  ref=\"tree\">\n</el-tree>\n\n<script>\n  export default {\n    watch: {\n      filterText(val) {\n        this.$refs.tree.filter(val);\n      }\n    },\n\n    methods: {\n      filterNode(value, data) {\n        if (!value) return true;\n        return data.label.indexOf(value) !== -1;\n      }\n    },\n\n    data() {\n      return {\n        filterText: '',\n        data: [{\n          id: 1,\n          label: 'Level one 1',\n          children: [{\n            id: 4,\n            label: 'Level two 1-1',\n            children: [{\n              id: 9,\n              label: 'Level three 1-1-1'\n            }, {\n              id: 10,\n              label: 'Level three 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Level one 2',\n          children: [{\n            id: 5,\n            label: 'Level two 2-1'\n          }, {\n            id: 6,\n            label: 'Level two 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Level one 3',\n          children: [{\n            id: 7,\n            label: 'Level two 3-1'\n          }, {\n            id: 8,\n            label: 'Level two 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Accordion\n\nOnly one node among the same level can be expanded at one time.\n\n:::demo\n```html\n<el-tree\n  :data=\"data\"\n  :props=\"defaultProps\"\n  accordion\n  @node-click=\"handleNodeClick\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: 'Level one 1',\n          children: [{\n            label: 'Level two 1-1',\n            children: [{\n              label: 'Level three 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 2',\n          children: [{\n            label: 'Level two 2-1',\n            children: [{\n              label: 'Level three 2-1-1'\n            }]\n          }, {\n            label: 'Level two 2-2',\n            children: [{\n              label: 'Level three 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 3',\n          children: [{\n            label: 'Level two 3-1',\n            children: [{\n              label: 'Level three 3-1-1'\n            }]\n          }, {\n            label: 'Level two 3-2',\n            children: [{\n              label: 'Level three 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Draggable\n\nYou can drag and drop Tree nodes by adding a `draggable` attribute.\n\n:::demo\n```html\n<el-tree\n  :data=\"data\"\n  node-key=\"id\"\n  default-expand-all\n  @node-drag-start=\"handleDragStart\"\n  @node-drag-enter=\"handleDragEnter\"\n  @node-drag-leave=\"handleDragLeave\"\n  @node-drag-over=\"handleDragOver\"\n  @node-drag-end=\"handleDragEnd\"\n  @node-drop=\"handleDrop\"\n  draggable\n  :allow-drop=\"allowDrop\"\n  :allow-drag=\"allowDrag\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: 'Level one 1',\n          children: [{\n            label: 'Level two 1-1',\n            children: [{\n              label: 'Level three 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 2',\n          children: [{\n            label: 'Level two 2-1',\n            children: [{\n              label: 'Level three 2-1-1'\n            }]\n          }, {\n            label: 'Level two 2-2',\n            children: [{\n              label: 'Level three 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 3',\n          children: [{\n            label: 'Level two 3-1',\n            children: [{\n              label: 'Level three 3-1-1'\n            }]\n          }, {\n            label: 'Level two 3-2',\n            children: [{\n              label: 'Level three 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleDragStart(node, ev) {\n        console.log('drag start', node);\n      },\n      handleDragEnter(draggingNode, dropNode, ev) {\n        console.log('tree drag enter: ', dropNode.label);\n      },\n      handleDragLeave(draggingNode, dropNode, ev) {\n        console.log('tree drag leave: ', dropNode.label);\n      },\n      handleDragOver(draggingNode, dropNode, ev) {\n        console.log('tree drag over: ', dropNode.label);\n      },\n      handleDragEnd(draggingNode, dropNode, dropType, ev) {\n        console.log('tree drag end: ', dropNode && dropNode.label, dropType);\n      },\n      handleDrop(draggingNode, dropNode, dropType, ev) {\n        console.log('tree drop: ', dropNode.label, dropType);\n      },\n      allowDrop(draggingNode, dropNode, type) {\n        if (dropNode.data.label === 'Level two 3-1') {\n          return type !== 'inner';\n        } else {\n          return true;\n        }\n      },\n      allowDrag(draggingNode) {\n        return draggingNode.data.label.indexOf('Level three 3-1-1') === -1;\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Attributes\n| Attribute             | Description                              | Type                        | Accepted Values | Default |\n| --------------------- | ---------------------------------------- | --------------------------- | --------------- | ------- |\n| data                  | tree data                                | array                       | —               | —       |\n| empty-text            | text displayed when data is void         | string                      | —               | —       |\n| node-key              | unique identity key name for nodes, its value should be unique across the whole tree | string                      | —               | —       |\n| props                 | configuration options, see the following table | object                      | —               | —       |\n| render-after-expand   | whether to render child nodes only after a parent node is expanded for the first time | boolean | — | true |\n| load                  | method for loading subtree data, only works when `lazy` is true  | function(node, resolve)     | —               | —       |\n| render-content        | render function for tree node            | Function(h, { node, data, store }        | —               | —       |\n| highlight-current     | whether current node is highlighted      | boolean                     | —               | false   |\n| default-expand-all    | whether to expand all nodes by default   | boolean                     | —               | false   |\n| 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 |\n| 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 |\n| auto-expand-parent    | whether to expand father node when a child node is expanded | boolean                     | —               | true    |\n| default-expanded-keys | array of keys of initially expanded nodes | array                       | —               | —       |\n| show-checkbox         | whether node is selectable               | boolean                     | —               | false   |\n| check-strictly        | whether checked state of a node not affects its father and child nodes when `show-checkbox` is `true` | boolean                     | —               | false   |\n| default-checked-keys  | array of keys of initially checked nodes | array                       | —               | —       |\n| current-node-key      | key of initially selected node | string, number                       | —               | —       |\n| filter-node-method    | this function will be executed on each node when use filter method. if return `false`, tree node will be hidden. | Function(value, data, node) | —               | —       |\n| accordion             | whether only one node among the same level can be expanded at one time | boolean                     | —               | false   |\n| indent                | horizontal indentation of nodes in adjacent levels in pixels | number                     | —    | 16 |\n| icon-class            | custome tree node icon                                       | string                     | -    | -  |\n| lazy                  | whether to lazy load leaf node, used with `load` attribute  | boolean                     | —    | false |\n| draggable             | whether enable tree nodes drag and drop | boolean            | —    | false |\n| allow-drag            | this function will be executed before dragging a node. If `false` is returned, the node can not be dragged | Function(node)  | —  | —  |\n| allow-drop            | this function will be executed before the dragging node is dropped. If `false` is returned, the dragging node can not be dropped at the target node. `type` has three possible values: 'prev' (inserting the dragging node before the target node), 'inner' (inserting the dragging node to the target node) and 'next' (inserting the dragging node after the target node) | Function(draggingNode, dropNode, type)  | —    | —     |\n\n### props\n| Attribute | Description                              | Type   | Accepted Values | Default |\n| --------- | ---------------------------------------- | ------ | --------------- | ------- |\n| label     | specify which key of node object is used as the node's label | string, function(data, node) | —               | —       |\n| children | specify which node object is used as the node's subtree | string | —               | —       |\n| disabled | specify which key of node object represents if node's checkbox is disabled | boolean, function(data, node) | —    | —    |\n| isLeaf | specify whether the node is a leaf node, only works when lazy load is enabled | boolean, function(data, node) | —    | —    |\n\n### Method\n`Tree` has the following method, which returns the currently selected array of nodes.\n| Method          | Description                              | Parameters                               |\n| --------------- | ---------------------------------------- | ---------------------------------------- |\n| filter          | filter all tree nodes, filtered nodes will be hidden | Accept a parameter which will be used as first parameter for filter-node-method |\n| updateKeyChildren | set new data to node, only works when `node-key` is assigned  | (key, data) Accept two parameters: 1. key of node 2. new data |\n| getCheckedNodes | If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of nodes | (leafOnly, includeHalfChecked) Accept two boolean type parameters: 1. default value is `false`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. 2. default value is `false`. If the parameter is `true`, the return value contains halfchecked nodes |\n| setCheckedNodes | set certain nodes to be checked, only works when `node-key` is assigned | an array of nodes to be checked          |\n| getCheckedKeys  | If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of node's keys | (leafOnly) Accept a boolean type parameter whose default value is `false`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. |\n| setCheckedKeys  | set certain nodes to be checked, only works when `node-key` is assigned | (keys, leafOnly) Accept two parameters: 1. an array of node's keys to be checked 2. a boolean type parameter whose default value is `false`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. |\n| setChecked      | set node to be checked or not, only works when `node-key` is assigned | (key/data, checked, deep) Accept three parameters: 1. node's key or data to be checked 2. a boolean typed parameter indicating checked or not. 3. a boolean typed parameter indicating deep or not. |\n| getHalfCheckedNodes | If the node can be selected (`show-checkbox` is `true`), it returns the currently half selected array of nodes | - |\n| getHalfCheckedKeys | If the node can be selected (`show-checkbox` is `true`), it returns the currently half selected array of node's keys | - |\n| getCurrentKey   | return the highlight node's key (null if no node is highlighted) | — |\n| getCurrentNode  | return the highlight node's data (null if no node is highlighted) | — |\n| setCurrentKey   | set highlighted node by key, only works when `node-key` is assigned | (key) the node's key to be highlighted. If `null`, cancel the currently highlighted node |\n| setCurrentNode  | set highlighted node, only works when `node-key` is assigned | (node) the node to be highlighted |\n| getNode         | get node by data or key | (data) the node's data or key |\n| remove          | remove a node, only works when node-key is assigned | (data) the node's data or node to be deleted |\n| append          | append a child node to a given node in the tree | (data, parentNode) 1. child node's data to be appended 2. parent node's data, key or node |\n| insertBefore    | insert a node before a given node in the tree | (data, refNode) 1. node's data to be inserted 2. reference node's data, key or node |\n| insertAfter     | insert a node after a given node in the tree   | (data, refNode) 1. node's data to be inserted 2. reference node's data, key or node |\n\n### Events\n| Event Name     | Description                              | Parameters                               |\n| -------------- | ---------------------------------------- | ---------------------------------------- |\n| node-click     | triggers when a node is clicked          | three parameters: node object corresponding to the node clicked, `node` property of TreeNode, TreeNode itself |\n| node-contextmenu     | triggers when a node is clicked by right button          | four parameters: event, node object corresponding to the node clicked, `node` property of TreeNode, TreeNode itself |\n| check-change   | triggers when the selected state of the node changes | three parameters: node object corresponding to the node whose selected state is changed, whether the node is selected, whether node's subtree has selected nodes |\n| check   | triggers after clicking the checkbox of a node | two parameters: node object corresponding to the node that is checked / unchecked, tree checked status object which has four props: checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys |\n| current-change | triggers when current node changes       | two parameters: node object corresponding to the current node, `node` property of TreeNode |\n| node-expand    | triggers when current node open          | three parameters: node object corresponding to the node opened, `node` property of TreeNode, TreeNode itself |\n| node-collapse  | triggers when current node close         | three parameters: node object corresponding to the node closed, `node` property of TreeNode, TreeNode itself |\n| node-drag-start | triggers when dragging starts  | two parameters: node object corresponding to the dragging node, event. |\n| node-drag-enter | triggers when the dragging node enters another node  | three parameters: node object corresponding to the dragging node, node object corresponding to the entering node, event. |\n| node-drag-leave | triggers when the dragging node leaves a node  | three parameters: node object corresponding to the dragging node, node object corresponding to the leaving node, event.  |\n| node-drag-over | triggers when dragging over a node (like mouseover event) | three parameters: node object corresponding to the dragging node, node object corresponding to the dragging over node, event.  |\n| node-drag-end  | triggers when dragging ends  | four parameters: node object corresponding to the dragging node, node object corresponding to the dragging end node (may be `undefined`), node drop type (before / after / inner), event. |\n| node-drop  | triggers after the dragging node is dropped | four parameters: node object corresponding to the dragging node, node object corresponding to the dropped node, node drop type (before / after / inner), event. |\n\n### Scoped Slot\n| Name | Description |\n|------|--------|\n| — | Custom content for tree nodes. The scope parameter is { node, data } |\n"
  },
  {
    "path": "examples/docs/en-US/typography.md",
    "content": "<script>\n  import bus from '../../bus';\n  import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';\n  const varMap = [\n    '$--font-size-extra-large',\n    '$--font-size-large',\n    '$--font-size-medium',\n    '$--font-size-base',\n    '$--font-size-small',\n    '$--font-size-extra-small'\n  ];\n  const original = {\n    'font_size_extra_large': '20px',\n    'font_size_large': '18px',\n    'font_size_medium': '16px',\n    'font_size_base': '14px',\n    'font_size_small': '13px',\n    'font_size_extra_small': '12px'\n  }\n  export default {\n    created() {\n      bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);\n    },\n    mounted() {\n      this.setGlobal();\n    },\n    methods: {\n      tintColor(color, tint) {\n        return tintColor(color, tint);\n      },\n      setGlobal() {\n        if (window.userThemeConfig) {\n          this.global = window.userThemeConfig.global;\n        }\n      }\n    },\n    data() {\n      return {\n        global: {},\n        'font_size_extra_large': '',\n        'font_size_large': '',\n        'font_size_medium': '',\n        'font_size_base': '',\n        'font_size_small': '',\n        'font_size_extra_small': ''\n      }\n    },\n    watch: {\n      global: {\n        immediate: true,\n        handler(value) {\n          varMap.forEach((v) => {\n            const key = v.replace('$--', '').replace(/-/g, '_')\n            if (value[v]) {\n              this[key] = value[v]\n            } else {\n              this[key] = original[key]\n            }\n          });\n        }\n      }\n    },\n  }\n</script>\n\n## Typography\n\nWe create a font convention to ensure the best presentation across different platforms.\n\n### Font\n<div class=\"demo-term-box\">\n<img src=\"../../assets/images/term-pingfang.png\" alt=\"\">\n<img src=\"../../assets/images/term-hiragino.png\" alt=\"\">\n<img src=\"../../assets/images/term-microsoft.png\" alt=\"\">\n<img src=\"../../assets/images/term-sf.png\" alt=\"\">\n<img src=\"../../assets/images/term-helvetica.png\" alt=\"\">\n<img src=\"../../assets/images/term-arial.png\" alt=\"\">\n</div>\n\n### Font Convention\n\n<table class=\"demo-typo-size\">\n  <tbody>\n  <tr\n    >\n      <td>Level</td>\n      <td>Font Size</td>\n      <td class=\"color-dark-light\">Demo</td>\n    </tr>\n    <tr\n    :style=\"{ fontSize: font_size_extra_small }\"\n    >\n      <td>Supplementary text</td>\n      <td class=\"color-dark-light\">{{font_size_extra_small}} Extra Small</td>\n      <td>Build with Element</td>\n    </tr>\n    <tr\n    :style=\"{ fontSize: font_size_small }\"\n    >\n      <td>Body (small)</td>\n      <td class=\"color-dark-light\">{{font_size_small}} Small</td>\n      <td>Build with Element</td>\n    </tr>\n    <tr\n    :style=\"{ fontSize: font_size_base }\"\n    >\n      <td>Body</td>\n      <td class=\"color-dark-light\">{{font_size_base}} Base</td>\n      <td>Build with Element</td>\n    </tr>\n    <tr\n    :style=\"{ fontSize: font_size_medium }\"\n    >\n      <td >Small Title</td>\n      <td class=\"color-dark-light\">{{font_size_medium}} Medium</td>\n      <td>Build with Element</td>\n    </tr>\n    <tr\n    :style=\"{ fontSize: font_size_large }\"\n    >\n      <td>Title</td>\n      <td class=\"color-dark-light\">{{font_size_large}} large</td>\n      <td>Build with Element</td>\n    </tr>\n    <tr\n    :style=\"{ fontSize: font_size_extra_large }\"\n    >\n      <td>Main Title</td>\n      <td class=\"color-dark-light\">{{font_size_extra_large}} Extra large</td>\n      <td>Build with Element</td>\n    </tr>\n  </tbody>\n</table>\n\n### Font Line Height\n\n<div>\n<img class=\"lineH-left\" src=\"~examples/assets/images/typography.png\" />\n<ul class=\"lineH-right\">\n<li>line-height:1 <span>No line height</span></li>\n<li>line-height:1.3 <span>Compact</span></li>\n<li>line-height:1.5 <span>Regular</span></li>\n<li>line-height:1.7 <span>Loose</span></li>\n</ul>\n</div>\n\n### Font-family\n\n```css\nfont-family: \"Helvetica Neue\",Helvetica,\"PingFang SC\",\"Hiragino Sans GB\",\"Microsoft YaHei\",\"微软雅黑\",Arial,sans-serif;\n```\n"
  },
  {
    "path": "examples/docs/en-US/upload.md",
    "content": "## Upload\n\nUpload files by clicking or drag-and-drop\n\n### Click to upload files\n\n:::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.\n```html\n<el-upload\n  class=\"upload-demo\"\n  action=\"https://jsonplaceholder.typicode.com/posts/\"\n  :on-preview=\"handlePreview\"\n  :on-remove=\"handleRemove\"\n  :before-remove=\"beforeRemove\"\n  multiple\n  :limit=\"3\"\n  :on-exceed=\"handleExceed\"\n  :file-list=\"fileList\">\n  <el-button size=\"small\" type=\"primary\">Click to upload</el-button>\n  <div slot=\"tip\" class=\"el-upload__tip\">jpg/png files with a size less than 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      },\n      handleExceed(files, fileList) {\n        this.$message.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + fileList.length} totally`);\n      },\n      beforeRemove(file, fileList) {\n        return this.$confirm(`Cancel the transfert of ${ file.name } ?`);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### User avatar upload\n\nUse `before-upload` hook to limit the upload file format and size.\n\n:::demo\n```html\n<el-upload\n  class=\"avatar-uploader\"\n  action=\"https://jsonplaceholder.typicode.com/posts/\"\n  :show-file-list=\"false\"\n  :on-success=\"handleAvatarSuccess\"\n  :before-upload=\"beforeAvatarUpload\">\n  <img v-if=\"imageUrl\" :src=\"imageUrl\" class=\"avatar\">\n  <i v-else class=\"el-icon-plus avatar-uploader-icon\"></i>\n</el-upload>\n\n<style>\n  .avatar-uploader .el-upload {\n    border: 1px dashed #d9d9d9;\n    border-radius: 6px;\n    cursor: pointer;\n    position: relative;\n    overflow: hidden;\n  }\n  .avatar-uploader .el-upload:hover {\n    border-color: #409EFF;\n  }\n  .avatar-uploader-icon {\n    font-size: 28px;\n    color: #8c939d;\n    width: 178px;\n    height: 178px;\n    line-height: 178px;\n    text-align: center;\n  }\n  .avatar {\n    width: 178px;\n    height: 178px;\n    display: block;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        imageUrl: ''\n      };\n    },\n    methods: {\n      handleAvatarSuccess(res, file) {\n        this.imageUrl = URL.createObjectURL(file.raw);\n      },\n      beforeAvatarUpload(file) {\n        const isJPG = file.type === 'image/jpeg';\n        const isLt2M = file.size / 1024 / 1024 < 2;\n\n        if (!isJPG) {\n          this.$message.error('Avatar picture must be JPG format!');\n        }\n        if (!isLt2M) {\n          this.$message.error('Avatar picture size can not exceed 2MB!');\n        }\n        return isJPG && isLt2M;\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Photo Wall\n\nUse `list-type` to change the fileList style.\n\n:::demo\n```html\n<el-upload\n  action=\"https://jsonplaceholder.typicode.com/posts/\"\n  list-type=\"picture-card\"\n  :on-preview=\"handlePictureCardPreview\"\n  :on-remove=\"handleRemove\">\n  <i class=\"el-icon-plus\"></i>\n</el-upload>\n<el-dialog :visible.sync=\"dialogVisible\">\n  <img width=\"100%\" :src=\"dialogImageUrl\" alt=\"\">\n</el-dialog>\n<script>\n  export default {\n    data() {\n      return {\n        dialogImageUrl: '',\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePictureCardPreview(file) {\n        this.dialogImageUrl = file.url;\n        this.dialogVisible = true;\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Custom file thumbnail\n\nUse `scoped-slot` to change default thumbnail template.\n\n:::demo\n```html\n<el-upload\n  action=\"#\"\n  list-type=\"picture-card\"\n  :auto-upload=\"false\">\n    <i slot=\"default\" class=\"el-icon-plus\"></i>\n    <div slot=\"file\" slot-scope=\"{file}\">\n      <img\n        class=\"el-upload-list__item-thumbnail\"\n        :src=\"file.url\" alt=\"\"\n      >\n      <span class=\"el-upload-list__item-actions\">\n        <span\n          class=\"el-upload-list__item-preview\"\n          @click=\"handlePictureCardPreview(file)\"\n        >\n          <i class=\"el-icon-zoom-in\"></i>\n        </span>\n        <span\n          v-if=\"!disabled\"\n          class=\"el-upload-list__item-delete\"\n          @click=\"handleDownload(file)\"\n        >\n          <i class=\"el-icon-download\"></i>\n        </span>\n        <span\n          v-if=\"!disabled\"\n          class=\"el-upload-list__item-delete\"\n          @click=\"handleRemove(file)\"\n        >\n          <i class=\"el-icon-delete\"></i>\n        </span>\n      </span>\n    </div>\n</el-upload>\n<el-dialog :visible.sync=\"dialogVisible\">\n  <img width=\"100%\" :src=\"dialogImageUrl\" alt=\"\">\n</el-dialog>\n<script>\n  export default {\n    data() {\n      return {\n        dialogImageUrl: '',\n        dialogVisible: false,\n        disabled: false\n      };\n    },\n    methods: {\n      handleRemove(file) {\n        console.log(file);\n      },\n      handlePictureCardPreview(file) {\n        this.dialogImageUrl = file.url;\n        this.dialogVisible = true;\n      },\n      handleDownload(file) {\n        console.log(file);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### FileList with thumbnail\n\n:::demo\n```html\n<el-upload\n  class=\"upload-demo\"\n  action=\"https://jsonplaceholder.typicode.com/posts/\"\n  :on-preview=\"handlePreview\"\n  :on-remove=\"handleRemove\"\n  :file-list=\"fileList\"\n  list-type=\"picture\">\n  <el-button size=\"small\" type=\"primary\">Click to upload</el-button>\n  <div slot=\"tip\" class=\"el-upload__tip\">jpg/png files with a size less than 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### File list control\n\nUse `on-change` hook function to control upload file list\n\n:::demo\n```html\n<el-upload\n  class=\"upload-demo\"\n  action=\"https://jsonplaceholder.typicode.com/posts/\"\n  :on-change=\"handleChange\"\n  :file-list=\"fileList\">\n  <el-button size=\"small\" type=\"primary\">Click to upload</el-button>\n  <div slot=\"tip\" class=\"el-upload__tip\">jpg/png files with a size less than 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{\n          name: 'food.jpeg',\n          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'\n        }, {\n          name: 'food2.jpeg',\n          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'\n        }]\n      };\n    },\n    methods: {\n      handleChange(file, fileList) {\n        this.fileList = fileList.slice(-3);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Drag to upload\n\nYou can drag your file to a certain area to upload it.\n\n:::demo\n```html\n<el-upload\n  class=\"upload-demo\"\n  drag\n  action=\"https://jsonplaceholder.typicode.com/posts/\"\n  :on-preview=\"handlePreview\"\n  :on-remove=\"handleRemove\"\n  :file-list=\"fileList\"\n  multiple>\n  <i class=\"el-icon-upload\"></i>\n  <div class=\"el-upload__text\">Drop file here or <em>click to upload</em></div>\n  <div class=\"el-upload__tip\" slot=\"tip\">jpg/png files with a size less than 500kb</div>\n</el-upload>\n```\n:::\n\n### Manual upload\n\n:::demo\n```html\n<el-upload\n  class=\"upload-demo\"\n  ref=\"upload\"\n  action=\"https://jsonplaceholder.typicode.com/posts/\"\n  :auto-upload=\"false\">\n  <el-button slot=\"trigger\" size=\"small\" type=\"primary\">select file</el-button>\n  <el-button style=\"margin-left: 10px;\" size=\"small\" type=\"success\" @click=\"submitUpload\">upload to server</el-button>\n  <div class=\"el-upload__tip\" slot=\"tip\">jpg/png files with a size less than 500kb</div>\n</el-upload>\n<script>\n  export default {\n    methods: {\n      submitUpload() {\n        this.$refs.upload.submit();\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Attributes\nAttribute      | Description          | Type      | Accepted Values       | Default\n----| ----| ----| ----| ----\naction | required, request URL | string | — | —\nheaders | request headers | object | — | —\nmultiple | whether uploading multiple files is permitted | boolean | — | —\ndata | additions options of request | object | — | —\nname | key name for uploaded file | string | — | file\nwith-credentials | whether cookies are sent | boolean | — |false\nshow-file-list | whether to show the uploaded file list | boolean | — | true\n drag | whether to activate drag and drop mode | boolean | — | false\naccept | accepted [file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), will not work when `thumbnail-mode` is `true` | string | — | —\non-preview | hook function when clicking the uploaded files | function(file) | — | —\non-remove | hook function when files are removed | function(file, fileList) | — | —\non-success | hook function when uploaded successfully | function(response, file, fileList) | — | —\non-error | hook function when some errors occurs | function(err, file, fileList) | — | —\non-progress | hook function when some progress occurs | function(event, file, fileList) | — | — |\non-change | hook function when select file or upload file success or upload file fail | function(file, fileList) | — | — |\nbefore-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 | function(file) | — | —\nbefore-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. | function(file, fileList) | — | — |\nthumbnail-mode | whether thumbnail is displayed | boolean | — | false\nfile-list | default uploaded files, e.g. [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array | — | []\nlist-type | type of fileList | string | text/picture/picture-card | text |\nauto-upload | whether to auto upload file | boolean | — | true |\nhttp-request | override default xhr behavior, allowing you to implement your own upload-file's request | function | — | — |\ndisabled | whether to disable upload | boolean | — | false |\nlimit | maximum number of uploads allowed | number | — | — |\non-exceed | hook function when limit is exceeded | function(files, fileList) | — | - |\n\n### Slot\n| Name | Description |\n|------|--------|\n| trigger | content which triggers file dialog |\n| tip | content of tips |\n\n### Methods\n| Methods Name | Description | Parameters |\n|---------- |-------- |---------- |\n| clearFiles | clear the uploaded file list (this method is not supported in the `before-upload` hook) | — |\n| abort      | cancel upload request                    | （ file: fileList's item ） |\n| submit     | upload the file list manually            |  —                         |\n"
  },
  {
    "path": "examples/docs/es/alert.md",
    "content": "## Alert\n\nMostrar mensajes de alertas importantes.\n\n### Uso básico\n\nLos componentes de alertas no son elementos overlay de la página y no desaparecen automáticamente.\n\n:::demo Alert provee 4 tipos de temas definidos por `type`, el valor por defecto es `info`.\n\n```html\n<template>\n  <el-alert\n    title=\"success alert\"\n    type=\"success\">\n  </el-alert>\n  <el-alert\n    title=\"info alert\"\n    type=\"info\">\n  </el-alert>\n  <el-alert\n    title=\"warning alert\"\n    type=\"warning\">\n  </el-alert>\n  <el-alert\n    title=\"error alert\"\n    type=\"error\">\n  </el-alert>\n</template>\n```\n:::\n\n### Theme\n\nAlert provee dos diferentes temas  `light` y `dark`.\n\n:::demo Use `effect` para cambiar el tema, por defecto es `light`.\n```html\n<template>\n  <el-alert\n    title=\"success alert\"\n    type=\"success\"\n    effect=\"dark\">\n  </el-alert>\n  <el-alert\n    title=\"info alert\"\n    type=\"info\"\n    effect=\"dark\">\n  </el-alert>\n  <el-alert\n    title=\"warning alert\"\n    type=\"warning\"\n    effect=\"dark\">\n  </el-alert>\n  <el-alert\n    title=\"error alert\"\n    type=\"error\"\n    effect=\"dark\">\n  </el-alert>\n</template>\n```\n:::\n\n### Personalización del botón de cerrar\n\nPersonalizar el botón de cerrar como texto u otros símbolos.\n\n:::demo Alert permite configurar si es posible cerrarla. El texto del botón de cerrado, así como los callbacks de cerrado son personalizables. El atributo `closable` define si el componente puede cerrarse o no. Acepta un `boolean`, que por defecto es `true`. También puede configurar el atributo `close-text` para reemplazar el símbolo de cerrado que se muestra por defecto. El atributo `close-text` debe ser un string. El evento `close` se dispara cuando el componente se cierra.\n\n\n```html\n<template>\n  <el-alert\n    title=\"unclosable alert\"\n    type=\"success\"\n    :closable=\"false\">\n  </el-alert>\n  <el-alert\n    title=\"customized close-text\"\n    type=\"info\"\n    close-text=\"Gotcha\">\n  </el-alert>\n  <el-alert\n    title=\"alert with callback\"\n    type=\"warning\"\n    @close=\"hello\">\n  </el-alert>\n</template>\n\n<script>\n  export default {\n    methods: {\n      hello() {\n        alert('Hello World!');\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Usar iconos\n\nMostrar un icono mejora la legibilidad.\n\n:::demo Setear el atributo `show-icon` muestra un icono que corresponde al tipo de Alert que se está mostrando.\n\n\n```html\n<template>\n  <el-alert\n    title=\"success alert\"\n    type=\"success\"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title=\"info alert\"\n    type=\"info\"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title=\"warning alert\"\n    type=\"warning\"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title=\"error alert\"\n    type=\"error\"\n    show-icon>\n  </el-alert>\n</template>\n```\n:::\n\n### Texto centrado\n\nPara centrar el texto utilice el atributo `center`.\n\n:::demo\n\n```html\n<template>\n  <el-alert\n    title=\"success alert\"\n    type=\"success\"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title=\"info alert\"\n    type=\"info\"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title=\"warning alert\"\n    type=\"warning\"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title=\"error alert\"\n    type=\"error\"\n    center\n    show-icon>\n  </el-alert>\n</template>\n```\n:::\n\n### Con descripción\n\nDescripción incluye un mensaje con información más detallada.\n\n:::demo Además del atributo requerido `title`, se puede agregar el atributo `description` para ayudar a describir la alerta con mas detalles. La descripción puede contener solamente un string y va a usar word wrap automáticamente.\n\n```html\n<template>\n  <el-alert\n    title=\"with description\"\n    type=\"success\"\n    description=\"This is a description.\">\n  </el-alert>\n</template>\n```\n:::\n\n### Utilizando icono y descripción\n\n:::demo Finalmente este es un ejemplo utilizando icono y descripción.\n\n```html\n<template>\n  <el-alert\n    title=\"success alert\"\n    type=\"success\"\n    description=\"more text description\"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title=\"info alert\"\n    type=\"info\"\n    description=\"more text description\"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title=\"warning alert\"\n    type=\"warning\"\n    description=\"more text description\"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title=\"error alert\"\n    type=\"error\"\n    description=\"more text description\"\n    show-icon>\n  </el-alert>\n</template>\n```\n:::\n\n### Atributos\n| Atributo    | Descripción                              | Tipo    | Valores aceptados          | Por defecto |\n| ----------- | ---------------------------------------- | ------- | -------------------------- | ----------- |\n| title       | título                                   | string  | —                          | —           |\n| type        | tipo de componente                       | string  | success/warning/info/error | info        |\n| description | texto descriptivo. También puede ser pasado con el slot por defecto | string  | —                          | —           |\n| closable    | si se puede cerrar o no                  | boolean | —                          | true        |\n| center      | si el texto debe estar centrado          | boolean | —                          | false       |\n| close-text  | texto de cerrado personalizado           | string  | —                          | —           |\n| show-icon   | si un icono del tipo de alerta se debe mostrar | boolean | —                          | false       |\n| effect | selecciona tema | string | light/dark | light |\n\n### Slot\n\n| Nombre | Descripción |\n|------|--------|\n| — | descripción |\n| title | El contenido del título de alerta. |\n\n### Eventos\n| Nombre del evento | Descripción                           | Parámetros |\n| ----------------- | ------------------------------------- | ---------- |\n| close             | Se dispara cuando la alerta se cierra | —          |\n"
  },
  {
    "path": "examples/docs/es/avatar.md",
    "content": "## Avatar\n\nLos avatares pueden utilizarse para representar personas u objetos. Soporta imágenes, iconos o caracteres.\n\n### Básico\n\nUse los props `shape` y `size` para establecer la forma y el tamaño del avatar\n\n:::demo\n```html\n<template>\n  <el-row class=\"demo-avatar demo-basic\">\n    <el-col :span=\"12\">\n      <div class=\"sub-title\">circle</div>\n      <div class=\"demo-basic--circle\">\n        <div class=\"block\"><el-avatar :size=\"50\" :src=\"circleUrl\"></el-avatar></div>\n        <div class=\"block\" v-for=\"size in sizeList\" :key=\"size\">\n          <el-avatar :size=\"size\" :src=\"circleUrl\"></el-avatar>\n        </div>\n      </div>\n    </el-col>  \n    <el-col :span=\"12\">\n      <div class=\"sub-title\">square</div>\n      <div class=\"demo-basic--circle\">\n        <div class=\"block\"><el-avatar shape=\"square\" :size=\"50\" :src=\"squareUrl\"></el-avatar></div>\n        <div class=\"block\" v-for=\"size in sizeList\" :key=\"size\">\n          <el-avatar shape=\"square\" :size=\"size\" :src=\"squareUrl\"></el-avatar>\n        </div>\n      </div>\n    </el-col> \n  </el-row>\n</template>\n<script>\n  export default {\n    data () {\n      return {\n        circleUrl: \"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png\",\n        squareUrl: \"https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png\",\n        sizeList: [\"large\", \"medium\", \"small\"]\n      }\n    }\n  }\n</script>\n\n```\n:::\n\n### Tipos\n\nSoporta imágenes, iconos o caracteres.\n\n:::demo\n```html\n<template>\n  <div class=\"demo-type\">\n    <div>\n      <el-avatar icon=\"el-icon-user-solid\"></el-avatar>\n    </div>\n    <div>\n      <el-avatar src=\"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png\"></el-avatar>\n    </div>\n    <div>\n      <el-avatar> user </el-avatar>\n    </div>\n  </div>\n</template>\n```\n:::\n\n### Fallback cuando se produce un error de carga de imagen\n\nFallback cuando se produce un error de carga de imagen\n\n:::demo\n```html\n<template>\n  <div class=\"demo-type\">\n    <el-avatar :size=\"60\" src=\"https://empty\" @error=\"errorHandler\">\n      <img src=\"https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png\"/>\n      </el-avatar>\n  </div>\n</template>\n<script>\n  export default {\n    methods: {\n      errorHandler() {\n        return true\n      }\n    }\n  }\n</script>\n\n```\n:::\n\n### Cómo encaja la imagen en su contenedor\n\nEstablezca cómo la imagen se ajusta a su contenedor para un avatar de imagen, igual que [object-fit](https://developer.mozilla.org/es/docs/Web/CSS/object-fit).\n\n:::demo\n```html\n<template>\n  <div class=\"demo-fit\">\n    <div class=\"block\" v-for=\"fit in fits\" :key=\"fit\">\n        <span class=\"title\">{{ fit }}</span>\n        <el-avatar shape=\"square\" :size=\"100\" :fit=\"fit\" :src=\"url\"></el-avatar>\n    </div>\n  </div>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],\n        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'\n      }\n    }\n  }\n</script>\n\n```\n:::\n\n### Atributos\n\n| Atributo     | Descripción | Tipo   | Valores aceptados | Por defecto |\n| ----------------- | -------------------------------- | --------------- | ------ | ------ |\n| icon              | establece el tipo de representación a Icono, más información en  Componente Icon | string          |        |        |\n| size              | Establece el tamaño del avatar | number/string | number / large / medium / small | large  |\n| shape             | establece la forma del avatar | string |    circle / square     |   circle  |\n| src               | la dirección de la imagen para un avatar de imagen | string |        |      |\n| srcSet            | Una lista de una o más cadenas separadas por comas que indica un conjunto de posibles fuentes de imágenes para que el agente de usuario las utilice. | string |        |      |\n| alt               | Este atributo define una descripción de texto alternativo de la imagen | string |        |      |\n| fit               | establece cómo encaja la imagen en su contenedor para un avatar de imagen | string |    fill / contain / cover / none / scale-down    |   cover   |\n\n### Eventos\n\n| Nombre | Descripción | Parámetros |\n| ------ | ------------------ | -------- |\n| error  | cuando se produce un error de carga de img, devuelve false para evitar el comportamiento de repliegue predeterminado |(e: Event)  |\n\n### Slot\n\n| Nombre | Descripción | \n| default  | personalice el contenido del avatar |\n\n"
  },
  {
    "path": "examples/docs/es/backtop.md",
    "content": "## Backtop\n\nUn botón para volver a la parte superior\n\n### Uso básico\n\nDesplácese hacia abajo para ver el botón en el lado inferior derecho.\n:::demo\n\n```html\n<template>\n  Scroll down to see the bottom-right button.\n  <el-backtop target=\".page-component__scroll .el-scrollbar__wrap\"></el-backtop>\n</template>\n```\n\n:::\n\n### Personalización\n\nÁrea de visualización de 40px \\* 40px.\n:::demo\n\n```html\n<template>\n  Scroll down to see the bottom-right button.\n  <el-backtop target=\".page-component__scroll .el-scrollbar__wrap\" :bottom=\"100\">\n    <div\n      style=\"{\n        height: 100%;\n        width: 100%;\n        background-color: #f2f5f6;\n        box-shadow: 0 0 6px rgba(0,0,0, .12);\n        text-align: center;\n        line-height: 40px;\n        color: #1989fa;\n      }\"\n    >\n      UP\n    </div>\n  </el-backtop>\n</template>\n```\n\n:::\n\n### Atributos\n\n| Atributos | Descripción                                    | Tipo         | Valores aceptados | Por defecto |\n| ----------------- | ------------------------------------------------------------------- | --------------- | --------------- | ------- |\n| target            | el objetivo para activar el scroll      | string          |                 |         |\n| visibility-height | el botón no se mostrará hasta que la altura de desplazamiento alcance este valor | number |                 | 200     |\n| right             | separación desde la derecha              | number |                 | 40      |\n| bottom            | separación desde abajo                                       | number |                 | 40      |\n\n### Eventos\n\n| Nombre del evento | Descripción             | Parámetros  |\n| ----------------- | ----------------------- | ----------- |\n| click             | se activa al hacer clic | click event |\n"
  },
  {
    "path": "examples/docs/es/badge.md",
    "content": "## Badge\n\nMarcas en forma de número o estado para botones e iconos.\n\n### Uso básico\n\nMuestra la cantidad de mensajes nuevos.\n\n:::demo La cantidad está definida por `value` que acepta `Number` o `String`.\n\n```html\n<el-badge :value=\"12\" class=\"item\">\n  <el-button size=\"small\">comments</el-button>\n</el-badge>\n<el-badge :value=\"3\" class=\"item\">\n  <el-button size=\"small\">replies</el-button>\n</el-badge>\n<el-badge :value=\"1\" class=\"item\" type=\"primary\">\n  <el-button size=\"small\">comments</el-button>\n</el-badge>\n<el-badge :value=\"2\" class=\"item\" type=\"warning\">\n  <el-button size=\"small\">replies</el-button>\n</el-badge>\n\n<el-dropdown trigger=\"click\">\n  <span class=\"el-dropdown-link\">\n    Click Me<i class=\"el-icon-caret-bottom el-icon--right\"></i>\n  </span>\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item class=\"clearfix\">\n      comments\n      <el-badge class=\"mark\" :value=\"12\" />\n    </el-dropdown-item>\n    <el-dropdown-item class=\"clearfix\">\n      replies\n      <el-badge class=\"mark\" :value=\"3\" />\n    </el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n```\n:::\n\n### Valor máximo\n\nSe puede personalizar el valor máximo.\n\n:::demo El valor máximo se define como `max` el cual es un `Number`. Nota: solo funciona si `value` es también un `Number`.\n\n```html\n<el-badge :value=\"200\" :max=\"99\" class=\"item\">\n  <el-button size=\"small\">comments</el-button>\n</el-badge>\n<el-badge :value=\"100\" :max=\"10\" class=\"item\">\n  <el-button size=\"small\">replies</el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n```\n:::\n\n### Personalizaciones\n\nMostrar texto en vez de números.\n\n:::demo Cuando `value` es un `String`, puede mostrar texto personalizado.\n\n```html\n<el-badge value=\"new\" class=\"item\">\n  <el-button size=\"small\">comments</el-button>\n</el-badge>\n<el-badge value=\"hot\" class=\"item\">\n  <el-button size=\"small\">replies</el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n```\n:::\n\n### Pequeño punto rojo\n\nPuede utilizar un punto rojo para marcar contenido que debe ser notado.\n\n:::demo Use el atributo `is-dot`. Es un `Boolean`.\n\n```html\n<el-badge is-dot class=\"item\">query</el-badge>\n<el-badge is-dot class=\"item\">\n  <el-button class=\"share-button\" icon=\"el-icon-share\" type=\"primary\"></el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n```\n:::\n\n### Atributos\n| Atributo | Descripción                              | Tipo           | Valores aceptados | Por defecto |\n| -------- | ---------------------------------------- | -------------- | ----------------- | ----------- |\n| value    | valor a mostrar                          | string, number | —                 | —           |\n| max      | valor máximo, Muestra '{max}+' cuando se excede. Solo funciona si `value` es un `Number` | number         | —                 | —           |\n| is-dot   | si se debe mostrar un pequeño punto      | boolean        | —                 | false       |\n| hidden   | oculta el badge                    | boolean        | —                 | false       |\n| type     | tipo de botón                            | string         | primary / success / warning / danger / info | — |\n\n"
  },
  {
    "path": "examples/docs/es/border.md",
    "content": "<script>\n  import bus from '../../bus';\n  import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';\n  const varMap = {\n    '$--box-shadow-light': 'boxShadowLight',\n    '$--box-shadow-base': 'boxShadowBase',\n    '$--border-radius-base': 'borderRadiusBase',\n    '$--border-radius-small': 'borderRadiusSmall'\n  };\n  const original = {\n    boxShadowLight: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',\n    boxShadowBase: '0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)',\n    borderRadiusBase: '4px',\n    borderRadiusSmall: '2px'\n  }\n  export default {\n    created() {\n      bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);\n    },\n    mounted() {\n      this.setGlobal();\n    },\n    methods: {\n      setGlobal() {\n        if (window.userThemeConfig) {\n          this.global = window.userThemeConfig.global;\n        }\n      }\n    },\n    data() {\n      return {\n        global: {},\n        boxShadowLight: '',\n        boxShadowBase: '',\n        borderRadiusBase: '',\n        borderRadiusSmall: ''\n      }\n    },\n    watch: {\n      global: {\n        immediate: true,\n        handler(value) {\n          Object.keys(varMap).forEach((c) => {\n            if (value[c]) {\n              this[varMap[c]] = value[c]\n            } else {\n              this[varMap[c]] = original[varMap[c]]\n            }\n          });\n        }\n      }\n    }\n  }\n</script>\n\n## Border\n\nEstandarizamos los bordes que se pueden utilizar en botones, tarjetas, pop-ups y otros componentes.\n\n### Border\n\nHay pocos estilos de borde para elegir.\n\n<table class=\"demo-border\">\n  <tbody>\n    <tr>\n      <td class=\"text\">Name</td>\n      <td class=\"text\">Thickness</td>\n      <td class=\"line\">Demo</td>\n    </tr>\n    <tr>\n      <td class=\"text\">Solid</td>\n      <td class=\"text\">1px</td>\n      <td class=\"line\">\n        <div></div>\n      </td>\n    </tr>\n    <tr>\n      <td class=\"text\">Dashed</td>\n      <td class=\"text\">2px</td>\n      <td class=\"line\">\n        <div class=\"dashed\"></div>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n### Radius\n\nHay pocos estilos de radio para elegir.\n\n<el-row :gutter=\"12\" class=\"demo-radius\">\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"title\">No Radius</div>\n    <div class=\"value\">border-radius: 0px</div>\n    <div class=\"radius\"></div>\n  </el-col>\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"title\">Small Radius</div>\n    <div class=\"value\">border-radius: {{borderRadiusSmall}}</div>\n    <div \n      class=\"radius\" \n      :style=\"{ borderRadius: borderRadiusSmall }\"\n    ></div>\n  </el-col>\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"title\">Large Radius</div>\n    <div class=\"value\">border-radius: {{borderRadiusBase}}</div>\n    <div \n      class=\"radius\"\n      :style=\"{ borderRadius: borderRadiusBase }\"\n    ></div>\n  </el-col>\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"title\">Round Radius</div>\n    <div class=\"value\">border-radius: 30px</div>\n    <div class=\"radius radius-30\"></div>\n  </el-col>\n</el-row>\n\n### Shadow\n\nHay pocos estilos de sombra para elegir.\n\n<div \nclass=\"demo-shadow\"\n:style=\"{ boxShadow: boxShadowBase }\"\n></div>\n<span class=\"demo-shadow-text\">Basic Shadow box-shadow: {{boxShadowBase}}</span>\n\n<div \nclass=\"demo-shadow\"\n:style=\"{ boxShadow: boxShadowLight }\"\n></div>\n<span class=\"demo-shadow-text\">Light Shadow box-shadow: {{boxShadowLight}}</span>\n"
  },
  {
    "path": "examples/docs/es/breadcrumb.md",
    "content": "## Breadcrumb\n\nMuestra la localización de la página actual, haciendo más fácil el poder ir a la página anterior.\n\n### Uso básico\n\n\n:::demo En `el-breadcrumb`, cada `el-breadcrumb-item` es un tag que representa cada nivel empezando desde la homepage. Este componente tiene un atributo `String` llamado `separator`, el mismo determina el carácter separador. El valor por defecto es '/'.\n\n```html\n<el-breadcrumb separator=\"/\">\n  <el-breadcrumb-item :to=\"{ path: '/' }\">homepage</el-breadcrumb-item>\n  <el-breadcrumb-item><a href=\"/\">promotion management</a></el-breadcrumb-item>\n  <el-breadcrumb-item>promotion list</el-breadcrumb-item>\n  <el-breadcrumb-item>promotion detail</el-breadcrumb-item>\n</el-breadcrumb>\n```\n:::\n\n### Icono separador\n\n:::demo Setee `separator-class` para que utilice `iconfont` como separador，el mismo va a cubrir `separator`\n\n```html\n<el-breadcrumb separator-class=\"el-icon-arrow-right\">\n  <el-breadcrumb-item :to=\"{ path: '/' }\">homepage</el-breadcrumb-item>\n  <el-breadcrumb-item>promotion management</el-breadcrumb-item>\n  <el-breadcrumb-item>promotion list</el-breadcrumb-item>\n  <el-breadcrumb-item>promotion detail</el-breadcrumb-item>\n</el-breadcrumb>\n```\n:::\n\n### Breadcrumb atributos\n| Atributo        | Descripción                            | Tipo   | Valores aceptados | Por defecto |\n| --------------- | -------------------------------------- | ------ | ----------------- | ----------- |\n| separator       | carácter separador                     | string | —                 | /           |\n| separator-class | nombre de la clase del icono separador | string | —                 | -           |\n\n### Breadcrumb Item atributos\n| Atributo | Descripción                              | Tipo          | Valores aceptados | Por defecto |\n| -------- | ---------------------------------------- | ------------- | ----------------- | ----------- |\n| to       | ruta del link, lo mismo que `to` de `vue-router` | string/object | —                 | —           |\n| replace  | si `true`,  la navegación no dejara una entrada en la historia | boolean       | —                 | false       |\n\n\n\n\n\n"
  },
  {
    "path": "examples/docs/es/button.md",
    "content": "## Button\n\nBotones comúnmente usados.\n\n### Uso básico\n\n:::demo Use `type`, `plain`,`round` y `circle` para definir estilos a los botones.\n\n```html\n<el-row>\n  <el-button>Default</el-button>\n  <el-button type=\"primary\">Primary</el-button>\n  <el-button type=\"success\">Success</el-button>\n  <el-button type=\"info\">Info</el-button>\n  <el-button type=\"warning\">Warning</el-button>\n  <el-button type=\"danger\">Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain>Plain</el-button>\n  <el-button type=\"primary\" plain>Primary</el-button>\n  <el-button type=\"success\" plain>Success</el-button>\n  <el-button type=\"info\" plain>Info</el-button>\n  <el-button type=\"warning\" plain>Warning</el-button>\n  <el-button type=\"danger\" plain>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button round>Round</el-button>\n  <el-button type=\"primary\" round>Primary</el-button>\n  <el-button type=\"success\" round>Success</el-button>\n  <el-button type=\"info\" round>Info</el-button>\n  <el-button type=\"warning\" round>Warning</el-button>\n  <el-button type=\"danger\" round>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button icon=\"el-icon-search\" circle></el-button>\n  <el-button type=\"primary\" icon=\"el-icon-edit\" circle></el-button>\n  <el-button type=\"success\" icon=\"el-icon-check\" circle></el-button>\n  <el-button type=\"info\" icon=\"el-icon-message\" circle></el-button>\n  <el-button type=\"warning\" icon=\"el-icon-star-off\" circle></el-button>\n  <el-button type=\"danger\" icon=\"el-icon-delete\" circle></el-button>\n</el-row>\n```\n:::\n\n### Botón deshabilitado\n\nEl atributo `disabled` determina su un botón esta deshabilitado.\n\n:::demo Use el atributo `disabled` para determinar si un botón esta deshabilitado. Acepta un valor `Boolean`.\n\n```html\n<el-row>\n  <el-button disabled>Default</el-button>\n  <el-button type=\"primary\" disabled>Primary</el-button>\n  <el-button type=\"success\" disabled>Success</el-button>\n  <el-button type=\"info\" disabled>Info</el-button>\n  <el-button type=\"warning\" disabled>Warning</el-button>\n  <el-button type=\"danger\" disabled>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain disabled>Plain</el-button>\n  <el-button type=\"primary\" plain disabled>Primary</el-button>\n  <el-button type=\"success\" plain disabled>Success</el-button>\n  <el-button type=\"info\" plain disabled>Info</el-button>\n  <el-button type=\"warning\" plain disabled>Warning</el-button>\n  <el-button type=\"danger\" plain disabled>Danger</el-button>\n</el-row>\n```\n:::\n\n### Botón de texto\n\nBotones sin borde ni fondo.\n\n:::demo\n```html\n<el-button type=\"text\">Text Button</el-button>\n<el-button type=\"text\" disabled>Text Button</el-button>\n```\n:::\n\n### Botón icono\n\nUse iconos para darle mayor significado a Button. Se puede usar simplemente un icono o un icono con texto.\n\n:::demo Use el atributo `icon` para agregar un icono. Puede encontrar el listado de iconos en el componente de iconos. Agregar iconos a la derecha del texto se puede conseguir con un tag `<i>`. También se pueden usar iconos personalizados.\n\n```html\n<el-button type=\"primary\" icon=\"el-icon-edit\"></el-button>\n<el-button type=\"primary\" icon=\"el-icon-share\"></el-button>\n<el-button type=\"primary\" icon=\"el-icon-delete\"></el-button>\n<el-button type=\"primary\" icon=\"el-icon-search\">Search</el-button>\n<el-button type=\"primary\">Upload<i class=\"el-icon-upload el-icon-right\"></i></el-button>\n```\n:::\n\n### Grupo de botones\n\nMostrar un grupo de botones puede ser usado para mostrar un grupo de operaciones similares.\n\n:::demo Use el tag `<el-button-group>` para agrupar sus botones.\n\n```html\n<el-button-group>\n  <el-button type=\"primary\" icon=\"el-icon-arrow-left\">Previous Page</el-button>\n  <el-button type=\"primary\">Next Page<i class=\"el-icon-arrow-right el-icon-right\"></i></el-button>\n</el-button-group>\n<el-button-group>\n  <el-button type=\"primary\" icon=\"el-icon-edit\"></el-button>\n  <el-button type=\"primary\" icon=\"el-icon-share\"></el-button>\n  <el-button type=\"primary\" icon=\"el-icon-delete\"></el-button>\n</el-button-group>\n```\n:::\n\n### Botón de descarga \n\nCuando se hace clic en un botón para descargar datos, el botón muestra un estado de descarga.\n\n:::demo Ajuste el atributo `loading` a `true` para mostrar el estado de descarga.\n\n```html\n<el-button type=\"primary\" :loading=\"true\">Loading</el-button>\n```\n:::\n\n### Tamaños\n\nAdemás del tamaño por defecto, el componente Button provee tres tamaños adicionales para utilizar en diferentes escenarios.\n\n:::demo Use el atributo `size` para setear tamaños adicionales con `medium`, `small` o `mini`.\n\n```html\n<el-row>\n  <el-button>Default</el-button>\n  <el-button size=\"medium\">Medium</el-button>\n  <el-button size=\"small\">Small</el-button>\n  <el-button size=\"mini\">Mini</el-button>\n</el-row>\n<el-row>\n  <el-button round>Default</el-button>\n  <el-button size=\"medium\" round>Medium</el-button>\n  <el-button size=\"small\" round>Small</el-button>\n  <el-button size=\"mini\" round>Mini</el-button>\n</el-row>\n```\n:::\n\n### Atributos\n| Atributo    | Descripción                                   | Tipo    | Valores aceptados                                  | Por defecto |\n| ----------- | --------------------------------------------- | ------- | -------------------------------------------------- | ----------- |\n| size        | tamaño del botón                              | string  | medium / small / mini                              | —           |\n| type        | tipo de botón                                 | string  | primary / success / warning / danger / info / text | —           |\n| plain       | determinar si es o no un botón plano          | boolean | —                                                  | false       |\n| round       | determinar si es o no un botón redondo        | boolean | —                                                  | false       |\n| circle      | determina si es un botón circular             | boolean | —                                                  | false       |\n| loading     | determinar si es o no un botón de descarga    | boolean | —                                                  | false       |\n| disabled    | deshabilitar el botón                         | boolean | —                                                  | false       |\n| icon        | nombre de la clase del icono                  | string  | —                                                  | —           |\n| autofocus   | misma funcionalidad que la nativa `autofocus` | boolean | —                                                  | false       |\n| native-type | misma funcionalidad que la nativa `type`      | string  | button / submit / reset                            | button      |\n\n"
  },
  {
    "path": "examples/docs/es/calendar.md",
    "content": "## Calendar\n\nMuestra fechas.\n\n### Básico\n\n:::demo Configure el valor para especificar el mes que se muestra actualmente. Si no se especifica el valor, se muestra el mes actual. el valor soporta la vinculación bidireccional.\n```html\n<el-calendar v-model=\"value\">\n</el-calendar>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: new Date()\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Contenido personalizado\n\n:::demo Personalice lo que se muestra en la celda del calendario configurando el `scoped-slot` llamada `dateCell`. En la ranura de alcance se puede obtener la fecha (la fecha de la celda actual), los datos (incluyendo el tipo, isSelected, el atributo day). Para obtener más información, consulte la documentación de la API a continuación.\n\n```html\n<el-calendar>\n  <!-- Use 2.5 slot syntax. If you use Vue 2.6, please use new slot syntax-->\n  <template\n    slot=\"dateCell\"\n    slot-scope=\"{date, data}\">\n    <p :class=\"data.isSelected ? 'is-selected' : ''\">\n      {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}\n    </p>\n  </template>\n</el-calendar>\n<style>\n  .is-selected {\n    color: #1989FA;\n  }\n</style>\n```\n:::\n\n### Rango\n\n:::demo Defina el atributo `range` para especificar el rango de visualización del calendario. El tiempo de inicio debe ser el lunes, el tiempo de finalización debe ser el domingo y el período no puede exceder los dos meses.\n```html\n<el-calendar :range=\"['2019-03-04', '2019-03-24']\">\n</el-calendar>\n```\n:::\n\n### Atributos\n| Atributo        | Descripción        | Tipo      | Valores aceptados     | Por defecto |\n|-----------------|------------------- |---------- |---------------------- |------------ |\n| value / v-model | valor vinculante   | Date/string/number | —            | —           |\n| range           | rango de tiempo, incluyendo el tiempo de inicio y el tiempo final. Start time debe ser el primer dia de la semana, end time debe ser el ultimo día de la semana, el time entre las fechas no puede exceder dos meses | Array     | —           | —      |\n| first-day-of-week | primer día de la semana | Number    | 1 to 7                |  1          |\n\n### dateCell scoped slot\n| Atributo      | Descripción | Tipo   | Valores aceptados | Por defecto |\n|-----------------|-------------- |---------- |---------------------- |--------- |\n| date            | fecha que la celda representa | Date      | —                     | —        |\n| data            | { type, isSelected, day}. `type` indica el mes al que pertenece la fecha, los valores opcionales son mes anterior, mes actual, mes siguiente; `isSelected` indica si la fecha está seleccionada; `day` es la fecha formateada en el formato yyyy-MM-dd | Object      | —           | —      |\n\n"
  },
  {
    "path": "examples/docs/es/card.md",
    "content": "## Card\nMuestra información dentro de un contenedor `card`\n\n### Uso Básico\n\n`Card` incluye titulo, contenido y operaciones.\n\n:::demo Card se compone de cabecera y cuerpo. La cabecera es opcional y la colocación de su  contenido depende de un slot con nombre.\n\n```html\n<el-card class=\"box-card\">\n  <div slot=\"header\" class=\"clearfix\">\n    <span>Card name</span>\n    <el-button style=\"float: right; padding: 3px 0\" type=\"text\">Operation button</el-button>\n  </div>\n  <div v-for=\"o in 4\" :key=\"o\" class=\"text item\">\n    {{'List item ' + o }}\n  </div>\n</el-card>\n\n<style>\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    margin-bottom: 18px;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n    display: table;\n    content: \"\";\n  }\n  .clearfix:after {\n    clear: both\n  }\n\n  .box-card {\n    width: 480px;\n  }\n</style>\n```\n:::\n\n### Card simple\n\nLa parte de la cabecera puede omitirse.\n\n:::demo\n```html\n<el-card class=\"box-card\">\n  <div v-for=\"o in 4\" :key=\"o\" class=\"text item\">\n    {{'List item ' + o }}\n  </div>\n</el-card>\n\n<style>\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    padding: 18px 0;\n  }\n\n  .box-card {\n    width: 480px;\n  }\n</style>\n```\n:::\n\n### Con imágenes\n\nMuestre un contenido más rico añadiendo algunas configuraciones.\n\n:::demo El atributo `body-style` define el estilo CSS del `body` personalizado. Este ejemplo también utiliza  `el-col` para el layout.\n\n```html\n<el-row>\n  <el-col :span=\"8\" v-for=\"(o, index) in 2\" :key=\"o\" :offset=\"index > 0 ? 2 : 0\">\n    <el-card :body-style=\"{ padding: '0px' }\">\n      <img src=\"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png\" class=\"image\">\n      <div style=\"padding: 14px;\">\n        <span>Yummy hamburger</span>\n        <div class=\"bottom clearfix\">\n          <time class=\"time\">{{ currentDate }}</time>\n          <el-button type=\"text\" class=\"button\">Operating</el-button>\n        </div>\n      </div>\n    </el-card>\n  </el-col>\n</el-row>\n\n<style>\n  .time {\n    font-size: 13px;\n    color: #999;\n  }\n  \n  .bottom {\n    margin-top: 13px;\n    line-height: 12px;\n  }\n\n  .button {\n    padding: 0;\n    float: right;\n  }\n\n  .image {\n    width: 100%;\n    display: block;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n      display: table;\n      content: \"\";\n  }\n  \n  .clearfix:after {\n      clear: both\n  }\n</style>\n\n<script>\nexport default {\n  data() {\n    return {\n      currentDate: new Date()\n    };\n  }\n}\n</script>\n```\n:::\n\n### Shadow\n\nPuede definir cuándo mostrar las sombras.\n\n:::demo El atributo de sombra determina cuándo se muestran las sombras. Puede ser `always`, `hover` o `never`.\n\n```html\n<el-row :gutter=\"12\">\n  <el-col :span=\"8\">\n    <el-card shadow=\"always\">\n      Always\n    </el-card>\n  </el-col>\n  <el-col :span=\"8\">\n    <el-card shadow=\"hover\">\n      Hover\n    </el-card>\n  </el-col>\n  <el-col :span=\"8\">\n    <el-card shadow=\"never\">\n      Never\n    </el-card>\n  </el-col>\n</el-row>\n```\n:::\n\n### Atributos\n| Atributo   | Descripción                              | Tipo   | Valores aceptados  | Por defecto         |\n| ---------- | ---------------------------------------- | ------ | -----------------  | ------------------- |\n| header     | Titulo del card. También acepta DOM pasado por `slot#header` | string  | —                 | —                   |\n| body-style | Estilo CSS del cuerpo                    | object | —                  | { padding: '20px' } |\n| shadow     | Cuando mostrar la sombra del Card | string | always / hover / never | always          |\n"
  },
  {
    "path": "examples/docs/es/carousel.md",
    "content": "## Carousel\n\nPresenta una serie de imágenes o textos en un espacio limitado\n\n### Uso básico\n\n:::demo Combine `el-carousel`  con `el-carousel-item`, para conseguir el carrusel. El contenido de cada diapositiva es completamente personalizable, y sólo tiene que colocarla dentro de la etiqueta  `el-carousel-item` . Por defecto, el carrusel cambia cuando el ratón pasa por encima de un indicador. Fije  `trigger`  para  `click`, si lo que se desea es que el carrusel cambie sólo cuando se haga clic en un indicador.\n\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">Switch when indicator is hovered (default)</span>\n    <el-carousel height=\"150px\">\n      <el-carousel-item v-for=\"item in 4\" :key=\"item\">\n        <h3 class=\"small\">{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Switch when indicator is clicked</span>\n    <el-carousel trigger=\"click\" height=\"150px\">\n      <el-carousel-item v-for=\"item in 4\" :key=\"item\">\n        <h3 class=\"small\">{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 150px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n```\n:::\n\n### Indicadores\n\nLos indicadores de paginación pueden mostrarse fuera del carrusel\n\n:::demo El atributo  `indicator-position`  determina dónde se encuentran los indicadores de paginación. Por defecto están dentro del carrusel, y el ajuste de `indicator-position`  a `outside`  los mueve hacia fuera; en cambio `indicator-position`  a `none`  los oculta.\n\n```html\n<template>\n  <el-carousel indicator-position=\"outside\">\n    <el-carousel-item v-for=\"item in 4\" :key=\"item\">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 18px;\n    opacity: 0.75;\n    line-height: 300px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n```\n:::\n\n### Flechas\n\nPuede definir cuando se visualizan las flechas\n\n:::demo El atributo `arrow` determina cuándo se visualizan las flechas. Por defecto aparecen cuando el ratón se desplaza sobre el carrusel. Ajuste `arrow` a `always` o `never` para mostrar u ocultar las flechas permanentemente.\n\n```html\n<template>\n  <el-carousel :interval=\"5000\" arrow=\"always\">\n    <el-carousel-item v-for=\"item in 4\" :key=\"item\">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 18px;\n    opacity: 0.75;\n    line-height: 300px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n```\n:::\n\n### Modo Card\n\nCuando una página es suficientemente ancha pero tiene una altura limitada, puede activar el modo `card` para carrusel.\n\n:::demo Ajuste `type` a `card` para activar el modo tarjeta. Aparte de la apariencia, la mayor diferencia entre el modo tarjeta y el modo común es que al hacer clic en las diapositivas de ambos lados, el carrusel cambia directamente en modo tarjeta.\n\n```html\n<template>\n  <el-carousel :interval=\"4000\" type=\"card\" height=\"200px\">\n    <el-carousel-item v-for=\"item in 6\" :key=\"item\">\n      <h3 class=\"medium\">{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 200px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n```\n:::\n\nPor defecto, `direction` es `horizontal`. El carousel puede ser mostrado de forma vertical cambiando `direction` a `vertical`.\n\n:::demo\n```html\n<template>\n  <el-carousel height=\"200px\" direction=\"vertical\" :autoplay=\"false\">\n    <el-carousel-item v-for=\"item in 4\" :key=\"item\">\n      <h3 class=\"medium\">{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 200px;\n    margin: 0;\n  }\n  \n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n  \n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n```\n:::\n\n### Atributos de Carousel\n| Atributo           | Descripción                                        | Tipo    | Valores aceptados   | Por defecto |\n| ------------------ | -------------------------------------------------- | ------- | ------------------- | ----------- |\n| height             | Alto del carrusel                                  | string  | —                   | —           |\n| initial-index      | Indice del slider inicial activo (empieza desde 0) | number  | —                   | 0           |\n| trigger            | Evento que muestra los indicadores                 | string  | hover/click         | hover       |\n| autoplay           | Si se enlazan automáticamente las diapositivas     | boolean | —                   | true        |\n| interval           | Intervalo del auto loop, en mili segundos          | number  | —                   | 3000        |\n| indicator-position | Posición del indicador de paginación               | string  | outside/none        | —           |\n| arrow              | Cuando se muestran las flechas                     | string  | always/hover/never  | hover       |\n| type               | Tipo de carrusel                                   | string  | card                | —           |\n| loop               | Si se muestra cíclicamente                         | boolean | —                   | true        |\n| direction          | dirección en la que se muestra el contenido        | string  | horizontal/vertical | horizontal  |\n\n### Eventos de Carousel\n| Nombre evento | Descripción                               | Parámetros                                                   |\n| ------------- | ----------------------------------------- | ------------------------------------------------------------ |\n| change        | Se dispara cuando el slider activo cambia | Indice del nuevo slider activo, indice del anterior slider activo. |\n\n### Metodos de Carousel\n| Metodos       | Descripción                | Parámetros                                                   |\n| ------------- | -------------------------- | ------------------------------------------------------------ |\n| setActiveItem | Cambio manual de slider    | indice del slider al que se va a cambiar, empezando por 0; o el `name` del `el-carousel-item` correspondiente |\n| prev          | Cambia al slider anterior  | —                                                            |\n| next          | Cambia al slider siguiente | —                                                            |\n\n### Atributos de Carousel-Item\n| Atributo | Descripción                                                  | Tipo   | Valores aceptados | Por defecto |\n| -------- | ------------------------------------------------------------ | ------ | ----------------- | ----------- |\n| name     | Nombre del ítem que puede ser usado en `setActiveItem`       | string | —                 | —           |\n| label    | Texto que se mostrara en el indicador de paginación correspondiente | string | —                 | —           |\n\n"
  },
  {
    "path": "examples/docs/es/cascader.md",
    "content": "## Cascader\n\nSi las opciones tienen una estructura jerárquica clara, se puede utilizar Cascader para verlas y seleccionarlas.\n\n### Uso básico\n\nHay dos maneras de ampliar los elementos de opción hijos.\n\n:::demo Asignar el atributo `options` a un array de opciones genera un Cascader. El atributo `props.expandTrigger` define cómo se expanden las opciones hijo.\n```html\n<div class=\"block\">\n  <span class=\"demonstration\">Child options expand when clicked (default)</span>\n  <el-cascader\n    v-model=\"value\"\n    :options=\"options\"\n    @change=\"handleChange\"></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Child options expand when hovered</span>\n  <el-cascader\n    v-model=\"value\"\n    :options=\"options\"\n    :props=\"{ expandTrigger: 'hover' }\"\n    @change=\"handleChange\"></el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: [],\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Opción Disabled\n\nDeshabilite una opción estableciendo el campo  `disabled` en las opciones del objeto.\n\n:::demo En este ejemplo, el primer ítem en el array `options` tiene un campo `disabled: true`, por lo que está deshabilitado. De forma predeterminada, Cascader comprueba el campo `disabled` en cada objeto de las opciones; si está utilizando otro nombre de campo para indicar si una opción está deshabilitada, puede asignarla en el atributo `props.disabled` (consulte la tabla de la API a continuación para obtener más detalles). Y por supuesto, el nombre de campo `value`, `label` y `children` también se pueden personalizar de la misma manera.\n\n```html\n<el-cascader :options=\"options\"></el-cascader>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          disabled: true,\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Limpiable\n\nEstablezca el atributo `clearable` para `el-cascader` y aparecerá un icono de borrado cuando se seleccione y se pase el ratón por encima.\n\n:::demo\n```html\n<el-cascader :options=\"options\" clearable></el-cascader>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Visualizar sólo el último nivel\n\nLa entrada puede mostrar sólo el último nivel en lugar de todos los niveles.\n\n:::demo El atributo `show-all-levels` define si se muestran todos los niveles. Si es `false`, sólo se muestra el último nivel.\n```html\n<el-cascader :options=\"options\" :show-all-levels=\"false\"></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Selección múltiple\n\nEstablezca `props.multiple = true` para usar la selección múltiple.\n\n:::demo Cuando se utiliza la selección múltiple, todas las etiquetas seleccionadas se mostrarán de forma predeterminada, usted puede establecer `collapse-tags = true` para plegar las etiquetas seleccionadas.\n```html\n<div class=\"block\">\n  <span class=\"demonstration\">Display all tags (default)</span>\n  <el-cascader\n    :options=\"options\"\n    :props=\"props\"\n    clearable></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Collapse tags</span>\n  <el-cascader\n    :options=\"options\"\n    :props=\"props\"\n    collapse-tags\n    clearable></el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        props: { multiple: true },\n        options: [{\n          value: 1,\n          label: 'Asia',\n          children: [{\n            value: 2,\n            label: 'China',\n            children: [\n              { value: 3, label: 'Beijing' },\n              { value: 4, label: 'Shanghai' },\n              { value: 5, label: 'Hangzhou' }\n            ]\n          }, {\n            value: 6,\n            label: 'Japan',\n            children: [\n              { value: 7, label: 'Tokyo' },\n              { value: 8, label: 'Osaka' },\n              { value: 9, label: 'Kyoto' }\n            ]\n          }, {\n            value: 10,\n            label: 'Korea',\n            children: [\n              { value: 11, label: 'Seoul' },\n              { value: 12, label: 'Busan' },\n              { value: 13, label: 'Taegu' }\n            ]\n          }]\n        }, {\n          value: 14,\n          label: 'Europe',\n          children: [{\n            value: 15,\n            label: 'France',\n            children: [\n              { value: 16, label: 'Paris' },\n              { value: 17, label: 'Marseille' },\n              { value: 18, label: 'Lyon' }\n            ]\n          }, {\n            value: 19,\n            label: 'UK',\n            children: [\n              { value: 20, label: 'London' },\n              { value: 21, label: 'Birmingham' },\n              { value: 22, label: 'Manchester' }\n            ]\n          }]\n        }, {\n          value: 23,\n          label: 'North America',\n          children: [{\n            value: 24,\n            label: 'US',\n            children: [\n              { value: 25, label: 'New York' },\n              { value: 26, label: 'Los Angeles' },\n              { value: 27, label: 'Washington' }\n            ]\n          }, {\n            value: 28,\n            label: 'Canada',\n            children: [\n              { value: 29, label: 'Toronto' },\n              { value: 30, label: 'Montreal' },\n              { value: 31, label: 'Ottawa' }\n            ]\n          }]\n        }]\n      };\n    }\n  };\n</script>\n```\n:::\n\n\n### Seleccione cualquier nivel de opciones\n\nEn la selección única, sólo se pueden comprobar los nodos de la hoja, y en la selección múltiple, los nodos padres de la comprobación conducirán a que los nodos de la hoja se comprueben con el tiempo. Cuando se activa esta función, puede hacer que los nodos padre e hijo se desacoplen y usted puede seleccionar cualquier nivel de opciones.\n\n:::demo Establezca `props.checkStrictly = true` para que el estado comprobado de un nodo no afecte a sus nodos padre y nodos hijos, y entonces podrá seleccionar cualquier nivel de opciones.\n```html\n<div class=\"block\">\n  <span class=\"demonstration\">Select any level of options (Single selection)</span>\n  <el-cascader\n    :options=\"options\"\n    :props=\"{ checkStrictly: true }\"\n    clearable></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Select any level of options (Multiple selection)</span>\n  <el-cascader\n    :options=\"options\"\n    :props=\"{ multiple: true, checkStrictly: true }\"\n    clearable></el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Carga dinámica\n\nCarga dinámica de sus nodos hijos cuando se selecciona un nodo.\n\n:::demo Establezca `lazy = true` para utilizar la carga dinámica, y deberá especificar cómo cargar la fuente de datos mediante `lazyload`. Hay dos parámetros de `lazyload`, el primer parámetro `node` es el nodo en el que se hace clic actualmente, y el `resolve` es una llamada de retorno que indica que la carga ha terminado y que debe invocarse. Para mostrar el estado del nodo con mayor precisión, puede añadir un campo `leaf` (puede ser modificado por `props.leaf`) para indicar si se trata de un nodo de hoja. De lo contrario, se deducirá verificando si tiene algún nodo hijo.\n\n```html\n<el-cascader :props=\"props\"></el-cascader>\n\n<script>\n  let id = 0;\n\n  export default {\n    data() {\n      return {\n        props: {\n          lazy: true,\n          lazyLoad (node, resolve) {\n            const { level } = node;\n            setTimeout(() => {\n              const nodes = Array.from({ length: level + 1 })\n                .map(item => ({\n                  value: ++id,\n                  label: `Option - ${id}`,\n                  leaf: level >= 2\n                }));\n              // Invoke `resolve` callback to return the child nodes data and indicate the loading is finished.\n              resolve(nodes);\n            }, 1000);\n          }\n        }\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Filtrable\n\nBuscar y seleccionar opciones con una palabra clave.\n\n:::demo Añadir `filtrable` a `el-cascader` permite el filtrado. Cascader hará coincidir los nodos cuya etiqueta o etiqueta de padre (de acuerdo con `show-all-levels`) incluya una palabra clave de entrada. Por supuesto, puedes personalizar la lógica de búsqueda mediante el `filter-method` que acepta una función, el primer parámetro es `nodo`, el segundo es `keyword`, y necesitas devolver un valor booleano que indique si da en el blanco.\n\n```html\n<div class=\"block\">\n  <span class=\"demonstration\">Filterable (Single selection)</span>\n  <el-cascader\n    placeholder=\"Try searchingL Guide\"\n    :options=\"options\"\n    filterable></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Filterable (Multiple selection)</span>\n  <el-cascader\n    placeholder=\"Try searchingL Guide\"\n    :options=\"options\"\n    :props=\"{ multiple: true }\"\n    filterable></el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Contenido de opciones personalizadas\n\nPuede personalizar el contenido del nodo de cascada.\n\n:::demo Puede personalizar el contenido del nodo del cascader mediante `scoped slot`. Tendrá acceso a `node` y `data` en el ámbito de aplicación, representando el objeto Node y los datos del nodo actual respectivamente.\n```html\n<el-cascader :options=\"options\">\n  <template slot-scope=\"{ node, data }\">\n    <span>{{ data.label }}</span>\n    <span v-if=\"!node.isLeaf\"> ({{ data.children.length }}) </span>\n  </template>\n</el-cascader>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Panel cascader\n\n`CascaderPanel` es el componente central de `Cascader` que tiene varias características como selección única, selección múltiple, carga dinámica, etc.\n\n:::demo Al igual que `el-cascader`, puede establecer opciones alternativas mediante `options`, y habilitar otras características mediante `props`, consulte el formulario de la API a continuación para obtener más detalles.\n```html\n<el-cascader-panel :options=\"options\"></el-cascader-panel>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Atributos de Cascader\n| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |\n|---------- |-------- |---------- |-------------  |-------- |\n| value / v-model | valor ligado | - | — | — |\n| options | datos de las opciones，las claves `value` y `label` pueden ser personalizadas por `Props`. | array | — | — |\n| props | opciones de configuración, consulte la siguiente tabla. | object | — | — |\n| size | tamaño del input | string | medium / small / mini | — |\n| placeholder | placeholder del input | string | — | Select |\n| disabled | si Cascader esta deshabilitada | boolean | — | false |\n| clearable | si el valor seleccionado puede ser borrado | boolean | — | false |\n| show-all-levels | si muestra todos los niveles del valor seleccionado en el input | boolean | — | true |\n| collapse-tags | si se colapsan los tags en la selección múltiple | boolean | - | false |\n| separator | separador de las etiquetas de las opciones | string | — | ' / ' |\n| filterable | si las opciones pueden ser usadas para la búsqueda | boolean | — | — |\n| filter-method | lógica de búsqueda personalizable. El primer parámetro es `node`, el segundo es `keyword`, y es necesario devolver un valor boolean que indique si se ha tenido éxito. | function(node, keyword) | - | - |\n| debounce | retraso en mili segundos para el tipeo de los datos de filtro | number | — | 300 |\n| before-filter | hook antes de filtrar con el valor a filtrar como parámetro. Si se devuelve `false` o se devuelve una `Promise` y luego se rechaza, se abortará el filtrado. | function(value) | — | — |\n| popper-class | nombre de clase personalizado para el menú desplegable de Cascader | string | —  | — |\n\n### Eventos de Cascader\n| Nombre | Descripción | Parámetros |\n|---------- |-------- |---------- |\n| change | se desencadena cuando cambia el valor ligado. | valor |\n| expand-change | se desencadena cuando las opciones expandidas cambian | un array de los nodos padres del nodo en expansión |\n| blur | se desencadena cuando Cascader se desenfoca | (event: Event) |\n| focus | se activa cuando Cascader se enfoca | (event: Event) |\n| visible-change | se activa cuando aparece/desaparece el menú desplegable | verdadero cuando aparece, y falso de otra manera |\n| remove-tag | se activa cuando se quita la etiqueta en modo de selección múltiple | el valor de la etiqueta que se quita |\n\n### Cascader Métodos\n| Método | Descripción | Parámetros |\n| ---- | ---- | ---- |\n| getCheckedNodes | Obtiene el array de los nodos seleccionados actualmente | (leafOnly) Si solo devuelve los nodos chequeados, por defecto es `false` |\n\n### Slots de Cascader\n| Nombre | Descripción |\n|---------|-------------|\n| - | el contenido personalizado del nodo cascader, el parámetro es { node, data }, que son el actual objeto Node y los datos del nodo respectivamente. |\n| empty  | cuando no hay opciones coincidentes. |\n\n### Atributos del CascaderPanel\n| Atributos | Descripción | Tipo | Valores aceptados | Por defecto |\n|---------- |-------- |---------- |-------------  |-------- |\n| value / v-model | valor ligado | - | — | — |\n| options | datos de las opciones，las claves `value` y `label` pueden ser personalizadas por `Props`. | array | — | — |\n| props | opciones de configuración, consulte la siguiente tabla. | object | — | — |\n\n### Eventos de CascaderPanel\n| Evento | Descripción | Parámetros |\n|---------- |-------- |---------- |\n| change | se desencadena cuando cambia el valor ligado.         | valor |\n| expand-change | se desencadena cuando las opciones expandidas cambian | un array de los nodos padres del nodo en expansión |\n\n### CascaderPanel Métodos\n| Método | Descripción | Parámetros |\n| ---- | ---- | ---- |\n| getCheckedNodes | Obtiene el array de los nodos seleccionados actualmente | (leafOnly) Si solo devuelve los nodos chequeados, por defecto es `false` |\n| clearCheckedNodes | Limpia de nodos chequeados | - |\n\n### Slots de CascaderPanel\n| Nombre | Descripción |\n|---------|-------------|\n| - | el contenido personalizado del nodo cascader, el parámetro es { node, data }, que son el actual objeto Node y los datos del nodo respectivamente. |\n\n### Props\n| Atributos | Descripción | Tipo | Valores aceptados | Por defecto |\n| -------- | ----------------- | ------ | ------ | ------ |\n| expandTrigger | modo de disparo de las opciones de ampliación | string | click / hover | 'click' |\n| multiple | si la selección múltiple esta activada | boolean | - | false |\n| checkStrictly | si el estado verificado de un nodo no afecta a sus nodos padre e hijo | boolean | - | false |\n| emitPath | cuando los nodos marcados cambian, si emitir o no un array de la ruta de un nodo, si es falso, sólo emite el valor del nodo. | boolean | - | true |\n| lazy | si se deben cargar dinámicamente nodos hijo, usarlo con el atributo `lazyload`. | boolean | - | false |\n| lazyLoad | para cargar datos de nodos hijo, sólo funciona cuando `lazy` es verdadero | function(node, resolve) | - | - |\n| value    | especificar qué clave de objeto de nodo se utiliza como valor del nodo | string | — | 'value' |\n| label    | especificar qué clave de objeto de nodo se utiliza como etiqueta del nodo | string | — | 'label' |\n| children | especificar qué clave de objeto de nodo se utiliza como hijo del nodo | string | — | 'children' |\n| disabled | especificar qué clave de objeto de nodo se utiliza como nodo desactivado | string | — | 'disabled' |\n| leaf     | especificar qué clave de objeto de nodo se utiliza como campo de hoja del nodo | string | — | 'leaf' |\n"
  },
  {
    "path": "examples/docs/es/checkbox.md",
    "content": "## Checkbox\n\nUn grupo de opciones para manejar múltiples elecciones.\n\n### Uso básico\n\nCheckbox puede ser usado para alternar entre dos estados.\n\n:::demo Define `v-model`(enlaza la variable) en `el-checkbox`. El valor por defecto es un `Boolean` para un `checkbox`, y se convierte en `true` cuando este es seleccionado. El contenido dentro del tag `el-checkbox` se convierte en la descripción al costado del botón del checkbox. \n\n```html\n<template>\n  <!-- `checked` debe ser true o false -->\n  <el-checkbox v-model=\"checked\">Opción</el-checkbox>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        checked: true\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Estado Deshabilitado\n\nEstado deshabilitado para el checkbox.\n\n:::demo Setear el atributo `disabled`.\n\n```html\n<template>\n  <el-checkbox v-model=\"checked1\" disabled>Opción</el-checkbox>\n  <el-checkbox v-model=\"checked2\" disabled>Opción</el-checkbox>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        checked1: false,\n        checked2: true\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Grupo de Checkboxes\n\nEs usado por múltiples checkboxes los cuales están enlazados a un grupo, indica si una opción está seleccionada verificando si esta está marcada.\n\n:::demo El elemento `checkbox-group` puede manejar múltiples checkboxes en un grupo usando `v-model` el cuál está enlazado a un `Array`. Dentro del elemento `el-checkbox`, `label` es el valor del checkbox. Si en ese tag no hay contenido anidado, `label` va a ser mostrado como la descripción al lado del botón del checkbox. `label` también se corresponde con los valores del array. Es seleccionado si el valor especificado existe en el array y viceversa.\n\n```html\n<template>\n  <el-checkbox-group v-model=\"checkList\">\n    <el-checkbox label=\"Opción A\"></el-checkbox>\n    <el-checkbox label=\"Opción B\"></el-checkbox>\n    <el-checkbox label=\"Opción C\"></el-checkbox>\n    <el-checkbox label=\"disabled\" disabled></el-checkbox>\n    <el-checkbox label=\"Seleccionado y deshabilitado\" disabled></el-checkbox>\n  </el-checkbox-group>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        checkList: ['Seleccionado y deshabilitado','Opción A']\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Indeterminado\n\nLa propiedad `indeterminate` puede ser usada para generar el efecto de marcar todos (check all).\n\n:::demo\n\n```html\n<template>\n  <el-checkbox :indeterminate=\"isIndeterminate\" v-model=\"checkAll\" @change=\"handleCheckAllChange\">Marcar todos</el-checkbox>\n  <div style=\"margin: 15px 0;\"></div>\n  <el-checkbox-group v-model=\"checkedCities\" @change=\"handleCheckedCitiesChange\">\n    <el-checkbox v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n<script>\n  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n  export default {\n    data() {\n      return {\n        checkAll: false,\n        checkedCities: ['Shanghai', 'Beijing'],\n        cities: cityOptions,\n        isIndeterminate: true\n      };\n    },\n    methods: {\n      handleCheckAllChange(val) {\n        this.checkedCities = val ? cityOptions : [];\n        this.isIndeterminate = false;\n      },\n      handleCheckedCitiesChange(value) {\n        let checkedCount = value.length;\n        this.checkAll = checkedCount === this.cities.length;\n        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Cantidad Mínima / Máxima de elementos seleccionados\n\nLas propiedades `min` y `max` pueden limitar la cantidad de elementos seleccionados.\n\n:::demo\n\n```html\n<template>\n  <el-checkbox-group \n    v-model=\"checkedCities\"\n    :min=\"1\"\n    :max=\"2\">\n    <el-checkbox v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n<script>\n  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n  export default {\n    data() {\n      return {\n        checkedCities: ['Shanghai', 'Beijing'],\n        cities: cityOptions\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Estilo tipo Botón\n\nCheckbox con estilo tipo Botón.\n\n:::demo Sólo debe cambiar el elemento `el-checkbox` por el elemento `el-checkbox-button`. También proveemos el atributo `size`.\n```html\n<template>\n  <div>\n    <el-checkbox-group v-model=\"checkboxGroup1\">\n      <el-checkbox-button v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-checkbox-group v-model=\"checkboxGroup2\" size=\"medium\">\n      <el-checkbox-button v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-checkbox-group v-model=\"checkboxGroup3\" size=\"small\">\n      <el-checkbox-button v-for=\"city in cities\" :label=\"city\" :disabled=\"city === 'Beijing'\" :key=\"city\">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-checkbox-group v-model=\"checkboxGroup4\" size=\"mini\" disabled>\n      <el-checkbox-button v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n</template>\n<script>\n  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n\n  export default {\n    data () {\n      return {\n        checkboxGroup1: ['Shanghai'],\n        checkboxGroup2: ['Shanghai'],\n        checkboxGroup3: ['Shanghai'],\n        checkboxGroup4: ['Shanghai'],\n        cities: cityOptions\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Con bordes\n\n:::demo El atributo `border` agrega un borde a los Checkboxes.\n```html\n<template>\n  <div>\n    <el-checkbox v-model=\"checked1\" label=\"Opción1\" border></el-checkbox>\n    <el-checkbox v-model=\"checked2\" label=\"Opción2\" border></el-checkbox>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-checkbox v-model=\"checked3\" label=\"Opción1\" border size=\"medium\"></el-checkbox>\n    <el-checkbox v-model=\"checked4\" label=\"Opción2\" border size=\"medium\"></el-checkbox>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-checkbox-group v-model=\"checkboxGroup1\" size=\"small\">\n      <el-checkbox label=\"Opción1\" border></el-checkbox>\n      <el-checkbox label=\"Opción2\" border disabled></el-checkbox>\n    </el-checkbox-group>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-checkbox-group v-model=\"checkboxGroup2\" size=\"mini\" disabled>\n      <el-checkbox label=\"Opción1\" border></el-checkbox>\n      <el-checkbox label=\"Opción2\" border></el-checkbox>\n    </el-checkbox-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        checked1: true,\n        checked2: false,\n        checked3: false,\n        checked4: true,\n        checkboxGroup1: [],\n        checkboxGroup2: []\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Atributos de Checkbox\n| Atributo      | Descripción                              | Tipo                      | Valores aceptados     | Por defecto |\n| ------------- | ---------------------------------------- | ------------------------- | --------------------- | ----------- |\n| value / v-model | valor enlazado | string / number / boolean | — | — |\n| label         | valor del Checkbox si es usado dentro de un tag `checkbox-group` | string / number / boolean | —                     | —           |\n| true-label    | valor del Checkbox si está marcado       | string / number           | —                     | —           |\n| false-label   | valor del Checkbox si no está marcado    | string / number           | —                     | —           |\n| disabled      | especifica si el Checkbox está deshabilitado | boolean                   | —                     | false       |\n| border        | especifica si agrega un borde alrededor del Checkbox | boolean                   | —                     | false       |\n| size          | tamaño del Checkbox, sólo funciona si `border` es true | string                    | medium / small / mini | —           |\n| name          | atributo `name` nativo                 | string                    | —                     | —           |\n| checked       | especifica si el Checkbox está marcado   | boolean                   | —                     | false       |\n| indeterminate | similar a `indeterminate` en el checkbox nativo | boolean                   | —                     | false       |\n\n### Eventos de Checkbox\n| Nombre | Descripción                                | Parámetros           |\n| ------ | ------------------------------------------ | -------------------- |\n| change | se ejecuta cuando el valor enlazado cambia | el valor actualizado |\n\n### Atributos de Checkbox-group\n| Atributo   | Descripción                              | Tipo    | Valores aceptados     | Por Defecto |\n| ---------- | ---------------------------------------- | ------- | --------------------- | ----------- |\n| value / v-model | valor enlazado | array | — | — |\n| size       | tamaño de los checkboxes de tipo botón o los checkboxes con border | string  | medium / small / mini | —           |\n| disabled   | especifica si los checkboxes anidados están deshabilitados | boolean | —                     | false       |\n| min        | cantidad mínima de checkboxes que deben ser marcados | number  | —                     | —           |\n| max        | cantidad máxima de checkboxes que pueden ser marcados | number  | —                     | —           |\n| text-color | color de fuente cuando el botón está activo | string  | —                     | #ffffff     |\n| fill       | color de border y de fondo cuando el botón está activo | string  | —                     | #409EFF     |\n\n### Eventos de Checkbox-group\n| Nombre de Evento | Descripción                                | Parámetros           |\n| ---------------- | ------------------------------------------ | -------------------- |\n| change           | se ejecuta cuando el valor enlazado cambia | el valor actualizado |\n\n### Atributos de Checkbox-button\n| Atributo    | Descripción                              | Tipo                      | Valores aceptados | Por defecto |\n| ----------- | ---------------------------------------- | ------------------------- | ----------------- | ----------- |\n| label       | valor del checkbox cuando es usado dentro de un `checkbox-group` | string / number / boolean | —                 | —           |\n| true-label  | valor del checkbox si este está marcado  | string / number           | —                 | —           |\n| false-label | valor del checkbox si este no está marcado | string / number           | —                 | —           |\n| disabled    | especifica si el checkbox está deshabilitado | boolean                   | —                 | false       |\n| name        | atributo 'name' del checbox nativo       | string                    | —                 | —           |\n| checked     | si el checkbox está marcado              | boolean                   | —                 | false       |\n"
  },
  {
    "path": "examples/docs/es/collapse.md",
    "content": "## Collapse\n\nUse Collapse para almacenar contenidos.\n\n### Uso básico\n\nPuede expandir varios paneles\n\n:::demo\n```html\n<el-collapse v-model=\"activeNames\" @change=\"handleChange\">\n  <el-collapse-item title=\"Consistency\" name=\"1\">\n    <div>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;</div>\n    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title=\"Feedback\" name=\"2\">\n    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n  </el-collapse-item>\n  <el-collapse-item title=\"Efficiency\" name=\"3\">\n    <div>Simplify the process: keep operating process simple and intuitive;</div>\n    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n  </el-collapse-item>\n  <el-collapse-item title=\"Controllability\" name=\"4\">\n    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n  </el-collapse-item>\n</el-collapse>\n<script>\n  export default {\n    data() {\n      return {\n        activeNames: ['1']\n      };\n    },\n    methods: {\n      handleChange(val) {\n        console.log(val);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Acordeón\n\nEn modo acordeón sólo un panel puede ser expandido a la vez\n\n:::demo Activa el modo acordeón usado el atributo `accordion`.\n```html\n<el-collapse v-model=\"activeName\" accordion>\n  <el-collapse-item title=\"Consistency\" name=\"1\">\n    <div>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;</div>\n    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title=\"Feedback\" name=\"2\">\n    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n  </el-collapse-item>\n  <el-collapse-item title=\"Efficiency\" name=\"3\">\n    <div>Simplify the process: keep operating process simple and intuitive;</div>\n    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n  </el-collapse-item>\n  <el-collapse-item title=\"Controllability\" name=\"4\">\n    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n  </el-collapse-item>\n</el-collapse>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: '1'\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Título personalizado\n\nAdemás de usar el atributo `title`, se puede personalizar el título del panel con slots con nombre, esto hace posible agregar contenido personalizado, por ejemplo: iconos.\n\n:::demo\n```html\n<el-collapse accordion>\n  <el-collapse-item name=\"1\">\n    <template slot=\"title\">\n      Consistency<i class=\"header-icon el-icon-information\"></i>\n    </template>\n    <div>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;</div>\n    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title=\"Feedback\" name=\"2\">\n    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>\n    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>\n  </el-collapse-item>\n  <el-collapse-item title=\"Efficiency\" name=\"3\">\n    <div>Simplify the process: keep operating process simple and intuitive;</div>\n    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>\n    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>\n  </el-collapse-item>\n  <el-collapse-item title=\"Controllability\" name=\"4\">\n    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>\n    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>\n  </el-collapse-item>\n</el-collapse>\n```\n:::\n\n### Atributos de Collapse\n| Atributo  | Descripción                           | Tipo                                     | Valores aceptados | Por defecto |\n| --------- | ------------------------------------- | ---------------------------------------- | ----------------- | ----------- |\n| value / v-model     | panel activo                          | string (modo acordeón) / array (No modo acordeón) | —                 | —           |\n| accordion | especifica si activa el modo acordeón | boolean                                  | —                 | false       |\n\n### Eventos de Collapse\n| Nombre de Evento | Descripción                                   | Parámetros                                                   |\n| ---------------- | --------------------------------------------- | ------------------------------------------------------------ |\n| change           | se dispara cuando los paneles activos cambian | (activeNames: array (No modo acordeón) / string (modo acordeón)) |\n\n\n### Atributos de Collapse Item\n| Atributo | Descripción                   | Tipo          | Valores aceptados | Por defecto |\n| -------- | ----------------------------- | ------------- | ----------------- | ----------- |\n| name     | identificador único del panel | string/number | —                 | —           |\n| title    | título del panel              | string        | —                 | —           |\n| disabled | deshabilita el collapse ítem  | boolean       | —                 | —           |\n\n"
  },
  {
    "path": "examples/docs/es/color-picker.md",
    "content": "## ColorPicker\n\nColorPicker es un selector de color que soporta varios formatos de color.\n\n### Uso básico\n\n:::demo ColorPicker requiere una variable de tipo `string` para ser enlazada a `v-model`.\n```html\n<div class=\"block\">\n  <span class=\"demonstration\">Especifica valor por defecto</span>\n  <el-color-picker v-model=\"color1\"></el-color-picker>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">No especifica valor por defecto</span>\n  <el-color-picker v-model=\"color2\"></el-color-picker>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        color1: '#409EFF',\n        color2: null\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Alpha\n\n:::demo ColorPicker soporta selección de canales alpha. Para activarlo sólo agregue el atributo `show-alpha`.\n```html\n<el-color-picker v-model=\"color\" show-alpha></el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color: 'rgba(19, 206, 102, 0.8)'\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Colores predefinidos\n\n:::demo ColorPicker soporta opciones de color predefinidas\n```html\n<el-color-picker\n  v-model=\"color\"\n  show-alpha\n  :predefine=\"predefineColors\">\n</el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color: 'rgba(255, 69, 0, 0.68)',\n        predefineColors: [\n          '#ff4500',\n          '#ff8c00',\n          '#ffd700',\n          '#90ee90',\n          '#00ced1',\n          '#1e90ff',\n          '#c71585',\n          'rgba(255, 69, 0, 0.68)',\n          'rgb(255, 120, 0)',\n          'hsv(51, 100, 98)',\n          'hsva(120, 40, 94, 0.5)',\n          'hsl(181, 100%, 37%)',\n          'hsla(209, 100%, 56%, 0.73)',\n          '#c7158577'\n        ]\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Sizes\n\n:::demo\n```html\n<el-color-picker v-model=\"color\"></el-color-picker>\n<el-color-picker v-model=\"color\" size=\"medium\"></el-color-picker>\n<el-color-picker v-model=\"color\" size=\"small\"></el-color-picker>\n<el-color-picker v-model=\"color\" size=\"mini\"></el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color: '#409EFF'\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Atributos\n| Atributo       | Descripción                              | Tipo    | Valores aceptados     | Por defecto                              |\n| -------------- | ---------------------------------------- | ------- | --------------------- | ---------------------------------------- |\n| value / v-model | valor enlazado                           | string  | —                     | —                                        |\n| disabled       | especifica si se deshabilita el ColorPicker | boolean | —                     | false                                    |\n| size           | tamaño del ColorPicker                   | string  | —                     | medium / small / mini                    |\n| show-alpha     | especifica si se muestra el control deslizante para el valor alpha | boolean | —                     | false                                    |\n| color-format   | formato de color del `v-model`           | string  | hsl / hsv / hex / rgb | hex (si show-alpha es false)/ rgb (si show-alpha es true) |\n| popper-class   | nombre de clase para el dropdown del ColorPicker | string  | —                     | —                                        |\n| predefine      | opciones de colores predefinidas | array | — | — |\n\n### Eventos\n| Nombre de Evento | Descripción                                     | Parámetros             |\n| ---------------- | ----------------------------------------------- | ---------------------- |\n| change           | se dispara cuando el valor del input cambia     | valor del color        |\n| active-change    | se dispara cuando el actual color activo cambia | valor del color activo |\n\n"
  },
  {
    "path": "examples/docs/es/color.md",
    "content": "<script>\n  import bus from '../../bus';\n  import { tintColor } from '../../color.js';\n  import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';\n  const varMap = {\n    'primary': '$--color-primary',\n    'success': '$--color-success',\n    'warning': '$--color-warning',\n    'danger': '$--color-danger',\n    'info': '$--color-info',\n    'white': '$--color-white',\n    'black': '$--color-black',\n    'textPrimary': '$--color-text-primary',\n    'textRegular': '$--color-text-regular',\n    'textSecondary': '$--color-text-secondary',\n    'textPlaceholder': '$--color-text-placeholder',\n    'borderBase': '$--border-color-base',\n    'borderLight': '$--border-color-light',\n    'borderLighter': '$--border-color-lighter',\n    'borderExtraLight': '$--border-color-extra-light'\n  };\n  const original = {\n    primary: '#409EFF',\n    success: '#67C23A',\n    warning: '#E6A23C',\n    danger: '#F56C6C',\n    info: '#909399',\n    white: '#FFFFFF',\n    black: '#000000',\n    textPrimary: '#303133',\n    textRegular: '#606266',\n    textSecondary: '#909399',\n    textPlaceholder: '#C0C4CC',\n    borderBase: '#DCDFE6',\n    borderLight: '#E4E7ED',\n    borderLighter: '#EBEEF5',\n    borderExtraLight: '#F2F6FC'\n  }\n  export default {\n    created() {\n      bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);\n    },\n    mounted() {\n      this.setGlobal();\n    },\n    methods: {\n      tintColor(color, tint) {\n        return tintColor(color, tint);\n      },\n      setGlobal() {\n        if (window.userThemeConfig) {\n          this.global = window.userThemeConfig.global;\n        }\n      }\n    },\n    data() {\n      return {\n        global: {},\n        primary: '',\n        success: '',\n        warning: '',\n        danger: '',\n        info: '',\n        white: '',\n        black: '',\n        textPrimary: '',\n        textRegular: '',\n        textSecondary: '',\n        textPlaceholder: '',\n        borderBase: '',\n        borderLight: '',\n        borderLighter: '',\n        borderExtraLight: ''\n      }\n    },\n    watch: {\n      global: {\n        immediate: true,\n        handler(value) {\n          Object.keys(original).forEach((o) => {\n            if (value[varMap[o]]) {\n              this[o] = value[varMap[o]]\n            } else {\n              this[o] = original[o]\n            }\n          });\n        }\n      }\n    },\n  }\n</script>\n\n## Color\nElement utiliza un conjunto de paletas para especificar colores, y así, proporcionar una apariencia y sensación coherente para los productos que construye.\n\n### Color principal\n\nEl color principal de Element es el azul brillante y amigable.\n\n<el-row :gutter=\"12\">\n  <el-col :span=\"10\" :xs=\"{span: 12}\">\n    <div \n      class=\"demo-color-box\"\n      :style=\"{ background: primary }\"\n    >\n      Brand Color<div class=\"value\">#409EFF</div>\n    <div \n      class=\"bg-color-sub\"\n      :style=\"{ background: tintColor(primary, 0.9) }\"\n    >\n    <div \n      class=\"bg-blue-sub-item\" \n      v-for=\"(item, key) in Array(8)\"\n      :key=\"key\"\n      :style=\"{ background: tintColor(primary, (key + 1) / 10) }\"\n        >\n    </div>\n    </div>\n    </div>\n  </el-col>\n</el-row>\n\n### Color secundario\n\nAdemás del color principal, se necesitan utilizar distintos colores para diferentes escenarios (por ejemplo, el color en tono rojo indica una operación peligrosa).\n\n<el-row :gutter=\"12\">\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"demo-color-box\"\n    :style=\"{ background: success }\"\n    >Success<div class=\"value\">#67C23A</div>\n      <div \n        class=\"bg-color-sub\"\n      >\n        <div \n          class=\"bg-success-sub-item\" \n          v-for=\"(item, key) in Array(2)\"\n          :key=\"key\"\n          :style=\"{ background: tintColor(success, (key + 8) / 10) }\"\n            >\n        </div>\n      </div>\n    </div>\n  </el-col>\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"demo-color-box\"\n    :style=\"{ background: warning }\"\n    >Warning<div class=\"value\">#E6A23C</div>\n      <div \n          class=\"bg-color-sub\"\n        >\n        <div \n          class=\"bg-success-sub-item\" \n          v-for=\"(item, key) in Array(2)\"\n          :key=\"key\"\n          :style=\"{ background: tintColor(warning, (key + 8) / 10) }\"\n            >\n        </div>\n      </div>\n    </div>\n  </el-col>\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"demo-color-box\"\n    :style=\"{ background: danger }\"\n    >Danger<div class=\"value\">#F56C6C</div>\n      <div \n          class=\"bg-color-sub\"\n        >\n        <div \n          class=\"bg-success-sub-item\" \n          v-for=\"(item, key) in Array(2)\"\n          :key=\"key\"\n          :style=\"{ background: tintColor(danger, (key + 8) / 10) }\"\n            >\n        </div>\n      </div>\n    </div>\n  </el-col>\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"demo-color-box\"\n    :style=\"{ background: info }\"\n    >Info<div class=\"value\">#909399</div>\n      <div \n          class=\"bg-color-sub\"\n        >\n        <div \n          class=\"bg-success-sub-item\" \n          v-for=\"(item, key) in Array(2)\"\n          :key=\"key\"\n          :style=\"{ background: tintColor(info, (key + 8) / 10) }\"\n            >\n        </div>\n      </div>\n    </div>\n  </el-col>\n</el-row>\n\n### Color neutro\n\nLos colores neutrales son para texto, fondos y bordes. Puede usar diferentes colores neutrales para representar una estructura jerárquica.\n\n<el-row :gutter=\"12\">\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"demo-color-box-group\">\n      <div class=\"demo-color-box demo-color-box-other\"\n      :style=\"{ background: textPrimary }\"\n      >Texto primario<div class=\"value\">{{textPrimary}}</div></div>\n      <div class=\"demo-color-box demo-color-box-other\"\n      :style=\"{ background: textRegular }\"\n      >\n      Texto regular<div class=\"value\">{{textRegular}}</div></div>\n      <div class=\"demo-color-box demo-color-box-other\"\n      :style=\"{ background: textSecondary }\"\n      >Texto secundario<div class=\"value\">{{textSecondary}}</div></div>\n      <div class=\"demo-color-box demo-color-box-other\"\n      :style=\"{ background: textPlaceholder }\"\n      >Texto de placeholder<div class=\"value\">{{textPlaceholder}}</div></div>\n    </div>\n  </el-col>\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"demo-color-box-group\">\n      <div class=\"demo-color-box demo-color-box-other demo-color-box-lite\"\n      :style=\"{ background: borderBase }\"\n      >Borde base<div class=\"value\">{{borderBase}}</div></div>\n      <div class=\"demo-color-box demo-color-box-other demo-color-box-lite\"\n      :style=\"{ background: borderLight }\"\n      >Borde ligero<div class=\"value\">{{borderLight}}</div></div>\n      <div class=\"demo-color-box demo-color-box-other demo-color-box-lite\"\n      :style=\"{ background: borderLighter }\"\n      >Borde claro<div class=\"value\">{{borderLighter}}</div></div>\n      <div class=\"demo-color-box demo-color-box-other demo-color-box-lite\"\n      :style=\"{ background: borderExtraLight }\"\n      >Borde extra claro<div class=\"value\">{{borderExtraLight}}</div></div>\n    </div>\n  </el-col>\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"demo-color-box-group\">\n      <div \n      class=\"demo-color-box demo-color-box-other\"\n      :style=\"{ background: black }\"\n      >Basic Black<div class=\"value\">{{black}}</div></div>\n      <div\n      class=\"demo-color-box demo-color-box-other\"\n      :style=\"{ background: white, color: '#303133', border: '1px solid #eee' }\"\n      >Basic White<div class=\"value\">{{white}}</div></div>\n      <div class=\"demo-color-box demo-color-box-other bg-transparent\">Transparent<div class=\"value\">Transparent</div>\n      </div>\n    </div>\n  </el-col>\n</el-row>\n"
  },
  {
    "path": "examples/docs/es/container.md",
    "content": "## Contenedor\nComponentes contenedores para iniciar una estructura básica de un sitio:\n\n`<el-container>`: Contenedor. Cuando este elemento se anida con un `<el-header>` o `<el-footer>`, todos los elementos secundarios se organizan verticalmente.\nDe lo contrario, de forma horizontal. \n\n`<el-header>`: Contenedor para cabeceras.\n\n`<el-aside>`: Contenedor para secciones laterales (generalmente, una barra lateral).\n\n`<el-main>`: Contenedor para sección principal.\n\n`<el-footer>`: Contenedor para pie de página.\n\n:::tip\nEstos componentes utilizan flex para el diseño, así que asegúrese que el navegador lo soporta. Además, los elementos directos de `<el-container>` tienen que ser uno o más de los últimos cuatro componentes. Y el elemento padre de los últimos cuatro componentes debe ser un `<el-container>`.\n:::\n\n### Diseños comunes\n\n:::demo\n```html\n<el-container>\n  <el-header>Cabecera</el-header>\n  <el-main>Principal</el-main>\n</el-container>\n\n<el-container>\n  <el-header>Cabecera</el-header>\n  <el-main>Principal</el-main>\n  <el-footer>Pie de página</el-footer>\n</el-container>\n\n<el-container>\n  <el-aside width=\"200px\">Barra lateral</el-aside>\n  <el-main>Principal</el-main>\n</el-container>\n\n<el-container>\n  <el-header>Cabecera</el-header>\n  <el-container>\n    <el-aside width=\"200px\">Barra lateral</el-aside>\n    <el-main>Principal</el-main>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-header>Cabecera</el-header>\n  <el-container>\n    <el-aside width=\"200px\">Barra lateral</el-aside>\n    <el-container>\n      <el-main>Principal</el-main>\n      <el-footer>Pie de página</el-footer>\n    </el-container>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-aside width=\"200px\">Barra lateral</el-aside>\n  <el-container>\n    <el-header>Cabecera</el-header>\n    <el-main>Principal</el-main>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-aside width=\"200px\">Barra lateral</el-aside>\n  <el-container>\n    <el-header>Cabecera</el-header>\n    <el-main>Principal</el-main>\n    <el-footer>Pie de página</el-footer>\n  </el-container>\n</el-container>\n\n<style>\n  .el-header, .el-footer {\n    background-color: #B3C0D1;\n    color: #333;\n    text-align: center;\n    line-height: 60px;\n  }\n  \n  .el-aside {\n    background-color: #D3DCE6;\n    color: #333;\n    text-align: center;\n    line-height: 200px;\n  }\n  \n  .el-main {\n    background-color: #E9EEF3;\n    color: #333;\n    text-align: center;\n    line-height: 160px;\n  }\n  \n  body > .el-container {\n    margin-bottom: 40px;\n  }\n  \n  .el-container:nth-child(5) .el-aside,\n  .el-container:nth-child(6) .el-aside {\n    line-height: 260px;\n  }\n  \n  .el-container:nth-child(7) .el-aside {\n    line-height: 320px;\n  }\n</style>\n```\n:::\n\n### Ejemplo\n\n:::demo\n```html\n<el-container style=\"height: 500px; border: 1px solid #eee\">\n  <el-aside width=\"200px\" style=\"background-color: rgb(238, 241, 246)\">\n    <el-menu :default-openeds=\"['1', '3']\">\n      <el-submenu index=\"1\">\n        <template slot=\"title\"><i class=\"el-icon-message\"></i>Navigator One</template>\n        <el-menu-item-group>\n          <template slot=\"title\">Group 1</template>\n          <el-menu-item index=\"1-1\">Option 1</el-menu-item>\n          <el-menu-item index=\"1-2\">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title=\"Group 2\">\n          <el-menu-item index=\"1-3\">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index=\"1-4\">\n          <template slot=\"title\">Option4</template>\n          <el-menu-item index=\"1-4-1\">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-submenu index=\"2\">\n        <template slot=\"title\"><i class=\"el-icon-menu\"></i>Navigator Two</template>\n        <el-menu-item-group>\n          <template slot=\"title\">Group 1</template>\n          <el-menu-item index=\"2-1\">Option 1</el-menu-item>\n          <el-menu-item index=\"2-2\">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title=\"Group 2\">\n          <el-menu-item index=\"2-3\">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index=\"2-4\">\n          <template slot=\"title\">Option 4</template>\n          <el-menu-item index=\"2-4-1\">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-submenu index=\"3\">\n        <template slot=\"title\"><i class=\"el-icon-setting\"></i>Navigator Three</template>\n        <el-menu-item-group>\n          <template slot=\"title\">Group 1</template>\n          <el-menu-item index=\"3-1\">Option 1</el-menu-item>\n          <el-menu-item index=\"3-2\">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title=\"Group 2\">\n          <el-menu-item index=\"3-3\">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index=\"3-4\">\n          <template slot=\"title\">Option 4</template>\n          <el-menu-item index=\"3-4-1\">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n    </el-menu>\n  </el-aside>\n  \n  <el-container>\n    <el-header style=\"text-align: right; font-size: 12px\">\n      <el-dropdown>\n        <i class=\"el-icon-setting\" style=\"margin-right: 15px\"></i>\n        <el-dropdown-menu slot=\"dropdown\">\n          <el-dropdown-item>View</el-dropdown-item>\n          <el-dropdown-item>Add</el-dropdown-item>\n          <el-dropdown-item>Delete</el-dropdown-item>\n        </el-dropdown-menu>\n      </el-dropdown>\n      <span>Tom</span>\n    </el-header>\n    \n    <el-main>\n      <el-table :data=\"tableData\">\n        <el-table-column prop=\"date\" label=\"Date\" width=\"140\">\n        </el-table-column>\n        <el-table-column prop=\"name\" label=\"Name\" width=\"120\">\n        </el-table-column>\n        <el-table-column prop=\"address\" label=\"Address\">\n        </el-table-column>\n      </el-table>\n    </el-main>\n  </el-container>\n</el-container>\n\n<style>\n  .el-header {\n    background-color: #B3C0D1;\n    color: #333;\n    line-height: 60px;\n  }\n  \n  .el-aside {\n    color: #333;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      const item = {\n        date: '2016-05-02',\n        name: 'Tom',\n        address: 'No. 189, Grove St, Los Angeles'\n      };\n      return {\n        tableData: Array(20).fill(item)\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Atributos de contenedor\n| Atributo  | Descripción                              | Tipo   | Valores aceptados     | Por defecto                              |\n| --------- | ---------------------------------------- | ------ | --------------------- | ---------------------------------------- |\n| direction | dirección de diseño para elementos secundarios | string | horizontal / vertical | vertical cuando el elemento está anidado con `el-header`, de lo contrario, horizontal |\n\n### Atributos de cabecera\n| Atributo | Descripción           | Tipo   | Valores aceptados | Por defecto |\n| -------- | --------------------- | ------ | ----------------- | ----------- |\n| height   | altura de la cabecera | string | —                 | 60px        |\n\n### Atributos de barra lateral\n| Atributo | Descripción               | Tipo   | Valores aceptados | Por defecto |\n| -------- | ------------------------- | ------ | ----------------- | ----------- |\n| width    | ancho de la barra lateral | string | —                 | 300px       |\n\n### Atributos de pie de página\n| Atributo | Descripción              | Tipo   | Valores aceptados | Por defecto |\n| -------- | ------------------------ | ------ | ----------------- | ----------- |\n| height   | altura del pie de página | string | —                 | 60px        |"
  },
  {
    "path": "examples/docs/es/custom-theme.md",
    "content": "## Tema personalizado\nElement utiliza la metodología BEM en CSS con la finalidad de que puedas sobrescribir los estilos fácilmente. Pero, si necesita remplazar estilos a gran escala, por ejemplo, cambiar el color del tema de azul a naranja o verde, quizás reemplazarlos uno a uno no sea lo más adecuado, para ello hay 4 maneras de modificar los estilos.\n\n### Theme Roller\nUse [Online Theme Roller](./#/es/theme) para personalizar el diseño de las  variables globales y componentes, y vea el resultado en tiempo real. Puede generar un completo paquete de estilos basado en un nuevo tema que puede bajar directamente (para importar los archivos del nuevo estilo al proyecto por favor vea la sección 'Importar un tema personalizado').\n\nTambién puede usar [Theme Roller Chrome Extension](https://chrome.google.com/webstore/detail/element-theme-roller/lifkjlojflekabbmlddfccdkphlelmim), para personalizar un tema y ver el resultado en tiempo real en cualquier sitio desarrollado con Element.<img src=\"https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png\" style=\"width: 100%;margin: 30px auto 0;display: block;\">\n\n### Cambiando el color del tema\nSi lo que se busca es cambiar el color del tema de Element, se recomienda utilizar el [sitio de visualización de temas](https://elementui.github.io/theme-chalk-preview/#/en-US). Element utiliza un color azul brillante y amigable como tema principal. Al cambiarlo, puede hacer que Element este más conectado visualmente a proyectos específicos.\n\nEste sitio, le permitirá obtener una vista previa del tema con un nuevo color en tiempo real, y, además, obtener un paquete de estilos completo basado en el nuevo color para su descarga (para importar estos nuevos estilos, consulte la sección ‘Importar un tema personalizado’ o ‘Importar un tema de componente bajo demanda' que se encuentran dentro de esta sección).\n\n### Actualizando variables SCSS en tu proyecto\n`theme-chalk` esta escrito en SCSS. Si su proyecto también utiliza SCSS, puede cambiar las variables de estilos de Element. Para ello, solo necesita crear un nuevo archivo de estilos, por ejemplo, `element-variables.scss`:\n\n```html\n/* Color del tema */\n$--color-primary: teal;\n\n/* Ubicación de la fuente, obligatoria */\n$--font-path: '~element-ui/lib/theme-chalk/fonts';\n\n@import \"~element-ui/packages/theme-chalk/src/index\";\n```\n\nEntonces, en el archivo principal del proyecto, importe este archivo de estilos en lugar de los estilos de Element:\n```JS\nimport Vue from 'vue'\nimport Element from 'element-ui'\nimport './element-variables.scss'\n\nVue.use(Element)\n```\n\n:::tip\nNota es necesario sobrescribir la ruta de la fuente por una ruta relativa de las fuentes de Element.\n:::\n\n### CLI para generar temas\nSi su proyecto no utiliza SCSS, puede personalizar el tema a través de esta herramienta:\n\n#### <strong>Instalación</strong>\nPrimero, debe instalar el generador de temas ya sea de forma global o local. Se recomienda instalarlo de forma local, ya que de esta manera, cuando otros clonen su proyecto, npm automáticamente los instalará para ellos.\n```shell\nnpm i element-theme -g\n```\n\nAhora, instale el tema `chalk` desde npm o Github.\n```shell\n# desde npm\nnpm i element-theme-chalk -D\n\n# desde GitHub\nnpm i https://github.com/ElementUI/theme-chalk -D\n```\n\n#### <strong>Inicializar archivo de variables</strong>\nDespués de haber instalado correctamente los paquetes, el comando `et` estará disponible en su CLI (si instalo el paquete de manera local, utilice `node_modules/.bin/et` en su lugar). Ejecute `-i` para inicializar un archivo de variables, puede especificar un nombre distinto, pero por defecto, el archivo se llama `element-variables.scss`. También puede especificar un directorio distinto.\n\n```shell\net -i [custom output file]\n\n> ✔ Generator variables file\n```\n\nEn el archivo `element-variables.scss` podrá encontrar todas las variables que utiliza Element para definir los estilos y estos están definidos en SCSS. Aquí un ejemplo:\n```css\n$--color-primary: #409EFF !default;\n$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */\n$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */\n$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */\n$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */\n$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */\n$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */\n$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */\n$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */\n$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */\n\n$--color-success: #67c23a !default;\n$--color-warning: #e6a23c !default;\n$--color-danger: #f56c6c !default;\n$--color-info: #909399 !default;\n\n...\n```\n\n#### <strong>Modificando variables</strong>\nSolo debe modificar el archivo `element-variables.scss`, por ejemplo, para cambiar el color del tema a rojo:\n```CSS\n$--color-primary: red;\n```\n\n#### <strong>Construyendo el tema</strong>\nDespués de haber modificado el archivo de variables, utilizaremos el comando `et` para construir nuestro tema. Puedes activar el modo `watch` agregando el parámetro `-w`. Y, si desea personalizar el nombre del archivo, debes agregar el parámetro `-c` seguido del nombre. Por defecto, el archivo de tema construido es colocado dentro de `./theme`. Puede especificar un directorio distinto utilizando el parámetro `-o`. \n```shell\net\n\n> ✔ build theme font\n> ✔ build element theme\n```\n\n### Uso de los temas personalizados\n#### <strong>Importar un tema personalizado</strong>\nImportar su propio tema es igual que importar el tema por defecto, sol que esta vez se deben importar los archivos construidos con \"Online Theme Roller\" o \"CLI tool\":\n\n```javascript\nimport '../theme/index.css'\nimport ElementUI from 'element-ui'\nimport Vue from 'vue'\n\nVue.use(ElementUI)\n```\n\n#### <strong>Importar un tema de componente bajo demanda</strong>\nSi esta utilizando `babel-plugin-component` para importar bajo demanda, solo debe modificar el archivo `.babelrc` y especificar en la propiedad `styleLibraryName` la ruta en donde se encuentra localizado su tema personalizado relativo a `.babelrc`. **Nota** el carácter `~` es obligatorio:\n```json\n{\n  \"plugins\": [\n    [\n      \"component\",\n      {\n        \"libraryName\": \"element-ui\",\n        \"styleLibraryName\": \"~theme\"\n      }\n    ]\n  ]\n}\n```\n\nSi no esta familiarizado con `babel-plugin-component`, por favor diríjase a la documentación sobre <a href=\"./#/en-US/component/quickstart\">Como Iniciar</a>. Para más detalles, consulte el [repositorio del proyecto](https://github.com/ElementUI/element-theme) de `element-theme`."
  },
  {
    "path": "examples/docs/es/date-picker.md",
    "content": "\n## DatePicker\n\nUtilice Date Picker para introducir la fecha.\n\n###  Ingresar Fecha\n\nDate Picker básico por \"día\".\n\n:::demo La medida está determinada por el atributo `type` . Puede habilitar las opciones rápidas creando un objeto `picker-options` con la propiedad `shortcuts`. La fecha desactivada se ajusta mediante `disabledDate`, que es una función.\n\n\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">Default</span>\n    <el-date-picker\n      v-model=\"value1\"\n      type=\"date\"\n      placeholder=\"Pick a day\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Picker with quick options</span>\n    <el-date-picker\n      v-model=\"value2\"\n      type=\"date\"\n      placeholder=\"Pick a day\"\n      :picker-options=\"pickerOptions\">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions: {\n          disabledDate(time) {\n            return time.getTime() > Date.now();\n          },\n          shortcuts: [{\n            text: 'Today',\n            onClick(picker) {\n              picker.$emit('pick', new Date());\n            }\n          }, {\n            text: 'Yesterday',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit('pick', date);\n            }\n          }, {\n            text: 'A week ago',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit('pick', date);\n            }\n          }]\n        },\n        value1: '',\n        value2: '',\n      };\n    }\n  };\n</script>\n```\n\n:::\n\n### Otras mediciones\n\nPuede elegir la semana, el mes, el año o varias fechas ampliando el componente estándar del selector de fechas.\n\n:::demo\n\n```html\n<div class=\"container\">\n  <div class=\"block\">\n    <span class=\"demonstration\">Week</span>\n    <el-date-picker\n      v-model=\"value1\"\n      type=\"week\"\n      format=\"Week WW\"\n      placeholder=\"Pick a week\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Month</span>\n    <el-date-picker\n      v-model=\"value2\"\n      type=\"month\"\n      placeholder=\"Pick a month\">\n    </el-date-picker>\n  </div>\n</div>\n<div class=\"container\">\n  <div class=\"block\">\n    <span class=\"demonstration\">Year</span>\n    <el-date-picker\n      v-model=\"value3\"\n      type=\"year\"\n      placeholder=\"Pick a year\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Dates</span>\n    <el-date-picker\n      type=\"dates\"\n      v-model=\"value4\"\n      placeholder=\"Pick one or more dates\">\n    </el-date-picker>\n  </div>\n</div>\n<div class=\"container\">\n  <div class=\"block\">\n    <span class=\"demonstration\">months</span>\n    <el-date-picker\n      type=\"months\"\n      v-model=\"value5\"\n      placeholder=\"Pick one or more months\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">years</span>\n    <el-date-picker\n      type=\"years\"\n      v-model=\"value6\"\n      placeholder=\"Pick one or more years\">\n    </el-date-picker>\n  </div>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: '',\n        value2: '',\n        value3: '',\n        value4: '',\n        value5: '',\n        value6: ''\n      };\n    }\n  };\n</script>\n```\n\n:::\n\n###  Rango de fechas\n\nSe soporta la selección de un rango de fechas.\n\n:::demo En modo de rango, los paneles izquierdo y derecho están vinculados por defecto. Si desea que los dos paneles cambien los meses actuales de forma independiente, puede utilizar el atributo `unlink-panels`.\n\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">Default</span>\n    <el-date-picker\n      v-model=\"value1\"\n      type=\"daterange\"\n      range-separator=\"To\"\n      start-placeholder=\"Start date\"\n      end-placeholder=\"End date\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">With quick options</span>\n    <el-date-picker\n      v-model=\"value2\"\n      type=\"daterange\"\n      align=\"right\"\n      unlink-panels\n      range-separator=\"To\"\n      start-placeholder=\"Start date\"\n      end-placeholder=\"End date\"\n      :picker-options=\"pickerOptions\">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions: {\n          shortcuts: [{\n            text: 'Last week',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit('pick', [start, end]);\n            }\n          }, {\n            text: 'Last month',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit('pick', [start, end]);\n            }\n          }, {\n            text: 'Last 3 months',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit('pick', [start, end]);\n            }\n          }]\n        },\n        value1: '',\n        value2: ''\n      };\n    }\n  };\n</script>\n```\n\n:::\n\n### Rango de mes\n\nSe admite la selección de un intervalo de un mes.\n\n:::demo Cuando se encuentra en el modo de rango, los paneles izquierdo y derecho están enlazados de forma predeterminada. Si desea que los dos paneles cambien de año en curso de forma independiente, puede utilizar el atributo unlink-panels.\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">Default</span>\n    <el-date-picker\n      v-model=\"value1\"\n      type=\"monthrange\"\n      range-separator=\"To\"\n      start-placeholder=\"Start month\"\n      end-placeholder=\"End month\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">With quick options</span>\n    <el-date-picker\n      v-model=\"value2\"\n      type=\"monthrange\"\n      align=\"right\"\n      unlink-panels\n      range-separator=\"To\"\n      start-placeholder=\"Start month\"\n      end-placeholder=\"End month\"\n      :picker-options=\"pickerOptions\">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions: {\n          shortcuts: [{\n            text: 'This month',\n            onClick(picker) {\n              picker.$emit('pick', [new Date(), new Date()]);\n            }\n          }, {\n            text: 'This year',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date(new Date().getFullYear(), 0);\n              picker.$emit('pick', [start, end]);\n            }\n          }, {\n            text: 'Last 6 months',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setMonth(start.getMonth() - 6);\n              picker.$emit('pick', [start, end]);\n            }\n          }]\n        },\n        value1: '',\n        value2: ''\n      };\n    }\n  };\n</script>\n```\n:::\n\n###  Valor por defecto\n\nSi el usuario no ha escogido una fecha, muestra el calendario de hoy por defecto. Puede utilizar `default-value` para fijar otra fecha. Su valor debe ser definido por `new Date()`.\n\nSi el tipo es `daterange`, `default-value` establece el calendario del lado izquierdo.\n\n:::demo\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">date</span>\n    <el-date-picker\n      v-model=\"value1\"\n      type=\"date\"\n      placeholder=\"Pick a date\"\n      default-value=\"2010-10-01\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">daterange</span>\n    <el-date-picker\n      v-model=\"value2\"\n      type=\"daterange\"\n      align=\"right\"\n      start-placeholder=\"Start Date\"\n      end-placeholder=\"End Date\"\n      default-value=\"2010-10-01\">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: '',\n        value2: ''\n      };\n    }\n  };\n</script>\n```\n:::\n\n###  Formatos de Date\nUtilice `format` para controlar el formato del texto visualizado en el input. Utilice `value-format` para controlar el formato del valor vinculado.\n\nPor defecto, el componente acepta y emite un objeto Date. A continuación se soportan cadenas de formato, usando UTC 2017-01-02 03:04:05 como ejemplo:\n\n:::warning\nPreste atención a la capitalización\n:::\n\n| formato     | significado  | nota                                     | ejemplo       |\n| ----------- | ------------ | ---------------------------------------- | ------------- |\n| `yyyy`      | año          |                                          | 2017          |\n| `M`         | mes          | no acepta 0                              | 1             |\n| `MM`        | mes          |                                          | 01            |\n| `W`         | semana       | solamente para semanas en picker's `format`; no acepta 0 | 1             |\n| `WW`        | semana       | solamente para semanas en  picker's `format` | 01            |\n| `d`         | día       | no acepta 0                              | 2             |\n| `dd`        | día       |                                          | 02            |\n| `H`         | hora         | 24-hora reloj; no acepta 0               | 3             |\n| `HH`        | hora         | 24-hora reloj                            | 03            |\n| `h`         | hora         | 12-hora reloj;  debe usarse con `A` o `a`; no acepta 0 | 3             |\n| `hh`        | hora      | 12-hora reloj;  debe usarse con `A` o `a` | 03            |\n| `m`         | minuto       | no acepta 0                              | 4             |\n| `mm`        | minuto       |                                          | 04            |\n| `s`         | segundo      | no acepta 0                              | 5             |\n| `ss`        | segundo      |                                          | 05            |\n| `A`         | AM/PM        | solamente para `format`, mayúsculas | AM            |\n| `a`         | am/pm        | solamente para `format`, minúsculas      | am            |\n| `timestamp` | JS timestamp | solamente para `value-format`; valor vinculado debe ser un `number` | 1483326245000 |\n| `[MM]` | No hay caracteres de escape | Para escapar de los caracteres, colóquelos entre corchetes (ejemplo: [A] [MM]). | MM |\n\n:::demo\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">Emits Date object</span>\n    <div class=\"demonstration\">Value: {{ value1 }}</div>\n    <el-date-picker\n      v-model=\"value1\"\n      type=\"date\"\n      placeholder=\"Pick a Date\"\n      format=\"yyyy/MM/dd\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Use value-format</span>\n    <div class=\"demonstration\">Value: {{ value2 }}</div>\n    <el-date-picker\n      v-model=\"value2\"\n      type=\"date\"\n      placeholder=\"Pick a Date\"\n      format=\"yyyy/MM/dd\"\n      value-format=\"yyyy-MM-dd\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Timestamp</span>\n    <div class=\"demonstration\">Value：{{ value3 }}</div>\n    <el-date-picker\n      v-model=\"value3\"\n      type=\"date\"\n      placeholder=\"Pick a Date\"\n      format=\"yyyy/MM/dd\"\n      value-format=\"timestamp\">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: '',\n        value2: '',\n        value3: ''\n      };\n    }\n  };\n</script>\n```\n:::\n\n###  Hora por defecto para comienzo y fin de fecha\n\nAl seleccionar un intervalo de fechas, puede asignar la hora para la fecha de inicio y la fecha final.\n\n:::demo Por defecto, la hora de la fecha de inicio y final es `00:00:00`. Configurar `default-time`  puede cambiar la hora respectivamente. Acepta un array de hasta dos cadenas con el formato  `12:00:00`. La primera cadena fija la hora para la fecha de inicio y la segunda para la fecha final.\n\n```html\n<template>\n  <div class=\"block\">\n    <p>Component value：{{ value }}</p>\n    <el-date-picker\n      v-model=\"value\"\n      type=\"daterange\"\n      start-placeholder=\"Start date\"\n      end-placeholder=\"End date\"\n      :default-time=\"['00:00:00', '23:59:59']\">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: ''\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Atributos\n| Atributo          | Descripción                              | Tipo              | Valores aceptados                        | Por defecto          |\n| ----------------- | ---------------------------------------- | ----------------- | ---------------------------------------- | -------------------- |\n| value / v-model    | valor enlazado | date(DatePicker) / array(DateRangePicker) | — | — |\n| readonly          | si DatePicker es solo de lectura         | boolean           | —                                        | false                |\n| disabled          | si DatePicker esta deshabilitado         | boolean           | —                                        | false                |\n| size              | tamaño del input                         | string            | large/small/mini                         | —                    |\n| editable          | si el input es editable                  | boolean           | —                                        | true                 |\n| clearable         | si se muestra el botón de borrado   | boolean           | —                                        | true                 |\n| placeholder       | placeholder cuando el modo NO es rango   | string            | —                                        | —                    |\n| start-placeholder | placeholder para la fecha de inicio en modo rango | string            | —                                        | —                    |\n| end-placeholder   | placeholder para la fecha final en modo rango | string            | —                                        | —                    |\n| type              | tipo de picker                           | string            | year/month/date/dates/months/years/datetime/ week/datetimerange/daterange/ monthrange | date                 |\n| format            | formato en que se muestra el valor en el input | string            | ver [date formats](#/es/component/date-picker#date-formats) | yyyy-MM-dd           |\n| align             | alineación                               | left/center/right | left                                     |                      |\n| popper-class      | nombre de clase personalizada para el dropdown de DatePicker | string            | —                                        | —                    |\n| picker-options    | opciones adicionales, chequee la tabla debajo | object            | —                                        | {}                   |\n| range-separator   | separador de rangos                      | string            | —                                        | '-'                  |\n| default-value     | opcional, valor por defecto para el calendario | Date              | cualquiera aceptado por `new Date()`     | —                    |\n| default-time      | opcional, los valores para las horas que se deben usar en la selección de fechas cuando se usa el modo rango | string[]          | Array de dos valores, cada uno es un string del estilo `12:00:00`. El primer elemento es para la fecha de inicio y el segundo es para la fecha final. | —                    |\n| value-format      | opcional, formato del valor enlazado. Si no esta especificado, el valor enlazado será un objeto Date. | string            | ver [date formats](#/es/component/date-picker#date-formats) | —                    |\n| name              | igual que `name` en el input nativo      | string            | —                                        | —                    |\n| unlink-panels     | desvincular los dos paneles de fecha en el range-picker | boolean           | —                                        | false                |\n| prefix-icon       | Clase personalizada para el icono prefijado | string            | —                                        | el-icon-date         |\n| clear-icon        | Clase personalizada para el icono `clear` | string            | —                                        | el-icon-circle-close |\n| append-to-body    | Si adjuntar el cuadro de DatePicker al cuerpo | boolean       | —                 | true       |\n\n### Opciones del Picker\n| Atributo       | Descripción                                                  | Tipo                           | Valores aceptados | Por defecto |\n| -------------- | ------------------------------------------------------------ | ------------------------------ | ----------------- | ----------- |\n| shortcuts      | { text, onClick } un array de objetos para establecer opciones de acceso directo, verifique la tabla siguiente | object[]                       | —                 | —           |\n| disabledDate   | una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un valor booleano | function                       | —                 | —           |\n| cellClassName | establecer nombre de clase personalizado | Function(Date) | — | — |\n| firstDayOfWeek | primer día de la semana                                      | Number                         | 1 to 7            | 7           |\n| onPick         | una función que se dispara cuando se cambia la fecha seleccionada. Solamente para `daterange` y `datetimerange`. | Function({ maxDate, minDate }) | -                 | -           |\n\n### Accesso directo\n| Atributo | Descripción                              | Tipo     | Valores aceptados | Por defecto |\n| -------- | ---------------------------------------- | -------- | ----------------- | ----------- |\n| text     | título del acceso directo                | string   | —                 | —           |\n| onClick  | una función se dispara al hacer clic en el acceso directo, con`vm`como parámetro. Puede modificar el valor del picker emitiendo el evento `pick`. Ejemplo: `vm.$emit('pick', new Date())` | function | —                 | —           |\n\n\n### Eventos\n| Nombre | Descripción                                    | Parámetros                   |\n| ------ | ---------------------------------------------- | ---------------------------- |\n| change | se dispara cuando el usuario confirma el valor | valor enlazado al componente |\n| blur   | se dispara cuando el input pierde el foco      | instancia del componente     |\n| focus  | se dispara cuando el input obtiene el foco     | instancia del componente     |\n\n### Métodos\n| Método | Descripción                | Parámetros |\n| ------ | -------------------------- | ---------- |\n| focus  | coloca el foco en el input | —          |\n\n### Slots\n| Nombre          | Descripción                           |\n| --------------- | ------------------------------------- |\n| range-separator | Separador de los rangos personalizado |\n"
  },
  {
    "path": "examples/docs/es/datetime-picker.md",
    "content": "## DateTimePicker\n\nSeleccionar fecha y tiempo juntos en un picker.\n\n:::tip\nDateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más detallada sobre `pickerOptions` y otros atributos, puede referirse a DatePicker y TimePicker.\n:::\n\n###  Fecha y hora\n\n:::demo Puede seleccionar la fecha y la hora en un picker al mismo tiempo configurando el tipo de fecha y la hora. La forma de utilizar los atajos es la misma que con Date Picker.\n\n\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">Default</span>\n    <el-date-picker\n      v-model=\"value1\"\n      type=\"datetime\"\n      placeholder=\"Select date and time\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">With shortcuts</span>\n    <el-date-picker\n      v-model=\"value2\"\n      type=\"datetime\"\n      placeholder=\"Select date and time\"\n      :picker-options=\"pickerOptions\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">With default time</span>\n    <el-date-picker\n      v-model=\"value3\"\n      type=\"datetime\"\n      placeholder=\"Select date and time\"\n      default-time=\"12:00:00\">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions: {\n          shortcuts: [{\n            text: 'Today',\n            onClick(picker) {\n              picker.$emit('pick', new Date());\n            }\n          }, {\n            text: 'Yesterday',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit('pick', date);\n            }\n          }, {\n            text: 'A week ago',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit('pick', date);\n            }\n          }]\n        },\n        value1: '',\n        value2: '',\n        value3: ''\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Alcance de fecha y tiempo\n\n:::demo Puede seleccionar la fecha y el rango de tiempo ajustando `type` a `datetimerange`.\n\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">Default</span>\n    <el-date-picker\n      v-model=\"value1\"\n      type=\"datetimerange\"\n      range-separator=\"To\"\n      start-placeholder=\"Start date\"\n      end-placeholder=\"End date\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">With shortcuts</span>\n    <el-date-picker\n      v-model=\"value2\"\n      type=\"datetimerange\"\n      :picker-options=\"pickerOptions\"\n      range-separator=\"To\"\n      start-placeholder=\"Start date\"\n      end-placeholder=\"End date\"\n      align=\"right\">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions: {\n          shortcuts: [{\n            text: 'Last week',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit('pick', [start, end]);\n            }\n          }, {\n            text: 'Last month',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit('pick', [start, end]);\n            }\n          }, {\n            text: 'Last 3 months',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit('pick', [start, end]);\n            }\n          }]\n        },\n        value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],\n        value2: ''\n      };\n    }\n  };\n</script>\n```\n:::\n\n###  Valor de la hora por defecto para la fecha de inicio y la fecha final\n\n:::demo Cuando se selecciona el rango de fechas en el panel con el tipo datetimerange, 00:00:00:00 se usará como el valor de tiempo predeterminado para la fecha de inicio y fin. Podemos controlarlo con el atributo default-time. default-time acepta una matriz de hasta dos cadenas. La primera posición controla el valor de tiempo de la fecha de inicio y la segunda el valor de tiempo de la fecha de fin.\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">Start date time 12:00:00</span>\n    <el-date-picker\n      v-model=\"value1\"\n      type=\"datetimerange\"\n      start-placeholder=\"Start Date\"\n      end-placeholder=\"End Date\"\n      :default-time=\"['12:00:00']\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Start date time 12:00:00, end date time 08:00:00</span>\n    <el-date-picker\n      v-model=\"value2\"\n      type=\"datetimerange\"\n      align=\"right\"\n      start-placeholder=\"Start Date\"\n      end-placeholder=\"End Date\"\n      :default-time=\"['12:00:00', '08:00:00']\">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: '',\n        value2: ''\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Atributos\n| Atributos          | Descripción                              | Tipo              | Valores aceptados                        | Por defecto          |\n| ------------------ | ---------------------------------------- | ----------------- | ---------------------------------------- | -------------------- |\n| value / v-model     | valor enlazado                           | date(DateTimePicker) / array(DateTimeRangePicker) | — | — |\n| readonly           | si DatePicker es solo de lectura         | boolean           | —                                        | false                |\n| disabled           | si DatePicker esta deshabilitada         | boolean           | —                                        | false                |\n| editable           | Si la entrada es editable                | boolean           | —                                        | true                 |\n| clearable          | Si mostrar el botón de `clear`           | boolean           | —                                        | true                 |\n| size               | tamaño del input                         | string            | large/small/mini                         | —                    |\n| placeholder        | placeholder cuando el modo NO es Range   | string            | —                                        | —                    |\n| start-placeholder  | placeholder para el inicio de fecha en el modo Range | string            | —                                        | —                    |\n| end-placeholder    | placeholder para el fin de fecha en el modo Range | string            | —                                        | —                    |\n| time-arrow-control | si se puede modificar el `time`  utilizando botones con flechas | boolean           | —                                        | false                |\n| type               | tipo del picker                          | string            | year/month/date/datetime/ week/datetimerange/daterange | date                 |\n| format             | formato de valor mostrado en el input    | string            | ver [date formats](#/es/component/date-picker#date-formats) | yyyy-MM-dd HH:mm:ss           |\n| align              | alineación                               | left/center/right | left                                     |                      |\n| popper-class       | nombre de clase personalizado para el Dropdown de DatePicker | string            | —                                        | —                    |\n| picker-options     | opciones adicionales, Comprueba la tabla de mas abajo | object            | —                                        | {}                   |\n| range-separator    | separador de rango                       | string            | -                                        | '-'                  |\n| default-value      | opcional, fecha predeterminada del calendario | Fecha             | cualquier cosa aceptada por `new Date()` — |                      |\n| default-time | el valor de tiempo por defecto después de elegir una fecha | non-range: string / range: string[] | non-range: Una cadena de texto como `12:00:00`, range: array de dos strings, el primero es para la fecha de inicio y el segundo para la fecha final. 00:00:00 se utilizará si no se especifica | — |\n| value-format       | opcional, formato de valor de enlazado. Si no se especifica, el valor de enlazado será un objeto Date | cadena            | ver [date formats](#/es/component/date-picker#date-formats) | —                    |\n| name               | igual que `name` en la entrada nativa    | string            | —                                        | —                    |\n| unlink-panels      | desconectar dos date-panels en range-picker | boolean           | —                                        | false                |\n| prefix-icon        | Clase personalizada para el icono prefijado | string            | —                                        | el-icon-date         |\n| clear-icon         | Clase personalizada para el icono `clear` | string              | —                                        | el-icon-circle-close |\n| validate-event     | si se debe disparar la validación | boolean             | -                                        | true                 |\n\n### Picker Options\n| Atributo       | Descripción                              | Tipo     | Valores aceptados | Por defecto |\n| -------------- | ---------------------------------------- | -------- | ----------------- | ----------- |\n| shortcuts      | un array de objetos { text, onClick } para establecer las opciones de acceso directo, verifique la tabla debajo | objeto[] | —                 | —           |\n| disabledDate   | una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un booleano | función  | —                 | —           |\n| cellClassName | establecer nombre de clase personalizado | Function(Date) | — | — |\n| firstDayOfWeek | primera día de semana                    | Número   | 1 to 7            | 7           |\n\n### Accesos directos\n| Atributo | Descripción                                                  | Tipo     | Valores aceptados | Por defecto |\n| -------- | ------------------------------------------------------------ | -------- | ----------------- | ----------- |\n| text     | título del acceso directo                                    | string   | —                 | —           |\n| onClick  | la función se dispara cuando se hace clic en el acceso directo, con el `vm` como parámetro. Puede modificar el valor del picker emitiendo el evento`pick`. Ejemplo: `vm.$emit('pick', new Date())` | function | —                 | —           |\n\n### Eventos\n| Nombre de evento | Descripción                              | Parámetros                    |\n| ---------------- | ---------------------------------------- | ----------------------------- |\n| change           | Se dispara cuando el usuario confirma el valor | valor enlazado del componente |\n| blur             | Se dispara cuando el input pierde el foco | instancia del componente      |\n| focus            | Se dispara cuando el input obtiene el foco | instancia del componente      |\n\n### Métodos\n| Método | Descripción      | Parámetros |\n| ------ | ---------------- | ---------- |\n| focus  | foco en el input | —          |\n"
  },
  {
    "path": "examples/docs/es/descriptions.md",
    "content": "## Descriptions\n\nDisplay multiple fields in list form.\n\n### Basic usage\n\n:::demo\n\n```html\n<el-descriptions title=\"User Info\">\n    <el-descriptions-item label=\"Username\">kooriookami</el-descriptions-item>\n    <el-descriptions-item label=\"Telephone\">18100000000</el-descriptions-item>\n    <el-descriptions-item label=\"Place\">Suzhou</el-descriptions-item>\n    <el-descriptions-item label=\"Remarks\">\n      <el-tag size=\"small\">School</el-tag>\n    </el-descriptions-item>\n    <el-descriptions-item label=\"Address\">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>\n</el-descriptions>\n```\n:::\n\n### Sizes\n\n:::demo\n\n```html\n<template>\n  <el-radio-group v-model=\"size\">\n    <el-radio label=\"\">Default</el-radio>\n    <el-radio label=\"medium\">Medium</el-radio>\n    <el-radio label=\"small\">Small</el-radio>\n    <el-radio label=\"mini\">Mini</el-radio>\n  </el-radio-group>\n\n  <el-descriptions class=\"margin-top\" title=\"With border\" :column=\"3\" :size=\"size\" border>\n    <template slot=\"extra\">\n      <el-button type=\"primary\" size=\"small\">Operation</el-button>\n    </template>\n    <el-descriptions-item>\n      <template slot=\"label\">\n        <i class=\"el-icon-user\"></i>\n        Username\n      </template>\n      kooriookami\n    </el-descriptions-item>\n    <el-descriptions-item>\n      <template slot=\"label\">\n        <i class=\"el-icon-mobile-phone\"></i>\n        Telephone\n      </template>\n      18100000000\n    </el-descriptions-item>\n    <el-descriptions-item>\n      <template slot=\"label\">\n        <i class=\"el-icon-location-outline\"></i>\n        Place\n      </template>\n      Suzhou\n    </el-descriptions-item>\n    <el-descriptions-item>\n      <template slot=\"label\">\n        <i class=\"el-icon-tickets\"></i>\n        Remarks\n      </template>\n      <el-tag size=\"small\">School</el-tag>\n    </el-descriptions-item>\n    <el-descriptions-item>\n      <template slot=\"label\">\n        <i class=\"el-icon-office-building\"></i>\n        Address\n      </template>\n      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province\n    </el-descriptions-item>\n  </el-descriptions>\n\n  <el-descriptions class=\"margin-top\" title=\"Without border\" :column=\"3\" :size=\"size\">\n    <template slot=\"extra\">\n      <el-button type=\"primary\" size=\"small\">Operation</el-button>\n    </template>\n    <el-descriptions-item label=\"Username\">kooriookami</el-descriptions-item>\n    <el-descriptions-item label=\"Telephone\">18100000000</el-descriptions-item>\n    <el-descriptions-item label=\"Place\">Suzhou</el-descriptions-item>\n    <el-descriptions-item label=\"Remarks\">\n      <el-tag size=\"small\">School</el-tag>\n    </el-descriptions-item>\n    <el-descriptions-item label=\"Address\">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>\n  </el-descriptions>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        size: ''\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Vertical List\n\n:::demo\n\n```html\n<el-descriptions title=\"Vertical list with border\" direction=\"vertical\" :column=\"4\" border>\n  <el-descriptions-item label=\"Username\">kooriookami</el-descriptions-item>\n  <el-descriptions-item label=\"Telephone\">18100000000</el-descriptions-item>\n  <el-descriptions-item label=\"Place\" :span=\"2\">Suzhou</el-descriptions-item>\n  <el-descriptions-item label=\"Remarks\">\n    <el-tag size=\"small\">School</el-tag>\n  </el-descriptions-item>\n  <el-descriptions-item label=\"Address\">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>\n</el-descriptions>\n\n<el-descriptions class=\"margin-top\" title=\"Vertical list without border\" :column=\"4\" direction=\"vertical\">\n  <el-descriptions-item label=\"Username\">kooriookami</el-descriptions-item>\n  <el-descriptions-item label=\"Telephone\">18100000000</el-descriptions-item>\n  <el-descriptions-item label=\"Place\" :span=\"2\">Suzhou</el-descriptions-item>\n  <el-descriptions-item label=\"Remarks\">\n    <el-tag size=\"small\">School</el-tag>\n  </el-descriptions-item>\n  <el-descriptions-item label=\"Address\">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>\n</el-descriptions>\n```\n:::\n\n### Customized Style\n\n:::demo\n\n```html\n<el-descriptions title=\"Customized style list\" :column=\"3\" border>\n  <el-descriptions-item label=\"Username\" label-class-name=\"my-label\" content-class-name=\"my-content\">kooriookami</el-descriptions-item>\n  <el-descriptions-item label=\"Telephone\">18100000000</el-descriptions-item>\n  <el-descriptions-item label=\"Place\">Suzhou</el-descriptions-item>\n  <el-descriptions-item label=\"Remarks\">\n    <el-tag size=\"small\">School</el-tag>\n  </el-descriptions-item>\n  <el-descriptions-item label=\"Address\" :content-style=\"{'text-align': 'right'}\">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>\n</el-descriptions>\n<style>\n  .my-label {\n    background: #E1F3D8;\n  }\n\n  .my-content {\n    background: #FDE2E2;\n  }\n</style>\n```\n:::\n\n### Descriptions Attributes\n| Attribute     | Description       | Type       | Accepted Values        | Default   |\n|-------------  |---------------- |---------------- |---------------------- |-------- |\n| border        | with or without border      | boolean  |          —             |    false     |\n| column        | numbers of `Descriptions Item` in one line  | number | — |    3  |\n| direction     | direction of list  | string | vertical / horizontal |    horizontal  |\n| size          | size of list    | string  |    medium / small / mini  |  — |\n| title         | title text, display on the top left    | string  |    —  |  — |\n| extra         | extra text, display on the top right    | string  |    —  |  — |\n| colon | change default props colon value of Descriptions Item   | boolean |    —  |  true |\n| labelClassName          | custom label class name         | string  |          —             |    —     |\n| contentClassName          | custom content class name         | string  |          —             |    —     |\n| labelStyle          | custom label style | object |          —             |    —     |\n| contentStyle         | custom content style | object |          —             |    —     |\n\n### Descriptions Slots\n\n| Name | Description |\n|------|--------|\n| title | custom title, display on the top left  |\n| extra | custom extra area, display on the top right  |\n\n### Descriptions Item Attributes\n| Attribute       | Description        | Type       | Accepted Values       | Default   |\n|-------------  |---------------- |---------------- |---------------------- |-------- |\n| label          | label text         | string  |          —             |    —     |\n| span          | colspan of column       | number  |          —             |    1     |\n| labelClassName          | custom label class name         | string  |          —             |    —     |\n| contentClassName          | custom content class name         | string  |          —             |    —     |\n| labelStyle          | custom label style | object |          —             |    —     |\n| contentStyle         | custom content style | object |          —             |    —     |\n\n### Descriptions Item Slots\n\n| Name | Description |\n|------|--------|\n| label | custom label  |\n"
  },
  {
    "path": "examples/docs/es/dialog.md",
    "content": "## Dialog\n\nInformar a usuarios preservando el estado de la página actual.\n\n### Uso Básico\n\nDialog abre una caja de diálogo, y es bastante personalizable.\n\n:::demo Establezca el atributo `visible` con un booleano, y el Dialog se muestra cuando es `true`. El diálogo tiene dos partes: `body` y `footer`,  este último requiere un slot llamado `footer`. El atributo `title` es opcional (vacío por defecto) y sirve para definir un título. Por último, este ejemplo muestra cómo se utiliza `before-close`.\n\n\n```html\n<el-button type=\"text\" @click=\"dialogVisible = true\">click to open the Dialog</el-button>\n\n<el-dialog\n  title=\"Tips\"\n  :visible.sync=\"dialogVisible\"\n  width=\"30%\"\n  :before-close=\"handleClose\">\n  <span>This is a message</span>\n  <span slot=\"footer\" class=\"dialog-footer\">\n    <el-button @click=\"dialogVisible = false\">Cancel</el-button>\n    <el-button type=\"primary\" @click=\"dialogVisible = false\">Confirm</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm('Are you sure to close this dialog?')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n</script>\n```\n:::\n\n:::tip\n\n`before-close`  sólo funciona cuando el usuario hace clic en el icono de cerrar o en el fondo. Si tiene botones que cierran el cuadro de diálogo en el slot llamado `footer`, puede agregar lo que haría `before-close` en el manejador de eventos de los botones.\n\n:::\n\n### Personalizaciones\n\n\nEl contenido del Diálogo puede ser cualquier cosa, incluso una tabla o un formulario. Este ejemplo muestra cómo usar Element Table y Form con Dialog\n\n:::demo\n\n```html\n<!-- Table -->\n<el-button type=\"text\" @click=\"dialogTableVisible = true\">open a Table nested Dialog</el-button>\n\n<el-dialog title=\"Shipping address\" :visible.sync=\"dialogTableVisible\">\n  <el-table :data=\"gridData\">\n    <el-table-column property=\"date\" label=\"Date\" width=\"150\"></el-table-column>\n    <el-table-column property=\"name\" label=\"Name\" width=\"200\"></el-table-column>\n    <el-table-column property=\"address\" label=\"Address\"></el-table-column>\n  </el-table>\n</el-dialog>\n\n<!-- Form -->\n<el-button type=\"text\" @click=\"dialogFormVisible = true\">open a Form nested Dialog</el-button>\n\n<el-dialog title=\"Shipping address\" :visible.sync=\"dialogFormVisible\">\n  <el-form :model=\"form\">\n    <el-form-item label=\"Promotion name\" :label-width=\"formLabelWidth\">\n      <el-input v-model=\"form.name\" autocomplete=\"off\"></el-input>\n    </el-form-item>\n    <el-form-item label=\"Zones\" :label-width=\"formLabelWidth\">\n      <el-select v-model=\"form.region\" placeholder=\"Please select a zone\">\n        <el-option label=\"Zone No.1\" value=\"shanghai\"></el-option>\n        <el-option label=\"Zone No.2\" value=\"beijing\"></el-option>\n      </el-select>\n    </el-form-item>\n  </el-form>\n  <span slot=\"footer\" class=\"dialog-footer\">\n    <el-button @click=\"dialogFormVisible = false\">Cancel</el-button>\n    <el-button type=\"primary\" @click=\"dialogFormVisible = false\">Confirm</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: '2016-05-02',\n          name: 'John Smith',\n          address: 'No.1518,  Jinshajiang Road, Putuo District'\n        }, {\n          date: '2016-05-04',\n          name: 'John Smith',\n          address: 'No.1518,  Jinshajiang Road, Putuo District'\n        }, {\n          date: '2016-05-01',\n          name: 'John Smith',\n          address: 'No.1518,  Jinshajiang Road, Putuo District'\n        }, {\n          date: '2016-05-03',\n          name: 'John Smith',\n          address: 'No.1518,  Jinshajiang Road, Putuo District'\n        }],\n        dialogTableVisible: false,\n        dialogFormVisible: false,\n        form: {\n          name: '',\n          region: '',\n          date1: '',\n          date2: '',\n          delivery: false,\n          type: [],\n          resource: '',\n          desc: ''\n        },\n        formLabelWidth: '120px'\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Diálogo anidado\nSi un diálogo está anidado en otro diálogo, se requiere append-to-body.\n\n:::demo Normalmente no recomendamos el uso de Dialog anidado. Si necesita que se muestren múltiples diálogos en la página, puede simplemente aplanarlos para que sean hermanos entre sí. Si debe anidar un Diálogo dentro de otro Diálogo, establezca `append-to-body` del Diálogo anidado como true, y lo añadirá al cuerpo en lugar de su nodo padre, para que ambos Diálogos puedan ser correctamente renderizados.\n\n```html\n<template>\n  <el-button type=\"text\" @click=\"outerVisible = true\">open the outer Dialog</el-button>\n  \n  <el-dialog title=\"Outer Dialog\" :visible.sync=\"outerVisible\">\n    <el-dialog\n        width=\"30%\"\n        title=\"Inner Dialog\"\n        :visible.sync=\"innerVisible\"\n        append-to-body>\n    </el-dialog>\n    <div slot=\"footer\" class=\"dialog-footer\">\n      <el-button @click=\"outerVisible = false\">Cancel</el-button>\n      <el-button type=\"primary\" @click=\"innerVisible = true\">open the inner Dialog</el-button>\n    </div>\n  </el-dialog>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        outerVisible: false,\n        innerVisible: false\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Contenido centrado\nEl contenido de Diálogo se puede centrar.\n\n:::demo Ajuste `center` en `true` para centrar el encabezado y el pie de página del cuadro de diálogo horizontalmente. `center` sólo afecta al encabezado y pie de página de Dialog. El cuerpo de Dialog puede ser cualquier cosa, así que a veces no se ve bien cuando está centrado. Necesitas escribir algún CSS si deseas centrar el cuerpo también.\n\n```html\n<el-button type=\"text\" @click=\"centerDialogVisible = true\">Click to open the Dialog</el-button>\n\n<el-dialog\n  title=\"Warning\"\n  :visible.sync=\"centerDialogVisible\"\n  width=\"30%\"\n  center>\n  <span>It should be noted that the content will not be aligned in center by default</span>\n  <span slot=\"footer\" class=\"dialog-footer\">\n    <el-button @click=\"centerDialogVisible = false\">Cancel</el-button>\n    <el-button type=\"primary\" @click=\"centerDialogVisible = false\">Confirm</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        centerDialogVisible: false\n      };\n    }\n  };\n</script>\n```\n:::\n\n:::tip\nEl contenido de Dialog se renderiza en modo lazy, lo que significa que la ranura por defecto no se renderiza en el DOM hasta que se abre por primera vez. Por lo tanto, si necesita realizar una manipulación DOM o acceder a un componente mediante ref, hágalo en el callback del evento `open`.\n:::\n\n:::tip\n\nSi la variable ligada a `visible` se gestiona en el Vuex store, el `.sync` no puede funcionar correctamente. En este caso, elimine el modificador `.sync`, escuche los eventos de `open` y `close` Dialog, y confirme las mutaciones Vuex para actualizar el valor de esa variable en los manejadores de eventos.\n\n:::\n\n### Atributo\n\n| Atributo              | Descripción                              | Tipo                                     | Valores aceptados | Por defecto |\n| --------------------- | ---------------------------------------- | ---------------------------------------- | ----------------- | ----------- |\n| visible               | visibilidad del Diálogo, apoya el modificador .sync | boolean                                  | —                 | false       |\n| title                 | título de Diálogo. También se puede pasar con un slot con nombre (ver la tabla siguiente) | string                                   | —                 | —           |\n| width                 | anchura de Diálogo                       | string                                   | —                 | 50%         |\n| fullscreen            | si el diálogo ocupa pantalla completa    | boolean                                  | —                 | false       |\n| top                   | valor de `margin-top` del Diálogo CSS    | string                                   | —                 | 15vh        |\n| modal                 | si se muestra una máscara                | boolean                                  | —                 | true        |\n| modal-append-to-body  | si adjuntar modal al elemento de cuerpo. Si es falso,el modal se agregará al elemento principal de Diálogo | boolean                                  | —                 | true        |\n| append-to-body        | Si adjuntar el cuadro de diálogo al cuerpo | boolean                                  | —                 | false       |\n| lock-scroll           | Si el scroll del cuerpo está desactivado mientras se muestra el cuadro de diálogo | boolean                                  | —                 | true        |\n| custom-class          | nombres de clase personalizada para el Diálogo | string                                   | —                 | —           |\n| close-on-click-modal  | si el Diálogo puede ser cerrado haciendo clic en la máscara | boolean                                  | —                 | true        |\n| close-on-press-escape | si el Diálogo puede ser cerrado presionando ESC | boolean                                  | —                 | true        |\n| show-close            | si mostrar un botón de cerrar            | boolean                                  | —                 | true        |\n| before-close          | una devolución de llamada antes de que se cierre el cuadro de diálogo, y evitar cerrar el cuadro de diálogo | función(done) `done`se usa para cerrar el diálog | —                 | —           |\n| center                | si alinear el encabezado y el pie de página en el centro | boolean                                  | —                 | false       |\n| destroy-on-close      | Destruir elementos en Dialog cuando se cierra | boolean                                  | —                 | false         |\n\n### Slots\n\n| Nombre | Descripción                            |\n| ------ | -------------------------------------- |\n| —      | contenido de Diálogo                   |\n| title  | contenido del título de Diálogo        |\n| footer | contenido del pie de página de Diálogo |\n\n### Eventos\n| Nombre de Evento | Descripción                   | Parámetros |\n| ---------------- | ---------------------------------------- | ---------- |\n| open             | se activa cuando se abre el cuadro de Diálogo | —          |\n| opened           | se activa cuando la animación de apertura del Dialog termina. | — |\n| close            | se dispara cuando el Diálogo se cierra   | —          |\n| closed           | se activa cuando finaliza la animación de cierre del Diálog | — |\n\n"
  },
  {
    "path": "examples/docs/es/divider.md",
    "content": "## Divider\n\nLa línea divisoria que separa el contenido.\n\n### Uso básico\n\nDivide el texto de los diferentes párrafos.\n\n:::demo\n```html\n<template>\n  <div>\n    <span>I sit at my window this morning where the world like a passer-by stops for a moment, nods to me and goes.</span>\n    <el-divider></el-divider>\n    <span>There little thoughts are the rustle of leaves; they have their whisper of joy in my mind.</span>\n  </div>\n</template>\n```\n:::\n\n### Contenido personalizado\n\nPuede personalizar el contenido en la línea divisoria.\n\n\n:::demo\n```html\n<template>\n  <div>\n    <span>What you are you do not see, what you see is your shadow. </span>\n    <el-divider content-position=\"left\">Rabindranath Tagore</el-divider>\n    <span>I cannot choose the best. The best chooses me.</span>\n    <el-divider><i class=\"el-icon-star-on\"></i></el-divider>\n    <span>My wishes are fools, they shout across thy song, my Master. Let me but listen.</span>\n    <el-divider content-position=\"right\">Rabindranath Tagore</el-divider>\n  </div>\n</template>\n```\n:::\n\n### División vertical\n\n:::demo\n```html\n<template>\n  <div>\n    <span>Rain</span>\n    <el-divider direction=\"vertical\"></el-divider>\n    <span>Home</span>\n    <el-divider direction=\"vertical\"></el-divider>\n    <span>Grass</span>\n  </div>\n</template>\n```\n:::\n\n### Divider Atributos\n| Atributo     | Descripción        | Tipo   | Valores aceptados | Por defecto |\n|-------------  |---------------- |---------------- |---------------------- |-------- |\n| direction      | indica la dirección del separador | string  |          horizontal / vertical           |    horizontal     |\n| content-position      | personaliza el contenido en la línea divisoria | String  |  left / right / center  |  center |"
  },
  {
    "path": "examples/docs/es/drawer.md",
    "content": "## Drawer\n\nA veces, `Dialog` no siempre satisface nuestros requisitos, digamos que tiene un formulario masivo, o necesita espacio para mostrar algo como `terminos & condiciones`, `Drawer` tiene una API casi idéntica a `Dialog`, pero introduce una experiencia de usuario diferente.\n\n### Uso básico\n\nLlamada de un drawer temporal, desde varias direcciones\n\n:::demo Debe establecer `visible` para `Drawer` como lo hace `Dialog` para controlar la visibilidad. `visible` es del tipo `boolean`. `Drawer` tiene partes: `title` & `body`, el `title` es un slot con nombre, también puede establecer el título a través de un atributo llamado `title`, por defecto a una cadena vacía, la parte `body` es el área principal de `Drawer`, que contiene contenido definido por el usuario. Al abrir, `Drawer` se expande desde la **esquina derecha a la izquierda** cuyo tamaño es **30%** de la ventana del navegador por defecto. Puede cambiar ese comportamiento predeterminado estableciendo los atributos `direction` y `size`. Este caso de demostración también muestra cómo utilizar la API `before-close`, consulte la sección Atributos para obtener más detalles.\n\n```html\n<el-radio-group v-model=\"direction\">\n  <el-radio label=\"ltr\">left to right</el-radio>\n  <el-radio label=\"rtl\">right to left</el-radio>\n  <el-radio label=\"ttb\">top to bottom</el-radio>\n  <el-radio label=\"btt\">bottom to top</el-radio>\n</el-radio-group>\n\n<el-button @click=\"drawer = true\" type=\"primary\" style=\"margin-left: 16px;\">\n  open\n</el-button>\n\n<el-drawer\n  title=\"I am the title\"\n  :visible.sync=\"drawer\"\n  :direction=\"direction\"\n  :before-close=\"handleClose\">\n  <span>Hi, there!</span>\n</el-drawer>\n\n<script>\n  export default {\n    data() {\n      return {\n        drawer: false,\n        direction: 'rtl',\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm('Are you sure you want to close this?')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Sin titulo\n\nSi no necesitas el titulo lo puedes eliminar del drawer.\n\n:::demo Asigne **false** al atributo `withHeader`, se puede eliminar el atributo title del drawer, de esa manera el drawer tendrá mas espacio para el contenido. Por razones de accesibilidad se recomienda asignar siempre un contenido valido al atributo `title`.\n\n```html\n<el-button @click=\"drawer = true\" type=\"primary\" style=\"margin-left: 16px;\">\n  open\n</el-button>\n\n<el-drawer\n  title=\"I am the title\"\n  :visible.sync=\"drawer\"\n  :with-header=\"false\">\n  <span>Hi there!</span>\n</el-drawer>\n\n<script>\n  export default {\n    data() {\n      return {\n        drawer: false,\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Personalizar el contenido\n\nAl igual que `Dialog`, `Drawer` puede hacer muchas interacciones diversas.\n\n:::demo\n\n```html\n<el-button type=\"text\" @click=\"table = true\">Open Drawer with nested table</el-button>\n<el-button type=\"text\" @click=\"dialog = true\">Open Drawer with nested form</el-button>\n<el-drawer\n  title=\"I have a nested table inside!\"\n  :visible.sync=\"table\"\n  direction=\"rtl\"\n  size=\"50%\">\n   <el-table :data=\"gridData\">\n      <el-table-column property=\"date\" label=\"Date\" width=\"150\"></el-table-column>\n      <el-table-column property=\"name\" label=\"Name\" width=\"200\"></el-table-column>\n      <el-table-column property=\"address\" label=\"Address\"></el-table-column>\n    </el-table>\n</el-drawer>\n\n<el-drawer\n  title=\"I have a nested form inside!\"\n  :before-close=\"handleClose\"\n  :visible.sync=\"dialog\"\n  direction=\"ltr\"\n  custom-class=\"demo-drawer\"\n  ref=\"drawer\"\n  >\n  <div class=\"demo-drawer__content\">\n    <el-form :model=\"form\">\n      <el-form-item label=\"Name\" :label-width=\"formLabelWidth\">\n        <el-input v-model=\"form.name\" autocomplete=\"off\"></el-input>\n      </el-form-item>\n      <el-form-item label=\"Area\" :label-width=\"formLabelWidth\">\n        <el-select v-model=\"form.region\" placeholder=\"Please select activity area\">\n          <el-option label=\"Area1\" value=\"shanghai\"></el-option>\n          <el-option label=\"Area2\" value=\"beijing\"></el-option>\n        </el-select>\n      </el-form-item>\n    </el-form>\n    <div class=\"demo-drawer__footer\">\n      <el-button @click=\"cancelForm\">Cancel</el-button>\n      <el-button type=\"primary\" @click=\"$refs.drawer.closeDrawer()\" :loading=\"loading\">{{ loading ? 'Submitting ...' : 'Submit' }}</el-button>\n    </div>\n  </div>\n</el-drawer>\n\n<script>\nexport default {\n  data() {\n    return {\n      table: false,\n      dialog: false,\n      loading: false,\n      gridData: [{\n        date: '2016-05-02',\n        name: 'Peter Parker',\n        address: 'Queens, New York City'\n      }, {\n        date: '2016-05-04',\n        name: 'Peter Parker',\n        address: 'Queens, New York City'\n      }, {\n        date: '2016-05-01',\n        name: 'Peter Parker',\n        address: 'Queens, New York City'\n      }, {\n        date: '2016-05-03',\n        name: 'Peter Parker',\n        address: 'Queens, New York City'\n      }],\n      form: {\n        name: '',\n        region: '',\n        date1: '',\n        date2: '',\n        delivery: false,\n        type: [],\n        resource: '',\n        desc: ''\n      },\n      formLabelWidth: '80px',\n      timer: null,\n    };\n  },\n  methods: {\n    handleClose(done) {\n      if (this.loading) {\n        return;\n      }\n      this.$confirm('Do you want to submit?')\n        .then(_ => {\n          this.loading = true;\n          this.timer = setTimeout(() => {\n            done();\n            // animation takes time\n            setTimeout(() => {\n              this.loading = false;\n            }, 400);\n          }, 2000);\n        })\n        .catch(_ => {});\n    },\n    cancelForm() {\n      this.loading = false;\n      this.dialog = false;\n      clearTimeout(this.timer);\n    }\n  }\n}\n</script>\n```\n:::\n\n### Drawer anidados\n\nTambién puede tener varias capas de `Drawer` al igual que con `Dialog`.\n:::demo Si necesita varios drawer en diferentes capas, debe establecer el atributo `append-to-body` en **true**\n\n```html\n\n<el-button @click=\"drawer = true\" type=\"primary\" style=\"margin-left: 16px;\">\n  open\n</el-button>\n\n<el-drawer\n  title=\"I'm outer Drawer\"\n  :visible.sync=\"drawer\"\n  size=\"50%\">\n  <div>\n   <el-button @click=\"innerDrawer = true\">Click me!</el-button>\n   <el-drawer\n     title=\"I'm inner Drawer\"\n     :append-to-body=\"true\"\n     :before-close=\"handleClose\"\n     :visible.sync=\"innerDrawer\">\n     <p>_(:зゝ∠)_</p>\n   </el-drawer>\n  </div>\n</el-drawer>\n\n<script>\n  export default {\n    data() {\n      return {\n        drawer: false,\n        innerDrawer: false,\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm('You still have unsaved data, proceed?')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n</script>\n\n```\n:::\n\n:::tip\n\nEl contenido dentro del Drawer debe ser renderizado de forma perezosa, lo que significa que el contenido dentro del Drawer no afectará al rendimiento inicial del renderizado, por lo que cualquier operación DOM debe realizarse a través de `ref' o después de que se emita el evento `open'.\n\n:::\n\n:::tip\n\nEl Drawer proporciona una API llamada \"destroyOnClose\", que es una variable de bandera que indica que debe destruir el contenido hijo dentro del Drawer después de que se haya cerrado. Puede utilizar esta API cuando necesite que su ciclo de vida \"mounted\" sea llamado cada vez que se abra el Cajón.\n\n:::\n\n:::tip\n\nSi la variable `visible` se gestiona en el almacén de Vuex, el `.sync` no puede funcionar correctamente. En este caso, elimine el modificador `.sync`, escuche los eventos `open` y `close` de Drawer, y envíe mutaciones Vuex para actualizar el valor de esa variable en los manejadores de eventos.\n\n:::\n\n### Atributos de Drawer\n\n| Parámetros | Descripción | Tipo   | Valores aceptados           | Por defecto |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| append-to-body | Los controles deberían insertar Drawer en el elemento DocumentBody, los Drawer anidados deben asignar este parámetro a **true** | boolean   | — | false |\n| before-close | Si está configurado, el procedimiento de cierre se detendrá. | function(done), done es un tipo de función que acepta un booleano como parámetro, una llamada hecha con true o sin parámetro abortará el procedimiento de cierre. | — | — |\n| close-on-press-escape | Indica si el Drawer puede cerrarse pulsando ESC | boolean | — | true |\n| custom-class | Nombre extra de clase para  Drawer | string | — | — |\n| destroy-on-close | Indica si los children deben ser destruidos después de cerrar el Drawer. | boolean | - | false |\n| modal | Mostrará una capa de sombra | boolean | — | true |\n| modal-append-to-body | Indica si se debe insertar una capa de sombreado en el elemento DocumentBody | boolean   | — | true |\n| direction | Dirección de apertura del Drawer | Direction | rtl / ltr / ttb / btt | rtl |\n| show-close | Se mostrará el botón de cerrar en la parte superior derecha del Drawer | boolean | — | true |\n| size | Tamaño del Drawer. Si el Drawer está en modo horizontal, afecta a la propiedad width, de lo contrario afecta a la propiedad height, cuando el tamaño es tipo `number`, describe el tamaño por unidad de píxeles; cuando el tamaño es tipo `string`, se debe usar con notación `x%`, de lo contrario se interpretará como unidad de píxeles. | number / string | - | '30%' |\n| title | El título del Drawer, también se puede establecer por slot con nombre, las descripciones detalladas se pueden encontrar en el formulario de slot. | string | — | — |\n| visible | Si se muestra el Drawer, también soporta la notación `.sync` | boolean | — | false |\n| wrapperClosable | Indica si el usuario puede cerrar el Drawer haciendo clic en la capa de sombreado. | boolean | - | true |\n| withHeader | Indica si la sección header existirá, por defecto es true, cuando es false no tienen efecto, ambos, `title attribute` y `title slot` | boolean | - | true |\n\n### Drawer Slot's\n\n| Nombre | Descripción |\n|------|--------|\n| — | El contenido del Drawer |\n| title | El titulo de la sección del Drawer |\n\n### Métodos Drawer\n\n| Nombre | Descripción |\n| ---- | ---  |\n| closeDrawer | Para cerrar el Drawer, este método llamará `before-close`. |\n\n### Eventos Drawer\n\n| Nombre | Descripción | Parámetros |\n|---------- |-------- |---------- |\n| open  | Se activa antes de que comience la animación de apertura del Drawer. | — |\n| opened  | Se activa cuando finaliza la animación de apertura del Drawer. | — |\n| close  | Se activa antes de que comience la animación de cierre del Drawer. | — |\n| closed | Se activa después de que finaliza la animación de cierre del Drawer. | — |\n"
  },
  {
    "path": "examples/docs/es/dropdown.md",
    "content": "## Dropdown\nMenú conmutable para visualizar listas de enlaces y acciones.\n\n### Uso básico\nPase el ratón por el menú desplegable para desplegarlo y obtener más acciones.\n\n:::demo El elemento desencadenante se representa con el slot predeterminado, y la parte desplegable se representa con el slot llamado dropdown. Por defecto, la lista desplegable se muestra cuando se pasa el ratón por encima del elemento desencadenante sin necesidad de hacer clic en él.\n\n```html\n<el-dropdown>\n  <span class=\"el-dropdown-link\">\n    Dropdown List<i class=\"el-icon-arrow-down el-icon--right\"></i>\n  </span>\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n```\n\n:::\n\n### Elemento detonante\n\nUtilizando un botón para activar la lista desplegable.\n\n:::demo Utilice `split-button` para dividir el elemento detonante en un grupo de botones, siendo el botón izquierdo un botón normal y el botón derecho el objetivo real de la detonación. Si desea insertar una línea de separación entre la posición tres y la posición cuatro, sólo añada un divisor de clase a la posición cuatro.\n\n```html\n<el-dropdown>\n  <el-button type=\"primary\">\n    Dropdown List<i class=\"el-icon-arrow-down el-icon--right\"></i>\n  </el-button>\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n    <el-dropdown-item>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n<el-dropdown split-button type=\"primary\" @click=\"handleClick\">\n  Dropdown List\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n    <el-dropdown-item>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown {\n    vertical-align: top;\n  }\n  .el-dropdown + .el-dropdown {\n    margin-left: 15px;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      handleClick() {\n        alert('button click');\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Cómo detonar el evento\n\nHaga clic en el elemento detonante o sobre él.\n\n:::demo Utilice el atributo `trigger`. Por defecto, es `hover`.\n\n```html\n<el-row class=\"block-col-2\">\n  <el-col :span=\"12\">\n    <span class=\"demonstration\">hover to trigger</span>\n    <el-dropdown>\n      <span class=\"el-dropdown-link\">\n        Dropdown List<i class=\"el-icon-arrow-down el-icon--right\"></i>\n      </span>\n      <el-dropdown-menu slot=\"dropdown\">\n        <el-dropdown-item icon=\"el-icon-plus\">Action 1</el-dropdown-item>\n        <el-dropdown-item icon=\"el-icon-circle-plus\">Action 2</el-dropdown-item>\n        <el-dropdown-item icon=\"el-icon-circle-plus-outline\">Action 3</el-dropdown-item>\n        <el-dropdown-item icon=\"el-icon-check\">Action 4</el-dropdown-item>\n        <el-dropdown-item icon=\"el-icon-circle-check\">Action 5</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n  <el-col :span=\"12\">\n    <span class=\"demonstration\">click to trigger</span>\n    <el-dropdown trigger=\"click\">\n      <span class=\"el-dropdown-link\">\n        Dropdown List<i class=\"el-icon-arrow-down el-icon--right\"></i>\n      </span>\n      <el-dropdown-menu slot=\"dropdown\">\n        <el-dropdown-item icon=\"el-icon-plus\">Action 1</el-dropdown-item>\n        <el-dropdown-item icon=\"el-icon-circle-plus\">Action 2</el-dropdown-item>\n        <el-dropdown-item icon=\"el-icon-circle-plus-outline\">Action 3</el-dropdown-item>\n        <el-dropdown-item icon=\"el-icon-check\">Action 4</el-dropdown-item>\n        <el-dropdown-item icon=\"el-icon-circle-check\">Action 5</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n</el-row>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n  .demonstration {\n    display: block;\n    color: #8492a6;\n    font-size: 14px;\n    margin-bottom: 20px;\n  }\n</style>\n```\n:::\n\n### Ocultamiento del menú\n\nUse `hide-on-click` para definir si el menú se cierra al hacer clic.\n\n:::demo El menú predeterminado se cerrará cuando haga clic en los elementos del menú, y se puede desactivar configurando `hide-on-click` como false.\n\n```html\n<el-dropdown :hide-on-click=\"false\">\n  <span class=\"el-dropdown-link\">\n    Dropdown List<i class=\"el-icon-arrow-down el-icon--right\"></i>\n  </span>\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n```\n:::\n\n### Evento command\n\nAl hacer clic en cada elemento desplegable se detona un evento cuyo parámetro es asignado por cada elemento.\n\n:::demo\n```html\n<el-dropdown @command=\"handleCommand\">\n  <span class=\"el-dropdown-link\">\n    Dropdown List<i class=\"el-icon-arrow-down el-icon--right\"></i>\n  </span>\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item command=\"a\">Action 1</el-dropdown-item>\n    <el-dropdown-item command=\"b\">Action 2</el-dropdown-item>\n    <el-dropdown-item command=\"c\">Action 3</el-dropdown-item>\n    <el-dropdown-item command=\"d\" disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item command=\"e\" divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      handleCommand(command) {\n        this.$message('click on item ' + command);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Tamaños\n\nAdemás del tamaño predeterminado, el componente Dropdown proporciona tres tamaños adicionales para que pueda elegir entre diferentes escenarios\n\n:::demo Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `small` o `mini`.\n\n```html\n<el-dropdown split-button type=\"primary\">\n  Default\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size=\"medium\" split-button type=\"primary\">\n  Medium\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size=\"small\" split-button type=\"primary\">\n  Small\n  <el-dropdown-menu slot=\"dropdown\">\n   <el-dropdown-item>Action 1</el-dropdown-item>\n   <el-dropdown-item>Action 2</el-dropdown-item>\n   <el-dropdown-item>Action 3</el-dropdown-item>\n   <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size=\"mini\" split-button type=\"primary\">\n  Mini\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n```\n:::\n\n\n### Dropdown atributos\n| Atributo      | Descripción                              | Tipo    | Valores aceptados                        | Por defecto |\n| ------------- | ---------------------------------------- | ------- | ---------------------------------------- | ----------- |\n| type          | tipo de botón de menú, consulte Componente`Button`, sólo funciona cuando `split-button` es true. | string  | —                                        | —           |\n| size          | tamaño del menú, también funciona en `split-button` | string  | medium / small / mini                    | —           |\n| split-button  | si se visualiza un grupo de botones      | boolean | —                                        | false       |\n| placement     | colocación del menú                      | string  | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-end  |\n| trigger       | cómo detonar                             | string  | hover/click                              | hover       |\n| hide-on-click | si se oculta el menú después de hacer clic en el elemento | boolean | —                                        | true        |\n| show-timeout  | Tiempo de retardo antes de mostrar un dropdown (solamente trabaja cuando se dispara `hover`) | number  | —                                        | 250         |\n| hide-timeout  | Tiempo de retardo antes de ocultar un dropdown (solamente trabaja cuando se dispara `hover`) | number  | —                                        | 150         |\n| tabindex      | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) de Dropdown | number              |          —         | 0           |\n| disabled      | si el desplegable está desactivado       | boolean | —                                      | false       |\n\n### Dropdown Slots\n\n| Nombre | Descripción |\n|------|--------|\n| — | contenido del Dropdown. Aviso: Debe ser un elemento html dom válido (ej. `<span>, <button>` etc.) o `el-component`, para adjuntar el listener trigger |\n| dropdown | contenido del menu Dropdown, normalmente es un elemento `<el-dropdown-menu>` |\n\n### Dropdown Eventos\n| Nombre         | Descripción                                                  | Parámetros                                       |\n| -------------- | ------------------------------------------------------------ | ------------------------------------------------ |\n| click          | si `split-button` es `true`, se activa al hacer clic en el botón izquierdo | —                                                |\n| command        | activa cuando se hace clic en un elemento desplegable        | el comando enviado desde el elemento desplegable |\n| visible-change | se activa cuando aparece/desaparece el desplegable           | true cuando aparece, y false de otro modo        |\n\n### Dropdown Menú Ítem Atributos\n| Atributo | Descripción                              | Tipo                 | Valores aceptados | Por defecto |\n| -------- | ---------------------------------------- | -------------------- | ----------------- | ----------- |\n| command  | un comando que se enviará al `command` callback del Dropdown | string/number/object | —                 | —           |\n| disabled | si el elemento está desactivado          | boolean              | —                 | false       |\n| divided  | si se visualiza un divisor               | boolean              | —                 | false       |\n| icon     | nombre de la clase del icono             | string               | —                 | —           |\n"
  },
  {
    "path": "examples/docs/es/empty.md",
    "content": "## Empty\n\nPlaceholder hints for empty states.\n\n### Basic usage\n\n:::demo\n\n```html\n<el-empty description=\"descrição\"></el-empty>\n```\n:::\n\n### Custom image\n\nUse `image` prop to set image URL.\n\n:::demo\n\n```html\n<el-empty image=\"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png\"></el-empty>\n```\n:::\n\n### Image size\n\nUse `image-size` prop to control image size.\n\n:::demo\n\n```html\n<el-empty :image-size=\"200\"></el-empty>\n```\n:::\n\n### Bottom content\n\nUse the default slot to insert content at the bottom.\n\n:::demo\n```html\n<el-empty>\n  <el-button type=\"primary\">Button</el-button>\n</el-empty>\n```\n:::\n\n### Empty Attributes\n| Attribute       | Description      | Type         | Acceptable Value    | Default Value   |\n|-------------  |---------------- |---------------- |---------------------- |-------- |\n| image          | image URL       | string  |          —             |    —     |\n| image-size    | image size (width)  | number | — |    —  |\n| description  | description    | string  |    —  |  — |\n\n### Empty Slots\n\n| Name | Description |\n|------|--------|\n| default | Custom bottom content  |\n| image | Custom image     |\n| description | Custom description     |\n"
  },
  {
    "path": "examples/docs/es/form.md",
    "content": "## Form\n\nForm consiste en `input`, `radio`, `select`, `checkbox`, etcétera. Con el formulario, usted puede recopilar, verificar y enviar datos.\n\n### Form básico\n\nIncluye todo tipo de entradas, tales como `input`, `select`, `radio` y `checkbox`.\n\n:::demo En cada componente `form`, necesita un campo `form-item` para que sea el contenedor del ítem.\n\n```html\n<el-form ref=\"form\" :model=\"form\" label-width=\"120px\">\n  <el-form-item label=\"Activity name\">\n    <el-input v-model=\"form.name\"></el-input>\n  </el-form-item>\n  <el-form-item label=\"Activity zone\">\n    <el-select v-model=\"form.region\" placeholder=\"please select your zone\">\n      <el-option label=\"Zone one\" value=\"shanghai\"></el-option>\n      <el-option label=\"Zone two\" value=\"beijing\"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label=\"Activity time\">\n    <el-col :span=\"11\">\n      <el-date-picker type=\"date\" placeholder=\"Pick a date\" v-model=\"form.date1\" style=\"width: 100%;\"></el-date-picker>\n    </el-col>\n    <el-col class=\"line\" :span=\"2\">-</el-col>\n    <el-col :span=\"11\">\n      <el-time-picker placeholder=\"Pick a time\" v-model=\"form.date2\" style=\"width: 100%;\"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label=\"Instant delivery\">\n    <el-switch v-model=\"form.delivery\"></el-switch>\n  </el-form-item>\n  <el-form-item label=\"Activity type\">\n    <el-checkbox-group v-model=\"form.type\">\n      <el-checkbox label=\"Online activities\" name=\"type\"></el-checkbox>\n      <el-checkbox label=\"Promotion activities\" name=\"type\"></el-checkbox>\n      <el-checkbox label=\"Offline activities\" name=\"type\"></el-checkbox>\n      <el-checkbox label=\"Simple brand exposure\" name=\"type\"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label=\"Resources\">\n    <el-radio-group v-model=\"form.resource\">\n      <el-radio label=\"Sponsor\"></el-radio>\n      <el-radio label=\"Venue\"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label=\"Activity form\">\n    <el-input type=\"textarea\" v-model=\"form.desc\"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type=\"primary\" @click=\"onSubmit\">Create</el-button>\n    <el-button>Cancel</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        form: {\n          name: '',\n          region: '',\n          date1: '',\n          date2: '',\n          delivery: false,\n          type: [],\n          resource: '',\n          desc: ''\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log('submit!');\n      }\n    }\n  }\n</script>\n```\n\n:::\n\n:::tip\n[W3C](https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2) reglamenta que\n\n> <i>Cuando sólo hay un campo de entrada de texto de una sola línea en un formulario, el agente usuario debe aceptar <b>Enter</b> en ese campo como una solicitud para enviar el formulario.</i>\n\nPara prevenir este comportamiento, puede agregar `@submit.native.prevent` on `<el-form>`.\n:::\n\n### Formulario inline\n\nCuando el espacio vertical es limitado y la forma es relativamente simple, puede ponerlo en una unica línea.\n\n:::demo Establezca el atributo `inline` como `true` y el formulario sera inline.\n\n```html\n<el-form :inline=\"true\" :model=\"formInline\" class=\"demo-form-inline\">\n  <el-form-item label=\"Approved by\">\n    <el-input v-model=\"formInline.user\" placeholder=\"Approved by\"></el-input>\n  </el-form-item>\n  <el-form-item label=\"Activity zone\">\n    <el-select v-model=\"formInline.region\" placeholder=\"Activity zone\">\n      <el-option label=\"Zone one\" value=\"shanghai\"></el-option>\n      <el-option label=\"Zone two\" value=\"beijing\"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item>\n    <el-button type=\"primary\" @click=\"onSubmit\">Query</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        formInline: {\n          user: '',\n          region: ''\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log('submit!');\n      }\n    }\n  }\n</script>\n```\n\n:::\n\n### Alineamiento\n\nDependiendo de su diseño, hay varias maneras diferentes de alinear el elemento de la etiqueta.\n\n:::demo El atributo `label-position` decide cómo se alinean las etiquetas, puede estar `top` o `left`. Cuando se establece en `top`, las etiquetas se colocarán en la parte superior del campo de formulario.\n\n```html\n<el-radio-group v-model=\"labelPosition\" size=\"small\">\n  <el-radio-button label=\"left\">Left</el-radio-button>\n  <el-radio-button label=\"right\">Right</el-radio-button>\n  <el-radio-button label=\"top\">Top</el-radio-button>\n</el-radio-group>\n<div style=\"margin: 20px;\"></div>\n<el-form :label-position=\"labelPosition\" label-width=\"100px\" :model=\"formLabelAlign\">\n  <el-form-item label=\"Name\">\n    <el-input v-model=\"formLabelAlign.name\"></el-input>\n  </el-form-item>\n  <el-form-item label=\"Activity zone\">\n    <el-input v-model=\"formLabelAlign.region\"></el-input>\n  </el-form-item>\n  <el-form-item label=\"Activity form\">\n    <el-input v-model=\"formLabelAlign.type\"></el-input>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        labelPosition: 'right',\n        formLabelAlign: {\n          name: '',\n          region: '',\n          type: ''\n        }\n      };\n    }\n  }\n</script>\n```\n\n:::\n\n### Validación\n\nEl componente `form` le permite verificar sus datos, ayudándole a encontrar y corregir errores.\n\n:::demo Sólo tiene que añadir el atributo `rules` en el componente `Form`, pasar las reglas de validación y establecer el atributo `prop` para `Form-Item` como una clave específica que necesita ser validada. Ver más información en [async-validator](https://github.com/yiminghe/async-validator).\n\n```html\n<el-form :model=\"ruleForm\" :rules=\"rules\" ref=\"ruleForm\" label-width=\"120px\" class=\"demo-ruleForm\">\n  <el-form-item label=\"Activity name\" prop=\"name\">\n    <el-input v-model=\"ruleForm.name\"></el-input>\n  </el-form-item>\n  <el-form-item label=\"Activity zone\" prop=\"region\">\n    <el-select v-model=\"ruleForm.region\" placeholder=\"Activity zone\">\n      <el-option label=\"Zone one\" value=\"shanghai\"></el-option>\n      <el-option label=\"Zone two\" value=\"beijing\"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label=\"Activity time\" required>\n    <el-col :span=\"11\">\n      <el-form-item prop=\"date1\">\n        <el-date-picker type=\"date\" placeholder=\"Pick a date\" v-model=\"ruleForm.date1\" style=\"width: 100%;\"></el-date-picker>\n      </el-form-item>\n    </el-col>\n    <el-col class=\"line\" :span=\"2\">-</el-col>\n    <el-col :span=\"11\">\n      <el-form-item prop=\"date2\">\n        <el-time-picker placeholder=\"Pick a time\" v-model=\"ruleForm.date2\" style=\"width: 100%;\"></el-time-picker>\n      </el-form-item>\n    </el-col>\n  </el-form-item>\n  <el-form-item label=\"Instant delivery\" prop=\"delivery\">\n    <el-switch v-model=\"ruleForm.delivery\"></el-switch>\n  </el-form-item>\n  <el-form-item label=\"Activity type\" prop=\"type\">\n    <el-checkbox-group v-model=\"ruleForm.type\">\n      <el-checkbox label=\"Online activities\" name=\"type\"></el-checkbox>\n      <el-checkbox label=\"Promotion activities\" name=\"type\"></el-checkbox>\n      <el-checkbox label=\"Offline activities\" name=\"type\"></el-checkbox>\n      <el-checkbox label=\"Simple brand exposure\" name=\"type\"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label=\"Resources\" prop=\"resource\">\n    <el-radio-group v-model=\"ruleForm.resource\">\n      <el-radio label=\"Sponsorship\"></el-radio>\n      <el-radio label=\"Venue\"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label=\"Activity form\" prop=\"desc\">\n    <el-input type=\"textarea\" v-model=\"ruleForm.desc\"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type=\"primary\" @click=\"submitForm('ruleForm')\">Create</el-button>\n    <el-button @click=\"resetForm('ruleForm')\">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        ruleForm: {\n          name: '',\n          region: '',\n          date1: '',\n          date2: '',\n          delivery: false,\n          type: [],\n          resource: '',\n          desc: ''\n        },\n        rules: {\n          name: [\n            { required: true, message: 'Please input Activity name', trigger: 'blur' },\n            { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }\n          ],\n          region: [\n            { required: true, message: 'Please select Activity zone', trigger: 'change' }\n          ],\n          date1: [\n            { type: 'date', required: true, message: 'Please pick a date', trigger: 'change' }\n          ],\n          date2: [\n            { type: 'date', required: true, message: 'Please pick a time', trigger: 'change' }\n          ],\n          type: [\n            { type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change' }\n          ],\n          resource: [\n            { required: true, message: 'Please select activity resource', trigger: 'change' }\n          ],\n          desc: [\n            { required: true, message: 'Please input activity form', trigger: 'blur' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n</script>\n```\n\n:::\n\n### Reglas personalizadas de validación\n\nEste ejemplo muestra cómo personalizar sus propias reglas de validación para finalizar una verificación de contraseña de dos pasos.\n\n:::demo Aquí utilizamos el `status-icon` para reflejar el resultado de la validación como un icono.\n\n```html\n<el-form :model=\"ruleForm\" status-icon :rules=\"rules\" ref=\"ruleForm\" label-width=\"120px\" class=\"demo-ruleForm\">\n  <el-form-item label=\"Password\" prop=\"pass\">\n    <el-input type=\"password\" v-model=\"ruleForm.pass\" autocomplete=\"off\"></el-input>\n  </el-form-item>\n  <el-form-item label=\"Confirm\" prop=\"checkPass\">\n    <el-input type=\"password\" v-model=\"ruleForm.checkPass\" autocomplete=\"off\"></el-input>\n  </el-form-item>\n  <el-form-item label=\"Age\" prop=\"age\">\n    <el-input v-model.number=\"ruleForm.age\"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type=\"primary\" @click=\"submitForm('ruleForm')\">Submit</el-button>\n    <el-button @click=\"resetForm('ruleForm')\">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      var checkAge = (rule, value, callback) => {\n        if (!value) {\n          return callback(new Error('Please input the age'));\n        }\n        setTimeout(() => {\n          if (!Number.isInteger(value)) {\n            callback(new Error('Please input digits'));\n          } else {\n            if (value < 18) {\n              callback(new Error('Age must be greater than 18'));\n            } else {\n              callback();\n            }\n          }\n        }, 1000);\n      };\n      var validatePass = (rule, value, callback) => {\n        if (value === '') {\n          callback(new Error('Please input the password'));\n        } else {\n          if (this.ruleForm.checkPass !== '') {\n            this.$refs.ruleForm.validateField('checkPass');\n          }\n          callback();\n        }\n      };\n      var validatePass2 = (rule, value, callback) => {\n        if (value === '') {\n          callback(new Error('Please input the password again'));\n        } else if (value !== this.ruleForm.pass) {\n          callback(new Error('Two inputs don\\'t match!'));\n        } else {\n          callback();\n        }\n      };\n      return {\n        ruleForm: {\n          pass: '',\n          checkPass: '',\n          age: ''\n        },\n        rules: {\n          pass: [\n            { validator: validatePass, trigger: 'blur' }\n          ],\n          checkPass: [\n            { validator: validatePass2, trigger: 'blur' }\n          ],\n          age: [\n            { validator: checkAge, trigger: 'blur' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n</script>\n```\n\n:::\n\n:::tip\nSe debe llamar a la función de validación de llamada de retorno personalizada. Ver uso más avanzado en [async-validator](https://github.com/yiminghe/async-validator).\n:::\n\n### Eliminar o agregar validaciones dinámicamente\n\n:::demo Además de pasar todas las reglas de validación al mismo tiempo en el componente `form`, también puede pasar las reglas de validación o borrar reglas en un único campo de formulario de forma dinámica.\n\n```html\n<el-form :model=\"dynamicValidateForm\" ref=\"dynamicValidateForm\" label-width=\"120px\" class=\"demo-dynamic\">\n  <el-form-item\n    prop=\"email\"\n    label=\"Email\"\n    :rules=\"[\n      { required: true, message: 'Please input email address', trigger: 'blur' },\n      { type: 'email', message: 'Please input correct email address', trigger: ['blur', 'change'] }\n    ]\"\n  >\n    <el-input v-model=\"dynamicValidateForm.email\"></el-input>\n  </el-form-item>\n  <el-form-item\n    v-for=\"(domain, index) in dynamicValidateForm.domains\"\n    :label=\"'Domain' + index\"\n    :key=\"domain.key\"\n    :prop=\"'domains.' + index + '.value'\"\n    :rules=\"{\n      required: true, message: 'domain can not be null', trigger: 'blur'\n    }\"\n  >\n    <el-input v-model=\"domain.value\"></el-input><el-button @click.prevent=\"removeDomain(domain)\">Delete</el-button>\n  </el-form-item>\n  <el-form-item>\n    <el-button type=\"primary\" @click=\"submitForm('dynamicValidateForm')\">Submit</el-button>\n    <el-button @click=\"addDomain\">New domain</el-button>\n    <el-button @click=\"resetForm('dynamicValidateForm')\">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        dynamicValidateForm: {\n          domains: [{\n            key: 1,\n            value: ''\n          }],\n          email: ''\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      },\n      removeDomain(item) {\n        var index = this.dynamicValidateForm.domains.indexOf(item);\n        if (index !== -1) {\n          this.dynamicValidateForm.domains.splice(index, 1);\n        }\n      },\n      addDomain() {\n        this.dynamicValidateForm.domains.push({\n          key: Date.now(),\n          value: ''\n        });\n      }\n    }\n  }\n</script>\n```\n\n:::\n\n### Validación numérica\n\n:::demo La validación numérica necesita un modificador `.number` añadido en el enlace `v-model` de entrada, sirve para transformar el valor de la cadena al número proporcionado por Vuejs.\n\n```html\n<el-form :model=\"numberValidateForm\" ref=\"numberValidateForm\" label-width=\"100px\" class=\"demo-ruleForm\">\n  <el-form-item\n    label=\"age\"\n    prop=\"age\"\n    :rules=\"[\n      { required: true, message: 'age is required'},\n      { type: 'number', message: 'age must be a number'}\n    ]\"\n  >\n    <el-input v-model.number=\"numberValidateForm.age\" autocomplete=\"off\"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type=\"primary\" @click=\"submitForm('numberValidateForm')\">Submit</el-button>\n    <el-button @click=\"resetForm('numberValidateForm')\">Reset</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        numberValidateForm: {\n          age: ''\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n</script>\n```\n\n:::\n\n:::tip\n\nCuando un `el-form-item` está anidado en otro `el-form-item`, su ancho de etiqueta será 0. Si es necesario, puede establecer el ancho de etiqueta en ese `el-form-item`.\n\n:::\n\n### Tamaño del control\n\nTodos los componentes de un formulario heredan su atributo `size`. De manera similar, FormItem también tiene un atributo `size`.\n\n:::demo Aún así, puede ajustar el `size` de cada componente si no desea que herede su tamaño de From o FormItem.\n\n```html\n<el-form ref=\"form\" :model=\"sizeForm\" label-width=\"120px\" size=\"mini\">\n  <el-form-item label=\"Activity name\">\n    <el-input v-model=\"sizeForm.name\"></el-input>\n  </el-form-item>\n  <el-form-item label=\"Activity zone\">\n    <el-select v-model=\"sizeForm.region\" placeholder=\"please select your zone\">\n      <el-option label=\"Zone one\" value=\"shanghai\"></el-option>\n      <el-option label=\"Zone two\" value=\"beijing\"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label=\"Activity time\">\n    <el-col :span=\"11\">\n      <el-date-picker type=\"date\" placeholder=\"Pick a date\" v-model=\"sizeForm.date1\" style=\"width: 100%;\"></el-date-picker>\n    </el-col>\n    <el-col class=\"line\" :span=\"2\">-</el-col>\n    <el-col :span=\"11\">\n      <el-time-picker placeholder=\"Pick a time\" v-model=\"sizeForm.date2\" style=\"width: 100%;\"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label=\"Activity type\">\n    <el-checkbox-group v-model=\"sizeForm.type\">\n      <el-checkbox-button label=\"Online activities\" name=\"type\"></el-checkbox-button>\n      <el-checkbox-button label=\"Promotion activities\" name=\"type\"></el-checkbox-button>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label=\"Resources\">\n    <el-radio-group v-model=\"sizeForm.resource\" size=\"medium\">\n      <el-radio border label=\"Sponsor\"></el-radio>\n      <el-radio border label=\"Venue\"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item size=\"large\">\n    <el-button type=\"primary\" @click=\"onSubmit\">Create</el-button>\n    <el-button>Cancel</el-button>\n  </el-form-item>\n</el-form>\n\n<script>\n  export default {\n    data() {\n      return {\n        sizeForm: {\n          name: '',\n          region: '',\n          date1: '',\n          date2: '',\n          delivery: false,\n          type: [],\n          resource: '',\n          desc: ''\n        }\n      };\n    },\n    methods: {\n      onSubmit() {\n        console.log('submit!');\n      }\n    }\n  };\n</script>\n```\n\n:::\n\n### Form Atributos\n\n| Atributo                | Descripción                              | Tipo    | Valores aceptados     | Por defecto |\n| ----------------------- | ---------------------------------------- | ------- | --------------------- | ----------- |\n| model                   | Datos del componente                     | object  | —                     | —           |\n| rules                   | Reglas de validación                     | object  | —                     | —           |\n| inline                  | Si el form es inline                     | boolean | —                     | false       |\n| label-position          | Posición de la etiqueta          | string  | left / right / top    | right       |\n| label-width             | anchura de la etiqueta, por ejemplo, \"50px\". Todos sus elementos de formulario hijo directo heredarán este valor. El valor `auto` está soportado. | string | — | — |\n| label-suffix            | sufijo de la etiqueta                    | string  | —                     | —           |\n| hide-required-asterisk       | si los campos obligatorios deben tener un asterisco rojo (estrella) al lado de sus etiquetas | boolean | — | false |\n| show-message            | si mostrar o no el mensaje de error      | boolean | —                     | true        |\n| inline-message          | si desea visualizar el mensaje de error inline con la posición del form item | boolean | —                     | false       |\n| status-icon             | si desea visualizar un icono que indique el resultado de la validación | boolean | —                     | false       |\n| validate-on-rule-change | si se dispara la validación cuando el prop `rules` cambia | boolean | —                     | true        |\n| size                    | el tamaño de los componentes en este form | string  | medium / small / mini | —           |\n| disabled                | si se desactivan todos los componentes del formulario. Si esta en `true` no puede ser cambiado por el prop `disabled` individual de los componentes. | boolean | —                     | false       |\n\n### Form Métodos\n\n| Método        | Descripción                                                  | Parámetros                                                   |\n| ------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |\n| validate      | el método para validar todo el formulario. Recibe una llamada como parámetro. Después de la validación, la llamada de retorno se ejecutará con dos parámetros: un booleano que indica si la validación ha pasado, y un objeto que contiene todos los campos que fallaron en la validación. Devuelve una promesa si se omite el return | Function(callback: Function(boolean, object))                |\n| validateField | validar uno o varios elementos de formulario                 | Function(props: string \\| array, callback: Function(errorMessage: string)) |\n| resetFields   | restablece todos los campos y elimina el resultado de validación | —                                                            |\n| clearValidate | borra el mensaje de validación para determinados campos. El parámetro es un prop name o un array de props names de los items del formulario cuyos mensajes de validación se eliminarán. Si se omiten, se borrarán todos los mensajes de validación de los campos. | Function(props: string \\| array)                             |\n\n\n### Eventos Form\n\n| Nombre   | Descripción                                          | Parámetros                                                   |\n| -------- | ---------------------------------------------------- | ------------------------------------------------------------ |\n| validate | se dispara después de validar un ítem del formulario | la propiedad (`prop name`) nombre del ítem del form que se esta validando, si la validación paso o no, y el mensaje de error si existe. |\n\n### Form-Item Atributos\n\n| Atributo       | Descripción                                                  | Tipo    | Valores aceptados                           | Por defecto |\n| -------------- | ------------------------------------------------------------ | ------- | ------------------------------------------- | ----------- |\n| prop           | un clave del modelo. En el uso del método `validate` y `resetFields`, el atributo es obligatorio. | string  | Clave del modelo que se ha pasado a  `form` |             |\n| label          | etiqueta                                                     | string  | —                                           | —           |\n| label-width    | ancho de la etiqueta, Ejemplo: '50px'. El valor `auto` esta soportado | string  | —                                           | —           |\n| required       | si el campo es obligatorio o no, estará determinado por las reglas de validación si se omite. | boolean | —                                           | false       |\n| rules          | reglas de validación del form                                | object  | —                                           | —           |\n| error          | mensaje de error de campo, establezca su valor y el campo validará el error y mostrará este mensaje inmediatamente. | string  | —                                           | —           |\n| show-message   | si mostrar o no el mensaje de error                          | boolean | —                                           | true        |\n| inline-message | mensaje de validación estilo inline                          | boolean | —                                           | false       |\n| size           | Tamaño de los componentes en este form item                  | string  | medium / small / mini                       | -           |\n\n### Form-Item Slot\n\n| Nombre | Descripción              |\n| ------ | ------------------------ |\n| —      | contenido del Form Item  |\n| label  | contenido de la etiqueta |\n\n### Form-Item Scoped Slot\n\n| Name  | Description                                                  |\n| ----- | ------------------------------------------------------------ |\n| error | Contenido personalizado para mostrar el mensaje de validación. El parámetro del scope es { error } |\n\n### Form-Item Método\n\n| Método        | Descripción                                                 | Parámetros |\n| ------------- | ----------------------------------------------------------- | ---------- |\n| resetField    | restablecer campo actual y eliminar resultado de validación | —          |\n| clearValidate | elimina el estado de la validación de un campo              | -          |\n"
  },
  {
    "path": "examples/docs/es/i18n.md",
    "content": "## Internacionalización\n\nEl idioma predeterminado de Element es el chino. Si se desea utilizar otro idioma, será necesario realizar alguna configuración de i18n. En su fichero de entrada, si está importando Element por completo:\n\n```javascript\nimport Vue from 'vue'\nimport ElementUI from 'element-ui'\nimport locale from 'element-ui/lib/locale/lang/en'\n\nVue.use(ElementUI, { locale })\n```\n\nO si está importando Element a petición:\n\n```javascript\nimport Vue from 'vue'\nimport { Button, Select } from 'element-ui'\nimport lang from 'element-ui/lib/locale/lang/en'\nimport locale from 'element-ui/lib/locale'\n\n// configure language\nlocale.use(lang)\n\n// import components\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n```\n\nEl paquete de idioma chino se importa por defecto, incluso si se esta usando otro idioma. Pero con `NormalModuleReplacementPlugin` proporcionado por el webpack puede reemplazar la localización predeterminada:\n\nwebpack.config.js\n```javascript\n{\n  plugins: [\n    new webpack.NormalModuleReplacementPlugin(/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/, 'element-ui/lib/locale/lang/en')\n  ]\n}\n```\n\n## Compatible con `vue-i18n@5.x`\n\nElement es compatible con [vue-i18n@5.x](https://github.com/kazupon/vue-i18n), lo que facilita aún más la conmutación multilenguaje.\n\n```javascript\nimport Vue from 'vue'\nimport VueI18n from 'vue-i18n'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\nVue.use(Element)\n\nVue.config.lang = 'zh-cn'\nVue.locale('zh-cn', zhLocale)\nVue.locale('en', enLocale)\n```\n\n## Compatible con otros plugins i18n\nEs posible que Element no sea compatible con otros plugins i18n que no sean vue-i18n, pero puede personalizar la forma en que Element procesa i18n.\n\n```javascript\nimport Vue from 'vue'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(Element, {\n  i18n: function (path, options) {\n    // ...\n  }\n})\n```\n\n## Compatible con `vue-i18n@6.x`\n\nNecesita manejarlo manualmente para ser compatible con `6.x`.\n\n```javascript\nimport Vue from 'vue'\nimport Element from 'element-ui'\nimport VueI18n from 'vue-i18n'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\n\nconst messages = {\n  en: {\n    message: 'hello',\n    ...enLocale // Or use `Object.assign({ message: 'hello' }, enLocale)`\n  },\n  zh: {\n    message: '你好',\n    ...zhLocale // Or use `Object.assign({ message: '你好' }, zhLocale)`\n  }\n}\n// Create VueI18n instance with options\nconst i18n = new VueI18n({\n  locale: 'en', // set locale\n  messages, // set locale messages\n})\n\nVue.use(Element, {\n  i18n: (key, value) => i18n.t(key, value)\n})\n\nnew Vue({ i18n }).$mount('#app')\n```\n\n## Personalización de i18n en componentes bajo petición\n\n```js\nimport Vue from 'vue'\nimport DatePicker from 'element/lib/date-picker'\nimport VueI18n from 'vue-i18n'\n\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\nimport ElementLocale from 'element-ui/lib/locale'\n\nVue.use(VueI18n)\nVue.use(DatePicker)\n\nconst messages = {\n  en: {\n    message: 'hello',\n    ...enLocale\n  },\n  zh: {\n    message: '你好',\n    ...zhLocale\n  }\n}\n// Create VueI18n instance with options\nconst i18n = new VueI18n({\n  locale: 'en', // set locale\n  messages, // set locale messages\n})\n\nElementLocale.i18n((key, value) => i18n.t(key, value))\n```\n\n## Importar via CDN\n\n```html\n<script src=\"//unpkg.com/vue@2\"></script>\n<script src=\"//unpkg.com/element-ui\"></script>\n<script src=\"//unpkg.com/element-ui/lib/umd/locale/en.js\"></script>\n\n<script>\n  ELEMENT.locale(ELEMENT.lang.en)\n</script>\n```\n\nCompatible con `vue-i18n`\n\n```html\n<script src=\"//unpkg.com/vue@2\"></script>\n<script src=\"//unpkg.com/vue-i18n/dist/vue-i18n.js\"></script>\n<script src=\"//unpkg.com/element-ui\"></script>\n<script src=\"//unpkg.com/element-ui/lib/umd/locale/zh-CN.js\"></script>\n<script src=\"//unpkg.com/element-ui/lib/umd/locale/en.js\"></script>\n\n<script>\n  Vue.locale('en', ELEMENT.lang.en)\n  Vue.locale('zh-cn', ELEMENT.lang.zhCN)\n</script>\n```\n\nActualmente Element está disponible en los siguientes idiomas:\n<ul class=\"language-list\">\n  <li>Simplified Chinese (zh-CN)</li>\n  <li>English (en)</li>\n  <li>German (de)</li>\n  <li>Portuguese (pt)</li>\n  <li>Spanish (es)</li>\n  <li>Danish (da)</li>\n  <li>French (fr)</li>\n  <li>Norwegian (nb-NO)</li>\n  <li>Traditional Chinese (zh-TW)</li>\n  <li>Italian (it)</li>\n  <li>Korean (ko)</li>\n  <li>Japanese (ja)</li>\n  <li>Dutch (nl)</li>\n  <li>Vietnamese (vi)</li>\n  <li>Russian (ru-RU)</li>\n  <li>Turkish (tr-TR)</li>\n  <li>Brazilian Portuguese (pt-br)</li>\n  <li>Farsi (fa)</li>\n  <li>Thai (th)</li>\n  <li>Indonesian (id)</li>\n  <li>Bulgarian (bg)</li>\n  <li>Polish (pl)</li>\n  <li>Finnish (fi)</li>\n  <li>Swedish (sv-SE)</li>\n  <li>Greek (el)</li>\n  <li>Slovak (sk)</li>\n  <li>Catalunya (ca)</li>\n  <li>Czech (cs-CZ)</li>\n  <li>Ukrainian (ua)</li>\n  <li>Turkmen (tk)</li>\n  <li>Tamil (ta)</li>\n  <li>Latvian (lv)</li>\n  <li>Afrikaans (af-ZA)</li>\n  <li>Estonian (ee)</li>\n  <li>Slovenian (sl)</li>\n  <li>Arabic (ar)</li>\n  <li>Hebrew (he)</li>\n  <li>Lithuanian (lt)</li>\n  <li>Mongolian (mn)</li>\n  <li>Kazakh (kz)</li>\n  <li>Hungarian (hu)</li>\n  <li>Romanian (ro)</li>\n  <li>Kurdish (ku)</li>\n  <li>Uighur (ug-CN)</li>\n  <li>Khmer (km)</li>\n  <li>Serbian (sr)</li>\n  <li>Vasco (eu)</li>\n  <li>Kirguizstán (kg)</li>\n  <li>Armenio (hy)</li>\n  <li>Croatian (hr)</li>\n  <li>Esperanto (eo)</li>\n</ul>\n\nSi su idioma de destino no está incluido, puede contribuir: simplemente añada  [aqui](https://github.com/ElemeFE/element/tree/dev/src/locale/lang) otra configuración de idioma y cree un pull request.\n"
  },
  {
    "path": "examples/docs/es/icon.md",
    "content": "## Icon\n\nElement proporciona un conjunto de iconos propios.\n\n### Uso básico\n\nSimplemente asigna el nombre de la clase a `el-icon-iconName`.\n\n:::demo\n\n```html\n<i class=\"el-icon-edit\"></i>\n<i class=\"el-icon-share\"></i>\n<i class=\"el-icon-delete\"></i>\n<el-button type=\"primary\" icon=\"el-icon-search\">Search</el-button>\n\n```\n:::\n\n### Iconos\n\n<ul class=\"icon-list\">\n  <li v-for=\"name in $icon\" :key=\"name\">\n    <span>\n      <i :class=\"'el-icon-' + name\"></i>\n      <span class=\"icon-name\">{{'el-icon-' + name}}</span>\n    </span>\n  </li>\n</ul>\n"
  },
  {
    "path": "examples/docs/es/image.md",
    "content": "## Image\nAdemás de las características nativas de img, soporte de carga perezosa, marcador de posición personalizado y fallo de carga, etc.\n\n### Uso básico\n\n:::demo Indica cómo se debe cambiar el tamaño de la imagen para que se ajuste a su contenedor por ajuste, igual que el ajuste de objeto nativo. [object-fit](https://developer.mozilla.org/es/docs/Web/CSS/object-fit)。\n\n```html\n<div class=\"demo-image\">\n  <div class=\"block\" v-for=\"fit in fits\" :key=\"fit\">\n    <span class=\"demonstration\">{{ fit }}</span>\n    <el-image\n      style=\"width: 100px; height: 100px\"\n      :src=\"url\"\n      :fit=\"fit\"></el-image>\n  </div>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],\n        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Placeholder\n\n:::demo Personalice el placeholder del contenido mientras la imagen aun no ha sido cargada vía `slot = placeholder`\n```html\n<div class=\"demo-image__placeholder\">\n  <div class=\"block\">\n    <span class=\"demonstration\">Default</span>\n    <el-image :src=\"src\"></el-image>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Custom</span>\n    <el-image :src=\"src\">\n      <div slot=\"placeholder\" class=\"image-slot\">\n        Loading<span class=\"dot\">...</span>\n      </div>\n    </el-image>\n  </div>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Fallo de carga\n\n:::demo Personalice el contenido cuando ocurra algún error al cargar la imagen vía `slot = error`\n```html\n<div class=\"demo-image__error\">\n  <div class=\"block\">\n    <span class=\"demonstration\">Default</span>\n    <el-image></el-image>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Custom</span>\n    <el-image>\n      <div slot=\"error\" class=\"image-slot\">\n        <i class=\"el-icon-picture-outline\"></i>\n      </div>\n    </el-image>\n  </div>\n</div>\n```\n:::\n\n### Lazy Load\n\n:::demo Use lazy load vía `lazy = true`. La imagen se cargará hasta que se desplace a la vista cuando esté configurada. Puede indicar el contenedor de scroll que añade el oyente de scroll vía `scroll-container`. Si no está definido, será el contenedor padre más cercano cuya propiedad overflow es auto o scroll.\n\n```html\n<div class=\"demo-image__lazy\">\n  <el-image v-for=\"url in urls\" :key=\"url\" :src=\"url\" lazy></el-image>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        urls: [\n          'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',\n          'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',\n          'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',\n          'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',\n          'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',\n          'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',\n          'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'\n        ]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Vista previa de la imagen\n\n:::demo permitir una vista previa grande de la imagen configurando la prop `previewSrcList`.\n```html\n<div class=\"demo-image__preview\">\n  <el-image \n    style=\"width: 100px; height: 100px\"\n    :src=\"url\" \n    :preview-src-list=\"srcList\">\n  </el-image>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',\n        srcList: [\n          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',\n          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'\n        ]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Atributos\n| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |\n|---------- |-------- |---------- |-------------  |-------- |\n| src | origen de la imagen, igual que en nativo | string | — | - |\n| fit | Indica como la imagen debe adaptarse al contenedor, lo mismo que [object-fit](https://developer.mozilla.org/es/docs/Web/CSS/object-fit) | string | fill / contain / cover / none / scale-down | - |\n| alt | alt nativo | string | - | - |\n| referrer-policy | referrerPolicy nativo | string | - | - |\n| lazy | si se usara lazy load | boolean | — | false |\n| scroll-container | El contenedor para añadir el scroll listener cuando se utiliza lazy load | string / HTMLElement | — | El contenedor padre más cercano cuya propiedad de desbordamiento es auto o scroll |\n| preview-src-list | permitir una vista previa grande de la imagen | Array | — | - |\n| z-index | establecer el z-index de la vista previa de la imagen | Number | — | 2000 |\n| initial-index | set image preview array index | Number | — | - |\n\n### Eventos\n| Nombre del evento | Descripción | Parámetros |\n|---------- |-------- |---------- |\n| load | Igual que el load nativo | (e: Event) |\n| error | Igual que el error nativo | (e: Error) |\n\n### Slots\n| Nombre del slot | Descripción |\n|---------|-------------|\n| placeholder | Se activa cuando la imagen se carga |\n| error | Se activa cuando la carga de la imagen falla |\n\n\n"
  },
  {
    "path": "examples/docs/es/infiniteScroll.md",
    "content": "## InfiniteScroll\n\nCargar más datos mientras se llega al final de la página\n\n### Uso básico\nAñada `v-infinite-scroll` a la lista para ejecutar automáticamente el método de carga cuando se desplace hacia abajo.\n:::demo\n\n```html\n<template>\n  <ul class=\"infinite-list\" v-infinite-scroll=\"load\" style=\"overflow:auto\">\n    <li v-for=\"i in count\" class=\"infinite-list-item\">{{ i }}</li>\n  </ul>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        count: 0\n      }\n    },\n    methods: {\n      load () {\n        this.count += 2\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Deshabilite Loading\n\n:::demo\n```html\n<template>\n  <div class=\"infinite-list-wrapper\" style=\"overflow:auto\">\n    <ul\n      class=\"list\"\n      v-infinite-scroll=\"load\"\n      infinite-scroll-disabled=\"disabled\">\n      <li v-for=\"i in count\" class=\"list-item\">{{ i }}</li>\n    </ul>\n    <p v-if=\"loading\">Loading...</p>\n    <p v-if=\"noMore\">No more</p>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        count: 10,\n        loading: false\n      }\n    },\n    computed: {\n      noMore () {\n        return this.count >= 20\n      },\n      disabled () {\n        return this.loading || this.noMore\n      }\n    },\n    methods: {\n      load () {\n        this.loading = true\n        setTimeout(() => {\n          this.count += 2\n          this.loading = false\n        }, 2000)\n      }\n    }\n  }\n</script>\n```\n:::\n\n\n### Atributos\n\n| Atributos | Descripción | Tipo | Valores aceptados | Por defecto |\n| -------------- | ------------------------------ | --------- | ------------------------------------ | ------- |\n| infinite-scroll-disabled | si esta disabled | boolean      | - |false |\n| infinite-scroll-delay   | retraso en mili segundos | number       |   - |200   |\n| infinite-scroll-distance| distancia de activación (px) | number   |- |0 |\n| infinite-scroll-immediate |Si se debe ejecutar el método de carga inmediatamente, en caso de que el contenido no se pueda rellenar en el estado inicial. | boolean | - |true |\n"
  },
  {
    "path": "examples/docs/es/input-number.md",
    "content": "## InputNumber\n\nInput de  valores numéricos con un rango personalizable.\n\n### Uso básico\n\n:::demo Vincule una variable con `v-model` en el elemento `<el-input-number>` y estará listo.\n\n```html\n<template>\n  <el-input-number v-model=\"num\" @change=\"handleChange\" :min=\"1\" :max=\"10\"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value)\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Disabled\n\n:::demo El atributo `disabled` acepta un valor `boolean`, y si el valor es `true`, el componente queda deshabilitado. Si sólo necesita controlar el valor dentro de un rango, puede añadir un atributo `min` para establecer el valor mínimo y un valor `max` para establecer el valor máximo. Por defecto, el valor mínimo es `0`.\n\n```html\n<template>\n  <el-input-number v-model=\"num\" :disabled=\"true\"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num: 1\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Steps\n\nLe permite definir el nivel de incremento de los saltos.\n\n:::demo Añada el atributo `step` para establecer el salto.\n\n```html\n<template>\n  <el-input-number v-model=\"num\" :step=\"2\"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num: 5\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Step estrictamente\n\n:::demo El atributo `step-strictly` acepta `boolean`. Si este atributo es `true`, el valor de entrada sólo puede ser múltiplo de step.\n\n```html\n<template>\n  <el-input-number v-model=\"num\" :step=\"2\" step-strictly></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num: 2\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Precisión\n\n:::demo El atributo `precision` aplica presición al valor del value.\n\n```html\n<template>\n  <el-input-number v-model=\"num\" :precision=\"2\" :step=\"0.1\" :max=\"10\"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num: 1\n      }\n    }\n  };\n</script>\n```\n\n:::\n\n:::tip\nEl valor de `precision` debe ser un numero entero positivo que no debe ser inferior a los decimales del `step`.\n\n:::\n\n### Tamaño\n\nUtilice el atributo `size` para establecer tamaños adicionales con `medium`, `small` o `mini`.\n\n:::demo\n\n```html\n<template>\n  <el-input-number v-model=\"num1\"></el-input-number>\n    <el-input-number size=\"medium\" v-model=\"num2\"></el-input-number>\n    <el-input-number size=\"small\" v-model=\"num3\"></el-input-number>\n    <el-input-number size=\"mini\" v-model=\"num4\"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num1: 1,\n        num2: 1,\n        num3: 1,\n        num4: 1\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Posición de los controles\n\n:::demo Establezca `controls-position` para decidir la posición de los botones de control.\n\n```html\n<template>\n  <el-input-number v-model=\"num\" controls-position=\"right\" @change=\"handleChange\" :min=\"1\" :max=\"10\"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Atributos\n\n| Atributo          | Descripción                              | Tipo    | Valores aceptados | Por defecto |\n| ----------------- | ---------------------------------------- | ------- | ----------------- | ----------- |\n| value / v-model    | valor vinculado                          | number  | —                 | 0           |\n| min               | el valor mínimo permitido                | number  | —                 | `-Infinity`  |\n| max               | el valor máximo permitido          | number  | —                 | `Infinity`  |\n| step              | incremento (salto)                       | number  | —                 | 1           |\n| step-strictly  | si el valor del input puede ser solo un múltiplo de step | boolean  | —                 | false       |\n| precision         | precisión del valor del input | number  | —                 | —           |\n| size              | tamaño del componente                    | string  | large/small       | —           |\n| disabled          | si el componente esta deshabilitado      | boolean | —                 | false       |\n| controls          | si se activan los botones de control     | boolean | —                 | true        |\n| controls-position | posición de los botones de control       | string  | right             | -           |\n| name              | lo mismo que `name` en un input nativo   | string  | —                 | —           |\n| label             | texto de la etiqueta                     | string  | —                 | —           |\n| placeholder | placeholder en el input | string | - | - |\n\n### Eventos\n\n| Nombre | Descripción                              | Parámetros         |\n| ------ | ---------------------------------------- | ------------------ |\n| change | se produce cuando el valor cambia        | currentValue, oldValue |\n| blur   | se produce cuando el componente pierde el foco | (event: Event)     |\n| focus  | se produce cuando el componente obtiene el foco | (event: Event)     |\n\n### Métodos\n| Método | Descripción                          | Parámetro |\n| ------ | ------------------------------------ | --------- |\n| focus  | coloca el foco en el elemento actual | -         |\n| select | selecciona el contenido del input        | -          |\n\n"
  },
  {
    "path": "examples/docs/es/input.md",
    "content": "## Input\n\nIngresa datos usando el ratón o teclado.\n\n:::warning\nInput es un componente controlado, **siempre muestra el valor de enlace Vue**.\n\nBajo circunstancias normales, el evento \"input\" debe ser manejado. Su handler debe actualizar el valor de enlace del componente (o usar `v-model`). De lo contrario, el valor del cuadro de entrada no cambiará.\n\nNo admite modificadores `v-model`.\n:::\n\n### Uso básico\n\n:::demo\n\n```html\n<el-input placeholder=\"Please input\" v-model=\"input\"></el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input: ''\n    }\n  }\n}\n</script>\n```\n\n:::\n\n### Disabled\n\n:::demo Deshabilite el Input con el atributo `disabled`.\n\n```html\n<el-input\n  placeholder=\"Please input\"\n  v-model=\"input\"\n  :disabled=\"true\">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input: ''\n    }\n  }\n}\n</script>\n```\n\n:::\n\n### Limpiable\n\n:::demo Marque que el input puede ser limpiable con el atributo `clearable`.\n\n```html\n<el-input\n  placeholder=\"Please input\"\n  v-model=\"input\"\n  clearable>\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input: ''\n    }\n  }\n}\n</script>\n```\n:::\n\n### Password box\n\n:::demo Haga un input de contraseña conmutable con el atributo `show-password`.\n\n```html\n<el-input placeholder=\"Please input password\" v-model=\"input\" show-password></el-input>\n\n<script>\n  export default {\n    data() {\n      return {\n        input: ''\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Input con icono\n\nAñada un icono para indicar el tipo de Input.\n\n:::demo Para añadir iconos en el Input, puede utilizar los atributos `prefix-icon` y `suffix-icon` . Además, los slots con nombre `prefix` y `suffix` también funcionan.\n\n```html\n<div class=\"demo-input-suffix\">\n  <span class=\"demo-input-label\">Using attributes</span>\n  <el-input\n    placeholder=\"Pick a date\"\n    suffix-icon=\"el-icon-date\"\n    v-model=\"input1\">\n  </el-input>\n  <el-input\n    placeholder=\"Type something\"\n    prefix-icon=\"el-icon-search\"\n    v-model=\"input2\">\n  </el-input>\n</div>\n<div class=\"demo-input-suffix\">\n  <span class=\"demo-input-label\">Using slots</span>\n  <el-input\n    placeholder=\"Pick a date\"\n    v-model=\"input3\">\n    <i slot=\"suffix\" class=\"el-input__icon el-icon-date\"></i>\n  </el-input>\n  <el-input\n    placeholder=\"Type something\"\n    v-model=\"input4\">\n    <i slot=\"prefix\" class=\"el-input__icon el-icon-search\"></i>\n  </el-input>\n</div>\n\n<style>\n  .demo-input-label {\n    display: inline-block;\n    width: 130px;\n  }\n</style>\n\n<script>\nexport default {\n  data() {\n    return {\n      input1: '',\n      input2: '',\n      input3: '',\n      input4: ''\n    }\n  }\n}\n</script>\n```\n\n:::\n\n### Textarea\n\nRe dimensiona para introducir varias líneas de información de texto. Agregue el atributo `type=\"textarea\"` para cambiar el `input` al tipo nativo `textarea`.\n\n:::demo Controle la altura ajustando el prop `rows`.\n\n```html\n<el-input\n  type=\"textarea\"\n  :rows=\"2\"\n  placeholder=\"Please input\"\n  v-model=\"textarea\">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      textarea: ''\n    }\n  }\n}\n</script>\n```\n\n:::\n\n### Textarea tamaño automático\n\nEl ajuste del prop `autosize` en el tipo de Input textarea hace que la altura se ajuste automáticamente en función del contenido. Se puede proporcionar opciones en un objeto para auto dimensionar y especificar el número mínimo y máximo de líneas que el textarea puede ajustar automáticamente.\n\n:::demo\n\n```html\n<el-input\n  type=\"textarea\"\n  autosize\n  placeholder=\"Please input\"\n  v-model=\"textarea1\">\n</el-input>\n<div style=\"margin: 20px 0;\"></div>\n<el-input\n  type=\"textarea\"\n  :autosize=\"{ minRows: 2, maxRows: 4}\"\n  placeholder=\"Please input\"\n  v-model=\"textarea2\">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      textarea1: '',\n      textarea2: ''\n    }\n  }\n}\n</script>\n```\n\n:::\n\n### Mezclando elementos con input\n\nAñade un elemento antes o después del input, generalmente una etiqueta o un botón.\n\n:::demo Utilice el `slot` para seleccionar si el elemento se colocara antes (prepend) o después (append) del Input.\n\n```html\n<div>\n  <el-input placeholder=\"Please input\" v-model=\"input1\">\n    <template slot=\"prepend\">Http://</template>\n  </el-input>\n</div>\n<div style=\"margin-top: 15px;\">\n  <el-input placeholder=\"Please input\" v-model=\"input2\">\n    <template slot=\"append\">.com</template>\n  </el-input>\n</div>\n<div style=\"margin-top: 15px;\">\n  <el-input placeholder=\"Please input\" v-model=\"input3\" class=\"input-with-select\">\n    <el-select v-model=\"select\" slot=\"prepend\" placeholder=\"Select\">\n      <el-option label=\"Restaurant\" value=\"1\"></el-option>\n      <el-option label=\"Order No.\" value=\"2\"></el-option>\n      <el-option label=\"Tel\" value=\"3\"></el-option>\n    </el-select>\n    <el-button slot=\"append\" icon=\"el-icon-search\"></el-button>\n  </el-input>\n</div>\n\n<style>\n  .el-select .el-input {\n    width: 110px;\n  }\n  .input-with-select .el-input-group__prepend {\n    background-color: #fff;\n  }\n</style>\n<script>\nexport default {\n  data() {\n    return {\n      input1: '',\n      input2: '',\n      input3: '',\n      select: ''\n    }\n  }\n}\n</script>\n```\n\n:::\n\n### Tamaño\n\n:::demo Añada el atributo `size` para cambiar el tamaño del Input. Además del tamaño predeterminado, hay otras tres opciones: `medium`, `small` y `mini`.\n\n```html\n<div class=\"demo-input-size\">\n  <el-input\n    placeholder=\"Please Input\"\n    v-model=\"input1\">\n  </el-input>\n  <el-input\n    size=\"medium\"\n    placeholder=\"Please Input\"\n    v-model=\"input2\">\n  </el-input>\n  <el-input\n    size=\"small\"\n    placeholder=\"Please Input\"\n    v-model=\"input3\">\n  </el-input>\n  <el-input\n    size=\"mini\"\n    placeholder=\"Please Input\"\n    v-model=\"input4\">\n  </el-input>\n</div>\n\n<script>\nexport default {\n  data() {\n    return {\n      input1: '',\n      input2: '',\n      input3: '',\n      input4: ''\n    }\n  }\n}\n</script>\n```\n\n:::\n\n### Autocompletado\n\nPuede obtener algunas sugerencias basadas en la entrada actual.\n\n:::demo El componente Autocomplete proporciona sugerencias de entrada. El atributo `fetch-suggestions` es un método que devuelve la entrada sugerida. En este ejemplo, `querySearch(queryString, cb)` devuelve las sugerencias al componente mediante `cb(data)` cuando están listas.\n\n```html\n<el-row class=\"demo-autocomplete\">\n  <el-col :span=\"12\">\n    <div class=\"sub-title\">list suggestions when activated</div>\n    <el-autocomplete\n      class=\"inline-input\"\n      v-model=\"state1\"\n      :fetch-suggestions=\"querySearch\"\n      placeholder=\"Please Input\"\n      @select=\"handleSelect\"\n    ></el-autocomplete>\n  </el-col>\n  <el-col :span=\"12\">\n    <div class=\"sub-title\">list suggestions on input</div>\n    <el-autocomplete\n      class=\"inline-input\"\n      v-model=\"state2\"\n      :fetch-suggestions=\"querySearch\"\n      placeholder=\"Please Input\"\n      :trigger-on-focus=\"false\"\n      @select=\"handleSelect\"\n    ></el-autocomplete>\n  </el-col>\n</el-row>\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state1: '',\n        state2: ''\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n        // call callback function to return suggestions\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { \"value\": \"vue\", \"link\": \"https://github.com/vuejs/vue\" },\n          { \"value\": \"element\", \"link\": \"https://github.com/ElemeFE/element\" },\n          { \"value\": \"cooking\", \"link\": \"https://github.com/ElemeFE/cooking\" },\n          { \"value\": \"mint-ui\", \"link\": \"https://github.com/ElemeFE/mint-ui\" },\n          { \"value\": \"vuex\", \"link\": \"https://github.com/vuejs/vuex\" },\n          { \"value\": \"vue-router\", \"link\": \"https://github.com/vuejs/vue-router\" },\n          { \"value\": \"babel\", \"link\": \"https://github.com/babel/babel\" }\n         ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  }\n</script>\n```\n\n:::\n\n### Template personalizado\n\nPersonalice cómo se muestran las sugerencias.\n\n:::demo Utilice `scoped slot` para personalizar los elementos de sugerencias. En el scope, puede acceder al objeto de sugerencia mediante la clave `item`.\n\n```html\n<el-autocomplete\n  popper-class=\"my-autocomplete\"\n  v-model=\"state\"\n  :fetch-suggestions=\"querySearch\"\n  placeholder=\"Please input\"\n  @select=\"handleSelect\">\n  <i\n    class=\"el-icon-edit el-input__icon\"\n    slot=\"suffix\"\n    @click=\"handleIconClick\">\n  </i>\n  <template slot-scope=\"{ item }\">\n    <div class=\"value\">{{ item.value }}</div>\n    <span class=\"link\">{{ item.link }}</span>\n  </template>\n</el-autocomplete>\n\n<style>\n  .my-autocomplete {\n    li {\n      line-height: normal;\n      padding: 7px;\n\n      .value {\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n      .link {\n        font-size: 12px;\n        color: #b4b4b4;\n      }\n    }\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state: ''\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n        // call callback function to return suggestion objects\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { \"value\": \"vue\", \"link\": \"https://github.com/vuejs/vue\" },\n          { \"value\": \"element\", \"link\": \"https://github.com/ElemeFE/element\" },\n          { \"value\": \"cooking\", \"link\": \"https://github.com/ElemeFE/cooking\" },\n          { \"value\": \"mint-ui\", \"link\": \"https://github.com/ElemeFE/mint-ui\" },\n          { \"value\": \"vuex\", \"link\": \"https://github.com/vuejs/vuex\" },\n          { \"value\": \"vue-router\", \"link\": \"https://github.com/vuejs/vue-router\" },\n          { \"value\": \"babel\", \"link\": \"https://github.com/babel/babel\" }\n         ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      },\n      handleIconClick(ev) {\n        console.log(ev);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  }\n</script>\n```\n\n:::\n\n### Búsqueda remota\n\nBúsqueda de datos desde el servidor.\n\n:::demo\n\n```html\n<el-autocomplete\n  v-model=\"state\"\n  :fetch-suggestions=\"querySearchAsync\"\n  placeholder=\"Please input\"\n  @select=\"handleSelect\"\n></el-autocomplete>\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state: '',\n        timeout:  null\n      };\n    },\n    methods: {\n      loadAll() {\n        return [\n          { \"value\": \"vue\", \"link\": \"https://github.com/vuejs/vue\" },\n          { \"value\": \"element\", \"link\": \"https://github.com/ElemeFE/element\" },\n          { \"value\": \"cooking\", \"link\": \"https://github.com/ElemeFE/cooking\" },\n          { \"value\": \"mint-ui\", \"link\": \"https://github.com/ElemeFE/mint-ui\" },\n          { \"value\": \"vuex\", \"link\": \"https://github.com/vuejs/vuex\" },\n          { \"value\": \"vue-router\", \"link\": \"https://github.com/vuejs/vue-router\" },\n          { \"value\": \"babel\", \"link\": \"https://github.com/babel/babel\" }\n         ];\n      },\n      querySearchAsync(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n\n        clearTimeout(this.timeout);\n        this.timeout = setTimeout(() => {\n          cb(results);\n        }, 3000 * Math.random());\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  };\n</script>\n```\n\n:::\n\n### Limitar el tamaño\n\n:::demo `maxlength` y `minlength` son atributos de la entrada nativa, declaran un límite en el número de caracteres que un usuario puede introducir. La configuración de la pro `maxlength` para un tipo de entrada de texto o de área de texto puede limitar la longitud del valor de entrada y le permite mostrar el recuento de palabras al establecer `show-word-limit` a `true` al mismo tiempo.\n\n```html\n<el-input\n  type=\"text\"\n  placeholder=\"Please input\"\n  v-model=\"text\"\n  maxlength=\"10\"\n  show-word-limit\n>\n</el-input>\n<div style=\"margin: 20px 0;\"></div>\n<el-input\n  type=\"textarea\"\n  placeholder=\"Please input\"\n  v-model=\"textarea\"\n  maxlength=\"30\"\n  show-word-limit\n>\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      text: '',\n      textarea: ''\n    }\n  }\n}\n</script>\n```\n:::\n\n### Input atributos\n\n| Atributo      | Descripción                                                                                                                                      | Tipo             | Valores aceptados                                                                                                                       | Por defecto |\n| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| type          | tipo de input                                                                                                                                    | string           | text, textarea y otros [tipos de entrada nativos](https://developer.mozilla.org/es/docs/Web/HTML/Elemento/input#Form_%3Cinput%3E_types) | text        |\n| value / v-model | valor enlazado                          | boolean / string / number | —                       | —           |\n| maxlength     | igual que `maxlength` en el input nativo                                                                                                         | number           | —                                                                                                                                       | —           |\n| minlength     | igual que `minlength` en el input nativo                                                                                                         | number           | —                                                                                                                                       | —           |\n| show-word-limit | Si se muestra el contador de palabras, solamente funciona con los tipos `text` o `textarea` | boolean    |  —  | false |\n| placeholder   | placeholder del Input                                                                                                                            | string           | —                                                                                                                                       | —           |\n| clearable | si debe mostrar el botón de limpieza | boolean | — | false |\n| show-password | si debe mostrar la posibilidad de conmutación de password input | boolean         | — | false |\n| disabled      | si esta deshabilitado                                                                                                                            | boolean          | —                                                                                                                                       | false       |\n| size          | tamaño del input, esto no funciona cuando `type` no es textarea                                                                                  | string           | medium / small / mini                                                                                                                   | —           |\n| prefix-icon   | clase del icono de prefijo                                                                                                                       | string           | —                                                                                                                                       | —           |\n| suffix-icon   | clase del icono de sufijo                                                                                                                        | string           | —                                                                                                                                       | —           |\n| rows          | número de filas, sólo funciona cuando `type` es `textarea`.                                                                                    | number           | —                                                                                                                                       | 2           |\n| autosize      | si textarea tiene una altura adaptativa, sólo funciona cuando el`type` es `textarea`. Puede aceptar un objeto, p. ej. { minRows: 2, maxRows: 6 } | boolean / object | —                                                                                                                                       | false       |\n| autocomplete  | igual que `autocomplete` en el input nativo                                                                                                      | string           | on/off                                                                                                                                  | off         |\n| auto-complete | @DEPRECATED en el próximo cambio mayor de versión                                                                                  | string           | on/off                                                                                                                                  | off         |\n| name          | igual que `name` en el input nativo                                                                                                              | string           | —                                                                                                                                       | —           |\n| readonly      | igual que `readonly` en el input nativo                                                                                                          | boolean          | —                                                                                                                                       | false       |\n| max           | igual que `max` en el input nativo                                                                                                               | —                | —                                                                                                                                       | —           |\n| min           | igual que `min` en el input nativo                                                                                                               | —                | —                                                                                                                                       | —           |\n| step          | igual que `step` en el input nativo                                                                                                              | —                | —                                                                                                                                       | —           |\n| resize        | control para el dimensionamiento                                                                                                                 | string           | none, both, horizontal, vertical                                                                                                        | —           |\n| autofocus     | igual que `autofocus` en el input nativo                                                                                                         | boolean          | —                                                                                                                                       | false       |\n| form          | igual que `form` en el input nativo                                                                                                              | string           | —                                                                                                                                       | —           |\n| label         | texto de la etiqueta                                                                                                                             | string           | —                                                                                                                                       | —           |\n| tabindex      | orden de tabulación para el Input                                                                                                               | string           | -                                                                                                                                       | -           |\n\n### Input slots\n\n| Nombre  | Descripción                          |\n| ------- | ------------------------------------ |\n| prefix  | contenido como prefijo del input     |\n| suffix  | contenido como sufijo del input      |\n| prepend | contenido antes del input            |\n| append  | contenido a añadir después del input |\n\n### Input eventos\n\n| Nombre | Descripción                                                  | Parámetros                |\n| ------ | ------------------------------------------------------------ | ------------------------- |\n| blur   | Se dispara cuando se pierde el foco                          | (event: Event)            |\n| focus  | Se dispara cuando se obtiene el foco                         | (event: Event)            |\n| change | se activa solo cuando el cuadro de entrada pierde el foco o el usuario presiona Enter | (value: string \\| number) |\n| input  | se activa cuando cambia el valor de entrada                  | (value: string \\| number) |\n| clear  | se dispara cuando la entrada es borrada por el botón generado por el atributo `clearable`. | —                         |\n\n### Input Métodos\n\n| Método | Descripción                   | Parámetros |\n| ------ | ----------------------------- | ---------- |\n| focus  | coloca el foco en el elemento | —          |\n| blur   | quita el foco del elemento    | —          |\n| select | selecciona el texto del input | —          |\n\n### Autocomplete Atributos\n\n| Atributo              | Descripción                                                                                                                                        | Tipo                            | Opciones                                                       | Por defecto  |\n| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | -------------------------------------------------------------- | ------------ |\n| placeholder           | el placeholder del Autocomplete                                                                                                                    | string                          | —                                                              | —            |\n| disabled              | si el Autocompete esta deshabilitado                                                                                                               | boolean                         | —                                                              | false        |\n| value-key             | nombre del campo del objeto de sugerencia del input para la visualización                                                                          | string                          | —                                                              | value        |\n| icon                  | nombre del icono                                                                                                                                   | string                          | —                                                              | —            |\n| value                 | valor enlazado                                                                                                                                     | string                          | —                                                              | —            |\n| debounce              | retardo al escribir, en milisegundos                                                                                                               | number                          | —                                                              | 300          |\n| placement             | ubicación del menú emergente                                                                                                                       | string                          | top / top-start / top-end / bottom / bottom-start / bottom-end | bottom-start |\n| fetch-suggestions     | un método para obtener las sugerencias del input. Cuando las sugerencias estén listas, invocar `callback(data:[])` para devolverlas a Autocomplete | Function(queryString, callback) | —                                                              | —            |\n| popper-class          | nombre personalizado de clase para el dropdown de autocomplete                                                                                     | string                          | —                                                              | —            |\n| trigger-on-focus      | si se deben mostrar sugerencias cuando el input obtiene el foco                                                                                    | boolean                         | —                                                              | true         |\n| name                  | igual que `name` en el input nativo                                                                                                                | string                          | —                                                              | —            |\n| select-when-unmatched | si se emite un evento `select` al pulsar enter cuando no hay coincidencia de Autocomplete                                                          | boolean                         | —                                                              | false        |\n| label                 | texto de la etiqueta                                                                                                                               | string                          | —                                                              | —            |\n| prefix-icon           | prefix icon class                                                                                                                                  | string                          | —                                                              | —            |\n| suffix-icon           | suffix icon class                                                                                                                                  | string                          | —                                                              | —            |\n| hide-loading          | si se debe ocultar el icono de loading en la búsqueda remota                                                                                       | boolean                         | —                                                              | false        |\n| popper-append-to-body | si añadir el desplegable al cuerpo. Si la posición del menú desplegable es incorrecta, puede intentar establecer este prop a false                 | boolean                         | -                                                              | true         |\n| validate-event        | si se debe lanzar la validación de formulario                                                                                                                 | boolean                         | -                                                   | true         |\n| highlight-first-item | si se debe resaltar el primer elemento en las sugerencias de búsqueda remota de forma predeterminada                 | boolean                         | -                                                              | false         |\n\n### Autocomplete Slots\n\n| Nombre  | Descripción                          |\n| ------- | ------------------------------------ |\n| prefix  | contenido como prefijo del input     |\n| suffix  | contenido como sufijo del input      |\n| prepend | contenido antes del input            |\n| append  | contenido a añadir después del input |\n\n### Autocomplete Scoped Slot\n\n| Nombre | Descripción                                                  |\n| ------ | ------------------------------------------------------------ |\n| —      | Contenido personalizado para el input de sugerencias. El parámetro del scope es { ítem } |\n\n### Autocomplete Eventos\n\n| Nombre | Descripción                                     | Parámetros                                 |\n| ------ | ----------------------------------------------- | ------------------------------------------ |\n| select | se dispara cuando se hace clic a una sugerencia | sugerencia en la que se está haciendo clic |\n| change | se activa cuando cambia el valor de entrada     | (value: string \\| number)                  |\n\n### Autocomplete Método\n\n| Método | Descripción                   | Parámetros |\n| ------ | ----------------------------- | ---------- |\n| focus  | coloca el foco en el elemento | —          |\n"
  },
  {
    "path": "examples/docs/es/installation.md",
    "content": "## Instalación\n\n### npm\n\nInstalar mediante npm es la forma recomendada ya que se integra fácilmente con [webpack](https://webpack.js.org/).\n\n```shell\nnpm i element-ui -S\n```\n\n### CDN\n\nObtenga la última versión desde [unpkg.com/element-ui](https://unpkg.com/element-ui/) , e importe el JavaScript y los archivos CSS en su página.\n\n```html\n<!-- import CSS -->\n<link rel=\"stylesheet\" href=\"https://unpkg.com/element-ui/lib/theme-chalk/index.css\">\n<!-- import JavaScript -->\n<script src=\"https://unpkg.com/element-ui/lib/index.js\"></script>\n```\n\n##Tip\nRecomendamos a nuestros usuarios congelar la versión de Element cuando usas un CDN. Por favor, refiérase a [unpkg.com](https://unpkg.com) para más información.\n\n### Hello world\n\nSi esta usando un CDN, una página con Hello-World es fácil con Element. [Online Demo](https://codepen.io/bofeng/pen/poaEmJY)\n\n<iframe height=\"265\" style=\"width: 100%;\" scrolling=\"no\" title=\"Element demo\" src=\"//codepen.io/bofeng/embed/poaEmJY/?height=265&theme-id=light&default-tab=html,result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href='https://codepen.io/bofeng/pen/poaEmJY/'>Element demo</a> by hetech\n  (<a href='https://codepen.io/bofeng'>@bofeng</a>) on <a href='https://codepen.io'>CodePen</a>.\n</iframe>\n\nSi esta usando npm y desea combinarlo con webpack, por favor continué a la siguiente página: [Quick Start](/#/es/component/quickstart)\n"
  },
  {
    "path": "examples/docs/es/layout.md",
    "content": "## Layout\n\nRápido y fácilmente crea un layout básico con 24 columnas.\n\n### Layout básico\n\nCrea un layout básico usando columnas.\n\n:::demo Con `row` y `col`, puede fácilmente manipular el layout usando el atributo `span`.\n```html\n<el-row>\n  <el-col :span=\"24\"><div class=\"grid-content bg-purple-dark\"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span=\"12\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"12\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span=\"8\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"8\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"8\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n```\n:::\n\n### Espaciado de columnas\n\nEl espaciado de columnas está soportado.\n\n:::demo Row provee el atributo `gutter` para especificar el espacio entre columnas y su valor por defecto es 0.\n```html\n<el-row :gutter=\"20\">\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n```\n:::\n\n### Layout híbrido\n\nCrea un complejo layout híbrido combinando el básico de 1/24 columnas.\n\n:::demo\n```html\n<el-row :gutter=\"20\">\n  <el-col :span=\"16\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"8\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row :gutter=\"20\">\n  <el-col :span=\"8\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"8\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row :gutter=\"20\">\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"16\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n```\n:::\n\n### Offset de columnas\n\nPuedes especificar offsets para las columnas.\n\n:::demo Puedes especificar el offset para una columna mediante el atributo `offset` de Col.\n\n```html\n<el-row :gutter=\"20\">\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\" :offset=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row :gutter=\"20\">\n  <el-col :span=\"6\" :offset=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\" :offset=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row :gutter=\"20\">\n  <el-col :span=\"12\" :offset=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n```\n:::\n\n### Alineación\n\nUsa flex layout para un alineamiento flexible de columnas.\n\n:::demo Puede habilitar flex layout asignando el atributo `type` a 'flex', y definir el layout de elementos hijos asignando el atributo `justify` con los valores start, center, end, space-between o space-around.\n```html\n<el-row type=\"flex\" class=\"row-bg\">\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row type=\"flex\" class=\"row-bg\" justify=\"center\">\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row type=\"flex\" class=\"row-bg\" justify=\"end\">\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row type=\"flex\" class=\"row-bg\" justify=\"space-between\">\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row type=\"flex\" class=\"row-bg\" justify=\"space-around\">\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n```\n:::\n\n### Responsive Layout\n\nTomando el ejemplo de Bootstrap responsive design, existen 5 breakpoints: xs, sm, md, lg y xl.\n\n:::demo\n```html\n<el-row :gutter=\"10\">\n  <el-col :xs=\"8\" :sm=\"6\" :md=\"4\" :lg=\"3\" :xl=\"1\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :xs=\"4\" :sm=\"6\" :md=\"8\" :lg=\"9\" :xl=\"11\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :xs=\"4\" :sm=\"6\" :md=\"8\" :lg=\"9\" :xl=\"11\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :xs=\"8\" :sm=\"6\" :md=\"4\" :lg=\"3\" :xl=\"1\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n</el-row>\n\n<style>\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n</style>\n```\n:::\n\n### Clases útiles para ocultar elementos\n\nAdicionalmente, Element provee una serie de clases para ocultar elementos dadas ciertas condiciones. Estas clases pueden se agregadas a cualquier elemento del DOM o un elemento propio. Necesita importar el siguiente archivo CSS para usar estas clases:\n\n```js\nimport 'element-ui/lib/theme-chalk/display.css';\n```\n\nLas clases son:\n- `hidden-xs-only` - oculto en viewports extra pequeños solamente\n- `hidden-sm-only` - oculto en viewports pequeños solamente\n- `hidden-sm-and-down` - oculto en viewports pequeños y menores\n- `hidden-sm-and-up` - oculto en viewports pequeños y superiores \n- `hidden-md-only` - oculto en viewports medios solamente\n- `hidden-md-and-down` - oculto en viewports medios y menores\n- `hidden-md-and-up` - oculto en viewports medios y mayores\n- `hidden-lg-only` - ocultos en viewports grandes solamente \n- `hidden-lg-and-down` - ocultos en viewports grandes y menores\n- `hidden-lg-and-up` - ocultos en viewports grandes y superiores\n- `hidden-xl-only` - oculto en viewports extra grandes solamente\n\n### Atributos Row \n\n| Atributos | Descripción                              | Tipo   | Valores aceptados                        | Valor por defecto |\n| --------- | ---------------------------------------- | ------ | ---------------------------------------- | ----------------- |\n| gutter    | espaciado de la grilla                   | number | —                                        | 0                 |\n| type      | modo del layout , puedes usar flex, funciona en navegadores modernos | string | —                                        | —                 |\n| justify   | alineación horizontal del layout flex    | string | start/end/center/space-around/space-between | start             |\n| align     | alineación vertical del layout flex      | string | top/middle/bottom                        | —                |\n| tag       | tag de elemento propio                   | string | *                                        | div               |\n\n### Atributos Col \n\n| Atributos | Descripción                                                  | Tipo                                      | Valores aceptados | Valor por defecto |\n| --------- | ------------------------------------------------------------ | ----------------------------------------- | ----------------- | ----------------- |\n| span      | número de columnas que abarca la cuadrícula                  | number                                    | —                 | 24                |\n| offset    | especifica el espacio en el lado izquierdo del grill         | number                                    | —                 | 0                 |\n| push      | número de columnas que la grilla se mueve hacia la derecha   | number                                    | —                 | 0                 |\n| pull      | número de columnas que la grilla se mueve hacia la izquierda | number                                    | —                 | 0                 |\n| xs        | `<768px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | —                 | —                 |\n| sm        | `≥768px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | —                 | —                 |\n| md        | `≥992px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | —                 | —                 |\n| lg        | `≥1200px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | —                 | —                 |\n| xl        | `≥1920px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | —                 | —                 |\n| tag       | tag de elemento propio                                       | string                                    | *                 | div               |\n\n\n"
  },
  {
    "path": "examples/docs/es/link.md",
    "content": "## Link\n\nTexto con hipervínculo\n\n### Básico\n\nTexto con hipervínculo básico\n:::demo\n\n```html\n<div>\n  <el-link href=\"https://element.eleme.io\" target=\"_blank\">default</el-link>\n  <el-link type=\"primary\">primary</el-link>\n  <el-link type=\"success\">success</el-link>\n  <el-link type=\"warning\">warning</el-link>\n  <el-link type=\"danger\">danger</el-link>\n  <el-link type=\"info\">info</el-link>\n</div>\n```\n\n:::\n\n### Deshabilitar\n\nDeshabilita el hipervínculo\n:::demo\n\n```html\n<div>\n  <el-link disabled>default</el-link>\n  <el-link type=\"primary\" disabled>primary</el-link>\n  <el-link type=\"success\" disabled>success</el-link>\n  <el-link type=\"warning\" disabled>warning</el-link>\n  <el-link type=\"danger\" disabled>danger</el-link>\n  <el-link type=\"info\" disabled>info</el-link>\n</div>\n```\n\n:::\n\n### Subrayado\n\nSubrayado del hipervínculo\n:::demo\n\n```html\n<div>\n  <el-link :underline=\"false\">Without Underline</el-link>\n  <el-link>With Underline</el-link>\n</div>\n```\n\n:::\n\n### Icono\n\nHipervínculo con icono\n:::demo\n\n```html\n<div>\n  <el-link icon=\"el-icon-edit\">Edit</el-link>\n  <el-link>Check<i class=\"el-icon-view el-icon--right\"></i> </el-link>\n</div>\n```\n\n:::\n\n### Atributos\n\n| Atributo  | Descripción                                          | Tipo    | Opciones                                    | Por defecto |\n| --------- | ---------------------------------------------------- | ------- | ------------------------------------------- | ----------- |\n| type      | tipo                                                 | string  | primary / success / warning / danger / info | default     |\n| underline | si el hipervínculo estará subrayado                  | boolean | —                                           | true        |\n| disabled  | si el componente esta deshabilitado                  | boolean | —                                           | false       |\n| href      | lo mismo que el valor nativo del hipervínculo `href` | string  | —                                           | -           |\n| icon      | nombre de clase del icono                            | string  | —                                           | -           |\n"
  },
  {
    "path": "examples/docs/es/loading.md",
    "content": "## Cargando\n\nSe muestra la animación mientras se cargan los datos.\n\n### Cargando dentro de un contenedor\n\nMuestra una animación en un contenedor (como en una tabla) mientras se cargan los datos.\n\n:::demo Element provee dos maneras para invocar el componente de Cargando: por directiva y por servicio. Para la directiva personalizada `v-loading`, solo necesitas enlazarlo a un valor `Boolean`. Por defecto, la máscara de carga se agregará al elemento donde se usa la directiva. Al agregar el modificador `body`, la máscara se agrega al elemento body.\n\n```html\n<template>\n  <el-table\n    v-loading=\"loading\"\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  body {\n    margin: 0;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: 'John Smith',\n          address: 'No.1518,  Jinshajiang Road, Putuo District'\n        }, {\n          date: '2016-05-04',\n          name: 'John Smith',\n          address: 'No.1518,  Jinshajiang Road, Putuo District'\n        }, {\n          date: '2016-05-01',\n          name: 'John Smith',\n          address: 'No.1518,  Jinshajiang Road, Putuo District'\n        }],\n        loading: true\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Personalización\n\nPuede personalizar el texto de carga, spinner de carga y color de fondo.\n\n:::demo Agregue el atributo `element-loading-text` al elemento en el que `v-loading` está vinculado, y su valor se mostrará debajo del spinner. Del mismo modo, `element-loading-spinner` y `element-loading-background` son para personalizar el nombre de la clase del spinner y el color de fondo.\n```html\n<template>\n  <el-table\n    v-loading=\"loading\"\n    element-loading-text=\"Loading...\"\n    element-loading-spinner=\"el-icon-loading\"\n    element-loading-background=\"rgba(0, 0, 0, 0.8)\"\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: 'John Smith',\n          address: 'No.1518,  Jinshajiang Road, Putuo District'\n        }, {\n          date: '2016-05-04',\n          name: 'John Smith',\n          address: 'No.1518,  Jinshajiang Road, Putuo District'\n        }, {\n          date: '2016-05-01',\n          name: 'John Smith',\n          address: 'No.1518,  Jinshajiang Road, Putuo District'\n        }],\n        loading: true\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Cargando a pantalla completa\n\nMuestra una animación de pantalla completa mientras se cargan los datos\n\n:::demo Cuando se utiliza como una directiva, la carga a pantalla completa requiere el modificador `fullscreen`, y este puede ser agregado al `body`. En este caso, si desea deshabilitar el desplazamiento en `body`, puede agregar otro modificador `lock`. Cuando se utiliza como un servicio, el componente puede ser mostrado a pantalla completa por defecto.\n\n```html\n<template>\n  <el-button\n    type=\"primary\"\n    @click=\"openFullScreen1\"\n    v-loading.fullscreen.lock=\"fullscreenLoading\">\n    Como directiva\n  </el-button>\n  <el-button\n    type=\"primary\"\n    @click=\"openFullScreen2\">\n    Como servicio\n  </el-button>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        fullscreenLoading: false\n      }\n    },\n    methods: {\n      openFullScreen1() {\n        this.fullscreenLoading = true;\n        setTimeout(() => {\n          this.fullscreenLoading = false;\n        }, 2000);\n      },\n      openFullScreen2() {\n        const loading = this.$loading({\n          lock: true,\n          text: 'Loading',\n          spinner: 'el-icon-loading',\n          background: 'rgba(0, 0, 0, 0.7)'\n        });\n        setTimeout(() => {\n          loading.close();\n        }, 2000);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Servicio\n\nPuede invocar el componente con un servicio. Importe el servicio:\n\n```javascript\nimport { Loading } from 'element-ui';\n```\nInvocar:\n```javascript\nLoading.service(options);\n```\nEl parámetro `options` es la configuración del componente, y estos detalles pueden ser encontrados en la siguiente table. `LoadingService` devuelve una instancia del componente, y puede cerrarlo invocando el método `close`:\n```javascript\nlet loadingInstance = Loading.service(options);\nloadingInstance.close();\n```\nTenga en cuenta que, en este caso, el componente a pantalla completa es una instancia única. Si un nuevo componente de pantalla completa es invocado antes de que se cierre la existente, se devolverá la instancia existente en lugar de crear la otra instancia:\n```javascript\nlet loadingInstance1 = Loading.service({ fullscreen: true });\nlet loadingInstance2 = Loading.service({ fullscreen: true });\nconsole.log(loadingInstance1 === loadingInstance2); // true\n```\nLlamar al método `close` en cualquiera de estas puede cerrarlo.\n\nSi Element es importado completamente, un método global `$loading` puede ser registrado a Vue.prototype. Puede invocarlo como esto: `this.$loading(options)`, y también devuelve una instancia del componente.\n\n### Opciones\n| Atributo    | Descripción                              | Tipo          | Valores aceptados | Por defecto   |\n| ----------- | ---------------------------------------- | ------------- | ----------------- | ------------- |\n| target      | el nodo del DOM que el componente debe cubrir. Acepta un objecto DOM o una cadena. Si está es una cadena, este será pasado a `document.querySelector` para obtener el correspondiente nodo del DOM | object/string | —                 | document.body |\n| body        | igual que el modificador `body` de `v-loading` | boolean       | —                 | false         |\n| fullscreen  | igual que el modificador `fullscreen` de `v-loading` | boolean       | —                 | true          |\n| lock        | igual que el modificador `lock` de `v-loading` | boolean       | —                 | false         |\n| text        | texto de cargando que se muestra debajo del spinner | string        | —                 | —             |\n| spinner     | nombre de clase del spinner personalizado | string        | —                 | —             |\n| background  | color de fondo de la máscara             | string        | —                 | —             |\n| customClass | nombre de clase personalizada para el componente | string        | —                 | —             |"
  },
  {
    "path": "examples/docs/es/menu.md",
    "content": "## NavMenu\n\nMenú que provee la navegación para tu sitio.\n\n### Top bar\n\nTop bar NavMenu puede ser usado en distinto escenarios.\n\n:::demo Por defecto el menú es vertical, pero puede hacerlo horizontal asignando a la propiedad `mode` el valor 'horizontal'. Además, puede utilizar el componente de submenú para crear un menú de segundo nivel. Menú provee `background-color`, `text-color` y `active-text-color` para customizar los colores.\n\n```html\n<el-menu :default-active=\"activeIndex\" class=\"el-menu-demo\" mode=\"horizontal\" @select=\"handleSelect\">\n  <el-menu-item index=\"1\">Processing Center</el-menu-item>\n  <el-submenu index=\"2\">\n    <template slot=\"title\">Workspace</template>\n    <el-menu-item index=\"2-1\">item one</el-menu-item>\n    <el-menu-item index=\"2-2\">item two</el-menu-item>\n    <el-menu-item index=\"2-3\">item three</el-menu-item>\n    <el-submenu index=\"2-4\">\n      <template slot=\"title\">item four</template>\n      <el-menu-item index=\"2-4-1\">item one</el-menu-item>\n      <el-menu-item index=\"2-4-2\">item two</el-menu-item>\n      <el-menu-item index=\"2-4-3\">item three</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index=\"3\" disabled>Info</el-menu-item>\n  <el-menu-item index=\"4\"><a href=\"https://www.ele.me\" target=\"_blank\">Orders</a></el-menu-item>\n</el-menu>\n<div class=\"line\"></div>\n<el-menu\n  :default-active=\"activeIndex2\"\n  class=\"el-menu-demo\"\n  mode=\"horizontal\"\n  @select=\"handleSelect\"\n  background-color=\"#545c64\"\n  text-color=\"#fff\"\n  active-text-color=\"#ffd04b\">\n  <el-menu-item index=\"1\">Processing Center</el-menu-item>\n  <el-submenu index=\"2\">\n    <template slot=\"title\">Workspace</template>\n    <el-menu-item index=\"2-1\">item one</el-menu-item>\n    <el-menu-item index=\"2-2\">item two</el-menu-item>\n    <el-menu-item index=\"2-3\">item three</el-menu-item>\n    <el-submenu index=\"2-4\">\n      <template slot=\"title\">item four</template>\n      <el-menu-item index=\"2-4-1\">item one</el-menu-item>\n      <el-menu-item index=\"2-4-2\">item two</el-menu-item>\n      <el-menu-item index=\"2-4-3\">item three</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index=\"3\" disabled>Info</el-menu-item>\n  <el-menu-item index=\"4\"><a href=\"https://www.ele.me\" target=\"_blank\">Orders</a></el-menu-item>\n</el-menu>\n\n<script>\n  export default {\n    data() {\n      return {\n        activeIndex: '1',\n        activeIndex2: '1'\n      };\n    },\n    methods: {\n      handleSelect(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Side bar\n\nNavMenu vertical con sub-menús.\n\n:::demo Puede utilizar el componente `el-menu-item-group` para crear un grupo de menú, y el nombre del grupo estará determinado por la propiedad `title` o la propiedad `slot`.\n\n```html\n<el-row class=\"tac\">\n  <el-col :span=\"12\">\n    <h5>Default colors</h5>\n    <el-menu\n      default-active=\"2\"\n      class=\"el-menu-vertical-demo\"\n      @open=\"handleOpen\"\n      @close=\"handleClose\">\n      <el-submenu index=\"1\">\n        <template slot=\"title\">\n          <i class=\"el-icon-location\"></i>\n          <span>Navigator One</span>\n        </template>\n        <el-menu-item-group title=\"Group One\">\n          <el-menu-item index=\"1-1\">item one</el-menu-item>\n          <el-menu-item index=\"1-2\">item one</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title=\"Group Two\">\n          <el-menu-item index=\"1-3\">item three</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index=\"1-4\">\n          <template slot=\"title\">item four</template>\n          <el-menu-item index=\"1-4-1\">item one</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index=\"2\">\n        <i class=\"el-icon-menu\"></i>\n        <span>Navigator Two</span>\n      </el-menu-item>\n      <el-menu-item index=\"3\" disabled>\n        <i class=\"el-icon-document\"></i>\n        <span>Navigator Three</span>\n      </el-menu-item>\n      <el-menu-item index=\"4\">\n        <i class=\"el-icon-setting\"></i>\n        <span>Navigator Four</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n  <el-col :span=\"12\">\n    <h5>Custom colors</h5>\n    <el-menu\n      default-active=\"2\"\n      class=\"el-menu-vertical-demo\"\n      @open=\"handleOpen\"\n      @close=\"handleClose\"\n      background-color=\"#545c64\"\n      text-color=\"#fff\"\n      active-text-color=\"#ffd04b\">\n      <el-submenu index=\"1\">\n        <template slot=\"title\">\n          <i class=\"el-icon-location\"></i>\n          <span>Navigator One</span>\n        </template>\n        <el-menu-item-group title=\"Group One\">\n          <el-menu-item index=\"1-1\">item one</el-menu-item>\n          <el-menu-item index=\"1-2\">item one</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title=\"Group Two\">\n          <el-menu-item index=\"1-3\">item three</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index=\"1-4\">\n          <template slot=\"title\">item four</template>\n          <el-menu-item index=\"1-4-1\">item one</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index=\"2\">\n        <i class=\"el-icon-menu\"></i>\n        <span>Navigator Two</span>\n      </el-menu-item>\n      <el-menu-item index=\"3\" disabled>\n        <i class=\"el-icon-document\"></i>\n        <span>Navigator Three</span>\n      </el-menu-item>\n      <el-menu-item index=\"4\">\n        <i class=\"el-icon-setting\"></i>\n        <span>Navigator Four</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n</el-row>\n\n<script>\n  export default {\n    methods: {\n      handleOpen(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Collapse\n\nNavMenu vertical puede ser colapsado.\n\n:::demo\n```html\n<el-radio-group v-model=\"isCollapse\" style=\"margin-bottom: 20px;\">\n  <el-radio-button :label=\"false\">expand</el-radio-button>\n  <el-radio-button :label=\"true\">collapse</el-radio-button>\n</el-radio-group>\n<el-menu default-active=\"2\" class=\"el-menu-vertical-demo\" @open=\"handleOpen\" @close=\"handleClose\" :collapse=\"isCollapse\">\n  <el-submenu index=\"1\">\n    <template slot=\"title\">\n      <i class=\"el-icon-location\"></i>\n      <span slot=\"title\">Navigator One</span>\n    </template>\n    <el-menu-item-group>\n      <span slot=\"title\">Group One</span>\n      <el-menu-item index=\"1-1\">item one</el-menu-item>\n      <el-menu-item index=\"1-2\">item two</el-menu-item>\n    </el-menu-item-group>\n    <el-menu-item-group title=\"Group Two\">\n      <el-menu-item index=\"1-3\">item three</el-menu-item>\n    </el-menu-item-group>\n    <el-submenu index=\"1-4\">\n      <span slot=\"title\">item four</span>\n      <el-menu-item index=\"1-4-1\">item one</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index=\"2\">\n    <i class=\"el-icon-menu\"></i>\n    <span slot=\"title\">Navigator Two</span>\n  </el-menu-item>\n  <el-menu-item index=\"3\" disabled>\n    <i class=\"el-icon-document\"></i>\n    <span slot=\"title\">Navigator Three</span>\n  </el-menu-item>\n  <el-menu-item index=\"4\">\n    <i class=\"el-icon-setting\"></i>\n    <span slot=\"title\">Navigator Four</span>\n  </el-menu-item>\n</el-menu>\n\n<style>\n  .el-menu-vertical-demo:not(.el-menu--collapse) {\n    width: 200px;\n    min-height: 400px;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        isCollapse: true\n      };\n    },\n    methods: {\n      handleOpen(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Atributos Menú\n| Atributo          | Descripción                              | Tipo    | Valores aceptados     | Por defecto |\n| ----------------- | ---------------------------------------- | ------- | --------------------- | ----------- |\n| mode              | modo de presentación del menú            | string  | horizontal / vertical | vertical    |\n| collapse          | si el menú está colapsado (solo en modo vertical) | boolean | —                     | false       |\n| background-color  | color de fondo del menú (formato hexadecimal) | string  | —                     | #ffffff     |\n| text-color        | color de texto del menú (formato hexadecimal) | string  | —                     | #303133     |\n| active-text-color | color del texto del menu-item activo (formato hexadecimal) | string  | —                     | #409EFF     |\n| default-active    | índice del menu-item activo              | string  | —                     | —           |\n| default-openeds   | arreglo que contiene las llaves del sub-menus activo | Array   | —                     | —           |\n| unique-opened     | si solo un submenu puede ser activo      | boolean | —                     | false       |\n| menu-trigger      | como dispara eventos sub-menus, solo funciona cuando `mode` es 'horizontal' | string  | hover / click      | hover   |\n| router            | si el modo `vue-router` está activado. Si es verdadero, el índice será usado como 'path' para activar la ruta | boolean | —                     | false       |\n| collapse-transition  | si se debe permitir collapse transition | boolean   | — | true   |\n\n### Métodos Menu \n| Métodos de evento | Descripción                   | Parámetros                             |\n| ---------------- | ----------------------------- | -------------------------------------- |\n| open             | abre un sub-menu específico   | index: índice del sub-menu para abrir  |\n| close            | cierra un sub-menu específico | index: índice del sub-menu para cerrar |\n\n### Eventos Menu \n| Nombre de evento | Descripción                              | Parámetros                               |\n| ---------------- | ---------------------------------------- | ---------------------------------------- |\n| select           | callback ejecutado cuando el menú es activado | index: índice del menú activado, indexPath: index path del menú activado |\n| open             | callback ejecutado cuando sub-menu se expande | index: índice del sub-menu expandido, indexPath: index path del sub-menu expandido |\n| close            | callback ejecutado cuando sub-menu colapsa | index: índice del sub-menu colapsado, indexPath: index path del menú colapsado |\n\n### Eventos Menu-Item \n| Nombre de evento | Descripción                              | Parámetros                 |\n| ---------------- | ---------------------------------------- | -------------------------- |\n| click            | callback ejecutado cuando se hace click sobre menu-item | el: instancia de menu-item |\n\n### Atributos SubMenu \n| Atributo     | Descripción                              | Tipo   | Valores aceptados | Por defecto |\n| ------------ | ---------------------------------------- | ------ | ----------------- | ----------- |\n| index        | identificador único                      | string/null | —            | null        |\n| popper-class | nombre personalizado de la clase del menú popup | string | —                 | —           |\n| show-timeout | tiempo de espera antes de mostrar un submenú | number | —                 | 300         |\n| hide-timeout | tiempo de espera antes de ocultar un submenú | number | —                 | 300         |\n| disabled | si esta `disabled` el sub-menu | boolean | — | false |\n| popper-append-to-body | si se debe agregar el menú emergente al cuerpo. Si la posición del menú es incorrecta, puede intentar ajustar este prop | boolean | - | level one Submenu: true / other Submenus: false |\n\n### Atributos Menu-Item \n| Atributo | Descripción         | Tipo   | Valores aceptados | Por defecto |\n| -------- | ------------------- | ------ | ----------------- | ----------- |\n| index    | identificador único | string | —                 | —           |\n| route    | Objeto Vue Router   | object | —                 | —           |\n| disabled | si esta `disabled` | boolean | — | false |\n\n### Atributos Menu-Group \n| Atributo | Descripción      | Tipo   | Valores aceptados | Por defecto |\n| -------- | ---------------- | ------ | ----------------- | ----------- |\n| title    | título del grupo | string | —                 | —           |\n"
  },
  {
    "path": "examples/docs/es/message-box.md",
    "content": "## MessageBox\n\nUn conjunto de cajas modales simulando un sistema de message box, principalmente para alertar información, confirmar operaciones y  mostrar mensajes de aviso.\n:::tip\nPor diseño los message box nos proveen de simulaciones de sistemas como los componentes `alert`, `confirm` y `prompt`，entonces su contenido debería ser simple. para contenido mas complejo, por favor utilice el componente Dialog.\n:::\n\n### Alert\n\nAlert interrumpe las operaciones realizadas hasta que el usuario confirme la alerta.\n\n:::demo Desplegar una alerta utilizando el método `$alert`. Simula el sistema `alert`, y no puede ser cerrado al presionar la tecla ESC o al dar clic fuera de la caja. En este ejemplo, dos parámetros son recibidos `message` y `title`. Vale la pena mencionar que cuando la caja es cerrada, regresa un objeto `Promise` para su procesamiento posteriormente. Si no estas seguro si el navegador soporta `Promise`, deberías importar una librería de terceros de polyfill o utilizar callbacks.\n\n```html\n<template>\n  <el-button type=\"text\" @click=\"open\">Click to open the Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$alert('This is a message', 'Title', {\n          confirmButtonText: 'OK',\n          callback: action => {\n            this.$message({\n              type: 'info',\n              message: `action: ${ action }`\n            });\n          }\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Confirm\n\nConfirm es utilizado para preguntar al usuario y recibir una confirmación.\n\n\n:::demo Llamando al método `$confirm` para abrir el componente confirm, y simula el sistema `confirm`. También podemos personalizar a gran medida el componente Message Box al mandar un tercer atributo llamado `options` que es literalmente un objeto. El atributo `type` indica el tipo de mensaje, y su valor puede ser `success`, `error`, `info` y `warning`. Se debe tener en cuenta que el segundo atributo `title` debe ser de tipo `string`, y si es de tipo `object`, sera manejado como el atributo `options`. Aquí utilizamos `Promise` para manejar posteriormente el proceso. \n\n```html\n<template>\n  <el-button type=\"text\" @click=\"open\">Click to open the Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          type: 'warning'\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: 'Delete completed'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Delete canceled'\n          });          \n        });\n      }\n    }\n  }\n</script>\n```\n\n:::\n\n### Prompt\n\nPrompt es utilizado cuando se requiere entrada de información del usuario.\n\n:::demo Llamando al método `$prompt` desplegamos el componente prompt, y simula el sistema `prompt`.Puedes utilizar el parámetro `inputPattern` para especificar tu propio patrón RegExp. Utiliza el parámetro `inputValidator` para especificar el método de validación, y debería regresar un valor de tipo `Boolean` o `String`. Al regresar `false` o `String` significa que la validación a fallado, y la cadena regresada se usara como `inputErrorMessage`. Ademas, puedes personalizar el atributo placeholder del input box con el parámetro `inputPlaceholder`.\n\n```html\n<template>\n  <el-button type=\"text\" @click=\"open\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$prompt('Please input your e-mail', 'Tip', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          inputPattern: /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n          inputErrorMessage: 'Invalid Email'\n        }).then(({ value }) => {\n          this.$message({\n            type: 'success',\n            message: 'Your email is:' + value\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Input canceled'\n          });       \n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Personalización\n\nPuede ser personalizado para mostrar diversos contenidos.\n\n:::demo Los tres métodos mencionados anteriormente son un rempaquetado del método `$msgbox`. En este ejemplo se realiza una llamada al método `$msgbox` directamente utilizando el atributo `showCancelButton`, el cual es utilizado para indicar si el botón cancelar es mostrado en pantalla. Además podemos utilizar el atributo `cancelButtonClass` para agregar un estilo personalizado y el atributo `cancelButtonText` para personalizar el texto del botón (el botón de confirmación también cuenta con estos campos, y podrá encontrar una lista completa de estos atributos al final de esta documentación). Este ejemplo también utiliza el atributo `beforeClose`. Es un método que es disparado cuando una instancia del componente MessageBox es cerrada, y su ejecución detendrá el cierre de la instancia. Tiene tres parámetros: `action`, `instance` y `done`. Al utilizarla te permite manipular la instancia antes de que sea cerrada, e.g. activando `loading` para el botón de confirmación; puede invocar el método `done` para cerrar la instancia del componente MessageBox  (si el método `done` no es llamado dentro del atributo `beforeClose`, la instancia no podrá cerrarse).\n\n```html\n<template>\n  <el-button type=\"text\" @click=\"open\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        const h = this.$createElement;\n        this.$msgbox({\n          title: 'Message',\n          message: h('p', null, [\n            h('span', null, 'Message can be '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ]),\n          showCancelButton: true,\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          beforeClose: (action, instance, done) => {\n            if (action === 'confirm') {\n              instance.confirmButtonLoading = true;\n              instance.confirmButtonText = 'Loading...';\n              setTimeout(() => {\n                done();\n                setTimeout(() => {\n                  instance.confirmButtonLoading = false;\n                }, 300);\n              }, 3000);\n            } else {\n              done();\n            }\n          }\n        }).then(action => {\n          this.$message({\n            type: 'info',\n            message: 'action: ' + action\n          });\n        });\n      },\n    }\n  }\n</script>\n```\n:::\n\n:::tip\n\nEl contenido de MessageBox puede ser `VNode`, permitiéndonos pasar componentes personalizados. Al abrir el MessageBox, Vue compara el nuevo `VNode` con el viejo `VNode`, y luego averigua cómo actualizar eficientemente la interfaz de usuario, de modo que es posible que los componentes no se vuelvan a procesar completamente ([#8931](https://github.com/ElemeFE/element/issues/8931)). En este caso, se puede añadir una clave única a `VNode` cada vez que se abre MessageBox: [ejemplo](https://jsfiddle.net/zhiyang/ezmhq2ef).\n\n:::\n\n### Utiliza cadenas HTML\n\n`message` soporta cadenas HTML.\n\n:::demo Establezca el valor de `dangerouslyUseHTMLString` a true y `message` sera tratado como una cadena HTML.\n\n```html\n<template>\n  <el-button type=\"text\" @click=\"open\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {\n          dangerouslyUseHTMLString: true\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n:::warning\nAunque la propiedad `message` soporta cadenas HTML, realizar arbitrariamente render dinámico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir fácilmente a [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Entonces cuando `dangerouslyUseHTMLString` esta activada, asegúrese que el contenido de `message` sea de confianza, y **nunca** asignar `message` a contenido generado por el usuario.\n:::\n\n### Distinguir entre cancelar y cerrar\n\nEn algunos casos, hacer clic en el botón Cancelar y en el botón Cerrar puede tener diferentes significados.\n\n:::demo Por defecto, los parámetros de `Promise's reject callback` y `callback` son `cancel` cuando el usuario cancela (haciendo clic en el botón de cancelación)  y cierra  (haciendo clic en el botón de cerrar o en la capa de máscara, pulsando la tecla ESC) el MessageBox. Si `distinguishCancelAndClose` está ajustado a `true`, los parámetros de las dos operaciones anteriores son `cancel` y `close` respectivamente.\n\n\n```html\n<template>\n  <el-button type=\"text\" @click=\"open\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$confirm('You have unsaved changes, save and proceed?', 'Confirm', {\n          distinguishCancelAndClose: true,\n          confirmButtonText: 'Save',\n          cancelButtonText: 'Discard Changes'\n        })\n          .then(() => {\n            this.$message({\n              type: 'info',\n              message: 'Changes saved. Proceeding to a new route.'\n            });\n          })\n          .catch(action => {\n            this.$message({\n              type: 'info',\n              message: action === 'cancel'\n                ? 'Changes discarded. Proceeding to a new route.'\n                : 'Stay in the current route'\n            })\n          });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Contenido centrado\nEl contenido del componente MessageBox puede ser centrado.\n\n:::demo Establecer `center` a `true` centrara el contenido\n\n```html\n<template>\n  <el-button type=\"text\" @click=\"open\">Click to open Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          type: 'warning',\n          center: true\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: 'Delete completed'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Delete canceled'\n          });\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Métodos Globales\n\nSi Element fue importado completamente, agregara los siguientes métodos globales para Vue.prototype: `$msgbox`, `$alert`, `$confirm` y `$prompt`. Así que en una instancia de Vue puedes llamar el método `MessageBox` como lo que hicimos en esta pagina. Los parámetros son:\n- `$msgbox(options)`\n- `$alert(message, title, options)` or `$alert(message, options)`\n- `$confirm(message, title, options)` or `$confirm(message, options)`\n- `$prompt(message, title, options)` or `$prompt(message, options)`\n\n### Importación local\n\nSi prefieres importar `MessageBox` cuando lo necesites (on demand):\n\n```javascript\nimport { MessageBox } from 'element-ui';\n```\n\nLos métodos correspondientes: `MessageBox`, `MessageBox.alert`, `MessageBox.confirm` y `MessageBox.prompt`. Los parámetros son los mismos que los anteriores.\n\n### Opciones\n\n| Atributo                 | Descripción                              | Tipo                                     | Valores Permitidos               | Por defecto                              |\n| ------------------------ | ---------------------------------------- | ---------------------------------------- | -------------------------------- | ---------------------------------------- |\n| title                    | titulo del componente MessageBox         | string                                   | —                                | —                                        |\n| message                  | contenido del componente MessageBox      | string                                   | —                                | —                                        |\n| dangerouslyUseHTMLString | utilizado para que `message` sea tratado como una cadena HTML | boolean                                  | —                                | false                                    |\n| type                     | tipo de mensaje , utilizado para mostrar el  icono | string                                   | success / info / warning / error | —                                        |\n| iconClass                | clase personalizada para el icono, sobrescribe `type` | string         | —                          | —           |\n| customClass              | nombre de la clase personalizada para el componente MessageBox | string                                   | —                                | —                                        |\n| callback                 | MessageBox callback al cerrar si no desea utilizar Promise | function(action), donde la accion puede ser 'confirm', 'cancel' o 'close', e `instance`  es la instancia del componente MessageBox. Puedes acceder a los metodos y atributos de esa instancia | —                                | —                                        |\n| beforeClose              | callback llamado antes de cerrar el componente MessageBox, y previene que el componente MessageBox se cierre | function(action, instance, done), donde `action` pueden ser 'confirm', 'cancel' o 'close'; `instance` es la instancia del componente MessageBox, Puedes acceder a los metodos y atributos de esa instancia; `done` es para cerrar la instancia | —                                | —                                        |\n| distinguishCancelAndClose | si se debe distinguir entre cancelar y cerrar | boolean | — | false |\n| lockScroll               | utilizado para bloquear el desplazamiento del contenido del MessageBox prompts | boolean                                  | —                                | true                                     |\n| showCancelButton         | utilizado para mostrar un botón cancelar | boolean                                  | —                                | false (true cuando es llamado con confirm y prompt) |\n| showConfirmButton        | utilizado para mostrar un botón confirmar | boolean                                  | —                                | true                                     |\n| cancelButtonText         | contenido de texto del botón cancelar | string                                   | —                                | Cancel                                   |\n| confirmButtonText        | contenido de texto del botón confirmar | string                                   | —                                | OK                                       |\n| cancelButtonClass        | nombre de la clase personalizada del botón cancelar | string                                   | —                                | —                                        |\n| confirmButtonClass       | nombre de la clase personalizada del botón confirmar | string                                   | —                                | —                                        |\n| closeOnClickModal        | utilizado para que que el componente MessageBox pueda ser cerrado al dar clic en la mascara | boolean                                  | —                                | true (false cuando es llamado con alert) |\n| closeOnPressEscape       | utilizado para que que el componente MessageBox pueda ser cerrado al presionar la tecla ESC | boolean                                  | —                                | true (false cuando es llamado con alert) |\n| closeOnHashChange        | utilizado para cerra el componente MessageBox cuando hash cambie | boolean                                  | —                                | true                                     |\n| showInput                | utilizado para mostrar el componente input | boolean                                  | —                                | false (true cuando es llamado con prompt) |\n| inputPlaceholder         | placeholder para el componente input     | string                                   | —                                | —                                        |\n| inputType                | tipo del componente input                | string                                   | —                                | text                                     |\n| inputValue               | valor inicial del componente input       | string                                   | —                                | —                                        |\n| inputPattern             | regexp del componente input              | regexp                                   | —                                | —                                        |\n| inputValidator           | función de validación del componente input. Debe regresar un valor de tipo boolean o string. Si regresa un valor tipo string, sera asignado a inputErrorMessage | function                                 | —                                | —                                        |\n| inputErrorMessage        | mensaje de error cuando la validación falla | string                                   | —                                | Illegal input                            |\n| center                   | utilizado para alinear el contenido al centro | boolean                                  | —                                | false                                    |\n| roundButton              | utilizado para redondear el botón   | boolean                                  | —                                | false                                    |\n"
  },
  {
    "path": "examples/docs/es/message.md",
    "content": "## Message\n\nUtilizado para mostrar retroalimentación después de una actividad. La diferencia con el componente Notification es que este ultimo es utilizado para mostrar una notificación pasiva a nivel de sistema.\n\n### Uso básico\n\nSe muestra en la parte superior de la pagina y desaparece después de 3 segundos.\n\n:::demo La configuración del componente Message es muy similar al del componente notification, así que parte de las opciones no serán explicadas en detalle aquí. Puedes consultar la tabla de opciones en la parte inferior combinada con la documentación del componente notification para comprenderla. Element a registrado un método `$message` para poder invocarlo. Message puede tomar una cadena o un Vnode como parámetro, y lo mostrara como el cuerpo principal.\n\n```html\n<template>\n  <el-button :plain=\"true\" @click=\"open\">Show message</el-button>\n  <el-button :plain=\"true\" @click=\"openVn\">VNode</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$message('This is a message.');\n      },\n      \n      openVn() {\n        const h = this.$createElement;\n        this.$message({\n          message: h('p', null, [\n            h('span', null, 'Message can be '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ])\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Tipos\n\nUtilizados para mostrar retroalimentación de Success, Warning, Message y Error activities.\n\n:::demo Cuando necesite mas personalización, el componente Message también puede tomar un objeto como parámetro. Por ejemplo, estableciendo el valor de `type` puede definir diferentes tipos, el predeterminado es `info`. En tales casos el cuerpo principal se pasa como el valor de `message`. También, hay registrados métodos para los diferentes tipos, así que, puedes llamarlos sin necesidad de pasar un tipo como `open4`.\n```html\n<template>\n  <el-button :plain=\"true\" @click=\"open2\">success</el-button>\n  <el-button :plain=\"true\" @click=\"open3\">warning</el-button>\n  <el-button :plain=\"true\" @click=\"open1\">message</el-button>\n  <el-button :plain=\"true\" @click=\"open4\">error</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open1() {\n        this.$message('This is a message.');\n      },\n      open2() {\n        this.$message({\n          message: 'Congrats, this is a success message.',\n          type: 'success'\n        });\n      },\n\n      open3() {\n        this.$message({\n          message: 'Warning, this is a warning message.',\n          type: 'warning'\n        });\n      },\n\n      open4() {\n        this.$message.error('Oops, this is a error message.');\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Closable\n\nUn botón para cerrar que puede ser agregado.\n\n:::demo Un componente Message predeterminado no se puede cerrar manualmente. Si necesitas un componente message que pueda cerrarse, puedes establecer el campo `showClose`. Ademas, al igual que las notificaciones, message tiene un atributo `duration` que puede ser controlado. Por defecto la duración es de 3000 ms, y no desaparecerá al llegar a `0`.\n```html\n<template>\n  <el-button :plain=\"true\" @click=\"open1\">message</el-button>\n  <el-button :plain=\"true\" @click=\"open2\">success</el-button>\n  <el-button :plain=\"true\" @click=\"open3\">warning</el-button>\n  <el-button :plain=\"true\" @click=\"open4\">error</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open1() {\n        this.$message({\n          showClose: true,\n          message: 'This is a message.'\n        });\n      },\n\n      open2() {\n        this.$message({\n          showClose: true,\n          message: 'Congrats, this is a success message.',\n          type: 'success'\n        });\n      },\n\n      open3() {\n        this.$message({\n          showClose: true,\n          message: 'Warning, this is a warning message.',\n          type: 'warning'\n        });\n      },\n\n      open4() {\n        this.$message({\n          showClose: true,\n          message: 'Oops, this is a error message.',\n          type: 'error'\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Texto centrado\nUtiliza el atributo `center` para centrar el texto.\n\n:::demo\n\n```html\n<template>\n  <el-button :plain=\"true\" @click=\"openCenter\">Centered text</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      openCenter() {\n        this.$message({\n          message: 'Centered text',\n          center: true\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Utiliza cadenas HTML\n`message` soporta cadenas HTML.\n\n:::demo Establece la propiedad `dangerouslyUseHTMLString` en true y `message` sera tratado como una cadena HTML.\n\n```html\n<template>\n  <el-button :plain=\"true\" @click=\"openHTML\">Use HTML String</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      openHTML() {\n        this.$message({\n          dangerouslyUseHTMLString: true,\n          message: '<strong>This is <i>HTML</i> string</strong>'\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n:::warning\nAunque la propiedad `message` soporta cadenas HTML, realizar arbitrariamente render dinámico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir fácilmente a [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Entonces cuando `dangerouslyUseHTMLString` esta activada, asegúrese que el contenido de `message` sea de confianza, y **nunca** asignar `message` a contenido generado por el usuario.\n:::\n\n### Métodos Globales\n\nElement ha agregado un método global llamado `$message` para Vue.prototype. Entonces en una instancia de vue puede llamar a `Message` como lo hicimos en esta pagina.\n\n### Importación local\n\nImport `Message`:\n\n```javascript\nimport { Message } from 'element-ui';\n```\n\nEn este caso debería llamar al método `Message(options)`. También se han registrado métodos para los diferentes tipos, e.g. `Message.success(options)`. Puede llamar al método `Message.closeAll()` para cerrar manualmente todas las instancias.\n\n### Opciones\n| Atributo                 | Descripción                   | Tipo           | Valores permitidos         | Por defecto |\n| ------------------------ | ---------------------------------------- | -------------- | -------------------------- | ----------- |\n| message                  | texto del mensaje                        | string / VNode | —                          | —           |\n| type                     | tipo del mensaje                         | string         | success/warning/info/error | info        |\n| iconClass                | clase personalizada para el icono, sobrescribe `type` | string         | —                          | —           |\n| dangerouslyUseHTMLString | utilizado para que `message` sea tratado como cadena HTML | boolean        | —                          | false       |\n| customClass              | nombre de clase personalizado para el componente Message | string         | —                          | —           |\n| duration                 | muestra la duración,en mili segundos. si se establece en 0, este no se apagara automáticamente | number         | —                          | 3000        |\n| showClose                | utilizado para mostrar un botón para cerrar | boolean        | —                          | false       |\n| center                   | utilizado para centrar el texto          | boolean        | —                          | false       |\n| onClose                  | función callback ejecutada cuando se cierra con una instancia de mensaje como parámetro | function       | —                          | —           |\n| offset | La distancia desde la parte superior del  viewport | number | — | 20 |\n\n### Métodos\n`Message` y `this.$message` regresan una instancia del componente Message. Para cerrar manualmente la instancia, puede llamar al método `close`.\n\n| Método | Descripción                  |\n| ------ | ---------------------------- |\n| close  | cierra el componente Message |\n"
  },
  {
    "path": "examples/docs/es/notification.md",
    "content": "## Notification\n\nMuestra un mensaje de notificación global en una esquina de la página.\n\n### Uso básico\n\n:::demo Element ha registrado el método`$notify` y recibe un objeto como parámetro. En el caso más sencillo, puede establecer el campo de `title` y el campo de ` message` para el título y el cuerpo de la notificación. De forma predeterminada, la notificación se cierra automáticamente después de 4500ms, pero configurando `duration`  se puede controlar su duración. Específicamente, si está configurado en `0`, no se cerrará automáticamente. Tenga en cuenta que `duration` recibe un `Number` en mili segundos.\n\n```html\n<template>\n  <el-button\n    plain\n    @click=\"open1\">\n    Closes automatically\n  </el-button>\n  <el-button\n    plain\n    @click=\"open2\">\n    Won't close automatically\n    </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open1() {\n        const h = this.$createElement;\n\n        this.$notify({\n          title: 'Title',\n          message: h('i', { style: 'color: teal' }, 'This is a reminder')\n        });\n      },\n\n      open2() {\n        this.$notify({\n          title: 'Prompt',\n          message: 'This is a message that does not automatically close',\n          duration: 0\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Tipos de notificaciones\n\nProporcionamos cuatro tipos: success, warning, info y error.\n\n:::demo Element proporciona cuatro tipos de notificación: `success`, `warning`, `info` y `error`. Se definen por el campo `type`  y se ignorarán otros valores. También se han registrado métodos para estos tipos que se pueden invocar directamente como en el ejemplo `open3` y `open4` sin pasar un campo `type`.\n\n```html\n<template>\n  <el-button\n    plain\n    @click=\"open1\">\n    Success\n  </el-button>\n  <el-button\n    plain\n    @click=\"open2\">\n    Warning\n  </el-button>\n  <el-button\n    plain\n    @click=\"open3\">\n    Info\n  </el-button>\n  <el-button\n    plain\n    @click=\"open4\">\n    Error\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open1() {\n        this.$notify({\n          title: 'Success',\n          message: 'This is a success message',\n          type: 'success'\n        });\n      },\n\n      open2() {\n        this.$notify({\n          title: 'Warning',\n          message: 'This is a warning message',\n          type: 'warning'\n        });\n      },\n\n      open3() {\n        this.$notify.info({\n          title: 'Info',\n          message: 'This is an info message'\n        });\n      },\n\n      open4() {\n        this.$notify.error({\n          title: 'Error',\n          message: 'This is an error message'\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Posición personalizada\n\nLa notificación puede surgir de cualquier rincón que uno desee.\n\n:::demo El atributo `position` define desde qué esquina se desliza la notificación. Puede ser `top-right`, `top-left`, `bottom-right` o `bottom-left`. Predeterminado: `top-right`.\n\n```html\n<template>\n  <el-button\n    plain\n    @click=\"open1\">\n    Top Right\n  </el-button>\n  <el-button\n    plain\n    @click=\"open2\">\n    Bottom Right\n  </el-button>\n  <el-button\n    plain\n    @click=\"open3\">\n    Bottom Left\n  </el-button>\n  <el-button\n    plain\n    @click=\"open4\">\n    Top Left\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open1() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the top right corner'\n        });\n      },\n\n      open2() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the bottom right corner',\n          position: 'bottom-right'\n        });\n      },\n\n      open3() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the bottom left corner',\n          position: 'bottom-left'\n        });\n      },\n\n      open4() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'I\\'m at the top left corner',\n          position: 'top-left'\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Desplazamiento\n\nPersonalizar el desplazamiento de notificación desde el borde de la pantalla.\n\n:::demo Configure el atributo `offset` para personalizar el desplazamiento de la notificación desde el borde de la pantalla. Tenga en cuenta que cada instancia de la notificación del mismo momento debe tener el mismo desplazamiento.\n\n```html\n<template>\n  <el-button\n    plain\n    @click=\"open\">\n    Notification with offset\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$notify.success({\n          title: 'Success',\n          message: 'This is a success message',\n          offset: 100\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Usando cadenas HTML\n`message` soporta cadenas HTML.\n\n:::demo Configure `dangerouslyUseHTMLString` a true y `message` se tratará como una cadena HTML.\n\n```html\n<template>\n  <el-button\n    plain\n    @click=\"open\">\n    Use HTML String\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$notify({\n          title: 'HTML String',\n          dangerouslyUseHTMLString: true,\n          message: '<strong>This is <i>HTML</i> string</strong>'\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n:::warning\n\nAunque la propiedad `message` soporta cadenas HTML, el renderizado dinámico de HTML arbitrario en su sitio web puede ser muy peligroso porque puede conducir fácilmente a [ataques XSS](https://en.wikipedia.org/wiki/Cross-site_scripting). Por lo tanto, cuando `dangerouslyUseHTMLString` está a true, por favor asegúrese de que el contenido del mensaje es confiable, y **nunca** asigne `message` al contenido proporcionado por el usuario.\n\n:::\n\n### Ocultar boton de cerrar\n\nEs posible ocultar el botón de cerrar\n\n:::demo Configure el atributo `showClose` como `false` para que el usuario no pueda cerrar la notificación.\n\n```html\n<template>\n  <el-button\n    plain\n    @click=\"open\">\n    Hide close button\n    </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$notify.success({\n          title: 'Info',\n          message: 'This is a message without close button',\n          showClose: false\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Método global\n\nElement ha añadido un método global `$notify` para Vue.prototype. Así que en una instancia de vue se puede llamar `Notification` como lo hacemos en esta página.\n\n### Importar localmente\n\nImportar `Notification`:\n\n```javascript\nimport { Notification } from 'element-ui';\n```\n\nEn este caso, debe llamar a `Notification(options)`. También se han registrado métodos para diferentes tipos, e.j. `Notification.success(options)`. Puede llamar al método `Notification.closeAll()` para cerrar manualmente todas las instancias.\n\n### Opciones\n| Atributo                 | Descripción                                                  | Tipo             | Valores aceptados                           | Por defecto |\n| ------------------------ | ------------------------------------------------------------ | ---------------- | ------------------------------------------- | ----------- |\n| title                    | titulo                                                       | string           | —                                           | —           |\n| message                  | mensaje                                                      | string/Vue.VNode | —                                           | —           |\n| dangerouslyUseHTMLString | si  `message` es tratado como una cadena HTML                | boolean          | —                                           | false       |\n| type                     | tipo de notificación                                         | string           | success/warning/info/error                  | —           |\n| iconClass                | clase personalizada de icono. Será anulado por `type`        | string           | —                                           | —           |\n| customClass              | nombre de clase personalizado para la notificación           | string           | —                                           | —           |\n| duration                 | duración antes de cerrar. Si no se quiere que se cierre automáticamente este valor debe estar a 0 | number           | —                                           | 4500        |\n| position                 | posición personalizada                                       | string           | top-right/top-left/bottom-right/bottom-left | top-right   |\n| showClose                | si se muestra el botón de cerrar                             | boolean          | —                                           | true        |\n| onClose                  | función que se ejecuta cuando la notificación se cierra      | function         | —                                           | —           |\n| onClick                  | función que se ejecuta cuando se hace clic en la notificación | function         | —                                           | —           |\n| offset                   | desplazamiento desde el borde superior de la pantalla. Cada instancia de notificación del mismo momento debe tener siempre el mismo desplazamiento. | number           | —                                           | 0           |\n\n### Métodos\n`Notification` y `this.$notify` devuelven la instancia de la notificación actual. Para cerrar manualmente la instancia, se puede llamar `close` para ello.\n\n| Método | Descripción            |\n| ------ | ---------------------- |\n| close  | cierra la notificación |\n"
  },
  {
    "path": "examples/docs/es/page-header.md",
    "content": "## PageHeader\n\nSi la ruta de la página es simple, se recomienda utilizar  PageHeader en lugar de Breadcrumb.\n\n### Básico\n\n:::demo\n```html\n<el-page-header @back=\"goBack\" content=\"detail\">\n</el-page-header>\n\n<script>\n  export default {\n    methods: {\n      goBack() {\n        console.log('go back');\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Atributos\n| Atributos | Descripción | Tipo   | Valores aceptados | Por defecto |\n|---------- |-------------- |---------- |------------------------------ | ------ |\n| title     | titulo principal | string    |  —                            | Back   |\n| content   | contenido   | string    |  —                            | —      |\n\n### Eventos\n| Nombre evento | Descripción | Parámetros |\n|----------- |-------------- |----------- |\n| back       | se activa cuando se hace clic en el lado derecho | — |\n\n### Slots\n| Nombre del slot | Descripción |\n| --------------- | ----------- |\n| title           | titulo      |\n| content         | contenido   |\n"
  },
  {
    "path": "examples/docs/es/pagination.md",
    "content": "## Paginación\nSi tiene que mostrar muchos datos en una página, utilice la paginación.\n\n### Uso básico\n\n:::demo Asigne en el atributo `layout` los diferentes elementos que quiere utilizar separados por coma. Los elementos de paginación son: `prev` (un botón para navegar a la página anterior), `next` (un botón para navegar a la siguiente página), `pager` (lista de página), `jumper` (un `input` para saltar a una página determinada), `total` (total de elementos), `size` (un `select` para seleccionar el tamaño de la página ) y `->`(todo elemento situado luego de este símbolo será movido a la derecha).\n```html\n<div class=\"block\">\n  <span class=\"demonstration\">When you have few pages</span>\n  <el-pagination\n    layout=\"prev, pager, next\"\n    :total=\"50\">\n  </el-pagination>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">When you have more than 7 pages</span>\n  <el-pagination\n    layout=\"prev, pager, next\"\n    :total=\"1000\">\n  </el-pagination>\n</div>\n```\n:::\n\n### Números de paginas\n\n:::demo De forma predeterminada, Pagination colapsa los botones del paginador adicionales cuando tiene más de 7 páginas. Esto se puede configurar con el atributo `pager-count`.\n```html\n<el-pagination\n  :page-size=\"20\"\n  :pager-count=\"11\"\n  layout=\"prev, pager, next\"\n  :total=\"1000\">\n</el-pagination>\n```\n:::\n\n### Paginación pequeña\n\nUsa una paginación pequeña en caso de espacio limitado.\n\n:::demo Solo ponga el atributo `small` como `true` y la Paginación se volverá pequeña.\n```html\n<el-pagination\n  small\n  layout=\"prev, pager, next\"\n  :total=\"50\">\n</el-pagination>\n```\n:::\n\n### Más elementos\n\nAgrega más módulos basados en su escenario.\n\n:::demo Este ejemplo es un completo caso de uso. Utiliza los eventos `size-change` y `current-change` para manejar el tamaño de página y el cambio de página. El atributo `page-sizes` acepta un arreglo de enteros, cada uno representa un diferente valor del atributo `sizes` que es un `select`, ejemplo `[100, 200, 300, 400]` indicará que el `select` tendrá las opciones: 100, 200, 300 o 400 elementos por página.\n\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">Total item count</span>\n    <el-pagination\n      @size-change=\"handleSizeChange\"\n      @current-change=\"handleCurrentChange\"\n      :current-page.sync=\"currentPage1\"\n      :page-size=\"100\"\n      layout=\"total, prev, pager, next\"\n      :total=\"1000\">\n    </el-pagination>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Change page size</span>\n    <el-pagination\n      @size-change=\"handleSizeChange\"\n      @current-change=\"handleCurrentChange\"\n      :current-page.sync=\"currentPage2\"\n      :page-sizes=\"[100, 200, 300, 400]\"\n      :page-size=\"100\"\n      layout=\"sizes, prev, pager, next\"\n      :total=\"1000\">\n    </el-pagination>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Jump to</span>\n    <el-pagination\n      @size-change=\"handleSizeChange\"\n      @current-change=\"handleCurrentChange\"\n      :current-page.sync=\"currentPage3\"\n      :page-size=\"100\"\n      layout=\"prev, pager, next, jumper\"\n      :total=\"1000\">\n    </el-pagination>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">All combined</span>\n    <el-pagination\n      @size-change=\"handleSizeChange\"\n      @current-change=\"handleCurrentChange\"\n      :current-page.sync=\"currentPage4\"\n      :page-sizes=\"[100, 200, 300, 400]\"\n      :page-size=\"100\"\n      layout=\"total, sizes, prev, pager, next, jumper\"\n      :total=\"400\">\n    </el-pagination>\n  </div>\n</template>\n<script>\n  export default {\n    methods: {\n      handleSizeChange(val) {\n        console.log(`${val} items per page`);\n      },\n      handleCurrentChange(val) {\n        console.log(`current page: ${val}`);\n      }\n    },\n    data() {\n      return {\n        currentPage1: 5,\n        currentPage2: 5,\n        currentPage3: 5,\n        currentPage4: 4\n      };\n    }\n  }\n</script>\n```\n\n:::\n### Oculte la paginación cuando el resultado es solo una pagina simple\n\nCuando sólo hay una página, oculte la paginación configurando el atributo `hide-on-single-page`.\n\n:::demo\n```html\n<div>\n <el-switch v-model=\"value\">\n </el-switch>\n <el-pagination\n  :hide-on-single-page=\"value\"\n  :total=\"5\"\n  layout=\"prev, pager, next\">\n</el-pagination>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: false\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Atributos\n| Atributo     | Descripción                              | Tipo     | Valores aceptados                        | Por defecto                            |\n| ------------ | ---------------------------------------- | -------- | ---------------------------------------- | -------------------------------------- |\n| small        | usar paginación pequeña                  | boolean  | —                                        | false                                  |\n| page-size    | cantidad de elementos por página, soporta el modificador .sync         | number   | —                                        | 10                                     |\n| total        | total de elementos                       | number   | —                                        | —                                      |\n| page-count   | total de páginas. Asigna `total` o `page-count` y las páginas serán mostradas; si necesitas `page-sizes`, `total` es **requerido** | number   | —                                        | —                                      |\n| pager-count  | número de paginadores. La paginación colapsa cuando el número total de páginas excede este valor. | number | odd number between 5 and 21 | 7 |\n| current-page | número actual de la página, soporta el modificador .sync | number   | —                                        | 1                                      |\n| layout       | layout de la paginación, elementos separados por coma | string   | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total' |\n| page-sizes   | opciones para la cantidad de elementos por página | number[] | —                                        | [10, 20, 30, 40, 50, 100]              |\n| popper-class | clase propia para el `dropdown` del `select` del número de páginas | string   | —                                        | —                                      |\n| prev-text    | texto para el botón `prev`               | string   | —                                        | —                                      |\n| next-text    | texto para el botón `next`               | string   | —                                        | —                                      |\n| disabled     | si Pagination esta disabled              | boolean  | —                                        | false                                  |\n| hide-on-single-page | si ocultar cuando sólo hay una página | boolean |—                                 | -                                      |\n\n### Eventos\n| Nombre del evento | Descripción                             | Parámetros                    |\n| ----------------- | --------------------------------------- | ----------------------------- |\n| size-change       | se dispara cuando `page-size` cambia    | nuevo valor de `page-size`    |\n| current-change    | se dispara cuando `current-page` cambia | nuevo valor de `current-page` |\n| prev-click | Se dispara cuando el botón `prev` recibe el clic y la pagina actual cambia | la nueva pagina actual |\n| next-click | Se dispara cuando el botón `next` recibe el clic y la pagina actual cambia | la nueva pagina actual |\n\n### Slot\n| Nombre | Descripción                              |\n| ------ | ---------------------------------------- |\n| —      | Elemento propio. Para utilizar esto necesitas declarar `slot` en el `layout` |\n"
  },
  {
    "path": "examples/docs/es/popconfirm.md",
    "content": "## Popconfirm \n\nUn dialogo de confirmación simple asociado al evento click de un elemento.\n\n### Uso básico\n\nPopconfirm es parecido a Popover. Para algunos atributos duplicados, por favor consulte la documentación de Popover.\n\n:::demo Solo el atributo  `title`  esta disponible en Popconfirm, `content` sera ignorado.\n```html\n<template>\n<el-popconfirm\n  title=\"Are you sure to delete this?\"\n>\n  <el-button slot=\"reference\">Delete</el-button>\n</el-popconfirm>\n</template>\n````\n:::\n\n### Personalización\nSe puede personalizar Popconfirm así:\n:::demo\n\n```html\n<template>\n<el-popconfirm\n  confirm-button-text='OK'\n  cancel-button-text='No, Thanks'\n  icon=\"el-icon-info\"\n  icon-color=\"red\"\n  title=\"Are you sure to delete this?\"\n>\n  <el-button slot=\"reference\">Delete</el-button>\n</el-popconfirm>\n</template>\n```\n:::\n\n### Atributos\n| Atributo     | Descripción | Tipo    | Valores aceptados | Por defecto |\n|--------------------|----------------------------------------------------------|-------------------|-------------|--------|\n|  title              | Titulo | String | — | — |\n|  confirm-button-text              | Texto del botón de confirmación | String | — | — |\n|  cancel-button-text              | Texto del botón de cancelación | String | — | — |\n|  confirm-button-type              | Tipo del botón de confirmación | String | — | Primary |\n|  cancel-button-type              | Tipo del botón de cancelación | String | — | Text |\n|  icon              | Icono | String | — | el-icon-question |\n|  icon-color              | Color icono | String | — | #f90 |\n|  hide-icon              | ¿Es un icono oculto? | Boolean | — | false |\n\n### Slot\n| Nombre | Descripción |\n|--- | ---|\n| reference | Elemento HTML que activa el Popconfirm |\n\n### Eventos\n| Nombre Evento | Descripción | Parámetros |\n|---------|--------|---------|\n| confirm | Se activa cuando se pulsa el botón de confirmación | — |\n| cancel | Se activa cuando se pulsa el botón de cancelación | — |"
  },
  {
    "path": "examples/docs/es/popover.md",
    "content": "## Popover\n\n### Uso básico\n\nSimilar a un Tooltip, Popover está construido con `Vue-popper`. Así que para atributos duplicados, por favor refiérase a la documentación de Tooltip.\n\n:::demo El atributo `trigger` es usado para definir como el popover se dispara: `hover`, `click`, `focus` o `manual`. En cuanto al elemento desencadenante, puedes escribirlo de dos maneras diferentes: usando el `slot=\"reference\"`[named slot](https://v2.vuejs.org/v2/guide/components-slots#Named-Slots), o usando la directiva `v-popover` y poniendo  el `ref` de Popover.\n\n```html\n<template>\n  <el-popover\n    placement=\"top-start\"\n    title=\"Title\"\n    width=\"200\"\n    trigger=\"hover\"\n    content=\"this is content, this is content, this is content\">\n    <el-button slot=\"reference\">Hover to activate</el-button>\n  </el-popover>\n\n  <el-popover\n    placement=\"bottom\"\n    title=\"Title\"\n    width=\"200\"\n    trigger=\"click\"\n    content=\"this is content, this is content, this is content\">\n    <el-button slot=\"reference\">Click to activate</el-button>\n  </el-popover>\n\n  <el-popover\n    ref=\"popover\"\n    placement=\"right\"\n    title=\"Title\"\n    width=\"200\"\n    trigger=\"focus\"\n    content=\"this is content, this is content, this is content\">\n  </el-popover>\n  <el-button v-popover:popover>Focus to activate</el-button>\n\n  <el-popover\n    placement=\"bottom\"\n    title=\"Title\"\n    width=\"200\"\n    trigger=\"manual\"\n    content=\"this is content, this is content, this is content\"\n    v-model=\"visible\">\n    <el-button slot=\"reference\" @click=\"visible = !visible\">Manual to activate</el-button>\n  </el-popover>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        visible: false\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Información anidada\nOtros componentes pueden anidarse dentro de popover. A continuación un ejemplo de una tabla anidada.\n\n:::demo Reemplaza el atributo `content` con un `slot`.\n\n```html\n<el-popover\n  placement=\"right\"\n  width=\"400\"\n  trigger=\"click\">\n  <el-table :data=\"gridData\">\n    <el-table-column width=\"150\" property=\"date\" label=\"date\"></el-table-column>\n    <el-table-column width=\"100\" property=\"name\" label=\"name\"></el-table-column>\n    <el-table-column width=\"300\" property=\"address\" label=\"address\"></el-table-column>\n  </el-table>\n  <el-button slot=\"reference\">Click to activate</el-button>\n</el-popover>\n\n<script>\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: '2016-05-02',\n          name: 'Jack',\n          address: 'New York City'\n        }, {\n          date: '2016-05-04',\n          name: 'Jack',\n          address: 'New York City'\n        }, {\n          date: '2016-05-01',\n          name: 'Jack',\n          address: 'New York City'\n        }, {\n          date: '2016-05-03',\n          name: 'Jack',\n          address: 'New York City'\n        }]\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Operación anidada\n\nPor supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `dialog`.\n\n:::demo\n```html\n<el-popover\n  placement=\"top\"\n  width=\"160\"\n  v-model=\"visible\">\n  <p>Are you sure to delete this?</p>\n  <div style=\"text-align: right; margin: 0\">\n    <el-button size=\"mini\" type=\"text\" @click=\"visible = false\">cancel</el-button>\n    <el-button type=\"primary\" size=\"mini\" @click=\"visible = false\">confirm</el-button>\n  </div>\n  <el-button slot=\"reference\">Delete</el-button>\n</el-popover>\n\n<script>\n  export default {\n    data() {\n      return {\n        visible: false,\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Atributos\n| Atributo       | Descripción                              | Tipo           | Valores aceptados                        | Por defecto                              |\n| -------------- | ---------------------------------------- | -------------- | ---------------------------------------- | ---------------------------------------- |\n| trigger        | cómo se dispara el popover               | string         | click/focus/hover/manual                 | click                                    |\n| title          | título del popover                       | string         | —                                        | —                                        |\n| content        | contenido del popover, puede ser sustituido por un `slot` | string         | —                                        | —                                        |\n| width          | ancho del popover                        | string, number | —                                        | Min width 150px                          |\n| placement      | posición del popover en la pantalla      | string         | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom                                   |\n| disabled       | si el popover está deshabilitado         | boolean        | —                                        | false                                    |\n| value / v-model | si el popover está visible               | Boolean        | —                                        | false                                    |\n| offset         | popover offset                           | number         | —                                        | 0                                        |\n| transition     | animación de transición del popover | string         | —                                        | el-fade-in-linear                        |\n| visible-arrow  | si una flecha del tooltip es mostrada o no. Para más información, por favor refiérase a [Vue-popper](https://github.com/element-component/vue-popper) | boolean        | —                                        | true                                     |\n| popper-options | parámetros para [popper.js](https://popper.js.org/docs/v2/) | object         | por favor, refiérase a [popper.js](https://popper.js.org/docs/v2/) | `{ boundariesElement: 'body', gpuAcceleration: false }` |\n| popper-class   | clase propia para popover                | string         | —                                        | —                                        |\n| open-delay     | retraso de la aparición cuando `trigger` es hover, en mili segundos | number         | —                                        | —                                        |\n| close-delay    | Retraso antes de desaparecer cuando el `trigger` es hover, en mili segundos. | number | — | 200 |\n| tabindex       | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) de Popover |   number           |      —      |  0    |\n\n### Slot\n| Nombre    | Descripción                          |\n| --------- | ------------------------------------ |\n| —         | texto contenido en popover           |\n| reference | elemento HTML que dispara el popover |\n\n### Eventos\n| Nombre del evento | Descripción                             | Parámetros |\n| ----------------- | --------------------------------------- | ---------- |\n| show              | se dispara cuando se muestra el popover | —          |\n| after-enter       | se dispara cuando la transición de entrada termina | —       |\n| hide              | se dispara cuando se oculta el popover  | —          |\n| after-leave       | se dispara cuando la transición de salida termina | —        |\n"
  },
  {
    "path": "examples/docs/es/progress.md",
    "content": "## Progreso\nProgreso es usado para mostrar el estado de la operación actual e informar al usuario acerca de ésta.\n\n### Barra de progreso lineal\n\n:::demo Usa el atributo `percentage` para asignar el porcentaje. Este es **requerido** y tiene que ser un valor entre `0-100`. Puede personalizar el formato de texto estableciendo `format`.\n\n```html\n<el-progress :percentage=\"50\"></el-progress>\n<el-progress :percentage=\"100\" :format=\"format\"></el-progress>\n<el-progress :percentage=\"100\" status=\"success\"></el-progress>\n<el-progress :percentage=\"100\" status=\"warning\"></el-progress>\n<el-progress :percentage=\"50\" status=\"exception\"></el-progress>\n\n<script>\n  export default {\n    methods: {\n      format(percentage) {\n        return percentage === 100 ? 'Full' : `${percentage}%`;\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Porcentaje interno\nEn este caso el porcentaje no toma espacio adicional.\n\n:::demo El atributo `stroke-width` decide el ancho de la barra de progreso, y usa el atributo `text-inside` para poner la descripción dentro de la misma.\n```html\n<el-progress :text-inside=\"true\" :stroke-width=\"26\" :percentage=\"70\"></el-progress>\n<el-progress :text-inside=\"true\" :stroke-width=\"24\" :percentage=\"100\" status=\"success\"></el-progress>\n<el-progress :text-inside=\"true\" :stroke-width=\"22\" :percentage=\"80\" status=\"warning\"></el-progress>\n<el-progress :text-inside=\"true\" :stroke-width=\"20\" :percentage=\"50\" status=\"exception\"></el-progress>\n```\n:::\n\n### Color personalizado\n\nPuede utilizar el atributo `color` para establecer el color de la barra de progreso.\n\n:::demo\n\n```html\n<el-progress :percentage=\"percentage\" :color=\"customColor\"></el-progress>\n\n<el-progress :percentage=\"percentage\" :color=\"customColorMethod\"></el-progress>\n\n<el-progress :percentage=\"percentage\" :color=\"customColors\"></el-progress>\n<div>\n  <el-button-group>\n    <el-button icon=\"el-icon-minus\" @click=\"decrease\"></el-button>\n    <el-button icon=\"el-icon-plus\" @click=\"increase\"></el-button>\n  </el-button-group>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        percentage: 20,\n        customColor: '#409eff',\n        customColors: [\n          {color: '#f56c6c', percentage: 20},\n          {color: '#e6a23c', percentage: 40},\n          {color: '#5cb87a', percentage: 60},\n          {color: '#1989fa', percentage: 80},\n          {color: '#6f7ad3', percentage: 100}\n        ]\n      };\n    },\n    methods: {\n      customColorMethod(percentage) {\n        if (percentage < 30) {\n          return '#909399';\n        } else if (percentage < 70) {\n          return '#e6a23c';\n        } else {\n          return '#67c23a';\n        }\n      },\n      increase() {\n        this.percentage += 10;\n        if (this.percentage > 100) {\n          this.percentage = 100;\n        }\n      },\n      decrease() {\n        this.percentage -= 10;\n        if (this.percentage < 0) {\n          this.percentage = 0;\n        }\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Barra de progreso circular\n\n:::demo Puede asignar el atributo `type` como `circle` para usar la barra circular de progreso, y usar el atributo `width` para cambiar el tamaño del círculo.\n```html\n<el-progress type=\"circle\" :percentage=\"0\"></el-progress>\n<el-progress type=\"circle\" :percentage=\"25\"></el-progress>\n<el-progress type=\"circle\" :percentage=\"100\" status=\"success\"></el-progress>\n<el-progress type=\"circle\" :percentage=\"70\" status=\"warning\"></el-progress>\n<el-progress type=\"circle\" :percentage=\"50\" status=\"exception\"></el-progress>\n```\n:::\n\n### Barra de progreso del panel de control\n\n:::demo También puede especificar el atributo `type` a `dashboard` para usar la barra de progreso del panel de control.\n\n```html\n<el-progress type=\"dashboard\" :percentage=\"percentage\" :color=\"colors\"></el-progress>\n\n<div>\n  <el-button-group>\n    <el-button icon=\"el-icon-minus\" @click=\"decrease\"></el-button>\n    <el-button icon=\"el-icon-plus\" @click=\"increase\"></el-button>\n  </el-button-group>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        percentage: 10,\n        colors: [\n          {color: '#f56c6c', percentage: 20},\n          {color: '#e6a23c', percentage: 40},\n          {color: '#5cb87a', percentage: 60},\n          {color: '#1989fa', percentage: 80},\n          {color: '#6f7ad3', percentage: 100}\n        ]\n      };\n    },\n    methods: {\n      increase() {\n        this.percentage += 10;\n        if (this.percentage > 100) {\n          this.percentage = 100;\n        }\n      },\n      decrease() {\n        this.percentage -= 10;\n        if (this.percentage < 0) {\n          this.percentage = 0;\n        }\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Atributos\n| Atributo     | Descripción                              | Tipo    | Valores aceptado  | Por defecto |\n| ------------ | ---------------------------------------- | ------- | ----------------- | ----------- |\n| percentage   | porcentaje, requerido                    | number  | 0-100             | 0           |\n| type         | tipo de barra de progreso                | string  | line/circle/dashboard  | line   |\n| stroke-width | ancho de la barra de progreso            | number  | —                 | 6           |\n| text-inside  | mostrar el porcentaje dentro de la barra de progreso, solo funciona cuando `type` es 'line' | boolean | —                 | false       |\n| status       | estado actual de la barra de progreso    | string  | success/exception/warning | —   |\n| color        | color de fondo de la barra de progreso. Sobrescribe la propiedad `status` | string/function/array | — | '' |\n| width        | ancho del canvas que contiene la barra de progreso circula | number  | —                 | 126         |\n| show-text    | mostrar porcentaje                       | boolean | —                 | true        |\n| stroke-linecap  | circle/dashboard tipo de diseño al final del camino | string | butt/round/square | round |\n| format  | personalizar el formato de texto estableciendo format  | function(percentage) | — | — |\n| define-back-color  | background color of progress bar (hex format) | string | — | — |\n| text-color  | text color of progress bar (hex format) | string | — | — |"
  },
  {
    "path": "examples/docs/es/quickstart.md",
    "content": "## Inicio rápido\n\nEsta sección te guía en el proceso de usar Element con webpack en un proyecto.\n\n### Use vue-cli@3\n\nProporcionamos un [plugin de Element](https://github.com/ElementUI/vue-cli-plugin-element) para vue-cli@3, que puede utilizar para construir rápidamente un proyecto basado en Element.\n\n### Usa la plantilla de Kit de inicio\n\nProveemos una plantilla general [project template](https://github.com/ElementUI/element-starter). Para los usuarios de Laravel, también tenemos [template](https://github.com/ElementUI/element-in-laravel-starter). Puedes descargarlas y agregarlas directamente también.\n\nSi prefiere no utilizarlas, lee las siguientes secciones de este documento.\n\n### Importando Element\n\nPuede importar Element completamente o solamente importar lo que necesite. Comencemos importando todo.\n\n#### Importando todo\n\nEn main.js:\n\n```javascript\nimport Vue from 'vue';\nimport ElementUI from 'element-ui';\nimport 'element-ui/lib/theme-chalk/index.css';\nimport App from './App.vue';\n\nVue.use(ElementUI);\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});\n```\n\nEl código anterior importa Element completamente. Nótese que el archivo CSS necesita ser incluido por separado.\n\n#### En demanda\n\nCon la ayuda de [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component), podemos importar los componentes que necesitamos, haciendo nuestro proyecto más pequeño que de la otra manera.\n\nPrimero, instale babel-plugin-component:\n\n```bash\nnpm install babel-plugin-component -D\n```\n\nLuego edite .babelrc:\n\n```json\n{\n  \"presets\": [[\"es2015\", { \"modules\": false }]],\n  \"plugins\": [\n    [\n      \"component\",\n      {\n        \"libraryName\": \"element-ui\",\n        \"styleLibraryName\": \"theme-chalk\"\n      }\n    ]\n  ]\n}\n```\n\nLuego, si necesita Button y Select, edite main.js:\n\n```javascript\nimport Vue from 'vue';\nimport { Button, Select } from 'element-ui';\nimport App from './App.vue';\n\nVue.component(Button.name, Button);\nVue.component(Select.name, Select);\n/* or\n * Vue.use(Button)\n * Vue.use(Select)\n */\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});\n```\n\nEjemplo completo (Referencia completa de componentes [components.json](https://github.com/ElemeFE/element/blob/master/components.json))\n\n```javascript\nimport Vue from 'vue';\nimport {\n  Pagination,\n  Dialog,\n  Autocomplete,\n  Dropdown,\n  DropdownMenu,\n  DropdownItem,\n  Menu,\n  Submenu,\n  MenuItem,\n  MenuItemGroup,\n  Input,\n  InputNumber,\n  Radio,\n  RadioGroup,\n  RadioButton,\n  Checkbox,\n  CheckboxButton,\n  CheckboxGroup,\n  Switch,\n  Select,\n  Option,\n  OptionGroup,\n  Button,\n  ButtonGroup,\n  Table,\n  TableColumn,\n  DatePicker,\n  TimeSelect,\n  TimePicker,\n  Popover,\n  Tooltip,\n  Breadcrumb,\n  BreadcrumbItem,\n  Form,\n  FormItem,\n  Tabs,\n  TabPane,\n  Tag,\n  Tree,\n  Alert,\n  Slider,\n  Icon,\n  Row,\n  Col,\n  Upload,\n  Progress,\n  Spinner,\n  Badge,\n  Card,\n  Rate,\n  Steps,\n  Step,\n  Carousel,\n  CarouselItem,\n  Collapse,\n  CollapseItem,\n  Cascader,\n  ColorPicker,\n  Transfer,\n  Container,\n  Header,\n  Aside,\n  Main,\n  Footer,\n  Timeline,\n  TimelineItem,\n  Link,\n  Divider,\n  Image,\n  Calendar,\n  Backtop,\n  PageHeader,\n  CascaderPanel,\n  Loading,\n  MessageBox,\n  Message,\n  Notification\n} from 'element-ui';\n\nVue.use(Pagination);\nVue.use(Dialog);\nVue.use(Autocomplete);\nVue.use(Dropdown);\nVue.use(DropdownMenu);\nVue.use(DropdownItem);\nVue.use(Menu);\nVue.use(Submenu);\nVue.use(MenuItem);\nVue.use(MenuItemGroup);\nVue.use(Input);\nVue.use(InputNumber);\nVue.use(Radio);\nVue.use(RadioGroup);\nVue.use(RadioButton);\nVue.use(Checkbox);\nVue.use(CheckboxButton);\nVue.use(CheckboxGroup);\nVue.use(Switch);\nVue.use(Select);\nVue.use(Option);\nVue.use(OptionGroup);\nVue.use(Button);\nVue.use(ButtonGroup);\nVue.use(Table);\nVue.use(TableColumn);\nVue.use(DatePicker);\nVue.use(TimeSelect);\nVue.use(TimePicker);\nVue.use(Popover);\nVue.use(Tooltip);\nVue.use(Breadcrumb);\nVue.use(BreadcrumbItem);\nVue.use(Form);\nVue.use(FormItem);\nVue.use(Tabs);\nVue.use(TabPane);\nVue.use(Tag);\nVue.use(Tree);\nVue.use(Alert);\nVue.use(Slider);\nVue.use(Icon);\nVue.use(Row);\nVue.use(Col);\nVue.use(Upload);\nVue.use(Progress);\nVue.use(Spinner);\nVue.use(Badge);\nVue.use(Card);\nVue.use(Rate);\nVue.use(Steps);\nVue.use(Step);\nVue.use(Carousel);\nVue.use(CarouselItem);\nVue.use(Collapse);\nVue.use(CollapseItem);\nVue.use(Cascader);\nVue.use(ColorPicker);\nVue.use(Transfer);\nVue.use(Container);\nVue.use(Header);\nVue.use(Aside);\nVue.use(Main);\nVue.use(Footer);\nVue.use(Timeline);\nVue.use(TimelineItem);\nVue.use(Link);\nVue.use(Divider);\nVue.use(Image);\nVue.use(Calendar);\nVue.use(Backtop);\nVue.use(PageHeader);\nVue.use(CascaderPanel);\n\nVue.use(Loading.directive);\n\nVue.prototype.$loading = Loading.service;\nVue.prototype.$msgbox = MessageBox;\nVue.prototype.$alert = MessageBox.alert;\nVue.prototype.$confirm = MessageBox.confirm;\nVue.prototype.$prompt = MessageBox.prompt;\nVue.prototype.$notify = Notification;\nVue.prototype.$message = Message;\n```\n\n### Configuración global\n\nCuando importa Element, puede definir un objeto global de configuración. Por ahora este elemento solo contiene dos propiedades: `size`, `zIndex`. `size` define el tamaño por defecto de todos los componentes.\n\nLa propiedad `zIndex` indica el z-index inicial (por defecto: 2000) para los modal:\n\nImportando Element completamente：\n\n```js\nimport Vue from 'vue';\nimport Element from 'element-ui';\nVue.use(Element, { size: 'small', zIndex: 3000 });\n```\n\nImportando Element parcialmente：\n\n```js\nimport Vue from 'vue';\nimport { Button } from 'element-ui';\n\nVue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };\nVue.use(Button);\n```\n\nCon la anterior configuración, el tamaño por defecto de todos los componentes que tienen el atributo `size` será `small`. El valor inicial de z-index para los modals se ha establecido a 3000.\n\n### Empiece ya!\n\nAhora ha incorporado Vue y Element a su proyecto y es el momento para comenzar a programar. Por favor, refiérase a la documentación de cada componente para aprender cómo usarlos.\n\n### Use Nuxt.js\n\nTambién podemos comenzar un proyecto usando [Nuxt.js](nuxtjs.org):\n\n<div class=\"glitch-embed-wrap\" style=\"height: 420px; width: 100%;\">\n  <iframe src=\"https://glitch.com/embed/#!/embed/nuxt-with-element?path=nuxt.config.js&previewSize=0&attributionHidden=true\" alt=\"nuxt-with-element on glitch\" style=\"height: 100%; width: 100%; border: 0;\"></iframe>\n</div>\n"
  },
  {
    "path": "examples/docs/es/radio.md",
    "content": "## Radio\nSelección única entre múltiples opciones.\n\n### Uso básico\nEl elemento Radio no debe tener muchas opciones. De otra manera, utilice el componente Select.\n\n:::demo Crear un elemento Radio es fácil, solo necesita enlazar(`bind`) una variable a la directiva `v-model` del Radio. Va a ser igual al valor `label` del Radio seleccionado. El tipo de dato de `label` es `String`, `Number` o `Boolean`.\n```html\n<template>\n  <el-radio v-model=\"radio\" label=\"1\">Option A</el-radio>\n  <el-radio v-model=\"radio\" label=\"2\">Option B</el-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio: '1'\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Deshabilitado\n\nEl atributo `disabled` es utilizado para deshabilitar un Radio.\n\n:::demo Solo necesita agregar el atributo `disabled`.\n```html\n<template>\n  <el-radio disabled v-model=\"radio\" label=\"disabled\">Option A</el-radio>\n  <el-radio disabled v-model=\"radio\" label=\"selected and disabled\">Option B</el-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio: 'selected and disabled'\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Grupo de elementos Radio\n\nRecomendado para seleccionar opciones que se excluyen mutuamente.\n\n:::demo Combine `el-radio-group` con `el-radio` para mostrar un grupo de Radios. Enlace la variable con `v-model` del elemento `el-radio-group` y asigne el valor del `label` en `el-radio`. Se provee el evento `change` con el valor actual como parámetro.\n\n```html\n<el-radio-group v-model=\"radio\">\n  <el-radio :label=\"3\">Option A</el-radio>\n  <el-radio :label=\"6\">Option B</el-radio>\n  <el-radio :label=\"9\">Option C</el-radio>\n</el-radio-group>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio: 3\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Estilo Button\n\nRadio con estilo de botón.\n\n:::demo Solo necesita cambiar el elemento `el-radio` a `el-radio-button`. Se provee el atributo `size`.\n```html\n<template>\n  <div>\n    <el-radio-group v-model=\"radio1\">\n      <el-radio-button label=\"New York\"></el-radio-button>\n      <el-radio-button label=\"Washington\"></el-radio-button>\n      <el-radio-button label=\"Los Angeles\"></el-radio-button>\n      <el-radio-button label=\"Chicago\"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-radio-group v-model=\"radio2\" size=\"medium\">\n      <el-radio-button label=\"New York\" ></el-radio-button>\n      <el-radio-button label=\"Washington\"></el-radio-button>\n      <el-radio-button label=\"Los Angeles\"></el-radio-button>\n      <el-radio-button label=\"Chicago\"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-radio-group v-model=\"radio3\" size=\"small\">\n      <el-radio-button label=\"New York\"></el-radio-button>\n      <el-radio-button label=\"Washington\" disabled ></el-radio-button>\n      <el-radio-button label=\"Los Angeles\"></el-radio-button>\n      <el-radio-button label=\"Chicago\"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-radio-group v-model=\"radio4\" disabled size=\"mini\">\n      <el-radio-button label=\"New York\"></el-radio-button>\n      <el-radio-button label=\"Washington\"></el-radio-button>\n      <el-radio-button label=\"Los Angeles\"></el-radio-button>\n      <el-radio-button label=\"Chicago\"></el-radio-button>\n    </el-radio-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio1: 'New York',\n        radio2: 'New York',\n        radio3: 'New York',\n        radio4: 'New York'\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Con bordes\n\n:::demo El atributo `border` agrega un borde al elemento Radio.\n```html\n<template>\n  <div>\n    <el-radio v-model=\"radio1\" label=\"1\" border>Option A</el-radio>\n    <el-radio v-model=\"radio1\" label=\"2\" border>Option B</el-radio>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-radio v-model=\"radio2\" label=\"1\" border size=\"medium\">Option A</el-radio>\n    <el-radio v-model=\"radio2\" label=\"2\" border size=\"medium\">Option B</el-radio>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-radio-group v-model=\"radio3\" size=\"small\">\n      <el-radio label=\"1\" border>Option A</el-radio>\n      <el-radio label=\"2\" border disabled>Option B</el-radio>\n    </el-radio-group>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-radio-group v-model=\"radio4\" size=\"mini\" disabled>\n      <el-radio label=\"1\" border>Option A</el-radio>\n      <el-radio label=\"2\" border>Option B</el-radio>\n    </el-radio-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio1: '1',\n        radio2: '1',\n        radio3: '1',\n        radio4: '1'\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Atributos de Radio\n\n| Atributo | Descripción                              | Tipo                      | Valores Aceptado      | Por defecto |\n| -------- | ---------------------------------------- | ------------------------- | --------------------- | ----------- |\n| value / v-model | valor enlazado | string / number / boolean | — | — |\n| label    | el valor del Radio                       | string / number / boolean | —                     | —           |\n| disabled | si el Radio está deshabilitado           | boolean                   | —                     | false       |\n| border   | agregar borde alrededor del elemento Radio | boolean                   | —                     | false       |\n| size     | tamaño del elemento Radio, solo funciona si `border` es verdadero | string                    | medium / small / mini | —           |\n| name     | atributo nativo `name`                 | string                    | —                     | —           |\n\n### Atributos de Radio-button\n\n| Atributo | Descripción                    | Tipo            | Valores Aceptado | Por defecto |\n| -------- | ------------------------------ | --------------- | ---------------- | ----------- |\n| label    | el valor del Radio             | string / number | —                | —           |\n| disabled | si el Radio está deshabilitado | boolean         | —                | false       |\n| name     | atributo nativo `name`         | string          | —                | —           |\n\n### Atributos de Radio-group\n\n| Atributo   | Descripción                              | Tipo    | Valores Aceptado      | Valores por defecto |\n| ---------- | ---------------------------------------- | ------- | --------------------- | ------------------- |\n| value / v-model | valor enlazado | string / number / boolean | — | — |\n| size       | tamaño de los `radio buttons` o `bordered radios` | string  | medium / small / mini | —                   |\n| disabled   | si la anidación de radios está deshabilitada | boolean | —                     | false               |\n| text-color | color de las letras cuando el botón está activo | string  | —                     | #ffffff             |\n| fill       | color del borde y fondo cuando el botón está activo | string  | —                     | #409EFF             |\n\n### Eventos de Radio \n\n| Nombre de evento | Descripción                       | Parámetros                               |\n| ---------------- | --------------------------------- | ---------------------------------------- |\n| change           | se dispara cuando el valor cambia | el valor del `label` del Radio seleccionado |\n\n\n### Eventos de Radio-group \n\n| Nombre de evento | Descripción                       | Parámetros                               |\n| ---------------- | --------------------------------- | ---------------------------------------- |\n| change           | se dispara cuando el valor cambia | el valor del `label` del Radio seleccionado |\n\n"
  },
  {
    "path": "examples/docs/es/rate.md",
    "content": "## Calificación\n\nUsado para la calificación\n\n### Uso básico\n\n:::demo Clasificación divide las puntuaciones en tres niveles y estos niveles pueden distinguirse usando diferentes colores de fondo. Por defecto los colores de fondo son iguales, pero puedes asignarlos para reflejar los tres niveles usando el atributo `colors` y sus dos umbrales pueden ser definidos con `low-treshold` y `high-treshold`. O puede asignarlos con un objeto cuya clave es el umbral entre dos niveles y cuyo valor es el color correspondiente.\n\n\n```html\n<div class=\"block\">\n  <span class=\"demonstration\">Default</span>\n  <el-rate v-model=\"value1\"></el-rate>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Color for different levels</span>\n  <el-rate\n    v-model=\"value2\"\n    :colors=\"colors\">\n  </el-rate>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: null,\n        value2: null,\n        colors: ['#99A9BF', '#F7BA2A', '#FF9900'] // same as { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Con texto\n\nUsa texto para indicar la puntuación\n\n:::demo Agregar el atributo `show-text` para mostrar texto a la derecha del componente. Puede asignar textos para las distintas puntuaciones usando `texts`. `texts` es un arreglo cuya longitud debe ser igual a la máxima puntuación `max`.\n\n```html\n<el-rate\n  v-model=\"value\"\n  :texts=\"['oops', 'disappointed', 'normal', 'good', 'great']\"\n  show-text>\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: null\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Más iconos\n\nPuede utilizar iconos para diferenciar cada componente.\n\n:::demo Puede personalizar los iconos pasando `icon-classes` un array con tres elementos o un objeto cuya clave es el umbral entre dos niveles y cuyo valor es la clase de icono correspondiente.  En este ejemplo también usamos `void-icon-class` para asignar un icono si no está seleccionado.\n\n```html\n<el-rate\n  v-model=\"value\"\n  :icon-classes=\"iconClasses\"\n  void-icon-class=\"icon-rate-face-off\"\n  :colors=\"['#99A9BF', '#F7BA2A', '#FF9900']\">\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: null,\n        iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'] // same as { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Solo lectura\n\nLa calificación de solo lectura es para mostrar la puntuación. Soporta media estrella.\n\n:::demo Use el atributo `disabled` para hacer el componente de solo lectura. Agregar `show-score` para mostrar la puntuación en el lado derecho. Además, puede usar el atributo `score-template` para proveer una plantilla. Tiene que contener `{value}`, y `{value}` será sustituido por la puntuación.\n\n```html\n<el-rate\n  v-model=\"value\"\n  disabled\n  show-score\n  text-color=\"#ff9900\"\n  score-template=\"{value} points\">\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: 3.7\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Atributos\n| Atributo                 | Descripción                              | Tipo    | Valores aceptado | Por defecto                              |\n| ------------------------ | ---------------------------------------- | ------- | ---------------- | ---------------------------------------- |\n| value / v-model           | valor enlazado                           | number  | —                | 0                                        |\n| max                      | puntuación máxima                        | number  | —                | 5                                        |\n| disabled                 | si la calificación es de solo lectura    | boolean | —                | false                                    |\n| allow-half               | si escoger media estrella está permitido | boolean | —                | false                                    |\n| low-threshold            | valor del umbral entre nivel bajo y medio. El valor será incluido en el nivel bajo | number  | —                | 2                                        |\n| high-threshold           | valor del umbral entre nivel bajo y medio. El valor será incluido en el nivel alto | number  | —                | 4                                        |\n| colors                   | colores para los iconos. Si se trata de una matriz, debe tener 3 elementos, cada uno de los cuales corresponde a un nivel de puntuación, si se trata de un objeto, la clave debe ser el valor umbral entre dos niveles, y el valor debe ser el color correspondiente. | array/object   | —         | ['#F7BA2A', '#F7BA2A', '#F7BA2A']        |\n| void-color               | color para iconos no seleccionados       | string  | —                | #C6D1DE                                  |\n| disabled-void-color      | color para las iconos no seleccionados de solo lectura | string  | —                | #EFF2F7                                  |\n| icon-classes             | nombres de clase de los iconos. Si es array, debe tener 3 elementos, cada uno de los cuales corresponde a un nivel de puntuación, en caso contrario, si es objeto, la clave debe ser el valor umbral entre dos niveles, y el valor debe ser la clase de icono correspondiente. | array/object   | —                | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |\n| void-icon-class          | nombre de clase para iconos no seleccionados | string  | —                | el-icon-star-off                         |\n| disabled-void-icon-class | nombre de clase para elementos no seleccionados de solo lectura | string  | —                | el-icon-star-on                          |\n| show-text                | muestra el texto                         | boolean | —                | false                                    |\n| show-score               | muestra puntuación actual. `show-score` y `show-text` no pueden ser verdaderos al mismo tiempo | boolean | —                | false                                    |\n| text-color               | color del texto                          | string  | —                | #1F2D3D                                  |\n| texts                    | arreglo de textos                        | array   | —                | ['极差', '失望', '一般', '满意', '惊喜']           |\n| score-template           | plantilla de puntuación                  | string  | —                | {value}                                  |\n\n### Eventos\n| Nombre del evento | Descripción                              | Parámetros             |\n| ----------------- | ---------------------------------------- | ---------------------- |\n| change            | Se dispara cuando la puntuación es cambiada | valor luego del cambio |\n"
  },
  {
    "path": "examples/docs/es/result.md",
    "content": "## Result\n\nUsed to give feedback on the result of user's operation or access exception.\n\n### Basic usage\n\n:::demo\n\n```html\n<el-row>\n  <el-col :sm=\"12\" :lg=\"6\">\n    <el-result icon=\"success\" title=\"Success Tip\" subTitle=\"Please follow the instructions\">\n      <template slot=\"extra\">\n        <el-button type=\"primary\" size=\"medium\">Back</el-button>\n      </template>\n    </el-result>\n  </el-col>\n  <el-col :sm=\"12\" :lg=\"6\">\n    <el-result icon=\"warning\" title=\"Warning Tip\" subTitle=\"Please follow the instructions\">\n      <template slot=\"extra\">\n        <el-button type=\"primary\" size=\"medium\">Back</el-button>\n      </template>\n    </el-result>\n  </el-col>\n  <el-col :sm=\"12\" :lg=\"6\">\n    <el-result icon=\"error\" title=\"Error Tip\" subTitle=\"Please follow the instructions\">\n      <template slot=\"extra\">\n        <el-button type=\"primary\" size=\"medium\">Back</el-button>\n      </template>\n    </el-result>\n  </el-col>\n  <el-col :sm=\"12\" :lg=\"6\">\n    <el-result icon=\"info\" title=\"Info Tip\" subTitle=\"Please follow the instructions\">\n      <template slot=\"extra\">\n        <el-button type=\"primary\" size=\"medium\">Back</el-button>\n      </template>\n    </el-result>\n  </el-col>\n</el-row>\n```\n\n:::\n\n### Customized content\n\n:::demo\n\n```html\n<el-result title=\"404\" subTitle=\"Sorry, request error\">\n  <template slot=\"icon\">\n    <el-image src=\"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png\"></el-image>\n  </template>\n  <template slot=\"extra\">\n    <el-button type=\"primary\" size=\"medium\">Back</el-button>\n  </template>\n</el-result>\n```\n\n:::\n\n### Result Attributes\n\n| Attribute     | Description    | Type            | Accepted Values      | Default   |\n|-------------  |---------------- |---------------- |---------------------- |-------- |\n| title          | title         | string  |          —             |    —     |\n| sub-title    | sub title  | string | — |    —  |\n| icon  | icon type    | string  |    success / warning / info / error  |  info |\n\n### Result Slots\n\n| Name | Description |\n|------|--------|\n| icon | custom icon  |\n| title | custom title     |\n| subTitle | custom sub title     |\n| extra | custom  extra area    |\n"
  },
  {
    "path": "examples/docs/es/select.md",
    "content": "## Select\n\nCuando haya muchas opciones, utilice un menú desplegable para mostrar y seleccionar las que desee.\n\n### Uso básico\n\n:::demo `v-model` es el valor de  `el-option` que está seleccionado actualmente.\n\n```html\n<template>\n  <el-select v-model=\"value\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value: ''\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Disabled en el-option\n\n:::demo Establezca el valor de `disabled` en `el-option`  como `true` para deshabilitar esta opción.\n\n```html\n<template>\n  <el-select v-model=\"value\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\"\n      :disabled=\"item.disabled\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2',\n          disabled: true\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value: ''\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Disabled en el-select\n\nDesactivar todo el componente.\n\n:::demo Configure `disabled` de `el-select` para deshabilitarla.\n\n```html\n<template>\n  <el-select v-model=\"value\" disabled placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value: ''\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Select simple limpiable\n\nPuede limpiar un Select con un icono.\n\n:::demo Establezca el atributo `clearable` para `el-select`  y aparecerá un icono. Tenga en cuenta que la opción `clearable` es sólo para una selección individual.\n\n```html\n<template>\n  <el-select v-model=\"value\" clearable placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value: ''\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Selección múltiple básica\n\nSelección múltiple utiliza tags para mostrar las opciones seleccionadas.\n\n:::demo Configure el atributo `multiple` para `el-select` para habilitar el modo múltiple. En este caso, el valor del `v-model` será un array de opciones seleccionadas. De forma predeterminada, las opciones seleccionadas se mostrarán como tags. Se pueden contraer a un texto utilizando el atributo  `collapse-tags`.\n\n```html\n<template>\n  <el-select v-model=\"value1\" multiple placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n\n  <el-select\n    v-model=\"value2\"\n    multiple\n    collapse-tags\n    style=\"margin-left: 20px;\"\n    placeholder=\"Select\">\n    <el-option\n        v-for=\"item in options\"\n        :key=\"item.value\"\n        :label=\"item.label\"\n        :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value1: [],\n        value2: []\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Personalizar template\n\nPuede personalizar templates HTML para las opciones.\n\n:::demo Inserte templates HTML personalizados en el slot de `el-option`.\n\n```html\n<template>\n  <el-select v-model=\"value\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in cities\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n      <span style=\"float: left\">{{ item.label }}</span>\n      <span style=\"float: right; color: #8492a6; font-size: 13px\">{{ item.value }}</span>\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        cities: [{\n          value: 'Beijing',\n          label: 'Beijing'\n        }, {\n          value: 'Shanghai',\n          label: 'Shanghai'\n        }, {\n          value: 'Nanjing',\n          label: 'Nanjing'\n        }, {\n          value: 'Chengdu',\n          label: 'Chengdu'\n        }, {\n          value: 'Shenzhen',\n          label: 'Shenzhen'\n        }, {\n          value: 'Guangzhou',\n          label: 'Guangzhou'\n        }],\n        value: ''\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Agrupando\n\nMostrar opciones en grupos.\n\n:::demo Utilice `el-option-group` para agrupar las opciones, y su atributo `label` representa el nombre del grupo.\n\n```html\n<template>\n  <el-select v-model=\"value\" placeholder=\"Select\">\n    <el-option-group\n      v-for=\"group in options\"\n      :key=\"group.label\"\n      :label=\"group.label\">\n      <el-option\n        v-for=\"item in group.options\"\n        :key=\"item.value\"\n        :label=\"item.label\"\n        :value=\"item.value\">\n      </el-option>\n    </el-option-group>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          label: 'Popular cities',\n          options: [{\n            value: 'Shanghai',\n            label: 'Shanghai'\n          }, {\n            value: 'Beijing',\n            label: 'Beijing'\n          }]\n        }, {\n          label: 'City name',\n          options: [{\n            value: 'Chengdu',\n            label: 'Chengdu'\n          }, {\n            value: 'Shenzhen',\n            label: 'Shenzhen'\n          }, {\n            value: 'Guangzhou',\n            label: 'Guangzhou'\n          }, {\n            value: 'Dalian',\n            label: 'Dalian'\n          }]\n        }],\n        value: ''\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Filtrado de opciones\n\nPuede filtrar opciones como lo desee.\n\n:::demo Añadir `filterable` a `el-select` permite filtrar. Por defecto, Select buscará todas las opciones cuyo atributo`label` contenga el valor del input. Si prefiere otras estrategias de filtrado, puede pasar el `filter-method`. `filter-method` es una función que se llama cuando el valor del input cambia, y su parámetro es el valor del input actual.\n\n```html\n<template>\n  <el-select v-model=\"value\" filterable placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value: ''\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Búsqueda remota\n\nIntroduzca palabras y datos para buscar desde el servidor.\n\n:::demo Configure el valor de `filterable` y `remote` con `true` para habilitar la búsqueda remota, y debería pasar el método `remote-method`. `remote-method` es una función que se llama cuando el valor del input cambia, y su parámetro es el valor del input actual. Tenga en cuenta que si `el-option` se presenta con la directiva `v-for`, debe agregar el atributo `key` para `el-option`. Su valor tiene que ser unívoco, como el valor de `item.value` en el ejemplo siguiente.\n\n```html\n<template>\n  <el-select\n    v-model=\"value\"\n    multiple\n    filterable\n    remote\n    reserve-keyword\n    placeholder=\"Please enter a keyword\"\n    :remote-method=\"remoteMethod\"\n    :loading=\"loading\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [],\n        value: [],\n        list: [],\n        loading: false,\n        states: [\"Alabama\", \"Alaska\", \"Arizona\",\n        \"Arkansas\", \"California\", \"Colorado\",\n        \"Connecticut\", \"Delaware\", \"Florida\",\n        \"Georgia\", \"Hawaii\", \"Idaho\", \"Illinois\",\n        \"Indiana\", \"Iowa\", \"Kansas\", \"Kentucky\",\n        \"Louisiana\", \"Maine\", \"Maryland\",\n        \"Massachusetts\", \"Michigan\", \"Minnesota\",\n        \"Mississippi\", \"Missouri\", \"Montana\",\n        \"Nebraska\", \"Nevada\", \"New Hampshire\",\n        \"New Jersey\", \"New Mexico\", \"New York\",\n        \"North Carolina\", \"North Dakota\", \"Ohio\",\n        \"Oklahoma\", \"Oregon\", \"Pennsylvania\",\n        \"Rhode Island\", \"South Carolina\",\n        \"South Dakota\", \"Tennessee\", \"Texas\",\n        \"Utah\", \"Vermont\", \"Virginia\",\n        \"Washington\", \"West Virginia\", \"Wisconsin\",\n        \"Wyoming\"]\n      }\n    },\n    mounted() {\n      this.list = this.states.map(item => {\n        return { value: `value:${item}`, label: `label:${item}` };\n      });\n    },\n    methods: {\n      remoteMethod(query) {\n        if (query !== '') {\n          this.loading = true;\n          setTimeout(() => {\n            this.loading = false;\n            this.options = this.list.filter(item => {\n              return item.label.toLowerCase()\n                .indexOf(query.toLowerCase()) > -1;\n            });\n          }, 200);\n        } else {\n          this.options = [];\n        }\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Crear nuevos items\nCrear y seleccionar nuevos items que no están incluidas en las opciones de selección.\n\n:::demo Al utilizar el atributo `allow-create`, los usuarios pueden crear nuevos elementos escribiendo en el cuadro del input. Tenga en cuenta que para que `allow-create` funcione, `filterable` debe ser `true`.\n\n```html\n<template>\n  <el-select\n    v-model=\"value\"\n    multiple\n    filterable\n    allow-create\n    placeholder=\"Choose tags for your article\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'HTML',\n          label: 'HTML'\n        }, {\n          value: 'CSS',\n          label: 'CSS'\n        }, {\n          value: 'JavaScript',\n          label: 'JavaScript'\n        }],\n        value: []\n      }\n    }\n  }\n</script>\n```\n:::\n\n:::tip\n\nSi el valor de encuadernación de Select es un objeto, asegúrese de asignar `value-key` como el nombre único de la clave de identidad.\n\n:::\n\n### Select atributos\n| Atributo             | Descripción                              | Tipo     | Valores aceptados | Por defecto      |\n| -------------------- | ---------------------------------------- | -------- | ----------------- | ---------------- |\n| value / v-model       | valor enlazado                           | boolean / string / number  | —         | —                |\n| multiple             | si multiple-select esta activo           | boolean  | —                 | false            |\n| disabled             | si Select esta deshabilitado             | boolean  | —                 | false            |\n| collapse-tags        | si se colapsan los tags a un texto cuando `multiple` es `true`. | boolean  | —                 | false            |\n| value-key            | nombre de clave de identidad única para el valor, necesario cuando el valor es un objeto. | string   | —                 | value            |\n| size                 | tamaño del Input                         | string   | large/small/mini  | —                |\n| clearable            | si el select puede ser limpiado | boolean  | —                 | false            |\n| multiple-limit       | máximo numero de opciones que el usuario puede seleccionar cuando `multiple` es `true`.  Sin límite cuando se fija a 0 | number   | —                 | 0                |\n| name                 | el atributo `name` del input seleccionado | string   | —                 | —                |\n| autocomplete         | el atributo `autocomplete` del input seleccionado | string   | —         | off              |\n| auto-complete         | @DEPRECATED en la proxima major versión | string   | —         | off              |\n| placeholder          | placeholder                              | string   | —                 | Select           |\n| filterable           | si Select es filtrable                   | boolean  | —                 | false            |\n| allow-create         | si esta permitido crear nuevos items. Para usar esto, `filterable` debe ser `true`. | boolean  | —                 | false            |\n| filter-method        | método de filtrado personalizado   | function | —                 | —                |\n| remote               | si las opciones se traerán desde el servidor | boolean  | —                 | false            |\n| remote-method        | método de búsqueda remota personalizada | function | —                 | —                |\n| loading              | si Select está cargando datos del servidor | boolean  | —                 | false            |\n| loading-text         | texto mostrado durante la carga de datos del servidor, también puedes usar la configuración de slot = \"empty\" | string   | —                 | Loading          |\n| no-match-text        | texto mostrado cuando ningún dato coincide con la consulta de filtrado. También puedes usar la configuración de slot = \"empty\" | string   | —                 | No matching data |\n| no-data-text         | texto mostrado cuando no hay opciones    | string   | —                 | No data          |\n| popper-class         | nombre de clase personalizado para el menú desplegable del Select | string   | —                 | —                |\n| reserve-keyword      | cuando `multiple` y `filter` es `true`, si se debe reservar la palabra clave actual después de seleccionar una opción. | boolean  | —                 | false            |\n| default-first-option | seleccione la primera opción de coincidencia en la tecla enter. Uso con `filterable` o `remote`. | boolean  | -                 | false            |\n| popper-append-to-body| si añadir o no el menu popup al body. Si el posicionamiento del popup es incorrecto, puede intentar poner este `prop` en `false`. | boolean | - | true |\n| automatic-dropdown | para non-filterable Select, este `prop` decide si el menú de opciones aparece cuando la entrada está enfocada | boolean | - | false |\n\n### Eventos Select\n| Nombre         | Descripción                                                  | Parámetros                                |\n| -------------- | ------------------------------------------------------------ | ----------------------------------------- |\n| change         | se dispara cuando el valor del select cambia                 | valor actual del select                   |\n| visible-change | se dispara cuando el menú desplegable aparece o desaparece   | true cuando aparece, y false en otro caso |\n| remove-tag     | se dispara cuando un tag es removido en modo múltiple        | el valor del tag removido                 |\n| clear          | se dispara cuando el icono se clickea en un Select limpiable | —                                         |\n| blur           | se dispara cuando el input pierde el foco                    | (event: Event)                            |\n| focus          | se dispara cuando el input obtiene el foco                   | (event: Event)                            |\n\n### Slots Select \n| Nombre | Descripción |\n|---------|-------------|\n|    —    | lista de los componentes Option |\n| prefix  | contenido prefix de un  Select |\n| empty | Lista sin opciones |\n\n### Atributos del grupo de opciones\n| Atributo | Descripción                              | Tipo    | Valores aceptados | Por defecto |\n| -------- | ---------------------------------------- | ------- | ----------------- | ----------- |\n| label    | nombre del grupo                         | string  | —                 | —           |\n| disabled | si se deshabilitan todas las opciones del grupo | boolean | —                 | false       |\n\n### Atributos de opciones\n| Atributo | Descripción                              | Tipo                 | Valores aceptados | Por defecto |\n| -------- | ---------------------------------------- | -------------------- | ----------------- | ----------- |\n| value    | valor de option                          | string/number/object | —                 | —           |\n| label    | etiqueta de option, es igual a  `value` si se omite | string/number        | —                 | —           |\n| disabled | si  option esta deshabilitado            | boolean              | —                 | false       |\n\n### Métodos\n| Método | Descripción                 | Parámetros |\n| ------ | --------------------------- | ---------- |\n| focus  | Foco en el componente input | -          |\n| blur   | Quita el focus del componente y oculta el dropdown | - |\n"
  },
  {
    "path": "examples/docs/es/skeleton.md",
    "content": "## Skeleton\n\nWhen loading data, and you need a rich experience for visual and interactions for your end users, you can choose `skeleton`.\n\n### Basic usage\n\nThe basic skeleton.\n\n:::demo\n\n```html\n<template>\n  <el-skeleton />\n</template>\n```\n\n:::\n\n### Configurable Rows\n\nYou can configure the row numbers yourself, we are rendering a title row with 33% width of the others.\n\n:::demo\n\n```html\n<el-skeleton :rows=\"6\" />\n```\n\n:::\n\n### Animation\nWe 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\n\n:::demo\n\n```html\n<el-skeleton :rows=\"6\" animated />\n```\n\n:::\n\n### Customized Template\nElement only provides the most common template, sometimes that could be a problem, so you have a slot named `template` to do that work.\n\nAlso 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.\n\n:::demo\n\n```html\n<template>\n  <el-skeleton style=\"width: 240px\">\n    <template slot=\"template\">\n      <el-skeleton-item variant=\"image\" style=\"width: 240px; height: 240px;\" />\n      <div style=\"padding: 14px;\">\n        <el-skeleton-item variant=\"p\" style=\"width: 50%\" />\n        <div\n          style=\"display: flex; align-items: center; justify-items: space-between;\"\n        >\n          <el-skeleton-item variant=\"text\" style=\"margin-right: 16px;\" />\n          <el-skeleton-item variant=\"text\" style=\"width: 30%;\" />\n        </div>\n      </div>\n    </template>\n  </el-skeleton>\n</template>\n```\n\n:::\n\n### Loading state\n\nWhen `Loading` ends, we always need to show the real UI with data to our end users. with the attribtue `loading` we can control whether showing the DOM. You can also use slot `default` to structure the real DOM element.\n\n:::demo\n\n```html\n<template>\n  <div style=\"width: 240px\">\n    <p>\n      <label style=\"margin-right: 16px;\">Switch Loading</label>\n      <el-switch v-model=\"loading\" />\n    </p>\n    <el-skeleton style=\"width: 240px\" :loading=\"loading\" animated>\n      <template slot=\"template\">\n        <el-skeleton-item\n          variant=\"image\"\n          style=\"width: 240px; height: 240px;\"\n        />\n        <div style=\"padding: 14px;\">\n          <el-skeleton-item variant=\"h3\" style=\"width: 50%;\" />\n          <div\n            style=\"display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;\"\n          >\n            <el-skeleton-item variant=\"text\" style=\"margin-right: 16px;\" />\n            <el-skeleton-item variant=\"text\" style=\"width: 30%;\" />\n          </div>\n        </div>\n      </template>\n      <template>\n        <el-card :body-style=\"{ padding: '0px', marginBottom: '1px' }\">\n          <img\n            src=\"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png\"\n            class=\"image\"\n          />\n          <div style=\"padding: 14px;\">\n            <span>Delicious hamberger</span>\n            <div class=\"bottom card-header\">\n              <span class=\"time\">{{ currentDate }}</span>\n              <el-button type=\"text\" class=\"button\">Operation button</el-button>\n            </div>\n          </div>\n        </el-card>\n      </template>\n    </el-skeleton>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        loading: true,\n        currentDate: '2021-06-01'\n      }\n    },\n  }\n</script>\n```\n\n:::\n\n\n### Rendering a list of data\n\nMost 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.\n\n\n:::tip\nWe 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.\n:::\n\n:::demo\n\n```html\n<template>\n  <div style=\"width: 400px\">\n    <p>\n      <el-button @click=\"setLoading\">Click me to reload</el-button>\n    </p>\n    <el-skeleton style=\"width:400px\" :loading=\"loading\" animated :count=\"3\">\n      <template slot=\"template\">\n        <el-skeleton-item\n          variant=\"image\"\n          style=\"width: 400px; height: 267px;\"\n        />\n        <div style=\"padding: 14px;\">\n          <el-skeleton-item variant=\"h3\" style=\"width: 50%;\" />\n          <div\n            style=\"display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;\"\n          >\n            <el-skeleton-item variant=\"text\" style=\"margin-right: 16px;\" />\n            <el-skeleton-item variant=\"text\" style=\"width: 30%;\" />\n          </div>\n        </div>\n      </template>\n      <template>\n        <el-card\n          :body-style=\"{ padding: '0px', marginBottom: '1px' }\"\n          v-for=\"item in lists\"\n          :key=\"item.name\"\n        >\n          <img :src=\"item.imgUrl\" class=\"image multi-content\" />\n          <div style=\"padding: 14px;\">\n            <span>Delicious hamberger</span>\n            <div class=\"bottom card-header\">\n              <span class=\"time\">{{ currentDate }}</span>\n              <el-button type=\"text\" class=\"button\">Operation button</el-button>\n            </div>\n          </div>\n        </el-card>\n      </template>\n    </el-skeleton>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        loading: true,\n        currentDate: '2021-06-01',\n        lists: [],\n      }\n    },\n    mounted() {\n      this.loading = false\n      this.lists = [\n        {\n          imgUrl:\n            'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',\n          name: 'Deer',\n        },\n        {\n          imgUrl:\n            'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',\n          name: 'Horse',\n        },\n        {\n          imgUrl:\n            'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',\n          name: 'Mountain Lion',\n        },\n      ]\n    },\n    methods: {\n      setLoading() {\n        this.loading = true\n        setTimeout(() => (this.loading = false), 2000)\n      },\n    },\n  }\n</script>\n```\n\n:::\n\n### Avoiding rendering bouncing.\nSometimes 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.\n\n\n:::demo\n\n```html\n<template>\n  <div style=\"width: 240px\">\n    <p>\n      <label style=\"margin-right: 16px;\">Switch Loading</label>\n      <el-switch v-model=\"loading\" />\n    </p>\n    <el-skeleton\n      style=\"width: 240px\"\n      :loading=\"loading\"\n      animated\n      :throttle=\"500\"\n    >\n      <template slot=\"template\">\n        <el-skeleton-item\n          variant=\"image\"\n          style=\"width: 240px; height: 240px;\"\n        />\n        <div style=\"padding: 14px;\">\n          <el-skeleton-item variant=\"h3\" style=\"width: 50%;\" />\n          <div\n            style=\"display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;\"\n          >\n            <el-skeleton-item variant=\"text\" style=\"margin-right: 16px;\" />\n            <el-skeleton-item variant=\"text\" style=\"width: 30%;\" />\n          </div>\n        </div>\n      </template>\n      <template>\n        <el-card :body-style=\"{ padding: '0px', marginBottom: '1px'}\">\n          <img\n            src=\"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png\"\n            class=\"image\"\n          />\n          <div style=\"padding: 14px;\">\n            <span>Delicious hamberger</span>\n            <div class=\"bottom card-header\">\n              <span class=\"time\">{{ currentDate }}</span>\n              <el-button type=\"text\" class=\"button\">operation button</el-button>\n            </div>\n          </div>\n        </el-card>\n      </template>\n    </el-skeleton>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        loading: false,\n        currentDate: '2021-06-01'\n      }\n    },\n  }\n</script>\n```\n:::\n\n### Skeleton Attributes\n\n| Attribute    | Description  | Type    | Acceptable Value | Default |\n| ------- | ---------------- | ------- | ------------ | ------ |\n| animated | whether showing the animation | boolean | true / false | false |\n| count   | how many fake items to render to the DOM | number | integer | 1 |\n| loading | whether showing the skeleton | boolean | true / false | true  |\n| rows    | numbers of the row, only useful when no template slot were given | number  | integer  | 4      |\n| throttle | Rendering delay in millseconds | number | integer | 0 |\n\n\n### Skeleton Item Attributes\n| Attribute    | Description             | Type    | Acceptable Value       | Default  |\n| ------- | ---------------- | ------- | ------------ | ------ |\n| variant | The current rendering skeleton type | Enum(string) | p / h1 / h3 / text / caption / button / image / circle / rect | text |\n\n\n### Skeleton Slots\n\n| Name | Description |\n| ---- | ----------- |\n| default | \bReal rendering DOM |\n| template | Custom rendering skeleton template |\n"
  },
  {
    "path": "examples/docs/es/slider.md",
    "content": "## Slider\n\nDesliza el slider dentro de un rango fijo.\n\n### Uso básico\n\nEl valor actual se muestra cuando se inicia el arrastre del slider.\n\n:::demo Personalice el valor inicial del slider configurando el valor vinculado.\n\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">Default value</span>\n    <el-slider v-model=\"value1\"></el-slider>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Customized initial value</span>\n    <el-slider v-model=\"value2\"></el-slider>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Hide Tooltip</span>\n    <el-slider v-model=\"value3\" :show-tooltip=\"false\"></el-slider>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Format Tooltip</span>\n    <el-slider v-model=\"value4\" :format-tooltip=\"formatTooltip\"></el-slider>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Disabled</span>\n    <el-slider v-model=\"value5\" disabled></el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: 0,\n        value2: 50,\n        value3: 36,\n        value4: 48,\n        value5: 42\n      }\n    },\n    methods: {\n      formatTooltip(val) {\n        return val / 100;\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Valores discretos\n\nLas opciones pueden ser discretas.\n\n:::demo Configure el tamaño del paso con el atributo `step`. Puede visualizar los puntos de ruptura configurando el atributo `show-stops`.\n\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">Breakpoints not displayed</span>\n    <el-slider\n      v-model=\"value1\"\n      :step=\"10\">\n    </el-slider>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Breakpoints displayed</span>\n    <el-slider\n      v-model=\"value2\"\n      :step=\"10\"\n      show-stops>\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: 0,\n        value2: 0\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Slider con input\n\nInserte el valor a través de un input\n\n:::demo Configure el atributo `show-input` para que muestre un input a la derecha.\n\n```html\n<template>\n  <div class=\"block\">\n    <el-slider\n      v-model=\"value\"\n      show-input>\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: 0\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Seleccion de rangos\n\nSe soporta la selección de un rango de valores.\n\n:::demo El ajuste del atributo `range` activa el modo range, donde el valor vinculado es un array compuesto por dos valores límite.\n\n```html\n<template>\n  <div class=\"block\">\n    <el-slider\n      v-model=\"value\"\n      range\n      show-stops\n      :max=\"10\">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: [4, 8]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Modo Vertical\n\n:::demo El ajuste del atributo `vertical` a `true` habilita el modo vertical. En el modo vertical, se requiere el atributo `height` .\n\n```html\n<template>\n  <div class=\"block\">\n    <el-slider\n      v-model=\"value\"\n      vertical\n      height=\"200px\">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: 0\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Mostrar marcas\n\n:::demo Use el atributo `marks`  para mostrar marcas en el slider.\n```html\n<template>\n  <div class=\"block\">\n    <el-slider\n      v-model=\"value\"\n      range\n      :marks=\"marks\">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: [30, 60],\n        marks: {\n          0: '0°C',\n          8: '8°C',\n          37: '37°C',\n          50: {\n            style: {\n              color: '#1989FA'\n            },\n            label: this.$createElement('strong', '50%')\n          }\n        }\n      }\n    }\n  }\n</script>\n```\n:::\n\n## Atributos\n| Atributo            | Descripción                              | Tipo            | Valores aceptados | Por defecto |\n| ------------------- | ---------------------------------------- | --------------- | ----------------- | ----------- |\n| value / v-model      | valor enlazado                           | number          | —                 | 0           |\n| min                 | valor mínimo                       | number          | —                 | 0           |\n| max                 | valor máximo                             | number          | —                 | 100         |\n| disabled            | si el Slider esta deshabitado            | boolean         | —                 | false       |\n| step                | tamaño del paso                          | number          | —                 | 1           |\n| show-input          | Si se muestra el input, trabaja cuando `range`es false | boolean         | —                 | false       |\n| show-input-controls | si se muestran los botones de control cuando`show-input`es true | boolean         | —                 | true        |\n| input-size          | tamaño del input   | string           | large / medium / small / mini | small |\n| show-stops          | si se muestran los puntos de ruptura (breakpoints) | boolean         | —                 | false       |\n| show-tooltip        | si se muestra el valor en un tooltip     | boolean         | —                 | true        |\n| format-tooltip      | formato para mostrar el valor del tooltip | function(value) | —                 | —           |\n| range               | si se usaran un rango                    | boolean         | —                 | false       |\n| vertical            | modo vertical                            | boolean         | —                 | false       |\n| height              | alto del Slider, requerido en modo vertical | string          | —                 | —           |\n| label               | etiqueta para screen reader              | string          | —                 | —           |\n| debounce            | retardo al escribir, en mili segundos, funciona cuando`show-input` es true. | number          | —                 | 300         |\n| tooltip-class       | nombre personalizado de clase para el tooltip | string | — | — |\n| marks | marcas, tipo de clave debe ser `number` y debe estar en intervalo cerrado [min, max], cada marca puede tener estilo personalizado | object | — | — |\n\n## Eventos\n| Nombre | Descripción                              | Parámetros     |\n| ------ | ---------------------------------------- | ------------------------ |\n| change | se dispara cuando el valor cambia (si el ratón está comenzando el arrastre este evento sólo se disparara cuando se suelte el ratón) | valor después del cambio |\n| input | Se dispara cuando los datos cambian (funciona en tiempo real) | valor después del cambio |\n\n"
  },
  {
    "path": "examples/docs/es/statistic.md",
    "content": "## Statistic\n\nUsed to highlight a certain number or group of numbers, such as showing a numerical value, such as a dollar amount, ranking, etc.\n\nCountdown mode\n\n### Basic usage\n\nThe component provides a thousandth place display, but you can use rate to set the 10,000th place, and so on\n:::demo\n\n```html\n<template>\n  <div>\n    <el-row :gutter=\"20\">\n      <el-col :span=\"6\">\n        <div>\n          <el-statistic\n            group-separator=\",\"\n            :precision=\"2\"\n            :value=\"value2\"\n            :title=\"title\"\n          ></el-statistic>\n        </div>\n      </el-col>\n      <el-col :span=\"6\">\n        <div>\n          <el-statistic title=\"Gender Distribution\">\n            <template slot=\"formatter\">\n              456/2\n            </template>\n          </el-statistic>\n        </div>\n      </el-col>\n      <el-col :span=\"6\">\n        <div>\n          <el-statistic\n            group-separator=\",\"\n            :precision=\"2\"\n            decimal-separator=\".\"\n            :value=\"value1\"\n            :title=\"title\"\n          >\n            <template slot=\"prefix\">\n              <i class=\"el-icon-s-flag\" style=\"color: red\"></i>\n            </template>\n            <template slot=\"suffix\">\n              <i class=\"el-icon-s-flag\" style=\"color: blue\"></i>\n            </template>\n          </el-statistic>\n        </div>\n      </el-col>\n      <el-col :span=\"6\">\n        <div>\n          <el-statistic :value=\"like ? 521 : 520\" title=\"Feedback\">\n            <template slot=\"suffix\">\n              <span @click=\"like = !like\" class=\"like\">\n                <i\n                  class=\"el-icon-star-on\"\n                  style=\"color:red\"\n                  v-show=\"!!like\"\n                ></i>\n                <i class=\"el-icon-star-off\" v-show=\"!like\"></i>\n              </span>\n            </template>\n          </el-statistic>\n        </div>\n      </el-col>\n    </el-row>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        like: true,\n        value1: 4154.564,\n        value2: 2222,\n        title: \"Growth this year\",\n      };\n    },\n  };\n</script>\n<style lang=\"scss\">\n  .like {\n    cursor: pointer;\n    font-size: 25px;\n    display: inline-block;\n  }\n</style>\n```\n\n:::\n\n### Count down\n\n:::warning\nSuspend is tentative, it ** just pauses the countdown, not the time, because value points to a future time node **\n\nIf you need to add time to the original, please note that the overall time (the amount of time added and the original time) must be a **future** time node, otherwise it is still the end of the countdown\n:::\n:::demo Providing a future time via 'value' will enable the countdown function\n\n```html\n<template>\n  <div>\n    <el-row :gutter=\"20\">\n      <el-col :span=\"14\">\n        <el-card shadow=\"hover\" style=\"width: 100%; \">\n          <div style=\"width: 100%; display: inline-block; \">\n            <el-statistic\n              :value=\"deadline2\"\n              time-indices\n              title=\"🎉Price reduction of goods🎉\"\n            >\n              <template slot=\"suffix\">\n                panic purchase\n              </template>\n            </el-statistic>\n          </div>\n        </el-card>\n        <el-card shadow=\"hover\" style=\"width: 100%;margin-top: 20px; \">\n          <div style=\"width: 100%; display: inline-block;\">\n            <el-statistic\n              @finish=\"hilarity\"\n              :value=\"deadline3\"\n              time-indices\n              title=\"The Value of Time\"\n            >\n              <template slot=\"suffix\">\n                <el-button type=\"primary \" size=\"small\" @click=\"add\"\n                  >add 10s</el-button\n                >\n              </template>\n            </el-statistic>\n          </div>\n        </el-card>\n      </el-col>\n      <el-col :span=\"10\">\n        <el-card shadow=\"hover\" style=\"width: 100%;\">\n          <div slot=\"header\" class=\"clearfix\">\n            <span style=\"font-size: 14px;\">Henry·Wadsworth·Longfellow</span>\n            <el-button\n              style=\"float: right; padding: 3px 0\"\n              type=\"text\"\n              @click=\"clickFn\"\n              >suspend</el-button\n            >\n          </div>\n          <div style=\"font-size: 16px;text-align: left;\">\n            Don't sigh in the past, it is no longer back\n          </div>\n          <div style=\"font-size: 16px;text-align: left;margin-top: 15px;\">\n            Be wise to improve the present\n          </div>\n          <div style=\"font-size: 16px;text-align: left;margin-top: 15px;\">\n            To not worry not afraid of the firm will into the complicated future\n          </div>\n          <div style=\"margin-top: 40px;\"></div>\n          <el-statistic\n            ref=\"statistic\"\n            @finish=\"hilarity\"\n            format=\"HH:mm:ss\"\n            :value=\"deadline4\"\n            title=\"Distance to Tomorrow:\"\n            time-indices\n          >\n          </el-statistic>\n        </el-card>\n      </el-col>\n    </el-row>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        deadline2: Date.now() + 1000 * 60 * 60 * 8,\n        deadline3: Date.now() + 1000 * 60 * 30,\n        deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),\n        stop: true,\n      };\n    },\n    methods: {\n      hilarity() {\n        this.$notify({\n          title: \"Prompt\",\n          message:\n            \"Time is up, do you know that an inch of gold can't buy an inch of time?\",\n          duration: 0,\n        });\n      },\n      clickFn() {\n        this.$refs.statistic.suspend(this.stop);\n        this.stop = !this.stop;\n      },\n      add() {\n        this.deadline3 = this.deadline3 + 1000 * 10;\n      },\n    },\n  };\n</script>\n```\n\n:::\n\n### Statistic Attributes\n\n| Attribute         | Description                    | Type                        | Accepted Values | Default |\n| ----------------- | ------------------------------ | --------------------------- | --------------- | ------- |\n| value             | Numerical content              | string \\| number            | -               | -       |\n| decimal-separator | Setting the decimal point      | string                      | -               | .       |\n| formatter         | Custom numerical presentation  | v-slot \\|({value}) => VNode | -               | -       |\n| group-separator   | Sets the thousandth identifier | string                      | -               | ,       |\n| precision         | numerical precision            | number                      | -               | -       |\n| prefix            | Sets the prefix of a number    | string \\| v-slot            | -               | -       |\n| suffix            | Sets the suffix of a number    | string \\| v-slot            | -               | -       |\n| title             | Numeric titles                 | string \\| v-slot            | -               | -       |\n| value-style       | Styles numeric values          | style                       | -               | -       |\n| rate              | Set the ratio                  | number                      | -               | 1000    |\n\n### Statistic Slots\n\n| Name      | Description                 |\n| --------- | --------------------------- |\n| prefix    | Numeric prefix              |\n| suffix    | Suffixes for numeric values |\n| formatter | Numerical content           |\n| title     | Numeric titles              |\n\n### Statistic.Countdown Attributes\n\n| Attribute    | Description                              | Type    | Options     | Default    |\n| ------------ | ---------------------------------------- | ------- | ----------- | ---------- |\n| time-indices | Whether to enable the countdown function | boolean | true\\|false | false      |\n| value        | Required value, enter the bound value    | string  | —           | —          |\n| format       | Formatting the countdown display         | string  | —           | 'HH:mm:ss' |\n\n### Statistic.Countdown Events\n\n| Method | Description                                | Parameters       |\n| ------ | ------------------------------------------ | ---------------- |\n| change | Enable in the 'countdown' function         | (value: Date)    |\n| finish | Launched after the 'countdown' is complete | (value: boolean) |\n\n### Statistic Methods\n\n| Method  | Description         | Parameters      | CallBack      |\n| ------- | ------------------- | --------------- | ------------- |\n| suspend | Pause the countdown | (value:boolean) | (value: Date) |\n"
  },
  {
    "path": "examples/docs/es/steps.md",
    "content": "## Steps\n\nGuía al usuario para completar tareas de acuerdo con el proceso. Sus pasos pueden configurarse de acuerdo con el escenario de aplicación real y el número de pasos no puede ser inferior a dos.\n\n### Uso básico\n\nBarra de pasos simple.\n\n:::demo Defina el atributo `active` con un valor de tipo `Number`, que indica el índice de pasos y comienza desde 0. Puede definir el atributo `space` cuando es necesario fijar el ancho del paso que acepta el tipo `Number`. La unidad del atributo `space` es px. Si no está configurado, es responsive. La configuración del atributo `finish-status` puede cambiar el estado de los pasos completados.\n\n```html\n<el-steps :active=\"active\" finish-status=\"success\">\n  <el-step title=\"Step 1\"></el-step>\n  <el-step title=\"Step 2\"></el-step>\n  <el-step title=\"Step 3\"></el-step>\n</el-steps>\n\n<el-button style=\"margin-top: 12px;\" @click=\"next\">Next step</el-button>\n\n<script>\n  export default {\n    data() {\n      return {\n        active: 0\n      };\n    },\n\n    methods: {\n      next() {\n        if (this.active++ > 2) this.active = 0;\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Step bar con el estatus\n\nMuestra el estado del step para cada paso.\n\n:::demo Utilice el atributo `title` para establecer el nombre del paso, o sobrescriba el atributo usando un slot con nombre. Hemos enumerado todos los nombres de slots al final de esta página.\n\n```html\n<el-steps :space=\"200\" :active=\"1\" finish-status=\"success\">\n  <el-step title=\"Done\"></el-step>\n  <el-step title=\"Processing\"></el-step>\n  <el-step title=\"Step 3\"></el-step>\n</el-steps>\n```\n:::\n\n### Centrado\n\nEl título y la descripción pueden estar centrados.\n\n:::demo\n```html\n<el-steps :active=\"2\" align-center>\n  <el-step title=\"Step 1\" description=\"Some description\"></el-step>\n  <el-step title=\"Step 2\" description=\"Some description\"></el-step>\n  <el-step title=\"Step 3\" description=\"Some description\"></el-step>\n  <el-step title=\"Step 4\" description=\"Some description\"></el-step>\n</el-steps>\n```\n:::\n\n### Step bar con descripción\n\nPuede poner una descripción para cada paso.\n\n:::demo\n```html\n<el-steps :active=\"1\">\n  <el-step title=\"Step 1\" description=\"Some description\"></el-step>\n  <el-step title=\"Step 2\" description=\"Some description\"></el-step>\n  <el-step title=\"Step 3\" description=\"Some description\"></el-step>\n</el-steps>\n```\n:::\n\n### Step bar con icono\n\nEn la barra de pasos se pueden utilizar diversos iconos personalizados.\n\n:::demo El icono se define mediante la propiedad `icon`. Los tipos de iconos se pueden encontrar en la descripción del componente Icono. Además, puede personalizar el icono a través de un slot con nombre.\n\n```html\n<el-steps :active=\"1\">\n  <el-step title=\"Step 1\" icon=\"el-icon-edit\"></el-step>\n  <el-step title=\"Step 2\" icon=\"el-icon-upload\"></el-step>\n  <el-step title=\"Step 3\" icon=\"el-icon-picture\"></el-step>\n</el-steps>\n```\n:::\n\n### Step bar vertical\n\nStep bar vertical.\n\n:::demo Sólo tiene que fijar el atributo `direction`  a ` vertical` en el elemento `el-steps`.\n\n```html\n<div style=\"height: 300px;\">\n  <el-steps direction=\"vertical\" :active=\"1\">\n    <el-step title=\"Step 1\"></el-step>\n    <el-step title=\"Step 2\"></el-step>\n    <el-step title=\"Step 3\"></el-step>\n  </el-steps>\n</div>\n```\n:::\n\n### Step bar simple\nStep bar simple, donde se ignorará `align-center`, `description`, `direction` y `space`.\n\n:::demo\n```html\n\n<el-steps :space=\"200\" :active=\"1\" simple>\n  <el-step title=\"Step 1\" icon=\"el-icon-edit\"></el-step>\n  <el-step title=\"Step 2\" icon=\"el-icon-upload\"></el-step>\n  <el-step title=\"Step 3\" icon=\"el-icon-picture\"></el-step>\n</el-steps>\n\n<el-steps :active=\"1\" finish-status=\"success\" simple style=\"margin-top: 20px\">\n  <el-step title=\"Step 1\" ></el-step>\n  <el-step title=\"Step 2\" ></el-step>\n  <el-step title=\"Step 3\" ></el-step>\n</el-steps>\n```\n:::\n\n### Steps atributos\n\n| Atributo       | Descripción                                                  | Tipo            | Valores aceptados                         | Por defecto |\n| -------------- | ------------------------------------------------------------ | --------------- | ----------------------------------------- | ----------- |\n| space          | el espaciado de cada paso, será responsivo si se omite. Soporta porcentaje. | number / string | —                                         | —           |\n| direction      | dirección de visualización                                   | string          | vertical/horizontal                       | horizontal  |\n| active         | actual paso de activación                                    | number          | —                                         | 0           |\n| process-status | estatus del paso actual                                      | string          | wait / process / finish / error / success | process     |\n| finish-status  | estatus del paso final                                       | string          | wait / process / finish / error / success | finish      |\n| align-center   | centrado de título y descripción                             | boolean         | —                                         | false       |\n| simple         | si aplicar un tema simple                                    | boolean         | -                                         | false       |\n\n### Step atributos\n| Atributo    | Descripción                              | Tipo                                     | Valores aceptados | Por defecto |\n| ----------- | ---------------------------------------- | ---------------------------------------- | ----------------- | ----------- |\n| title       | titulo del paso                          | string                                   | —                 | —           |\n| description | descripción del paso                     | string                                   | —                 | —           |\n| icon        | icono del paso                           | nombre de la clase del icono del paso. Los iconos también se pueden pasar a través del slot con nombre | string            | —           |\n| status      | estado actual. Se configurará automáticamente mediante Steps si no está configurado. | wait / process / finish / error / success | -                 |             |\n\n### Slot Step\n| Nombre      | Descripción          |\n| ----------- | -------------------- |\n| icon        | Icono personalizado  |\n| title       | Titulo del paso      |\n| description | Descripción del paso |\n\n"
  },
  {
    "path": "examples/docs/es/switch.md",
    "content": "## Switch\n\nSwitch es utilizado para realizar cambios entre dos estados opuestos.\n\n### Uso básico\n\n:::demo Enlace `v-model` a una variable de tipo `Boolean`. Los atributos `active-color` y `inactive-color` deciden el color de fondo en cada estado.\n\n```html\n<el-switch v-model=\"value1\">\n</el-switch>\n<el-switch\n  v-model=\"value2\"\n  active-color=\"#13ce66\"\n  inactive-color=\"#ff4949\">\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: true,\n        value2: true\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Texto de descripción\n:::demo Puede agregar los atributos `active-text` y `inactive-text` para mostrar los textos.\n\n```html\n<el-switch\n  v-model=\"value1\"\n  active-text=\"Pay by month\"\n  inactive-text=\"Pay by year\">\n</el-switch>\n<el-switch\n  style=\"display: block\"\n  v-model=\"value2\"\n  active-color=\"#13ce66\"\n  inactive-color=\"#ff4949\"\n  active-text=\"Pay by month\"\n  inactive-text=\"Pay by year\">\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: true,\n        value2: true\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Tipos de valores extendidos\n\n:::demo Puede establecer los atributos `active-value` y `inactive-value`. Ambos reciben valores de tipo `Boolean`, `String` o `Number`.\n\n```html\n<el-tooltip :content=\"'Switch value: ' + value\" placement=\"top\">\n  <el-switch\n    v-model=\"value\"\n    active-color=\"#13ce66\"\n    inactive-color=\"#ff4949\"\n    active-value=\"100\"\n    inactive-value=\"0\">\n  </el-switch>\n</el-tooltip>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: '100'\n      }\n    }\n  };\n</script>\n```\n\n:::\n\n### Disabled\n\n:::demo Agregar el atributo `disabled` desactiva el componente Switch.\n\n```html\n<el-switch\n  v-model=\"value1\"\n  disabled>\n</el-switch>\n<el-switch\n  v-model=\"value2\"\n  disabled>\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: true,\n        value2: false\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Atributos\n\n| Atributo            | Descripción                              | Tipo                      | Valores aceptados | Por defecto |\n| ------------------- | ---------------------------------------- | ------------------------- | ----------------- | ----------- |\n| value / v-model      | valor enlazado                           | boolean / string / number | —                 | —           |\n| disabled            | si Switch esta deshabilitado             | boolean                   | —                 | false       |\n| width               | ancho del componente Switch              | number                    | —                 | 40          |\n| active-icon-class   | nombre de la clase del icono mostrado en el estado `on`, sobrescribe `active-text` | string                    | —                 | —           |\n| inactive-icon-class | nombre de la clase del icono mostrado en el estado `off`, sobrescribe `inactive-text` | string                    | —                 | —           |\n| active-text         | texto mostrado en el estado `on`         | string                    | —                 | —           |\n| inactive-text       | texto mostrado en el estado `off`        | string                    | —                 | —           |\n| active-value        | cambia su valor cuando se encuentra en el estado `on` | boolean / string / number | —                 | true        |\n| inactive-value      | cambia su valor cuando se encuentra en el estado `off` | boolean / string / number | —                 | false       |\n| active-color        | color de fondo cuando se encuentra en el estado `on` | string                    | —                 | #409EFF     |\n| inactive-color      | color de fondo cuando se encuentra en el estado `off` | string                    | —                 | #C0CCDA     |\n| name                | nombre de entrada del componente Switch  | string                    | —                 | —           |\n| validate-event      | si se debe lanzar la validación de formulario | boolean              | -                 | true        |\n\n### Eventos\n\n| Nombre del evento | Descripción                       | Parámetro |\n| ----------------- | --------------------------------- | --------- |\n| change            | se dispara cuando el valor cambia | valor     |\ndespués de cambiar\n\n### Métodos\n| Método | Descripción               | Parámetro |\n| ------ | ------------------------- | --------- |\n| focus  | foco al componente Switch | —         |\n"
  },
  {
    "path": "examples/docs/es/table.md",
    "content": "## Tablas\n\nVisualiza múltiples datos con un formato en particular. Podrá ordenar, filtrar y comparar datos en una tabla.\n\n### Tabla básica\n\nLa tabla básica es solo para mostrar datos.\n\n:::demo Después de haber establecido el atributo `data` de `el-table` con un arreglo de objetos, puede usar la propiedad `prop` (el correspondiente a la clave de un objeto dentro del arreglo `data`) en `el-table-column` para insertar datos a las columnas de la tabla, y establecer el atributo `label` para definir el nombre de la columna. También puede usar el atributo `width` para establecer el ancho de las columnas.\n\n```html\n  <template>\n    <el-table\n      :data=\"tableData\"\n      style=\"width: 100%\">\n      <el-table-column\n        prop=\"date\"\n        label=\"Fecha\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"name\"\n        label=\"Nombre\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"address\"\n        label=\"Dirección\">\n      </el-table-column>\n    </el-table>\n  </template>\n\n  <script>\n    export default {\n      data() {\n        return {\n          tableData: [{\n            date: '2016-05-03',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-02',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-04',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-01',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }]\n        }\n      }\n    }\n  </script>\n```\n:::\n\n### Tabla con franjas\n\nLa tabla con franjas hace más fácil distinguir filas diferentes.\n\n:::demo El atributo `stripe` también acepta un `Boolean`. Si se encuentra `true`, la tabla será con franjas.\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    stripe\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Tabla con bordes\n\n:::demo Por defecto, la tabla no tiene bordes verticales. Si lo necesita, puede establecer el atributo `border` a `true`.\n\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    border\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Tabla con estados\n\nPuede destacar el contenido de la tabla para distinguir entre \"success, information, warning, danger\" y otros estados.\n\n:::demo Utilice `row-class-name` en `el-table` para agregar clases personalizadas a una fila en específico. Y entonces, podrá darle diseño con estas clases.\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    :row-class-name=\"tableRowClassName\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  .el-table .warning-row {\n    background: oldlace;\n  }\n\n  .el-table .success-row {\n    background: #f0f9eb;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      tableRowClassName({row, rowIndex}) {\n        if (rowIndex === 1) {\n          return 'warning-row';\n        } else if (rowIndex === 3) {\n          return 'success-row';\n        }\n        return '';\n      }\n    },\n    data() {\n      return {\n        tableData:  [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Tabla con cabecera fija\n\nCuando esta tiene demasiadas filas, puede utilizar una cabecera fija.\n\n:::demo Al configurar el atributo `height` de `el-table`, puede fijar la cabecera de la tabla sin agregar otro código.\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    height=\"250\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }],\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Tabla con columnas fijas\n\nCuando se tienen demasiadas columnas, puede fijar alguna de estas.\n\n:::demo El atributo `fixed` es utilizado en `el-table-column`, este acepta un `Boolean`. Si es `true`, la columna será fijada a la izquierda. También acepta dos tipos: `left` y `right`, ambos indican donde debe ser fijada la columna.\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"Estado\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"Ciudad\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Código postal\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      fixed=\"right\"\n      label=\"Operaciones\"\n      width=\"120\">\n      <template slot-scope=\"scope\">\n        <el-button @click=\"handleClick\" type=\"text\" size=\"small\">Detalle</el-button>\n        <el-button type=\"text\" size=\"small\">Editar</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    methods: {\n      handleClick() {\n        console.log('click');\n      }\n    },\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Tabla con columnas y cabecera fija.\n\nCuando tienes grandes cantidades de datos para colocar en una tabla, puede fijar la cabecera y columnas al mismo tiempo.\n\n:::demo  Fije las columnas y cabecera al mismo tiempo combinando los dos ejemplos anteriores.\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    height=\"250\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"Estado\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"Ciudad\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Código postal\"\n      width=\"120\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Altura fluido de tabla con cabecera fija (y columnas)\n\nCuando los datos se modifican dinámicamente, es posible que necesite que la tabla tenga una altura máxima en lugar de una altura fija, y además, que se muestre la barra de desplazamiento si es necesario.\n\n:::demo Al configurar el atributo `max-height` de `el-table`, tu puedes fijar la cabecera de la tabla. La barra de desplazamiento únicamente se mostrará si la altura sobrepasa el valor de la altura máxima.\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    max-height=\"250\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"Estado\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"Ciudad\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Código postal\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      fixed=\"right\"\n      label=\"Operaciones\"\n      width=\"120\">\n      <template slot-scope=\"scope\">\n        <el-button\n          @click.native.prevent=\"deleteRow(scope.$index, tableData)\"\n          type=\"text\"\n          size=\"small\">\n          Eliminar\n        </el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    methods: {\n      deleteRow(index, rows) {\n        rows.splice(index, 1);\n      }\n    },\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Agrupando cabeceras de la tabla\n\nCuando la estructura de datos es compleja, tu puedes hacer uso de cabeceras agrupadas para mostrar datos por jerarquía.\n\n:::demo Solo necesitas colocar `el-table-column` dentro de un `el-table-column`, de esta forma lograrás agruparlas.\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column label=\"Información de entrega\">\n      <el-table-column\n        prop=\"name\"\n        label=\"Nombre\"\n        width=\"120\">\n      </el-table-column>\n      <el-table-column label=\"Información de dirección\">\n        <el-table-column\n          prop=\"state\"\n          label=\"Estado\"\n          width=\"120\">\n        </el-table-column>\n        <el-table-column\n          prop=\"city\"\n          label=\"Ciudad\"\n          width=\"120\">\n        </el-table-column>\n        <el-table-column\n          prop=\"address\"\n          label=\"Dirección\"\n          width=\"300\">\n        </el-table-column>\n        <el-table-column\n          prop=\"zip\"\n          label=\"Código postal\"\n          width=\"120\">\n        </el-table-column>\n      </el-table-column>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Selección única\n\nLa selección de una fila esta soportada.\n\n:::demo La tabla permite la selección de una sola fila. Puede activarlo agregando el atributo `highlight-current-row`. Un evento llamado `current-change` será disparado cuando la selección de la fila cambie, sus parámetros son la fila antes y después de que ocurre el cambio: `currentRow` y `oldCurrentRow`. Si necesita mostrar el índice de la fila, puede agregar un nuevo `el-table-column` con el atributo `type` asignado al `index` y podrá ver el índice iniciando desde 1.\n```html\n<template>\n  <el-table\n    ref=\"singleTable\"\n    :data=\"tableData\"\n    highlight-current-row\n    @current-change=\"handleCurrentChange\"\n    style=\"width: 100%\">\n    <el-table-column\n      type=\"index\"\n      width=\"50\">\n    </el-table-column>\n    <el-table-column\n      property=\"date\"\n      label=\"Fecha\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      property=\"name\"\n      label=\"Nombre\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      property=\"address\"\n      label=\"Dirección\">\n    </el-table-column>\n  </el-table>\n  <div style=\"margin-top: 20px\">\n    <el-button @click=\"setCurrent(tableData[1])\">Seleccionar segunda fila</el-button>\n    <el-button @click=\"setCurrent()\">Limpiar selección</el-button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }],\n        currentRow: null\n      }\n    },\n\n    methods: {\n      setCurrent(row) {\n        this.$refs.singleTable.setCurrentRow(row);\n      },\n      handleCurrentChange(val) {\n        this.currentRow = val;\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Selección multiple\n\nTambién puede seleccionar múltiples filas.\n\n:::demo Activar la selección múltiple es sencillo: Solo debe agregar a `el-table-column` con su `type` establecido en `selection`. Además de la selección múltiple, este ejemplo también utiliza `show-overflow-tooltip`: por defecto, si el contenido es demasiado largo, este permite córtalo dentro de múltiples líneas. Si lo que busca es mantener una línea, utilice el atributo `show-overflow-tooltip`, que acepta un valor `Boolean`. Cuando este está establecido en `true`, el contenido extra puede mostrar un _tooltip_ cuando se hace _hover_ sobre la celda.\n```html\n<template>\n  <el-table\n    ref=\"multipleTable\"\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    @selection-change=\"handleSelectionChange\">\n    <el-table-column\n      type=\"selection\"\n      width=\"55\">\n    </el-table-column>\n    <el-table-column\n      label=\"Fecha\"\n      width=\"120\">\n      <template slot-scope=\"scope\">{{ scope.row.date }}</template>\n    </el-table-column>\n    <el-table-column\n      property=\"name\"\n      label=\"Nombre\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      property=\"address\"\n      label=\"Dirección\"\n      show-overflow-tooltip>\n    </el-table-column>\n  </el-table>\n  <div style=\"margin-top: 20px\">\n    <el-button @click=\"toggleSelection([tableData[1], tableData[2]])\">Cambia el estado de selección de la segunda y tercera fila.</el-button>\n    <el-button @click=\"toggleSelection()\">Limpiar selección</el-button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }],\n        multipleSelection: []\n      }\n    },\n\n    methods: {\n      toggleSelection(rows) {\n        if (rows) {\n          rows.forEach(row => {\n            this.$refs.multipleTable.toggleRowSelection(row);\n          });\n        } else {\n          this.$refs.multipleTable.clearSelection();\n        }\n      },\n      handleSelectionChange(val) {\n        this.multipleSelection = val;\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Ordenamiento\n\nOrdena los datos para encontrar o comparar información rápidamente.\n\n:::demo Establezca el atributo `sortable` para ordenar los datos de una columna. Este acepta un `Boolean` con un valor por defecto `false`. Establezca el atributo `default-sort` para determinar la columna y orden por defecto. Para aplicar sus propias reglas de ordenamiento, utilice `sort-method` o `sort-by`. Si lo que necesita es ordenar de forma remota desde backend, establezca `sortable` a `custom`, y escuche el evento `sort-change` de la tabla. Al dispararse el evento, tendrá acceso a la columna ordenada y orden para que pueda obtener los datos de la tabla ordenada desde su API. En este ejemplo utilizamos otro atributo llamado `formatter` para darle un formato al valor de ciertas columnas. Este acepta una función que tiene dos parámetros: `row` y `column`. Puede disparar este de acuerdo a sus propias necesidades.\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    :default-sort = \"{prop: 'date', order: 'descending'}\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Fecha\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\"\n      :formatter=\"formatter\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    },\n    methods: {\n      formatter(row, column) {\n        return row.address;\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Filtros\n\nFiltra la tabla para encontrar la información que necesita.\n\n:::demo Establezca el atributo `filters` y `filter-method` en `el-table-column` haciendo esta columna filtrable. `filters` es un arreglo, y `filter-method` es una función que decide que filas se muestra. Esta tiene tres parámetros: `value`, `row` y `column`.\n```html\n<template>\n  <el-button @click=\"resetDateFilter\">清除日期过滤器</el-button>\n  <el-button @click=\"clearFilter\">清除所有过滤器</el-button>\n  <el-table\n    ref=\"filterTable\"\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Fecha\"\n      sortable\n      width=\"180\"\n      column-key=\"date\"\n      :filters=\"[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]\"\n      :filter-method=\"filterHandler\"\n    >\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\"\n      :formatter=\"formatter\">\n    </el-table-column>\n    <el-table-column\n      prop=\"tag\"\n      label=\"Etiqueta\"\n      width=\"100\"\n      :filters=\"[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]\"\n      :filter-method=\"filterTag\"\n      filter-placement=\"bottom-end\">\n      <template slot-scope=\"scope\">\n        <el-tag\n          :type=\"scope.row.tag === 'Home' ? 'primary' : 'success'\"\n          disable-transitions>{{scope.row.tag}}</el-tag>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Office'\n        }]\n      }\n    },\n    methods: {\n      resetDateFilter() {\n        this.$refs.filterTable.clearFilter('date');\n      },\n      clearFilter() {\n        this.$refs.filterTable.clearFilter();\n      },\n      formatter(row, column) {\n        return row.address;\n      },\n      filterTag(value, row) {\n        return row.tag === value;\n      },\n      filterHandler(value, row, column) {\n        const property = column['property'];\n        return row[property] === value;\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Plantilla de columna personalizada\n\nPersonalice la columna de la tabla para que pueda integrarse con otros componentes.\n\n:::demo Tiene acceso a la siguiente información: row, column, $index, store (gestor de estados de la tabla) por [Scoped slots](https://v2.vuejs.org/v2/guide/components-slots#Scoped-Slots).\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      label=\"Fecha\"\n      width=\"180\">\n      <template slot-scope=\"scope\">\n        <i class=\"el-icon-time\"></i>\n        <span style=\"margin-left: 10px\">{{ scope.row.date }}</span>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label=\"Nombre\"\n      width=\"180\">\n      <template slot-scope=\"scope\">\n        <el-popover trigger=\"hover\" placement=\"top\">\n          <p>Name: {{ scope.row.name }}</p>\n          <p>Addr: {{ scope.row.address }}</p>\n          <div slot=\"reference\" class=\"name-wrapper\">\n            <el-tag size=\"medium\">{{ scope.row.name }}</el-tag>\n          </div>\n        </el-popover>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label=\"Operaciones\">\n      <template slot-scope=\"scope\">\n        <el-button\n          size=\"mini\"\n          @click=\"handleEdit(scope.$index, scope.row)\">Editar</el-button>\n        <el-button\n          size=\"mini\"\n          type=\"danger\"\n          @click=\"handleDelete(scope.$index, scope.row)\">Eliminar</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Table con cabecera personalizada\n\nSe puede personalizar el encabezado de la tabla para que se pueda adaptar aún más.\n:::demo Puede personalizar el aspecto del encabezado con header [scoped slots](https://v2.vuejs.org/v2/guide/components-slots#Scoped-Slots).\n```html\n<template>\n  <el-table\n    :data=\"tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))\"\n    style=\"width: 100%\">\n    <el-table-column\n      label=\"Date\"\n      prop=\"date\">\n    </el-table-column>\n    <el-table-column\n      label=\"Name\"\n      prop=\"name\">\n    </el-table-column>\n    <el-table-column\n      align=\"right\">\n      <template slot=\"header\" slot-scope=\"scope\">\n        <el-input\n          v-model=\"search\"\n          size=\"mini\"\n          placeholder=\"Type to search\"/>\n      </template>\n      <template slot-scope=\"scope\">\n        <el-button\n          size=\"mini\"\n          @click=\"handleEdit(scope.$index, scope.row)\">Edit</el-button>\n        <el-button\n          size=\"mini\"\n          type=\"danger\"\n          @click=\"handleDelete(scope.$index, scope.row)\">Delete</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n        }, {\n          date: '2016-05-04',\n          name: 'John',\n          address: 'No. 189, Grove St, Los Angeles',\n        }, {\n          date: '2016-05-01',\n          name: 'Morgan',\n          address: 'No. 189, Grove St, Los Angeles',\n        }, {\n          date: '2016-05-03',\n          name: 'Jessy',\n          address: 'No. 189, Grove St, Los Angeles',\n        }],\n        search: ''\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    },\n  }\n</script>\n```\n:::\n\n### Fila expandible\n\nCuando el contenido de la fila es demasiado largo y busca no mostrar la barra de desplazamiento horizontal, puede utilizar la característica de fila expandible.\n\n:::demo Puede activar la fila expandible estableciendo la propiedad `type` a `expand` y Scoped Slots. La plantilla para `el-table-column` se representará como el contenido de la fila expandible, y puede acceder a algunos atributos cuando está usando `Scoped Slots` en plantillas de columna personalizadas.\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column type=\"expand\">\n      <template slot-scope=\"props\">\n        <p>Estado: {{ props.row.state }}</p>\n        <p>Ciudad: {{ props.row.city }}</p>\n        <p>Dirección: {{ props.row.address }}</p>\n        <p>Código postal: {{ props.row.zip }}</p>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label=\"Fecha\"\n      prop=\"date\">\n    </el-table-column>\n    <el-table-column\n      label=\"Nombre\"\n      prop=\"name\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Datos tree y modo lazy\n\n:::demo Puede visualizar datos de estructura de árbol. Cuando la fila contiene el campo `children`, se trata como datos anidados. Para renderizar datos anidados, la `row-key` es requerida。Ademas, los datos de las filas secundarias pueden ser cargados asincrónicamente. Poner la propiedad `lazy` de Table a true y la función `load`. Especifique el atributo `hasChildren` en la fila para determinar qué fila contiene descendencia. Tanto `children` como `hasChildren` pueden configurarse a través de `tree-props`.\n\n```html\n<template>\n<div>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%;margin-bottom: 20px;\"\n    row-key=\"id\"\n    border\n    default-expand-all>\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"name\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n  </el-table>\n\n  <el-table\n    :data=\"tableData1\"\n    style=\"width: 100%\"\n    row-key=\"id\"\n    border\n    lazy\n    :load=\"load\"\n    :tree-props=\"{children: 'children', hasChildren: 'hasChildren'}\">\n    <el-table-column\n      prop=\"date\"\n      label=\"date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"name\"\n      width=\"180\">\n    </el-table-column>\n  </el-table>\n</div>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: 1,\n          date: '2016-05-02',\n          name: 'wangxiaohu'\n        }, {\n          id: 2,\n          date: '2016-05-04',\n          name: 'wangxiaohu'\n        }, {\n          id: 3,\n          date: '2016-05-01',\n          name: 'wangxiaohu',\n          children: [{\n              id: 31,\n              date: '2016-05-01',\n              name: 'wangxiaohu'\n            }, {\n              id: 32,\n              date: '2016-05-01',\n              name: 'wangxiaohu'\n          }]\n        }, {\n          id: 4,\n          date: '2016-05-03',\n          name: 'wangxiaohu'\n        }],\n        tableData1: [{\n          id: 1,\n          date: '2016-05-02',\n          name: 'wangxiaohu'\n        }, {\n          id: 2,\n          date: '2016-05-04',\n          name: 'wangxiaohu'\n        }, {\n          id: 3,\n          date: '2016-05-01',\n          name: 'wangxiaohu',\n          hasChildren: true\n        }, {\n          id: 4,\n          date: '2016-05-03',\n          name: 'wangxiaohu'\n        }]\n      }\n    },\n    methods: {\n      load(tree, treeNode, resolve) {\n        setTimeout(() => {\n          resolve([\n            {\n              id: 31,\n              date: '2016-05-01',\n              name: 'wangxiaohu'\n            }, {\n              id: 32,\n              date: '2016-05-01',\n              name: 'wangxiaohu'\n            }\n          ])\n        }, 1000)\n      }\n    },\n  }\n</script>\n```\n:::\n\n### Fila de resumen\n\nPara una tabla de números, puede agregar una fila extra en el pie de página de la tabla que muestra la suma de cada columna.\n\n:::demo Puede agregar la fila de resumen configurando `show-summary` a `true`. Por defecto, para la fila de resumen, la primera columna no resume nada, pero siempre muestra la suma (puede configurar el texto mostrado usando `sum-text`), mientras que otras columnas suman todos los números en esa columna y los muestran. Por supuesto, puede definir su propio comportamiento de suma. Para hacerlo, utiliza un método `summary-method`, que devuelve un array, y cada elemento que fue retornado desde el arreglo puede ser mostrado en las columnas del resumen de fila. La segunda tabla de este ejemplo es una demostración detallada.\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    border\n    show-summary\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"id\"\n      label=\"ID\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\">\n    </el-table-column>\n    <el-table-column\n      prop=\"amount1\"\n      sortable\n      label=\"Monto 1\">\n    </el-table-column>\n    <el-table-column\n      prop=\"amount2\"\n      sortable\n      label=\"Monto 2\">\n    </el-table-column>\n    <el-table-column\n      prop=\"amount3\"\n      sortable\n      label=\"Monto 3\">\n    </el-table-column>\n  </el-table>\n\n  <el-table\n    :data=\"tableData\"\n    border\n    height=\"200\"\n    :summary-method=\"getSummaries\"\n    show-summary\n    style=\"width: 100%; margin-top: 20px\">\n    <el-table-column\n      prop=\"id\"\n      label=\"ID\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\">\n    </el-table-column>\n    <el-table-column\n      prop=\"amount1\"\n      label=\"Costo 1 ($)\">\n    </el-table-column>\n    <el-table-column\n      prop=\"amount2\"\n      label=\"Costo 2 ($)\">\n    </el-table-column>\n    <el-table-column\n      prop=\"amount3\"\n      label=\"Costo 3 ($)\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: '12987122',\n          name: 'Tom',\n          amount1: '234',\n          amount2: '3.2',\n          amount3: 10\n        }, {\n          id: '12987123',\n          name: 'Tom',\n          amount1: '165',\n          amount2: '4.43',\n          amount3: 12\n        }, {\n          id: '12987124',\n          name: 'Tom',\n          amount1: '324',\n          amount2: '1.9',\n          amount3: 9\n        }, {\n          id: '12987125',\n          name: 'Tom',\n          amount1: '621',\n          amount2: '2.2',\n          amount3: 17\n        }, {\n          id: '12987126',\n          name: 'Tom',\n          amount1: '539',\n          amount2: '4.1',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      getSummaries(param) {\n        const { columns, data } = param;\n        const sums = [];\n        columns.forEach((column, index) => {\n          if (index === 0) {\n            sums[index] = 'Costo total';\n            return;\n          }\n          const values = data.map(item => Number(item[column.property]));\n          if (!values.every(value => isNaN(value))) {\n            sums[index] = '$ ' + values.reduce((prev, curr) => {\n              const value = Number(curr);\n              if (!isNaN(value)) {\n                return prev + curr;\n              } else {\n                return prev;\n              }\n            }, 0);\n          } else {\n            sums[index] = 'N/A';\n          }\n        });\n\n        return sums;\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Fusión de filas y columnas\n\nConfigurar _rowspan_ y _colspan_ le permite fusionar celdas.\n\n:::demo Utilice el atributo `span-method` para configurar rowspan y colspan. Este acepta un método, y pasa un objeto a ese método incluyendo la fila actual `row`, columna actual `column`, índice de fila actual `rowIndex` y índice de columna actual `columnIndex`. El método debe devolver un arreglo de dos números, el primer número siendo `rowspan` y el segundo `colspan`. También puede devolver un objeto con las propiedades `rowspan` y `colspan`.\n\n```html\n<template>\n  <div>\n    <el-table\n      :data=\"tableData\"\n      :span-method=\"arraySpanMethod\"\n      border\n      style=\"width: 100%\">\n      <el-table-column\n        prop=\"id\"\n        label=\"ID\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"name\"\n        label=\"Nombre\">\n      </el-table-column>\n      <el-table-column\n        prop=\"amount1\"\n        sortable\n        label=\"Monto 1\">\n      </el-table-column>\n      <el-table-column\n        prop=\"amount2\"\n        sortable\n        label=\"Monto 2\">\n      </el-table-column>\n      <el-table-column\n        prop=\"amount3\"\n        sortable\n        label=\"Monto 3\">\n      </el-table-column>\n    </el-table>\n\n    <el-table\n      :data=\"tableData\"\n      :span-method=\"objectSpanMethod\"\n      border\n      style=\"width: 100%; margin-top: 20px\">\n      <el-table-column\n        prop=\"id\"\n        label=\"ID\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"name\"\n        label=\"Nombre\">\n      </el-table-column>\n      <el-table-column\n        prop=\"amount1\"\n        label=\"Monto 1\">\n      </el-table-column>\n      <el-table-column\n        prop=\"amount2\"\n        label=\"Monto 2\">\n      </el-table-column>\n      <el-table-column\n        prop=\"amount3\"\n        label=\"Monto 3\">\n      </el-table-column>\n    </el-table>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: '12987122',\n          name: 'Tom',\n          amount1: '234',\n          amount2: '3.2',\n          amount3: 10\n        }, {\n          id: '12987123',\n          name: 'Tom',\n          amount1: '165',\n          amount2: '4.43',\n          amount3: 12\n        }, {\n          id: '12987124',\n          name: 'Tom',\n          amount1: '324',\n          amount2: '1.9',\n          amount3: 9\n        }, {\n          id: '12987125',\n          name: 'Tom',\n          amount1: '621',\n          amount2: '2.2',\n          amount3: 17\n        }, {\n          id: '12987126',\n          name: 'Tom',\n          amount1: '539',\n          amount2: '4.1',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      arraySpanMethod({ row, column, rowIndex, columnIndex }) {\n        if (rowIndex % 2 === 0) {\n          if (columnIndex === 0) {\n            return [1, 2];\n          } else if (columnIndex === 1) {\n            return [0, 0];\n          }\n        }\n      },\n\n      objectSpanMethod({ row, column, rowIndex, columnIndex }) {\n        if (columnIndex === 0) {\n          if (rowIndex % 2 === 0) {\n            return {\n              rowspan: 2,\n              colspan: 1\n            };\n          } else {\n            return {\n              rowspan: 0,\n              colspan: 0\n            };\n          }\n        }\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Índice personalizado\n\nPuede personalizar el índice de la fila con la propiedad `type=index` de las columnas.\n\n:::demo Para personalizar el índice de la fila, utilice el atributo `index` en `<el-table-column>` con `type=index`. Si este es asignado a un número, todos los índices tendrán un desplazamiento de ese número. Este también acepta un método con cada índice (iniciando desde 0) como un parámetro, y este devuelve un valor que puede ser mostrado como índice.\n\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      type=\"index\"\n      :index=\"indexMethod\">\n    </el-table-column>\n    <el-table-column\n      prop=\"date\"\n      label=\"Fecha\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nombre\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Dirección\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }],\n      }\n    },\n    methods: {\n      indexMethod(index) {\n        return index * 2;\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Atributos de la tabla\n| Atributo               | Descripción                              | Tipo                                     | Valores aceptados              | Por defecto                              |\n| ---------------------- | ---------------------------------------- | ---------------------------------------- | ------------------------------ | ---------------------------------------- |\n| data                   | Datos de la tabla                        | array                                    | —                              | —                                        |\n| height                 | Altura de la tabla. Por defecto esta tiene un tamaño `auto`. Si este valor es un número, la altura es medido en pixeles; si este valor es una cadena, la altura es afectada por estilos externos. | string/number                            | —                              | —                                        |\n| max-height             | El max-height de la tabla. El valor puede ser un numero o el alto en px. | string/number                            | —                              | —                                        |\n| stripe                 | especifica si la tabla será en franjas   | boolean                                  | —                              | false                                    |\n| border                 | especifica si la tabla tiene bordes verticales | boolean                                  | —                              | false                                    |\n| size                   | tamaño de la tabla                       | string                                   | medium / small / mini          | —                                        |\n| fit                    | especifica si el ancho de la columna se adapta automáticamente a su contenedor | boolean                                  | —                              | true                                     |\n| show-header            | especifica si la cabecera de la tabla es visible | boolean                                  | —                              | true                                     |\n| highlight-current-row  | especifica si la fila actual es resaltado | boolean                                  | —                              | false                                    |\n| highlight-selection-row | resaltar la selección de líneas de verificación | boolean | — | false |\n| current-row-key        | clave de la fila actual, un ajuste de propiedad única | string,number                            | —                              | —                                        |\n| row-class-name         | función que devuelve nombres de clases personalizadas para una fila, o una cadena asignando nombres de clases para cada fila | Function({row, rowIndex})/String         | —                              | —                                        |\n| row-style              | función que devuelve el estilo personalizado para una fila, o un objeto asignando estilos personalizado para cada fila | Function({row, rowIndex})/Object         | —                              | —                                        |\n| cell-class-name        | función que devuelve nombres de clases personalizadas para una celda, o una cadena asignando nombres de clases para cada celda | Function({row, column, rowIndex, columnIndex})/String | —                              | —                                        |\n| cell-style             | función que devuelve estilos personalizados para una celda, o un objeto asignado a estilos personalizados para cada celda | Function({row, column, rowIndex, columnIndex})/Object | —                              | —                                        |\n| header-row-class-name  | función que devuelve nombre de clases personalizadas para una fila en la cabecera de la tabla, o una cadena asignando nombres de clases para cada fila en la cabecera de la tabla | Function({row, rowIndex})/String         | —                              | —                                        |\n| header-row-style       | función que devuelve estilos personalizados para una fila en la cabecera de la tabla, o un objeto asignando estilos personalizados para cada fila en la cabecera de la tabla | Function({row, rowIndex})/Object         | —                              | —                                        |\n| header-cell-class-name | función que devuelve nombre de clases personalizadas para una celda en la cabecera de la tabla, o una cadena asignando nombres de clases para cada celda en la cabecera de la tabla | Function({row, column, rowIndex, columnIndex})/String         | —                              | —                                        |\n| header-cell-style      | función que devuelve estilos personalizados para una celda en la cabecera de la tabla, o un objeto asignando estilos personalizados para cada celda en la cabecera de la tabla | Function({row, column, rowIndex, columnIndex})/Object         | —                              | —                                        |\n| row-key | key de los datos de las filas, utilizada para optimizar el renderizado. Requerido si `reserve-selection` está activada o muestra los datos del árbol. Cuando su tipo es String, se admite el acceso multinivel, por ejemplo, `user.info.id`, pero `user.info[0].id` no se admite, en cuyo caso se debe utilizar la función. | Function(row)/String | — | — |\n| empty-text             | Texto mostrado cuando no existen datos. Puede personalizar esta área con `slot=\"empty\"` | String                                   | —                              | No Data                                  |\n| default-expand-all     | especifica si todas las filas se expanden por defecto, solo funciona cuando la tabla tiene una columna `type=\"expand\"` | Boolean                                  | —                              | false                                    |\n| expand-row-keys        | establece las filas expandidas a través de esta propiedad, este valor es la clave de filas expandidas, debería establecer `row-key` antes de usar esta propiedad | Array                                    | —                              |                                          |\n| default-sort           | establece la columna y orden por defecto. La propiedad `prop` es utilizada para establecer la columna de ordenamiento por defecto, la propiedad `order` es utilizada para definir el tipo de orden por defecto | Object                                   | `order`: ascending, descending | if `prop` is set, and `order` is not set, then `order` is default to ascending |\n| tooltip-effect         | propiedad `effect` para efectos en tooltip | String                                   | dark/light                     |                                          |\n| show-summary           | especifica si debe mostrar la fila de resumen | Boolean                                  | —                              | false                                    |\n| sum-text               | texto a mostrar para la primer columna de la fila de resumen | String                                   | —                              | Sum                                      |\n| summary-method         | método personalizado para resumen        | Function({ columns, data })              | —                              | —                                        |\n| span-method            | método que devuelve _rowspan_ y _colspan_ | Function({ row, column, rowIndex, columnIndex }) | —                              | —                                        |\n| select-on-indeterminate | controla el comportamiento del checkbox maestro en tablas de selección múltiple cuando sólo se seleccionan algunas filas (pero no todas). Si es true, todas las filas serán seleccionadas, de lo contrario deseleccionadas.               | Boolean   | — | true |\n| indent                 | indentación horizontal de los datos en formato tree | Number    | — | 16   |\n| lazy                   | si se realiza un lazy loading de los datos | Boolean   | — | —    |\n| load                   | método para cargar las filas de los hijos, solamente funciona cuando `lazy`es true | Function(row, treeNode, resolve) | — | — |\n| tree-props             | configuración para renderizar datos anidados | Object    | — | { hasChildren: 'hasChildren', children: 'children' } |\n\n### Eventos de la tabla\n| Nombre del evento  | Descripción                              | Parámetros                        |\n| ------------------ | ---------------------------------------- | --------------------------------- |\n| select             | se dispara cuando el usuario hace clic al _checkbox_ (caja de selección) en una fila | selection, row                    |\n| select-all         | se dispara cando el usuario hace clic al _checkbox_ (caja de selección) en una cabecera de la tabla | selection                         |\n| selection-change   | se dispara cuando selección cambia       | selection                         |\n| cell-mouse-enter   | se dispara cuando se desplaza dentro de una celda | row, column, cell, event          |\n| cell-mouse-leave   | se dispara cuando se desplaza fuera de una celda | row, column, cell, event          |\n| cell-click         | se dispara cuando se hace clic en una celda | row, column, cell, event          |\n| cell-dblclick      | se dispara cuando se hace doble clic en una celda | row, column, cell, event          |\n| row-click          | se dispara cuando se hace clic en una fila | row, column, event                |\n| row-contextmenu    | se dispara cuando el usuario hace clic derecho en una fila | row, column, event                        |\n| row-dblclick       | se dispara cuando se hace doble clic en una fila | row, column, event                        |\n| header-click       | se dispara cuando se hace clic en una cabecera de columna | column, event                     |\n| header-contextmenu | se dispara cuando el usuario hace clic derecho en una cabecera de columna | column, event                     |\n| sort-change        | se dispara cuando el ordenamiento de la tabla cambia | { column, prop, order }           |\n| filter-change      | clave de la columna. Si necesitas utilizar el evento filter-change, este atributo es obligatorio para identificar cuál columna está siendo filtrada | filters                           |\n| current-change     | se dispara cuando la fila actual cambia  | currentRow, oldCurrentRow         |\n| header-dragend     | se dispara después de modificar el ancho de una columna arrastrando el borde de la cabecera. | newWidth, oldWidth, column, event |\n| expand-change      | se activa cuando el usuario expande o colapsa una fila (para la tabla expansible, el segundo parámetro es expandedRows; para la tabla de árbol, el segundo parámetro es expanded) | row, (expandedRows \\| expanded) |\n\n### Métodos de la tabla\n| Metodo             | Descripción                              | Parametros    |\n| ------------------ | ---------------------------------------- | ------------- |\n| clearSelection     | utilizado en selección múltiple de la tabla, limpiar selección | —     |\n| toggleRowSelection | utilizado en selección múltiple de la tabla, alterna si una cierta fila es seleccionada. Con el segundo parámetro, puede directamente establecer si la fila es seleccionada | row, selected |\n| toggleAllSelection | usado en Table de selección múltiple, cambia los estados de selección de todas las filas. | - |\n| toggleRowExpansion | utilizado en la Tabla expandible o en la Tabla de árbol, conmutar si se desglosa una determinada línea. Con el segundo parámetro, se puede fijar directamente si esta línea se desglosa o se pliega | row, expanded |\n| setCurrentRow      | utilizado en tabla con selección sencilla, establece una cierta fila seleccionada. Si es llamado sin ningún parámetro, este puede limpiar la selección | row           |\n| clearSort          | limpiar ordenamiento, restaurar datos a orden original | —             |\n| clearFilter        | Se utiliza para borrar todas las condiciones de filtro cuando no se pasan parámetros, los datos se restaurarán a un estado sin filtrar, o se puede pasar una matriz de columnas para borrar las condiciones de filtro de la columna especificada.  | columnKey |\n| doLayout | refresca el layout del Table. Cuando la visibilidad de Table cambia, puede que necesite llamar a este método para obtener un diseño correcto | — |\n| sort | Ordenar tabla manualmente. La propiedad `prop` se utiliza para establecer la columna de ordenación, la propiedad `order` se utiliza para establecer el orden. | prop: string, order: string |\n\n### Slots de la tabla\n| Nombre | Descripción                              |\n| ------ | ---------------------------------------- |\n| append | El contenido será insertado después de la última fila. Es posible que necesites este espacio si deseas implementar _scroll_ infinito para la tabla. Este espacio se mostrará sobre la fila de resumen si hay uno. |\n\n### Atributos para las columnas de la tabla\n| Atributo              | Descripción                              | Tipo                              | Valores aceptados             | Por defecto |\n| --------------------- | ---------------------------------------- | --------------------------------- | ----------------------------- | ----------- |\n| type                  | tipo de la columna. Si se establece a `selection`, la columna puede mostrar un _checkbox_. Si se establece a `index`, la columna puede mostrar el índice de la fila (iniciando desde 1). Si se establece a `expand`, la columna puede mostrar un ícono para expandir. | string                            | selection/index/expand        | —           |\n| index                 | personalice los índices para cada fila, funciona en columnas con `type=index` | number, Function(index)           | -                             | -           |\n| label                 | etiqueta de la columna                   | string                            | —                             | —           |\n| column-key            | clave de la columna. Si necesita utilizar el evento `filter-change`, necesita el atributo para identificar cual columna está siendo filtrada | string                            | string                        | —           |\n| prop                  | nombre del campo. También puede usar su alias: `property` | string                            | —                             | —           |\n| width                 | ancho de la columna                      | string                            | —                             | —           |\n| min-width             | ancho mínimo de la columna. Columnas con `width` tienen un ancho fijo, mientras que las columnas con `min-width` tienen un ancho que se distribuye en proporción. | string                            | —                             | —           |\n| fixed                 | especifica si la columna se fija a la izquierda o a la derecha. Se fijará a la izquierda si es `true` | string/boolean                    | true/left/right               | —           |\n| render-header         | Función de renderizado para la cabecera de la tabla de esta columna | Function(h, { column, $index })   | —                             | —           |\n| sortable              | especifica que columna puede ser ordenado. El ordenamiento remoto puede ser hecho configurando el atributo `custom` y escucha al evento de tabla `sort-change` | boolean, string                   | true, false, custom           | false       |\n| sort-method           | método de ordenamiento, funciona cuando `sortable` está en `true`. Debería devolver un número, al igual que Array.sort | Function(a, b)                    | —                             | —           |\n| sort-by               | especifica por cual propiedad de va a ordenar, funciona cuando `sortable` es `true` y `sort-method` es `undefined`. Si se establece a un arreglo, la columna ordenara secuencialmente por la siguiente propiedad si la anterior es igual | Function(row, index)/String/Array | —                             | —           |\n| sort-orders           | el orden de las estrategias de ordenación utilizadas al ordenar los datos, funciona cuando `sortable` es `true`. Acepta un array, a medida que el usuario hace clic en el encabezado, la columna se ordena en el orden de los elementos del array. | array | los elementos en el arreglo necesitan ser uno de los siguientes: `ascending`, `descending` y `null` (restaura el orden original) | ['ascending', 'descending', null] |\n| resizable             | especifica si el ancho de la columna puede ser redimensionado, funciona cuando `border` de `el-table` está en `true` | boolean                           | —                             | false       |\n| formatter             | función que formatea el contenido de la celda | Function(row, column, cellValue, index)  | —                             | —           |\n| show-overflow-tooltip | especifica si el _tooltip_ debe ocultarse o mostrarse al hacer _hover_ en la celda | boolean                           | —                             | false       |\n| align                 | alineación                               | string                            | left/center/right             | left        |\n| header-align          | alineación de la cabecera de la tabla. Si se omite, se aplicará el valor del atributo anterior. | String                            | left/center/right             | —           |\n| class-name            | nombre de clase de la celda en la columna | string                            | —                             | —           |\n| label-class-name      | nombre de clase de la etiqueta de esta columna | string                            | —                             | —           |\n| selectable            | función que determina si una cierta fila puede ser seleccionada, funciona cuando `type` esta en `selection` | Function(row, index)              | —                             | —           |\n| reserve-selection     | especifica si se reserva la selección después de actualizar los datos, funciona cuando `type` está en `selection`. Note que `row-key` es requerido para que esto funcione | boolean                           | —                             | false       |\n| filters               | un arreglo de opciones para filtrado de datos. Para cada elemento en este arreglo, `text` y `value` son obligatorios | Array[{ text, value }]            | —                             | —           |\n| filter-placement      | colocación para el menú desplegable del filtro | String                            | same as Tooltip's `placement` | —           |\n| filter-multiple       | especifica si el filtrado de datos soporta múltiples opciones | Boolean                           | —                             | true        |\n| filter-method         | método para filtrado de datos. Si `filter-multiple` está habilitado, este método se invocará varias veces para cada fila, y una fila puede mostrar si una de las llamadas devuelve `true` | Function(value, row, column)      | —                             | —           |\n| filtered-value        | el valor del filtro para los datos seleccionados, puede ser útil cuando el encabezado de la tabla se representará con `render-header` | Array                             | —                             | —           |\n\n### Table-column Scoped Slot\n| Name | Description |\n|------|--------|\n| — | Contenido personalizado para las columnas de la tabla. El parámetro del scope es { row, column, $index } |\n| header | Contenido personalizado para el encabezado de la tabla. El parámetro del scope es { column, $index } |\n"
  },
  {
    "path": "examples/docs/es/tabs.md",
    "content": "## Tabulación\n\nDivide colecciones de datos que están relacionados pero pertenecen a diferentes tipos.\n\n### Uso básico\n\nTabulación básica y concisa\n\n:::demo Tabulación provee funcionalidad de tarjeta selectiva. Por defecto, la primer pestaña es seleccionada como activa, y es posible activar cualquier pestaña estableciendo el atributo de `value`.\n\n```html\n<template>\n  <el-tabs v-model=\"activeName\" @tab-click=\"handleClick\">\n    <el-tab-pane label=\"User\" name=\"first\">User</el-tab-pane>\n    <el-tab-pane label=\"Config\" name=\"second\">Config</el-tab-pane>\n    <el-tab-pane label=\"Role\" name=\"third\">Role</el-tab-pane>\n    <el-tab-pane label=\"Task\" name=\"fourth\">Task</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: 'first'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Estilo de Tarjeta\n\nPestañas diseñadas como tarjetas.\n\n:::demo Establecer `type` a `card` para obtener una pestaña diseñada como tarjeta.\n\n```html\n<template>\n  <el-tabs type=\"card\" @tab-click=\"handleClick\">\n    <el-tab-pane label=\"User\">User</el-tab-pane>\n    <el-tab-pane label=\"Config\">Config</el-tab-pane>\n    <el-tab-pane label=\"Role\">Role</el-tab-pane>\n    <el-tab-pane label=\"Task\">Task</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: 'first'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Tarjeta con Bordes\n\nPestañas de tarjeta con bordes.\n\n:::demo Establecer `type` a `border-card`.\n\n```html\n<el-tabs type=\"border-card\">\n  <el-tab-pane label=\"User\">User</el-tab-pane>\n  <el-tab-pane label=\"Config\">Config</el-tab-pane>\n  <el-tab-pane label=\"Role\">Role</el-tab-pane>\n  <el-tab-pane label=\"Task\">Task</el-tab-pane>\n</el-tabs>\n```\n\n:::\n\n### Posición de tabulación\n\nEs posible usar el atributo `tab-position` para establecer la posición de la tabulación.\n\n:::demo Es posible escoger entre cuatro direcciones: `tabPosition=\"left|right|top|bottom\"`\n\n```html\n<template>\n  <el-radio-group v-model=\"tabPosition\" style=\"margin-bottom: 30px;\">\n    <el-radio-button label=\"top\">top</el-radio-button>\n    <el-radio-button label=\"right\">right</el-radio-button>\n    <el-radio-button label=\"bottom\">bottom</el-radio-button>\n    <el-radio-button label=\"left\">left</el-radio-button>\n  </el-radio-group>\n\n  <el-tabs :tab-position=\"tabPosition\" style=\"height: 200px;\">\n    <el-tab-pane label=\"User\">User</el-tab-pane>\n    <el-tab-pane label=\"Config\">Config</el-tab-pane>\n    <el-tab-pane label=\"Role\">Role</el-tab-pane>\n    <el-tab-pane label=\"Task\">Task</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        tabPosition: 'left'\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Pestaña Personalizada\n\nEs posible usar slots con nombre para personalizar el contenido de la etiqueta de la pestaña.\n\n:::demo\n```html\n<el-tabs type=\"border-card\">\n  <el-tab-pane>\n    <span slot=\"label\"><i class=\"el-icon-date\"></i> Route</span>\n    Route\n  </el-tab-pane>\n  <el-tab-pane label=\"Config\">Config</el-tab-pane>\n  <el-tab-pane label=\"Role\">Role</el-tab-pane>\n  <el-tab-pane label=\"Task\">Task</el-tab-pane>\n</el-tabs>\n```\n:::\n\n### Agregar y cerrar pestaña\n\nSolo las pestañas de tipo tarjeta soportan adición y cierre.\n\n:::demo\n```html\n<el-tabs v-model=\"editableTabsValue\" type=\"card\" editable @edit=\"handleTabsEdit\">\n  <el-tab-pane\n    v-for=\"(item, index) in editableTabs\"\n    :key=\"item.name\"\n    :label=\"item.title\"\n    :name=\"item.name\"\n  >\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n<script>\n  export default {\n    data() {\n      return {\n        editableTabsValue: '2',\n        editableTabs: [{\n          title: 'Tab 1',\n          name: '1',\n          content: 'Tab 1 content'\n        }, {\n          title: 'Tab 2',\n          name: '2',\n          content: 'Tab 2 content'\n        }],\n        tabIndex: 2\n      }\n    },\n    methods: {\n      handleTabsEdit(targetName, action) {\n        if (action === 'add') {\n          let newTabName = ++this.tabIndex + '';\n          this.editableTabs.push({\n            title: 'New Tab',\n            name: newTabName,\n            content: 'New Tab content'\n          });\n          this.editableTabsValue = newTabName;\n        }\n        if (action === 'remove') {\n          let tabs = this.editableTabs;\n          let activeName = this.editableTabsValue;\n          if (activeName === targetName) {\n            tabs.forEach((tab, index) => {\n              if (tab.name === targetName) {\n                let nextTab = tabs[index + 1] || tabs[index - 1];\n                if (nextTab) {\n                  activeName = nextTab.name;\n                }\n              }\n            });\n          }\n          \n          this.editableTabsValue = activeName;\n          this.editableTabs = tabs.filter(tab => tab.name !== targetName);\n        }\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Botón disparador personalizado de la nueva pestaña\n\n:::demo\n```html\n<div style=\"margin-bottom: 20px;\">\n  <el-button\n    size=\"small\"\n    @click=\"addTab(editableTabsValue)\"\n  >\n    add tab\n  </el-button>\n</div>\n<el-tabs v-model=\"editableTabsValue\" type=\"card\" closable @tab-remove=\"removeTab\">\n  <el-tab-pane\n    v-for=\"(item, index) in editableTabs\"\n    :key=\"item.name\"\n    :label=\"item.title\"\n    :name=\"item.name\"\n  >\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n<script>\n  export default {\n    data() {\n      return {\n        editableTabsValue: '2',\n        editableTabs: [{\n          title: 'Tab 1',\n          name: '1',\n          content: 'Tab 1 content'\n        }, {\n          title: 'Tab 2',\n          name: '2',\n          content: 'Tab 2 content'\n        }],\n        tabIndex: 2\n      }\n    },\n    methods: {\n      addTab(targetName) {\n        let newTabName = ++this.tabIndex + '';\n        this.editableTabs.push({\n          title: 'New Tab',\n          name: newTabName,\n          content: 'New Tab content'\n        });\n        this.editableTabsValue = newTabName;\n      },\n      removeTab(targetName) {\n        let tabs = this.editableTabs;\n        let activeName = this.editableTabsValue;\n        if (activeName === targetName) {\n          tabs.forEach((tab, index) => {\n            if (tab.name === targetName) {\n              let nextTab = tabs[index + 1] || tabs[index - 1];\n              if (nextTab) {\n                activeName = nextTab.name;\n              }\n            }\n          });\n        }\n        \n        this.editableTabsValue = activeName;\n        this.editableTabs = tabs.filter(tab => tab.name !== targetName);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Atributos de Pestañas\n| Atributo       | Descripción                          | Tipo    | Valores aceptados     | Por defecto                 |\n| -------------- | ------------------------------------ | ------- | --------------------- | --------------------------- |\n| value / v-model | valor enlazado, nombre de la pestaña seleccionada    | string  | —                     | nombre de la primer pestaña |\n| type           | tipo de Pestaña                      | string  | card/border-card      | —                           |\n| closable       | si la Pestaña es cerrable            | boolean | —                     | false                       |\n| addable        | si la Pestaña es añadible            | boolean | —                     | false                       |\n| editable       | si la Pestaña es añadible y cerrable | boolean | —                     | false                       |\n| tab-position   | posición de tabulación               | string  | top/right/bottom/left | top                         |\n| stretch        | si el ancho del tab se ajusta automáticamente a su contenedor | boolean | - | false |\n| before-leave   | función `hook` antes de cambiar de pestaña. Si se devuelve `false` o se devuelve una `Promise` y luego se rechaza, se evitará el cambio. | Function(activeName, oldActiveName)  | — | — |\n\n### Eventos de Pestañas\n| Nombre de Evento | Descripción                                                  | Parámetros                    |\n| ---------------- | ------------------------------------------------------------ | ----------------------------- |\n| tab-click        | se lanza cuando se hace clic a una pestaña                   | pestaña clickeada             |\n| tab-remove       | se lanza cuando se hace clic al botón tab-remove             | nombre de la pestaña removida |\n| tab-add          | se lanza cuando se hace clic al botón tab-add                | —                             |\n| edit             | se lanza cuando los botones de tab-add y/o tab-remove son cliqueados | (targetName, action)          |\n\n### Atributos del Tab-pane\n| Atributo | Descripción                                                  | Tipo    | Valores Aceptados | Default                                                      |\n| -------- | ------------------------------------------------------------ | ------- | ----------------- | ------------------------------------------------------------ |\n| label    | título de la pestaña                                         | string  | —                 | —                                                            |\n| disabled | si la Tabulación está deshabilitada                          | boolean | —                 | false                                                        |\n| name     | identificador correspondiente al value de la Tabulación, representando el alias del tab-pane | string  | —                 | número ordinal del tab-pane en la secuencia, p.ej el primer tab-pane de pestañas es '1' |\n| closable | si el Tab es cerrable                                        | boolean | —                 | false                                                        |\n| lazy     | si Tab es renderizado con `lazy-load`                        | boolean | —                 | false                                                        |\n"
  },
  {
    "path": "examples/docs/es/tag.md",
    "content": "## Tag\n\nSe utiliza para marcar y seleccionar.\n\n### Uso básico\n\n:::demo Utilice el atributo `type` para definir el tipo de etiqueta. Además, el atributo `color` se puede utilizar para establecer el color de fondo de la etiqueta.\n\n```html\n<el-tag>Tag 1</el-tag>\n<el-tag type=\"success\">Tag 2</el-tag>\n<el-tag type=\"info\">Tag 3</el-tag>\n<el-tag type=\"warning\">Tag 4</el-tag>\n<el-tag type=\"danger\">Tag 5</el-tag>\n```\n:::\n\n### Etiqueta removible\n\n:::demo el atributo `closable` puede usarse para definir una etiqueta removible. Acepta un `Boolean`. De forma predeterminada, la eliminación de la etiqueta tiene una animación que se desvanece. Si no quiere usarlo, puede configurar el atributo `disable-transitions` , que acepta `Boolean`, como `true`. Se dispara el evento `close` cuando la etiqueta es removida. \n\n```html\n<el-tag\n  v-for=\"tag in tags\"\n  :key=\"tag.name\"\n  closable\n  :type=\"tag.type\">\n  {{tag.name}}\n</el-tag>\n\n<script>\n  export default {\n    data() {\n      return {\n        tags: [\n          { name: 'Tag 1', type: '' },\n          { name: 'Tag 2', type: 'success' },\n          { name: 'Tag 3', type: 'info' },\n          { name: 'Tag 4', type: 'warning' },\n          { name: 'Tag 5', type: 'danger' }\n        ]\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Editar dinámicamente\n\nPuede utilizar el evento `close` para añadir y eliminar etiquetas dinámicamente.\n\n:::demo\n```html\n<el-tag\n  :key=\"tag\"\n  v-for=\"tag in dynamicTags\"\n  closable\n  :disable-transitions=\"false\"\n  @close=\"handleClose(tag)\">\n  {{tag}}\n</el-tag>\n<el-input\n  class=\"input-new-tag\"\n  v-if=\"inputVisible\"\n  v-model=\"inputValue\"\n  ref=\"saveTagInput\"\n  size=\"mini\"\n  @keyup.enter.native=\"handleInputConfirm\"\n  @blur=\"handleInputConfirm\"\n>\n</el-input>\n<el-button v-else class=\"button-new-tag\" size=\"small\" @click=\"showInput\">+ New Tag</el-button>\n\n<style>\n  .el-tag + .el-tag {\n    margin-left: 10px;\n  }\n  .button-new-tag {\n    margin-left: 10px;\n    height: 32px;\n    line-height: 30px;\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .input-new-tag {\n    width: 90px;\n    margin-left: 10px;\n    vertical-align: bottom;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],\n        inputVisible: false,\n        inputValue: ''\n      };\n    },\n    methods: {\n      handleClose(tag) {\n        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);\n      },\n\n      showInput() {\n        this.inputVisible = true;\n        this.$nextTick(_ => {\n          this.$refs.saveTagInput.$refs.input.focus();\n        });\n      },\n\n      handleInputConfirm() {\n        let inputValue = this.inputValue;\n        if (inputValue) {\n          this.dynamicTags.push(inputValue);\n        }\n        this.inputVisible = false;\n        this.inputValue = '';\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Tamaños\n\nAdemás del tamaño predeterminado, el componente Tag proporciona tres tamaños adicionales para que pueda elegir entre diferentes escenarios.\n\n:::demo Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `small` o `mini`.\n\n```html\n<el-tag>Default</el-tag>\n<el-tag size=\"medium\">Medium</el-tag>\n<el-tag size=\"small\">Small</el-tag>\n<el-tag size=\"mini\">Mini</el-tag>\n```\n:::\n\n### Theme\n\nTag tiene tres diferentes temas: `dark`、`light` y `plain`\n\n:::demo Use  `effect` para cambiarlo, por defecto es `light`\n```html\n<div class=\"tag-group\">\n  <span class=\"tag-group__title\">Dark</span>\n  <el-tag\n    v-for=\"item in items\"\n    :key=\"item.label\"\n    :type=\"item.type\"\n    effect=\"dark\">\n    {{ item.label }}\n  </el-tag>\n</div>\n<div class=\"tag-group\">\n  <span class=\"tag-group__title\">Plain</span>\n  <el-tag\n    v-for=\"item in items\"\n    :key=\"item.label\"\n    :type=\"item.type\"\n    effect=\"plain\">\n    {{ item.label }}\n  </el-tag>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        items: [\n          { type: '', label: 'Tag 1' },\n          { type: 'success', label: 'Tag 2' },\n          { type: 'info', label: 'Tag 3' },\n          { type: 'danger', label: 'Tag 4' },\n          { type: 'warning', label: 'Tag 5' }\n        ]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Atributos\n| Atributo            | Descripción                         | Tipo    | Valores aceptados           | Por defecto |\n| ------------------- | ----------------------------------- | ------- | --------------------------- | ----------- |\n| type                | tipo de Tag | string  | success/info/warning/danger | —           |\n| closable            | si el Tag puede ser removido        | boolean | —                           | false       |\n| disable-transitions | si se deshabilitan las animaciones  | boolean | —                           | false       |\n| hit                 | si el  Tag tiene un borde resaltado | boolean | —                           | false       |\n| color               | color de fondo del Tag              | string  | —                           | —           |\n| size                | tamaño del Tag                      | string  | medium / small / mini       | —           |\n| effect | Tema del Tag | string | dark / light / plain | light |\n\n\n### Eventos\n| Nombre | Descripción                          | Parametros |\n| ------ | ------------------------------------ | ---------- |\n| click  | se dispara cuando el Tag es clic     | —          |\n| close  | se dispara cuando el Tag es removido | —          |\n"
  },
  {
    "path": "examples/docs/es/time-picker.md",
    "content": "## Selector de Tiempo\n\nUse el Time Picker para input de tipo time.\n\n### Selector de tiempo fijo\n\nProvee una lista de tiempo fijo para que los usuarios escojan.\n\n:::demo Use el tag `el-time-select`, se pueden asignar tiempo de inicio, tiempo de finalización y salto de tiempo con `start`, `end` y `step`.\n```html\n<el-time-select\n  v-model=\"value\"\n  :picker-options=\"{\n    start: '08:30',\n    step: '00:15',\n    end: '18:30'\n  }\"\n  placeholder=\"Select time\">\n</el-time-select>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: ''\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Selector de tiempo arbitrario\n\nUn tiempo arbitrario puede ser escogido.\n\n:::demo Al usar el tag `el-time-picker`, es posible limitar el rango de tiempo al especificar `selectableRange`. Por defecto, es posible hacer scroll con la rueda del ratón para escoger el tiempo, alternativamente se pueden utilizar las flechas de control cuando el atributo `arrow-control` esté establecido.\n\n```html\n<template>\n  <el-time-picker\n    v-model=\"value1\"\n    :picker-options=\"{\n      selectableRange: '18:30:00 - 20:30:00'\n    }\"\n    placeholder=\"Arbitrary time\">\n  </el-time-picker>\n  <el-time-picker\n    arrow-control\n    v-model=\"value2\"\n    :picker-options=\"{\n      selectableRange: '18:30:00 - 20:30:00'\n    }\"\n    placeholder=\"Arbitrary time\">\n  </el-time-picker>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: new Date(2016, 9, 10, 18, 40),\n        value2: new Date(2016, 9, 10, 18, 40)\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Rango de tiempo fijo\n\nSi se escoge el tiempo de inicio al principio, el tiempo de finalización cambiará respectivamente.\n\n:::demo\n```html\n<template>\n  <el-time-select\n    placeholder=\"Start time\"\n    v-model=\"startTime\"\n    :picker-options=\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30'\n    }\">\n  </el-time-select>\n  <el-time-select\n    placeholder=\"End time\"\n    v-model=\"endTime\"\n    :picker-options=\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30',\n      minTime: startTime\n    }\">\n  </el-time-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        startTime: '',\n        endTime: ''\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Rango de tiempo arbitrario\n\nEs posible escoger un rango de tiempo arbitrario.\n\n:::demo Es posible seleccionar un rango de tiempo al añadir el atributo `is-range`. También, `arrow-control` es soportado en modo de rango.\n```html\n<template>\n  <el-time-picker\n    is-range\n    v-model=\"value1\"\n    range-separator=\"To\"\n    start-placeholder=\"Start time\"\n    end-placeholder=\"End time\">\n  </el-time-picker>\n  <el-time-picker\n    is-range\n    arrow-control\n    v-model=\"value2\"\n    range-separator=\"To\"\n    start-placeholder=\"Start time\"\n    end-placeholder=\"End time\">\n  </el-time-picker>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],\n        value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Atributos\n| Atributo          | Descripción                              | Tipo                                     | Valores aceptados                        | Por defecto          |\n| ----------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | -------------------- |\n| value / v-model    | valor enlazado                           | date(TimePicker) / string(TimeSelect)    | -                                        | -                    |\n| readonly          | si el Time Picker está en modo de sólo lectura | boolean                                  | —                                        | false                |\n| disabled          | si el Time Picker se encuentra deshabilitado | boolean                                  | —                                        | false                |\n| editable          | si el input puede ser editado            | boolean                                  | —                                        | true                 |\n| clearable         | si mostrar el botón de borrado           | boolean                                  | —                                        | true                 |\n| size              | tamaño del input                         | string                                   | medium / small / mini                    | —                    |\n| placeholder       | placeholder en un modo fuera de rango    | string                                   | —                                        | —                    |\n| start-placeholder | placeholder para el tiempo de inicio en modo de rango | string                                   | —                                        | —                    |\n| end-placeholder   | placeholder para el tiempo de finalización en modo de rango | string                                   | —                                        | —                    |\n| is-range          | si es posible escoger un rango de tiempo, solo funciona con `<el-time-picker>` | boolean                                  | —                                        | false                |\n| arrow-control     | si es posible escoger el tiempo usando los botones de flecha, solo funciona con `<el-time-picker>` | boolean                                  | —                                        | false                |\n| align             | alineación                               | left / center / right                    | left                                     |                      |\n| popper-class      | nombre de clase personalizada para el dropdown del Time Picker | string                                   | —                                        | —                    |\n| picker-options    | opciones adicionales, revisar la tabla posterior | object                                   | —                                        | {}                   |\n| range-separator   | separador de rango                       | string                                   | -                                        | '-'                  |\n| default-value     | opcional, fecha por defecto del calendario | Fecha para Selector de Tiempo, string para el Seleccionador de Tiempo | cualquier cosa aceptada por `new Date()` para el Selector de Tiempo,  Selector de Tiempo, valor seleccionable para el Seleccionador de Tiempo | —                    |\n| value-format      | opcional, solo para Time Picker, formato del valor vinculado. Si no se especifica, el valor vinculado será un objeto Date | string                                   | ver [date formats](#/es/component/date-picker#date-formats) | —                    |\n| name              | como `name` en input nativo              | string                                   | —                                        | —                    |\n| prefix-icon       | Clase personalizada para el icono de prefijado | string                                   | —                                        | el-icon-time         |\n| clear-icon        | Clase personalizada para el icono `clear` | string                                   | —                                        | el-icon-circle-close |\n\n### Opciones para Time Picker\n| Atributo | Descripción                              | Tipo   | Valores aceptados | Por defecto |\n| -------- | ---------------------------------------- | ------ | ----------------- | ----------- |\n| start    | tiempo de inicio                         | string | —                 | 09:00       |\n| end      | tiempo de finalización                   | string | —                 | 18:00       |\n| step     | salto de tiempo                          | string | —                 | 00:30       |\n| minTime  | tiempo mínimo, cualquier tiempo antes de éste será deshabilitado | string | —                 | 00:00       |\n| maxTime  | tiempo máximo, cualquier tiempo después de éste será deshabilitado | string | —                 | —           |\n\n### Opciones para Time Picker\n| Atributo        | Descripción                              | Tipo           | Valores aceptados                   | Por defecto |\n| --------------- | ---------------------------------------- | -------------- | ----------------------------------- | ----------- |\n| selectableRange | rango de tiempo disponible p.ej. `'18:30:00 - 20:30:00'`ó`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string / array | —                                   | —           |\n| format          | formato para el selector                 | string         | hour `HH`, minute `mm`, second `ss` | HH:mm:ss    |\n\n\n### Eventos\n| Nombre de Evento | Descripción                              | Parámetros                     |\n| ---------------- | ---------------------------------------- | ------------------------------ |\n| change           | se lanza cuando el usuario confirma el valor | valor vinculado del componente |\n| blur             | se lanza cuando el input se difumina     | instancia del componente       |\n| focus            | se lanza cuando el input se enfoca       | instancia del componente       |\n\n### Metodos\n| Metodo | Descripción                | Parameteros |\n| ------ | -------------------------- | ----------- |\n| focus  | coloca el foco en el input | —           |\n"
  },
  {
    "path": "examples/docs/es/timeline.md",
    "content": "## Timeline\n\nLínea de tiempo visual.\n\n### Uso básico\n\nEl Timeline puede ser dividido en múltiples actividades en forma ascendente o descendente. Las marcas de tiempo son características importantes que los distinguen de otros componentes. Observe la diferencia con Steps.\n\n:::demo\n```html\n<div class=\"block\">\n  <div class=\"radio\">\n    Order: \n    <el-radio-group v-model=\"reverse\">\n      <el-radio :label=\"true\">descending</el-radio>\n      <el-radio :label=\"false\">ascending</el-radio>\n    </el-radio-group>\n  </div>\n\n  <el-timeline :reverse=\"reverse\">\n    <el-timeline-item\n      v-for=\"(activity, index) in activities\"\n      :key=\"index\"\n      :timestamp=\"activity.timestamp\">\n      {{activity.content}}\n    </el-timeline-item>\n  </el-timeline>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        reverse: true,\n        activities: [{\n          content: 'Success',\n          timestamp: '2018-04-11'\n        }, {\n          content: 'Approved',\n          timestamp: '2018-04-13'\n        }, {\n          content: 'Event start',\n          timestamp: '2018-04-15'\n        }]\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Nodo personalizado\n\nEl tamaño, el color y los iconos se pueden personalizar en el nodo.\n\n:::demo\n```html\n<div class=\"block\">\n  <el-timeline>\n    <el-timeline-item\n      v-for=\"(activity, index) in activities\"\n      :key=\"index\"\n      :icon=\"activity.icon\"\n      :type=\"activity.type\"\n      :color=\"activity.color\"\n      :size=\"activity.size\"\n      :timestamp=\"activity.timestamp\">\n      {{activity.content}}\n    </el-timeline-item>\n  </el-timeline>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        activities: [{\n          content: 'Custom icon',\n          timestamp: '2018-04-12 20:46',\n          size: 'large',\n          type: 'primary',\n          icon: 'el-icon-more'\n        }, {\n          content: 'Custom color',\n          timestamp: '2018-04-03 20:46',\n          color: '#0bbd87'\n        }, {\n          content: 'Custom size',\n          timestamp: '2018-04-03 20:46',\n          size: 'large'\n        }, {\n          content: 'Default node',\n          timestamp: '2018-04-03 20:46'\n        }]\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Marcas de tiempo personalizadas\n\nLas marcas de tiempo ( timestamp )  puede colocarse encima del contenido cuando éste es demasiado alto.\n\n:::demo\n```html\n<div class=\"block\">\n  <el-timeline>\n    <el-timeline-item timestamp=\"2018/4/12\" placement=\"top\">\n      <el-card>\n        <h4>Update Github template</h4>\n        <p>Tom committed 2018/4/12 20:46</p>\n      </el-card>\n    </el-timeline-item>\n    <el-timeline-item timestamp=\"2018/4/3\" placement=\"top\">\n      <el-card>\n        <h4>Update Github template</h4>\n        <p>Tom committed 2018/4/3 20:46</p>\n      </el-card>\n    </el-timeline-item>\n    <el-timeline-item timestamp=\"2018/4/2\" placement=\"top\">\n      <el-card>\n        <h4>Update Github template</h4>\n        <p>Tom committed 2018/4/2 20:46</p>\n      </el-card>\n    </el-timeline-item>\n  </el-timeline>\n</div>\n```\n:::\n\n### Timeline Atributos\n| Atributo | Descripción | Tipo    | Valores aceptados | Por defecto |\n|---------- |-------- |---------- |-------------  |-------- |\n| reverse | Si el node es ascendente o descendente. Por defecto es ascendente | boolean | — | false |\n\n### Timeline-item Atributos\n| Atributo    | Descripción | Tipo    | Valores aceptados | Por defecto |\n|---------- |-------- |---------- |-------------  |-------- |\n| timestamp     | Contenido de las marcas de tiempo | string  | - | — |\n| hide-timestamp  | Si se muestra o no timestamp | boolean | — | false |\n| placement | la posición de timestamp | string | top / bottom | bottom |\n| type | tipo de nodo | string | primary / success / warning / danger / info | - |\n| color | color de fondo del nodo | string | hsl / hsv / hex / rgb | - |\n| size | tamaño del nodo | string | normal / large | normal |\n| icon | nombre de la clase del icono | string | — | - |\n\n### Timeline-Item Slot\n| Nombre | Descripción |\n|------|--------|\n| — | Contenido personalizado del ítem del timeline |\n| dot | Definición personalizada del nodo |\n"
  },
  {
    "path": "examples/docs/es/tooltip.md",
    "content": "## Tooltip\n\nMostrar aviso de información con el hover del mouse.\n\n### Uso básico\n\nTooltip tiene 9 colocaciones.\n\n:::demo Use el atributo `content` para establecer el contenido que se mostrará al hacer hover. El atributo `placement` determina la posición del tooltip. Su valor es `[orientation]-[alignment]` con cuatro orientaciones `top`, `left`, `right`, `bottom` y tres alineaciones `start`, `end`, `null`, la alineación por defecto es null. Tome `placement=\"left-end\"` como ejemplo, Tooltip será mostrado en la izquierda del elemento en que se esté haciendo hover y el fondo del tooltip se alineará con el fondo del elemento.\n```html\n<div class=\"box\">\n  <div class=\"top\">\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Top Left prompts info\" placement=\"top-start\">\n      <el-button>top-start</el-button>\n    </el-tooltip>\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Top Center prompts info\" placement=\"top\">\n      <el-button>top</el-button>\n    </el-tooltip>\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Top Right prompts info\" placement=\"top-end\">\n      <el-button>top-end</el-button>\n    </el-tooltip>\n  </div>\n  <div class=\"left\">\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Left Top prompts info\" placement=\"left-start\">\n      <el-button>left-start</el-button>\n    </el-tooltip>\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Left Center prompts info\" placement=\"left\">\n      <el-button>left</el-button>\n    </el-tooltip>\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Left Bottom prompts info\" placement=\"left-end\">\n      <el-button>left-end</el-button>\n    </el-tooltip>\n  </div>\n\n  <div class=\"right\">\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Right Top prompts info\" placement=\"right-start\">\n      <el-button>right-start</el-button>\n    </el-tooltip>\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Right Center prompts info\" placement=\"right\">\n      <el-button>right</el-button>\n    </el-tooltip>\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Right Bottom prompts info\" placement=\"right-end\">\n      <el-button>right-end</el-button>\n    </el-tooltip>\n  </div>\n  <div class=\"bottom\">\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Bottom Left prompts info\" placement=\"bottom-start\">\n      <el-button>bottom-start</el-button>\n    </el-tooltip>\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Bottom Center prompts info\" placement=\"bottom\">\n      <el-button>bottom</el-button>\n    </el-tooltip>\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Bottom Right prompts info\" placement=\"bottom-end\">\n      <el-button>bottom-end</el-button>\n    </el-tooltip>\n  </div>\n</div>\n\n<style>\n  .box {\n    width: 400px;\n\n    .top {\n      text-align: center;\n    }\n\n    .left {\n      float: left;\n      width: 110px;\n    }\n\n    .right {\n      float: right;\n      width: 110px;\n    }\n\n    .bottom {\n      clear: both;\n      text-align: center;\n    }\n\n    .item {\n      margin: 4px;\n    }\n\n    .left .el-tooltip__popper,\n    .right .el-tooltip__popper {\n      padding: 8px 10px;\n    }\n\n    .el-button {\n      width: 110px;\n    }\n  }\n</style>\n```\n:::\n\n\n### Tema\n\nTooltip tiene dos temas: `dark` y `light`.\n\n:::demo Establecer `effect` para modificar el tema, el valor por defecto es `dark`.\n```html\n<el-tooltip content=\"Top center\" placement=\"top\">\n  <el-button>Dark</el-button>\n</el-tooltip>\n<el-tooltip content=\"Bottom center\" placement=\"bottom\" effect=\"light\">\n  <el-button>Light</el-button>\n</el-tooltip>\n```\n:::\n\n### Más Contenido\n\nDespliegue múltiples líneas de texto y establezca su formato.\n\n:::demo Sobrescriba el atributo `content` del `el-tooltip` añadiendo un slot llamado `content`.\n```html\n<el-tooltip placement=\"top\">\n  <div slot=\"content\">multiple lines<br/>second line</div>\n  <el-button>Top center</el-button>\n</el-tooltip>\n```\n:::\n\n### Uso Avanzado\n\nAdicional a los usos básicos, existen algunos atributos que permiten la personalización: \n\nel atributo `transition` permite personalizar la animación con la que el Tooltip se muestra o se esconda, el valor por defecto es `el-fade-in-linear`.\n\nel atributo `disabled` permite deshabilitar `tooltip`. Solo es necesario definirlo como `true`.\n\nDe hecho, Tooltip es una extensión basada en [Vue-popper](https://github.com/element-component/vue-popper), es posible utilizar cualquier atributo permitido en Vue-popper.\n\n:::demo\n```html\n<template>\n  <el-tooltip :disabled=\"disabled\" content=\"click to close tooltip function\" placement=\"bottom\" effect=\"light\">\n    <el-button @click=\"disabled = !disabled\">click to {{disabled ? 'active' : 'close'}} tooltip function</el-button>\n  </el-tooltip>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        disabled: false\n      };\n    }\n  };\n</script>\n\n<style>\n  .slide-fade-enter-active {\n    transition: all .3s ease;\n  }\n  .slide-fade-leave-active {\n    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);\n  }\n  .slide-fade-enter, .expand-fade-leave-active {\n    margin-left: 20px;\n    opacity: 0;\n  }\n</style>\n```\n:::\n\n:::tip\nEl componente `router-link` no es soportado por Tooltip, favor de usar `vm.$router.push`.\n\nElementos de forma deshabilitados no son soportados por Tooltip, más información puede ser encontrada en [MDN](https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter).\nEs necesario envolver los elementos de forma deshabilitados en un elemento contenedor para que Tooltip funcione.\n:::\n\n\n### Atributos\n| Atributo       | Descripción                              | Tipo    | Valores aceptados                        | Por defecto                              |\n| -------------- | ---------------------------------------- | ------- | ---------------------------------------- | ---------------------------------------- |\n| effect         | tema del Tooltip                         | string  | dark/light                               | dark                                     |\n| content        | contenido a mostrar, puede ser sobre-escrito por `slot#content` | string  | —                                        | —                                        |\n| placement      | posición del Tooltip                     | string  | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom                                   |\n| value / v-model | visibilidad del Tooltip                  | boolean | —                                        | false                                    |\n| disabled       | saber si el Tooltip se encuentra deshabilitado | boolean | —                                        | false                                    |\n| offset         | offset del Tooltip                       | number  | —                                        | 0                                        |\n| transition     | nombre de animación                      | string  | —                                        | el-fade-in-linear                        |\n| visible-arrow  | si una flecha es mostrada. Para mayor información, revisar la página de [Vue-popper](https://github.com/element-component/vue-popper) | boolean | —                                        | true                                     |\n| popper-options | parámetros de [popper.js](https://popper.js.org/docs/v2/) | Object  | referirse a la documentación de [popper.js](https://popper.js.org/docs/v2/) | `{ boundariesElement: 'body', gpuAcceleration: false }` |\n| open-delay     | retraso de la apariencia, en mili segundos | number  | —                                        | 0                                        |\n| manual         | si el Tooltipo será controlado de forma manual. `mouseenter` y `mouseleave` no tendrán efecto si fue establecido como `true` | boolean | —                                        | false                                    |\n| popper-class   | nombre de clase personalizada para el popper del Tooltip | string  | —                                        | —                                        |\n| enterable      | si el ratón puede entrar al Tooltip | Boolean | —                                        | true                                     |\n| hide-after     | tiempo a esperar en mili segundos para esconder el Tooltip | number  | —                                        | 0                                        |\n| tabindex       | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) de Tooltip | number   | —                      | 0              |\n"
  },
  {
    "path": "examples/docs/es/transfer.md",
    "content": "## Transfer\n\n### Uso básico\n:::demo Los datos se pasan a Transfer a través del atributo `data`. Los datos tienen que ser un array de objetos, y cada objeto debe tener estos atributos: `key` que será el identificador del ítem, `label` que será el texto a mostrar, y `disabled` que indicará si el elemento esta desactivado. Los items dentro de la lista destino están sincronizados con la variable asociada a `v-model`, y el valor de esa variable es un array de claves de los elementos de la lista destino. Así que si no quiere que la lista destino esté vacía inicialmente puede inicializar el `v-model` con un array.\n```html\n<template>\n  <el-transfer\n    v-model=\"value\"\n    :data=\"data\">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value: [1, 4]\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Filtrar\n\nPuede buscar y filtrar los items.\n\n:::demo Ponga el atributo `filterable` a true para permitir el filtrado. Por defecto si el `label` del ítem contiene el término buscado será incluido en el resultado. También puede implementar su propio método de filtrado con el atributo `filter-method`, que recibe un método y le pasa la búsqueda y cada ítem. Los items para los que devuelva true serán incluidos en el resultado de la búsqueda.\n```html\n<template>\n  <el-transfer\n    filterable\n    :filter-method=\"filterMethod\"\n    filter-placeholder=\"State Abbreviations\"\n    v-model=\"value\"\n    :data=\"data\">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];\n        const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];\n        states.forEach((city, index) => {\n          data.push({\n            label: city,\n            key: index,\n            initial: initials[index]\n          });\n        });\n        return data;\n      };\n      return {\n        data: generateData(),\n        value: [],\n        filterMethod(query, item) {\n          return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;\n        }\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Personalizable\n\nPuede personalizar los títulos, botones, la función de renderizado de los items, el texto de estatus de la cabecera y el contenido del pie.\n\n:::demo Use `titles`, `button-texts`, `render-content` y `format` respectivamente para personalizar los títulos de las listas, el texto de los botones, la función de renderizado para los items y el texto de la cabecera que muestra el estado de los items. Además, también puede utilizar el scoped-slot para personalizar los elementos de datos. Para el pie de la lista hay dos slots: `left-footer` y `right-footer`. Además, si quiere algunos items marcados inicialmente puede usar `left-default-checked` y `right-default-checked`. Finalmente este ejemplo muestra el evento `change`. Tenga en cuenta que este ejemplo no se puede ejecutar en jsfiddle porque no soporta sintaxis JSX. En un proyecto real `render-content` funcionará si las dependencias son configuradas correctamente.\n```html\n<template>\n  <p style=\"text-align: center; margin: 0 0 20px\">Customize data items using render-content</p>\n  <div style=\"text-align: center\">\n    <el-transfer\n      style=\"text-align: left; display: inline-block\"\n      v-model=\"value\"\n      filterable\n      :left-default-checked=\"[2, 3]\"\n      :right-default-checked=\"[1]\"\n      :render-content=\"renderFunc\"\n      :titles=\"['Source', 'Target']\"\n      :button-texts=\"['To left', 'To right']\"\n      :format=\"{\n        noChecked: '${total}',\n        hasChecked: '${checked}/${total}'\n      }\"\n      @change=\"handleChange\"\n      :data=\"data\">\n      <el-button class=\"transfer-footer\" slot=\"left-footer\" size=\"small\">Operation</el-button>\n      <el-button class=\"transfer-footer\" slot=\"right-footer\" size=\"small\">Operation</el-button>\n    </el-transfer>\n  </div>\n  <p style=\"text-align: center; margin: 50px 0 20px\">Customize data items using scoped slot</p>\n  <div style=\"text-align: center\">\n    <el-transfer\n      style=\"text-align: left; display: inline-block\"\n      v-model=\"value4\"\n      filterable\n      :left-default-checked=\"[2, 3]\"\n      :right-default-checked=\"[1]\"\n      :titles=\"['Source', 'Target']\"\n      :button-texts=\"['To left', 'To right']\"\n      :format=\"{\n        noChecked: '${total}',\n        hasChecked: '${checked}/${total}'\n      }\"\n      @change=\"handleChange\"\n      :data=\"data\">\n      <span slot-scope=\"{ option }\">{{ option.key }} - {{ option.label }}</span>\n      <el-button class=\"transfer-footer\" slot=\"left-footer\" size=\"small\">Operation</el-button>\n      <el-button class=\"transfer-footer\" slot=\"right-footer\" size=\"small\">Operation</el-button>\n    </el-transfer>\n  </div>\n</template>\n\n<style>\n  .transfer-footer {\n    margin-left: 20px;\n    padding: 6px 5px;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value: [1],\n        value4: [1],\n        renderFunc(h, option) {\n          return <span>{ option.key } - { option.label }</span>;\n        }\n      };\n    },\n\n    methods: {\n      handleChange(value, direction, movedKeys) {\n        console.log(value, direction, movedKeys);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Prop con alias\n\nPor defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada elemento. Si sus datos tienen un nombre diferente para la clave puede usar el atributo `props` para añadir alias.\n\n:::demo En este ejemplo los elementos no tienen `key`y `label`, en vez de eso tienen `value` y `desc`. Así que tiene que añadir alias para `key` y `label`.\n```html\n<template>\n  <el-transfer\n    v-model=\"value\"\n    :props=\"{\n      key: 'value',\n      label: 'desc'\n    }\"\n    :data=\"data\">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            value: i,\n            desc: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value: []\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Atributos\n| Atributo             | Descripción                   | Tipo                            | Valores aceptados | Por defecto                              |\n| --------------------- | ---------------------------------------- | ------------------------------- | ----------------- | ---------------------------------------- |\n| value / v-model        | valor enlazado                           | array                           | —                 | —                                        |\n| data                  | Origen de datos                          | array[{ key, label, disabled }] | —                 | [ ]                                      |\n| filterable            | Si se puede filtrar                      | boolean                         | —                 | false                                    |\n| filter-placeholder    | Placeholder para el input del filtro     | string                          | —                 | Enter keyword                            |\n| filter-method         | Método de filtrado                       | function                        | —                 | —                                        |\n| target-order          | estrategia de órdenes para elementos de la lista destino. Si está configurado en `original`, los elementos mantendrán el mismo orden que la fuente de datos. Si está configurado para `push`, los nuevos elementos añadidos se insertaran al final. Si se ajusta a `unshift`, los nuevos elementos añadidos se insertarán en la parte superior. | string | original / push / unshift | original |\n| titles                | Títulos de las listas                    | array                           | —                 | ['List 1', 'List 2']                     |\n| button-texts          | Texto de los botones                     | array                           | —                 | [ ]                                      |\n| render-content        | Función de renderizado                   | function(h, option)             | —                 | —                                        |\n| format                | Texto para el status en el header        | object{noChecked, hasChecked}   | —                 | { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' } |\n| props                 | prop alias para el origen de datos       | object{key, label, disabled}    | —                 | —                                        |\n| left-default-checked  | Array de claves de los elementos marcados inicialmente en la lista de la izquierda | array                           | —                 | [ ]                                      |\n| right-default-checked | Array de claves de los elementos marcados inicialmente en la lista de la derecha | array                           | —                 | [ ]                                      |\n\n### Slot\n| Nombre       | Descripción                                      |\n| ------------ | ------------------------------------------------ |\n| left-footer  | Contenido del footer de la lista de la izquierda |\n| right-footer | Contenido del footer de la lista de la derecha   |\n\n### Scoped Slot\n| Name | Descripción |\n|------|--------|\n| — | Contenido personalizado para los datos de los items. El parámetro del scope es { option } |\n\n### Métodos\n| Método | Descripción | Parámetros |\n| ---- | ---- | ---- |\n| clearQuery | borra la palabra clave del filtro de un determinado panel | 'left' / 'right' |\n\n### Eventos\n| Nombre | Descripción                   | Parámetros                     |\n| ------ | ---------------------------------------- | ---------------------------------------- |\n| change | se lanza cuando los elementos cambian en la lista de la derecha | array con las claves de los elementos de la lista de la derecha |\n| left-check-change | se dispara cuando el usuario final cambia el estado verificado de cualquier elemento de datos en la lista izquierda | array clave de ítems actualmente verificados, array clave de ítems cuyo estado verificado ha cambiado |\n| right-check-change | se dispara cuando el usuario final cambia el estado verificado de cualquier elemento de datos en la lista derecha. | array clave de ítems actualmente verificados, array clave de ítems cuyo estado verificado ha cambiado |\n"
  },
  {
    "path": "examples/docs/es/transition.md",
    "content": "## Transiciones incorporadas\n\nPuede usar directamente las transiciones incorporadas en Element. Antes de hacerlo, por favor lea la [documentación](https://v2.vuejs.org/v2/api/#transition).\n\n### Fade\n\n:::demo Tenemos dos efectos de fading: `el-fade-in-linear` y `el-fade-in`.\n```html\n<template>\n  <div>\n    <el-button @click=\"show = !show\">Click Me</el-button>\n\n    <div style=\"display: flex; margin-top: 20px; height: 100px;\">\n      <transition name=\"el-fade-in-linear\">\n        <div v-show=\"show\" class=\"transition-box\">.el-fade-in-linear</div>\n      </transition>\n      <transition name=\"el-fade-in\">\n        <div v-show=\"show\" class=\"transition-box\">.el-fade-in</div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show: true\n    })\n  }\n</script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n```\n:::\n\n### Zoom\n\n:::demo También tenemos zoom: `el-zoom-in-center`, `el-zoom-in-top` y `el-zoom-in-bottom`.\n```html\n<template>\n  <div>\n    <el-button @click=\"show2 = !show2\">Click Me</el-button>\n\n    <div style=\"display: flex; margin-top: 20px; height: 100px;\">\n      <transition name=\"el-zoom-in-center\">\n        <div v-show=\"show2\" class=\"transition-box\">.el-zoom-in-center</div>\n      </transition>\n\n      <transition name=\"el-zoom-in-top\">\n        <div v-show=\"show2\" class=\"transition-box\">.el-zoom-in-top</div>\n      </transition>\n\n      <transition name=\"el-zoom-in-bottom\">\n        <div v-show=\"show2\" class=\"transition-box\">.el-zoom-in-bottom</div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show2: true\n    })\n  }\n</script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n```\n:::\n\n\n### Colapsado\nPara efectos de colapsado usar el componente `el-collapse-transition`.\n:::demo\n\n```html\n<template>\n  <div>\n    <el-button @click=\"show3 = !show3\">Click Me</el-button>\n\n    <div style=\"margin-top: 20px; height: 200px;\">\n      <el-collapse-transition>\n        <div v-show=\"show3\">\n          <div class=\"transition-box\">el-collapse-transition</div>\n          <div class=\"transition-box\">el-collapse-transition</div>\n        </div>\n      </el-collapse-transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show3: true\n    })\n  }\n</script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n```\n:::\n\n### Bajo demanda\n\n```js\n// fade/zoom\nimport 'element-ui/lib/theme-chalk/base.css';\n// colapsar\nimport CollapseTransition from 'element-ui/lib/transitions/collapse-transition';\nimport Vue from 'vue'\n\nVue.component(CollapseTransition.name, CollapseTransition)\n```\n"
  },
  {
    "path": "examples/docs/es/tree.md",
    "content": "## Tree\n\nMuestra un conjunto de datos jerárquicos.\n\n### Uso básico\n\nEstructura básica de árbol.\n\n:::demo\n```html\n<el-tree :data=\"data\" :props=\"defaultProps\" @node-click=\"handleNodeClick\"></el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: 'Level one 1',\n          children: [{\n            label: 'Level two 1-1',\n            children: [{\n              label: 'Level three 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 2',\n          children: [{\n            label: 'Level two 2-1',\n            children: [{\n              label: 'Level three 2-1-1'\n            }]\n          }, {\n            label: 'Level two 2-2',\n            children: [{\n              label: 'Level three 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 3',\n          children: [{\n            label: 'Level two 3-1',\n            children: [{\n              label: 'Level three 3-1-1'\n            }]\n          }, {\n            label: 'Level two 3-2',\n            children: [{\n              label: 'Level three 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Seleccionable\n\nUsado para la selección de nodos.\n\n:::demo Este ejemplo también muestra como cargar los datos de forma asíncrona.\n```html\n<el-tree\n  :props=\"props\"\n  :load=\"loadNode\"\n  lazy\n  show-checkbox\n  @check-change=\"handleCheckChange\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        props: {\n          label: 'name',\n          children: 'zones'\n        },\n        count: 1\n      };\n    },\n    methods: {\n      handleCheckChange(data, checked, indeterminate) {\n        console.log(data, checked, indeterminate);\n      },\n      handleNodeClick(data) {\n        console.log(data);\n      },\n      loadNode(node, resolve) {\n        if (node.level === 0) {\n          return resolve([{ name: 'Root1' }, { name: 'Root2' }]);\n        }\n        if (node.level > 3) return resolve([]);\n\n        var hasChild;\n        if (node.data.name === 'region1') {\n          hasChild = true;\n        } else if (node.data.name === 'region2') {\n          hasChild = false;\n        } else {\n          hasChild = Math.random() > 0.5;\n        }\n\n        setTimeout(() => {\n          var data;\n          if (hasChild) {\n            data = [{\n              name: 'zone' + this.count++\n            }, {\n              name: 'zone' + this.count++\n            }];\n          } else {\n            data = [];\n          }\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Nodos hoja en modo perezoso (lazy load)\n\n:::demo Los datos de un nodo no son cargados hasta que no es pinchado, así que el árbol no puede predecir si es una hoja. Por eso a cada nodo se le añade el botón de desplegar, y si el nodo es una hoja el botón desaparecerá al pinchar en él. También puede decirle al árbol que el nodo es una hoja de antemano, y así evita que muestre el botón de desplegar.\n```html\n<el-tree\n  :props=\"props\"\n  :load=\"loadNode\"\n  lazy\n  show-checkbox>\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        props: {\n          label: 'name',\n          children: 'zones',\n          isLeaf: 'leaf'\n        },\n      };\n    },\n    methods: {\n      loadNode(node, resolve) {\n        if (node.level === 0) {\n          return resolve([{ name: 'region' }]);\n        }\n        if (node.level > 1) return resolve([]);\n\n        setTimeout(() => {\n          const data = [{\n            name: 'leaf',\n            leaf: true\n          }, {\n            name: 'zone'\n          }];\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Checkbox desactivados\n\nEl checkbox de un nodo se puede poner como desactivado.\n\n:::demo En el ejemplo, la propiedad `disabled` se declara en `defaultProps`, y algunos nodos se ponen como `disabled:true`. Los checkboxes correspondientes son desactivados y no se pueden pinchar.\n```html\n<el-tree\n  :data=\"data\"\n  :props=\"defaultProps\"\n  show-checkbox\n  @check-change=\"handleCheckChange\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          id: 1,\n          label: 'Level one 1',\n          children: [{\n            id: 3,\n            label: 'Level two 2-1',\n            children: [{\n              id: 4,\n              label: 'Level three 3-1-1'\n            }, {\n              id: 5,\n              label: 'Level three 3-1-2',\n              disabled: true\n            }]\n          }, {\n            id: 2,\n            label: 'Level two 2-2',\n            disabled: true,\n            children: [{\n              id: 6,\n              label: 'Level three 3-2-1'\n            }, {\n              id: 7,\n              label: 'Level three 3-2-2',\n              disabled: true\n            }]\n          }]\n        }],\n        defaultProps: {\n            children: 'children',\n            label: 'label',\n            disabled: 'disabled',\n        },\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Desplegado o seleccionado por defecto\nLos nodos pueden estar desplegados o seleccionados por defecto.\n\n:::demo Utilice `default-expanded-keys` y `default-checked-keys` para establecer los nodos desplegados y seleccionados respectivamente. Tenga en cuenta que para que funcione es necesario que tengan `node-key`. Su valor es el nombre de una clave en el objeto data, y el valor de la clave debe ser único en todo el árbol.\n```html\n<el-tree\n  :data=\"data\"\n  show-checkbox\n  node-key=\"id\"\n  :default-expanded-keys=\"[2, 3]\"\n  :default-checked-keys=\"[5]\"\n  :props=\"defaultProps\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          id: 1,\n          label: 'Level one 1',\n          children: [{\n            id: 4,\n            label: 'Level two 1-1',\n            children: [{\n              id: 9,\n              label: 'Level three 1-1-1'\n            }, {\n              id: 10,\n              label: 'Level three 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Level one 2',\n          children: [{\n            id: 5,\n            label: 'Level two 2-1'\n          }, {\n            id: 6,\n            label: 'Level two 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Level one 3',\n          children: [{\n            id: 7,\n            label: 'Level two 3-1'\n          }, {\n            id: 8,\n            label: 'Level two 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Seleccionando nodos\n\n:::demo Este ejemplo muestra como establecer y leer nodos seleccionados. Esto se puede hacer por nodos o por claves. Si lo hace por claves el atributo `node-key` es necesario.\n```html\n<el-tree\n  :data=\"data\"\n  show-checkbox\n  default-expand-all\n  node-key=\"id\"\n  ref=\"tree\"\n  highlight-current\n  :props=\"defaultProps\">\n</el-tree>\n\n<div class=\"buttons\">\n  <el-button @click=\"getCheckedNodes\">get by node</el-button>\n  <el-button @click=\"getCheckedKeys\">get by key</el-button>\n  <el-button @click=\"setCheckedNodes\">set by node</el-button>\n  <el-button @click=\"setCheckedKeys\">set by key</el-button>\n  <el-button @click=\"resetChecked\">reset</el-button>\n</div>\n\n<script>\n  export default {\n    methods: {\n      getCheckedNodes() {\n        console.log(this.$refs.tree.getCheckedNodes());\n      },\n      getCheckedKeys() {\n        console.log(this.$refs.tree.getCheckedKeys());\n      },\n      setCheckedNodes() {\n        this.$refs.tree.setCheckedNodes([{\n          id: 5,\n          label: 'Level two 2-1'\n        }, {\n          id: 9,\n          label: 'Level three 1-1-1'\n        }]);\n      },\n      setCheckedKeys() {\n        this.$refs.tree.setCheckedKeys([3]);\n      },\n      resetChecked() {\n        this.$refs.tree.setCheckedKeys([]);\n      }\n    },\n\n    data() {\n      return {\n        data: [{\n          id: 1,\n          label: 'Level one 1',\n          children: [{\n            id: 4,\n            label: 'Level two 1-1',\n            children: [{\n              id: 9,\n              label: 'Level three 1-1-1'\n            }, {\n              id: 10,\n              label: 'Level three 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Level one 2',\n          children: [{\n            id: 5,\n            label: 'Level two 2-1'\n          }, {\n            id: 6,\n            label: 'Level two 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Level one 3',\n          children: [{\n            id: 7,\n            label: 'Level two 3-1'\n          }, {\n            id: 8,\n            label: 'Level two 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Contenido personalizado en los nodos\nEl contenido de los nodos puede ser personalizado, así que puede añadir iconos y botones a su gusto.\n\n:::demo Hay dos maneras de personalizar la plantilla para los nodos de árbol: `render-content` y scoped slot. Utilice `render-content` para asignar una función de renderizado que devuelve el contenido del árbol de nodos. Mire la documentación de node para una introducción detallada a las funciones de renderizado. Si prefiere scoped slot, tendrá acceso a los `nodos` y `datos` en el ámbito de aplicación, representando el objeto TreeNode y los datos del nodo actual respectivamente. Tenga en cuenta que este ejemplo no puede ejecutarse en codepen.io ya que no soporta la sintaxis JSX. En un proyecto real `render-content` funcionará si las dependencias relevantes están configuradas correctamente.\n```html\n<div class=\"custom-tree-container\">\n  <div class=\"block\">\n    <p>Using render-content</p>\n    <el-tree\n      :data=\"data\"\n      show-checkbox\n      node-key=\"id\"\n      default-expand-all\n      :expand-on-click-node=\"false\"\n      :render-content=\"renderContent\">\n    </el-tree>\n  </div>\n  <div class=\"block\">\n    <p>Using scoped slot</p>\n    <el-tree\n      :data=\"data\"\n      show-checkbox\n      node-key=\"id\"\n      default-expand-all\n      :expand-on-click-node=\"false\">\n      <span class=\"custom-tree-node\" slot-scope=\"{ node, data }\">\n        <span>{{ node.label }}</span>\n        <span>\n          <el-button\n            type=\"text\"\n            size=\"mini\"\n            @click=\"() => append(data)\">\n            Append\n          </el-button>\n          <el-button\n            type=\"text\"\n            size=\"mini\"\n            @click=\"() => remove(node, data)\">\n            Delete\n          </el-button>\n        </span>\n      </span>\n    </el-tree>\n  </div>\n</div>\n\n<script>\n  let id = 1000;\n\n  export default {\n    data() {\n      const data = [{\n        id: 1,\n        label: 'Level one 1',\n        children: [{\n          id: 4,\n          label: 'Level two 1-1',\n          children: [{\n            id: 9,\n            label: 'Level three 1-1-1'\n          }, {\n            id: 10,\n            label: 'Level three 1-1-2'\n          }]\n        }]\n      }, {\n        id: 2,\n        label: 'Level one 2',\n        children: [{\n          id: 5,\n          label: 'Level two 2-1'\n        }, {\n          id: 6,\n          label: 'Level two 2-2'\n        }]\n      }, {\n        id: 3,\n        label: 'Level one 3',\n        children: [{\n          id: 7,\n          label: 'Level two 3-1'\n        }, {\n          id: 8,\n          label: 'Level two 3-2'\n        }]\n      }];\n      return {\n        data: JSON.parse(JSON.stringify(data)),\n        data: JSON.parse(JSON.stringify(data))\n      }\n    },\n\n    methods: {\n      append(data) {\n        const newChild = { id: id++, label: 'testtest', children: [] };\n        if (!data.children) {\n          this.$set(data, 'children', []);\n        }\n        data.children.push(newChild);\n      },\n\n      remove(node, data) {\n        const parent = node.parent;\n        const children = parent.data.children || parent.data;\n        const index = children.findIndex(d => d.id === data.id);\n        children.splice(index, 1);\n      },\n\n      renderContent(h, { node, data, store }) {\n        return (\n          <span class=\"custom-tree-node\">\n            <span>{node.label}</span>\n            <span>\n              <el-button size=\"mini\" type=\"text\" on-click={ () => this.append(data) }>Append</el-button>\n              <el-button size=\"mini\" type=\"text\" on-click={ () => this.remove(node, data) }>Delete</el-button>\n            </span>\n          </span>);\n      }\n    }\n  };\n</script>\n\n<style>\n  .custom-tree-node {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    font-size: 14px;\n    padding-right: 8px;\n  }\n</style>\n```\n:::\n\n### Filtrado de nodos\nLos nodos del árbol se pueden filtrar.\n\n:::demo Invoque el método `filter` de la instancia de Tree para filtrar los nodos. Su parámetro es la palabra de filtrado. Tenga en cuenta que para que funcione es necesario `filter-node-method`, y su valor el método de filtrado.\n```html\n<el-input\n  placeholder=\"Filter keyword\"\n  v-model=\"filterText\">\n</el-input>\n\n<el-tree\n  class=\"filter-tree\"\n  :data=\"data\"\n  :props=\"defaultProps\"\n  default-expand-all\n  :filter-node-method=\"filterNode\"\n  ref=\"tree\">\n</el-tree>\n\n<script>\n  export default {\n    watch: {\n      filterText(val) {\n        this.$refs.tree.filter(val);\n      }\n    },\n\n    methods: {\n      filterNode(value, data) {\n        if (!value) return true;\n        return data.label.indexOf(value) !== -1;\n      }\n    },\n\n    data() {\n      return {\n        filterText: '',\n        data: [{\n          id: 1,\n          label: 'Level one 1',\n          children: [{\n            id: 4,\n            label: 'Level two 1-1',\n            children: [{\n              id: 9,\n              label: 'Level three 1-1-1'\n            }, {\n              id: 10,\n              label: 'Level three 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Level one 2',\n          children: [{\n            id: 5,\n            label: 'Level two 2-1'\n          }, {\n            id: 6,\n            label: 'Level two 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Level one 3',\n          children: [{\n            id: 7,\n            label: 'Level two 3-1'\n          }, {\n            id: 8,\n            label: 'Level two 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Acordeón\n\nSolo puede ser expandido un nodo del mismo nivel a la vez.\n\n:::demo\n```html\n<el-tree\n  :data=\"data\"\n  :props=\"defaultProps\"\n  accordion\n  @node-click=\"handleNodeClick\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: 'Level one 1',\n          children: [{\n            label: 'Level two 1-1',\n            children: [{\n              label: 'Level three 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 2',\n          children: [{\n            label: 'Level two 2-1',\n            children: [{\n              label: 'Level three 2-1-1'\n            }]\n          }, {\n            label: 'Level two 2-2',\n            children: [{\n              label: 'Level three 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 3',\n          children: [{\n            label: 'Level two 3-1',\n            children: [{\n              label: 'Level three 3-1-1'\n            }]\n          }, {\n            label: 'Level two 3-2',\n            children: [{\n              label: 'Level three 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Draggable\n\nPuede arrastrar y soltar nodos de Tree añadiendo un atributo `draggable` .\n\n:::demo\n```html\n<el-tree\n  :data=\"data\"\n  node-key=\"id\"\n  default-expand-all\n  @node-drag-start=\"handleDragStart\"\n  @node-drag-enter=\"handleDragEnter\"\n  @node-drag-leave=\"handleDragLeave\"\n  @node-drag-over=\"handleDragOver\"\n  @node-drag-end=\"handleDragEnd\"\n  @node-drop=\"handleDrop\"\n  draggable\n  :allow-drop=\"allowDrop\"\n  :allow-drag=\"allowDrag\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: 'Level one 1',\n          children: [{\n            label: 'Level two 1-1',\n            children: [{\n              label: 'Level three 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 2',\n          children: [{\n            label: 'Level two 2-1',\n            children: [{\n              label: 'Level three 2-1-1'\n            }]\n          }, {\n            label: 'Level two 2-2',\n            children: [{\n              label: 'Level three 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Level one 3',\n          children: [{\n            label: 'Level two 3-1',\n            children: [{\n              label: 'Level three 3-1-1'\n            }]\n          }, {\n            label: 'Level two 3-2',\n            children: [{\n              label: 'Level three 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleDragStart(node, ev) {\n        console.log('drag start', node);\n      },\n      handleDragEnter(draggingNode, dropNode, ev) {\n        console.log('tree drag enter: ', dropNode.label);\n      },\n      handleDragLeave(draggingNode, dropNode, ev) {\n        console.log('tree drag leave: ', dropNode.label);\n      },\n      handleDragOver(draggingNode, dropNode, ev) {\n        console.log('tree drag over: ', dropNode.label);\n      },\n      handleDragEnd(draggingNode, dropNode, dropType, ev) {\n        console.log('tree drag end: ', dropNode && dropNode.label, dropType);\n      },\n      handleDrop(draggingNode, dropNode, dropType, ev) {\n        console.log('tree drop: ', dropNode.label, dropType);\n      },\n      allowDrop(draggingNode, dropNode, type) {\n        if (dropNode.data.label === 'Level two 3-1') {\n          return type !== 'inner';\n        } else {\n          return true;\n        }\n      },\n      allowDrag(draggingNode) {\n        return draggingNode.data.label.indexOf('Level three 3-1-1') === -1;\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Atributos\n| Atributo              | Descripción                              | Tipo                              | Valores aceptados | Por defecto |\n| --------------------- | ---------------------------------------- | --------------------------------- | ----------------- | ----------- |\n| data                  | Datos del árbol                          | array                             | —                 | —           |\n| empty-text            | Texto a mostrar cuando data es void      | string                            | —                 | —           |\n| node-key              | Identificador único en todo el árbol para los nodos | string                            | —                 | —           |\n| props                 | Opciones de configuración                | object                            | —                 | —           |\n| render-after-expand   | si se mostrarán los nodos hijo sólo después de que se desglose por primera vez un nodo padre | boolean                           | —                 | true        |\n| load                  | Método para cargar los datos de subárboles | function(node, resolve)           | —                 | —           |\n| render-content        | Función de renderizado para los nodos    | Function(h, { node, data, store } | —                 | —           |\n| highlight-current     | Si el nodo actual está resaltado         | boolean                           | —                 | false       |\n| default-expand-all    | Expandir todos los nodos por defecto     | boolean                           | —                 | false       |\n| expand-on-click-node  | Si expandir o contraer un nodo al pincharlo, si es false solo se hará al pinchar en la flecha | boolean | — | true |\n| check-on-click-node   | si marcar o desmarcar el nodo al hacer clic en el. Si es `false`, el nodo sólo se puede marcar o desmarcar haciendo clic en la casilla de verificación. | boolean | — | false |\n| auto-expand-parent    | Expandir un nodo padre si el hijo está seleccionado | boolean                           | —                 | true        |\n| default-expanded-keys | Array de claves de los nodos expandidos inicialmente | array                             | —                 | —           |\n| show-checkbox         | Si un nodo es seleccionable              | boolean                           | —                 | false       |\n| check-strictly        | El estado de selección de un nodo no afecta a sus padres o hijos, cuando `show-checkbox` es `true` | boolean                           | —                 | false       |\n| default-checked-keys  | Array con claves de los nodos seleccionados inicialmente | array                             | —                 | —           |\n| current-node-key      | la clave del nodo inicialmente seleccionado | string, number                       | —               | —       |\n| filter-node-method    | Esta función se ejecutará en cada nodo cuando se use el método filtrar, si devuelve `false` el nodo se oculta | Function(value, data, node)       | —                 | —           |\n| accordion             | Si solo un nodo de cada nivel puede expandirse a la vez | boolean                           | —                 | false       |\n| indent                | Indentación horizontal de los nodos en niveles adyacentes, en pixeles | number                            | —                 | 16          |\n| icon-class            | Icono del nodo del árbol de cliente                                                | string                            | -                 | -           |\n| lazy                  | si se trata de un nodo de hoja lazy load, utilizado con el atributo `load`  | boolean                     | —    | false |\n| draggable             | si se habilita la función de drag & drop en los nodos | boolean            | —    | false |\n| allow-drag            | esta función se ejecutará antes de arrastrar un nodo. si devuelve `false`, el nodo no puede ser arrastrado. | Function(nodo) | —  | —  |\n| allow-drop            | esta función se ejecutará al arrastrar y soltar un nodo. si devuelve false, el nodo arrastrando no se puede soltar en el nodo destino. `type` tiene tres valores posibles: 'prev' (insertar el nodo de arrastre antes del nodo de destino), 'inner' (insertar el nodo de arrastre en el nodo de destino) y 'next' (insertar el nodo de arrastre después del nodo de destino) | Function(Nodoquesearrastra, Nododestino, type) | —    | —     |\n\n### props\n| Atributo | Descripción                              | Tipo                          | Valores aceptados | Por defecto |\n| -------- | ---------------------------------------- | ----------------------------- | ----------------- | ----------- |\n| label    | Especifica que clave del objecto nodo se utilizará como label | string, function(data, node)  | —                 | —           |\n| children | Especifica que objeto del nodo se utiliza como subárbol | string | —                 | —           |\n| isLeaf   | Especifica si el nodo es una hoja, sólo funciona cuando lazy load está activado | boolean, function(datos, nodo) | —                 | —           |\n\n### Métodos\n`Tree` tiene los siguientes métodos, que devuelven el array de nodos seleccionados.\n\n| Método            | Descripción                              | Parámetros                               |\n| ----------------- | ---------------------------------------- | ---------------------------------------- |\n| filter            | Filtra los nodos del árbol, los nodos filtrados estarán ocultos | Acepta un parámetro que será usado como primer parámetro para filter-node-method |\n| updateKeyChildren | Asocia un nuevo dato al nodo, solo funciona si `node-key` está asignado | (key, data)Acepta dos parámetros: 1. clave del nodo 2. nuevo dato |\n| getCheckedNodes   | si el nodo puede ser seleccionado (`show-checkbox` es `true`), devuelve el array de nodos actualmente seleccionada. | (leafOnly, includeHalfChecked) Acepta dos parámetros de tipo booleano: 1. El valor por defecto es `false`. Si el parámetro es `true`, sólo devuelve el array de subnodos actualmente seleccionado. 2. El valor por defecto es `false`. Si el parámetro es `true`, el valor de retorno contiene nodos halfchecked. |\n| setCheckedNodes   | Establece algunos nodos como seleccionados, solo funciona cuando `node-key` está asignado | Un array de nodos a seleccionar          |\n| getCheckedKeys    | Si los nodos pueden ser seleccionados (`show-checkbox` es `true`), devuelve un array con las claves de los nodos seleccionados | (leafOnly) Acepta un booleano que por defecto es `false`. |\n| setCheckedKeys    | Establece algunos nodos como seleccionados, solo si `node-key` está asignado | (keys, leafOnly) Acepta dos parametros: 1. un array de claves 2. un booleano cuyo valor por defecto es `false`. Si el parámetro es `true`, solo devuelve los nodos seleccionados |\n| setChecked        | Establece si un nodo está seleccionado, solo funciona si `node-key` esta asignado | (key/data, checked, deep) Acepta tres parámetros: 1. la clave o dato del nodo a ser seleccionado 2. un booleano que indica si un nodo el nodo estará seleccionado 3. un booleanoque indica si se hará en profundidad |\n| getHalfCheckedNodes | Si el nodo puede ser seleccionado (`show-checkbox` es `true`), devuelve la mitad del array de nodos actualmente seleccionada. | - |\n| getHalfCheckedKeys | Si el nodo puede ser seleccionado (`show-checkbox` es `true`), devuelve la mitad del array de claves del nodo actualmente seleccionado. | - |\n| getCurrentKey     | devuelve la clave del nodo resaltado actualmente (null si no hay ninguno) | —                                        |\n| getCurrentNode    | devuelve los datos del nodo de resaltado (nulo si no hay ningún nodo resaltado) | —                                        |\n| setCurrentKey     | establece el nodo resaltado por la clave, solo funciona si `node-key` está asignado | (key) la clave del nodo a ser resaltado. Si es `null`, cancela los nodos actualmente resaltados |\n| setCurrentNode    | establece el nodo resaltado, solo funciona si `node-key` está asignado | (node) nodo a ser resaltado              |\n| getNode         | devuelve el nodo por el dato o la clave | (data) los datos o clave del nodo |\n| remove          | elimina un nodo, solo funciona si `node-key` está asignado  | (data) los datos del nodo o nodo a borrar |\n| append          | añadir un nodo hijo a un nodo determinado del árbol | (data, parentNode) 1. los datos del nodo hijo que se añadirán 2. los datos del nodo padre, clave o nodo |\n| insertBefore    | insertar un nodo antes de un nodo dado en el árbol | (data, refNode) 1. Datos del nodo que se insertarán 2. Datos del nodo de referencia, clave o nodo |\n| insertAfter     | insertar un nodo después de un nodo dado en el árbol | (data, refNode) 1. Datos del nodo que se insertarán 2. Datos del nodo de referencia, clave o nodo |\n\n### Eventos\n| Nombre del evento | Descripción                              | Parámetros                               |\n| ----------------- | ---------------------------------------- | ---------------------------------------- |\n| node-click        | se lanza cuando un nodo es pinchado      | tres parámetros: el objeto del nodo seleccionado, propiedad `node` de TreeNode y el TreeNode en si |\n| node-contextmenu     | se lanza cuando en un nodo se hace clic con el botón derecho | cuatro parámetros: evento, el objeto nodo sobre el que se hizo clic, la propiedad `node`  del TreeNode, el TreeNode en si mismo |\n| check-change      | se lanza cuando el estado de selección del nodo cambia | tres parámetros: objeto nodo que se corresponde con el que ha cambiado, booleano que dice si esta seleccionado, booleano que dice si el nodo tiene hijos seleccionados |\n| check   | se activa al hacer clic en la casilla de selección de un nodo | dos parámetros: objeto de nodo correspondiente al nodo que se marca/desmarca, objeto de estatus de árbol verificado que tiene cuatro puntales: checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys |\n| current-change    | cambia cuando el nodo actual cambia      | dos parámetros: objeto nodo que se corresponde al nodo actual y propiedad `node` del TreeNode |\n| node-expand       | se lanza cuando el nodo actual se abre   | tres parámetros: el objeto del nodo abierto, propiedad `node` de TreeNode y el TreeNode en si |\n| node-collapse     | se lanza cuando el nodo actual se cierra | tres parámetros: el objeto del nodo cerrado, propiedad `node` de TreeNode y el TreeNode en si |\n| node-drag-start | se activa cuando se inicia el arrastre | dos parámetros: el objeto del nodo que se arrastrara, evento. |\n| node-drag-enter | se desencadena cuando el nodo de arrastre entra en otro nodo | tres parámetros: objeto del nodo que se arrastra, objeto del nodo en el que entra, evento. |\n| node-drag-leave | se desencadena cuando el nodo de arrastre sale de un nodo | tres parámetros: objeto del nodo que se arrastra, objeto del nodo del cual se sale, evento. |\n| node-drag-over | se activa cuando se arrastra sobre un nodo (como el evento mouseover) | tres parámetros: objeto del nodo que se arrastra, objeto del nodo sobre el que esta el arrastre, evento. |\n| node-drag-end  | se activa cuando se termina de arrastrar | cuatro parámetros: objeto del nodo que se arrastra, objeto del nodo que corresponde al final del arrastre (puede ser `undefined` ), tipo de integración (antes (before), después (after), dentro (inner) ), evento. |\n| node-drop  | después de soltar el nodo de arrastre | cuatro parámetros: objeto del nodo que se esta arrastrando, objeto del nodo sobre el que se esta soltando, tipo de integración (antes (before), después (after), dentro (inner) ), evento. |\n\n### Scoped Slot\n| Nombre | Descripción |\n|------|--------|\n| — | Contenido personalizado para nodos de tree. El parámetro del scope es { node, data }. |\n"
  },
  {
    "path": "examples/docs/es/typography.md",
    "content": "<script>\n  import bus from '../../bus';\n  import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';\n  const varMap = [\n    '$--font-size-extra-large',\n    '$--font-size-large',\n    '$--font-size-medium',\n    '$--font-size-base',\n    '$--font-size-small',\n    '$--font-size-extra-small'\n  ];\n  const original = {\n    'font_size_extra_large': '20px',\n    'font_size_large': '18px',\n    'font_size_medium': '16px',\n    'font_size_base': '14px',\n    'font_size_small': '13px',\n    'font_size_extra_small': '12px'\n  }\n  export default {\n    created() {\n      bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);\n    },\n    mounted() {\n      this.setGlobal();\n    },\n    methods: {\n      tintColor(color, tint) {\n        return tintColor(color, tint);\n      },\n      setGlobal() {\n        if (window.userThemeConfig) {\n          this.global = window.userThemeConfig.global;\n        }\n      }\n    },\n    data() {\n      return {\n        global: {},\n        'font_size_extra_large': '',\n        'font_size_large': '',\n        'font_size_medium': '',\n        'font_size_base': '',\n        'font_size_small': '',\n        'font_size_extra_small': ''\n      }\n    },\n    watch: {\n      global: {\n        immediate: true,\n        handler(value) {\n          varMap.forEach((v) => {\n            const key = v.replace('$--', '').replace(/-/g, '_')\n            if (value[v]) {\n              this[key] = value[v]\n            } else {\n              this[key] = original[key]\n            }\n          });\n        }\n      }\n    },\n  }\n</script>\n\n## Tipografía\n\nCreamos una convención de fuentes para asegurar la mejor presentación en diferentes plataformas.\n\n### Fuente\n<div class=\"demo-term-box\">\n<img src=\"../../assets/images/term-pingfang.png\" alt=\"\">\n<img src=\"../../assets/images/term-hiragino.png\" alt=\"\">\n<img src=\"../../assets/images/term-microsoft.png\" alt=\"\">\n<img src=\"../../assets/images/term-sf.png\" alt=\"\">\n<img src=\"../../assets/images/term-helvetica.png\" alt=\"\">\n<img src=\"../../assets/images/term-arial.png\" alt=\"\">\n</div>\n\n### Convención de fuentes\n\n<table class=\"demo-typo-size\">\n  <tbody>\n  <tr\n    >\n      <td>Level</td>\n      <td>Font Size</td>\n      <td class=\"color-dark-light\">Demo</td>\n    </tr>\n    <tr\n    :style=\"{ fontSize: font_size_extra_small }\"\n    >\n      <td>Supplementary text</td>\n      <td class=\"color-dark-light\">{{font_size_extra_small}} Extra Small</td>\n      <td>Build with Element</td>\n    </tr>\n    <tr\n    :style=\"{ fontSize: font_size_small }\"\n    >\n      <td>Body (small)</td>\n      <td class=\"color-dark-light\">{{font_size_small}} Small</td>\n      <td>Build with Element</td>\n    </tr>\n    <tr\n    :style=\"{ fontSize: font_size_base }\"\n    >\n      <td>Body</td>\n      <td class=\"color-dark-light\">{{font_size_base}} Base</td>\n      <td>Build with Element</td>\n    </tr>\n    <tr\n    :style=\"{ fontSize: font_size_medium }\"\n    >\n      <td >Small Title</td>\n      <td class=\"color-dark-light\">{{font_size_medium}} Medium</td>\n      <td>Build with Element</td>\n    </tr>\n    <tr\n    :style=\"{ fontSize: font_size_large }\"\n    >\n      <td>Title</td>\n      <td class=\"color-dark-light\">{{font_size_large}} large</td>\n      <td>Build with Element</td>\n    </tr>\n    <tr\n    :style=\"{ fontSize: font_size_extra_large }\"\n    >\n      <td>Main Title</td>\n      <td class=\"color-dark-light\">{{font_size_extra_large}} Extra large</td>\n      <td>Build with Element</td>\n    </tr>\n  </tbody>\n</table>\n\n### Font Line Height\n\n<div>\n<img class=\"lineH-left\" src=\"~examples/assets/images/typography.png\" />\n<ul class=\"lineH-right\">\n<li>line-height:1 <span>No line height</span></li>\n<li>line-height:1.3 <span>Compact</span></li>\n<li>line-height:1.5 <span>Regular</span></li>\n<li>line-height:1.7 <span>Loose</span></li>\n</ul>\n</div>\n\n### Font-family\n\n```css\nfont-family: \"Helvetica Neue\",Helvetica,\"PingFang SC\",\"Hiragino Sans GB\",\"Microsoft YaHei\",\"微软雅黑\",Arial,sans-serif;\n```\n"
  },
  {
    "path": "examples/docs/es/upload.md",
    "content": "## Carga de archivos\n\nCarga archivos haciendo clic o arrastrándolos.\n\n### Clic para cargar archivos\n\n:::demo Personalice el tipo y texto del botón utilizando la propiedad `slot`. Defina las propiedades `limit` y `on-exceed` para limitar el número máximo de archivos a subir y especifique un método para cuando el límite ha sido excedido.\n```html\n<el-upload\n  class=\"upload-demo\"\n  action=\"https://jsonplaceholder.typicode.com/posts/\"\n  :on-preview=\"handlePreview\"\n  :on-remove=\"handleRemove\"\n  multiple\n  :limit=\"3\"\n  :on-exceed=\"handleExceed\"\n  :file-list=\"fileList\">\n  <el-button size=\"small\" type=\"primary\">Clic para subir archivo</el-button>\n  <div slot=\"tip\" class=\"el-upload__tip\">Solo archivos jpg/png con un tamaño menor de 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      },\n      handleExceed(files, fileList) {\n        this.$message.warning(`El límite es 3, haz seleccionado ${files.length} archivos esta vez, añade hasta ${files.length + fileList.length}`);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Cargar avatar de usuario\n\nUtilice el _hook_ `before-upload` para limitar el formato de archivo y su tamaño.\n\n:::demo\n```html\n<el-upload\n  class=\"avatar-uploader\"\n  action=\"https://jsonplaceholder.typicode.com/posts/\"\n  :show-file-list=\"false\"\n  :on-success=\"handleAvatarSuccess\"\n  :before-upload=\"beforeAvatarUpload\">\n  <img v-if=\"imageUrl\" :src=\"imageUrl\" class=\"avatar\">\n  <i v-else class=\"el-icon-plus avatar-uploader-icon\"></i>\n</el-upload>\n\n<style>\n  .avatar-uploader .el-upload {\n    border: 1px dashed #d9d9d9;\n    border-radius: 6px;\n    cursor: pointer;\n    position: relative;\n    overflow: hidden;\n  }\n  .avatar-uploader .el-upload:hover {\n    border-color: #409EFF;\n  }\n  .avatar-uploader-icon {\n    font-size: 28px;\n    color: #8c939d;\n    width: 178px;\n    height: 178px;\n    line-height: 178px;\n    text-align: center;\n  }\n  .avatar {\n    width: 178px;\n    height: 178px;\n    display: block;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        imageUrl: ''\n      };\n    },\n    methods: {\n      handleAvatarSuccess(res, file) {\n        this.imageUrl = URL.createObjectURL(file.raw);\n      },\n      beforeAvatarUpload(file) {\n        const isJPG = file.type === 'image/jpeg';\n        const isLt2M = file.size / 1024 / 1024 < 2;\n\n        if (!isJPG) {\n          this.$message.error('La imagen debe estar en formato JPG!');\n        }\n        if (!isLt2M) {\n          this.$message.error('La imagen excede los 2MB!');\n        }\n        return isJPG && isLt2M;\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Pared de fotografías\n\nUtilice la propiedad `list-type` para cambiar el estilo a un listado de archivos.\n\n:::demo\n```html\n<el-upload\n  action=\"https://jsonplaceholder.typicode.com/posts/\"\n  list-type=\"picture-card\"\n  :on-preview=\"handlePictureCardPreview\"\n  :on-remove=\"handleRemove\">\n  <i class=\"el-icon-plus\"></i>\n</el-upload>\n<el-dialog :visible.sync=\"dialogVisible\">\n  <img width=\"100%\" :src=\"dialogImageUrl\" alt=\"\">\n</el-dialog>\n<script>\n  export default {\n    data() {\n      return {\n        dialogImageUrl: '',\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePictureCardPreview(file) {\n        this.dialogImageUrl = file.url;\n        this.dialogVisible = true;\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Personalizar el template thumbnail\n\nUse el `scoped-slot`  para cambiar el template por defecto del thumbnail.\n\n:::demo\n```html\n<el-upload\n  action=\"#\"\n  list-type=\"picture-card\"\n  :auto-upload=\"false\">\n    <i slot=\"default\" class=\"el-icon-plus\"></i>\n    <div slot=\"file\" slot-scope=\"{file}\">\n      <img\n        class=\"el-upload-list__item-thumbnail\"\n        :src=\"file.url\" alt=\"\"\n      >\n      <span class=\"el-upload-list__item-actions\">\n        <span\n          class=\"el-upload-list__item-preview\"\n          @click=\"handlePictureCardPreview(file)\"\n        >\n          <i class=\"el-icon-zoom-in\"></i>\n        </span>\n        <span\n          v-if=\"!disabled\"\n          class=\"el-upload-list__item-delete\"\n          @click=\"handleDownload(file)\"\n        >\n          <i class=\"el-icon-download\"></i>\n        </span>\n        <span\n          v-if=\"!disabled\"\n          class=\"el-upload-list__item-delete\"\n          @click=\"handleRemove(file)\"\n        >\n          <i class=\"el-icon-delete\"></i>\n        </span>\n      </span>\n    </div>\n</el-upload>\n<el-dialog :visible.sync=\"dialogVisible\">\n  <img width=\"100%\" :src=\"dialogImageUrl\" alt=\"\">\n</el-dialog>\n<script>\n  export default {\n    data() {\n      return {\n        dialogImageUrl: '',\n        dialogVisible: false,\n        disabled: false\n      };\n    },\n    methods: {\n      handleRemove(file) {\n        console.log(file);\n      },\n      handlePictureCardPreview(file) {\n        this.dialogImageUrl = file.url;\n        this.dialogVisible = true;\n      },\n      handleDownload(file) {\n        console.log(file);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Lista de archivos con miniatura\n\n:::demo\n```html\n<el-upload\n  class=\"upload-demo\"\n  action=\"https://jsonplaceholder.typicode.com/posts/\"\n  :on-preview=\"handlePreview\"\n  :on-remove=\"handleRemove\"\n  :file-list=\"fileList\"\n  list-type=\"picture\">\n  <el-button size=\"small\" type=\"primary\">Clic para subir archivo</el-button>\n  <div slot=\"tip\" class=\"el-upload__tip\">Solo archivos jpg/png con un tamaño menor de 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Control de lista de archivos\n\nUtilice el _hook_ `on-change` para controlar la funcionalidad de la lista de archivos subidos.\n\n:::demo\n```html\n<el-upload\n  class=\"upload-demo\"\n  action=\"https://jsonplaceholder.typicode.com/posts/\"\n  :on-change=\"handleChange\"\n  :file-list=\"fileList\">\n  <el-button size=\"small\" type=\"primary\">Clic para subir archivo</el-button>\n  <div slot=\"tip\" class=\"el-upload__tip\">Solo archivos jpg/png con un tamaño menor de 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{\n          name: 'food.jpeg',\n          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'\n        }, {\n          name: 'food2.jpeg',\n          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'\n        }]\n      };\n    },\n    methods: {\n      handleChange(file, fileList) {\n        this.fileList = fileList.slice(-3);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Arrastrar para cargar archivo\n\nPuede arrastrar el archivo dentro de un área en especifico para cargar el archivo.\n\n:::demo\n```html\n<el-upload\n  class=\"upload-demo\"\n  drag\n  action=\"https://jsonplaceholder.typicode.com/posts/\"\n  :on-preview=\"handlePreview\"\n  :on-remove=\"handleRemove\"\n  :file-list=\"fileList\"\n  multiple>\n  <i class=\"el-icon-upload\"></i>\n  <div class=\"el-upload__text\">Suelta tu archivo aquí o <em>haz clic para cargar</em></div>\n  <div slot=\"tip\" class=\"el-upload__tip\">Solo archivos jpg/png con un tamaño menor de 500kb</div>\n</el-upload>\n```\n:::\n\n### Carga normal\n\n:::demo\n```html\n<el-upload\n  class=\"upload-demo\"\n  ref=\"upload\"\n  action=\"https://jsonplaceholder.typicode.com/posts/\"\n  :auto-upload=\"false\">\n  <el-button slot=\"trigger\" size=\"small\" type=\"primary\">Selecciona un archivo</el-button>\n  <el-button style=\"margin-left: 10px;\" size=\"small\" type=\"success\" @click=\"submitUpload\">Cargar al servidor</el-button>\n  <div slot=\"tip\" class=\"el-upload__tip\">Solo archivos jpg/png con un tamaño menor de 500kb</div>\n</el-upload>\n<script>\n  export default {\n    methods: {\n      submitUpload() {\n        this.$refs.upload.submit();\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Atributos\n| Atributo         | Descripción                                                  | Tipo                               | Valores aceptados         | Por defecto |\n| ---------------- | ------------------------------------------------------------ | ---------------------------------- | ------------------------- | ----------- |\n| action           | obligatorio, URL de la petición                              | string                             | —                         | —           |\n| headers          | cabeceras de la petición                                     | object                             | —                         | —           |\n| multiple         | especifica si se permite subir múltiples archivos            | boolean                            | —                         | —           |\n| data             | opciones adicionales de la petición                          | object                             | —                         | —           |\n| name             | nombre clave del archivo                                     | string                             | —                         | file        |\n| with-credentials | especifica si enviará cookies                                | boolean                            | —                         | false       |\n| show-file-list   | especifica si se debe mostrar la lista de archivos cargados  | boolean                            | —                         | true        |\n| drag             | se especifica si se activará el modo arrastrar y soltar      | boolean                            | —                         | false       |\n| accept           | acepta [tipos de archivos](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), puede no funcionar cuando `thumbnail-mode` esta en `true` | string                             | —                         | —           |\n| on-preview       | _hook_ lanzado al hacer clic en los archivos subidos         | function(file)                     | —                         | —           |\n| on-remove        | _hook_ lanzado cuando los archivos son eliminados            | function(file, fileList)           | —                         | —           |\n| on-success       | _hook_ lanzado cuando los archivos fueron cargados correctamente | function(response, file, fileList) | —                         | —           |\n| on-error         | _hook_ lanzado cuando han ocurrido algunos errores           | function(err, file, fileList)      | —                         | —           |\n| on-progress      | _hook_ lanzado cuando se produce algún progreso              | function(event, file, fileList)    | —                         | —           |\n| on-change        | _hook_ lanzado cuando el archivo seleccionado se carga correctamente o falla | function(file, fileList)           | —                         | —           |\n| before-upload    | _hook_ lanzado antes de que el archivo sea cargado. Si este devuelve `true` o `Promise` entonces será rechazado, la carga puede ser cancelada | function(file)                     | —                         | —           |\n| before-remove    | _hook_ lanzado antes de eliminar un archivo. Los parámetros son el archivo y la lista de archivos. Si se devuelve `false` o se devuelve una `Promise` y que luego es rechazada, la eliminación será abortada. | function(file, fileList)           | —                         | —           |\n| thumbnail-mode   | especifica si se mostrará la miniatura                       | boolean                            | —                         | false       |\n| file-list        | archivos cargados por defecto, por ejemplo,  [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array                              | —                         | []          |\n| list-type        | tipo de lista de archivos                                    | string                             | text/picture/picture-card | text        |\n| auto-upload      | se especifica si se auto cargan archivos                     | boolean                            | —                         | true        |\n| http-request     | sobrescribe el comportamiento por defecto de xhr, permitiendo implementar tu propia petición de carga de archivos | function                           | —                         | —           |\n| disabled         | especifica si se deshabilita la carga de archivos            | boolean                            | —                         | false       |\n| limit            | número máximo de cargas permitidas                           | number                             | —                         | —           |\n| on-exceed        | _hook_ lanzado cuando el límite ha sido excedido             | function(files, fileList)          | —                         | -           |\n\n### Slot\n| Nombre       | Descripción                   |\n| ------------ | ---------------------------------------- |\n| trigger | contenido que desencadena el diálogo de archivo |\n| tip | contenido de los tips |\n\n### Métodos\n| Nombre del método | Descripción                              | Parámetros      |\n| ----------------- | ---------------------------------------- | ------------------------- |\n| clearFiles        | limpia la lista de archivos cargados (este método no esta soportado en el _hook_ `before-upload`) | —                         |\n| abort             | cancela la petición de carga             | （ file: fileList's item ） |\n| submit            | La lista de archivos se sube manualmente |  —                         |\n"
  },
  {
    "path": "examples/docs/fr-FR/alert.md",
    "content": "## Alert\n\nAffiche des messages importants.\n\n### Usage\n\nLes Alertes sont des composants non superposés qui ne disparaissent pas automatiquement.\n\n:::demo Les Alertes peuvent être de 4 types différents, définit par `type`, le type par défaut étant `info`.\n\n```html\n<template>\n  <el-alert\n    title=\"succès\"\n    type=\"success\">\n  </el-alert>\n  <el-alert\n    title=\"information\"\n    type=\"info\">\n  </el-alert>\n  <el-alert\n    title=\"avertissement\"\n    type=\"warning\">\n  </el-alert>\n  <el-alert\n    title=\"erreur\"\n    type=\"error\">\n  </el-alert>\n</template>\n```\n:::\n\n### Thème\n\nAlert fournit deux thèmes différents, `light` et `dark`.\n\n:::demo Réglez `effect` pour changer le thème, le défaut étant `light`.\n```html\n<template>\n  <el-alert\n    title=\"succès\"\n    type=\"success\"\n    effect=\"dark\">\n  </el-alert>\n  <el-alert\n    title=\"info\"\n    type=\"info\"\n    effect=\"dark\">\n  </el-alert>\n  <el-alert\n    title=\"avertissement\"\n    type=\"warning\"\n    effect=\"dark\">\n  </el-alert>\n  <el-alert\n    title=\"erreur\"\n    type=\"error\"\n    effect=\"dark\">\n  </el-alert>\n</template>\n```\n:::\n\n### Bouton personnalisable\n\nPersonnalisez le bouton de fermeture avec du texte ou des symboles.\n\n:::demo Les alertes peuvent être configurées pour être fermables ou non. Le bouton de fermeture et les callbacks sont aussi personnalisables. L'attribut `closable` détermine si le composant peut être fermé ou non. Il accepte un `boolean`, la valeur par défaut étant `true`. Vous pouvez configurer l'attribut `close-text`pour remplacer la croix du bouton de fermeture. Assurez-vous que `close-text` soit une chaîne de caractères. L'évènement `close` se déclenche quand le composant est fermé.\n\n```html\n<template>\n  <el-alert\n    title=\"alerte non fermable\"\n    type=\"success\"\n    :closable=\"false\">\n  </el-alert>\n  <el-alert\n    title=\"texte de fermeture personnalisé\"\n    type=\"info\"\n    close-text=\"Gotcha\">\n  </el-alert>\n  <el-alert\n    title=\"alerte avec callback\"\n    type=\"warning\"\n    @close=\"hello\">\n  </el-alert>\n</template>\n\n<script>\n  export default {\n    methods: {\n      hello() {\n        alert('Hello World!');\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Avec icône\n\nAfficher une icône améliore la lisibilité.\n\n:::demo Ajouter l'attribut `show-icon` affiche une icône correspondant au type de l'alerte.\n\n```html\n<template>\n  <el-alert\n    title=\"succès\"\n    type=\"success\"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title=\"information\"\n    type=\"info\"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title=\"avertissement\"\n    type=\"warning\"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title=\"erreur\"\n    type=\"error\"\n    show-icon>\n  </el-alert>\n</template>\n```\n:::\n\n## Texte centré\n\nUtilisez l'attribut `center` pour centrer le texte.\n\n:::demo\n\n```html\n<template>\n  <el-alert\n    title=\"succès\"\n    type=\"success\"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title=\"information\"\n    type=\"info\"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title=\"avertissement\"\n    type=\"warning\"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title=\"erreur\"\n    type=\"error\"\n    center\n    show-icon>\n  </el-alert>\n</template>\n```\n:::\n\n### Description\n\nContient un message avec plus d'informations.\n\n:::demo A coté de l'attribut `title`, vous pouvez ajouter `description` pour décrire l'alerte avec plus de précisions. Les descriptions ne peuvent contenir que du texte, et les retours à la ligne sont automatiques.\n\n```html\n<template>\n  <el-alert\n    title=\"Titre\"\n    type=\"success\"\n    description=\"Ceci est la description.\">\n  </el-alert>\n</template>\n```\n:::\n\n### Icône et description\n\n:::demo Pour finir, voici un exemple utilisant à la fois l'icône et la description.\n\n```html\n<template>\n  <el-alert\n    title=\"succès\"\n    type=\"success\"\n    description=\"Plus de texte pour décrire.\"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title=\"information\"\n    type=\"info\"\n    description=\"Plus de texte pour décrire.\"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title=\"avertissement\"\n    type=\"warning\"\n    description=\"Plus de texte pour décrire.\"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title=\"erreur\"\n    type=\"error\"\n    description=\"Plus de texte pour décrire.\"\n    show-icon>\n  </el-alert>\n</template>\n```\n:::\n\n### Attributs\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| title     | Titre.         | string | — | — |\n| type | Type du composant. | string | success/warning/info/error | info |\n| description | Texte de description. Peut aussi être passé via le slot par défaut | string | — | — |\n| closable | Si peut être fermé ou non. | boolean | — | true |\n| center | Si le texte doit être centré ou non. | boolean | — | false |\n| close-text | Texte personnalisé pour le bouton de fermeture. | string | — | — |\n| show-icon | Si une icône s'affiche ou non. | boolean | — | false |\n| effect | Détermine le thème.  | string | light/dark | light |\n\n### Slot\n\n| Nom | Description |\n|------|--------|\n| — | la description |\n| title | Le contenu du titre. |\n\n### Évènements\n| Nom | Description | Paramètres |\n|---------- |-------- |---------- |\n| close | Se déclenche lorsque l'alerte est fermée. | — |\n"
  },
  {
    "path": "examples/docs/fr-FR/avatar.md",
    "content": "## Avatar avatar\n\nAvatars can be used to represent people or objects. It supports images, Icons, or characters.\nLes avatars peuvent être utilisés pour représenter des personnes ou des objets. Les images, icônes et les caractères sont supportés.\n\n### Basic\n\nutilisez les prop `shape` et` size` pour définir la forme et la taille de l'avatar\n\n:::demo\n```html\n<template>\n  <el-row class=\"demo-avatar demo-basic\">\n    <el-col :span=\"12\">\n      <div class=\"sub-title\">cercle</div>\n      <div class=\"demo-basic--circle\">\n        <div class=\"block\"><el-avatar :size=\"50\" :src=\"circleUrl\"></el-avatar></div>\n        <div class=\"block\" v-for=\"size in sizeList\" :key=\"size\">\n          <el-avatar :size=\"size\" :src=\"circleUrl\"></el-avatar>\n        </div>\n      </div>\n    </el-col>  \n    <el-col :span=\"12\">\n      <div class=\"sub-title\">carré</div>\n      <div class=\"demo-basic--circle\">\n        <div class=\"block\"><el-avatar shape=\"square\" :size=\"50\" :src=\"squareUrl\"></el-avatar></div>\n        <div class=\"block\" v-for=\"size in sizeList\" :key=\"size\">\n          <el-avatar shape=\"square\" :size=\"size\" :src=\"squareUrl\"></el-avatar>\n        </div>\n      </div>\n    </el-col>\n  </el-row>\n</template>\n<script>\n  export default {\n    data () {\n      return {\n        circleUrl: \"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png\",\n        squareUrl: \"https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png\",\n        sizeList: [\"large\", \"medium\", \"small\"]\n      }\n    }\n  }\n</script>\n\n```\n:::\n\n### Types\n\nLes images, icônes et les caractères sont supportés.\n\n:::demo\n```html\n<template>\n  <div class=\"demo-type\">\n    <div>\n      <el-avatar icon=\"el-icon-user-solid\"></el-avatar>\n    </div>\n    <div>\n      <el-avatar src=\"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png\"></el-avatar>\n    </div>\n    <div>\n      <el-avatar> user </el-avatar>\n    </div>\n  </div>\n</template>\n```\n:::\n\n### fallback en cas d'erreur de chargement d'image\n\nfallback en cas d'erreur de chargement d'image\n\n:::demo\n```html\n<template>\n  <div class=\"demo-type\">\n    <el-avatar :size=\"60\" src=\"https://empty\" @error=\"errorHandler\">\n      <img src=\"https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png\"/>\n      </el-avatar>\n  </div>\n</template>\n<script>\n  export default {\n    methods: {\n      errorHandler() {\n        return true\n      }\n    }\n  }\n</script>\n\n```\n:::\n\n### Comment l'image s'adapte à son conteneur\n\nDéfini comment l'image s'adapte à son conteneur, pareil que [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).\n\n:::demo\n```html\n<template>\n  <div class=\"demo-fit\">\n    <div class=\"block\" v-for=\"fit in fits\" :key=\"fit\">\n        <span class=\"title\">{{ fit }}</span>\n        <el-avatar shape=\"square\" :size=\"100\" :fit=\"fit\" :src=\"url\"></el-avatar>\n    </div>\n  </div>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],\n        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'\n      }\n    }\n  }\n</script>\n\n```\n:::\n\n### Attributes\n\n| Attribute      | Description          | Type      | Valeurs acceptées       | Default  |\n| ----------------- | -------------------------------- | --------------- | ------ | ------ |\n| icon              | Défini le type de représentation sur Icon, plus d’informations sur le composant Icon   | string          |        |        |\n| size              | Défini la taille de l'avatar                     | number/string | number / large / medium / small | large  |\n| shape             | Défini la forme de l'avatar  | string |    circle / square     |   circle  |\n| src               | L'adresse de l'image pour un avatar image | string |        |      |\n| srcSet            | Une liste d'un ou plusieurs string séparés par des virgules indiquant un ensemble de sources d'images possibles que le user agent peut utiliser | string |        |      |\n| alt               | Cet attribut définit une description textuelle alternative de l'image | string |        |      |\n| fit               | Défini comment l'image s'adapte à son conteneur | string |    fill / contain / cover / none / scale-down    |   cover   |\n\n### Évènements\n\n| Event Name | Description         | Paramètres  |\n| ------ | ------------------ | -------- |\n| error  | handler en cas d'erreur de chargement de l'image, renvoie false pour éviter le fallback par défaut |(e: Event)  |\n\n### Slot\n\n| Slot Name | Description |\n| default  | personnalise le contenu de l'avatar |\n"
  },
  {
    "path": "examples/docs/fr-FR/backtop.md",
    "content": "## Backtop\n\nUn bouton pour revenir en haut de la page\n\n### Basic usage\n\nScrollez en bas de la page pour voir le bouton en bas à droite.\n:::demo\n\n```html\n<template>\n  Scrollez en bas de la page pour voir le bouton en bas à droite.\n  <el-backtop target=\".page-component__scroll .el-scrollbar__wrap\"></el-backtop>\n</template>\n```\n\n:::\n\n### Customizations\n\nLa zone d'affichage est de 40px \\* 40px.\n:::demo\n\n```html\n<template>\n  Scrollez en bas de la page pour voir le bouton en bas à droite.\n  <el-backtop target=\".page-component__scroll .el-scrollbar__wrap\" :bottom=\"100\">\n    <div\n      style=\"{\n        height: 100%;\n        width: 100%;\n        background-color: #f2f5f6;\n        box-shadow: 0 0 6px rgba(0,0,0, .12);\n        text-align: center;\n        line-height: 40px;\n        color: #1989fa;\n      }\"\n    >\n      UP\n    </div>\n  </el-backtop>\n</template>\n```\n\n:::\n\n### Attributes\n\n| Attribut          | Description                                                         | Type            | Valeurs acceptées | Défaut |\n| ----------------- | ------------------------------------------------------------------- | --------------- | --------------- | ------- |\n| target            | La cible pour déclencher le scroll                                  | string          |                 |         |\n| visibility-height | Le bouton ne s'affichera pas tant que la hauteur de défilement n'aura pas atteint cette valeur. |  number |    | 200     |\n| right             | La distance du bord droit                                           | number |                 | 40      |\n| bottom            | La distance du bord gauche                                          | number |                 | 40      |\n\n### Events\n\n| Event Name | Description         | Parameters  |\n| ---------- | ------------------- | ----------- |\n| click      | Se déclenche quand l'utilisateur clique | click event |\n"
  },
  {
    "path": "examples/docs/fr-FR/badge.md",
    "content": "## Badge\n\nUn nombre ou un status affiché par-dessus un bouton ou un icône.\n\n### Usage\n\nAffiche le nombre de nouveaux messages.\n\n:::demo La quantité est définit par `value` qui accepte un `Number` ou un `String`.\n\n```html\n<el-badge :value=\"12\" class=\"item\">\n  <el-button size=\"small\">Commentaires</el-button>\n</el-badge>\n<el-badge :value=\"3\" class=\"item\">\n  <el-button size=\"small\">Réponses</el-button>\n</el-badge>\n<el-badge :value=\"1\" class=\"item\" type=\"primary\">\n  <el-button size=\"small\">Commentaires</el-button>\n</el-badge>\n<el-badge :value=\"2\" class=\"item\" type=\"warning\">\n  <el-button size=\"small\">Réponses</el-button>\n</el-badge>\n\n<el-dropdown trigger=\"click\">\n  <span class=\"el-dropdown-link\">\n    Cliquez<i class=\"el-icon-caret-bottom el-icon--right\"></i>\n  </span>\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item class=\"clearfix\">\n      Commentaires\n      <el-badge class=\"mark\" :value=\"12\" />\n    </el-dropdown-item>\n    <el-dropdown-item class=\"clearfix\">\n      Réponses\n      <el-badge class=\"mark\" :value=\"3\" />\n    </el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n```\n:::\n\n### Valeur maximale\n\nVous pouvez configurer la valeur maximale.\n\n:::demo La valeur maximale est définit par `max` qui accepte un `Number`. Ceci ne marche qui si `value` est également un `Number`.\n\n```html\n<el-badge :value=\"200\" :max=\"99\" class=\"item\">\n  <el-button size=\"small\">Commentaires</el-button>\n</el-badge>\n<el-badge :value=\"100\" :max=\"10\" class=\"item\">\n  <el-button size=\"small\">Réponses</el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n```\n:::\n\n### Configuration\n\nAffiche du texte autre que des nombres.\n\n:::demo Quand `value` est un `String`, il affiche un texte personnalisé.\n\n```html\n<el-badge value=\"new\" class=\"item\">\n  <el-button size=\"small\">Commentaires</el-button>\n</el-badge>\n<el-badge value=\"hot\" class=\"item\">\n  <el-button size=\"small\">Réponses</el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n```\n:::\n\n### Point rouge\n\nUtilisez un point rouge pour signaler du contenu devant être remarqué.\n\n:::demo Utilisez l'attribut `is-dot` qui est un `Boolean`.\n\n```html\n<el-badge is-dot class=\"item\">Requète</el-badge>\n<el-badge is-dot class=\"item\">\n  <el-button class=\"share-button\" icon=\"el-icon-share\" type=\"primary\"></el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n```\n:::\n\n### Attributs\n\n| Attribut     | Description     | Type            | Valeurs acceptées       | Défaut |\n|-------------  |---------------- |---------------- |---------------------- |-------- |\n| value         | Valeur affichée.   | string, number  |          —            |    —    |\n| max           |  Valeur maximale, affiche '{max}+' quand elle est dépassée. Ne marche que si `value` est un `Number`.   | number  |         —              |     —    |\n| is-dot        | Affiche un point rouge. | boolean   |    —           |  false  |\n| hidden        | Cache le badge.    | boolean         |          —            |  false  |\n| type          | Type du bouton.     | string          | primary / success / warning / danger / info |   —  |\n"
  },
  {
    "path": "examples/docs/fr-FR/border.md",
    "content": "<script>\n  import bus from '../../bus';\n  import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';\n  const varMap = {\n    '$--box-shadow-light': 'boxShadowLight',\n    '$--box-shadow-base': 'boxShadowBase',\n    '$--border-radius-base': 'borderRadiusBase',\n    '$--border-radius-small': 'borderRadiusSmall'\n  };\n  const original = {\n    boxShadowLight: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',\n    boxShadowBase: '0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)',\n    borderRadiusBase: '4px',\n    borderRadiusSmall: '2px'\n  }\n  export default {\n    created() {\n      bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);\n    },\n    mounted() {\n      this.setGlobal();\n    },\n    methods: {\n      setGlobal() {\n        if (window.userThemeConfig) {\n          this.global = window.userThemeConfig.global;\n        }\n      }\n    },\n    data() {\n      return {\n        global: {},\n        boxShadowLight: '',\n        boxShadowBase: '',\n        borderRadiusBase: '',\n        borderRadiusSmall: ''\n      }\n    },\n    watch: {\n      global: {\n        immediate: true,\n        handler(value) {\n          Object.keys(varMap).forEach((c) => {\n            if (value[c]) {\n              this[varMap[c]] = value[c]\n            } else {\n              this[varMap[c]] = original[varMap[c]]\n            }\n          });\n        }\n      }\n    }\n  }\n</script>\n\n## Bordure\n\nNous normalisons l'apparence des bordures qui peuvent être utilisées pour les boutons, les cartes, les pop-ups et d'autres composants.\n\n### Bordure\n\nIl y a plusieurs styles de bordure que vous pouvez choisir.\n\n<table class=\"demo-border\">\n  <tbody>\n    <tr>\n      <td class=\"text\">Nom</td>\n      <td class=\"text\">Épaisseur</td>\n      <td class=\"line\">Demo</td>\n    </tr>\n    <tr>\n      <td class=\"text\">Solid</td>\n      <td class=\"text\">1px</td>\n      <td class=\"line\">\n        <div></div>\n      </td>\n    </tr>\n    <tr>\n      <td class=\"text\">Dashed</td>\n      <td class=\"text\">2px</td>\n      <td class=\"line\">\n        <div class=\"dashed\"></div>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n### Radius\n\nIl y a plusieurs styles de radius que vous pouvez choisir.\n\n<el-row :gutter=\"12\" class=\"demo-radius\">\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"title\">Pas de radius</div>\n    <div class=\"value\">border-radius: 0px</div>\n    <div class=\"radius\"></div>\n  </el-col>\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"title\">Petit radius</div>\n    <div class=\"value\">border-radius: {{borderRadiusSmall}}</div>\n    <div\n      class=\"radius\"\n      :style=\"{ borderRadius: borderRadiusSmall }\"\n    ></div>\n  </el-col>\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"title\">Grand radius</div>\n    <div class=\"value\">border-radius: {{borderRadiusBase}}</div>\n    <div\n      class=\"radius\"\n      :style=\"{ borderRadius: borderRadiusBase }\"\n    ></div>\n  </el-col>\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"title\">Radius rond</div>\n    <div class=\"value\">border-radius: 30px</div>\n    <div class=\"radius radius-30\"></div>\n  </el-col>\n</el-row>\n\n### Ombres\n\nIl y a plusieurs styles d'ombres que vous pouvez choisir.\n\n<div\nclass=\"demo-shadow\"\n:style=\"{ boxShadow: boxShadowBase }\"\n></div>\n<span class=\"demo-shadow-text\">Ombre de base, box-shadow: {{boxShadowBase}}</span>\n\n<div\nclass=\"demo-shadow\"\n:style=\"{ boxShadow: boxShadowLight }\"\n></div>\n<span class=\"demo-shadow-text\">Ombre légère, box-shadow: {{boxShadowLight}}</span>\n"
  },
  {
    "path": "examples/docs/fr-FR/breadcrumb.md",
    "content": "## Breadcrumb\n\nAffiche le chemin de la page actuelle, afin de pouvoir naviguer plus facilement.\n\n### Usage\n\n\n:::demo Dans `el-breadcrumb`, chaque `el-breadcrumb-item` est un tag représentant chaque niveau depuis la page d'accueil. Ce Composant possède un attribut de type `String` appelé `separator` qui détermine le séparateur. Sa valeur par défaut est '/'.\n\n```html\n<el-breadcrumb separator=\"/\">\n  <el-breadcrumb-item :to=\"{ path: '/' }\">Accueil</el-breadcrumb-item>\n  <el-breadcrumb-item><a href=\"/\">Gestion promotions</a></el-breadcrumb-item>\n  <el-breadcrumb-item>Liste promotions</el-breadcrumb-item>\n  <el-breadcrumb-item>Détail promotion</el-breadcrumb-item>\n</el-breadcrumb>\n```\n:::\n\n### Icône de séparation\n\n:::demo Configurez `separator-class` pour utiliser `iconfont` en tant que séparateur. Cela remplacera `separator`.\n\n```html\n<el-breadcrumb separator-class=\"el-icon-arrow-right\">\n  <el-breadcrumb-item :to=\"{ path: '/' }\">Accueil</el-breadcrumb-item>\n  <el-breadcrumb-item>Gestion promotions</el-breadcrumb-item>\n  <el-breadcrumb-item>Liste promotions</el-breadcrumb-item>\n  <el-breadcrumb-item>Détail promotion</el-breadcrumb-item>\n</el-breadcrumb>\n```\n:::\n\n### Attributs de Breadcrumb\n| Attributs      | Description          | Type      | Valeurs acceptées            | Défaut|\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| separator | Caractère de séparation | string | — | / |\n| separator-class | Classe de l'icône de séparation | string | — | - |\n\n### Attributs de Breadcrumb Item\n| Attributs      | Description          | Type      | Valeurs acceptées            | Défaut|\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| to | Route cible du lien, identique au `to` de `vue-router`. | string/object | — | — |\n| replace | Si `true`, la navigation ne laissera pas d'historique. | boolean | — | false |\n"
  },
  {
    "path": "examples/docs/fr-FR/button.md",
    "content": "## Bouton\n\nBouton communément utilisé.\n\n### Usage\n\n:::demo Utilisez `type`, `plain`, `round` et `circle` pour définir le style du bouton.\n\n```html\n<el-row>\n  <el-button>Défaut</el-button>\n  <el-button type=\"primary\">Primary</el-button>\n  <el-button type=\"success\">Success</el-button>\n  <el-button type=\"info\">Info</el-button>\n  <el-button type=\"warning\">Warning</el-button>\n  <el-button type=\"danger\">Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain>Plein</el-button>\n  <el-button type=\"primary\" plain>Primary</el-button>\n  <el-button type=\"success\" plain>Success</el-button>\n  <el-button type=\"info\" plain>Info</el-button>\n  <el-button type=\"warning\" plain>Warning</el-button>\n  <el-button type=\"danger\" plain>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button round>Arrondi</el-button>\n  <el-button type=\"primary\" round>Primary</el-button>\n  <el-button type=\"success\" round>Success</el-button>\n  <el-button type=\"info\" round>Info</el-button>\n  <el-button type=\"warning\" round>Warning</el-button>\n  <el-button type=\"danger\" round>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button icon=\"el-icon-search\" circle></el-button>\n  <el-button type=\"primary\" icon=\"el-icon-edit\" circle></el-button>\n  <el-button type=\"success\" icon=\"el-icon-check\" circle></el-button>\n  <el-button type=\"info\" icon=\"el-icon-message\" circle></el-button>\n  <el-button type=\"warning\" icon=\"el-icon-star-off\" circle></el-button>\n  <el-button type=\"danger\" icon=\"el-icon-delete\" circle></el-button>\n</el-row>\n```\n:::\n\n### Bouton désactivé\n\nL'attribut `disabled` détermine si le bouton est désactivé.\n\n:::demo Utilisez l'attribut `disabled` pour déterminer si un bouton est désactivé ou non. Il accepte un `Boolean`.\n\n```html\n<el-row>\n  <el-button disabled>Défaut</el-button>\n  <el-button type=\"primary\" disabled>Principal</el-button>\n  <el-button type=\"success\" disabled>Succès</el-button>\n  <el-button type=\"info\" disabled>Info</el-button>\n  <el-button type=\"warning\" disabled>Attention</el-button>\n  <el-button type=\"danger\" disabled>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain disabled>Plein</el-button>\n  <el-button type=\"primary\" plain disabled>Principal</el-button>\n  <el-button type=\"success\" plain disabled>Succès</el-button>\n  <el-button type=\"info\" plain disabled>Info</el-button>\n  <el-button type=\"warning\" plain disabled>Attention</el-button>\n  <el-button type=\"danger\" plain disabled>Danger</el-button>\n</el-row>\n```\n:::\n\n### Bouton texte\n\nBouton sans bordure ni fond.\n\n:::demo\n```html\n<el-button type=\"text\">Bouton texte</el-button>\n<el-button type=\"text\" disabled>Bouton texte</el-button>\n```\n:::\n\n### Icône\n\nUtilisez des icônes pour ajouter plus de sens aux boutons. Vous pouvez utiliser uniquement l'icône pour économiser de l'espace, ou bien l'utiliser avec du texte.\n\n:::demo Utilisez l'attribut `icon` pour ajouter une icône. Vous pourrez trouver la liste des icônes dans le composant Icon d'Element. Ajouter des icônes sur le coté droit du texte est possible grâce à la balise `<i>`. Des icônes personnalisées peuvent également être utilisées.\n\n```html\n<el-button type=\"primary\" icon=\"el-icon-edit\"></el-button>\n<el-button type=\"primary\" icon=\"el-icon-share\"></el-button>\n<el-button type=\"primary\" icon=\"el-icon-delete\"></el-button>\n<el-button type=\"primary\" icon=\"el-icon-search\">Recherche</el-button>\n<el-button type=\"primary\">Upload<i class=\"el-icon-upload el-icon-right\"></i></el-button>\n```\n:::\n\n### Groupes de boutons\n\nAffiche un groupe de bouton. Peut être utilisé pour grouper un ensemble d'opérations similaires.\n\n:::demo Utilisez la balise `<el-button-group>` pour grouper vos boutons.\n\n```html\n<el-button-group>\n  <el-button type=\"primary\" icon=\"el-icon-arrow-left\">Page précédente</el-button>\n  <el-button type=\"primary\">Page suivante<i class=\"el-icon-arrow-right el-icon-right\"></i></el-button>\n</el-button-group>\n<el-button-group>\n  <el-button type=\"primary\" icon=\"el-icon-edit\"></el-button>\n  <el-button type=\"primary\" icon=\"el-icon-share\"></el-button>\n  <el-button type=\"primary\" icon=\"el-icon-delete\"></el-button>\n</el-button-group>\n```\n:::\n\n### Bouton en chargement\n\nCliquez sur le bouton pour charger des données et il affichera un état de chargement.\n\n:::demo Configurez l'attribut `loading` à `true` pour afficher un état de chargement.\n\n```html\n<el-button type=\"primary\" :loading=\"true\">Chargement</el-button>\n```\n:::\n\n### Tailles\n\nEn plus de la taille par défaut, le composant Button fournit trois tailles supplémentaires pour différents scénarios.\n\n:::demo Utilisez l'attribut `size` pour choisir d'autres tailles parmi `medium`, `small` ou `mini`.\n\n```html\n<el-row>\n  <el-button>Défaut</el-button>\n  <el-button size=\"medium\">Medium</el-button>\n  <el-button size=\"small\">Small</el-button>\n  <el-button size=\"mini\">Mini</el-button>\n</el-row>\n<el-row>\n  <el-button round>Défaut</el-button>\n  <el-button size=\"medium\" round>Medium</el-button>\n  <el-button size=\"small\" round>Small</el-button>\n  <el-button size=\"mini\" round>Mini</el-button>\n</el-row>\n```\n:::\n\n### Attributs\n| Attribut      | Description    | Type      | Valeurs acceptées       | Défaut   |\n|---------- |-------- |---------- |-------------  |-------- |\n| size     | Taille du bouton.   | string  |   medium / small / mini            |    —     |\n| type     | Type du bouton.   | string    |   primary / success / warning / danger / info / text |     —    |\n| plain     | Détermine si le bouton est plein.   | boolean    | — | false   |\n| round     | Détermine si le bouton est arrondi.   | boolean    | — | false   |\n| circle     | Détermine si le bouton est un cercle.   | boolean    | — | false   |\n| loading   | Détermine si l'état de chargement est affiché.   | boolean    | — | false   |\n| disabled  | Désactive le bouton    | boolean   | —   | false   |\n| icon  | Classe de l'icône. | string   |  —  |  —  |\n| autofocus  | Identique à l'attribut natif `autofocus` | boolean   |  —  |  false  |\n| native-type | Identique à l'attribut natif `type` | string | button / submit / reset | button |\n"
  },
  {
    "path": "examples/docs/fr-FR/calendar.md",
    "content": "## Calendrier\n\nAffiche un calendrier.\n\n### Usage basique\n\n:::demo Réglez `value` pour spécifier le mois à afficher. Si `value` n'est pas spécifiée, le mois actuel sera affiché. `value` supporte le two-way binding.\n```html\n<el-calendar v-model=\"value\">\n</el-calendar>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: new Date()\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Contenu personnalisé\n\n:::demo Personnalisez le contenu du calendrier en utilisant le `scoped-slot` appelé `dateCell`. Dans ce `scoped-slot` vous aurez accès au paramètres date (date de la cellule courante), data (incluant les attributs type, isSelected et day). Pour plus d'informations, référez-vous à la documentation ci-dessous.\n```html\n<el-calendar>\n  <!-- Use 2.5 slot syntax. If you use Vue 2.6, please use new slot syntax-->\n  <template\n    slot=\"dateCell\"\n    slot-scope=\"{date, data}\">\n    <p :class=\"data.isSelected ? 'is-selected' : ''\">\n      {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}\n    </p>\n  </template>\n</el-calendar>\n<style>\n  .is-selected {\n    color: #1989FA;\n  }\n</style>\n```\n:::\n\n### Intervalle\n\n:::demo Utilisez l'attribut `range` pour afficher un intervalle particulier. Le début doit être un lundi et la fin un dimanche, l'intervalle ne pouvant excéder deux mois.\n```html\n<el-calendar :range=\"['2019-03-04', '2019-03-24']\">\n</el-calendar>\n```\n:::\n\n### Attributs\n\n| Attribut          | Description   | Type      | Valeurs acceptées     | Défaut   |\n|------------------ |-------------- |---------- |---------------------- |--------- |\n| value / v-model   | Valeur liée.  | Date/string/number | —            | —        |\n| range             | Intervalle de dates, début et fin inclus. Start time must be start day of week, end time must be end day of week, the time span cannot exceed two months. | Array     | —           | —      |\n| first-day-of-week | fisrt day of week| Number | 1 to 7                |  1       |\n\n### Slot dateCell\n\n| Attribut       | Description   | Type      | Valeurs acceptées       | Défaut  |\n|-----------------|-------------- |---------- |---------------------- |--------- |\n| date            | Date de la cellule courante.  | Date      | —                     | —        |\n| data            | { type, isSelected, day }. `type` indique le mois de la date courante, les valeurs prev-month, current-month et next-month pouvant être utilisées; `isSelected` indique si la date est sélectionnée; `day` est la date formattée en yyyy-MM-dd.    | Object      | —           | —      |\n"
  },
  {
    "path": "examples/docs/fr-FR/card.md",
    "content": "## Card\n\nConteneur intégrant des informations.\n\n### Usage\n\nLe composant Card comprend un titre, un contenu et des opérations.\n\n:::demo Card est composé d'un `header` et d'un `body`. `header` est optionnel et son contenu nécessite l'utilisation d'un slot.\n```html\n<el-card class=\"box-card\">\n  <div slot=\"header\" class=\"clearfix\">\n    <span>Card name</span>\n    <el-button style=\"float: right; padding: 3px 0\" type=\"text\">Bouton</el-button>\n  </div>\n  <div v-for=\"o in 4\" :key=\"o\" class=\"text item\">\n    {{'List item ' + o }}\n  </div>\n</el-card>\n\n<style>\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    margin-bottom: 18px;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n    display: table;\n    content: \"\";\n  }\n  .clearfix:after {\n    clear: both\n  }\n\n  .box-card {\n    width: 480px;\n  }\n</style>\n```\n:::\n\n### Card simple\n\nLe header peut être omis.\n\n:::demo\n```html\n<el-card class=\"box-card\">\n  <div v-for=\"o in 4\" :key=\"o\" class=\"text item\">\n    {{'List item ' + o }}\n  </div>\n</el-card>\n\n<style>\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    padding: 18px 0;\n  }\n\n  .box-card {\n    width: 480px;\n  }\n</style>\n```\n:::\n\n### Images\n\nAffichez un contenu plus riche grâce à la configuration.\n\n:::demo L'attribut `body-style` définit le style CSS du `body`. Cet exemple utilise aussi `el-col` pour la mise en page.\n```html\n<el-row>\n  <el-col :span=\"8\" v-for=\"(o, index) in 2\" :key=\"o\" :offset=\"index > 0 ? 2 : 0\">\n    <el-card :body-style=\"{ padding: '0px' }\">\n      <img src=\"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png\" class=\"image\">\n      <div style=\"padding: 14px;\">\n        <span>Yummy hamburger</span>\n        <div class=\"bottom clearfix\">\n          <time class=\"time\">{{ currentDate }}</time>\n          <el-button type=\"text\" class=\"button\">Operating</el-button>\n        </div>\n      </div>\n    </el-card>\n  </el-col>\n</el-row>\n\n<style>\n  .time {\n    font-size: 13px;\n    color: #999;\n  }\n\n  .bottom {\n    margin-top: 13px;\n    line-height: 12px;\n  }\n\n  .button {\n    padding: 0;\n    float: right;\n  }\n\n  .image {\n    width: 100%;\n    display: block;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n      display: table;\n      content: \"\";\n  }\n\n  .clearfix:after {\n      clear: both\n  }\n</style>\n\n<script>\nexport default {\n  data() {\n    return {\n      currentDate: new Date()\n    };\n  }\n}\n</script>\n```\n:::\n\n### Ombres\n\nVous pouvez définir quand l'ombre des Cards doivent apparaître.\n\n:::demo L'attribut `shadow` détermine quand l'ombre doit apparaître. Les valeurs possibles sont `always`, `hover` ou `never`.\n```html\n<el-row :gutter=\"12\">\n  <el-col :span=\"8\">\n    <el-card shadow=\"always\">\n      Always\n    </el-card>\n  </el-col>\n  <el-col :span=\"8\">\n    <el-card shadow=\"hover\">\n      Hover\n    </el-card>\n  </el-col>\n  <el-col :span=\"8\">\n    <el-card shadow=\"never\">\n      Never\n    </el-card>\n  </el-col>\n</el-row>\n```\n:::\n\n### Attributs\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------- |---------- |-------------  |-------- |\n| header | Titre de la Card. Accepte aussi un template DOM passé via `slot#header`. | string| — | — |\n| body-style | Style CSS du body. | object| — | { padding: '20px' } |\n| shadow | Quand l'ombre doit apparaître | string | always / hover / never | always |\n"
  },
  {
    "path": "examples/docs/fr-FR/carousel.md",
    "content": "## Carousel\n\nAffiche en boucle une série d'images ou de textes dans un espace limité.\n\n### Usage\n\n:::demo Utilisez `el-carousel` avec `el-carousel-item`, et vous obtiendrez un carrousel. Le contenu de chaque slide est complètement personnalisable, il vous suffit juste de le placer à l'intérieur de la balise `el-carousel-item`. Par défaut le carrousel défile quand la souris passe sur un indicateur. Réglez `trigger` sur `click` et le carrousel défilera uniquement quand vous cliquerez sur l'indicateur.\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">Défile quand la souris passe sur l'indicateur (défaut)</span>\n    <el-carousel height=\"150px\">\n      <el-carousel-item v-for=\"item in 4\" :key=\"item\">\n        <h3 class=\"small\">{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Défile quand on clique sur l'indicateur</span>\n    <el-carousel trigger=\"click\" height=\"150px\">\n      <el-carousel-item v-for=\"item in 4\" :key=\"item\">\n        <h3 class=\"small\">{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 150px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n```\n:::\n\n### Indicateurs\n\nLes indicateurs peuvent être affichés en dehors du carrousel.\n\n:::demo L'attribut `indicator-position` détermine où les indicateurs sont localisés. Par défaut ils se trouvent à l'intérieur du carrousel, régler `indicator-position` sur `outside` les affichera à l'extérieur; régler `indicator-position` sur `none` les cachera totalement.\n```html\n<template>\n  <el-carousel indicator-position=\"outside\">\n    <el-carousel-item v-for=\"item in 4\" :key=\"item\">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 18px;\n    opacity: 0.75;\n    line-height: 300px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n```\n:::\n\n### Flèches\n\nVous pouvez définir quand les flèches doivent apparaître.\n\n:::demo L'attribut `arrow` détermine quand les flèches sont affichées. Par défaut elles apparaissent quand la souris passe sur le carrousel. Réglez `arrow` sur `always` ou `never` affiche ou cache les flèches de manière permanente.\n```html\n<template>\n  <el-carousel :interval=\"5000\" arrow=\"always\">\n    <el-carousel-item v-for=\"item in 4\" :key=\"item\">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 18px;\n    opacity: 0.75;\n    line-height: 300px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n```\n:::\n\n### Mode carte\n\nQuand la page est suffisamment large mais avec une hauteur limitée, vous pouvez activer le mode carte.\n\n:::demo Réglez `type` sur `card` pour activer le mode carte. Hormis l'apparence, la principale différence par rapport au mode commun est que cliquer sur une des slides se trouvant de chaque coté fait directement défiler le carrousel.\n```html\n<template>\n  <el-carousel :interval=\"4000\" type=\"card\" height=\"200px\">\n    <el-carousel-item v-for=\"item in 6\" :key=\"item\">\n      <h3 class=\"medium\">{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 200px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n```\n:::\n\nPar défaut, `direction` est `horizontal`. Vous pouvez faire en sorte que le défilement soit vertical en mettant `direction` à `vertical`.\n\n:::demo\n```html\n<template>\n  <el-carousel height=\"200px\" direction=\"vertical\" :autoplay=\"false\">\n    <el-carousel-item v-for=\"item in 4\" :key=\"item\">\n      <h3 class=\"medium\">{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 200px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n```\n:::\n\n### Attributs du Carrousel\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| height | Hauteur du carrousel. | string | — | — |\n| initial-index | Index de la slide initiale (commence à 0). | number | — | 0 |\n| trigger | Comment les indicateurs sont déclenchés | string | hover/click | hover |\n| autoplay | Si le carrousel défile automatiquement | boolean | — | true |\n| interval | Intervalle pour le défilement automatique, en millisecondes. | number | — | 3000 |\n| indicator-position | Position des indicateurs. | string | outside/none | — |\n| arrow | Détermine quand les flèches sont affichées. | string | always/hover/never | hover |\n| type | Type du carrousel. | string | card | — |\n| loop | Affiche les éléments en boucle. | boolean | - | true |\n| direction | Détermine la direction du défilement. | string | horizontal/vertical | horizontal |\n\n### Évènements du Carrousel\n| Nom | Description | Paramètres |\n|---------|---------|---------|\n| change | Se déclenche quand la slide active défile. | Index de la nouvelle slide, index de l'ancienne slide |\n\n### Méthodes du Carrousel\n| Mathode | Description | Paramètres |\n|---------- |-------------- | -- |\n| setActiveItem | Défile manuellement vers une slide. | index de la slide d'arrivée, à partir de 0; ou bien le `name` du `el-carousel-item` correspondant|\n| prev | Défile vers la slide précédente. | — |\n| next | Défile vers la slide suivante. | — |\n\n### Attributs du Carrousel-Item\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| name | Nom de l'item, peut être utilisé dans `setActiveItem`. | string | — | — |\n| label | Texte affiché au niveau de l'indicateur correspondant.| string | — | — |\n"
  },
  {
    "path": "examples/docs/fr-FR/cascader.md",
    "content": "## Cascader\n\nSi les options ont une structure hiérarchique claire, Le composant Cascader peut être utilisé pour les afficher et les sélectionner.\n\n### Basic usage\n\nIl y a deux manières d'étendres les options enfants.\n\n:::demo Assigner l'attribut `options` à un tableau d'options fournit un composant Cascader. L'attribut `props.expandTrigger` définit comment les options enfants sont étendues.\n```html\n<div class=\"block\">\n  <span class=\"demonstration\">Les options enfants se développent lorsque vous cliquez dessus (par défaut)</span>\n  <el-cascader\n    v-model=\"value\"\n    :options=\"options\"\n    @change=\"handleChange\"></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Les options enfants se développent lorsqu'elles sont survolées</span>\n  <el-cascader\n    v-model=\"value\"\n    :options=\"options\"\n    :props=\"{ expandTrigger: 'hover' }\"\n    @change=\"handleChange\"></el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: [],\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Disabled option\n\nDésactivez une option en définissant un champ `disabled` dans l'objet d'option.\n\n:::demo Dans cet exemple, le premier élément du tableau `options` a un champ` disabled: true`, il est donc désactivé. Par défaut, Cascader vérifie le champ `disabled` dans chaque objet option. Si vous utilisez un autre nom de champ pour indiquer si une option est désactivée, vous pouvez l'affecter dans l'attribut `props.disabled` (voir le tableau des API ci-dessous pour plus de détails). Et bien sûr, les noms de champs `value`,` label` et `children` peuvent également être personnalisés de la même manière.\n```html\n<el-cascader :options=\"options\"></el-cascader>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          disabled: true,\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Clearable\n\nDéfinissez l'attribut `clearable` pour` el-cascader` et une icône claire apparaîtra une fois sélectionnée et survolée\n\n:::demo\n```html\n<el-cascader :options=\"options\" clearable></el-cascader>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Display only the last level\n\nL'entrée peut afficher uniquement le dernier niveau au lieu de tous les niveaux.\n\n:::demo L'attribut `show-all-levels` définit si tous les niveaux sont affichés. S'il est `false`, seul le dernier niveau est affiché.\n```html\n<el-cascader :options=\"options\" :show-all-levels=\"false\"></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Multiple Selection\n\nDéfinissez `props.multiple = true` pour utiliser la sélection multiple.\n\n:::demo Lors de l'utilisation de la sélection multiple, toutes les balises sélectionnées seront affichées par défaut. Vous pouvez définir `collapse-tags = true` pour replier les balises sélectionnées.\n```html\n<div class=\"block\">\n  <span class=\"demonstration\">Afficher toutes les balises (par défaut)</span>\n  <el-cascader\n    :options=\"options\"\n    :props=\"props\"\n    clearable></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Réduire les balises</span>\n  <el-cascader\n    :options=\"options\"\n    :props=\"props\"\n    collapse-tags\n    clearable></el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        props: { multiple: true },\n        options: [{\n          value: 1,\n          label: 'Asia',\n          children: [{\n            value: 2,\n            label: 'China',\n            children: [\n              { value: 3, label: 'Beijing' },\n              { value: 4, label: 'Shanghai' },\n              { value: 5, label: 'Hangzhou' }\n            ]\n          }, {\n            value: 6,\n            label: 'Japan',\n            children: [\n              { value: 7, label: 'Tokyo' },\n              { value: 8, label: 'Osaka' },\n              { value: 9, label: 'Kyoto' }\n            ]\n          }, {\n            value: 10,\n            label: 'Korea',\n            children: [\n              { value: 11, label: 'Seoul' },\n              { value: 12, label: 'Busan' },\n              { value: 13, label: 'Taegu' }\n            ]\n          }]\n        }, {\n          value: 14,\n          label: 'Europe',\n          children: [{\n            value: 15,\n            label: 'France',\n            children: [\n              { value: 16, label: 'Paris' },\n              { value: 17, label: 'Marseille' },\n              { value: 18, label: 'Lyon' }\n            ]\n          }, {\n            value: 19,\n            label: 'UK',\n            children: [\n              { value: 20, label: 'London' },\n              { value: 21, label: 'Birmingham' },\n              { value: 22, label: 'Manchester' }\n            ]\n          }]\n        }, {\n          value: 23,\n          label: 'North America',\n          children: [{\n            value: 24,\n            label: 'US',\n            children: [\n              { value: 25, label: 'New York' },\n              { value: 26, label: 'Los Angeles' },\n              { value: 27, label: 'Washington' }\n            ]\n          }, {\n            value: 28,\n            label: 'Canada',\n            children: [\n              { value: 29, label: 'Toronto' },\n              { value: 30, label: 'Montreal' },\n              { value: 31, label: 'Ottawa' }\n            ]\n          }]\n        }]\n      };\n    }\n  };\n</script>\n```\n:::\n\n\n### Select any level of options\n\nDans la sélection simple, seuls les noeuds terminaux peuvent être coché, et dans la sélection multiple, coché les noeuds parents cochera les noeuds terminaux. Lorsque cette fonctionnalité est activée, les noeuds parents et enfants peuvent être dissociés et vous pouvez sélectionner n’importe quel niveau d’options.\n\n:::demo Définissez `props.checkStrictly = true` pour que l'état vérifié d'un noeud n'affecte pas ses noeuds parents et ses noeuds enfants. Vous pouvez ensuite sélectionner n'importe quel niveau d'options.\n```html\n<div class=\"block\">\n  <span class=\"demonstration\">Sélectionnez n'importe quel niveau d'options (Sélection unique)</span>\n  <el-cascader\n    :options=\"options\"\n    :props=\"{ checkStrictly: true }\"\n    clearable></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Sélectionnez n'importe quel niveau d'options (sélection multiple)</span>\n  <el-cascader\n    :options=\"options\"\n    :props=\"{ multiple: true, checkStrictly: true }\"\n    clearable></el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Dynamic loading\n\nCharge dynamiquement ses noeuds enfants lorsque un noeud est sélectionné.\n\n:::demo Définissez `lazy = true` pour utiliser le chargement dynamique. Vous devez Spécifier comment charger la source de données avec` lazyload`. Il existe deux paramètres de `lazyload`, le premier paramètre` node` est le noeud sur lequel l'utilisateur a cliqué, et `resolution` est un callback indiquant que le chargement est terminé et qu'il doit être appelé. Pour afficher le statut du noeud plus précisément, vous pouvez ajouter un champ `leaf` (modifiable par` props.leaf`) pour indiquer s'il s'agit d'un noeud feuille. Sinon, il sera déduit par ses noeuds enfants.\n```html\n<el-cascader :props=\"props\"></el-cascader>\n\n<script>\n  let id = 0;\n\n  export default {\n    data() {\n      return {\n        props: {\n          lazy: true,\n          lazyLoad (node, resolve) {\n            const { level } = node;\n            setTimeout(() => {\n              const nodes = Array.from({ length: level + 1 })\n                .map(item => ({\n                  value: ++id,\n                  label: `Option - ${id}`,\n                  leaf: level >= 2\n                }));\n              // Appelez le callback `resolve` pour renvoyer les données des noeuds enfants et indiquer que le chargement est terminé.\n              resolve(nodes);\n            }, 1000);\n          }\n        }\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Filterable\n\nRechercher et sélectionner des options avec un mot clé.\n\n:::demo Ajouter `filterable` à` el-cascader` permet le filtrage. Cascader recherchera les noeuds dont l'étiquette ou l'étiquette du parent (selon `show-all-levels`) inclut le mot-clé input. Bien sûr, vous pouvez personnaliser la logique de recherche en utilisant `filter-method` qui accepte une fonction, le premier paramètre est `node`, le second est `keyword` et doit renvoyer une valeur booléenne indiquant si le résultat est positif.\n```html\n<div class=\"block\">\n  <span class=\"demonstration\">Filtrable (Sélection unique)</span>\n  <el-cascader\n    placeholder=\"Try searchingL Guide\"\n    :options=\"options\"\n    filterable></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Filtrable (Sélection multiple)</span>\n  <el-cascader\n    placeholder=\"Try searchingL Guide\"\n    :options=\"options\"\n    :props=\"{ multiple: true }\"\n    filterable></el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Custom option content\n\nVous pouvez personnaliser le contenu du noeud cascader.\n\n:::demo Vous pouvez personnaliser le contenu du noeud cascader avec `scoped slot`. Vous aurez accès à `node` et` data` dans la portée, correspondant respectivement à l'objet Node et aux données de noeud du noeud actuel.\n```html\n<el-cascader :options=\"options\">\n  <template slot-scope=\"{ node, data }\">\n    <span>{{ data.label }}</span>\n    <span v-if=\"!node.isLeaf\"> ({{ data.children.length }}) </span>\n  </template>\n</el-cascader>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Cascader panel\n\n`CascaderPanel` est le composant principal de` Cascader`. Il comporte diverses fonctionnalités telles que la sélection unique, la sélection multiple, le chargement dynamique, etc.\n\n:::demo Tout comme `el-cascader`, vous pouvez définir des options alternatives par `options`, et activer d'autres fonctionnalités par `props`, voir le formulaire d'API ci-dessous pour plus de détails.\n```html\n<el-cascader-panel :options=\"options\"></el-cascader-panel>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Cascader Attributs\n| Attribut | Description | Type  | Valeurs acceptées | Défaut |\n|---------- |-------- |---------- |-------------  |-------- |\n| value / v-model | Valeur de liaison | - | — | — |\n| options | Les données des options，la clé de `value` et `label` peuvent être personnalisées par `Props`.| array | — | — |\n| props | Options de configuration, voir le tableau suivant. | object | — | — |\n| size | Taille de l'entrée | string | medium / small / mini | — |\n| placeholder | Placeholder de l'input | string | — | Select |\n| disabled | Si Cascader est désactivé | boolean | — | false |\n| clearable | Si la valeur sélectionnée peut être effacée | boolean | — | false |\n| show-all-levels | Afficher ou non tous les niveaux de la valeur sélectionnée dans l'entrée | boolean | — | true |\n| collapse-tags | Réduire ou non les balises en mode de sélection multiple | boolean | - | false |\n| separator | Option label separator | string | — | ' / ' |\n| filterable | Si les options peuvent être recherchées | boolean | — | — |\n| filter-method | Personnaliser la logique de recherche, le premier paramètre est `node`, le second est `keyword`, et doit renvoyer une valeur booléenne indiquant si le résultat est positif. | function(node, keyword) | - | - |\n| debounce | Délai de réponse lors de la saisie du mot clé de filtre, en millisecondes | number | — | 300 |\n| before-filter | Hook fonction avant de filtrer avec la valeur à filtrer en tant que paramètre. Si `false` est renvoyé ou si une `Promise` est renvoyée puis rejetée, le filtrage sera annulé | function(value) | — | — |\n| popper-class | Nom de classe personnalisé pour la liste déroulante de Cascader   | string | —  | — |\n\n### Cascader Events\n| Event Name | Description | Paramètres |\n|---------- |-------- |---------- |\n| change | Se déclenche lorsque la valeur de liaison change | value |\n| expand-change | Se déclenche lorsque l'option d'agrandissement change | an array of the expanding node's parent nodes |\n| blur | Se déclenche lorsque Cascader blurs | (event: Event) |\n| focus | Se déclenche lorsque Cascader à le focus | (event: Event) |\n| visible-change | Se déclenche lorsque le menu déroulant apparaît / disparaît | vrai quand il apparaît, et faux sinon |\n| remove-tag | Se déclenche lors de la suppression d'une balise en mode de sélection multiple | la valeur de la balise qui est supprimée |\n\n### Cascader Methods\n| Method Name | Description | Parameters |\n| ---- | ---- | ---- |\n| getCheckedNodes | get an array of currently selected node | (leafOnly) whether only return the leaf checked nodes, default is `false` |\n\n### Cascader Slots\n| Slot Name | Description |\n|---------|-------------|\n| - | Le contenu personnalisé du noeud cascader, le paramètre est { node, data }, qui sont respectivement les objets de noeud et les données de noeud actuels. |\n| empty  | Contenu quand il n'y a pas d'options correspondantes. |\n\n### CascaderPanel Attributes\n| Attribut | Description | Type  | Valeurs acceptées | Défaut |\n|---------- |-------- |---------- |-------------  |-------- |\n| value / v-model | Baleur de liaison | - | — | — |\n| options | Les données des options, la clé de `value` et `label` peuvent être personnalisées par `Props`.| array | — | — |\n| props | Options de configuration, voir le tableau suivant. | object | — | — |\n\n### CascaderPanel Events\n| Event Name | Description | Paramètres |\n|---------- |-------- |---------- |\n| change | Se déclenche lorsque la valeur de liaison change | value |\n| expand-change | Se déclenche lorsque l'option d'agrandissement change | an array of the expanding node's parent nodes |\n\n### CascaderPanel Methods\n| Method Name | Description | Parameters |\n| ---- | ---- | ---- |\n| getCheckedNodes | get an array of currently selected node | (leafOnly) whether only return the leaf checked nodes, default is `false` |\n| clearCheckedNodes | clear checked nodes | - |\n\n### CascaderPanel Slots\n| Slot Name | Description |\n|---------|-------------|\n| - | Le contenu personnalisé du noeud cascader, le paramètre est { node, data }, qui sont respectivement les objets de noeud et les données de noeud actuels. |\n\n### Props\n| Attribute | Description | Type  | Valeurs acceptées | Défaut |\n| -------- | ----------------- | ------ | ------ | ------ |\n| expandTrigger | Mode de déclenchement des options de développement | string | click / hover | 'click' |\n| multiple | Si la sélection multiple est activée | boolean | - | false |\n| checkStrictly | Si l'état coché d'un noeud n'affecte pas ses noeuds parents et enfants | boolean | - | false |\n| emitPath | Lorsque les noeuds cochés changent, émet ou non un tableau du chemin du noeud. Si la valeur est false, n'émet que la valeur du noeud. | boolean | - | true |\n| lazy | S'il faut charger dynamiquement les noeuds enfants, utiliser avec l'attribut `lazyload` | boolean | - | false |\n| lazyLoad | Méthode de chargement de données de noeuds enfants, ne fonctionne que lorsque `lazy` est vrai | function(node, resolve) | - | - |\n| value    | Spécifie quelle clé de l'objet noeud est utilisée comme valeur du noeud | string | — | 'value' |\n| label    | Spécifie quelle clé de l'objet noeud est utilisée comme label du noeud | string | — | 'label' |\n| children | Spécifie quelle clé de l'objet noeud est utilisée en tant qu'enfant du noeud | string | — | 'children' |\n| disabled | Spécifie quelle clé de l'objet noeud est utilisée comme noeud désactivé | string | — | 'disabled' |\n| leaf     | Spécifie quelle clé de l'objet est noeud utilisée comme champ feuille du noeud | string | — | 'leaf' |\n"
  },
  {
    "path": "examples/docs/fr-FR/checkbox.md",
    "content": "## Checkbox\n\nUn groupe d'options à choix multiples.\n\n### Usage\n\nCheckbox peut être utilisé seul pour switcher entre deux états.\n\n:::demo Définissez `v-model` (variable liée) dans `el-checkbox`. La valeur par défaut est un `Boolean` pour une seule `checkbox` et devient `true` quand elle est sélectionnée. Le contenu à l'intérieur de la balise `el-checkbox` deviendra le label du bouton de la checkbox.\n\n```html\n<template>\n  <!-- `checked` should be true or false -->\n  <el-checkbox v-model=\"checked\">Option</el-checkbox>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        checked: true\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Désactivation\n\nLa checkbox peut être désactivée.\n\n:::demo Ajouter l'attribut `disabled`.\n\n```html\n<template>\n  <el-checkbox v-model=\"checked1\" disabled>Option</el-checkbox>\n  <el-checkbox v-model=\"checked2\" disabled>Option</el-checkbox>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        checked1: false,\n        checked2: true\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Checkbox groupées\n\nUtile pour grouper des checkbox, indiquant si une option est sélectionnée en vérifiant la case en question.\n\n:::demo L'élément `checkbox-group` peut gérer plusieurs checkbox d'un groupe en utilisant `v-model`, qui sera un `Array`. Dans l'élément `el-checkbox`, `label` est la valeur de la checkbox. S'il n'y a aucun contenu dans la balise, `label` sera également la description de la checkbox. `label` correspond aussi aux valeurs des éléments dans le tableau. Il est sélectionné si la valeur spécifiée existe dans le tableau, et vice-versa.\n\n```html\n<template>\n  <el-checkbox-group v-model=\"checkList\">\n    <el-checkbox label=\"Option A\"></el-checkbox>\n    <el-checkbox label=\"Option B\"></el-checkbox>\n    <el-checkbox label=\"Option C\"></el-checkbox>\n    <el-checkbox label=\"Désactivée\" disabled></el-checkbox>\n    <el-checkbox label=\"Sélectionnée et désactivée\" disabled></el-checkbox>\n  </el-checkbox-group>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        checkList: ['selected and disabled','Option A']\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Indéterminée\n\nLa propriété `indeterminate` permet de réaliser un effet \"Sélectionner tout\".\n\n:::demo\n\n```html\n<template>\n  <el-checkbox :indeterminate=\"isIndeterminate\" v-model=\"checkAll\" @change=\"handleCheckAllChange\">Sélectionner tout</el-checkbox>\n  <div style=\"margin: 15px 0;\"></div>\n  <el-checkbox-group v-model=\"checkedCities\" @change=\"handleCheckedCitiesChange\">\n    <el-checkbox v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n<script>\n  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n  export default {\n    data() {\n      return {\n        checkAll: false,\n        checkedCities: ['Shanghai', 'Beijing'],\n        cities: cityOptions,\n        isIndeterminate: true\n      };\n    },\n    methods: {\n      handleCheckAllChange(val) {\n        this.checkedCities = val ? cityOptions : [];\n        this.isIndeterminate = false;\n      },\n      handleCheckedCitiesChange(value) {\n        let checkedCount = value.length;\n        this.checkAll = checkedCount === this.cities.length;\n        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Minimum / Maximum d'éléments sélectionnés\n\nLes propriétés `min` et `max` permettent de limiter la quantité d'éléments sélectionnés.\n\n:::demo\n\n```html\n<template>\n  <el-checkbox-group\n    v-model=\"checkedCities\"\n    :min=\"1\"\n    :max=\"2\">\n    <el-checkbox v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n<script>\n  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n  export default {\n    data() {\n      return {\n        checkedCities: ['Shanghai', 'Beijing'],\n        cities: cityOptions\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Style bouton\n\nDes checkbox avec une apparence de bouton.\n\n:::demo Il vous suffit de changer `el-checkbox` en `el-checkbox-button`. Il existe aussi un attribut `size`.\n```html\n<template>\n  <div>\n    <el-checkbox-group v-model=\"checkboxGroup1\">\n      <el-checkbox-button v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-checkbox-group v-model=\"checkboxGroup2\" size=\"medium\">\n      <el-checkbox-button v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-checkbox-group v-model=\"checkboxGroup3\" size=\"small\">\n      <el-checkbox-button v-for=\"city in cities\" :label=\"city\" :disabled=\"city === 'Beijing'\" :key=\"city\">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-checkbox-group v-model=\"checkboxGroup4\" size=\"mini\" disabled>\n      <el-checkbox-button v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n</template>\n<script>\n  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n\n  export default {\n    data () {\n      return {\n        checkboxGroup1: ['Shanghai'],\n        checkboxGroup2: ['Shanghai'],\n        checkboxGroup3: ['Shanghai'],\n        checkboxGroup4: ['Shanghai'],\n        cities: cityOptions\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Bordures\n\n:::demo L'attribut `border` ajoute une bordure aux checkbox.\n```html\n<template>\n  <div>\n    <el-checkbox v-model=\"checked1\" label=\"Option1\" border></el-checkbox>\n    <el-checkbox v-model=\"checked2\" label=\"Option2\" border></el-checkbox>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-checkbox v-model=\"checked3\" label=\"Option1\" border size=\"medium\"></el-checkbox>\n    <el-checkbox v-model=\"checked4\" label=\"Option2\" border size=\"medium\"></el-checkbox>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-checkbox-group v-model=\"checkboxGroup1\" size=\"small\">\n      <el-checkbox label=\"Option1\" border></el-checkbox>\n      <el-checkbox label=\"Option2\" border disabled></el-checkbox>\n    </el-checkbox-group>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-checkbox-group v-model=\"checkboxGroup2\" size=\"mini\" disabled>\n      <el-checkbox label=\"Option1\" border></el-checkbox>\n      <el-checkbox label=\"Option2\" border></el-checkbox>\n    </el-checkbox-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        checked1: true,\n        checked2: false,\n        checked3: false,\n        checked4: true,\n        checkboxGroup1: [],\n        checkboxGroup2: []\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Attributs Checkbox\n| Attribut      | Description         | Type    | Options                         | Défaut|\n|---------- |-------- |---------- |-------------  |-------- |\n| value / v-model | La valeur liée. | string / number / boolean | — | — |\n| label     | Valeur de la checkbox quand utilisée dans un `checkbox-group`.   | string / number / boolean   |       —        |     —    |\n| true-label | Valeur de la checkbox si cochée.   | string / number    |       —        |     —    |\n| false-label | Valeur de la checkbox si non cochée.   | string / number    |      —         |     —    |\n| disabled  | Désactive la checkbox.   | boolean   |  — | false   |\n| border  | Ajoute une bordure à la checkbox.  | boolean   | — | false   |\n| size  | taille de la checkbox, ne marche que si `border` est 'true'  | string  | medium / small / mini | — |\n| name | Attribut 'name' natif. | string    |      —         |     —    |\n| checked  | Si la checkbox est cochée.   | boolean   |  — | false   |\n| indeterminate  | Identique à `indeterminate` dans les checkbox natives. | boolean   |  — | false   |\n\n### Évènements Checkbox\n| Nom | Description | Paramètres |\n|---------- |-------- |---------- |\n| change  | Se déclenche quand la valeur change. | La nouvelle valeur |\n\n### Attributs Checkbox-group\n| Attribut      | Description         | Type    | Options                         | Défaut|\n|---------- |-------- |---------- |-------------  |-------- |\n| value / v-model | La valeur liée. | array | — | — |\n|size | Taille des checkbox-boutons ou des checkbox avec bordure. | string | medium / small / mini | — |\n| disabled  | Si les checkbox imbriquées sont désactivées. | boolean   | — | false   |\n| min     | Nombre minimum de checkbox cochées.   | number    |       —        |     —    |\n| max     | Nombre maximum de checkbox cochées.   | number    |       —        |     —    |\n|text-color | Couleur de police quand le bouton est actif. | string   | — | #ffffff   |\n|fill  | Couleur de la bordure et du fond quand le bouton est actif. | string   | — | #409EFF   |\n\n### Évènements Checkbox-group\n| Nom | Description | Paramètres |\n|---------- |-------- |---------- |\n| change  | Se déclenche quand la valeur change. | La nouvelle valeur |\n\n### Attributs Checkbox-button\n| Attribut      | Description         | Type    | Options                         | Défaut|\n|---------- |-------- |---------- |-------------  |-------- |\n| label     | Valeur de la checkbox quand utilisée dans un `checkbox-group` | string / number / boolean  |       —        |     —    |\n| true-label | Valeur de la checkbox si cochée. | string / number | — |     —    |\n| false-label | Valeur de la checkbox si non cochée. | string / number    |      —         |     —    |\n| disabled  | Si la checkbox est désactivée. | boolean   |  — | false   |\n| name | Attribut 'name' natif. | string    |      —         |     —    |\n| checked  | Si la checkbox est cochée. | boolean   |  — | false   |\n"
  },
  {
    "path": "examples/docs/fr-FR/collapse.md",
    "content": "## Collapse\n\nUtilisez Collapse pour stocker du contenu.\n\n### Usage\n\nVous pouvez agrandir plusieurs panneaux.\n\n:::demo\n```html\n<el-collapse v-model=\"activeNames\" @change=\"handleChange\">\n  <el-collapse-item title=\"Cohérence\" name=\"1\">\n    <div>Cohérence avec la vraie vie: en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs;</div>\n    <div>Cohérence au sein de l'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title=\"Feedback\" name=\"2\">\n    <div>Retour d'expérience: permets aux utilisateurs de percevoir clairement leurs opérations par le biais d'animations et d'effets interactifs.</div>\n    <div>Retour visuel: reflète l'état actuel de la page via le réarrangement ou la mise à jour des éléments.</div>\n  </el-collapse-item>\n  <el-collapse-item title=\"Efficacité\" name=\"3\">\n    <div>Simplifier le processus: garde chaque opération simple et intuitive.;</div>\n    <div>Clair et défini: énonce clairement ses intentions afin que l'utilisateur puisse comprendre et prendre une décision rapidement;</div>\n    <div>Facile à identifier: l'interface devrait être simple et facile d'accès, afin que les utilisateurs n'ai pas d'efforts de mémorisation à faire.</div>\n  </el-collapse-item>\n  <el-collapse-item title=\"Controllabilité\" name=\"4\">\n    <div>Prise de décision: possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs;</div>\n    <div>Contrôle des conséquences: les utilisateurs devraient pouvoir contrôler l'exécution de leurs opérations, y compris l'annulation et la suppression des opérations courantes.</div>\n  </el-collapse-item>\n</el-collapse>\n<script>\n  export default {\n    data() {\n      return {\n        activeNames: ['1']\n      };\n    },\n    methods: {\n      handleChange(val) {\n        console.log(val);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Accordéon\n\nEn mode accordéon, un seul panneau peut être ouvert à la fois.\n\n:::demo Utilisez l'attribut `accordion` pour activer le mode accordéon.\n```html\n<el-collapse v-model=\"activeName\" accordion>\n    <el-collapse-item title=\"Cohérence\" name=\"1\">\n      <div>Cohérence avec la vraie vie: en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs;</div>\n      <div>Cohérence au sein de l'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.</div>\n    </el-collapse-item>\n    <el-collapse-item title=\"Feedback\" name=\"2\">\n      <div>Retour d'expèrience: permets aux utilisateurs de percevoir clairement leur opérations par le biais d'animations et d'effets interactifs.</div>\n      <div>Retour visuel: reflète l'état actuel de la page via le réarrangement ou la mise à jour des éléments.</div>\n    </el-collapse-item>\n    <el-collapse-item title=\"Efficacité\" name=\"3\">\n      <div>Simplifier le processus: garde chaque opération simple et intuitive.;</div>\n      <div>Clair et défini: énonce clairement ses intentions afin que l'utilisateur puisse comprendre et prendre une décision rapidement;</div>\n      <div>Facile à identifier: l'interface devrait être simple et facile d'accès, afin que les utilisateurs n'ai pas d'efforts de mémorisation à faire.</div>\n    </el-collapse-item>\n    <el-collapse-item title=\"Controllabilité\" name=\"4\">\n      <div>Prise de décision: possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs;</div>\n      <div>Contrôle des conséquences: les utilisateurs devraient pouvoir contrôler l'exécution de leurs opérations, y compris l'annulation et la suppression des opérations courantes.</div>\n    </el-collapse-item>\n</el-collapse>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: '1'\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Titre personnalisé\n\nEn plus de l'utilisation de l'attribut `title`, vous pouvez configurer les titres de panneau, ce qui rend possible l'ajout de contenu personnalisé, comme des icônes par exemple.\n\n:::demo\n```html\n<el-collapse accordion>\n  <el-collapse-item name=\"1\">\n    <template slot=\"title\">\n      Cohérence<i class=\"header-icon el-icon-info\"></i>\n    </template>\n    <div>Cohérence avec la vraie vie: en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs;</div>\n    <div>Cohérence au sein de l'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title=\"Feedback\" name=\"2\">\n      <div>Retour d'expèrience: permets aux utilisateurs de percevoir clairement leur opérations par le biais d'animations et d'effets interactifs.</div>\n      <div>Retour visuel: reflète l'état actuel de la page via le réarrangement ou la mise à jour des éléments.</div>\n  </el-collapse-item>\n  <el-collapse-item title=\"Efficacité\" name=\"3\">\n      <div>Simplifier le processus: garde chaque opération simple et intuitive.;</div>\n      <div>Clair et défini: énonce clairement ses intentions afin que l'utilisateur puisse comprendre et prendre une décision rapidement;</div>\n      <div>Facile à identifier: l'interface devrait être simple et facile d'accès, afin que les utilisateurs n'ai pas d'efforts de mémorisation à faire.</div>\n  </el-collapse-item>\n  <el-collapse-item title=\"Controllabilité\" name=\"4\">\n      <div>Prise de décision: possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs;</div>\n      <div>Contrôle des conséquences: les utilisateurs devraient pouvoir contrôler l'exécution de leurs opérations, y compris l'annulation et la suppression des opérations courantes.</div>\n  </el-collapse-item>\n</el-collapse>\n```\n:::\n\n### Attributs de Collapse\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| value / v-model | Le panneau actuellement activé. | string (en mode accordéon) / array (en mode normal) | — | — |\n| accordion | Active le mode accordéon. | boolean | — | false |\n\n### Évènements de Collapse\n| Nom | Description | Paramètres |\n|---------|---------|---------|\n| change | Se déclenche quand un panneau est activé / désactivé. | (activeNames: array (en mode normal) / string (en mode accordéon)) |\n\n### Attributs de Collapse-Item\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| name      | Identifiant unique du panneau. | string/number | — | — |\n| title     | Titre du panneau.              | string        | — | — |\n| disabled  | Désactive le panneau.          | boolean       | — | — |\n"
  },
  {
    "path": "examples/docs/fr-FR/color-picker.md",
    "content": "## ColorPicker\n\nColorPicker est un sélecteur de couleur qui supporte plusieurs formats.\n\n### Usage\n\n:::demo ColorPicker nécessite une variable de type string liée à v-model.\n```html\n<div class=\"block\">\n  <span class=\"demonstration\">Avec valeur par défaut</span>\n  <el-color-picker v-model=\"color1\"></el-color-picker>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Sans valeur par défaut</span>\n  <el-color-picker v-model=\"color2\"></el-color-picker>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        color1: '#409EFF',\n        color2: null\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Canal Alpha\n\n:::demo ColorPicker supporte le canal alpha. Pour activer la sélection du canal alpha, ajoutez l'attribut `show-alpha`.\n```html\n<el-color-picker v-model=\"color\" show-alpha></el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color: 'rgba(19, 206, 102, 0.8)'\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Couleurs prédéfinies\n\n:::demo ColorPicker supporte les couleurs prédéfinies.\n```html\n<el-color-picker\n  v-model=\"color\"\n  show-alpha\n  :predefine=\"predefineColors\">\n</el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color: 'rgba(255, 69, 0, 0.68)',\n        predefineColors: [\n          '#ff4500',\n          '#ff8c00',\n          '#ffd700',\n          '#90ee90',\n          '#00ced1',\n          '#1e90ff',\n          '#c71585',\n          'rgba(255, 69, 0, 0.68)',\n          'rgb(255, 120, 0)',\n          'hsv(51, 100, 98)',\n          'hsva(120, 40, 94, 0.5)',\n          'hsl(181, 100%, 37%)',\n          'hsla(209, 100%, 56%, 0.73)',\n          '#c7158577'\n        ]\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Tailles\n\n:::demo\n```html\n<el-color-picker v-model=\"color\"></el-color-picker>\n<el-color-picker v-model=\"color\" size=\"medium\"></el-color-picker>\n<el-color-picker v-model=\"color\" size=\"small\"></el-color-picker>\n<el-color-picker v-model=\"color\" size=\"mini\"></el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color: '#409EFF'\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Attributs\n| Attribut | Description | Type | Valeurs acceptées | Défaut |\n|---------- |-------- |---------- |-------------  |-------- |\n| value / v-model | La valeur liée. | string | — | — |\n| disabled | Désactive le ColorPicker. | boolean | — | false |\n| size | Taille du ColorPicker. | string | — | medium / small / mini |\n| show-alpha | Affiche la sélection du canal alpha. | boolean | — | false |\n| color-format | Format de couleur du v-model. | string | hsl / hsv / hex / rgb | hex (quand show-alpha est false)/ rgb (quand show-alpha est true) |\n| popper-class | Classe du menu déroulant du ColorPicker. | string | — | — |\n| predefine | Couleurs prédéfinies. | array | — | — |\n\n### Évènements\n| Nom | Description | Paramètres |\n|---------|--------|---------|\n| change | Se déclenche quand la valeur change. | La valeur de la couleur |\n| active-change | Se déclenche quand la couleur active change. | La valeur de la couleur active |\n"
  },
  {
    "path": "examples/docs/fr-FR/color.md",
    "content": "<script>\n  import bus from '../../bus';\n  import { tintColor } from '../../color.js';\n  import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';\n  const varMap = {\n    'primary': '$--color-primary',\n    'success': '$--color-success',\n    'warning': '$--color-warning',\n    'danger': '$--color-danger',\n    'info': '$--color-info',\n    'white': '$--color-white',\n    'black': '$--color-black',\n    'textPrimary': '$--color-text-primary',\n    'textRegular': '$--color-text-regular',\n    'textSecondary': '$--color-text-secondary',\n    'textPlaceholder': '$--color-text-placeholder',\n    'borderBase': '$--border-color-base',\n    'borderLight': '$--border-color-light',\n    'borderLighter': '$--border-color-lighter',\n    'borderExtraLight': '$--border-color-extra-light'\n  };\n  const original = {\n    primary: '#409EFF',\n    success: '#67C23A',\n    warning: '#E6A23C',\n    danger: '#F56C6C',\n    info: '#909399',\n    white: '#FFFFFF',\n    black: '#000000',\n    textPrimary: '#303133',\n    textRegular: '#606266',\n    textSecondary: '#909399',\n    textPlaceholder: '#C0C4CC',\n    borderBase: '#DCDFE6',\n    borderLight: '#E4E7ED',\n    borderLighter: '#EBEEF5',\n    borderExtraLight: '#F2F6FC'\n  }\n  export default {\n    created() {\n      bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);\n    },\n    mounted() {\n      this.setGlobal();\n    },\n    methods: {\n      tintColor(color, tint) {\n        return tintColor(color, tint);\n      },\n      setGlobal() {\n        if (window.userThemeConfig) {\n          this.global = window.userThemeConfig.global;\n        }\n      }\n    },\n    data() {\n      return {\n        global: {},\n        primary: '',\n        success: '',\n        warning: '',\n        danger: '',\n        info: '',\n        white: '',\n        black: '',\n        textPrimary: '',\n        textRegular: '',\n        textSecondary: '',\n        textPlaceholder: '',\n        borderBase: '',\n        borderLight: '',\n        borderLighter: '',\n        borderExtraLight: ''\n      }\n    },\n    watch: {\n      global: {\n        immediate: true,\n        handler(value) {\n          Object.keys(original).forEach((o) => {\n            if (value[varMap[o]]) {\n              this[o] = value[varMap[o]]\n            } else {\n              this[o] = original[o]\n            }\n          });\n        }\n      }\n    },\n  }\n</script>\n\n## Couleur\nElement utilise un ensemble de palettes spécifiques afin de fournir un style consistant pour vos produits.\n\n### Couleur principale\n\nLa couleur principale d'Element est un bleu clair et agréable.\n\n<el-row :gutter=\"12\">\n  <el-col :span=\"10\" :xs=\"{span: 12}\">\n    <div class=\"demo-color-box\" :style=\"{ background: primary }\">Couleur principale\n      <div class=\"value\">#409EFF</div>\n      <div class=\"bg-color-sub\" :style=\"{ background: tintColor(primary, 0.9) }\">\n        <div\n          class=\"bg-blue-sub-item\"\n          v-for=\"(item, key) in Array(8)\"\n          :key=\"key\"\n          :style=\"{ background: tintColor(primary, (key + 1) / 10) }\"\n        ></div>\n      </div>\n    </div>\n  </el-col>\n</el-row>\n\n### Couleurs secondaires\n\nEn plus de la couleur principale, vous devrez sans doute utiliser d'autres couleurs pour différents cas de figures, par exemple une couleur de danger pour indiquer une opération dangereuse.\n\n<el-row :gutter=\"12\">\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"demo-color-box\" :style=\"{ background: success }\">Succès\n      <div class=\"value\">#67C23A</div>\n      <div class=\"bg-color-sub\">\n        <div\n          class=\"bg-success-sub-item\"\n          v-for=\"(item, key) in Array(2)\"\n          :key=\"key\"\n          :style=\"{ background: tintColor(success, (key + 8) / 10) }\"\n        ></div>\n      </div>\n    </div>\n  </el-col>\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"demo-color-box\" :style=\"{ background: warning }\">Avertissement\n      <div class=\"value\">#E6A23C</div>\n      <div class=\"bg-color-sub\">\n        <div\n          class=\"bg-success-sub-item\"\n          v-for=\"(item, key) in Array(2)\"\n          :key=\"key\"\n          :style=\"{ background: tintColor(warning, (key + 8) / 10) }\"\n        ></div>\n      </div>\n    </div>\n  </el-col>\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"demo-color-box\" :style=\"{ background: danger }\">Danger\n      <div class=\"value\">#F56C6C</div>\n      <div class=\"bg-color-sub\">\n        <div\n          class=\"bg-success-sub-item\"\n          v-for=\"(item, key) in Array(2)\"\n          :key=\"key\"\n          :style=\"{ background: tintColor(danger, (key + 8) / 10) }\"\n        ></div>\n      </div>\n    </div>\n  </el-col>\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"demo-color-box\" :style=\"{ background: info }\">Info\n      <div class=\"value\">#909399</div>\n      <div class=\"bg-color-sub\">\n        <div\n          class=\"bg-success-sub-item\"\n          v-for=\"(item, key) in Array(2)\"\n          :key=\"key\"\n          :style=\"{ background: tintColor(info, (key + 8) / 10) }\"\n        ></div>\n      </div>\n    </div>\n  </el-col>\n</el-row>\n\n### Couleurs neutres\n\nLes couleurs neutres sont les couleurs du fond, du texte et des bordures. Vous pouvez utiliser différentes couleurs neutres pour représenter une structure hiérarchique.\n\n<el-row :gutter=\"12\">\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"demo-color-box-group\">\n      <div class=\"demo-color-box demo-color-box-other\"\n      :style=\"{ background: textPrimary }\"\n      >Texte principal<div class=\"value\">{{textPrimary}}</div></div>\n      <div class=\"demo-color-box demo-color-box-other\"\n      :style=\"{ background: textRegular }\"\n      >\n      Texte normal<div class=\"value\">{{textRegular}}</div></div>\n      <div class=\"demo-color-box demo-color-box-other\"\n      :style=\"{ background: textSecondary }\"\n      >Texte secondaire<div class=\"value\">{{textSecondary}}</div></div>\n      <div class=\"demo-color-box demo-color-box-other\"\n      :style=\"{ background: textPlaceholder }\"\n      >Texte de placeholder<div class=\"value\">{{textPlaceholder}}</div></div>\n    </div>\n  </el-col>\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"demo-color-box-group\">\n      <div class=\"demo-color-box demo-color-box-other demo-color-box-lite\"\n      :style=\"{ background: borderBase }\"\n      >Bordure de base<div class=\"value\">{{borderBase}}</div></div>\n      <div class=\"demo-color-box demo-color-box-other demo-color-box-lite\"\n      :style=\"{ background: borderLight }\"\n      >Bordure claire<div class=\"value\">{{borderLight}}</div></div>\n      <div class=\"demo-color-box demo-color-box-other demo-color-box-lite\"\n      :style=\"{ background: borderLighter }\"\n      >Bordure très claire<div class=\"value\">{{borderLighter}}</div></div>\n      <div class=\"demo-color-box demo-color-box-other demo-color-box-lite\"\n      :style=\"{ background: borderExtraLight }\"\n      >Bordure extra claire<div class=\"value\">{{borderExtraLight}}</div></div>\n    </div>\n  </el-col>\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"demo-color-box-group\">\n      <div\n      class=\"demo-color-box demo-color-box-other\"\n      :style=\"{ background: black }\"\n      >Noir<div class=\"value\">{{black}}</div></div>\n      <div\n      class=\"demo-color-box demo-color-box-other\"\n      :style=\"{ background: white, color: '#303133', border: '1px solid #eee' }\"\n      >Blanc<div class=\"value\">{{white}}</div></div>\n      <div class=\"demo-color-box demo-color-box-other bg-transparent\">Transparent<div class=\"value\">Transparent</div>\n      </div>\n    </div>\n  </el-col>\n</el-row>\n"
  },
  {
    "path": "examples/docs/fr-FR/container.md",
    "content": "## Container\nLes composants Container servent à structurer la page:\n\n`<el-container>`: Conteneur de wrapping. Quand il est placé à l'intérieur de `<el-header>` ou `<el-footer>`, tous les éléments enfants seront placés verticalement. Dans le cas contraire ils seront placés horizontalement.\n\n`<el-header>`: Conteneur pour headers.\n\n`<el-aside>`: Conteneur pour section latérale (en général un menu).\n\n`<el-main>`: Conteneur pour la section principal.\n\n`<el-footer>`: Conteneur pour footers.\n\n:::tip\nCes composants utilisent flexbox, assurez vous que le navigateur supporte cette fonctionnalité. De plus, les éléments enfants directs de `<el-container>` doivent être un des quatre éléments précédents, leur élément père devant obligatoirement être `<el-container>`.\n:::\n\n### Mises en page habituelles\n\n:::demo\n```html\n<el-container>\n  <el-header>Header</el-header>\n  <el-main>Main</el-main>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-main>Main</el-main>\n  <el-footer>Footer</el-footer>\n</el-container>\n\n<el-container>\n  <el-aside width=\"200px\">Aside</el-aside>\n  <el-main>Main</el-main>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-container>\n    <el-aside width=\"200px\">Aside</el-aside>\n    <el-main>Main</el-main>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-container>\n    <el-aside width=\"200px\">Aside</el-aside>\n    <el-container>\n      <el-main>Main</el-main>\n      <el-footer>Footer</el-footer>\n    </el-container>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-aside width=\"200px\">Aside</el-aside>\n  <el-container>\n    <el-header>Header</el-header>\n    <el-main>Main</el-main>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-aside width=\"200px\">Aside</el-aside>\n  <el-container>\n    <el-header>Header</el-header>\n    <el-main>Main</el-main>\n    <el-footer>Footer</el-footer>\n  </el-container>\n</el-container>\n\n<style>\n  .el-header, .el-footer {\n    background-color: #B3C0D1;\n    color: #333;\n    text-align: center;\n    line-height: 60px;\n  }\n\n  .el-aside {\n    background-color: #D3DCE6;\n    color: #333;\n    text-align: center;\n    line-height: 200px;\n  }\n\n  .el-main {\n    background-color: #E9EEF3;\n    color: #333;\n    text-align: center;\n    line-height: 160px;\n  }\n\n  body > .el-container {\n    margin-bottom: 40px;\n  }\n\n  .el-container:nth-child(5) .el-aside,\n  .el-container:nth-child(6) .el-aside {\n    line-height: 260px;\n  }\n\n  .el-container:nth-child(7) .el-aside {\n    line-height: 320px;\n  }\n</style>\n```\n:::\n\n### Exemple\n\n:::demo\n```html\n<el-container style=\"height: 500px; border: 1px solid #eee\">\n  <el-aside width=\"200px\" style=\"background-color: rgb(238, 241, 246)\">\n    <el-menu :default-openeds=\"['1', '3']\">\n      <el-submenu index=\"1\">\n        <template slot=\"title\"><i class=\"el-icon-message\"></i>Navigator One</template>\n        <el-menu-item-group>\n          <template slot=\"title\">Group 1</template>\n          <el-menu-item index=\"1-1\">Option 1</el-menu-item>\n          <el-menu-item index=\"1-2\">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title=\"Group 2\">\n          <el-menu-item index=\"1-3\">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index=\"1-4\">\n          <template slot=\"title\">Option4</template>\n          <el-menu-item index=\"1-4-1\">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-submenu index=\"2\">\n        <template slot=\"title\"><i class=\"el-icon-menu\"></i>Navigator Two</template>\n        <el-menu-item-group>\n          <template slot=\"title\">Group 1</template>\n          <el-menu-item index=\"2-1\">Option 1</el-menu-item>\n          <el-menu-item index=\"2-2\">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title=\"Group 2\">\n          <el-menu-item index=\"2-3\">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index=\"2-4\">\n          <template slot=\"title\">Option 4</template>\n          <el-menu-item index=\"2-4-1\">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-submenu index=\"3\">\n        <template slot=\"title\"><i class=\"el-icon-setting\"></i>Navigator Three</template>\n        <el-menu-item-group>\n          <template slot=\"title\">Group 1</template>\n          <el-menu-item index=\"3-1\">Option 1</el-menu-item>\n          <el-menu-item index=\"3-2\">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title=\"Group 2\">\n          <el-menu-item index=\"3-3\">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index=\"3-4\">\n          <template slot=\"title\">Option 4</template>\n          <el-menu-item index=\"3-4-1\">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n    </el-menu>\n  </el-aside>\n\n  <el-container>\n    <el-header style=\"text-align: right; font-size: 12px\">\n      <el-dropdown>\n        <i class=\"el-icon-setting\" style=\"margin-right: 15px\"></i>\n        <el-dropdown-menu slot=\"dropdown\">\n          <el-dropdown-item>View</el-dropdown-item>\n          <el-dropdown-item>Add</el-dropdown-item>\n          <el-dropdown-item>Delete</el-dropdown-item>\n        </el-dropdown-menu>\n      </el-dropdown>\n      <span>Tom</span>\n    </el-header>\n\n    <el-main>\n      <el-table :data=\"tableData\">\n        <el-table-column prop=\"date\" label=\"Date\" width=\"140\">\n        </el-table-column>\n        <el-table-column prop=\"name\" label=\"Name\" width=\"120\">\n        </el-table-column>\n        <el-table-column prop=\"address\" label=\"Address\">\n        </el-table-column>\n      </el-table>\n    </el-main>\n  </el-container>\n</el-container>\n\n<style>\n  .el-header {\n    background-color: #B3C0D1;\n    color: #333;\n    line-height: 60px;\n  }\n\n  .el-aside {\n    color: #333;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      const item = {\n        date: '2016-05-02',\n        name: 'Tom',\n        address: 'No. 189, Grove St, Los Angeles'\n      };\n      return {\n        tableData: Array(20).fill(item)\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Attributs de Container\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| direction | Direction d'affichage pour les éléments enfants. | string | horizontal / vertical | vertical quand dans `el-header` ou `el-footer`; horizontal sinon |\n\n### Attributs de Header\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| height | Hauteur du header. | string | — | 60px |\n\n### Attributs de Aside\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| width | Largeur de la section. | string | — | 300px |\n\n### Attributs de Footer\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| height | Hauteur du footer. | string | — | 60px |\n"
  },
  {
    "path": "examples/docs/fr-FR/custom-theme.md",
    "content": "## Thème\nElement utilise le style BEM pour le CSS afin que vous puissiez écraser les règles prédéfinies facilement. Mais si vous avez besoin de remplacer des styles à une plus grande échelle , e.g. changer le thème de bleu à orange ou vert, les modifier une par une serait fastidieux. Nous fournissons ttrtois méthodes pour changer les variables de style.\n\n### Theme Roller\nUtilisez [Online Theme Roller](./#/fr-FR/theme) pour personnaliser les Design Tokens des variables globales et des composants, et prévisualisez le nouveau thème en temps réel. Il peut générer un package de style complet basé sur le nouveau thème que vous pouvez télécharger directement (pour importer de nouveaux fichiers de style dans votre projet, veuillez vous reporter à la partie 'Importer un thème personnalisé'' de cette section).\n\nAlso, use [Theme Roller Chrome Extension](https://chrome.google.com/webstore/detail/element-theme-roller/lifkjlojflekabbmlddfccdkphlelmim)，to customize theme and preview in real-time on any website developed by Element.\n\n<img src=\"https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png\" style=\"width: 100%;margin: 30px auto 0;display: block;\">\n\n### Changer la couleur du thème\nSi vous avez juste besoin de changer la couleur du thème, le [générateur de thème en ligne](https://elementui.github.io/theme-chalk-preview/#/en-US) est recommandé. La couleur du thème d'Element est un bleu clair et agréable. En le changeant, vous rendez Element visuellement plus adapté à vos projets.\n\nLe site précédent vous permet de visualiser et de télécharger un nouveau thème immédiatement (pour importer un nouveau thème, référez-vous à la partie 'Importer un thème personnalisé' or 'Importer un thème de composant à la demande' de cette section).\n\n### Mettre à jour les variables SCSS de votre projet\n`theme-chalk` est écrit en SCSS. Si votre projet utilises SCSS, vous pouvez changer directement les variables d'Élément. Créez un nouveau fichier, e.g. `element-variables.scss`:\n\n```html\n/* couleur du thème */\n$--color-primary: teal;\n\n/* chemin vers le fichier de police, requis */\n$--font-path: '~element-ui/lib/theme-chalk/fonts';\n\n@import \"~element-ui/packages/theme-chalk/src/index\";\n```\n\nPuis dans le fichier d'entrée, importez ce style au lieu de celui d'Element:\n```JS\nimport Vue from 'vue'\nimport Element from 'element-ui'\nimport './element-variables.scss'\n\nVue.use(Element)\n```\n\n:::tip\nIl est obligatoire de remplacer le chemin du fichier de police.\n:::\n\n### Outil de thème CLI\nSi votre projet n'utilise pas SCSS, vous pouvez personnaliser le thème en utilisant notre outil en ligne de commande:\n\n#### <strong>Installation</strong>\nInstallez le générateur de thème de manière globale ou locale. Une installation locale est recommandé afin que les personnes clonant votre dépôt bénéficient d'une installation automatique via npm.\n```shell\nnpm i element-theme -g\n```\n\nInstaller ensuite le thème chalk depuis npm ou GitHub.\n```shell\n# Via npm\nnpm i element-theme-chalk -D\n\n# Via GitHub\nnpm i https://github.com/ElementUI/theme-chalk -D\n```\n\n#### <strong>Initialisation d'un fichier de variable</strong>\nAprès l'installation des paquets ci-dessus, une commande appelée `et` devient disponible dans le CLI (si les paquets sont installés localement, utilisez `node_modules/.bin/et` à la place). Utilisez `-i` pour initialiser le fichier de variables, `element-variables.scss` par défaut. Vous pouvez spécifier n'importe quel dossier comme sortie.\n\n```shell\net -i [nom du fichier]\n\n> ✔ Generator variables file\n```\n\nDans `element-variables.scss` vous trouverez toutes les variables utilisées pour le style d'Element, définies en SCSS. Voici un snippet:\n\n```css\n$--color-primary: #409EFF !default;\n$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */\n$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */\n$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */\n$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */\n$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */\n$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */\n$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */\n$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */\n$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */\n\n$--color-success: #67c23a !default;\n$--color-warning: #e6a23c !default;\n$--color-danger: #f56c6c !default;\n$--color-info: #909399 !default;\n\n...\n```\n\n#### <strong>Modifier les variables</strong>\nÉditer `element-variables.scss`, e.g. en changeant la couleur du thème pour du rouge:\n```CSS\n$--color-primary: red;\n```\n\n#### <strong>Générer le thème</strong>\nAprès avoir sauvegardé le fichier de variables, utilisez `et` pour générer le thème. Vous pouvez activer le mode `watch` en ajoutant le paramètre `-w`. Si vous avez choisi le chemin du fichier de sortie, il vous faudra ajouter le paramètre `-c` avec le nom du fichier. Par défaut le thème généré est placé dans `./theme`. Vous pouvez spécifier le dossier de sortie grâce à `-o`. \n```shell\net\n\n> ✔ build theme font\n> ✔ build element theme\n```\n\n### Use custom theme\n#### <strong>Importer le thème</strong>\nImporting your own theme is just like importing the default theme, only this time you import the file built from \"Online Theme Roller\" or \"CLI tool\":\n\n```javascript\nimport '../theme/index.css'\nimport ElementUI from 'element-ui'\nimport Vue from 'vue'\n\nVue.use(ElementUI)\n```\n\n#### <strong>Importer le thème d'un composant sur demande</strong>\nSi vous utilisez `babel-plugin-component` pour les imports sur demande, modifiez `.babelrc` et spécifiez `styleLibraryName` avec le chemin où votre thème est localisé relativement à `.babelrc`. N'oubliez pas que `~` est requis:\n```json\n{\n  \"plugins\": [\n    [\n      \"component\",\n      {\n        \"libraryName\": \"element-ui\",\n        \"styleLibraryName\": \"~theme\"\n      }\n    ]\n  ]\n}\n```\n\nSi vous n'êtes pas familier avec `babel-plugin-component`, référez-vous à la page <a href=\"./#/fr-FR/component/quickstart\">Guide</a>. Pour plus d'informations, jetez un oeil au [dépôt du projet](https://github.com/ElementUI/element-theme) de `element-theme`.\n"
  },
  {
    "path": "examples/docs/fr-FR/date-picker.md",
    "content": "## DatePicker\n\nUtilisez DatePicker pour les champs de dates.\n\n### Entrez la date\n\nL'unité de base du DatePicker est le jour.\n\n:::demo L'unité est déterminée par l'attribut `type`. Vous pouvez ajouter des options en créant un objet `picker-options` avec la propriété `shortcuts`. L'état désactivé est contrôlé par `disabledDate` qui est une fonction.\n\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">Défaut</span>\n    <el-date-picker\n      v-model=\"value1\"\n      type=\"date\"\n      placeholder=\"Choississez un jour\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Picker avec raccourcis</span>\n    <el-date-picker\n      v-model=\"value2\"\n      type=\"date\"\n      placeholder=\"Choississez un jour\"\n      :picker-options=\"pickerOptions\">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions: {\n          disabledDate(time) {\n            return time.getTime() > Date.now();\n          },\n          shortcuts: [{\n            text: 'Aujourd\\'hui',\n            onClick(picker) {\n              picker.$emit('pick', new Date());\n            }\n          }, {\n            text: 'Hier',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit('pick', date);\n            }\n          }, {\n            text: 'Il y a une semaine',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit('pick', date);\n            }\n          }]\n        },\n        value1: '',\n        value2: '',\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Autres unités\n\nVous pouvez sélectionner une semaine, un mois, une année ou plusieurs dates en ajoutant des options grâce aux attributs.\n\n:::demo\n\n```html\n<div class=\"container\">\n  <div class=\"block\">\n    <span class=\"demonstration\">Semaine</span>\n    <el-date-picker\n      v-model=\"value1\"\n      type=\"week\"\n      format=\"Week WW\"\n      placeholder=\"Sélectionnez une semaine\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Mois</span>\n    <el-date-picker\n      v-model=\"value2\"\n      type=\"month\"\n      placeholder=\"Sélectionnez un mois\">\n    </el-date-picker>\n  </div>\n</div>\n<div class=\"container\">\n  <div class=\"block\">\n    <span class=\"demonstration\">Année</span>\n    <el-date-picker\n      v-model=\"value3\"\n      type=\"year\"\n      placeholder=\"Sélectionnez une année\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Dates</span>\n    <el-date-picker\n      type=\"dates\"\n      v-model=\"value4\"\n      placeholder=\"Sélectionnez une ou plusieurs dates\">\n    </el-date-picker>\n  </div>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: '',\n        value2: '',\n        value3: '',\n        value4: ''\n      };\n    }\n  };\n</script>\n```\n\n:::\n\n### Plage de dates\n\nVous pouvez sélectionner une plage de dates.\n\n:::demo Lorsque ce mode est activé, les deux panneaux sont liés par défaut. Si vous souhaitez qu'ils changent de mois de manière indépendante, ajoutez l'attribut `unlink-panels`.\n\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">Défaut</span>\n    <el-date-picker\n      v-model=\"value1\"\n      type=\"daterange\"\n      range-separator=\"à\"\n      start-placeholder=\"Date de début\"\n      end-placeholder=\"Date de fin\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Avec des options</span>\n    <el-date-picker\n      v-model=\"value2\"\n      type=\"daterange\"\n      align=\"right\"\n      unlink-panels\n      range-separator=\"à\"\n      start-placeholder=\"Date de début\"\n      end-placeholder=\"Date de fin\"\n      :picker-options=\"pickerOptions\">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions: {\n          shortcuts: [{\n            text: 'Semaine dernière',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit('pick', [start, end]);\n            }\n          }, {\n            text: 'Mois dernier',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit('pick', [start, end]);\n            }\n          }, {\n            text: 'Trois derniers mois',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit('pick', [start, end]);\n            }\n          }]\n        },\n        value1: '',\n        value2: ''\n      };\n    }\n  };\n</script>\n```\n\n:::\n\n### Plage de mois\n\nVous pouvez sélectionner une plage de mois.\n\n:::demo Lorsque ce mode est activé, les panneaux gauche et droit sont liés par défaut. Si vous voulez que les deux panneaux switch indépendamment les années en cours, vous pouvez utiliser l'attribut `unlink-panels`.\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">Défaut</span>\n    <el-date-picker\n      v-model=\"value1\"\n      type=\"monthrange\"\n      range-separator=\"à\"\n      start-placeholder=\"Mois de début\"\n      end-placeholder=\"Mois de fin\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Avec options</span>\n    <el-date-picker\n      v-model=\"value2\"\n      type=\"monthrange\"\n      align=\"right\"\n      unlink-panels\n      range-separator=\"à\"\n      start-placeholder=\"Mois de début\"\n      end-placeholder=\"Mois de fin\"\n      :picker-options=\"pickerOptions\">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions: {\n          shortcuts: [{\n            text: 'Ce mois',\n            onClick(picker) {\n              picker.$emit('pick', [new Date(), new Date()]);\n            }\n          }, {\n            text: 'Cette année',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date(new Date().getFullYear(), 0);\n              picker.$emit('pick', [start, end]);\n            }\n          }, {\n            text: 'Les derniers 6 mois',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setMonth(start.getMonth() - 6);\n              picker.$emit('pick', [start, end]);\n            }\n          }]\n        },\n        value1: '',\n        value2: ''\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Valeur par défaut\n\nSi l'utilisateur n'a pas sélectionné de date, vous pouvez montrer la date d'aujourd'hui par défaut. Utilisez `default-value` pour montrer une autre date. Sa valeur doit être parsable par `new Date()`.\n\nSi le type est `daterange`, `default-value` configure la panneau de gauche.\n\n:::demo\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">Date</span>\n    <el-date-picker\n      v-model=\"value1\"\n      type=\"date\"\n      placeholder=\"Sélectionnez une date\"\n      default-value=\"2010-10-01\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Plage de dates</span>\n    <el-date-picker\n      v-model=\"value2\"\n      type=\"daterange\"\n      align=\"right\"\n      start-placeholder=\"Date de début\"\n      end-placeholder=\"Date de fin\"\n      default-value=\"2010-10-01\">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: '',\n        value2: ''\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Formats de date\n\nUtilisez `format` pour contrôler l'affichage de la date dans le champ. Utilisez `value-format` pour contrôler le format de la variable stockée.\n\nPar défaut, le composant accepte et émet un objet `Date`. Les formats supportés se trouvent ci-dessous, avec la date UTC 2017-01-02 03:04:05 comme exemple:\n\n:::warning\nAttention à la capitalisation !\n:::\n\n| Format | Signification | Note | Exemple |\n|------|------|------|------|------|\n| `yyyy` | Année | | 2017 |\n| `M`  | Mois | pas de 0 au début | 1 |\n| `MM` | Mois | | 01 |\n| `MMM` | Mois | | Jan |\n| `MMMM` | Mois | | Janvier |\n| `W`  | Semaine | uniquement pour les `format` des types 'semaine' ; pas de 0 au début | 1 |\n| `WW` | Semaine | uniquement pour les `format` des types 'semaine' | 01 |\n| `d`  | Jour | pas de 0 au début | 2 |\n| `dd` | Jour | | 02 |\n| `H`  | Heure | Horloge 24 heures; pas de 0 au début | 3 |\n| `HH` | Heure | Horloge 24 heures | 03 |\n| `h`  | Heure | Horloge 12 heures ; doit être utilisé avec `A` ou `a`; pas de 0 au début | 3 |\n| `hh` | Heure | Horloge 12 heures ; doit être utilisé avec `A` ou `a` | 03 |\n| `m`  | Minute | pas de 0 au début | 4 |\n| `mm` | Minute | | 04 |\n| `s`  | Seconde | pas de 0 au début | 5 |\n| `ss` | Seconde | | 05 |\n| `A`  | AM/PM | uniquement pour `format`, majuscules | AM |\n| `a`  | am/pm | uniquement pour `format`, minuscules | am |\n| `timestamp` | timestamp JS | uniquement pour `value-format`; la variable stockée sera un `number` | 1483326245000 |\n| `[MM]` | Pas de caractère d'échappement | Pour échapper des caractères, placez-les entre crochets (ex: [A] [MM]) | MM |\n\n:::demo\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">Émet un objet Date</span>\n    <div class=\"demonstration\">Value: {{ value1 }}</div>\n    <el-date-picker\n      v-model=\"value1\"\n      type=\"date\"\n      placeholder=\"Sélectionnez une date\"\n      format=\"yyyy/MM/dd\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Utilise value-format</span>\n    <div class=\"demonstration\">Value: {{ value2 }}</div>\n    <el-date-picker\n      v-model=\"value2\"\n      type=\"date\"\n      placeholder=\"Sélectionnez une date\"\n      format=\"yyyy/MM/dd\"\n      value-format=\"yyyy-MM-dd\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Timestamp</span>\n    <div class=\"demonstration\">Value：{{ value3 }}</div>\n    <el-date-picker\n      v-model=\"value3\"\n      type=\"date\"\n      placeholder=\"Sélectionnez une date\"\n      format=\"yyyy/MM/dd\"\n      value-format=\"timestamp\">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: '',\n        value2: '',\n        value3: ''\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Horaire par défaut pour les dates de fin et de début\n\nLorsque vous choisissez une plage de dates, vous pouvez assigner l'horaire de départ et de fin pour chacune des dates.\n\n:::demo Par défaut, l'horaire pour les dates de début et de fin est `00:00:00`. Configurez `default-time` pour changer l'horaire. Cet attribut prends un tableau de un ou deux horaires au format `12:00:00`. Le premier est pour la date de début, le deuxième pour la date de fin.\n```html\n<template>\n  <div class=\"block\">\n    <p>Valeur: {{ value }}</p>\n    <el-date-picker\n      v-model=\"value\"\n      type=\"daterange\"\n      start-placeholder=\"Date de début\"\n      end-placeholder=\"Date de fin\"\n      :default-time=\"['00:00:00', '23:59:59']\">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: ''\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Attributs\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| value / v-model | La valeur liée. | date(DatePicker) / array(DateRangePicker) | — | — |\n| readonly | Si le DatePicker est en lecture seule. | boolean | — | false |\n| disabled | Si le DatePicker est désactivé. | boolean | — | false |\n| size | Taille du champs. | string | large/small/mini | — |\n| editable | Si le champ est éditable. | boolean | — | true |\n| clearable | Si la croix de reset doit apparaître. | boolean | — | true |\n| placeholder | Le placeholder en mode normal. | string | — | — |\n| start-placeholder | Le placeholder pour la date de début en mode plage de dates. | string | — | — |\n| end-placeholder | Le placeholder pour la date de fin en mode plage de dates. | string | — | — |\n| type | Type du picker. | string | year/month/date/dates/datetime/ week/datetimerange/daterange/ monthrange | date |\n| format | Format d'affichage dans le champ. | string | Voir [formats de date](#/fr-FR/component/date-picker#formats-de-date). | yyyy-MM-dd |\n| align | Alignement. | left/center/right | left |\n| popper-class | Nom de classe pour le menu déroulant du DatePicker. | string | — | — |\n| picker-options | Options additionnelles, voir la table ci-dessous. | object | — | {} |\n| range-separator | Séparateur de plage de dates. | string | — | '-' |\n| default-value | Date par défaut du calendrier, optionnelle. | Date | Tout ce qui est accepté par `new Date()` | — |\n| default-time | Horaire par défaut quand on sélectionne une plage dates, optionnel. | string[] | Tableau de taille 2, chaque valeur est au format `12:00:00`. La première pour la date de début, la deuxième pour la date de fin. | — |\n| value-format | Format de la variable stockée, optionnel. Si non spécifié, la valeur sera un objet Date. | string | Voir [formats de date](#/en-US/component/date-picker#formats-de-date) | — |\n| name | Identique au `name` de l'input natif | string | — | — |\n| unlink-panels | Rend indépendants les deux panneaux de plage de dates. | boolean | — | false |\n| prefix-icon | Icône de préfixe. | string | — | el-icon-date |\n| clear-icon | Icône de reset. | string | — | el-icon-circle-close |\n| validate-event | Si la validation doit être déclenchée. | boolean | - | true |\n| append-to-body     | S'il faut ajouter le DatePicker au body | boolean   | — | true |\n\n### Options du Picker\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| shortcuts | Un tableau d'objets { text, onClick } pour configurer les raccourcis, voir table ci-dessous. | object[] | — | — |\n| disabledDate | Une fonction qui détermine si une date est désactivée ou pas, avec cette date en paramètre. Doit retourner un booléen. | function | — | — |\n| cellClassName | set custom className | Function(Date) | — | — |\n| firstDayOfWeek | Premier jour du mois. | Number | 1 to 7 | 7 |\n| onPick | Callback se déclenchant quand la date sélectionnée change. Uniquement pour `daterange` et `datetimerange`. | Function({ maxDate, minDate }) | - | - |\n\n### Raccourcis\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| text | Titre du raccourci. | string | — | — |\n| onClick | Callback se déclenchant quand le raccourci est cliqué, avec `vm` en paramètre. Vous pouvez changer la valeur du picker en émettant l'évènement `pick`. Exemple: `vm.$emit('pick', new Date())`| function | — | — |\n\n### Évènements\n| Nom | Description | Paramètres |\n|---------|--------|---------|\n| change | Se déclenche quand l'utilisateur confirme la valeur | component's binding value |\n| blur | Se déclenche quand le champ perds le focus. | component instance |\n| focus | Se déclenche quand le champ a le focus. | component instance |\n\n### Méthodes\n| Méthode | Description | Paramètres |\n|------|--------|-------|\n| focus | Focus sur le champ. | — |\n\n### Slots\n| Nom    | Description |\n|---------|-------------|\n| range-separator  | Séparateur d'intervalle personnalisé. |\n"
  },
  {
    "path": "examples/docs/fr-FR/datetime-picker.md",
    "content": "## DateTimePicker\n\nSélectionnez une date et une heure dans un seul picker.\n\n:::tip\nDateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'informations sur `pickerOptions` et d'autres attributs, vous pouvez vous référer à DatePicker et TimePicker.\n:::\n\n### Date et horaire\n\n:::demo Vous pouvez sélectionner une date et un horaire en un seul picker en réglant `type` sur `datetime`. La manière d'utiliser des raccourcis est la même que pour DatePicker.\n\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">Défaut</span>\n    <el-date-picker\n      v-model=\"value1\"\n      type=\"datetime\"\n      placeholder=\"Selectionnez date et horaire\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Avec raccourcis</span>\n    <el-date-picker\n      v-model=\"value2\"\n      type=\"datetime\"\n      placeholder=\"Selectionnez date et horaire\"\n      :picker-options=\"pickerOptions\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Avec horaire par défaut</span>\n    <el-date-picker\n      v-model=\"value3\"\n      type=\"datetime\"\n      placeholder=\"Selectionnez date et horaire\"\n      default-time=\"12:00:00\">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions: {\n          shortcuts: [{\n            text: 'Aujourd\\'hui',\n            onClick(picker) {\n              picker.$emit('pick', new Date());\n            }\n          }, {\n            text: 'Hier',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit('pick', date);\n            }\n          }, {\n            text: 'Il y a une semaine',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit('pick', date);\n            }\n          }]\n        },\n        value1: '',\n        value2: '',\n        value3: ''\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Plage de dates et d'horaires\n\n:::demo Vous pouvez sélectionner des plages en configurant `type` sur `datetimerange`.\n\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">Défaut</span>\n    <el-date-picker\n      v-model=\"value1\"\n      type=\"datetimerange\"\n      range-separator=\"à\"\n      start-placeholder=\"Date de début\"\n      end-placeholder=\"Date de fin\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Avec raccourcis</span>\n    <el-date-picker\n      v-model=\"value2\"\n      type=\"datetimerange\"\n      :picker-options=\"pickerOptions\"\n      range-separator=\"à\"\n      start-placeholder=\"Date de début\"\n      end-placeholder=\"Date de fin\"\n      align=\"right\">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions: {\n          shortcuts: [{\n            text: 'La semaine passée',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit('pick', [start, end]);\n            }\n          }, {\n            text: 'Le mois dernier',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit('pick', [start, end]);\n            }\n          }, {\n            text: 'Les 2 derniers mois',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit('pick', [start, end]);\n            }\n          }]\n        },\n        value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],\n        value2: ''\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Horaire par défaut pour les plages de dates\n\n:::demo Lorsque vous sélectionnez une plage de dates dans le panneau de date avec le type `datetimerange`, `00:00:00` sera utilisé comme horaire par défaut pour les dates de début et de fin. Vous pouvez contrôler cette valeur avec l'attribut `default-time`. Il accepte un tableau de une ou deux chaînes de caractères. La première indique l'horaire de la date de début, la deuxième celui de la date de fin.\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">Heure de la date de début 12:00:00</span>\n    <el-date-picker\n      v-model=\"value1\"\n      type=\"datetimerange\"\n      start-placeholder=\"Date de début\"\n      end-placeholder=\"Date de fin\"\n      :default-time=\"['12:00:00']\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Heure de la date de début 12:00:00, heure de la date de fin 08:00:00</span>\n    <el-date-picker\n      v-model=\"value2\"\n      type=\"datetimerange\"\n      align=\"right\"\n      start-placeholder=\"Date de début\"\n      end-placeholder=\"Date de fin\"\n      :default-time=\"['12:00:00', '08:00:00']\">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: '',\n        value2: ''\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Attributs\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| value / v-model | La valeur liée. | date(DateTimePicker) / array(DateTimeRangePicker) | — | — |\n| readonly | Si le DatePicker est en lecture seule. | boolean | — | false |\n| disabled | Si le DatePicker est désactivé. | boolean | — | false |\n| editable | Si le champ est éditable. | boolean | — | true |\n| clearable | Si la croix de reset doit apparaître. | boolean | — | true |\n|size | Taille du champ. | string | large/small/mini | — |\n| placeholder | Le placeholder en mode normal. | string | — | — |\n| start-placeholder | Le placeholder de la date de début en mode plage de dates. | string | — | — |\n| end-placeholder | Le placeholder de la date de fin en mode plage de dates. | string | — | — |\n| time-arrow-control | Si l'horaire peut être sélectionné en utilisant les flèches de direction. | boolean | — | false |\n| type | Type du picker. | string | year/month/date/datetime/ week/datetimerange/daterange | date |\n| format | Format d'affichage de la date dans le champ. | string | Voir [formats de date](#/fr-FR/component/date-picker#formats-de-date) | yyyy-MM-dd HH:mm:ss |\n| align | Alignements. | left/center/right | left |\n| popper-class | Nom de classe pour le menu déroulant du DateTimePicker. | string | — | — |\n| picker-options | Options additionnelles, voir la table ci-dessous. | object | — | {} |\n| range-separator | Séparateur de plage. | string | - | '-' |\n| default-value | Date par défaut du calendrier, optionnelle. | Date | N'importe quelle valeur acceptée par `new Date()` | — |\n| default-time | L'horaire par défaut après avoir choisi une date. | normal: string / plage de dates: string[] | normal: un string tel que `12:00:00`, range: tableau de deux strings, le premier pour la date de début, le deuxième pour la date de fin. Si non spécifié, `00:00:00` est utilisé. | — |\n| value-format | Format de la variable stockée, optionnel. Si non spécifié, La valeur sera un objet Date. | string | Voir [formats de date](#/fr-FR/component/date-picker#formats-de-date) | — |\n| name | Identique au `name` de l'input natif | string | — | — |\n| unlink-panels | Rend indépendants les deux panneaux de plage de dates | boolean | — | false |\n| prefix-icon | Icône de préfixe. | string | — | el-icon-date |\n| clear-icon | Icône de reset | string | — | el-icon-circle-close |\n\n### Options du Picker\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| shortcuts | Un tableau d'objets { text, onClick } pour mettre en place des raccourcis, vérifier le tableau ci-dessous | object[] | — | — |\n| disabledDate | Une fonction déterminant si une date est désactivée avec cette date en paramètre. Retourne un Boolean | function | — | — |\n| cellClassName | set custom className | Function(Date) | — | — |\n| firstDayOfWeek | Le premier jour de la semaine | Number | 1 à 7 | 7 |\n\n### Raccourcis\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| text | Titre du raccourci. | string | — | — |\n| onClick | Callback se déclenchant quand le raccourci est cliqué, avec `vm` en paramètre. Vous pouvez changer la valeur du picker en émettant l'évènement `pick`. Exemple: `vm.$emit('pick', new Date())`| function | — | — |\n\n### Évènements\n| Nom | Description | Paramètres |\n|---------|--------|---------|\n| change | Se déclenche quand l'utilisateur confirme la valeur | component's binding value |\n| blur | Se déclenche quand le champ perds le focus. | component instance |\n| focus | Se déclenche quand le champ a le focus. | component instance |\n\n### Méthodes\n| Méthode | Description | Paramètres |\n|------|--------|-------|\n| focus | Focus sur le champ. | — |\n"
  },
  {
    "path": "examples/docs/fr-FR/descriptions.md",
    "content": "## Descriptions\n\nDisplay multiple fields in list form.\n\n### Basic usage\n\n:::demo\n\n```html\n<el-descriptions title=\"User Info\">\n    <el-descriptions-item label=\"Username\">kooriookami</el-descriptions-item>\n    <el-descriptions-item label=\"Telephone\">18100000000</el-descriptions-item>\n    <el-descriptions-item label=\"Place\">Suzhou</el-descriptions-item>\n    <el-descriptions-item label=\"Remarks\">\n      <el-tag size=\"small\">School</el-tag>\n    </el-descriptions-item>\n    <el-descriptions-item label=\"Address\">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>\n</el-descriptions>\n```\n:::\n\n### Sizes\n\n:::demo\n\n```html\n<template>\n  <el-radio-group v-model=\"size\">\n    <el-radio label=\"\">Default</el-radio>\n    <el-radio label=\"medium\">Medium</el-radio>\n    <el-radio label=\"small\">Small</el-radio>\n    <el-radio label=\"mini\">Mini</el-radio>\n  </el-radio-group>\n\n  <el-descriptions class=\"margin-top\" title=\"With border\" :column=\"3\" :size=\"size\" border>\n    <template slot=\"extra\">\n      <el-button type=\"primary\" size=\"small\">Operation</el-button>\n    </template>\n    <el-descriptions-item>\n      <template slot=\"label\">\n        <i class=\"el-icon-user\"></i>\n        Username\n      </template>\n      kooriookami\n    </el-descriptions-item>\n    <el-descriptions-item>\n      <template slot=\"label\">\n        <i class=\"el-icon-mobile-phone\"></i>\n        Telephone\n      </template>\n      18100000000\n    </el-descriptions-item>\n    <el-descriptions-item>\n      <template slot=\"label\">\n        <i class=\"el-icon-location-outline\"></i>\n        Place\n      </template>\n      Suzhou\n    </el-descriptions-item>\n    <el-descriptions-item>\n      <template slot=\"label\">\n        <i class=\"el-icon-tickets\"></i>\n        Remarks\n      </template>\n      <el-tag size=\"small\">School</el-tag>\n    </el-descriptions-item>\n    <el-descriptions-item>\n      <template slot=\"label\">\n        <i class=\"el-icon-office-building\"></i>\n        Address\n      </template>\n      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province\n    </el-descriptions-item>\n  </el-descriptions>\n\n  <el-descriptions class=\"margin-top\" title=\"Without border\" :column=\"3\" :size=\"size\">\n    <template slot=\"extra\">\n      <el-button type=\"primary\" size=\"small\">Operation</el-button>\n    </template>\n    <el-descriptions-item label=\"Username\">kooriookami</el-descriptions-item>\n    <el-descriptions-item label=\"Telephone\">18100000000</el-descriptions-item>\n    <el-descriptions-item label=\"Place\">Suzhou</el-descriptions-item>\n    <el-descriptions-item label=\"Remarks\">\n      <el-tag size=\"small\">School</el-tag>\n    </el-descriptions-item>\n    <el-descriptions-item label=\"Address\">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>\n  </el-descriptions>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        size: ''\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Vertical List\n\n:::demo\n\n```html\n<el-descriptions title=\"Vertical list with border\" direction=\"vertical\" :column=\"4\" border>\n  <el-descriptions-item label=\"Username\">kooriookami</el-descriptions-item>\n  <el-descriptions-item label=\"Telephone\">18100000000</el-descriptions-item>\n  <el-descriptions-item label=\"Place\" :span=\"2\">Suzhou</el-descriptions-item>\n  <el-descriptions-item label=\"Remarks\">\n    <el-tag size=\"small\">School</el-tag>\n  </el-descriptions-item>\n  <el-descriptions-item label=\"Address\">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>\n</el-descriptions>\n\n<el-descriptions class=\"margin-top\" title=\"Vertical list without border\" :column=\"4\" direction=\"vertical\">\n  <el-descriptions-item label=\"Username\">kooriookami</el-descriptions-item>\n  <el-descriptions-item label=\"Telephone\">18100000000</el-descriptions-item>\n  <el-descriptions-item label=\"Place\" :span=\"2\">Suzhou</el-descriptions-item>\n  <el-descriptions-item label=\"Remarks\">\n    <el-tag size=\"small\">School</el-tag>\n  </el-descriptions-item>\n  <el-descriptions-item label=\"Address\">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>\n</el-descriptions>\n```\n:::\n\n### Customized Style\n\n:::demo\n\n```html\n<el-descriptions title=\"Customized style list\" :column=\"3\" border>\n  <el-descriptions-item label=\"Username\" label-class-name=\"my-label\" content-class-name=\"my-content\">kooriookami</el-descriptions-item>\n  <el-descriptions-item label=\"Telephone\">18100000000</el-descriptions-item>\n  <el-descriptions-item label=\"Place\">Suzhou</el-descriptions-item>\n  <el-descriptions-item label=\"Remarks\">\n    <el-tag size=\"small\">School</el-tag>\n  </el-descriptions-item>\n  <el-descriptions-item label=\"Address\" :content-style=\"{'text-align': 'right'}\">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>\n</el-descriptions>\n<style>\n  .my-label {\n    background: #E1F3D8;\n  }\n\n  .my-content {\n    background: #FDE2E2;\n  }\n</style>\n```\n:::\n\n### Descriptions Attributes\n| Attribute     | Description       | Type       | Accepted Values        | Default   |\n|-------------  |---------------- |---------------- |---------------------- |-------- |\n| border        | with or without border      | boolean  |          —             |    false     |\n| column        | numbers of `Descriptions Item` in one line  | number | — |    3  |\n| direction     | direction of list  | string | vertical / horizontal |    horizontal  |\n| size          | size of list    | string  |    medium / small / mini  |  — |\n| title         | title text, display on the top left    | string  |    —  |  — |\n| extra         | extra text, display on the top right    | string  |    —  |  — |\n| colon | change default props colon value of Descriptions Item   | boolean |    —  |  true |\n| labelClassName          | custom label class name         | string  |          —             |    —     |\n| contentClassName          | custom content class name         | string  |          —             |    —     |\n| labelStyle          | custom label style | object |          —             |    —     |\n| contentStyle         | custom content style | object |          —             |    —     |\n\n### Descriptions Slots\n\n| Name | Description |\n|------|--------|\n| title | custom title, display on the top left  |\n| extra | custom extra area, display on the top right  |\n\n### Descriptions Item Attributes\n| Attribute       | Description        | Type       | Accepted Values       | Default   |\n|-------------  |---------------- |---------------- |---------------------- |-------- |\n| label          | label text         | string  |          —             |    —     |\n| span          | colspan of column       | number  |          —             |    1     |\n| labelClassName          | custom label class name         | string  |          —             |    —     |\n| contentClassName          | custom content class name         | string  |          —             |    —     |\n| labelStyle          | custom label style | object |          —             |    —     |\n| contentStyle         | custom content style | object |          —             |    —     |\n\n### Descriptions Item Slots\n\n| Name | Description |\n|------|--------|\n| label | custom label  |\n"
  },
  {
    "path": "examples/docs/fr-FR/dialog.md",
    "content": "## Dialog\n\nInforme les utilisateurs tout en préservant l'état de la page.\n\n### Usage\n\nLe Dialog ouvre un modal personnalisable.\n\n:::demo Configurez l'attribut `visible` avec un `Boolean`, un modal apparaîtra quand la valeur sera à `true`. Le Dialog possède deux parties: `body` et `footer`, ce-dernier nécessitant un `slot` appelé `footer`. L'attribut optionnel `title` (vide par défaut) définit le titre. Cet exemple montre également comment `before-close` peut être utilisé.\n\n```html\n<el-button type=\"text\" @click=\"dialogVisible = true\">Cliquez pour ouvrir le modal</el-button>\n\n<el-dialog\n  title=\"Tips\"\n  :visible.sync=\"dialogVisible\"\n  width=\"30%\"\n  :before-close=\"handleClose\">\n  <span>Ceci est un message</span>\n  <span slot=\"footer\" class=\"dialog-footer\">\n    <el-button @click=\"dialogVisible = false\">Annuler</el-button>\n    <el-button type=\"primary\" @click=\"dialogVisible = false\">Confirmer</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm('Voulez-vous vraiment quitter ?')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n</script>\n```\n:::\n\n:::tip\n`before-close` ne fonctionne que quand l'utilisateur clique sur l'icône de fermeture en dehors du modal. S'il y a des boutons dans le `footer`, vous pouvez configurer `before-close` grâce à leur évènement click.\n:::\n\n### Personalisation\n\nLe contenu du modal peut être n'importe quoi, tableau ou formulaire compris.\n\n:::demo\n\n```html\n<!-- Table -->\n<el-button type=\"text\" @click=\"dialogTableVisible = true\">Ouvrir un modal avec tableau</el-button>\n\n<el-dialog title=\"Adresse d'expédition\" :visible.sync=\"dialogTableVisible\">\n  <el-table :data=\"gridData\">\n    <el-table-column property=\"date\" label=\"Date\" width=\"150\"></el-table-column>\n    <el-table-column property=\"name\" label=\"Nom\" width=\"200\"></el-table-column>\n    <el-table-column property=\"address\" label=\"Adresse\"></el-table-column>\n  </el-table>\n</el-dialog>\n\n<!-- Form -->\n<el-button type=\"text\" @click=\"dialogFormVisible = true\">Ouvrir un modal avec formulaire</el-button>\n\n<el-dialog title=\"Adresse d'expédition\" :visible.sync=\"dialogFormVisible\">\n  <el-form :model=\"form\">\n    <el-form-item label=\"Nom de promotion\" :label-width=\"formLabelWidth\">\n      <el-input v-model=\"form.name\" autocomplete=\"off\"></el-input>\n    </el-form-item>\n    <el-form-item label=\"Zones\" :label-width=\"formLabelWidth\">\n      <el-select v-model=\"form.region\" placeholder=\"Sélectionnez une zone\">\n        <el-option label=\"Zone No.1\" value=\"shanghai\"></el-option>\n        <el-option label=\"Zone No.2\" value=\"beijing\"></el-option>\n      </el-select>\n    </el-form-item>\n  </el-form>\n  <span slot=\"footer\" class=\"dialog-footer\">\n    <el-button @click=\"dialogFormVisible = false\">Annuler</el-button>\n    <el-button type=\"primary\" @click=\"dialogFormVisible = false\">Confirmer</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: '2016-05-02',\n          name: 'John Smith',\n          address: 'No.1518,  Jinshajiang Road, Putuo District'\n        }, {\n          date: '2016-05-04',\n          name: 'John Smith',\n          address: 'No.1518,  Jinshajiang Road, Putuo District'\n        }, {\n          date: '2016-05-01',\n          name: 'John Smith',\n          address: 'No.1518,  Jinshajiang Road, Putuo District'\n        }, {\n          date: '2016-05-03',\n          name: 'John Smith',\n          address: 'No.1518,  Jinshajiang Road, Putuo District'\n        }],\n        dialogTableVisible: false,\n        dialogFormVisible: false,\n        form: {\n          name: '',\n          region: '',\n          date1: '',\n          date2: '',\n          delivery: false,\n          type: [],\n          resource: '',\n          desc: ''\n        },\n        formLabelWidth: '120px'\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Dialog imbriqué\n\nSi un Dialog est imbriqué dans un autre Dialog, `append-to-body` est requis.\n\n:::demo Normalement l'utilisation de Dialog imbriqué est déconseillée. Si vous avez besoin de plusieurs Dialogs sur la page, vous pouvez les aplatir afin qu'ils soit au même niveau. Si vous devez absolument utiliser un Dialog imbriqué, configurez l'attribut `append-to-body` du Dialog imbriqué à `true` et il sera ajouté au body au lieu de son noeud parent, afin d'avoir un affichage correct.\n```html\n<template>\n  <el-button type=\"text\" @click=\"outerVisible = true\">Ouvrir le modal extérieur</el-button>\n\n  <el-dialog title=\"Modal extérieur\" :visible.sync=\"outerVisible\">\n    <el-dialog\n        width=\"30%\"\n        title=\"Modal intérieur\"\n        :visible.sync=\"innerVisible\"\n        append-to-body>\n    </el-dialog>\n    <div slot=\"footer\" class=\"dialog-footer\">\n      <el-button @click=\"outerVisible = false\">Annuler</el-button>\n      <el-button type=\"primary\" @click=\"innerVisible = true\">Ouvrir le modal intérieur</el-button>\n    </div>\n  </el-dialog>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        outerVisible: false,\n        innerVisible: false\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Centrer le contenu\n\nLe contenu du modal peut être centré.\n\n:::demo Régler `center` à `true` centrera horizontalement le header et le footer. `center` n'affecte que le header et le footer. Le contenu du body pouvant être n'importe quoi, si vous désirez le centrer vous devrez ajouter des règles CSS.\n\n```html\n<el-button type=\"text\" @click=\"centerDialogVisible = true\">Cliquez pour ouvrir le modal</el-button>\n\n<el-dialog\n  title=\"Attention\"\n  :visible.sync=\"centerDialogVisible\"\n  width=\"30%\"\n  center>\n  <span>Le contenu du modal n'est pas centré par défaut.</span>\n  <span slot=\"footer\" class=\"dialog-footer\">\n    <el-button @click=\"centerDialogVisible = false\">Annuler</el-button>\n    <el-button type=\"primary\" @click=\"centerDialogVisible = false\">Confirmer</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        centerDialogVisible: false\n      };\n    }\n  };\n</script>\n```\n:::\n\n:::tip\nLe contenu de Dialog bénéficie du lazy loading, ce qui signifie que le slot par défaut n'est pas généré par le DOM avant la première ouverture. Si vous avez besoin de manipuler le DOM ou d'accéder à un composant via `ref`, vous pouvez le faire avec la callback de l'évènement `open`.\n:::\n\n:::tip\nSi la variable liée à `visible` est gérée dans Vuex, le modificateur `.sync` ne peut pas fonctionner. Dans ce cas retirez-le, écoutez les évènements `open` et `close`, et commitez les mutations Vuex pour mettre à jour la valeur de cette variable.\n:::\n\n### Attributs\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| visible   | Visibilité du Dialog, supporte le modificateur .sync. | boolean | — | false |\n| title     | Titre du Dialog. Peut aussi être passé via un slot (voir la table suivante). | string    | — | — |\n| width     | Largeur du Dialog. | string    | — | 50% |\n| fullscreen     | Si le Dialog doit être en plein écran. | boolean    | — | false |\n| top      | Valeur du `margin-top` du CSS du Dialog. | string    | — | 15vh |\n| modal     | Si un masque est affiché. | boolean   | — | true |\n| modal-append-to-body     | S'il faut ajouter le modal au body. Si `false`, le modal sera ajouter à l'élément parent du Dialog. | boolean   | — | true |\n| append-to-body     | S'il faut ajouter le Dialog au body. Un Dialog imbriqué doit avoir cet attribut à `true`. | boolean   | — | false |\n| lock-scroll     | Si le défilement du body est désactivé. | boolean   | — | true |\n| custom-class      | Nom de classe pour le Dialog | string    | — | — |\n| close-on-click-modal | Si le Dialog peut être fermé en cliquant sur le masque. | boolean    | — | true |\n| close-on-press-escape | Si le Dialog peut être fermé en appuyant sur Echap. | boolean    | — | true |\n| show-close | Si le bouton de fermeture doit apparaître. | boolean    | — | true |\n| before-close | Callback avant la fermeture du Dialog. | function(done)，done est utilisé pour fermer le Dialog. | — | — |\n| center | Si le header et le footer doivent être centrés. | boolean | — | false |\n| destroy-on-close | Destroy elements in Dialog when closed   | boolean | — | false |\n\n### Slot\n\n| Nom | Description |\n|------|--------|\n| — | Contenu du Dialog. |\n| title | Contenu du titre. |\n| footer | Contenu du footer. |\n\n### Évènements\n\n| Nom | Description | Paramètres |\n|---------- |-------- |---------- |\n| open | Se déclenche quand le Dialog s'ouvre. | — |\n| opened | Se déclenche quand l'animation d'ouverture est terminée. | — |\n| close | Se déclenche quand le Dialog se ferme. | — |\n| closed | Se déclenche quand l'animation de fermeture du Dialog est terminée. | — |\n"
  },
  {
    "path": "examples/docs/fr-FR/divider.md",
    "content": "## Divider\n\nUne ligne de séparation entre deux contenus.\n\n### Usage basique\n\nSéparer le texte de deux paragraphes.\n\n:::demo\n```html\n<template>\n  <div>\n    <span>Je suis assis à ma fenêtre ce matin où le monde, tel un passant, s’arrête un instant, me fait signe de la tête et part.</span>\n    <el-divider></el-divider>\n    <span>Les petites pensées sont le bruissement des feuilles; ils ont leur murmure de joie dans mon esprit.</span>\n  </div>\n</template>\n```\n:::\n\n### Contenu personnalisé\n\nVous ajouter du contenu dans la ligne de séparation.\n\n:::demo\n```html\n<template>\n  <div>\n    <span>Vous ne voyez pas ce que vous êtes, ce que vous voyez est votre ombre.</span>\n    <el-divider content-position=\"left\">Rabindranath Tagore</el-divider>\n    <span>Je ne peux pas choisir le meilleur. Le meilleur me choisit.</span>\n    <el-divider><i class=\"el-icon-star-on\"></i></el-divider>\n    <span>Mes souhaits sont des imbéciles, ils crient à travers ta chanson, mon Maître. Laisse-moi mais écoute.</span>\n    <el-divider content-position=\"right\">Rabindranath Tagore</el-divider>\n  </div>\n</template>\n```\n:::\n\n### Séparation verticale\n\n:::demo\n```html\n<template>\n  <div>\n    <span>Pluie</span>\n    <el-divider direction=\"vertical\"></el-divider>\n    <span>Maison</span>\n    <el-divider direction=\"vertical\"></el-divider>\n    <span>Herbe</span>\n  </div>\n</template>\n```\n:::\n\n### Attributs\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|-------------  |---------------- |---------------- |---------------------- |-------- |\n| direction      | Règle la direction du séparateur.  | string  |          horizontal / vertical           |    horizontal     |\n| content-position      | Personnalise le contenu du séparateur. | String  |  left / right / center  |  center |\n"
  },
  {
    "path": "examples/docs/fr-FR/drawer.md",
    "content": "## Drawer\n\nSometimes, `Dialog` does not always satisfy our requirements, let's say you have a massive form, or you need space to display something like `terms & conditions`, `Drawer` has almost identical API with `Dialog`, but it introduces different user experience.\n\n### Basic Usage\n\nCallout a temporary drawer, from multiple direction\n\n:::demo You must set `visible` for `Drawer` like `Dialog` does to control the visibility of `Drawer` itself, it's `boolean` type. `Drawer` has to parts: `title` & `body`, the `title` is a named slot, you can also set the title through attribute named `title`, default to an empty string, the `body` part is the main area of `Drawer`, which contains user defined content. When opening, `Drawer` expand itself from the **right corner to left** which size is **30%** of the browser window by default. You can change that default behavior by setting `direction` and `size` attribute. This show case also demonstrated how to use the `before-close` API, check the Attribute section for more detail\n\n```html\n<el-radio-group v-model=\"direction\">\n  <el-radio label=\"ltr\">left to right</el-radio>\n  <el-radio label=\"rtl\">right to left</el-radio>\n  <el-radio label=\"ttb\">top to bottom</el-radio>\n  <el-radio label=\"btt\">bottom to top</el-radio>\n</el-radio-group>\n\n<el-button @click=\"drawer = true\" type=\"primary\" style=\"margin-left: 16px;\">\n  open\n</el-button>\n\n<el-drawer\n  title=\"I am the title\"\n  :visible.sync=\"drawer\"\n  :direction=\"direction\"\n  :before-close=\"handleClose\">\n  <span>Hi, there!</span>\n</el-drawer>\n\n<script>\n  export default {\n    data() {\n      return {\n        drawer: false,\n        direction: 'rtl',\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm('Are you sure you want to close this?')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n</script>\n```\n:::\n\n### No Title\n\nWhen you no longer need a title, you can remove title from drawer.\n\n:::demo Set the `withHeader` attribute to **false**, you can remove the title from drawer, thus your drawer can have more space on screen. If you want to be accessible, make sure to set the `title` attribute.\n\n```html\n<el-button @click=\"drawer = true\" type=\"primary\" style=\"margin-left: 16px;\">\n  open\n</el-button>\n\n<el-drawer\n  title=\"I am the title\"\n  :visible.sync=\"drawer\"\n  :with-header=\"false\">\n  <span>Hi there!</span>\n</el-drawer>\n\n<script>\n  export default {\n    data() {\n      return {\n        drawer: false,\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Customization Content\n\nLike `Dialog`, `Drawer` can do many diverse interaction as you wanted.\n\n:::demo\n\n```html\n<el-button type=\"text\" @click=\"table = true\">Open Drawer with nested table</el-button>\n<el-button type=\"text\" @click=\"dialog = true\">Open Drawer with nested form</el-button>\n<el-drawer\n  title=\"I have a nested table inside!\"\n  :visible.sync=\"table\"\n  direction=\"rtl\"\n  size=\"50%\">\n   <el-table :data=\"gridData\">\n      <el-table-column property=\"date\" label=\"Date\" width=\"150\"></el-table-column>\n      <el-table-column property=\"name\" label=\"Name\" width=\"200\"></el-table-column>\n      <el-table-column property=\"address\" label=\"Address\"></el-table-column>\n    </el-table>\n</el-drawer>\n\n<el-drawer\n  title=\"I have a nested form inside!\"\n  :before-close=\"handleClose\"\n  :visible.sync=\"dialog\"\n  direction=\"ltr\"\n  custom-class=\"demo-drawer\"\n  ref=\"drawer\"\n  >\n  <div class=\"demo-drawer__content\">\n    <el-form :model=\"form\">\n      <el-form-item label=\"Name\" :label-width=\"formLabelWidth\">\n        <el-input v-model=\"form.name\" autocomplete=\"off\"></el-input>\n      </el-form-item>\n      <el-form-item label=\"Area\" :label-width=\"formLabelWidth\">\n        <el-select v-model=\"form.region\" placeholder=\"Please select activity area\">\n          <el-option label=\"Area1\" value=\"shanghai\"></el-option>\n          <el-option label=\"Area2\" value=\"beijing\"></el-option>\n        </el-select>\n      </el-form-item>\n    </el-form>\n    <div class=\"demo-drawer__footer\">\n      <el-button @click=\"cancelForm\">Cancel</el-button>\n      <el-button type=\"primary\" @click=\"$refs.drawer.closeDrawer()\" :loading=\"loading\">{{ loading ? 'Submitting ...' : 'Submit' }}</el-button>\n    </div>\n  </div>\n</el-drawer>\n\n<script>\nexport default {\n  data() {\n    return {\n      table: false,\n      dialog: false,\n      loading: false,\n      gridData: [{\n        date: '2016-05-02',\n        name: 'Peter Parker',\n        address: 'Queens, New York City'\n      }, {\n        date: '2016-05-04',\n        name: 'Peter Parker',\n        address: 'Queens, New York City'\n      }, {\n        date: '2016-05-01',\n        name: 'Peter Parker',\n        address: 'Queens, New York City'\n      }, {\n        date: '2016-05-03',\n        name: 'Peter Parker',\n        address: 'Queens, New York City'\n      }],\n      form: {\n        name: '',\n        region: '',\n        date1: '',\n        date2: '',\n        delivery: false,\n        type: [],\n        resource: '',\n        desc: ''\n      },\n      formLabelWidth: '80px',\n      timer: null,\n    };\n  },\n  methods: {\n    handleClose(done) {\n      if (this.loading) {\n        return;\n      }\n      this.$confirm('Do you want to submit?')\n        .then(_ => {\n          this.loading = true;\n          this.timer = setTimeout(() => {\n            done();\n            // animation takes time\n            setTimeout(() => {\n              this.loading = false;\n            }, 400);\n          }, 2000);\n        })\n        .catch(_ => {});\n    },\n    cancelForm() {\n      this.loading = false;\n      this.dialog = false;\n      clearTimeout(this.timer);\n    }\n  }\n}\n</script>\n```\n:::\n\n### Nested Drawer\n\nYou can also have multiple layer of `Drawer` just like `Dialog`.\n:::demo If you need multiple Drawer in different layer, you must set the `append-to-body` attribute to **true**\n\n```html\n\n<el-button @click=\"drawer = true\" type=\"primary\" style=\"margin-left: 16px;\">\n  open\n</el-button>\n\n<el-drawer\n  title=\"I'm outer Drawer\"\n  :visible.sync=\"drawer\"\n  size=\"50%\">\n  <div>\n   <el-button @click=\"innerDrawer = true\">Click me!</el-button>\n   <el-drawer\n     title=\"I'm inner Drawer\"\n     :append-to-body=\"true\"\n     :before-close=\"handleClose\"\n     :visible.sync=\"innerDrawer\">\n     <p>_(:зゝ∠)_</p>\n   </el-drawer>\n  </div>\n</el-drawer>\n\n<script>\n  export default {\n    data() {\n      return {\n        drawer: false,\n        innerDrawer: false,\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm('You still have unsaved data, proceed?')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n</script>\n\n```\n:::\n\n:::tip\n\nThe content inside Drawer should be lazy rendered, which means that the content inside Drawer will not impact the initial render performance, therefore any DOM operation should be performed through `ref` or after `open` event emitted.\n\n:::\n\n:::tip\n\nDrawer provides an API called `destroyOnClose`, which is a flag variable that indicates should destroy the children content inside Drawer after Drawer was closed. You can use this API when you need your `mounted` life cycle to be called every time the Drawer opens.\n\n:::\n\n:::tip\n\nIf the variable bound to `visible` is managed in Vuex store, the `.sync` can not work properly. In this case, please remove the `.sync` modifier, listen to `open` and `close` events of Dialog, and commit Vuex mutations to update the value of that variable in the event handlers.\n\n:::\n\n### Drawer Attributes\n\n| Parameter| Description | Type      | Acceptable Values                           | Defaults  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| append-to-body | Controls should Drawer be inserted to DocumentBody Element, nested Drawer must assign this param to **true**| boolean   | — | false |\n| before-close | If set, closing procedure will be halted | function(done), done is function type that accepts a boolean as parameter, calling done with true or without parameter will abort the close procedure | — | — |\n| close-on-press-escape | Indicates whether Drawer can be closed by pressing ESC | boolean | — | true |\n| custom-class | Extra class names for Drawer | string | — | — |\n| destroy-on-close | Indicates whether children should be destroyed after Drawer closed | boolean | - | false |\n| modal | Should show shadowing layer | boolean | — | true |\n| modal-append-to-body | Indicates should shadowing layer be insert into DocumentBody element | boolean   | — | true |\n| direction | Drawer's opening direction | Direction | rtl / ltr / ttb / btt | rtl |\n| show-close | Should show close button at the top right of Drawer | boolean | — | true |\n| size | Drawer's size, if Drawer is horizontal mode, it effects the width property, otherwise it effects the height property, when size is `number` type, it describes the size by unit of pixels; when size is `string` type, it should be used with `x%` notation, other wise it will be interpreted to pixel unit | number / string | - | '30%' |\n| title | Drawer's title, can also be set by named slot, detailed descriptions can be found in the slot form | string | — | — |\n| visible | Should Drawer be displayed, also support the `.sync` notation | boolean | — | false |\n| wrapperClosable | Indicates whether user can close Drawer by clicking the shadowing layer. | boolean | - | true |\n| withHeader | Flag that controls the header section's existance, default to true, when withHeader set to false, both `title attribute` and `title slot` won't work | boolean | - | true |\n\n### Drawer Slot\n\n| Name | Description |\n|------|--------|\n| — | Drawer's Content |\n| title | Drawer Title Section |\n\n### Drawer Methods\n\n| Name | Description |\n| ---- | ---  |\n| closeDrawer | In order to close Drawer, this method will call `before-close`. |\n\n### Drawer Events\n\n| Event Name | Description | Parameter |\n|---------- |-------- |---------- |\n| open  | Triggered before Drawer opening animation begins  | — |\n| opened  | Triggered after Drawer opening animation ended | — |\n| close  | Triggered before Drawer closing animation begins | — |\n| closed | Triggered after Drawer closing animation ended | — |\n"
  },
  {
    "path": "examples/docs/fr-FR/dropdown.md",
    "content": "## Dropdown\nMenu déroulant pour afficher des listes de liens et d'actions possibles.\n\n### Usage\nPassez sur le menu avec la souris pour dérouler son contenu.\n\n:::demo L'élément déclencheur est généré par le `slot` par défaut, et le menu déroulant est généré par le `slot` appelé `dropdown`. Par défaut le menu apparaît simplement en passant la souris sur l'élément déclencheur, sans avoir à cliquer.\n\n```html\n<el-dropdown>\n  <span class=\"el-dropdown-link\">\n    Menu déroulant<i class=\"el-icon-arrow-down el-icon--right\"></i>\n  </span>\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n```\n\n:::\n\n### Élément déclencheur\n\nUtilisez le bouton pour ouvrir le menu déroulant.\n\n:::demo Utilisez `split-button` pour séparer le déclencheur du reste du bouton, ce dernier devenant la partie gauche et le déclencheur la partie droite.\n```html\n<el-dropdown>\n  <el-button type=\"primary\">\n    Liste déroulante<i class=\"el-icon-arrow-down el-icon--right\"></i>\n  </el-button>\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n    <el-dropdown-item>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n<el-dropdown split-button type=\"primary\" @click=\"handleClick\">\n  Liste déroulante\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n    <el-dropdown-item>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown {\n    vertical-align: top;\n  }\n  .el-dropdown + .el-dropdown {\n    margin-left: 15px;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      handleClick() {\n        alert('button click');\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Déclencheur\n\nVous pouvez choisir de déclencher le menu au moment du clic, ou en passant la souris sur l'élément.\n\n:::demo Utilisez l'attribut `trigger`. Par défaut, il est à `hover`.\n\n```html\n<el-row class=\"block-col-2\">\n  <el-col :span=\"12\">\n    <span class=\"demonstration\">En passant la souris</span>\n    <el-dropdown>\n      <span class=\"el-dropdown-link\">\n        Liste déroulante<i class=\"el-icon-arrow-down el-icon--right\"></i>\n      </span>\n      <el-dropdown-menu slot=\"dropdown\">\n        <el-dropdown-item icon=\"el-icon-plus\">Action 1</el-dropdown-item>\n        <el-dropdown-item icon=\"el-icon-circle-plus\">Action 2</el-dropdown-item>\n        <el-dropdown-item icon=\"el-icon-circle-plus-outline\">Action 3</el-dropdown-item>\n        <el-dropdown-item icon=\"el-icon-check\">Action 4</el-dropdown-item>\n        <el-dropdown-item icon=\"el-icon-circle-check\">Action 5</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n  <el-col :span=\"12\">\n    <span class=\"demonstration\">En cliquant</span>\n    <el-dropdown trigger=\"click\">\n      <span class=\"el-dropdown-link\">\n        Liste déroulante<i class=\"el-icon-arrow-down el-icon--right\"></i>\n      </span>\n      <el-dropdown-menu slot=\"dropdown\">\n        <el-dropdown-item icon=\"el-icon-plus\">Action 1</el-dropdown-item>\n        <el-dropdown-item icon=\"el-icon-circle-plus\">Action 2</el-dropdown-item>\n        <el-dropdown-item icon=\"el-icon-circle-plus-outline\">Action 3</el-dropdown-item>\n        <el-dropdown-item icon=\"el-icon-check\">Action 4</el-dropdown-item>\n        <el-dropdown-item icon=\"el-icon-circle-check\">Action 5</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n</el-row>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n  .demonstration {\n    display: block;\n    color: #8492a6;\n    font-size: 14px;\n    margin-bottom: 20px;\n  }\n</style>\n```\n:::\n\n### Fermer le menu\n\nUtilisez l'attribut `hide-on-click` pour déterminer si le menu se ferme après avoir cliqué sur un élément de la liste.\n\n:::demo Par défaut le menu se ferme après avoir cliqué dans la liste. Vous pouvez changer cette option en mettant `hide-on-click` à `false`.\n```html\n<el-dropdown :hide-on-click=\"false\">\n  <span class=\"el-dropdown-link\">\n    Liste déroulante<i class=\"el-icon-arrow-down el-icon--right\"></i>\n  </span>\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n```\n:::\n\n### Évènement command\n\nCliquer sur un élément du dropdown déclenche un évènement \"command\".\nLe paramètre de cet évènement peut être assigné à chaque élément de la liste.\n\n:::demo\n```html\n<el-dropdown @command=\"handleCommand\">\n  <span class=\"el-dropdown-link\">\n    Liste déroulante<i class=\"el-icon-arrow-down el-icon--right\"></i>\n  </span>\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item command=\"a\">Action 1</el-dropdown-item>\n    <el-dropdown-item command=\"b\">Action 2</el-dropdown-item>\n    <el-dropdown-item command=\"c\">Action 3</el-dropdown-item>\n    <el-dropdown-item command=\"d\" disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item command=\"e\" divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      handleCommand(command) {\n        this.$message('click on item ' + command);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Tailles\n\nEn plus de la taille par défaut, le composant Dropdown propose trois autres tailles différentes.\n\n:::demo Utilisez `size` pour déterminer une autre taille parmi `medium`, `small` ou `mini`.\n\n```html\n<el-dropdown split-button type=\"primary\">\n  Défaut\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size=\"medium\" split-button type=\"primary\">\n  Medium\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size=\"small\" split-button type=\"primary\">\n  Small\n  <el-dropdown-menu slot=\"dropdown\">\n   <el-dropdown-item>Action 1</el-dropdown-item>\n   <el-dropdown-item>Action 2</el-dropdown-item>\n   <el-dropdown-item>Action 3</el-dropdown-item>\n   <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size=\"mini\" split-button type=\"primary\">\n  Mini\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item>Action 1</el-dropdown-item>\n    <el-dropdown-item>Action 2</el-dropdown-item>\n    <el-dropdown-item>Action 3</el-dropdown-item>\n    <el-dropdown-item>Action 4</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n```\n:::\n\n\n### Attributs du Dropdown\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|-------------  |---------------- |---------------- |---------------------- |-------- |\n| type          | Type du bouton, se référer au composant `Button`. Ne marche que si `split-button` est `true`.  | string  |  —   |    —     |\n| size          | Taille du menu, marche aussi avec `split button`.  | string  | medium / small / mini  |    —     |\n| split-button | Si le bouton est séparé en deux. | boolean         |     —       | false   |\n| placement    | Emplacement du menu déroulant | string | top/top-start/top-end/bottom/bottom-start/bottom-end  | bottom-end |\n| trigger       | Comment déclencher l'ouverture du menu.     | string  |    hover/click  |  hover |\n| hide-on-click | Si le menu doit disparaître après avoir cliqué sur un élément.     | boolean          | — | true |\n| show-timeout | Délai avant d'afficher le menu (ne marche que si `trigger` est `hover`) | number | — | 250 |\n| hide-timeout | Délai avant de cacher le menu (ne marche que si `trigger` est `hover`) | number | — | 150 |\n| tabindex     | [tabindex](https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/tabindex) de Dropdown | number | — | 0 |\n| disabled     | Si le Dropdown est désactivé | boolean | — | false |\n\n### Dropdown Slots\n\n| Nom | Description |\n|------|--------|\n| — | Contenu du Dropdown. Note: doit être un élément du DOM valide (ex. `<span>, <button> etc.`) ou `el-component`, pour y attacher un évènement.  |\n| dropdown | Contenu du menu du Dropdown, en général un élément `<el-dropdown-menu>`. |\n\n### Évènements du Dropdown\n\n| Nom | Description | Paramètres |\n|---------- |-------- |---------- |\n| click | Si `split-button` est `true`, se déclenche quand le bouton de gauche est cliqué. | — |\n| command | Se déclenche quand un élément de la liste est cliqué. | L'attribut command de l'élément de la liste. |\n| visible-change | Se déclenche quand le menu s'affiche ou disparaît. | `true` quand il apparaît, `false` sinon. |\n\n### Attributs des éléments du menu\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|-------------  |---------------- |---------------- |---------------------- |-------- |\n| command       | Le contenu à envoyer au callback de l'évènement `command` du Dropdown. | string/number/object  |          —             |    —     |\n| disabled      | Si l'élément est désactivé.  | boolean  |          —             |    false     |\n| divided       | Si un diviseur doit être affiché.  | boolean  |          —             |    false     |\n| icon          | Classe de l'icône. | string   |  —  |  —  |\n"
  },
  {
    "path": "examples/docs/fr-FR/empty.md",
    "content": "## Empty\n\nPlaceholder hints for empty states.\n\n### Basic usage\n\n:::demo\n\n```html\n<el-empty description=\"description\"></el-empty>\n```\n:::\n\n### Custom image\n\nUse `image` prop to set image URL.\n\n:::demo\n\n```html\n<el-empty image=\"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png\"></el-empty>\n```\n:::\n\n### Image size\n\nUse `image-size` prop to control image size.\n\n:::demo\n\n```html\n<el-empty :image-size=\"200\"></el-empty>\n```\n:::\n\n### Bottom content\n\nUse the default slot to insert content at the bottom.\n\n:::demo\n```html\n<el-empty>\n  <el-button type=\"primary\">Button</el-button>\n</el-empty>\n```\n:::\n\n### Empty Attributes\n| Attribute       | Description      | Type         | Acceptable Value    | Default Value   |\n|-------------  |---------------- |---------------- |---------------------- |-------- |\n| image          | image URL       | string  |          —             |    —     |\n| image-size    | image size (width)  | number | — |    —  |\n| description  | description    | string  |    —  |  — |\n\n### Empty Slots\n\n| Name | Description |\n|------|--------|\n| default | Custom bottom content  |\n| image | Custom image     |\n| description | Custom description     |\n"
  },
  {
    "path": "examples/docs/fr-FR/form.md",
    "content": "## Form\n\nUn formulaire est constitué des éléments `input`, `radio`, `select`, `checkbox`, etc. Il sert principalement à collecter, vérifier et soumettre des données.\n\n### Formulaire de base\n\nIl peut contenir toutes sortes de champs tels que `input`, `select`, `radio` et `checkbox`.\n\n:::demo Dans chaque composant `form`, il vous faudra utiliser la balise `form-item` pour servir de conteneur à chaque champ.\n\n```html\n<el-form ref=\"form\" :model=\"form\" label-width=\"120px\">\n  <el-form-item label=\"Activity name\">\n    <el-input v-model=\"form.name\"></el-input>\n  </el-form-item>\n  <el-form-item label=\"Activity zone\">\n    <el-select v-model=\"form.region\" placeholder=\"please select your zone\">\n      <el-option label=\"Zone one\" value=\"shanghai\"></el-option>\n      <el-option label=\"Zone two\" value=\"beijing\"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label=\"Activity time\">\n    <el-col :span=\"11\">\n      <el-date-picker type=\"date\" placeholder=\"Choisissez une date\" v-model=\"form.date1\" style=\"width: 100%;\"></el-date-picker>\n    </el-col>\n    <el-col class=\"line\" :span=\"2\">-</el-col>\n    <el-col :span=\"11\">\n      <el-time-picker placeholder=\"Pick a time\" v-model=\"form.date2\" style=\"width: 100%;\"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label=\"Instant delivery\">\n    <el-switch v-model=\"form.delivery\"></el-switch>\n  </el-form-item>\n  <el-form-item label=\"Activity type\">\n    <el-checkbox-group v-model=\"form.type\">\n      <el-checkbox label=\"Online activities\" name=\"type\"></el-checkbox>\n      <el-checkbox label=\"Promotion activities\" name=\"type\"></el-checkbox>\n      <el-checkbox label=\"Offline activities\" name=\"type\"></el-checkbox>\n      <el-checkbox label=\"Simple brand exposure\" name=\"type\"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label=\"Resources\">\n    <el-radio-group v-model=\"form.resource\">\n      <el-radio label=\"Sponsor\"></el-radio>\n      <el-radio label=\"Venue\"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label=\"Activity form\">\n    <el-input type=\"textarea\" v-model=\"form.desc\"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type=\"primary\" @click=\"onSubmit\">Créer</el-button>\n    <el-button>Annuler</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        form: {\n          name: '',\n          region: '',\n          date1: '',\n          date2: '',\n          delivery: false,\n          type: [],\n          resource: '',\n          desc: ''\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log('submit!');\n      }\n    }\n  }\n</script>\n```\n:::\n\n:::tip\n[W3C](https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2) stipule que\n> <i>Lorsqu'il n'y a qu'un seul champ de type texte dans un formulaire, le navigateur devrait accepter la pression de la touche Entrée sur ce champ comme méthode de soumission du formulaire</i>\n\nPour éviter ce comportement, vous pouvez ajouter `@submit.native.prevent` dans `<el-form>`.\n  :::\n\n### Formulaire horizontal\n\nLorsque l'espace vertical est limité et que le formulaire est relativement simple, vous pouvez le placer sur une seule ligne.\n\n:::demo Mettez l'attribut `inline` à `true` et le formulaire sera en une seul ligne.\n\n```html\n<el-form :inline=\"true\" :model=\"formInline\" class=\"demo-form-inline\">\n  <el-form-item label=\"Approved by\">\n    <el-input v-model=\"formInline.user\" placeholder=\"Approved by\"></el-input>\n  </el-form-item>\n  <el-form-item label=\"Activity zone\">\n    <el-select v-model=\"formInline.region\" placeholder=\"Activity zone\">\n      <el-option label=\"Zone one\" value=\"shanghai\"></el-option>\n      <el-option label=\"Zone two\" value=\"beijing\"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item>\n    <el-button type=\"primary\" @click=\"onSubmit\">Query</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        formInline: {\n          user: '',\n          region: ''\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log('submit!');\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Alignement\n\nSuivant votre design, il y a différents moyens d'aligner vos labels.\n\n:::demo L'attribut `label-position` permet de régler l'alignement, il peut être à `top` ou `left`. Quand il est à `top`, les labels sont placés au-dessus des champs.\n\n```html\n<el-radio-group v-model=\"labelPosition\" size=\"small\">\n  <el-radio-button label=\"left\">Left</el-radio-button>\n  <el-radio-button label=\"right\">Right</el-radio-button>\n  <el-radio-button label=\"top\">Top</el-radio-button>\n</el-radio-group>\n<div style=\"margin: 20px;\"></div>\n<el-form :label-position=\"labelPosition\" label-width=\"100px\" :model=\"formLabelAlign\">\n  <el-form-item label=\"Name\">\n    <el-input v-model=\"formLabelAlign.name\"></el-input>\n  </el-form-item>\n  <el-form-item label=\"Activity zone\">\n    <el-input v-model=\"formLabelAlign.region\"></el-input>\n  </el-form-item>\n  <el-form-item label=\"Activity form\">\n    <el-input v-model=\"formLabelAlign.type\"></el-input>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        labelPosition: 'right',\n        formLabelAlign: {\n          name: '',\n          region: '',\n          type: ''\n        }\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Validation\n\nLe composant Form vous permet d'effectuer des vérifications, afin de détecter et corriger les erreurs facilement.\n\n:::demo Ajoutez l'attribut `rules` au composant `Form`, passez les règles de validation, et configurez l'attribut `prop` de `Form-Item` pour ajouter la clé de la règle correspondante au champ. Plus d'informations ici:  [async-validator](https://github.com/yiminghe/async-validator).\n\n```html\n<el-form :model=\"ruleForm\" :rules=\"rules\" ref=\"ruleForm\" label-width=\"120px\" class=\"demo-ruleForm\">\n  <el-form-item label=\"Activity name\" prop=\"name\">\n    <el-input v-model=\"ruleForm.name\"></el-input>\n  </el-form-item>\n  <el-form-item label=\"Activity zone\" prop=\"region\">\n    <el-select v-model=\"ruleForm.region\" placeholder=\"Activity zone\">\n      <el-option label=\"Zone one\" value=\"shanghai\"></el-option>\n      <el-option label=\"Zone two\" value=\"beijing\"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label=\"Activity time\" required>\n    <el-col :span=\"11\">\n      <el-form-item prop=\"date1\">\n        <el-date-picker type=\"date\" placeholder=\"Choisissez une date\" v-model=\"ruleForm.date1\" style=\"width: 100%;\"></el-date-picker>\n      </el-form-item>\n    </el-col>\n    <el-col class=\"line\" :span=\"2\">-</el-col>\n    <el-col :span=\"11\">\n      <el-form-item prop=\"date2\">\n        <el-time-picker placeholder=\"Pick a time\" v-model=\"ruleForm.date2\" style=\"width: 100%;\"></el-time-picker>\n      </el-form-item>\n    </el-col>\n  </el-form-item>\n  <el-form-item label=\"Instant delivery\" prop=\"delivery\">\n    <el-switch v-model=\"ruleForm.delivery\"></el-switch>\n  </el-form-item>\n  <el-form-item label=\"Activity type\" prop=\"type\">\n    <el-checkbox-group v-model=\"ruleForm.type\">\n      <el-checkbox label=\"Online activities\" name=\"type\"></el-checkbox>\n      <el-checkbox label=\"Promotion activities\" name=\"type\"></el-checkbox>\n      <el-checkbox label=\"Offline activities\" name=\"type\"></el-checkbox>\n      <el-checkbox label=\"Simple brand exposure\" name=\"type\"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label=\"Resources\" prop=\"resource\">\n    <el-radio-group v-model=\"ruleForm.resource\">\n      <el-radio label=\"Sponsorship\"></el-radio>\n      <el-radio label=\"Venue\"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label=\"Activity form\" prop=\"desc\">\n    <el-input type=\"textarea\" v-model=\"ruleForm.desc\"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type=\"primary\" @click=\"submitForm('ruleForm')\">Créer</el-button>\n    <el-button @click=\"resetForm('ruleForm')\">Réinitialiser</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        ruleForm: {\n          name: '',\n          region: '',\n          date1: '',\n          date2: '',\n          delivery: false,\n          type: [],\n          resource: '',\n          desc: ''\n        },\n        rules: {\n          name: [\n            { required: true, message: 'Please input Activity name', trigger: 'blur' },\n            { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }\n          ],\n          region: [\n            { required: true, message: 'Please select Activity zone', trigger: 'change' }\n          ],\n          date1: [\n            { type: 'date', required: true, message: 'Please pick a date', trigger: 'change' }\n          ],\n          date2: [\n            { type: 'date', required: true, message: 'Please pick a time', trigger: 'change' }\n          ],\n          type: [\n            { type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change' }\n          ],\n          resource: [\n            { required: true, message: 'Please select activity resource', trigger: 'change' }\n          ],\n          desc: [\n            { required: true, message: 'Please input activity form', trigger: 'blur' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Validations personnalisées\n\nCet exemple montre comment vous pouvez personnaliser vos règles de validation pour effectuer une identification à deux facteurs.\n\n:::demo Ici, nous utilisons `status-icon` pour afficher le résultat de la validation sous forme d'icône.\n```html\n<el-form :model=\"ruleForm\" status-icon :rules=\"rules\" ref=\"ruleForm\" label-width=\"120px\" class=\"demo-ruleForm\">\n  <el-form-item label=\"Password\" prop=\"pass\">\n    <el-input type=\"password\" v-model=\"ruleForm.pass\" autocomplete=\"off\"></el-input>\n  </el-form-item>\n  <el-form-item label=\"Confirm\" prop=\"checkPass\">\n    <el-input type=\"password\" v-model=\"ruleForm.checkPass\" autocomplete=\"off\"></el-input>\n  </el-form-item>\n  <el-form-item label=\"Age\" prop=\"age\">\n    <el-input v-model.number=\"ruleForm.age\"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type=\"primary\" @click=\"submitForm('ruleForm')\">Submit</el-button>\n    <el-button @click=\"resetForm('ruleForm')\">Réinitialiser</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      var checkAge = (rule, value, callback) => {\n        if (!value) {\n          return callback(new Error('Veuillez entrer l\\'âge'));\n        }\n        setTimeout(() => {\n          if (!Number.isInteger(value)) {\n            callback(new Error('Veuillez entrer des chiffres'));\n          } else {\n            if (value < 18) {\n              callback(new Error('L\\'âge doit être supérieur à 18 ans'));\n            } else {\n              callback();\n            }\n          }\n        }, 1000);\n      };\n      var validatePass = (rule, value, callback) => {\n        if (value === '') {\n          callback(new Error('Veuillez entrer le mot de passe'));\n        } else {\n          if (this.ruleForm.checkPass !== '') {\n            this.$refs.ruleForm.validateField('checkPass');\n          }\n          callback();\n        }\n      };\n      var validatePass2 = (rule, value, callback) => {\n        if (value === '') {\n          callback(new Error('Veuillez entrer à nouveau le mot de passe'));\n        } else if (value !== this.ruleForm.pass) {\n          callback(new Error('Les deux entrées ne correspondent pas!'));\n        } else {\n          callback();\n        }\n      };\n      return {\n        ruleForm: {\n          pass: '',\n          checkPass: '',\n          age: ''\n        },\n        rules: {\n          pass: [\n            { validator: validatePass, trigger: 'blur' }\n          ],\n          checkPass: [\n            { validator: validatePass2, trigger: 'blur' }\n          ],\n          age: [\n            { validator: checkAge, trigger: 'blur' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n</script>\n```\n:::\n\n:::tip\nLes callback de validations personnalisées doivent être appelées. Un usage plus avancé se trouve ici: [async-validator](https://github.com/yiminghe/async-validator).\n:::\n\n### Ajouter ou supprimer des champs dynamiquement\n\n:::demo En plus de pouvoir passer toutes les règles de validation en une seule fois au formulaire, vous pouvez aussi ajouter ou supprimer des règles sur un seul champ de manière dynamique.\n```html\n<el-form :model=\"dynamicValidateForm\" ref=\"dynamicValidateForm\" label-width=\"120px\" class=\"demo-dynamic\">\n  <el-form-item\n    prop=\"email\"\n    label=\"Email\"\n    :rules=\"[\n      { required: true, message: 'Veuillez entrer l\\'adresse e-mail', trigger: 'blur' },\n      { type: 'email', message: 'Veuillez entrer une adresse e-mail valide', trigger: ['blur', 'change'] }\n    ]\"\n  >\n    <el-input v-model=\"dynamicValidateForm.email\"></el-input>\n  </el-form-item>\n  <el-form-item\n    v-for=\"(domain, index) in dynamicValidateForm.domains\"\n    :label=\"'Domain' + index\"\n    :key=\"domain.key\"\n    :prop=\"'domains.' + index + '.value'\"\n    :rules=\"{\n      required: true, message: 'domain ne peut pas être null', trigger: 'blur'\n    }\"\n  >\n    <el-input v-model=\"domain.value\"></el-input><el-button @click.prevent=\"removeDomain(domain)\">Supprimer</el-button>\n  </el-form-item>\n  <el-form-item>\n    <el-button type=\"primary\" @click=\"submitForm('dynamicValidateForm')\">Soumettre</el-button>\n    <el-button @click=\"addDomain\">Nouveau domaine</el-button>\n    <el-button @click=\"resetForm('dynamicValidateForm')\">Réinitialiser</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        dynamicValidateForm: {\n          domains: [{\n            key: 1,\n            value: ''\n          }],\n          email: ''\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      },\n      removeDomain(item) {\n        var index = this.dynamicValidateForm.domains.indexOf(item);\n        if (index !== -1) {\n          this.dynamicValidateForm.domains.splice(index, 1);\n        }\n      },\n      addDomain() {\n        this.dynamicValidateForm.domains.push({\n          key: Date.now(),\n          value: ''\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Validation des nombres\n\n:::demo Pour valider les nombres correctement, il vous faudra ajouter le modificateur `.number` à l'attribut `v-model`. Il est utilisé par Vuejs pour transformer les valeurs en nombres .\n```html\n<el-form :model=\"numberValidateForm\" ref=\"numberValidateForm\" label-width=\"100px\" class=\"demo-ruleForm\">\n  <el-form-item\n    label=\"age\"\n    prop=\"age\"\n    :rules=\"[\n      { required: true, message: 'l\\'âge est requis'},\n      { type: 'number', message: 'l\\'âge doit être un nombre'}\n    ]\"\n  >\n    <el-input v-model.number=\"numberValidateForm.age\" autocomplete=\"off\"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type=\"primary\" @click=\"submitForm('numberValidateForm')\">Soumettre</el-button>\n    <el-button @click=\"resetForm('numberValidateForm')\">Réinitialiser</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        numberValidateForm: {\n          age: ''\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n</script>\n```\n:::\n\n:::tip\nLorsqu'un `el-form-item` est imbriqué dans un autre `el-form-item`, la largeur de son label sera `0`. Utilisez `label-width` sur ce `el-form-item` si besoin.\n:::\n\n### Taille\n\nTout les composants d'un formulaire héritent leur attribut `size` de ce formulaire. Il est aussi possible de l'utiliser individuellement sur chaque FormItem.\n\n:::demo Vous pouvez régler le `size` de chaque item si vous ne souhaitez pas qu'il hérite de son parent.\n```html\n<el-form ref=\"form\" :model=\"sizeForm\" label-width=\"120px\" size=\"mini\">\n  <el-form-item label=\"Activity name\">\n    <el-input v-model=\"sizeForm.name\"></el-input>\n  </el-form-item>\n  <el-form-item label=\"Activity zone\">\n    <el-select v-model=\"sizeForm.region\" placeholder=\"veuillez sélectionner votre zone\">\n      <el-option label=\"Zone one\" value=\"shanghai\"></el-option>\n      <el-option label=\"Zone two\" value=\"beijing\"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label=\"Activity time\">\n    <el-col :span=\"11\">\n      <el-date-picker type=\"date\" placeholder=\"Choisissez une date\" v-model=\"sizeForm.date1\" style=\"width: 100%;\"></el-date-picker>\n    </el-col>\n    <el-col class=\"line\" :span=\"2\">-</el-col>\n    <el-col :span=\"11\">\n      <el-time-picker placeholder=\"Choisissez une heure\" v-model=\"sizeForm.date2\" style=\"width: 100%;\"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label=\"Activity type\">\n    <el-checkbox-group v-model=\"sizeForm.type\">\n      <el-checkbox-button label=\"Online activities\" name=\"type\"></el-checkbox-button>\n      <el-checkbox-button label=\"Promotion activities\" name=\"type\"></el-checkbox-button>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label=\"Resources\">\n    <el-radio-group v-model=\"sizeForm.resource\" size=\"medium\">\n      <el-radio border label=\"Sponsor\"></el-radio>\n      <el-radio border label=\"Venue\"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item size=\"large\">\n    <el-button type=\"primary\" @click=\"onSubmit\">Créer</el-button>\n    <el-button>Annuler</el-button>\n  </el-form-item>\n</el-form>\n\n<script>\n  export default {\n    data() {\n      return {\n        sizeForm: {\n          name: '',\n          region: '',\n          date1: '',\n          date2: '',\n          delivery: false,\n          type: [],\n          resource: '',\n          desc: ''\n        }\n      };\n    },\n    methods: {\n      onSubmit() {\n        console.log('submit!');\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Attributs de Form\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n| ---- | ----| ---- | ---- | ---- |\n| model| Données du formulaire. | object | — | — |\n| rules | Règles de validation du formulaire. | object | — | — |\n| inline | Si le formulaire est horizontal. | boolean | — | false |\n| label-position | Position des labels. Si 'left' ou 'right', `label-width` est aussi requis. | string | left / right / top | right |\n| label-width | Largeur des labels, tout les enfants directs hériteront de cette valeur. La largeur `auto` est supportée. | string | — | — |\n| label-suffix | Suffixe de labels. | string | — | — |\n| hide-required-asterisk | Si les champs obligatoires doivent avoir une astérisque rouge (étoile) à coté de leurs labels. | boolean | — | false |\n| show-message  | Si le message d'erreur doit apparaître. | boolean | — | true |\n| inline-message  | Si le message d'erreur doit apparaître en ligne avec son champ. | boolean | — | false |\n| status-icon  | Si une icône indiquant le résultat de validation doit apparaître. | boolean | — | false |\n| validate-on-rule-change  | Si la validation doit se déclencher lorsque `rules` est modifié. | boolean | — | true |\n| size  | Contrôle la taille des champs du formulaire. | string | medium / small / mini | — |\n| disabled | Si tout les champs du formulaire doivent être désactivés. Si `true`, il ne peut pas être modifié par l'attribut `disabled` des enfants. | boolean | — | false |\n\n### Méthodes de Form\n\n| Méthode | Description | Paramètres |\n| ---- | ---- | ---- |\n| validate | Valide le formulaire. Prends une callback en paramètre. Après la validation, la callback est exécutée avec deux paramètres: un boolean indiquant si la validation est bonne, et un objet contenant tout les champs qui ont échoués. Retourne une promesse si aucune callback n'est passée. | Function(callback: Function(boolean, object)) |\n| validateField | Valide un ou plusieurs champs du formulaire. | Function(props: string \\| array, callback: Function(errorMessage: string)) |\n| resetFields | Efface tout les champs et les résultats de validation. | — |\n| clearValidate | Efface les messages de validation de certains champs. Le paramètre est le nom du champ ou une liste des champs concernés. S'il est omis, tout les champs seront concernés. | Function(props: string \\| array) |\n\n### Évènnements de Form\n\n| Nom | Description | Paramètres |\n|----------- |------------ |----------- |\n| validate   | Se déclenche après la validation d'un champ. | Nom du champs qui a été validé, si la validation est bonne et le message d'erreur sinon. |\n\n### Attributs de FormItem\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n| ---- | ----| ---- | ---- | ---- |\n| prop | Une des clés de `model`. Utilisés par les méthodes validate et resetFields. Requis. | string | Clés du model passé à `form`. |\n| label | Le label. | string | — | — |\n| label-width | Largeur du label, e.g. '50px'. La largeur `auto` est supportée. | string | — | — |\n| required | Si le champ est requis ou non. Si omis, sera déterminé par les règles de validation. | boolean |  — | false |\n| rules | Règles de validation du formulaire. | object | — | — |\n| error | Message d'erreur du champ. S'il est modifié, le champ l'affichera immédiatement. | string | — | — |\n| show-message  | Si le message d'erreur doit apparaître. | boolean | — | true |\n| inline-message  | Si le message d'erreur doit être en ligne avec le champ. | boolean | — | false |\n| size  | Contrôle la taille du FormItem. | string | medium / small / mini | - |\n\n### Slot de Form-Item\n| Nom | Description |\n|------|--------|\n| — | Contenu de Form Item. |\n| label | Contenu du label. |\n\n### Slot avec portée de Form-Item\n|      Nom     | Description |\n|---------------|-------------|\n|      error    | Contenu personnalisé pour les messages de validation. Le paramètre du scope est { error }. |\n\n### Méthodes de Form-Item\n\n| Méthode | Description | Paramètres |\n| ---- | ---- | ---- |\n| resetField | Efface le champ et les résultats de validation. | — |\n| clearValidate | Efface le status de validation du champ. | - |\n"
  },
  {
    "path": "examples/docs/fr-FR/i18n.md",
    "content": "## Internationalisation\n\nLa langue par défaut d'Element est le Chinois. Si vous souhaitez utiliser une autre langue, il vous faudra la configurer. Par exemple, dans votre fichier d'entrée, si vous importez Element entièrement:\n\n```javascript\nimport Vue from 'vue'\nimport ElementUI from 'element-ui'\nimport locale from 'element-ui/lib/locale/lang/en'\n\nVue.use(ElementUI, { locale })\n```\n\nOu si vous importez Element à la demande:\n\n```javascript\nimport Vue from 'vue'\nimport { Button, Select } from 'element-ui'\nimport lang from 'element-ui/lib/locale/lang/en'\nimport locale from 'element-ui/lib/locale'\n\n// configure la langue\nlocale.use(lang)\n\n// importe les composants\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n```\n\nLa pack de la langue Chinois est importé par défaut, même si vous configurez une autre langue. En utilisant le `NormalModuleReplacementPlugin` fournit par webpack vous pouvez remplacer la locale par défaut:\n\nwebpack.config.js\n```javascript\n{\n  plugins: [\n    new webpack.NormalModuleReplacementPlugin(/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/, 'element-ui/lib/locale/lang/en')\n  ]\n}\n```\n\n## Compatible avec `vue-i18n@5.x`\n\nElement est compatible avec [vue-i18n@5.x](https://github.com/kazupon/vue-i18n), ce qui rend le changement de langue encore plus simple.\n\n```javascript\nimport Vue from 'vue'\nimport VueI18n from 'vue-i18n'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\nVue.use(Element)\n\nVue.config.lang = 'zh-cn'\nVue.locale('zh-cn', zhLocale)\nVue.locale('en', enLocale)\n```\n\n## Compatible avec d'autres plugins i18n\n\nElement n'est pas forcément compatible avec d'autres plugins i18n que vue-i18n, mais vous pouvez configurer le fonctionnement i18n.\n\n```javascript\nimport Vue from 'vue'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(Element, {\n  i18n: function (path, options) {\n    // ...\n  }\n})\n```\n\n## Compatible avec `vue-i18n@6.x`\n\nVous devrez le configurer manuellement pour la compatibilité avec `6.x`.\n\n```javascript\nimport Vue from 'vue'\nimport Element from 'element-ui'\nimport VueI18n from 'vue-i18n'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\n\nconst messages = {\n  en: {\n    message: 'hello',\n    ...enLocale // Ou utilisez `Object.assign({ message: 'hello' }, enLocale)`\n  },\n  zh: {\n    message: '你好',\n    ...zhLocale // Ou utilisez `Object.assign({ message: '你好' }, zhLocale)`\n  }\n}\n\n// Crée l'instance de VueI18n avec ses options\nconst i18n = new VueI18n({\n  locale: 'en', // indique la locale\n  messages, // indique les messages\n})\n\nVue.use(Element, {\n  i18n: (key, value) => i18n.t(key, value)\n})\n\nnew Vue({ i18n }).$mount('#app')\n```\n\n## i18n personnalisée dans les composants à la demande\n\n```js\nimport Vue from 'vue'\nimport DatePicker from 'element/lib/date-picker'\nimport VueI18n from 'vue-i18n'\n\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\nimport ElementLocale from 'element-ui/lib/locale'\n\nVue.use(VueI18n)\nVue.use(DatePicker)\n\nconst messages = {\n  en: {\n    message: 'hello',\n    ...enLocale\n  },\n  zh: {\n    message: '你好',\n    ...zhLocale\n  }\n}\n\n// Crée l'instance de VueI18n avec ses options\nconst i18n = new VueI18n({\n  locale: 'en', // indique la locale\n  messages, // indique les messages\n})\n\nElementLocale.i18n((key, value) => i18n.t(key, value))\n```\n\n## Import via un CDN\n\n```html\n<script src=\"//unpkg.com/vue@2\"></script>\n<script src=\"//unpkg.com/element-ui\"></script>\n<script src=\"//unpkg.com/element-ui/lib/umd/locale/en.js\"></script>\n\n<script>\n  ELEMENT.locale(ELEMENT.lang.en)\n</script>\n```\n\nCompatible avec `vue-i18n`\n\n```html\n<script src=\"//unpkg.com/vue@2\"></script>\n<script src=\"//unpkg.com/vue-i18n/dist/vue-i18n.js\"></script>\n<script src=\"//unpkg.com/element-ui\"></script>\n<script src=\"//unpkg.com/element-ui/lib/umd/locale/zh-CN.js\"></script>\n<script src=\"//unpkg.com/element-ui/lib/umd/locale/en.js\"></script>\n\n<script>\n  Vue.locale('en', ELEMENT.lang.en)\n  Vue.locale('zh-cn', ELEMENT.lang.zhCN)\n</script>\n```\n\nActuellement, Element supporte les langues suivantes:\n<ul class=\"language-list\">\n  <li>Chinois simplifié (zh-CN)</li>\n  <li>Anglais (en)</li>\n  <li>Allemand (de)</li>\n  <li>Portugais (pt)</li>\n  <li>Espagnol (es)</li>\n  <li>Danois (da)</li>\n  <li>Français (fr)</li>\n  <li>Norvégien (nb-NO)</li>\n  <li>Chinois traditionnel (zh-TW)</li>\n  <li>Italien (it)</li>\n  <li>Coréen (ko)</li>\n  <li>Japonais (ja)</li>\n  <li>Néerlandais (nl)</li>\n  <li>Vietnamien (vi)</li>\n  <li>Russe (ru-RU)</li>\n  <li>Turque (tr-TR)</li>\n  <li>Portugais brésilien (pt-br)</li>\n  <li>Farsi (fa)</li>\n  <li>Thaï (th)</li>\n  <li>Indonésien (id)</li>\n  <li>Bulgare (bg)</li>\n  <li>Polonais (pl)</li>\n  <li>Finnois (fi)</li>\n  <li>Suédois (sv-SE)</li>\n  <li>Grec (el)</li>\n  <li>Slovaque (sk)</li>\n  <li>Catalan (ca)</li>\n  <li>Tchèque (cs-CZ)</li>\n  <li>Ukrainien (ua)</li>\n  <li>Turkmène (tk)</li>\n  <li>Tamoul (ta)</li>\n  <li>Letton (lv)</li>\n  <li>Afrikaans (af-ZA)</li>\n  <li>Estonien (ee)</li>\n  <li>Slovène (sl)</li>\n  <li>Arabe (ar)</li>\n  <li>Hébreu (he)</li>\n  <li>Lituanien (lt)</li>\n  <li>Mongol (mn)</li>\n  <li>Kazakh (kz)</li>\n  <li>Hongrois (hu)</li>\n  <li>Roumain (ro)</li>\n  <li>Kurde (ku)</li>\n  <li>Ouïghour (ug-CN)</li>\n  <li>Khmer (km)</li>\n  <li>Serbe (sr)</li>\n  <li>Basque (eu)</li>\n  <li>Kirghize (kg)</li>\n  <li>Croate (hr)</li>\n  <li>Arménien (hy)</li>\n  <li>Espéranto (eo)</li>\n</ul>\n\nSi votre langue n'apparaît pas dans la liste, n'hésitez pas a contribuer: ajoutez simplement un fichier de configuration [ici](https://github.com/ElemeFE/element/tree/dev/src/locale/lang) et créez une pull request.\n"
  },
  {
    "path": "examples/docs/fr-FR/icon.md",
    "content": "## Icônes\n\nElement fournit un ensemble d'icônes basiques.\n\n### Usage\n\nIl vous suffit d'assigner le nom de classe `el-icon-iconName` à une balise `<i>`.\n\n:::demo\n\n```html\n<i class=\"el-icon-edit\"></i>\n<i class=\"el-icon-share\"></i>\n<i class=\"el-icon-delete\"></i>\n<el-button type=\"primary\" icon=\"el-icon-search\">Chercher</el-button>\n\n```\n:::\n\n### Icônes\n\n<ul class=\"icon-list\">\n  <li v-for=\"name in $icon\" :key=\"name\">\n    <span>\n      <i :class=\"'el-icon-' + name\"></i>\n      <span class=\"icon-name\">{{'el-icon-' + name}}</span>\n    </span>\n  </li>\n</ul>\n"
  },
  {
    "path": "examples/docs/fr-FR/image.md",
    "content": "## Image\n\nEn plus des propriétés natives de img, ce composant supporte le lazy loading, les placeholder personnalisés, les échecs de téléchargement, etc.\n\n### Usage basique\n\n:::demo Indique comment l'image devrait être redimmensionnée pour s'adapter à son conteneur grâce à `fit`, identique au [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) natif.\n```html\n<div class=\"demo-image\">\n  <div class=\"block\" v-for=\"fit in fits\" :key=\"fit\">\n    <span class=\"demonstration\">{{ fit }}</span>\n    <el-image\n      style=\"width: 100px; height: 100px\"\n      :src=\"url\"\n      :fit=\"fit\"></el-image>\n  </div>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],\n        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Placeholder\n\n:::demo Placeholder personnalisé qui s'affiche lorsque l'image n'est pas encore chargée, grâce à `slot = placeholder`.\n```html\n<div class=\"demo-image__placeholder\">\n  <div class=\"block\">\n    <span class=\"demonstration\">Défaut</span>\n    <el-image :src=\"src\"></el-image>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Personnalisé</span>\n    <el-image :src=\"src\">\n      <div slot=\"placeholder\" class=\"image-slot\">\n        Chargement<span class=\"dot\">...</span>\n      </div>\n    </el-image>\n  </div>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Échec du chargement\n\n:::demo Contenu personnalisé qui s'affiche lorsque le chargement a échoué, grâce à `slot = error`.\n```html\n<div class=\"demo-image__error\">\n  <div class=\"block\">\n    <span class=\"demonstration\">Défaut</span>\n    <el-image></el-image>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Personnalisé</span>\n    <el-image>\n      <div slot=\"error\" class=\"image-slot\">\n        <i class=\"el-icon-picture-outline\"></i>\n      </div>\n    </el-image>\n  </div>\n</div>\n```\n:::\n\n### Lazy Loading\n\n:::demo Utilisez le lazy loading avec `lazy = true`. Les images ne se chargeront que lorsque le scrolling les atteindra. Vous pouvez indiquer le conteneur grâce à `scroll-container`. Si undefined, ce sera le conteneur parent le plus proche avec la propriété overflow à auto ou scroll.\n```html\n<div class=\"demo-image__lazy\">\n  <el-image v-for=\"url in urls\" :key=\"url\" :src=\"url\" lazy></el-image>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        urls: [\n          'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',\n          'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',\n          'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',\n          'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',\n          'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',\n          'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',\n          'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'\n        ]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Image Preview\n\n:::demo allow big image preview by setting `previewSrcList` prop.\n```html\n<div class=\"demo-image__preview\">\n  <el-image \n    style=\"width: 100px; height: 100px\"\n    :src=\"url\" \n    :preview-src-list=\"srcList\">\n  </el-image>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',\n        srcList: [\n          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',\n          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'\n        ]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Attributs\n| Attribut | Description | Type  | Valeurs acceptées | Défaut   |\n|---------- |-------- |---------- |-------------  |-------- |\n| src | Source de l'image, identique au natif. | string | — | - |\n| fit | Indique comment l'image devrait être redimmensionnée pour s'adapter à son conteneur, identique à [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) | string | fill / contain / cover / none / scale-down | - |\n| alt | Attribut alt natif.| string | - | - |\n| referrer-policy | Attribut referrerPolicy natif.| string | - | - |\n| lazy | Si le lazy loading doit être utilisé. | boolean | — | false |\n| scroll-container | Le conteneur auquel ajouter le listener du scroll en mode lazy loading. | string / HTMLElement | — | Le conteneur parent le plus proche avec la propriété overflow à auto ou scroll. |\n| preview-src-list | allow big image preview | Array | — | - |\n| z-index | set image preview z-index | Number | — | 2000 |\n| initial-index | set image preview array index | Number | — | - |\n\n### Évènements\n| Nom | Description | Paramètres |\n|---------- |-------- |---------- |\n| load | Identique au load natif. | (e: Event) |\n| error | Identique au error natif. | (e: Error) |\n\n### Slots\n| Nom | Description |\n|---------|-------------|\n| placeholder | Se déclenche quand l'image charge. |\n| error | Se déclenche quand le chargement de l'image a échoué. |\n"
  },
  {
    "path": "examples/docs/fr-FR/infiniteScroll.md",
    "content": "## InfiniteScroll\n\nCharge plus de données quand le bas de la page est atteint\n\n### Utilisation de base\nAjoutez `v-infinite-scroll` à la liste pour exécuter automatiquement la méthode de chargement lors du défilement vers le bas.\n:::demo\n```html\n<template>\n  <ul class=\"infinite-list\" v-infinite-scroll=\"load\" style=\"overflow:auto\">\n    <li v-for=\"i in count\" class=\"infinite-list-item\">{{ i }}</li>\n  </ul>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        count: 0\n      }\n    },\n    methods: {\n      load () {\n        this.count += 2\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Désactiver le chargement\n\n:::demo\n```html\n<template>\n  <div class=\"infinite-list-wrapper\" style=\"overflow:auto\">\n    <ul\n      class=\"list\"\n      v-infinite-scroll=\"load\"\n      infinite-scroll-disabled=\"disabled\">\n      <li v-for=\"i in count\" class=\"list-item\">{{ i }}</li>\n    </ul>\n    <p v-if=\"loading\">Loading...</p>\n    <p v-if=\"noMore\">Pas plus</p>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        count: 10,\n        loading: false\n      }\n    },\n    computed: {\n      noMore () {\n        return this.count >= 20\n      },\n      disabled () {\n        return this.loading || this.noMore\n      }\n    },\n    methods: {\n      load () {\n        this.loading = true\n        setTimeout(() => {\n          this.count += 2\n          this.loading = false\n        }, 2000)\n      }\n    }\n  }\n</script>\n```\n:::\n\n\n### Attributs\n\n| Attribut | Description | Type  | Valeur acceptées | Défaut   |\n| -------------- | ------------------------------ | --------- | ------------------------------------ | ------- |\n| infinite-scroll-disabled | Est désactivé           | boolean      | - |false |\n| infinite-scroll-delay   | Throttle le delais (ms)   | number       |   - |200   |\n| infinite-scroll-distance| Distance de déclenchement (px) | number   |- |0 |\n| infinite-scroll-immediate | S'il faut exécuter la méthode de chargement immédiatement, au cas où le contenu ne pourrait pas être set à l'état initial. | boolean | - |true |\n"
  },
  {
    "path": "examples/docs/fr-FR/input-number.md",
    "content": "## InputNumber\n\nUn champ d'input de valeurs numériques, avec un domaine personnalisable.\n\n### Usage\n\n:::demo Liez une variable à `v-model` dans l'élément `<el-input-number>` et c'est tout !\n\n```html\n<template>\n  <el-input-number v-model=\"num\" @change=\"handleChange\" :min=\"1\" :max=\"10\"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value)\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Désactivé\n\n:::demo L'attribut `disabled` accepte un `boolean` et si la valeur est `true`, le composant sera désactivé. Si vous souhaitez juste contrôler le domaine des valeurs possibles, ajoutez l'attribut `min` pour régler la valeur minimale et `max` pour la valeur maximale. Par défaut, la valeur minimale est `0`.\n\n```html\n<template>\n  <el-input-number v-model=\"num\" :disabled=\"true\"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num: 1\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Pas\n\nVous pouvez déterminer un pas pour le champs.\n\n:::demo Ajoutez l'attribut `step` pour configurer le pas.\n\n```html\n<template>\n  <el-input-number v-model=\"num\" :step=\"2\"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num: 5\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Pas strict\n\n:::demo L'attribut `step-strictly` accepte un `boolean`. Si cet attribut est `true`, la valeur de l'input ne peut être qu'un multiple de `step`.\n\n```html\n<template>\n  <el-input-number v-model=\"num\" :step=\"2\" step-strictly></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num: 2\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Précision\n\n:::demo Ajoutez l'attribut `precision` pour régler la précision du champs.\n\n```html\n<template>\n  <el-input-number v-model=\"num\" :precision=\"2\" :step=\"0.1\" :max=\"10\"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num: 1\n      }\n    }\n  };\n</script>\n```\n\n:::\n\n:::tip\nLa valeur de `precision` doit être un integer non négatif et ne doit pas être inférieure aux décimales de `step`.\n:::\n\n### Taille\n\nUtilisez l'attribut `size` pour régler la taille avec `medium`, `small` ou `mini`.\n\n:::demo\n\n```html\n<template>\n  <el-input-number v-model=\"num1\"></el-input-number>\n    <el-input-number size=\"medium\" v-model=\"num2\"></el-input-number>\n    <el-input-number size=\"small\" v-model=\"num3\"></el-input-number>\n    <el-input-number size=\"mini\" v-model=\"num4\"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num1: 1,\n        num2: 1,\n        num3: 1,\n        num4: 1\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Position des contrôles\n\n:::demo Réglez `controls-position` pour déterminer la position des boutons.\n```html\n<template>\n  <el-input-number v-model=\"num\" controls-position=\"right\" @change=\"handleChange\" :min=\"1\" :max=\"10\"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Attributs\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|----| ----| ---| ----| -----|\n| value / v-model | La valeur liée. | number | — | 0 |\n| min | La valeur minimale autorisée. | number | — | `-Infinity` |\n| max | La valeur maximale autorisée. | number | — | `Infinity` |\n| step | Le pas pour l'incrémentation. | number | — | 1 |\n| step-strictly | Si la valeur ne peut être qu'un multiple du pas. | boolean   | — | false |\n| precision | La précision de la valeur. | number | — | — |\n| size | La taille du composant. | string | large/small| — |\n| disabled| Si le composant est désactivé. | boolean | — | false |\n| controls| Si les boutons sont visibles. | boolean | — | true |\n| controls-position | Position des boutons. | string | right | - |\n| name | Identique à `name` dans l'input natif. | string | — | — |\n| label | Texte du label. | string | — | — |\n| placeholder | Placeholder du champ. | string | - | - |\n\n### Évènements\n\n| Nom | Description | Paramètres |\n|----| ---- | -----|\n| change | Se déclenche quand la valeur change. | currentValue, oldValue |\n| blur | Se déclenche quand le champ perds le focus. | (event: Event) |\n| focus | Se déclenche quand le champ a le focus. | (event: Event) |\n\n### Méthodes\n\n| Méthode | Description | Paramètres |\n|------|--------|-------|\n| focus | Met le focus sur le composant. | - |\n| select | Sélectionne le texte dans le champ. | — |\n"
  },
  {
    "path": "examples/docs/fr-FR/input.md",
    "content": "## Input\n\nLe champ d'input de base.\n\n:::warning\nInput est un composant contrôlé, il **affiche toujours la valeur liée de Vue**.\n\nEn règle générale, l'évènement `input` devrait être géré. Son handler devrait mettre à jour la valeur du composant (ou utilisez `v-model`). Dans le cas contraire, la valeur du champ ne sera pas modifiée.\n\nLes modificateurs de `v-model` ne sont pas supportés.\n:::\n\n### Usage\n\n:::demo\n\n```html\n<el-input placeholder=\"Entrez quelque chose\" v-model=\"input\"></el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input: ''\n    }\n  }\n}\n</script>\n```\n:::\n\n### Désactivé\n\n:::demo Désactivez l'input avec l'attribut `disabled`.\n\n```html\n<el-input\n  placeholder=\"Entrez quelque chose\"\n  v-model=\"input\"\n  :disabled=\"true\">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input: ''\n    }\n  }\n}\n</script>\n```\n:::\n\n### Effaçable\n\n:::demo Rendez l'input effaçable avec l'attribut `clearable`.\n\n```html\n<el-input\n  placeholder=\"Entrez quelque chose\"\n  v-model=\"input\"\n  clearable>\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input: ''\n    }\n  }\n}\n</script>\n```\n:::\n\n### Champ de mot de passe\n\n:::demo Créez un champ de mot de passe avec icône de visualisation grâce à l'attribut `show-password`.\n\n```html\n<el-input placeholder=\"Entrez votre mot de passe\" v-model=\"input\" show-password></el-input>\n\n<script>\n  export default {\n    data() {\n      return {\n        input: ''\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Input avec icône\n\nAjoutez une icône pour indiquer le type d'input.\n\n:::demo Pour ajouter une icône, vous pouvez utiliser les attributs `prefix-icon` et `suffix-icon`. De plus, les slots nommés `prefix` et `suffix` fonctionnent aussi.\n```html\n<div class=\"demo-input-suffix\">\n  <span class=\"demo-input-label\">Avec les attributs</span>\n  <el-input\n    placeholder=\"Entrez une date\"\n    suffix-icon=\"el-icon-date\"\n    v-model=\"input1\">\n  </el-input>\n  <el-input\n    placeholder=\"Entrez du texte\"\n    prefix-icon=\"el-icon-search\"\n    v-model=\"input2\">\n  </el-input>\n</div>\n<div class=\"demo-input-suffix\">\n  <span class=\"demo-input-label\">Avec les slots</span>\n  <el-input\n    placeholder=\"Entrez une date\"\n    v-model=\"input3\">\n    <i slot=\"suffix\" class=\"el-input__icon el-icon-date\"></i>\n  </el-input>\n  <el-input\n    placeholder=\"Entrez du texte\"\n    v-model=\"input4\">\n    <i slot=\"prefix\" class=\"el-input__icon el-icon-search\"></i>\n  </el-input>\n</div>\n\n<style>\n  .demo-input-label {\n    display: inline-block;\n    width: 130px;\n  }\n</style>\n\n<script>\nexport default {\n  data() {\n    return {\n      input1: '',\n      input2: '',\n      input3: '',\n      input4: ''\n    }\n  }\n}\n</script>\n```\n:::\n\n### Zone de texte\n\nUne zone de texte de taille réglable à la souris pour écrire plusieurs lignes. Ajoutez l'attribut `type=\"textarea\"` pour changer `input` en un `textarea` natif.\n\n:::demo Réglez la hauteur grâce à la propriété `rows`.\n\n```html\n<el-input\n  type=\"textarea\"\n  :rows=\"2\"\n  placeholder=\"Entrez quelque chose\"\n  v-model=\"textarea\">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      textarea: ''\n    }\n  }\n}\n</script>\n```\n:::\n\n### Zone de texte avec taille automatique\n\nConfigurer la propriété `autosize` pour une zone de texte permet de rendre la hauteur automatique en fonction de la taille du texte. Un objet options pour être fournit à `autosize` les nombres minimal et maximal de lignes.\n\n:::demo\n\n```html\n<el-input\n  type=\"textarea\"\n  autosize\n  placeholder=\"Entrez quelque chose\"\n  v-model=\"textarea1\">\n</el-input>\n<div style=\"margin: 20px 0;\"></div>\n<el-input\n  type=\"textarea\"\n  :autosize=\"{ minRows: 2, maxRows: 4}\"\n  placeholder=\"Entrez quelque chose\"\n  v-model=\"textarea2\">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      textarea1: '',\n      textarea2: ''\n    }\n  }\n}\n</script>\n```\n:::\n\n### Input mixte\n\nAjouter un élément avant ou après l'input, généralement du texte ou un bouton.\n\n:::demo Utilisez `slot` pour ajouter des éléments avant ou après l'input.\n\n```html\n<div>\n  <el-input placeholder=\"Entrez quelque chose\" v-model=\"input1\">\n    <template slot=\"prepend\">Http://</template>\n  </el-input>\n</div>\n<div style=\"margin-top: 15px;\">\n  <el-input placeholder=\"Entrez quelque chose\" v-model=\"input2\">\n    <template slot=\"append\">.com</template>\n  </el-input>\n</div>\n<div style=\"margin-top: 15px;\">\n  <el-input placeholder=\"Entrez quelque chose\" v-model=\"input3\" class=\"input-with-select\">\n    <el-select v-model=\"select\" slot=\"prepend\" placeholder=\"Choisir\">\n      <el-option label=\"Restaurant\" value=\"1\"></el-option>\n      <el-option label=\"Num. Commande\" value=\"2\"></el-option>\n      <el-option label=\"Tel\" value=\"3\"></el-option>\n    </el-select>\n    <el-button slot=\"append\" icon=\"el-icon-search\"></el-button>\n  </el-input>\n</div>\n\n<style>\n  .el-select .el-input {\n    width: 110px;\n  }\n  .input-with-select .el-input-group__prepend {\n    background-color: #fff;\n  }\n</style>\n<script>\nexport default {\n  data() {\n    return {\n      input1: '',\n      input2: '',\n      input3: '',\n      select: ''\n    }\n  }\n}\n</script>\n```\n:::\n\n### Tailles\n\n:::demo Ajoutez l'attribut `size` pour changer la taille de l'input. En plus de la taille par défaut, il y a trois autres options: `medium`, `small` et `mini`.\n```html\n<div class=\"demo-input-size\">\n  <el-input\n    placeholder=\"Entrez quelque chose\"\n    v-model=\"input1\">\n  </el-input>\n  <el-input\n    size=\"medium\"\n    placeholder=\"Entrez quelque chose\"\n    v-model=\"input2\">\n  </el-input>\n  <el-input\n    size=\"small\"\n    placeholder=\"Entrez quelque chose\"\n    v-model=\"input3\">\n  </el-input>\n  <el-input\n    size=\"mini\"\n    placeholder=\"Entrez quelque chose\"\n    v-model=\"input4\">\n  </el-input>\n</div>\n\n<script>\nexport default {\n  data() {\n    return {\n      input1: '',\n      input2: '',\n      input3: '',\n      input4: ''\n    }\n  }\n}\n</script>\n```\n:::\n\n### Autocomplétion\n\nVous pouvez obtenir de l'aide ou des suggestions basées sur ce que vous entrez.\n\n:::demo Le composant d'autocomplétion fournit des suggestions d'entrées. L'attribut `fetch-suggestions` est une méthode qui retourne les suggestions. Dans cet exemple, `querySearch(queryString, cb)` renvoie des suggestions à l'autocomplétion via `cb(data)` quand elles sont prêtes.\n```html\n<el-row class=\"demo-autocomplete\">\n  <el-col :span=\"12\">\n    <div class=\"sub-title\">Liste des suggestions au focus</div>\n    <el-autocomplete\n      class=\"inline-input\"\n      v-model=\"state1\"\n      :fetch-suggestions=\"querySearch\"\n      placeholder=\"Entrez quelque chose\"\n      @select=\"handleSelect\"\n    ></el-autocomplete>\n  </el-col>\n  <el-col :span=\"12\">\n    <div class=\"sub-title\">Liste des suggestions à l'écriture</div>\n    <el-autocomplete\n      class=\"inline-input\"\n      v-model=\"state2\"\n      :fetch-suggestions=\"querySearch\"\n      placeholder=\"Entrez quelque chose\"\n      :trigger-on-focus=\"false\"\n      @select=\"handleSelect\"\n    ></el-autocomplete>\n  </el-col>\n</el-row>\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state1: '',\n        state2: ''\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n        // call callback function to return suggestions\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { \"value\": \"vue\", \"link\": \"https://github.com/vuejs/vue\" },\n          { \"value\": \"element\", \"link\": \"https://github.com/ElemeFE/element\" },\n          { \"value\": \"cooking\", \"link\": \"https://github.com/ElemeFE/cooking\" },\n          { \"value\": \"mint-ui\", \"link\": \"https://github.com/ElemeFE/mint-ui\" },\n          { \"value\": \"vuex\", \"link\": \"https://github.com/vuejs/vuex\" },\n          { \"value\": \"vue-router\", \"link\": \"https://github.com/vuejs/vue-router\" },\n          { \"value\": \"babel\", \"link\": \"https://github.com/babel/babel\" }\n         ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  }\n</script>\n```\n:::\n\n### Template personnalisé\n\nVous pouvez personnaliser la manière dont les suggestions sont affichées.\n\n:::demo Utilisez `scoped slot` pour personnaliser les différentes suggestions. Dans le scope, vous pouvez accéder à l'objet suggestion via la clé `item`.\n```html\n<el-autocomplete\n  popper-class=\"my-autocomplete\"\n  v-model=\"state\"\n  :fetch-suggestions=\"querySearch\"\n  placeholder=\"Entrez quelque chose\"\n  @select=\"handleSelect\">\n  <i\n    class=\"el-icon-edit el-input__icon\"\n    slot=\"suffix\"\n    @click=\"handleIconClick\">\n  </i>\n  <template slot-scope=\"{ item }\">\n    <div class=\"value\">{{ item.value }}</div>\n    <span class=\"link\">{{ item.link }}</span>\n  </template>\n</el-autocomplete>\n\n<style>\n  .my-autocomplete {\n    li {\n      line-height: normal;\n      padding: 7px;\n\n      .value {\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n      .link {\n        font-size: 12px;\n        color: #b4b4b4;\n      }\n    }\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state: ''\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n        // call callback function to return suggestion objects\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { \"value\": \"vue\", \"link\": \"https://github.com/vuejs/vue\" },\n          { \"value\": \"element\", \"link\": \"https://github.com/ElemeFE/element\" },\n          { \"value\": \"cooking\", \"link\": \"https://github.com/ElemeFE/cooking\" },\n          { \"value\": \"mint-ui\", \"link\": \"https://github.com/ElemeFE/mint-ui\" },\n          { \"value\": \"vuex\", \"link\": \"https://github.com/vuejs/vuex\" },\n          { \"value\": \"vue-router\", \"link\": \"https://github.com/vuejs/vue-router\" },\n          { \"value\": \"babel\", \"link\": \"https://github.com/babel/babel\" }\n         ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      },\n      handleIconClick(ev) {\n        console.log(ev);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  }\n</script>\n```\n:::\n\n### Recherche distante\n\nVous pouvez aller chercher des infos de suggestions sur un serveur distant.\n\n:::demo\n```html\n<el-autocomplete\n  v-model=\"state\"\n  :fetch-suggestions=\"querySearchAsync\"\n  placeholder=\"Entrez quelque chose\"\n  @select=\"handleSelect\"\n></el-autocomplete>\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state: '',\n        timeout:  null\n      };\n    },\n    methods: {\n      loadAll() {\n        return [\n          { \"value\": \"vue\", \"link\": \"https://github.com/vuejs/vue\" },\n          { \"value\": \"element\", \"link\": \"https://github.com/ElemeFE/element\" },\n          { \"value\": \"cooking\", \"link\": \"https://github.com/ElemeFE/cooking\" },\n          { \"value\": \"mint-ui\", \"link\": \"https://github.com/ElemeFE/mint-ui\" },\n          { \"value\": \"vuex\", \"link\": \"https://github.com/vuejs/vuex\" },\n          { \"value\": \"vue-router\", \"link\": \"https://github.com/vuejs/vue-router\" },\n          { \"value\": \"babel\", \"link\": \"https://github.com/babel/babel\" }\n         ];\n      },\n      querySearchAsync(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n\n        clearTimeout(this.timeout);\n        this.timeout = setTimeout(() => {\n          cb(results);\n        }, 3000 * Math.random());\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  };\n</script>\n```\n:::\n\n### Taille limite\n\n:::demo `maxlength` et `minlength` sont des attributs natifs, indiquant la taille limite de l'input. Le nombre de caractères est mesuré par la taille de la chaine Javascript. Si vous utilisez `maxlength`, vous pourrez montrer le nombre de caractères en mettant `show-word-limit` à `true`.\n\n```html\n<el-input\n  type=\"text\"\n  placeholder=\"Please input\"\n  v-model=\"text\"\n  maxlength=\"10\"\n  show-word-limit\n>\n</el-input>\n<div style=\"margin: 20px 0;\"></div>\n<el-input\n  type=\"textarea\"\n  placeholder=\"Please input\"\n  v-model=\"textarea\"\n  maxlength=\"30\"\n  show-word-limit\n>\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      text: '',\n      textarea: ''\n    }\n  }\n}\n</script>\n```\n:::\n\n### Attributs de l'Input\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n| ----| ----| ----| ---- | ----- |\n| type| Type de l'input. | string | text, textarea et autres [types d'input natifs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) | text |\n| value / v-model | Variable liée. | string / number | — | — |\n| maxlength| Identique à `maxlength` dans l'input natif. | number| — | — |\n| minlength| Identique à `minlength` dans l'input natif. | number | — | — |\n| show-word-limit | Affiche le nombre de caractères restant， ne marche que lorsque `type` est 'text' ou 'textarea'. | boolean    |  —  | false |\n| placeholder| Placeholder de l' Input. | string | — | — |\n| clearable | Si le bouton de reset apparaît. | boolean | — | false |\n| show-password | Si le champ doit un champ de mot de passe avec bouton de visualisation. | boolean         | — | false |\n| disabled | Si le champ est désactivé. | boolean | — | false |\n| size | Taille du champ, marche quand `type` n'est pas 'textarea'. | string | medium / small / mini | — |\n| prefix-icon   | Classe de l'icône de préfixe.  | string          | — | — |\n| suffix-icon   | Classe de l'iĉone de suffixe.  | string          | — | — |\n| rows | Nombre de ligne pour une zone de texte, ne marche que si `type` est 'textarea'. | number | — | 2 |\n| autosize | Si la zone de texte à une hauteur adaptative, ne marche que si `type` est 'textarea'. Peut accepter un objet, e.g. { minRows: 2, maxRows: 6 }  | boolean / object | — | false |\n| autocomplete | Identique à `autocomplete` dans l'input natif. | string | on / off | off |\n| auto-complete | @DEPRECATED dans la prochaine version majeure. | string | on/off | off |\n| name | Identique à `name` dans l'input natif. | string | — | — |\n| readonly | Identique à `readonly` dans l'input natif. | boolean | — | false |\n| max | Identique à `max` dans l'input natif. | — | — | — |\n| min | Identique à `min` dans l'input natif. | — | — | — |\n| step| Identique à `step` dans l'input natif. | — | — | — |\n| resize| Contrôle les changements de taille autorisés. | string | none, both, horizontal, vertical | — |\n| autofocus | Identique à `autofocus` dans l'input natif. | boolean | — | false |\n| form | Identique à `form` dans l'input natif. | string | — | — |\n| label | Texte du label. | string | — | — |\n| tabindex | tabindex de l'input. | string | - | - |\n| validate-event | Si la validation doit avoir lieu. | boolean | - | true |\n\n### Slots de l'Input\n\n| Nom | Description |\n|------|--------|\n| prefix | Contenu du préfixe, ne marche que si `type` est 'text'. |\n| suffix | Contenu du suffixe, ne marche que si `type` est 'text'. |\n| prepend | Contenu à ajouter avant l'Input, ne marche que si `type` est 'text'. |\n| append | Contenu à ajouter après l'Input, ne marche que si `type` est 'text'. |\n\n### Évènements\n\n| Nom | Description | Paramètres |\n|----| ----| ----|\n| blur | Se déclenche quand Input perds le focus. | (event: Event) |\n| focus | Se déclenche quand Input a le focus. | (event: Event) |\n| change | Déclenché uniquement lorsque la zone de saisie perd le focus ou que l'utilisateur appuie sur Entrée. | (value: string \\| number) |\n| input | Déclenché lorsque la valeur d'entrée change. | (value: string \\| number) |\n| clear | Se déclenche quand le champ est effacé par le bouton de reset. | — |\n\n### Méthodes de l'Input\n\n| Méthode | Description | Paramètres |\n|------|--------|-------|\n| focus | Met le focus sur le champ. | — |\n| blur | Retire le focus de le champ. | — |\n| select | Sélectionne le texte du champ. | — |\n\n### Attributs de l'autocomplétion\n\n| Attribut | Description | Type | Options | Défaut |\n|----| ----| ----| ---- | -----|\n| placeholder| Le placeholder de l'autocomplétion. | string | — | — |\n| clearable | Si un bouton d'effacement doit apparaître. | boolean | — | false |\n| disabled | Si l'autocomplétion est déactivée. | boolean | — | false|\n| value-key | Nom de la clé de l'objet suggestion pour l'affichage. | string | — | value |\n| icon | Nom de l'icône. | string | — | — |\n| value | Variable liée. | string | — | — |\n| debounce | Délai d'attente après écriture, en millisecondes. | number | — | 300 |\n| placement | Emplacement du menu popup. | string | top / top-start / top-end / bottom / bottom-start / bottom-end | bottom-start |\n| fetch-suggestions | La méthode pour rechercher les suggestions. Lorsqu'elles sont prêtes, appelle `callback(data:[])` pour les renvoyer à l'autocomplétion. | Function(queryString, callback) | — | — |\n| popper-class | Nom de classe pour le menu de l'autocomplétion. | string | — | — |\n| trigger-on-focus | Si les suggestions doivent apparaître quand l'input a le focus. | boolean | — | true |\n| name | Identique à `name` dans l'input natif. | string | — | — |\n| select-when-unmatched | Si un évènement `select` doit être émis après pression sur entrée quand il n'y a pas de résultats. | boolean | — | false |\n| label | Texte du label. | string | — | — |\n| prefix-icon | Classe de l'icône de préfixe. | string | — | — |\n| suffix-icon | Classe de l'iĉone de suffixe. | string | — | — |\n| hide-loading | Si l'icône de chargement doit être cachée dans le cas d'une recherche distante. | boolean | — | false |\n| popper-append-to-body | Si le menu doit être ajouter au body. Si le positionnement du menu est incorrect, essayez de mettre cette propriété à `false`. | boolean | - | true |\n| highlight-first-item | Si la première suggestion de la liste issue de la recherche distante doit être en surbrillance par défaut. | boolean | — | false |\n\n### Slots de l'autocomplétion\n\n| Nom | Description |\n|------|--------|\n| prefix | Contenu du préfixe. |\n| suffix | Contenu du suffixe. |\n| prepend | Contenu à ajouter avant le champ. |\n| append | Contenu à ajouter après le champ. |\n\n### Template personnalisé pour l'autocomplétion\n\n| Nom | Description |\n|------|--------|\n| — | Contenu personnalisé pour les suggestions. Le paramètre de scope est { item }. |\n\n### Évènements de l'autocomplétion\n\n| Nom | Description | Paramètres |\n|----| ----| ----|\n| select | Se déclenche quand une suggestion est cliquée. | La suggestion sélectionnée. |\n| change | Se déclenche quand la valeur change. | (value: string \\ number) |\n\n### Méthodes de l'autocomplétion\n\n| Méthode | Description | Paramètres |\n|------|--------|-------|\n| focus | Met le focus sur l'élément. | — |\n"
  },
  {
    "path": "examples/docs/fr-FR/installation.md",
    "content": "## Installation\n\n### NPM\n\nInstaller Element via npm est recommandé, il fonctionne parfaitement avec [webpack](https://webpack.js.org/).\n\n```shell\nnpm i element-ui -S\n```\n\n### CDN\n\nObtenez la dernière version via [unpkg.com/element-ui](https://unpkg.com/element-ui/), et importez le JavaScript et le CSS dans votre page.\n\n```html\n<!-- import du CSS -->\n<link rel=\"stylesheet\" href=\"https://unpkg.com/element-ui/lib/theme-chalk/index.css\">\n<!-- import du JavaScript -->\n<script src=\"https://unpkg.com/element-ui/lib/index.js\"></script>\n```\n\n:::tip\nIl est recommandé de fixer la version d'Element lors de l'utilisation du CDN. Référez-vous à  [unpkg.com](https://unpkg.com) pour plus d'informations.\n:::\n\n### Hello world\n\nSi vous utilisez un CDN, une page hello-world peut être obtenue facilement avec Element ([démo en ligne](https://codepen.io/bofeng/pen/poaEmJY)).\n\n<iframe height=\"265\" style=\"width: 100%;\" scrolling=\"no\" title=\"Element demo\" src=\"//codepen.io/bofeng/embed/poaEmJY/?height=265&theme-id=light&default-tab=html\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href='https://codepen.io/bofeng/pen/poaEmJY/'>Element demo</a> by hetech\n  (<a href='https://codepen.io/bofeng'>@bofeng</a>) on <a href='https://codepen.io'>CodePen</a>.\n</iframe>\n\nSi vous utilisez npm et souhaitez ajouter webpack, continuez sur la page suivante: [Démarrer](/#/fr-FR/component/quickstart).\n"
  },
  {
    "path": "examples/docs/fr-FR/layout.md",
    "content": "## Layout\n\nVous pouvez créer une mise en page facilement et rapidement grâce à une base de 24 colonnes.\n\n### Mise en page basique\n\nCréez une grille de mise en page basique grâce aux colonnes.\n\n:::demo Grâce à `row` et `col`, vous pouvez arranger la mise en page en utilisant l'attribut `span`.\n```html\n<el-row>\n  <el-col :span=\"24\"><div class=\"grid-content bg-purple-dark\"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span=\"12\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"12\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span=\"8\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"8\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"8\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n```\n:::\n\n### Espacement\n\nL'espacement entre colonnes est configurable.\n\n:::demo Utilisez l'attribut `gutter` dans el-row pour spécifier l'espacement entre colonnes. La valeur par défaut est 0.\n```html\n<el-row :gutter=\"20\">\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n```\n:::\n\n### Mise en page complexe\n\nVous pouvez former une mise en page complexe en combinant les systèmes de colonnes 1 / 24 comme vous le souhaitez.\n\n:::demo\n```html\n<el-row :gutter=\"20\">\n  <el-col :span=\"16\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"8\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row :gutter=\"20\">\n  <el-col :span=\"8\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"8\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row :gutter=\"20\">\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"16\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n```\n:::\n\n### Décalage des colonnes\n\nVous pouvez spécifier un décalage pour les colonnes.\n\n:::demo Utiliser l'attribut `offset` pour régler le décalage.\n\n```html\n<el-row :gutter=\"20\">\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\" :offset=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row :gutter=\"20\">\n  <el-col :span=\"6\" :offset=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\" :offset=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row :gutter=\"20\">\n  <el-col :span=\"12\" :offset=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n```\n:::\n\n### Alignement\n\nUtilisez la mise en page flex pour rendre l'alignement des colonnes flexible.\n\n:::demo Vous pouvez activer la mise en page flex en réglant l'attribut `type` à 'flex', puis en configurant la disposition des éléments enfants avec l'attribut `justify` définit à 'start', 'center', 'end', 'space-between' ou 'space-around'.\n```html\n<el-row type=\"flex\" class=\"row-bg\">\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row type=\"flex\" class=\"row-bg\" justify=\"center\">\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row type=\"flex\" class=\"row-bg\" justify=\"end\">\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row type=\"flex\" class=\"row-bg\" justify=\"space-between\">\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row type=\"flex\" class=\"row-bg\" justify=\"space-around\">\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n```\n:::\n\n### Mise en page responsive\n\nSe basant sur le design responsive de Bootstrap, il existe cinq breakpoints déjà définit: xs, sm, md, lg and xl.\n\n:::demo\n```html\n<el-row :gutter=\"10\">\n  <el-col :xs=\"8\" :sm=\"6\" :md=\"4\" :lg=\"3\" :xl=\"1\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :xs=\"4\" :sm=\"6\" :md=\"8\" :lg=\"9\" :xl=\"11\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :xs=\"4\" :sm=\"6\" :md=\"8\" :lg=\"9\" :xl=\"11\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :xs=\"8\" :sm=\"6\" :md=\"4\" :lg=\"3\" :xl=\"1\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n</el-row>\n\n<style>\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n</style>\n```\n:::\n\n### Classes pour cacher certains éléments\n\nElement fournit également une série de classes pour cacher des éléments dans certaines circonstances. Ces classes peuvent être ajoutées à n'importe quel élément du DOM ou composant. Vous devrez importer le fichier CSS suivant pour pouvoir les utiliser:\n\n```js\nimport 'element-ui/lib/theme-chalk/display.css';\n```\n\nCes classes sont:\n- `hidden-xs-only` - disparaît sur les très petits viewports uniquement\n- `hidden-sm-only` - disparaît sur les petits viewports uniquement\n- `hidden-sm-and-down` - disparaît sur les petits viewports et plus petits\n- `hidden-sm-and-up` - disparaît sur les petits viewports et plus grand\n- `hidden-md-only` - disparaît sur les viewports moyens uniquement\n- `hidden-md-and-down` - disparaît sur les viewports moyens et plus petits\n- `hidden-md-and-up` - disparaît sur les viewports moyens et plus grand\n- `hidden-lg-only` - disparaît sur les viewports larges uniquement\n- `hidden-lg-and-down` - disparaît sur les viewports larges et plus petits\n- `hidden-lg-and-up` - disparaît sur les viewports larges et plus grand\n- `hidden-xl-only` - disparaît sur les viewports très larges uniquement\n\n### Attributs des lignes\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| gutter | Espacement de la grille. | number | — | 0 |\n| type | Mode de mise en page. Vous pouvez utiliser flex, qui fonctionne sur les navigateurs modernes. | string | — | — |\n| justify | Alignement horizontal pour le mise en page flex. | string | start/end/center/space-around/space-between | start |\n| align | Alignement vertical pour la mise en page flex. | string | top/middle/bottom | — |\n| tag | Élément de tag personnalisé. | string | * | div |\n\n### Attributs des colonnes\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| span | Nombre de colonnes sur lesquelles l'élément s'étend. | number | — | 24 |\n| offset | Nombre d'espacements sur la gauche de l'élément. | number | — | 0 |\n| push |  Nombre de colonnes dont l'élément se déplace vers la droite. | number | — | 0 |\n| pull |  Nombre de colonnes dont l'élément se déplace vers la gauche. | number | — | 0 |\n| xs | `<768px` Nombre de colonnes responsives ou bien objet de propriétés de colonne. | number/object (e.g. {span: 4, offset: 4}) | — | — |\n| sm | `≥768px` Nombre de colonnes responsives ou bien objet de propriétés de colonne. | number/object (e.g. {span: 4, offset: 4}) | — | — |\n| md | `≥992px` Nombre de colonnes responsives ou bien objet de propriétés de colonne. | number/object (e.g. {span: 4, offset: 4}) | — | — |\n| lg | `≥1200px` Nombre de colonnes responsives ou bien objet de propriétés de colonne. | number/object (e.g. {span: 4, offset: 4}) | — | — |\n| xl | `≥1920px` Nombre de colonnes responsives ou bien objet de propriétés de colonne. | number/object (e.g. {span: 4, offset: 4}) | — | — |\n| tag | Élément de tag personnalisé. | string | * | div |\n"
  },
  {
    "path": "examples/docs/fr-FR/link.md",
    "content": "## Link\n\nUn hyperlien textuel.\n\n### Usage basique\n\nLien texte basique.\n\n:::demo\n\n```html\n<div>\n  <el-link href=\"https://element.eleme.io\" target=\"_blank\">défaut</el-link>\n  <el-link type=\"primary\">primaire</el-link>\n  <el-link type=\"success\">succès</el-link>\n  <el-link type=\"warning\">avertissement</el-link>\n  <el-link type=\"danger\">danger</el-link>\n  <el-link type=\"info\">info</el-link>\n</div>\n```\n\n:::\n\n### Désactivé\n\nLien désactivé.\n\n:::demo\n\n```html\n<div>\n  <el-link disabled>défaut</el-link>\n  <el-link type=\"primary\" disabled>primaire</el-link>\n  <el-link type=\"success\" disabled>succès</el-link>\n  <el-link type=\"warning\" disabled>avertissement</el-link>\n  <el-link type=\"danger\" disabled>danger</el-link>\n  <el-link type=\"info\" disabled>info</el-link>\n</div>\n```\n\n:::\n\n### Souligné\n\nLien souligné.\n\n:::demo\n\n```html\n<div>\n  <el-link :underline=\"false\">non souligné</el-link>\n  <el-link>Souligné</el-link>\n</div>\n```\n\n:::\n\n### Icône\n\nLien avec icône.\n\n:::demo\n\n```html\n<div>\n  <el-link icon=\"el-icon-edit\">Éditer</el-link>\n  <el-link>Vérifier<i class=\"el-icon-view el-icon--right\"></i> </el-link>\n</div>\n```\n\n:::\n\n### Attributs\n\n| Attribut  | Description                     | Type    | Options                                     | Défaut  |\n| --------- | ------------------------------- | ------- | ------------------------------------------- | ------- |\n| type      | Type du lien.                   | string  | primary / success / warning / danger / info | défaut  |\n| underline | Si le composant est souligné.   | boolean | —                                           | true    |\n| disabled  | Si le composant est désactivé.  | boolean | —                                           | false   |\n| href      | Identique au `href` natif.      | string  | —                                           | -       |\n| icon      | Nom de classe de l'icône.       | string  | —                                           | -       |\n"
  },
  {
    "path": "examples/docs/fr-FR/loading.md",
    "content": "## Loading\n\nAffiche une animation durant le chargement de données.\n\n### Loading dans un conteneur\n\nAffiche une animation dans un conteneur (Comme un tableau par exemple) pendant le chargement des données.\n\n:::demo Element fournit deux moyens d'invoquer Loading: la directive et le service. Pour la directive `v-loading`, attachez simplement un `boolean`. Par défaut le masque sera ajouté à l'élément contenant la directive. Ajoutez le modificateur `body` pour ajouter le masque à l'élément body.\n\n```html\n<template>\n  <el-table\n    v-loading=\"loading\"\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  body {\n    margin: 0;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: 'John Smith',\n          address: 'No.1518,  Jinshajiang Road, Putuo District'\n        }, {\n          date: '2016-05-04',\n          name: 'John Smith',\n          address: 'No.1518,  Jinshajiang Road, Putuo District'\n        }, {\n          date: '2016-05-01',\n          name: 'John Smith',\n          address: 'No.1518,  Jinshajiang Road, Putuo District'\n        }],\n        loading: true\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Personnalisation\n\nVous pouvez personnaliser le texte, le spinner et la couleur de fond.\n\n:::demo Ajoutez l'attribut `element-loading-text` à l'élement sur lequel `v-loading` est attaché et sa valeur sera affichée sous le spinner. De la même façon, `element-loading-spinner` et `element-loading-background` permettent de personnaliser le spinner et la couleur de fond.\n```html\n<template>\n  <el-table\n    v-loading=\"loading\"\n    element-loading-text=\"Loading...\"\n    element-loading-spinner=\"el-icon-loading\"\n    element-loading-background=\"rgba(0, 0, 0, 0.8)\"\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: 'John Smith',\n          address: 'No.1518,  Jinshajiang Road, Putuo District'\n        }, {\n          date: '2016-05-04',\n          name: 'John Smith',\n          address: 'No.1518,  Jinshajiang Road, Putuo District'\n        }, {\n          date: '2016-05-01',\n          name: 'John Smith',\n          address: 'No.1518,  Jinshajiang Road, Putuo District'\n        }],\n        loading: true\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Chargement plein écran\n\nAffichez une animation en plein écran quand vous charger des données.\n\n:::demo Quand il est utilisé comme une directive, un Loading plein écran nécessite le modificateur `fullscreen` qui sera ajouté au body. Dans ce cas, si vous souhaitez désactiver le défilement du body, vous pouvez ajouter le modificateur `lock`. Quand il est utilisé comme service, Loading est en plein écran par défaut.\n\n```html\n<template>\n  <el-button\n    type=\"primary\"\n    @click=\"openFullScreen1\"\n    v-loading.fullscreen.lock=\"fullscreenLoading\">\n    Comme directive\n  </el-button>\n  <el-button\n    type=\"primary\"\n    @click=\"openFullScreen2\">\n    Comme service\n  </el-button>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        fullscreenLoading: false\n      }\n    },\n    methods: {\n      openFullScreen1() {\n        this.fullscreenLoading = true;\n        setTimeout(() => {\n          this.fullscreenLoading = false;\n        }, 2000);\n      },\n      openFullScreen2() {\n        const loading = this.$loading({\n          lock: true,\n          text: 'Loading',\n          spinner: 'el-icon-loading',\n          background: 'rgba(0, 0, 0, 0.7)'\n        });\n        setTimeout(() => {\n          loading.close();\n        }, 2000);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Service\n\nVous pouvez invoquer Loading comme un service. Importez le service Loading:\n\n```javascript\nimport { Loading } from 'element-ui';\n```\nEt invoquer-le:\n\n```javascript\nLoading.service(options);\n```\n\nLe paramètre `options` correspond à la configuration de Loading (voir table suivante). `LoadingService` retourne une instance de Loading, que vous pouvez fermer en appelant la méthode `close`:\n\n```javascript\nlet loadingInstance = Loading.service(options);\nthis.$nextTick(() => { // Loading should be closed asynchronously\n  loadingInstance.close();\n});\n```\n\nNotez que dans ce cas le Loading plein écran est un singleton. Si un nouveau Loading plein écran est invoqué avant la fermeture du précédent, celui-ci sera retourné au lieu d'en créer un nouveau:\n\n```javascript\nlet loadingInstance1 = Loading.service({ fullscreen: true });\nlet loadingInstance2 = Loading.service({ fullscreen: true });\nconsole.log(loadingInstance1 === loadingInstance2); // true\n```\n\nAppeler la méthode `close` sur n'importe lequel des deux fermera le Loading.\n\nSi Element est importé en entier, une méthode globale `$loading` sera ajoutée à Vue.prototype. Vous pourrez l'invoquer comme ceci: `this.$loading(options)` et elle retournera une instance Loading.\n\n### Options\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| target | L'élément du DOM a couvrir. Accepte un objet DOM ou un string. Si c'est un string, il sera passé à `document.querySelector` Pour avoir l'élément du DOM correspondant. | object/string | — | document.body |\n| body | Identique au modificateur `body` de `v-loading`. | boolean | — | false |\n| fullscreen | Identique au modificateur `fullscreen` de `v-loading`. | boolean | — | true |\n| lock | Identique au modificateur `lock` de `v-loading`. | boolean | — | false |\n| text | Texte a afficher sous le spinner. | string | — | — |\n| spinner | Classe du spinner. | string | — | — |\n| background | Couleur de fond du masque. | string | — | — |\n| customClass | Classe du Loading. | string | — | — |\n"
  },
  {
    "path": "examples/docs/fr-FR/menu.md",
    "content": "## NavMenu\n\nMenu qui fournit un système de navigation à votre site.\n\n### Barre du haut\n\nLa barre du haut peut être utilisée pour différents scénarios.\n\n:::demo Par défaut le menu est vertical, mais vous pouvez le passer en horizontal en réglant l'attribut `mode` sur 'horizontal'. De plus, vous pouvez utiliser le composant submenu pour créer un second niveau niveau de menu. Le menu utilises `background-color`, `text-color` et `active-text-color` pour personnaliser les couleurs.\n```html\n<el-menu :default-active=\"activeIndex\" class=\"el-menu-demo\" mode=\"horizontal\" @select=\"handleSelect\">\n  <el-menu-item index=\"1\">Centre de traitement</el-menu-item>\n  <el-submenu index=\"2\">\n    <template slot=\"title\">Lieu de travail</template>\n    <el-menu-item index=\"2-1\">item un</el-menu-item>\n    <el-menu-item index=\"2-2\">item deux</el-menu-item>\n    <el-menu-item index=\"2-3\">item trois</el-menu-item>\n    <el-submenu index=\"2-4\">\n      <template slot=\"title\">item quatre</template>\n      <el-menu-item index=\"2-4-1\">item un</el-menu-item>\n      <el-menu-item index=\"2-4-2\">item deux</el-menu-item>\n      <el-menu-item index=\"2-4-3\">item trois</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index=\"3\" disabled>Infos</el-menu-item>\n  <el-menu-item index=\"4\"><a href=\"https://www.ele.me\" target=\"_blank\">Commandes</a></el-menu-item>\n</el-menu>\n<div class=\"line\"></div>\n<el-menu\n  :default-active=\"activeIndex2\"\n  class=\"el-menu-demo\"\n  mode=\"horizontal\"\n  @select=\"handleSelect\"\n  background-color=\"#545c64\"\n  text-color=\"#fff\"\n  active-text-color=\"#ffd04b\">\n  <el-menu-item index=\"1\">Centre de traitement</el-menu-item>\n  <el-submenu index=\"2\">\n    <template slot=\"title\">Lieu de travail</template>\n    <el-menu-item index=\"2-1\">item un</el-menu-item>\n    <el-menu-item index=\"2-2\">item deux</el-menu-item>\n    <el-menu-item index=\"2-3\">item trois</el-menu-item>\n    <el-submenu index=\"2-4\">\n      <template slot=\"title\">item quatre</template>\n      <el-menu-item index=\"2-4-1\">item un</el-menu-item>\n      <el-menu-item index=\"2-4-2\">item deux</el-menu-item>\n      <el-menu-item index=\"2-4-3\">item trois</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index=\"3\" disabled>Info</el-menu-item>\n  <el-menu-item index=\"4\"><a href=\"https://www.ele.me\" target=\"_blank\">Commandes</a></el-menu-item>\n</el-menu>\n\n<script>\n  export default {\n    data() {\n      return {\n        activeIndex: '1',\n        activeIndex2: '1'\n      };\n    },\n    methods: {\n      handleSelect(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Barre latérale\n\nMenu vertical avec sous-menus.\n\n:::demo Vous pouvez utiliser le composant el-menu-item-group pour créer un groupe dans le menu dont le nom sera déterminé par celui de la propriété title ou d'un slot.\n```html\n<el-row class=\"tac\">\n  <el-col :span=\"12\">\n    <h5>Couleurs par défaut</h5>\n    <el-menu\n      default-active=\"2\"\n      class=\"el-menu-vertical-demo\"\n      @open=\"handleOpen\"\n      @close=\"handleClose\">\n      <el-submenu index=\"1\">\n        <template slot=\"title\">\n          <i class=\"el-icon-location\"></i>\n          <span>Navigateur Un</span>\n        </template>\n        <el-menu-item-group title=\"Group Un\">\n          <el-menu-item index=\"1-1\">item un</el-menu-item>\n          <el-menu-item index=\"1-2\">item un</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title=\"Group Deux\">\n          <el-menu-item index=\"1-3\">item trois</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index=\"1-4\">\n          <template slot=\"title\">item quatre</template>\n          <el-menu-item index=\"1-4-1\">item un</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index=\"2\">\n        <i class=\"el-icon-menu\"></i>\n        <span>Navigateur Deux</span>\n      </el-menu-item>\n      <el-menu-item index=\"3\" disabled>\n        <i class=\"el-icon-document\"></i>\n        <span>Navigateur Trois</span>\n      </el-menu-item>\n      <el-menu-item index=\"4\">\n        <i class=\"el-icon-setting\"></i>\n        <span>Navigateur Quatre</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n  <el-col :span=\"12\">\n    <h5>Couleurs personnalisées</h5>\n    <el-menu\n      default-active=\"2\"\n      class=\"el-menu-vertical-demo\"\n      @open=\"handleOpen\"\n      @close=\"handleClose\"\n      background-color=\"#545c64\"\n      text-color=\"#fff\"\n      active-text-color=\"#ffd04b\">\n      <el-submenu index=\"1\">\n        <template slot=\"title\">\n          <i class=\"el-icon-location\"></i>\n          <span>Navigateur Un</span>\n        </template>\n        <el-menu-item-group title=\"Group Un\">\n          <el-menu-item index=\"1-1\">item un</el-menu-item>\n          <el-menu-item index=\"1-2\">item un</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title=\"Group Deux\">\n          <el-menu-item index=\"1-3\">item trois</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index=\"1-4\">\n          <template slot=\"title\">item quatre</template>\n          <el-menu-item index=\"1-4-1\">item un</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index=\"2\">\n        <i class=\"el-icon-menu\"></i>\n        <span>Navigateur Deux</span>\n      </el-menu-item>\n      <el-menu-item index=\"3\" disabled>\n        <i class=\"el-icon-document\"></i>\n        <span>Navigateur Trois</span>\n      </el-menu-item>\n      <el-menu-item index=\"4\">\n        <i class=\"el-icon-setting\"></i>\n        <span>Navigateur Quatre</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n</el-row>\n\n<script>\n  export default {\n    methods: {\n      handleOpen(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Menu réduit\n\nLe menu vertical peut être réduit.\n\n:::demo\n```html\n<el-radio-group v-model=\"isCollapse\" style=\"margin-bottom: 20px;\">\n  <el-radio-button :label=\"false\">Agrandir</el-radio-button>\n  <el-radio-button :label=\"true\">Réduire</el-radio-button>\n</el-radio-group>\n<el-menu default-active=\"2\" class=\"el-menu-vertical-demo\" @open=\"handleOpen\" @close=\"handleClose\" :collapse=\"isCollapse\">\n  <el-submenu index=\"1\">\n    <template slot=\"title\">\n      <i class=\"el-icon-location\"></i>\n      <span slot=\"title\">Navigateur Un</span>\n    </template>\n    <el-menu-item-group>\n      <span slot=\"title\">Group Un</span>\n      <el-menu-item index=\"1-1\">item un</el-menu-item>\n      <el-menu-item index=\"1-2\">item deux</el-menu-item>\n    </el-menu-item-group>\n    <el-menu-item-group title=\"Group Deux\">\n      <el-menu-item index=\"1-3\">item trois</el-menu-item>\n    </el-menu-item-group>\n    <el-submenu index=\"1-4\">\n      <span slot=\"title\">item quatre</span>\n      <el-menu-item index=\"1-4-1\">item un</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index=\"2\">\n    <i class=\"el-icon-menu\"></i>\n    <span slot=\"title\">Navigateur Deux</span>\n  </el-menu-item>\n  <el-menu-item index=\"3\" disabled>\n    <i class=\"el-icon-document\"></i>\n    <span slot=\"title\">Navigateur Trois</span>\n  </el-menu-item>\n  <el-menu-item index=\"4\">\n    <i class=\"el-icon-setting\"></i>\n    <span slot=\"title\">Navigateur Quatre</span>\n  </el-menu-item>\n</el-menu>\n\n<style>\n  .el-menu-vertical-demo:not(.el-menu--collapse) {\n    width: 200px;\n    min-height: 400px;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        isCollapse: true\n      };\n    },\n    methods: {\n      handleOpen(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Attributs du menu\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------- |---------- |-------------  |-------- |\n| mode     | Mode d'affichage du menu.   | string  |   horizontal / vertical   | vertical |\n| collapse  | Si le menu peut être réduit, uniquement disponible en mode vertical. | boolean  |   —   | false |\n| background-color  | Couleur de fond du menu (format hexadécimal). | string |   —   | #ffffff |\n| text-color  | Couleur du texte du menu (format hexadécimal) | string |   —   | #303133 |\n| active-text-color  | Couleur du texte de l'item actif (format hexadécimal). | string |   —   | #409EFF |\n| default-active | Index du menu actif. | string    | — | — |\n| default-openeds | Liste contenant les index les sous-menus actifs.  | Array    | — | — |\n| unique-opened  | Si un seul sous-menu peut être actif.  | boolean   | — | false   |\n| menu-trigger | Comment les sous-menu sont déclenchés, uniquement en mode horizontal. | string    | hover / click | hover |\n| router  | Si le mode `vue-router` est activé. Si `true`, l'index sera utilisé comme 'path' pour activer la route. | boolean   | — | false   |\n| collapse-transition  | Si la transition de réduction doit être activée. | boolean   | — | true   |\n\n### Méthodes du menu\n\n| Nom | Description | Paramètres |\n|---------- |-------- |---------- |\n| open  | Ouvre un sous-menu spécifique. | index: index du sous-menu à ouvrir |\n| close  | Ferme un sous-menu spécifique. | index: index du sous-menu à fermer |\n\n### Évènements du menu\n\n| Nom | Description | Paramètres |\n|---------- |-------- |---------- |\n| select  | Fonction de callback pour quand le menu est activé. | index: index du menu activé, indexPath: index path du menu activé.  |\n| open  | Fonction de callback pour quand le sous-menu s'agrandit. | index: index of expanded sous-menu, indexPath: index path du sous-menu |\n| close  | Fonction de callback pour quand le sous-menu se réduit. | index: index of collapsed sous-menu, indexPath: index path du sous-menu |\n\n### Évènements des items du menu\n\n| Nom | Description | Paramètres |\n|---------- |-------- |---------- |\n| click  | Fonction de callback pour quand le menu-item est cliqué. | el: instance du menu-item.  |\n\n### Attributs du sous-menu\n\n| Attributs      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------- |---------- |-------------  |-------- |\n| index     | Identificateur unique. | string  | — | — |\n| popper-class | Classe du menu popup. | string | — | — |\n| show-timeout | Délai avant de montrer un sous-menu. | number | — | 300 |\n| hide-timeout | Délai avant de cacher un sous-menu. | number | — | 300 |\n| disabled | Si le sous-menu est désactivé. | boolean | — | false |\n| popper-append-to-body | S'il faut ajouter un menu popup au body. Si le positionnement du body n'est pas bon, vous pouvez essayer de régler cette propriété. | boolean | - | Sous-menus de niveau 1: true / autres sous-menus: false |\n\n### Attributs des items du menu\n\n| Attributs      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------- |---------- |-------------  |-------- |\n| index     | Identificateur unique. | string/null  | — | null |\n| route     | Objet Vue Router. | object | — | — |\n| disabled | Si l'item est désactivé. | boolean | — | false |\n\n### Attributs des groupes\n\n| Attributs      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------- |---------- |-------------  |-------- |\n| title     | Titre du groupe. | string  | — | — |\n"
  },
  {
    "path": "examples/docs/fr-FR/message-box.md",
    "content": "## MessageBox\n\nUn ensemble de fenêtres modales pour afficher des messages système, tels que des alertes, des demandes de confirmation ou des informations importantes.\n\n:::tip\nMessageBox est avant tout conçue pour émuler des `alert`, `confirm` ou `prompt`, son contenu devrait donc être simple. Pour afficher un contenu plus riche, utilisez plutôt Dialog.\n:::\n\n### Alert\n\nAlert interrompt l'action de l'utilisateur jusqu'à ce qu'il confirme.\n\n:::demo Ouvrez un alert en appelant la méthode `$alert`. Elle simule une `alert` système et ne peut être fermée en pressant ESC ou en cliquant hors de la boite. Dans cet exemple, deux paramètres `message` et `title` sont reçus. Notez que lorsque la boite est fermée, elle retourne un objet `Promise`. Si vous n'êtes pas certains que tout vos navigateurs cibles supportent `Promise`, utilisez un polyfill ou utilisez des callbacks comme dans l'exemple qui suit.\n\n```html\n<template>\n  <el-button type=\"text\" @click=\"open\">Cliquez pour ouvrir la MessageBox</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$alert('Ceci est un message', 'Titre', {\n          confirmButtonText: 'OK',\n          callback: action => {\n            this.$message({\n              type: 'info',\n              message: `action: ${ action }`\n            });\n          }\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Confirm\n\nConfirm est utilisé pour demander une confirmation à l'utilisateur.\n\n:::demo Appelez la méthode `$confirm` pour ouvrir une confirm, qui simule le `confirm` système. Vous pouvez aussi personnaliser MessageBox en passant un objet à l'attribut `options`. L'attribut `type` indique le type de message (voir en bas de la page pour la liste des valeurs possibles). Notez que l'attribut `title` doit être de type `string`. S'il se trouve être un `object`, il sera considéré comme étant l'attribut `options`. Cet exemple utilise une `Promise` pour gérer la suite du processus.\n\n```html\n<template>\n  <el-button type=\"text\" @click=\"open\">Cliquez pour ouvrir la MessageBox</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$confirm('Ceci effacera le fichier. Continuer?', 'Warning', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Annuler',\n          type: 'warning'\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: 'Fichier supprimé'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Suppression annulée'\n          });          \n        });\n      }\n    }\n  }\n</script>\n```\n\n:::\n\n### Prompt\n\nPrompt est utilisé lorsqu'un utilisateur.\n\n:::demo Appellez la méthode `$prompt` pour ouvrir un prompt simulant le `prompt` système. Vous pouvez utiliser le paramètre `inputPattern` pour spécifier un pattern à l'aide d'une RegExp. Utilisez `inputValidator` pour indiquer la méthode de validation, qui devra retourner un `Boolean` ou un `String`. Retourner `false` ou un `String` veut dire que la validation a échouée, et la string ainsi fournie sera le `inputErrorMessage`. De plus, vous pouvez personnaliser le placeholder du champs avec le paramètre `inputPlaceholder`.\n\n```html\n<template>\n  <el-button type=\"text\" @click=\"open\">Cliquez pour ouvrir la MessageBox</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$prompt('Entrez votre e-mail', 'Astuce', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Annuler',\n          inputPattern: /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n          inputErrorMessage: 'E-mail invalide'\n        }).then(({ value }) => {\n          this.$message({\n            type: 'success',\n            message: 'Votre e-mail est: ' + value\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Annulé'\n          });\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Personnalisation\n\nIl est possible d'afficher du contenu un peu plus varié et personnalisé.\n\n:::demo les trois précédentes méthodes sont des repackagings de la méthode `$msgbox`. cet exemple appelle directement `$msgbox` en utilisant l'attribut `showCancelButton` pour indiquer si un bouton annuler doit être affiché. De plus, vous pouvez utiliser `cancelButtonClass` pour ajouter du style et `cancelButtonText` pour personnaliser le bouton texte (voir la liste complète en fin de page). La méthode `beforeClose`est appelée quand la MessageBox va être fermée et prévient sa fermeture. Elle prend trois paramètres: `action`, `instance` et `done`. Elle vous permet ainsi d'effectuer des actions avant la fermeture, e.g. activer `loading` pour le bouton de confirmation. Appelez `done` pour fermer la MessageBox, sinon l'instance ne sera jamais fermée.\n\n```html\n<template>\n  <el-button type=\"text\" @click=\"open\">Cliquez pour ouvrir la MessageBox</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        const h = this.$createElement;\n        this.$msgbox({\n          title: 'Message',\n          message: h('p', null, [\n            h('span', null, 'Le message peut être '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ]),\n          showCancelButton: true,\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Annuler',\n          beforeClose: (action, instance, done) => {\n            if (action === 'confirm') {\n              instance.confirmButtonLoading = true;\n              instance.confirmButtonText = 'Chargement...';\n              setTimeout(() => {\n                done();\n                setTimeout(() => {\n                  instance.confirmButtonLoading = false;\n                }, 300);\n              }, 3000);\n            } else {\n              done();\n            }\n          }\n        }).then(action => {\n          this.$message({\n            type: 'info',\n            message: 'Action: ' + action\n          });\n        });\n      },\n    }\n  }\n</script>\n```\n:::\n\n:::tip\nLe contenu de MessageBox peut être `VNode`, Vous permettant de passer des composants personnalisés. Lorsque vous ouvrer MessageBox, Vue compare le nouveau `VNode` avec l'ancien `VNode`, puis détermine comment rafraîchir efficacement l'UI, le composant peut donc ne pas être totalement re-rendu ([#8931](https://github.com/ElemeFE/element/issues/8931)). Dans ce cas, Vous pouvez ajouter une clé unique à `VNode` à chaque fois que MessageBox s'ouvre: [exemple](https://jsfiddle.net/zhiyang/ezmhq2ef).\n:::\n\n### Utiliser du HTML\n\n`message` supporte le HTML.\n\n:::demo Mettez `dangerouslyUseHTMLString` à `true` et `message` sera traité comme du HTML.\n\n```html\n<template>\n  <el-button type=\"text\" @click=\"open\">Cliquez pour ouvrir la MessageBox</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$alert('<strong>Ceci est du <i>HTML</i></strong>', 'HTML', {\n          dangerouslyUseHTMLString: true\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n:::warning\nBien que la propriété `message` supporte le HTML, générer du contenu HTML dynamiquement peut être très dangereux, car cela permet des [attaques XSS](https://en.wikipedia.org/wiki/Cross-site_scripting). Donc lorsque `dangerouslyUseHTMLString` est présent, soyez certain de sécuriser le contenu de `message`, et n'assignez **jamais** à `message` du contenu fournit par l'utilisateur.\n:::\n\n### Distinguer 'annuler' de 'fermer'\n\nDans certains cas, les boutons fermer et annuler peuvent avoir des sens différents.\n\n:::demo Par défaut, le paramètre de la `callback` et de la promesse rejetée est 'cancel' lorsque l'utilisateur annule (clique sur le bouton annuler) ou lorsqu'il ferme la fenêtre (clique sur le bouton fermer, hors de la fenêtre, ou presse ESC). Si `distinguishCancelAndClose` est à `true`, le dernier cas précédent renvoie 'close' au lieu de 'cancel' afin de pouvoir gérer les deux actions différemment.\n\n```html\n<template>\n  <el-button type=\"text\" @click=\"open\">Cliquez pour ouvrir la MessageBox</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$confirm('Vous avez du travail non enregistré, enregistrer et quitter?', 'Confirm', {\n          distinguishCancelAndClose: true,\n          confirmButtonText: 'Enregistrer',\n          cancelButtonText: 'Ne pas enregistrer'\n        })\n          .then(() => {\n            this.$message({\n              type: 'info',\n              message: 'Enregistré. Passage a une nouvelle route.'\n            });\n          })\n          .catch(action => {\n            this.$message({\n              type: 'info',\n              message: action === 'cancel'\n                ? 'Changements annulés. Passage sur une nouvelle route.'\n                : 'Reste sur la même route'\n            })\n          });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Contenu centré\n\nle contenu de MessageBox peut être centré.\n\n:::demo Mettre `center` à `true` centrera le contenu\n\n```html\n<template>\n  <el-button type=\"text\" @click=\"open\">Cliquez pour ouvrir la MessageBox</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$confirm('Ceci effacera le fichier, continuer?' , 'Warning', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Annuler',\n          type: 'warning',\n          center: true\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: 'Fichier supprimé'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Annulé'\n          });\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Méthode globale\n\nSi Element est importé entièrement, il ajoutera les méthodes suivantes à Vue.prototype: `$msgbox`, `$alert`, `$confirm` et `$prompt`. Dans ce cas vous pouvez appeler `MessageBox` comme nous l'avons fait dans cette page. Les paramètres sont:\n- `$msgbox(options)`\n- `$alert(message, title, options)` ou `$alert(message, options)`\n- `$confirm(message, title, options)` ou `$confirm(message, options)`\n- `$prompt(message, title, options)` ou `$prompt(message, options)`\n\n### Import à la demande\n\nSi vous préférer importer `MessageBox` à la demande:\n\n```javascript\nimport { MessageBox } from 'element-ui';\n```\n\nLes méthodes correspondantes sont: `MessageBox`, `MessageBox.alert`, `MessageBox.confirm` et `MessageBox.prompt`. Les paramètres sont les mêmes que précédemment.\n\n### Options\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| title | Titre de la MessageBox. | string | — | — |\n| message | Contenu de la MessageBox. | string | — | — |\n| dangerouslyUseHTMLString | Si `message` doit être traité comme du HTML. | boolean | — | false |\n| type | Type du message, utilisé pour le choix d'icône. | string | success / info / warning / error | — |\n| iconClass | Classe d'icône personnalisée, écrase `type`. | string | — | — |\n| customClass | Nom de classe pour MessageBox. | string | — | — |\n| callback | La callback de fermeture de MessageBox si vous n'utilisez pas les promesses. | function(action, instance), ou `action` peut être 'confirm', 'cancel' ou 'close', et `instance` est l'instance MessageBox. | — | — |\n| showClose | Si l'icône de fermeture doit être affichée. | boolean | — | true |\n| beforeClose | La callback de pré-fermeture qui empèchera MessageBox de se fermer. | function(action, instance, done), ou `action` peut-être 'confirm', 'cancel' ou 'close'; `instance` est l'instance de MessageBox; `done` est la méthode pour fermer l'instance. | — | — |\n| distinguishCancelAndClose | S'il doit y avoir une différence entre l'annulation et la fermeture de la MessageBox. | boolean | — | false |\n| lockScroll | Si le défilement de la page doit être bloqué lorsque la MessageBox est active. | boolean | — | true |\n| showCancelButton | Si le bouton annuler doit être affiché. | boolean | — | false (true dans le cas de confirm ou prompt). |\n| showConfirmButton | Si le bouton confirmer doit être affiché. | boolean | — | true |\n| cancelButtonText | Le texte du bouton annuler. | string | — | Cancel |\n| confirmButtonText | Le texte du bouton confirmer. | string | — | OK |\n| cancelButtonClass | Classe du bouton annuler. | string | — | — |\n| confirmButtonClass | Classe du bouton confirmer. | string | — | — |\n| closeOnClickModal | Si MessageBox peut être fermée en cliquant en dehors. | boolean | — | true (false dans le cas de alert). |\n| closeOnPressEscape | Si MessageBox peut être fermée en pressant ESC. | boolean | — | true (false dans le cas de alert) |\n| closeOnHashChange | Si MessageBox doit être fermée quand le hash change. | boolean | — | true |\n| showInput | Si un champs d'input doit être affiché. | boolean | — | false (true dans le cas de prompt). |\n| inputPlaceholder | Placeholder du champs d'input. | string | — | — |\n| inputType | Type du champs d'input. | string | — | text |\n| inputValue | Valeur initiale du champs d'input. | string | — | — |\n| inputPattern | RegExp du champs d'input. | regexp | — | — |\n| inputValidator | Fonction de validation du champs d'input. Doit retourner un boolean ou un string. Si c'est un string, il sera assigné à inputErrorMessage. | function | — | — |\n| inputErrorMessage | Message d'erreur lorsque la validation échoue. | string | — | Illegal input |\n| center | Si le contenu doit être centré. | boolean | — | false |\n| roundButton | Si le bouton doit être rond. | boolean | — | false |\n"
  },
  {
    "path": "examples/docs/fr-FR/message.md",
    "content": "## Message\n\nUtilisé pour avoir un retour après une action particulière. La différence avec Notification est que ce dernier est surtout utilisé pour afficher des notifications système passives.\n\n### Usage\n\nS'affiche en haut de la page et disparaît après trois secondes.\n\n:::demo L'utilisation de Message est très similaire à Notification, la plupart des options ne sont donc pas expliquées ici. Référez-vous à la table en fin de page et celle de Notification pour en savoir plus. Element affecte la méthode `$message` pour appeler Message. Il peut prendre en paramètre un string ou un VNode, qui sera affiché en tant que body principal.\n\n```html\n<template>\n  <el-button :plain=\"true\" @click=\"open\">Afficher le message</el-button>\n  <el-button :plain=\"true\" @click=\"openVn\">VNode</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$message('Ceci est un message.');\n      },\n\n      openVn() {\n        const h = this.$createElement;\n        this.$message({\n          message: h('p', null, [\n            h('span', null, 'Message peut être '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ])\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Types\n\nUtilisé pour montrer un retour d'activités Success, Warning, Message ou Error.\n\n:::demo Lorsque vous avez besoin de plus de personnalisation, Message peut aussi accepter un objet en paramètre. Par exemple, le paramètre `type` définit différents types, son défaut étant `info`. Dans ce cas le body est passé comme valeur de `message`. De plus, il existe des méthodes pour chaque type, afin que vous puissiez vous passer de la propriété `type` comme dans `open4`.\n```html\n<template>\n  <el-button :plain=\"true\" @click=\"open2\">success</el-button>\n  <el-button :plain=\"true\" @click=\"open3\">warning</el-button>\n  <el-button :plain=\"true\" @click=\"open1\">message</el-button>\n  <el-button :plain=\"true\" @click=\"open4\">error</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open1() {\n        this.$message('Ceci est un message.');\n      },\n      open2() {\n        this.$message({\n          message: 'Félicitations, ceci est un message de succès.',\n          type: 'success'\n        });\n      },\n\n      open3() {\n        this.$message({\n          message: 'Attention, ceci est un avertissement.',\n          type: 'warning'\n        });\n      },\n\n      open4() {\n        this.$message.error('Ouups, ceci est une erreur.');\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Fermeture\n\nUn bouton de fermeture peut être ajouté.\n\n:::demo Un Message ne peut être fermé par défaut. Utiliséez `showClose` si vous avez besoin de pouvoir le fermer. De plus, tout comme Notification, Message possède une `duration` réglable. La durée par défaut est de 3000 ms, et infinie si à `0`.\n```html\n<template>\n  <el-button :plain=\"true\" @click=\"open1\">message</el-button>\n  <el-button :plain=\"true\" @click=\"open2\">success</el-button>\n  <el-button :plain=\"true\" @click=\"open3\">warning</el-button>\n  <el-button :plain=\"true\" @click=\"open4\">error</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open1() {\n        this.$message({\n          showClose: true,\n          message: 'Ceci est un message.'\n        });\n      },\n\n      open2() {\n        this.$message({\n          showClose: true,\n          message: 'Félicitations, ceci est un message de succès.',\n          type: 'success'\n        });\n      },\n\n      open3() {\n        this.$message({\n          showClose: true,\n          message: 'Attention, ceci est un avertissement.',\n          type: 'warning'\n        });\n      },\n\n      open4() {\n        this.$message({\n          showClose: true,\n          message: 'Ouups, ceci est une erreur.',\n          type: 'error'\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Texte centré\n\nUtilisez l'attribut `center` pour centrer le texte.\n\n:::demo\n\n```html\n<template>\n  <el-button :plain=\"true\" @click=\"openCenter\">Texte centré</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      openCenter() {\n        this.$message({\n          message: 'Texte centré',\n          center: true\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Utiliser du HTML\n\n`message` supporte le HTML.\n\n:::demo Mettez `dangerouslyUseHTMLString` à true et `message` sera traité comme du HTML.\n\n```html\n<template>\n  <el-button :plain=\"true\" @click=\"openHTML\">Utiliser du HTML</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      openHTML() {\n        this.$message({\n          dangerouslyUseHTMLString: true,\n          message: '<strong>Ceci est du <i>HTML</i></strong>'\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n:::warning\nBien que la propriété `message` supporte le HTML, générer du contenu HTML dynamiquement peut être très dangereux, car cela permet des [attaques XSS](https://en.wikipedia.org/wiki/Cross-site_scripting). Donc lorsque `dangerouslyUseHTMLString` est présent, soyez certain de sécuriser le contenu de `message`, et n'assignez **jamais** à `message` du contenu fournit par l'utilisateur.\n:::\n\n### Méthode globale\n\nElement ajoute une méthode `$message` à Vue.prototype. Vous pouvez donc appeler `Message` dans l'instance de Vue comme dans cette page.\n\n### Import à la demande\n\nImportez `Message`:\n\n```javascript\nimport { Message } from 'element-ui';\n```\n\nDans ce cas il faudra appeler `Message(options)`. Les méthodes des différents types sont aussi ajoutées, e.g. `Message.success(options)`. Vous pouvez appeler `Message.closeAll()` pour fermer manuellement toutes les instances.\n\n### Options\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| message | Texte du message. | string / VNode | — | — |\n| type | Type du message. | string | success/warning/info/error | info |\n| iconClass | Classe de l'icône, écrase `type`. | string | — | — |\n| dangerouslyUseHTMLString | Si `message` doit être traité comme du HTML. | boolean | — | false |\n| customClass | Nom de classe pour Message. | string | — | — |\n| duration | La durée d'affichage, en millisecondes. Si 0, la durée est infinie. | number | — | 3000 |\n| showClose | Si un bouton de fermeture doit être affiché. | boolean | — | false |\n| center | Si le texte doit être centré. | boolean | — | false |\n| onClose | Callback de fermeture avec en paramètre l'instance de Message. | function | — | — |\n| offset | set the distance to the top of viewport | number | — | 20 |\n\n### Méthodes\n\n`Message` et `this.$message` retourne l'instance actuelle. Pour fermer manuellement cette instance, appelez sa méthode `close`.\n\n| Méthode | Description |\n| ---- | ---- |\n| close | Ferme l'instance de Message. |\n"
  },
  {
    "path": "examples/docs/fr-FR/notification.md",
    "content": "## Notification\n\nAffiche une notification globale dans un coin de la page.\n\n### Usage\n\n:::demo Element enregistre la méthode `$notify` qui reçoit un objet en paramètre. Dans le cas le plus simple, vous pouvez simplement configurer les champs `title` et` message`. Par défaut, la notification se ferme automatiquement après 4500ms, mais vous pouvez régler une autre durée avec `duration`. Si la durée est mise à `0`, la notification ne se fermera pas. `duration` prends donc un `Number` en millisecondes.\n\n```html\n<template>\n  <el-button\n    plain\n    @click=\"open1\">\n    Se ferme automatiquement\n  </el-button>\n  <el-button\n    plain\n    @click=\"open2\">\n    Ne se ferme pas automatiquement\n    </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open1() {\n        const h = this.$createElement;\n\n        this.$notify({\n          title: 'Titre',\n          message: h('i', { style: 'color: teal' }, 'Ceci est un rappel')\n        });\n      },\n\n      open2() {\n        this.$notify({\n          title: 'Prompt',\n          message: 'Ceci est un message qui ne se ferme pas',\n          duration: 0\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Types\n\nNous fournissons quatre types: succès, avertissement, information et erreur.\n\n:::demo Element fournit quatre types de notifications: `success`, `warning`, `info` et `error`. Il sont choisis grâce au champs `type`, et n'importe quelle autre valeur sera ignorée. Il existe des méthodes  enregistrées pour chaque type, comme dans `open3` et `open4`, qui ne nécessitent donc pas le champs `type`.\n```html\n<template>\n  <el-button\n    plain\n    @click=\"open1\">\n    Success\n  </el-button>\n  <el-button\n    plain\n    @click=\"open2\">\n    Warning\n  </el-button>\n  <el-button\n    plain\n    @click=\"open3\">\n    Info\n  </el-button>\n  <el-button\n    plain\n    @click=\"open4\">\n    Error\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open1() {\n        this.$notify({\n          title: 'Success',\n          message: 'Ceci est un message de succès',\n          type: 'success'\n        });\n      },\n\n      open2() {\n        this.$notify({\n          title: 'Warning',\n          message: 'Ceci est un avertissement',\n          type: 'warning'\n        });\n      },\n\n      open3() {\n        this.$notify.info({\n          title: 'Info',\n          message: 'Ceci est une information'\n        });\n      },\n\n      open4() {\n        this.$notify.error({\n          title: 'Error',\n          message: 'Ceci est une erreur'\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Position personnalisée\n\nLa notification peut apparaître dans le coin de votre choix.\n\n:::demo L'attribut `position` définit le coin d'apparition de la notification. Cela peut être `top-right`, `top-left`, `bottom-right` ou `bottom-left`. Le défaut est `top-right`.\n```html\n<template>\n  <el-button\n    plain\n    @click=\"open1\">\n    Top Right\n  </el-button>\n  <el-button\n    plain\n    @click=\"open2\">\n    Bottom Right\n  </el-button>\n  <el-button\n    plain\n    @click=\"open3\">\n    Bottom Left\n  </el-button>\n  <el-button\n    plain\n    @click=\"open4\">\n    Top Left\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open1() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'Je suis dans le coin supérieur droit'\n        });\n      },\n\n      open2() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'Je suis dans le coin inférieur droit',\n          position: 'bottom-right'\n        });\n      },\n\n      open3() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'Je suis dans le coin inférieur gauche',\n          position: 'bottom-left'\n        });\n      },\n\n      open4() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'Je suis dans le coin supérieur gauche',\n          position: 'top-left'\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Avec décalage\n\nVous pouvez décaler l'emplacement de la notification par rapport au bord de la page.\n\n:::demo Réglez `offset` pour choisir le décalage de la notification. Notez que chaque notification apparaissant au même moment devrait avoir le même décalage.\n```html\n<template>\n  <el-button\n    plain\n    @click=\"open\">\n    Notification avec décalage\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$notify.success({\n          title: 'Success',\n          message: 'Ceci est un message de succès',\n          offset: 100\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Utiliser du HTML\n\nL'attribut `message` supporte le HTML.\n\n:::demo Mettez `dangerouslyUseHTMLString` à true et `message` sera traité comme du HTML.\n\n```html\n<template>\n  <el-button\n    plain\n    @click=\"open\">\n    Utiliser du HTML\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$notify({\n          title: 'HTML String',\n          dangerouslyUseHTMLString: true,\n          message: '<strong>Ceci est du <i>HTML</i></strong>'\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n:::warning\nBien que la propriété `message` supporte le HTML, générer du contenu HTML dynamiquement peut être très dangereux, car cela permet des [attaques XSS](https://en.wikipedia.org/wiki/Cross-site_scripting). Donc lorsque `dangerouslyUseHTMLString` est présent, soyez certain de sécuriser le contenu de `message`, et n'assignez **jamais** à `message` du contenu fournit par l'utilisateur.\n:::\n\n### Cacher le bouton de fermeture\n\nIl est possible de cacher le bouton de fermeture.\n\n:::demo Mettez `showClose` à `false` Pour que la notification ne puisse pas être fermée par l'utilisateur.\n\n```html\n<template>\n  <el-button\n    plain\n    @click=\"open\">\n    Bouton de fermeture caché\n    </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$notify.success({\n          title: 'Info',\n          message: 'Ceci est un message sans bouton de fermeture',\n          showClose: false\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Méthode globale\n\nElement ajoute la méthode `$notify` à Vue.prototype. Vous pouvez donc appeler `Notification` dans l'instance de Vue comme nous avons fait dans cette page.\n\n### Import à la demande\n\nImportez `Notification`:\n\n```javascript\nimport { Notification } from 'element-ui';\n```\n\nDans ce cas vous devrez appeler `Notification(options)`. Il existe aussi des méthodes pour chaque type, e.g. `Notification.success(options)`. Vous pouvez appeler `Notification.closeAll()` pour fermer manuellement toutes les instances.\n\n### Options\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| title | Titre de la notification. | string | — | — |\n| message | Message de la notification. | string/Vue.VNode | — | — |\n| dangerouslyUseHTMLString | Si `message` doit être traité comme du HTML. | boolean | — | false |\n| type | Type de notification. | string | success/warning/info/error | — |\n| iconClass | Classe d'icône. Écrasé par `type`. | string | — | — |\n| customClass | Nom de classe pour la notification. | string | — | — |\n| duration | Durée avant fermeture. Infinie si mise à 0. | number | — | 4500 |\n| position | Position de la notification. | string | top-right/top-left/bottom-right/bottom-left | top-right |\n| showClose | Si le bouton de fermeture doit être affiché. | boolean | — | true |\n| onClose | Callback de fermeture. | function | — | — |\n| onClick | Callback quand la notification est cliquée. | function | — | — |\n| offset | Décalage par rapport au bord de la page. Toutes les notifications arrivant au même moment devraient avoir le même décalage. | number | — | 0 |\n\n### Méthodes\n\n`Notification` et `this.$notify` retourne l'instance actuelle de Notification. Pour fermer chaque instance manuellement, appelez la méthode `close`.\n\n| Méthode | Description |\n| ---- | ---- |\n| close | Ferme la notification. |\n"
  },
  {
    "path": "examples/docs/fr-FR/page-header.md",
    "content": "## PageHeader\n\nSi le chemin de la page est simple, il est recommandé d’utiliser PageHeader au lieu de Breadcrumb.\n\n### Basic\n\n:::demo\n```html\n<el-page-header @back=\"goBack\" content=\"detail\">\n</el-page-header>\n\n<script>\n  export default {\n    methods: {\n      goBack() {\n        console.log('go back');\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Attributes\n| Attribute | Description   | Type      | Valeurs acceptées             | Défaut |\n|---------- |-------------- |---------- |------------------------------ | ------ |\n| title     | titre principal | string  |  —                            | Back   |\n| content   | contenu       | string    |  —                            | —      |\n\n### Events\n| Event Name | Description   | Parameters |\n|----------- |-------------- |----------- |\n| back       | se déclenche lorsque vous cliquez sur le côté droit | — |\n\n### Slots\n| slot      | Description            |\n|---------- | ---------------------- |\n| title     | contenu du titre       |\n| content   | contenu                |\n"
  },
  {
    "path": "examples/docs/fr-FR/pagination.md",
    "content": "## Pagination\n\nSi vous avez beaucoup de données à afficher sur une seule page, il est préférable d'utiliser une pagination.\n\n### Usage\n\n:::demo Configurez `layout` avec les différent éléments de pagination que vous souhaitez, séparés par des virgules. Les éléments possibles sont: `prev` (pour aller vers la page précédente), `next` (pour aller vers la page suivante), `pager` (liste des pages), `jumper` (un champ pour aller directement à une page précise), `total` (Le nombre total d'entrées), `size` (un sélecteur qui détermine la taille de la page) et `->`(chaque élément après celui-ci sera poussé vers la droite).\n\n```html\n<div class=\"block\">\n  <span class=\"demonstration\">Quand vous avez quelques pages</span>\n  <el-pagination\n    layout=\"prev, pager, next\"\n    :total=\"50\">\n  </el-pagination>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Quand vous avez plus que 7 pages</span>\n  <el-pagination\n    layout=\"prev, pager, next\"\n    :total=\"1000\">\n  </el-pagination>\n</div>\n```\n:::\n\n### Nombre de pages\n\n:::demo Par défaut, Pagination réduit les boutons lorsqu'il y a plus de 7 pages. Ce nombre est configurable avec l'attribut `pager-count`.\n\n```html\n<el-pagination\n  :page-size=\"20\"\n  :pager-count=\"11\"\n  layout=\"prev, pager, next\"\n  :total=\"1000\">\n</el-pagination>\n```\n:::\n\n### Boutons avec couleur de fond\n\n:::demo Réglez l'attribut `background` pour change la couleur de fond des boutons.\n\n```html\n<el-pagination\n  background\n  layout=\"prev, pager, next\"\n  :total=\"1000\">\n</el-pagination>\n```\n:::\n\n### Petite pagination\n\nUtilisez une pagination de taille réduite si vous manquez d'espace.\n\n:::demo Ajoutez simplement l'attribut `small` et la pagination sera de taille réduite.\n\n```html\n<el-pagination\n  small\n  layout=\"prev, pager, next\"\n  :total=\"50\">\n</el-pagination>\n```\n:::\n\n### Plus d'éléments\n\nVous pouvez ajouter plus de modules suivant vos besoins.\n\n:::demo Cet exemple contient un use-case complet. Il utilise les évènements `size-change` et `current-change` pour gérer la taille de la page et son changement. `page-sizes` accepte un tableau d'entiers, chacun représentant une taille dans les options de `sizes`, e.g. `[100, 200, 300, 400]` indique que le sélecteur aura quatre options: 100, 200, 300 ou 400 entrées par page.\n\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">Total d'entrées</span>\n    <el-pagination\n      @size-change=\"handleSizeChange\"\n      @current-change=\"handleCurrentChange\"\n      :current-page.sync=\"currentPage1\"\n      :page-size=\"100\"\n      layout=\"total, prev, pager, next\"\n      :total=\"1000\">\n    </el-pagination>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Changement de taille de la page</span>\n    <el-pagination\n      @size-change=\"handleSizeChange\"\n      @current-change=\"handleCurrentChange\"\n      :current-page.sync=\"currentPage2\"\n      :page-sizes=\"[100, 200, 300, 400]\"\n      :page-size=\"100\"\n      layout=\"sizes, prev, pager, next\"\n      :total=\"1000\">\n    </el-pagination>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Aller à</span>\n    <el-pagination\n      @size-change=\"handleSizeChange\"\n      @current-change=\"handleCurrentChange\"\n      :current-page.sync=\"currentPage3\"\n      :page-size=\"100\"\n      layout=\"prev, pager, next, jumper\"\n      :total=\"1000\">\n    </el-pagination>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Tous en même temps</span>\n    <el-pagination\n      @size-change=\"handleSizeChange\"\n      @current-change=\"handleCurrentChange\"\n      :current-page.sync=\"currentPage4\"\n      :page-sizes=\"[100, 200, 300, 400]\"\n      :page-size=\"100\"\n      layout=\"total, sizes, prev, pager, next, jumper\"\n      :total=\"400\">\n    </el-pagination>\n  </div>\n</template>\n<script>\n  export default {\n    methods: {\n      handleSizeChange(val) {\n        console.log(`${val} items per page`);\n      },\n      handleCurrentChange(val) {\n        console.log(`current page: ${val}`);\n      }\n    },\n    data() {\n      return {\n        currentPage1: 5,\n        currentPage2: 5,\n        currentPage3: 5,\n        currentPage4: 4\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Cacher la pagination s'il n'y a qu'une seule page\n\nLorsqu'il n'y a qu'une seule page, il est possible de cacher la pagination avec l'attribut `hide-on-single-page`.\n\n:::demo\n```html\n<div>\n <el-switch v-model=\"value\">\n </el-switch>\n <el-pagination\n  :hide-on-single-page=\"value\"\n  :total=\"5\"\n  layout=\"prev, pager, next\">\n</el-pagination>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: false\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Attributs\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|--------------------|----------------------------------------------------------|-------------------|-------------|--------|\n| small | Si la pagination doit être petite. | boolean |      —       | false |\n| background | Si les boutons doivent avoir une couleur de fond. | boolean | — | false |\n| page-size | Nombre d'entrées sur chaque page, supporte le modificateur .sync. | number |      —       | 10 |\n| total | Nombre total d'entrées. | number | — | — |\n| page-count | Nombre de pages. Réglez `total` ou `page-count` et le nombre de pages sera affiché; si vous avez besoin de `page-sizes`, `total` est requis. | number | — | — |\n| pager-count | Nombre de sélecteurs de pages. Pagination se réduit lorsque le nombre de pages dépasse cette valeur. | number | Nombre impair entre 5 et 21. | 7 |\n| current-page | Le numéro de page courant, supporte le modificateur .sync. | number | — | 1 |\n| layout | L'ensemble des éléments de la pagination, séparés par des virgules. | string | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total'  |\n| page-sizes | Options pour la taille des pages. | number[] | — |  [10, 20, 30, 40, 50, 100] |\n| popper-class | Classe du menu de sélection de la taille des pages. | string | — | — |\n| prev-text | Texte du bouton prev. | string | — | — |\n| next-text | Texte du bouton next. | string | — | — |\n| disabled | Si la pagination est désactivée. | boolean | — | false |\n| hide-on-single-page | Si la pagination doit être cachée quand il n'y a qu'une seule page. | boolean | — | - |\n\n### Évènements\n\n| Nom | Description | Paramètres |\n|---------|--------|---------|\n| size-change | Se déclenche quand `page-size` change. | La nouvelle taille. |\n| current-change | Se déclenche quand `current-page` change. | La nouvelle page courante |\n| prev-click | Se déclenche quand le bouton prev est cliqué et que la page courante change. | La nouvelle page courante. |\n| next-click | Se déclenche quand le bouton next est cliqué et que la page courante change. | La nouvelle page courante. |\n\n### Slot\n\n| Name | Description |\n| --- | --- |\n| — | Contenu personnalisé. Pour l'utiliser vous devez déclarer `slot` dans `layout`. |\n"
  },
  {
    "path": "examples/docs/fr-FR/popconfirm.md",
    "content": "## Popconfirm \n\nA simple confirmation dialog of an element click action.\n\n### Basic usage\n\nPopconfirm is similar to Popover. So for some duplicated attributes, please refer to the documentation of Popover.\n\n:::demo Only `title` attribute is avaliable in Popconfirm, `content` will be ignored.\n```html\n<template>\n<el-popconfirm\n  title=\"Are you sure to delete this?\"\n>\n  <el-button slot=\"reference\">Delete</el-button>\n</el-popconfirm>\n</template>\n````\n:::\n\n### Customise\nYou can customise Popconfirm like:\n:::demo\n```html\n<template>\n<el-popconfirm\n  confirm-button-text='OK'\n  cancel-button-text='No, Thanks'\n  icon=\"el-icon-info\"\n  icon-color=\"red\"\n  title=\"Are you sure to delete this?\"\n>\n  <el-button slot=\"reference\">Delete</el-button>\n</el-popconfirm>\n</template>\n```\n:::\n\n### Attributes\n| Attribute      | Description          | Type      | Accepted Values       | Default  |\n|--------------------|----------------------------------------------------------|-------------------|-------------|--------|\n|  title              | Title | String | — | — |\n|  confirm-button-text              | Confirm button text | String | — | — |\n|  cancel-button-text              | Cancel button text | String | — | — |\n|  confirm-button-type              | Confirm button type | String | — | Primary |\n|  cancel-button-type              | Cancel button type | String | — | Text |\n|  icon              | Icon | String | — | el-icon-question |\n|  icon-color              | Icon color | String | — | #f90 |\n|  hide-icon              | is hide Icon | Boolean | — | false |\n\n### Slot\n| Name | Description |\n|--- | ---|\n| reference | HTML element that triggers Popconfirm |\n\n### Events\n| Event Name | Description | Parameters |\n|---------|--------|---------|\n| confirm | triggers when click confirm button | — |\n| cancel | triggers when click cancel button | — |"
  },
  {
    "path": "examples/docs/fr-FR/popover.md",
    "content": "## Popover\n\n### Usage\n\nSimilaire à Tooltip, Popover est aussi construit avec `Vue-popper`. Certains attributs sont donc les mêmes, vous pourrez vous référer à la documentation de Tooltip pour certains d'entre eux.\n\n:::demo L'attribut `trigger` détermine comment le popover se déclenche: `hover`, `click`, `focus` ou `manual`. Concernant l'élément déclencheur, vous pouvez l'écrire de deux manières: en utilisant le slot `slot=\"reference\"` ou bien la directive `v-popover` avec `ref` égal à popover.\n\n```html\n<template>\n  <el-popover\n    placement=\"top-start\"\n    title=\"Title\"\n    width=\"200\"\n    trigger=\"hover\"\n    content=\"this is content, this is content, this is content\">\n    <el-button slot=\"reference\">S'active au passage du curseur</el-button>\n  </el-popover>\n\n  <el-popover\n    placement=\"bottom\"\n    title=\"Title\"\n    width=\"200\"\n    trigger=\"click\"\n    content=\"this is content, this is content, this is content\">\n    <el-button slot=\"reference\">S'active en cliquant</el-button>\n  </el-popover>\n\n  <el-popover\n    ref=\"popover\"\n    placement=\"right\"\n    title=\"Title\"\n    width=\"200\"\n    trigger=\"focus\"\n    content=\"this is content, this is content, this is content\">\n  </el-popover>\n  <el-button v-popover:popover>S'active au focus</el-button>\n\n  <el-popover\n    placement=\"bottom\"\n    title=\"Title\"\n    width=\"200\"\n    trigger=\"manual\"\n    content=\"this is content, this is content, this is content\"\n    v-model=\"visible\">\n    <el-button slot=\"reference\" @click=\"visible = !visible\">S'active manuellement</el-button>\n  </el-popover>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        visible: false\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Informations imbriquées\n\nD'autres composants peuvent s'imbriquer dans un popover.\n\n:::demo Remplacez `content` par un `slot`.\n\n```html\n<el-popover\n  placement=\"right\"\n  width=\"400\"\n  trigger=\"click\">\n  <el-table :data=\"gridData\">\n    <el-table-column width=\"150\" property=\"date\" label=\"date\"></el-table-column>\n    <el-table-column width=\"100\" property=\"name\" label=\"name\"></el-table-column>\n    <el-table-column width=\"300\" property=\"address\" label=\"address\"></el-table-column>\n  </el-table>\n  <el-button slot=\"reference\">Cliquez pour activer</el-button>\n</el-popover>\n\n<script>\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: '2016-05-02',\n          name: 'Jack',\n          address: 'New York City'\n        }, {\n          date: '2016-05-04',\n          name: 'Jack',\n          address: 'New York City'\n        }, {\n          date: '2016-05-01',\n          name: 'Jack',\n          address: 'New York City'\n        }, {\n          date: '2016-05-03',\n          name: 'Jack',\n          address: 'New York City'\n        }]\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Opérations imbriquées\n\nVous pouvez aussi imbriquer des opérations. Procéder ainsi est plus léger que d'utiliser Dialog.\n\n:::demo\n```html\n<el-popover\n  placement=\"top\"\n  width=\"160\"\n  v-model=\"visible\">\n  <p>Voulez-vous vraiment supprimer ceci?</p>\n  <div style=\"text-align: right; margin: 0\">\n    <el-button size=\"mini\" type=\"text\" @click=\"visible = false\">Annuler</el-button>\n    <el-button type=\"primary\" size=\"mini\" @click=\"visible = false\">Confirmer</el-button>\n  </div>\n  <el-button slot=\"reference\">Supprimer</el-button>\n</el-popover>\n\n<script>\n  export default {\n    data() {\n      return {\n        visible: false,\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Attributs\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|--------------------|----------------------------------------------------------|-------------------|-------------|--------|\n| trigger | Comment le popover se déclenche. | string  | click/focus/hover/manual |    click    |\n| title | Titre du popover. | string | — | — |\n| content | Contenu du popover, peut être remplacé par un `slot` | string | — | — |\n| width | Largeur du popover. | string, number  | — | Min width 150px |\n| placement | Emplacement du popover. | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end |  bottom |\n| disabled | Si le popover est désactivé. | boolean | — |  false |\n| value / v-model | Si le popover est visible. | Boolean | — |  false |\n| offset | Décalage du popover. | number | — |  0 |\n| transition | Animation de transition du popover. | string | — | el-fade-in-linear |\n| visible-arrow | Si une flèche doit être affichée ou non. Pour plus d'informations, référez-vous à [Vue-popper](https://github.com/element-component/vue-popper). | boolean | — | true |\n| popper-options | Paramètres pour [popper.js](https://popper.js.org/docs/v2/). | object | Référez-vous à [popper.js](https://popper.js.org/docs/v2/). | `{ boundariesElement: 'body', gpuAcceleration: false }` |\n| popper-class | Classe du popover. | string | — | — |\n| open-delay | Délai d'affichage, lorsque `trigger` est 'hover', en millisecondes. | number | — | — |\n| close-delay | delay before disappearing when `trigger` is hover, in milliseconds | number | — | 200 |\n| tabindex   | [tabindex](https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/tabindex) de Popover | number | — | 0 |\n\n### Slot\n\n| Nom | Description |\n| --- | --- |\n| — | Contenu du popover. |\n| reference | Element HTML qui déclenche le popover. |\n\n### Évènements\n\n| Nom | Description | Paramètres |\n|---------|--------|---------|\n| show | Se déclenche quand le popover s'affiche. | — |\n| after-enter | Se déclenche quand la transition d'entrée se termine. | — |\n| hide | Se déclenche quand le popover disparaît. | — |\n| after-leave | Se déclenche quand la transition de sortie se termine. | — |\n"
  },
  {
    "path": "examples/docs/fr-FR/progress.md",
    "content": "## Progress\n\nProgress est utilisé pour afficher la progression d'une opération et informer l'utilisateur de son status actuel.\n\n### Barre de progression linéaire\n\n:::demo Utilisez l'attribut `percentage` pour indiquer le pourcentage. Cet attribut est **requis** et doit être compris entre 0 et 100. Vous pouvez personnaliser le format du texte en définissant le `format`.\n```html\n<el-progress :percentage=\"50\"></el-progress>\n<el-progress :percentage=\"100\" :format=\"format\"></el-progress>\n<el-progress :percentage=\"100\" status=\"success\"></el-progress>\n<el-progress :percentage=\"100\" status=\"warning\"></el-progress>\n<el-progress :percentage=\"50\" status=\"exception\"></el-progress>\n\n<script>\n  export default {\n    methods: {\n      format(percentage) {\n        return percentage === 100 ? 'Full' : `${percentage}%`;\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Pourcentage interne\n\nDans ce cas le pourcentage ne prends pas de place en plus.\n\n:::demo L'attribut `stroke-width` détermine le `width` de la barre de progression. Utilisez `text-inside` mettre la description à l'intérieur de la barre.\n```html\n<el-progress :text-inside=\"true\" :stroke-width=\"26\" :percentage=\"70\"></el-progress>\n<el-progress :text-inside=\"true\" :stroke-width=\"24\" :percentage=\"100\" status=\"success\"></el-progress>\n<el-progress :text-inside=\"true\" :stroke-width=\"22\" :percentage=\"80\" status=\"warning\"></el-progress>\n<el-progress :text-inside=\"true\" :stroke-width=\"20\" :percentage=\"50\" status=\"exception\"></el-progress>\n```\n:::\n\n### Couleur personnalisée\n\nVous pouvez utiliser l'attribut `color` pour définir la couleur de la barre de progression. il accepte une couleur, une fonction ou un tableau.\n\n:::demo\n\n```html\n<el-progress :percentage=\"percentage\" :color=\"customColor\"></el-progress>\n\n<el-progress :percentage=\"percentage\" :color=\"customColorMethod\"></el-progress>\n\n<el-progress :percentage=\"percentage\" :color=\"customColors\"></el-progress>\n<div>\n  <el-button-group>\n    <el-button icon=\"el-icon-minus\" @click=\"decrease\"></el-button>\n    <el-button icon=\"el-icon-plus\" @click=\"increase\"></el-button>\n  </el-button-group>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        percentage: 20,\n        customColor: '#409eff',\n        customColors: [\n          {color: '#f56c6c', percentage: 20},\n          {color: '#e6a23c', percentage: 40},\n          {color: '#5cb87a', percentage: 60},\n          {color: '#1989fa', percentage: 80},\n          {color: '#6f7ad3', percentage: 100}\n        ]\n      };\n    },\n    methods: {\n      customColorMethod(percentage) {\n        if (percentage < 30) {\n          return '#909399';\n        } else if (percentage < 70) {\n          return '#e6a23c';\n        } else {\n          return '#67c23a';\n        }\n      },\n      increase() {\n        this.percentage += 10;\n        if (this.percentage > 100) {\n          this.percentage = 100;\n        }\n      },\n      decrease() {\n        this.percentage -= 10;\n        if (this.percentage < 0) {\n          this.percentage = 0;\n        }\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Barre de progression circulaire\n\n:::demo Vous pouvez mettre l'attribut `type` à `circle` pour obtenir une barre circulaire, et utiliser `width` pour changer la taille du cercle.\n```html\n<el-progress type=\"circle\" :percentage=\"0\"></el-progress>\n<el-progress type=\"circle\" :percentage=\"25\"></el-progress>\n<el-progress type=\"circle\" :percentage=\"100\" status=\"success\"></el-progress>\n<el-progress type=\"circle\" :percentage=\"70\" status=\"warning\"></el-progress>\n<el-progress type=\"circle\" :percentage=\"50\" status=\"exception\"></el-progress>\n```\n:::\n\n### Barre de progression du tableau de bord\n\nVous pouvez également spécifier l'attribut `type` de `dashboard` pour utiliser la barre de progression du tableau de bord.\n\n:::demo\n\n```html\n<el-progress type=\"dashboard\" :percentage=\"percentage\" :color=\"colors\"></el-progress>\n<div>\n  <el-button-group>\n    <el-button icon=\"el-icon-minus\" @click=\"decrease\"></el-button>\n    <el-button icon=\"el-icon-plus\" @click=\"increase\"></el-button>\n  </el-button-group>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        percentage: 10,\n        colors: [\n          {color: '#f56c6c', percentage: 20},\n          {color: '#e6a23c', percentage: 40},\n          {color: '#5cb87a', percentage: 60},\n          {color: '#1989fa', percentage: 80},\n          {color: '#6f7ad3', percentage: 100}\n        ]\n      };\n    },\n    methods: {\n      increase() {\n        this.percentage += 10;\n        if (this.percentage > 100) {\n          this.percentage = 100;\n        }\n      },\n      decrease() {\n        this.percentage -= 10;\n        if (this.percentage < 0) {\n          this.percentage = 0;\n        }\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Attributs\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n| --- | ---- | ---- | ---- | ---- |\n| **percentage** | Le pourcentage, **requis**. | number | 0-100 | 0 |\n| type | Le type de barre. | string | line/circle/dashboard | line |\n| stroke-width | La largeur de la barre. | number | — | 6 |\n| text-inside | Si le pourcentage doit être à l'intérieur de la barre, ne marche que si `type` est 'line'. | boolean | — | false |\n| status | Le statut actuel de la progression. | string | success/exception/text | — |\n| color  | La couleur de fon de la barre. Écrase `status`. | string/function/array | — | '' |\n| width | La largeur du canvas dans le cas d'une barre circulaire. | number | — | 126 |\n| show-text | Si le pourcentage doit être affiché. | boolean | — | true |\n| stroke-linecap  | circle/dashboard type shape at the end path | string | butt/round/square | round |\n| format  | Vous pouvez personnaliser le format du texte en définissant le format  | function(percentage) | — | — |\n| define-back-color  | background color of progress bar (hex format) | string | — | — |\n| text-color  | text color of progress bar (hex format) | string | — | — |"
  },
  {
    "path": "examples/docs/fr-FR/quickstart.md",
    "content": "## Démarrer\n\nCette page vous guidera tout le long de l'installation d'Element au sein d'un projet webpack.\n\n### Use vue-cli@3\n\nNous fournissons un [plugin Element](https://github.com/ElementUI/vue-cli-plugin-element) pour vue-cli@3, que vous pouvez utiliser pour créer rapidement un projet basé sur Element.\n\n### Utiliser le Starter Kit\n\nNous fournissons un [template de projet](https://github.com/ElementUI/element-starter) pour débuter rapidement. Pour les utilisateurs Laravel, il est aussi possible d'utiliser ce [template](https://github.com/ElementUI/element-in-laravel-starter). VOus pouvez les télécharger directement.\n\nSi vous préférer vous passer de template, voyez la section suivante.\n\n### Importer Element\n\nElement peut être importé entièrement ou à la demande. Commençons par l'import total.\n\n#### Import total\n\nDans main.js:\n\n```javascript\nimport Vue from 'vue';\nimport ElementUI from 'element-ui';\nimport 'element-ui/lib/theme-chalk/index.css';\nimport App from './App.vue';\n\nVue.use(ElementUI);\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});\n```\n\nL'exemple ci-dessus importe Element entièrement. Notez que les fichiers CSS doivent être importés séparément.\n\n#### À la demande\n\nGrâce au [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component), nous pouvons importer uniquement les composants désirés, rendant ainsi le projet plus léger.\n\nTout d'abord, installez babel-plugin-component:\n\n```bash\nnpm install babel-plugin-component -D\n```\n\nPuis éditez .babelrc:\n\n```json\n{\n  \"presets\": [[\"es2015\", { \"modules\": false }]],\n  \"plugins\": [\n    [\n      \"component\",\n      {\n        \"libraryName\": \"element-ui\",\n        \"styleLibraryName\": \"theme-chalk\"\n      }\n    ]\n  ]\n}\n```\n\nEnsuite, si vous n'avez besoin que de Button et Select, éditez main.js comme suit:\n\n```javascript\nimport Vue from 'vue';\nimport { Button, Select } from 'element-ui';\nimport App from './App.vue';\n\nVue.component(Button.name, Button);\nVue.component(Select.name, Select);\n/* ou\n * Vue.use(Button)\n * Vue.use(Select)\n */\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});\n```\n\nExemple complet (liste complète des composants dans [components.json](https://github.com/ElemeFE/element/blob/master/components.json)):\n\n```javascript\nimport Vue from 'vue';\nimport {\n  Pagination,\n  Dialog,\n  Autocomplete,\n  Dropdown,\n  DropdownMenu,\n  DropdownItem,\n  Menu,\n  Submenu,\n  MenuItem,\n  MenuItemGroup,\n  Input,\n  InputNumber,\n  Radio,\n  RadioGroup,\n  RadioButton,\n  Checkbox,\n  CheckboxButton,\n  CheckboxGroup,\n  Switch,\n  Select,\n  Option,\n  OptionGroup,\n  Button,\n  ButtonGroup,\n  Table,\n  TableColumn,\n  DatePicker,\n  TimeSelect,\n  TimePicker,\n  Popover,\n  Tooltip,\n  Breadcrumb,\n  BreadcrumbItem,\n  Form,\n  FormItem,\n  Tabs,\n  TabPane,\n  Tag,\n  Tree,\n  Alert,\n  Slider,\n  Icon,\n  Row,\n  Col,\n  Upload,\n  Progress,\n  Spinner,\n  Badge,\n  Card,\n  Rate,\n  Steps,\n  Step,\n  Carousel,\n  CarouselItem,\n  Collapse,\n  CollapseItem,\n  Cascader,\n  ColorPicker,\n  Transfer,\n  Container,\n  Header,\n  Aside,\n  Main,\n  Footer,\n  Timeline,\n  TimelineItem,\n  Link,\n  Divider,\n  Image,\n  Calendar,\n  Backtop,\n  PageHeader,\n  CascaderPanel,\n  Loading,\n  MessageBox,\n  Message,\n  Notification\n} from 'element-ui';\n\nVue.use(Pagination);\nVue.use(Dialog);\nVue.use(Autocomplete);\nVue.use(Dropdown);\nVue.use(DropdownMenu);\nVue.use(DropdownItem);\nVue.use(Menu);\nVue.use(Submenu);\nVue.use(MenuItem);\nVue.use(MenuItemGroup);\nVue.use(Input);\nVue.use(InputNumber);\nVue.use(Radio);\nVue.use(RadioGroup);\nVue.use(RadioButton);\nVue.use(Checkbox);\nVue.use(CheckboxButton);\nVue.use(CheckboxGroup);\nVue.use(Switch);\nVue.use(Select);\nVue.use(Option);\nVue.use(OptionGroup);\nVue.use(Button);\nVue.use(ButtonGroup);\nVue.use(Table);\nVue.use(TableColumn);\nVue.use(DatePicker);\nVue.use(TimeSelect);\nVue.use(TimePicker);\nVue.use(Popover);\nVue.use(Tooltip);\nVue.use(Breadcrumb);\nVue.use(BreadcrumbItem);\nVue.use(Form);\nVue.use(FormItem);\nVue.use(Tabs);\nVue.use(TabPane);\nVue.use(Tag);\nVue.use(Tree);\nVue.use(Alert);\nVue.use(Slider);\nVue.use(Icon);\nVue.use(Row);\nVue.use(Col);\nVue.use(Upload);\nVue.use(Progress);\nVue.use(Spinner);\nVue.use(Badge);\nVue.use(Card);\nVue.use(Rate);\nVue.use(Steps);\nVue.use(Step);\nVue.use(Carousel);\nVue.use(CarouselItem);\nVue.use(Collapse);\nVue.use(CollapseItem);\nVue.use(Cascader);\nVue.use(ColorPicker);\nVue.use(Transfer);\nVue.use(Container);\nVue.use(Header);\nVue.use(Aside);\nVue.use(Main);\nVue.use(Footer);\nVue.use(Timeline);\nVue.use(TimelineItem);\nVue.use(Link);\nVue.use(Divider);\nVue.use(Image);\nVue.use(Calendar);\nVue.use(Backtop);\nVue.use(PageHeader);\nVue.use(CascaderPanel);\n\nVue.use(Loading.directive);\n\nVue.prototype.$loading = Loading.service;\nVue.prototype.$msgbox = MessageBox;\nVue.prototype.$alert = MessageBox.alert;\nVue.prototype.$confirm = MessageBox.confirm;\nVue.prototype.$prompt = MessageBox.prompt;\nVue.prototype.$notify = Notification;\nVue.prototype.$message = Message;\n```\n\n### Configuration globale\n\nLors de l'import d'Element, vous pouvez définir un objet de configuration global. Actuellement il possède de propriétés: `size` et `zIndex`. La propriété `size` détermine la taille par défaut de tout les composants et `zIndex` règle le z-index initial (default: 2000) des fenêtres modales:\n\nImport total d'Element：\n\n```js\nimport Vue from 'vue';\nimport Element from 'element-ui';\nVue.use(Element, { size: 'small', zIndex: 3000 });\n```\n\nImport partiel d'Element：\n\n```js\nimport Vue from 'vue';\nimport { Button } from 'element-ui';\n\nVue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };\nVue.use(Button);\n```\n\nAvec la configuration ci-dessus, la taille par défaut des composants ayant l'attribut size sera 'small', et le z-index initial des fenêtres modales est 3000.\n\n### Commencer à développer\n\nMaintenant que vous avez ajouté Vue et Element à votre projet, vous pouvez commencer à coder. Référez-vous à la documentation de chaque composant pour savoir comment les utiliser.\n\n### Utiliser Nuxt.js\n\nVous pouvez également commencer un projet avec [Nuxt.js](https://nuxtjs.org/):\n\n<div class=\"glitch-embed-wrap\" style=\"height: 420px; width: 100%;\">\n  <iframe src=\"https://glitch.com/embed/#!/embed/nuxt-with-element?path=nuxt.config.js&previewSize=0&attributionHidden=true\" alt=\"nuxt-with-element on glitch\" style=\"height: 100%; width: 100%; border: 0;\"></iframe>\n</div>\n"
  },
  {
    "path": "examples/docs/fr-FR/radio.md",
    "content": "## Radio\n\nBoutons de sélection entre plusieurs options.\n\n### Usage\n\nRadio ne devrait pas avoir trop d'options. Dans ce cas utilisez plutôt Select.\n\n:::demo Créer un composant Radio est facile, vous avez juste besoin de lier les `v-model` des options. Chacun équivaut à la valeur de `label` du radio correspondant. Le type de `label` est `String`, `Number` ou `Boolean`.\n```html\n<template>\n  <el-radio v-model=\"radio\" label=\"1\">Option A</el-radio>\n  <el-radio v-model=\"radio\" label=\"2\">Option B</el-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio: '1'\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Désactivé\n\nL'attribut `disabled` désactive le radio.\n\n:::demo Ajoutez simplement l'attribut `disabled` au radio.\n```html\n<template>\n  <el-radio disabled v-model=\"radio\" label=\"disabled\">Option A</el-radio>\n  <el-radio disabled v-model=\"radio\" label=\"selected and disabled\">Option B</el-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio: 'selected and disabled'\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Groupe de boutons radio\n\nUtile pour choisir entre plusieurs groupes d'options mutuellement exclusives.\n\n:::demo Combinez `el-radio-group` avec `el-radio` pour afficher un groupe de radios. Liez une variable au `v-model` de `el-radio-group` et configurez le label dans `el-radio`. Cet élément fournit aussi l'évènement `change` qui a en paramètre la valeur courante.\n\n```html\n<el-radio-group v-model=\"radio\">\n  <el-radio :label=\"3\">Option A</el-radio>\n  <el-radio :label=\"6\">Option B</el-radio>\n  <el-radio :label=\"9\">Option C</el-radio>\n</el-radio-group>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio: 3\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Style bouton\n\nDes radios affichés comme des boutons standards.\n\n:::demo Changez simplement `el-radio` pour `el-radio-button`. L'attribut `size` permet de régler la taille.\n```html\n<template>\n  <div>\n    <el-radio-group v-model=\"radio1\">\n      <el-radio-button label=\"New York\"></el-radio-button>\n      <el-radio-button label=\"Washington\"></el-radio-button>\n      <el-radio-button label=\"Los Angeles\"></el-radio-button>\n      <el-radio-button label=\"Chicago\"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-radio-group v-model=\"radio2\" size=\"medium\">\n      <el-radio-button label=\"New York\" ></el-radio-button>\n      <el-radio-button label=\"Washington\"></el-radio-button>\n      <el-radio-button label=\"Los Angeles\"></el-radio-button>\n      <el-radio-button label=\"Chicago\"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-radio-group v-model=\"radio3\" size=\"small\">\n      <el-radio-button label=\"New York\"></el-radio-button>\n      <el-radio-button label=\"Washington\" disabled ></el-radio-button>\n      <el-radio-button label=\"Los Angeles\"></el-radio-button>\n      <el-radio-button label=\"Chicago\"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-radio-group v-model=\"radio4\" disabled size=\"mini\">\n      <el-radio-button label=\"New York\"></el-radio-button>\n      <el-radio-button label=\"Washington\"></el-radio-button>\n      <el-radio-button label=\"Los Angeles\"></el-radio-button>\n      <el-radio-button label=\"Chicago\"></el-radio-button>\n    </el-radio-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio1: 'New York',\n        radio2: 'New York',\n        radio3: 'New York',\n        radio4: 'New York'\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Avec bordures\n\n:::demo L'attribut `border` ajoute une bordure aux radios.\n```html\n<template>\n  <div>\n    <el-radio v-model=\"radio1\" label=\"1\" border>Option A</el-radio>\n    <el-radio v-model=\"radio1\" label=\"2\" border>Option B</el-radio>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-radio v-model=\"radio2\" label=\"1\" border size=\"medium\">Option A</el-radio>\n    <el-radio v-model=\"radio2\" label=\"2\" border size=\"medium\">Option B</el-radio>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-radio-group v-model=\"radio3\" size=\"small\">\n      <el-radio label=\"1\" border>Option A</el-radio>\n      <el-radio label=\"2\" border disabled>Option B</el-radio>\n    </el-radio-group>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-radio-group v-model=\"radio4\" size=\"mini\" disabled>\n      <el-radio label=\"1\" border>Option A</el-radio>\n      <el-radio label=\"2\" border>Option B</el-radio>\n    </el-radio-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio1: '1',\n        radio2: '1',\n        radio3: '1',\n        radio4: '1'\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Attributs de Radio\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut |\n| ---- | ---- | ---- | ---- | ---- |\n| value / v-model | La valeur liée. | string / number / boolean | — | — |\n| label | La valeur du radio. | string / number / boolean | — | — |\n| disabled | Si le radio est désactivé. | boolean | — | false |\n| border  | Si une bordure doit être affichée autour du radio. | boolean   | — | false |\n| size  | Taille du radio, ne marche que si `border` est `true`. | string  | medium / small / mini | — |\n| name | Attribut 'name' natif. | string | — | — |\n\n### Évènements de Radio\n\n| Nom | Description | Paramètres |\n| --- | --- | --- |\n| change | Se déclenche quand la valeur change. | La valeur du label. |\n\n### Attributs de Radio-group\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut\n| ---- | ---- | ---- | ---- | ---- |\n| value / v-model | La valeur liée. | string / number / boolean | — | — |\n| size | Taille des radios. | string | medium / small / mini | —\n| disabled  | Si les radios sont désactivés. | boolean   | — | false\n| text-color | Couleur du texte quand le bouton est actif. | string | — | #ffffff   |\n| fill  | Bordure et couleur de fond quand le bouton est actif. | string | — | #409EFF |\n\n### Évènements de Radio-group\n\n| Nom | Description | Paramètres |\n| --- | --- | --- |\n| change | Se déclenche quand la valeur change. | La valeur du label. |\n\n### Attributs Radio-button\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut |\n| ---- | ---- | ---- | ---- | ---- |\n| label | Valeur du radio. | string / number | — | — |\n| disabled | Si le radio est désactivé. | boolean | — | false |\n| name | Attribut 'name' natif. | string | — | — |\n"
  },
  {
    "path": "examples/docs/fr-FR/rate.md",
    "content": "## Rate\n\nUtilisé pour donner une note sur cinq étoiles.\n\n### Usage\n\n:::demo Rate divise les scores en trois niveaux et ces niveaux peuvent être distingués en utilisant différentes couleurs de fond. Par défaut ces couleurs sont identiques, mais vous pouvez affecter un tableau des codes couleur à l'attribut `colors`, ainsi que les deux seuils via `low-threshold` et `high-threshold`. Vous pouvez aussi les affecter avec un objet dont la clé est le seuil et la valeur est la couleur correspondante.\n\n```html\n<div class=\"block\">\n  <span class=\"demonstration\">Défaut</span>\n  <el-rate v-model=\"value1\"></el-rate>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Couleurs pour chaque niveau</span>\n  <el-rate\n    v-model=\"value2\"\n    :colors=\"colors\">\n  </el-rate>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: null,\n        value2: null,\n        colors: ['#99A9BF', '#F7BA2A', '#FF9900'] // same as { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Avec du texte\n\nVous pouvez ajouter du texte à chaque score.\n\n:::demo Ajoutez l'attribut `show-text` pour afficher du texte à droite des étoiles. Vous pouvez choisir les textes avec l'attribut `texts`. C'est un tableau dont la taille doit être égale au score max `max`.\n\n```html\n<el-rate\n  v-model=\"value\"\n  :texts=\"['oops', 'disappointed', 'normal', 'good', 'great']\"\n  show-text>\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: null\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Plus d'icônes\n\nVous pouvez utiliser différentes icônes pour chaque\n\n:::demo Vous pouvez personnaliser les icônes en passant à `icon-classes` un tableau avec trois éléments ou un objet dont la clé est le seuil entre deux niveaux et la valeur la classe d'icônes correspondante. Dans cet exemple, nous utilisons aussi `void-icon-class` qui permet de choisir d'autres valeurs non sélectionnées.\n\n```html\n<el-rate\n  v-model=\"value\"\n  :icon-classes=\"iconClasses\"\n  void-icon-class=\"icon-rate-face-off\"\n  :colors=\"['#99A9BF', '#F7BA2A', '#FF9900']\">\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: null,\n        iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'] // same as { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }\n      }\n  }\n  }\n</script>\n```\n:::\n\n### Lecture seule\n\nLe score peut être en lecture seule. Les demi-étoiles sont supportées.\n\n:::demo Utilisez `disabled` pour mettre le composant en lecture seule. Ajoutez `show-score` pour afficher le score à droite des étoiles. De plus, vous pouvez utiliser `score-template` pour déterminer un template. Il doit contenir `{value}` qui sera remplacé par la valeur du score.\n\n```html\n<el-rate\n  v-model=\"value\"\n  disabled\n  show-score\n  text-color=\"#ff9900\"\n  score-template=\"{value} points\">\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: 3.7\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Attributs\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------- |---------- |-------------  |-------- |\n| value / v-model | La valeur liée. | number | — | 0 |\n| max | Score maximum. | number | — | 5 |\n| disabled | Si le score est en lecture seule. | boolean | — | false |\n| allow-half | Si les demi-étoiles sont autorisées. | boolean | — | false |\n| low-threshold | Seuil entre les niveaux bas et moyen. La valeur sera incluse dans le niveau bas. | number | — | 2 |\n| high-threshold | Seuil entre les niveaux moyen et haut. La valeur sera incluse entre dans le niveau haut. | number | — | 4 |\n| colors | colors for icons. Si c'est un array, il doit avoir 3 élements, chacun correspondant à un niveau. Si c'est un objet, la clé est le seuil entre deux niveaux et la valeur est la couleur correspondante. | array/object | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |\n| void-color | Couleur des icônes non sélectionnées. | string | — | #C6D1DE |\n| disabled-void-color | Couleur des icônes non sélectionnées en lecture seule. | string | — | #EFF2F7 |\n| icon-classes | Noms de classe des icônes. Si c'est un array, il doit avoir 3 élements, chacun correspondant à un niveau. Si c'est un objet, la clé est le seuil entre deux niveaux et la valeur est le nom de classe de l'icône. | array/object | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |\n| void-icon-class | Classe des icônes non sélectionnées. | string | — | el-icon-star-off |\n| disabled-void-icon-class | Classe des icônes non sélectionnées en lecture seule. | string | — | el-icon-star-on |\n| show-text | Si du texte doit apparaître à droite des étoiles. | boolean | — | false |\n| show-score | Si le score doit apparaître. Incompatible avec show-text. | boolean | — | false |\n| text-color | Couleur du texte. | string | — | #1F2D3D |\n| texts | Label des différents scores. | array | — | ['极差', '失望', '一般', '满意', '惊喜'] |\n| score-template | Template du score. | string | — | {value} |\n\n### Évènements\n\n| Nom | Description | Paramètres |\n|---------- |-------- |---------- |\n| change | Se déclenche quand la valeur change. | Valeur après le changement. |\n"
  },
  {
    "path": "examples/docs/fr-FR/result.md",
    "content": "## Result\n\nUsed to give feedback on the result of user's operation or access exception.\n\n### Basic usage\n\n:::demo\n\n```html\n<el-row>\n  <el-col :sm=\"12\" :lg=\"6\">\n    <el-result icon=\"success\" title=\"Success Tip\" subTitle=\"Please follow the instructions\">\n      <template slot=\"extra\">\n        <el-button type=\"primary\" size=\"medium\">Back</el-button>\n      </template>\n    </el-result>\n  </el-col>\n  <el-col :sm=\"12\" :lg=\"6\">\n    <el-result icon=\"warning\" title=\"Warning Tip\" subTitle=\"Please follow the instructions\">\n      <template slot=\"extra\">\n        <el-button type=\"primary\" size=\"medium\">Back</el-button>\n      </template>\n    </el-result>\n  </el-col>\n  <el-col :sm=\"12\" :lg=\"6\">\n    <el-result icon=\"error\" title=\"Error Tip\" subTitle=\"Please follow the instructions\">\n      <template slot=\"extra\">\n        <el-button type=\"primary\" size=\"medium\">Back</el-button>\n      </template>\n    </el-result>\n  </el-col>\n  <el-col :sm=\"12\" :lg=\"6\">\n    <el-result icon=\"info\" title=\"Info Tip\" subTitle=\"Please follow the instructions\">\n      <template slot=\"extra\">\n        <el-button type=\"primary\" size=\"medium\">Back</el-button>\n      </template>\n    </el-result>\n  </el-col>\n</el-row>\n```\n\n:::\n\n### Customized content\n\n:::demo\n\n```html\n<el-result title=\"404\" subTitle=\"Sorry, request error\">\n  <template slot=\"icon\">\n    <el-image src=\"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png\"></el-image>\n  </template>\n  <template slot=\"extra\">\n    <el-button type=\"primary\" size=\"medium\">Back</el-button>\n  </template>\n</el-result>\n```\n\n:::\n\n### Result Attributes\n\n| Attribute     | Description    | Type            | Accepted Values      | Default   |\n|-------------  |---------------- |---------------- |---------------------- |-------- |\n| title          | title         | string  |          —             |    —     |\n| sub-title    | sub title  | string | — |    —  |\n| icon  | icon type    | string  |    success / warning / info / error  |  info |\n\n### Result Slots\n\n| Name | Description |\n|------|--------|\n| icon | custom icon  |\n| title | custom title     |\n| subTitle | custom sub title     |\n| extra | custom  extra area    |\n"
  },
  {
    "path": "examples/docs/fr-FR/select.md",
    "content": "## Select\n\nUtile lorsqu'il faut sélectionner des options parmi un large choix, affiché grâce à un menu déroulant.\n\n### Usage\n\n:::demo `v-model` est la valeur du `el-option` sélectionné.\n\n```html\n<template>\n  <el-select v-model=\"value\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value: ''\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Option désactivée\n\n:::demo Mettez l'attribut `disabled` dans `el-option` à `true` pour désactiver cette option.\n\n```html\n<template>\n  <el-select v-model=\"value\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\"\n      :disabled=\"item.disabled\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2',\n          disabled: true\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value: ''\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Sélecteur désactivé\n\nVous pouvez désactiver le composant lui-même.\n\n:::demo Ajoutez `disabled` à `el-select` pour le désactiver.\n```html\n<template>\n  <el-select v-model=\"value\" disabled placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value: ''\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Effacer la sélection\n\nVous pouvez ajouter un bouton pour effacer la sélection.\n\n:::demo Ajoutez l'attribut `clearable` à `el-select` et l'icône de fermeture s'affichera après une sélection. Notez que `clearable` ne marche qu'avec les sélecteurs à choix unique.\n```html\n<template>\n  <el-select v-model=\"value\" clearable placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value: ''\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Sélecteur multiple\n\nLes sélecteurs multiples utilisent des tags pour afficher les différentes options choisies.\n\n:::demo Ajoutez `multiple` à `el-select` pour le changer en sélecteur multiple. La valeur de `v-model` devient un tableau contenant toutes les options. Par défaut les différents choix sont affichés sous forme de tags. Vous pouvez réduire leur nombre en utilisant l'attribut `collapse-tags`.\n```html\n<template>\n  <el-select v-model=\"value1\" multiple placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n\n  <el-select\n    v-model=\"value2\"\n    multiple\n    collapse-tags\n    style=\"margin-left: 20px;\"\n    placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value1: [],\n        value2: []\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Template personnalisé\n\nVous pouvez définir un template HTML pour l'affichage des options.\n\n:::demo Insérez votre template dans le slot de `el-option`.\n\n```html\n<template>\n  <el-select v-model=\"value\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in cities\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n      <span style=\"float: left\">{{ item.label }}</span>\n      <span style=\"float: right; color: #8492a6; font-size: 13px\">{{ item.value }}</span>\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        cities: [{\n          value: 'Beijing',\n          label: 'Beijing'\n        }, {\n          value: 'Shanghai',\n          label: 'Shanghai'\n        }, {\n          value: 'Nanjing',\n          label: 'Nanjing'\n        }, {\n          value: 'Chengdu',\n          label: 'Chengdu'\n        }, {\n          value: 'Shenzhen',\n          label: 'Shenzhen'\n        }, {\n          value: 'Guangzhou',\n          label: 'Guangzhou'\n        }],\n        value: ''\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Grouper les options\n\nVous pouvez définir des groupes pour les options du menu.\n\n:::demo Utilisez `el-option-group` pour grouper les options. L'attribut `label` définit le nom du groupe.\n\n```html\n<template>\n  <el-select v-model=\"value\" placeholder=\"Select\">\n    <el-option-group\n      v-for=\"group in options\"\n      :key=\"group.label\"\n      :label=\"group.label\">\n      <el-option\n        v-for=\"item in group.options\"\n        :key=\"item.value\"\n        :label=\"item.label\"\n        :value=\"item.value\">\n      </el-option>\n    </el-option-group>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          label: 'Villes célèbres',\n          options: [{\n            value: 'Shanghai',\n            label: 'Shanghai'\n          }, {\n            value: 'Beijing',\n            label: 'Beijing'\n          }]\n        }, {\n          label: 'Nom de ville',\n          options: [{\n            value: 'Chengdu',\n            label: 'Chengdu'\n          }, {\n            value: 'Shenzhen',\n            label: 'Shenzhen'\n          }, {\n            value: 'Guangzhou',\n            label: 'Guangzhou'\n          }, {\n            value: 'Dalian',\n            label: 'Dalian'\n          }]\n        }],\n        value: ''\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Filtrage des options\n\nVous pouvez ajouter un mode de filtrage pour trouver les options désirées plus rapidement.\n\n:::demo Ajoutez `filterable` à `el-select` pour activer le filtrage. Par défaut, Select cherchera les options dont le `label` contient la valeur du filtre. Si vous préférez une autre stratégie de filtrage, utilisez `filter-method`. C'est une `Function` qui est appelée quand la valeur change, avec pour paramètre la valeur courante.\n```html\n<template>\n  <el-select v-model=\"value\" filterable placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value: ''\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Recherche à distance\n\nVous pouvez aller chercher les options sur le serveur de manière dynamique.\n\n:::demo Ajoutez `filterable` et `remote` pour activer la recherche distante, ainsi que `remote-method`. Cette dernière est une `Function` qui est appelée lorsque la valeur change, avec pour paramètre la valeur courante. Notes que si `el-option` est rendu dans une directive `v-for`, vous devriez ajouter l'attribut `key` aux `el-option`. Cette valeur doit unique, comme `item.value` dans l'exemple suivant.\n\n```html\n<template>\n  <el-select\n    v-model=\"value\"\n    multiple\n    filterable\n    remote\n    reserve-keyword\n    placeholder=\"Entrez un mot-clé\"\n    :remote-method=\"remoteMethod\"\n    :loading=\"loading\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [],\n        value: [],\n        list: [],\n        loading: false,\n        states: [\"Alabama\", \"Alaska\", \"Arizona\",\n        \"Arkansas\", \"California\", \"Colorado\",\n        \"Connecticut\", \"Delaware\", \"Florida\",\n        \"Georgia\", \"Hawaii\", \"Idaho\", \"Illinois\",\n        \"Indiana\", \"Iowa\", \"Kansas\", \"Kentucky\",\n        \"Louisiana\", \"Maine\", \"Maryland\",\n        \"Massachusetts\", \"Michigan\", \"Minnesota\",\n        \"Mississippi\", \"Missouri\", \"Montana\",\n        \"Nebraska\", \"Nevada\", \"New Hampshire\",\n        \"New Jersey\", \"New Mexico\", \"New York\",\n        \"North Carolina\", \"North Dakota\", \"Ohio\",\n        \"Oklahoma\", \"Oregon\", \"Pennsylvania\",\n        \"Rhode Island\", \"South Carolina\",\n        \"South Dakota\", \"Tennessee\", \"Texas\",\n        \"Utah\", \"Vermont\", \"Virginia\",\n        \"Washington\", \"West Virginia\", \"Wisconsin\",\n        \"Wyoming\"]\n      }\n    },\n    mounted() {\n      this.list = this.states.map(item => {\n        return { value: `value:${item}`, label: `label:${item}` };\n      });\n    },\n    methods: {\n      remoteMethod(query) {\n        if (query !== '') {\n          this.loading = true;\n          setTimeout(() => {\n            this.loading = false;\n            this.options = this.list.filter(item => {\n              return item.label.toLowerCase()\n                .indexOf(query.toLowerCase()) > -1;\n            });\n          }, 200);\n        } else {\n          this.options = [];\n        }\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Créer des options\n\nVous pouvez entrer des choix dans le champ de sélection qui ne sont pas incluses dans le menu.\n\n:::demo En utilisant `allow-create`, peuvent créer de nouveaux choix en les entrant dans le champ d'input. Cette option ne marche que si `filterable` est activé. Cette exemple montre aussi `default-first-option`, qui permet de sélectionner la première option en pressant Entrée sans avoir à utiliser la souris ou le clavier.\n```html\n<template>\n  <el-select\n    v-model=\"value\"\n    multiple\n    filterable\n    allow-create\n    default-first-option\n    placeholder=\"Choisissez les tags de vos articles\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'HTML',\n          label: 'HTML'\n        }, {\n          value: 'CSS',\n          label: 'CSS'\n        }, {\n          value: 'JavaScript',\n          label: 'JavaScript'\n        }],\n        value: []\n      }\n    }\n  }\n</script>\n```\n:::\n\n:::tip\nSi la valeur de Select est un objet, assurez-vous d'utiliser `value-key` comme identifiant unique.\n:::\n\n### Attributs de Select\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| value / v-model | La valeur liée. | boolean / string / number | — | — |\n| multiple | Si la sélection multiple est activée. | boolean | — | false |\n| disabled | Si le sélecteur est désactivé. | boolean | — | false |\n| value-key | Identifiant unique pour la valeur, requis quand la valeur est un objet. | string | — | value |\n| size | Taille de l'Input. | string | large/small/mini | — |\n| clearable | Si la sélection est effaçable. | boolean | — | false |\n| collapse-tags | Si les tags peuvent être réduits, dans le cas d'une sélection multiple. | boolean | — | false |\n| multiple-limit | Nombre maximum d'options multiples sélectionnable. Pas de limites quand est à 0. | number | — | 0 |\n| name | L'attribut name natif du sélecteur. | string | — | — |\n| autocomplete | L'attribut autocomplete natif du sélecteur. | string | — | off |\n| auto-complete | @DEPRECATED dans la prochaine version majeure. | string | — | off |\n| placeholder | Le placeholder du champ. | string | — | Select |\n| filterable | Si les options sont filtrables. | boolean | — | false |\n| allow-create | Si l'utilisateur peut créer des options. Dans ce cas `filterable` doit être activé. | boolean | — | false |\n| filter-method | Méthode de filtrage personnalisée. | function | — | — |\n| remote | Si les options sont chargées dynamiquement depuis le serveur. | boolean | — | false |\n| remote-method | Méthode pour la recherche distante. | function | — | — |\n| loading | Si le sélecteur est en train de charger des options. | boolean | — | false |\n| loading-text | Texte à afficher pendant le chargement. | string | — | Loading |\n| no-match-text | Texte à afficher quand le filtrage ne retourne aucune option. Vous pouvez aussi utiliser le slot `empty`. | string | — | No matching data |\n| no-data-text | Texte à afficher quand il n'y a aucune option. Vous pouvez aussi utiliser le slot `empty`. | string | — | No data |\n| popper-class | Classe du menu déroulant. | string | — | — |\n| reserve-keyword | Quand `multiple` et `filter` sont activés, s'il faut réserver le mot-clé courant après la sélection d'une option. | boolean | — | false |\n| default-first-option | Sélectionne la première option avec Entrée. Utilisable avec `filterable` ou `remote` | boolean | - | false |\n| popper-append-to-body| Si le menu déroulant doit être ajouté au body. Si le positionnement du menu est incorrect, essayez de mettre cette option à `false`. | boolean | - | true |\n| automatic-dropdown | Pour les sélecteurs non filtrables, détermine si le menu apparaît au focus du champ. | boolean | - | false |\n\n### Évènements de Select\n\n| Nom | Description | Paramètre |\n|---------|---------|---------|\n| change | Se déclenche quand la valeur change. | current selected value |\n| visible-change | Se déclenche quand le menu apparaît ou disparaît. | true quand il apparaît, sinon false . |\n| remove-tag | Se déclenche quand un tag est retiré. | La valeur du tag retiré. |\n| clear | Se déclenche quand le champ est effacé grâce au bouton. | — |\n| blur | Se déclenche quand le champ perd le focus. | (event: Event) |\n| focus | Se déclenche gagne le focus. | (event: Event) |\n\n### Slots de Select\n\n| Nom    | Description |\n|---------|-------------|\n|    —    | Liste de options. |\n| prefix  | Contenu du préfixe du sélecteur. |\n| empty  | Contenu lorsqu'il n'y a aucune option. |\n\n### Attributs du groupe d'options\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| label | Nom du group. | string | — | — |\n| disabled | Si les options du groupe sont désactivées. | boolean | — | false |\n\n### Attributs des options\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| value | Valeur de l'option. | string/number/object | — | — |\n| label | Label de l'option, identique à `value` si omis. | string/number | — | — |\n| disabled | Si l'option est désactivée. | boolean | — | false |\n\n### Méthodes\n\n| Méthode | Description | Paramètres |\n|------|--------|-------|\n| focus | Focus sur l'input. | - |\n| blur | Enlève le focus de l'input et cache le menu. | - |\n"
  },
  {
    "path": "examples/docs/fr-FR/skeleton.md",
    "content": "## Skeleton\n\nWhen loading data, and you need a rich experience for visual and interactions for your end users, you can choose `skeleton`.\n\n### Basic usage\n\nThe basic skeleton.\n\n:::demo\n\n```html\n<template>\n  <el-skeleton />\n</template>\n```\n\n:::\n\n### Configurable Rows\n\nYou can configure the row numbers yourself, we are rendering a title row with 33% width of the others.\n\n:::demo\n\n```html\n<el-skeleton :rows=\"6\" />\n```\n\n:::\n\n### Animation\nWe 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\n\n:::demo\n\n```html\n<el-skeleton :rows=\"6\" animated />\n```\n\n:::\n\n### Customized Template\nElement only provides the most common template, sometimes that could be a problem, so you have a slot named `template` to do that work.\n\nAlso 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.\n\n:::demo\n\n```html\n<template>\n  <el-skeleton style=\"width: 240px\">\n    <template slot=\"template\">\n      <el-skeleton-item variant=\"image\" style=\"width: 240px; height: 240px;\" />\n      <div style=\"padding: 14px;\">\n        <el-skeleton-item variant=\"p\" style=\"width: 50%\" />\n        <div\n          style=\"display: flex; align-items: center; justify-items: space-between;\"\n        >\n          <el-skeleton-item variant=\"text\" style=\"margin-right: 16px;\" />\n          <el-skeleton-item variant=\"text\" style=\"width: 30%;\" />\n        </div>\n      </div>\n    </template>\n  </el-skeleton>\n</template>\n```\n\n:::\n\n### Loading state\n\nWhen `Loading` ends, we always need to show the real UI with data to our end users. with the attribtue `loading` we can control whether showing the DOM. You can also use slot `default` to structure the real DOM element.\n\n:::demo\n\n```html\n<template>\n  <div style=\"width: 240px\">\n    <p>\n      <label style=\"margin-right: 16px;\">Switch Loading</label>\n      <el-switch v-model=\"loading\" />\n    </p>\n    <el-skeleton style=\"width: 240px\" :loading=\"loading\" animated>\n      <template slot=\"template\">\n        <el-skeleton-item\n          variant=\"image\"\n          style=\"width: 240px; height: 240px;\"\n        />\n        <div style=\"padding: 14px;\">\n          <el-skeleton-item variant=\"h3\" style=\"width: 50%;\" />\n          <div\n            style=\"display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;\"\n          >\n            <el-skeleton-item variant=\"text\" style=\"margin-right: 16px;\" />\n            <el-skeleton-item variant=\"text\" style=\"width: 30%;\" />\n          </div>\n        </div>\n      </template>\n      <template>\n        <el-card :body-style=\"{ padding: '0px', marginBottom: '1px' }\">\n          <img\n            src=\"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png\"\n            class=\"image\"\n          />\n          <div style=\"padding: 14px;\">\n            <span>Delicious hamberger</span>\n            <div class=\"bottom card-header\">\n              <span class=\"time\">{{ currentDate }}</span>\n              <el-button type=\"text\" class=\"button\">Operation button</el-button>\n            </div>\n          </div>\n        </el-card>\n      </template>\n    </el-skeleton>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        loading: true,\n        currentDate: '2021-06-01'\n      }\n    },\n  }\n</script>\n```\n\n:::\n\n\n### Rendering a list of data\n\nMost 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.\n\n\n:::tip\nWe 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.\n:::\n\n:::demo\n\n```html\n<template>\n  <div style=\"width: 400px\">\n    <p>\n      <el-button @click=\"setLoading\">Click me to reload</el-button>\n    </p>\n    <el-skeleton style=\"width:400px\" :loading=\"loading\" animated :count=\"3\">\n      <template slot=\"template\">\n        <el-skeleton-item\n          variant=\"image\"\n          style=\"width: 400px; height: 267px;\"\n        />\n        <div style=\"padding: 14px;\">\n          <el-skeleton-item variant=\"h3\" style=\"width: 50%;\" />\n          <div\n            style=\"display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;\"\n          >\n            <el-skeleton-item variant=\"text\" style=\"margin-right: 16px;\" />\n            <el-skeleton-item variant=\"text\" style=\"width: 30%;\" />\n          </div>\n        </div>\n      </template>\n      <template>\n        <el-card\n          :body-style=\"{ padding: '0px', marginBottom: '1px' }\"\n          v-for=\"item in lists\"\n          :key=\"item.name\"\n        >\n          <img :src=\"item.imgUrl\" class=\"image multi-content\" />\n          <div style=\"padding: 14px;\">\n            <span>Delicious hamberger</span>\n            <div class=\"bottom card-header\">\n              <span class=\"time\">{{ currentDate }}</span>\n              <el-button type=\"text\" class=\"button\">Operation button</el-button>\n            </div>\n          </div>\n        </el-card>\n      </template>\n    </el-skeleton>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        loading: true,\n        currentDate: '2021-06-01',\n        lists: [],\n      }\n    },\n    mounted() {\n      this.loading = false\n      this.lists = [\n        {\n          imgUrl:\n            'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',\n          name: 'Deer',\n        },\n        {\n          imgUrl:\n            'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',\n          name: 'Horse',\n        },\n        {\n          imgUrl:\n            'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',\n          name: 'Mountain Lion',\n        },\n      ]\n    },\n    methods: {\n      setLoading() {\n        this.loading = true\n        setTimeout(() => (this.loading = false), 2000)\n      },\n    },\n  }\n</script>\n```\n\n:::\n\n### Avoiding rendering bouncing.\nSometimes 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.\n\n\n:::demo\n\n```html\n<template>\n  <div style=\"width: 240px\">\n    <p>\n      <label style=\"margin-right: 16px;\">Switch Loading</label>\n      <el-switch v-model=\"loading\" />\n    </p>\n    <el-skeleton\n      style=\"width: 240px\"\n      :loading=\"loading\"\n      animated\n      :throttle=\"500\"\n    >\n      <template slot=\"template\">\n        <el-skeleton-item\n          variant=\"image\"\n          style=\"width: 240px; height: 240px;\"\n        />\n        <div style=\"padding: 14px;\">\n          <el-skeleton-item variant=\"h3\" style=\"width: 50%;\" />\n          <div\n            style=\"display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;\"\n          >\n            <el-skeleton-item variant=\"text\" style=\"margin-right: 16px;\" />\n            <el-skeleton-item variant=\"text\" style=\"width: 30%;\" />\n          </div>\n        </div>\n      </template>\n      <template>\n        <el-card :body-style=\"{ padding: '0px', marginBottom: '1px'}\">\n          <img\n            src=\"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png\"\n            class=\"image\"\n          />\n          <div style=\"padding: 14px;\">\n            <span>Delicious hamberger</span>\n            <div class=\"bottom card-header\">\n              <span class=\"time\">{{ currentDate }}</span>\n              <el-button type=\"text\" class=\"button\">operation button</el-button>\n            </div>\n          </div>\n        </el-card>\n      </template>\n    </el-skeleton>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        loading: false,\n        currentDate: '2021-06-01'\n      }\n    },\n  }\n</script>\n```\n:::\n\n### Skeleton Attributes\n\n| Attribute    | Description  | Type    | Acceptable Value | Default |\n| ------- | ---------------- | ------- | ------------ | ------ |\n| animated | whether showing the animation | boolean | true / false | false |\n| count   | how many fake items to render to the DOM | number | integer | 1 |\n| loading | whether showing the skeleton | boolean | true / false | true  |\n| rows    | numbers of the row, only useful when no template slot were given | number  | integer  | 4      |\n| throttle | Rendering delay in millseconds | number | integer | 0 |\n\n\n### Skeleton Item Attributes\n| Attribute    | Description             | Type    | Acceptable Value       | Default  |\n| ------- | ---------------- | ------- | ------------ | ------ |\n| variant | The current rendering skeleton type | Enum(string) | p / h1 / h3 / text / caption / button / image / circle / rect | text |\n\n\n### Skeleton Slots\n\n| Name | Description |\n| ---- | ----------- |\n| default | \bReal rendering DOM |\n| template | Custom rendering skeleton template |\n"
  },
  {
    "path": "examples/docs/fr-FR/slider.md",
    "content": "## Slider\n\nPermet de sélectionner une valeur au sein d'un intervalle.\n\n### Usage\n\nLa valeur est affichée lorsque le slider est utilisé.\n\n:::demo Vous pouvez décider de la valeur initiale en initialisant la variable liée.\n\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">Valeur par défaut</span>\n    <el-slider v-model=\"value1\"></el-slider>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Valeur initiale personnalisée</span>\n    <el-slider v-model=\"value2\"></el-slider>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Pas de tooltip</span>\n    <el-slider v-model=\"value3\" :show-tooltip=\"false\"></el-slider>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Tooltip formatté</span>\n    <el-slider v-model=\"value4\" :format-tooltip=\"formatTooltip\"></el-slider>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Désactivé</span>\n    <el-slider v-model=\"value5\" disabled></el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: 0,\n        value2: 50,\n        value3: 36,\n        value4: 48,\n        value5: 42\n      }\n    },\n    methods: {\n      formatTooltip(val) {\n        return val / 100;\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Valeurs discrètes\n\nLes valeurs peuvent être discrètes.\n\n:::demo Réglez le pas avec l'attribut `step`. Vous pouvez affiché chaque point grâce à `show-stops`.\n\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">Points absents</span>\n    <el-slider\n      v-model=\"value1\"\n      :step=\"10\">\n    </el-slider>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Points affichés</span>\n    <el-slider\n      v-model=\"value2\"\n      :step=\"10\"\n      show-stops>\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: 0,\n        value2: 0\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Slider avec champ d'input\n\nVous pouvez afficher un champ d'input synchronisé pour entrer une valeur précise rapidement.\n\n:::demo Ajoutez l'attribut `show-input` pour ajouter le champ à droite du Slider.\n\n```html\n<template>\n  <div class=\"block\">\n    <el-slider\n      v-model=\"value\"\n      show-input>\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: 0\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Sélectionner une intervalle\n\nVous pouvez sélectionner des intervalles de valeurs au lieu d'une valeur unique.\n\n:::demo Ajouter l'attribut `range` active le mode intervalle, ou la valeur sera maintenant un tableau contenant les deux valeurs de l'intervalle.\n```html\n<template>\n  <div class=\"block\">\n    <el-slider\n      v-model=\"value\"\n      range\n      show-stops\n      :max=\"10\">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: [4, 8]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Mode vertical\n\n:::demo Ajoutez l'attribut `vertical` active le mode vertical. Dans ce mode, l'attribut `height` est requis.\n```html\n<template>\n  <div class=\"block\">\n    <el-slider\n      v-model=\"value\"\n      vertical\n      height=\"200px\">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: 0\n      }\n    }\n  }\n</script>\n```\n:::\n\n:::demo Vous pouvez afficher des marqueurs sur le slider grâce à l'attribut `marks`.\n```html\n<template>\n  <div class=\"block\">\n    <el-slider\n      v-model=\"value\"\n      range\n      :marks=\"marks\">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: [30, 60],\n        marks: {\n          0: '0°C',\n          8: '8°C',\n          37: '37°C',\n          50: {\n            style: {\n              color: '#1989FA'\n            },\n            label: this.$createElement('strong', '50%')\n          }\n        }\n      }\n    }\n  }\n</script>\n```\n:::\n\n## Attributs\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| value / v-model | La valeur liée. | number | — | 0 |\n| min | Valeur minimale. | number | — | 0 |\n| max | Valeur maximale. | number | — | 100 |\n| disabled | Si le Slider est désactivé. | boolean | — | false |\n| step | La taille du pas. | number | — | 1 |\n| show-input | Si une champ d'input doit être affiché, ne marche que si `range` est `false`. | boolean | — | false |\n| show-input-controls | Si des boutons de contrôle doivent être affichés quand `show-input` est `true`. | boolean | — | true |\n| input-size | Taille du champ d'input. | string | large / medium / small / mini | small |\n| show-stops | Si les points de valeurs discrètes doivent être affichés. | boolean | — | false |\n| show-tooltip | Si le tooltip doit être affiché. | boolean | — | true |\n| format-tooltip | Format du contenu du tooltip. | function(value) | — | — |\n| range | Si le mode intervalle est activé. | boolean | — | false |\n| vertical | Si le mode vertical est activé. | boolean | — | false |\n| height | Hauteur du Slider, requis en mode vertical. | string | — | — |\n| label | Label pour les lecteurs d'écran. | string | — | — |\n| debounce | Délai après écriture en millisecondes, marche quand `show-input` est `true`. | number | — | 300 |\n| tooltip-class | Classe du tooltip. | string | — | — |\n| marks | Marqueurs, les clés doivent être des `number` et être comprises dans l'intervalle `[min, max]`. Chaque marqueur peut avoir un style particulier. | object | — | — |\n\n## Évènements\n\n| Nom | Description | Paramètres |\n|---------- |-------- |---------- |\n| change | Se déclenche quand la valeur change (si le changement est fait à la souris, se déclenche quand la souris redevient immobile). | La nouvelle valeur. |\n| input | triggers when the data changes (It'll be emitted in real time during sliding) | value after changing |\n"
  },
  {
    "path": "examples/docs/fr-FR/statistic.md",
    "content": "## Statistic\n\nUsed to highlight a certain number or group of numbers, such as showing a numerical value, such as a dollar amount, ranking, etc.\n\nCountdown mode\n\n### Basic usage\n\nThe component provides a thousandth place display, but you can use rate to set the 10,000th place, and so on\n:::demo\n\n```html\n<template>\n  <div>\n    <el-row :gutter=\"20\">\n      <el-col :span=\"6\">\n        <div>\n          <el-statistic\n            group-separator=\",\"\n            :precision=\"2\"\n            :value=\"value2\"\n            :title=\"title\"\n          ></el-statistic>\n        </div>\n      </el-col>\n      <el-col :span=\"6\">\n        <div>\n          <el-statistic title=\"Gender Distribution\">\n            <template slot=\"formatter\">\n              456/2\n            </template>\n          </el-statistic>\n        </div>\n      </el-col>\n      <el-col :span=\"6\">\n        <div>\n          <el-statistic\n            group-separator=\",\"\n            :precision=\"2\"\n            decimal-separator=\".\"\n            :value=\"value1\"\n            :title=\"title\"\n          >\n            <template slot=\"prefix\">\n              <i class=\"el-icon-s-flag\" style=\"color: red\"></i>\n            </template>\n            <template slot=\"suffix\">\n              <i class=\"el-icon-s-flag\" style=\"color: blue\"></i>\n            </template>\n          </el-statistic>\n        </div>\n      </el-col>\n      <el-col :span=\"6\">\n        <div>\n          <el-statistic :value=\"like ? 521 : 520\" title=\"Feedback\">\n            <template slot=\"suffix\">\n              <span @click=\"like = !like\" class=\"like\">\n                <i\n                  class=\"el-icon-star-on\"\n                  style=\"color:red\"\n                  v-show=\"!!like\"\n                ></i>\n                <i class=\"el-icon-star-off\" v-show=\"!like\"></i>\n              </span>\n            </template>\n          </el-statistic>\n        </div>\n      </el-col>\n    </el-row>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        like: true,\n        value1: 4154.564,\n        value2: 2222,\n        title: \"Growth this year\",\n      };\n    },\n  };\n</script>\n<style lang=\"scss\">\n  .like {\n    cursor: pointer;\n    font-size: 25px;\n    display: inline-block;\n  }\n</style>\n```\n\n:::\n\n### Count down\n\n:::warning\nSuspend is tentative, it ** just pauses the countdown, not the time, because value points to a future time node **\n\nIf you need to add time to the original, please note that the overall time (the amount of time added and the original time) must be a ** future ** time node, otherwise it is still the end of the countdown\n:::\n:::demo Providing a future time via 'value' will enable the countdown function\n\n```html\n<template>\n  <div>\n    <el-row :gutter=\"20\">\n      <el-col :span=\"14\">\n        <el-card shadow=\"hover\" style=\"width: 100%; \">\n          <div style=\"width: 100%; display: inline-block; \">\n            <el-statistic\n              :value=\"deadline2\"\n              time-indices\n              title=\"🎉Price reduction of goods🎉\"\n            >\n              <template slot=\"suffix\">\n                panic purchase\n              </template>\n            </el-statistic>\n          </div>\n        </el-card>\n        <el-card shadow=\"hover\" style=\"width: 100%;margin-top: 20px; \">\n          <div style=\"width: 100%; display: inline-block;\">\n            <el-statistic\n              @finish=\"hilarity\"\n              :value=\"deadline3\"\n              time-indices\n              title=\"The Value of Time\"\n            >\n              <template slot=\"suffix\">\n                <el-button type=\"primary \" size=\"small\" @click=\"add\"\n                  >add 10s</el-button\n                >\n              </template>\n            </el-statistic>\n          </div>\n        </el-card>\n      </el-col>\n      <el-col :span=\"10\">\n        <el-card shadow=\"hover\" style=\"width: 100%;\">\n          <div slot=\"header\" class=\"clearfix\">\n            <span style=\"font-size: 14px;\">Henry·Wadsworth·Longfellow</span>\n            <el-button\n              style=\"float: right; padding: 3px 0\"\n              type=\"text\"\n              @click=\"clickFn\"\n              >suspend</el-button\n            >\n          </div>\n          <div style=\"font-size: 16px;text-align: left;\">\n            Don't sigh in the past, it is no longer back\n          </div>\n          <div style=\"font-size: 16px;text-align: left;margin-top: 15px;\">\n            Be wise to improve the present\n          </div>\n          <div style=\"font-size: 16px;text-align: left;margin-top: 15px;\">\n            To not worry not afraid of the firm will into the complicated future\n          </div>\n          <div style=\"margin-top: 40px;\"></div>\n          <el-statistic\n            ref=\"statistic\"\n            @finish=\"hilarity\"\n            format=\"HH:mm:ss\"\n            :value=\"deadline4\"\n            title=\"Distance to Tomorrow:\"\n            time-indices\n          >\n          </el-statistic>\n        </el-card>\n      </el-col>\n    </el-row>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        deadline2: Date.now() + 1000 * 60 * 60 * 8,\n        deadline3: Date.now() + 1000 * 60 * 30,\n        deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),\n        stop: true,\n      };\n    },\n    methods: {\n      hilarity() {\n        this.$notify({\n          title: \"Prompt\",\n          message:\n            \"Time is up, do you know that an inch of gold can't buy an inch of time?\",\n          duration: 0,\n        });\n      },\n      clickFn() {\n        this.$refs.statistic.suspend(this.stop);\n        this.stop = !this.stop;\n      },\n      add() {\n        this.deadline3 = this.deadline3 + 1000 * 10;\n      },\n    },\n  };\n</script>\n```\n\n:::\n\n### Statistic Attributes\n\n| Attribute         | Description                    | Type                        | Accepted Values | Default |\n| ----------------- | ------------------------------ | --------------------------- | --------------- | ------- |\n| value             | Numerical content              | string \\| number            | -               | -       |\n| decimal-separator | Setting the decimal point      | string                      | -               | .       |\n| formatter         | Custom numerical presentation  | v-slot \\|({value}) => VNode | -               | -       |\n| group-separator   | Sets the thousandth identifier | string                      | -               | ,       |\n| precision         | numerical precision            | number                      | -               | -       |\n| prefix            | Sets the prefix of a number    | string \\| v-slot            | -               | -       |\n| suffix            | Sets the suffix of a number    | string \\| v-slot            | -               | -       |\n| title             | Numeric titles                 | string \\| v-slot            | -               | -       |\n| value-style       | Styles numeric values          | style                       | -               | -       |\n| rate              | Set the ratio                  | number                      | -               | 1000    |\n\n### Statistic Slots\n\n| Name      | Description                 |\n| --------- | --------------------------- |\n| prefix    | Numeric prefix              |\n| suffix    | Suffixes for numeric values |\n| formatter | Numerical content           |\n| title     | Numeric titles              |\n\n### Statistic.Countdown Attributes\n\n| Attribute    | Description                              | Type    | Options     | Default    |\n| ------------ | ---------------------------------------- | ------- | ----------- | ---------- |\n| time-indices | Whether to enable the countdown function | boolean | true\\|false | false      |\n| value        | Required value, enter the bound value    | string  | —           | —          |\n| format       | Formatting the countdown display         | string  | —           | 'HH:mm:ss' |\n\n### Statistic.Countdown Events\n\n| Method | Description                                | Parameters       |\n| ------ | ------------------------------------------ | ---------------- |\n| change | Enable in the 'countdown' function         | (value: Date)    |\n| finish | Launched after the 'countdown' is complete | (value: boolean) |\n\n### Statistic Methods\n\n| Method  | Description         | Parameters      | CallBack      |\n| ------- | ------------------- | --------------- | ------------- |\n| suspend | Pause the countdown | (value:boolean) | (value: Date) |\n"
  },
  {
    "path": "examples/docs/fr-FR/steps.md",
    "content": "## Steps\n\nPermet de guider l'utilisateur dans l'accomplissement de toutes les taches d'un processus. Les étapes peuvent être créées de manière à refléter le scénario en question et leur nombre ne peut être inférieur à 2.\n\n### Usage\n\nVoici une barre d'étapes basique.\n\n:::demo Réglez l'attribut `active` avec une variable `Number`, qui indique l'index des étapes et commence à 0. L'attribut `space` permet de déterminer si l'espace entre les étapes doit être fixe à l'aide d'un `Number`. L'unité de `space` est `px`. Si cet attribut est absent, la barre sera responsive. L'attribut `finish-status` change le statut d'accomplissement des étapes.\n\n```html\n<el-steps :active=\"active\" finish-status=\"success\">\n  <el-step title=\"Étape 1\"></el-step>\n  <el-step title=\"Étape 2\"></el-step>\n  <el-step title=\"Étape 3\"></el-step>\n</el-steps>\n\n<el-button style=\"margin-top: 12px;\" @click=\"next\">Prochaine étape</el-button>\n\n<script>\n  export default {\n    data() {\n      return {\n        active: 0\n      };\n    },\n\n    methods: {\n      next() {\n        if (this.active++ > 2) this.active = 0;\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Barre avec statut\n\nVous pouvez afficher le statut de chaque étape.\n\n:::demo Utilisez `title` pour définir le nom de l'étape, ou écrasez cet attribut en utilisant un `slot`. La liste complète des slots se trouve en fin de page.\n\n```html\n<el-steps :space=\"200\" :active=\"1\" finish-status=\"success\">\n  <el-step title=\"Terminé\"></el-step>\n  <el-step title=\"En cours\"></el-step>\n  <el-step title=\"Étape 3\"></el-step>\n</el-steps>\n```\n:::\n\n### Barre avec description\n\nVous pouvez ajouter une description pour chaque étape.\n\n:::demo\n```html\n<el-steps :active=\"1\">\n  <el-step title=\"Étape 1\" description=\"Une description\"></el-step>\n  <el-step title=\"Étape 2\" description=\"Une description\"></el-step>\n  <el-step title=\"Étape 3\" description=\"Une description\"></el-step>\n</el-steps>\n```\n:::\n\n### Centrer\n\nLe titre et la description peuvent être centrés.\n\n:::demo\n```html\n<el-steps :active=\"2\" align-center>\n  <el-step title=\"Étape 1\" description=\"Une description\"></el-step>\n  <el-step title=\"Étape 2\" description=\"Une description\"></el-step>\n  <el-step title=\"Étape 3\" description=\"Une description\"></el-step>\n  <el-step title=\"Étape 4\" description=\"Une description\"></el-step>\n</el-steps>\n```\n:::\n\n### Barre avec icône\n\nUne grande variété d'icônes peut être utilisée dans la barre d'étapes.\n\n:::demo L'icône est ajoutée en utilisant `icon`. Les types d'icônes possibles sont référencés dans la documentation du composant Icon. De plus, vous pouvez utilisé une icône personnalisée en utilisant un `slot`.\n\n```html\n<el-steps :active=\"1\">\n  <el-step title=\"Étape 1\" icon=\"el-icon-edit\"></el-step>\n  <el-step title=\"Étape 2\" icon=\"el-icon-upload\"></el-step>\n  <el-step title=\"Étape 3\" icon=\"el-icon-picture\"></el-step>\n</el-steps>\n```\n:::\n\n### Barre verticale\n\nLa barre d'étape peut être affichée de manière verticale.\n\n:::demo Mettez simplement l'attribut `direction` à ` vertical` dans l'élément `el-steps`.\n\n```html\n<div style=\"height: 300px;\">\n  <el-steps direction=\"vertical\" :active=\"1\">\n    <el-step title=\"Étape 1\"></el-step>\n    <el-step title=\"Étape 2\"></el-step>\n    <el-step title=\"Étape 3\"></el-step>\n  </el-steps>\n</div>\n```\n:::\n\n### Barre d'étapes simple\n\nLa barre peut être simplifiée de manière à ce que `align-center`, `description`, `direction` et `space` soient ignorées.\n\n:::demo\n```html\n\n<el-steps :space=\"200\" :active=\"1\" simple>\n  <el-step title=\"Étape 1\" icon=\"el-icon-edit\"></el-step>\n  <el-step title=\"Étape 2\" icon=\"el-icon-upload\"></el-step>\n  <el-step title=\"Étape 3\" icon=\"el-icon-picture\"></el-step>\n</el-steps>\n\n<el-steps :active=\"1\" finish-status=\"success\" simple style=\"margin-top: 20px\">\n  <el-step title=\"Étape 1\" ></el-step>\n  <el-step title=\"Étape 2\" ></el-step>\n  <el-step title=\"Étape 3\" ></el-step>\n</el-steps>\n```\n:::\n\n### Attributs de la barre\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------- |---------- |-------------  |-------- |\n| space | L'espace entre chaque étape, sera responsive si omis. Supporte les pourcentages. | number / string | — | — |\n| direction | L'orientation de la barre. | string | vertical/horizontal | horizontal |\n| active | L'index de l'étape courante.  | number | — | 0 |\n| process-status | Le statut de l'étape courante. | string | wait / process / finish / error / success | process |\n| finish-status | Le statut de la dernière étape. | string | wait / process / finish / error / success | finish |\n| align-center | Si le titre et la description doivent être centrés. | boolean | — | false |\n| simple | Si un thème simple doit être appliqué. | boolean | - | false |\n\n### Attributs des étapes\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------- |---------- |-------------  |-------- |\n| title | Titre de l'étape. | string | — | — |\n| description | Description de l'étape. | string | — | — |\n| icon | step icon | Classe de l'icône d'étape. Les icônes peuvent aussi être passées via des slots. | string | — |\n| status | Le statut actuel. Sera déterminé par la barre d'étapes si omis. | wait / process / finish / error / success | - |\n\n### Slots des étapes\n\n| Nom | Description |\n|----|----|\n| icon | L'icône de l'étape. |\n| title | Le titre de l'étape. |\n| description | La description de l'étape. |\n"
  },
  {
    "path": "examples/docs/fr-FR/switch.md",
    "content": "## Switch\n\nSwitch est utilisé pour choisir entre deux états opposés.\n\n### Usage\n\n:::demo Liez `v-model` à une variable de type `Boolean`. Les attributs `active-color` et `inactive-color` déterminent les couleurs des deux états.\n\n```html\n<el-switch v-model=\"value1\">\n</el-switch>\n<el-switch\n  v-model=\"value2\"\n  active-color=\"#13ce66\"\n  inactive-color=\"#ff4949\">\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: true,\n        value2: true\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Description\n\n:::demo Utilisez `active-text` et `inactive-text` pour afficher une description de chaque étape.\n\n```html\n<el-switch\n  v-model=\"value1\"\n  active-text=\"Paiement mensuel\"\n  inactive-text=\"Paiement annuel\">\n</el-switch>\n<el-switch\n  style=\"display: block\"\n  v-model=\"value2\"\n  active-color=\"#13ce66\"\n  inactive-color=\"#ff4949\"\n  active-text=\"Paiement mensuel\"\n  inactive-text=\"Paiement annuel\">\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: true,\n        value2: true\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Valeurs des états\n\n:::demo Vous pouvez utiliser `active-value` et `inactive-value` pour déterminer la valeur de chaque état. Ils prennent un `Boolean`, `String` ou `Number`.\n\n```html\n<el-tooltip :content=\"'Valeur de l\\'état: ' + value\" placement=\"top\">\n  <el-switch\n    v-model=\"value\"\n    active-color=\"#13ce66\"\n    inactive-color=\"#ff4949\"\n    active-value=\"100\"\n    inactive-value=\"0\">\n  </el-switch>\n</el-tooltip>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: '100'\n      }\n    }\n  };\n</script>\n```\n\n:::\n\n### Désactivé\n\n:::demo Ajoutez l'attribut `disabled` pour désactiver le switch.\n\n```html\n<el-switch\n  v-model=\"value1\"\n  disabled>\n</el-switch>\n<el-switch\n  v-model=\"value2\"\n  disabled>\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: true,\n        value2: false\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Attributs\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut |\n| ----| ----| ----| ----|---- |\n| value / v-model | La valeur liée. | boolean / string / number | — | — |\n| disabled | Si le switch est désactivé. | boolean | — | false |\n| width | Largeur du switch. | number | — | 40 |\n| active-icon-class | Classe de l'icône de l'état `on`, écrase `active-text`. | string | — | — |\n| inactive-icon-class | Classe de l'icône de l'état `off`, écrase `inactive-text`. | string | — | — |\n| active-text | Texte affiché dans l'état `on`. | string | — | — |\n| inactive-text | Texte affiché dans l'état `off`. | string | — | — |\n| active-value  | Valeur du switch dans l'état `on`. | boolean / string / number | — | true |\n| inactive-value  | Valeur du switch dans l'état `off`. | boolean / string / number | — | false |\n| active-color | Couleur de fond de l'état `on`. | string | — | #409EFF |\n| inactive-color | Couleur de fond de l'état `off`. | string | — | #C0CCDA |\n| name| Nom du champ d'input du switch. | string | — | — |\n| validate-event | Si la validation doit avoir lieu. | boolean | - | true |\n\n### Évènements\n\n| Nom | Description | Paramètres |\n| ---- | ----| ---- |\n| change | Se déclenche quand la valeur change. | La valeur après changement. |\n\n### Méthodes\n\n| Méthode | Description | Paramètres |\n|-------|--------|------- |\n| focus | Donne le focus au switch. | — |\n"
  },
  {
    "path": "examples/docs/fr-FR/table.md",
    "content": "## Table\n\nPermet d'afficher de nombreuses données possédant un format similaire. Vous pouvez ainsi trier, filtrer et comparer les données de votre tableau.\n\n### Table basique\n\nUn tableau de base pour afficher seulement.\n\n:::demo Après avoir configuré l'attribut `data` de `el-table` avec un tableau d'objets, vous pouvez utiliser `prop` (correspondant à une clé dans chaque objet du tableau `data`) dans `el-table-column` pour insérer des données dans les colonnes, ainsi que l'attribut `label` pour définir le nom de la colonne. L'attribut `width` définit si besoin la largeur de la colonne.\n\n```html\n  <template>\n    <el-table\n      :data=\"tableData\"\n      style=\"width: 100%\">\n      <el-table-column\n        prop=\"date\"\n        label=\"Date\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"name\"\n        label=\"Nom\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"address\"\n        label=\"Adresse\">\n      </el-table-column>\n    </el-table>\n  </template>\n\n  <script>\n    export default {\n      data() {\n        return {\n          tableData: [{\n            date: '2016-05-03',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-02',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-04',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-01',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }]\n        }\n      }\n    }\n  </script>\n```\n:::\n\n### Table rayée\n\nAjouter des couleurs différentes pour les lignes paires et impaires permet de lire le tableau plus facilement.\n\n:::demo L'attribut `stripe` accepte un `Boolean`. Si `true`, le tableau sera rayé.\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    stripe\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Table avec bordure\n\n:::demo Par défaut, Table n'a pas de bordure verticale. Si vous en avez besoin, mettez l'attribut `border` à `true`.\n\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    border\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Table avec statut\n\nVous pouvez mettre en valeur certaines lignes du tableau suivant leur état, comme \"success\", \"information\", \"warning\", \"danger\" et d'autres.\n\n:::demo Utilisez `row-class-name` dans `el-table` pour utiliser une fonction qui permettra ajouter des classes à certaines lignes. Vous pouvez ensuite définir les classes en question dans votre CSS.\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    :row-class-name=\"tableRowClassName\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  .el-table .warning-row {\n    background: oldlace;\n  }\n\n  .el-table .success-row {\n    background: #f0f9eb;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      tableRowClassName({row, rowIndex}) {\n        if (rowIndex === 1) {\n          return 'warning-row';\n        } else if (rowIndex === 3) {\n          return 'success-row';\n        }\n        return '';\n      }\n    },\n    data() {\n      return {\n        tableData:  [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Table avec un header fixe\n\nLorsqu'il y a beaucoup de lignes, il peut être utile d'avoir un header fixe afin de ne pas perdre le nom de colonnes à mesure que l'utilisateur défile vers le bas.\n\n:::demo En réglant l'attribut `height` de `el-table`, vous pouvez fixer le header sans avoir besoin de plus de code.\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    height=\"250\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }],\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Table avec colonnes fixes\n\nLorsque qu'il y a beaucoup de colonnes, il peut être utile d'en fixer certaines afin de ne pas perdre de vue leurs informations à mesure que l'utilisateur défile sur les cotés.\n\n:::demo Utilisez l'attribut `fixed` de `el-table-column` qui accepte un `Boolean`. Si `true`, la colonne sera fixée à gauche. Il accepte aussi les valeurs 'left' et 'right', indiquant de quel coté la colonne doit être fixée.\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Date\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"État\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"Ville\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Zip\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      fixed=\"right\"\n      label=\"Opérations\"\n      width=\"120\">\n      <template slot-scope=\"scope\">\n        <el-button @click=\"handleClick\" type=\"text\" size=\"small\">Detail</el-button>\n        <el-button type=\"text\" size=\"small\">Editer</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    methods: {\n      handleClick() {\n        console.log('click');\n      }\n    },\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Table avec header et colonnes fixes\n\nSi vous avez un gros volume de données à afficher, vous pouvez fixer le header et des colonnes en même temps.\n\n:::demo Header et colonnes fixes combinant les deux exemples précédents.\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    height=\"250\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Date\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"État\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"Ville\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Zip\"\n      width=\"120\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Hauteur fluide dans une Table avec header et colonnes fixes\n\nQuand les données changent dynamiquement, vous pouvez avoir besoin d'une hauteur maximale et d'afficher une barre de défilement si besoin.\n\n:::demo En utilisant l'attribut `max-height` de `el-table`, vous fixez le header. Le tableau ne défilera que si la hauteur des lignes dépasse cette hauteur maximale.\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    max-height=\"250\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Date\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"État\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"Ville\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Zip\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      fixed=\"right\"\n      label=\"Opérations\"\n      width=\"120\">\n      <template slot-scope=\"scope\">\n        <el-button\n          @click.native.prevent=\"deleteRow(scope.$index, tableData)\"\n          type=\"text\"\n          size=\"small\">\n          Supprimer\n        </el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    methods: {\n      deleteRow(index, rows) {\n        rows.splice(index, 1);\n      }\n    },\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Grouper les headers\n\nQuand la structure du tableau est complexe, vous pouvez grouper les headers afin de montrer une hiérarchie.\n\n:::demo Placez simplement `el-table-column` dans une autre `el-table-column`, et vous grouperez ainsi les headers.\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column label=\"Informations de livraison\">\n      <el-table-column\n        prop=\"name\"\n        label=\"Nom\"\n        width=\"120\">\n      </el-table-column>\n      <el-table-column label=\"Informations d'adresse\">\n        <el-table-column\n          prop=\"state\"\n          label=\"État\"\n          width=\"120\">\n        </el-table-column>\n        <el-table-column\n          prop=\"city\"\n          label=\"Ville\"\n          width=\"120\">\n        </el-table-column>\n        <el-table-column\n          prop=\"address\"\n          label=\"Adresse\"\n          width=\"300\">\n        </el-table-column>\n        <el-table-column\n          prop=\"zip\"\n          label=\"Zip\"\n          width=\"120\">\n        </el-table-column>\n      </el-table-column>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Sélecteur simple\n\nVous pouvez activer la sélection d'une ligne.\n\n:::demo Activez la sélection en ajoutant l'attribut `highlight-current-row`. L'évènement `current-change` se déclenchera à chaque changement de sélection, ses paramètres étant les deux lignes avant et après le changement: `currentRow` et `oldCurrentRow`. Si vous avez besoin d'afficher l'index des lignes, ajoutez une `el-table-column` avec pour `type` la valeur `index`, qui commencera à 1.\n```html\n<template>\n  <el-table\n    ref=\"singleTable\"\n    :data=\"tableData\"\n    highlight-current-row\n    @current-change=\"handleCurrentChange\"\n    style=\"width: 100%\">\n    <el-table-column\n      type=\"index\"\n      width=\"50\">\n    </el-table-column>\n    <el-table-column\n      property=\"date\"\n      label=\"Date\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      property=\"name\"\n      label=\"Nom\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      property=\"address\"\n      label=\"Adresse\">\n    </el-table-column>\n  </el-table>\n  <div style=\"margin-top: 20px\">\n    <el-button @click=\"setCurrent(tableData[1])\">Sélectionner la deuxième ligne</el-button>\n    <el-button @click=\"setCurrent()\">Effacer la sélection</el-button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }],\n        currentRow: null\n      }\n    },\n\n    methods: {\n      setCurrent(row) {\n        this.$refs.singleTable.setCurrentRow(row);\n      },\n      handleCurrentChange(val) {\n        this.currentRow = val;\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Sélection multiple\n\nVous pouvez aussi sélectionner plusieurs lignes.\n\n:::demo Ajoutez une `el-table-column` avec son `type` à `selection`. Cet exemple utilise aussi `show-overflow-tooltip`: par défaut, si le contenu est trop long, il se séparera en plusieurs lignes. Si vous souhaitez conserver une seule ligne, utilisez `show-overflow-tooltip`, qui accepte un `Boolean`. Si `true`, le contenu non affiché s'affichera dans le tooltip lorsque la souris passera sur la case.\n```html\n<template>\n  <el-table\n    ref=\"multipleTable\"\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    @selection-change=\"handleSelectionChange\">\n    <el-table-column\n      type=\"selection\"\n      width=\"55\">\n    </el-table-column>\n    <el-table-column\n      label=\"Date\"\n      width=\"120\">\n      <template slot-scope=\"scope\">{{ scope.row.date }}</template>\n    </el-table-column>\n    <el-table-column\n      property=\"name\"\n      label=\"Nom\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      property=\"address\"\n      label=\"Adresse\"\n      show-overflow-tooltip>\n    </el-table-column>\n  </el-table>\n  <div style=\"margin-top: 20px\">\n    <el-button @click=\"toggleSelection([tableData[1], tableData[2]])\">Sélectionner les deuxième et troisième lignes</el-button>\n    <el-button @click=\"toggleSelection()\">Effacer la sélection</el-button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }],\n        multipleSelection: []\n      }\n    },\n\n    methods: {\n      toggleSelection(rows) {\n        if (rows) {\n          rows.forEach(row => {\n            this.$refs.multipleTable.toggleRowSelection(row);\n          });\n        } else {\n          this.$refs.multipleTable.clearSelection();\n        }\n      },\n      handleSelectionChange(val) {\n        this.multipleSelection = val;\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Trier\n\nIl est possible de trier les données afin de trouver plus facilement ce qu'on cherche.\n\n:::demo Ajoutez l'attribut `sortable` a une colonne pour pouvoir trier cette colonne. Il accepte un `Boolean` et à `false` par défaut. Ajoutez `default-sort` pour déterminer les propriétés par défaut du tri. Pour appliquer vos propres règles, utilisez `sort-method` ou `sort-by`. Si vous avez besoin d'un tri dynamique depuis le serveur, mettez `sortable` à `custom`, et écoutez l'évènement `sort-change` de `Table`. Depuis cet évènement, vous aurez accès à la colonne et l'ordre de tri. cet exemple utilise aussi `formatter` pour formater les valeurs de colonnes. Il prend une fonction avec deux paramètres: `row` et `column`. Vous pouvez ainsi transformer les valeurs.\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    :default-sort = \"{prop: 'date', order: 'descending'}\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\"\n      :formatter=\"formatter\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    },\n    methods: {\n      formatter(row, column) {\n        return row.address;\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Filtrer\n\nVous pouvez filtrer la table pour obtenir rapidement les lignes désirées.\n\n:::demo Réglez `filters` et `filter-method` dans `el-table-column` pour rendre la colonne filtrable. `filters` prends un tableau, et `filter-method` est une fonction déterminant comment les lignes s'affichent. Elle prend trois paramètres: `value`, `row` et `column`.\n```html\n<template>\n  <el-button @click=\"resetDateFilter\">Effacer le filtre date</el-button>\n  <el-button @click=\"clearFilter\">Effacer tout les filtres</el-button>\n  <el-table\n    ref=\"filterTable\"\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      sortable\n      width=\"180\"\n      column-key=\"date\"\n      :filters=\"[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]\"\n      :filter-method=\"filterHandler\"\n    >\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\"\n      :formatter=\"formatter\">\n    </el-table-column>\n    <el-table-column\n      prop=\"tag\"\n      label=\"Tag\"\n      width=\"100\"\n      :filters=\"[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]\"\n      :filter-method=\"filterTag\"\n      filter-placement=\"bottom-end\">\n      <template slot-scope=\"scope\">\n        <el-tag\n          :type=\"scope.row.tag === 'Home' ? 'primary' : 'success'\"\n          disable-transitions>{{scope.row.tag}}</el-tag>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Office'\n        }]\n      }\n    },\n    methods: {\n      resetDateFilter() {\n        this.$refs.filterTable.clearFilter('date');\n      },\n      clearFilter() {\n        this.$refs.filterTable.clearFilter();\n      },\n      formatter(row, column) {\n        return row.address;\n      },\n      filterTag(value, row) {\n        return row.tag === value;\n      },\n      filterHandler(value, row, column) {\n        const property = column['property'];\n        return row[property] === value;\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Template de colonne personnalisé\n\nVous pouvez customiser le contenu des colonnes afin de pouvoir utiliser d'autres composants.\n\n:::demo Vous avez acccès aux données suivantes: `row`, `column`, `$index` et `store` (gestionnaire d'état de Table) grâce aux [Scoped slot](https://v2.vuejs.org/v2/guide/components-slots#Scoped-Slots).\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      label=\"Date\"\n      width=\"180\">\n      <template slot-scope=\"scope\">\n        <i class=\"el-icon-time\"></i>\n        <span style=\"margin-left: 10px\">{{ scope.row.date }}</span>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label=\"Nom\"\n      width=\"180\">\n      <template slot-scope=\"scope\">\n        <el-popover trigger=\"hover\" placement=\"top\">\n          <p>Nom: {{ scope.row.name }}</p>\n          <p>Addr: {{ scope.row.address }}</p>\n          <div slot=\"reference\" class=\"name-wrapper\">\n            <el-tag size=\"medium\">{{ scope.row.name }}</el-tag>\n          </div>\n        </el-popover>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label=\"Opérations\">\n      <template slot-scope=\"scope\">\n        <el-button\n          size=\"mini\"\n          @click=\"handleEdit(scope.$index, scope.row)\">Editer</el-button>\n        <el-button\n          size=\"mini\"\n          type=\"danger\"\n          @click=\"handleDelete(scope.$index, scope.row)\">Supprimer</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Table avec header personnalisé\n\nVous pouvez également personnaliser le header de la table.\n\n:::demo Vous pouvez personnaliser le header grâce aux [slots avec portée](https://v2.vuejs.org/v2/guide/components-slots#Scoped-Slots).\n```html\n<template>\n  <el-table\n    :data=\"tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))\"\n    style=\"width: 100%\">\n    <el-table-column\n      label=\"Date\"\n      prop=\"date\">\n    </el-table-column>\n    <el-table-column\n      label=\"Name\"\n      prop=\"name\">\n    </el-table-column>\n    <el-table-column\n      align=\"right\">\n      <template slot=\"header\" slot-scope=\"scope\">\n        <el-input\n          v-model=\"search\"\n          size=\"mini\"\n          placeholder=\"Type to search\"/>\n      </template>\n      <template slot-scope=\"scope\">\n        <el-button\n          size=\"mini\"\n          @click=\"handleEdit(scope.$index, scope.row)\">Editer</el-button>\n        <el-button\n          size=\"mini\"\n          type=\"danger\"\n          @click=\"handleDelete(scope.$index, scope.row)\">Supprimer</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'John',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Morgan',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Jessy',\n          address: 'No. 189, Grove St, Los Angeles'\n        }],\n        search: '',\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    },\n  }\n</script>\n```\n:::\n\n### Ligne extensible\n\nLorsque le contenu d'une ligne est trop long et que vous ne souhaitez pas afficher de scrollbar, vous pouvez utiliser une ligne extensible.\n\n:::demo Activer la ligne extensible en mettant `type` à `expand` et en utilisant un slot. Le contenu de `el-table-column` sera généré quand l'extension aura lieu, et vous avez aux même attributs que pour le slot des templates de colonnes.\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column type=\"expand\">\n      <template slot-scope=\"props\">\n        <p>État: {{ props.row.state }}</p>\n        <p>Ville: {{ props.row.city }}</p>\n        <p>Adresse: {{ props.row.address }}</p>\n        <p>Zip: {{ props.row.zip }}</p>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label=\"Date\"\n      prop=\"date\">\n    </el-table-column>\n    <el-table-column\n      label=\"Nom\"\n      prop=\"name\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Arborescence et lazy loading\n\n:::demo You can display tree structure data. When row contains the `children` field, it is treated as nested data. For rendering nested data, the prop `row-key` is required。Also, child row data can be loaded asynchronously. Set `lazy` property of Table to true and the function `load`. Specify `hasChildren` attribute in row to determine which row contains children. Both `children` and `hasChildren` can be configured via `tree-props`.\n\n```html\n<template>\n<div>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%;margin-bottom: 20px;\"\n    row-key=\"id\"\n    border\n    default-expand-all>\n    <el-table-column\n      prop=\"date\"\n      label=\"date\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n  </el-table>\n\n  <el-table\n    :data=\"tableData1\"\n    style=\"width: 100%\"\n    row-key=\"id\"\n    border\n    lazy\n    :load=\"load\"\n    :tree-props=\"{children: 'children', hasChildren: 'hasChildren'}\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n  </el-table>\n</div>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: 1,\n          date: '2016-05-02',\n          name: 'wangxiaohu'\n        }, {\n          id: 2,\n          date: '2016-05-04',\n          name: 'wangxiaohu'\n        }, {\n          id: 3,\n          date: '2016-05-01',\n          name: 'wangxiaohu',\n          children: [{\n              id: 31,\n              date: '2016-05-01',\n              name: 'wangxiaohu'\n            }, {\n              id: 32,\n              date: '2016-05-01',\n              name: 'wangxiaohu'\n          }]\n        }, {\n          id: 4,\n          date: '2016-05-03',\n          name: 'wangxiaohu'\n        }],\n        tableData1: [{\n          id: 1,\n          date: '2016-05-02',\n          name: 'wangxiaohu'\n        }, {\n          id: 2,\n          date: '2016-05-04',\n          name: 'wangxiaohu'\n        }, {\n          id: 3,\n          date: '2016-05-01',\n          name: 'wangxiaohu',\n          hasChildren: true\n        }, {\n          id: 4,\n          date: '2016-05-03',\n          name: 'wangxiaohu'\n        }]\n      }\n    },\n    methods: {\n      load(tree, treeNode, resolve) {\n        setTimeout(() => {\n          resolve([\n            {\n              id: 31,\n              date: '2016-05-01',\n              name: 'wangxiaohu'\n            }, {\n              id: 32,\n              date: '2016-05-01',\n              name: 'wangxiaohu'\n            }\n          ])\n        }, 1000)\n      }\n    },\n  }\n</script>\n```\n:::\n\n### Ligne de somme\n\nPour les tableaux de nombres, vous pouvez ajouter une ligne en plus pour afficher la somme de chaque colonne.\n\n:::demo Mettez l'attribut `show-summary` à `true` dans `el-table`. Par défaut, la première colonne n'affiche que 'Sum' (vous pouvez configurer ce label avec `sum-text`), alors que les autres affichent la somme de chaque colonne. Vous pouvez choisir comment effectuer l'opération grâce à `summary-method`, qui doit retourner un tableau, cahque élément correspondant à la somme de chaque colonne. La deuxième table de cet exemple montre tout cela en pratique.\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    border\n    show-summary\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"id\"\n      label=\"ID\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\">\n    </el-table-column>\n    <el-table-column\n      prop=\"amount1\"\n      sortable\n      label=\"Quantité 1\">\n    </el-table-column>\n    <el-table-column\n      prop=\"amount2\"\n      sortable\n      label=\"Quantité 2\">\n    </el-table-column>\n    <el-table-column\n      prop=\"amount3\"\n      sortable\n      label=\"Quantité 3\">\n    </el-table-column>\n  </el-table>\n\n  <el-table\n    :data=\"tableData\"\n    border\n    height=\"200\"\n    :summary-method=\"getSummaries\"\n    show-summary\n    style=\"width: 100%; margin-top: 20px\">\n    <el-table-column\n      prop=\"id\"\n      label=\"ID\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\">\n    </el-table-column>\n    <el-table-column\n      prop=\"amount1\"\n      label=\"Coût 1 ($)\">\n    </el-table-column>\n    <el-table-column\n      prop=\"amount2\"\n      label=\"Coût 2 ($)\">\n    </el-table-column>\n    <el-table-column\n      prop=\"amount3\"\n      label=\"Coût 3 ($)\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: '12987122',\n          name: 'Tom',\n          amount1: '234',\n          amount2: '3.2',\n          amount3: 10\n        }, {\n          id: '12987123',\n          name: 'Tom',\n          amount1: '165',\n          amount2: '4.43',\n          amount3: 12\n        }, {\n          id: '12987124',\n          name: 'Tom',\n          amount1: '324',\n          amount2: '1.9',\n          amount3: 9\n        }, {\n          id: '12987125',\n          name: 'Tom',\n          amount1: '621',\n          amount2: '2.2',\n          amount3: 17\n        }, {\n          id: '12987126',\n          name: 'Tom',\n          amount1: '539',\n          amount2: '4.1',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      getSummaries(param) {\n        const { columns, data } = param;\n        const sums = [];\n        columns.forEach((column, index) => {\n          if (index === 0) {\n            sums[index] = 'Coût total';\n            return;\n          }\n          const values = data.map(item => Number(item[column.property]));\n          if (!values.every(value => isNaN(value))) {\n            sums[index] = '$ ' + values.reduce((prev, curr) => {\n              const value = Number(curr);\n              if (!isNaN(value)) {\n                return prev + curr;\n              } else {\n                return prev;\n              }\n            }, 0);\n          } else {\n            sums[index] = 'N/A';\n          }\n        });\n\n        return sums;\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Étendue des lignes et colonnes\n\nVous pouvez configurer l'étendue des lignes et colonnes afin de fusionner des cellules.\n\n:::demo Utilisez `span-method` pour configurer chaque étendue. Il accepte une fonction, et lui passe un objet incluant la ligne actuelle `row`, la colonne actuelle `column`, l'index de la ligne `rowIndex` et l'index de la colonne `columnIndex`. La fonction doit retourner un tableau contenant deux nombres, le premier étant `rowspan` et le second `colspan`. Elle peut aussi retourner un objet avec les propriétés `rowspan` et `colspan`.\n\n```html\n<template>\n  <div>\n    <el-table\n      :data=\"tableData\"\n      :span-method=\"arraySpanMethod\"\n      border\n      style=\"width: 100%\">\n      <el-table-column\n        prop=\"id\"\n        label=\"ID\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"name\"\n        label=\"Nom\">\n      </el-table-column>\n      <el-table-column\n        prop=\"amount1\"\n        sortable\n        label=\"Quantité 1\">\n      </el-table-column>\n      <el-table-column\n        prop=\"amount2\"\n        sortable\n        label=\"Quantité 2\">\n      </el-table-column>\n      <el-table-column\n        prop=\"amount3\"\n        sortable\n        label=\"Quantité 3\">\n      </el-table-column>\n    </el-table>\n\n    <el-table\n      :data=\"tableData\"\n      :span-method=\"objectSpanMethod\"\n      border\n      style=\"width: 100%; margin-top: 20px\">\n      <el-table-column\n        prop=\"id\"\n        label=\"ID\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"name\"\n        label=\"Nom\">\n      </el-table-column>\n      <el-table-column\n        prop=\"amount1\"\n        label=\"Quantité 1\">\n      </el-table-column>\n      <el-table-column\n        prop=\"amount2\"\n        label=\"Quantité 2\">\n      </el-table-column>\n      <el-table-column\n        prop=\"amount3\"\n        label=\"Quantité 3\">\n      </el-table-column>\n    </el-table>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: '12987122',\n          name: 'Tom',\n          amount1: '234',\n          amount2: '3.2',\n          amount3: 10\n        }, {\n          id: '12987123',\n          name: 'Tom',\n          amount1: '165',\n          amount2: '4.43',\n          amount3: 12\n        }, {\n          id: '12987124',\n          name: 'Tom',\n          amount1: '324',\n          amount2: '1.9',\n          amount3: 9\n        }, {\n          id: '12987125',\n          name: 'Tom',\n          amount1: '621',\n          amount2: '2.2',\n          amount3: 17\n        }, {\n          id: '12987126',\n          name: 'Tom',\n          amount1: '539',\n          amount2: '4.1',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      arraySpanMethod({ row, column, rowIndex, columnIndex }) {\n        if (rowIndex % 2 === 0) {\n          if (columnIndex === 0) {\n            return [1, 2];\n          } else if (columnIndex === 1) {\n            return [0, 0];\n          }\n        }\n      },\n\n      objectSpanMethod({ row, column, rowIndex, columnIndex }) {\n        if (columnIndex === 0) {\n          if (rowIndex % 2 === 0) {\n            return {\n              rowspan: 2,\n              colspan: 1\n            };\n          } else {\n            return {\n              rowspan: 0,\n              colspan: 0\n            };\n          }\n        }\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Indices personnalisés\n\nVous pouvez personnaliser les indices des colonnes de type `index`.\n\n:::demo Utilisez l'attribut `index` sur une `el-table-column` avec `type=index`. Si un nombre est assigné, tout les indices auront un décalage égal à ce nombre. Il peut aussi prendre une fonction avec chaque indice (commençant à `0`) comme paramètre, et la valeur de retour sera affichée en tant qu'indice.\n\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      type=\"index\"\n      :index=\"indexMethod\">\n    </el-table-column>\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }],\n      }\n    },\n    methods: {\n      indexMethod(index) {\n        return index * 2;\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Attributs de Table\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|----------------|----------------------|-----------|-----------------------|----------|\n| data | Les données de la table. | array | — | — |\n| height | La hauteur de la table. Par défaut la hauteur est `auto`. Si sa valeur est un nombre, la hauteur est en px; si c'est un string, la valeur est assigné au style.height de l'élement. La hauteur est affectée par les styles externes. | string/number | — | — |\n| max-height | Table's max-height. The legal value is a number or the height in px. | string/number | — | — |\n| stripe | Si la table est rayée. | boolean | — | false |\n| border | Si la table à une bordure verticale. | boolean | — | false |\n| size | Taille de la table. | string | medium / small / mini | — |\n| fit | Si la largeur des colonnes s'adapte au conteneur. | boolean | — | true |\n| show-header | Si le header de la table est visible. | boolean | — | true |\n| highlight-current-row | Si la ligne courante est mise en valeur. | boolean | — | false |\n| highlight-selection-row | Sélectionner la ligne à cocher en surbrillance | boolean | — | false |\n| current-row-key | Clé de la ligne actuelle. Propriété set-only. | string,number | — | — |\n| row-class-name | Fonction qui retourne un nom de classe pour chaque ligne. Peut aussi être une simple chaîne de caractères assignant une classe à chaque ligne. | Function({row, rowIndex})/String | — | — |\n| row-style | Fonction qui retourne un style pour chaque ligne. Peut aussi être un objet assignant un style à chaque ligne. | Function({row, rowIndex})/Object | — | — |\n| cell-class-name | Fonction qui retourne un nom de classe pour chaque cellule. Peut aussi être une simple chaîne de caractères assignant une classe à chaque cellule. | Function({row, column, rowIndex, columnIndex})/String | — | — |\n| cell-style | Fonction qui retourne un style pour chaque cellule. Peut aussi être un objet assignant un style à chaque cellule. | Function({row, column, rowIndex, columnIndex})/Object | — | — |\n| header-row-class-name | Fonction qui retourne un nom de classe pour chaque ligne de header. Peut aussi être une simple chaîne de caractères assignant une classe à chaque ligne de header. | Function({row, rowIndex})/String | — | — |\n| header-row-style | Fonction qui retourne un style pour chaque ligne de header. Peut aussi être un objet assignant un style à chaque ligne de header. | Function({row, rowIndex})/Object | — | — |\n| header-cell-class-name | Fonction qui retourne un nom de classe pour chaque cellule de header. Peut aussi être une simple chaîne de caractères assignant une classe à chaque cellule de header. | Function({row, column, rowIndex, columnIndex})/String | — | — |\n| header-cell-style | Fonction qui retourne un style pour chaque cellule de header. Peut aussi être un objet assignant un style à chaque cellule de header. | Function({row, column, rowIndex, columnIndex})/Object | — | — |\n| row-key | Clé de chaque ligne, utilisée pour optimiser le rendu. Requise si `reserve-selection` est activé. Quand c'est un `String`, l'accès multi-niveaux est supporté, e.g. `user.info.id`, mais `user.info[0].id` n'est pas supporté. Dans ce dernier cas une `Function` devrait être utilisée. | Function(row)/String | — | — |\n| empty-text | Texte à afficher quand il n'y a pas de données. Vous pouvez changer cette zone grâce à `slot=\"empty\"`. | String | — | No Data |\n| default-expand-all | whether expand all rows by default, works when the table has a column type=\"expand\" or contains tree structure data | Boolean | — | false |\n| expand-row-keys | Détermine les lignes qui sont étendues, contient les clés des lignes correspondantes. Vous devriez configurer `row-key` avant celle-ci. | Array | — | |\n| default-sort | Détermine l'ordre de tri par défaut. La propriété `prop` détermine la colonne par défaut, `order` détermine l'ordre par défaut. | Object | `order`: ascending, descending | Si `order` est absent, son défaut sera `ascending`. |\n| tooltip-effect | Propriété `effect` de Tooltip. | String | dark/light | | dark |\n| show-summary | Si une ligne de somme doit apparaître. | Boolean | — | false |\n| sum-text | Le label de la première cellule de la ligne de somme. | String | — | Sum |\n| summary-method | La méthode pour calculer la somme. | Function({ columns, data }) | — | — |\n| span-method | Méthode qui retourne les valeurs de colspan et rowspan. | Function({ row, column, rowIndex, columnIndex }) | — | — |\n| select-on-indeterminate | Contrôle le comportement de la checkbox globale dans les tables avec sélection multiple lorsque seulement certaines lignes sont sélectionnées. Si `true`, toutes les lignes sont sélectionnées. | Boolean | — | true |\n| indent                  | horizontal indentation of tree data      | Number    | — | 16   |\n| lazy                    | whether to lazy loading data             | Boolean   | — | —    |\n| load                    | method for loading child row data, only works when `lazy` is true | Function({ row, treeNode, resolve }) | — | — |\n| tree-props              | configuration for rendering nested data | Object | — | { hasChildren: 'hasChildren', children: 'children' } |\n\n### Évènements de Table\n\n| Nom | Description | Paramètres |\n| ---- | ---- | ---- |\n| select | Se déclenche quand l'utilisateur clique sur la checkbox d'une ligne. | selection, row |\n| select-all | Se déclenche quand l'utilisateur clique sur la checkbox du header. | selection |\n| selection-change | Se déclenche quand la selection change. | selection |\n| cell-mouse-enter | Se déclenche quand la souris passe sur une cellule. | row, column, cell, event |\n| cell-mouse-leave | Se déclenche quand la souris sort d'une cellule. | row, column, cell, event |\n| cell-click | Se déclenche quand l'utilisateur clique sur une cellule. | row, column, cell, event |\n| cell-dblclick | Se déclenche quand l'utilisateur double-clique sur une cellule. | row, column, cell, event |\n| row-click | Se déclenche quand l'utilisateur clique sur une ligne. | row, column, event |\n| row-contextmenu | Se déclenche quand l'utilisateur fait un clic droit sur une ligne. | row, column, event |\n| row-dblclick | Se déclenche quand l'utilisateur double-clique sur une ligne. | row, column, event |\n| header-click | Se déclenche quand l'utilisateur clique sur une colonne du header. | column, event |\n| header-contextmenu | Se déclenche quand l'utilisateur fait un clic droit sur une colonne du header. | column, event |\n| sort-change | Se déclenche quand l'ordre de tri change. | { column, prop, order } |\n| filter-change | column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered. | filters |\n| current-change | Se déclenche quand la ligne sélectionnée change. | currentRow, oldCurrentRow |\n| header-dragend | Se déclenche après un changement de taille de colonne en déplaçant la ligne verticale du header. | newWidth, oldWidth, column, event |\n| expand-change  | triggers when user expands or collapses a row (for expandable table, second param is expandedRows; for tree Table, second param is expanded) | row, (expandedRows \\| expanded) |\n\n### Méthodes de Table\n\n| Méthode | Description | Paramètres |\n|------|--------|-------|\n| clearSelection | Dans les tables avec sélection multiple, efface la sélection. | — |\n| toggleRowSelection | Dans les tables avec sélection multiple, change la sélection d'une ligne. Grâce au deuxième paramètre vous pouvez directement décider si cette ligne est sélectionnée. | row, selected |\n| toggleAllSelection | Utilisé dans les tables à sélection multiples, sélectionne toutes les lignes. | - |\n| toggleRowExpansion | used in expandable Table or tree Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed | row, expanded |\n| setCurrentRow | Dans les tables à sélection simple, sélectionne une ligne. Sans paramètre la sélection est effacé. | row |\n| clearSort | Efface le tri. | — |\n| clearFilter | Efface les filtres des colonnes dont les `columnKey` sont passées. Si aucun paramètre, efface tout les filtres. | columnKeys |\n| doLayout | Rafraîchi le layout de la table. Quand la visibilité de la table change vous aurez peut-être besoin de cette méthode pour corriger le layout. | — |\n| sort | Tri la table manuellement. La proriété `prop` détermine la colonne, `order` détermine l'ordre de tri. | prop: string, order: string |\n\n### Slots de Table\n\n| Nom | Description |\n|------|--------|\n| append | Contenu à insérer après la dernière ligne. Vous aurez sans doute besoin de ce slot si vous implémentez un scroll infini. Il sera affiché au-dessus de la ligne de somme s'il y en a une. |\n\n### Attributs de Table-column\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| type | Type de la colonne. Si mis à `selection`, la colonne affichera des checkbox. Si mis à `index`, la colonne affichera l'indice de la ligne (début à 1). Si mis à `expand`, affichera l'icône d'extension.  | string | selection/index/expand | — |\n| index | Personnalise les indices de chaque ligne, marche avec les colonnes `type=index`. | number, Function(index) | - | - |\n| label | Label de la colonne. | string | — | — |\n| column-key | La clé de la colonne. Si vous avez besoin d'utiliser l'évènement filter-change, vous aurez besoin de cet attribut pour savoir quelle colonne est filtrée. | string | string | — | — |\n| prop | Nom du champ de l'objet de données. Alias: `property`. | string | — | — |\n| width | Largeur de la colonne. | string | — | — |\n| min-width | Largeur minimale de la colonne. Les colonnes avec `width` ont une largeur fixe, alors que celles avec `min-width` ont une largeur proportionnellement distribuée. | string | — | — |\n| fixed | Si la colonne est fixée à droite ou à gauche. Fixée à gauche si `true`. | string/boolean | true/left/right | — |\n| render-header | Fonction de rendu pour le header de cette colonne. | Function(h, { column, $index }) | — | — |\n| sortable | Si la colonne peut être triée. Tri dynamique possible en mettant à 'custom' et en écoutant l'évènement `sort-change` de Table. | boolean, string | true, false, custom | false |\n| sort-method | Méthode de tri, marche quand `sortable` est `true`. Doit retourner un nombre, tout comme Array.sort. | Function(a, b) | — | — |\n| sort-by | Détermine par quelle propriété effectuer le tri, marche quand `sortable` est `true` et `sort-method` est `undefined`. Si c'est un Array, sera triée par la propriété suivante si la précédente est équivalente. | Function(row, index)/String/Array | — | — |\n| sort-orders | Liste des stratégies de tri, marche quand `sortable` est `true`. Accepte un tableau. Lorsque l'utilisateur clique plusieurs fois sur le header, la colonne est triée dans l'ordre des stratégies indiquée. | array | Les élements du tableau doivent être parmi: `ascending`, `descending` et `null` (restaure l'état originel du tableau). | ['ascending', 'descending', null] |\n| resizable | Si la largeur de la colonne peut être modifiée, marche quand `border` de `el-table` est `true`. | boolean | — | false |\n| formatter | Fonction pour formater le contenu des cellules. | Function(row, column, cellValue, index) | — | — |\n| show-overflow-tooltip | Si du contenu trop long doit être caché et affiché dans une tooltip quand la souris passe sur la cellule. | boolean | — | false |\n| align | Alignement. | string | left/center/right | left |\n| header-align | Alignement du header. Si omis, la valeur du `align` ci-dessus est appliqué. | String | left/center/right | — |\n| class-name | Classe des cellules dans cette colonne. | string | — | — |\n| label-class-name | Classe du label de cette colonne. | string | — | — |\n| selectable | Détermine si certaines colonnes peuvent être sélectionnées, marche quand `type` est 'selection'. | Function(row, index) | — | — |\n| reserve-selection | Si la sélection doit être conservée après rafraîchissement, marche quand `type` est 'selection'. Notez que `row-key` est requis. | boolean | — | false |\n| filters | Un tableau d'options de filtrage. Pour chaque élément, `text` et `value` sont requis. | Array[{ text, value }] | — | — |\n| filter-placement | Emplacement du menu du filtre. | String | Voir `placement` de Tooltip. | — |\n| filter-multiple | Si le filtrage supporte plusieurs options. | Boolean | — | true |\n| filter-method | Méthode de filtrage. Si `filter-multiple` est activé, cette méthode sera appelé plusieurs fois pour chaque ligne, qui sera affichée si dès qu'un `true` sera renvoyé. | Function(value, row, column) | — | — |\n| filtered-value | Valeur de filtre pour les colonnes sélectionnées, peut être utile quand le header est rendu avec `render-header`. | Array | — | — |\n\n### Slot de Table-column\n\n| Nom | Description |\n|------|--------|\n| — | Contenu personnalisé pour les colonnes. Les paramètres sont { row, column, $index } |\n| header | Contenu personnalisé pour le header. Le paramètre de scope est { column, $index } |\n"
  },
  {
    "path": "examples/docs/fr-FR/tabs.md",
    "content": "## Tabs\n\nDivise des collections de données de types différents, mais reliées entre elles par un contexte ou un type global.\n\n### Usage\n\nOnglets basiques.\n\n:::demo Tabs fournit un outil de sélection des onglets. Par défaut, le premier onglet est sélectionné et actif mais vous pouvez activer n'importe lequel en réglant l'attribut `value`.\n\n```html\n<template>\n  <el-tabs v-model=\"activeName\" @tab-click=\"handleClick\">\n    <el-tab-pane label=\"User\" name=\"first\">Utilisateur</el-tab-pane>\n    <el-tab-pane label=\"Config\" name=\"second\">Config</el-tab-pane>\n    <el-tab-pane label=\"Role\" name=\"third\">Rôle</el-tab-pane>\n    <el-tab-pane label=\"Task\" name=\"fourth\">Tâche</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: 'first'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Style carte\n\nLes onglets peuvent être stylisés comme des cartes.\n\n:::demo Mettez `type` à `card` pour avoir des onglets avec un style de carte.\n\n```html\n<template>\n  <el-tabs type=\"card\" @tab-click=\"handleClick\">\n    <el-tab-pane label=\"User\">Utilisateur</el-tab-pane>\n    <el-tab-pane label=\"Config\">Config</el-tab-pane>\n    <el-tab-pane label=\"Role\">Rôle</el-tab-pane>\n    <el-tab-pane label=\"Task\">Tâche</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: 'first'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Style carte avec bordure\n\nOnglets avec style de carte et bordure.\n\n:::demo Mettez `type` à `border-card`.\n\n```html\n<el-tabs type=\"border-card\">\n  <el-tab-pane label=\"User\">Utilisateur</el-tab-pane>\n  <el-tab-pane label=\"Config\">Config</el-tab-pane>\n  <el-tab-pane label=\"Role\">Rôle</el-tab-pane>\n  <el-tab-pane label=\"Task\">Tâche</el-tab-pane>\n</el-tabs>\n```\n\n:::\n\n### Position des onglets\n\nVous pouvez utiliser `tab-position` pour régler la position des onglets.\n\n:::demo Il y a quatre positions différentes: `tabPosition=\"left|right|top|bottom\"`\n\n```html\n<template>\n  <el-radio-group v-model=\"tabPosition\" style=\"margin-bottom: 30px;\">\n    <el-radio-button label=\"top\">En haut</el-radio-button>\n    <el-radio-button label=\"right\">À droite</el-radio-button>\n    <el-radio-button label=\"bottom\">En bas</el-radio-button>\n    <el-radio-button label=\"left\">À gauche</el-radio-button>\n  </el-radio-group>\n\n  <el-tabs :tab-position=\"tabPosition\" style=\"height: 200px;\">\n    <el-tab-pane label=\"User\">Utilisateur</el-tab-pane>\n    <el-tab-pane label=\"Config\">Config</el-tab-pane>\n    <el-tab-pane label=\"Role\">Rôle</el-tab-pane>\n    <el-tab-pane label=\"Task\">Tâche</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        tabPosition: 'left'\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Onglet personnalisé\n\nVous pouvez utiliser un slot pour customiser le label d'un onglet.\n\n:::demo\n```html\n<el-tabs type=\"border-card\">\n  <el-tab-pane>\n    <span slot=\"label\"><i class=\"el-icon-date\"></i> Route</span>\n    Route\n  </el-tab-pane>\n  <el-tab-pane label=\"Config\">Config</el-tab-pane>\n  <el-tab-pane label=\"Role\">Rôle</el-tab-pane>\n  <el-tab-pane label=\"Task\">Tâche</el-tab-pane>\n</el-tabs>\n```\n:::\n\n### Ajouter et supprimer des onglets\n\nSeuls les onglets de type carte supportent l'ajout et la suppression.\n\n:::demo\n```html\n<el-tabs v-model=\"editableTabsValue\" type=\"card\" editable @edit=\"handleTabsEdit\">\n  <el-tab-pane\n    v-for=\"(item, index) in editableTabs\"\n    :key=\"item.name\"\n    :label=\"item.title\"\n    :name=\"item.name\"\n  >\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n<script>\n  export default {\n    data() {\n      return {\n        editableTabsValue: '2',\n        editableTabs: [{\n          title: 'Onglet 1',\n          name: '1',\n          content: 'Contenu de l\\'onglet 1'\n        }, {\n          title: 'Onglet 2',\n          name: '2',\n          content: 'Contenu de l\\'onglet 2'\n        }],\n        tabIndex: 2\n      }\n    },\n    methods: {\n      handleTabsEdit(targetName, action) {\n        if (action === 'add') {\n          let newTabName = ++this.tabIndex + '';\n          this.editableTabs.push({\n            title: 'Nouvel onglet',\n            name: newTabName,\n            content: 'Contenu du nouvel onglet'\n          });\n          this.editableTabsValue = newTabName;\n        }\n        if (action === 'remove') {\n          let tabs = this.editableTabs;\n          let activeName = this.editableTabsValue;\n          if (activeName === targetName) {\n            tabs.forEach((tab, index) => {\n              if (tab.name === targetName) {\n                let nextTab = tabs[index + 1] || tabs[index - 1];\n                if (nextTab) {\n                  activeName = nextTab.name;\n                }\n              }\n            });\n          }\n\n          this.editableTabsValue = activeName;\n          this.editableTabs = tabs.filter(tab => tab.name !== targetName);\n        }\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Personnaliser le bouton d'ajout d'onglet\n\n:::demo\n```html\n<div style=\"margin-bottom: 20px;\">\n  <el-button\n    size=\"small\"\n    @click=\"addTab(editableTabsValue)\"\n  >\n    Ajouter un onglet\n  </el-button>\n</div>\n<el-tabs v-model=\"editableTabsValue\" type=\"card\" closable @tab-remove=\"removeTab\">\n  <el-tab-pane\n    v-for=\"(item, index) in editableTabs\"\n    :key=\"item.name\"\n    :label=\"item.title\"\n    :name=\"item.name\"\n  >\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n<script>\n  export default {\n    data() {\n      return {\n        editableTabsValue: '2',\n        editableTabs: [{\n          title: 'Onglet 1',\n          name: '1',\n          content: 'Contenu de l\\'onglet 1'\n        }, {\n          title: 'Onglet 2',\n          name: '2',\n          content: 'Contenu de l\\'onglet 2'\n        }],\n        tabIndex: 2\n      }\n    },\n    methods: {\n      addTab(targetName) {\n        let newTabName = ++this.tabIndex + '';\n        this.editableTabs.push({\n          title: 'Nouvel onglet',\n          name: newTabName,\n          content: 'Contenu du nouvel onglet'\n        });\n        this.editableTabsValue = newTabName;\n      },\n      removeTab(targetName) {\n        let tabs = this.editableTabs;\n        let activeName = this.editableTabsValue;\n        if (activeName === targetName) {\n          tabs.forEach((tab, index) => {\n            if (tab.name === targetName) {\n              let nextTab = tabs[index + 1] || tabs[index - 1];\n              if (nextTab) {\n                activeName = nextTab.name;\n              }\n            }\n          });\n        }\n\n        this.editableTabsValue = activeName;\n        this.editableTabs = tabs.filter(tab => tab.name !== targetName);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Attributs de Tabs\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------- |---------- |-------------  |-------- |\n| value / v-model | La valeur liée, nom de l'onglet sélectionné. | string   |  —  | Nom du premier onglet. |\n| type     | Type de l'onglet. | string   | card/border-card  |     —    |\n| closable  | Si des onglets peuvent être supprimés. | boolean   | — |  false  |\n| addable  | Si des onglets peuvent être ajoutés. | boolean   | — |  false  |\n| editable  | Si des onglets peuvent être ajoutés et supprimés. | boolean   | — |  false  |\n| tab-position  | Position des onglets. | string   |  top/right/bottom/left  |  top |\n| stretch  | Si la largeur des onglets s'adapte au conteneur. | boolean   |  -  |  false |\n| before-leave | Fonction de hook avant de changer d'onglet. Si `false` est retourné ou qu'une `Promise` retournée et rejetée, le changement sera annulé. | Function(activeName, oldActiveName) | — | — |\n\n### Évènements de Tabs\n\n| Nom | Description | Paramètres |\n|---------- |-------- |---------- |\n| tab-click  | Se déclenche quand on clique sur un onglet. | clicked tab |\n| tab-remove  | Se déclenche quand on clique sur le bouton de suppression des onglets. | name of the removed tab |\n| tab-add  | Se déclenche quand on clique sur le bouton d'ajout des onglets.  | — |\n| edit  | Se déclenche quand on clique sur les boutons d'ajout ou de suppression des onglets. | (targetName, action) |\n\n### Attributs de Tab-pane\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------- |---------- |-------------  |-------- |\n| label     | Titre de l'onglet. | string   | — |    —     |\n| disabled | Si l'onglet est désactivé. | boolean | — | false |\n| name      | Identifiant correspondant au nom des onglets, utilisé par Tabs pour savoir quel est l'onglet actif. | string | — | Numéro de l'onglet dans l'ordre d'apparition, e.g. le premier est '1'. |\n| closable  | Si l'onglet est supprimable. | boolean   | — |  false  |\n| lazy  | Si le contenu de l'onglet bénéficie du lazy-loading.  | boolean   | — |  false  |\n"
  },
  {
    "path": "examples/docs/fr-FR/tag.md",
    "content": "## Tag\n\nLes tags sont utiles sont marquer certaines données afin d'ajouter des informations et de les retrouver plus facilement.\n\n### Usage\n\n:::demo Utilisez l'attribut `type` pour définir le type de tag. De plus, l'attribut `color` détermine la couleur de fond.\n\n```html\n<el-tag>Tag 1</el-tag>\n<el-tag type=\"success\">Tag 2</el-tag>\n<el-tag type=\"info\">Tag 3</el-tag>\n<el-tag type=\"warning\">Tag 4</el-tag>\n<el-tag type=\"danger\">Tag 5</el-tag>\n```\n:::\n\n### Supprimer des tags\n\n:::demo L'attribut `closable` détermine si un tag est supprimable grâce à un `Boolean`. Par défaut la suppression bénéficie d'un animation de fading. Utilisez `disable-transitions` si vous ne souhaitez pas d'animations en utilisant un `Boolean` à `true`. L'évènement `close` se déclenche quand un tag est supprimé.\n\n```html\n<el-tag\n  v-for=\"tag in tags\"\n  :key=\"tag.name\"\n  closable\n  :type=\"tag.type\">\n  {{tag.name}}\n</el-tag>\n\n<script>\n  export default {\n    data() {\n      return {\n        tags: [\n          { name: 'Tag 1', type: '' },\n          { name: 'Tag 2', type: 'success' },\n          { name: 'Tag 3', type: 'info' },\n          { name: 'Tag 4', type: 'warning' },\n          { name: 'Tag 5', type: 'danger' }\n        ]\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Édition dynamique\n\nVous pouvez utiliser l'évènement `close` pour ajouter et supprimer des tags dynamiquement.\n\n:::demo\n```html\n<el-tag\n  :key=\"tag\"\n  v-for=\"tag in dynamicTags\"\n  closable\n  :disable-transitions=\"false\"\n  @close=\"handleClose(tag)\">\n  {{tag}}\n</el-tag>\n<el-input\n  class=\"input-new-tag\"\n  v-if=\"inputVisible\"\n  v-model=\"inputValue\"\n  ref=\"saveTagInput\"\n  size=\"mini\"\n  @keyup.enter.native=\"handleInputConfirm\"\n  @blur=\"handleInputConfirm\"\n>\n</el-input>\n<el-button v-else class=\"button-new-tag\" size=\"small\" @click=\"showInput\">+ Nouveau Tag</el-button>\n\n<style>\n  .el-tag + .el-tag {\n    margin-left: 10px;\n  }\n  .button-new-tag {\n    margin-left: 10px;\n    height: 32px;\n    line-height: 30px;\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .input-new-tag {\n    width: 90px;\n    margin-left: 10px;\n    vertical-align: bottom;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],\n        inputVisible: false,\n        inputValue: ''\n      };\n    },\n    methods: {\n      handleClose(tag) {\n        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);\n      },\n\n      showInput() {\n        this.inputVisible = true;\n        this.$nextTick(_ => {\n          this.$refs.saveTagInput.$refs.input.focus();\n        });\n      },\n\n      handleInputConfirm() {\n        let inputValue = this.inputValue;\n        if (inputValue) {\n          this.dynamicTags.push(inputValue);\n        }\n        this.inputVisible = false;\n        this.inputValue = '';\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Tailles\n\nEn plus de la taille par défaut, Tag fournit d'autres tailles pour vos composants.\n\n:::demo Utilisez `size` pour choisir une autre taille parmi `medium`, `small` ou `mini`.\n\n```html\n<el-tag>Défaut</el-tag>\n<el-tag size=\"medium\">Medium</el-tag>\n<el-tag size=\"small\">Small</el-tag>\n<el-tag size=\"mini\">Mini</el-tag>\n```\n:::\n\n### Theme\n\nLes balises utilisent trois thèmes différents: `dark`, `light` et `plain`\n\n:::demo Utilisez `effect` pour changer. La valeur par défaut est `light`\n```html\n<div class=\"tag-group\">\n  <span class=\"tag-group__title\">Dark</span>\n  <el-tag\n    v-for=\"item in items\"\n    :key=\"item.label\"\n    :type=\"item.type\"\n    effect=\"dark\">\n    {{ item.label }}\n  </el-tag>\n</div>\n<div class=\"tag-group\">\n  <span class=\"tag-group__title\">Plain</span>\n  <el-tag\n    v-for=\"item in items\"\n    :key=\"item.label\"\n    :type=\"item.type\"\n    effect=\"plain\">\n    {{ item.label }}\n  </el-tag>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        items: [\n          { type: '', label: 'Tag 1' },\n          { type: 'success', label: 'Tag 2' },\n          { type: 'info', label: 'Tag 3' },\n          { type: 'danger', label: 'Tag 4' },\n          { type: 'warning', label: 'Tag 5' }\n        ]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Attributs\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| type | Type du tag. | string | success/info/warning/danger | — |\n| closable | Si le tag peut être supprimé. | boolean | — | false |\n| disable-transitions | Si les animations sont désactivées. | boolean | — | false |\n| hit | Si le tag à une bordure mise en valeur. | boolean | — | false |\n| color | Couleur de fond du tag. | string | — | — |\n| size | Taille du tag. | string | medium / small / mini | — |\n| effect | component theme | string | dark / light / plain | light |\n\n### Évènements\n\n| Nom | Description | Paramètres |\n|---------- |-------- |---------- |\n| click | Se déclenche quand le tag est cliqué. | — |\n| close | Se déclenche quand le tag est supprimé. | — |\n"
  },
  {
    "path": "examples/docs/fr-FR/time-picker.md",
    "content": "## TimePicker\n\nUtiliser TimePicker pour sélectionner un horaire.\n\n### Sélection d'horaire fixe\n\nVous pouvez fournir une liste d'horaires fixés pour que l'utilisateur en choisisse un.\n\n:::demo Utilisez `el-time-select` puis assignez un horaire de début, de fin et un pas grâce aux propriétés `start`, `end` et `step` de l'attribut `picker-options`.\n```html\n<el-time-select\n  v-model=\"value\"\n  :picker-options=\"{\n    start: '08:30',\n    step: '00:15',\n    end: '18:30'\n  }\"\n  placeholder=\"Choisissez un horaire\">\n</el-time-select>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: ''\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Sélection d'horaire libre\n\nVous pouvez aussi laisser l'utilisateur choisir librement un horaire.\n\n:::demo Utilisez `el-time-picker` puis l'attribut `picker-options` et sa propriété `selectableRange` pour déterminer la tranche horaire disponible. Par défaut, vous pouvez utiliser la molette de votre souris, ou les flèches directionnelles si l'attribut `arrow-control` est présent.\n\n```html\n<template>\n  <el-time-picker\n    v-model=\"value1\"\n    :picker-options=\"{\n      selectableRange: '18:30:00 - 20:30:00'\n    }\"\n    placeholder=\"Horaire libre\">\n  </el-time-picker>\n  <el-time-picker\n    arrow-control\n    v-model=\"value2\"\n    :picker-options=\"{\n      selectableRange: '18:30:00 - 20:30:00'\n    }\"\n    placeholder=\"Horaire libre\">\n  </el-time-picker>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: new Date(2016, 9, 10, 18, 40),\n        value2: new Date(2016, 9, 10, 18, 40)\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Intervalle de temps fixe\n\nVous pouvez définir un intervalle de temps. Si l'horaire de début est sélectionné en premier, certains horaires de fins seront désactivés s'ils ont lieu avant l'horaire de début.\n\n:::demo\n```html\n<template>\n  <el-time-select\n    placeholder=\"Horaire de début\"\n    v-model=\"startTime\"\n    :picker-options=\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30'\n    }\">\n  </el-time-select>\n  <el-time-select\n    placeholder=\"Horaire de fin\"\n    v-model=\"endTime\"\n    :picker-options=\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30',\n      minTime: startTime\n    }\">\n  </el-time-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        startTime: '',\n        endTime: ''\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Intervalle de temps libre\n\nVous pouvez également définir un intervalle libre.\n\n:::demo Ajoutez l'attribut `is-range`. L'attribut `arrow-control` est aussi supporté dans ce mode.\n```html\n<template>\n  <el-time-picker\n    is-range\n    v-model=\"value1\"\n    range-separator=\"To\"\n    start-placeholder=\"Horaire de début\"\n    end-placeholder=\"Horaire de fin\">\n  </el-time-picker>\n  <el-time-picker\n    is-range\n    arrow-control\n    v-model=\"value2\"\n    range-separator=\"To\"\n    start-placeholder=\"Horaire de début\"\n    end-placeholder=\"Horaire de fin\">\n  </el-time-picker>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],\n        value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Attributs\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| value / v-model | La valeur liée. | date(TimePicker) / string(TimeSelect) | - | - |\n| readonly | Si TimePicker est en lecture seule. | boolean | — | false |\n| disabled | Si TimePicker est désactivé. | boolean | — | false |\n| editable | Si le champ d'input est éditable. | boolean | — | true |\n| clearable | Si un bouton d'effacement doit être affiché. | boolean | — | true |\n| size | Taille du champ. | string | medium / small / mini | — |\n| placeholder | Placeholder en mode non-intervalle. | string | — | — |\n| start-placeholder | Placeholder de l'horaire de début en mode intervalle. | string | — | — |\n| end-placeholder | Placeholder de l'horaire de fin en mode intervalle. | string | — | — |\n| is-range | Si le mode intervalle est activé, marche avec `<el-time-picker>`. | boolean | — | false |\n| arrow-control | Si les flèches directionnelles peuvent être utilisées, marche avec `<el-time-picker>`. | boolean | — | false |\n| align | Alignement. | left / center / right | left |\n| popper-class | Classe du menu du TimePicker. | string | — | — |\n| picker-options | Options additionnelles, voir la table ci-dessous. | object | — | {} |\n| range-separator | Séparateur d'intervalle. | string | - | '-' |\n| default-value | Optionnel, date d'aujourd'hui par défaut. | `Date` pour le TimePicker, `string` pour le TimeSelect | Toute valeur acceptée par `new Date()` pour le TimePicker, une valeur sélectionnable pour TimeSelect. | — |\n| value-format | Optionnel, uniquement pour TimePicker, format de la valeur. Si non spécifié, la valeur sera un objet `Date`. | string | Voir [date formats](#/en-US/component/date-picker#date-formats) | — |\n| name | Attribut `name` natif de l'input. | string | — | — |\n| prefix-icon | Classe de l'icône de préfixe. | string | — | el-icon-time |\n| clear-icon | Classe de l'icône d'effacement. | string | — | el-icon-circle-close |\n\n### Options de TimeSelect\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| start | Horaire de début. | string | — | 09:00 |\n| end | Horaire de fin. | string | — | 18:00 |\n| step | Intervalle entre les horaires. | string | — | 00:30 |\n| minTime | Horaire minimum, n'importe quel horaire avant celui-ci sera désactivé. | string | — | 00:00 |\n| maxTime | Horaire maximum, n'importe quel horaire après celui-ci sera désactivé. | string | — | — |\n\n### Options de TimePicker\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| selectableRange | Intervalle de temps disponible, e.g.`'18:30:00 - 20:30:00'` ou ` ['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string / array | — | — |\n| format | Format du sélecteur. | string | hour `HH`, minute `mm`, second `ss`, AM/PM `A` | HH:mm:ss |\n\n### Évènements\n\n| Nom | Description | Paramètres |\n|---------|--------|---------|\n| change | Se déclenche quand l'utilisateur confirme la valeur. | La valeur confirmée. |\n| blur | Se déclenche quand le composant perd le focus. | L'instance du composant. |\n| focus | Se déclenche quand le composant a le focus. | L'instance du composant. |\n\n### Méthodes\n\n| Méthode | Description | Paramètres |\n| ---- | ---- | ---- |\n| focus | Met le focus sur le composant. | - |\n"
  },
  {
    "path": "examples/docs/fr-FR/timeline.md",
    "content": "## Timeline\n\nAffiche une suite d'évènements dans un ordre chronologique.\n\n### Usage\n\nLa timeline peut être divisée en plusieurs activités en ordre ascendant ou descendant. Les timestamps sont des caractéristiques importantes qui les distinguent des autres composants. Notez la différence avec Steps.\n\n:::demo\n```html\n<div class=\"block\">\n  <div class=\"radio\">\n    Order:\n    <el-radio-group v-model=\"reverse\">\n      <el-radio :label=\"true\">Descendant</el-radio>\n      <el-radio :label=\"false\">Ascendant</el-radio>\n    </el-radio-group>\n  </div>\n\n  <el-timeline :reverse=\"reverse\">\n    <el-timeline-item\n      v-for=\"(activity, index) in activities\"\n      :key=\"index\"\n      :timestamp=\"activity.timestamp\">\n      {{activity.content}}\n    </el-timeline-item>\n  </el-timeline>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        reverse: true,\n        activities: [{\n          content: 'Début de l\\'évènement',\n          timestamp: '2018-04-15'\n        }, {\n          content: 'Approuvé',\n          timestamp: '2018-04-13'\n        }, {\n          content: 'Succès',\n          timestamp: '2018-04-11'\n        }]\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Noeud personnalisé\n\nVous pouvez personnaliser la taille, la couleur et les icônes de chaque Noeud.\n\n:::demo\n```html\n<div class=\"block\">\n  <el-timeline>\n    <el-timeline-item\n      v-for=\"(activity, index) in activities\"\n      :key=\"index\"\n      :icon=\"activity.icon\"\n      :type=\"activity.type\"\n      :color=\"activity.color\"\n      :size=\"activity.size\"\n      :timestamp=\"activity.timestamp\">\n      {{activity.content}}\n    </el-timeline-item>\n  </el-timeline>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        activities: [{\n          content: 'Icône',\n          timestamp: '2018-04-12 20:46',\n          size: 'large',\n          type: 'primary',\n          icon: 'el-icon-more'\n        }, {\n          content: 'Couleur',\n          timestamp: '2018-04-03 20:46',\n          color: '#0bbd87'\n        }, {\n          content: 'Taille',\n          timestamp: '2018-04-03 20:46',\n          size: 'large'\n        }, {\n          content: 'Défaut',\n          timestamp: '2018-04-03 20:46'\n        }]\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Timestamp personnalisé\n\nLe timestamp peut être placé au-dessus du contenu lorsque celui-ci est trop haut.\n\n:::demo\n```html\n<div class=\"block\">\n  <el-timeline>\n    <el-timeline-item timestamp=\"2018/4/12\" placement=\"top\">\n      <el-card>\n        <h4>Mise à jour du template GitHub</h4>\n        <p>Commit de Tom le 2018/4/12 20:46</p>\n      </el-card>\n    </el-timeline-item>\n    <el-timeline-item timestamp=\"2018/4/3\" placement=\"top\">\n      <el-card>\n        <h4>Mise à jour du template GitHub</h4>\n        <p>Commit de Tom le 2018/4/3 20:46</p>\n      </el-card>\n    </el-timeline-item>\n    <el-timeline-item timestamp=\"2018/4/2\" placement=\"top\">\n      <el-card>\n        <h4>Mise à jour du template GitHub</h4>\n        <p>Commit de Tom le 2018/4/2 20:46</p>\n      </el-card>\n    </el-timeline-item>\n  </el-timeline>\n</div>\n```\n:::\n\n### Attributs de Timeline\n\n| Attribut      | Description    | Type      | Valeurs acceptées | Défaut   |\n|---------- |-------- |---------- |-------------  |-------- |\n| reverse | Si l'ordre chronologique est ascendant ou descendant, le défaut étant ascendant. | boolean | — | false |\n\n### Attribut de Timeline-item\n\n| Attribut      | Description    | Type      | Valeurs acceptées | Défaut   |\n|---------- |-------- |---------- |-------------  |-------- |\n| timestamp     | Le contenu du timestamp. | string  | - | — |\n| hide-timestamp  | Si le timestamp doit être affiché. | boolean | — | false |\n| placement | La position du timestamp. | string | top / bottom | bottom |\n| type | Le type de noeud. | string | primary / success / warning / danger / info | - |\n| color | La couleur de fond du noeud. | string | hsl / hsv / hex / rgb | - |\n| size | La taille du noeud | string | normal / large | normal |\n| icon | Le nom de classe de l'icône. | string | — | - |\n\n### Slots de Timeline-Item\n\n| Nom | Description |\n|------|--------|\n| — | Contenu personnalisé pour le timeline-item. |\n| dot | Noeud personnalisé. |\n"
  },
  {
    "path": "examples/docs/fr-FR/tooltip.md",
    "content": "## Tooltip\n\nPermet d'afficher des informations au passage de la souris sur un élément.\n\n### Usage\n\nTooltip a 9 emplacements.\n\n:::demo L'attribut `content` détermine le contenu à afficher. L'attribut `placement` détermine la position du tooltip. Sa valeur est sous la forme `[orientation]-[alignment]` avec quatre orientations `top`, `left`, `right`, `bottom` et trois alignements `start`, `end`, `null`, le défaut étant `null`. Par exemple, `placement=\"left-end\"` affichera la tooltip sur la gauche de l'élément et le bas de la tooltip sera aligné avec le bas de l'élément.\n```html\n<div class=\"box\">\n  <div class=\"top\">\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Top Left prompts info\" placement=\"top-start\">\n      <el-button>top-start</el-button>\n    </el-tooltip>\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Top Center prompts info\" placement=\"top\">\n      <el-button>top</el-button>\n    </el-tooltip>\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Top Right prompts info\" placement=\"top-end\">\n      <el-button>top-end</el-button>\n    </el-tooltip>\n  </div>\n  <div class=\"left\">\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Left Top prompts info\" placement=\"left-start\">\n      <el-button>left-start</el-button>\n    </el-tooltip>\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Left Center prompts info\" placement=\"left\">\n      <el-button>left</el-button>\n    </el-tooltip>\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Left Bottom prompts info\" placement=\"left-end\">\n      <el-button>left-end</el-button>\n    </el-tooltip>\n  </div>\n\n  <div class=\"right\">\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Right Top prompts info\" placement=\"right-start\">\n      <el-button>right-start</el-button>\n    </el-tooltip>\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Right Center prompts info\" placement=\"right\">\n      <el-button>right</el-button>\n    </el-tooltip>\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Right Bottom prompts info\" placement=\"right-end\">\n      <el-button>right-end</el-button>\n    </el-tooltip>\n  </div>\n  <div class=\"bottom\">\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Bottom Left prompts info\" placement=\"bottom-start\">\n      <el-button>bottom-start</el-button>\n    </el-tooltip>\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Bottom Center prompts info\" placement=\"bottom\">\n      <el-button>bottom</el-button>\n    </el-tooltip>\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Bottom Right prompts info\" placement=\"bottom-end\">\n      <el-button>bottom-end</el-button>\n    </el-tooltip>\n  </div>\n</div>\n\n<style>\n  .box {\n    width: 400px;\n\n    .top {\n      text-align: center;\n    }\n\n    .left {\n      float: left;\n      width: 110px;\n    }\n\n    .right {\n      float: right;\n      width: 110px;\n    }\n\n    .bottom {\n      clear: both;\n      text-align: center;\n    }\n\n    .item {\n      margin: 4px;\n    }\n\n    .left .el-tooltip__popper,\n    .right .el-tooltip__popper {\n      padding: 8px 10px;\n    }\n\n    .el-button {\n      width: 110px;\n    }\n  }\n</style>\n```\n:::\n\n\n### Thèmes\n\nTooltip a deux thèmes: `dark` et `light`。\n\n:::demo Utilisez `effect` pour modifier le thème, le défaut étant `dark`.\n```html\n<el-tooltip content=\"Top center\" placement=\"top\">\n  <el-button>Dark</el-button>\n</el-tooltip>\n<el-tooltip content=\"Bottom center\" placement=\"bottom\" effect=\"light\">\n  <el-button>Light</el-button>\n</el-tooltip>\n```\n:::\n\n### Plus de contenu\n\nVous pouvez afficher plus de lignes et formater leur contenu.\n\n:::demo Utiliser un slot nommé `content` au lieu de l'attribut.\n```html\n<el-tooltip placement=\"top\">\n  <div slot=\"content\">Multiples lignes<br/>Seconde ligne</div>\n  <el-button>Top center</el-button>\n</el-tooltip>\n```\n:::\n\n### Usage avancé\n\nVous pouvez utiliser d'autres attributs pour un usage plus poussé:\n\n`transition` permet de définir l'animation d'apparition et de disparition du tooltip, le défaut étant el-fade-in-linear.\n\n`disabled` permet de désactiver le tooltip. Mettez-le simplement à `true`.\n\nEn réalité, Tooltip est une extension de [Vue-popper](https://github.com/element-component/vue-popper), vous pouvez donc utiliser n'importe quel attribut de Vue-popper.\n\n:::demo\n```html\n<template>\n  <el-tooltip :disabled=\"disabled\" content=\"Cliquez pour désactiver le tooltip\" placement=\"bottom\" effect=\"light\">\n    <el-button @click=\"disabled = !disabled\">Cliquez pour {{disabled ? 'activer' : 'désactiver'}} le tooltip</el-button>\n  </el-tooltip>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        disabled: false\n      };\n    }\n  };\n</script>\n\n<style>\n  .slide-fade-enter-active {\n    transition: all .3s ease;\n  }\n  .slide-fade-leave-active {\n    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);\n  }\n  .slide-fade-enter, .expand-fade-leave-active {\n    margin-left: 20px;\n    opacity: 0;\n  }\n</style>\n```\n:::\n\n\n:::tip\nLe composant `router-link` n'est pas supporté par tooltip, utilisez plutôt `vm.$router.push`.\n\nLes éléments de formulaire désactivés ne sont pas supportés par Tooltip, plus d'informations sur [MDN](https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter). Vous aurez besoin de mettre ces éléments dans un conteneur pour que cela fonctionne.\n:::\n\n\n### Attributs\n\n| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |\n|----------------|---------|-----------|-------------|--------|\n| effect | Thème du Tooltip.  | string   | dark/light  | dark  |\n| content | Contenu à afficher, écrasé par `slot#content`. | String   | — | — |\n| placement | Position du Tooltip. | string |  top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end |  bottom |\n| value / v-model | Visibilité du Tooltip. | boolean | — |  false |\n| disabled | Si le Tooltip est désactivé. | boolean | — |  false |\n| offset | Décalage du Tooltip. | number | — |  0 |\n| transition | Animation de transition. | string | — | el-fade-in-linear |\n| visible-arrow | Si une flèche doit être affichée. Pour plus d'information, voir [Vue-popper](https://github.com/element-component/vue-popper). | boolean | — | true |\n| popper-options | Paramètres [popper.js](https://popper.js.org/docs/v2/). | Object | Se référer à  [popper.js](https://popper.js.org/docs/v2/). | `{ boundariesElement: 'body', gpuAcceleration: false }` |\n| open-delay | Délai avant l'apparition en millisecondes. | number | — | 0 |\n| manual | Si le contrôle du Tooltip doit être manuel. `mouseenter` et `mouseleave` n'auront pas d'effet si `true`. | boolean | — | false |\n| popper-class | Classe du popper de Tooltip. | string | — | — |\n| enterable | Si la souris peut entrer dans la Tooltip. | Boolean | — | true |\n| hide-after | Délai avant disparition. | number | — | 0 |\n| tabindex   | [tabindex](https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/tabindex) de Tooltip. | number | — | 0 |\n"
  },
  {
    "path": "examples/docs/fr-FR/transfer.md",
    "content": "## Transfer\n\nPermet de transférer des options d'une liste à une autre de manière ergonomique.\n\n### Usage\n:::demo Les données sont passée via l'attribut `data`. Ce doit être un tableau d'objets, chaque objet ayant les propriétés suivantes: `key` étant l'identifiant de l'objet, `label` étant le texte à afficher et `disabled` indiquant si l'objet est désactivé. Ces objets sont synchronisés avec `v-model`, sa valeur étant un tableau d'identifiants des objets. Si vous ne souhaitez pas avoir une liste vide par défaut, vous pouvez donc initialiser `v-model` avec un tableau.\n```html\n<template>\n  <el-transfer\n    v-model=\"value\"\n    :data=\"data\">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value: [1, 4]\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Filtrable\n\nVous pouvez filtrer les options.\n\n:::demo Ajoutez l'attribut `filterable` activer le filtrage. Par défaut, si la propriété `label` de l'objet contient le mot-clé, il sera inclus dans les résultats. Vous pouvez aussi implémenter votre propre filtre grâce à `filter-method`. Cette fonction est lancée à chaque changement de mot-clé. Si elle retourne `true` l'objet en question sera dans les résultats.\n```html\n<template>\n  <el-transfer\n    filterable\n    :filter-method=\"filterMethod\"\n    filter-placeholder=\"State Abbreviations\"\n    v-model=\"value\"\n    :data=\"data\">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];\n        const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];\n        states.forEach((city, index) => {\n          data.push({\n            label: city,\n            key: index,\n            initial: initials[index]\n          });\n        });\n        return data;\n      };\n      return {\n        data: generateData(),\n        value: [],\n        filterMethod(query, item) {\n          return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;\n        }\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Personnalisable\n\nVous pouvez personnaliser les titres, les textes des boutons, les fonctions de rendu pour les objets et le contenu du footer.\n\n:::demo Utilisez `titles`, `button-texts`, `render-content` et `format` pour personnaliser respectivement les titres des listes, les textes des boutons, les fonctions de rendus des objets et le texte des statuts du header. Vous pouvez aussi utiliser des slots pour les objets. Pour le contenu du footer, deux slots sont fournis: `left-footer` et `right-footer`. Si vous souhaitez que certains items soient sélectionnés par défaut, utilisez `left-default-checked` et `right-default-checked`. Enfin, cet exemple utilise aussi l'évènement `change`. Notez que cet exemple ne fonctionne pas dans jsfiddle car il ne supporte pas JSX. Dans un vrai projet, `render-content` fonctionnera si les dépendances sont satisfaites.\n```html\n<template>\n  <p style=\"text-align: center; margin: 0 0 20px\">Utilise render-content</p>\n  <div style=\"text-align: center\">\n    <el-transfer\n      style=\"text-align: left; display: inline-block\"\n      v-model=\"value\"\n      filterable\n      :left-default-checked=\"[2, 3]\"\n      :right-default-checked=\"[1]\"\n      :render-content=\"renderFunc\"\n      :titles=\"['Source', 'Target']\"\n      :button-texts=\"['To left', 'To right']\"\n      :format=\"{\n        noChecked: '${total}',\n        hasChecked: '${checked}/${total}'\n      }\"\n      @change=\"handleChange\"\n      :data=\"data\">\n      <el-button class=\"transfer-footer\" slot=\"left-footer\" size=\"small\">Opération</el-button>\n      <el-button class=\"transfer-footer\" slot=\"right-footer\" size=\"small\">Opération</el-button>\n    </el-transfer>\n    <p style=\"text-align: center; margin: 50px 0 20px\">Utilise des slots</p>\n    <div style=\"text-align: center\">\n      <el-transfer\n        style=\"text-align: left; display: inline-block\"\n        v-model=\"value4\"\n        filterable\n        :left-default-checked=\"[2, 3]\"\n        :right-default-checked=\"[1]\"\n        :titles=\"['Source', 'Target']\"\n        :button-texts=\"['To left', 'To right']\"\n        :format=\"{\n          noChecked: '${total}',\n          hasChecked: '${checked}/${total}'\n        }\"\n        @change=\"handleChange\"\n        :data=\"data\">\n        <span slot-scope=\"{ option }\">{{ option.key }} - {{ option.label }}</span>\n        <el-button class=\"transfer-footer\" slot=\"left-footer\" size=\"small\">Opération</el-button>\n        <el-button class=\"transfer-footer\" slot=\"right-footer\" size=\"small\">Opération</el-button>\n      </el-transfer>\n    </div>\n  </div>\n</template>\n\n<style>\n  .transfer-footer {\n    margin-left: 20px;\n    padding: 6px 5px;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value: [1],\n        value4: [1],\n        renderFunc(h, option) {\n          return <span>{ option.key } - { option.label }</span>;\n        }\n      };\n    },\n\n    methods: {\n      handleChange(value, direction, movedKeys) {\n        console.log(value, direction, movedKeys);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Alias des propriétés\n\nPar défaut, Transfer utilise `key`, `label` et `disabled` de vos objets. Si vos objets ont des propriétés différentes, vous pouvez utiliser l'attribut `props` pour définir des alias.\n\n:::demo Les objets de cet exemple n'ont pas de `key` ni `label`, à la place ils ont `value` et `desc`. Vous devez donc configurer les alias de `key` et `label`.\n```html\n<template>\n  <el-transfer\n    v-model=\"value\"\n    :props=\"{\n      key: 'value',\n      label: 'desc'\n    }\"\n    :data=\"data\">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            value: i,\n            desc: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value: []\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Attributs\n\n| Attribut | Description | Type  | Valeurs acceptées | Défaut |\n|---------- |-------- |---------- |-------------  |-------- |\n| value / v-model | La valeur liée. | array | — | — |\n| data | Données principales. | array[{ key, label, disabled }] | — | [ ] |\n| filterable | Si Transfer est filtrable. | boolean | — | false |\n| filter-placeholder | Placeholder du champ de filtrage. | string | — | Enter keyword |\n| filter-method | Méthode de filtrage. | function | — | — |\n| target-order | Ordre de tri des éléments de la liste d'arrivée. S'il est à `original`, les éléments garderont le même ordre que la liste d'origine. Si à `push`, les nouveaux éléments seront mis à la suite des anciens. Si mis à `unshift`, les nouveaux éléments seront mis en haut de la liste. | string | original / push / unshift | original |\n| titles | Titres des listes. | array | — | ['List 1', 'List 2'] |\n| button-texts | Textes des boutons. | array | — | [ ] |\n| render-content | Fonction de rendu pour les objets. | function(h, option) | — | — |\n| format | Textes de statut dans le header. | object{noChecked, hasChecked} | — | { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' } |\n| props | Alias des propriétés des objets source. | object{key, label, disabled} | — | — |\n| left-default-checked | Tableau des objets initialement sélectionnés dans la liste de gauche.  | array | — | [ ] |\n| right-default-checked | Tableau des objets initialement sélectionnés dans la liste de droite. | array | — | [ ] |\n\n### Slot\n\n| Nom | Description |\n|------|--------|\n| left-footer | Contenu du footer de la liste de gauche. |\n| right-footer | Contenu du footer de la liste de droite. |\n\n### Slot avec portée\n\n| Nom | Description |\n|------|--------|\n| — | Contenu personnalisé pour les objets. Le paramètre est { option }. |\n\n### Méthodes\n\n| Méthode | Description | Paramètres |\n| ---- | ---- | ---- |\n| clearQuery | Efface le filtre d'une liste. | 'left' / 'right' |\n\n### Events\n\n| Event nom | Description | Paramètres |\n|---------- |-------- |---------- |\n| change | Se déclenche quand un objet change dans la liste de droite. | Tableau des objets de la liste de droite, direction du transfer (`left` ou `right`), les clés des objets bougés. |\n| left-check-change | Se déclenche quand l'utilisateur change le statut d'un objet dans la liste de gauche. | Liste des objets actuellement sélectionnées, Liste des objets dont le statut a changé. |\n| right-check-change | Se déclenche quand l'utilisateur change le statut d'un objet dans la liste de droite. | Liste des objets actuellement sélectionnées, Liste des objets dont le statut a changé. |\n"
  },
  {
    "path": "examples/docs/fr-FR/transition.md",
    "content": "## Transitions\n\nVous pouvez utiliser les transitions d'Element directement. Mais avant ça, merci de lire la [documentation](https://v2.vuejs.org/v2/api/#transition).\n\n### Fade\n\n:::demo Il y a deux effets de fading: `el-fade-in-linear` et `el-fade-in`.\n```html\n<template>\n  <div>\n    <el-button @click=\"show = !show\">Cliquez ici</el-button>\n\n    <div style=\"display: flex; margin-top: 20px; height: 100px;\">\n      <transition name=\"el-fade-in-linear\">\n        <div v-show=\"show\" class=\"transition-box\">.el-fade-in-linear</div>\n      </transition>\n      <transition name=\"el-fade-in\">\n        <div v-show=\"show\" class=\"transition-box\">.el-fade-in</div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show: true\n    })\n  }\n</script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n```\n:::\n\n### Zoom\n\n:::demo `el-zoom-in-center`, `el-zoom-in-top` et `el-zoom-in-bottom` sont fournis.\n```html\n<template>\n  <div>\n    <el-button @click=\"show2 = !show2\">Cliquez ici</el-button>\n\n    <div style=\"display: flex; margin-top: 20px; height: 100px;\">\n      <transition name=\"el-zoom-in-center\">\n        <div v-show=\"show2\" class=\"transition-box\">.el-zoom-in-center</div>\n      </transition>\n\n      <transition name=\"el-zoom-in-top\">\n        <div v-show=\"show2\" class=\"transition-box\">.el-zoom-in-top</div>\n      </transition>\n\n      <transition name=\"el-zoom-in-bottom\">\n        <div v-show=\"show2\" class=\"transition-box\">.el-zoom-in-bottom</div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show2: true\n    })\n  }\n</script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n```\n:::\n\n\n### Collapse\n\nPour l'effet collapse, utilisez le composant `el-collapse-transition`.\n\n:::demo\n```html\n<template>\n  <div>\n    <el-button @click=\"show3 = !show3\">Cliquez ici</el-button>\n\n    <div style=\"margin-top: 20px; height: 200px;\">\n      <el-collapse-transition>\n        <div v-show=\"show3\">\n          <div class=\"transition-box\">el-collapse-transition</div>\n          <div class=\"transition-box\">el-collapse-transition</div>\n        </div>\n      </el-collapse-transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show3: true\n    })\n  }\n</script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n```\n:::\n\n### À la demande\n\n```js\n// fade/zoom\nimport 'element-ui/lib/theme-chalk/base.css';\n// collapse\nimport CollapseTransition from 'element-ui/lib/transitions/collapse-transition';\nimport Vue from 'vue'\n\nVue.component(CollapseTransition.name, CollapseTransition)\n```\n"
  },
  {
    "path": "examples/docs/fr-FR/tree.md",
    "content": "## Tree\n\nAffiche un ensemble de données possédant plusieurs niveaux de hiérarchie ou d'imbrication.\n\n### Usage\n\nVoici la structure basique.\n\n:::demo\n```html\n<el-tree :data=\"data\" :props=\"defaultProps\" @node-click=\"handleNodeClick\"></el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: 'Niveau un 1',\n          children: [{\n            label: 'Niveau deux 1-1',\n            children: [{\n              label: 'Niveau trois 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Niveau un 2',\n          children: [{\n            label: 'Niveau deux 2-1',\n            children: [{\n              label: 'Niveau trois 2-1-1'\n            }]\n          }, {\n            label: 'Niveau deux 2-2',\n            children: [{\n              label: 'Niveau trois 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Niveau un 3',\n          children: [{\n            label: 'Niveau deux 3-1',\n            children: [{\n              label: 'Niveau trois 3-1-1'\n            }]\n          }, {\n            label: 'Niveau deux 3-2',\n            children: [{\n              label: 'Niveau trois 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Sélection\n\nVous pouvez activer la sélection des noeuds.\n\n:::demo cet exemple montre également comment charger des données de manière asynchrone.\n```html\n<el-tree\n  :props=\"props\"\n  :load=\"loadNode\"\n  lazy\n  show-checkbox\n  @check-change=\"handleCheckChange\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        props: {\n          label: 'name',\n          children: 'zones'\n        },\n        count: 1\n      };\n    },\n    methods: {\n      handleCheckChange(data, checked, indeterminate) {\n        console.log(data, checked, indeterminate);\n      },\n      handleNodeClick(data) {\n        console.log(data);\n      },\n      loadNode(node, resolve) {\n        if (node.level === 0) {\n          return resolve([{ name: 'Root1' }, { name: 'Root2' }]);\n        }\n        if (node.level > 3) return resolve([]);\n\n        var hasChild;\n        if (node.data.name === 'region1') {\n          hasChild = true;\n        } else if (node.data.name === 'region2') {\n          hasChild = false;\n        } else {\n          hasChild = Math.random() > 0.5;\n        }\n\n        setTimeout(() => {\n          var data;\n          if (hasChild) {\n            data = [{\n              name: 'zone' + this.count++\n            }, {\n              name: 'zone' + this.count++\n            }];\n          } else {\n            data = [];\n          }\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Noeud-feuille personnalisés en mode lazy\n\n:::demo Les données d'un noeud ne sont pas accessibles tant que la noeud n'est pas cliqué, l'arbre ne peut donc pas prédire si un noeud sera une feuille. C'est pourquoi un bouton de menu est ajouté à chaque noeud, et si c'est une feuille il disparaîtra après le clic. Vous pouvez également dire par avance à l'arbre si un noeud est une feuille, pour éviter l'apparition du bouton de menu.\n```html\n<el-tree\n  :props=\"props\"\n  :load=\"loadNode\"\n  lazy\n  show-checkbox>\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        props: {\n          label: 'name',\n          children: 'zones',\n          isLeaf: 'leaf'\n        },\n      };\n    },\n    methods: {\n      loadNode(node, resolve) {\n        if (node.level === 0) {\n          return resolve([{ name: 'region' }]);\n        }\n        if (node.level > 1) return resolve([]);\n\n        setTimeout(() => {\n          const data = [{\n            name: 'leaf',\n            leaf: true\n          }, {\n            name: 'zone'\n          }];\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Checkbox désactivées\n\nLes checkbox des noeuds peuvent être désactivées individuellement.\n\n:::demo Dans cet exemple, la propriété `disabled` est ajoutée à `defaultProps`, et certains noeuds ont `disabled:true`. Les checkbox correspondantes sont donc désactivées.\n```html\n<el-tree\n  :data=\"data\"\n  :props=\"defaultProps\"\n  show-checkbox\n  @check-change=\"handleCheckChange\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          id: 1,\n          label: 'Niveau un 1',\n          children: [{\n            id: 3,\n            label: 'Niveau deux 2-1',\n            children: [{\n              id: 4,\n              label: 'Niveau trois 3-1-1'\n            }, {\n              id: 5,\n              label: 'Niveau trois 3-1-2',\n              disabled: true\n            }]\n          }, {\n            id: 2,\n            label: 'Niveau deux 2-2',\n            disabled: true,\n            children: [{\n              id: 6,\n              label: 'Niveau trois 3-2-1'\n            }, {\n              id: 7,\n              label: 'Niveau trois 3-2-2',\n              disabled: true\n            }]\n          }]\n        }],\n        defaultProps: {\n            children: 'children',\n            label: 'label',\n            disabled: 'disabled',\n        },\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Ouverture et sélection par défaut\n\nCertains noeuds peuvent être ouverts et/ou sélectionnés par défaut.\n\n:::demo Utilisez `default-expanded-keys` et `default-checked-keys` pour réglez respectivement les noeuds ouverts et les noeuds sélectionnés par défaut. Notez que `node-key` est requis dans ce cas. Sa valeurs est le nom d'une clé dans l'objets data, et sa valeur devrait être unique dans tout l'arbre.\n```html\n<el-tree\n  :data=\"data\"\n  show-checkbox\n  node-key=\"id\"\n  :default-expanded-keys=\"[2, 3]\"\n  :default-checked-keys=\"[5]\"\n  :props=\"defaultProps\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          id: 1,\n          label: 'Niveau un 1',\n          children: [{\n            id: 4,\n            label: 'Niveau deux 1-1',\n            children: [{\n              id: 9,\n              label: 'Niveau trois 1-1-1'\n            }, {\n              id: 10,\n              label: 'Niveau trois 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Niveau un 2',\n          children: [{\n            id: 5,\n            label: 'Niveau deux 2-1'\n          }, {\n            id: 6,\n            label: 'Niveau deux 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Niveau un 3',\n          children: [{\n            id: 7,\n            label: 'Niveau deux 3-1'\n          }, {\n            id: 8,\n            label: 'Niveau deux 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Sélectionner des noeuds\n\n:::demo Cet exemple montre comment récupérer et sélectionner des noeuds. Vous pouvez utiliser deux approches: les noeuds ou les clés. Dans le cas des clés, `node-key` est requis.\n```html\n<el-tree\n  :data=\"data\"\n  show-checkbox\n  default-expand-all\n  node-key=\"id\"\n  ref=\"tree\"\n  highlight-current\n  :props=\"defaultProps\">\n</el-tree>\n\n<div class=\"buttons\">\n  <el-button @click=\"getCheckedNodes\">Récupération par noeud</el-button>\n  <el-button @click=\"getCheckedKeys\">Récupération par clé</el-button>\n  <el-button @click=\"setCheckedNodes\">Sélection par noeud</el-button>\n  <el-button @click=\"setCheckedKeys\">Sélection par clé</el-button>\n  <el-button @click=\"resetChecked\">Reset</el-button>\n</div>\n\n<script>\n  export default {\n    methods: {\n      getCheckedNodes() {\n        console.log(this.$refs.tree.getCheckedNodes());\n      },\n      getCheckedKeys() {\n        console.log(this.$refs.tree.getCheckedKeys());\n      },\n      setCheckedNodes() {\n        this.$refs.tree.setCheckedNodes([{\n          id: 5,\n          label: 'Niveau deux 2-1'\n        }, {\n          id: 9,\n          label: 'Niveau trois 1-1-1'\n        }]);\n      },\n      setCheckedKeys() {\n        this.$refs.tree.setCheckedKeys([3]);\n      },\n      resetChecked() {\n        this.$refs.tree.setCheckedKeys([]);\n      }\n    },\n\n    data() {\n      return {\n        data: [{\n          id: 1,\n          label: 'Niveau un 1',\n          children: [{\n            id: 4,\n            label: 'Niveau deux 1-1',\n            children: [{\n              id: 9,\n              label: 'Niveau trois 1-1-1'\n            }, {\n              id: 10,\n              label: 'Niveau trois 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Niveau un 2',\n          children: [{\n            id: 5,\n            label: 'Niveau deux 2-1'\n          }, {\n            id: 6,\n            label: 'Niveau deux 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Niveau un 3',\n          children: [{\n            id: 7,\n            label: 'Niveau deux 3-1'\n          }, {\n            id: 8,\n            label: 'Niveau deux 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Contenu personnalisé\n\nLe contenu des noeuds peut être personnalisé, afin de pouvoir ajouter des icônes ou des boutons par exemple.\n\n:::demo Il existe deux méthodes de personnalisation: `render-content` et les slots avec portée. Utilisez `render-content` pour assigner une fonction de rendu qui va générer le contenu des noeuds. Voire la documentation de Vue pour plus d'informations. Si vous préférez les slots, vous aurez accès à `node` et `data` dans le scope, corerspondant à l'objet TreeNode et aux données du noeud courant. Notez que  la démo de `render-content` ne marche pas dans jsfiddle car il ne supporte pas JSX. Dans un vrai projet, `render-content` marchera si les dépendances sont satisfaites.\n```html\n<div class=\"custom-tree-container\">\n  <div class=\"block\">\n    <p>Avec render-content</p>\n    <el-tree\n      :data=\"data\"\n      show-checkbox\n      node-key=\"id\"\n      default-expand-all\n      :expand-on-click-node=\"false\"\n      :render-content=\"renderContent\">\n    </el-tree>\n  </div>\n  <div class=\"block\">\n    <p>Avec un slot</p>\n    <el-tree\n      :data=\"data\"\n      show-checkbox\n      node-key=\"id\"\n      default-expand-all\n      :expand-on-click-node=\"false\">\n      <span class=\"custom-tree-node\" slot-scope=\"{ node, data }\">\n        <span>{{ node.label }}</span>\n        <span>\n          <el-button\n            type=\"text\"\n            size=\"mini\"\n            @click=\"() => append(data)\">\n            Ajouter\n          </el-button>\n          <el-button\n            type=\"text\"\n            size=\"mini\"\n            @click=\"() => remove(node, data)\">\n            Supprimer\n          </el-button>\n        </span>\n      </span>\n    </el-tree>\n  </div>\n</div>\n\n<script>\n  let id = 1000;\n\n  export default {\n    data() {\n      const data = [{\n        id: 1,\n        label: 'Niveau un 1',\n        children: [{\n          id: 4,\n          label: 'Niveau deux 1-1',\n          children: [{\n            id: 9,\n            label: 'Niveau trois 1-1-1'\n          }, {\n            id: 10,\n            label: 'Niveau trois 1-1-2'\n          }]\n        }]\n      }, {\n        id: 2,\n        label: 'Niveau un 2',\n        children: [{\n          id: 5,\n          label: 'Niveau deux 2-1'\n        }, {\n          id: 6,\n          label: 'Niveau deux 2-2'\n        }]\n      }, {\n        id: 3,\n        label: 'Niveau un 3',\n        children: [{\n          id: 7,\n          label: 'Niveau deux 3-1'\n        }, {\n          id: 8,\n          label: 'Niveau deux 3-2'\n        }]\n      }];\n      return {\n        data: JSON.parse(JSON.stringify(data)),\n        data: JSON.parse(JSON.stringify(data))\n      }\n    },\n\n    methods: {\n      append(data) {\n        const newChild = { id: id++, label: 'testtest', children: [] };\n        if (!data.children) {\n          this.$set(data, 'children', []);\n        }\n        data.children.push(newChild);\n      },\n\n      remove(node, data) {\n        const parent = node.parent;\n        const children = parent.data.children || parent.data;\n        const index = children.findIndex(d => d.id === data.id);\n        children.splice(index, 1);\n      },\n\n      renderContent(h, { node, data, store }) {\n        return (\n          <span class=\"custom-tree-node\">\n            <span>{node.label}</span>\n            <span>\n              <el-button size=\"mini\" type=\"text\" on-click={ () => this.append(data) }>Ajouter</el-button>\n              <el-button size=\"mini\" type=\"text\" on-click={ () => this.remove(node, data) }>Supprimer</el-button>\n            </span>\n          </span>);\n      }\n    }\n  };\n</script>\n\n<style>\n  .custom-tree-node {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    font-size: 14px;\n    padding-right: 8px;\n  }\n</style>\n```\n:::\n\n### Filtrage\n\nLes noeuds peuvent être filtrés par mot-clé.\n\n:::demo Utilisez la méthode `filter` de l'instance de Tree pour pouvoir filtrer les noeuds, son paramètre étant le mot-clé. Notez que pour que cela fonctionne, `filter-node-method` est requis, sa valeur étant la méthode de filtrage.\n```html\n<el-input\n  placeholder=\"Filter keyword\"\n  v-model=\"filterText\">\n</el-input>\n\n<el-tree\n  class=\"filter-tree\"\n  :data=\"data\"\n  :props=\"defaultProps\"\n  default-expand-all\n  :filter-node-method=\"filterNode\"\n  ref=\"tree\">\n</el-tree>\n\n<script>\n  export default {\n    watch: {\n      filterText(val) {\n        this.$refs.tree.filter(val);\n      }\n    },\n\n    methods: {\n      filterNode(value, data) {\n        if (!value) return true;\n        return data.label.indexOf(value) !== -1;\n      }\n    },\n\n    data() {\n      return {\n        filterText: '',\n        data: [{\n          id: 1,\n          label: 'Niveau un 1',\n          children: [{\n            id: 4,\n            label: 'Niveau deux 1-1',\n            children: [{\n              id: 9,\n              label: 'Niveau trois 1-1-1'\n            }, {\n              id: 10,\n              label: 'Niveau trois 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Niveau un 2',\n          children: [{\n            id: 5,\n            label: 'Niveau deux 2-1'\n          }, {\n            id: 6,\n            label: 'Niveau deux 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Niveau un 3',\n          children: [{\n            id: 7,\n            label: 'Niveau deux 3-1'\n          }, {\n            id: 8,\n            label: 'Niveau deux 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Accordéon\n\nVous pouvez utiliser un mode accordéon afin que seul un noeud par niveau soit ouvert.\n\n:::demo\n```html\n<el-tree\n  :data=\"data\"\n  :props=\"defaultProps\"\n  accordion\n  @node-click=\"handleNodeClick\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: 'Niveau un 1',\n          children: [{\n            label: 'Niveau deux 1-1',\n            children: [{\n              label: 'Niveau trois 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Niveau un 2',\n          children: [{\n            label: 'Niveau deux 2-1',\n            children: [{\n              label: 'Niveau trois 2-1-1'\n            }]\n          }, {\n            label: 'Niveau deux 2-2',\n            children: [{\n              label: 'Niveau trois 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Niveau un 3',\n          children: [{\n            label: 'Niveau deux 3-1',\n            children: [{\n              label: 'Niveau trois 3-1-1'\n            }]\n          }, {\n            label: 'Niveau deux 3-2',\n            children: [{\n              label: 'Niveau trois 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Noeuds déplaçables\n\nVous pouvez déplacer les noeuds par drag'n drop en ajoutant l'attribut `draggable`.\n\n:::demo\n```html\n<el-tree\n  :data=\"data\"\n  node-key=\"id\"\n  default-expand-all\n  @node-drag-start=\"handleDragStart\"\n  @node-drag-enter=\"handleDragEnter\"\n  @node-drag-leave=\"handleDragLeave\"\n  @node-drag-over=\"handleDragOver\"\n  @node-drag-end=\"handleDragEnd\"\n  @node-drop=\"handleDrop\"\n  draggable\n  :allow-drop=\"allowDrop\"\n  :allow-drag=\"allowDrag\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: 'Niveau un 1',\n          children: [{\n            label: 'Niveau deux 1-1',\n            children: [{\n              label: 'Niveau trois 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Niveau un 2',\n          children: [{\n            label: 'Niveau deux 2-1',\n            children: [{\n              label: 'Niveau trois 2-1-1'\n            }]\n          }, {\n            label: 'Niveau deux 2-2',\n            children: [{\n              label: 'Niveau trois 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Niveau un 3',\n          children: [{\n            label: 'Niveau deux 3-1',\n            children: [{\n              label: 'Niveau trois 3-1-1'\n            }]\n          }, {\n            label: 'Niveau deux 3-2',\n            children: [{\n              label: 'Niveau trois 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleDragStart(node, ev) {\n        console.log('drag start', node);\n      },\n      handleDragEnter(draggingNode, dropNode, ev) {\n        console.log('tree drag enter: ', dropNode.label);\n      },\n      handleDragLeave(draggingNode, dropNode, ev) {\n        console.log('tree drag leave: ', dropNode.label);\n      },\n      handleDragOver(draggingNode, dropNode, ev) {\n        console.log('tree drag over: ', dropNode.label);\n      },\n      handleDragEnd(draggingNode, dropNode, dropType, ev) {\n        console.log('tree drag end: ', dropNode && dropNode.label, dropType);\n      },\n      handleDrop(draggingNode, dropNode, dropType, ev) {\n        console.log('tree drop: ', dropNode.label, dropType);\n      },\n      allowDrop(draggingNode, dropNode, type) {\n        if (dropNode.data.label === 'Niveau deux 3-1') {\n          return type !== 'inner';\n        } else {\n          return true;\n        }\n      },\n      allowDrag(draggingNode) {\n        return draggingNode.data.label.indexOf('Niveau trois 3-1-1') === -1;\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Attributs\n\n| Attribut             | Description                              | Type                        | Valeurs acceptées | Défaut |\n| --------------------- | ---------------------------------------- | --------------------------- | --------------- | ------- |\n| data                  | Données de l'arbre                       | array                       | —               | —       |\n| empty-text            | Texte à afficher quand il n'y a pas de données.         | string                      | —               | —       |\n| node-key              | Identifiant unique pour chaque noeud, doit être unique dans tout l'arbre. | string                      | —               | —       |\n| props                 | Options de configuration, voir table suivante. | object                      | —               | —       |\n| render-after-expand   | Si les noeuds enfants doivent être générés seulement après la première ouverture du parent. | boolean | — | true |\n| load                  | Méthode pour charger les noeuds enfants, uniquement en mode `lazy`.  | function(node, resolve)     | —               | —       |\n| render-content        | Fonction de rendu pour les noeuds.            | Function(h, { node, data, store }        | —               | —       |\n| highlight-current     | Si le noeud courant est mis en valeur.      | boolean                     | —               | false   |\n| default-expand-all    | Si tous les noeuds sont ouverts par défaut.   | boolean                     | —               | false   |\n| expand-on-click-node  | Si l'ouverture se fait aussi en cliquant sur le noeud. Si `false`, l'ouverture ne se fera qu'en cliquant sur l'icône. | boolean | — | true |\n| check-on-click-node   | Si la sélection se fait aussi en cliquant sur le noeud. Si `false`, la sélection ne se fera qu'en cliquant sur la checkbox. | boolean | — | false |\n| auto-expand-parent    | Si un noeud parent est automatiquement ouvert quand un noeud enfant s'ouvre. | boolean                     | —               | true    |\n| default-expanded-keys | Tableau des clés des noeuds initialement ouverts. | array                       | —               | —       |\n| show-checkbox         | Si un noeud est sélectionnable.           | boolean                     | —               | false   |\n| check-strictly        | Si la sélection d'un noeud affecte celle de son parent quand `show-checkbox` est `true`. | boolean                     | —               | false   |\n| default-checked-keys  | Tableau des clés des noeuds initialement sélectionnés. | array                       | —               | —       |\n| current-node-key      | Clé du noeud initialement sélectionné. | string, number                       | —               | —       |\n| filter-node-method    | Fonction exécutée sur chaque noeud pour le filtrage. Si elle retourne `false`, les noeuds seront cachés. | Function(value, data, node) | —               | —       |\n| accordion             | Si les noeuds fonctionnent en mode accordéon. | boolean                     | —               | false   |\n| indent                | Indentation horizontale des noeuds en px. | number                     | —    | 16 |\n| icon-class            | Icône pour chaque noeud.                                       | string                     | -    | -  |\n| lazy                  | Si les noeuds sont chargés en mode lazy, utilisé avec l'attribut `load`.  | boolean                     | —    | false |\n| draggable             | Si les noeuds sont déplaçables par drag'n drop. | boolean            | —    | false |\n| allow-drag            | Fonction exécutée avant le déplacement d'un noeud. Si `false` est retourné, le noeud ne sera pas déplaçable. | Function(node)  | —  | —  |\n| allow-drop            | Fonction exécutée avant le placement d'un noeud. Si `false` est retourné, le noeud ne pourra être placé sur la zone en question. `type` a trois valeurs possibles: 'prev' (insertion avant le noeud cible), 'inner' (insertion dans le noeud cible) and 'next' (insertion après le noeud cible). | Function(draggingNode, dropNode, type)  | —    | —     |\n\n### props\n\n| Attribut | Description                              | Type   | Valeurs acceptées | Défaut |\n| --------- | ---------------------------------------- | ------ | --------------- | ------- |\n| label     | Détermine quelle clé de l'objet noeud représente le label. | string, function(data, node) | —               | —       |\n| children | Détermine quelle clé de l'objet noeud représente les noeuds enfants. | string | —               | —       |\n| disabled | Détermine quelle clé de l'objet noeud représente la désactivation du noeud. | boolean, function(data, node) | —    | —    |\n| isLeaf | Détermine si le noeud est une feuille, ne marche qu'avec le mode lazy loading. | boolean, function(data, node) | —    | —    |\n\n### Méthodes\n\n`Tree` possède les méthodes suivantes, qui retourne la sélection de noeuds actuelle.\n\n| Méthode          | Description                              | Paramètres                               |\n| --------------- | ---------------------------------------- | ---------------------------------------- |\n| filter          | Filtre les noeuds. | Accepte un paramètre qui sera le premier paramètre de `filter-node-method`. |\n| updateKeyChildren | Ajoute de nouvelles données au noeud, ne marche que lorsque `node-key` est assigné.  | (key, data) Accepte deux paramètres: 1. clé du noeud 2. nouvelles données. |\n| getCheckedNodes | Si le noeud peut-être sélectionné (`show-checkbox` est `true`), il retourne un tableau des noeuds sélectionnés. | (leafOnly, includeHalfChecked) Accepte deux booléen: 1. Défaut à `false`. Si `true`, retourne seulement un tableau des sous-noeuds sélectionnés. 2. Défaut à `false`. Si `true`, retourne la moitié des noeuds sélectionnés. |\n| setCheckedNodes | Détermine quels noeuds sont sélectionnés, ne marche que si `node_key` est assigné. | Un tableau de noeuds qui doivent être sélectionnés.          |\n| getCheckedKeys  | Si le noeud peut être sélectionné (`show-checkbox` est `true`), retourne un tableau de clés des noeuds sélectionnés. | (leafOnly) Booléen, défaut à `false`. Si à `true`, Il retourne seulement un tableau des sous-noeuds sélectionnés. |\n| setCheckedKeys  | Détermine quels noeuds sont sélectionnés, ne marche que si `node_key` est assigné. | (keys, leafOnly) Accepte deux paramètres: 1. un tableau de clés de noeuds à sélectionner 2. un booléen avec pour défaut `false`. Si à `true`, Il retourne seulement un tableau des sous-noeuds sélectionnés. |\n| setChecked      | Détermine si un noeud est sélectionnable, ne marche que si `node_key` est assigné. | (key/data, checked, deep) Accepte trois paramètres: 1. La clé ou les données du noeud 2. un booléen indiquant si sélectionné. 3. un booléen indiquant si profond. |\n| getHalfCheckedNodes | Si le noeud peut être sélectionné (`show-checkbox` est `true`), retourne la moitié des noeuds sélectionnés. | - |\n| getHalfCheckedKeys | Si le noeud peut être sélectionné (`show-checkbox` est `true`), retourne les clés de la moitié des noeuds sélectionnés. | - |\n| getCurrentKey   | retourne la clé du noeud actuellement en valeur (`null` si aucun noeud n'est en valeur). | — |\n| getCurrentNode  | retourne les données du noeud actuellement en valeur (`null` si aucun noeud n'est en valeur). | — |\n| setCurrentKey   | Met un noeud en valeur par sa clé, ne marche que si `node_key` est assigné. | (key) la clé du noeud. Si `null`, annule la sélection actuelle. |\n| setCurrentNode  | Met un noeud en valeur, ne marche que si `node_key` est assigné. | (node) le noeud. |\n| getNode         | Retourne le noeud grâce à sa clé ou ses données. | (data) la clé ou les données du noeud. |\n| remove          | Supprime un noeud, ne marche que si node-key est assigné. | (data) le noeud ou ses données à supprimer. |\n| append          | Ajoute un noeud à un autre noeud. | (data, parentNode) 1. les données du noeud à ajouter 2. les données du parent, clé ou données. |\n| insertBefore    | Insère un noeud avant un autre noeud. | (data, refNode) 1. Les données du noeud à insérer 2. Clé ou noeud de référence. |\n| insertAfter     | Insère un noeud après un autre noeud. | (data, refNode) 1. Les données du noeud à insérer 2. Clé ou noeud de référence. |\n\n### Évènements\n\n| Nom     | Description                              | Paramètres                               |\n| -------------- | ---------------------------------------- | ---------------------------------------- |\n| node-click     | Se déclenche quand est cliqué.          | Le noeud cliqué, la propriété `node` de TreeNode, TreeNode lui-même. |\n| node-contextmenu     | Se déclenche quand un noeud reçoit un clic droit.          | L'évènement, le noeud cliqué, la propriété `node` de TreeNode, TreeNode lui-même. |\n| check-change   | Se déclenche quand quand la sélection d'un noeud change. | Le noeud modifié, si le noeud est sélectionné, si des enfants sont sélectionnés. |\n| check   | Se déclenche après un clic sur le checkbox. | Le noeud modifié, l'objet statut de l'arbre avec quatre propriétés: checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys. |\n| current-change | Se déclenche quand le noeud courant changes.       | Le noeud courant, la propriété `node` de TreeNode |\n| node-expand    | Se déclenche quand le noeud courant s'ouvre.          | Le noeud ouvert, la propriété `node` de TreeNode, TreeNode lui-même. |\n| node-collapse  | Se déclenche quand le noeud courant se ferme.         | Le noeud fermé, la propriété `node` de TreeNode, TreeNode lui-même. |\n| node-drag-start | Se déclenche quand le déplacement commence.  | Le noeud déplacé, l'évènement. |\n| node-drag-enter | Se déclenche quand le noeud déplacé entre dans un autre noeud.  | Le noeud déplacé, l'autre noeud, l'évènement. |\n| node-drag-leave | Se déclenche quand le noeud déplacé quitte un autre noeud. | Le noeud déplacé, l'autre noeud, l'évènement.  |\n| node-drag-over | Se déclenche quand le noeud passe au-dessus d'un autre noeud (comme l'évènement mouseover). | Le noeud déplacé, l'autre noeud, l'évènement.  |\n| node-drag-end  | Se déclenche quand le déplacement se termine.  | Le noeud déplacé, le noeud d'arrivée (peut-être `undefined`), le type de placement (before / after / inner), l'évènement. |\n| node-drop  | Se déclenche après que le noeud déplacé soit placé. | Le noeud déplacé, le noeud d'arrivée, le type de placement (before / after / inner), l'évènement. |\n\n### Slot avec portée\n\n| Nom | Description |\n|------|--------|\n| — | Le contenu personnalisé des noeuds. les paramètres sont { node, data }. |\n"
  },
  {
    "path": "examples/docs/fr-FR/typography.md",
    "content": "<script>\n  import bus from '../../bus';\n  import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';\n  const varMap = [\n    '$--font-size-extra-large',\n    '$--font-size-large',\n    '$--font-size-medium',\n    '$--font-size-base',\n    '$--font-size-small',\n    '$--font-size-extra-small'\n  ];\n  const original = {\n    'font_size_extra_large': '20px',\n    'font_size_large': '18px',\n    'font_size_medium': '16px',\n    'font_size_base': '14px',\n    'font_size_small': '13px',\n    'font_size_extra_small': '12px'\n  }\n  export default {\n    created() {\n      bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);\n    },\n    mounted() {\n      this.setGlobal();\n    },\n    methods: {\n      tintColor(color, tint) {\n        return tintColor(color, tint);\n      },\n      setGlobal() {\n        if (window.userThemeConfig) {\n          this.global = window.userThemeConfig.global;\n        }\n      }\n    },\n    data() {\n      return {\n        global: {},\n        'font_size_extra_large': '',\n        'font_size_large': '',\n        'font_size_medium': '',\n        'font_size_base': '',\n        'font_size_small': '',\n        'font_size_extra_small': ''\n      }\n    },\n    watch: {\n      global: {\n        immediate: true,\n        handler(value) {\n          varMap.forEach((v) => {\n            const key = v.replace('$--', '').replace(/-/g, '_')\n            if (value[v]) {\n              this[key] = value[v]\n            } else {\n              this[key] = original[key]\n            }\n          });\n        }\n      }\n    },\n  }\n</script>\n\n## Typographie\n\nNous avons créé une convention de police d'écriture afin d'assurer la meilleur présentation possible sur toutes le plateformes.\n\n### Police\n\n<div class=\"demo-term-box\">\n<img src=\"../../assets/images/term-pingfang.png\" alt=\"\">\n<img src=\"../../assets/images/term-hiragino.png\" alt=\"\">\n<img src=\"../../assets/images/term-microsoft.png\" alt=\"\">\n<img src=\"../../assets/images/term-sf.png\" alt=\"\">\n<img src=\"../../assets/images/term-helvetica.png\" alt=\"\">\n<img src=\"../../assets/images/term-arial.png\" alt=\"\">\n</div>\n\n### Convention des polices\n\n<table class=\"demo-typo-size\">\n  <tbody>\n  <tr\n    >\n      <td>Level</td>\n      <td>Font Size</td>\n      <td class=\"color-dark-light\">Demo</td>\n    </tr>\n    <tr\n    :style=\"{ fontSize: font_size_extra_small }\"\n    >\n      <td>Supplementary text</td>\n      <td class=\"color-dark-light\">{{font_size_extra_small}} Extra Small</td>\n      <td>Build with Element</td>\n    </tr>\n    <tr\n    :style=\"{ fontSize: font_size_small }\"\n    >\n      <td>Body (small)</td>\n      <td class=\"color-dark-light\">{{font_size_small}} Small</td>\n      <td>Build with Element</td>\n    </tr>\n    <tr\n    :style=\"{ fontSize: font_size_base }\"\n    >\n      <td>Body</td>\n      <td class=\"color-dark-light\">{{font_size_base}} Base</td>\n      <td>Build with Element</td>\n    </tr>\n    <tr\n    :style=\"{ fontSize: font_size_medium }\"\n    >\n      <td >Small Title</td>\n      <td class=\"color-dark-light\">{{font_size_medium}} Medium</td>\n      <td>Build with Element</td>\n    </tr>\n    <tr\n    :style=\"{ fontSize: font_size_large }\"\n    >\n      <td>Title</td>\n      <td class=\"color-dark-light\">{{font_size_large}} large</td>\n      <td>Build with Element</td>\n    </tr>\n    <tr\n    :style=\"{ fontSize: font_size_extra_large }\"\n    >\n      <td>Main Title</td>\n      <td class=\"color-dark-light\">{{font_size_extra_large}} Extra large</td>\n      <td>Build with Element</td>\n    </tr>\n  </tbody>\n</table>\n\n### Font Line Height\n\n<div>\n<img class=\"lineH-left\" src=\"~examples/assets/images/typography.png\" />\n<ul class=\"lineH-right\">\n<li>line-height:1 <span>No line height</span></li>\n<li>line-height:1.3 <span>Compact</span></li>\n<li>line-height:1.5 <span>Regular</span></li>\n<li>line-height:1.7 <span>Loose</span></li>\n</ul>\n</div>\n\n### Font-family\n\n```css\nfont-family: \"Helvetica Neue\",Helvetica,\"PingFang SC\",\"Hiragino Sans GB\",\"Microsoft YaHei\",\"微软雅黑\",Arial,sans-serif;\n```\n"
  },
  {
    "path": "examples/docs/fr-FR/upload.md",
    "content": "## Upload\n\nPermet d'uploader des fichiers en cliquant ou en les déplaçant sur le composant.\n\n### Cliquer pour envoyer\n\n:::demo Personnalisez le bouton d'envoi avec `slot`. Utilisez `limit` et `on-exceed` pour limiter le nombre maximal de fichiers et déterminer le comportement quand ce nombre est dépassé. De plus, vous pouvez annuler la suppression d'un fichier avec `before-remove`.\n```html\n<el-upload\n  class=\"upload-demo\"\n  action=\"https://jsonplaceholder.typicode.com/posts/\"\n  :on-preview=\"handlePreview\"\n  :on-remove=\"handleRemove\"\n  :before-remove=\"beforeRemove\"\n  multiple\n  :limit=\"3\"\n  :on-exceed=\"handleExceed\"\n  :file-list=\"fileList\">\n  <el-button size=\"small\" type=\"primary\">Cliquer pour envoyer</el-button>\n  <div slot=\"tip\" class=\"el-upload__tip\">Fichiers jpg/png avec une taille inférieure à 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      },\n      handleExceed(files, fileList) {\n        this.$message.warning(`La limite est 3, vous avez choisi ${files.length} fichiers, soit ${files.length + fileList.length} au total.`);\n      },\n      beforeRemove(file, fileList) {\n        return this.$confirm(`Supprimer le transfert de ${ file.name } ?`);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Envoi d'avatar utilisateur\n\nUtilisez `before-upload` pour restreindre le format et la taille du fichier à envoyer.\n\n:::demo\n```html\n<el-upload\n  class=\"avatar-uploader\"\n  action=\"https://jsonplaceholder.typicode.com/posts/\"\n  :show-file-list=\"false\"\n  :on-success=\"handleAvatarSuccess\"\n  :before-upload=\"beforeAvatarUpload\">\n  <img v-if=\"imageUrl\" :src=\"imageUrl\" class=\"avatar\">\n  <i v-else class=\"el-icon-plus avatar-uploader-icon\"></i>\n</el-upload>\n\n<style>\n  .avatar-uploader .el-upload {\n    border: 1px dashed #d9d9d9;\n    border-radius: 6px;\n    cursor: pointer;\n    position: relative;\n    overflow: hidden;\n  }\n  .avatar-uploader .el-upload:hover {\n    border-color: #409EFF;\n  }\n  .avatar-uploader-icon {\n    font-size: 28px;\n    color: #8c939d;\n    width: 178px;\n    height: 178px;\n    line-height: 178px;\n    text-align: center;\n  }\n  .avatar {\n    width: 178px;\n    height: 178px;\n    display: block;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        imageUrl: ''\n      };\n    },\n    methods: {\n      handleAvatarSuccess(res, file) {\n        this.imageUrl = URL.createObjectURL(file.raw);\n      },\n      beforeAvatarUpload(file) {\n        const isJPG = file.type === 'image/jpeg';\n        const isLt2M = file.size / 1024 / 1024 < 2;\n\n        if (!isJPG) {\n          this.$message.error('L\\'avatar doit être en JPG !');\n        }\n        if (!isLt2M) {\n          this.$message.error('L\\'avatar ne peut pas excéder 2Mb !');\n        }\n        return isJPG && isLt2M;\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Mur de photos\n\nUtilisez `list-type` pour changer le style de la liste de fichiers.\n\n:::demo\n```html\n<el-upload\n  action=\"https://jsonplaceholder.typicode.com/posts/\"\n  list-type=\"picture-card\"\n  :on-preview=\"handlePictureCardPreview\"\n  :on-remove=\"handleRemove\">\n  <i class=\"el-icon-plus\"></i>\n</el-upload>\n<el-dialog :visible.sync=\"dialogVisible\">\n  <img width=\"100%\" :src=\"dialogImageUrl\" alt=\"\">\n</el-dialog>\n<script>\n  export default {\n    data() {\n      return {\n        dialogImageUrl: '',\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePictureCardPreview(file) {\n        this.dialogImageUrl = file.url;\n        this.dialogVisible = true;\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Custom file thumbnail\n\nUse `scoped-slot` to change default thumbnail template.\n\n:::demo\n```html\n<el-upload\n  action=\"#\"\n  list-type=\"picture-card\"\n  :auto-upload=\"false\">\n    <i slot=\"default\" class=\"el-icon-plus\"></i>\n    <div slot=\"file\" slot-scope=\"{file}\">\n      <img\n        class=\"el-upload-list__item-thumbnail\"\n        :src=\"file.url\" alt=\"\"\n      >\n      <span class=\"el-upload-list__item-actions\">\n        <span\n          class=\"el-upload-list__item-preview\"\n          @click=\"handlePictureCardPreview(file)\"\n        >\n          <i class=\"el-icon-zoom-in\"></i>\n        </span>\n        <span\n          v-if=\"!disabled\"\n          class=\"el-upload-list__item-delete\"\n          @click=\"handleDownload(file)\"\n        >\n          <i class=\"el-icon-download\"></i>\n        </span>\n        <span\n          v-if=\"!disabled\"\n          class=\"el-upload-list__item-delete\"\n          @click=\"handleRemove(file)\"\n        >\n          <i class=\"el-icon-delete\"></i>\n        </span>\n      </span>\n    </div>\n</el-upload>\n<el-dialog :visible.sync=\"dialogVisible\">\n  <img width=\"100%\" :src=\"dialogImageUrl\" alt=\"\">\n</el-dialog>\n<script>\n  export default {\n    data() {\n      return {\n        dialogImageUrl: '',\n        dialogVisible: false,\n        disabled: false\n      };\n    },\n    methods: {\n      handleRemove(file) {\n        console.log(file);\n      },\n      handlePictureCardPreview(file) {\n        this.dialogImageUrl = file.url;\n        this.dialogVisible = true;\n      },\n      handleDownload(file) {\n        console.log(file);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Liste de fichiers avec miniatures\n\n:::demo\n```html\n<el-upload\n  class=\"upload-demo\"\n  action=\"https://jsonplaceholder.typicode.com/posts/\"\n  :on-preview=\"handlePreview\"\n  :on-remove=\"handleRemove\"\n  :file-list=\"fileList\"\n  list-type=\"picture\">\n  <el-button size=\"small\" type=\"primary\">Cliquer pour envoyer</el-button>\n  <div slot=\"tip\" class=\"el-upload__tip\">Fichiers jpg/png avec une taille inférieure à 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Contrôle de la liste de fichiers\n\nUtilisez `on-change` pour contrôler le comportement de la liste de fichiers.\n\n:::demo\n```html\n<el-upload\n  class=\"upload-demo\"\n  action=\"https://jsonplaceholder.typicode.com/posts/\"\n  :on-change=\"handleChange\"\n  :file-list=\"fileList\">\n  <el-button size=\"small\" type=\"primary\">Cliquer pour envoyer</el-button>\n  <div slot=\"tip\" class=\"el-upload__tip\">Fichiers jpg/png avec une taille inférieure à 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{\n          name: 'food.jpeg',\n          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'\n        }, {\n          name: 'food2.jpeg',\n          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'\n        }]\n      };\n    },\n    methods: {\n      handleChange(file, fileList) {\n        this.fileList = fileList.slice(-3);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Envoi en déposant\n\nVous pouvez déposer les fichiers par drag'n drop sur l'espace dédié.\n\n:::demo\n```html\n<el-upload\n  class=\"upload-demo\"\n  drag\n  action=\"https://jsonplaceholder.typicode.com/posts/\"\n  :on-preview=\"handlePreview\"\n  :on-remove=\"handleRemove\"\n  :file-list=\"fileList\"\n  multiple>\n  <i class=\"el-icon-upload\"></i>\n  <div class=\"el-upload__text\">Déposer les fichiers ici ou<em>cliquez pour envoyer</em></div>\n  <div class=\"el-upload__tip\" slot=\"tip\">Fichiers jpg/png avec une taille inférieure à 500kb</div>\n</el-upload>\n```\n:::\n\n### Envoi manuel\n\n:::demo\n```html\n<el-upload\n  class=\"upload-demo\"\n  ref=\"upload\"\n  action=\"https://jsonplaceholder.typicode.com/posts/\"\n  :auto-upload=\"false\">\n  <el-button slot=\"trigger\" size=\"small\" type=\"primary\">Choisir un fichier</el-button>\n  <el-button style=\"margin-left: 10px;\" size=\"small\" type=\"success\" @click=\"submitUpload\">Envoyer au serveur</el-button>\n  <div class=\"el-upload__tip\" slot=\"tip\">Fichiers jpg/png avec une taille inférieure à 500kb</div>\n</el-upload>\n<script>\n  export default {\n    methods: {\n      submitUpload() {\n        this.$refs.upload.submit();\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Attributs\n\nAttribut      | Description          | Type      | Valeurs acceptées       | Défaut\n----| ----| ----| ----| ----\naction | Requis, l'url de requête. | string | — | —\nheaders | Les headers de la requête. | object | — | —\nmultiple | Si envoyer de multiples fichiers est autorisé. | boolean | — | —\ndata | Options additionnelles de la requête. | object | — | —\nname | Identifiant du fichier. | string | — | file\nwith-credentials | Si les cookies sont aussi envoyés. | boolean | — |false\nshow-file-list | Si la liste des fichiers est affichée. | boolean | — | true\n drag | Si le mode drag'n drop est activé. | boolean | — | false\naccept | [Types de fichiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept) acceptés, ne marche pas si `thumbnail-mode` est `true`. | string | — | —\non-preview | Fonction pour quand le fichier est cliqué. | function(file) | — | —\non-remove | Fonction pour quand des fichiers sont supprimés. | function(file, fileList) | — | —\non-success | Fonction pour quand l'upload a réussi. | function(response, file, fileList) | — | —\non-error | Fonction pour quand l'upload renvoi une erreur. | function(err, file, fileList) | — | —\non-progress | Fonction pour quand l'upload est en cours. | function(event, file, fileList) | — | — |\non-change | Fonction pour quand le statut d'un fichier change (sélection, upload, erreur...). | function(file, fileList) | — | — |\nbefore-upload | Fonction pour avant l'upload. Si `false` est retourné ou une `Promise` qui est ensuite rejetée, l'envoi sera annulé. | function(file) | — | —\nbefore-remove | Fonction pour avant la suppression de fichiers. Si `false` est retourné ou une `Promise` qui est ensuite rejetée, la suppression sera ensuite annulée. | function(file, fileList) | — | — |\nthumbnail-mode | Si les miniatures sont affichées. | boolean | — | false\nfile-list | Les fichiers envoyé par défaut, e.g. [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array | — | []\nlist-type | Le type de liste de fichiers. | string | text/picture/picture-card | text |\nauto-upload | Si l'envoi est automatique. | boolean | — | true |\nhttp-request | Écrase le xhr par défaut, afin que vous puissiez implémenter votre propre fonction d'envoi. | function | — | — |\ndisabled | Si le composant est désactivé. | boolean | — | false |\nlimit | Nombre maximum d'envoi autorisés. | number | — | — |\non-exceed | Fonction pour quand la limite d'envoi est dépassée. | function(files, fileList) | — | - |\n\n### Slot\n\n| Nom | Description |\n|------|--------|\n| trigger | Le contenu qui déclenche le Dialog du fichier. |\n| tip | Le contenu des tips. |\n\n### Méthodes\n\n| Méthode | Description | Paramètres |\n|---------- |-------- |---------- |\n| clearFiles | Efface la liste (non supporté dans `before-upload`). | — |\n| abort | Annule l'envoi en cours. | （ file: fileList's item ） |\n| submit | Envoi la liste de fichiers manuellement. |  —  |\n"
  },
  {
    "path": "examples/docs/zh-CN/alert.md",
    "content": "## Alert 警告\n\n用于页面中展示重要的提示信息。\n\n### 基本用法\n\n页面中的非浮层元素，不会自动消失。\n\n:::demo Alert 组件提供四种主题，由`type`属性指定，默认值为`info`。\n```html\n<template>\n  <el-alert\n    title=\"成功提示的文案\"\n    type=\"success\">\n  </el-alert>\n  <el-alert\n    title=\"消息提示的文案\"\n    type=\"info\">\n  </el-alert>\n  <el-alert\n    title=\"警告提示的文案\"\n    type=\"warning\">\n  </el-alert>\n  <el-alert\n    title=\"错误提示的文案\"\n    type=\"error\">\n  </el-alert>\n</template>\n```\n:::\n\n### 主题\n\nAlert 组件提供了两个不同的主题：`light`和`dark`。\n\n:::demo 通过设置`effect`属性来改变主题，默认为`light`。\n```html\n<template>\n  <el-alert\n    title=\"成功提示的文案\"\n    type=\"success\"\n    effect=\"dark\">\n  </el-alert>\n  <el-alert\n    title=\"消息提示的文案\"\n    type=\"info\"\n    effect=\"dark\">\n  </el-alert>\n  <el-alert\n    title=\"警告提示的文案\"\n    type=\"warning\"\n    effect=\"dark\">\n  </el-alert>\n  <el-alert\n    title=\"错误提示的文案\"\n    type=\"error\"\n    effect=\"dark\">\n  </el-alert>\n</template>\n```\n:::\n\n\n\n### 自定义关闭按钮\n\n自定义关闭按钮为文字或其他符号。\n\n:::demo 在 Alert 组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。`closable`属性决定是否可关闭，接受`boolean`，默认为`true`。你可以设置`close-text`属性来代替右侧的关闭图标，注意：`close-text`必须为文本。设置`close`事件来设置关闭时的回调。\n```html\n<template>\n  <el-alert\n    title=\"不可关闭的 alert\"\n    type=\"success\"\n    :closable=\"false\">\n  </el-alert>\n  <el-alert\n    title=\"自定义 close-text\"\n    type=\"info\"\n    close-text=\"知道了\">\n  </el-alert>\n  <el-alert\n    title=\"设置了回调的 alert\"\n    type=\"warning\"\n    @close=\"hello\">\n  </el-alert>\n</template>\n\n<script>\n  export default {\n    methods: {\n      hello() {\n        alert('Hello World!');\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 带有 icon\n\n表示某种状态时提升可读性。\n\n:::demo 通过设置`show-icon`属性来显示 Alert 的 icon，这能更有效地向用户展示你的显示意图。\n```html\n<template>\n  <el-alert\n    title=\"成功提示的文案\"\n    type=\"success\"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title=\"消息提示的文案\"\n    type=\"info\"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title=\"警告提示的文案\"\n    type=\"warning\"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title=\"错误提示的文案\"\n    type=\"error\"\n    show-icon>\n  </el-alert>\n</template>\n```\n:::\n\n### 文字居中\n\n使用 `center` 属性让文字水平居中。\n\n:::demo\n```html\n<template>\n  <el-alert\n    title=\"成功提示的文案\"\n    type=\"success\"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title=\"消息提示的文案\"\n    type=\"info\"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title=\"警告提示的文案\"\n    type=\"warning\"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title=\"错误提示的文案\"\n    type=\"error\"\n    center\n    show-icon>\n  </el-alert>\n</template>\n```\n:::\n\n### 带有辅助性文字介绍\n\n包含标题和内容，解释更详细的警告。\n\n:::demo 除了必填的`title`属性外，你可以设置`description`属性来帮助你更好地介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。\n```html\n<template>\n  <el-alert\n    title=\"带辅助性文字介绍\"\n    type=\"success\"\n    description=\"这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……\">\n  </el-alert>\n</template>\n```\n:::\n\n### 带有 icon 和辅助性文字介绍\n\n:::demo 最后，这是一个同时具有 icon 和辅助性文字的样例。\n```html\n<template>\n  <el-alert\n    title=\"成功提示的文案\"\n    type=\"success\"\n    description=\"文字说明文字说明文字说明文字说明文字说明文字说明\"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title=\"消息提示的文案\"\n    type=\"info\"\n    description=\"文字说明文字说明文字说明文字说明文字说明文字说明\"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title=\"警告提示的文案\"\n    type=\"warning\"\n    description=\"文字说明文字说明文字说明文字说明文字说明文字说明\"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title=\"错误提示的文案\"\n    type=\"error\"\n    description=\"文字说明文字说明文字说明文字说明文字说明文字说明\"\n    show-icon>\n  </el-alert>\n</template>\n```\n:::\n\n### Attributes\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| title     | 标题           | string | — | — |\n| type | 主题 | string | success/warning/info/error | info |\n| description | 辅助性文字。也可通过默认 slot 传入 | string | — | — |\n| closable | 是否可关闭 | boolean | — | true |\n| center | 文字是否居中 | boolean | — | true |\n| close-text | 关闭按钮自定义文本 | string | — | — |\n| show-icon | 是否显示图标 | boolean | — | false |\n| effect | 选择提供的主题 | string | light/dark | light |\n\n### Slot\n\n| Name | Description |\n|------|--------|\n| — | 描述 |\n| title | 标题的内容 |\n\n### Events\n| 事件名称 | 说明 | 回调参数 |\n|---------- |-------- |---------- |\n| close | 关闭alert时触发的事件 | — |\n"
  },
  {
    "path": "examples/docs/zh-CN/avatar.md",
    "content": "## Avatar 头像\n\n用图标、图片或者字符的形式展示用户或事物信息。\n\n### 基本用法\n\n通过 `shape` 和 `size` 设置头像的形状和大小。\n\n:::demo\n```html\n<template>\n  <el-row class=\"demo-avatar demo-basic\">\n    <el-col :span=\"12\">\n      <div class=\"sub-title\">circle</div>\n      <div class=\"demo-basic--circle\">\n        <div class=\"block\"><el-avatar :size=\"50\" :src=\"circleUrl\"></el-avatar></div>\n        <div class=\"block\" v-for=\"size in sizeList\" :key=\"size\">\n          <el-avatar :size=\"size\" :src=\"circleUrl\"></el-avatar>\n        </div>\n      </div>\n    </el-col>  \n    <el-col :span=\"12\">\n      <div class=\"sub-title\">square</div>\n      <div class=\"demo-basic--circle\">\n        <div class=\"block\"><el-avatar shape=\"square\" :size=\"50\" :src=\"squareUrl\"></el-avatar></div>\n        <div class=\"block\" v-for=\"size in sizeList\" :key=\"size\">\n          <el-avatar shape=\"square\" :size=\"size\" :src=\"squareUrl\"></el-avatar>\n        </div>\n      </div>\n    </el-col> \n  </el-row>\n</template>\n<script>\n  export default {\n    data () {\n      return {\n        circleUrl: \"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png\",\n        squareUrl: \"https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png\",\n        sizeList: [\"large\", \"medium\", \"small\"]\n      }\n    }\n  }\n</script>\n\n```\n:::\n\n### 展示类型\n\n支持三种类型：图标、图片和字符\n\n:::demo\n```html\n<template>\n  <div class=\"demo-type\">\n    <div>\n      <el-avatar icon=\"el-icon-user-solid\"></el-avatar>\n    </div>\n    <div>\n      <el-avatar src=\"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png\"></el-avatar>\n    </div>\n    <div>\n      <el-avatar> user </el-avatar>\n    </div>\n  </div>\n</template>\n```\n:::\n\n### 图片加载失败的 fallback 行为\n\n当展示类型为图片的时候，图片加载失败的 fallback 行为\n\n:::demo\n```html\n<template>\n  <div class=\"demo-type\">\n    <el-avatar :size=\"60\" src=\"https://empty\" @error=\"errorHandler\">\n      <img src=\"https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png\"/>\n    </el-avatar>\n  </div>\n</template>\n<script>\n  export default {\n    methods: {\n      errorHandler() {\n        return true\n      }\n    }\n  }\n</script>\n\n```\n:::\n\n### 图片如何适应容器框\n\n当展示类型为图片的时候，使用 `fit` 属性定义图片如何适应容器框，同原生 [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)。\n\n:::demo\n```html\n<template>\n  <div class=\"demo-fit\">\n    <div class=\"block\" v-for=\"fit in fits\" :key=\"fit\">\n        <span class=\"title\">{{ fit }}</span>\n        <el-avatar shape=\"square\" :size=\"100\" :fit=\"fit\" :src=\"url\"></el-avatar>\n    </div>\n  </div>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],\n        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'\n      }\n    }\n  }\n</script>\n\n```\n:::\n\n### Attributes\n\n| 参数              | 说明                             | 类型            | 可选值 | 默认值 |\n| ----------------- | -------------------------------- | --------------- | ------ | ------ |\n| icon              | 设置头像的图标类型，参考 Icon 组件   | string          |        |        |\n| size              | 设置头像的大小                     | number/string | number / large / medium / small | large  |\n| shape             | 设置头像的形状  | string |    circle / square     |   circle  |\n| src               | 图片头像的资源地址 | string |        |      |\n| srcSet            | 以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像 | string |        |      |\n| alt               | 描述图像的替换文本 | string |        |      |\n| fit               | 当展示类型为图片的时候，设置图片如何适应容器框 | string |    fill / contain / cover / none / scale-down    |   cover   |\n\n\n### Events\n\n| 事件名 | 说明               | 回调参数 |\n| ------ | ------------------ | -------- |\n| error  | 图片类头像加载失败的回调， 返回 false 会关闭组件默认的 fallback 行为 |(e: Event)  |\n\n### Slot\n\n| 名称\t | 说明               |  \n| ------ | ------------------ | \n| default  | 自定义头像展示内容 |\n"
  },
  {
    "path": "examples/docs/zh-CN/backtop.md",
    "content": "## Backtop 回到顶部\n\n返回页面顶部的操作按钮\n\n### 基础用法\n\n滑动页面即可看到右下方的按钮。\n:::demo\n\n```html\n<template>\n  Scroll down to see the bottom-right button.\n  <el-backtop target=\".page-component__scroll .el-scrollbar__wrap\"></el-backtop>\n</template>\n```\n\n:::\n\n### 自定义显示内容\n\n显示区域被固定为 40px \\* 40px 的区域, 其中的内容可支持自定义。\n:::demo\n\n```html\n<template>\n  Scroll down to see the bottom-right button.\n  <el-backtop target=\".page-component__scroll .el-scrollbar__wrap\" :bottom=\"100\">\n    <div\n      style=\"{\n        height: 100%;\n        width: 100%;\n        background-color: #f2f5f6;\n        box-shadow: 0 0 6px rgba(0,0,0, .12);\n        text-align: center;\n        line-height: 40px;\n        color: #1989fa;\n      }\"\n    >\n      UP\n    </div>\n  </el-backtop>\n</template>\n```\n\n:::\n\n### Attributes\n\n| 参数              | 说明                             | 类型            | 可选值 | 默认值 |\n| ----------------- | -------------------------------- | --------------- | ------ | ------ |\n| target            | 触发滚动的对象                   | string          |        |        |\n| visibility-height | 滚动高度达到此参数值才出现       | number |        | 200    |\n| right             | 控制其显示位置, 距离页面右边距   | number |        | 40     |\n| bottom            | 控制其显示位置, 距离页面底部距离 | number |        | 40     |\n\n### Events\n\n| 事件名 | 说明               | 回调参数 |\n| ------ | ------------------ | -------- |\n| click  | 点击按钮触发的事件 | 点击事件 |\n"
  },
  {
    "path": "examples/docs/zh-CN/badge.md",
    "content": "## Badge 标记\n\n出现在按钮、图标旁的数字或状态标记。\n\n### 基础用法\n展示新消息数量。\n\n:::demo 定义`value`属性，它接受`Number`或者`String`。\n\n```html\n<el-badge :value=\"12\" class=\"item\">\n  <el-button size=\"small\">评论</el-button>\n</el-badge>\n<el-badge :value=\"3\" class=\"item\">\n  <el-button size=\"small\">回复</el-button>\n</el-badge>\n<el-badge :value=\"1\" class=\"item\" type=\"primary\">\n  <el-button size=\"small\">评论</el-button>\n</el-badge>\n<el-badge :value=\"2\" class=\"item\" type=\"warning\">\n  <el-button size=\"small\">回复</el-button>\n</el-badge>\n\n<el-dropdown trigger=\"click\">\n  <span class=\"el-dropdown-link\">\n    点我查看<i class=\"el-icon-caret-bottom el-icon--right\"></i>\n  </span>\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item class=\"clearfix\">\n      评论\n      <el-badge class=\"mark\" :value=\"12\" />\n    </el-dropdown-item>\n    <el-dropdown-item class=\"clearfix\">\n      回复\n      <el-badge class=\"mark\" :value=\"3\" />\n    </el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n```\n:::\n\n### 最大值\n可自定义最大值。\n\n:::demo 由`max`属性定义，它接受一个`Number`，需要注意的是，只有当`value`为`Number`时，它才会生效。\n\n```html\n<el-badge :value=\"200\" :max=\"99\" class=\"item\">\n  <el-button size=\"small\">评论</el-button>\n</el-badge>\n<el-badge :value=\"100\" :max=\"10\" class=\"item\">\n  <el-button size=\"small\">回复</el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n```\n:::\n\n### 自定义内容\n可以显示数字以外的文本内容。\n\n:::demo 定义`value`为`String`类型是时可以用于显示自定义文本。\n\n```html\n<el-badge value=\"new\" class=\"item\">\n  <el-button size=\"small\">评论</el-button>\n</el-badge>\n<el-badge value=\"hot\" class=\"item\">\n  <el-button size=\"small\">回复</el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n```\n:::\n\n### 小红点\n以红点的形式标注需要关注的内容。\n\n:::demo 除了数字外，设置`is-dot`属性，它接受一个`Boolean`。\n\n```html\n<el-badge is-dot class=\"item\">数据查询</el-badge>\n<el-badge is-dot class=\"item\">\n  <el-button class=\"share-button\" icon=\"el-icon-share\" type=\"primary\"></el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n```\n:::\n\n### Attributes\n| 参数          | 说明            | 类型            | 可选值                 | 默认值   |\n|------------- |---------------- |---------------- |---------------------- |-------- |\n| value        | 显示值           | string, number  |          —            |    —    |\n| max          | 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型    | number  |         —              |     —    |\n| is-dot       | 小圆点           | boolean         |         —             |  false  |\n| hidden       | 隐藏 badge       | boolean         |         —             |  false  |\n| type         | 类型             | string          | primary / success / warning / danger / info |    —    |\n"
  },
  {
    "path": "examples/docs/zh-CN/border.md",
    "content": "<script>\n  import bus from '../../bus';\n  import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';\n  const varMap = {\n    '$--box-shadow-light': 'boxShadowLight',\n    '$--box-shadow-base': 'boxShadowBase',\n    '$--border-radius-base': 'borderRadiusBase',\n    '$--border-radius-small': 'borderRadiusSmall'\n  };\n  const original = {\n    boxShadowLight: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',\n    boxShadowBase: '0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)',\n    borderRadiusBase: '4px',\n    borderRadiusSmall: '2px'\n  }\n  export default {\n    created() {\n      bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);\n    },\n    mounted() {\n      this.setGlobal();\n    },\n    methods: {\n      setGlobal() {\n        if (window.userThemeConfig) {\n          this.global = window.userThemeConfig.global;\n        }\n      }\n    },\n    data() {\n      return {\n        global: {},\n        boxShadowLight: '',\n        boxShadowBase: '',\n        borderRadiusBase: '',\n        borderRadiusSmall: ''\n      }\n    },\n    watch: {\n      global: {\n        immediate: true,\n        handler(value) {\n          Object.keys(varMap).forEach((c) => {\n            if (value[c]) {\n              this[varMap[c]] = value[c]\n            } else {\n              this[varMap[c]] = original[varMap[c]]\n            }\n          });\n        }\n      }\n    }\n  }\n</script>\n\n## Border 边框\n\n我们对边框进行统一规范，可用于按钮、卡片、弹窗等组件里。\n\n### 边框\n\n我们提供了以下几种边框样式，以供选择。\n\n<table class=\"demo-border\">\n  <tbody>\n    <tr>\n      <td class=\"text\">名称</td>\n      <td class=\"text\">粗细</td>\n      <td class=\"line\">举例</td>\n    </tr>\n    <tr>\n      <td class=\"text\">\b实线</td>\n      <td class=\"text\">1px</td>\n      <td class=\"line\">\n        <div></div>\n      </td>\n    </tr>\n    <tr>\n      <td class=\"text\">\b虚线</td>\n      <td class=\"text\">2px</td>\n      <td class=\"line\">\n        <div class=\"dashed\"></div>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n### 圆角\n\n我们提供了以下几种圆角样式，以供选择。\n\n<el-row :gutter=\"12\" class=\"demo-radius\">\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"title\">无圆角</div>\n    <div class=\"value\">border-radius: 0px</div>\n    <div class=\"radius\"></div>\n  </el-col>\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"title\">小圆角</div>\n    <div class=\"value\">border-radius: {{borderRadiusSmall}}</div>\n    <div \n      class=\"radius\" \n      :style=\"{ borderRadius: borderRadiusSmall }\"\n    ></div>\n  </el-col>\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"title\">大圆角</div>\n    <div class=\"value\">border-radius: {{borderRadiusBase}}</div>\n    <div \n      class=\"radius\"\n      :style=\"{ borderRadius: borderRadiusBase }\"\n    ></div>\n  </el-col>\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"title\">圆形圆角</div>\n    <div class=\"value\">border-radius: 30px</div>\n    <div class=\"radius radius-30\"></div>\n  </el-col>\n</el-row>\n\n### 投影\n\n我们提供了以下几种投影样式，以供选择。\n\n<div \nclass=\"demo-shadow\"\n:style=\"{ boxShadow: boxShadowBase }\"\n></div>\n<span class=\"demo-shadow-text\">基础投影 box-shadow: {{boxShadowBase}}</span>\n\n<div \nclass=\"demo-shadow\"\n:style=\"{ boxShadow: boxShadowLight }\"\n></div>\n<span class=\"demo-shadow-text\">浅色投影 box-shadow: {{boxShadowLight}}</span>\n"
  },
  {
    "path": "examples/docs/zh-CN/breadcrumb.md",
    "content": "## Breadcrumb 面包屑\n显示当前页面的路径，快速返回之前的任意页面。\n\n### 基础用法\n\n适用广泛的基础用法。\n\n:::demo 在`el-breadcrumb`中使用`el-breadcrumb-item`标签表示从首页开始的每一级。Element 提供了一个`separator`属性，在`el-breadcrumb`标签中设置它来决定分隔符，它只能是字符串，默认为斜杠`/`。\n\n```html\n<el-breadcrumb separator=\"/\">\n  <el-breadcrumb-item :to=\"{ path: '/' }\">首页</el-breadcrumb-item>\n  <el-breadcrumb-item><a href=\"/\">活动管理</a></el-breadcrumb-item>\n  <el-breadcrumb-item>活动列表</el-breadcrumb-item>\n  <el-breadcrumb-item>活动详情</el-breadcrumb-item>\n</el-breadcrumb>\n```\n:::\n\n### 图标分隔符\n\n:::demo 通过设置 `separator-class` 可使用相应的 `iconfont` 作为分隔符，注意这将使 `separator` 设置失效\n\n```html\n<el-breadcrumb separator-class=\"el-icon-arrow-right\">\n  <el-breadcrumb-item :to=\"{ path: '/' }\">首页</el-breadcrumb-item>\n  <el-breadcrumb-item>活动管理</el-breadcrumb-item>\n  <el-breadcrumb-item>活动列表</el-breadcrumb-item>\n  <el-breadcrumb-item>活动详情</el-breadcrumb-item>\n</el-breadcrumb>\n```\n:::\n\n### Breadcrumb Attributes\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| separator | 分隔符 | string | — | 斜杠'/' |\n| separator-class | 图标分隔符 class | string | — | - |\n\n### Breadcrumb Item Attributes\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| to        | 路由跳转对象，同 `vue-router` 的 `to` | string/object | — | — |\n| replace   | 在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录 | boolean | — | false |\n"
  },
  {
    "path": "examples/docs/zh-CN/button.md",
    "content": "## Button 按钮\n常用的操作按钮。\n\n### 基础用法\n\n基础的按钮用法。\n\n:::demo 使用`type`、`plain`、`round`和`circle`属性来定义 Button 的样式。\n\n```html\n<el-row>\n  <el-button>默认按钮</el-button>\n  <el-button type=\"primary\">主要按钮</el-button>\n  <el-button type=\"success\">成功按钮</el-button>\n  <el-button type=\"info\">信息按钮</el-button>\n  <el-button type=\"warning\">警告按钮</el-button>\n  <el-button type=\"danger\">危险按钮</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain>朴素按钮</el-button>\n  <el-button type=\"primary\" plain>主要按钮</el-button>\n  <el-button type=\"success\" plain>成功按钮</el-button>\n  <el-button type=\"info\" plain>信息按钮</el-button>\n  <el-button type=\"warning\" plain>警告按钮</el-button>\n  <el-button type=\"danger\" plain>危险按钮</el-button>\n</el-row>\n\n<el-row>\n  <el-button round>圆角按钮</el-button>\n  <el-button type=\"primary\" round>主要按钮</el-button>\n  <el-button type=\"success\" round>成功按钮</el-button>\n  <el-button type=\"info\" round>信息按钮</el-button>\n  <el-button type=\"warning\" round>警告按钮</el-button>\n  <el-button type=\"danger\" round>危险按钮</el-button>\n</el-row>\n\n<el-row>\n  <el-button icon=\"el-icon-search\" circle></el-button>\n  <el-button type=\"primary\" icon=\"el-icon-edit\" circle></el-button>\n  <el-button type=\"success\" icon=\"el-icon-check\" circle></el-button>\n  <el-button type=\"info\" icon=\"el-icon-message\" circle></el-button>\n  <el-button type=\"warning\" icon=\"el-icon-star-off\" circle></el-button>\n  <el-button type=\"danger\" icon=\"el-icon-delete\" circle></el-button>\n</el-row>\n```\n:::\n\n### 禁用状态\n\n按钮不可用状态。\n\n:::demo 你可以使用`disabled`属性来定义按钮是否可用，它接受一个`Boolean`值。\n\n```html\n<el-row>\n  <el-button disabled>默认按钮</el-button>\n  <el-button type=\"primary\" disabled>主要按钮</el-button>\n  <el-button type=\"success\" disabled>成功按钮</el-button>\n  <el-button type=\"info\" disabled>信息按钮</el-button>\n  <el-button type=\"warning\" disabled>警告按钮</el-button>\n  <el-button type=\"danger\" disabled>危险按钮</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain disabled>朴素按钮</el-button>\n  <el-button type=\"primary\" plain disabled>主要按钮</el-button>\n  <el-button type=\"success\" plain disabled>成功按钮</el-button>\n  <el-button type=\"info\" plain disabled>信息按钮</el-button>\n  <el-button type=\"warning\" plain disabled>警告按钮</el-button>\n  <el-button type=\"danger\" plain disabled>危险按钮</el-button>\n</el-row>\n```\n:::\n\n### 文字按钮\n\n没有边框和背景色的按钮。\n\n:::demo\n```html\n<el-button type=\"text\">文字按钮</el-button>\n<el-button type=\"text\" disabled>文字按钮</el-button>\n```\n:::\n\n### 图标按钮\n\n带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。\n\n:::demo 设置`icon`属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用`i`标签即可，可以使用自定义图标。\n\n```html\n<el-button type=\"primary\" icon=\"el-icon-edit\"></el-button>\n<el-button type=\"primary\" icon=\"el-icon-share\"></el-button>\n<el-button type=\"primary\" icon=\"el-icon-delete\"></el-button>\n<el-button type=\"primary\" icon=\"el-icon-search\">搜索</el-button>\n<el-button type=\"primary\">上传<i class=\"el-icon-upload el-icon--right\"></i></el-button>\n```\n:::\n\n### 按钮组\n\n以按钮组的方式出现，常用于多项类似操作。\n\n:::demo 使用`<el-button-group>`标签来嵌套你的按钮。\n\n```html\n<el-button-group>\n  <el-button type=\"primary\" icon=\"el-icon-arrow-left\">上一页</el-button>\n  <el-button type=\"primary\">下一页<i class=\"el-icon-arrow-right el-icon--right\"></i></el-button>\n</el-button-group>\n<el-button-group>\n  <el-button type=\"primary\" icon=\"el-icon-edit\"></el-button>\n  <el-button type=\"primary\" icon=\"el-icon-share\"></el-button>\n  <el-button type=\"primary\" icon=\"el-icon-delete\"></el-button>\n</el-button-group>\n```\n:::\n\n### 加载中\n\n点击按钮后进行数据加载操作，在按钮上显示加载状态。\n\n:::demo 要设置为 loading 状态，只要设置`loading`属性为`true`即可。\n\n```html\n<el-button type=\"primary\" :loading=\"true\">加载中</el-button>\n```\n:::\n\n### 不同尺寸\n\nButton 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。\n\n:::demo 额外的尺寸：`medium`、`small`、`mini`，通过设置`size`属性来配置它们。\n\n```html\n<el-row>\n  <el-button>默认按钮</el-button>\n  <el-button size=\"medium\">中等按钮</el-button>\n  <el-button size=\"small\">小型按钮</el-button>\n  <el-button size=\"mini\">超小按钮</el-button>\n</el-row>\n<el-row>\n  <el-button round>默认按钮</el-button>\n  <el-button size=\"medium\" round>中等按钮</el-button>\n  <el-button size=\"small\" round>小型按钮</el-button>\n  <el-button size=\"mini\" round>超小按钮</el-button>\n</el-row>\n```\n:::\n\n### Attributes\n| 参数      | 说明    | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| size     | 尺寸   | string  |   medium / small / mini            |    —     |\n| type     | 类型   | string    |   primary / success / warning / danger / info / text |     —    |\n| plain     | 是否朴素按钮   | boolean    | — | false   |\n| round     | 是否圆角按钮   | boolean    | — | false   |\n| circle     | 是否圆形按钮   | boolean    | — | false   |\n| loading     | 是否加载中状态   | boolean    | — | false   |\n| disabled  | 是否禁用状态    | boolean   | —   | false   |\n| icon  | 图标类名 | string   |  —  |  —  |\n| autofocus  | 是否默认聚焦 | boolean   |  —  |  false  |\n| native-type | 原生 type 属性 | string | button / submit / reset | button |\n"
  },
  {
    "path": "examples/docs/zh-CN/calendar.md",
    "content": "## Calendar 日历\n\n显示日期\n\n### 基本\n\n:::demo 设置 `value` 来指定当前显示的月份。如果 `value` 未指定，则显示当月。`value` 支持 `v-model` 双向绑定。\n```html\n<el-calendar v-model=\"value\">\n</el-calendar>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: new Date()\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 自定义内容\n\n:::demo 通过设置名为 `dateCell` 的 `scoped-slot` 来自定义日历单元格中显示的内容。在 `scoped-slot` 可以获取到 date（当前单元格的日期）, data（包括 type，isSelected，day 属性）。详情解释参考下方的 API 文档。\n```html\n<el-calendar>\n  <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->\n  <template\n    slot=\"dateCell\"\n    slot-scope=\"{date, data}\">\n    <p :class=\"data.isSelected ? 'is-selected' : ''\">\n      {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}\n    </p>\n  </template>\n</el-calendar>\n<style>\n  .is-selected {\n    color: #1989FA;\n  }\n</style>\n```\n:::\n\n### 自定义范围\n\n:::demo 设置 `range` 属性指定日历的显示范围。开始时间必须是周起始日，结束时间必须是周结束日，且时间跨度不能超过两个月。\n```html\n<el-calendar :range=\"['2019-03-04', '2019-03-24']\">\n</el-calendar>\n```\n:::\n\n### Attributes\n| 参数             | 说明          | 类型      | 可选值        | 默认值  |\n|-----------------|-------------- |---------- |------------ |-------- |\n| value / v-model | 绑定值         | Date/string/number | —  | —      |\n| range           | 时间范围，包括开始时间与结束时间。开始时间必须是周一，结束时间必须是周日，且时间跨度不能超过两个月。 | Array     | —           | —      |\n| first-day-of-week | 周起始日\t    | Number    | 1 到 7      |  1     |\n\n### dateCell scoped slot 参数\n| 参数             | 说明          | 类型      | 可选值        | 默认值  |\n|-----------------|-------------- |---------- |------------ |-------- |\n| date            | 单元格代表的日期 | Date      | —           | —      |\n| data            | { type, isSelected, day}，`type` 表示该日期的所属月份，可选值有 prev-month，current-month，next-month；`isSelected` 标明该日期是否被选中；`day` 是格式化的日期，格式为 yyyy-MM-dd    | Object      | —           | —      |\n"
  },
  {
    "path": "examples/docs/zh-CN/card.md",
    "content": "## Card 卡片\n将信息聚合在卡片容器中展示。\n\n### 基础用法\n\n\n包含标题，内容和操作。\n\n:::demo Card 组件包括`header`和`body`部分，`header`部分需要有显式具名 slot 分发，同时也是可选的。\n```html\n<el-card class=\"box-card\">\n  <div slot=\"header\" class=\"clearfix\">\n    <span>卡片名称</span>\n    <el-button style=\"float: right; padding: 3px 0\" type=\"text\">操作按钮</el-button>\n  </div>\n  <div v-for=\"o in 4\" :key=\"o\" class=\"text item\">\n    {{'列表内容 ' + o }}\n  </div>\n</el-card>\n\n<style>\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    margin-bottom: 18px;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n    display: table;\n    content: \"\";\n  }\n  .clearfix:after {\n    clear: both\n  }\n\n  .box-card {\n    width: 480px;\n  }\n</style>\n```\n:::\n\n### 简单卡片\n\n卡片可以只有内容区域。\n\n:::demo\n```html\n<el-card class=\"box-card\">\n  <div v-for=\"o in 4\" :key=\"o\" class=\"text item\">\n    {{'列表内容 ' + o }}\n  </div>\n</el-card>\n\n<style>\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    padding: 18px 0;\n  }\n\n  .box-card {\n    width: 480px;\n  }\n</style>\n```\n:::\n\n### 带图片\n\n可配置定义更丰富的内容展示。\n\n:::demo 配置`body-style`属性来自定义`body`部分的`style`，我们还使用了布局组件。\n```html\n<el-row>\n  <el-col :span=\"8\" v-for=\"(o, index) in 2\" :key=\"o\" :offset=\"index > 0 ? 2 : 0\">\n    <el-card :body-style=\"{ padding: '0px' }\">\n      <img src=\"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png\" class=\"image\">\n      <div style=\"padding: 14px;\">\n        <span>好吃的汉堡</span>\n        <div class=\"bottom clearfix\">\n          <time class=\"time\">{{ currentDate }}</time>\n          <el-button type=\"text\" class=\"button\">操作按钮</el-button>\n        </div>\n      </div>\n    </el-card>\n  </el-col>\n</el-row>\n\n<style>\n  .time {\n    font-size: 13px;\n    color: #999;\n  }\n  \n  .bottom {\n    margin-top: 13px;\n    line-height: 12px;\n  }\n\n  .button {\n    padding: 0;\n    float: right;\n  }\n\n  .image {\n    width: 100%;\n    display: block;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n      display: table;\n      content: \"\";\n  }\n  \n  .clearfix:after {\n      clear: both\n  }\n</style>\n\n<script>\nexport default {\n  data() {\n    return {\n      currentDate: new Date()\n    };\n  }\n}\n</script>\n```\n:::\n\n### 卡片阴影\n\n可对阴影的显示进行配置。\n\n:::demo 通过`shadow`属性设置卡片阴影出现的时机：`always`、`hover`或`never`。\n```html\n<el-row :gutter=\"12\">\n  <el-col :span=\"8\">\n    <el-card shadow=\"always\">\n      总是显示\n    </el-card>\n  </el-col>\n  <el-col :span=\"8\">\n    <el-card shadow=\"hover\">\n      鼠标悬浮时显示\n    </el-card>\n  </el-col>\n  <el-col :span=\"8\">\n    <el-card shadow=\"never\">\n      从不显示\n    </el-card>\n  </el-col>\n</el-row>\n```\n:::\n\n### Attributes\n| 参数      | 说明    | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| header | 设置 header，也可以通过 `slot#header` 传入 DOM | string| — | — |\n| body-style | 设置 body 的样式| object| — | { padding: '20px' } |\n| shadow | 设置阴影显示时机 | string | always / hover / never | always |\n"
  },
  {
    "path": "examples/docs/zh-CN/carousel.md",
    "content": "## Carousel 走马灯\n\n在有限空间内，循环播放同一类型的图片、文字等内容\n\n### 基础用法\n\n适用广泛的基础用法\n\n:::demo 结合使用`el-carousel`和`el-carousel-item`标签就得到了一个走马灯。幻灯片的内容是任意的，需要放在`el-carousel-item`标签中。默认情况下，在鼠标 hover 底部的指示器时就会触发切换。通过设置`trigger`属性为`click`，可以达到点击触发的效果。\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">默认 Hover 指示器触发</span>\n    <el-carousel height=\"150px\">\n      <el-carousel-item v-for=\"item in 4\" :key=\"item\">\n        <h3 class=\"small\">{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">Click 指示器触发</span>\n    <el-carousel trigger=\"click\" height=\"150px\">\n      <el-carousel-item v-for=\"item in 4\" :key=\"item\">\n        <h3 class=\"small\">{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 150px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n     background-color: #99a9bf;\n  }\n  \n  .el-carousel__item:nth-child(2n+1) {\n     background-color: #d3dce6;\n  }\n</style>\n```\n:::\n\n### 指示器\n\n可以将指示器的显示位置设置在容器外部\n\n:::demo `indicator-position`属性定义了指示器的位置。默认情况下，它会显示在走马灯内部，设置为`outside`则会显示在外部；设置为`none`则不会显示指示器。\n```html\n<template>\n  <el-carousel indicator-position=\"outside\">\n    <el-carousel-item v-for=\"item in 4\" :key=\"item\">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 18px;\n    opacity: 0.75;\n    line-height: 300px;\n    margin: 0;\n  }\n  \n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n  \n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n```\n:::\n\n### 切换箭头\n可以设置切换箭头的显示时机\n\n:::demo `arrow`属性定义了切换箭头的显示时机。默认情况下，切换箭头只有在鼠标 hover 到走马灯上时才会显示；若将`arrow`设置为`always`，则会一直显示；设置为`never`，则会一直隐藏。\n```html\n<template>\n  <el-carousel :interval=\"5000\" arrow=\"always\">\n    <el-carousel-item v-for=\"item in 4\" :key=\"item\">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 18px;\n    opacity: 0.75;\n    line-height: 300px;\n    margin: 0;\n  }\n  \n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n  \n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n```\n:::\n\n### 卡片化\n当页面宽度方向空间空余，但高度方向空间匮乏时，可使用卡片风格\n\n:::demo 将`type`属性设置为`card`即可启用卡片模式。从交互上来说，卡片模式和一般模式的最大区别在于，可以通过直接点击两侧的幻灯片进行切换。\n```html\n<template>\n  <el-carousel :interval=\"4000\" type=\"card\" height=\"200px\">\n    <el-carousel-item v-for=\"item in 6\" :key=\"item\">\n      <h3 class=\"medium\">{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 200px;\n    margin: 0;\n  }\n  \n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n  \n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n```\n:::\n\n### 方向\n默认情况下，`direction` 为 `horizontal`。通过设置 `direction` 为 `vertical` 来让走马灯在垂直方向上显示。\n:::demo\n```html\n<template>\n  <el-carousel height=\"200px\" direction=\"vertical\" :autoplay=\"false\">\n    <el-carousel-item v-for=\"item in 3\" :key=\"item\">\n      <h3 class=\"medium\">{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 200px;\n    margin: 0;\n  }\n  \n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n  \n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n```\n:::\n\n### Carousel Attributes\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| height | 走马灯的高度 | string | — | — |\n| initial-index | 初始状态激活的幻灯片的索引，从 0 开始 | number | — | 0 |\n| trigger | 指示器的触发方式 | string | click | — |\n| autoplay | 是否自动切换 | boolean | — | true |\n| interval | 自动切换的时间间隔，单位为毫秒 | number | — | 3000 |\n| indicator-position | 指示器的位置 | string | outside/none | — |\n| arrow | 切换箭头的显示时机 | string | always/hover/never | hover |\n| type | 走马灯的类型 | string | card | — |\n| loop | 是否循环显示 | boolean | - | true |\n| direction | 走马灯展示的方向 | string | horizontal/vertical | horizontal |\n\n### Carousel Events\n| 事件名称 | 说明 | 回调参数 |\n|---------|---------|---------|\n| change | 幻灯片切换时触发 | 目前激活的幻灯片的索引，原幻灯片的索引 |\n\n### Carousel Methods\n| 方法名      | 说明          | 参数 |\n|---------- |-------------- | -- |\n| setActiveItem | 手动切换幻灯片 | 需要切换的幻灯片的索引，从 0 开始；或相应 `el-carousel-item` 的 `name` 属性值 |\n| prev | 切换至上一张幻灯片 | — |\n| next | 切换至下一张幻灯片 | — |\n\n### Carousel-Item Attributes\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| name | 幻灯片的名字，可用作 `setActiveItem` 的参数 | string | — | — |\n| label | 该幻灯片所对应指示器的文本 | string | — | — |\n"
  },
  {
    "path": "examples/docs/zh-CN/cascader.md",
    "content": "## Cascader 级联选择器\n\n当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。\n\n### 基础用法\n\n有两种触发子菜单的方式\n\n:::demo 只需为 Cascader 的`options`属性指定选项数组即可渲染出一个级联选择器。通过`props.expandTrigger`可以定义展开子级菜单的触发方式。\n```html\n<div class=\"block\">\n  <span class=\"demonstration\">默认 click 触发子菜单</span>\n  <el-cascader\n    v-model=\"value\"\n    :options=\"options\"\n    @change=\"handleChange\"></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">hover 触发子菜单</span>\n  <el-cascader\n    v-model=\"value\"\n    :options=\"options\"\n    :props=\"{ expandTrigger: 'hover' }\"\n    @change=\"handleChange\"></el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: [],\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout 布局'\n            }, {\n              value: 'color',\n              label: 'Color 色彩'\n            }, {\n              value: 'typography',\n              label: 'Typography 字体'\n            }, {\n              value: 'icon',\n              label: 'Icon 图标'\n            }, {\n              value: 'button',\n              label: 'Button 按钮'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio 单选框'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox 多选框'\n            }, {\n              value: 'input',\n              label: 'Input 输入框'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber 计数器'\n            }, {\n              value: 'select',\n              label: 'Select 选择器'\n            }, {\n              value: 'cascader',\n              label: 'Cascader 级联选择器'\n            }, {\n              value: 'switch',\n              label: 'Switch 开关'\n            }, {\n              value: 'slider',\n              label: 'Slider 滑块'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker 时间选择器'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker 日期选择器'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker 日期时间选择器'\n            }, {\n              value: 'upload',\n              label: 'Upload 上传'\n            }, {\n              value: 'rate',\n              label: 'Rate 评分'\n            }, {\n              value: 'form',\n              label: 'Form 表单'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table 表格'\n            }, {\n              value: 'tag',\n              label: 'Tag 标签'\n            }, {\n              value: 'progress',\n              label: 'Progress 进度条'\n            }, {\n              value: 'tree',\n              label: 'Tree 树形控件'\n            }, {\n              value: 'pagination',\n              label: 'Pagination 分页'\n            }, {\n              value: 'badge',\n              label: 'Badge 标记'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert 警告'\n            }, {\n              value: 'loading',\n              label: 'Loading 加载'\n            }, {\n              value: 'message',\n              label: 'Message 消息提示'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox 弹框'\n            }, {\n              value: 'notification',\n              label: 'Notification 通知'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu 导航菜单'\n            }, {\n              value: 'tabs',\n              label: 'Tabs 标签页'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb 面包屑'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown 下拉菜单'\n            }, {\n              value: 'steps',\n              label: 'Steps 步骤条'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog 对话框'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip 文字提示'\n            }, {\n              value: 'popover',\n              label: 'Popover 弹出框'\n            }, {\n              value: 'card',\n              label: 'Card 卡片'\n            }, {\n              value: 'carousel',\n              label: 'Carousel 走马灯'\n            }, {\n              value: 'collapse',\n              label: 'Collapse 折叠面板'\n            }]\n          }]\n        }, {\n          value: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### 禁用选项\n\n通过在数据源中设置 `disabled` 字段来声明该选项是禁用的\n\n:::demo 本例中，`options`指定的数组中的第一个元素含有`disabled: true`键值对，因此是禁用的。在默认情况下，Cascader 会检查数据中每一项的`disabled`字段是否为`true`，如果你的数据中表示禁用含义的字段名不为`disabled`，可以通过`props.disabled`属性来指定（详见下方 API 表格）。当然，`value`、`label`和`children`这三个字段名也可以通过同样的方式指定。\n```html\n<el-cascader :options=\"options\"></el-cascader>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          disabled: true,\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout 布局'\n            }, {\n              value: 'color',\n              label: 'Color 色彩'\n            }, {\n              value: 'typography',\n              label: 'Typography 字体'\n            }, {\n              value: 'icon',\n              label: 'Icon 图标'\n            }, {\n              value: 'button',\n              label: 'Button 按钮'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio 单选框'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox 多选框'\n            }, {\n              value: 'input',\n              label: 'Input 输入框'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber 计数器'\n            }, {\n              value: 'select',\n              label: 'Select 选择器'\n            }, {\n              value: 'cascader',\n              label: 'Cascader 级联选择器'\n            }, {\n              value: 'switch',\n              label: 'Switch 开关'\n            }, {\n              value: 'slider',\n              label: 'Slider 滑块'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker 时间选择器'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker 日期选择器'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker 日期时间选择器'\n            }, {\n              value: 'upload',\n              label: 'Upload 上传'\n            }, {\n              value: 'rate',\n              label: 'Rate 评分'\n            }, {\n              value: 'form',\n              label: 'Form 表单'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table 表格'\n            }, {\n              value: 'tag',\n              label: 'Tag 标签'\n            }, {\n              value: 'progress',\n              label: 'Progress 进度条'\n            }, {\n              value: 'tree',\n              label: 'Tree 树形控件'\n            }, {\n              value: 'pagination',\n              label: 'Pagination 分页'\n            }, {\n              value: 'badge',\n              label: 'Badge 标记'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert 警告'\n            }, {\n              value: 'loading',\n              label: 'Loading 加载'\n            }, {\n              value: 'message',\n              label: 'Message 消息提示'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox 弹框'\n            }, {\n              value: 'notification',\n              label: 'Notification 通知'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu 导航菜单'\n            }, {\n              value: 'tabs',\n              label: 'Tabs 标签页'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb 面包屑'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown 下拉菜单'\n            }, {\n              value: 'steps',\n              label: 'Steps 步骤条'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog 对话框'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip 文字提示'\n            }, {\n              value: 'popover',\n              label: 'Popover 弹出框'\n            }, {\n              value: 'card',\n              label: 'Card 卡片'\n            }, {\n              value: 'carousel',\n              label: 'Carousel 走马灯'\n            }, {\n              value: 'collapse',\n              label: 'Collapse 折叠面板'\n            }]\n          }]\n        }, {\n          value: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      };\n    }\n  };\n</script>\n```\n:::\n\n### 可清空\n\n通过 `clearable` 设置输入框可清空\n\n:::demo\n```html\n<el-cascader :options=\"options\" clearable></el-cascader>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout 布局'\n            }, {\n              value: 'color',\n              label: 'Color 色彩'\n            }, {\n              value: 'typography',\n              label: 'Typography 字体'\n            }, {\n              value: 'icon',\n              label: 'Icon 图标'\n            }, {\n              value: 'button',\n              label: 'Button 按钮'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio 单选框'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox 多选框'\n            }, {\n              value: 'input',\n              label: 'Input 输入框'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber 计数器'\n            }, {\n              value: 'select',\n              label: 'Select 选择器'\n            }, {\n              value: 'cascader',\n              label: 'Cascader 级联选择器'\n            }, {\n              value: 'switch',\n              label: 'Switch 开关'\n            }, {\n              value: 'slider',\n              label: 'Slider 滑块'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker 时间选择器'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker 日期选择器'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker 日期时间选择器'\n            }, {\n              value: 'upload',\n              label: 'Upload 上传'\n            }, {\n              value: 'rate',\n              label: 'Rate 评分'\n            }, {\n              value: 'form',\n              label: 'Form 表单'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table 表格'\n            }, {\n              value: 'tag',\n              label: 'Tag 标签'\n            }, {\n              value: 'progress',\n              label: 'Progress 进度条'\n            }, {\n              value: 'tree',\n              label: 'Tree 树形控件'\n            }, {\n              value: 'pagination',\n              label: 'Pagination 分页'\n            }, {\n              value: 'badge',\n              label: 'Badge 标记'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert 警告'\n            }, {\n              value: 'loading',\n              label: 'Loading 加载'\n            }, {\n              value: 'message',\n              label: 'Message 消息提示'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox 弹框'\n            }, {\n              value: 'notification',\n              label: 'Notification 通知'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu 导航菜单'\n            }, {\n              value: 'tabs',\n              label: 'Tabs 标签页'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb 面包屑'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown 下拉菜单'\n            }, {\n              value: 'steps',\n              label: 'Steps 步骤条'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog 对话框'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip 文字提示'\n            }, {\n              value: 'popover',\n              label: 'Popover 弹出框'\n            }, {\n              value: 'card',\n              label: 'Card 卡片'\n            }, {\n              value: 'carousel',\n              label: 'Carousel 走马灯'\n            }, {\n              value: 'collapse',\n              label: 'Collapse 折叠面板'\n            }]\n          }]\n        }, {\n          value: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 仅显示最后一级\n\n可以仅在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径。\n\n:::demo 属性`show-all-levels`定义了是否显示完整的路径，将其赋值为`false`则仅显示最后一级\n```html\n<el-cascader :options=\"options\" :show-all-levels=\"false\"></el-cascader>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout 布局'\n            }, {\n              value: 'color',\n              label: 'Color 色彩'\n            }, {\n              value: 'typography',\n              label: 'Typography 字体'\n            }, {\n              value: 'icon',\n              label: 'Icon 图标'\n            }, {\n              value: 'button',\n              label: 'Button 按钮'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio 单选框'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox 多选框'\n            }, {\n              value: 'input',\n              label: 'Input 输入框'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber 计数器'\n            }, {\n              value: 'select',\n              label: 'Select 选择器'\n            }, {\n              value: 'cascader',\n              label: 'Cascader 级联选择器'\n            }, {\n              value: 'switch',\n              label: 'Switch 开关'\n            }, {\n              value: 'slider',\n              label: 'Slider 滑块'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker 时间选择器'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker 日期选择器'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker 日期时间选择器'\n            }, {\n              value: 'upload',\n              label: 'Upload 上传'\n            }, {\n              value: 'rate',\n              label: 'Rate 评分'\n            }, {\n              value: 'form',\n              label: 'Form 表单'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table 表格'\n            }, {\n              value: 'tag',\n              label: 'Tag 标签'\n            }, {\n              value: 'progress',\n              label: 'Progress 进度条'\n            }, {\n              value: 'tree',\n              label: 'Tree 树形控件'\n            }, {\n              value: 'pagination',\n              label: 'Pagination 分页'\n            }, {\n              value: 'badge',\n              label: 'Badge 标记'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert 警告'\n            }, {\n              value: 'loading',\n              label: 'Loading 加载'\n            }, {\n              value: 'message',\n              label: 'Message 消息提示'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox 弹框'\n            }, {\n              value: 'notification',\n              label: 'Notification 通知'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu 导航菜单'\n            }, {\n              value: 'tabs',\n              label: 'Tabs 标签页'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb 面包屑'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown 下拉菜单'\n            }, {\n              value: 'steps',\n              label: 'Steps 步骤条'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog 对话框'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip 文字提示'\n            }, {\n              value: 'popover',\n              label: 'Popover 弹出框'\n            }, {\n              value: 'card',\n              label: 'Card 卡片'\n            }, {\n              value: 'carousel',\n              label: 'Carousel 走马灯'\n            }, {\n              value: 'collapse',\n              label: 'Collapse 折叠面板'\n            }]\n          }]\n        }, {\n          value: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      };\n    }\n  };\n</script>\n```\n:::\n\n### 多选\n\n可通过 `props.multiple = true` 来开启多选模式\n\n:::demo 在开启多选模式后，默认情况下会展示所有已选中的选项的Tag，你可以使用`collapse-tags`来折叠Tag\n```html\n<div class=\"block\">\n  <span class=\"demonstration\">默认显示所有Tag</span>\n  <el-cascader\n    :options=\"options\"\n    :props=\"props\"\n    clearable></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">折叠展示Tag</span>\n  <el-cascader\n    :options=\"options\"\n    :props=\"props\"\n    collapse-tags\n    clearable></el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        props: { multiple: true },\n        options: [{\n          value: 1,\n          label: '东南',\n          children: [{\n            value: 2,\n            label: '上海',\n            children: [\n              { value: 3, label: '普陀' },\n              { value: 4, label: '黄埔' },\n              { value: 5, label: '徐汇' }\n            ]\n          }, {\n            value: 7,\n            label: '江苏',\n            children: [\n              { value: 8, label: '南京' },\n              { value: 9, label: '苏州' },\n              { value: 10, label: '无锡' }\n            ]\n          }, {\n            value: 12,\n            label: '浙江',\n            children: [\n              { value: 13, label: '杭州' },\n              { value: 14, label: '宁波' },\n              { value: 15, label: '嘉兴' }\n            ]\n          }]\n        }, {\n          value: 17,\n          label: '西北',\n          children: [{\n            value: 18,\n            label: '陕西',\n            children: [\n              { value: 19, label: '西安' },\n              { value: 20, label: '延安' }\n            ]\n          }, {\n            value: 21,\n            label: '新疆维吾尔族自治区',\n            children: [\n              { value: 22, label: '乌鲁木齐' },\n              { value: 23, label: '克拉玛依' }\n            ]\n          }]\n        }]\n      };\n    }\n  };\n</script>\n```\n:::\n\n\n### 选择任意一级选项\n\n在单选模式下，你只能选择叶子节点；而在多选模式下，勾选父节点真正选中的都是叶子节点。启用该功能后，可让父子节点取消关联，选择任意一级选项。\n\n:::demo 可通过 `props.checkStrictly = true` 来设置父子节点取消选中关联，从而达到选择任意一级选项的目的。\n```html\n<div class=\"block\">\n  <span class=\"demonstration\">单选选择任意一级选项</span>\n  <el-cascader\n    :options=\"options\"\n    :props=\"{ checkStrictly: true }\"\n    clearable></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">多选选择任意一级选项</span>\n  <el-cascader\n    :options=\"options\"\n    :props=\"{ multiple: true, checkStrictly: true }\"\n    clearable></el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout 布局'\n            }, {\n              value: 'color',\n              label: 'Color 色彩'\n            }, {\n              value: 'typography',\n              label: 'Typography 字体'\n            }, {\n              value: 'icon',\n              label: 'Icon 图标'\n            }, {\n              value: 'button',\n              label: 'Button 按钮'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio 单选框'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox 多选框'\n            }, {\n              value: 'input',\n              label: 'Input 输入框'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber 计数器'\n            }, {\n              value: 'select',\n              label: 'Select 选择器'\n            }, {\n              value: 'cascader',\n              label: 'Cascader 级联选择器'\n            }, {\n              value: 'switch',\n              label: 'Switch 开关'\n            }, {\n              value: 'slider',\n              label: 'Slider 滑块'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker 时间选择器'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker 日期选择器'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker 日期时间选择器'\n            }, {\n              value: 'upload',\n              label: 'Upload 上传'\n            }, {\n              value: 'rate',\n              label: 'Rate 评分'\n            }, {\n              value: 'form',\n              label: 'Form 表单'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table 表格'\n            }, {\n              value: 'tag',\n              label: 'Tag 标签'\n            }, {\n              value: 'progress',\n              label: 'Progress 进度条'\n            }, {\n              value: 'tree',\n              label: 'Tree 树形控件'\n            }, {\n              value: 'pagination',\n              label: 'Pagination 分页'\n            }, {\n              value: 'badge',\n              label: 'Badge 标记'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert 警告'\n            }, {\n              value: 'loading',\n              label: 'Loading 加载'\n            }, {\n              value: 'message',\n              label: 'Message 消息提示'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox 弹框'\n            }, {\n              value: 'notification',\n              label: 'Notification 通知'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu 导航菜单'\n            }, {\n              value: 'tabs',\n              label: 'Tabs 标签页'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb 面包屑'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown 下拉菜单'\n            }, {\n              value: 'steps',\n              label: 'Steps 步骤条'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog 对话框'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip 文字提示'\n            }, {\n              value: 'popover',\n              label: 'Popover 弹出框'\n            }, {\n              value: 'card',\n              label: 'Card 卡片'\n            }, {\n              value: 'carousel',\n              label: 'Carousel 走马灯'\n            }, {\n              value: 'collapse',\n              label: 'Collapse 折叠面板'\n            }]\n          }]\n        }, {\n          value: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      };\n    }\n  };\n</script>\n```\n:::\n\n### 动态加载\n\n当选中某一级时，动态加载该级下的选项。\n\n:::demo 通过`lazy`开启动态加载，并通过`lazyload`来设置加载数据源的方法。`lazyload`方法有两个参数，第一个参数`node`为当前点击的节点，第二个`resolve`为数据加载完成的回调(必须调用)。为了更准确的显示节点的状态，还可以对节点数据添加是否为叶子节点的标志位 (默认字段为`leaf`，可通过`props.leaf`修改)，否则会简单的以有无子节点来判断是否为叶子节点。\n```html\n<el-cascader :props=\"props\"></el-cascader>\n\n<script>\n  let id = 0;\n\n  export default {\n    data() {\n      return {\n        props: {\n          lazy: true,\n          lazyLoad (node, resolve) {\n            const { level } = node;\n            setTimeout(() => {\n              const nodes = Array.from({ length: level + 1 })\n                .map(item => ({\n                  value: ++id,\n                  label: `选项${id}`,\n                  leaf: level >= 2\n                }));\n              // 通过调用resolve将子节点数据返回，通知组件数据加载完成\n              resolve(nodes);\n            }, 1000);\n          }\n        }\n      };\n    }\n  };\n</script>\n```\n:::\n\n### 可搜索\n\n可以快捷地搜索选项并选择。\n\n:::demo 将`filterable`赋值为`true`即可打开搜索功能，默认会匹配节点的`label`或所有父节点的`label`(由`show-all-levels`决定)中包含输入值的选项。你也可以用`filter-method`自定义搜索逻辑，接受一个函数，第一个参数是节点`node`，第二个参数是搜索关键词`keyword`，通过返回布尔值表示是否命中。\n```html\n<div class=\"block\">\n  <span class=\"demonstration\">单选可搜索</span>\n  <el-cascader\n    placeholder=\"试试搜索：指南\"\n    :options=\"options\"\n    filterable></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">多选可搜索</span>\n  <el-cascader\n    placeholder=\"试试搜索：指南\"\n    :options=\"options\"\n    :props=\"{ multiple: true }\"\n    filterable></el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout 布局'\n            }, {\n              value: 'color',\n              label: 'Color 色彩'\n            }, {\n              value: 'typography',\n              label: 'Typography 字体'\n            }, {\n              value: 'icon',\n              label: 'Icon 图标'\n            }, {\n              value: 'button',\n              label: 'Button 按钮'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio 单选框'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox 多选框'\n            }, {\n              value: 'input',\n              label: 'Input 输入框'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber 计数器'\n            }, {\n              value: 'select',\n              label: 'Select 选择器'\n            }, {\n              value: 'cascader',\n              label: 'Cascader 级联选择器'\n            }, {\n              value: 'switch',\n              label: 'Switch 开关'\n            }, {\n              value: 'slider',\n              label: 'Slider 滑块'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker 时间选择器'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker 日期选择器'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker 日期时间选择器'\n            }, {\n              value: 'upload',\n              label: 'Upload 上传'\n            }, {\n              value: 'rate',\n              label: 'Rate 评分'\n            }, {\n              value: 'form',\n              label: 'Form 表单'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table 表格'\n            }, {\n              value: 'tag',\n              label: 'Tag 标签'\n            }, {\n              value: 'progress',\n              label: 'Progress 进度条'\n            }, {\n              value: 'tree',\n              label: 'Tree 树形控件'\n            }, {\n              value: 'pagination',\n              label: 'Pagination 分页'\n            }, {\n              value: 'badge',\n              label: 'Badge 标记'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert 警告'\n            }, {\n              value: 'loading',\n              label: 'Loading 加载'\n            }, {\n              value: 'message',\n              label: 'Message 消息提示'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox 弹框'\n            }, {\n              value: 'notification',\n              label: 'Notification 通知'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu 导航菜单'\n            }, {\n              value: 'tabs',\n              label: 'Tabs 标签页'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb 面包屑'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown 下拉菜单'\n            }, {\n              value: 'steps',\n              label: 'Steps 步骤条'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog 对话框'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip 文字提示'\n            }, {\n              value: 'popover',\n              label: 'Popover 弹出框'\n            }, {\n              value: 'card',\n              label: 'Card 卡片'\n            }, {\n              value: 'carousel',\n              label: 'Carousel 走马灯'\n            }, {\n              value: 'collapse',\n              label: 'Collapse 折叠面板'\n            }]\n          }]\n        }, {\n          value: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      };\n    }\n  };\n</script>\n```\n:::\n\n### 自定义节点内容\n\n可以自定义备选项的节点内容\n\n:::demo 可以通过`scoped slot`对级联选择器的备选项的节点内容进行自定义，scoped slot会传入两个字段 `node` 和 `data`，分别表示当前节点的 Node 对象和数据。\n```html\n<el-cascader :options=\"options\">\n  <template slot-scope=\"{ node, data }\">\n    <span>{{ data.label }}</span>\n    <span v-if=\"!node.isLeaf\"> ({{ data.children.length }}) </span>\n  </template>\n</el-cascader>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout 布局'\n            }, {\n              value: 'color',\n              label: 'Color 色彩'\n            }, {\n              value: 'typography',\n              label: 'Typography 字体'\n            }, {\n              value: 'icon',\n              label: 'Icon 图标'\n            }, {\n              value: 'button',\n              label: 'Button 按钮'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio 单选框'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox 多选框'\n            }, {\n              value: 'input',\n              label: 'Input 输入框'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber 计数器'\n            }, {\n              value: 'select',\n              label: 'Select 选择器'\n            }, {\n              value: 'cascader',\n              label: 'Cascader 级联选择器'\n            }, {\n              value: 'switch',\n              label: 'Switch 开关'\n            }, {\n              value: 'slider',\n              label: 'Slider 滑块'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker 时间选择器'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker 日期选择器'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker 日期时间选择器'\n            }, {\n              value: 'upload',\n              label: 'Upload 上传'\n            }, {\n              value: 'rate',\n              label: 'Rate 评分'\n            }, {\n              value: 'form',\n              label: 'Form 表单'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table 表格'\n            }, {\n              value: 'tag',\n              label: 'Tag 标签'\n            }, {\n              value: 'progress',\n              label: 'Progress 进度条'\n            }, {\n              value: 'tree',\n              label: 'Tree 树形控件'\n            }, {\n              value: 'pagination',\n              label: 'Pagination 分页'\n            }, {\n              value: 'badge',\n              label: 'Badge 标记'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert 警告'\n            }, {\n              value: 'loading',\n              label: 'Loading 加载'\n            }, {\n              value: 'message',\n              label: 'Message 消息提示'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox 弹框'\n            }, {\n              value: 'notification',\n              label: 'Notification 通知'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu 导航菜单'\n            }, {\n              value: 'tabs',\n              label: 'Tabs 标签页'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb 面包屑'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown 下拉菜单'\n            }, {\n              value: 'steps',\n              label: 'Steps 步骤条'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog 对话框'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip 文字提示'\n            }, {\n              value: 'popover',\n              label: 'Popover 弹出框'\n            }, {\n              value: 'card',\n              label: 'Card 卡片'\n            }, {\n              value: 'carousel',\n              label: 'Carousel 走马灯'\n            }, {\n              value: 'collapse',\n              label: 'Collapse 折叠面板'\n            }]\n          }]\n        }, {\n          value: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 级联面板\n\n级联面板是级联选择器的核心组件，与级联选择器一样，有单选、多选、动态加载等多种功能。\n\n:::demo 和级联选择器一样，通过`options`来指定选项，也可通过`props`来设置多选、动态加载等功能，具体详情见下方API表格。\n```html\n<el-cascader-panel :options=\"options\"></el-cascader-panel>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout 布局'\n            }, {\n              value: 'color',\n              label: 'Color 色彩'\n            }, {\n              value: 'typography',\n              label: 'Typography 字体'\n            }, {\n              value: 'icon',\n              label: 'Icon 图标'\n            }, {\n              value: 'button',\n              label: 'Button 按钮'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio 单选框'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox 多选框'\n            }, {\n              value: 'input',\n              label: 'Input 输入框'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber 计数器'\n            }, {\n              value: 'select',\n              label: 'Select 选择器'\n            }, {\n              value: 'cascader',\n              label: 'Cascader 级联选择器'\n            }, {\n              value: 'switch',\n              label: 'Switch 开关'\n            }, {\n              value: 'slider',\n              label: 'Slider 滑块'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker 时间选择器'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker 日期选择器'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker 日期时间选择器'\n            }, {\n              value: 'upload',\n              label: 'Upload 上传'\n            }, {\n              value: 'rate',\n              label: 'Rate 评分'\n            }, {\n              value: 'form',\n              label: 'Form 表单'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table 表格'\n            }, {\n              value: 'tag',\n              label: 'Tag 标签'\n            }, {\n              value: 'progress',\n              label: 'Progress 进度条'\n            }, {\n              value: 'tree',\n              label: 'Tree 树形控件'\n            }, {\n              value: 'pagination',\n              label: 'Pagination 分页'\n            }, {\n              value: 'badge',\n              label: 'Badge 标记'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert 警告'\n            }, {\n              value: 'loading',\n              label: 'Loading 加载'\n            }, {\n              value: 'message',\n              label: 'Message 消息提示'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox 弹框'\n            }, {\n              value: 'notification',\n              label: 'Notification 通知'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu 导航菜单'\n            }, {\n              value: 'tabs',\n              label: 'Tabs 标签页'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb 面包屑'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown 下拉菜单'\n            }, {\n              value: 'steps',\n              label: 'Steps 步骤条'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog 对话框'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip 文字提示'\n            }, {\n              value: 'popover',\n              label: 'Popover 弹出框'\n            }, {\n              value: 'card',\n              label: 'Card 卡片'\n            }, {\n              value: 'carousel',\n              label: 'Carousel 走马灯'\n            }, {\n              value: 'collapse',\n              label: 'Collapse 折叠面板'\n            }]\n          }]\n        }, {\n          value: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Cascader Attributes\n| 参数      | 说明    | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| value / v-model | 选中项绑定值 | - | — | — |\n| options | 可选项数据源，键名可通过 `Props` 属性配置 | array | — | — |\n| props | 配置选项，具体见下表 | object | — | — |\n| size | 尺寸 | string | medium / small / mini | — |\n| placeholder | 输入框占位文本 | string | — | 请选择 |\n| disabled | 是否禁用 | boolean | — | false |\n| clearable | 是否支持清空选项 | boolean | — | false |\n| show-all-levels | 输入框中是否显示选中值的完整路径 | boolean | — | true |\n| collapse-tags | 多选模式下是否折叠Tag | boolean | - | false |\n| separator | 选项分隔符 | string | — | 斜杠' / ' |\n| filterable | 是否可搜索选项 | boolean | — | — |\n| filter-method | 自定义搜索逻辑，第一个参数是节点`node`，第二个参数是搜索关键词`keyword`，通过返回布尔值表示是否命中 | function(node, keyword) | - | - |\n| debounce | 搜索关键词输入的去抖延迟，毫秒 | number | — | 300 |\n| before-filter | 筛选之前的钩子，参数为输入的值，若返回 false 或者返回 Promise 且被 reject，则停止筛选 | function(value) | — | — |\n| popper-class | 自定义浮层类名   | string | —  | — |\n\n### Cascader Events\n| 事件名称      | 说明    | 回调参数      |\n|---------- |-------- |---------- |\n| change | 当选中节点变化时触发 | 选中节点的值 |\n| expand-change | 当展开节点发生变化时触发 | 各父级选项值组成的数组 |\n| blur | 当失去焦点时触发 | (event: Event) |\n| focus | 当获得焦点时触发 | (event: Event) |\n| visible-change | 下拉框出现/隐藏时触发 | 出现则为 true，隐藏则为 false |\n| remove-tag | 在多选模式下，移除Tag时触发 | 移除的Tag对应的节点的值 |\n\n### Cascader Methods\n| 方法名 | 说明 | 参数 |\n| ---- | ---- | ---- |\n| getCheckedNodes | 获取选中的节点 | (leafOnly) 是否只是叶子节点，默认值为 `false` |\n\n### Cascader Slots\n| 名称     | 说明 |\n|---------|-------------|\n| - | 自定义备选项的节点内容，参数为 { node, data }，分别为当前节点的 Node 对象和数据 |\n| empty  | 无匹配选项时的内容 |\n\n### CascaderPanel Attributes\n| 参数      | 说明    | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| value / v-model | 选中项绑定值 | - | — | — |\n| options | 可选项数据源，键名可通过 `Props` 属性配置 | array | — | — |\n| props | 配置选项，具体见下表 | object | — | — |\n\n### CascaderPanel Events\n| 事件名称      | 说明    | 回调参数      |\n|---------- |-------- |---------- |\n| change | 当选中节点变化时触发 | 选中节点的值 |\n| expand-change | 当展开节点发生变化时触发 | 各父级选项值组成的数组 |\n\n### CascaderPanel Methods\n| 方法名 | 说明 | 参数 |\n| ---- | ---- | ---- |\n| getCheckedNodes | 获取选中的节点数组 | (leafOnly) 是否只是叶子节点，默认值为 `false` |\n| clearCheckedNodes | 清空选中的节点 | - |\n\n### CascaderPanel Slots\n| 名称     | 说明 |\n|---------|-------------|\n| - | 自定义备选项的节点内容，参数为 { node, data }，分别为当前节点的 Node 对象和数据 |\n\n### Props\n| 参数     | 说明              | 类型   | 可选值 | 默认值 |\n| -------- | ----------------- | ------ | ------ | ------ |\n| expandTrigger | 次级菜单的展开方式 | string | click / hover | 'click' |\n| multiple | 是否多选 | boolean | - | false |\n| checkStrictly | 是否严格的遵守父子节点不互相关联 | boolean | - | false |\n| emitPath | 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值 | boolean | - | true |\n| lazy | 是否动态加载子节点，需与 lazyLoad 方法结合使用 | boolean | - | false |\n| lazyLoad | 加载动态数据的方法，仅在 lazy 为 true 时有效 | function(node, resolve)，`node`为当前点击的节点，`resolve`为数据加载完成的回调(必须调用) | - | - |\n| value    | 指定选项的值为选项对象的某个属性值 | string | — | 'value' |\n| label    | 指定选项标签为选项对象的某个属性值 | string | — | 'label' |\n| children | 指定选项的子选项为选项对象的某个属性值 | string | — | 'children' |\n| disabled | 指定选项的禁用为选项对象的某个属性值 | string | — | 'disabled' |\n| leaf     | 指定选项的叶子节点的标志位为选项对象的某个属性值 | string | — | 'leaf' |\n"
  },
  {
    "path": "examples/docs/zh-CN/checkbox.md",
    "content": "## Checkbox 多选框\n一组备选项中进行多选\n\n### 基础用法\n\n单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。\n\n:::demo 在`el-checkbox`元素中定义`v-model`绑定变量，单一的`checkbox`中，默认绑定变量的值会是`Boolean`，选中为`true`。\n\n```html\n<template>\n  <!-- `checked` 为 true 或 false -->\n  <el-checkbox v-model=\"checked\">备选项</el-checkbox>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        checked: true\n      };\n    }\n  };\n</script>\n```\n:::\n\n### 禁用状态\n\n多选框不可用状态。\n\n:::demo 设置`disabled`属性即可。\n\n```html\n<template>\n  <el-checkbox v-model=\"checked1\" disabled>备选项1</el-checkbox>\n  <el-checkbox v-model=\"checked2\" disabled>备选项</el-checkbox>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        checked1: false,\n        checked2: true\n      };\n    }\n  };\n</script>\n```\n:::\n\n### 多选框组\n\n适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。\n\n:::demo `checkbox-group`元素能把多个 checkbox 管理为一组，只需要在 Group 中使用`v-model`绑定`Array`类型的变量即可。 `el-checkbox` 的 `label`属性是该 checkbox 对应的值，若该标签中无内容，则该属性也充当 checkbox 按钮后的介绍。`label`与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。\n\n```html\n<template>\n  <el-checkbox-group v-model=\"checkList\">\n    <el-checkbox label=\"复选框 A\"></el-checkbox>\n    <el-checkbox label=\"复选框 B\"></el-checkbox>\n    <el-checkbox label=\"复选框 C\"></el-checkbox>\n    <el-checkbox label=\"禁用\" disabled></el-checkbox>\n    <el-checkbox label=\"选中且禁用\" disabled></el-checkbox>\n  </el-checkbox-group>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        checkList: ['选中且禁用','复选框 A']\n      };\n    }\n  };\n</script>\n```\n:::\n\n### indeterminate 状态\n\n`indeterminate` 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果\n\n:::demo\n\n```html\n<template>\n  <el-checkbox :indeterminate=\"isIndeterminate\" v-model=\"checkAll\" @change=\"handleCheckAllChange\">全选</el-checkbox>\n  <div style=\"margin: 15px 0;\"></div>\n  <el-checkbox-group v-model=\"checkedCities\" @change=\"handleCheckedCitiesChange\">\n    <el-checkbox v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n<script>\n  const cityOptions = ['上海', '北京', '广州', '深圳'];\n  export default {\n    data() {\n      return {\n        checkAll: false,\n        checkedCities: ['上海', '北京'],\n        cities: cityOptions,\n        isIndeterminate: true\n      };\n    },\n    methods: {\n      handleCheckAllChange(val) {\n        this.checkedCities = val ? cityOptions : [];\n        this.isIndeterminate = false;\n      },\n      handleCheckedCitiesChange(value) {\n        let checkedCount = value.length;\n        this.checkAll = checkedCount === this.cities.length;\n        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;\n      }\n    }\n  };\n</script>\n```\n:::\n\n### 可选项目数量的限制\n\n使用 `min` 和 `max` 属性能够限制可以被勾选的项目的数量。\n\n:::demo\n\n```html\n<template>\n  <el-checkbox-group \n    v-model=\"checkedCities\"\n    :min=\"1\"\n    :max=\"2\">\n    <el-checkbox v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n<script>\n  const cityOptions = ['上海', '北京', '广州', '深圳'];\n  export default {\n    data() {\n      return {\n        checkedCities: ['上海', '北京'],\n        cities: cityOptions\n      };\n    }\n  };\n</script>\n```\n\n:::\n\n### 按钮样式\n\n按钮样式的多选组合。\n\n:::demo 只需要把`el-checkbox`元素替换为`el-checkbox-button`元素即可。此外，Element 还提供了`size`属性。\n```html\n<template>\n  <div>\n    <el-checkbox-group v-model=\"checkboxGroup1\">\n      <el-checkbox-button v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-checkbox-group v-model=\"checkboxGroup2\" size=\"medium\">\n      <el-checkbox-button v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-checkbox-group v-model=\"checkboxGroup3\" size=\"small\">\n      <el-checkbox-button v-for=\"city in cities\" :label=\"city\" :disabled=\"city === '北京'\" :key=\"city\">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-checkbox-group v-model=\"checkboxGroup4\" size=\"mini\" disabled>\n      <el-checkbox-button v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n</template>\n<script>\n  const cityOptions = ['上海', '北京', '广州', '深圳'];\n  export default {\n    data () {\n      return {\n        checkboxGroup1: ['上海'],\n        checkboxGroup2: ['上海'],\n        checkboxGroup3: ['上海'],\n        checkboxGroup4: ['上海'],\n        cities: cityOptions\n      };\n    }\n  }\n</script>\n```\n:::\n\n### 带有边框\n\n:::demo 设置`border`属性可以渲染为带有边框的多选框。\n```html\n<template>\n  <div>\n    <el-checkbox v-model=\"checked1\" label=\"备选项1\" border></el-checkbox>\n    <el-checkbox v-model=\"checked2\" label=\"备选项2\" border></el-checkbox>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-checkbox v-model=\"checked3\" label=\"备选项1\" border size=\"medium\"></el-checkbox>\n    <el-checkbox v-model=\"checked4\" label=\"备选项2\" border size=\"medium\"></el-checkbox>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-checkbox-group v-model=\"checkboxGroup1\" size=\"small\">\n      <el-checkbox label=\"备选项1\" border></el-checkbox>\n      <el-checkbox label=\"备选项2\" border disabled></el-checkbox>\n    </el-checkbox-group>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-checkbox-group v-model=\"checkboxGroup2\" size=\"mini\" disabled>\n      <el-checkbox label=\"备选项1\" border></el-checkbox>\n      <el-checkbox label=\"备选项2\" border></el-checkbox>\n    </el-checkbox-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        checked1: true,\n        checked2: false,\n        checked3: false,\n        checked4: true,\n        checkboxGroup1: [],\n        checkboxGroup2: []\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Checkbox Attributes\n| 参数      | 说明    | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| value / v-model | 绑定值 | string / number / boolean | — | — |\n| label     | 选中状态的值（只有在`checkbox-group`或者绑定对象类型为`array`时有效）| string / number / boolean  |       —        |     —    |\n| true-label | 选中时的值   | string / number | — |     —    |\n| false-label | 没有选中时的值   | string / number    |      —         |     —    |\n| disabled  | 是否禁用    | boolean   |  — | false   |\n| border  | 是否显示边框  | boolean   | — | false   |\n| size  | Checkbox 的尺寸，仅在 border 为真时有效  | string  | medium / small / mini | — |\n| name | 原生 name 属性 | string    |      —         |     —    |\n| checked  | 当前是否勾选    | boolean   |  — | false   |\n| indeterminate  | 设置 indeterminate 状态，只负责样式控制    | boolean   |  — | false   |\n\n### Checkbox Events\n| 事件名称      | 说明    | 回调参数      |\n|---------- |-------- |---------- |\n| change  | 当绑定值变化时触发的事件 | 更新后的值 |\n\n### Checkbox-group Attributes\n| 参数      | 说明    | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| value / v-model | 绑定值 | array | — | — |\n| size     | 多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效   | string  | medium / small / mini  |    —     |\n| disabled  | 是否禁用    | boolean   | — | false   |\n| min     | 可被勾选的 checkbox 的最小数量   | number    |       —        |     —    |\n| max     | 可被勾选的 checkbox 的最大数量   | number    |       —        |     —    |\n| text-color  | 按钮形式的 Checkbox 激活时的文本颜色    | string   | — | #ffffff   |\n| fill  | 按钮形式的 Checkbox 激活时的填充色和边框色    | string   | — | #409EFF   |\n\n### Checkbox-group Events\n| 事件名称      | 说明    | 回调参数      |\n|---------- |-------- |---------- |\n| change  | 当绑定值变化时触发的事件 | 更新后的值 |\n\n### Checkbox-button Attributes\n| 参数      | 说明    | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| label     | 选中状态的值（只有在`checkbox-group`或者绑定对象类型为`array`时有效）| string / number / boolean  |       —        |     —    |\n| true-label | 选中时的值   | string / number | — |     —    |\n| false-label | 没有选中时的值   | string / number    |      —         |     —    |\n| disabled  | 是否禁用    | boolean   |  — | false   |\n| name | 原生 name 属性 | string    |      —         |     —    |\n| checked  | 当前是否勾选    | boolean   |  — | false   |\n"
  },
  {
    "path": "examples/docs/zh-CN/collapse.md",
    "content": "## Collapse 折叠面板\n\n通过折叠面板收纳内容区域\n\n### 基础用法\n\n可同时展开多个面板，面板之间不影响\n\n:::demo\n```html\n<el-collapse v-model=\"activeNames\" @change=\"handleChange\">\n  <el-collapse-item title=\"一致性 Consistency\" name=\"1\">\n    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>\n    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>\n  </el-collapse-item>\n  <el-collapse-item title=\"反馈 Feedback\" name=\"2\">\n    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>\n    <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>\n  </el-collapse-item>\n  <el-collapse-item title=\"效率 Efficiency\" name=\"3\">\n    <div>简化流程：设计简洁直观的操作流程；</div>\n    <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>\n    <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>\n  </el-collapse-item>\n  <el-collapse-item title=\"可控 Controllability\" name=\"4\">\n    <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>\n    <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>\n  </el-collapse-item>\n</el-collapse>\n<script>\n  export default {\n    data() {\n      return {\n        activeNames: ['1']\n      };\n    },\n    methods: {\n      handleChange(val) {\n        console.log(val);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 手风琴效果\n\n每次只能展开一个面板\n\n:::demo 通过 `accordion` 属性来设置是否以手风琴模式显示。\n```html\n<el-collapse v-model=\"activeName\" accordion>\n  <el-collapse-item title=\"一致性 Consistency\" name=\"1\">\n    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>\n    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>\n  </el-collapse-item>\n  <el-collapse-item title=\"反馈 Feedback\" name=\"2\">\n    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>\n    <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>\n  </el-collapse-item>\n  <el-collapse-item title=\"效率 Efficiency\" name=\"3\">\n    <div>简化流程：设计简洁直观的操作流程；</div>\n    <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>\n    <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>\n  </el-collapse-item>\n  <el-collapse-item title=\"可控 Controllability\" name=\"4\">\n    <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>\n    <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>\n  </el-collapse-item>\n</el-collapse>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: '1'\n      };\n    }\n  }\n</script>\n```\n:::\n\n### 自定义面板标题\n\n除了可以通过 `title` 属性以外，还可以通过具名 `slot` 来实现自定义面板的标题内容，以实现增加图标等效果。\n\n:::demo\n```html\n<el-collapse accordion>\n  <el-collapse-item>\n    <template slot=\"title\">\n      一致性 Consistency<i class=\"header-icon el-icon-info\"></i>\n    </template>\n    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>\n    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>\n  </el-collapse-item>\n  <el-collapse-item title=\"反馈 Feedback\">\n    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>\n    <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>\n  </el-collapse-item>\n  <el-collapse-item title=\"效率 Efficiency\">\n    <div>简化流程：设计简洁直观的操作流程；</div>\n    <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>\n    <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>\n  </el-collapse-item>\n  <el-collapse-item title=\"可控 Controllability\">\n    <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>\n    <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>\n  </el-collapse-item>\n</el-collapse>\n```\n:::\n\n### Collapse Attributes\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| value / v-model | 当前激活的面板(如果是手风琴模式，绑定值类型需要为`string`，否则为`array`) | string / array | — | — |\n| accordion | 是否手风琴模式 | boolean | — | false |\n\n### Collapse Events\n| 事件名称 | 说明 | 回调参数 |\n|---------|---------|---------|\n| change | 当前激活面板改变时触发(如果是手风琴模式，参数 `activeNames` 类型为`string`，否则为`array`) | (activeNames: array / string) |\n\n### Collapse Item Attributes\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| name      | 唯一标志符      | string/number | —     | —    |\n| title     | 面板标题        | string        | —     | —    |\n| disabled  | 是否禁用        | boolean       | —     | —    |\n"
  },
  {
    "path": "examples/docs/zh-CN/color-picker.md",
    "content": "## ColorPicker 颜色选择器\n\n用于颜色选择，支持多种格式。\n\n### 基础用法\n\n:::demo 使用 v-model 与 Vue 实例中的一个变量进行双向绑定，绑定的变量需要是字符串类型。\n```html\n<div class=\"block\">\n  <span class=\"demonstration\">有默认值</span>\n  <el-color-picker v-model=\"color1\"></el-color-picker>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">无默认值</span>\n  <el-color-picker v-model=\"color2\"></el-color-picker>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        color1: '#409EFF',\n        color2: null\n      }\n    }\n  };\n</script>\n```\n:::\n\n### 选择透明度\n\n:::demo ColorPicker 支持普通颜色，也支持带 Alpha 通道的颜色，通过`show-alpha`属性即可控制是否支持透明度的选择。\n```html\n<el-color-picker v-model=\"color\" show-alpha></el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color: 'rgba(19, 206, 102, 0.8)'\n      }\n    }\n  };\n</script>\n```\n:::\n\n### 预定义颜色\n\n:::demo ColorPicker 支持预定义颜色\n```html\n<el-color-picker\n  v-model=\"color\"\n  show-alpha\n  :predefine=\"predefineColors\">\n</el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color: 'rgba(255, 69, 0, 0.68)',\n        predefineColors: [\n          '#ff4500',\n          '#ff8c00',\n          '#ffd700',\n          '#90ee90',\n          '#00ced1',\n          '#1e90ff',\n          '#c71585',\n          'rgba(255, 69, 0, 0.68)',\n          'rgb(255, 120, 0)',\n          'hsv(51, 100, 98)',\n          'hsva(120, 40, 94, 0.5)',\n          'hsl(181, 100%, 37%)',\n          'hsla(209, 100%, 56%, 0.73)',\n          '#c7158577'\n        ]\n      }\n    }\n  };\n</script>\n```\n:::\n\n### 不同尺寸\n\n:::demo\n```html\n<el-color-picker v-model=\"color\"></el-color-picker>\n<el-color-picker v-model=\"color\" size=\"medium\"></el-color-picker>\n<el-color-picker v-model=\"color\" size=\"small\"></el-color-picker>\n<el-color-picker v-model=\"color\" size=\"mini\"></el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color: '#409EFF'\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Attributes\n| 参数      | 说明    | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| value / v-model | 绑定值 | string | — | — |\n| disabled | 是否禁用 | boolean | — | false |\n| size | 尺寸 | string | medium / small / mini | — |\n| show-alpha | 是否支持透明度选择 | boolean | — | false |\n| color-format | 写入 v-model 的颜色的格式 | string | hsl / hsv / hex / rgb | hex（show-alpha 为 false）/ rgb（show-alpha 为 true） |\n| popper-class | ColorPicker 下拉框的类名 | string | — | — |\n| predefine | 预定义颜色 | array | — | — |\n\n### Events\n| 事件名称      | 说明    | 回调参数      |\n|---------- |-------- |---------- |\n| change | 当绑定值变化时触发 | 当前值 |\n| active-change | 面板中当前显示的颜色发生改变时触发 | 当前显示的颜色值 |\n"
  },
  {
    "path": "examples/docs/zh-CN/color.md",
    "content": "<script>\n  import bus from '../../bus';\n  import { tintColor } from '../../color.js';\n  import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';\n  const varMap = {\n    'primary': '$--color-primary',\n    'success': '$--color-success',\n    'warning': '$--color-warning',\n    'danger': '$--color-danger',\n    'info': '$--color-info',\n    'white': '$--color-white',\n    'black': '$--color-black',\n    'textPrimary': '$--color-text-primary',\n    'textRegular': '$--color-text-regular',\n    'textSecondary': '$--color-text-secondary',\n    'textPlaceholder': '$--color-text-placeholder',\n    'borderBase': '$--border-color-base',\n    'borderLight': '$--border-color-light',\n    'borderLighter': '$--border-color-lighter',\n    'borderExtraLight': '$--border-color-extra-light'\n  };\n  const original = {\n    primary: '#409EFF',\n    success: '#67C23A',\n    warning: '#E6A23C',\n    danger: '#F56C6C',\n    info: '#909399',\n    white: '#FFFFFF',\n    black: '#000000',\n    textPrimary: '#303133',\n    textRegular: '#606266',\n    textSecondary: '#909399',\n    textPlaceholder: '#C0C4CC',\n    borderBase: '#DCDFE6',\n    borderLight: '#E4E7ED',\n    borderLighter: '#EBEEF5',\n    borderExtraLight: '#F2F6FC'\n  }\n  export default {\n    created() {\n      bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);\n    },\n    mounted() {\n      this.setGlobal();\n    },\n    methods: {\n      tintColor(color, tint) {\n        return tintColor(color, tint);\n      },\n      setGlobal() {\n        if (window.userThemeConfig) {\n          this.global = window.userThemeConfig.global;\n        }\n      }\n    },\n    data() {\n      return {\n        global: {},\n        primary: '',\n        success: '',\n        warning: '',\n        danger: '',\n        info: '',\n        white: '',\n        black: '',\n        textPrimary: '',\n        textRegular: '',\n        textSecondary: '',\n        textPlaceholder: '',\n        borderBase: '',\n        borderLight: '',\n        borderLighter: '',\n        borderExtraLight: ''\n      }\n    },\n    watch: {\n      global: {\n        immediate: true,\n        handler(value) {\n          Object.keys(original).forEach((o) => {\n            if (value[varMap[o]]) {\n              this[o] = value[varMap[o]]\n            } else {\n              this[o] = original[o]\n            }\n          });\n        }\n      }\n    },\n  }\n</script>\n\n## Color 色彩\n\nElement 为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。\n\n### 主色\n\nElement 主要品牌颜色是鲜艳、友好的蓝色。\n\n<el-row :gutter=\"12\">\n  <el-col :span=\"10\" :xs=\"{span: 12}\">\n    <div class=\"demo-color-box\" :style=\"{ background: primary }\">Brand Color\n      <div class=\"value\">#409EFF</div>\n      <div class=\"bg-color-sub\" :style=\"{ background: tintColor(primary, 0.9) }\">\n        <div\n          class=\"bg-blue-sub-item\"\n          v-for=\"(item, key) in Array(8)\"\n          :key=\"key\"\n          :style=\"{ background: tintColor(primary, (key + 1) / 10) }\"\n        ></div>\n      </div>\n    </div>\n  </el-col>\n</el-row>\n\n### 辅助色\n\n除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。\n\n<el-row :gutter=\"12\">\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"demo-color-box\"\n    :style=\"{ background: success }\"\n    >Success<div class=\"value\">#67C23A</div>\n      <div \n        class=\"bg-color-sub\"\n      >\n        <div \n          class=\"bg-success-sub-item\" \n          v-for=\"(item, key) in Array(2)\"\n          :key=\"key\"\n          :style=\"{ background: tintColor(success, (key + 8) / 10) }\"\n            >\n        </div>\n      </div>\n    </div>\n  </el-col>\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"demo-color-box\"\n    :style=\"{ background: warning }\"\n    >Warning<div class=\"value\">#E6A23C</div>\n      <div \n          class=\"bg-color-sub\"\n        >\n        <div \n          class=\"bg-success-sub-item\" \n          v-for=\"(item, key) in Array(2)\"\n          :key=\"key\"\n          :style=\"{ background: tintColor(warning, (key + 8) / 10) }\"\n            >\n        </div>\n      </div>\n    </div>\n  </el-col>\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"demo-color-box\"\n    :style=\"{ background: danger }\"\n    >Danger<div class=\"value\">#F56C6C</div>\n      <div \n          class=\"bg-color-sub\"\n        >\n        <div \n          class=\"bg-success-sub-item\" \n          v-for=\"(item, key) in Array(2)\"\n          :key=\"key\"\n          :style=\"{ background: tintColor(danger, (key + 8) / 10) }\"\n            >\n        </div>\n      </div>\n    </div>\n  </el-col>\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"demo-color-box\"\n    :style=\"{ background: info }\"\n    >Info<div class=\"value\">#909399</div>\n      <div \n          class=\"bg-color-sub\"\n        >\n        <div \n          class=\"bg-success-sub-item\" \n          v-for=\"(item, key) in Array(2)\"\n          :key=\"key\"\n          :style=\"{ background: tintColor(info, (key + 8) / 10) }\"\n            >\n        </div>\n      </div>\n    </div>\n  </el-col>\n</el-row>\n\n### 中性色\n\n中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。\n\n<el-row :gutter=\"12\">\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"demo-color-box-group\">\n      <div class=\"demo-color-box demo-color-box-other\"\n      :style=\"{ background: textPrimary }\"\n      >主要文字<div class=\"value\">{{textPrimary}}</div></div>\n      <div class=\"demo-color-box demo-color-box-other\"\n      :style=\"{ background: textRegular }\"\n      >\n      常规文字<div class=\"value\">{{textRegular}}</div></div>\n      <div class=\"demo-color-box demo-color-box-other\"\n      :style=\"{ background: textSecondary }\"\n      >次要文字<div class=\"value\">{{textSecondary}}</div></div>\n      <div class=\"demo-color-box demo-color-box-other\"\n      :style=\"{ background: textPlaceholder }\"\n      >占位文字<div class=\"value\">{{textPlaceholder}}</div></div>\n    </div>\n  </el-col>\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"demo-color-box-group\">\n      <div class=\"demo-color-box demo-color-box-other demo-color-box-lite\"\n      :style=\"{ background: borderBase }\"\n      >一级边框<div class=\"value\">{{borderBase}}</div></div>\n      <div class=\"demo-color-box demo-color-box-other demo-color-box-lite\"\n      :style=\"{ background: borderLight }\"\n      >二级边框<div class=\"value\">{{borderLight}}</div></div>\n      <div class=\"demo-color-box demo-color-box-other demo-color-box-lite\"\n      :style=\"{ background: borderLighter }\"\n      >三级边框<div class=\"value\">{{borderLighter}}</div></div>\n      <div class=\"demo-color-box demo-color-box-other demo-color-box-lite\"\n      :style=\"{ background: borderExtraLight }\"\n      >四级边框<div class=\"value\">{{borderExtraLight}}</div></div>\n    </div>\n  </el-col>\n  <el-col :span=\"6\" :xs=\"{span: 12}\">\n    <div class=\"demo-color-box-group\">\n      <div \n      class=\"demo-color-box demo-color-box-other\"\n      :style=\"{ background: black }\"\n      >基础黑色<div class=\"value\">{{black}}</div></div>\n      <div\n      class=\"demo-color-box demo-color-box-other\"\n      :style=\"{ background: white, color: '#303133', border: '1px solid #eee' }\"\n      >基础白色<div class=\"value\">{{white}}</div></div>\n      <div class=\"demo-color-box demo-color-box-other bg-transparent\">透明<div class=\"value\">Transparent</div>\n      </div>\n    </div>\n  </el-col>\n</el-row>\n"
  },
  {
    "path": "examples/docs/zh-CN/container.md",
    "content": "## Container 布局容器\n用于布局的容器组件，方便快速搭建页面的基本结构：\n\n`<el-container>`：外层容器。当子元素中包含 `<el-header>` 或 `<el-footer>` 时，全部子元素会垂直上下排列，否则会水平左右排列。\n\n`<el-header>`：顶栏容器。\n\n`<el-aside>`：侧边栏容器。\n\n`<el-main>`：主要区域容器。\n\n`<el-footer>`：底栏容器。\n\n:::tip\n以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，`<el-container>` 的子元素只能是后四者，后四者的父元素也只能是 `<el-container>`。\n:::\n\n### 常见页面布局\n\n:::demo\n```html\n<el-container>\n  <el-header>Header</el-header>\n  <el-main>Main</el-main>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-main>Main</el-main>\n  <el-footer>Footer</el-footer>\n</el-container>\n\n<el-container>\n  <el-aside width=\"200px\">Aside</el-aside>\n  <el-main>Main</el-main>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-container>\n    <el-aside width=\"200px\">Aside</el-aside>\n    <el-main>Main</el-main>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-container>\n    <el-aside width=\"200px\">Aside</el-aside>\n    <el-container>\n      <el-main>Main</el-main>\n      <el-footer>Footer</el-footer>\n    </el-container>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-aside width=\"200px\">Aside</el-aside>\n  <el-container>\n    <el-header>Header</el-header>\n    <el-main>Main</el-main>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-aside width=\"200px\">Aside</el-aside>\n  <el-container>\n    <el-header>Header</el-header>\n    <el-main>Main</el-main>\n    <el-footer>Footer</el-footer>\n  </el-container>\n</el-container>\n\n<style>\n  .el-header, .el-footer {\n    background-color: #B3C0D1;\n    color: #333;\n    text-align: center;\n    line-height: 60px;\n  }\n  \n  .el-aside {\n    background-color: #D3DCE6;\n    color: #333;\n    text-align: center;\n    line-height: 200px;\n  }\n  \n  .el-main {\n    background-color: #E9EEF3;\n    color: #333;\n    text-align: center;\n    line-height: 160px;\n  }\n  \n  body > .el-container {\n    margin-bottom: 40px;\n  }\n  \n  .el-container:nth-child(5) .el-aside,\n  .el-container:nth-child(6) .el-aside {\n    line-height: 260px;\n  }\n  \n  .el-container:nth-child(7) .el-aside {\n    line-height: 320px;\n  }\n</style>\n```\n:::\n\n### 实例\n\n:::demo\n```html\n<el-container style=\"height: 500px; border: 1px solid #eee\">\n  <el-aside width=\"200px\" style=\"background-color: rgb(238, 241, 246)\">\n    <el-menu :default-openeds=\"['1', '3']\">\n      <el-submenu index=\"1\">\n        <template slot=\"title\"><i class=\"el-icon-message\"></i>导航一</template>\n        <el-menu-item-group>\n          <template slot=\"title\">分组一</template>\n          <el-menu-item index=\"1-1\">选项1</el-menu-item>\n          <el-menu-item index=\"1-2\">选项2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title=\"分组2\">\n          <el-menu-item index=\"1-3\">选项3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index=\"1-4\">\n          <template slot=\"title\">选项4</template>\n          <el-menu-item index=\"1-4-1\">选项4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-submenu index=\"2\">\n        <template slot=\"title\"><i class=\"el-icon-menu\"></i>导航二</template>\n        <el-menu-item-group>\n          <template slot=\"title\">分组一</template>\n          <el-menu-item index=\"2-1\">选项1</el-menu-item>\n          <el-menu-item index=\"2-2\">选项2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title=\"分组2\">\n          <el-menu-item index=\"2-3\">选项3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index=\"2-4\">\n          <template slot=\"title\">选项4</template>\n          <el-menu-item index=\"2-4-1\">选项4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-submenu index=\"3\">\n        <template slot=\"title\"><i class=\"el-icon-setting\"></i>导航三</template>\n        <el-menu-item-group>\n          <template slot=\"title\">分组一</template>\n          <el-menu-item index=\"3-1\">选项1</el-menu-item>\n          <el-menu-item index=\"3-2\">选项2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title=\"分组2\">\n          <el-menu-item index=\"3-3\">选项3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index=\"3-4\">\n          <template slot=\"title\">选项4</template>\n          <el-menu-item index=\"3-4-1\">选项4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n    </el-menu>\n  </el-aside>\n  \n  <el-container>\n    <el-header style=\"text-align: right; font-size: 12px\">\n      <el-dropdown>\n        <i class=\"el-icon-setting\" style=\"margin-right: 15px\"></i>\n        <el-dropdown-menu slot=\"dropdown\">\n          <el-dropdown-item>查看</el-dropdown-item>\n          <el-dropdown-item>新增</el-dropdown-item>\n          <el-dropdown-item>删除</el-dropdown-item>\n        </el-dropdown-menu>\n      </el-dropdown>\n      <span>王小虎</span>\n    </el-header>\n    \n    <el-main>\n      <el-table :data=\"tableData\">\n        <el-table-column prop=\"date\" label=\"日期\" width=\"140\">\n        </el-table-column>\n        <el-table-column prop=\"name\" label=\"姓名\" width=\"120\">\n        </el-table-column>\n        <el-table-column prop=\"address\" label=\"地址\">\n        </el-table-column>\n      </el-table>\n    </el-main>\n  </el-container>\n</el-container>\n\n<style>\n  .el-header {\n    background-color: #B3C0D1;\n    color: #333;\n    line-height: 60px;\n  }\n  \n  .el-aside {\n    color: #333;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      const item = {\n        date: '2016-05-02',\n        name: '王小虎',\n        address: '上海市普陀区金沙江路 1518 弄'\n      };\n      return {\n        tableData: Array(20).fill(item)\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Container Attributes\n| 参数    | 说明     | 类型    | 可选值      | 默认值 |\n|---------|----------|---------|-------------|--------|\n| direction | 子元素的排列方向 | string | horizontal / vertical | 子元素中有 `el-header` 或 `el-footer` 时为 vertical，否则为 horizontal |\n\n### Header Attributes\n| 参数    | 说明     | 类型    | 可选值      | 默认值 |\n|---------|----------|---------|-------------|--------|\n| height | 顶栏高度 | string | — | 60px |\n\n### Aside Attributes\n| 参数    | 说明     | 类型    | 可选值      | 默认值 |\n|---------|----------|---------|-------------|--------|\n| width | 侧边栏宽度 | string | — | 300px |\n\n### Footer Attributes\n| 参数    | 说明     | 类型    | 可选值      | 默认值 |\n|---------|----------|---------|-------------|--------|\n| height | 底栏高度 | string | — | 60px |"
  },
  {
    "path": "examples/docs/zh-CN/custom-theme.md",
    "content": "## 自定义主题\nElement 默认提供一套主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。我们提供了四种方法，可以进行不同程度的样式自定义。\n\n### 主题编辑器\n使用[在线主题编辑器](./#/zh-CN/theme)，可以修改定制 Element 所有全局和组件的 Design Tokens，并可以方便地实时预览样式改变后的视觉。同时它还可以基于新的定制样式生成完整的样式文件包，供直接下载使用（关于如何使用下载的主题包，请参考本节「引入自定义主题」部分）。\n\n也可以使用[主题编辑器 Chrome 插件](https://chrome.google.com/webstore/detail/element-theme-roller/lifkjlojflekabbmlddfccdkphlelmim)，在任何使用 Element 开发的网站上配置并实时预览主题。\n\n<img src=\"https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png\" style=\"width: 100%;margin: 30px auto 0;display: block;\">\n\n### 仅替换主题色\n如果仅希望更换 Element 的主题色，推荐使用[在线主题生成工具](https://elementui.github.io/theme-chalk-preview)。Element 默认的主题色是鲜艳、友好的蓝色。通过替换主题色，能够让 Element 的视觉更加符合具体项目的定位。\n\n使用上述工具，可以很方便地实时预览主题色改变之后的视觉，同时它还可以基于新的主题色生成完整的样式文件包，供直接下载使用（关于如何使用下载的主题包，请参考本节「引入自定义主题」和「搭配插件按需引入组件主题」部分）。\n\n### 在项目中改变 SCSS 变量\nElement 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element 的样式变量。新建一个样式文件，例如 `element-variables.scss`，写入以下内容：\n```html\n/* 改变主题色变量 */\n$--color-primary: teal;\n\n/* 改变 icon 字体路径变量，必需 */\n$--font-path: '~element-ui/lib/theme-chalk/fonts';\n\n@import \"~element-ui/packages/theme-chalk/src/index\";\n```\n\n之后，在项目的入口文件中，直接引入以上样式文件即可（无需引入 Element 编译好的 CSS 文件）：\n```JS\nimport Vue from 'vue'\nimport Element from 'element-ui'\nimport './element-variables.scss'\n\nVue.use(Element)\n```\n\n:::tip\n需要注意的是，覆盖字体路径变量是必需的，将其赋值为 Element 中 icon 图标所在的相对路径即可。\n:::\n\n### 命令行主题工具\n如果你的项目没有使用 SCSS，那么可以使用命令行主题工具进行深层次的主题定制：\n\n#### <strong>安装工具</strong>\n首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动，这里以全局安装做演示。\n```shell\nnpm i element-theme -g\n```\n\n安装白垩主题，可以从 npm 安装或者从 GitHub 拉取最新代码。\n```shell\n# 从 npm\nnpm i element-theme-chalk -D\n\n# 从 GitHub\nnpm i https://github.com/ElementUI/theme-chalk -D\n```\n\n#### <strong>初始化变量文件</strong>\n主题生成工具安装成功后，如果全局安装可以在命令行里通过 `et` 调用工具，如果安装在当前目录下，需要通过 `node_modules/.bin/et` 访问到命令。执行 `-i` 初始化变量文件。默认输出到 `element-variables.scss`，当然你可以传参数指定文件输出目录。\n\n```shell\net -i [可以自定义变量文件]\n\n> ✔ Generator variables file\n```\n\n如果使用默认配置，执行后当前目录会有一个 `element-variables.scss` 文件。内部包含了主题所用到的所有变量，它们使用 SCSS 的格式定义。大致结构如下：\n```css\n$--color-primary: #409EFF !default;\n$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */\n$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */\n$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */\n$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */\n$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */\n$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */\n$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */\n$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */\n$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */\n\n$--color-success: #67c23a !default;\n$--color-warning: #e6a23c !default;\n$--color-danger: #f56c6c !default;\n$--color-info: #909399 !default;\n\n...\n```\n\n#### <strong>修改变量</strong>\n直接编辑 `element-variables.scss` 文件，例如修改主题色为红色。\n```CSS\n$--color-primary: red;\n```\n\n#### <strong>编译主题</strong>\n保存文件后，到命令行里执行 `et` 编译主题，如果你想启用 `watch` 模式，实时编译主题，增加 `-w` 参数；如果你在初始化时指定了自定义变量文件，则需要增加 `-c` 参数，并带上你的变量文件名。默认情况下编译的主题目录是放在 `./theme` 下，你可以通过 `-o` 参数指定打包目录。\n```shell\net\n\n> ✔ build theme font\n> ✔ build element theme\n```\n### 使用自定义主题\n#### <strong>引入自定义主题</strong>\n和引入默认主题一样，在代码里直接引用「在线主题编辑器」或「命令行工具」生成的主题的 `theme/index.css` 文件即可。\n\n```javascript\nimport '../theme/index.css'\nimport ElementUI from 'element-ui'\nimport Vue from 'vue'\n\nVue.use(ElementUI)\n```\n\n#### <strong>搭配插件按需引入组件主题</strong>\n如果是搭配 `babel-plugin-component` 一起使用，只需要修改 `.babelrc` 的配置，指定 `styleLibraryName` 路径为自定义主题相对于 `.babelrc` 的路径，注意要加 `~`。\n```json\n{\n  \"plugins\": [\n    [\n      \"component\",\n      {\n        \"libraryName\": \"element-ui\",\n        \"styleLibraryName\": \"~theme\"\n      }\n    ]\n  ]\n}\n```\n\n如果不清楚 `babel-plugin-component` 是什么，请阅读 <a href=\"./#/zh-CN/component/quickstart\">快速上手</a> 一节。更多 `element-theme` 用法请参考[项目仓库](https://github.com/ElementUI/element-theme)。"
  },
  {
    "path": "examples/docs/zh-CN/date-picker.md",
    "content": "\n## DatePicker 日期选择器\n\n用于选择或输入日期\n\n###  选择日\n\n以「日」为基本单位，基础的日期选择控件\n\n:::demo 基本单位由`type`属性指定。快捷选项需配置`picker-options`对象中的`shortcuts`，禁用日期通过 `disabledDate` 设置，传入函数\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">默认</span>\n    <el-date-picker\n      v-model=\"value1\"\n      type=\"date\"\n      placeholder=\"选择日期\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">带快捷选项</span>\n    <el-date-picker\n      v-model=\"value2\"\n      align=\"right\"\n      type=\"date\"\n      placeholder=\"选择日期\"\n      :picker-options=\"pickerOptions\">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions: {\n          disabledDate(time) {\n            return time.getTime() > Date.now();\n          },\n          shortcuts: [{\n            text: '今天',\n            onClick(picker) {\n              picker.$emit('pick', new Date());\n            }\n          }, {\n            text: '昨天',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit('pick', date);\n            }\n          }, {\n            text: '一周前',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit('pick', date);\n            }\n          }]\n        },\n        value1: '',\n        value2: '',\n      };\n    }\n  };\n</script>\n```\n:::\n\n###  其他日期单位\n\n通过扩展基础的日期选择，可以选择周、月、年或多个日期\n\n:::demo\n```html\n<div class=\"container\">\n  <div class=\"block\">\n    <span class=\"demonstration\">周</span>\n    <el-date-picker\n      v-model=\"value1\"\n      type=\"week\"\n      format=\"yyyy 第 WW 周\"\n      placeholder=\"选择周\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">月</span>\n    <el-date-picker\n      v-model=\"value2\"\n      type=\"month\"\n      placeholder=\"选择月\">\n    </el-date-picker>\n  </div>\n</div>\n<div class=\"container\">\n  <div class=\"block\">\n    <span class=\"demonstration\">年</span>\n    <el-date-picker\n      v-model=\"value3\"\n      type=\"year\"\n      placeholder=\"选择年\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">多个日期</span>\n    <el-date-picker\n      type=\"dates\"\n      v-model=\"value4\"\n      placeholder=\"选择一个或多个日期\">\n    </el-date-picker>\n  </div>\n</div>\n<div class=\"container\">\n  <div class=\"block\">\n    <span class=\"demonstration\">多个月</span>\n    <el-date-picker\n      type=\"months\"\n      v-model=\"value5\"\n      placeholder=\"选择一个或多个月\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">多个年</span>\n    <el-date-picker\n      type=\"years\"\n      v-model=\"value6\"\n      placeholder=\"选择一个或多个年\">\n    </el-date-picker>\n  </div>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: '',\n        value2: '',\n        value3: '',\n        value4: '',\n        value5: '',\n        value6: ''\n      };\n    }\n  };\n</script>\n```\n:::\n\n### 选择日期范围\n\n可在一个选择器中便捷地选择一个时间范围\n\n:::demo 在选择日期范围时，默认情况下左右面板会联动。如果希望两个面板各自独立切换当前月份，可以使用`unlink-panels`属性解除联动。\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">默认</span>\n    <el-date-picker\n      v-model=\"value1\"\n      type=\"daterange\"\n      range-separator=\"至\"\n      start-placeholder=\"开始日期\"\n      end-placeholder=\"结束日期\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">带快捷选项</span>\n    <el-date-picker\n      v-model=\"value2\"\n      type=\"daterange\"\n      align=\"right\"\n      unlink-panels\n      range-separator=\"至\"\n      start-placeholder=\"开始日期\"\n      end-placeholder=\"结束日期\"\n      :picker-options=\"pickerOptions\">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions: {\n          shortcuts: [{\n            text: '最近一周',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit('pick', [start, end]);\n            }\n          }, {\n            text: '最近一个月',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit('pick', [start, end]);\n            }\n          }, {\n            text: '最近三个月',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit('pick', [start, end]);\n            }\n          }]\n        },\n        value1: '',\n        value2: ''\n      };\n    }\n  };\n</script>\n```\n:::\n\n\n### 选择月份范围\n\n可在一个选择器中便捷地选择一个月份范围\n\n:::demo 在选择月份范围时，默认情况下左右面板会联动。如果希望两个面板各自独立切换当前年份，可以使用`unlink-panels`属性解除联动。\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">默认</span>\n    <el-date-picker\n      v-model=\"value1\"\n      type=\"monthrange\"\n      range-separator=\"至\"\n      start-placeholder=\"开始月份\"\n      end-placeholder=\"结束月份\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">带快捷选项</span>\n    <el-date-picker\n      v-model=\"value2\"\n      type=\"monthrange\"\n      align=\"right\"\n      unlink-panels\n      range-separator=\"至\"\n      start-placeholder=\"开始月份\"\n      end-placeholder=\"结束月份\"\n      :picker-options=\"pickerOptions\">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions: {\n          shortcuts: [{\n            text: '本月',\n            onClick(picker) {\n              picker.$emit('pick', [new Date(), new Date()]);\n            }\n          }, {\n            text: '今年至今',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date(new Date().getFullYear(), 0);\n              picker.$emit('pick', [start, end]);\n            }\n          }, {\n            text: '最近六个月',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setMonth(start.getMonth() - 6);\n              picker.$emit('pick', [start, end]);\n            }\n          }]\n        },\n        value1: '',\n        value2: ''\n      };\n    }\n  };\n</script>\n```\n:::\n\n\n###  日期格式\n\n使用`format`指定输入框的格式；使用`value-format`指定绑定值的格式。\n\n默认情况下，组件接受并返回`Date`对象。以下为可用的格式化字符串，以 UTC 2017年1月2日 03:04:05 为例：\n\n:::warning\n请注意大小写\n:::\n\n| 格式 | 含义 | 备注 | 举例 |\n|------|------|------|------|------|\n| `yyyy` | 年 | | 2017 |\n| `M`  | 月 | 不补0 | 1 |\n| `MM` | 月 | | 01 |\n| `W`  | 周 | 仅周选择器的 `format` 可用；不补0 | 1 |\n| `WW` | 周 | 仅周选择器的 `format` 可用 | 01 |\n| `d`  | 日 | 不补0 | 2 |\n| `dd` | 日 | | 02 |\n| `H`  | 小时 | 24小时制；不补0 | 3 |\n| `HH` | 小时 | 24小时制 | 03 |\n| `h`  | 小时 | 12小时制，须和 `A` 或 `a` 使用；不补0 | 3 |\n| `hh` | 小时 | 12小时制，须和 `A` 或 `a` 使用 | 03 |\n| `m`  | 分钟 | 不补0 | 4 |\n| `mm` | 分钟 | | 04 |\n| `s`  | 秒 | 不补0 | 5 |\n| `ss` | 秒 | | 05 |\n| `A`  | AM/PM | 仅 `format` 可用，大写 | AM |\n| `a`  | am/pm | 仅 `format` 可用，小写 | am |\n| `timestamp` | JS时间戳 | 仅 `value-format` 可用；组件绑定值为`number`类型 | 1483326245000 |\n| `[MM]` | 不需要格式化字符 | 使用方括号标识不需要格式化的字符 (如  [A] [MM])  | MM |\n\n:::demo\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">默认为 Date 对象</span>\n    <div class=\"demonstration\">值：{{ value1 }}</div>\n    <el-date-picker\n      v-model=\"value1\"\n      type=\"date\"\n      placeholder=\"选择日期\"\n      format=\"yyyy 年 MM 月 dd 日\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">使用 value-format</span>\n    <div class=\"demonstration\">值：{{ value2 }}</div>\n    <el-date-picker\n      v-model=\"value2\"\n      type=\"date\"\n      placeholder=\"选择日期\"\n      format=\"yyyy 年 MM 月 dd 日\"\n      value-format=\"yyyy-MM-dd\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">时间戳</span>\n    <div class=\"demonstration\">值：{{ value3 }}</div>\n    <el-date-picker\n      v-model=\"value3\"\n      type=\"date\"\n      placeholder=\"选择日期\"\n      format=\"yyyy 年 MM 月 dd 日\"\n      value-format=\"timestamp\">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: '',\n        value2: '',\n        value3: ''\n      };\n    }\n  };\n</script>\n```\n:::\n\n###  默认显示日期\n\n在选择日期范围时，指定起始日期和结束日期的默认时刻。\n\n:::demo 选择日期范围时，默认情况下，起始日期和结束日期的时间部分均为当天的 0 点 0 分 0 秒。通过`default-time`可以分别指定二者的具体时刻。`default-time`接受一个数组，其中的值为形如`12:00:00`的字符串，第一个值控制起始日期的时刻，第二个值控制结束日期的时刻。\n```html\n<template>\n  <div class=\"block\">\n    <p>组件值：{{ value }}</p>\n    <el-date-picker\n      v-model=\"value\"\n      type=\"daterange\"\n      start-placeholder=\"开始日期\"\n      end-placeholder=\"结束日期\"\n      :default-time=\"['00:00:00', '23:59:59']\">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: ''\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Attributes\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| value / v-model | 绑定值 | date(DatePicker) / array(DateRangePicker) | — | — |\n| readonly | 完全只读 | boolean | — | false |\n| disabled | 禁用 | boolean | — | false |\n| editable | 文本框可输入 | boolean | — | true |\n| clearable | 是否显示清除按钮 | boolean | — | true |\n| size          | 输入框尺寸     | string          | large, small, mini  | — |\n| placeholder | 非范围选择时的占位内容 | string | — | — |\n| start-placeholder | 范围选择时开始日期的占位内容 | string | — | — |\n| end-placeholder | 范围选择时结束日期的占位内容 | string | — | — |\n| type | 显示类型 | string | year/month/date/dates/months/years week/datetime/datetimerange/ daterange/monthrange | date |\n| format | 显示在输入框中的格式 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | yyyy-MM-dd |\n| align | 对齐方式 | string | left, center, right | left |\n| popper-class | DatePicker 下拉框的类名 | string | — | — |\n| picker-options | 当前时间日期选择器特有的选项参考下表 | object |  — | {} |\n| range-separator | 选择范围时的分隔符 | string | — | '-' |\n| default-value | 可选，选择器打开时默认显示的时间 | Date | 可被`new Date()`解析 | — |\n| default-time | 范围选择时选中日期所使用的当日内具体时刻 | string[] | 数组，长度为 2，每项值为字符串，形如`12:00:00`，第一项指定开始日期的时刻，第二项指定结束日期的时刻，不指定会使用时刻 `00:00:00` | — |\n| value-format | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | — |\n| name | 原生属性 | string | — | — |\n| unlink-panels | 在范围选择器里取消两个日期面板之间的联动 | boolean | — | false |\n| prefix-icon | 自定义头部图标的类名 | string | — | el-icon-date |\n| clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close |\n| validate-event | 输入时是否触发表单的校验 | boolean | - | true |\n| append-to-body | DetePicker 自身是否插入至 body 元素上。   | boolean   | — | true |\n\n### Picker Options\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | — | — |\n| disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | — | — |\n| cellClassName | 设置日期的 className | Function(Date) | — | — |\n| firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 |\n| onPick | 选中日期后会执行的回调，只有当 `daterange` 或 `datetimerange` 才生效 | Function({ maxDate, minDate }) | — | — |\n\n### Shortcuts\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| text | 标题文本 | string | — | — |\n| onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date()) | function | — | — |\n\n### Events\n| 事件名称      | 说明    | 回调参数      |\n|---------|--------|---------|\n| change | 用户确认选定的值时触发 | 组件绑定值。格式与绑定值一致，可受 `value-format` 控制 |\n| blur | 当 input 失去焦点时触发 | 组件实例 |\n| focus | 当 input 获得焦点时触发 | 组件实例 |\n\n### Methods\n| 方法名 | 说明 | 参数 |\n| ---- | ---- | ---- |\n| focus | 使 input 获取焦点 | — |\n"
  },
  {
    "path": "examples/docs/zh-CN/datetime-picker.md",
    "content": "## DateTimePicker 日期时间选择器\n\n在同一个选择器里选择日期和时间\n\n:::tip\nDateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其他选项可以参照 DatePicker 和 TimePicker。\n:::\n\n###  日期和时间点\n\n:::demo 通过设置`type`属性为`datetime`，即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 Date Picker 相同。\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">默认</span>\n    <el-date-picker\n      v-model=\"value1\"\n      type=\"datetime\"\n      placeholder=\"选择日期时间\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">带快捷选项</span>\n    <el-date-picker\n      v-model=\"value2\"\n      type=\"datetime\"\n      placeholder=\"选择日期时间\"\n      align=\"right\"\n      :picker-options=\"pickerOptions\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">设置默认时间</span>\n    <el-date-picker\n      v-model=\"value3\"\n      type=\"datetime\"\n      placeholder=\"选择日期时间\"\n      default-time=\"12:00:00\">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions: {\n          shortcuts: [{\n            text: '今天',\n            onClick(picker) {\n              picker.$emit('pick', new Date());\n            }\n          }, {\n            text: '昨天',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit('pick', date);\n            }\n          }, {\n            text: '一周前',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit('pick', date);\n            }\n          }]\n        },\n        value1: '',\n        value2: '',\n        value3: ''\n      };\n    }\n  };\n</script>\n```\n:::\n\n### 日期和时间范围\n\n:::demo 设置`type`为`datetimerange`即可选择日期和时间范围\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">默认</span>\n    <el-date-picker\n      v-model=\"value1\"\n      type=\"datetimerange\"\n      range-separator=\"至\"\n      start-placeholder=\"开始日期\"\n      end-placeholder=\"结束日期\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">带快捷选项</span>\n    <el-date-picker\n      v-model=\"value2\"\n      type=\"datetimerange\"\n      :picker-options=\"pickerOptions\"\n      range-separator=\"至\"\n      start-placeholder=\"开始日期\"\n      end-placeholder=\"结束日期\"\n      align=\"right\">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions: {\n          shortcuts: [{\n            text: '最近一周',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit('pick', [start, end]);\n            }\n          }, {\n            text: '最近一个月',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit('pick', [start, end]);\n            }\n          }, {\n            text: '最近三个月',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit('pick', [start, end]);\n            }\n          }]\n        },\n        value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],\n        value2: ''\n      };\n    }\n  };\n</script>\n```\n:::\n\n### 默认的起始与结束时刻\n\n:::demo 使用`datetimerange`进行范围选择时，在日期选择面板中选定起始与结束的日期，默认会使用该日期的`00:00:00`作为起始与结束的时刻；通过选项`default-time`可以控制选中起始与结束日期时所使用的具体时刻。`default-time`接受一个数组，数组每项值为字符串，形如`12:00:00`，其中第一项控制起始日期的具体时刻，第二项控制结束日期的具体时刻。\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">起始日期时刻为 12:00:00</span>\n    <el-date-picker\n      v-model=\"value1\"\n      type=\"datetimerange\"\n      start-placeholder=\"开始日期\"\n      end-placeholder=\"结束日期\"\n      :default-time=\"['12:00:00']\">\n    </el-date-picker>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">起始日期时刻为 12:00:00，结束日期时刻为 08:00:00</span>\n    <el-date-picker\n      v-model=\"value2\"\n      type=\"datetimerange\"\n      align=\"right\"\n      start-placeholder=\"开始日期\"\n      end-placeholder=\"结束日期\"\n      :default-time=\"['12:00:00', '08:00:00']\">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: '',\n        value2: ''\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Attributes\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| value / v-model | 绑定值 | date(DateTimePicker) / array(DateTimeRangePicker) | — | — |\n| readonly | 完全只读 | boolean | — | false |\n| disabled | 禁用 | boolean | — | false |\n| editable | 文本框可输入 | boolean | — | true |\n| clearable | 是否显示清除按钮 | boolean | — | true |\n| size          | 输入框尺寸     | string          | large, small, mini  | — |\n| placeholder | 非范围选择时的占位内容 | string | — | — |\n| start-placeholder | 范围选择时开始日期的占位内容 | string | — | — |\n| end-placeholder | 范围选择时结束日期的占位内容 | string | — | — |\n| time-arrow-control | 是否使用箭头进行时间选择 | boolean | — | false |\n| type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date |\n| format | 显示在输入框中的格式 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | yyyy-MM-dd HH:mm:ss |\n| align | 对齐方式 | string | left, center, right | left |\n| popper-class | DateTimePicker 下拉框的类名 | string | — | — |\n| picker-options | 当前时间日期选择器特有的选项参考下表 | object |  — | {} |\n| range-separator | 选择范围时的分隔符 | string | - | '-' |\n| default-value | 可选，选择器打开时默认显示的时间 | Date | 可被`new Date()`解析 | — |\n| default-time | 选中日期后的默认具体时刻 | 非范围选择时：string / 范围选择时：string[] | 非范围选择时：形如`12:00:00`的字符串；范围选择时：数组，长度为 2，每项值为字符串，形如`12:00:00`，第一项指定开始日期的时刻，第二项指定结束日期的时刻。不指定会使用时刻 `00:00:00` | — |\n| value-format | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | — |\n| name | 原生属性 | string | — | — |\n| unlink-panels | 在范围选择器里取消两个日期面板之间的联动 | boolean | — | false |\n| prefix-icon | 自定义头部图标的类名 | string | — | el-icon-date |\n| clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close |\n\n### Picker Options\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | — | — |\n| disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | — | — |\n| cellClassName | 设置日期的 className | Function(Date) | — | — |\n| firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 |\n\n### Shortcuts\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| text | 标题文本 | string | — | — |\n| onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date()) | function | — | — |\n\n### Events\n| Event Name | Description | Parameters |\n|---------|--------|---------|\n| change | 用户确认选定的值时触发 | 组件绑定值。格式与绑定值一致，可受 `value-format` 控制 |\n| blur | 当 input 失去焦点时触发 | 组件实例 |\n| focus | 当 input 获得焦点时触发 | 组件实例 |\n\n### Methods\n| 方法名 | 说明 | 参数 |\n| ---- | ---- | ---- |\n| focus | 使 input 获取焦点 | — |\n\n### Slots\n| Name    | 说明         |\n|---------|-------------|\n| range-separator  | 自定义分隔符 |\n"
  },
  {
    "path": "examples/docs/zh-CN/descriptions.md",
    "content": "## Descriptions 描述列表\n\n列表形式展示多个字段。\n\n### 基础用法\n\n:::demo\n\n```html\n<el-descriptions title=\"用户信息\">\n    <el-descriptions-item label=\"用户名\">kooriookami</el-descriptions-item>\n    <el-descriptions-item label=\"手机号\">18100000000</el-descriptions-item>\n    <el-descriptions-item label=\"居住地\">苏州市</el-descriptions-item>\n    <el-descriptions-item label=\"备注\">\n      <el-tag size=\"small\">学校</el-tag>\n    </el-descriptions-item>\n    <el-descriptions-item label=\"联系地址\">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>\n</el-descriptions>\n```\n:::\n\n### 不同尺寸\n\n:::demo\n\n```html\n<template>\n  <el-radio-group v-model=\"size\">\n    <el-radio label=\"\">默认</el-radio>\n    <el-radio label=\"medium\">中等</el-radio>\n    <el-radio label=\"small\">小型</el-radio>\n    <el-radio label=\"mini\">超小</el-radio>\n  </el-radio-group>\n\n  <el-descriptions class=\"margin-top\" title=\"带边框列表\" :column=\"3\" :size=\"size\" border>\n    <template slot=\"extra\">\n      <el-button type=\"primary\" size=\"small\">操作</el-button>\n    </template>\n    <el-descriptions-item>\n      <template slot=\"label\">\n        <i class=\"el-icon-user\"></i>\n        用户名\n      </template>\n      kooriookami\n    </el-descriptions-item>\n    <el-descriptions-item>\n      <template slot=\"label\">\n        <i class=\"el-icon-mobile-phone\"></i>\n        手机号\n      </template>\n      18100000000\n    </el-descriptions-item>\n    <el-descriptions-item>\n      <template slot=\"label\">\n        <i class=\"el-icon-location-outline\"></i>\n        居住地\n      </template>\n      苏州市\n    </el-descriptions-item>\n    <el-descriptions-item>\n      <template slot=\"label\">\n        <i class=\"el-icon-tickets\"></i>\n        备注\n      </template>\n      <el-tag size=\"small\">学校</el-tag>\n    </el-descriptions-item>\n    <el-descriptions-item>\n      <template slot=\"label\">\n        <i class=\"el-icon-office-building\"></i>\n        联系地址\n      </template>\n      江苏省苏州市吴中区吴中大道 1188 号\n    </el-descriptions-item>\n  </el-descriptions>\n\n  <el-descriptions class=\"margin-top\" title=\"无边框列表\" :column=\"3\" :size=\"size\">\n    <template slot=\"extra\">\n      <el-button type=\"primary\" size=\"small\">操作</el-button>\n    </template>\n    <el-descriptions-item label=\"用户名\">kooriookami</el-descriptions-item>\n    <el-descriptions-item label=\"手机号\">18100000000</el-descriptions-item>\n    <el-descriptions-item label=\"居住地\">苏州市</el-descriptions-item>\n    <el-descriptions-item label=\"备注\">\n      <el-tag size=\"small\">学校</el-tag>\n    </el-descriptions-item>\n    <el-descriptions-item label=\"联系地址\">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>\n  </el-descriptions>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        size: ''\n      };\n    }\n  }\n</script>\n```\n:::\n\n### 垂直列表\n\n:::demo\n\n```html\n<el-descriptions title=\"垂直带边框列表\" direction=\"vertical\" :column=\"4\" border>\n  <el-descriptions-item label=\"用户名\">kooriookami</el-descriptions-item>\n  <el-descriptions-item label=\"手机号\">18100000000</el-descriptions-item>\n  <el-descriptions-item label=\"居住地\" :span=\"2\">苏州市</el-descriptions-item>\n  <el-descriptions-item label=\"备注\">\n    <el-tag size=\"small\">学校</el-tag>\n  </el-descriptions-item>\n  <el-descriptions-item label=\"联系地址\">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>\n</el-descriptions>\n\n<el-descriptions class=\"margin-top\" title=\"垂直无边框列表\" :column=\"4\" direction=\"vertical\">\n  <el-descriptions-item label=\"用户名\">kooriookami</el-descriptions-item>\n  <el-descriptions-item label=\"手机号\">18100000000</el-descriptions-item>\n  <el-descriptions-item label=\"居住地\" :span=\"2\">苏州市</el-descriptions-item>\n  <el-descriptions-item label=\"备注\">\n    <el-tag size=\"small\">学校</el-tag>\n  </el-descriptions-item>\n  <el-descriptions-item label=\"联系地址\">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>\n</el-descriptions>\n```\n:::\n\n### 自定义样式\n\n:::demo\n\n```html\n<el-descriptions title=\"自定义样式列表\" :column=\"3\" border>\n  <el-descriptions-item label=\"用户名\" label-class-name=\"my-label\" content-class-name=\"my-content\">kooriookami</el-descriptions-item>\n  <el-descriptions-item label=\"手机号\">18100000000</el-descriptions-item>\n  <el-descriptions-item label=\"居住地\">苏州市</el-descriptions-item>\n  <el-descriptions-item label=\"备注\">\n    <el-tag size=\"small\">学校</el-tag>\n  </el-descriptions-item>\n  <el-descriptions-item label=\"联系地址\" :contentStyle=\"{'text-align': 'right'}\">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>\n</el-descriptions>\n<style>\n  .my-label {\n    background: #E1F3D8;\n  }\n\n  .my-content {\n    background: #FDE2E2;\n  }\n</style>\n```\n:::\n\n### Descriptions Attributes\n| 参数          | 说明            | 类型            | 可选值                 | 默认值   |\n|-------------  |---------------- |---------------- |---------------------- |-------- |\n| border        | 是否带有边框         | boolean  |          —             |    false     |\n| column        | 一行 `Descriptions Item` 的数量  | number | — |    3  |\n| direction     | 排列的方向  | string | vertical / horizontal |    horizontal  |\n| size          | 列表的尺寸    | string  |    medium / small / mini  |  — |\n| title         | 标题文本，显示在左上方    | string  |    —  |  — |\n| extra         | 操作区文本，显示在右上方    | string  |    —  |  — |\n| colon         | 是否显示冒号    | boolean  |    —  |  true |\n| labelClassName | 自定义标签类名    | string |    —  |  — |\n| contentClassName | 自定义内容类名    | string |    —  | — |\n| labelStyle | 自定义标签样式 | object |    —  | — |\n| contentStyle | 自定义内容样式    | object |    —  | — |\n\n### Descriptions Slots\n\n| Name | 说明 |\n|------|--------|\n| title | 自定义标题，显示在左上方  |\n| extra | 自定义操作区，显示在右上方  |\n\n### Descriptions Item Attributes\n| 参数          | 说明            | 类型            | 可选值                 | 默认值   |\n|-------------  |---------------- |---------------- |---------------------- |-------- |\n| label          | 标签文本         | string  |          —             |    —     |\n| span          | 列的数量         | number  |          —             |    1     |\n| labelClassName | 自定义标签类名    | string |    —  |  — |\n| contentClassName | 自定义内容类名    | string |    —  | — |\n| labelStyle | 自定义标签样式 | object |    —  | — |\n| contentStyle | 自定义内容样式    | object |    —  | — |\n\n### Descriptions Item Slots\n\n| Name | 说明 |\n|------|--------|\n| label | 自定义标签文本  |\n"
  },
  {
    "path": "examples/docs/zh-CN/dialog.md",
    "content": "## Dialog 对话框\n在保留当前页面状态的情况下，告知用户并承载相关操作。\n\n### 基本用法\n\nDialog 弹出一个对话框，适合需要定制性更大的场景。\n\n:::demo 需要设置`visible`属性，它接收`Boolean`，当为`true`时显示 Dialog。Dialog 分为两个部分：`body`和`footer`，`footer`需要具名为`footer`的`slot`。`title`属性用于定义标题，它是可选的，默认值为空。最后，本例还展示了`before-close`的用法。\n\n```html\n<el-button type=\"text\" @click=\"dialogVisible = true\">点击打开 Dialog</el-button>\n\n<el-dialog\n  title=\"提示\"\n  :visible.sync=\"dialogVisible\"\n  width=\"30%\"\n  :before-close=\"handleClose\">\n  <span>这是一段信息</span>\n  <span slot=\"footer\" class=\"dialog-footer\">\n    <el-button @click=\"dialogVisible = false\">取 消</el-button>\n    <el-button type=\"primary\" @click=\"dialogVisible = false\">确 定</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm('确认关闭？')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n</script>\n```\n:::\n\n:::tip\n`before-close` 仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。如果你在 `footer` 具名 slot 里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 `before-close` 的相关逻辑。\n:::\n\n### 自定义内容\n\nDialog 组件的内容可以是任意的，甚至可以是表格或表单，下面是应用了 Element Table 和 Form 组件的两个样例。\n\n:::demo\n```html\n<!-- Table -->\n<el-button type=\"text\" @click=\"dialogTableVisible = true\">打开嵌套表格的 Dialog</el-button>\n\n<el-dialog title=\"收货地址\" :visible.sync=\"dialogTableVisible\">\n  <el-table :data=\"gridData\">\n    <el-table-column property=\"date\" label=\"日期\" width=\"150\"></el-table-column>\n    <el-table-column property=\"name\" label=\"姓名\" width=\"200\"></el-table-column>\n    <el-table-column property=\"address\" label=\"地址\"></el-table-column>\n  </el-table>\n</el-dialog>\n\n<!-- Form -->\n<el-button type=\"text\" @click=\"dialogFormVisible = true\">打开嵌套表单的 Dialog</el-button>\n\n<el-dialog title=\"收货地址\" :visible.sync=\"dialogFormVisible\">\n  <el-form :model=\"form\">\n    <el-form-item label=\"活动名称\" :label-width=\"formLabelWidth\">\n      <el-input v-model=\"form.name\" autocomplete=\"off\"></el-input>\n    </el-form-item>\n    <el-form-item label=\"活动区域\" :label-width=\"formLabelWidth\">\n      <el-select v-model=\"form.region\" placeholder=\"请选择活动区域\">\n        <el-option label=\"区域一\" value=\"shanghai\"></el-option>\n        <el-option label=\"区域二\" value=\"beijing\"></el-option>\n      </el-select>\n    </el-form-item>\n  </el-form>\n  <div slot=\"footer\" class=\"dialog-footer\">\n    <el-button @click=\"dialogFormVisible = false\">取 消</el-button>\n    <el-button type=\"primary\" @click=\"dialogFormVisible = false\">确 定</el-button>\n  </div>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }],\n        dialogTableVisible: false,\n        dialogFormVisible: false,\n        form: {\n          name: '',\n          region: '',\n          date1: '',\n          date2: '',\n          delivery: false,\n          type: [],\n          resource: '',\n          desc: ''\n        },\n        formLabelWidth: '120px'\n      };\n    }\n  };\n</script>\n```\n:::\n\n### 嵌套的 Dialog\n如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 `append-to-body` 属性。\n:::demo 正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它们平级放置。对于确实需要嵌套 Dialog 的场景，我们提供了`append-to-body`属性。将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。\n```html\n<template>\n  <el-button type=\"text\" @click=\"outerVisible = true\">点击打开外层 Dialog</el-button>\n  \n  <el-dialog title=\"外层 Dialog\" :visible.sync=\"outerVisible\">\n    <el-dialog\n      width=\"30%\"\n      title=\"内层 Dialog\"\n      :visible.sync=\"innerVisible\"\n      append-to-body>\n    </el-dialog>\n    <div slot=\"footer\" class=\"dialog-footer\">\n      <el-button @click=\"outerVisible = false\">取 消</el-button>\n      <el-button type=\"primary\" @click=\"innerVisible = true\">打开内层 Dialog</el-button>\n    </div>\n  </el-dialog>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        outerVisible: false,\n        innerVisible: false\n      };\n    }\n  }\n</script>\n```\n:::\n\n### 居中布局\n\n标题和底部可水平居中\n\n:::demo 将`center`设置为`true`即可使标题和底部居中。`center`仅影响标题和底部区域。Dialog 的内容是任意的，在一些情况下，内容并不适合居中布局。如果需要内容也水平居中，请自行为其添加 CSS。\n\n```html\n<el-button type=\"text\" @click=\"centerDialogVisible = true\">点击打开 Dialog</el-button>\n\n<el-dialog\n  title=\"提示\"\n  :visible.sync=\"centerDialogVisible\"\n  width=\"30%\"\n  center>\n  <span>需要注意的是内容是默认不居中的</span>\n  <span slot=\"footer\" class=\"dialog-footer\">\n    <el-button @click=\"centerDialogVisible = false\">取 消</el-button>\n    <el-button type=\"primary\" @click=\"centerDialogVisible = false\">确 定</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        centerDialogVisible: false\n      };\n    }\n  };\n</script>\n```\n:::\n\n:::tip\nDialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 `ref` 获取相应组件，请在 `open` 事件回调中进行。\n:::\n\n:::tip\n如果 `visible` 属性绑定的变量位于 Vuex 的 store 内，那么 `.sync` 不会正常工作。此时需要去除 `.sync` 修饰符，同时监听 Dialog 的 `open` 和 `close` 事件，在事件回调中执行 Vuex 中对应的 mutation 更新 `visible` 属性绑定的变量的值。\n:::\n\n### Attributes\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| visible   | 是否显示 Dialog，支持 .sync 修饰符 | boolean | — | false |\n| title     | Dialog 的标题，也可通过具名 slot （见下表）传入 | string    | — | — |\n| width     | Dialog 的宽度 | string    | — | 50% |\n| fullscreen     | 是否为全屏 Dialog | boolean    | — | false |\n| top       | Dialog CSS 中的 margin-top 值 | string | — | 15vh |\n| modal     | 是否需要遮罩层   | boolean   | — | true |\n| modal-append-to-body     | 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上   | boolean   | — | true |\n| append-to-body     | Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true   | boolean   | — | false |\n| lock-scroll | 是否在 Dialog 出现时将 body 滚动锁定 | boolean | — | true |\n| custom-class      | Dialog 的自定义类名 | string    | — | — |\n| close-on-click-modal | 是否可以通过点击 modal 关闭 Dialog | boolean    | — | true |\n| close-on-press-escape | 是否可以通过按下 ESC 关闭 Dialog | boolean    | — | true |\n| show-close | 是否显示关闭按钮 | boolean    | — | true |\n| before-close | 关闭前的回调，会暂停 Dialog 的关闭 | function(done)，done 用于关闭 Dialog | — | — |\n| center | 是否对头部和底部采用居中布局 | boolean | — | false |\n| destroy-on-close | 关闭时销毁 Dialog 中的元素 | boolean | — | false |\n\n### Slot\n| name | 说明 |\n|------|--------|\n| — | Dialog 的内容 |\n| title | Dialog 标题区的内容 |\n| footer | Dialog 按钮操作区的内容 |\n\n### Events\n| 事件名称      | 说明    | 回调参数      |\n|---------- |-------- |---------- |\n| open  | Dialog 打开的回调 | — |\n| opened  | Dialog 打开动画结束时的回调 | — |\n| close  | Dialog 关闭的回调 | — |\n| closed | Dialog 关闭动画结束时的回调 | — |\n"
  },
  {
    "path": "examples/docs/zh-CN/divider.md",
    "content": "## Divider 分割线\n\n区隔内容的分割线。\n\n### 基础用法\n\n对不同章节的文本段落进行分割。\n\n:::demo\n```html\n<template>\n  <div>\n    <span>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</span>\n    <el-divider></el-divider>\n    <span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span>\n  </div>\n</template>\n```\n:::\n\n### 设置文案\n\n可以在分割线上自定义文案内容。\n\n\n:::demo\n```html\n<template>\n  <div>\n    <span>头上一片晴天，心中一个想念</span>\n    <el-divider content-position=\"left\">少年包青天</el-divider>\n    <span>饿了别叫妈, 叫饿了么</span>\n    <el-divider><i class=\"el-icon-mobile-phone\"></i></el-divider>\n    <span>为了无法计算的价值</span>\n    <el-divider content-position=\"right\">阿里云</el-divider>\n  </div>\n</template>\n```\n:::\n\n### 垂直分割\n\n:::demo\n```html\n<template>\n  <div>\n    <span>雨纷纷</span>\n    <el-divider direction=\"vertical\"></el-divider>\n    <span>旧故里</span>\n    <el-divider direction=\"vertical\"></el-divider>\n    <span>草木深</span>\n  </div>\n</template>\n```\n:::\n\n### Divider Attributes\n| 参数          | 说明            | 类型            | 可选值                 | 默认值   |\n|-------------  |---------------- |---------------- |---------------------- |-------- |\n| direction      | 设置分割线方向  | string  |            horizontal / vertical          |    horizontal     |\n| content-position      | 设置分割线文案的位置 | string  |  left / right / center  |  center |"
  },
  {
    "path": "examples/docs/zh-CN/drawer.md",
    "content": "## Drawer 抽屉\n\n有些时候, `Dialog` 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, `Drawer` 拥有和 `Dialog` 几乎相同的 API, 在 UI 上带来不一样的体验.\n\n### 基本用法\n\n呼出一个临时的侧边栏, 可以从多个方向呼出\n\n:::demo 需要设置 `visible` 属性，它的**类型**是 `boolean`,当为 **true** 时显示 Drawer。Drawer 分为两个部分：`title` 和 `body`，`title` 需要具名为 **title** 的 `slot`, 也可以通过 `title` 属性来定义，默认值为空。需要注意的是, Drawer 默认是从右往左打开, 当然可以设置对应的 `direction`, 详细请参考 `direction` 用法 最后，本例还展示了 `before-close` 的用法\n\n```html\n<el-radio-group v-model=\"direction\">\n  <el-radio label=\"ltr\">从左往右开</el-radio>\n  <el-radio label=\"rtl\">从右往左开</el-radio>\n  <el-radio label=\"ttb\">从上往下开</el-radio>\n  <el-radio label=\"btt\">从下往上开</el-radio>\n</el-radio-group>\n\n<el-button @click=\"drawer = true\" type=\"primary\" style=\"margin-left: 16px;\">\n  点我打开\n</el-button>\n\n<el-drawer\n  title=\"我是标题\"\n  :visible.sync=\"drawer\"\n  :direction=\"direction\"\n  :before-close=\"handleClose\">\n  <span>我来啦!</span>\n</el-drawer>\n\n<script>\n  export default {\n    data() {\n      return {\n        drawer: false,\n        direction: 'rtl',\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm('确认关闭？')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n</script>\n```\n:::\n\n### 不添加 Title\n\n当你不需要标题到时候, 你还可以去掉标题\n\n:::demo 当遇到不需要 title 的场景时, 可以通过 `withHeader` 这个属性来关闭掉 title 的显示, 这样可以留出更大的空间给到用户, 为了用户的可访问性, 请务必设定 `title` 的值\n\n```html\n<el-button @click=\"drawer = true\" type=\"primary\" style=\"margin-left: 16px;\">\n  点我打开\n</el-button>\n\n<el-drawer\n  title=\"我是标题\"\n  :visible.sync=\"drawer\"\n  :with-header=\"false\">\n  <span>我来啦!</span>\n</el-drawer>\n\n<script>\n  export default {\n    data() {\n      return {\n        drawer: false,\n      };\n    }\n  };\n</script>\n```\n:::\n\n\n### 自定义内容\n\n和 `Dialog` 组件一样, `Drawer` 同样可以在其内部嵌套各种丰富的操作\n\n:::demo\n\n```html\n<el-button type=\"text\" @click=\"table = true\">打开嵌套表格的 Drawer</el-button>\n<el-button type=\"text\" @click=\"dialog = true\">打开嵌套 Form 的 Drawer</el-button>\n<el-drawer\n  title=\"我嵌套了表格!\"\n  :visible.sync=\"table\"\n  direction=\"rtl\"\n  size=\"50%\">\n   <el-table :data=\"gridData\">\n      <el-table-column property=\"date\" label=\"日期\" width=\"150\"></el-table-column>\n      <el-table-column property=\"name\" label=\"姓名\" width=\"200\"></el-table-column>\n      <el-table-column property=\"address\" label=\"地址\"></el-table-column>\n    </el-table>\n</el-drawer>\n\n<el-drawer\n  title=\"我嵌套了 Form !\"\n  :before-close=\"handleClose\"\n  :visible.sync=\"dialog\"\n  direction=\"ltr\"\n  custom-class=\"demo-drawer\"\n  ref=\"drawer\"\n  >\n  <div class=\"demo-drawer__content\">\n    <el-form :model=\"form\">\n      <el-form-item label=\"活动名称\" :label-width=\"formLabelWidth\">\n        <el-input v-model=\"form.name\" autocomplete=\"off\"></el-input>\n      </el-form-item>\n      <el-form-item label=\"活动区域\" :label-width=\"formLabelWidth\">\n        <el-select v-model=\"form.region\" placeholder=\"请选择活动区域\">\n          <el-option label=\"区域一\" value=\"shanghai\"></el-option>\n          <el-option label=\"区域二\" value=\"beijing\"></el-option>\n        </el-select>\n      </el-form-item>\n    </el-form>\n    <div class=\"demo-drawer__footer\">\n      <el-button @click=\"cancelForm\">取 消</el-button>\n      <el-button type=\"primary\" @click=\"$refs.drawer.closeDrawer()\" :loading=\"loading\">{{ loading ? '提交中 ...' : '确 定' }}</el-button>\n    </div>\n  </div>\n</el-drawer>\n\n<script>\nexport default {\n  data() {\n    return {\n      table: false,\n      dialog: false,\n      loading: false,\n      gridData: [{\n        date: '2016-05-02',\n        name: '王小虎',\n        address: '上海市普陀区金沙江路 1518 弄'\n      }, {\n        date: '2016-05-04',\n        name: '王小虎',\n        address: '上海市普陀区金沙江路 1518 弄'\n      }, {\n        date: '2016-05-01',\n        name: '王小虎',\n        address: '上海市普陀区金沙江路 1518 弄'\n      }, {\n        date: '2016-05-03',\n        name: '王小虎',\n        address: '上海市普陀区金沙江路 1518 弄'\n      }],\n      form: {\n        name: '',\n        region: '',\n        date1: '',\n        date2: '',\n        delivery: false,\n        type: [],\n        resource: '',\n        desc: ''\n      },\n      formLabelWidth: '80px',\n      timer: null,\n    };\n  },\n  methods: {\n    handleClose(done) {\n      if (this.loading) {\n        return;\n      }\n      this.$confirm('确定要提交表单吗？')\n        .then(_ => {\n          this.loading = true;\n          this.timer = setTimeout(() => {\n            done();\n            // 动画关闭需要一定的时间\n            setTimeout(() => {\n              this.loading = false;\n            }, 400);\n          }, 2000);\n        })\n        .catch(_ => {});\n    },\n    cancelForm() {\n      this.loading = false;\n      this.dialog = false;\n      clearTimeout(this.timer);\n    }\n  }\n}\n</script>\n```\n:::\n\n### 多层嵌套\n\n`Drawer` 组件也拥有多层嵌套的方法\n\n:::demo 同样, 如果你需要嵌套多层 `Drawer` 请一定要设置 `append-to-body` 属性为 **true**\n\n```html\n\n<el-button @click=\"drawer = true\" type=\"primary\" style=\"margin-left: 16px;\">\n  点我打开\n</el-button>\n\n<el-drawer\n  title=\"我是外面的 Drawer\"\n  :visible.sync=\"drawer\"\n  size=\"50%\">\n  <div>\n   <el-button @click=\"innerDrawer = true\">打开里面的!</el-button>\n   <el-drawer\n     title=\"我是里面的\"\n     :append-to-body=\"true\"\n     :before-close=\"handleClose\"\n     :visible.sync=\"innerDrawer\">\n     <p>_(:зゝ∠)_</p>\n   </el-drawer>\n  </div>\n</el-drawer>\n\n<script>\n  export default {\n    data() {\n      return {\n        drawer: false,\n        innerDrawer: false,\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm('还有未保存的工作哦确定关闭吗？')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n</script>\n\n```\n:::\n\n:::tip\n\nDrawer 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 `ref` 获取相应组件，请在 `open` 事件回调中进行。\n\n:::\n\n:::tip\n\nDrawer 提供一个 `destroyOnClose` API, 用来在关闭 Drawer 时销毁子组件内容, 例如清理表单内的状态, 在必要时可以将该属性设置为 **true** 用来保证初始状态的一致性\n\n:::\n\n:::tip\n\n如果 `visible` 属性绑定的变量位于 Vuex 的 store 内，那么 `.sync` 不会正常工作。此时需要去除 `.sync` 修饰符，同时监听 Drawer 的 `open` 和 `close` 事件，在事件回调中执行 Vuex 中对应的 mutation 更新 `visible` 属性绑定的变量的值。\n\n:::\n\n### Drawer Attributes\n\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| append-to-body     | Drawer 自身是否插入至 body 元素上。嵌套的 Drawer 必须指定该属性并赋值为 true   | boolean   | — | false |\n| before-close | 关闭前的回调，会暂停 Drawer 的关闭 | function(done)，done 用于关闭 Drawer | — | — |\n| close-on-press-escape | 是否可以通过按下 ESC 关闭 Drawer | boolean    | — | true |\n| custom-class      | Drawer 的自定义类名 | string    | — | — |\n| destroy-on-close | 控制是否在关闭 Drawer 之后将子元素全部销毁 | boolean | - | false |\n| modal     | 是否需要遮罩层   | boolean   | — | true |\n| modal-append-to-body     | 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Drawer 的父元素上   | boolean   | — | true |\n| direction | Drawer 打开的方向 | Direction | rtl / ltr / ttb / btt | rtl |\n| show-close | 是否显示关闭按钮 | boolean    | — | true |\n| size | Drawer 窗体的大小, 当使用 `number` 类型时, 以像素为单位, 当使用 `string` 类型时, 请传入 'x%', 否则便会以 `number` 类型解释 | number / string | - | '30%' |\n| title     | Drawer 的标题，也可通过具名 slot （见下表）传入 | string    | — | — |\n| visible   | 是否显示 Drawer，支持 .sync 修饰符 | boolean | — | false |\n| wrapperClosable | 点击遮罩层是否可以关闭 Drawer | boolean | - | true |\n| withHeader | 控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title attribute 和 title slot 均不生效 | boolean | - | true |\n\n### Drawer Slot\n\n| name | 说明 |\n|------|--------|\n| — | Drawer 的内容 |\n| title | Drawer 标题区的内容 |\n\n### Drawer Methods\n\n| name | 说明 |\n| ---- | ---  |\n| closeDrawer | 用于关闭 Drawer, 该方法会调用传入的 `before-close` 方法 |\n\n### Drawer Events\n\n| 事件名称      | 说明    | 回调参数      |\n|---------- |-------- |---------- |\n| open  | Drawer 打开的回调 | — |\n| opened  | Drawer 打开动画结束时的回调 | — |\n| close  | Drawer 关闭的回调 | — |\n| closed | Drawer 关闭动画结束时的回调 | — |\n"
  },
  {
    "path": "examples/docs/zh-CN/dropdown.md",
    "content": "## Dropdown 下拉菜单\n\n将动作或菜单折叠到下拉菜单中。\n\n### 基础用法\n\n移动到下拉菜单上，展开更多操作。\n\n:::demo 通过组件`slot`来设置下拉触发的元素以及需要通过具名`slot`为`dropdown` 来设置下拉菜单。默认情况下，下拉按钮只要`hover`即可，无需点击也会显示下拉菜单。\n\n```html\n<el-dropdown>\n  <span class=\"el-dropdown-link\">\n    下拉菜单<i class=\"el-icon-arrow-down el-icon--right\"></i>\n  </span>\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item disabled>双皮奶</el-dropdown-item>\n    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n```\n:::\n\n### 触发对象\n\n可使用按钮触发下拉菜单。\n\n:::demo 设置`split-button`属性来让触发下拉元素呈现为按钮组，左边是功能按钮，右边是触发下拉菜单的按钮，设置为`true`即可。\n\n```html\n<el-dropdown>\n  <el-button type=\"primary\">\n    更多菜单<i class=\"el-icon-arrow-down el-icon--right\"></i>\n  </el-button>\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item>双皮奶</el-dropdown-item>\n    <el-dropdown-item>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n<el-dropdown split-button type=\"primary\" @click=\"handleClick\">\n  更多菜单\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item>双皮奶</el-dropdown-item>\n    <el-dropdown-item>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown {\n    vertical-align: top;\n  }\n  .el-dropdown + .el-dropdown {\n    margin-left: 15px;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      handleClick() {\n        alert('button click');\n      }\n    }\n  }\n</script>\n\n```\n:::\n\n### 触发方式\n\n可以配置 click 激活或者 hover 激活。\n\n:::demo 在`trigger`属性设置为`click`即可。\n```html\n<el-row class=\"block-col-2\">\n  <el-col :span=\"12\">\n    <span class=\"demonstration\">hover 激活</span>\n    <el-dropdown>\n      <span class=\"el-dropdown-link\">\n        下拉菜单<i class=\"el-icon-arrow-down el-icon--right\"></i>\n      </span>\n      <el-dropdown-menu slot=\"dropdown\">\n        <el-dropdown-item icon=\"el-icon-plus\">黄金糕</el-dropdown-item>\n        <el-dropdown-item icon=\"el-icon-circle-plus\">狮子头</el-dropdown-item>\n        <el-dropdown-item icon=\"el-icon-circle-plus-outline\">螺蛳粉</el-dropdown-item>\n        <el-dropdown-item icon=\"el-icon-check\">双皮奶</el-dropdown-item>\n        <el-dropdown-item icon=\"el-icon-circle-check\">蚵仔煎</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n  <el-col :span=\"12\">\n    <span class=\"demonstration\">click 激活</span>\n    <el-dropdown trigger=\"click\">\n      <span class=\"el-dropdown-link\">\n        下拉菜单<i class=\"el-icon-arrow-down el-icon--right\"></i>\n      </span>\n      <el-dropdown-menu slot=\"dropdown\">\n        <el-dropdown-item icon=\"el-icon-plus\">黄金糕</el-dropdown-item>\n        <el-dropdown-item icon=\"el-icon-circle-plus\">狮子头</el-dropdown-item>\n        <el-dropdown-item icon=\"el-icon-circle-plus-outline\">螺蛳粉</el-dropdown-item>\n        <el-dropdown-item icon=\"el-icon-check\">双皮奶</el-dropdown-item>\n        <el-dropdown-item icon=\"el-icon-circle-check\">蚵仔煎</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n</el-row>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n  .demonstration {\n    display: block;\n    color: #8492a6;\n    font-size: 14px;\n    margin-bottom: 20px;\n  }\n</style>\n```\n:::\n\n### 菜单隐藏方式\n\n可以`hide-on-click`属性来配置。\n\n:::demo 下拉菜单默认在点击菜单项后会被隐藏，将`hide-on-click`属性默认为`false`可以关闭此功能。\n```html\n<el-dropdown :hide-on-click=\"false\">\n  <span class=\"el-dropdown-link\">\n    下拉菜单<i class=\"el-icon-arrow-down el-icon--right\"></i>\n  </span>\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item disabled>双皮奶</el-dropdown-item>\n    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n```\n:::\n\n### 指令事件\n\n点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作\n\n:::demo\n```html\n<el-dropdown @command=\"handleCommand\">\n  <span class=\"el-dropdown-link\">\n    下拉菜单<i class=\"el-icon-arrow-down el-icon--right\"></i>\n  </span>\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item command=\"a\">黄金糕</el-dropdown-item>\n    <el-dropdown-item command=\"b\">狮子头</el-dropdown-item>\n    <el-dropdown-item command=\"c\">螺蛳粉</el-dropdown-item>\n    <el-dropdown-item command=\"d\" disabled>双皮奶</el-dropdown-item>\n    <el-dropdown-item command=\"e\" divided>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      handleCommand(command) {\n        this.$message('click on item ' + command);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 不同尺寸\n\nDropdown 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的尺寸。\n\n:::demo 额外的尺寸：`medium`、`small`、`mini`，通过设置`size`属性来配置它们。\n\n```html\n<el-dropdown split-button type=\"primary\">\n  默认尺寸\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item>双皮奶</el-dropdown-item>\n    <el-dropdown-item>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size=\"medium\" split-button type=\"primary\">\n  中等尺寸\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item>双皮奶</el-dropdown-item>\n    <el-dropdown-item>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size=\"small\" split-button type=\"primary\">\n  小型尺寸\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item>双皮奶</el-dropdown-item>\n    <el-dropdown-item>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<el-dropdown size=\"mini\" split-button type=\"primary\">\n  超小尺寸\n  <el-dropdown-menu slot=\"dropdown\">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item>双皮奶</el-dropdown-item>\n    <el-dropdown-item>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n```\n:::\n\n### Dropdown Attributes\n| 参数          | 说明            | 类型            | 可选值                 | 默认值   |\n|-------------  |---------------- |---------------- |---------------------- |-------- |\n| type          | 菜单按钮类型，同 Button 组件(只在`split-button`为 true 的情况下有效)   | string  |          —             |    —     |\n| size          | 菜单尺寸，在`split-button`为 true 的情况下也对触发按钮生效  | string | medium / small / mini | — |\n| split-button  | 下拉触发元素呈现为按钮组    | boolean  |    —  |  false |\n| placement    | 菜单弹出位置     | string | top/top-start/top-end/bottom/bottom-start/bottom-end  | bottom-end |\n| trigger       | 触发下拉的行为     | string          | hover, click  | hover |\n| hide-on-click | 是否在点击菜单项后隐藏菜单     | boolean          | — | true |\n| show-timeout  | 展开下拉菜单的延时（仅在 trigger 为 hover 时有效）| number          | — | 250 |\n| hide-timeout  | 收起下拉菜单的延时（仅在 trigger 为 hover 时有效）| number          | — | 150 |\n| tabindex      | Dropdown 组件的 [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | — | 0 |\n| disabled      | 是否禁用        | boolean         | —                      | false |\n\n### Dropdown Slots\n\n| Name | 说明 |\n|------|--------|\n| — | 触发下拉列表显示的元素。 注意： 必须是一个元素或者或者组件  |\n| dropdown | 下拉列表，通常是 `<el-dropdown-menu>` 组件     |\n\n### Dropdown Events\n| 事件名称      | 说明    | 回调参数      |\n|---------- |-------- |---------- |\n| click  | `split-button` 为 true 时，点击左侧按钮的回调 | — |\n| command  | 点击菜单项触发的事件回调 | dropdown-item 的指令 |\n| visible-change | 下拉框出现/隐藏时触发 | 出现则为 true，隐藏则为 false |\n\n### Dropdown Menu Item Attributes\n| 参数          | 说明            | 类型            | 可选值                 | 默认值   |\n|-------------  |---------------- |---------------- |---------------------- |-------- |\n| command       | 指令     | string/number/object          | — | — |\n| disabled      | 禁用     | boolean          | — | false |\n| divided       | 显示分割线     | boolean          | — | false |\n| icon          | 图标类名 | string   |  —  |  —  |\n"
  },
  {
    "path": "examples/docs/zh-CN/empty.md",
    "content": "## Empty 空状态\n\n空状态时的占位提示。\n\n### 基础用法\n\n:::demo\n\n```html\n<el-empty description=\"描述文字\"></el-empty>\n```\n:::\n\n### 自定义图片\n\n通过设置 `image` 属性传入图片 URL。\n\n:::demo\n\n```html\n<el-empty image=\"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png\"></el-empty>\n```\n:::\n\n### 图片尺寸\n\n通过设置 `image-size` 属性来控制图片大小。\n\n:::demo\n\n```html\n<el-empty :image-size=\"200\"></el-empty>\n```\n:::\n\n### 底部内容\n\n使用默认插槽可在底部插入内容。\n\n:::demo\n```html\n<el-empty>\n  <el-button type=\"primary\">按钮</el-button>\n</el-empty>\n```\n:::\n\n### Empty Attributes\n| 参数          | 说明            | 类型            | 可选值                 | 默认值   |\n|-------------  |---------------- |---------------- |---------------------- |-------- |\n| image          | 图片地址         | string  |          —             |    —     |\n| image-size    | 图片大小（宽度）  | number | — |    —  |\n| description  | 文本描述    | string  |    —  |  — |\n\n### Empty Slots\n\n| Name | 说明 |\n|------|--------|\n| default | 自定义底部内容  |\n| image | 自定义图片     |\n| description | 自定义描述文字     |\n"
  },
  {
    "path": "examples/docs/zh-CN/form.md",
    "content": "## Form 表单\n\n由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据\n\n### 典型表单\n\n包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。\n\n:::demo 在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker\n```html\n<el-form ref=\"form\" :model=\"form\" label-width=\"80px\">\n  <el-form-item label=\"活动名称\">\n    <el-input v-model=\"form.name\"></el-input>\n  </el-form-item>\n  <el-form-item label=\"活动区域\">\n    <el-select v-model=\"form.region\" placeholder=\"请选择活动区域\">\n      <el-option label=\"区域一\" value=\"shanghai\"></el-option>\n      <el-option label=\"区域二\" value=\"beijing\"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label=\"活动时间\">\n    <el-col :span=\"11\">\n      <el-date-picker type=\"date\" placeholder=\"选择日期\" v-model=\"form.date1\" style=\"width: 100%;\"></el-date-picker>\n    </el-col>\n    <el-col class=\"line\" :span=\"2\">-</el-col>\n    <el-col :span=\"11\">\n      <el-time-picker placeholder=\"选择时间\" v-model=\"form.date2\" style=\"width: 100%;\"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label=\"即时配送\">\n    <el-switch v-model=\"form.delivery\"></el-switch>\n  </el-form-item>\n  <el-form-item label=\"活动性质\">\n    <el-checkbox-group v-model=\"form.type\">\n      <el-checkbox label=\"美食/餐厅线上活动\" name=\"type\"></el-checkbox>\n      <el-checkbox label=\"地推活动\" name=\"type\"></el-checkbox>\n      <el-checkbox label=\"线下主题活动\" name=\"type\"></el-checkbox>\n      <el-checkbox label=\"单纯品牌曝光\" name=\"type\"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label=\"特殊资源\">\n    <el-radio-group v-model=\"form.resource\">\n      <el-radio label=\"线上品牌商赞助\"></el-radio>\n      <el-radio label=\"线下场地免费\"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label=\"活动形式\">\n    <el-input type=\"textarea\" v-model=\"form.desc\"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type=\"primary\" @click=\"onSubmit\">立即创建</el-button>\n    <el-button>取消</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        form: {\n          name: '',\n          region: '',\n          date1: '',\n          date2: '',\n          delivery: false,\n          type: [],\n          resource: '',\n          desc: ''\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log('submit!');\n      }\n    }\n  }\n</script>\n```\n:::\n\n:::tip\nW3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2)：\n> <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>\n\n即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 `<el-form>` 标签上添加 `@submit.native.prevent`。\n:::\n\n### 行内表单\n\n当垂直方向空间受限且表单较简单时，可以在一行内放置表单。\n\n:::demo 设置 `inline` 属性可以让表单域变为行内的表单域\n```html\n<el-form :inline=\"true\" :model=\"formInline\" class=\"demo-form-inline\">\n  <el-form-item label=\"审批人\">\n    <el-input v-model=\"formInline.user\" placeholder=\"审批人\"></el-input>\n  </el-form-item>\n  <el-form-item label=\"活动区域\">\n    <el-select v-model=\"formInline.region\" placeholder=\"活动区域\">\n      <el-option label=\"区域一\" value=\"shanghai\"></el-option>\n      <el-option label=\"区域二\" value=\"beijing\"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item>\n    <el-button type=\"primary\" @click=\"onSubmit\">查询</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        formInline: {\n          user: '',\n          region: ''\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log('submit!');\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 对齐方式\n\n根据具体目标和制约因素，选择最佳的标签对齐方式。\n\n:::demo 通过设置 `label-position` 属性可以改变表单域标签的位置，可选值为 `top`、`left`，当设为 `top` 时标签会置于表单域的顶部\n```html\n<el-radio-group v-model=\"labelPosition\" size=\"small\">\n  <el-radio-button label=\"left\">左对齐</el-radio-button>\n  <el-radio-button label=\"right\">右对齐</el-radio-button>\n  <el-radio-button label=\"top\">顶部对齐</el-radio-button>\n</el-radio-group>\n<div style=\"margin: 20px;\"></div>\n<el-form :label-position=\"labelPosition\" label-width=\"80px\" :model=\"formLabelAlign\">\n  <el-form-item label=\"名称\">\n    <el-input v-model=\"formLabelAlign.name\"></el-input>\n  </el-form-item>\n  <el-form-item label=\"活动区域\">\n    <el-input v-model=\"formLabelAlign.region\"></el-input>\n  </el-form-item>\n  <el-form-item label=\"活动形式\">\n    <el-input v-model=\"formLabelAlign.type\"></el-input>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        labelPosition: 'right',\n        formLabelAlign: {\n          name: '',\n          region: '',\n          type: ''\n        }\n      };\n    }\n  }\n</script>\n```\n:::\n\n### 表单验证\n\n在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。\n\n:::demo Form 组件提供了表单验证的功能，只需要通过 `rules` 属性传入约定的验证规则，并将 Form-Item 的 `prop` 属性设置为需校验的字段名即可。校验规则参见 [async-validator](https://github.com/yiminghe/async-validator)\n```html\n<el-form :model=\"ruleForm\" :rules=\"rules\" ref=\"ruleForm\" label-width=\"100px\" class=\"demo-ruleForm\">\n  <el-form-item label=\"活动名称\" prop=\"name\">\n    <el-input v-model=\"ruleForm.name\"></el-input>\n  </el-form-item>\n  <el-form-item label=\"活动区域\" prop=\"region\">\n    <el-select v-model=\"ruleForm.region\" placeholder=\"请选择活动区域\">\n      <el-option label=\"区域一\" value=\"shanghai\"></el-option>\n      <el-option label=\"区域二\" value=\"beijing\"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label=\"活动时间\" required>\n    <el-col :span=\"11\">\n      <el-form-item prop=\"date1\">\n        <el-date-picker type=\"date\" placeholder=\"选择日期\" v-model=\"ruleForm.date1\" style=\"width: 100%;\"></el-date-picker>\n      </el-form-item>\n    </el-col>\n    <el-col class=\"line\" :span=\"2\">-</el-col>\n    <el-col :span=\"11\">\n      <el-form-item prop=\"date2\">\n        <el-time-picker placeholder=\"选择时间\" v-model=\"ruleForm.date2\" style=\"width: 100%;\"></el-time-picker>\n      </el-form-item>\n    </el-col>\n  </el-form-item>\n  <el-form-item label=\"即时配送\" prop=\"delivery\">\n    <el-switch v-model=\"ruleForm.delivery\"></el-switch>\n  </el-form-item>\n  <el-form-item label=\"活动性质\" prop=\"type\">\n    <el-checkbox-group v-model=\"ruleForm.type\">\n      <el-checkbox label=\"美食/餐厅线上活动\" name=\"type\"></el-checkbox>\n      <el-checkbox label=\"地推活动\" name=\"type\"></el-checkbox>\n      <el-checkbox label=\"线下主题活动\" name=\"type\"></el-checkbox>\n      <el-checkbox label=\"单纯品牌曝光\" name=\"type\"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label=\"特殊资源\" prop=\"resource\">\n    <el-radio-group v-model=\"ruleForm.resource\">\n      <el-radio label=\"线上品牌商赞助\"></el-radio>\n      <el-radio label=\"线下场地免费\"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label=\"活动形式\" prop=\"desc\">\n    <el-input type=\"textarea\" v-model=\"ruleForm.desc\"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type=\"primary\" @click=\"submitForm('ruleForm')\">立即创建</el-button>\n    <el-button @click=\"resetForm('ruleForm')\">重置</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        ruleForm: {\n          name: '',\n          region: '',\n          date1: '',\n          date2: '',\n          delivery: false,\n          type: [],\n          resource: '',\n          desc: ''\n        },\n        rules: {\n          name: [\n            { required: true, message: '请输入活动名称', trigger: 'blur' },\n            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }\n          ],\n          region: [\n            { required: true, message: '请选择活动区域', trigger: 'change' }\n          ],\n          date1: [\n            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }\n          ],\n          date2: [\n            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }\n          ],\n          type: [\n            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }\n          ],\n          resource: [\n            { required: true, message: '请选择活动资源', trigger: 'change' }\n          ],\n          desc: [\n            { required: true, message: '请填写活动形式', trigger: 'blur' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 自定义校验规则\n\n这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。\n\n:::demo 本例还使用`status-icon`属性为输入框添加了表示校验结果的反馈图标。\n```html\n<el-form :model=\"ruleForm\" status-icon :rules=\"rules\" ref=\"ruleForm\" label-width=\"100px\" class=\"demo-ruleForm\">\n  <el-form-item label=\"密码\" prop=\"pass\">\n    <el-input type=\"password\" v-model=\"ruleForm.pass\" autocomplete=\"off\"></el-input>\n  </el-form-item>\n  <el-form-item label=\"确认密码\" prop=\"checkPass\">\n    <el-input type=\"password\" v-model=\"ruleForm.checkPass\" autocomplete=\"off\"></el-input>\n  </el-form-item>\n  <el-form-item label=\"年龄\" prop=\"age\">\n    <el-input v-model.number=\"ruleForm.age\"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type=\"primary\" @click=\"submitForm('ruleForm')\">提交</el-button>\n    <el-button @click=\"resetForm('ruleForm')\">重置</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      var checkAge = (rule, value, callback) => {\n        if (!value) {\n          return callback(new Error('年龄不能为空'));\n        }\n        setTimeout(() => {\n          if (!Number.isInteger(value)) {\n            callback(new Error('请输入数字值'));\n          } else {\n            if (value < 18) {\n              callback(new Error('必须年满18岁'));\n            } else {\n              callback();\n            }\n          }\n        }, 1000);\n      };\n      var validatePass = (rule, value, callback) => {\n        if (value === '') {\n          callback(new Error('请输入密码'));\n        } else {\n          if (this.ruleForm.checkPass !== '') {\n            this.$refs.ruleForm.validateField('checkPass');\n          }\n          callback();\n        }\n      };\n      var validatePass2 = (rule, value, callback) => {\n        if (value === '') {\n          callback(new Error('请再次输入密码'));\n        } else if (value !== this.ruleForm.pass) {\n          callback(new Error('两次输入密码不一致!'));\n        } else {\n          callback();\n        }\n      };\n      return {\n        ruleForm: {\n          pass: '',\n          checkPass: '',\n          age: ''\n        },\n        rules: {\n          pass: [\n            { validator: validatePass, trigger: 'blur' }\n          ],\n          checkPass: [\n            { validator: validatePass2, trigger: 'blur' }\n          ],\n          age: [\n            { validator: checkAge, trigger: 'blur' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n</script>\n```\n:::\n\n:::tip\n自定义校验 callback 必须被调用。 更多高级用法可参考 [async-validator](https://github.com/yiminghe/async-validator)。\n:::\n\n### 动态增减表单项\n\n:::demo 除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则\n```html\n<el-form :model=\"dynamicValidateForm\" ref=\"dynamicValidateForm\" label-width=\"100px\" class=\"demo-dynamic\">\n  <el-form-item\n    prop=\"email\"\n    label=\"邮箱\"\n    :rules=\"[\n      { required: true, message: '请输入邮箱地址', trigger: 'blur' },\n      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }\n    ]\"\n  >\n    <el-input v-model=\"dynamicValidateForm.email\"></el-input>\n  </el-form-item>\n  <el-form-item\n    v-for=\"(domain, index) in dynamicValidateForm.domains\"\n    :label=\"'域名' + index\"\n    :key=\"domain.key\"\n    :prop=\"'domains.' + index + '.value'\"\n    :rules=\"{\n      required: true, message: '域名不能为空', trigger: 'blur'\n    }\"\n  >\n    <el-input v-model=\"domain.value\"></el-input><el-button @click.prevent=\"removeDomain(domain)\">删除</el-button>\n  </el-form-item>\n  <el-form-item>\n    <el-button type=\"primary\" @click=\"submitForm('dynamicValidateForm')\">提交</el-button>\n    <el-button @click=\"addDomain\">新增域名</el-button>\n    <el-button @click=\"resetForm('dynamicValidateForm')\">重置</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        dynamicValidateForm: {\n          domains: [{\n            value: ''\n          }],\n          email: ''\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      },\n      removeDomain(item) {\n        var index = this.dynamicValidateForm.domains.indexOf(item)\n        if (index !== -1) {\n          this.dynamicValidateForm.domains.splice(index, 1)\n        }\n      },\n      addDomain() {\n        this.dynamicValidateForm.domains.push({\n          value: '',\n          key: Date.now()\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 数字类型验证\n\n:::demo 数字类型的验证需要在 `v-model` 处加上 `.number` 的修饰符，这是 `Vue` 自身提供的用于将绑定值转化为 `number` 类型的修饰符。\n```html\n<el-form :model=\"numberValidateForm\" ref=\"numberValidateForm\" label-width=\"100px\" class=\"demo-ruleForm\">\n  <el-form-item\n    label=\"年龄\"\n    prop=\"age\"\n    :rules=\"[\n      { required: true, message: '年龄不能为空'},\n      { type: 'number', message: '年龄必须为数字值'}\n    ]\"\n  >\n    <el-input v-model.number=\"numberValidateForm.age\" autocomplete=\"off\"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type=\"primary\" @click=\"submitForm('numberValidateForm')\">提交</el-button>\n    <el-button @click=\"resetForm('numberValidateForm')\">重置</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        numberValidateForm: {\n          age: ''\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n</script>\n```\n:::\n\n:::tip\n嵌套在 `el-form-item` 中的 `el-form-item` 标签宽度默认为零，不会继承 `el-form` 的 `label-width`。如果需要可以为其单独设置 `label-width` 属性。\n:::\n\n### 表单内组件尺寸控制\n\n通过设置 Form 上的 `size` 属性可以使该表单内所有可调节大小的组件继承该尺寸。Form-Item 也具有该属性。\n\n:::demo 如果希望某个表单项或某个表单组件的尺寸不同于 Form 上的`size`属性，直接为这个表单项或表单组件设置自己的`size`即可。\n```html\n<el-form ref=\"form\" :model=\"sizeForm\" label-width=\"80px\" size=\"mini\">\n  <el-form-item label=\"活动名称\">\n    <el-input v-model=\"sizeForm.name\"></el-input>\n  </el-form-item>\n  <el-form-item label=\"活动区域\">\n    <el-select v-model=\"sizeForm.region\" placeholder=\"请选择活动区域\">\n      <el-option label=\"区域一\" value=\"shanghai\"></el-option>\n      <el-option label=\"区域二\" value=\"beijing\"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label=\"活动时间\">\n    <el-col :span=\"11\">\n      <el-date-picker type=\"date\" placeholder=\"选择日期\" v-model=\"sizeForm.date1\" style=\"width: 100%;\"></el-date-picker>\n    </el-col>\n    <el-col class=\"line\" :span=\"2\">-</el-col>\n    <el-col :span=\"11\">\n      <el-time-picker placeholder=\"选择时间\" v-model=\"sizeForm.date2\" style=\"width: 100%;\"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label=\"活动性质\">\n    <el-checkbox-group v-model=\"sizeForm.type\">\n      <el-checkbox-button label=\"美食/餐厅线上活动\" name=\"type\"></el-checkbox-button>\n      <el-checkbox-button label=\"地推活动\" name=\"type\"></el-checkbox-button>\n      <el-checkbox-button label=\"线下主题活动\" name=\"type\"></el-checkbox-button>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label=\"特殊资源\">\n    <el-radio-group v-model=\"sizeForm.resource\" size=\"medium\">\n      <el-radio border label=\"线上品牌商赞助\"></el-radio>\n      <el-radio border label=\"线下场地免费\"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item size=\"large\">\n    <el-button type=\"primary\" @click=\"onSubmit\">立即创建</el-button>\n    <el-button>取消</el-button>\n  </el-form-item>\n</el-form>\n\n<script>\n  export default {\n    data() {\n      return {\n        sizeForm: {\n          name: '',\n          region: '',\n          date1: '',\n          date2: '',\n          delivery: false,\n          type: [],\n          resource: '',\n          desc: ''\n        }\n      };\n    },\n    methods: {\n      onSubmit() {\n        console.log('submit!');\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Form Attributes\n\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| model   | 表单数据对象 | object      |                  —                |  — |\n| rules    | 表单验证规则 | object | — | — |\n| inline    | 行内表单模式 | boolean | — | false |\n| label-position | 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 `label-width` | string |  right/left/top            | right |\n| label-width | 表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 `auto`。 | string | — | — |\n| label-suffix | 表单域标签的后缀 | string | — | — |\n| hide-required-asterisk | 是否隐藏必填字段的标签旁边的红色星号 | boolean | — | false |\n| show-message  | 是否显示校验错误信息 | boolean | — | true |\n| inline-message  | 是否以行内形式展示校验信息 | boolean | — | false |\n| status-icon  | 是否在输入框中显示校验结果反馈图标 | boolean | — | false |\n| validate-on-rule-change  | 是否在 `rules` 属性改变后立即触发一次验证 | boolean | — | true |\n| size  | 用于控制该表单内组件的尺寸 | string | medium / small / mini | — |\n| disabled | 是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效 | boolean | — | false |\n\n### Form Methods\n\n| 方法名      | 说明          | 参数\n|---------- |-------------- | --------------\n| validate | 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise | Function(callback: Function(boolean, object))\n| validateField | 对部分表单字段进行校验的方法 | Function(props: array \\| string, callback: Function(errorMessage: string))\n| resetFields | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 | —\n| clearValidate | 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果 | Function(props: array \\| string)\n\n### Form Events\n| 事件名称 | 说明    | 回调参数  |\n|--------- |-------- |---------- |\n| validate | 任一表单项被校验后触发 | 被校验的表单项 prop 值，校验是否通过，错误消息（如果存在） |\n\n### Form-Item Attributes\n\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| prop    | 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的 | string    | 传入 Form 组件的 `model` 中的字段 | — |\n| label | 标签文本 | string | — | — |\n| label-width | 表单域标签的的宽度，例如 '50px'。支持 `auto`。 | string |       —       | — |\n| required | 是否必填，如不设置，则会根据校验规则自动生成 | boolean | — | false |\n| rules    | 表单验证规则 | object | — | — |\n| error    | 表单域验证错误信息, 设置该值会使表单验证状态变为`error`，并显示该错误信息 | string | — | — |\n| show-message  | 是否显示校验错误信息 | boolean | — | true |\n| inline-message  | 以行内形式展示校验信息 | boolean | — | false |\n| size  | 用于控制该表单域下组件的尺寸 | string | medium / small / mini | - |\n\n### Form-Item Slot\n| name | 说明 |\n|------|--------|\n| — | Form Item 的内容 |\n| label | 标签文本的内容 |\n\n### Form-Item Scoped Slot\n|  name  |   说明  |\n|--------|--------|\n|  error | 自定义表单校验信息的显示方式，参数为 { error } |\n\n### Form-Item Methods\n\n| 方法名      | 说明          | 参数\n|---------- |-------------- | --------------\n| resetField | 对该表单项进行重置，将其值重置为初始值并移除校验结果 | -\n| clearValidate | 移除该表单项的校验结果 | -\n"
  },
  {
    "path": "examples/docs/zh-CN/i18n.md",
    "content": "## 国际化\n\nElement 组件内部默认使用中文，若希望使用其他语言，则需要进行多语言设置。以英文为例，在 main.js 中：\n\n```javascript\n// 完整引入 Element\nimport Vue from 'vue'\nimport ElementUI from 'element-ui'\nimport locale from 'element-ui/lib/locale/lang/en'\n\nVue.use(ElementUI, { locale })\n```\n\n或\n\n```javascript\n// 按需引入 Element\nimport Vue from 'vue'\nimport { Button, Select } from 'element-ui'\nimport lang from 'element-ui/lib/locale/lang/en'\nimport locale from 'element-ui/lib/locale'\n\n// 设置语言\nlocale.use(lang)\n\n// 引入组件\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n```\n\n如果使用其它语言，默认情况下中文语言包依旧是被引入的，可以使用 webpack 的 NormalModuleReplacementPlugin 替换默认语言包。\n\n**webpack.config.js**\n```javascript\n{\n  plugins: [\n    new webpack.NormalModuleReplacementPlugin(/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/, 'element-ui/lib/locale/lang/en')\n  ]\n}\n```\n\n## 兼容 `vue-i18n@5.x`\n\nElement 兼容 [vue-i18n@5.x](https://github.com/kazupon/vue-i18n)，搭配使用能更方便地实现多语言切换。\n\n```javascript\nimport Vue from 'vue'\nimport VueI18n from 'vue-i18n'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\nVue.use(Element)\n\nVue.config.lang = 'zh-cn'\nVue.locale('zh-cn', zhLocale)\nVue.locale('en', enLocale)\n```\n\n## 兼容其他 i18n 插件\n如果不使用 `vue-i18n@5.x`，而是用其他的 i18n 插件，Element 将无法兼容，但是可以自定义 Element 的 i18n 的处理方法。\n\n```javascript\nimport Vue from 'vue'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(Element, {\n  i18n: function (path, options) {\n    // ...\n  }\n})\n```\n\n## 兼容 `vue-i18n@6.x`\n\n默认不支持 6.x 的 `vue-i18n`，你需要手动处理。\n\n```javascript\nimport Vue from 'vue'\nimport Element from 'element-ui'\nimport VueI18n from 'vue-i18n'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\n\nconst messages = {\n  en: {\n    message: 'hello',\n    ...enLocale // 或者用 Object.assign({ message: 'hello' }, enLocale)\n  },\n  zh: {\n    message: '你好',\n    ...zhLocale // 或者用 Object.assign({ message: '你好' }, zhLocale)\n  }\n}\n// Create VueI18n instance with options\nconst i18n = new VueI18n({\n  locale: 'en', // set locale\n  messages, // set locale messages\n})\n\nVue.use(Element, {\n  i18n: (key, value) => i18n.t(key, value)\n})\n\nnew Vue({ i18n }).$mount('#app')\n```\n\n## 按需加载里定制 i18n\n\n```js\nimport Vue from 'vue'\nimport DatePicker from 'element/lib/date-picker'\nimport VueI18n from 'vue-i18n'\n\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\nimport ElementLocale from 'element-ui/lib/locale'\n\nVue.use(VueI18n)\nVue.use(DatePicker)\n\nconst messages = {\n  en: {\n    message: 'hello',\n    ...enLocale\n  },\n  zh: {\n    message: '你好',\n    ...zhLocale\n  }\n}\n// Create VueI18n instance with options\nconst i18n = new VueI18n({\n  locale: 'en', // set locale\n  messages, // set locale messages\n})\n\nElementLocale.i18n((key, value) => i18n.t(key, value))\n```\n\n## 通过 CDN 的方式加载语言文件\n\n```html\n<script src=\"//unpkg.com/vue@2\"></script>\n<script src=\"//unpkg.com/element-ui\"></script>\n<script src=\"//unpkg.com/element-ui/lib/umd/locale/en.js\"></script>\n\n<script>\n  ELEMENT.locale(ELEMENT.lang.en)\n</script>\n```\n\n搭配 `vue-i18n` 使用\n\n```html\n<script src=\"//unpkg.com/vue@2\"></script>\n<script src=\"//unpkg.com/vue-i18n/dist/vue-i18n.js\"></script>\n<script src=\"//unpkg.com/element-ui\"></script>\n<script src=\"//unpkg.com/element-ui/lib/umd/locale/zh-CN.js\"></script>\n<script src=\"//unpkg.com/element-ui/lib/umd/locale/en.js\"></script>\n\n<script>\n  Vue.locale('en', ELEMENT.lang.en)\n  Vue.locale('zh-cn', ELEMENT.lang.zhCN)\n</script>\n```\n\n目前 Element 内置了以下语言：\n<ul class=\"language-list\">\n  <li>简体中文（zh-CN）</li>\n  <li>英语（en）</li>\n  <li>德语（de）</li>\n  <li>葡萄牙语（pt）</li>\n  <li>西班牙语（es）</li>\n  <li>丹麦语（da）</li>\n  <li>法语（fr）</li>\n  <li>挪威语（nb-NO）</li>\n  <li>繁体中文（zh-TW）</li>\n  <li>意大利语（it）</li>\n  <li>韩语（ko）</li>\n  <li>日语（ja）</li>\n  <li>荷兰语（nl）</li>\n  <li>越南语（vi）</li>\n  <li>俄语（ru-RU）</li>\n  <li>土耳其语（tr-TR）</li>\n  <li>巴西葡萄牙语（pt-br）</li>\n  <li>波斯语（fa）</li>\n  <li>泰语（th）</li>\n  <li>印尼语（id）</li>\n  <li>保加利亚语（bg）</li>\n  <li>波兰语（pl）</li>\n  <li>芬兰语（fi）</li>\n  <li>瑞典语（sv-SE）</li>\n  <li>希腊语（el）</li>\n  <li>斯洛伐克语（sk）</li>\n  <li>加泰罗尼亚语（ca）</li>\n  <li>捷克语（cs-CZ）</li>\n  <li>乌克兰语（ua）</li>\n  <li>土库曼语（tk）</li>\n  <li>泰米尔语（ta）</li>\n  <li>拉脱维亚语（lv）</li>\n  <li>南非荷兰语（af-ZA）</li>\n  <li>爱沙尼亚语（ee）</li>\n  <li>斯洛文尼亚语（sl）</li>\n  <li>阿拉伯语（ar）</li>\n  <li>希伯来语（he）</li>\n  <li>立陶宛语（lt）</li>\n  <li>蒙古语（mn）</li>\n  <li>哈萨克斯坦语（kz）</li>\n  <li>匈牙利语（hu）</li>\n  <li>罗马尼亚语（ro）</li>\n  <li>库尔德语（ku）</li>\n  <li>维吾尔语（ug-CN）</li>\n  <li>高棉语（km）</li>\n  <li>塞尔维亚语（sr）</li>\n  <li>巴斯克语（eu）</li>\n  <li>吉尔吉斯语（kg）</li>\n  <li>亚美尼亚语 (hy)</li>\n  <li>克罗地亚 (hr)</li>\n  <li>世界语 (eo)</li>\n</ul>\n\n如果你需要使用其他的语言，欢迎贡献 PR：只需在 [这里](https://github.com/ElemeFE/element/tree/dev/src/locale/lang) 添加一个语言配置文件即可。\n"
  },
  {
    "path": "examples/docs/zh-CN/icon.md",
    "content": "## Icon 图标\n\n提供了一套常用的图标集合。\n\n### 使用方法\n\n直接通过设置类名为 `el-icon-iconName` 来使用即可。例如：\n\n:::demo\n```html\n<i class=\"el-icon-edit\"></i>\n<i class=\"el-icon-share\"></i>\n<i class=\"el-icon-delete\"></i>\n<el-button type=\"primary\" icon=\"el-icon-search\">搜索</el-button>\n\n```\n:::\n\n### 图标集合\n\n<ul class=\"icon-list\">\n  <li v-for=\"name in $icon\" :key=\"name\">\n    <span>\n      <i :class=\"'el-icon-' + name\"></i>\n      <span class=\"icon-name\">{{'el-icon-' + name}}</span>\n    </span>\n  </li>\n</ul>\n"
  },
  {
    "path": "examples/docs/zh-CN/image.md",
    "content": "## Image 图片\n图片容器，在保留原生img的特性下，支持懒加载，自定义占位、加载失败等\n\n### 基础用法\n\n:::demo 可通过`fit`确定图片如何适应到容器框，同原生 [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)。\n```html\n<div class=\"demo-image\">\n  <div class=\"block\" v-for=\"fit in fits\" :key=\"fit\">\n    <span class=\"demonstration\">{{ fit }}</span>\n    <el-image\n      style=\"width: 100px; height: 100px\"\n      :src=\"url\"\n      :fit=\"fit\"></el-image>\n  </div>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],\n        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 占位内容\n\n:::demo 可通过`slot = placeholder`可自定义占位内容\n```html\n<div class=\"demo-image__placeholder\">\n  <div class=\"block\">\n    <span class=\"demonstration\">默认</span>\n    <el-image :src=\"src\"></el-image>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">自定义</span>\n    <el-image :src=\"src\">\n      <div slot=\"placeholder\" class=\"image-slot\">\n        加载中<span class=\"dot\">...</span>\n      </div>\n    </el-image>\n  </div>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 加载失败\n\n:::demo 可通过`slot = error`可自定义加载失败内容\n```html\n<div class=\"demo-image__error\">\n  <div class=\"block\">\n    <span class=\"demonstration\">默认</span>\n    <el-image></el-image>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">自定义</span>\n    <el-image>\n      <div slot=\"error\" class=\"image-slot\">\n        <i class=\"el-icon-picture-outline\"></i>\n      </div>\n    </el-image>\n  </div>\n</div>\n```\n:::\n\n### 懒加载\n\n:::demo 可通过`lazy`开启懒加载功能，当图片滚动到可视范围内才会加载。可通过`scroll-container`来设置滚动容器，若未定义，则为最近一个`overflow`值为`auto`或`scroll`的父元素。\n```html\n<div class=\"demo-image__lazy\">\n  <el-image v-for=\"url in urls\" :key=\"url\" :src=\"url\" lazy></el-image>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        urls: [\n          'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',\n          'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',\n          'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',\n          'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',\n          'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',\n          'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',\n          'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'\n        ]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 大图预览\n\n:::demo 可通过 `previewSrcList` 开启预览大图的功能。\n```html\n<div class=\"demo-image__preview\">\n  <el-image \n    style=\"width: 100px; height: 100px\"\n    :src=\"url\" \n    :preview-src-list=\"srcList\">\n  </el-image>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',\n        srcList: [\n          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',\n          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'\n        ]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Attributes\n| 参数      | 说明    | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| src | 图片源，同原生 | string | — | - |\n| fit | 确定图片如何适应容器框，同原生 [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) | string | fill / contain / cover / none / scale-down | - |\n| alt | 原生 alt | string | - | - |\n| referrer-policy | 原生 referrerPolicy | string | - | - |\n| lazy | 是否开启懒加载 | boolean | — | false |\n| scroll-container | 开启懒加载后，监听 scroll 事件的容器 | string / HTMLElement | — | 最近一个 overflow 值为 auto 或 scroll 的父元素 |\n| preview-src-list | 开启图片预览功能 | Array | — | - |\n| z-index | 设置图片预览的 z-index | Number | — | 2000 |\n| initial-index | 图片预览初始图片index | Number | — | - |\n\n### Events\n| 事件名称      | 说明    | 回调参数      |\n|---------- |-------- |---------- |\n| load | 图片加载成功触发 | (e: Event) |\n| error | 图片加载失败触发 | (e: Error) |\n\n### Slots\n| 名称    | 说明         |\n|---------|-------------|\n| placeholder | 图片未加载的占位内容 |\n| error | 加载失败的内容 |\n\n\n"
  },
  {
    "path": "examples/docs/zh-CN/infiniteScroll.md",
    "content": "## InfiniteScroll 无限滚动\n\n滚动至底部时，加载更多数据。\n\n### 基础用法\n在要实现滚动加载的列表上上添加`v-infinite-scroll`，并赋值相应的加载方法，可实现滚动到底部时自动执行加载方法。\n:::demo\n```html\n<template>\n  <ul class=\"infinite-list\" v-infinite-scroll=\"load\" style=\"overflow:auto\">\n    <li v-for=\"i in count\" class=\"infinite-list-item\">{{ i }}</li>\n  </ul>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        count: 0\n      }\n    },\n    methods: {\n      load () {\n        this.count += 2\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 禁用加载\n\n:::demo\n```html\n<template>\n  <div class=\"infinite-list-wrapper\" style=\"overflow:auto\">\n    <ul\n      class=\"list\"\n      v-infinite-scroll=\"load\"\n      infinite-scroll-disabled=\"disabled\">\n      <li v-for=\"i in count\" class=\"list-item\">{{ i }}</li>\n    </ul>\n    <p v-if=\"loading\">加载中...</p>\n    <p v-if=\"noMore\">没有更多了</p>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        count: 10,\n        loading: false\n      }\n    },\n    computed: {\n      noMore () {\n        return this.count >= 20\n      },\n      disabled () {\n        return this.loading || this.noMore\n      }\n    },\n    methods: {\n      load () {\n        this.loading = true\n        setTimeout(() => {\n          this.count += 2\n          this.loading = false\n        }, 2000)\n      }\n    }\n  }\n</script>\n```\n:::\n\n\n### Attributes\n\n| 参数           | 说明                           | 类型      | 可选值                               | 默认值  |\n| -------------- | ------------------------------ | --------- | ------------------------------------ | ------- |\n| infinite-scroll-disabled | 是否禁用           | boolean      | - |false |\n| infinite-scroll-delay   | 节流时延，单位为ms   | number       |   - |200   |\n| infinite-scroll-distance| 触发加载的距离阈值，单位为px | number   |- |0 |\n| infinite-scroll-immediate | 是否立即执行加载方法，以防初始状态下内容无法撑满容器。| boolean | - |true |\n"
  },
  {
    "path": "examples/docs/zh-CN/input-number.md",
    "content": "## InputNumber 计数器\n\n仅允许输入标准的数字值，可定义范围\n\n### 基础用法\n\n:::demo 要使用它，只需要在`el-input-number`元素中使用`v-model`绑定变量即可，变量的初始值即为默认值。\n```html\n<template>\n  <el-input-number v-model=\"num\" @change=\"handleChange\" :min=\"1\" :max=\"10\" label=\"描述文字\"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### 禁用状态\n\n:::demo `disabled`属性接受一个`Boolean`，设置为`true`即可禁用整个组件，如果你只需要控制数值在某一范围内，可以设置`min`属性和`max`属性，不设置`min`和`max`时，最小值为 0。\n\n```html\n<template>\n  <el-input-number v-model=\"num\" :disabled=\"true\"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num: 1\n      }\n    }\n  };\n</script>\n```\n:::\n\n### 步数\n\n允许定义递增递减的步数控制\n\n:::demo 设置`step`属性可以控制步长，接受一个`Number`。\n\n```html\n<template>\n  <el-input-number v-model=\"num\" :step=\"2\"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num: 5\n      }\n    }\n  };\n</script>\n```\n:::\n\n### 严格步数\n\n:::demo `step-strictly`属性接受一个`Boolean`。如果这个属性被设置为`true`，则只能输入步数的倍数。\n\n```html\n<template>\n  <el-input-number v-model=\"num\" :step=\"2\" step-strictly></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num: 2\n      }\n    }\n  };\n</script>\n```\n:::\n\n### 精度\n\n:::demo 设置 `precision` 属性可以控制数值精度，接收一个 `Number`。\n\n```html\n<template>\n  <el-input-number v-model=\"num\" :precision=\"2\" :step=\"0.1\" :max=\"10\"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num: 1\n      }\n    }\n  };\n</script>\n```\n\n:::\n\n:::tip\n`precision` 的值必须是一个非负整数，并且不能小于 `step` 的小数位数。\n:::\n\n### 尺寸\n\n额外提供了 `medium`、`small`、`mini` 三种尺寸的数字输入框\n\n:::demo\n\n```html\n<template>\n  <el-input-number v-model=\"num1\"></el-input-number>\n  <el-input-number size=\"medium\" v-model=\"num2\"></el-input-number>\n  <el-input-number size=\"small\" v-model=\"num3\"></el-input-number>\n  <el-input-number size=\"mini\" v-model=\"num4\"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num1: 1,\n        num2: 1,\n        num3: 1,\n        num4: 1\n      }\n    }\n  };\n</script>\n```\n:::\n\n### 按钮位置\n\n:::demo 设置 `controls-position` 属性可以控制按钮位置。\n```html\n<template>\n  <el-input-number v-model=\"num\" controls-position=\"right\" @change=\"handleChange\" :min=\"1\" :max=\"10\"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Attributes\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|----------|-------------- |----------|--------------------------------  |-------- |\n| value / v-model    | 绑定值         | number | — | 0 |\n| min      | 设置计数器允许的最小值 | number | — | -Infinity |\n| max      | 设置计数器允许的最大值 | number | — | Infinity |\n| step     | 计数器步长           | number   | — | 1 |\n| step-strictly | 是否只能输入 step 的倍数 | boolean   | — | false |\n| precision| 数值精度             | number   | — | — |\n| size     | 计数器尺寸           | string   | large, small | — |\n| disabled | 是否禁用计数器        | boolean | — | false |\n| controls | 是否使用控制按钮        | boolean | — | true |\n| controls-position | 控制按钮位置 | string | right | - |\n| name | 原生属性 | string | — | — |\n| label | 输入框关联的label文字 | string | — | — |\n| placeholder | 输入框默认 placeholder | string | - | - |\n\n### Events\n| 事件名称 | 说明 | 回调参数 |\n|---------|--------|---------|\n| change | 绑定值被改变时触发 | currentValue, oldValue |\n| blur | 在组件 Input 失去焦点时触发 | (event: Event) |\n| focus | 在组件 Input 获得焦点时触发 | (event: Event) |\n\n### Methods\n| 方法名 | 说明 | 参数 |\n| ---- | ---- | ---- |\n| focus | 使 input 获取焦点 | - |\n| select | 选中 input 中的文字 | — |\n"
  },
  {
    "path": "examples/docs/zh-CN/input.md",
    "content": "## Input 输入框\n\n通过鼠标或键盘输入字符\n\n:::warning\nInput 为受控组件，它**总会显示 Vue 绑定值**。\n\n通常情况下，应当处理 `input` 事件，并更新组件的绑定值（或使用`v-model`）。否则，输入框内显示的值将不会改变。\n\n不支持 `v-model` 修饰符。\n:::\n\n### 基础用法\n\n:::demo\n```html\n<el-input v-model=\"input\" placeholder=\"请输入内容\"></el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input: ''\n    }\n  }\n}\n</script>\n```\n:::\n\n\n### 禁用状态\n\n:::demo 通过 `disabled` 属性指定是否禁用 input 组件\n```html\n<el-input\n  placeholder=\"请输入内容\"\n  v-model=\"input\"\n  :disabled=\"true\">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input: ''\n    }\n  }\n}\n</script>\n```\n:::\n\n### 可清空\n\n:::demo 使用`clearable`属性即可得到一个可清空的输入框\n\n```html\n<el-input\n  placeholder=\"请输入内容\"\n  v-model=\"input\"\n  clearable>\n</el-input>\n\n<script>\n  export default {\n    data() {\n      return {\n        input: ''\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 密码框\n\n:::demo 使用`show-password`属性即可得到一个可切换显示隐藏的密码框\n\n```html\n<el-input placeholder=\"请输入密码\" v-model=\"input\" show-password></el-input>\n\n<script>\n  export default {\n    data() {\n      return {\n        input: ''\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 带 icon 的输入框\n\n带有图标标记输入类型\n\n:::demo 可以通过 `prefix-icon` 和 `suffix-icon` 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。\n```html\n<div class=\"demo-input-suffix\">\n  属性方式：\n  <el-input\n    placeholder=\"请选择日期\"\n    suffix-icon=\"el-icon-date\"\n    v-model=\"input1\">\n  </el-input>\n  <el-input\n    placeholder=\"请输入内容\"\n    prefix-icon=\"el-icon-search\"\n    v-model=\"input2\">\n  </el-input>\n</div>\n<div class=\"demo-input-suffix\">\n  slot 方式：\n  <el-input\n    placeholder=\"请选择日期\"\n    v-model=\"input3\">\n    <i slot=\"suffix\" class=\"el-input__icon el-icon-date\"></i>\n  </el-input>\n  <el-input\n    placeholder=\"请输入内容\"\n    v-model=\"input4\">\n    <i slot=\"prefix\" class=\"el-input__icon el-icon-search\"></i>\n  </el-input>\n</div>\n\n<script>\nexport default {\n  data() {\n    return {\n      input1: '',\n      input2: '',\n      input3: '',\n      input4: ''\n    }\n  }\n}\n</script>\n```\n:::\n\n### 文本域\n\n用于输入多行文本信息，通过将 `type` 属性的值指定为 textarea。\n\n:::demo 文本域高度可通过 `rows` 属性控制\n```html\n<el-input\n  type=\"textarea\"\n  :rows=\"2\"\n  placeholder=\"请输入内容\"\n  v-model=\"textarea\">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      textarea: ''\n    }\n  }\n}\n</script>\n```\n:::\n\n### 可自适应文本高度的文本域\n\n通过设置 `autosize` 属性可以使得文本域的高度能够根据文本内容自动进行调整，并且 `autosize` 还可以设定为一个对象，指定最小行数和最大行数。\n\n:::demo\n```html\n<el-input\n  type=\"textarea\"\n  autosize\n  placeholder=\"请输入内容\"\n  v-model=\"textarea1\">\n</el-input>\n<div style=\"margin: 20px 0;\"></div>\n<el-input\n  type=\"textarea\"\n  :autosize=\"{ minRows: 2, maxRows: 4}\"\n  placeholder=\"请输入内容\"\n  v-model=\"textarea2\">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      textarea1: '',\n      textarea2: ''\n    }\n  }\n}\n</script>\n```\n:::\n\n### 复合型输入框\n\n可前置或后置元素，一般为标签或按钮\n\n:::demo 可通过 slot 来指定在 input 中前置或者后置内容。\n```html\n<div>\n  <el-input placeholder=\"请输入内容\" v-model=\"input1\">\n    <template slot=\"prepend\">Http://</template>\n  </el-input>\n</div>\n<div style=\"margin-top: 15px;\">\n  <el-input placeholder=\"请输入内容\" v-model=\"input2\">\n    <template slot=\"append\">.com</template>\n  </el-input>\n</div>\n<div style=\"margin-top: 15px;\">\n  <el-input placeholder=\"请输入内容\" v-model=\"input3\" class=\"input-with-select\">\n    <el-select v-model=\"select\" slot=\"prepend\" placeholder=\"请选择\">\n      <el-option label=\"餐厅名\" value=\"1\"></el-option>\n      <el-option label=\"订单号\" value=\"2\"></el-option>\n      <el-option label=\"用户电话\" value=\"3\"></el-option>\n    </el-select>\n    <el-button slot=\"append\" icon=\"el-icon-search\"></el-button>\n  </el-input>\n</div>\n<style>\n  .el-select .el-input {\n    width: 130px;\n  }\n  .input-with-select .el-input-group__prepend {\n    background-color: #fff;\n  }\n</style>\n<script>\nexport default {\n  data() {\n    return {\n      input1: '',\n      input2: '',\n      input3: '',\n      select: ''\n    }\n  }\n}\n</script>\n```\n:::\n\n### 尺寸\n\n:::demo 可通过 `size` 属性指定输入框的尺寸，除了默认的大小外，还提供了 medium、small 和 mini 三种尺寸。\n```html\n<div class=\"demo-input-size\">\n  <el-input\n    placeholder=\"请输入内容\"\n    suffix-icon=\"el-icon-date\"\n    v-model=\"input1\">\n  </el-input>\n  <el-input\n    size=\"medium\"\n    placeholder=\"请输入内容\"\n    suffix-icon=\"el-icon-date\"\n    v-model=\"input2\">\n  </el-input>\n  <el-input\n    size=\"small\"\n    placeholder=\"请输入内容\"\n    suffix-icon=\"el-icon-date\"\n    v-model=\"input3\">\n  </el-input>\n  <el-input\n    size=\"mini\"\n    placeholder=\"请输入内容\"\n    suffix-icon=\"el-icon-date\"\n    v-model=\"input4\">\n  </el-input>\n</div>\n\n<script>\nexport default {\n  data() {\n    return {\n      input1: '',\n      input2: '',\n      input3: '',\n      input4: ''\n    }\n  }\n}\n</script>\n```\n:::\n\n### 带输入建议\n\n根据输入内容提供对应的输入建议\n\n:::demo autocomplete 是一个可带输入建议的输入框组件，`fetch-suggestions` 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。\n```html\n<el-row class=\"demo-autocomplete\">\n  <el-col :span=\"12\">\n    <div class=\"sub-title\">激活即列出输入建议</div>\n    <el-autocomplete\n      class=\"inline-input\"\n      v-model=\"state1\"\n      :fetch-suggestions=\"querySearch\"\n      placeholder=\"请输入内容\"\n      @select=\"handleSelect\"\n    ></el-autocomplete>\n  </el-col>\n  <el-col :span=\"12\">\n    <div class=\"sub-title\">输入后匹配输入建议</div>\n    <el-autocomplete\n      class=\"inline-input\"\n      v-model=\"state2\"\n      :fetch-suggestions=\"querySearch\"\n      placeholder=\"请输入内容\"\n      :trigger-on-focus=\"false\"\n      @select=\"handleSelect\"\n    ></el-autocomplete>\n  </el-col>\n</el-row>\n<script>\n  export default {\n    data() {\n      return {\n        restaurants: [],\n        state1: '',\n        state2: ''\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var restaurants = this.restaurants;\n        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;\n        // 调用 callback 返回建议列表的数据\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (restaurant) => {\n          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { \"value\": \"三全鲜食（北新泾店）\", \"address\": \"长宁区新渔路144号\" },\n          { \"value\": \"Hot honey 首尔炸鸡（仙霞路）\", \"address\": \"上海市长宁区淞虹路661号\" },\n          { \"value\": \"新旺角茶餐厅\", \"address\": \"上海市普陀区真北路988号创邑金沙谷6号楼113\" },\n          { \"value\": \"泷千家(天山西路店)\", \"address\": \"天山西路438号\" },\n          { \"value\": \"胖仙女纸杯蛋糕（上海凌空店）\", \"address\": \"上海市长宁区金钟路968号1幢18号楼一层商铺18-101\" },\n          { \"value\": \"贡茶\", \"address\": \"上海市长宁区金钟路633号\" },\n          { \"value\": \"豪大大香鸡排超级奶爸\", \"address\": \"上海市嘉定区曹安公路曹安路1685号\" },\n          { \"value\": \"茶芝兰（奶茶，手抓饼）\", \"address\": \"上海市普陀区同普路1435号\" },\n          { \"value\": \"十二泷町\", \"address\": \"上海市北翟路1444弄81号B幢-107\" },\n          { \"value\": \"星移浓缩咖啡\", \"address\": \"上海市嘉定区新郁路817号\" },\n          { \"value\": \"阿姨奶茶/豪大大\", \"address\": \"嘉定区曹安路1611号\" },\n          { \"value\": \"新麦甜四季甜品炸鸡\", \"address\": \"嘉定区曹安公路2383弄55号\" },\n          { \"value\": \"Monica摩托主题咖啡店\", \"address\": \"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F\" },\n          { \"value\": \"浮生若茶（凌空soho店）\", \"address\": \"上海长宁区金钟路968号9号楼地下一层\" },\n          { \"value\": \"NONO JUICE  鲜榨果汁\", \"address\": \"上海市长宁区天山西路119号\" },\n          { \"value\": \"CoCo都可(北新泾店）\", \"address\": \"上海市长宁区仙霞西路\" },\n          { \"value\": \"快乐柠檬（神州智慧店）\", \"address\": \"上海市长宁区天山西路567号1层R117号店铺\" },\n          { \"value\": \"Merci Paul cafe\", \"address\": \"上海市普陀区光复西路丹巴路28弄6号楼819\" },\n          { \"value\": \"猫山王（西郊百联店）\", \"address\": \"上海市长宁区仙霞西路88号第一层G05-F01-1-306\" },\n          { \"value\": \"枪会山\", \"address\": \"上海市普陀区棕榈路\" },\n          { \"value\": \"纵食\", \"address\": \"元丰天山花园(东门) 双流路267号\" },\n          { \"value\": \"钱记\", \"address\": \"上海市长宁区天山西路\" },\n          { \"value\": \"壹杯加\", \"address\": \"上海市长宁区通协路\" },\n          { \"value\": \"唦哇嘀咖\", \"address\": \"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元\" },\n          { \"value\": \"爱茜茜里(西郊百联)\", \"address\": \"长宁区仙霞西路88号1305室\" },\n          { \"value\": \"爱茜茜里(近铁广场)\", \"address\": \"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺\" },\n          { \"value\": \"鲜果榨汁（金沙江路和美广店）\", \"address\": \"普陀区金沙江路2239号金沙和美广场B1-10-6\" },\n          { \"value\": \"开心丽果（缤谷店）\", \"address\": \"上海市长宁区威宁路天山路341号\" },\n          { \"value\": \"超级鸡车（丰庄路店）\", \"address\": \"上海市嘉定区丰庄路240号\" },\n          { \"value\": \"妙生活果园（北新泾店）\", \"address\": \"长宁区新渔路144号\" },\n          { \"value\": \"香宜度麻辣香锅\", \"address\": \"长宁区淞虹路148号\" },\n          { \"value\": \"凡仔汉堡（老真北路店）\", \"address\": \"上海市普陀区老真北路160号\" },\n          { \"value\": \"港式小铺\", \"address\": \"上海市长宁区金钟路968号15楼15-105室\" },\n          { \"value\": \"蜀香源麻辣香锅（剑河路店）\", \"address\": \"剑河路443-1\" },\n          { \"value\": \"北京饺子馆\", \"address\": \"长宁区北新泾街道天山西路490-1号\" },\n          { \"value\": \"饭典*新简餐（凌空SOHO店）\", \"address\": \"上海市长宁区金钟路968号9号楼地下一层9-83室\" },\n          { \"value\": \"焦耳·川式快餐（金钟路店）\", \"address\": \"上海市金钟路633号地下一层甲部\" },\n          { \"value\": \"动力鸡车\", \"address\": \"长宁区仙霞西路299弄3号101B\" },\n          { \"value\": \"浏阳蒸菜\", \"address\": \"天山西路430号\" },\n          { \"value\": \"四海游龙（天山西路店）\", \"address\": \"上海市长宁区天山西路\" },\n          { \"value\": \"樱花食堂（凌空店）\", \"address\": \"上海市长宁区金钟路968号15楼15-105室\" },\n          { \"value\": \"壹分米客家传统调制米粉(天山店)\", \"address\": \"天山西路428号\" },\n          { \"value\": \"福荣祥烧腊（平溪路店）\", \"address\": \"上海市长宁区协和路福泉路255弄57-73号\" },\n          { \"value\": \"速记黄焖鸡米饭\", \"address\": \"上海市长宁区北新泾街道金钟路180号1层01号摊位\" },\n          { \"value\": \"红辣椒麻辣烫\", \"address\": \"上海市长宁区天山西路492号\" },\n          { \"value\": \"(小杨生煎)西郊百联餐厅\", \"address\": \"长宁区仙霞西路88号百联2楼\" },\n          { \"value\": \"阳阳麻辣烫\", \"address\": \"天山西路389号\" },\n          { \"value\": \"南拳妈妈龙虾盖浇饭\", \"address\": \"普陀区金沙江路1699号鑫乐惠美食广场A13\" }\n        ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.restaurants = this.loadAll();\n    }\n  }\n</script>\n```\n:::\n\n### 自定义模板\n\n可自定义输入建议的显示\n\n:::demo 使用`scoped slot`自定义输入建议的模板。该 scope 的参数为`item`，表示当前输入建议对象。\n```html\n<el-autocomplete\n  popper-class=\"my-autocomplete\"\n  v-model=\"state\"\n  :fetch-suggestions=\"querySearch\"\n  placeholder=\"请输入内容\"\n  @select=\"handleSelect\">\n  <i\n    class=\"el-icon-edit el-input__icon\"\n    slot=\"suffix\"\n    @click=\"handleIconClick\">\n  </i>\n  <template slot-scope=\"{ item }\">\n    <div class=\"name\">{{ item.value }}</div>\n    <span class=\"addr\">{{ item.address }}</span>\n  </template>\n</el-autocomplete>\n\n<style>\n.my-autocomplete {\n  li {\n    line-height: normal;\n    padding: 7px;\n\n    .name {\n      text-overflow: ellipsis;\n      overflow: hidden;\n    }\n    .addr {\n      font-size: 12px;\n      color: #b4b4b4;\n    }\n\n    .highlighted .addr {\n      color: #ddd;\n    }\n  }\n}\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        restaurants: [],\n        state: ''\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var restaurants = this.restaurants;\n        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;\n        // 调用 callback 返回建议列表的数据\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (restaurant) => {\n          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { \"value\": \"三全鲜食（北新泾店）\", \"address\": \"长宁区新渔路144号\" },\n          { \"value\": \"Hot honey 首尔炸鸡（仙霞路）\", \"address\": \"上海市长宁区淞虹路661号\" },\n          { \"value\": \"新旺角茶餐厅\", \"address\": \"上海市普陀区真北路988号创邑金沙谷6号楼113\" },\n          { \"value\": \"泷千家(天山西路店)\", \"address\": \"天山西路438号\" },\n          { \"value\": \"胖仙女纸杯蛋糕（上海凌空店）\", \"address\": \"上海市长宁区金钟路968号1幢18号楼一层商铺18-101\" },\n          { \"value\": \"贡茶\", \"address\": \"上海市长宁区金钟路633号\" },\n          { \"value\": \"豪大大香鸡排超级奶爸\", \"address\": \"上海市嘉定区曹安公路曹安路1685号\" },\n          { \"value\": \"茶芝兰（奶茶，手抓饼）\", \"address\": \"上海市普陀区同普路1435号\" },\n          { \"value\": \"十二泷町\", \"address\": \"上海市北翟路1444弄81号B幢-107\" },\n          { \"value\": \"星移浓缩咖啡\", \"address\": \"上海市嘉定区新郁路817号\" },\n          { \"value\": \"阿姨奶茶/豪大大\", \"address\": \"嘉定区曹安路1611号\" },\n          { \"value\": \"新麦甜四季甜品炸鸡\", \"address\": \"嘉定区曹安公路2383弄55号\" },\n          { \"value\": \"Monica摩托主题咖啡店\", \"address\": \"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F\" },\n          { \"value\": \"浮生若茶（凌空soho店）\", \"address\": \"上海长宁区金钟路968号9号楼地下一层\" },\n          { \"value\": \"NONO JUICE  鲜榨果汁\", \"address\": \"上海市长宁区天山西路119号\" },\n          { \"value\": \"CoCo都可(北新泾店）\", \"address\": \"上海市长宁区仙霞西路\" },\n          { \"value\": \"快乐柠檬（神州智慧店）\", \"address\": \"上海市长宁区天山西路567号1层R117号店铺\" },\n          { \"value\": \"Merci Paul cafe\", \"address\": \"上海市普陀区光复西路丹巴路28弄6号楼819\" },\n          { \"value\": \"猫山王（西郊百联店）\", \"address\": \"上海市长宁区仙霞西路88号第一层G05-F01-1-306\" },\n          { \"value\": \"枪会山\", \"address\": \"上海市普陀区棕榈路\" },\n          { \"value\": \"纵食\", \"address\": \"元丰天山花园(东门) 双流路267号\" },\n          { \"value\": \"钱记\", \"address\": \"上海市长宁区天山西路\" },\n          { \"value\": \"壹杯加\", \"address\": \"上海市长宁区通协路\" },\n          { \"value\": \"唦哇嘀咖\", \"address\": \"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元\" },\n          { \"value\": \"爱茜茜里(西郊百联)\", \"address\": \"长宁区仙霞西路88号1305室\" },\n          { \"value\": \"爱茜茜里(近铁广场)\", \"address\": \"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺\" },\n          { \"value\": \"鲜果榨汁（金沙江路和美广店）\", \"address\": \"普陀区金沙江路2239号金沙和美广场B1-10-6\" },\n          { \"value\": \"开心丽果（缤谷店）\", \"address\": \"上海市长宁区威宁路天山路341号\" },\n          { \"value\": \"超级鸡车（丰庄路店）\", \"address\": \"上海市嘉定区丰庄路240号\" },\n          { \"value\": \"妙生活果园（北新泾店）\", \"address\": \"长宁区新渔路144号\" },\n          { \"value\": \"香宜度麻辣香锅\", \"address\": \"长宁区淞虹路148号\" },\n          { \"value\": \"凡仔汉堡（老真北路店）\", \"address\": \"上海市普陀区老真北路160号\" },\n          { \"value\": \"港式小铺\", \"address\": \"上海市长宁区金钟路968号15楼15-105室\" },\n          { \"value\": \"蜀香源麻辣香锅（剑河路店）\", \"address\": \"剑河路443-1\" },\n          { \"value\": \"北京饺子馆\", \"address\": \"长宁区北新泾街道天山西路490-1号\" },\n          { \"value\": \"饭典*新简餐（凌空SOHO店）\", \"address\": \"上海市长宁区金钟路968号9号楼地下一层9-83室\" },\n          { \"value\": \"焦耳·川式快餐（金钟路店）\", \"address\": \"上海市金钟路633号地下一层甲部\" },\n          { \"value\": \"动力鸡车\", \"address\": \"长宁区仙霞西路299弄3号101B\" },\n          { \"value\": \"浏阳蒸菜\", \"address\": \"天山西路430号\" },\n          { \"value\": \"四海游龙（天山西路店）\", \"address\": \"上海市长宁区天山西路\" },\n          { \"value\": \"樱花食堂（凌空店）\", \"address\": \"上海市长宁区金钟路968号15楼15-105室\" },\n          { \"value\": \"壹分米客家传统调制米粉(天山店)\", \"address\": \"天山西路428号\" },\n          { \"value\": \"福荣祥烧腊（平溪路店）\", \"address\": \"上海市长宁区协和路福泉路255弄57-73号\" },\n          { \"value\": \"速记黄焖鸡米饭\", \"address\": \"上海市长宁区北新泾街道金钟路180号1层01号摊位\" },\n          { \"value\": \"红辣椒麻辣烫\", \"address\": \"上海市长宁区天山西路492号\" },\n          { \"value\": \"(小杨生煎)西郊百联餐厅\", \"address\": \"长宁区仙霞西路88号百联2楼\" },\n          { \"value\": \"阳阳麻辣烫\", \"address\": \"天山西路389号\" },\n          { \"value\": \"南拳妈妈龙虾盖浇饭\", \"address\": \"普陀区金沙江路1699号鑫乐惠美食广场A13\" }\n        ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      },\n      handleIconClick(ev) {\n        console.log(ev);\n      }\n    },\n    mounted() {\n      this.restaurants = this.loadAll();\n    }\n  }\n</script>\n```\n:::\n\n### 远程搜索\n\n从服务端搜索数据\n\n:::demo\n```html\n<el-autocomplete\n  v-model=\"state\"\n  :fetch-suggestions=\"querySearchAsync\"\n  placeholder=\"请输入内容\"\n  @select=\"handleSelect\"\n></el-autocomplete>\n<script>\n  export default {\n    data() {\n      return {\n        restaurants: [],\n        state: '',\n        timeout:  null\n      };\n    },\n    methods: {\n      loadAll() {\n        return [\n          { \"value\": \"三全鲜食（北新泾店）\", \"address\": \"长宁区新渔路144号\" },\n          { \"value\": \"Hot honey 首尔炸鸡（仙霞路）\", \"address\": \"上海市长宁区淞虹路661号\" },\n          { \"value\": \"新旺角茶餐厅\", \"address\": \"上海市普陀区真北路988号创邑金沙谷6号楼113\" },\n          { \"value\": \"泷千家(天山西路店)\", \"address\": \"天山西路438号\" },\n          { \"value\": \"胖仙女纸杯蛋糕（上海凌空店）\", \"address\": \"上海市长宁区金钟路968号1幢18号楼一层商铺18-101\" },\n          { \"value\": \"贡茶\", \"address\": \"上海市长宁区金钟路633号\" },\n          { \"value\": \"豪大大香鸡排超级奶爸\", \"address\": \"上海市嘉定区曹安公路曹安路1685号\" },\n          { \"value\": \"茶芝兰（奶茶，手抓饼）\", \"address\": \"上海市普陀区同普路1435号\" },\n          { \"value\": \"十二泷町\", \"address\": \"上海市北翟路1444弄81号B幢-107\" },\n          { \"value\": \"星移浓缩咖啡\", \"address\": \"上海市嘉定区新郁路817号\" },\n          { \"value\": \"阿姨奶茶/豪大大\", \"address\": \"嘉定区曹安路1611号\" },\n          { \"value\": \"新麦甜四季甜品炸鸡\", \"address\": \"嘉定区曹安公路2383弄55号\" },\n          { \"value\": \"Monica摩托主题咖啡店\", \"address\": \"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F\" },\n          { \"value\": \"浮生若茶（凌空soho店）\", \"address\": \"上海长宁区金钟路968号9号楼地下一层\" },\n          { \"value\": \"NONO JUICE  鲜榨果汁\", \"address\": \"上海市长宁区天山西路119号\" },\n          { \"value\": \"CoCo都可(北新泾店）\", \"address\": \"上海市长宁区仙霞西路\" },\n          { \"value\": \"快乐柠檬（神州智慧店）\", \"address\": \"上海市长宁区天山西路567号1层R117号店铺\" },\n          { \"value\": \"Merci Paul cafe\", \"address\": \"上海市普陀区光复西路丹巴路28弄6号楼819\" },\n          { \"value\": \"猫山王（西郊百联店）\", \"address\": \"上海市长宁区仙霞西路88号第一层G05-F01-1-306\" },\n          { \"value\": \"枪会山\", \"address\": \"上海市普陀区棕榈路\" },\n          { \"value\": \"纵食\", \"address\": \"元丰天山花园(东门) 双流路267号\" },\n          { \"value\": \"钱记\", \"address\": \"上海市长宁区天山西路\" },\n          { \"value\": \"壹杯加\", \"address\": \"上海市长宁区通协路\" },\n          { \"value\": \"唦哇嘀咖\", \"address\": \"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元\" },\n          { \"value\": \"爱茜茜里(西郊百联)\", \"address\": \"长宁区仙霞西路88号1305室\" },\n          { \"value\": \"爱茜茜里(近铁广场)\", \"address\": \"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺\" },\n          { \"value\": \"鲜果榨汁（金沙江路和美广店）\", \"address\": \"普陀区金沙江路2239号金沙和美广场B1-10-6\" },\n          { \"value\": \"开心丽果（缤谷店）\", \"address\": \"上海市长宁区威宁路天山路341号\" },\n          { \"value\": \"超级鸡车（丰庄路店）\", \"address\": \"上海市嘉定区丰庄路240号\" },\n          { \"value\": \"妙生活果园（北新泾店）\", \"address\": \"长宁区新渔路144号\" },\n          { \"value\": \"香宜度麻辣香锅\", \"address\": \"长宁区淞虹路148号\" },\n          { \"value\": \"凡仔汉堡（老真北路店）\", \"address\": \"上海市普陀区老真北路160号\" },\n          { \"value\": \"港式小铺\", \"address\": \"上海市长宁区金钟路968号15楼15-105室\" },\n          { \"value\": \"蜀香源麻辣香锅（剑河路店）\", \"address\": \"剑河路443-1\" },\n          { \"value\": \"北京饺子馆\", \"address\": \"长宁区北新泾街道天山西路490-1号\" },\n          { \"value\": \"饭典*新简餐（凌空SOHO店）\", \"address\": \"上海市长宁区金钟路968号9号楼地下一层9-83室\" },\n          { \"value\": \"焦耳·川式快餐（金钟路店）\", \"address\": \"上海市金钟路633号地下一层甲部\" },\n          { \"value\": \"动力鸡车\", \"address\": \"长宁区仙霞西路299弄3号101B\" },\n          { \"value\": \"浏阳蒸菜\", \"address\": \"天山西路430号\" },\n          { \"value\": \"四海游龙（天山西路店）\", \"address\": \"上海市长宁区天山西路\" },\n          { \"value\": \"樱花食堂（凌空店）\", \"address\": \"上海市长宁区金钟路968号15楼15-105室\" },\n          { \"value\": \"壹分米客家传统调制米粉(天山店)\", \"address\": \"天山西路428号\" },\n          { \"value\": \"福荣祥烧腊（平溪路店）\", \"address\": \"上海市长宁区协和路福泉路255弄57-73号\" },\n          { \"value\": \"速记黄焖鸡米饭\", \"address\": \"上海市长宁区北新泾街道金钟路180号1层01号摊位\" },\n          { \"value\": \"红辣椒麻辣烫\", \"address\": \"上海市长宁区天山西路492号\" },\n          { \"value\": \"(小杨生煎)西郊百联餐厅\", \"address\": \"长宁区仙霞西路88号百联2楼\" },\n          { \"value\": \"阳阳麻辣烫\", \"address\": \"天山西路389号\" },\n          { \"value\": \"南拳妈妈龙虾盖浇饭\", \"address\": \"普陀区金沙江路1699号鑫乐惠美食广场A13\" }\n        ];\n      },\n      querySearchAsync(queryString, cb) {\n        var restaurants = this.restaurants;\n        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;\n\n        clearTimeout(this.timeout);\n        this.timeout = setTimeout(() => {\n          cb(results);\n        }, 3000 * Math.random());\n      },\n      createStateFilter(queryString) {\n        return (state) => {\n          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.restaurants = this.loadAll();\n    }\n  };\n</script>\n```\n:::\n\n### 输入长度限制\n\n:::demo  `maxlength` 和 `minlength` 是原生属性，用来限制输入框的字符长度，其中字符长度是用 Javascript 的字符串长度统计的。对于类型为 `text` 或 `textarea` 的输入框，在使用 `maxlength` 属性限制最大输入长度的同时，可通过设置 `show-word-limit` 属性来展示字数统计。\n```html\n<el-input\n  type=\"text\"\n  placeholder=\"请输入内容\"\n  v-model=\"text\"\n  maxlength=\"10\"\n  show-word-limit\n>\n</el-input>\n<div style=\"margin: 20px 0;\"></div>\n<el-input\n  type=\"textarea\"\n  placeholder=\"请输入内容\"\n  v-model=\"textarea\"\n  maxlength=\"30\"\n  show-word-limit\n>\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      text: '',\n      textarea: ''\n    }\n  }\n}\n</script>\n```\n:::\n\n### Input Attributes\n\n| 参数          | 说明            | 类型            | 可选值                 | 默认值   |\n|-------------  |---------------- |---------------- |---------------------- |-------- |\n| type         | 类型   | string  | text，textarea 和其他 [原生 input 的 type 值](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) | text |\n| value / v-model | 绑定值           | string / number  | — | — |\n| maxlength     | 原生属性，最大输入长度      | number          |  —  | — |\n| minlength     | 原生属性，最小输入长度      | number          | — | — |\n| show-word-limit | 是否显示输入字数统计，只在 `type = \"text\"` 或 `type = \"textarea\"` 时有效 | boolean    |  —  | false |\n| placeholder   | 输入框占位文本    | string          | — | — |\n| clearable     | 是否可清空        | boolean         | — | false |\n| show-password | 是否显示切换密码图标| boolean         | — | false |\n| disabled      | 禁用            | boolean         | — | false   |\n| size          | 输入框尺寸，只在 `type!=\"textarea\"` 时有效      | string          | medium / small / mini  | — |\n| prefix-icon   | 输入框头部图标    | string          | — | — |\n| suffix-icon   | 输入框尾部图标    | string          | — | — |\n| rows          | 输入框行数，只对 `type=\"textarea\"` 有效  |  number | — |  2   |\n| autosize      | 自适应内容高度，只对 `type=\"textarea\"` 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }  |  boolean / object | — |  false   |\n| autocomplete | 原生属性，自动补全 | string | on, off | off |\n| auto-complete | 下个主版本弃用 | string | on, off | off |\n| name | 原生属性 | string | — | — |\n| readonly | 原生属性，是否只读 | boolean | — | false |\n| max | 原生属性，设置最大值 | — | — | — |\n| min | 原生属性，设置最小值 | — | — | — |\n| step | 原生属性，设置输入字段的合法数字间隔 | — | — | — |\n| resize | 控制是否能被用户缩放 | string | none, both, horizontal, vertical | — |\n| autofocus | 原生属性，自动获取焦点 | boolean | true, false | false |\n| form | 原生属性 | string | — | — |\n| label | 输入框关联的label文字 | string | — | — |\n| tabindex | 输入框的tabindex | string | - | - |\n| validate-event | 输入时是否触发表单的校验 | boolean | - | true |\n\n### Input Slots\n| name | 说明 |\n|------|--------|\n| prefix | 输入框头部内容，只对 `type=\"text\"` 有效 |\n| suffix | 输入框尾部内容，只对 `type=\"text\"` 有效 |\n| prepend | 输入框前置内容，只对 `type=\"text\"` 有效 |\n| append | 输入框后置内容，只对 `type=\"text\"` 有效 |\n\n### Input Events\n| 事件名称 | 说明 | 回调参数 |\n|---------|--------|---------|\n| blur | 在 Input 失去焦点时触发 | (event: Event) |\n| focus | 在 Input 获得焦点时触发 | (event: Event) |\n| change | 仅在输入框失去焦点或用户按下回车时触发 | (value: string \\| number) |\n| input | 在 Input 值改变时触发 | (value: string \\| number) |\n| clear | 在点击由 `clearable` 属性生成的清空按钮时触发 | — |\n\n### Input Methods\n| 方法名 | 说明 | 参数 |\n| ---- | ---- | ---- |\n| focus | 使 input 获取焦点 | — |\n| blur | 使 input 失去焦点 | — |\n| select | 选中 input 中的文字 | — |\n\n### Autocomplete Attributes\n\n| 参数          | 说明            | 类型            | 可选值                 | 默认值   |\n|-------------  |---------------- |---------------- |---------------------- |-------- |\n| placeholder   | 输入框占位文本   | string          | — | — |\n| disabled      | 禁用            | boolean         | — | false   |\n| value-key | 输入建议对象中用于显示的键名 | string | — | value |\n| value         | 必填值，输入绑定值   | string  | — | — |\n| debounce      | 获取输入建议的去抖延时 | number         | — | 300 |\n| placement     | 菜单弹出位置 | string         | top / top-start / top-end / bottom / bottom-start / bottom-end | bottom-start |\n| fetch-suggestions | 返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它  | Function(queryString, callback)  | — | — |\n| popper-class | Autocomplete 下拉列表的类名 | string | — | — |\n| trigger-on-focus | 是否在输入框 focus 时显示建议列表 | boolean | — | true |\n| name | 原生属性 | string | — | — |\n| select-when-unmatched | 在输入没有任何匹配建议的情况下，按下回车是否触发 `select` 事件 | boolean | — | false |\n| label | 输入框关联的label文字 | string | — | — |\n| prefix-icon | 输入框头部图标 | string | — | — |\n| suffix-icon | 输入框尾部图标 | string | — | — |\n| hide-loading | 是否隐藏远程加载时的加载图标 | boolean | — | false |\n| popper-append-to-body | 是否将下拉列表插入至 body 元素。在下拉列表的定位出现问题时，可将该属性设置为 false | boolean | - | true |\n| highlight-first-item | 是否默认突出显示远程搜索建议中的第一项 | boolean | — | false |\n\n### Autocomplete Slots\n| name | 说明 |\n|------|--------|\n| prefix | 输入框头部内容 |\n| suffix | 输入框尾部内容 |\n| prepend | 输入框前置内容 |\n| append | 输入框后置内容 |\n\n### Autocomplete Scoped Slot\n| name | 说明 |\n|------|--------|\n| — | 自定义输入建议，参数为 { item } |\n\n### Autocomplete Events\n| 事件名称 | 说明 | 回调参数 |\n|---------|--------|---------|\n| select | 点击选中建议项时触发 | 选中建议项 |\n| change | 在 Input 值改变时触发 | (value: string \\| number) |\n\n### Autocomplete Methods\n| 方法名 | 说明 | 参数 |\n| ---- | ---- | ---- |\n| focus | 使 input 获取焦点 | - |\n"
  },
  {
    "path": "examples/docs/zh-CN/installation.md",
    "content": "## 安装\n\n### npm 安装\n\n推荐使用 npm 的方式安装，它能更好地和 [webpack](https://webpack.js.org/) 打包工具配合使用。\n\n```shell\nnpm i element-ui -S\n```\n\n### CDN\n\n目前可以通过 [unpkg.com/element-ui](https://unpkg.com/element-ui/) 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。\n\n```html\n<!-- 引入样式 -->\n<link rel=\"stylesheet\" href=\"https://unpkg.com/element-ui/lib/theme-chalk/index.css\">\n<!-- 引入组件库 -->\n<script src=\"https://unpkg.com/element-ui/lib/index.js\"></script>\n```\n\n:::tip\n我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看 [unpkg.com](https://unpkg.com)。\n:::\n\n### Hello world\n\n通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](https://codepen.io/bofeng/pen/poaEmJY)\n\n<iframe height=\"265\" style=\"width: 100%;\" scrolling=\"no\" title=\"Element demo\" src=\"//codepen.io/bofeng/embed/poaEmJY/?height=265&theme-id=light&default-tab=html\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href='https://codepen.io/bofeng/pen/poaEmJY/'>Element demo</a> by hetech\n  (<a href='https://codepen.io/bofeng'>@bofeng</a>) on <a href='https://codepen.io'>CodePen</a>.\n</iframe>\n\n如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：[快速上手](/#/zh-CN/component/quickstart)。\n"
  },
  {
    "path": "examples/docs/zh-CN/layout.md",
    "content": "## Layout 布局\n\n通过基础的 24 分栏，迅速简便地创建布局。\n\n### 基础布局\n\n使用单一分栏创建基础的栅格布局。\n\n:::demo 通过 row 和 col 组件，并通过 col 组件的 `span` 属性我们就可以自由地组合布局。\n```html\n<el-row>\n  <el-col :span=\"24\"><div class=\"grid-content bg-purple-dark\"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span=\"12\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"12\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span=\"8\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"8\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"8\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n```\n:::\n\n### 分栏间隔\n\n分栏之间存在间隔。\n\n:::demo Row 组件 提供 `gutter` 属性来指定每一栏之间的间隔，默认间隔为 0。\n```html\n<el-row :gutter=\"20\">\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n```\n:::\n\n### 混合布局\n\n通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。\n\n:::demo\n```html\n<el-row :gutter=\"20\">\n  <el-col :span=\"16\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"8\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row :gutter=\"20\">\n  <el-col :span=\"8\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"8\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row :gutter=\"20\">\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"16\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n```\n:::\n\n### 分栏偏移\n\n支持偏移指定的栏数。\n\n:::demo 通过制定 col 组件的 `offset` 属性可以指定分栏偏移的栏数。\n```html\n<el-row :gutter=\"20\">\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\" :offset=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row :gutter=\"20\">\n  <el-col :span=\"6\" :offset=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\" :offset=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row :gutter=\"20\">\n  <el-col :span=\"12\" :offset=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n```\n:::\n\n### 对齐方式\n\n通过 `flex` 布局来对分栏进行灵活的对齐。\n\n:::demo 将 `type` 属性赋值为 'flex'，可以启用 flex 布局，并可通过 `justify` 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。\n```html\n<el-row type=\"flex\" class=\"row-bg\">\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row type=\"flex\" class=\"row-bg\" justify=\"center\">\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row type=\"flex\" class=\"row-bg\" justify=\"end\">\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row type=\"flex\" class=\"row-bg\" justify=\"space-between\">\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row type=\"flex\" class=\"row-bg\" justify=\"space-around\">\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n```\n:::\n\n### 响应式布局\n\n参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：`xs`、`sm`、`md`、`lg` 和 `xl`。\n\n:::demo\n```html\n<el-row :gutter=\"10\">\n  <el-col :xs=\"8\" :sm=\"6\" :md=\"4\" :lg=\"3\" :xl=\"1\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :xs=\"4\" :sm=\"6\" :md=\"8\" :lg=\"9\" :xl=\"11\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :xs=\"4\" :sm=\"6\" :md=\"8\" :lg=\"9\" :xl=\"11\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :xs=\"8\" :sm=\"6\" :md=\"4\" :lg=\"3\" :xl=\"1\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n</el-row>\n\n<style>\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n</style>\n```\n:::\n\n### 基于断点的隐藏类\n\nElement 额外提供了一系列类名，用于在某些条件下隐藏元素。这些类名可以添加在任何 DOM 元素或自定义组件上。如果需要，请自行引入以下文件：\n\n```js\nimport 'element-ui/lib/theme-chalk/display.css';\n```\n\n包含的类名及其含义为：\n- `hidden-xs-only` - 当视口在 `xs` 尺寸时隐藏\n- `hidden-sm-only` - 当视口在 `sm` 尺寸时隐藏\n- `hidden-sm-and-down` - 当视口在 `sm` 及以下尺寸时隐藏\n- `hidden-sm-and-up` - 当视口在 `sm` 及以上尺寸时隐藏\n- `hidden-md-only` - 当视口在 `md` 尺寸时隐藏\n- `hidden-md-and-down` - 当视口在 `md` 及以下尺寸时隐藏\n- `hidden-md-and-up` - 当视口在 `md` 及以上尺寸时隐藏\n- `hidden-lg-only` - 当视口在 `lg` 尺寸时隐藏\n- `hidden-lg-and-down` - 当视口在 `lg` 及以下尺寸时隐藏\n- `hidden-lg-and-up` - 当视口在 `lg` 及以上尺寸时隐藏\n- `hidden-xl-only` - 当视口在 `xl` 尺寸时隐藏\n\n### Row Attributes\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| gutter | 栅格间隔 | number | — | 0 |\n| type | 布局模式，可选 flex，现代浏览器下有效 | string | — | — |\n| justify | flex 布局下的水平排列方式 | string | start/end/center/space-around/space-between | start |\n| align | flex 布局下的垂直排列方式 | string | top/middle/bottom | — |\n| tag | 自定义元素标签 | string | * | div |\n\n### Col Attributes\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| span | 栅格占据的列数 | number | — | 24 |\n| offset | 栅格左侧的间隔格数 | number | — | 0 |\n| push |  栅格向右移动格数 | number | — | 0 |\n| pull |  栅格向左移动格数 | number | — | 0 |\n| xs | `<768px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |\n| sm | `≥768px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |\n| md | `≥992px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |\n| lg | `≥1200px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |\n| xl | `≥1920px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |\n| tag | 自定义元素标签 | string | * | div |\n"
  },
  {
    "path": "examples/docs/zh-CN/link.md",
    "content": "## Link 文字链接\n\n文字超链接\n\n### 基础用法\n基础的文字链接用法。\n:::demo\n```html\n<div>\n  <el-link href=\"https://element.eleme.io\" target=\"_blank\">默认链接</el-link>\n  <el-link type=\"primary\">主要链接</el-link>\n  <el-link type=\"success\">成功链接</el-link>\n  <el-link type=\"warning\">警告链接</el-link>\n  <el-link type=\"danger\">危险链接</el-link>\n  <el-link type=\"info\">信息链接</el-link>\n</div>\n```\n:::\n\n### 禁用状态\n文字链接不可用状态。\n:::demo\n```html\n<div>\n  <el-link disabled>默认链接</el-link>\n  <el-link type=\"primary\" disabled>主要链接</el-link>\n  <el-link type=\"success\" disabled>成功链接</el-link>\n  <el-link type=\"warning\" disabled>警告链接</el-link>\n  <el-link type=\"danger\" disabled>危险链接</el-link>\n  <el-link type=\"info\" disabled>信息链接</el-link>\n</div>\n```\n:::\n\n### 下划线\n文字链接下划线。\n:::demo\n```html\n<div>\n  <el-link :underline=\"false\">无下划线</el-link>\n  <el-link>有下划线</el-link>\n</div>\n```\n:::\n\n### 图标\n\n带图标的文字链接可增强辨识度。\n:::demo\n```html\n<div>\n  <el-link icon=\"el-icon-edit\">编辑</el-link>\n  <el-link>查看<i class=\"el-icon-view el-icon--right\"></i> </el-link>\n</div>\n```\n:::\n\n### Attributes\n\n| 参数           | 说明                           | 类型      | 可选值                               | 默认值  |\n| -------------- | ------------------------------ | --------- | ------------------------------------ | ------- |\n| type           | 类型                   | string  | primary / success / warning / danger / info | default |\n| underline      | 是否下划线                         | boolean | —                                    | true    |\n| disabled       | 是否禁用状态                       | boolean | —                                    | false   |\n| href           | 原生 href 属性                     | string  | —                                    | -       |\n| icon           | 图标类名                       | string  | —                                    | -       |\n"
  },
  {
    "path": "examples/docs/zh-CN/loading.md",
    "content": "## Loading 加载\n\n加载数据时显示动效。\n\n### 区域加载\n\n在表格等容器中加载数据时显示。\n\n:::demo Element 提供了两种调用 Loading 的方法：指令和服务。对于自定义指令`v-loading`，只需要绑定`Boolean`即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加`body`修饰符，可以使遮罩插入至 DOM 中的 body 上。\n```html\n<template>\n  <el-table\n    v-loading=\"loading\"\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  body {\n    margin: 0;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }],\n        loading: true\n      };\n    }\n  };\n</script>\n```\n:::\n\n### 自定义\n\n可自定义加载文案、图标和背景色。\n\n:::demo 在绑定了`v-loading`指令的元素上添加`element-loading-text`属性，其值会被渲染为加载文案，并显示在加载图标的下方。类似地，`element-loading-spinner`和`element-loading-background`属性分别用来设定图标类名和背景色值。\n```html\n<template>\n  <el-table\n    v-loading=\"loading\"\n    element-loading-text=\"拼命加载中\"\n    element-loading-spinner=\"el-icon-loading\"\n    element-loading-background=\"rgba(0, 0, 0, 0.8)\"\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }],\n        loading: true\n      };\n    }\n  };\n</script>\n```\n:::\n\n### 整页加载\n\n页面数据加载时显示。\n\n:::demo 当使用指令方式时，全屏遮罩需要添加`fullscreen`修饰符（遮罩会插入至 body 上），此时若需要锁定屏幕的滚动，可以使用`lock`修饰符；当使用服务方式时，遮罩默认即为全屏，无需额外设置。\n\n```html\n<template>\n  <el-button\n    type=\"primary\"\n    @click=\"openFullScreen1\"\n    v-loading.fullscreen.lock=\"fullscreenLoading\">\n    指令方式\n  </el-button>\n  <el-button\n    type=\"primary\"\n    @click=\"openFullScreen2\">\n    服务方式\n  </el-button>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        fullscreenLoading: false\n      }\n    },\n    methods: {\n      openFullScreen1() {\n        this.fullscreenLoading = true;\n        setTimeout(() => {\n          this.fullscreenLoading = false;\n        }, 2000);\n      },\n      openFullScreen2() {\n        const loading = this.$loading({\n          lock: true,\n          text: 'Loading',\n          spinner: 'el-icon-loading',\n          background: 'rgba(0, 0, 0, 0.7)'\n        });\n        setTimeout(() => {\n          loading.close();\n        }, 2000);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 服务\nLoading 还可以以服务的方式调用。引入 Loading 服务：\n```javascript\nimport { Loading } from 'element-ui';\n```\n在需要调用时：\n```javascript\nLoading.service(options);\n```\n其中 `options` 参数为 Loading 的配置项，具体见下表。`LoadingService` 会返回一个 Loading 实例，可通过调用该实例的 `close` 方法来关闭它：\n```javascript\nlet loadingInstance = Loading.service(options);\nthis.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭\n  loadingInstance.close();\n});\n```\n需要注意的是，以服务的方式调用的全屏 Loading 是单例的：若在前一个全屏 Loading 关闭前再次调用全屏 Loading，并不会创建一个新的 Loading 实例，而是返回现有全屏 Loading 的实例：\n```javascript\nlet loadingInstance1 = Loading.service({ fullscreen: true });\nlet loadingInstance2 = Loading.service({ fullscreen: true });\nconsole.log(loadingInstance1 === loadingInstance2); // true\n```\n此时调用它们中任意一个的 `close` 方法都能关闭这个全屏 Loading。\n\n如果完整引入了 Element，那么 Vue.prototype 上会有一个全局方法 `$loading`，它的调用方式为：`this.$loading(options)`，同样会返回一个 Loading 实例。\n\n### Options\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| target | Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入 `document.querySelector`以获取到对应 DOM 节点 | object/string | — | document.body |\n| body | 同 `v-loading` 指令中的 `body` 修饰符 | boolean | — | false |\n| fullscreen | 同 `v-loading` 指令中的 `fullscreen` 修饰符 | boolean | — | true |\n| lock | 同 `v-loading` 指令中的 `lock` 修饰符 | boolean | — | false |\n| text | 显示在加载图标下方的加载文案 | string | — | — |\n| spinner | 自定义加载图标类名 | string | — | — |\n| background | 遮罩背景色 | string | — | — |\n| customClass | Loading 的自定义类名 | string | — | — |"
  },
  {
    "path": "examples/docs/zh-CN/menu.md",
    "content": "## NavMenu 导航菜单\n\n为网站提供导航功能的菜单。\n\n### 顶栏\n\n适用广泛的基础用法。\n\n:::demo 导航菜单默认为垂直模式，通过`mode`属性可以使导航菜单变更为水平模式。另外，在菜单中通过`submenu`组件可以生成二级菜单。Menu 还提供了`background-color`、`text-color`和`active-text-color`，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。\n\n```html\n<el-menu :default-active=\"activeIndex\" class=\"el-menu-demo\" mode=\"horizontal\" @select=\"handleSelect\">\n  <el-menu-item index=\"1\">处理中心</el-menu-item>\n  <el-submenu index=\"2\">\n    <template slot=\"title\">我的工作台</template>\n    <el-menu-item index=\"2-1\">选项1</el-menu-item>\n    <el-menu-item index=\"2-2\">选项2</el-menu-item>\n    <el-menu-item index=\"2-3\">选项3</el-menu-item>\n    <el-submenu index=\"2-4\">\n      <template slot=\"title\">选项4</template>\n      <el-menu-item index=\"2-4-1\">选项1</el-menu-item>\n      <el-menu-item index=\"2-4-2\">选项2</el-menu-item>\n      <el-menu-item index=\"2-4-3\">选项3</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index=\"3\" disabled>消息中心</el-menu-item>\n  <el-menu-item index=\"4\"><a href=\"https://www.ele.me\" target=\"_blank\">订单管理</a></el-menu-item>\n</el-menu>\n<div class=\"line\"></div>\n<el-menu\n  :default-active=\"activeIndex2\"\n  class=\"el-menu-demo\"\n  mode=\"horizontal\"\n  @select=\"handleSelect\"\n  background-color=\"#545c64\"\n  text-color=\"#fff\"\n  active-text-color=\"#ffd04b\">\n  <el-menu-item index=\"1\">处理中心</el-menu-item>\n  <el-submenu index=\"2\">\n    <template slot=\"title\">我的工作台</template>\n    <el-menu-item index=\"2-1\">选项1</el-menu-item>\n    <el-menu-item index=\"2-2\">选项2</el-menu-item>\n    <el-menu-item index=\"2-3\">选项3</el-menu-item>\n    <el-submenu index=\"2-4\">\n      <template slot=\"title\">选项4</template>\n      <el-menu-item index=\"2-4-1\">选项1</el-menu-item>\n      <el-menu-item index=\"2-4-2\">选项2</el-menu-item>\n      <el-menu-item index=\"2-4-3\">选项3</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index=\"3\" disabled>消息中心</el-menu-item>\n  <el-menu-item index=\"4\"><a href=\"https://www.ele.me\" target=\"_blank\">订单管理</a></el-menu-item>\n</el-menu>\n\n<script>\n  export default {\n    data() {\n      return {\n        activeIndex: '1',\n        activeIndex2: '1'\n      };\n    },\n    methods: {\n      handleSelect(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 侧栏\n\n垂直菜单，可内嵌子菜单。\n\n:::demo 通过`el-menu-item-group`组件可以实现菜单进行分组，分组名可以通过`title`属性直接设定，也可以通过具名 slot 来设定。\n```html\n<el-row class=\"tac\">\n  <el-col :span=\"12\">\n    <h5>默认颜色</h5>\n    <el-menu\n      default-active=\"2\"\n      class=\"el-menu-vertical-demo\"\n      @open=\"handleOpen\"\n      @close=\"handleClose\">\n      <el-submenu index=\"1\">\n        <template slot=\"title\">\n          <i class=\"el-icon-location\"></i>\n          <span>导航一</span>\n        </template>\n        <el-menu-item-group>\n          <template slot=\"title\">分组一</template>\n          <el-menu-item index=\"1-1\">选项1</el-menu-item>\n          <el-menu-item index=\"1-2\">选项2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title=\"分组2\">\n          <el-menu-item index=\"1-3\">选项3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index=\"1-4\">\n          <template slot=\"title\">选项4</template>\n          <el-menu-item index=\"1-4-1\">选项1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index=\"2\">\n        <i class=\"el-icon-menu\"></i>\n        <span slot=\"title\">导航二</span>\n      </el-menu-item>\n      <el-menu-item index=\"3\" disabled>\n        <i class=\"el-icon-document\"></i>\n        <span slot=\"title\">导航三</span>\n      </el-menu-item>\n      <el-menu-item index=\"4\">\n        <i class=\"el-icon-setting\"></i>\n        <span slot=\"title\">导航四</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n  <el-col :span=\"12\">\n    <h5>自定义颜色</h5>\n    <el-menu\n      default-active=\"2\"\n      class=\"el-menu-vertical-demo\"\n      @open=\"handleOpen\"\n      @close=\"handleClose\"\n      background-color=\"#545c64\"\n      text-color=\"#fff\"\n      active-text-color=\"#ffd04b\">\n      <el-submenu index=\"1\">\n        <template slot=\"title\">\n          <i class=\"el-icon-location\"></i>\n          <span>导航一</span>\n        </template>\n        <el-menu-item-group>\n          <template slot=\"title\">分组一</template>\n          <el-menu-item index=\"1-1\">选项1</el-menu-item>\n          <el-menu-item index=\"1-2\">选项2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title=\"分组2\">\n          <el-menu-item index=\"1-3\">选项3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index=\"1-4\">\n          <template slot=\"title\">选项4</template>\n          <el-menu-item index=\"1-4-1\">选项1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index=\"2\">\n        <i class=\"el-icon-menu\"></i>\n        <span slot=\"title\">导航二</span>\n      </el-menu-item>\n      <el-menu-item index=\"3\" disabled>\n        <i class=\"el-icon-document\"></i>\n        <span slot=\"title\">导航三</span>\n      </el-menu-item>\n      <el-menu-item index=\"4\">\n        <i class=\"el-icon-setting\"></i>\n        <span slot=\"title\">导航四</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n</el-row>\n\n<script>\n  export default {\n    methods: {\n      handleOpen(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 折叠\n\n:::demo\n```html\n<el-radio-group v-model=\"isCollapse\" style=\"margin-bottom: 20px;\">\n  <el-radio-button :label=\"false\">展开</el-radio-button>\n  <el-radio-button :label=\"true\">收起</el-radio-button>\n</el-radio-group>\n<el-menu default-active=\"1-4-1\" class=\"el-menu-vertical-demo\" @open=\"handleOpen\" @close=\"handleClose\" :collapse=\"isCollapse\">\n  <el-submenu index=\"1\">\n    <template slot=\"title\">\n      <i class=\"el-icon-location\"></i>\n      <span slot=\"title\">导航一</span>\n    </template>\n    <el-menu-item-group>\n      <span slot=\"title\">分组一</span>\n      <el-menu-item index=\"1-1\">选项1</el-menu-item>\n      <el-menu-item index=\"1-2\">选项2</el-menu-item>\n    </el-menu-item-group>\n    <el-menu-item-group title=\"分组2\">\n      <el-menu-item index=\"1-3\">选项3</el-menu-item>\n    </el-menu-item-group>\n    <el-submenu index=\"1-4\">\n      <span slot=\"title\">选项4</span>\n      <el-menu-item index=\"1-4-1\">选项1</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index=\"2\">\n    <i class=\"el-icon-menu\"></i>\n    <span slot=\"title\">导航二</span>\n  </el-menu-item>\n  <el-menu-item index=\"3\" disabled>\n    <i class=\"el-icon-document\"></i>\n    <span slot=\"title\">导航三</span>\n  </el-menu-item>\n  <el-menu-item index=\"4\">\n    <i class=\"el-icon-setting\"></i>\n    <span slot=\"title\">导航四</span>\n  </el-menu-item>\n</el-menu>\n\n<style>\n  .el-menu-vertical-demo:not(.el-menu--collapse) {\n    width: 200px;\n    min-height: 400px;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        isCollapse: true\n      };\n    },\n    methods: {\n      handleOpen(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Menu Attribute\n| 参数      | 说明    | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| mode     | 模式   | string  |   horizontal / vertical   | vertical |\n| collapse  | 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）| boolean  |   —   | false |\n| background-color  | 菜单的背景色（仅支持 hex 格式） | string |   —   | #ffffff |\n| text-color  | 菜单的文字颜色（仅支持 hex 格式） | string |   —   | #303133 |\n| active-text-color  | 当前激活菜单的文字颜色（仅支持 hex 格式） | string |   —   | #409EFF |\n| default-active | 当前激活菜单的 index | string    | — | — |\n| default-openeds | 当前打开的 sub-menu 的 index 的数组 | Array    | — | — |\n| unique-opened  | 是否只保持一个子菜单的展开 | boolean   | — | false   |\n| menu-trigger  | 子菜单打开的触发方式(只在 mode 为 horizontal 时有效) | string   | hover / click | hover |\n| router  | 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 | boolean   | — | false   |\n| collapse-transition  | 是否开启折叠动画 | boolean   | — | true   |\n\n### Menu Methods\n| 方法名称      | 说明    | 参数      |\n|---------- |-------- |---------- |\n| open  | 展开指定的 sub-menu | index: 需要打开的 sub-menu 的 index |\n| close  | 收起指定的 sub-menu | index: 需要收起的 sub-menu 的 index |\n\n### Menu Events\n| 事件名称      | 说明    | 回调参数      |\n|---------- |-------- |---------- |\n| select  | 菜单激活回调 | index: 选中菜单项的 index, indexPath: 选中菜单项的 index path  |\n| open  | sub-menu 展开的回调 | index: 打开的 sub-menu 的 index， indexPath: 打开的 sub-menu 的 index path  |\n| close  | sub-menu 收起的回调 | index: 收起的 sub-menu 的 index， indexPath: 收起的 sub-menu 的 index path  |\n\n### SubMenu Attribute\n| 参数      | 说明    | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| index     | 唯一标志   | string/null  | — | null |\n| popper-class | 弹出菜单的自定义类名 | string | — | — |\n| show-timeout | 展开 sub-menu 的延时 | number | — | 300 |\n| hide-timeout | 收起 sub-menu 的延时 | number | — | 300 |\n| disabled  | 是否禁用 | boolean | — | false |\n| popper-append-to-body | 是否将弹出菜单插入至 body 元素。在菜单的定位出现问题时，可尝试修改该属性 | boolean | — | 一级子菜单：true / 非一级子菜单：false |\n\n### Menu-Item Attribute\n| 参数      | 说明    | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| index     | 唯一标志   | string  | — | — |\n| route     | Vue Router 路径对象 | Object | — | — |\n| disabled  | 是否禁用 | boolean | — | false |\n\n### Menu-Group Attribute\n| 参数      | 说明    | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| title     | 分组标题   | string  | — | — |\n"
  },
  {
    "path": "examples/docs/zh-CN/message-box.md",
    "content": "## MessageBox 弹框\n模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。\n\n:::tip\n从场景上说，MessageBox 的作用是美化系统自带的 `alert`、`confirm` 和 `prompt`，因此适合展示较为简单的内容。如果需要弹出较为复杂的内容，请使用 Dialog。\n:::\n\n### 消息提示\n\n当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。\n\n:::demo 调用`$alert`方法即可打开消息提示，它模拟了系统的 `alert`，无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数，`message`和`title`。值得一提的是，窗口被关闭后，它默认会返回一个`Promise`对象便于进行后续操作的处理。若不确定浏览器是否支持`Promise`，可自行引入第三方 polyfill 或像本例一样使用回调进行后续处理。\n```html\n<template>\n  <el-button type=\"text\" @click=\"open\">点击打开 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$alert('这是一段内容', '标题名称', {\n          confirmButtonText: '确定',\n          callback: action => {\n            this.$message({\n              type: 'info',\n              message: `action: ${ action }`\n            });\n          }\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 确认消息\n\n提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。\n\n:::demo 调用`$confirm`方法即可打开消息提示，它模拟了系统的 `confirm`。Message Box 组件也拥有极高的定制性，我们可以传入`options`作为第三个参数，它是一个字面量对象。`type`字段表明消息类型，可以为`success`，`error`，`info`和`warning`，无效的设置将会被忽略。注意，第二个参数`title`必须定义为`String`类型，如果是`Object`，会被理解为`options`。在这里我们用了 Promise 来处理后续响应。\n\n```html\n<template>\n  <el-button type=\"text\" @click=\"open\">点击打开 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {\n          confirmButtonText: '确定',\n          cancelButtonText: '取消',\n          type: 'warning'\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: '删除成功!'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: '已取消删除'\n          });          \n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 提交内容\n\n当用户进行操作时会被触发，中断用户操作，提示用户进行输入的对话框。\n\n:::demo 调用`$prompt`方法即可打开消息提示，它模拟了系统的 `prompt`。可以用`inputPattern`字段自己规定匹配模式，或者用`inputValidator`规定校验函数，可以返回`Boolean`或`String`，返回`false`或字符串时均表示校验未通过，同时返回的字符串相当于定义了`inputErrorMessage`字段。此外，可以用`inputPlaceholder`字段来定义输入框的占位符。\n\n```html\n<template>\n  <el-button type=\"text\" @click=\"open\">点击打开 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$prompt('请输入邮箱', '提示', {\n          confirmButtonText: '确定',\n          cancelButtonText: '取消',\n          inputPattern: /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n          inputErrorMessage: '邮箱格式不正确'\n        }).then(({ value }) => {\n          this.$message({\n            type: 'success',\n            message: '你的邮箱是: ' + value\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: '取消输入'\n          });       \n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 自定义\n\n可自定义配置不同内容。\n\n:::demo 以上三个方法都是对`$msgbox`方法的再包装。本例直接调用`$msgbox`方法，使用了`showCancelButton`字段，用于显示取消按钮。另外可使用`cancelButtonClass`为其添加自定义样式，使用`cancelButtonText`来自定义按钮文本（Confirm 按钮也具有相同的字段，在文末的字段说明中有完整的字段列表）。此例还使用了`beforeClose`属性，它的值是一个方法，会在 MessageBox 的实例关闭前被调用，同时暂停实例的关闭。它有三个参数：`action`、实例本身和`done`方法。使用它能够在关闭前对实例进行一些操作，比如为确定按钮添加`loading`状态等；此时若需要关闭实例，可以调用`done`方法（若在`beforeClose`中没有调用`done`，则实例不会关闭）。\n\n```html\n<template>\n  <el-button type=\"text\" @click=\"open\">点击打开 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        const h = this.$createElement;\n        this.$msgbox({\n          title: '消息',\n          message: h('p', null, [\n            h('span', null, '内容可以是 '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ]),\n          showCancelButton: true,\n          confirmButtonText: '确定',\n          cancelButtonText: '取消',\n          beforeClose: (action, instance, done) => {\n            if (action === 'confirm') {\n              instance.confirmButtonLoading = true;\n              instance.confirmButtonText = '执行中...';\n              setTimeout(() => {\n                done();\n                setTimeout(() => {\n                  instance.confirmButtonLoading = false;\n                }, 300);\n              }, 3000);\n            } else {\n              done();\n            }\n          }\n        }).then(action => {\n          this.$message({\n            type: 'info',\n            message: 'action: ' + action\n          });\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n:::tip\n弹出层的内容可以是 `VNode`，所以我们能把一些自定义组件传入其中。每次弹出层打开后，Vue 会对新老 `VNode` 节点进行比对，然后将根据比较结果进行最小单位地修改视图。这也许会造成弹出层内容区域的组件没有重新渲染，例如 [#8931](https://github.com/ElemeFE/element/issues/8931)。当这类问题出现时，解决方案是给 `VNode` 加上一个不相同的 key，参考[这里](https://jsfiddle.net/zhiyang/ezmhq2ef/)。\n:::\n\n### 使用 HTML 片段\n\n`message` 属性支持传入 HTML 片段。\n\n:::demo 将`dangerouslyUseHTMLString`属性设置为 true，`message` 就会被当作 HTML 片段处理。\n\n```html\n<template>\n  <el-button type=\"text\" @click=\"open\">点击打开 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$alert('<strong>这是 <i>HTML</i> 片段</strong>', 'HTML 片段', {\n          dangerouslyUseHTMLString: true\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n:::warning\n`message` 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。因此在 `dangerouslyUseHTMLString` 打开的情况下，请确保 `message` 的内容是可信的，**永远不要**将用户提交的内容赋值给 `message` 属性。\n:::\n\n### 区分取消与关闭\n\n有些场景下，点击取消按钮与点击关闭按钮有着不同的含义。\n\n:::demo 默认情况下，当用户触发取消（点击取消按钮）和触发关闭（点击关闭按钮或遮罩层、按下 ESC 键）时，Promise 的 reject 回调和`callback`回调的参数均为 'cancel'。如果将`distinguishCancelAndClose`属性设置为 true，则上述两种行为的参数分别为 'cancel' 和 'close'。\n\n```html\n<template>\n  <el-button type=\"text\" @click=\"open\">点击打开 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$confirm('检测到未保存的内容，是否在离开页面前保存修改？', '确认信息', {\n          distinguishCancelAndClose: true,\n          confirmButtonText: '保存',\n          cancelButtonText: '放弃修改'\n        })\n          .then(() => {\n            this.$message({\n              type: 'info',\n              message: '保存修改'\n            });\n          })\n          .catch(action => {\n            this.$message({\n              type: 'info',\n              message: action === 'cancel'\n                ? '放弃保存并离开页面'\n                : '停留在当前页面'\n            })\n          });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 居中布局\n内容支持居中布局\n\n:::demo 将 `center` 设置为 `true` 即可开启居中布局\n\n```html\n<template>\n  <el-button type=\"text\" @click=\"open\">点击打开 Message Box</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {\n          confirmButtonText: '确定',\n          cancelButtonText: '取消',\n          type: 'warning',\n          center: true\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: '删除成功!'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: '已取消删除'\n          });\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 全局方法\n\n如果你完整引入了 Element，它会为 Vue.prototype 添加如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 Vue instance 中可以采用本页面中的方式调用 `MessageBox`。调用参数为：\n- `$msgbox(options)`\n- `$alert(message, title, options)` 或 `$alert(message, options)`\n- `$confirm(message, title, options)` 或 `$confirm(message, options)`\n- `$prompt(message, title, options)` 或 `$prompt(message, options)`\n\n### 单独引用\n\n如果单独引入 `MessageBox`：\n\n```javascript\nimport { MessageBox } from 'element-ui';\n```\n\n那么对应于上述四个全局方法的调用方法依次为：MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt，调用参数与全局方法相同。\n\n### Options\n\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| title | MessageBox 标题 | string | — | — |\n| message | MessageBox 消息正文内容 | string / VNode | — | — |\n| dangerouslyUseHTMLString | 是否将 message 属性作为 HTML 片段处理 | boolean | — | false |\n| type | 消息类型，用于显示图标 | string | success / info / warning / error | — |\n| iconClass | 自定义图标的类名，会覆盖 `type` | string | — | — |\n| customClass | MessageBox 的自定义类名 | string | — | — |\n| callback | 若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调 | function(action, instance)，action 的值为'confirm', 'cancel'或'close', instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法 | — | — |\n| showClose | MessageBox 是否显示右上角关闭按钮 | boolean | — | true |\n| beforeClose | MessageBox 关闭前的回调，会暂停实例的关闭 | function(action, instance, done)，action 的值为'confirm', 'cancel'或'close'；instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法；done 用于关闭 MessageBox 实例 | — | — |\n| distinguishCancelAndClose | 是否将取消（点击取消按钮）与关闭（点击关闭按钮或遮罩层、按下 ESC 键）进行区分 | boolean | — | false |\n| lockScroll | 是否在 MessageBox 出现时将 body 滚动锁定 | boolean | — | true |\n| showCancelButton | 是否显示取消按钮 | boolean | — | false（以 confirm 和 prompt 方式调用时为 true） |\n| showConfirmButton | 是否显示确定按钮 | boolean | — | true |\n| cancelButtonText | 取消按钮的文本内容 | string | — | 取消 |\n| confirmButtonText | 确定按钮的文本内容 | string | — | 确定 |\n| cancelButtonClass | 取消按钮的自定义类名 | string | — | — |\n| confirmButtonClass | 确定按钮的自定义类名 | string | — | — |\n| closeOnClickModal | 是否可通过点击遮罩关闭 MessageBox | boolean | — | true（以 alert 方式调用时为 false） |\n| closeOnPressEscape | 是否可通过按下 ESC 键关闭 MessageBox | boolean | — | true（以 alert 方式调用时为 false） |\n| closeOnHashChange | 是否在 hashchange 时关闭 MessageBox | boolean | — | true |\n| showInput | 是否显示输入框 | boolean | — | false（以 prompt 方式调用时为 true）|\n| inputPlaceholder | 输入框的占位符 | string | — | — |\n| inputType | 输入框的类型 | string | — | text |\n| inputValue | 输入框的初始文本 | string | — | — |\n| inputPattern | 输入框的校验表达式 | regexp | — | — |\n| inputValidator | 输入框的校验函数。可以返回布尔值或字符串，若返回一个字符串, 则返回结果会被赋值给 inputErrorMessage | function | — | — |\n| inputErrorMessage | 校验未通过时的提示文本 | string | — | 输入的数据不合法! |\n| center | 是否居中布局 | boolean | — | false |\n| roundButton | 是否使用圆角按钮 | boolean | — | false |\n"
  },
  {
    "path": "examples/docs/zh-CN/message.md",
    "content": "## Message 消息提示\n\n常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。\n\n### 基础用法\n\n从顶部出现，3 秒后自动消失。\n\n:::demo Message 在配置上与 Notification 非常类似，所以部分 options 在此不做详尽解释，文末有 options 列表，可以结合 Notification 的文档理解它们。Element 注册了一个`$message`方法用于调用，Message 可以接收一个字符串或一个 VNode 作为参数，它会被显示为正文内容。\n\n```html\n<template>\n  <el-button :plain=\"true\" @click=\"open\">打开消息提示</el-button>\n  <el-button :plain=\"true\" @click=\"openVn\">VNode</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$message('这是一条消息提示');\n      },\n\n      openVn() {\n        const h = this.$createElement;\n        this.$message({\n          message: h('p', null, [\n            h('span', null, '内容可以是 '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ])\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 不同状态\n\n用来显示「成功、警告、消息、错误」类的操作反馈。\n\n:::demo 当需要自定义更多属性时，Message 也可以接收一个对象为参数。比如，设置`type`字段可以定义不同的状态，默认为`info`。此时正文内容以`message`的值传入。同时，我们也为 Message 的各种 type 注册了方法，可以在不传入`type`字段的情况下像`open4`那样直接调用。\n```html\n<template>\n  <el-button :plain=\"true\" @click=\"open2\">成功</el-button>\n  <el-button :plain=\"true\" @click=\"open3\">警告</el-button>\n  <el-button :plain=\"true\" @click=\"open1\">消息</el-button>\n  <el-button :plain=\"true\" @click=\"open4\">错误</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open1() {\n        this.$message('这是一条消息提示');\n      },\n      open2() {\n        this.$message({\n          message: '恭喜你，这是一条成功消息',\n          type: 'success'\n        });\n      },\n\n      open3() {\n        this.$message({\n          message: '警告哦，这是一条警告消息',\n          type: 'warning'\n        });\n      },\n\n      open4() {\n        this.$message.error('错了哦，这是一条错误消息');\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 可关闭\n\n可以添加关闭按钮。\n\n:::demo 默认的 Message 是不可以被人工关闭的，如果需要可手动关闭的 Message，可以使用`showClose`字段。此外，和 Notification 一样，Message 拥有可控的`duration`，设置`0`为不会被自动关闭，默认为 3000 毫秒。\n```html\n<template>\n  <el-button :plain=\"true\" @click=\"open1\">消息</el-button>\n  <el-button :plain=\"true\" @click=\"open2\">成功</el-button>\n  <el-button :plain=\"true\" @click=\"open3\">警告</el-button>\n  <el-button :plain=\"true\" @click=\"open4\">错误</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open1() {\n        this.$message({\n          showClose: true,\n          message: '这是一条消息提示'\n        });\n      },\n\n      open2() {\n        this.$message({\n          showClose: true,\n          message: '恭喜你，这是一条成功消息',\n          type: 'success'\n        });\n      },\n\n      open3() {\n        this.$message({\n          showClose: true,\n          message: '警告哦，这是一条警告消息',\n          type: 'warning'\n        });\n      },\n\n      open4() {\n        this.$message({\n          showClose: true,\n          message: '错了哦，这是一条错误消息',\n          type: 'error'\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 文字居中\n使用 `center` 属性让文字水平居中。\n\n:::demo\n\n```html\n<template>\n  <el-button :plain=\"true\" @click=\"openCenter\">文字居中</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      openCenter() {\n        this.$message({\n          message: '居中的文字',\n          center: true\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 使用 HTML 片段\n`message` 属性支持传入 HTML 片段\n\n:::demo 将`dangerouslyUseHTMLString`属性设置为 true，`message` 就会被当作 HTML 片段处理。\n\n```html\n<template>\n  <el-button :plain=\"true\" @click=\"openHTML\">使用 HTML 片段</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      openHTML() {\n        this.$message({\n          dangerouslyUseHTMLString: true,\n          message: '<strong>这是 <i>HTML</i> 片段</strong>'\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n:::warning\n`message` 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。因此在 `dangerouslyUseHTMLString` 打开的情况下，请确保 `message` 的内容是可信的，**永远不要**将用户提交的内容赋值给 `message` 属性。\n:::\n\n### 全局方法\n\nElement 为 Vue.prototype 添加了全局方法 $message。因此在 vue instance 中可以采用本页面中的方式调用 `Message`。\n\n### 单独引用\n\n单独引入 `Message`：\n\n```javascript\nimport { Message } from 'element-ui';\n```\n\n此时调用方法为 `Message(options)`。我们也为每个 type 定义了各自的方法，如 `Message.success(options)`。并且可以调用 `Message.closeAll()` 手动关闭所有实例。\n\n### Options\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| message | 消息文字 | string / VNode | — | — |\n| type | 主题 | string | success/warning/info/error | info |\n| iconClass | 自定义图标的类名，会覆盖 `type` | string | — | — |\n| dangerouslyUseHTMLString | 是否将 message 属性作为 HTML 片段处理 | boolean | — | false |\n| customClass | 自定义类名 | string | — | — |\n| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 3000 |\n| showClose | 是否显示关闭按钮 | boolean | — | false |\n| center | 文字是否居中 | boolean | — | false |\n| onClose | 关闭时的回调函数, 参数为被关闭的 message 实例 | function | — | — |\n| offset | Message 距离窗口顶部的偏移量 | number | — | 20 |\n\n### 方法\n调用 `Message` 或 `this.$message` 会返回当前 Message 的实例。如果需要手动关闭实例，可以调用它的 `close` 方法。\n| 方法名 | 说明 |\n| ---- | ---- |\n| close | 关闭当前的 Message |\n"
  },
  {
    "path": "examples/docs/zh-CN/notification.md",
    "content": "## Notification 通知\n\n悬浮出现在页面角落，显示全局的通知提醒消息。\n\n### 基本用法\n\n适用性广泛的通知栏\n\n:::demo Notification 组件提供通知功能，Element 注册了`$notify`方法，接收一个`options`字面量参数，在最简单的情况下，你可以设置`title`字段和`message`字段，用于设置通知的标题和正文。默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置`duration`，可以控制关闭的时间间隔，特别的是，如果设置为`0`，则不会自动关闭。注意：`duration`接收一个`Number`，单位为毫秒，默认为`4500`。\n```html\n<template>\n  <el-button\n    plain\n    @click=\"open1\">\n    可自动关闭\n  </el-button>\n  <el-button\n    plain\n    @click=\"open2\">\n    不会自动关闭\n    </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open1() {\n        const h = this.$createElement;\n\n        this.$notify({\n          title: '标题名称',\n          message: h('i', { style: 'color: teal'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')\n        });\n      },\n\n      open2() {\n        this.$notify({\n          title: '提示',\n          message: '这是一条不会自动关闭的消息',\n          duration: 0\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 带有倾向性\n\n带有 icon，常用来显示「成功、警告、消息、错误」类的系统消息\n\n:::demo Element 为 Notification 组件准备了四种通知类型：`success`, `warning`, `info`, `error`。通过`type`字段来设置，除此以外的值将被忽略。同时，我们也为 Notification 的各种 type 注册了方法，可以在不传入`type`字段的情况下像`open3`和`open4`那样直接调用。\n```html\n<template>\n  <el-button\n    plain\n    @click=\"open1\">\n    成功\n  </el-button>\n  <el-button\n    plain\n    @click=\"open2\">\n    警告\n  </el-button>\n  <el-button\n    plain\n    @click=\"open3\">\n    消息\n  </el-button>\n  <el-button\n    plain\n    @click=\"open4\">\n    错误\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open1() {\n        this.$notify({\n          title: '成功',\n          message: '这是一条成功的提示消息',\n          type: 'success'\n        });\n      },\n\n      open2() {\n        this.$notify({\n          title: '警告',\n          message: '这是一条警告的提示消息',\n          type: 'warning'\n        });\n      },\n\n      open3() {\n        this.$notify.info({\n          title: '消息',\n          message: '这是一条消息的提示消息'\n        });\n      },\n\n      open4() {\n        this.$notify.error({\n          title: '错误',\n          message: '这是一条错误的提示消息'\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 自定义弹出位置\n\n可以让 Notification 从屏幕四角中的任意一角弹出\n\n:::demo 使用`position`属性定义 Notification 的弹出位置，支持四个选项：`top-right`、`top-left`、`bottom-right`、`bottom-left`，默认为`top-right`。\n```html\n<template>\n  <el-button\n    plain\n    @click=\"open1\">\n    右上角\n  </el-button>\n  <el-button\n    plain\n    @click=\"open2\">\n    右下角\n  </el-button>\n  <el-button\n    plain\n    @click=\"open3\">\n    左下角\n  </el-button>\n  <el-button\n    plain\n    @click=\"open4\">\n    左上角\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open1() {\n        this.$notify({\n          title: '自定义位置',\n          message: '右上角弹出的消息'\n        });\n      },\n\n      open2() {\n        this.$notify({\n          title: '自定义位置',\n          message: '右下角弹出的消息',\n          position: 'bottom-right'\n        });\n      },\n\n      open3() {\n        this.$notify({\n          title: '自定义位置',\n          message: '左下角弹出的消息',\n          position: 'bottom-left'\n        });\n      },\n\n      open4() {\n        this.$notify({\n          title: '自定义位置',\n          message: '左上角弹出的消息',\n          position: 'top-left'\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 带有偏移\n\n让 Notification 偏移一些位置\n\n:::demo Notification 提供设置偏移量的功能，通过设置 `offset` 字段，可以使弹出的消息距屏幕边缘偏移一段距离。注意在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量。\n```html\n<template>\n  <el-button\n    plain\n    @click=\"open\">\n    偏移的消息\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$notify({\n          title: '偏移',\n          message: '这是一条带有偏移的提示消息',\n          offset: 100\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 使用 HTML 片段\n`message` 属性支持传入 HTML 片段\n\n:::demo 将`dangerouslyUseHTMLString`属性设置为 true，`message` 就会被当作 HTML 片段处理。\n```html\n<template>\n  <el-button\n    plain\n    @click=\"open\">\n    使用 HTML 片段\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$notify({\n          title: 'HTML 片段',\n          dangerouslyUseHTMLString: true,\n          message: '<strong>这是 <i>HTML</i> 片段</strong>'\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n:::warning\n`message` 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。因此在 `dangerouslyUseHTMLString` 打开的情况下，请确保 `message` 的内容是可信的，**永远不要**将用户提交的内容赋值给 `message` 属性。\n:::\n\n### 隐藏关闭按钮\n\n可以不显示关闭按钮\n\n:::demo 将`showClose`属性设置为`false`即可隐藏关闭按钮。\n```html\n<template>\n  <el-button\n    plain\n    @click=\"open\">\n    隐藏关闭按钮\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$notify.success({\n          title: 'Info',\n          message: '这是一条没有关闭按钮的消息',\n          showClose: false\n        });\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 全局方法\n\nElement 为 `Vue.prototype` 添加了全局方法 `$notify`。因此在 vue instance 中可以采用本页面中的方式调用 Notification。\n\n### 单独引用\n\n单独引入 Notification：\n\n```javascript\nimport { Notification } from 'element-ui';\n```\n\n此时调用方法为 `Notification(options)`。我们也为每个 type 定义了各自的方法，如 `Notification.success(options)`。并且可以调用 `Notification.closeAll()` 手动关闭所有实例。\n\n### Options\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| title | 标题 | string | — | — |\n| message | 说明文字 | string/Vue.VNode | — | — |\n| dangerouslyUseHTMLString | 是否将 message 属性作为 HTML 片段处理 | boolean | — | false |\n| type | 主题样式，如果不在可选值内将被忽略 | string | success/warning/info/error | — |\n| iconClass | 自定义图标的类名。若设置了 `type`，则 `iconClass` 会被覆盖 | string | — | — |\n| customClass | 自定义类名 | string | — | — |\n| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 4500 |\n| position | 自定义弹出位置 | string | top-right/top-left/bottom-right/bottom-left | top-right |\n| showClose | 是否显示关闭按钮 | boolean | — | true |\n| onClose | 关闭时的回调函数 | function | — | — |\n| onClick | 点击 Notification 时的回调函数 | function | — | — |\n| offset | 偏移的距离，在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量 | number | — | 0 |\n\n### 方法\n调用 `Notification` 或 `this.$notify` 会返回当前 Notification 的实例。如果需要手动关闭实例，可以调用它的 `close` 方法。\n| 方法名 | 说明 |\n| ---- | ---- |\n| close | 关闭当前的 Notification |\n"
  },
  {
    "path": "examples/docs/zh-CN/page-header.md",
    "content": "## PageHeader 页头\n\n如果页面的路径比较简单，推荐使用页头组件而非面包屑组件。\n\n### 基础\n\n:::demo\n```html\n<el-page-header @back=\"goBack\" content=\"详情页面\">\n</el-page-header>\n\n<script>\n  export default {\n    methods: {\n      goBack() {\n        console.log('go back');\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Attributes\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |------------------------------ | ------ |\n| title     | 标题           | string    |  —                            | 返回   |\n| content   | 内容           | string    |  —                            | —      |\n\n\n### Events\n| 事件名称   | 说明           | 回调参数   |\n|---------- |-------------- |---------- |\n| back      | 点击左侧区域触发 | —        |\n\n### Slots\n| 事件名称    | 说明         |\n|---------- |------------- |\n| title     | 标题内容      |\n| content   | 内容         |\n"
  },
  {
    "path": "examples/docs/zh-CN/pagination.md",
    "content": "## Pagination 分页\n\n当数据量过多时，使用分页分解数据。\n\n### 基础用法\n\n:::demo 设置`layout`，表示需要显示的内容，用逗号分隔，布局元素会依次显示。`prev`表示上一页，`next`为下一页，`pager`表示页码列表，除此以外还提供了`jumper`和`total`，`sizes`和特殊的布局符号`->`，`->`后的元素会靠右显示，`jumper`表示跳页元素，`total`表示总条目数，`sizes`用于设置每页显示的页码数量。\n```html\n<div class=\"block\">\n  <span class=\"demonstration\">页数较少时的效果</span>\n  <el-pagination\n    layout=\"prev, pager, next\"\n    :total=\"50\">\n  </el-pagination>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">大于 7 页时的效果</span>\n  <el-pagination\n    layout=\"prev, pager, next\"\n    :total=\"1000\">\n  </el-pagination>\n</div>\n```\n:::\n\n### 设置最大页码按钮数\n\n:::demo 默认情况下，当总页数超过 7 页时，Pagination 会折叠多余的页码按钮。通过`pager-count`属性可以设置最大页码按钮数。\n```html\n<el-pagination\n  :page-size=\"20\"\n  :pager-count=\"11\"\n  layout=\"prev, pager, next\"\n  :total=\"1000\">\n</el-pagination>\n```\n:::\n\n### 带有背景色的分页\n\n:::demo 设置`background`属性可以为分页按钮添加背景色。\n```html\n<el-pagination\n  background\n  layout=\"prev, pager, next\"\n  :total=\"1000\">\n</el-pagination>\n```\n:::\n\n### 小型分页\n\n在空间有限的情况下，可以使用简单的小型分页。\n\n:::demo 只需要一个`small`属性，它接受一个`Boolean`，默认为`false`，设为`true`即可启用。\n```html\n<el-pagination\n  small\n  layout=\"prev, pager, next\"\n  :total=\"50\">\n</el-pagination>\n```\n:::\n\n### 附加功能\n\n根据场景需要，可以添加其他功能模块。\n\n:::demo 此例是一个完整的用例，使用了`size-change`和`current-change`事件来处理页码大小和当前页变动时候触发的事件。`page-sizes`接受一个整型数组，数组元素为展示的选择每页显示个数的选项，`[100, 200, 300, 400]`表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。\n\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">显示总数</span>\n    <el-pagination\n      @size-change=\"handleSizeChange\"\n      @current-change=\"handleCurrentChange\"\n      :current-page.sync=\"currentPage1\"\n      :page-size=\"100\"\n      layout=\"total, prev, pager, next\"\n      :total=\"1000\">\n    </el-pagination>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">调整每页显示条数</span>\n    <el-pagination\n      @size-change=\"handleSizeChange\"\n      @current-change=\"handleCurrentChange\"\n      :current-page.sync=\"currentPage2\"\n      :page-sizes=\"[100, 200, 300, 400]\"\n      :page-size=\"100\"\n      layout=\"sizes, prev, pager, next\"\n      :total=\"1000\">\n    </el-pagination>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">直接前往</span>\n    <el-pagination\n      @size-change=\"handleSizeChange\"\n      @current-change=\"handleCurrentChange\"\n      :current-page.sync=\"currentPage3\"\n      :page-size=\"100\"\n      layout=\"prev, pager, next, jumper\"\n      :total=\"1000\">\n    </el-pagination>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">完整功能</span>\n    <el-pagination\n      @size-change=\"handleSizeChange\"\n      @current-change=\"handleCurrentChange\"\n      :current-page=\"currentPage4\"\n      :page-sizes=\"[100, 200, 300, 400]\"\n      :page-size=\"100\"\n      layout=\"total, sizes, prev, pager, next, jumper\"\n      :total=\"400\">\n    </el-pagination>\n  </div>\n</template>\n<script>\n  export default {\n    methods: {\n      handleSizeChange(val) {\n        console.log(`每页 ${val} 条`);\n      },\n      handleCurrentChange(val) {\n        console.log(`当前页: ${val}`);\n      }\n    },\n    data() {\n      return {\n        currentPage1: 5,\n        currentPage2: 5,\n        currentPage3: 5,\n        currentPage4: 4\n      };\n    }\n  }\n</script>\n```\n:::\n\n### 当只有一页时隐藏分页\n\n当只有一页时，通过设置 `hide-on-single-page` 属性来隐藏分页。\n\n:::demo\n```html\n<div>\n <el-switch v-model=\"value\">\n </el-switch>\n <el-pagination\n  :hide-on-single-page=\"value\"\n  :total=\"5\"\n  layout=\"prev, pager, next\">\n</el-pagination>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: false\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Attributes\n| 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |\n|--------------------|----------------------------------------------------------|-------------------|-------------|--------|\n| small | 是否使用小型分页样式 | boolean | — | false |\n| background | 是否为分页按钮添加背景色 | boolean | — | false |\n| page-size | 每页显示条目个数，支持 .sync 修饰符 | number | — | 10 |\n| total | 总条目数 | number | — | — |\n| page-count | 总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性 | Number | — | — |\n| pager-count | 页码按钮的数量，当总页数超过该值时会折叠 | number | 大于等于 5 且小于等于 21 的奇数 | 7 |\n| current-page | 当前页数，支持 .sync 修饰符 | number | — | 1 |\n| layout | 组件布局，子组件名用逗号分隔| String | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total'  |\n| page-sizes | 每页显示个数选择器的选项设置 | number[] | — |  [10, 20, 30, 40, 50, 100] |\n| popper-class | 每页显示个数选择器的下拉框类名 | string | — | — |\n| prev-text | 替代图标显示的上一页文字 | string | — | — |\n| next-text | 替代图标显示的下一页文字 | string | — | — |\n| disabled | 是否禁用 | boolean | — | false |\n| hide-on-single-page | 只有一页时是否隐藏 | boolean | — | - |\n\n### Events\n| 事件名称 | 说明 | 回调参数 |\n|---------|--------|---------|\n| size-change | pageSize 改变时会触发 | 每页条数 |\n| current-change | currentPage 改变时会触发 | 当前页 |\n| prev-click | 用户点击上一页按钮改变当前页后触发 | 当前页 |\n| next-click | 用户点击下一页按钮改变当前页后触发 | 当前页 |\n\n### Slot\n| name | 说明 |\n|------|--------|\n| — | 自定义内容，需要在 `layout` 中列出 `slot` |\n"
  },
  {
    "path": "examples/docs/zh-CN/popconfirm.md",
    "content": "## Popconfirm 气泡确认框\n\n点击元素，弹出气泡确认框。\n\n### 基础用法\n\nPopconfirm 的属性与 Popover 很类似，因此对于重复属性，请参考 Popover 的文档，在此文档中不做详尽解释。\n:::demo 在 Popconfirm 中，只有 `title` 属性可用，`content` 属性不会被展示。\n```html\n<template>\n<el-popconfirm\n  title=\"这是一段内容确定删除吗？\"\n>\n  <el-button slot=\"reference\">删除</el-button>\n</el-popconfirm>\n</template>\n````\n:::\n\n### 自定义\n\n可以在 Popconfirm 中自定义内容。\n:::demo\n```html\n<template>\n<el-popconfirm\n  confirm-button-text='好的'\n  cancel-button-text='不用了'\n  icon=\"el-icon-info\"\n  icon-color=\"red\"\n  title=\"这是一段内容确定删除吗？\"\n>\n  <el-button slot=\"reference\">删除</el-button>\n</el-popconfirm>\n</template>\n```\n:::\n\n### Attributes\n| 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |\n|--------------------|----------------------------------------------------------|-------------------|-------------|--------|\n|  title              | 标题 | String | — | — |\n|  confirm-button-text              | 确认按钮文字 | String | — | — |\n|  cancel-button-text              | 取消按钮文字 | String | — | — |\n|  confirm-button-type              | 确认按钮类型 | String | — | Primary |\n|  cancel-button-type              | 取消按钮类型 | String | — | Text |\n|  icon              | Icon | String | — | el-icon-question |\n|  icon-color              | Icon 颜色 | String | — | #f90 |\n|  hide-icon              | 是否隐藏 Icon | Boolean | — | false |\n\n### Slot\n| 参数 | 说明 |\n|--- | ---|\n| reference | 触发 Popconfirm 显示的 HTML 元素 |\n\n### Events\n| 事件名称 | 说明 | 回调参数 |\n|---------|--------|---------|\n| confirm | 点击确认按钮时触发 | — |\n| cancel | 点击取消按钮时触发 | — |"
  },
  {
    "path": "examples/docs/zh-CN/popover.md",
    "content": "## Popover 弹出框\n\n### 基础用法\nPopover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。\n\n:::demo `trigger`属性用于设置何时触发 Popover，支持四种触发方式：`hover`，`click`，`focus` 和 `manual`。对于触发 Popover 的元素，有两种写法：使用 `slot=\"reference\"` 的具名插槽，或使用自定义指令`v-popover`指向 Popover 的索引`ref`。\n```html\n<template>\n  <el-popover\n    placement=\"top-start\"\n    title=\"标题\"\n    width=\"200\"\n    trigger=\"hover\"\n    content=\"这是一段内容,这是一段内容,这是一段内容,这是一段内容。\">\n    <el-button slot=\"reference\">hover 激活</el-button>\n  </el-popover>\n\n  <el-popover\n    placement=\"bottom\"\n    title=\"标题\"\n    width=\"200\"\n    trigger=\"click\"\n    content=\"这是一段内容,这是一段内容,这是一段内容,这是一段内容。\">\n    <el-button slot=\"reference\">click 激活</el-button>\n  </el-popover>\n\n  <el-popover\n    ref=\"popover\"\n    placement=\"right\"\n    title=\"标题\"\n    width=\"200\"\n    trigger=\"focus\"\n    content=\"这是一段内容,这是一段内容,这是一段内容,这是一段内容。\">\n  </el-popover>\n  <el-button v-popover:popover>focus 激活</el-button>\n\n  <el-popover\n    placement=\"bottom\"\n    title=\"标题\"\n    width=\"200\"\n    trigger=\"manual\"\n    content=\"这是一段内容,这是一段内容,这是一段内容,这是一段内容。\"\n    v-model=\"visible\">\n    <el-button slot=\"reference\" @click=\"visible = !visible\">手动激活</el-button>\n  </el-popover>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        visible: false\n      };\n    }\n  };\n</script>\n```\n:::\n\n### 嵌套信息\n\n可以在 Popover 中嵌套多种类型信息，以下为嵌套表格的例子。\n\n:::demo 利用分发取代`content`属性\n```html\n<el-popover\n  placement=\"right\"\n  width=\"400\"\n  trigger=\"click\">\n  <el-table :data=\"gridData\">\n    <el-table-column width=\"150\" property=\"date\" label=\"日期\"></el-table-column>\n    <el-table-column width=\"100\" property=\"name\" label=\"姓名\"></el-table-column>\n    <el-table-column width=\"300\" property=\"address\" label=\"地址\"></el-table-column>\n  </el-table>\n  <el-button slot=\"reference\">click 激活</el-button>\n</el-popover>\n\n<script>\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }]\n      };\n    }\n  };\n</script>\n```\n:::\n\n### 嵌套操作\n\n当然，你还可以嵌套操作，这相比 Dialog 更为轻量：\n\n:::demo\n```html\n<el-popover\n  placement=\"top\"\n  width=\"160\"\n  v-model=\"visible\">\n  <p>这是一段内容这是一段内容确定删除吗？</p>\n  <div style=\"text-align: right; margin: 0\">\n    <el-button size=\"mini\" type=\"text\" @click=\"visible = false\">取消</el-button>\n    <el-button type=\"primary\" size=\"mini\" @click=\"visible = false\">确定</el-button>\n  </div>\n  <el-button slot=\"reference\">删除</el-button>\n</el-popover>\n\n<script>\n  export default {\n    data() {\n      return {\n        visible: false,\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Attributes\n| 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |\n|--------------------|----------------------------------------------------------|-------------------|-------------|--------|\n| trigger | 触发方式 | String  | click/focus/hover/manual |    click    |\n|  title              | 标题 | String | — | — |\n|  content        |  显示的内容，也可以通过 `slot` 传入 DOM   | String            | — | — |\n|  width        |  宽度  | String, Number            | — | 最小宽度 150px |\n|  placement        |  出现位置  | String | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end |  bottom |\n|  disabled       |  Popover 是否可用  | Boolean           | — |  false |\n|  value / v-model        |  状态是否可见  | Boolean           | — |  false |\n|  offset        |  出现位置的偏移量  | Number           | — |  0 |\n|  transition     |  定义渐变动画      | String             | — | fade-in-linear |\n|  visible-arrow   |  是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | — | true |\n|  popper-options        | [popper.js](https://popper.js.org/docs/v2/) 的参数 | Object            | 参考 [popper.js](https://popper.js.org/docs/v2/) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |\n| popper-class | 为 popper 添加类名 | String | — | — |\n| open-delay | 触发方式为 hover 时的显示延迟，单位为毫秒 | Number | — | — |\n| close-delay | 触发方式为 hover 时的隐藏延迟，单位为毫秒 | number | — | 200 |\n| tabindex   | Popover 组件的 [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | — | 0 |\n\n### Slot\n| 参数 | 说明 |\n|--- | ---|\n| — | Popover 内嵌 HTML 文本 |\n| reference | 触发 Popover 显示的 HTML 元素 |\n\n### Events\n| 事件名称 | 说明 | 回调参数 |\n|---------|--------|---------|\n| show | 显示时触发 | — |\n| after-enter | 显示动画播放完毕后触发 | — |\n| hide | 隐藏时触发 | — |\n| after-leave | 隐藏动画播放完毕后触发 | — |\n"
  },
  {
    "path": "examples/docs/zh-CN/progress.md",
    "content": "## Progress 进度条\n\n用于展示操作进度，告知用户当前状态和预期。\n\n### 线形进度条\n\n:::demo Progress 组件设置`percentage`属性即可，表示进度条对应的百分比，**必填**，必须在 0-100。通过 `format` 属性来指定进度条文字内容。\n\n```html\n<el-progress :percentage=\"50\"></el-progress>\n<el-progress :percentage=\"100\" :format=\"format\"></el-progress>\n<el-progress :percentage=\"100\" status=\"success\"></el-progress>\n<el-progress :percentage=\"100\" status=\"warning\"></el-progress>\n<el-progress :percentage=\"50\" status=\"exception\"></el-progress>\n\n<script>\n  export default {\n    methods: {\n      format(percentage) {\n        return percentage === 100 ? '满' : `${percentage}%`;\n      }\n    }\n  };\n</script>\n```\n:::\n\n### 百分比内显\n\n百分比不占用额外控件，适用于文件上传等场景。\n\n:::demo Progress 组件可通过 `stroke-width` 属性更改进度条的高度，并可通过 `text-inside` 属性来将进度条描述置于进度条内部。\n\n```html\n<el-progress :text-inside=\"true\" :stroke-width=\"26\" :percentage=\"70\"></el-progress>\n<el-progress :text-inside=\"true\" :stroke-width=\"24\" :percentage=\"100\" status=\"success\"></el-progress>\n<el-progress :text-inside=\"true\" :stroke-width=\"22\" :percentage=\"80\" status=\"warning\"></el-progress>\n<el-progress :text-inside=\"true\" :stroke-width=\"20\" :percentage=\"50\" status=\"exception\"></el-progress>\n```\n:::\n\n### 自定义颜色\n\n可以通过 `color` 设置进度条的颜色，`color` 可以接受颜色字符串，函数和数组。\n\n:::demo\n\n```html\n<el-progress :percentage=\"percentage\" :color=\"customColor\"></el-progress>\n\n<el-progress :percentage=\"percentage\" :color=\"customColorMethod\"></el-progress>\n\n<el-progress :percentage=\"percentage\" :color=\"customColors\"></el-progress>\n<div>\n  <el-button-group>\n    <el-button icon=\"el-icon-minus\" @click=\"decrease\"></el-button>\n    <el-button icon=\"el-icon-plus\" @click=\"increase\"></el-button>\n  </el-button-group>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        percentage: 20,\n        customColor: '#409eff',\n        customColors: [\n          {color: '#f56c6c', percentage: 20},\n          {color: '#e6a23c', percentage: 40},\n          {color: '#5cb87a', percentage: 60},\n          {color: '#1989fa', percentage: 80},\n          {color: '#6f7ad3', percentage: 100}\n        ]\n      };\n    },\n    methods: {\n      customColorMethod(percentage) {\n        if (percentage < 30) {\n          return '#909399';\n        } else if (percentage < 70) {\n          return '#e6a23c';\n        } else {\n          return '#67c23a';\n        }\n      },\n      increase() {\n        this.percentage += 10;\n        if (this.percentage > 100) {\n          this.percentage = 100;\n        }\n      },\n      decrease() {\n        this.percentage -= 10;\n        if (this.percentage < 0) {\n          this.percentage = 0;\n        }\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 环形进度条\n\nProgress 组件可通过 `type` 属性来指定使用环形进度条，在环形进度条中，还可以通过 `width` 属性来设置其大小。\n\n:::demo\n\n```html\n<el-progress type=\"circle\" :percentage=\"0\"></el-progress>\n<el-progress type=\"circle\" :percentage=\"25\"></el-progress>\n<el-progress type=\"circle\" :percentage=\"100\" status=\"success\"></el-progress>\n<el-progress type=\"circle\" :percentage=\"70\" status=\"warning\"></el-progress>\n<el-progress type=\"circle\" :percentage=\"50\" status=\"exception\"></el-progress>\n```\n:::\n\n### 仪表盘形进度条\n\n:::demo 通过 `type` 属性来指定使用仪表盘形进度条。\n\n```html\n\n<el-progress type=\"dashboard\" :percentage=\"percentage\" :color=\"colors\"></el-progress>\n<div>\n  <el-button-group>\n    <el-button icon=\"el-icon-minus\" @click=\"decrease\"></el-button>\n    <el-button icon=\"el-icon-plus\" @click=\"increase\"></el-button>\n  </el-button-group>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        percentage: 10,\n        colors: [\n          {color: '#f56c6c', percentage: 20},\n          {color: '#e6a23c', percentage: 40},\n          {color: '#5cb87a', percentage: 60},\n          {color: '#1989fa', percentage: 80},\n          {color: '#6f7ad3', percentage: 100}\n        ]\n      };\n    },\n    methods: {\n      increase() {\n        this.percentage += 10;\n        if (this.percentage > 100) {\n          this.percentage = 100;\n        }\n      },\n      decrease() {\n        this.percentage -= 10;\n        if (this.percentage < 0) {\n          this.percentage = 0;\n        }\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Attributes\n| 参数          | 说明            | 类型            | 可选值                 | 默认值   |\n|-------------  |---------------- |---------------- |---------------------- |-------- |\n| **percentage** | **百分比（必填）**   | number         |     0-100          |     0    |\n| type          | 进度条类型           | string         | line/circle/dashboard | line |\n| stroke-width  | 进度条的宽度，单位 px | number          | — | 6 |\n| text-inside  | 进度条显示文字内置在进度条内（只在 type=line 时可用） | boolean | — | false |\n| status  | 进度条当前状态 | string | success/exception/warning | — |\n| color  | 进度条背景色（会覆盖 status 状态颜色） | string/function/array | — | '' |\n| width  | 环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用） | number |  | 126 |\n| show-text  | 是否显示进度条文字内容 | boolean | — | true |\n| stroke-linecap  | circle/dashboard 类型路径两端的形状 | string | butt/round/square | round |\n| format  | 指定进度条文字内容 | function(percentage) | — | — |\n| define-back-color  | 指定进度条底色（支持 hex 格式） | string | — | — |\n| text-color  | 指定进度条字体颜色（支持 hex 格式） | string | — | — |\n"
  },
  {
    "path": "examples/docs/zh-CN/quickstart.md",
    "content": "## 快速上手\n\n本节将介绍如何在项目中使用 Element。\n\n### 使用 vue-cli@3\n\n我们为新版的 vue-cli 准备了相应的 [Element 插件](https://github.com/ElementUI/vue-cli-plugin-element)，你可以用它们快速地搭建一个基于 Element 的项目。\n\n### 使用 Starter Kit\n\n我们提供了通用的[项目模板](https://github.com/ElementUI/element-starter)，你可以直接使用。对于 Laravel 用户，我们也准备了相应的[模板](https://github.com/ElementUI/element-in-laravel-starter)，同样可以直接下载使用。\n\n如果不希望使用我们提供的模板，请继续阅读。\n\n### 引入 Element\n\n你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。\n\n#### 完整引入\n\n在 main.js 中写入以下内容：\n\n```javascript\nimport Vue from 'vue';\nimport ElementUI from 'element-ui';\nimport 'element-ui/lib/theme-chalk/index.css';\nimport App from './App.vue';\n\nVue.use(ElementUI);\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});\n```\n\n以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。\n\n#### 按需引入\n\n借助 [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component)，我们可以只引入需要的组件，以达到减小项目体积的目的。\n\n首先，安装 babel-plugin-component：\n\n```bash\nnpm install babel-plugin-component -D\n```\n\n然后，将 .babelrc 修改为：\n\n```json\n{\n  \"presets\": [[\"es2015\", { \"modules\": false }]],\n  \"plugins\": [\n    [\n      \"component\",\n      {\n        \"libraryName\": \"element-ui\",\n        \"styleLibraryName\": \"theme-chalk\"\n      }\n    ]\n  ]\n}\n```\n\n接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：\n\n```javascript\nimport Vue from 'vue';\nimport { Button, Select } from 'element-ui';\nimport App from './App.vue';\n\nVue.component(Button.name, Button);\nVue.component(Select.name, Select);\n/* 或写为\n * Vue.use(Button)\n * Vue.use(Select)\n */\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});\n```\n\n完整组件列表和引入方式（完整组件列表以 [components.json](https://github.com/ElemeFE/element/blob/master/components.json) 为准）\n\n```javascript\nimport Vue from 'vue';\nimport {\n  Pagination,\n  Dialog,\n  Autocomplete,\n  Dropdown,\n  DropdownMenu,\n  DropdownItem,\n  Menu,\n  Submenu,\n  MenuItem,\n  MenuItemGroup,\n  Input,\n  InputNumber,\n  Radio,\n  RadioGroup,\n  RadioButton,\n  Checkbox,\n  CheckboxButton,\n  CheckboxGroup,\n  Switch,\n  Select,\n  Option,\n  OptionGroup,\n  Button,\n  ButtonGroup,\n  Table,\n  TableColumn,\n  DatePicker,\n  TimeSelect,\n  TimePicker,\n  Popover,\n  Tooltip,\n  Breadcrumb,\n  BreadcrumbItem,\n  Form,\n  FormItem,\n  Tabs,\n  TabPane,\n  Tag,\n  Tree,\n  Alert,\n  Slider,\n  Icon,\n  Row,\n  Col,\n  Upload,\n  Progress,\n  Spinner,\n  Badge,\n  Card,\n  Rate,\n  Steps,\n  Step,\n  Carousel,\n  CarouselItem,\n  Collapse,\n  CollapseItem,\n  Cascader,\n  ColorPicker,\n  Transfer,\n  Container,\n  Header,\n  Aside,\n  Main,\n  Footer,\n  Timeline,\n  TimelineItem,\n  Link,\n  Divider,\n  Image,\n  Calendar,\n  Backtop,\n  PageHeader,\n  CascaderPanel,\n  Loading,\n  MessageBox,\n  Message,\n  Notification\n} from 'element-ui';\n\nVue.use(Pagination);\nVue.use(Dialog);\nVue.use(Autocomplete);\nVue.use(Dropdown);\nVue.use(DropdownMenu);\nVue.use(DropdownItem);\nVue.use(Menu);\nVue.use(Submenu);\nVue.use(MenuItem);\nVue.use(MenuItemGroup);\nVue.use(Input);\nVue.use(InputNumber);\nVue.use(Radio);\nVue.use(RadioGroup);\nVue.use(RadioButton);\nVue.use(Checkbox);\nVue.use(CheckboxButton);\nVue.use(CheckboxGroup);\nVue.use(Switch);\nVue.use(Select);\nVue.use(Option);\nVue.use(OptionGroup);\nVue.use(Button);\nVue.use(ButtonGroup);\nVue.use(Table);\nVue.use(TableColumn);\nVue.use(DatePicker);\nVue.use(TimeSelect);\nVue.use(TimePicker);\nVue.use(Popover);\nVue.use(Tooltip);\nVue.use(Breadcrumb);\nVue.use(BreadcrumbItem);\nVue.use(Form);\nVue.use(FormItem);\nVue.use(Tabs);\nVue.use(TabPane);\nVue.use(Tag);\nVue.use(Tree);\nVue.use(Alert);\nVue.use(Slider);\nVue.use(Icon);\nVue.use(Row);\nVue.use(Col);\nVue.use(Upload);\nVue.use(Progress);\nVue.use(Spinner);\nVue.use(Badge);\nVue.use(Card);\nVue.use(Rate);\nVue.use(Steps);\nVue.use(Step);\nVue.use(Carousel);\nVue.use(CarouselItem);\nVue.use(Collapse);\nVue.use(CollapseItem);\nVue.use(Cascader);\nVue.use(ColorPicker);\nVue.use(Transfer);\nVue.use(Container);\nVue.use(Header);\nVue.use(Aside);\nVue.use(Main);\nVue.use(Footer);\nVue.use(Timeline);\nVue.use(TimelineItem);\nVue.use(Link);\nVue.use(Divider);\nVue.use(Image);\nVue.use(Calendar);\nVue.use(Backtop);\nVue.use(PageHeader);\nVue.use(CascaderPanel);\n\nVue.use(Loading.directive);\n\nVue.prototype.$loading = Loading.service;\nVue.prototype.$msgbox = MessageBox;\nVue.prototype.$alert = MessageBox.alert;\nVue.prototype.$confirm = MessageBox.confirm;\nVue.prototype.$prompt = MessageBox.prompt;\nVue.prototype.$notify = Notification;\nVue.prototype.$message = Message;\n```\n\n### 全局配置\n\n在引入 Element 时，可以传入一个全局配置对象。该对象目前支持 `size` 与 `zIndex` 字段。`size` 用于改变组件的默认尺寸，`zIndex` 设置弹框的初始 z-index（默认值：2000）。按照引入 Element 的方式，具体操作如下：\n\n完整引入 Element：\n\n```js\nimport Vue from 'vue';\nimport Element from 'element-ui';\nVue.use(Element, { size: 'small', zIndex: 3000 });\n```\n\n按需引入 Element：\n\n```js\nimport Vue from 'vue';\nimport { Button } from 'element-ui';\n\nVue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };\nVue.use(Button);\n```\n\n按照以上设置，项目中所有拥有 `size` 属性的组件的默认尺寸均为 'small'，弹框的初始 z-index 为 3000。\n\n### 开始使用\n\n至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕，现在就可以编写代码了。各个组件的使用方法请参阅它们各自的文档。\n\n### 使用 Nuxt.js\n\n我们还可以使用 [Nuxt.js](https://nuxtjs.org)：\n\n<div class=\"glitch-embed-wrap\" style=\"height: 420px; width: 100%;\">\n  <iframe src=\"https://glitch.com/embed/#!/embed/nuxt-with-element?path=nuxt.config.js&previewSize=0&attributionHidden=true\" alt=\"nuxt-with-element on glitch\" style=\"height: 100%; width: 100%; border: 0;\"></iframe>\n</div>\n\n"
  },
  {
    "path": "examples/docs/zh-CN/radio.md",
    "content": "## Radio 单选框\n\n在一组备选项中进行单选\n\n### 基础用法\n\n由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。\n\n:::demo 要使用 Radio 组件，只需要设置`v-model`绑定变量，选中意味着变量的值为相应 Radio `label`属性的值，`label`可以是`String`、`Number`或`Boolean`。\n\n```html\n<template>\n  <el-radio v-model=\"radio\" label=\"1\">备选项</el-radio>\n  <el-radio v-model=\"radio\" label=\"2\">备选项</el-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio: '1'\n      };\n    }\n  }\n</script>\n```\n:::\n\n### 禁用状态\n\n单选框不可用的状态。\n\n:::demo 只要在`el-radio`元素中设置`disabled`属性即可，它接受一个`Boolean`，`true`为禁用。\n```html\n<template>\n  <el-radio disabled v-model=\"radio\" label=\"禁用\">备选项</el-radio>\n  <el-radio disabled v-model=\"radio\" label=\"选中且禁用\">备选项</el-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio: '选中且禁用'\n      };\n    }\n  }\n</script>\n```\n:::\n\n### 单选框组\n\n适用于在多个互斥的选项中选择的场景\n\n:::demo 结合`el-radio-group`元素和子元素`el-radio`可以实现单选组，在`el-radio-group`中绑定`v-model`，在`el-radio`中设置好`label`即可，无需再给每一个`el-radio`绑定变量，另外，还提供了`change`事件来响应变化，它会传入一个参数`value`。\n\n```html\n<template>\n  <el-radio-group v-model=\"radio\">\n    <el-radio :label=\"3\">备选项</el-radio>\n    <el-radio :label=\"6\">备选项</el-radio>\n    <el-radio :label=\"9\">备选项</el-radio>\n  </el-radio-group>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio: 3\n      };\n    }\n  }\n</script>\n```\n:::\n\n### 按钮样式\n\n按钮样式的单选组合。\n\n:::demo 只需要把`el-radio`元素换成`el-radio-button`元素即可，此外，Element 还提供了`size`属性。\n```html\n<template>\n  <div>\n    <el-radio-group v-model=\"radio1\">\n      <el-radio-button label=\"上海\"></el-radio-button>\n      <el-radio-button label=\"北京\"></el-radio-button>\n      <el-radio-button label=\"广州\"></el-radio-button>\n      <el-radio-button label=\"深圳\"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-radio-group v-model=\"radio2\" size=\"medium\">\n      <el-radio-button label=\"上海\" ></el-radio-button>\n      <el-radio-button label=\"北京\"></el-radio-button>\n      <el-radio-button label=\"广州\"></el-radio-button>\n      <el-radio-button label=\"深圳\"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-radio-group v-model=\"radio3\" size=\"small\">\n      <el-radio-button label=\"上海\"></el-radio-button>\n      <el-radio-button label=\"北京\" disabled ></el-radio-button>\n      <el-radio-button label=\"广州\"></el-radio-button>\n      <el-radio-button label=\"深圳\"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-radio-group v-model=\"radio4\" disabled size=\"mini\">\n      <el-radio-button label=\"上海\"></el-radio-button>\n      <el-radio-button label=\"北京\"></el-radio-button>\n      <el-radio-button label=\"广州\"></el-radio-button>\n      <el-radio-button label=\"深圳\"></el-radio-button>\n    </el-radio-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio1: '上海',\n        radio2: '上海',\n        radio3: '上海',\n        radio4: '上海'\n      };\n    }\n  }\n</script>\n```\n:::\n\n### 带有边框\n\n:::demo 设置`border`属性可以渲染为带有边框的单选框。\n```html\n<template>\n  <div>\n    <el-radio v-model=\"radio1\" label=\"1\" border>备选项1</el-radio>\n    <el-radio v-model=\"radio1\" label=\"2\" border>备选项2</el-radio>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-radio v-model=\"radio2\" label=\"1\" border size=\"medium\">备选项1</el-radio>\n    <el-radio v-model=\"radio2\" label=\"2\" border size=\"medium\">备选项2</el-radio>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-radio-group v-model=\"radio3\" size=\"small\">\n      <el-radio label=\"1\" border>备选项1</el-radio>\n      <el-radio label=\"2\" border disabled>备选项2</el-radio>\n    </el-radio-group>\n  </div>\n  <div style=\"margin-top: 20px\">\n    <el-radio-group v-model=\"radio4\" size=\"mini\" disabled>\n      <el-radio label=\"1\" border>备选项1</el-radio>\n      <el-radio label=\"2\" border>备选项2</el-radio>\n    </el-radio-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio1: '1',\n        radio2: '1',\n        radio3: '1',\n        radio4: '1'\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Radio Attributes\n| 参数      | 说明    | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| value / v-model | 绑定值 | string / number / boolean | — | — |\n| label     | Radio 的 value   | string / number / boolean    |       —        |      —   |\n| disabled  | 是否禁用    | boolean   | — | false   |\n| border  | 是否显示边框  | boolean   | — | false   |\n| size  | Radio 的尺寸，仅在 border 为真时有效  | string  | medium / small / mini | — |\n| name | 原生 name 属性 | string    |      —         |     —    |\n\n### Radio Events\n| 事件名称 | 说明 | 回调参数 |\n|---------- |-------- |---------- |\n| input  | 绑定值变化时触发的事件 |  选中的 Radio label 值  |\n\n### Radio-group Attributes\n| 参数      | 说明    | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| value / v-model | 绑定值 | string / number / boolean | — | — |\n| size     | 单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效   | string  | medium / small / mini |    —     |\n| disabled  | 是否禁用    | boolean   | — | false   |\n| text-color  | 按钮形式的 Radio 激活时的文本颜色    | string   | — | #ffffff   |\n| fill  | 按钮形式的 Radio 激活时的填充色和边框色    | string   | — | #409EFF   |\n\n### Radio-group Events\n| 事件名称 | 说明 | 回调参数 |\n|---------- |-------- |---------- |\n| input  | 绑定值变化时触发的事件 |  选中的 Radio label 值  |\n\n### Radio-button Attributes\n| 参数      | 说明    | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| label     | Radio 的 value  | string / number  |        —       |     —    |\n| disabled  | 是否禁用    | boolean   | — | false   |\n| name | 原生 name 属性 | string    |      —         |     —    |\n"
  },
  {
    "path": "examples/docs/zh-CN/rate.md",
    "content": "## Rate 评分\n\n评分组件\n\n### 基础用法\n\n:::demo 评分默认被分为三个等级，可以利用颜色数组对分数及情感倾向进行分级（默认情况下不区分颜色）。三个等级所对应的颜色用`colors`属性设置，而它们对应的两个阈值则通过 `low-threshold` 和 `high-threshold` 设定。你也可以通过传入颜色对象来自定义分段，键名为分段的界限值，键值为对应的颜色。\n```html\n<div class=\"block\">\n  <span class=\"demonstration\">默认不区分颜色</span>\n  <el-rate v-model=\"value1\"></el-rate>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">区分颜色</span>\n  <el-rate\n    v-model=\"value2\"\n    :colors=\"colors\">\n  </el-rate>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: null,\n        value2: null,\n        colors: ['#99A9BF', '#F7BA2A', '#FF9900']  // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 辅助文字\n\n用辅助文字直接地表达对应分数\n\n:::demo 为组件设置 `show-text` 属性会在右侧显示辅助文字。通过设置 `texts` 可以为每一个分值指定对应的辅助文字。`texts` 为一个数组，长度应等于最大值 `max`。\n```html\n<el-rate\n  v-model=\"value\"\n  show-text>\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: null\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 其它 icon\n\n当有多层评价时，可以用不同类型的 icon 区分评分层级\n\n:::demo 设置`icon-classes`属性可以自定义不同分段的图标。若传入数组，共有 3 个元素，为 3 个分段所对应的类名；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的类名。本例还使用`void-icon-class`指定了未选中时的图标类名。\n```html\n<el-rate\n  v-model=\"value\"\n  :icon-classes=\"iconClasses\"\n  void-icon-class=\"icon-rate-face-off\"\n  :colors=\"['#99A9BF', '#F7BA2A', '#FF9900']\">\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: null,\n        iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'] // 等同于 { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 只读\n\n只读的评分用来展示分数，允许出现半星\n\n:::demo 为组件设置 `disabled` 属性表示组件为只读，支持小数分值。此时若设置 `show-score`，则会在右侧显示目前的分值。可以提供 `score-template` 作为显示模板，模板为一个包含了 `{value}` 的字符串，`{value}` 会被解析为分值。\n```html\n<el-rate\n  v-model=\"value\"\n  disabled\n  show-score\n  text-color=\"#ff9900\"\n  score-template=\"{value}\">\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: 3.7\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Attributes\n| 参数      | 说明    | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| value / v-model | 绑定值 | number | — | 0 |\n| max | 最大分值 | number | — | 5 |\n| disabled | 是否为只读 | boolean | — | false |\n| allow-half | 是否允许半选 | boolean | — | false |\n| low-threshold | 低分和中等分数的界限值，值本身被划分在低分中 | number | — | 2 |\n| high-threshold | 高分和中等分数的界限值，值本身被划分在高分中 | number | — | 4 |\n| colors | icon 的颜色。若传入数组，共有 3 个元素，为 3 个分段所对应的颜色；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的颜色 | array/object | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |\n| void-color | 未选中 icon 的颜色 | string | — | #C6D1DE |\n| disabled-void-color | 只读时未选中 icon 的颜色 | string | — | #EFF2F7 |\n| icon-classes | icon 的类名。若传入数组，共有 3 个元素，为 3 个分段所对应的类名；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的类名 | array/object | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |\n| void-icon-class | 未选中 icon 的类名 | string | — | el-icon-star-off |\n| disabled-void-icon-class | 只读时未选中 icon 的类名 | string | — | el-icon-star-on |\n| show-text | 是否显示辅助文字，若为真，则会从 texts 数组中选取当前分数对应的文字内容 | boolean | — | false |\n| show-score | 是否显示当前分数，show-score 和 show-text 不能同时为真 | boolean | — | false |\n| text-color | 辅助文字的颜色 | string | — | #1F2D3D |\n| texts | 辅助文字数组 | array | — | ['极差', '失望', '一般', '满意', '惊喜'] |\n| score-template | 分数显示模板 | string | — | {value} |\n\n### Events\n| 事件名称      | 说明    | 回调参数      |\n|---------- |-------- |---------- |\n| change | 分值改变时触发 | 改变后的分值 |\n\n"
  },
  {
    "path": "examples/docs/zh-CN/result.md",
    "content": "## Result 结果\n\n用于对用户的操作结果或者异常状态做反馈。\n\n### 基础用法\n\n:::demo\n\n```html\n<el-row>\n  <el-col :sm=\"12\" :lg=\"6\">\n    <el-result icon=\"success\" title=\"成功提示\" subTitle=\"请根据提示进行操作\">\n      <template slot=\"extra\">\n        <el-button type=\"primary\" size=\"medium\">返回</el-button>\n      </template>\n    </el-result>\n  </el-col>\n  <el-col :sm=\"12\" :lg=\"6\">\n    <el-result icon=\"warning\" title=\"警告提示\" subTitle=\"请根据提示进行操作\">\n      <template slot=\"extra\">\n        <el-button type=\"primary\" size=\"medium\">返回</el-button>\n      </template>\n    </el-result>\n  </el-col>\n  <el-col :sm=\"12\" :lg=\"6\">\n    <el-result icon=\"error\" title=\"错误提示\" subTitle=\"请根据提示进行操作\">\n      <template slot=\"extra\">\n        <el-button type=\"primary\" size=\"medium\">返回</el-button>\n      </template>\n    </el-result>\n  </el-col>\n  <el-col :sm=\"12\" :lg=\"6\">\n    <el-result icon=\"info\" title=\"信息提示\" subTitle=\"请根据提示进行操作\">\n      <template slot=\"extra\">\n        <el-button type=\"primary\" size=\"medium\">返回</el-button>\n      </template>\n    </el-result>\n  </el-col>\n</el-row>\n```\n\n:::\n\n### 自定义内容\n\n:::demo\n\n```html\n<el-result title=\"404\" subTitle=\"抱歉，请求错误\">\n  <template slot=\"icon\">\n    <el-image src=\"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png\"></el-image>\n  </template>\n  <template slot=\"extra\">\n    <el-button type=\"primary\" size=\"medium\">返回</el-button>\n  </template>\n</el-result>\n```\n\n:::\n\n### Result Attributes\n\n| 参数          | 说明            | 类型            | 可选值                 | 默认值   |\n|-------------  |---------------- |---------------- |---------------------- |-------- |\n| title          | 标题         | string  |          —             |    —     |\n| sub-title    | 二级标题  | string | — |    —  |\n| icon  | 图标类型    | string  |    success / warning / info / error  |  info |\n\n### Result Slots\n\n| Name | 说明 |\n|------|--------|\n| icon | 自定义图标  |\n| title | 自定义标题     |\n| subTitle | 自定义二级标题     |\n| extra | 自定义底部额外区域     |\n"
  },
  {
    "path": "examples/docs/zh-CN/select.md",
    "content": "## Select 选择器\n\n当选项过多时，使用下拉菜单展示并选择内容。\n\n### 基础用法\n\n适用广泛的基础单选\n:::demo `v-model`的值为当前被选中的`el-option`的 value 属性值\n```html\n<template>\n  <el-select v-model=\"value\" placeholder=\"请选择\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value: ''\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 有禁用选项\n\n:::demo 在`el-option`中，设定`disabled`值为 true，即可禁用该选项\n```html\n<template>\n  <el-select v-model=\"value\" placeholder=\"请选择\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\"\n      :disabled=\"item.disabled\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶',\n          disabled: true\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value: ''\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 禁用状态\n\n选择器不可用状态\n\n:::demo 为`el-select`设置`disabled`属性，则整个选择器不可用\n```html\n<template>\n  <el-select v-model=\"value\" disabled placeholder=\"请选择\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n  \n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value: ''\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 可清空单选\n\n包含清空按钮，可将选择器清空为初始状态\n\n:::demo 为`el-select`设置`clearable`属性，则可将选择器清空。需要注意的是，`clearable`属性仅适用于单选。\n```html\n<template>\n  <el-select v-model=\"value\" clearable placeholder=\"请选择\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value: ''\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 基础多选\n\n适用性较广的基础多选，用 Tag 展示已选项\n\n:::demo 为`el-select`设置`multiple`属性即可启用多选，此时`v-model`的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，你也可以设置`collapse-tags`属性将它们合并为一段文字。\n```html\n<template>\n  <el-select v-model=\"value1\" multiple placeholder=\"请选择\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n\n  <el-select\n    v-model=\"value2\"\n    multiple\n    collapse-tags\n    style=\"margin-left: 20px;\"\n    placeholder=\"请选择\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value1: [],\n        value2: []\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 自定义模板\n\n可以自定义备选项\n\n:::demo 将自定义的 HTML 模板插入`el-option`的 slot 中即可。\n```html\n<template>\n  <el-select v-model=\"value\" placeholder=\"请选择\">\n    <el-option\n      v-for=\"item in cities\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n      <span style=\"float: left\">{{ item.label }}</span>\n      <span style=\"float: right; color: #8492a6; font-size: 13px\">{{ item.value }}</span>\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        cities: [{\n          value: 'Beijing',\n          label: '北京'\n        }, {\n          value: 'Shanghai',\n          label: '上海'\n        }, {\n          value: 'Nanjing',\n          label: '南京'\n        }, {\n          value: 'Chengdu',\n          label: '成都'\n        }, {\n          value: 'Shenzhen',\n          label: '深圳'\n        }, {\n          value: 'Guangzhou',\n          label: '广州'\n        }],\n        value: ''\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 分组\n\n备选项进行分组展示\n\n:::demo 使用`el-option-group`对备选项进行分组，它的`label`属性为分组名\n```html\n<template>\n  <el-select v-model=\"value\" placeholder=\"请选择\">\n    <el-option-group\n      v-for=\"group in options\"\n      :key=\"group.label\"\n      :label=\"group.label\">\n      <el-option\n        v-for=\"item in group.options\"\n        :key=\"item.value\"\n        :label=\"item.label\"\n        :value=\"item.value\">\n      </el-option>\n    </el-option-group>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          label: '热门城市',\n          options: [{\n            value: 'Shanghai',\n            label: '上海'\n          }, {\n            value: 'Beijing',\n            label: '北京'\n          }]\n        }, {\n          label: '城市名',\n          options: [{\n            value: 'Chengdu',\n            label: '成都'\n          }, {\n            value: 'Shenzhen',\n            label: '深圳'\n          }, {\n            value: 'Guangzhou',\n            label: '广州'\n          }, {\n            value: 'Dalian',\n            label: '大连'\n          }]\n        }],\n        value: ''\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 可搜索\n\n可以利用搜索功能快速查找选项\n\n:::demo 为`el-select`添加`filterable`属性即可启用搜索功能。默认情况下，Select 会找出所有`label`属性包含输入值的选项。如果希望使用其他的搜索逻辑，可以通过传入一个`filter-method`来实现。`filter-method`为一个`Function`，它会在输入值发生变化时调用，参数为当前输入值。\n```html\n<template>\n  <el-select v-model=\"value\" filterable placeholder=\"请选择\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value: ''\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 远程搜索\n\n从服务器搜索数据，输入关键字进行查找\n:::demo 为了启用远程搜索，需要将`filterable`和`remote`设置为`true`，同时传入一个`remote-method`。`remote-method`为一个`Function`，它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，如果`el-option`是通过`v-for`指令渲染出来的，此时需要为`el-option`添加`key`属性，且其值需具有唯一性，比如此例中的`item.value`。\n```html\n<template>\n  <el-select\n    v-model=\"value\"\n    multiple\n    filterable\n    remote\n    reserve-keyword\n    placeholder=\"请输入关键词\"\n    :remote-method=\"remoteMethod\"\n    :loading=\"loading\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [],\n        value: [],\n        list: [],\n        loading: false,\n        states: [\"Alabama\", \"Alaska\", \"Arizona\",\n        \"Arkansas\", \"California\", \"Colorado\",\n        \"Connecticut\", \"Delaware\", \"Florida\",\n        \"Georgia\", \"Hawaii\", \"Idaho\", \"Illinois\",\n        \"Indiana\", \"Iowa\", \"Kansas\", \"Kentucky\",\n        \"Louisiana\", \"Maine\", \"Maryland\",\n        \"Massachusetts\", \"Michigan\", \"Minnesota\",\n        \"Mississippi\", \"Missouri\", \"Montana\",\n        \"Nebraska\", \"Nevada\", \"New Hampshire\",\n        \"New Jersey\", \"New Mexico\", \"New York\",\n        \"North Carolina\", \"North Dakota\", \"Ohio\",\n        \"Oklahoma\", \"Oregon\", \"Pennsylvania\",\n        \"Rhode Island\", \"South Carolina\",\n        \"South Dakota\", \"Tennessee\", \"Texas\",\n        \"Utah\", \"Vermont\", \"Virginia\",\n        \"Washington\", \"West Virginia\", \"Wisconsin\",\n        \"Wyoming\"]\n      }\n    },\n    mounted() {\n      this.list = this.states.map(item => {\n        return { value: `value:${item}`, label: `label:${item}` };\n      });\n    },\n    methods: {\n      remoteMethod(query) {\n        if (query !== '') {\n          this.loading = true;\n          setTimeout(() => {\n            this.loading = false;\n            this.options = this.list.filter(item => {\n              return item.label.toLowerCase()\n                .indexOf(query.toLowerCase()) > -1;\n            });\n          }, 200);\n        } else {\n          this.options = [];\n        }\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 创建条目\n可以创建并选中选项中不存在的条目\n:::demo 使用`allow-create`属性即可通过在输入框中输入文字来创建新的条目。注意此时`filterable`必须为真。本例还使用了`default-first-option`属性，在该属性打开的情况下，按下回车就可以选中当前选项列表中的第一个选项，无需使用鼠标或键盘方向键进行定位。\n```html\n<template>\n  <el-select\n    v-model=\"value\"\n    multiple\n    filterable\n    allow-create\n    default-first-option\n    placeholder=\"请选择文章标签\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'HTML',\n          label: 'HTML'\n        }, {\n          value: 'CSS',\n          label: 'CSS'\n        }, {\n          value: 'JavaScript',\n          label: 'JavaScript'\n        }],\n        value: []\n      }\n    }\n  }\n</script>\n```\n:::\n\n:::tip\n如果 Select 的绑定值为对象类型，请务必指定 `value-key` 作为它的唯一性标识。\n:::\n\n### Select Attributes\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| value / v-model | 绑定值 | boolean / string / number | — | — |\n| multiple | 是否多选 | boolean | — | false |\n| disabled | 是否禁用 | boolean | — | false |\n| value-key | 作为 value 唯一标识的键名，绑定值为对象类型时必填 | string | — | value |\n| size | 输入框尺寸 | string | medium/small/mini | — |\n| clearable | 是否可以清空选项 | boolean | — | false |\n| collapse-tags | 多选时是否将选中值按文字的形式展示 | boolean | — | false |\n| multiple-limit | 多选时用户最多可以选择的项目数，为 0 则不限制 | number | — | 0 |\n| name | select input 的 name 属性 | string | — | — |\n| autocomplete | select input 的 autocomplete 属性 | string | — | off |\n| auto-complete | 下个主版本弃用 | string | — | off |\n| placeholder | 占位符 | string | — | 请选择 |\n| filterable | 是否可搜索 | boolean | — | false |\n| allow-create | 是否允许用户创建新条目，需配合 `filterable` 使用 | boolean | — | false |\n| filter-method | 自定义搜索方法 | function | — | — |\n| remote | 是否为远程搜索 | boolean | — | false |\n| remote-method | 远程搜索方法 | function | — | — |\n| loading | 是否正在从远程获取数据 | boolean | — | false |\n| loading-text | 远程加载时显示的文字 | string | — | 加载中 |\n| no-match-text | 搜索条件无匹配时显示的文字，也可以使用`slot=\"empty\"`设置 | string | — | 无匹配数据 |\n| no-data-text | 选项为空时显示的文字，也可以使用`slot=\"empty\"`设置 | string | — | 无数据 |\n| popper-class | Select 下拉框的类名 | string | — | — |\n| reserve-keyword | 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 | boolean | — | false |\n| default-first-option | 在输入框按下回车，选择第一个匹配项。需配合 `filterable` 或 `remote` 使用 | boolean | - | false |\n| popper-append-to-body | 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false | boolean | - | true |\n| automatic-dropdown | 对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单 | boolean | - | false |\n\n### Select Events\n| 事件名称 | 说明 | 回调参数 |\n|---------|---------|---------|\n| change | 选中值发生变化时触发 | 目前的选中值 |\n| visible-change | 下拉框出现/隐藏时触发 | 出现则为 true，隐藏则为 false |\n| remove-tag | 多选模式下移除tag时触发 | 移除的tag值 |\n| clear | 可清空的单选模式下用户点击清空按钮时触发 | — |\n| blur | 当 input 失去焦点时触发 | (event: Event) |\n| focus | 当 input 获得焦点时触发 | (event: Event) |\n\n### Select Slots\n|   name  | 说明     |\n|---------|---------|\n|    —    | Option 组件列表 |\n| prefix  | Select 组件头部内容 |\n| empty | 无选项时的列表 |\n\n### Option Group Attributes\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| label | 分组的组名 | string | — | — |\n| disabled | 是否将该分组下所有选项置为禁用 | boolean | — | false |\n\n### Option Attributes\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| value | 选项的值 | string/number/object | — | — |\n| label | 选项的标签，若不设置则默认与 `value` 相同 | string/number | — | — |\n| disabled | 是否禁用该选项 | boolean | — | false |\n\n### Methods\n| 方法名 | 说明 | 参数 |\n| ---- | ---- | ---- |\n| focus | 使 input 获取焦点 | - |\n| blur | 使 input 失去焦点，并隐藏下拉框 | - |\n"
  },
  {
    "path": "examples/docs/zh-CN/skeleton.md",
    "content": "## Skeleton 骨架屏\n\n在需要等待加载内容的位置设置一个骨架屏，某些场景下比 Loading 的视觉效果更好。\n\n### 基础用法\n\n基础的骨架效果。\n\n:::demo\n\n```html\n<template>\n  <el-skeleton />\n</template>\n```\n\n:::\n\n### 更多参数\n\n可以配置骨架屏段落数量，以便更接近真实渲染效果。首行会被渲染一个长度 33% 的段首。\n\n:::demo\n\n```html\n<el-skeleton :rows=\"6\" />\n```\n\n:::\n\n### 动画效果\n\n显示动画效果。\n\n:::demo\n\n```html\n<el-skeleton :rows=\"6\" animated />\n```\n\n:::\n\n### 自定义样式\n\nElement 提供的排版模式有时候并不满足要求，当您想要用自己定义的模板时，可以通过一个具名 Slot 来自己设定模板。\n\n我们提供了不同的模板单元可供使用，具体可选值请看 API 详细描述。 建议在描述模板的时候，尽量靠近真实的 DOM 结构，这样可以避免 DOM 高度差距引起的抖动。\n:::demo\n\n```html\n<template>\n  <el-skeleton style=\"width: 240px\">\n    <template slot=\"template\">\n      <el-skeleton-item variant=\"image\" style=\"width: 240px; height: 240px;\" />\n      <div style=\"padding: 14px;\">\n        <el-skeleton-item variant=\"p\" style=\"width: 50%\" />\n        <div\n          style=\"display: flex; align-items: center; justify-items: space-between;\"\n        >\n          <el-skeleton-item variant=\"text\" style=\"margin-right: 16px;\" />\n          <el-skeleton-item variant=\"text\" style=\"width: 30%;\" />\n        </div>\n      </div>\n    </template>\n  </el-skeleton>\n</template>\n```\n\n:::\n\n### Loading 状态\n\n当 Loading 结束之后，我们往往需要显示真实的 UI，可以通过 `loading` 的值来控制是否显示真实的 DOM。然后通过\n具名 Slot 来设置当 loading 结束之后需要展示的 UI。\n\n:::demo\n\n```html\n<template>\n  <div style=\"width: 240px\">\n    <p>\n      <label style=\"margin-right: 16px;\">切换 Loading</label>\n      <el-switch v-model=\"loading\" />\n    </p>\n    <el-skeleton style=\"width: 240px\" :loading=\"loading\" animated>\n      <template slot=\"template\">\n        <el-skeleton-item\n          variant=\"image\"\n          style=\"width: 240px; height: 240px;\"\n        />\n        <div style=\"padding: 14px;\">\n          <el-skeleton-item variant=\"h3\" style=\"width: 50%;\" />\n          <div\n            style=\"display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;\"\n          >\n            <el-skeleton-item variant=\"text\" style=\"margin-right: 16px;\" />\n            <el-skeleton-item variant=\"text\" style=\"width: 30%;\" />\n          </div>\n        </div>\n      </template>\n      <template>\n        <el-card :body-style=\"{ padding: '0px', marginBottom: '1px' }\">\n          <img\n            src=\"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png\"\n            class=\"image\"\n          />\n          <div style=\"padding: 14px;\">\n            <span>好吃的汉堡</span>\n            <div class=\"bottom card-header\">\n              <span class=\"time\">{{ currentDate }}</span>\n              <el-button type=\"text\" class=\"button\">操作按钮</el-button>\n            </div>\n          </div>\n        </el-card>\n      </template>\n    </el-skeleton>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        loading: true,\n        currentDate: '2021-06-01'\n      }\n    },\n  }\n</script>\n```\n\n:::\n\n### 渲染多条数据\n\n大多时候, 骨架屏都被用来渲染列表, 当我们需要在从服务器获取数据的时候来渲染一个假的 UI。利用 `count` 这个属性就能控制渲染多少条假的数据在页面上\n\n:::tip\n请注意, 请尽可能的将 `count` 的大小保持在最小状态, 即使是假的 UI, DOM 元素多了之后, 照样会引起性能问题, 并且在骨架屏销毁时所消耗的时间也会更长(相对的)。\n:::\n\n:::demo\n\n\n```html\n<template>\n  <div style=\"width: 400px\">\n    <p>\n      <el-button @click=\"setLoading\">点我重新加载</el-button>\n    </p>\n    <el-skeleton style=\"width:400px\" :loading=\"loading\" animated :count=\"3\">\n      <template slot=\"template\">\n        <el-skeleton-item\n          variant=\"image\"\n          style=\"width: 400px; height: 267px;\"\n        />\n        <div style=\"padding: 14px;\">\n          <el-skeleton-item variant=\"h3\" style=\"width: 50%;\" />\n          <div\n            style=\"display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;\"\n          >\n            <el-skeleton-item variant=\"text\" style=\"margin-right: 16px;\" />\n            <el-skeleton-item variant=\"text\" style=\"width: 30%;\" />\n          </div>\n        </div>\n      </template>\n      <template>\n        <el-card\n          :body-style=\"{ padding: '0px', marginBottom: '1px' }\"\n          v-for=\"item in lists\"\n          :key=\"item.name\"\n        >\n          <img :src=\"item.imgUrl\" class=\"image multi-content\" />\n          <div style=\"padding: 14px;\">\n            <span>{{ item.name }}</span>\n            <div class=\"bottom card-header\">\n              <span class=\"time\">{{ currentDate }}</span>\n              <el-button type=\"text\" class=\"button\">操作按钮</el-button>\n            </div>\n          </div>\n        </el-card>\n      </template>\n    </el-skeleton>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        loading: true,\n        currentDate: '2021-06-01',\n        lists: [],\n      }\n    },\n    mounted() {\n      this.loading = false\n      this.lists = [\n        {\n          imgUrl:\n            'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',\n          name: '鹿',\n        },\n        {\n          imgUrl:\n            'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',\n          name: '马',\n        },\n        {\n          imgUrl:\n            'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',\n          name: '山狮',\n        },\n      ]\n    },\n    methods: {\n      setLoading() {\n        this.loading = true\n        setTimeout(() => (this.loading = false), 2000)\n      },\n    },\n  }\n</script>\n```\n\n:::\n\n### 防止渲染抖动\n\n有的时候，API 的请求回来的特别快，往往骨架占位刚刚被渲染，真实的数据就已经回来了，用户的界面会突然一闪，此时为了避免这种情况，就需要通过 `throttle` 属性来避免这个问题。\n\n:::demo\n\n```html\n<template>\n  <div style=\"width: 240px\">\n    <p>\n      <label style=\"margin-right: 16px;\">切换 Loading</label>\n      <el-switch v-model=\"loading\" />\n    </p>\n    <el-skeleton\n      style=\"width: 240px\"\n      :loading=\"loading\"\n      animated\n      :throttle=\"500\"\n    >\n      <template slot=\"template\">\n        <el-skeleton-item\n          variant=\"image\"\n          style=\"width: 240px; height: 240px;\"\n        />\n        <div style=\"padding: 14px;\">\n          <el-skeleton-item variant=\"h3\" style=\"width: 50%;\" />\n          <div\n            style=\"display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;\"\n          >\n            <el-skeleton-item variant=\"text\" style=\"margin-right: 16px;\" />\n            <el-skeleton-item variant=\"text\" style=\"width: 30%;\" />\n          </div>\n        </div>\n      </template>\n      <template>\n        <el-card :body-style=\"{ padding: '0px', marginBottom: '1px'}\">\n          <img\n            src=\"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png\"\n            class=\"image\"\n          />\n          <div style=\"padding: 14px;\">\n            <span>好吃的汉堡</span>\n            <div class=\"bottom card-header\">\n              <span class=\"time\">{{ currentDate }}</span>\n              <el-button type=\"text\" class=\"button\">操作按钮</el-button>\n            </div>\n          </div>\n        </el-card>\n      </template>\n    </el-skeleton>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        loading: false,\n        currentDate: '2021-06-01'\n      }\n    },\n  }\n</script>\n```\n\n:::\n\n### Skeleton Attributes\n\n| 参数     | 说明                                        | 类型    | 可选值       | 默认值 |\n| -------- | ------------------------------------------- | ------- | ------------ | ------ |\n| animated | 是否使用动画                                | boolean | true / false | false  |\n| count    | 渲染多少个 template, 建议使用尽可能小的数字 | number  | integer      | 1      |\n| loading  | 是否显示 skeleton 骨架屏                    | boolean | true / false | true |\n| rows     | 骨架屏段落数量                              | number  | 正整数       | 4      |\n| throttle | 延迟占位 DOM 渲染的时间, 单位是毫秒         | number  | 正整数       | 0      |\n\n### Skeleton Item Attributes\n\n| 参数    | 说明                     | 类型         | 可选值                                                               | 默认值 |\n| ------- | ------------------------ | ------------ | -------------------------------------------------------------------- | ------ |\n| variant | 当前显示的占位元素的样式 | Enum(string) | p / h1 / h3 / text / caption / button / image / circle / rect | text   |\n\n### Skeleton Slots\n\n| name     | description          |\n| -------- | -------------------- |\n| default  | \b用来展示真实 UI     |\n| template | 用来展示自定义占位符 |\n"
  },
  {
    "path": "examples/docs/zh-CN/slider.md",
    "content": "## Slider 滑块\n\n通过拖动滑块在一个固定区间内进行选择\n\n### 基础用法\n\n在拖动滑块时，显示当前值\n\n:::demo 通过设置绑定值自定义滑块的初始值\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">默认</span>\n    <el-slider v-model=\"value1\"></el-slider>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">自定义初始值</span>\n    <el-slider v-model=\"value2\"></el-slider>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">隐藏 Tooltip</span>\n    <el-slider v-model=\"value3\" :show-tooltip=\"false\"></el-slider>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">格式化 Tooltip</span>\n    <el-slider v-model=\"value4\" :format-tooltip=\"formatTooltip\"></el-slider>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">禁用</span>\n    <el-slider v-model=\"value5\" disabled></el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: 0,\n        value2: 50,\n        value3: 36,\n        value4: 48,\n        value5: 42\n      }\n    },\n    methods: {\n      formatTooltip(val) {\n        return val / 100;\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 离散值\n\n选项可以是离散的\n\n:::demo 改变`step`的值可以改变步长，通过设置`show-stops`属性可以显示间断点\n```html\n<template>\n  <div class=\"block\">\n    <span class=\"demonstration\">不显示间断点</span>\n    <el-slider\n      v-model=\"value1\"\n      :step=\"10\">\n    </el-slider>\n  </div>\n  <div class=\"block\">\n    <span class=\"demonstration\">显示间断点</span>\n    <el-slider\n      v-model=\"value2\"\n      :step=\"10\"\n      show-stops>\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: 0,\n        value2: 0\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 带有输入框\n\n通过输入框设置精确数值\n\n:::demo 设置`show-input`属性会在右侧显示一个输入框\n```html\n<template>\n  <div class=\"block\">\n    <el-slider\n      v-model=\"value\"\n      show-input>\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: 0\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 范围选择\n\n支持选择某一数值范围\n\n:::demo 设置`range`即可开启范围选择，此时绑定值是一个数组，其元素分别为最小边界值和最大边界值\n```html\n<template>\n  <div class=\"block\">\n    <el-slider\n      v-model=\"value\"\n      range\n      show-stops\n      :max=\"10\">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: [4, 8]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 竖向模式\n\n:::demo 设置`vertical`可使 Slider 变成竖向模式，此时必须设置高度`height`属性\n```html\n<template>\n  <div class=\"block\">\n    <el-slider\n      v-model=\"value\"\n      vertical\n      height=\"200px\">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: 0\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 展示标记\n\n:::demo 设置 `marks` 属性可以展示标记\n```html\n<template>\n  <div class=\"block\">\n    <el-slider\n      v-model=\"value\"\n      range\n      :marks=\"marks\">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: [30, 60],\n        marks: {\n          0: '0°C',\n          8: '8°C',\n          37: '37°C',\n          50: {\n            style: {\n              color: '#1989FA'\n            },\n            label: this.$createElement('strong', '50%')\n          }\n        }\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Attributes\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| value / v-model | 绑定值 | number | — | 0 |\n| min | 最小值 | number | — | 0 |\n| max | 最大值 | number | — | 100 |\n| disabled | 是否禁用 | boolean | — | false |\n| step | 步长 | number | — | 1 |\n| show-input | 是否显示输入框，仅在非范围选择时有效 | boolean | — | false |\n| show-input-controls | 在显示输入框的情况下，是否显示输入框的控制按钮 | boolean | — | true |\n| input-size | 输入框的尺寸 | string | large / medium / small / mini | small |\n| show-stops | 是否显示间断点 | boolean | — | false |\n| show-tooltip | 是否显示 tooltip | boolean | — | true |\n| format-tooltip | 格式化 tooltip message | function(value) | — | — |\n| range | 是否为范围选择 | boolean | — | false |\n| vertical | 是否竖向模式 | boolean | — | false |\n| height | Slider 高度，竖向模式时必填 | string | — | — |\n| label | 屏幕阅读器标签 | string | — | — |\n| debounce | 输入时的去抖延迟，毫秒，仅在`show-input`等于true时有效 | number | — | 300 |\n| tooltip-class | tooltip 的自定义类名 | string | — | — |\n| marks | 标记， key 的类型必须为 number 且取值在闭区间 `[min, max]` 内，每个标记可以单独设置样式 | object | — | — |\n\n### Events\n| 事件名称      | 说明    | 回调参数      |\n|---------- |-------- |---------- |\n| change | 值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发） | 改变后的值 |\n| input | 数据改变时触发（使用鼠标拖曳时，活动过程实时触发） | 改变后的值 |\n"
  },
  {
    "path": "examples/docs/zh-CN/statistic.md",
    "content": "## Statistic 统计数值\n\n用于突出某个或某组数字时，如显示数值，如金额，排名等。\n\n倒计时模式\n\n### 基础用法\n\n组件提供千分位的展示，不过可以通过 rate 来设置相应万分位等\n:::demo\n\n```html\n<template>\n  <div>\n    <el-row :gutter=\"20\">\n      <el-col :span=\"6\">\n        <div>\n          <el-statistic\n            group-separator=\",\"\n            :precision=\"2\"\n            :value=\"value2\"\n            :title=\"title\"\n          ></el-statistic>\n        </div>\n      </el-col>\n      <el-col :span=\"6\">\n        <div>\n          <el-statistic title=\"男女比\">\n            <template slot=\"formatter\">\n              456/2\n            </template>\n          </el-statistic>\n        </div>\n      </el-col>\n      <el-col :span=\"6\">\n        <div>\n          <el-statistic\n            group-separator=\",\"\n            :precision=\"2\"\n            decimal-separator=\".\"\n            :value=\"value1\"\n            :title=\"title\"\n          >\n            <template slot=\"prefix\">\n              <i class=\"el-icon-s-flag\" style=\"color: red\"></i>\n            </template>\n            <template slot=\"suffix\">\n              <i class=\"el-icon-s-flag\" style=\"color: blue\"></i>\n            </template>\n          </el-statistic>\n        </div>\n      </el-col>\n      <el-col :span=\"6\">\n        <div>\n          <el-statistic :value=\"like ? 521 : 520\" title=\"Feedback\">\n            <template slot=\"suffix\">\n              <span @click=\"like = !like\" class=\"like\">\n                <i\n                  class=\"el-icon-star-on\"\n                  style=\"color:red\"\n                  v-show=\"!!like\"\n                ></i>\n                <i class=\"el-icon-star-off\" v-show=\"!like\"></i>\n              </span>\n            </template>\n          </el-statistic>\n        </div>\n      </el-col>\n    </el-row>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        like: true,\n        value1: 4154.564,\n        value2: 1314,\n        title: \"增长人数\",\n      };\n    },\n  };\n</script>\n<style lang=\"scss\">\n  .like {\n    cursor: pointer;\n    font-size: 25px;\n    display: inline-block;\n  }\n</style>\n```\n\n:::\n\n### 倒计时\n\n:::warning\n如果需要在原基础上添加时间，请注意：整体的时间（添加的时间量和原定时间）必须是**未来**的时间节点，否则依旧是倒计时结束\n:::\n:::demo 通过 `value` 提供未来的时间，将开启倒计时功能\n\n```html\n<template>\n  <div>\n    <el-row :gutter=\"20\">\n      <el-col :span=\"14\">\n        <el-card shadow=\"hover\" style=\"width: 100%;\">\n          <div style=\"width: 100%; display: inline-block; \">\n            <el-statistic :value=\"deadline2\" time-indices title=\"🎉商品降价🎉\">\n              <template slot=\"suffix\">\n                抢购即将开始\n              </template>\n            </el-statistic>\n          </div>\n        </el-card>\n        <el-card shadow=\"hover\" style=\"width: 100%;margin-top: 20px; \">\n          <div style=\"width: 100%; display: inline-block; \">\n            <el-statistic\n              @finish=\"hilarity\"\n              :value=\"deadline3\"\n              time-indices\n              title=\"时间游戏\"\n            >\n              <template slot=\"suffix\">\n                <el-button type=\"primary \" size=\"mini\" @click=\"add\"\n                  >add 10s</el-button\n                >\n              </template>\n            </el-statistic>\n          </div>\n        </el-card>\n        <el-card shadow=\"hover\" style=\"width: 100%;margin-top: 20px; \">\n          <div style=\"width: 100%; display: inline-block;\">\n            <el-statistic\n              format=\"DD天HH小时mm分钟\"\n              :value=\"deadline5\"\n              time-indices\n              title=\"🚩距离立夏还有：\"\n            >\n            </el-statistic>\n          </div>\n        </el-card>\n      </el-col>\n      <el-col :span=\"10\">\n        <el-card shadow=\"hover\" style=\"width: 100%;\">\n          <div slot=\"header\" class=\"clearfix\">\n            <span>文嘉《明日歌》</span>\n            <el-button\n              style=\"float: right; padding: 3px 0\"\n              type=\"text\"\n              @click=\"clickFn\"\n              >暂停</el-button\n            >\n          </div>\n          <div style=\"font-size: 18px;text-align: center; margin-top: 35px;\">\n            明日复明日\n          </div>\n          <div style=\"font-size: 18px;text-align: center;\">明日何其多</div>\n          <div style=\"font-size: 18px;text-align: center;\">我生待明日</div>\n          <div style=\"font-size: 18px;text-align: center;\">万事成蹉跎</div>\n          <div style=\"margin-top: 35px;\"></div>\n          <el-statistic\n            ref=\"statistic\"\n            @finish=\"hilarity\"\n            format=\"HH:mm:ss\"\n            :value=\"deadline4\"\n            title=\"距离明日：\"\n            time-indices\n          >\n          </el-statistic>\n        </el-card>\n      </el-col>\n    </el-row>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        deadline2: Date.now() + 1000 * 60 * 60 * 8,\n        deadline3: Date.now() + 1000 * 60 * 30,\n        deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),\n        deadline5: new Date(\"2023-05-06\"),\n        stop: true,\n      };\n    },\n    methods: {\n      hilarity() {\n        this.$notify({\n          title: \"提示\",\n          message: \"时间已到\",\n          duration: 0,\n        });\n      },\n      clickFn() {\n        this.$refs.statistic.suspend(this.stop);\n        this.stop = !this.stop;\n      },\n      add() {\n        this.deadline3 = this.deadline3 + 1000 * 10;\n      },\n    },\n  };\n</script>\n```\n\n:::\n\n### Statistic Attributes\n\n| 参数              | 说明             | 类型                        | 可选值 | 默认值 |\n| ----------------- | ---------------- | --------------------------- | ------ | ------ |\n| value             | 数值内容         | string \\| number            | —      | —      |\n| decimal-separator | 设置小数点       | string                      | —      | .      |\n| formatter         | 自定义数值展示   | v-slot \\|({value}) => VNode | —      | —      |\n| group-separator   | 设置千分位标识符 | string                      | —      | ,      |\n| precision         | 数值精度         | number                      | —      | —      |\n| prefix            | 设置数值的前缀   | string \\| v-slot            | —      | —      |\n| suffix            | 设置数值的后缀   | string \\| v-slot            | —      | —      |\n| title             | 数值的标题       | string \\| v-slot            | —      | —      |\n| value-style       | 设置数值的样式   | object                      | —      | —      |\n| rate              | 设置倍率         | number                      | —      | 1000   |\n\n### Statistic Slots\n\n| name      | 说明       |\n| --------- | ---------- |\n| prefix    | 数值的前缀 |\n| suffix    | 数值的后缀 |\n| formatter | 数值内容   |\n| title     | 数值的标题 |\n\n### Statistic.Countdown Attributes\n\n| 参数         | 说明               | 类型    | 可选值      | 默认值     |\n| ------------ | ------------------ | ------- | ----------- | ---------- |\n| time-indices | 是否开启倒计时功能 | boolean | true\\|false | false      |\n| value        | 必填值，输入绑定值 | string  | —           | —          |\n| format       | 格式化倒计时展示   | string  | —           | 'HH:mm:ss' |\n\n### Statistic.Countdown Events\n\n| 事件名称 | 说明                   | 回调参数         |\n| -------- | ---------------------- | ---------------- |\n| change   | 在`倒计时`的功能中开启 | (value: Date)    |\n| finish   | 在`倒计时` 完成后启动  | (value: boolean) |\n\n### Statistic Methods\n\n| 方法名  | 说明       | 参数            | 回调参数      |\n| ------- | ---------- | --------------- | ------------- |\n| suspend | 暂停倒计时 | (value:boolean) | (value: Date) |\n"
  },
  {
    "path": "examples/docs/zh-CN/steps.md",
    "content": "## Steps 步骤条\n引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。\n\n### 基础用法\n\n简单的步骤条。\n\n:::demo 设置`active`属性，接受一个`Number`，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置`space`属性即可，它接受`Number`，单位为`px`，如果不设置，则为自适应。设置`finish-status`属性可以改变已经完成的步骤的状态。\n```html\n<el-steps :active=\"active\" finish-status=\"success\">\n  <el-step title=\"步骤 1\"></el-step>\n  <el-step title=\"步骤 2\"></el-step>\n  <el-step title=\"步骤 3\"></el-step>\n</el-steps>\n\n<el-button style=\"margin-top: 12px;\" @click=\"next\">下一步</el-button>\n\n<script>\n  export default {\n    data() {\n      return {\n        active: 0\n      };\n    },\n\n    methods: {\n      next() {\n        if (this.active++ > 2) this.active = 0;\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 含状态步骤条\n\n每一步骤显示出该步骤的状态。\n\n:::demo 也可以使用`title`具名分发，可以用`slot`的方式来取代属性的设置，在本文档最后的列表中有所有的 slot name 可供参考。\n```html\n<el-steps :space=\"200\" :active=\"1\" finish-status=\"success\">\n  <el-step title=\"已完成\"></el-step>\n  <el-step title=\"进行中\"></el-step>\n  <el-step title=\"步骤 3\"></el-step>\n</el-steps>\n```\n:::\n\n### 有描述的步骤条\n\n每个步骤有其对应的步骤状态描述。\n\n:::demo\n```html\n<el-steps :active=\"1\">\n  <el-step title=\"步骤 1\" description=\"这是一段很长很长很长的描述性文字\"></el-step>\n  <el-step title=\"步骤 2\" description=\"这是一段很长很长很长的描述性文字\"></el-step>\n  <el-step title=\"步骤 3\" description=\"这段就没那么长了\"></el-step>\n</el-steps>\n```\n:::\n\n### 居中的步骤条\n\n标题和描述都将居中。\n\n:::demo\n```html\n<el-steps :active=\"2\" align-center>\n  <el-step title=\"步骤1\" description=\"这是一段很长很长很长的描述性文字\"></el-step>\n  <el-step title=\"步骤2\" description=\"这是一段很长很长很长的描述性文字\"></el-step>\n  <el-step title=\"步骤3\" description=\"这是一段很长很长很长的描述性文字\"></el-step>\n  <el-step title=\"步骤4\" description=\"这是一段很长很长很长的描述性文字\"></el-step>\n</el-steps>\n```\n:::\n\n### 带图标的步骤条\n步骤条内可以启用各种自定义的图标。\n\n:::demo 通过`icon`属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过具名`slot`来使用自定义的图标。\n```html\n\n<el-steps :active=\"1\">\n  <el-step title=\"步骤 1\" icon=\"el-icon-edit\"></el-step>\n  <el-step title=\"步骤 2\" icon=\"el-icon-upload\"></el-step>\n  <el-step title=\"步骤 3\" icon=\"el-icon-picture\"></el-step>\n</el-steps>\n```\n:::\n\n### 竖式步骤条\n\n竖直方向的步骤条。\n\n:::demo 只需要在`el-steps`元素中设置`direction`属性为`vertical`即可。\n```html\n<div style=\"height: 300px;\">\n  <el-steps direction=\"vertical\" :active=\"1\">\n    <el-step title=\"步骤 1\"></el-step>\n    <el-step title=\"步骤 2\"></el-step>\n    <el-step title=\"步骤 3\" description=\"这是一段很长很长很长的描述性文字\"></el-step>\n  </el-steps>\n</div>\n```\n:::\n\n### 简洁风格的步骤条\n设置 `simple` 可应用简洁风格，该条件下 `align-center` / `description` / `direction` / `space` 都将失效。\n\n:::demo\n```html\n\n<el-steps :active=\"1\" simple>\n  <el-step title=\"步骤 1\" icon=\"el-icon-edit\"></el-step>\n  <el-step title=\"步骤 2\" icon=\"el-icon-upload\"></el-step>\n  <el-step title=\"步骤 3\" icon=\"el-icon-picture\"></el-step>\n</el-steps>\n\n<el-steps :active=\"1\" finish-status=\"success\" simple style=\"margin-top: 20px\">\n  <el-step title=\"步骤 1\" ></el-step>\n  <el-step title=\"步骤 2\" ></el-step>\n  <el-step title=\"步骤 3\" ></el-step>\n</el-steps>\n```\n:::\n\n### Steps Attributes\n\n| 参数      | 说明    | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| space | 每个 step 的间距，不填写将自适应间距。支持百分比。 | number / string | — | — |\n| direction | 显示方向 | string | vertical/horizontal | horizontal |\n| active | 设置当前激活步骤  | number | — | 0 |\n| process-status | 设置当前步骤的状态 | string | wait / process / finish / error / success | process |\n| finish-status | 设置结束步骤的状态 | string | wait / process / finish / error / success | finish |\n| align-center | 进行居中对齐 | boolean | - | false |\n| simple | 是否应用简洁风格 | boolean | - | false |\n\n### Step Attributes\n| 参数      | 说明    | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| title | 标题 | string | — | — |\n| description | 描述性文字 | string | — | — |\n| icon | 图标 | 传入 icon 的 class 全名来自定义 icon，也支持 slot 方式写入 | string | — |\n| status | 设置当前步骤的状态，不设置则根据 steps 确定状态 | wait / process / finish / error / success | - |\n\n### Step Slot\n| name | 说明  |\n|----|----|\n| icon | 自定义图标 |\n| title | 自定义标题 |\n| description | 自定义描述性文字 |\n"
  },
  {
    "path": "examples/docs/zh-CN/switch.md",
    "content": "## Switch 开关\n\n表示两种相互对立的状态间的切换，多用于触发「开/关」。\n\n### 基本用法\n\n:::demo 绑定`v-model`到一个`Boolean`类型的变量。可以使用`active-color`属性与`inactive-color`属性来设置开关的背景色。\n\n```html\n<el-switch\n  v-model=\"value\"\n  active-color=\"#13ce66\"\n  inactive-color=\"#ff4949\">\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: true\n      }\n    }\n  };\n</script>\n```\n:::\n\n### 文字描述\n\n:::demo 使用`active-text`属性与`inactive-text`属性来设置开关的文字描述。\n\n```html\n<el-switch\n  v-model=\"value1\"\n  active-text=\"按月付费\"\n  inactive-text=\"按年付费\">\n</el-switch>\n<el-switch\n  style=\"display: block\"\n  v-model=\"value2\"\n  active-color=\"#13ce66\"\n  inactive-color=\"#ff4949\"\n  active-text=\"按月付费\"\n  inactive-text=\"按年付费\">\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: true,\n        value2: true\n      }\n    }\n  };\n</script>\n```\n:::\n\n### 扩展的 value 类型\n\n:::demo 设置`active-value`和`inactive-value`属性，接受`Boolean`, `String`或`Number`类型的值。\n\n```html\n<el-tooltip :content=\"'Switch value: ' + value\" placement=\"top\">\n  <el-switch\n    v-model=\"value\"\n    active-color=\"#13ce66\"\n    inactive-color=\"#ff4949\"\n    active-value=\"100\"\n    inactive-value=\"0\">\n  </el-switch>\n</el-tooltip>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: '100'\n      }\n    }\n  };\n</script>\n```\n\n:::\n\n### 禁用状态\n\n:::demo 设置`disabled`属性，接受一个`Boolean`，设置`true`即可禁用。\n\n\n```html\n<el-switch\n  v-model=\"value1\"\n  disabled>\n</el-switch>\n<el-switch\n  v-model=\"value2\"\n  disabled>\n</el-switch>\n<script>\n  export default {\n    data() {\n      return {\n        value1: true,\n        value2: false\n      }\n    }\n  };\n</script>\n```\n:::\n\n\n### Attributes\n\n| 参数      | 说明    | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| value / v-model | 绑定值 | boolean / string / number | — | — |\n| disabled  | 是否禁用    | boolean   | — | false   |\n| width  | switch 的宽度（像素）    | number   | — | 40 |\n| active-icon-class  | switch 打开时所显示图标的类名，设置此项会忽略 `active-text`    | string   | — | — |\n| inactive-icon-class  | switch 关闭时所显示图标的类名，设置此项会忽略 `inactive-text`    | string   | — | — |\n| active-text  | switch 打开时的文字描述    | string   | — | — |\n| inactive-text  | switch 关闭时的文字描述    | string   | — | — |\n| active-value  | switch 打开时的值    | boolean / string / number | — | true |\n| inactive-value  | switch 关闭时的值    | boolean / string / number | — | false |\n| active-color  | switch 打开时的背景色    | string   | — | #409EFF |\n| inactive-color  | switch 关闭时的背景色    | string   | — | #C0CCDA |\n| name            | switch 对应的 name 属性    | string   | — | — |\n| validate-event  | 改变 switch 状态时是否触发表单的校验     | boolean   | - | true |\n\n### Events\n| 事件名称      | 说明    | 回调参数      |\n|---------- |-------- |---------- |\n| change  | switch 状态发生变化时的回调函数    | 新状态的值 |\n\n### Methods\n| 方法名 | 说明 | 参数 |\n| ---- | ---- | ---- |\n| focus | 使 Switch 获取焦点 | - |"
  },
  {
    "path": "examples/docs/zh-CN/table.md",
    "content": "## Table 表格\n\n用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。\n\n### 基础表格\n\n基础的表格展示用法。\n\n:::demo 当`el-table`元素中注入`data`对象数组后，在`el-table-column`中用`prop`属性来对应对象中的键名即可填入数据，用`label`属性来定义表格的列名。可以使用`width`属性来定义列宽。\n```html\n  <template>\n    <el-table\n      :data=\"tableData\"\n      style=\"width: 100%\">\n      <el-table-column\n        prop=\"date\"\n        label=\"日期\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"name\"\n        label=\"姓名\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"address\"\n        label=\"地址\">\n      </el-table-column>\n    </el-table>\n  </template>\n\n  <script>\n    export default {\n      data() {\n        return {\n          tableData: [{\n            date: '2016-05-02',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1518 弄'\n          }, {\n            date: '2016-05-04',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1517 弄'\n          }, {\n            date: '2016-05-01',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1519 弄'\n          }, {\n            date: '2016-05-03',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1516 弄'\n          }]\n        }\n      }\n    }\n  </script>\n```\n:::\n\n### 带斑马纹表格\n\n使用带斑马纹的表格，可以更容易区分出不同行的数据。\n\n:::demo `stripe`属性可以创建带斑马纹的表格。它接受一个`Boolean`，默认为`false`，设置为`true`即为启用。\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    stripe\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 带边框表格\n\n:::demo 默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用`border`属性，它接受一个`Boolean`，设置为`true`即可启用。\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    border\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 带状态表格\n\n可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容。\n\n:::demo 可以通过指定 Table 组件的 `row-class-name` 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    :row-class-name=\"tableRowClassName\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  .el-table .warning-row {\n    background: oldlace;\n  }\n\n  .el-table .success-row {\n    background: #f0f9eb;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      tableRowClassName({row, rowIndex}) {\n        if (rowIndex === 1) {\n          return 'warning-row';\n        } else if (rowIndex === 3) {\n          return 'success-row';\n        }\n        return '';\n      }\n    },\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄',\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄',\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 固定表头\n\n纵向内容过多时，可选择固定表头。\n\n:::demo 只要在`el-table`元素中定义了`height`属性，即可实现固定表头的表格，而不需要额外的代码。\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    height=\"250\"\n    border\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 固定列\n\n横向内容过多时，可选择固定列。\n\n:::demo 固定列需要使用`fixed`属性，它接受 Boolean 值或者`left` `right`，表示左边固定还是右边固定。\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    border\n    style=\"width: 100%\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"日期\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"province\"\n      label=\"省份\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"市区\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"邮编\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      fixed=\"right\"\n      label=\"操作\"\n      width=\"100\">\n      <template slot-scope=\"scope\">\n        <el-button @click=\"handleClick(scope.row)\" type=\"text\" size=\"small\">查看</el-button>\n        <el-button type=\"text\" size=\"small\">编辑</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    methods: {\n      handleClick(row) {\n        console.log(row);\n      }\n    },\n\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1517 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1519 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1516 弄',\n          zip: 200333\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 固定列和表头\n\n横纵内容过多时，可选择固定列和表头。\n\n:::demo 固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可。\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    height=\"250\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"日期\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"province\"\n      label=\"省份\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"市区\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"邮编\"\n      width=\"120\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 流体高度\n\n当数据量动态变化时，可以为 Table 设置一个最大高度。\n\n:::demo 通过设置`max-height`属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    max-height=\"250\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"日期\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"province\"\n      label=\"省份\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"市区\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"邮编\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      fixed=\"right\"\n      label=\"操作\"\n      width=\"120\">\n      <template slot-scope=\"scope\">\n        <el-button\n          @click.native.prevent=\"deleteRow(scope.$index, tableData)\"\n          type=\"text\"\n          size=\"small\">\n          移除\n        </el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    methods: {\n      deleteRow(index, rows) {\n        rows.splice(index, 1);\n      }\n    },\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 多级表头\n\n数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。\n\n:::demo 只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column label=\"配送信息\">\n      <el-table-column\n        prop=\"name\"\n        label=\"姓名\"\n        width=\"120\">\n      </el-table-column>\n      <el-table-column label=\"地址\">\n        <el-table-column\n          prop=\"province\"\n          label=\"省份\"\n          width=\"120\">\n        </el-table-column>\n        <el-table-column\n          prop=\"city\"\n          label=\"市区\"\n          width=\"120\">\n        </el-table-column>\n        <el-table-column\n          prop=\"address\"\n          label=\"地址\"\n          width=\"300\">\n        </el-table-column>\n        <el-table-column\n          prop=\"zip\"\n          label=\"邮编\"\n          width=\"120\">\n        </el-table-column>\n      </el-table-column>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 单选\n\n选择单行数据时使用色块表示。\n\n:::demo Table 组件提供了单选的支持，只需要配置`highlight-current-row`属性即可实现单选。之后由`current-change`事件来管理选中时触发的事件，它会传入`currentRow`，`oldCurrentRow`。如果需要显示索引，可以增加一列`el-table-column`，设置`type`属性为`index`即可显示从 1 开始的索引号。\n```html\n<template>\n  <el-table\n    ref=\"singleTable\"\n    :data=\"tableData\"\n    highlight-current-row\n    @current-change=\"handleCurrentChange\"\n    style=\"width: 100%\">\n    <el-table-column\n      type=\"index\"\n      width=\"50\">\n    </el-table-column>\n    <el-table-column\n      property=\"date\"\n      label=\"日期\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      property=\"name\"\n      label=\"姓名\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      property=\"address\"\n      label=\"地址\">\n    </el-table-column>\n  </el-table>\n  <div style=\"margin-top: 20px\">\n    <el-button @click=\"setCurrent(tableData[1])\">选中第二行</el-button>\n    <el-button @click=\"setCurrent()\">取消选择</el-button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }],\n        currentRow: null\n      }\n    },\n\n    methods: {\n      setCurrent(row) {\n        this.$refs.singleTable.setCurrentRow(row);\n      },\n      handleCurrentChange(val) {\n        this.currentRow = val;\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 多选\n\n选择多行数据时使用 Checkbox。\n\n:::demo 实现多选非常简单: 手动添加一个`el-table-column`，设`type`属性为`selection`即可；默认情况下若内容过多会折行显示，若需要单行显示可以使用`show-overflow-tooltip`属性，它接受一个`Boolean`，为`true`时多余的内容会在 hover 时以 tooltip 的形式显示出来。\n```html\n<template>\n  <el-table\n    ref=\"multipleTable\"\n    :data=\"tableData\"\n    tooltip-effect=\"dark\"\n    style=\"width: 100%\"\n    @selection-change=\"handleSelectionChange\">\n    <el-table-column\n      type=\"selection\"\n      width=\"55\">\n    </el-table-column>\n    <el-table-column\n      label=\"日期\"\n      width=\"120\">\n      <template slot-scope=\"scope\">{{ scope.row.date }}</template>\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\"\n      show-overflow-tooltip>\n    </el-table-column>\n  </el-table>\n  <div style=\"margin-top: 20px\">\n    <el-button @click=\"toggleSelection([tableData[1], tableData[2]])\">切换第二、第三行的选中状态</el-button>\n    <el-button @click=\"toggleSelection()\">取消选择</el-button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }],\n        multipleSelection: []\n      }\n    },\n\n    methods: {\n      toggleSelection(rows) {\n        if (rows) {\n          rows.forEach(row => {\n            this.$refs.multipleTable.toggleRowSelection(row);\n          });\n        } else {\n          this.$refs.multipleTable.clearSelection();\n        }\n      },\n      handleSelectionChange(val) {\n        this.multipleSelection = val;\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 排序\n\n对表格进行排序，可快速查找或对比数据。\n\n:::demo 在列中设置`sortable`属性即可实现以该列为基准的排序，接受一个`Boolean`，默认为`false`。可以通过 Table 的`default-sort`属性设置默认的排序列和排序顺序。可以使用`sort-method`或者`sort-by`使用自定义的排序规则。如果需要后端排序，需将`sortable`设置为`custom`，同时在 Table 上监听`sort-change`事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了`formatter`属性，它用于格式化指定列的值，接受一个`Function`，会传入两个参数：`row`和`column`，可以根据自己的需求进行处理。\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    :default-sort = \"{prop: 'date', order: 'descending'}\"\n    >\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\"\n      :formatter=\"formatter\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }]\n      }\n    },\n    methods: {\n      formatter(row, column) {\n        return row.address;\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 筛选\n\n对表格进行筛选，可快速查找到自己想看的数据。\n\n:::demo 在列中设置`filters` `filter-method`属性即可开启该列的筛选，filters 是一个数组，`filter-method`是一个方法，它用于决定某些数据是否显示，会传入三个参数：`value`, `row` 和 `column`。\n```html\n<template>\n  <el-button @click=\"resetDateFilter\">清除日期过滤器</el-button>\n  <el-button @click=\"clearFilter\">清除所有过滤器</el-button>\n  <el-table\n    ref=\"filterTable\"\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      sortable\n      width=\"180\"\n      column-key=\"date\"\n      :filters=\"[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]\"\n      :filter-method=\"filterHandler\"\n    >\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\"\n      :formatter=\"formatter\">\n    </el-table-column>\n    <el-table-column\n      prop=\"tag\"\n      label=\"标签\"\n      width=\"100\"\n      :filters=\"[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]\"\n      :filter-method=\"filterTag\"\n      filter-placement=\"bottom-end\">\n      <template slot-scope=\"scope\">\n        <el-tag\n          :type=\"scope.row.tag === '家' ? 'primary' : 'success'\"\n          disable-transitions>{{scope.row.tag}}</el-tag>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄',\n          tag: '家'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄',\n          tag: '公司'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄',\n          tag: '家'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄',\n          tag: '公司'\n        }]\n      }\n    },\n    methods: {\n      resetDateFilter() {\n        this.$refs.filterTable.clearFilter('date');\n      },\n      clearFilter() {\n        this.$refs.filterTable.clearFilter();\n      },\n      formatter(row, column) {\n        return row.address;\n      },\n      filterTag(value, row) {\n        return row.tag === value;\n      },\n      filterHandler(value, row, column) {\n        const property = column['property'];\n        return row[property] === value;\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 自定义列模板\n\n自定义列的显示内容，可组合其他组件使用。\n:::demo 通过 `Scoped slot` 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      label=\"日期\"\n      width=\"180\">\n      <template slot-scope=\"scope\">\n        <i class=\"el-icon-time\"></i>\n        <span style=\"margin-left: 10px\">{{ scope.row.date }}</span>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label=\"姓名\"\n      width=\"180\">\n      <template slot-scope=\"scope\">\n        <el-popover trigger=\"hover\" placement=\"top\">\n          <p>姓名: {{ scope.row.name }}</p>\n          <p>住址: {{ scope.row.address }}</p>\n          <div slot=\"reference\" class=\"name-wrapper\">\n            <el-tag size=\"medium\">{{ scope.row.name }}</el-tag>\n          </div>\n        </el-popover>\n      </template>\n    </el-table-column>\n    <el-table-column label=\"操作\">\n      <template slot-scope=\"scope\">\n        <el-button\n          size=\"mini\"\n          @click=\"handleEdit(scope.$index, scope.row)\">编辑</el-button>\n        <el-button\n          size=\"mini\"\n          type=\"danger\"\n          @click=\"handleDelete(scope.$index, scope.row)\">删除</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }]\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 展开行\n\n当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。\n:::demo 通过设置 type=\"expand\" 和 `Scoped slot` 可以开启展开行功能，`el-table-column` 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 `Scoped slot` 相同。\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column type=\"expand\">\n      <template slot-scope=\"props\">\n        <el-form label-position=\"left\" inline class=\"demo-table-expand\">\n          <el-form-item label=\"商品名称\">\n            <span>{{ props.row.name }}</span>\n          </el-form-item>\n          <el-form-item label=\"所属店铺\">\n            <span>{{ props.row.shop }}</span>\n          </el-form-item>\n          <el-form-item label=\"商品 ID\">\n            <span>{{ props.row.id }}</span>\n          </el-form-item>\n          <el-form-item label=\"店铺 ID\">\n            <span>{{ props.row.shopId }}</span>\n          </el-form-item>\n          <el-form-item label=\"商品分类\">\n            <span>{{ props.row.category }}</span>\n          </el-form-item>\n          <el-form-item label=\"店铺地址\">\n            <span>{{ props.row.address }}</span>\n          </el-form-item>\n          <el-form-item label=\"商品描述\">\n            <span>{{ props.row.desc }}</span>\n          </el-form-item>\n        </el-form>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label=\"商品 ID\"\n      prop=\"id\">\n    </el-table-column>\n    <el-table-column\n      label=\"商品名称\"\n      prop=\"name\">\n    </el-table-column>\n    <el-table-column\n      label=\"描述\"\n      prop=\"desc\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  .demo-table-expand {\n    font-size: 0;\n  }\n  .demo-table-expand label {\n    width: 90px;\n    color: #99a9bf;\n  }\n  .demo-table-expand .el-form-item {\n    margin-right: 0;\n    margin-bottom: 0;\n    width: 50%;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: '12987122',\n          name: '好滋好味鸡蛋仔',\n          category: '江浙小吃、小吃零食',\n          desc: '荷兰优质淡奶，奶香浓而不腻',\n          address: '上海市普陀区真北路',\n          shop: '王小虎夫妻店',\n          shopId: '10333'\n        }, {\n          id: '12987123',\n          name: '好滋好味鸡蛋仔',\n          category: '江浙小吃、小吃零食',\n          desc: '荷兰优质淡奶，奶香浓而不腻',\n          address: '上海市普陀区真北路',\n          shop: '王小虎夫妻店',\n          shopId: '10333'\n        }, {\n          id: '12987125',\n          name: '好滋好味鸡蛋仔',\n          category: '江浙小吃、小吃零食',\n          desc: '荷兰优质淡奶，奶香浓而不腻',\n          address: '上海市普陀区真北路',\n          shop: '王小虎夫妻店',\n          shopId: '10333'\n        }, {\n          id: '12987126',\n          name: '好滋好味鸡蛋仔',\n          category: '江浙小吃、小吃零食',\n          desc: '荷兰优质淡奶，奶香浓而不腻',\n          address: '上海市普陀区真北路',\n          shop: '王小虎夫妻店',\n          shopId: '10333'\n        }]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 树形数据与懒加载\n\n:::demo 支持树类型的数据的显示。当 row 中包含 `children` 字段时，被视为树形数据。渲染树形数据时，必须要指定 `row-key`。支持子节点数据异步加载。设置 Table 的 `lazy` 属性为 true 与加载函数 `load` 。通过指定 row 中的 `hasChildren` 字段来指定哪些行是包含子节点。`children` 与 `hasChildren` 都可以通过 `tree-props` 配置。\n\n```html\n<template>\n<div>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%;margin-bottom: 20px;\"\n    row-key=\"id\"\n    border\n    default-expand-all\n    :tree-props=\"{children: 'children', hasChildren: 'hasChildren'}\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\">\n    </el-table-column>\n  </el-table>\n\n  <el-table\n    :data=\"tableData1\"\n    style=\"width: 100%\"\n    row-key=\"id\"\n    border\n    lazy\n    :load=\"load\"\n    :tree-props=\"{children: 'children', hasChildren: 'hasChildren'}\">\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\">\n    </el-table-column>\n  </el-table>\n</div>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: 1,\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          id: 2,\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          id: 3,\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄',\n          children: [{\n              id: 31,\n              date: '2016-05-01',\n              name: '王小虎',\n              address: '上海市普陀区金沙江路 1519 弄'\n            }, {\n              id: 32,\n              date: '2016-05-01',\n              name: '王小虎',\n              address: '上海市普陀区金沙江路 1519 弄'\n          }]\n        }, {\n          id: 4,\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }],\n        tableData1: [{\n          id: 1,\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          id: 2,\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          id: 3,\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄',\n          hasChildren: true\n        }, {\n          id: 4,\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }]\n      }\n    },\n    methods: {\n      load(tree, treeNode, resolve) {\n        setTimeout(() => {\n          resolve([\n            {\n              id: 31,\n              date: '2016-05-01',\n              name: '王小虎',\n              address: '上海市普陀区金沙江路 1519 弄'\n            }, {\n              id: 32,\n              date: '2016-05-01',\n              name: '王小虎',\n              address: '上海市普陀区金沙江路 1519 弄'\n            }\n          ])\n        }, 1000)\n      }\n    },\n  }\n</script>\n```\n:::\n\n### 自定义表头\n\n表头支持自定义。\n\n:::demo 通过设置 [Scoped slot](https://v2.cn.vuejs.org/v2/guide/components-slots.html#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD) 来自定义表头。\n```html\n<template>\n  <el-table\n    :data=\"tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))\"\n    style=\"width: 100%\">\n    <el-table-column\n      label=\"Date\"\n      prop=\"date\">\n    </el-table-column>\n    <el-table-column\n      label=\"Name\"\n      prop=\"name\">\n    </el-table-column>\n    <el-table-column\n      align=\"right\">\n      <template slot=\"header\" slot-scope=\"scope\">\n        <el-input\n          v-model=\"search\"\n          size=\"mini\"\n          placeholder=\"输入关键字搜索\"/>\n      </template>\n      <template slot-scope=\"scope\">\n        <el-button\n          size=\"mini\"\n          @click=\"handleEdit(scope.$index, scope.row)\">Edit</el-button>\n        <el-button\n          size=\"mini\"\n          type=\"danger\"\n          @click=\"handleDelete(scope.$index, scope.row)\">Delete</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }],\n        search: ''\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    },\n  }\n</script>\n```\n:::\n\n### 表尾合计行\n\n若表格展示的是各类数字，可以在表尾显示各列的合计。\n:::demo 将`show-summary`设置为`true`就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过`sum-text`配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用`summary-method`并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中，具体可以参考本例中的第二个表格。\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    border\n    show-summary\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"id\"\n      label=\"ID\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\">\n    </el-table-column>\n    <el-table-column\n      prop=\"amount1\"\n      sortable\n      label=\"数值 1\">\n    </el-table-column>\n    <el-table-column\n      prop=\"amount2\"\n      sortable\n      label=\"数值 2\">\n    </el-table-column>\n    <el-table-column\n      prop=\"amount3\"\n      sortable\n      label=\"数值 3\">\n    </el-table-column>\n  </el-table>\n\n  <el-table\n    :data=\"tableData\"\n    border\n    height=\"200\"\n    :summary-method=\"getSummaries\"\n    show-summary\n    style=\"width: 100%; margin-top: 20px\">\n    <el-table-column\n      prop=\"id\"\n      label=\"ID\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\">\n    </el-table-column>\n    <el-table-column\n      prop=\"amount1\"\n      label=\"数值 1（元）\">\n    </el-table-column>\n    <el-table-column\n      prop=\"amount2\"\n      label=\"数值 2（元）\">\n    </el-table-column>\n    <el-table-column\n      prop=\"amount3\"\n      label=\"数值 3（元）\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: '12987122',\n          name: '王小虎',\n          amount1: '234',\n          amount2: '3.2',\n          amount3: 10\n        }, {\n          id: '12987123',\n          name: '王小虎',\n          amount1: '165',\n          amount2: '4.43',\n          amount3: 12\n        }, {\n          id: '12987124',\n          name: '王小虎',\n          amount1: '324',\n          amount2: '1.9',\n          amount3: 9\n        }, {\n          id: '12987125',\n          name: '王小虎',\n          amount1: '621',\n          amount2: '2.2',\n          amount3: 17\n        }, {\n          id: '12987126',\n          name: '王小虎',\n          amount1: '539',\n          amount2: '4.1',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      getSummaries(param) {\n        const { columns, data } = param;\n        const sums = [];\n        columns.forEach((column, index) => {\n          if (index === 0) {\n            sums[index] = '总价';\n            return;\n          }\n          const values = data.map(item => Number(item[column.property]));\n          if (!values.every(value => isNaN(value))) {\n            sums[index] = values.reduce((prev, curr) => {\n              const value = Number(curr);\n              if (!isNaN(value)) {\n                return prev + curr;\n              } else {\n                return prev;\n              }\n            }, 0);\n            sums[index] += ' 元';\n          } else {\n            sums[index] = 'N/A';\n          }\n        });\n\n        return sums;\n      }\n    }\n  };\n</script>\n```\n:::\n\n### 合并行或列\n\n多行或多列共用一个数据时，可以合并行或列。\n:::demo 通过给`table`传入`span-method`方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行`row`、当前列`column`、当前行号`rowIndex`、当前列号`columnIndex`四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表`rowspan`，第二个元素代表`colspan`。 也可以返回一个键名为`rowspan`和`colspan`的对象。\n\n```html\n<template>\n  <div>\n    <el-table\n      :data=\"tableData\"\n      :span-method=\"arraySpanMethod\"\n      border\n      style=\"width: 100%\">\n      <el-table-column\n        prop=\"id\"\n        label=\"ID\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"name\"\n        label=\"姓名\">\n      </el-table-column>\n      <el-table-column\n        prop=\"amount1\"\n        sortable\n        label=\"数值 1\">\n      </el-table-column>\n      <el-table-column\n        prop=\"amount2\"\n        sortable\n        label=\"数值 2\">\n      </el-table-column>\n      <el-table-column\n        prop=\"amount3\"\n        sortable\n        label=\"数值 3\">\n      </el-table-column>\n    </el-table>\n\n    <el-table\n      :data=\"tableData\"\n      :span-method=\"objectSpanMethod\"\n      border\n      style=\"width: 100%; margin-top: 20px\">\n      <el-table-column\n        prop=\"id\"\n        label=\"ID\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"name\"\n        label=\"姓名\">\n      </el-table-column>\n      <el-table-column\n        prop=\"amount1\"\n        label=\"数值 1（元）\">\n      </el-table-column>\n      <el-table-column\n        prop=\"amount2\"\n        label=\"数值 2（元）\">\n      </el-table-column>\n      <el-table-column\n        prop=\"amount3\"\n        label=\"数值 3（元）\">\n      </el-table-column>\n    </el-table>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: '12987122',\n          name: '王小虎',\n          amount1: '234',\n          amount2: '3.2',\n          amount3: 10\n        }, {\n          id: '12987123',\n          name: '王小虎',\n          amount1: '165',\n          amount2: '4.43',\n          amount3: 12\n        }, {\n          id: '12987124',\n          name: '王小虎',\n          amount1: '324',\n          amount2: '1.9',\n          amount3: 9\n        }, {\n          id: '12987125',\n          name: '王小虎',\n          amount1: '621',\n          amount2: '2.2',\n          amount3: 17\n        }, {\n          id: '12987126',\n          name: '王小虎',\n          amount1: '539',\n          amount2: '4.1',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      arraySpanMethod({ row, column, rowIndex, columnIndex }) {\n        if (rowIndex % 2 === 0) {\n          if (columnIndex === 0) {\n            return [1, 2];\n          } else if (columnIndex === 1) {\n            return [0, 0];\n          }\n        }\n      },\n\n      objectSpanMethod({ row, column, rowIndex, columnIndex }) {\n        if (columnIndex === 0) {\n          if (rowIndex % 2 === 0) {\n            return {\n              rowspan: 2,\n              colspan: 1\n            };\n          } else {\n            return {\n              rowspan: 0,\n              colspan: 0\n            };\n          }\n        }\n      }\n    }\n  };\n</script>\n```\n:::\n\n### 自定义索引\n\n自定义 `type=index` 列的行号。\n:::demo 通过给 `type=index` 的列传入 `index` 属性，可以自定义索引。该属性传入数字时，将作为索引的起始值。也可以传入一个方法，它提供当前行的行号（从 `0` 开始）作为参数，返回值将作为索引展示。\n\n```html\n<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      type=\"index\"\n      :index=\"indexMethod\">\n    </el-table-column>\n    <el-table-column\n      prop=\"date\"\n      label=\"日期\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"姓名\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"地址\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333,\n          tag: '家'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1517 弄',\n          zip: 200333,\n          tag: '公司'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1519 弄',\n          zip: 200333,\n          tag: '家'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1516 弄',\n          zip: 200333,\n          tag: '公司'\n        }],\n      }\n    },\n    methods: {\n      indexMethod(index) {\n        return index * 2;\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Table Attributes\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| data | 显示的数据 | array | — | — |\n| height | Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。  | string/number | — | — |\n| max-height | Table 的最大高度。合法的值为数字或者单位为 px 的高度。 | string/number | — | — |\n| stripe | 是否为斑马纹 table | boolean | — | false |\n| border | 是否带有纵向边框 | boolean | — | false |\n| size | Table 的尺寸 | string | medium / small / mini | — |\n| fit | 列的宽度是否自撑开 | boolean | — | true |\n| show-header | 是否显示表头 | boolean | — | true |\n| highlight-current-row | 是否要高亮当前行 | boolean | — | false |\n| highlight-selection-row | 是否要高亮复选框选中行（仅针对开启 `selection` 有效） | boolean | — | false |\n| current-row-key | 当前行的 key，只写属性 | String,Number | — | — |\n| row-class-name | 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 | Function({row, rowIndex})/String | — | — |\n| row-style | 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 | Function({row, rowIndex})/Object | — | — |\n| cell-class-name | 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。 | Function({row, column, rowIndex, columnIndex})/String | — | — |\n| cell-style | 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 | Function({row, column, rowIndex, columnIndex})/Object | — | — |\n| header-row-class-name | 表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。 | Function({row, rowIndex})/String | — | — |\n| header-row-style | 表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。 | Function({row, rowIndex})/Object | — | — |\n| header-cell-class-name | 表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。 | Function({row, column, rowIndex, columnIndex})/String | — | — |\n| header-cell-style | 表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。 | Function({row, column, rowIndex, columnIndex})/Object | — | — |\n| row-key | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：`user.info.id`，但不支持 `user.info[0].id`，此种情况请使用 `Function`。 | Function(row)/String | — | — |\n| empty-text | 空数据时显示的文本内容，也可以通过 `slot=\"empty\"` 设置 | String | — | 暂无数据 |\n| default-expand-all | 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 | Boolean | — | false |\n| expand-row-keys | 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。| Array | — | |\n| default-sort | 默认的排序列的 prop 和顺序。它的`prop`属性指定默认的排序的列，`order`指定默认排序的顺序| Object | `order`: ascending, descending | 如果只指定了`prop`, 没有指定`order`, 则默认顺序是ascending |\n| tooltip-effect | tooltip `effect` 属性 | String | dark/light | | dark |\n| show-summary | 是否在表尾显示合计行 | Boolean | — | false |\n| sum-text | 合计行第一列的文本 | String | — | 合计 |\n| summary-method | 自定义的合计计算方法 | Function({ columns, data }) | — | — |\n| span-method | 合并行或列的计算方法 | Function({ row, column, rowIndex, columnIndex }) | — | — |\n| select-on-indeterminate | 在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行 | Boolean | — | true |\n| indent      | 展示树形数据时，树节点的缩进 | Number | — | 16 |\n| lazy        | 是否懒加载子节点数据 | Boolean | — | — |\n| load        | 加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息 | Function(row, treeNode, resolve) | — | — |\n| tree-props  | 渲染嵌套数据的配置选项 | Object | — | { hasChildren: 'hasChildren', children: 'children' } |\n\n### Table Events\n| 事件名 | 说明 | 参数 |\n| ---- | ---- | ---- |\n| select | 当用户手动勾选数据行的 Checkbox 时触发的事件 | selection, row |\n| select-all | 当用户手动勾选全选 Checkbox 时触发的事件 | selection |\n| selection-change | 当选择项发生变化时会触发该事件 | selection |\n| cell-mouse-enter | 当单元格 hover 进入时会触发该事件 | row, column, cell, event |\n| cell-mouse-leave | 当单元格 hover 退出时会触发该事件 | row, column, cell, event |\n| cell-click | 当某个单元格被点击时会触发该事件 | row, column, cell, event |\n| cell-dblclick | 当某个单元格被双击击时会触发该事件 | row, column, cell, event |\n| row-click | 当某一行被点击时会触发该事件 | row, column, event |\n| row-contextmenu | 当某一行被鼠标右键点击时会触发该事件 | row, column, event |\n| row-dblclick | 当某一行被双击时会触发该事件 | row, column, event |\n| header-click | 当某一列的表头被点击时会触发该事件 | column, event |\n| header-contextmenu | 当某一列的表头被鼠标右键点击时触发该事件 | column, event |\n| sort-change | 当表格的排序条件发生变化的时候会触发该事件 | { column, prop, order } |\n| filter-change | 当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。 | filters |\n| current-change | 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 | currentRow, oldCurrentRow |\n| header-dragend | 当拖动表头改变了列的宽度的时候会触发该事件 | newWidth, oldWidth, column, event |\n| expand-change  | 当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded） | row, (expandedRows \\| expanded) |\n\n### Table Methods\n| 方法名 | 说明 | 参数 |\n| ---- | ---- | ---- |\n| clearSelection | 用于多选表格，清空用户的选择 | — |\n| toggleRowSelection | 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） | row, selected |\n| toggleAllSelection | 用于多选表格，切换所有行的选中状态 | - |\n| toggleRowExpansion | 用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开） | row, expanded |\n| setCurrentRow | 用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。 | row |\n| clearSort | 用于清空排序条件，数据会恢复成未排序的状态 | — |\n| clearFilter | 不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由columnKey组成的数组以清除指定列的过滤条件 | columnKey |\n| doLayout | 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法 | — |\n| sort | 手动对 Table 进行排序。参数`prop`属性指定排序列，`order`指定排序顺序。 | prop: string, order: string |\n\n### Table Slot\n| name | 说明 |\n|------|--------|\n| append | 插入至表格最后一行之后的内容，如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。若表格有合计行，该 slot 会位于合计行之上。 |\n\n### Table-column Attributes\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| type | 对应列的类型。如果设置了 `selection` 则显示多选框；如果设置了 `index` 则显示该行的索引（从 1 开始计算）；如果设置了 `expand` 则显示为一个可展开的按钮 | string | selection/index/expand | — |\n| index | 如果设置了 `type=index`，可以通过传递 `index` 属性来自定义索引 | number, Function(index) | - | - |\n| column-key | column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件 | string | — | — |\n| label | 显示的标题 | string | — | — |\n| prop | 对应列内容的字段名，也可以使用 property 属性 | string | — | — |\n| width | 对应列的宽度 | string | — | — |\n| min-width | 对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列 | string | — | — |\n| fixed | 列是否固定在左侧或者右侧，true 表示固定在左侧 | string, boolean | true, left, right | — |\n| render-header | 列标题 Label 区域渲染使用的 Function | Function(h, { column, $index }) | — | — |\n| sortable | 对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 | boolean, string | true, false, 'custom' | false |\n| sort-method | 对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，需返回一个数字，和 Array.sort 表现一致 | Function(a, b) | — | — |\n| sort-by | 指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推 | String/Array/Function(row, index) | — | — |\n| sort-orders | 数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序 | array | 数组中的元素需为以下三者之一：`ascending` 表示升序，`descending` 表示降序，`null` 表示还原为原始顺序 | ['ascending', 'descending', null] |\n| resizable | 对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真） | boolean | — | true |\n| formatter | 用来格式化内容 | Function(row, column, cellValue, index) | — | — |\n| show-overflow-tooltip | 当内容过长被隐藏时显示 tooltip | Boolean | — | false |\n| align | 对齐方式 | String | left/center/right | left |\n| header-align | 表头对齐方式，若不设置该项，则使用表格的对齐方式 | String | left/center/right | — |\n| class-name | 列的 className | string | — | — |\n| label-class-name | 当前列标题的自定义类名 | string | — | — |\n| selectable | 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 | Function(row, index) | — | — |\n| reserve-selection | 仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 `row-key`） | Boolean | — | false |\n| filters | 数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。 | Array[{ text, value }] | — | — |\n| filter-placement | 过滤弹出框的定位 | String | 与 Tooltip 的 `placement` 属性相同 | — |\n| filter-multiple | 数据过滤的选项是否多选 | Boolean | — | true |\n| filter-method | 数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。 | Function(value, row, column) | — | — |\n| filtered-value | 选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。 | Array | — | — |\n\n### Table-column Scoped Slot\n| name | 说明 |\n|------|--------|\n| — | 自定义列的内容，参数为 { row, column, $index } |\n| header | 自定义表头的内容. 参数为 { column, $index } |\n"
  },
  {
    "path": "examples/docs/zh-CN/tabs.md",
    "content": "## Tabs 标签页\n\n分隔内容上有关联但属于不同类别的数据集合。\n\n### 基础用法\n\n基础的、简洁的标签页。\n\n:::demo Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 `value` 属性来指定当前选中的标签页。\n\n```html\n<template>\n  <el-tabs v-model=\"activeName\" @tab-click=\"handleClick\">\n    <el-tab-pane label=\"用户管理\" name=\"first\">用户管理</el-tab-pane>\n    <el-tab-pane label=\"配置管理\" name=\"second\">配置管理</el-tab-pane>\n    <el-tab-pane label=\"角色管理\" name=\"third\">角色管理</el-tab-pane>\n    <el-tab-pane label=\"定时任务补偿\" name=\"fourth\">定时任务补偿</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: 'second'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### 选项卡样式\n\n选项卡样式的标签页。\n\n:::demo 只需要设置 `type` 属性为 `card` 就可以使选项卡改变为标签风格。\n\n```html\n<template>\n  <el-tabs v-model=\"activeName\" type=\"card\" @tab-click=\"handleClick\">\n    <el-tab-pane label=\"用户管理\" name=\"first\">用户管理</el-tab-pane>\n    <el-tab-pane label=\"配置管理\" name=\"second\">配置管理</el-tab-pane>\n    <el-tab-pane label=\"角色管理\" name=\"third\">角色管理</el-tab-pane>\n    <el-tab-pane label=\"定时任务补偿\" name=\"fourth\">定时任务补偿</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: 'first'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### 卡片化\n\n卡片化的标签页。\n\n:::demo 将`type`设置为`border-card`。\n```html\n<el-tabs type=\"border-card\">\n  <el-tab-pane label=\"用户管理\">用户管理</el-tab-pane>\n  <el-tab-pane label=\"配置管理\">配置管理</el-tab-pane>\n  <el-tab-pane label=\"角色管理\">角色管理</el-tab-pane>\n  <el-tab-pane label=\"定时任务补偿\">定时任务补偿</el-tab-pane>\n</el-tabs>\n```\n:::\n\n### 位置\n\n可以通过 `tab-position` 设置标签的位置\n\n:::demo 标签一共有四个方向的设置 `tabPosition=\"left|right|top|bottom\"`\n\n```html\n<template>\n  <el-radio-group v-model=\"tabPosition\" style=\"margin-bottom: 30px;\">\n    <el-radio-button label=\"top\">top</el-radio-button>\n    <el-radio-button label=\"right\">right</el-radio-button>\n    <el-radio-button label=\"bottom\">bottom</el-radio-button>\n    <el-radio-button label=\"left\">left</el-radio-button>\n  </el-radio-group>\n\n  <el-tabs :tab-position=\"tabPosition\" style=\"height: 200px;\">\n    <el-tab-pane label=\"用户管理\">用户管理</el-tab-pane>\n    <el-tab-pane label=\"配置管理\">配置管理</el-tab-pane>\n    <el-tab-pane label=\"角色管理\">角色管理</el-tab-pane>\n    <el-tab-pane label=\"定时任务补偿\">定时任务补偿</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        tabPosition: 'left'\n      };\n    }\n  };\n</script>\n```\n:::\n\n### 自定义标签页\n\n可以通过具名 `slot` 来实现自定义标签页的内容\n\n:::demo\n```html\n<el-tabs type=\"border-card\">\n  <el-tab-pane>\n    <span slot=\"label\"><i class=\"el-icon-date\"></i> 我的行程</span>\n    我的行程\n  </el-tab-pane>\n  <el-tab-pane label=\"消息中心\">消息中心</el-tab-pane>\n  <el-tab-pane label=\"角色管理\">角色管理</el-tab-pane>\n  <el-tab-pane label=\"定时任务补偿\">定时任务补偿</el-tab-pane>\n</el-tabs>\n```\n:::\n\n### 动态增减标签页\n\n增减标签页按钮只能在选项卡样式的标签页下使用\n\n:::demo\n```html\n<el-tabs v-model=\"editableTabsValue\" type=\"card\" editable @edit=\"handleTabsEdit\">\n  <el-tab-pane\n    :key=\"item.name\"\n    v-for=\"(item, index) in editableTabs\"\n    :label=\"item.title\"\n    :name=\"item.name\"\n  >\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n<script>\n  export default {\n    data() {\n      return {\n        editableTabsValue: '2',\n        editableTabs: [{\n          title: 'Tab 1',\n          name: '1',\n          content: 'Tab 1 content'\n        }, {\n          title: 'Tab 2',\n          name: '2',\n          content: 'Tab 2 content'\n        }],\n        tabIndex: 2\n      }\n    },\n    methods: {\n      handleTabsEdit(targetName, action) {\n        if (action === 'add') {\n          let newTabName = ++this.tabIndex + '';\n          this.editableTabs.push({\n            title: 'New Tab',\n            name: newTabName,\n            content: 'New Tab content'\n          });\n          this.editableTabsValue = newTabName;\n        }\n        if (action === 'remove') {\n          let tabs = this.editableTabs;\n          let activeName = this.editableTabsValue;\n          if (activeName === targetName) {\n            tabs.forEach((tab, index) => {\n              if (tab.name === targetName) {\n                let nextTab = tabs[index + 1] || tabs[index - 1];\n                if (nextTab) {\n                  activeName = nextTab.name;\n                }\n              }\n            });\n          }\n          \n          this.editableTabsValue = activeName;\n          this.editableTabs = tabs.filter(tab => tab.name !== targetName);\n        }\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 自定义增加标签页触发器\n\n:::demo\n```html\n<div style=\"margin-bottom: 20px;\">\n  <el-button\n    size=\"small\"\n    @click=\"addTab(editableTabsValue)\"\n  >\n    add tab\n  </el-button>\n</div>\n<el-tabs v-model=\"editableTabsValue\" type=\"card\" closable @tab-remove=\"removeTab\">\n  <el-tab-pane\n    v-for=\"(item, index) in editableTabs\"\n    :key=\"item.name\"\n    :label=\"item.title\"\n    :name=\"item.name\"\n  >\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n<script>\n  export default {\n    data() {\n      return {\n        editableTabsValue: '2',\n        editableTabs: [{\n          title: 'Tab 1',\n          name: '1',\n          content: 'Tab 1 content'\n        }, {\n          title: 'Tab 2',\n          name: '2',\n          content: 'Tab 2 content'\n        }],\n        tabIndex: 2\n      }\n    },\n    methods: {\n      addTab(targetName) {\n        let newTabName = ++this.tabIndex + '';\n        this.editableTabs.push({\n          title: 'New Tab',\n          name: newTabName,\n          content: 'New Tab content'\n        });\n        this.editableTabsValue = newTabName;\n      },\n      removeTab(targetName) {\n        let tabs = this.editableTabs;\n        let activeName = this.editableTabsValue;\n        if (activeName === targetName) {\n          tabs.forEach((tab, index) => {\n            if (tab.name === targetName) {\n              let nextTab = tabs[index + 1] || tabs[index - 1];\n              if (nextTab) {\n                activeName = nextTab.name;\n              }\n            }\n          });\n        }\n        \n        this.editableTabsValue = activeName;\n        this.editableTabs = tabs.filter(tab => tab.name !== targetName);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Tabs Attributes\n| 参数       | 说明     | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| value / v-model  | 绑定值，选中选项卡的 name  | string   |  —  |  第一个选项卡的 name |\n| type     | 风格类型   | string   | card/border-card  |     —    |\n| closable  | 标签是否可关闭   | boolean   | — |  false  |\n| addable  | 标签是否可增加   | boolean   | — |  false  |\n| editable  | 标签是否同时可增加和关闭   | boolean   | — |  false  |\n| tab-position  | 选项卡所在位置 | string   |  top/right/bottom/left  |  top |\n| stretch  | 标签的宽度是否自撑开 | boolean   |  -  |  false |\n| before-leave | 切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换。 | Function(activeName, oldActiveName) | — | — |\n\n### Tabs Events\n| 事件名称 | 说明 | 回调参数 |\n|---------- |-------- |---------- |\n| tab-click  | tab 被选中时触发 | 被选中的标签 tab 实例 |\n| tab-remove  | 点击 tab 移除按钮后触发  | 被删除的标签的 name |\n| tab-add  | 点击 tabs 的新增按钮后触发  | — |\n| edit  | 点击 tabs 的新增按钮或 tab 被关闭后触发  | (targetName, action) |\n\n### Tab-pane Attributes\n| 参数       | 说明     | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| label     | 选项卡标题   | string   | — |    —     |\n| disabled | 是否禁用 | boolean | — | false |\n| name      | 与选项卡绑定值 value 对应的标识符，表示选项卡别名 | string | — | 该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1' |\n| closable  | 标签是否可关闭   | boolean   | — |  false  |\n| lazy  | 标签是否延迟渲染   | boolean   | — |  false  |\n"
  },
  {
    "path": "examples/docs/zh-CN/tag.md",
    "content": "## Tag 标签\n\n用于标记和选择。\n\n### 基础用法\n\n:::demo 由`type`属性来选择tag的类型，也可以通过`color`属性来自定义背景色。\n\n```html\n<el-tag>标签一</el-tag>\n<el-tag type=\"success\">标签二</el-tag>\n<el-tag type=\"info\">标签三</el-tag>\n<el-tag type=\"warning\">标签四</el-tag>\n<el-tag type=\"danger\">标签五</el-tag>\n```\n:::\n\n### 可移除标签\n\n:::demo 设置`closable`属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画，如果不想使用，可以设置`disable-transitions`属性，它接受一个`Boolean`，true 为关闭。\n\n```html\n<el-tag\n  v-for=\"tag in tags\"\n  :key=\"tag.name\"\n  closable\n  :type=\"tag.type\">\n  {{tag.name}}\n</el-tag>\n\n<script>\n  export default {\n    data() {\n      return {\n        tags: [\n          { name: '标签一', type: '' },\n          { name: '标签二', type: 'success' },\n          { name: '标签三', type: 'info' },\n          { name: '标签四', type: 'warning' },\n          { name: '标签五', type: 'danger' }\n        ]\n      };\n    }\n  }\n</script>\n```\n:::\n\n### 动态编辑标签\n\n动态编辑标签可以通过点击标签关闭按钮后触发的 `close` 事件来实现\n\n:::demo\n```html\n<el-tag\n  :key=\"tag\"\n  v-for=\"tag in dynamicTags\"\n  closable\n  :disable-transitions=\"false\"\n  @close=\"handleClose(tag)\">\n  {{tag}}\n</el-tag>\n<el-input\n  class=\"input-new-tag\"\n  v-if=\"inputVisible\"\n  v-model=\"inputValue\"\n  ref=\"saveTagInput\"\n  size=\"small\"\n  @keyup.enter.native=\"handleInputConfirm\"\n  @blur=\"handleInputConfirm\"\n>\n</el-input>\n<el-button v-else class=\"button-new-tag\" size=\"small\" @click=\"showInput\">+ New Tag</el-button>\n\n<style>\n  .el-tag + .el-tag {\n    margin-left: 10px;\n  }\n  .button-new-tag {\n    margin-left: 10px;\n    height: 32px;\n    line-height: 30px;\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .input-new-tag {\n    width: 90px;\n    margin-left: 10px;\n    vertical-align: bottom;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        dynamicTags: ['标签一', '标签二', '标签三'],\n        inputVisible: false,\n        inputValue: ''\n      };\n    },\n    methods: {\n      handleClose(tag) {\n        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);\n      },\n\n      showInput() {\n        this.inputVisible = true;\n        this.$nextTick(_ => {\n          this.$refs.saveTagInput.$refs.input.focus();\n        });\n      },\n\n      handleInputConfirm() {\n        let inputValue = this.inputValue;\n        if (inputValue) {\n          this.dynamicTags.push(inputValue);\n        }\n        this.inputVisible = false;\n        this.inputValue = '';\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 不同尺寸\n\nTag 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。\n\n:::demo 额外的尺寸：`medium`、`small`、`mini`，通过设置`size`属性来配置它们。\n\n```html\n<el-tag closable>默认标签</el-tag>\n<el-tag size=\"medium\" closable>中等标签</el-tag>\n<el-tag size=\"small\" closable>小型标签</el-tag>\n<el-tag size=\"mini\" closable>超小标签</el-tag>\n```\n:::\n\n### 不同主题\n\nTag 组件提供了三个不同的主题：`dark`、`light` 和 `plain`\n\n:::demo 通过设置`effect`属性来改变主题，默认为 `light`\n```html\n<div class=\"tag-group\">\n  <span class=\"tag-group__title\">Dark</span>\n  <el-tag\n    v-for=\"item in items\"\n    :key=\"item.label\"\n    :type=\"item.type\"\n    effect=\"dark\">\n    {{ item.label }}\n  </el-tag>\n</div>\n<div class=\"tag-group\">\n  <span class=\"tag-group__title\">Plain</span>\n  <el-tag\n    v-for=\"item in items\"\n    :key=\"item.label\"\n    :type=\"item.type\"\n    effect=\"plain\">\n    {{ item.label }}\n  </el-tag>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        items: [\n          { type: '', label: '标签一' },\n          { type: 'success', label: '标签二' },\n          { type: 'info', label: '标签三' },\n          { type: 'danger', label: '标签四' },\n          { type: 'warning', label: '标签五' }\n        ]\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Attributes\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| type | 类型 | string | success/info/warning/danger | — |\n| closable | 是否可关闭 | boolean | — | false |\n| disable-transitions | 是否禁用渐变动画 | boolean | — | false |\n| hit | 是否有边框描边 | boolean | — | false |\n| color | 背景色 | string | — | — |\n| size | 尺寸 | string | medium / small / mini | — |\n| effect | 主题 | string | dark / light / plain | light |\n\n\n### Events\n| 事件名称 | 说明 | 回调参数 |\n|---------- |-------- |---------- |\n| click | 点击 Tag 时触发的事件 | — |\n| close | 关闭 Tag 时触发的事件 | — |\n"
  },
  {
    "path": "examples/docs/zh-CN/time-picker.md",
    "content": "## TimePicker 时间选择器\n\n 用于选择或输入时间\n\n### 固定时间点\n\n提供几个固定的时间点供用户选择\n\n:::demo 使用 el-time-select 标签，分别通过`start`、`end`和`step`指定可选的起始时间、结束时间和步长\n```html\n<el-time-select\n  v-model=\"value\"\n  :picker-options=\"{\n    start: '08:30',\n    step: '00:15',\n    end: '18:30'\n  }\"\n  placeholder=\"选择时间\">\n</el-time-select>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: ''\n      };\n    }\n  }\n</script>\n```\n:::\n\n### 任意时间点\n\n可以选择任意时间\n\n:::demo 使用 el-time-picker 标签，通过`selectableRange`限制可选时间范围。提供了两种交互方式：默认情况下通过鼠标滚轮进行选择，打开`arrow-control`属性则通过界面上的箭头进行选择。\n```html\n<template>\n  <el-time-picker\n    v-model=\"value1\"\n    :picker-options=\"{\n      selectableRange: '18:30:00 - 20:30:00'\n    }\"\n    placeholder=\"任意时间点\">\n  </el-time-picker>\n  <el-time-picker\n    arrow-control\n    v-model=\"value2\"\n    :picker-options=\"{\n      selectableRange: '18:30:00 - 20:30:00'\n    }\"\n    placeholder=\"任意时间点\">\n  </el-time-picker>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: new Date(2016, 9, 10, 18, 40),\n        value2: new Date(2016, 9, 10, 18, 40)\n      };\n    }\n  }\n</script>\n```\n:::\n\n### 固定时间范围\n\n若先选择开始时间，则结束时间内备选项的状态会随之改变\n\n:::demo\n```html\n<template>\n  <el-time-select\n    placeholder=\"起始时间\"\n    v-model=\"startTime\"\n    :picker-options=\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30'\n    }\">\n  </el-time-select>\n  <el-time-select\n    placeholder=\"结束时间\"\n    v-model=\"endTime\"\n    :picker-options=\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30',\n      minTime: startTime\n    }\">\n  </el-time-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        startTime: '',\n        endTime: ''\n      };\n    }\n  }\n</script>\n```\n:::\n\n### 任意时间范围\n\n可选择任意的时间范围\n\n:::demo 添加`is-range`属性即可选择时间范围，同样支持`arrow-control`属性。\n```html\n<template>\n  <el-time-picker\n    is-range\n    v-model=\"value1\"\n    range-separator=\"至\"\n    start-placeholder=\"开始时间\"\n    end-placeholder=\"结束时间\"\n    placeholder=\"选择时间范围\">\n  </el-time-picker>\n  <el-time-picker\n    is-range\n    arrow-control\n    v-model=\"value2\"\n    range-separator=\"至\"\n    start-placeholder=\"开始时间\"\n    end-placeholder=\"结束时间\"\n    placeholder=\"选择时间范围\">\n  </el-time-picker>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],\n        value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n      };\n    }\n  }\n</script>\n```\n:::\n\n### Attributes\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| value / v-model | 绑定值 | date(TimePicker) / string(TimeSelect) | — | — |\n| readonly | 完全只读 | boolean | — | false |\n| disabled | 禁用 | boolean | — | false |\n| editable | 文本框可输入 | boolean | — | true |\n| clearable | 是否显示清除按钮 | boolean | — | true |\n| size          | 输入框尺寸     | string          | medium / small / mini  | — |\n| placeholder | 非范围选择时的占位内容 | string | — | — |\n| start-placeholder | 范围选择时开始日期的占位内容 | string | — | — |\n| end-placeholder | 范围选择时开始日期的占位内容 | string | — | — |\n| is-range | 是否为时间范围选择，仅对`<el-time-picker>`有效 | boolean | — | false |\n| arrow-control | 是否使用箭头进行时间选择，仅对`<el-time-picker>`有效 | boolean | — | false |\n| align | 对齐方式 | string | left / center / right | left |\n| popper-class | TimePicker 下拉框的类名 | string | — | — |\n| picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} |\n| range-separator | 选择范围时的分隔符 | string | - | '-' |\n| value-format | 可选，仅TimePicker时可用，绑定值的格式。不指定则绑定值为 Date 对象 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | — |\n| default-value | 可选，选择器打开时默认显示的时间 | Date(TimePicker) / string(TimeSelect) | 可被`new Date()`解析(TimePicker) / 可选值(TimeSelect) | — |\n| name | 原生属性 | string | — | — |\n| prefix-icon | 自定义头部图标的类名 | string | — | el-icon-time |\n| clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close |\n\n### Time Select Options\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| start | 开始时间 | string | — | 09:00 |\n| end | 结束时间 | string | — | 18:00 |\n| step | 间隔时间 | string | — | 00:30 |\n| minTime | 最小时间，小于该时间的时间段将被禁用 | string | — | 00:00 |\n| maxTime | 最大时间，大于该时间的时间段将被禁用 | string | — | — |\n\n### Time Picker Options\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| selectableRange | 可选时间段，例如`'18:30:00 - 20:30:00'`或者传入数组`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string / array | — | — |\n| format | 时间格式化(TimePicker) | string | 小时：`HH`，分：`mm`，秒：`ss`，AM/PM `A` | 'HH:mm:ss' |\n\n### Events\n| 事件名 | 说明 | 参数 |\n|---------|--------|---------|\n| change | 用户确认选定的值时触发 | 组件绑定值 |\n| blur | 当 input 失去焦点时触发 | 组件实例 |\n| focus | 当 input 获得焦点时触发 | 组件实例 |\n\n### Methods\n| 方法名 | 说明 | 参数 |\n| ---- | ---- | ---- |\n| focus | 使 input 获取焦点 | - |\n"
  },
  {
    "path": "examples/docs/zh-CN/timeline.md",
    "content": "## Timeline 时间线\n\n可视化地呈现时间流信息。\n\n### 基础用法\n\nTimeline 可拆分成多个按照时间戳正序或倒序排列的 activity，时间戳是其区分于其他控件的重要特征，使⽤时注意与 Steps 步骤条等区分。\n\n:::demo\n```html\n<div class=\"block\">\n  <div class=\"radio\">\n    排序：\n    <el-radio-group v-model=\"reverse\">\n      <el-radio :label=\"true\">倒序</el-radio>\n      <el-radio :label=\"false\">正序</el-radio>\n    </el-radio-group>\n  </div>\n\n  <el-timeline :reverse=\"reverse\">\n    <el-timeline-item\n      v-for=\"(activity, index) in activities\"\n      :key=\"index\"\n      :timestamp=\"activity.timestamp\">\n      {{activity.content}}\n    </el-timeline-item>\n  </el-timeline>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        reverse: true,\n        activities: [{\n          content: '活动按期开始',\n          timestamp: '2018-04-15'\n        }, {\n          content: '通过审核',\n          timestamp: '2018-04-13'\n        }, {\n          content: '创建成功',\n          timestamp: '2018-04-11'\n        }]\n      };\n    }\n  };\n</script>\n```\n:::\n\n### ⾃定义节点样式\n\n可根据实际场景⾃定义节点尺⼨、颜⾊，或直接使⽤图标。\n\n:::demo\n```html\n<div class=\"block\">\n  <el-timeline>\n    <el-timeline-item\n      v-for=\"(activity, index) in activities\"\n      :key=\"index\"\n      :icon=\"activity.icon\"\n      :type=\"activity.type\"\n      :color=\"activity.color\"\n      :size=\"activity.size\"\n      :timestamp=\"activity.timestamp\">\n      {{activity.content}}\n    </el-timeline-item>\n  </el-timeline>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        activities: [{\n          content: '支持使用图标',\n          timestamp: '2018-04-12 20:46',\n          size: 'large',\n          type: 'primary',\n          icon: 'el-icon-more'\n        }, {\n          content: '支持自定义颜色',\n          timestamp: '2018-04-03 20:46',\n          color: '#0bbd87'\n        }, {\n          content: '支持自定义尺寸',\n          timestamp: '2018-04-03 20:46',\n          size: 'large'\n        }, {\n          content: '默认样式的节点',\n          timestamp: '2018-04-03 20:46'\n        }]\n      };\n    }\n  };\n</script>\n```\n:::\n\n### ⾃定义时间戳\n\n当内容在垂直⽅向上过⾼时，可将时间戳置于内容之上。\n\n:::demo\n```html\n<div class=\"block\">\n  <el-timeline>\n    <el-timeline-item timestamp=\"2018/4/12\" placement=\"top\">\n      <el-card>\n        <h4>更新 Github 模板</h4>\n        <p>王小虎 提交于 2018/4/12 20:46</p>\n      </el-card>\n    </el-timeline-item>\n    <el-timeline-item timestamp=\"2018/4/3\" placement=\"top\">\n      <el-card>\n        <h4>更新 Github 模板</h4>\n        <p>王小虎 提交于 2018/4/3 20:46</p>\n      </el-card>\n    </el-timeline-item>\n    <el-timeline-item timestamp=\"2018/4/2\" placement=\"top\">\n      <el-card>\n        <h4>更新 Github 模板</h4>\n        <p>王小虎 提交于 2018/4/2 20:46</p>\n      </el-card>\n    </el-timeline-item>\n  </el-timeline>\n</div>\n```\n:::\n\n### Timeline Attributes\n| 参数      | 说明    | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| reverse | 指定节点排序方向，默认为正序 | boolean | — | false |\n\n### Timeline-item Attributes\n| 参数      | 说明    | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| timestamp     | 时间戳 | string  | - | — |\n| hide-timestamp  | 是否隐藏时间戳 | boolean | — | false |\n| placement | 时间戳位置 | string | top / bottom | bottom |\n| type | 节点类型 | string | primary / success / warning / danger / info | - |\n| color | 节点颜色 | string | hsl / hsv / hex / rgb | - |\n| size | 节点尺寸 | string | normal / large | normal |\n| icon | 节点图标 | string | — | - |\n\n### Timeline-Item Slot\n| name | 说明 |\n|------|--------|\n| — | Timeline-Item 的内容 |\n| dot | 自定义节点 |\n"
  },
  {
    "path": "examples/docs/zh-CN/tooltip.md",
    "content": "## Tooltip 文字提示\n\n常用于展示鼠标 hover 时的提示信息。\n\n### 基础用法\n\n在这里我们提供 9 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。\n\n:::demo 使用`content`属性来决定`hover`时的提示信息。由`placement`属性决定展示效果：`placement`属性值为：`方向-对齐位置`；四个方向：`top`、`left`、`right`、`bottom`；三种对齐位置：`start`, `end`，默认为空。如`placement=\"left-end\"`，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。\n\n```html\n<div class=\"box\">\n  <div class=\"top\">\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Top Left 提示文字\" placement=\"top-start\">\n      <el-button>上左</el-button>\n    </el-tooltip>\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Top Center 提示文字\" placement=\"top\">\n      <el-button>上边</el-button>\n    </el-tooltip>\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Top Right 提示文字\" placement=\"top-end\">\n      <el-button>上右</el-button>\n    </el-tooltip>\n  </div>\n  <div class=\"left\">\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Left Top 提示文字\" placement=\"left-start\">\n      <el-button>左上</el-button>\n    </el-tooltip>\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Left Center 提示文字\" placement=\"left\">\n      <el-button>左边</el-button>\n    </el-tooltip>\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Left Bottom 提示文字\" placement=\"left-end\">\n      <el-button>左下</el-button>\n    </el-tooltip>\n  </div>\n\n  <div class=\"right\">\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Right Top 提示文字\" placement=\"right-start\">\n      <el-button>右上</el-button>\n    </el-tooltip>\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Right Center 提示文字\" placement=\"right\">\n      <el-button>右边</el-button>\n    </el-tooltip>\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Right Bottom 提示文字\" placement=\"right-end\">\n      <el-button>右下</el-button>\n    </el-tooltip>\n  </div>\n  <div class=\"bottom\">\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Bottom Left 提示文字\" placement=\"bottom-start\">\n      <el-button>下左</el-button>\n    </el-tooltip>\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Bottom Center 提示文字\" placement=\"bottom\">\n      <el-button>下边</el-button>\n    </el-tooltip>\n    <el-tooltip class=\"item\" effect=\"dark\" content=\"Bottom Right 提示文字\" placement=\"bottom-end\">\n      <el-button>下右</el-button>\n    </el-tooltip>\n  </div>\n</div>\n\n<style>\n  .box {\n    width: 400px;\n\n    .top {\n      text-align: center;\n    }\n\n    .left {\n      float: left;\n      width: 60px;\n    }\n\n    .right {\n      float: right;\n      width: 60px;\n    }\n\n    .bottom {\n      clear: both;\n      text-align: center;\n    }\n\n    .item {\n      margin: 4px;\n    }\n\n    .left .el-tooltip__popper,\n    .right .el-tooltip__popper {\n      padding: 8px 10px;\n    }\n  }\n</style>\n```\n:::\n\n### 主题\n\nTooltip 组件提供了两个不同的主题：`dark`和`light`。\n\n\n:::demo 通过设置`effect`属性来改变主题，默认为`dark`。\n```html\n<el-tooltip content=\"Top center\" placement=\"top\">\n  <el-button>Dark</el-button>\n</el-tooltip>\n<el-tooltip content=\"Bottom center\" placement=\"bottom\" effect=\"light\">\n  <el-button>Light</el-button>\n</el-tooltip>\n```\n:::\n\n### 更多 Content\n\n展示多行文本或者是设置文本内容的格式\n\n:::demo 用具名 slot 分发`content`，替代`tooltip`中的`content`属性。\n```html\n<el-tooltip placement=\"top\">\n  <div slot=\"content\">多行信息<br/>第二行信息</div>\n  <el-button>Top center</el-button>\n</el-tooltip>\n```\n:::\n\n### 高级扩展\n\n除了这些基本设置外，还有一些属性可以让使用者更好的定制自己的效果：\n\n`transition` 属性可以定制显隐的动画效果，默认为`fade-in-linear`。\n如果需要关闭 `tooltip` 功能，`disabled` 属性可以满足这个需求，它接受一个`Boolean`，设置为`true`即可。\n\n事实上，这是基于 [Vue-popper](https://github.com/element-component/vue-popper) 的扩展，你可以自定义任意 Vue-popper 中允许定义的字段。\n当然 Tooltip 组件实际上十分强大，文末的API文档会做一一说明。\n\n:::demo\n```html\n<template>\n  <el-tooltip :disabled=\"disabled\" content=\"点击关闭 tooltip 功能\" placement=\"bottom\" effect=\"light\">\n    <el-button @click=\"disabled = !disabled\">点击{{disabled ? '开启' : '关闭'}} tooltip 功能</el-button>\n  </el-tooltip>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        disabled: false\n      };\n    }\n  };\n</script>\n```\n:::\n\n:::tip\ntooltip 内不支持 `router-link` 组件，请使用 `vm.$router.push` 代替。\n\ntooltip 内不支持 disabled form 元素，参考[MDN](https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter)，请在 disabled form 元素外层添加一层包裹元素。\n:::\n\n### Attributes\n| 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |\n|--------------------|----------------------------------------------------------|-------------------|-------------|--------|\n|  effect        |  默认提供的主题  | String            | dark/light | dark  |\n|  content        |  显示的内容，也可以通过 `slot#content` 传入 DOM  | String            | — | — |\n|  placement        |  Tooltip 的出现位置  | String           |  top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end |  bottom |\n|  value / v-model |  状态是否可见  | Boolean           | — |  false |\n|  disabled       |  Tooltip 是否可用  | Boolean           | — |  false |\n|  offset        |  出现位置的偏移量  | Number           | — |  0 |\n|  transition     |  定义渐变动画      | String             | — | el-fade-in-linear |\n|  visible-arrow   |  是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | — | true |\n|  popper-options        | [popper.js](https://popper.js.org/docs/v2/) 的参数 | Object            | 参考 [popper.js](https://popper.js.org/docs/v2/) 文档 | { boundariesElement: 'body', gpuAcceleration: false } |\n| open-delay | 延迟出现，单位毫秒 | Number | — | 0 |\n| manual | 手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效 | Boolean | — | false |\n| popper-class | 为 Tooltip 的 popper 添加类名 | String | — | — |\n| enterable | 鼠标是否可进入到 tooltip 中 | Boolean | — | true |\n| hide-after | Tooltip 出现后自动隐藏延时，单位毫秒，为 0 则不会自动隐藏 | number | — | 0 |\n| tabindex   | Tooltip 组件的 [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | — | 0 |\n"
  },
  {
    "path": "examples/docs/zh-CN/transfer.md",
    "content": "## Transfer 穿梭框\n\n### 基础用法\n:::demo Transfer 的数据通过 `data` 属性传入。数据需要是一个对象数组，每个对象有以下属性：`key` 为数据的唯一性标识，`label` 为显示文本，`disabled` 表示该项数据是否禁止转移。目标列表中的数据项会同步到绑定至 `v-model` 的变量，值为数据项的 `key` 所组成的数组。当然，如果希望在初始状态时目标列表不为空，可以像本例一样为 `v-model` 绑定的变量赋予一个初始值。\n```html\n<template>\n  <el-transfer v-model=\"value\" :data=\"data\"></el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `备选项 ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value: [1, 4]\n      };\n    }\n  };\n</script>\n```\n:::\n\n### 可搜索\n\n在数据很多的情况下，可以对数据进行搜索和过滤。\n\n:::demo 设置 `filterable` 为 `true` 即可开启搜索模式。默认情况下，若数据项的 `label` 属性包含搜索关键字，则会在搜索结果中显示。你也可以使用 `filter-method` 定义自己的搜索逻辑。`filter-method` 接收一个方法，当搜索关键字变化时，会将当前的关键字和每个数据项传给该方法。若方法返回 `true`，则会在搜索结果中显示对应的数据项。\n```html\n<template>\n  <el-transfer\n    filterable\n    :filter-method=\"filterMethod\"\n    filter-placeholder=\"请输入城市拼音\"\n    v-model=\"value\"\n    :data=\"data\">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];\n        const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];\n        cities.forEach((city, index) => {\n          data.push({\n            label: city,\n            key: index,\n            pinyin: pinyin[index]\n          });\n        });\n        return data;\n      };\n      return {\n        data: generateData(),\n        value: [],\n        filterMethod(query, item) {\n          return item.pinyin.indexOf(query) > -1;\n        }\n      };\n    }\n  };\n</script>\n```\n:::\n\n### 可自定义\n\n可以对列表标题文案、按钮文案、数据项的渲染函数、列表底部的勾选状态文案、列表底部的内容区等进行自定义。\n\n:::demo 可以使用 `titles`、`button-texts`、`render-content` 和 `format` 属性分别对列表标题文案、按钮文案、数据项的渲染函数和列表顶部的勾选状态文案进行自定义。数据项的渲染还可以使用 `scoped-slot` 进行自定义。对于列表底部的内容区，提供了两个具名 slot：`left-footer` 和 `right-footer`。此外，如果希望某些数据项在初始化时就被勾选，可以使用 `left-default-checked` 和 `right-default-checked` 属性。最后，本例还展示了 `change` 事件的用法。注意：由于 jsfiddle 不支持 JSX 语法，所以使用 `render-content` 自定义数据项的例子在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。\n```html\n<template>\n  <p style=\"text-align: center; margin: 0 0 20px\">使用 render-content 自定义数据项</p>\n  <div style=\"text-align: center\">\n    <el-transfer\n      style=\"text-align: left; display: inline-block\"\n      v-model=\"value\"\n      filterable\n      :left-default-checked=\"[2, 3]\"\n      :right-default-checked=\"[1]\"\n      :render-content=\"renderFunc\"\n      :titles=\"['Source', 'Target']\"\n      :button-texts=\"['到左边', '到右边']\"\n      :format=\"{\n        noChecked: '${total}',\n        hasChecked: '${checked}/${total}'\n      }\"\n      @change=\"handleChange\"\n      :data=\"data\">\n      <el-button class=\"transfer-footer\" slot=\"left-footer\" size=\"small\">操作</el-button>\n      <el-button class=\"transfer-footer\" slot=\"right-footer\" size=\"small\">操作</el-button>\n    </el-transfer>\n  </div>\n  <p style=\"text-align: center; margin: 50px 0 20px\">使用 scoped-slot 自定义数据项</p>\n  <div style=\"text-align: center\">\n    <el-transfer\n      style=\"text-align: left; display: inline-block\"\n      v-model=\"value4\"\n      filterable\n      :left-default-checked=\"[2, 3]\"\n      :right-default-checked=\"[1]\"\n      :titles=\"['Source', 'Target']\"\n      :button-texts=\"['到左边', '到右边']\"\n      :format=\"{\n        noChecked: '${total}',\n        hasChecked: '${checked}/${total}'\n      }\"\n      @change=\"handleChange\"\n      :data=\"data\">\n      <span slot-scope=\"{ option }\">{{ option.key }} - {{ option.label }}</span>\n      <el-button class=\"transfer-footer\" slot=\"left-footer\" size=\"small\">操作</el-button>\n      <el-button class=\"transfer-footer\" slot=\"right-footer\" size=\"small\">操作</el-button>\n    </el-transfer>\n  </div>\n</template>\n\n<style>\n  .transfer-footer {\n    margin-left: 20px;\n    padding: 6px 5px;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `备选项 ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value: [1],\n        value4: [1],\n        renderFunc(h, option) {\n          return <span>{ option.key } - { option.label }</span>;\n        }\n      };\n    },\n\n    methods: {\n      handleChange(value, direction, movedKeys) {\n        console.log(value, direction, movedKeys);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### 数据项属性别名\n\n默认情况下，Transfer 仅能识别数据项中的 `key`、`label` 和 `disabled` 字段。如果你的数据的字段名不同，可以使用 `props` 属性为它们设置别名。\n:::demo 本例中的数据源没有 `key` 和 `label` 字段，在功能上与它们相同的字段名为 `value` 和 `desc`。因此可以使用`props` 属性为 `key` 和 `label` 设置别名。\n```html\n<template>\n  <el-transfer\n    v-model=\"value\"\n    :props=\"{\n      key: 'value',\n      label: 'desc'\n    }\"\n    :data=\"data\">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            value: i,\n            desc: `备选项 ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value: []\n      };\n    }\n  };\n</script>\n```\n:::\n\n### Attributes\n| 参数      | 说明    | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| value / v-model | 绑定值 | array | — | — |\n| data | Transfer 的数据源 | array[{ key, label, disabled }] | — | [ ] |\n| filterable | 是否可搜索 | boolean | — | false |\n| filter-placeholder | 搜索框占位符 | string | — | 请输入搜索内容 |\n| filter-method | 自定义搜索方法 | function | — | — |\n| target-order | 右侧列表元素的排序策略：若为 `original`，则保持与数据源相同的顺序；若为 `push`，则新加入的元素排在最后；若为 `unshift`，则新加入的元素排在最前 | string | original / push / unshift | original |\n| titles | 自定义列表标题 | array | — | ['列表 1', '列表 2'] |\n| button-texts | 自定义按钮文案 | array | — | [ ] |\n| render-content | 自定义数据项渲染函数 | function(h, option) | — | — |\n| format | 列表顶部勾选状态文案 | object{noChecked, hasChecked} | — | { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' } |\n| props | 数据源的字段别名 | object{key, label, disabled} | — | — |\n| left-default-checked | 初始状态下左侧列表的已勾选项的 key 数组 | array | — | [ ] |\n| right-default-checked | 初始状态下右侧列表的已勾选项的 key 数组 | array | — | [ ] |\n\n### Slot\n| name | 说明 |\n|------|--------|\n| left-footer | 左侧列表底部的内容 |\n| right-footer | 右侧列表底部的内容 |\n\n### Scoped Slot\n| name | 说明 |\n|------|--------|\n| — | 自定义数据项的内容，参数为 { option } |\n\n### Methods\n| 方法名 | 说明 | 参数 |\n| ---- | ---- | ---- |\n| clearQuery | 清空某个面板的搜索关键词 | 'left' / 'right'，指定需要清空的面板 |\n\n### Events\n| 事件名称      | 说明    | 回调参数      |\n|---------- |-------- |---------- |\n| change | 右侧列表元素变化时触发 | 当前值、数据移动的方向（'left' / 'right'）、发生移动的数据 key 数组 |\n| left-check-change | 左侧列表元素被用户选中 / 取消选中时触发 | 当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组 |\n| right-check-change | 右侧列表元素被用户选中 / 取消选中时触发 | 当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组 |\n"
  },
  {
    "path": "examples/docs/zh-CN/transition.md",
    "content": "## 内置过渡动画\n\nElement 内应用在部分组件的过渡动画，你也可以直接使用。在使用之前请阅读 [transition 组件文档](https://v2.cn.vuejs.org/v2/api/#transition) 。\n\n### fade 淡入淡出\n\n:::demo 提供 `el-fade-in-linear` 和 `el-fade-in` 两种效果。\n```html\n<template>\n  <div>\n    <el-button @click=\"show = !show\">Click Me</el-button>\n\n    <div style=\"display: flex; margin-top: 20px; height: 100px;\">\n      <transition name=\"el-fade-in-linear\">\n        <div v-show=\"show\" class=\"transition-box\">.el-fade-in-linear</div>\n      </transition>\n      <transition name=\"el-fade-in\">\n        <div v-show=\"show\" class=\"transition-box\">.el-fade-in</div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show: true\n    })\n  }\n</script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n```\n:::\n\n### zoom 缩放\n\n:::demo 提供 `el-zoom-in-center`，`el-zoom-in-top` 和 `el-zoom-in-bottom` 三种效果。\n```html\n<template>\n  <div>\n    <el-button @click=\"show2 = !show2\">Click Me</el-button>\n\n    <div style=\"display: flex; margin-top: 20px; height: 100px;\">\n      <transition name=\"el-zoom-in-center\">\n        <div v-show=\"show2\" class=\"transition-box\">.el-zoom-in-center</div>\n      </transition>\n\n      <transition name=\"el-zoom-in-top\">\n        <div v-show=\"show2\" class=\"transition-box\">.el-zoom-in-top</div>\n      </transition>\n\n      <transition name=\"el-zoom-in-bottom\">\n        <div v-show=\"show2\" class=\"transition-box\">.el-zoom-in-bottom</div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show2: true\n    })\n  }\n</script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n```\n:::\n\n\n### collapse 展开折叠\n\n使用 `el-collapse-transition` 组件实现折叠展开效果。\n\n:::demo\n```html\n<template>\n  <div>\n    <el-button @click=\"show3 = !show3\">Click Me</el-button>\n\n    <div style=\"margin-top: 20px; height: 200px;\">\n      <el-collapse-transition>\n        <div v-show=\"show3\">\n          <div class=\"transition-box\">el-collapse-transition</div>\n          <div class=\"transition-box\">el-collapse-transition</div>\n        </div>\n      </el-collapse-transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show3: true\n    })\n  }\n</script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n```\n:::\n\n### 按需引入\n\n```js\n// fade/zoom 等\nimport 'element-ui/lib/theme-chalk/base.css';\n// collapse 展开折叠\nimport CollapseTransition from 'element-ui/lib/transitions/collapse-transition';\nimport Vue from 'vue'\n\nVue.component(CollapseTransition.name, CollapseTransition)\n```\n"
  },
  {
    "path": "examples/docs/zh-CN/tree.md",
    "content": "## Tree 树形控件\n\n用清晰的层级结构展示信息，可展开或折叠。\n\n### 基础用法\n\n基础的树形结构展示。\n\n:::demo\n```html\n<el-tree :data=\"data\" :props=\"defaultProps\" @node-click=\"handleNodeClick\"></el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: '一级 1',\n          children: [{\n            label: '二级 1-1',\n            children: [{\n              label: '三级 1-1-1'\n            }]\n          }]\n        }, {\n          label: '一级 2',\n          children: [{\n            label: '二级 2-1',\n            children: [{\n              label: '三级 2-1-1'\n            }]\n          }, {\n            label: '二级 2-2',\n            children: [{\n              label: '三级 2-2-1'\n            }]\n          }]\n        }, {\n          label: '一级 3',\n          children: [{\n            label: '二级 3-1',\n            children: [{\n              label: '三级 3-1-1'\n            }]\n          }, {\n            label: '二级 3-2',\n            children: [{\n              label: '三级 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### 可选择\n\n适用于需要选择层级时使用。\n\n:::demo 本例还展示了动态加载节点数据的方法。\n```html\n<el-tree\n  :props=\"props\"\n  :load=\"loadNode\"\n  lazy\n  show-checkbox\n  @check-change=\"handleCheckChange\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        props: {\n          label: 'name',\n          children: 'zones'\n        },\n        count: 1\n      };\n    },\n    methods: {\n      handleCheckChange(data, checked, indeterminate) {\n        console.log(data, checked, indeterminate);\n      },\n      handleNodeClick(data) {\n        console.log(data);\n      },\n      loadNode(node, resolve) {\n        if (node.level === 0) {\n          return resolve([{ name: 'region1' }, { name: 'region2' }]);\n        }\n        if (node.level > 3) return resolve([]);\n\n        var hasChild;\n        if (node.data.name === 'region1') {\n          hasChild = true;\n        } else if (node.data.name === 'region2') {\n          hasChild = false;\n        } else {\n          hasChild = Math.random() > 0.5;\n        }\n\n        setTimeout(() => {\n          var data;\n          if (hasChild) {\n            data = [{\n              name: 'zone' + this.count++\n            }, {\n              name: 'zone' + this.count++\n            }];\n          } else {\n            data = [];\n          }\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### 懒加载自定义叶子节点\n\n:::demo 由于在点击节点时才进行该层数据的获取，默认情况下 Tree 无法预知某个节点是否为叶子节点，所以会为每个节点添加一个下拉按钮，如果节点没有下层数据，则点击后下拉按钮会消失。同时，你也可以提前告知 Tree 某个节点是否为叶子节点，从而避免在叶子节点前渲染下拉按钮。\n```html\n<el-tree\n  :props=\"props\"\n  :load=\"loadNode\"\n  lazy\n  show-checkbox>\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        props: {\n          label: 'name',\n          children: 'zones',\n          isLeaf: 'leaf'\n        },\n      };\n    },\n    methods: {\n      loadNode(node, resolve) {\n        if (node.level === 0) {\n          return resolve([{ name: 'region' }]);\n        }\n        if (node.level > 1) return resolve([]);\n\n        setTimeout(() => {\n          const data = [{\n            name: 'leaf',\n            leaf: true\n          }, {\n            name: 'zone'\n          }];\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### 默认展开和默认选中\n可将 Tree 的某些节点设置为默认展开或默认选中\n\n:::demo 分别通过`default-expanded-keys`和`default-checked-keys`设置默认展开和默认选中的节点。需要注意的是，此时必须设置`node-key`，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。\n```html\n<el-tree\n  :data=\"data\"\n  show-checkbox\n  node-key=\"id\"\n  :default-expanded-keys=\"[2, 3]\"\n  :default-checked-keys=\"[5]\"\n  :props=\"defaultProps\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          id: 1,\n          label: '一级 1',\n          children: [{\n            id: 4,\n            label: '二级 1-1',\n            children: [{\n              id: 9,\n              label: '三级 1-1-1'\n            }, {\n              id: 10,\n              label: '三级 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: '一级 2',\n          children: [{\n            id: 5,\n            label: '二级 2-1'\n          }, {\n            id: 6,\n            label: '二级 2-2'\n          }]\n        }, {\n          id: 3,\n          label: '一级 3',\n          children: [{\n            id: 7,\n            label: '二级 3-1'\n          }, {\n            id: 8,\n            label: '二级 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n</script>\n```\n:::\n\n### 禁用状态\n可将 Tree 的某些节点设置为禁用状态\n\n:::demo 通过`disabled`设置禁用状态。\n```html\n<el-tree\n  :data=\"data\"\n  show-checkbox\n  node-key=\"id\"\n  :default-expanded-keys=\"[2, 3]\"\n  :default-checked-keys=\"[5]\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          id: 1,\n          label: '一级 2',\n          children: [{\n            id: 3,\n            label: '二级 2-1',\n            children: [{\n              id: 4,\n              label: '三级 3-1-1'\n            }, {\n              id: 5,\n              label: '三级 3-1-2',\n              disabled: true\n            }]\n          }, {\n            id: 2,\n            label: '二级 2-2',\n            disabled: true,\n            children: [{\n              id: 6,\n              label: '三级 3-2-1'\n            }, {\n              id: 7,\n              label: '三级 3-2-2',\n              disabled: true\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n</script>\n```\n:::\n\n### 树节点的选择\n\n:::demo 本例展示如何获取和设置选中节点。获取和设置各有两种方式：通过 node 或通过 key。如果需要通过 key 来获取或设置，则必须设置`node-key`。\n```html\n<el-tree\n  :data=\"data\"\n  show-checkbox\n  default-expand-all\n  node-key=\"id\"\n  ref=\"tree\"\n  highlight-current\n  :props=\"defaultProps\">\n</el-tree>\n\n<div class=\"buttons\">\n  <el-button @click=\"getCheckedNodes\">通过 node 获取</el-button>\n  <el-button @click=\"getCheckedKeys\">通过 key 获取</el-button>\n  <el-button @click=\"setCheckedNodes\">通过 node 设置</el-button>\n  <el-button @click=\"setCheckedKeys\">通过 key 设置</el-button>\n  <el-button @click=\"resetChecked\">清空</el-button>\n</div>\n\n<script>\n  export default {\n    methods: {\n      getCheckedNodes() {\n        console.log(this.$refs.tree.getCheckedNodes());\n      },\n      getCheckedKeys() {\n        console.log(this.$refs.tree.getCheckedKeys());\n      },\n      setCheckedNodes() {\n        this.$refs.tree.setCheckedNodes([{\n          id: 5,\n          label: '二级 2-1'\n        }, {\n          id: 9,\n          label: '三级 1-1-1'\n        }]);\n      },\n      setCheckedKeys() {\n        this.$refs.tree.setCheckedKeys([3]);\n      },\n      resetChecked() {\n        this.$refs.tree.setCheckedKeys([]);\n      }\n    },\n\n    data() {\n      return {\n        data: [{\n          id: 1,\n          label: '一级 1',\n          children: [{\n            id: 4,\n            label: '二级 1-1',\n            children: [{\n              id: 9,\n              label: '三级 1-1-1'\n            }, {\n              id: 10,\n              label: '三级 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: '一级 2',\n          children: [{\n            id: 5,\n            label: '二级 2-1'\n          }, {\n            id: 6,\n            label: '二级 2-2'\n          }]\n        }, {\n          id: 3,\n          label: '一级 3',\n          children: [{\n            id: 7,\n            label: '二级 3-1'\n          }, {\n            id: 8,\n            label: '二级 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n</script>\n```\n:::\n\n### 自定义节点内容\n节点的内容支持自定义，可以在节点区添加按钮或图标等内容\n\n:::demo 可以通过两种方法进行树节点内容的自定义：`render-content`和 scoped slot。使用`render-content`指定渲染函数，该函数返回需要的节点区内容即可。渲染函数的用法请参考 Vue 文档。使用 scoped slot 会传入两个参数`node`和`data`，分别表示当前节点的 Node 对象和当前节点的数据。注意：由于 jsfiddle 不支持 JSX 语法，所以`render-content`示例在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。\n```html\n<div class=\"custom-tree-container\">\n  <div class=\"block\">\n    <p>使用 render-content</p>\n    <el-tree\n      :data=\"data\"\n      show-checkbox\n      node-key=\"id\"\n      default-expand-all\n      :expand-on-click-node=\"false\"\n      :render-content=\"renderContent\">\n    </el-tree>\n  </div>\n  <div class=\"block\">\n    <p>使用 scoped slot</p>\n    <el-tree\n      :data=\"data\"\n      show-checkbox\n      node-key=\"id\"\n      default-expand-all\n      :expand-on-click-node=\"false\">\n      <span class=\"custom-tree-node\" slot-scope=\"{ node, data }\">\n        <span>{{ node.label }}</span>\n        <span>\n          <el-button\n            type=\"text\"\n            size=\"mini\"\n            @click=\"() => append(data)\">\n            Append\n          </el-button>\n          <el-button\n            type=\"text\"\n            size=\"mini\"\n            @click=\"() => remove(node, data)\">\n            Delete\n          </el-button>\n        </span>\n      </span>\n    </el-tree>\n  </div>\n</div>\n\n<script>\n  let id = 1000;\n\n  export default {\n    data() {\n      const data = [{\n        id: 1,\n        label: '一级 1',\n        children: [{\n          id: 4,\n          label: '二级 1-1',\n          children: [{\n            id: 9,\n            label: '三级 1-1-1'\n          }, {\n            id: 10,\n            label: '三级 1-1-2'\n          }]\n        }]\n      }, {\n        id: 2,\n        label: '一级 2',\n        children: [{\n          id: 5,\n          label: '二级 2-1'\n        }, {\n          id: 6,\n          label: '二级 2-2'\n        }]\n      }, {\n        id: 3,\n        label: '一级 3',\n        children: [{\n          id: 7,\n          label: '二级 3-1'\n        }, {\n          id: 8,\n          label: '二级 3-2'\n        }]\n      }];\n      return {\n        data: JSON.parse(JSON.stringify(data)),\n        data: JSON.parse(JSON.stringify(data))\n      }\n    },\n\n    methods: {\n      append(data) {\n        const newChild = { id: id++, label: 'testtest', children: [] };\n        if (!data.children) {\n          this.$set(data, 'children', []);\n        }\n        data.children.push(newChild);\n      },\n\n      remove(node, data) {\n        const parent = node.parent;\n        const children = parent.data.children || parent.data;\n        const index = children.findIndex(d => d.id === data.id);\n        children.splice(index, 1);\n      },\n\n      renderContent(h, { node, data, store }) {\n        return (\n          <span class=\"custom-tree-node\">\n            <span>{node.label}</span>\n            <span>\n              <el-button size=\"mini\" type=\"text\" on-click={ () => this.append(data) }>Append</el-button>\n              <el-button size=\"mini\" type=\"text\" on-click={ () => this.remove(node, data) }>Delete</el-button>\n            </span>\n          </span>);\n      }\n    }\n  };\n</script>\n\n<style>\n  .custom-tree-node {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    font-size: 14px;\n    padding-right: 8px;\n  }\n</style>\n```\n:::\n\n### 节点过滤\n通过关键字过滤树节点\n\n:::demo 在需要对节点进行过滤时，调用 Tree 实例的`filter`方法，参数为关键字。需要注意的是，此时需要设置`filter-node-method`，值为过滤函数。\n```html\n<el-input\n  placeholder=\"输入关键字进行过滤\"\n  v-model=\"filterText\">\n</el-input>\n\n<el-tree\n  class=\"filter-tree\"\n  :data=\"data\"\n  :props=\"defaultProps\"\n  default-expand-all\n  :filter-node-method=\"filterNode\"\n  ref=\"tree\">\n</el-tree>\n\n<script>\n  export default {\n    watch: {\n      filterText(val) {\n        this.$refs.tree.filter(val);\n      }\n    },\n\n    methods: {\n      filterNode(value, data) {\n        if (!value) return true;\n        return data.label.indexOf(value) !== -1;\n      }\n    },\n\n    data() {\n      return {\n        filterText: '',\n        data: [{\n          id: 1,\n          label: '一级 1',\n          children: [{\n            id: 4,\n            label: '二级 1-1',\n            children: [{\n              id: 9,\n              label: '三级 1-1-1'\n            }, {\n              id: 10,\n              label: '三级 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: '一级 2',\n          children: [{\n            id: 5,\n            label: '二级 2-1'\n          }, {\n            id: 6,\n            label: '二级 2-2'\n          }]\n        }, {\n          id: 3,\n          label: '一级 3',\n          children: [{\n            id: 7,\n            label: '二级 3-1'\n          }, {\n            id: 8,\n            label: '二级 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n</script>\n```\n:::\n\n### 手风琴模式\n\n对于同一级的节点，每次只能展开一个\n\n:::demo\n```html\n<el-tree\n  :data=\"data\"\n  :props=\"defaultProps\"\n  accordion\n  @node-click=\"handleNodeClick\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: '一级 1',\n          children: [{\n            label: '二级 1-1',\n            children: [{\n              label: '三级 1-1-1'\n            }]\n          }]\n        }, {\n          label: '一级 2',\n          children: [{\n            label: '二级 2-1',\n            children: [{\n              label: '三级 2-1-1'\n            }]\n          }, {\n            label: '二级 2-2',\n            children: [{\n              label: '三级 2-2-1'\n            }]\n          }]\n        }, {\n          label: '一级 3',\n          children: [{\n            label: '二级 3-1',\n            children: [{\n              label: '三级 3-1-1'\n            }]\n          }, {\n            label: '二级 3-2',\n            children: [{\n              label: '三级 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n</script>\n```\n:::\n\n### 可拖拽节点\n\n通过 draggable 属性可让节点变为可拖拽。\n\n:::demo\n```html\n<el-tree\n  :data=\"data\"\n  node-key=\"id\"\n  default-expand-all\n  @node-drag-start=\"handleDragStart\"\n  @node-drag-enter=\"handleDragEnter\"\n  @node-drag-leave=\"handleDragLeave\"\n  @node-drag-over=\"handleDragOver\"\n  @node-drag-end=\"handleDragEnd\"\n  @node-drop=\"handleDrop\"\n  draggable\n  :allow-drop=\"allowDrop\"\n  :allow-drag=\"allowDrag\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          id: 1,\n          label: '一级 1',\n          children: [{\n            id: 4,\n            label: '二级 1-1',\n            children: [{\n              id: 9,\n              label: '三级 1-1-1'\n            }, {\n              id: 10,\n              label: '三级 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: '一级 2',\n          children: [{\n            id: 5,\n            label: '二级 2-1'\n          }, {\n            id: 6,\n            label: '二级 2-2'\n          }]\n        }, {\n          id: 3,\n          label: '一级 3',\n          children: [{\n            id: 7,\n            label: '二级 3-1'\n          }, {\n            id: 8,\n            label: '二级 3-2',\n            children: [{\n             id: 11,\n              label: '三级 3-2-1'\n            }, {\n              id: 12,\n              label: '三级 3-2-2'\n            }, {\n              id: 13,\n              label: '三级 3-2-3'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleDragStart(node, ev) {\n        console.log('drag start', node);\n      },\n      handleDragEnter(draggingNode, dropNode, ev) {\n        console.log('tree drag enter: ', dropNode.label);\n      },\n      handleDragLeave(draggingNode, dropNode, ev) {\n        console.log('tree drag leave: ', dropNode.label);\n      },\n      handleDragOver(draggingNode, dropNode, ev) {\n        console.log('tree drag over: ', dropNode.label);\n      },\n      handleDragEnd(draggingNode, dropNode, dropType, ev) {\n        console.log('tree drag end: ', dropNode && dropNode.label, dropType);\n      },\n      handleDrop(draggingNode, dropNode, dropType, ev) {\n        console.log('tree drop: ', dropNode.label, dropType);\n      },\n      allowDrop(draggingNode, dropNode, type) {\n        if (dropNode.data.label === '二级 3-1') {\n          return type !== 'inner';\n        } else {\n          return true;\n        }\n      },\n      allowDrag(draggingNode) {\n        return draggingNode.data.label.indexOf('三级 3-2-2') === -1;\n      }\n    }\n  };\n</script>\n```\n:::\n\n### Attributes\n| 参数                  | 说明                                               | 类型                        | 可选值  | 默认值   |\n| --------------------- | ---------------------------------------- | --------------------------- | ---- | ----- |\n| data                  | 展示数据                                           | array                       | —    | —     |\n| empty-text            | 内容为空的时候展示的文本                           | String                      | —    | —     |\n| node-key              | 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的               | String                      | —    | —     |\n| props                 | 配置选项，具体看下表                               | object                      | —    | —     |\n| render-after-expand   | 是否在第一次展开某个树节点后才渲染其子节点         | boolean                      | —    | true |\n| load                  | 加载子树数据的方法，仅当 lazy 属性为true 时生效    | function(node, resolve)     | —    | —     |\n| render-content        | 树节点的内容区的渲染 Function                      | Function(h, { node, data, store }        | —    | —     |\n| highlight-current     | 是否高亮当前选中节点，默认值是 false。             | boolean                     | —    | false |\n| default-expand-all    | 是否默认展开所有节点                               | boolean                     | —    | false |\n| expand-on-click-node  | 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。 | boolean                     | —    | true  |\n| check-on-click-node   | 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。 | boolean                     | —    | false |\n| auto-expand-parent    | 展开子节点的时候是否自动展开父节点                 | boolean                     | —    | true  |\n| default-expanded-keys | 默认展开的节点的 key 的数组                        | array                       | —    | —     |\n| show-checkbox         | 节点是否可被选择                                   | boolean                     | —    | false |\n| check-strictly        | 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false   | boolean                     | —    | false |\n| default-checked-keys  | 默认勾选的节点的 key 的数组                        | array                       | —    | —     |\n| current-node-key      | 当前选中的节点                                   | string, number               | —    | —     |\n| filter-node-method    | 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏 | Function(value, data, node) | —    | —     |\n| accordion             | 是否每次只打开一个同级树节点展开                   | boolean                     | —    | false |\n| indent                | 相邻级节点间的水平缩进，单位为像素                 | number                     | —    | 16 |\n| icon-class            | 自定义树节点的图标                              |  string                     | -    | -     |\n| lazy                  | 是否懒加载子节点，需与 load 方法结合使用           | boolean                     | —    | false |\n| draggable             | 是否开启拖拽节点功能                                   | boolean            | —    | false |\n| allow-drag            | 判断节点能否被拖拽                  | Function(node)  | —  | —  |\n| allow-drop            | 拖拽时判定目标节点能否被放置。`type` 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后 | Function(draggingNode, dropNode, type)  | —    | —     |\n\n### props\n| 参数       | 说明                | 类型     | 可选值  | 默认值  |\n| -------- | ----------------- | ------ | ---- | ---- |\n| label    | 指定节点标签为节点对象的某个属性值 | string, function(data, node) | —    | —    |\n| children | 指定子树为节点对象的某个属性值 | string | —    | —    |\n| disabled | 指定节点选择框是否禁用为节点对象的某个属性值 | boolean, function(data, node) | —    | —    |\n| isLeaf | 指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效 | boolean, function(data, node) | —    | —    |\n\n### 方法\n`Tree` 内部使用了 Node 类型的对象来包装用户传入的数据，用来保存目前节点的状态。\n`Tree` 拥有如下方法：\n\n| 方法名             | 说明                                       | 参数                                       |\n| --------------- | ---------------------------------------- | ---------------------------------------- |\n| filter          | 对树节点进行筛选操作                               | 接收一个任意类型的参数，该参数会在 filter-node-method 中作为第一个参数 |\n| updateKeyChildren | 通过 keys 设置节点子元素，使用此方法必须设置 node-key 属性 | (key, data) 接收两个参数，1. 节点 key 2. 节点数据的数组 |\n| getCheckedNodes | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前被选中的节点所组成的数组 | (leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数，1. 是否只是叶子节点，默认值为 `false` 2. 是否包含半选节点，默认值为 `false` |\n| setCheckedNodes | 设置目前勾选的节点，使用此方法必须设置 node-key 属性          | (nodes) 接收勾选节点数据的数组                      |\n| getCheckedKeys  | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前被选中的节点的 key 所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数，若为 `true` 则仅返回被选中的叶子节点的 keys，默认值为 `false` |\n| setCheckedKeys  | 通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性  | (keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 `true` 则仅设置叶子节点的选中状态，默认值为 `false` |\n| setChecked      | 通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性 | (key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中  3. boolean 类型，是否设置子节点 ，默认为 false |\n| getHalfCheckedNodes | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前半选中的节点所组成的数组  | - |\n| getHalfCheckedKeys | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前半选中的节点的 key 所组成的数组 | - |\n| getCurrentKey   | 获取当前被选中节点的 key，使用此方法必须设置 node-key 属性，若没有节点被选中则返回 null | — |\n| getCurrentNode  | 获取当前被选中节点的 data，若没有节点被选中则返回 null | — |\n| setCurrentKey   | 通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性 | (key) 待被选节点的 key，若为 null 则取消当前高亮的节点 |\n| setCurrentNode  | 通过 node 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性 | (node) 待被选节点的 node |\n| getNode         | 根据 data 或者 key 拿到 Tree 组件中的 node | (data) 要获得 node 的 key 或者 data |\n| remove          | 删除 Tree 中的一个节点，使用此方法必须设置 node-key 属性  | (data) 要删除的节点的 data 或者 node |\n| append          | 为 Tree 中的一个节点追加一个子节点 | (data, parentNode) 接收两个参数，1. 要追加的子节点的 data 2. 子节点的 parent 的 data、key 或者 node |\n| insertBefore    | 为 Tree 的一个节点的前面增加一个节点  | (data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的后一个节点的 data、key 或者 node |\n| insertAfter     | 为 Tree 的一个节点的后面增加一个节点  | (data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的前一个节点的 data、key 或者 node |\n\n### Events\n| 事件名称           | 说明             | 回调参数                                     |\n| -------------- | -------------- | ---------------------------------------- |\n| node-click     | 节点被点击时的回调      | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |\n| node-contextmenu | 当某一节点被鼠标右键点击时会触发该事件 | 共四个参数，依次为：event、传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |\n| check-change   | 节点选中状态发生变化时的回调 | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点 |\n| check          | 当复选框被点击的时候触发 | 共两个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性 |\n| current-change | 当前选中节点变化时触发的事件 | 共两个参数，依次为：当前节点的数据，当前节点的 Node 对象          |\n| node-expand    | 节点被展开时触发的事件    | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身 |\n| node-collapse  | 节点被关闭时触发的事件    | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身 |\n| node-drag-start | 节点开始拖拽时触发的事件  | 共两个参数，依次为：被拖拽节点对应的 Node、event |\n| node-drag-enter | 拖拽进入其他节点时触发的事件  | 共三个参数，依次为：被拖拽节点对应的 Node、所进入节点对应的 Node、event |\n| node-drag-leave | 拖拽离开某个节点时触发的事件  | 共三个参数，依次为：被拖拽节点对应的 Node、所离开节点对应的 Node、event |\n| node-drag-over | 在拖拽节点时触发的事件（类似浏览器的 mouseover 事件） | 共三个参数，依次为：被拖拽节点对应的 Node、当前进入节点对应的 Node、event |\n| node-drag-end  | 拖拽结束时（可能未成功）触发的事件  | 共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点（可能为空）、被拖拽节点的放置位置（before、after、inner）、event |\n| node-drop  | 拖拽成功完成时触发的事件  | 共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、event |\n\n### Scoped Slot\n| name | 说明 |\n|------|--------|\n| — | 自定义树节点的内容，参数为 { node, data } |\n"
  },
  {
    "path": "examples/docs/zh-CN/typography.md",
    "content": "<script>\n  import bus from '../../bus';\n  import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';\n  const varMap = [\n    '$--font-size-extra-large',\n    '$--font-size-large',\n    '$--font-size-medium',\n    '$--font-size-base',\n    '$--font-size-small',\n    '$--font-size-extra-small'\n  ];\n  const original = {\n    'font_size_extra_large': '20px',\n    'font_size_large': '18px',\n    'font_size_medium': '16px',\n    'font_size_base': '14px',\n    'font_size_small': '13px',\n    'font_size_extra_small': '12px'\n  }\n  export default {\n    created() {\n      bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);\n    },\n    mounted() {\n      this.setGlobal();\n    },\n    methods: {\n      tintColor(color, tint) {\n        return tintColor(color, tint);\n      },\n      setGlobal() {\n        if (window.userThemeConfig) {\n          this.global = window.userThemeConfig.global;\n        }\n      }\n    },\n    data() {\n      return {\n        global: {},\n        'font_size_extra_large': '',\n        'font_size_large': '',\n        'font_size_medium': '',\n        'font_size_base': '',\n        'font_size_small': '',\n        'font_size_extra_small': ''\n      }\n    },\n    watch: {\n      global: {\n        immediate: true,\n        handler(value) {\n          varMap.forEach((v) => {\n            const key = v.replace('$--', '').replace(/-/g, '_')\n            if (value[v]) {\n              this[key] = value[v]\n            } else {\n              this[key] = original[key]\n            }\n          });\n        }\n      }\n    },\n  }\n</script>\n\n## Typography 字体\n\n我们对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。\n\n### 字体\n<div class=\"demo-term-box\">\n<img src=\"../../assets/images/term-pingfang.png\" alt=\"\">\n<img src=\"../../assets/images/term-hiragino.png\" alt=\"\">\n<img src=\"../../assets/images/term-microsoft.png\" alt=\"\">\n<img src=\"../../assets/images/term-sf.png\" alt=\"\">\n<img src=\"../../assets/images/term-helvetica.png\" alt=\"\">\n<img src=\"../../assets/images/term-arial.png\" alt=\"\">\n</div>\n\n### 字号\n\n<table class=\"demo-typo-size\">\n  <tbody>\n  <tr\n    >\n      <td>层级</td>\n      <td>字体大小</td>\n      <td class=\"color-dark-light\">举例</td>\n    </tr>\n    <tr\n    :style=\"{ fontSize: font_size_extra_small }\"\n    >\n      <td>辅助文字</td>\n      <td class=\"color-dark-light\">{{font_size_extra_small}} Extra Small</td>\n      <td>用 Element 快速搭建页面</td>\n    </tr>\n    <tr\n    :style=\"{ fontSize: font_size_small }\"\n    >\n      <td>正文（小）</td>\n      <td class=\"color-dark-light\">{{font_size_small}} Small</td>\n      <td>用 Element 快速搭建页面</td>\n    </tr>\n    <tr\n    :style=\"{ fontSize: font_size_base }\"\n    >\n      <td>正文</td>\n      <td class=\"color-dark-light\">{{font_size_base}} Base</td>\n      <td>用 Element 快速搭建页面</td>\n    </tr>\n    <tr\n    :style=\"{ fontSize: font_size_medium }\"\n    >\n      <td>小标题</td>\n      <td class=\"color-dark-light\">{{font_size_medium}} Medium</td>\n      <td>用 Element 快速搭建页面</td>\n    </tr>\n    <tr\n    :style=\"{ fontSize: font_size_large }\"\n    >\n      <td>标题</td>\n      <td class=\"color-dark-light\">{{font_size_large}} large</td>\n      <td>用 Element 快速搭建页面</td>\n    </tr>\n    <tr\n    :style=\"{ fontSize: font_size_extra_large }\"\n    >\n      <td>主标题</td>\n      <td class=\"color-dark-light\">{{font_size_extra_large}} Extra large</td>\n      <td>用 Element 快速搭建页面</td>\n    </tr>\n  </tbody>\n</table>\n\n### 行高\n\n<div>\n<img class=\"lineH-left\" src=\"~examples/assets/images/typography.png\" />\n<ul class=\"lineH-right\">\n<li>line-height:1 <span>无行高</span></li>\n<li>line-height:1.3 <span>紧凑</span></li>\n<li>line-height:1.5 <span>常规</span></li>\n<li>line-height:1.7 <span>宽松</span></li>\n</ul>\n</div>\n\n### Font-family 代码\n\n```css\nfont-family: \"Helvetica Neue\",Helvetica,\"PingFang SC\",\"Hiragino Sans GB\",\"Microsoft YaHei\",\"微软雅黑\",Arial,sans-serif;\n```\n"
  },
  {
    "path": "examples/docs/zh-CN/upload.md",
    "content": "## Upload 上传\n\n通过点击或者拖拽上传文件\n\n### 点击上传\n\n:::demo 通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置`limit`和`on-exceed`来限制上传文件的个数和定义超出限制时的行为。可通过设置`before-remove`来阻止文件移除操作。\n```html\n<el-upload\n  class=\"upload-demo\"\n  action=\"https://jsonplaceholder.typicode.com/posts/\"\n  :on-preview=\"handlePreview\"\n  :on-remove=\"handleRemove\"\n  :before-remove=\"beforeRemove\"\n  multiple\n  :limit=\"3\"\n  :on-exceed=\"handleExceed\"\n  :file-list=\"fileList\">\n  <el-button size=\"small\" type=\"primary\">点击上传</el-button>\n  <div slot=\"tip\" class=\"el-upload__tip\">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      },\n      handleExceed(files, fileList) {\n        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);\n      },\n      beforeRemove(file, fileList) {\n        return this.$confirm(`确定移除 ${ file.name }？`);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 用户头像上传\n\n使用 `before-upload` 限制用户上传的图片格式和大小。\n\n:::demo\n```html\n<el-upload\n  class=\"avatar-uploader\"\n  action=\"https://jsonplaceholder.typicode.com/posts/\"\n  :show-file-list=\"false\"\n  :on-success=\"handleAvatarSuccess\"\n  :before-upload=\"beforeAvatarUpload\">\n  <img v-if=\"imageUrl\" :src=\"imageUrl\" class=\"avatar\">\n  <i v-else class=\"el-icon-plus avatar-uploader-icon\"></i>\n</el-upload>\n\n<style>\n  .avatar-uploader .el-upload {\n    border: 1px dashed #d9d9d9;\n    border-radius: 6px;\n    cursor: pointer;\n    position: relative;\n    overflow: hidden;\n  }\n  .avatar-uploader .el-upload:hover {\n    border-color: #409EFF;\n  }\n  .avatar-uploader-icon {\n    font-size: 28px;\n    color: #8c939d;\n    width: 178px;\n    height: 178px;\n    line-height: 178px;\n    text-align: center;\n  }\n  .avatar {\n    width: 178px;\n    height: 178px;\n    display: block;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        imageUrl: ''\n      };\n    },\n    methods: {\n      handleAvatarSuccess(res, file) {\n        this.imageUrl = URL.createObjectURL(file.raw);\n      },\n      beforeAvatarUpload(file) {\n        const isJPG = file.type === 'image/jpeg';\n        const isLt2M = file.size / 1024 / 1024 < 2;\n\n        if (!isJPG) {\n          this.$message.error('上传头像图片只能是 JPG 格式!');\n        }\n        if (!isLt2M) {\n          this.$message.error('上传头像图片大小不能超过 2MB!');\n        }\n        return isJPG && isLt2M;\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 照片墙\n\n使用 `list-type` 属性来设置文件列表的样式。\n\n:::demo\n```html\n<el-upload\n  action=\"https://jsonplaceholder.typicode.com/posts/\"\n  list-type=\"picture-card\"\n  :on-preview=\"handlePictureCardPreview\"\n  :on-remove=\"handleRemove\">\n  <i class=\"el-icon-plus\"></i>\n</el-upload>\n<el-dialog :visible.sync=\"dialogVisible\">\n  <img width=\"100%\" :src=\"dialogImageUrl\" alt=\"\">\n</el-dialog>\n<script>\n  export default {\n    data() {\n      return {\n        dialogImageUrl: '',\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePictureCardPreview(file) {\n        this.dialogImageUrl = file.url;\n        this.dialogVisible = true;\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 文件缩略图\n\n使用 `scoped-slot` 去设置缩略图模版。\n\n:::demo\n```html\n<el-upload\n  action=\"#\"\n  list-type=\"picture-card\"\n  :auto-upload=\"false\">\n    <i slot=\"default\" class=\"el-icon-plus\"></i>\n    <div slot=\"file\" slot-scope=\"{file}\">\n      <img\n        class=\"el-upload-list__item-thumbnail\"\n        :src=\"file.url\" alt=\"\"\n      >\n      <span class=\"el-upload-list__item-actions\">\n        <span\n          class=\"el-upload-list__item-preview\"\n          @click=\"handlePictureCardPreview(file)\"\n        >\n          <i class=\"el-icon-zoom-in\"></i>\n        </span>\n        <span\n          v-if=\"!disabled\"\n          class=\"el-upload-list__item-delete\"\n          @click=\"handleDownload(file)\"\n        >\n          <i class=\"el-icon-download\"></i>\n        </span>\n        <span\n          v-if=\"!disabled\"\n          class=\"el-upload-list__item-delete\"\n          @click=\"handleRemove(file)\"\n        >\n          <i class=\"el-icon-delete\"></i>\n        </span>\n      </span>\n    </div>\n</el-upload>\n<el-dialog :visible.sync=\"dialogVisible\">\n  <img width=\"100%\" :src=\"dialogImageUrl\" alt=\"\">\n</el-dialog>\n<script>\n  export default {\n    data() {\n      return {\n        dialogImageUrl: '',\n        dialogVisible: false,\n        disabled: false\n      };\n    },\n    methods: {\n      handleRemove(file) {\n        console.log(file);\n      },\n      handlePictureCardPreview(file) {\n        this.dialogImageUrl = file.url;\n        this.dialogVisible = true;\n      },\n      handleDownload(file) {\n        console.log(file);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 图片列表缩略图\n\n:::demo\n```html\n<el-upload\n  class=\"upload-demo\"\n  action=\"https://jsonplaceholder.typicode.com/posts/\"\n  :on-preview=\"handlePreview\"\n  :on-remove=\"handleRemove\"\n  :file-list=\"fileList\"\n  list-type=\"picture\">\n  <el-button size=\"small\" type=\"primary\">点击上传</el-button>\n  <div slot=\"tip\" class=\"el-upload__tip\">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 上传文件列表控制\n\n通过 `on-change` 钩子函数来对列表进行控制\n\n:::demo\n```html\n<el-upload\n  class=\"upload-demo\"\n  action=\"https://jsonplaceholder.typicode.com/posts/\"\n  :on-change=\"handleChange\"\n  :file-list=\"fileList\">\n  <el-button size=\"small\" type=\"primary\">点击上传</el-button>\n  <div slot=\"tip\" class=\"el-upload__tip\">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{\n          name: 'food.jpeg',\n          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'\n        }, {\n          name: 'food2.jpeg',\n          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'\n        }]\n      };\n    },\n    methods: {\n      handleChange(file, fileList) {\n        this.fileList = fileList.slice(-3);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### 拖拽上传\n\n:::demo\n```html\n<el-upload\n  class=\"upload-demo\"\n  drag\n  action=\"https://jsonplaceholder.typicode.com/posts/\"\n  multiple>\n  <i class=\"el-icon-upload\"></i>\n  <div class=\"el-upload__text\">将文件拖到此处，或<em>点击上传</em></div>\n  <div class=\"el-upload__tip\" slot=\"tip\">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n```\n:::\n\n### 手动上传\n\n:::demo\n```html\n<el-upload\n  class=\"upload-demo\"\n  ref=\"upload\"\n  action=\"https://jsonplaceholder.typicode.com/posts/\"\n  :on-preview=\"handlePreview\"\n  :on-remove=\"handleRemove\"\n  :file-list=\"fileList\"\n  :auto-upload=\"false\">\n  <el-button slot=\"trigger\" size=\"small\" type=\"primary\">选取文件</el-button>\n  <el-button style=\"margin-left: 10px;\" size=\"small\" type=\"success\" @click=\"submitUpload\">上传到服务器</el-button>\n  <div slot=\"tip\" class=\"el-upload__tip\">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]\n      };\n    },\n    methods: {\n      submitUpload() {\n        this.$refs.upload.submit();\n      },\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      }\n    }\n  }\n</script>\n```\n:::\n\n### Attribute\n| 参数      | 说明          | 类型      | 可选值                           | 默认值  |\n|---------- |-------------- |---------- |--------------------------------  |-------- |\n| action | 必选参数，上传的地址 | string | — | — |\n| headers | 设置上传的请求头部 | object | — | — |\n| multiple | 是否支持多选文件 | boolean | — | — |\n| data | 上传时附带的额外参数 | object | — | — |\n| name | 上传的文件字段名 | string | — | file |\n| with-credentials | 支持发送 cookie 凭证信息 | boolean | — | false |\n| show-file-list | 是否显示已上传文件列表 | boolean | — | true |\n| drag | 是否启用拖拽上传 | boolean | — | false |\n| accept | 接受上传的[文件类型](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept)（thumbnail-mode 模式下此参数无效）| string | — | — |\n| on-preview | 点击文件列表中已上传的文件时的钩子 | function(file) | — | — |\n| on-remove | 文件列表移除文件时的钩子 | function(file, fileList) | — | — |\n| on-success | 文件上传成功时的钩子 | function(response, file, fileList) | — | — |\n| on-error | 文件上传失败时的钩子 | function(err, file, fileList) | — | — |\n| on-progress | 文件上传时的钩子 | function(event, file, fileList) | — | — |\n| on-change | 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 | function(file, fileList) | — | — |\n| before-upload | 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 | function(file) | — | — |\n| before-remove | 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。| function(file, fileList) | — | — |\n| list-type | 文件列表的类型 | string | text/picture/picture-card | text |\n| auto-upload | 是否在选取文件后立即进行上传 | boolean | — | true |\n| file-list | 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array | — | [] |\n| http-request | 覆盖默认的上传行为，可以自定义上传的实现 | function | — | — |\n| disabled | 是否禁用 | boolean | — | false |\n| limit | 最大允许上传个数 |  number | — | — |\n| on-exceed | 文件超出个数限制时的钩子 | function(files, fileList) | — | - |\n\n### Slot\n| name | 说明 |\n|------|--------|\n| trigger | 触发文件选择框的内容 |\n| tip | 提示说明文字 |\n\n### Methods\n| 方法名      | 说明          | 参数 |\n|----------- |-------------- | -- |\n| clearFiles | 清空已上传的文件列表（该方法不支持在 before-upload 中调用） | — |\n| abort      | 取消上传请求    | （ file: fileList 中的 file 对象 ） |\n| submit     | 手动上传文件列表 |  —                                |\n"
  },
  {
    "path": "examples/dom/class.js",
    "content": "export const hasClass = function(obj, cls) {\n  return obj.className.match(new RegExp('(\\\\s|^)' + cls + '(\\\\s|$)'));\n};\n\nexport const addClass = function(obj, cls) {\n  if (!hasClass(obj, cls)) obj.className += ' ' + cls;\n};\n\nexport const removeClass = function(obj, cls) {\n  if (hasClass(obj, cls)) {\n    const reg = new RegExp('(\\\\s|^)' + cls + '(\\\\s|$)');\n    obj.className = obj.className.replace(reg, ' ');\n  }\n};\n\nexport const toggleClass = function(obj, cls) {\n  if (hasClass(obj, cls)) {\n    removeClass(obj, cls);\n  } else {\n    addClass(obj, cls);\n  }\n};\n"
  },
  {
    "path": "examples/entry.js",
    "content": "import Vue from 'vue';\nimport entry from './app';\nimport VueRouter from 'vue-router';\nimport Element from 'main/index.js';\nimport hljs from 'highlight.js';\nimport routes from './route.config';\nimport demoBlock from './components/demo-block';\nimport MainFooter from './components/footer';\nimport MainHeader from './components/header';\nimport SideNav from './components/side-nav';\nimport FooterNav from './components/footer-nav';\nimport title from './i18n/title';\n\nimport 'packages/theme-chalk/src/index.scss';\nimport './demo-styles/index.scss';\nimport './assets/styles/common.css';\nimport './assets/styles/fonts/style.css';\nimport icon from './icon.json';\n\nVue.use(Element);\nVue.use(VueRouter);\nVue.component('demo-block', demoBlock);\nVue.component('main-footer', MainFooter);\nVue.component('main-header', MainHeader);\nVue.component('side-nav', SideNav);\nVue.component('footer-nav', FooterNav);\n\nconst globalEle = new Vue({\n  data: { $isEle: false } // 是否 ele 用户\n});\n\nVue.mixin({\n  computed: {\n    $isEle: {\n      get: () => (globalEle.$data.$isEle),\n      set: (data) => {globalEle.$data.$isEle = data;}\n    }\n  }\n});\n\nVue.prototype.$icon = icon; // Icon 列表页用\n\nconst router = new VueRouter({\n  mode: 'hash',\n  base: __dirname,\n  routes\n});\n\nrouter.afterEach(route => {\n  // https://github.com/highlightjs/highlight.js/issues/909#issuecomment-131686186\n  Vue.nextTick(() => {\n    const blocks = document.querySelectorAll('pre code:not(.hljs)');\n    Array.prototype.forEach.call(blocks, hljs.highlightBlock);\n  });\n  const data = title[route.meta.lang];\n  for (let val in data) {\n    if (new RegExp('^' + val, 'g').test(route.name)) {\n      document.title = data[val];\n      return;\n    }\n  }\n  document.title = 'Element';\n  ga('send', 'event', 'PageView', route.name);\n});\n\nnew Vue({ // eslint-disable-line\n  ...entry,\n  router\n}).$mount('#app');\n"
  },
  {
    "path": "examples/extension/.gitignore",
    "content": "dist"
  },
  {
    "path": "examples/extension/src/app.js",
    "content": "import Vue from 'vue';\nimport App from './editor/index';\nimport Element from 'main/index.js';\nimport 'packages/theme-chalk/src/index.scss';\n\nexport default () => {\n  Vue.use(Element, { zIndex: 100000 });\n  const root = document.createElement('div');\n  document.body.appendChild(root);\n\n  window.ga = function() {\n    console.log(arguments);\n  };\n\n  new Vue({ // eslint-disable-line\n    render: h => h(App)\n  }).$mount(root);\n};\n"
  },
  {
    "path": "examples/extension/src/background.js",
    "content": "chrome.browserAction.onClicked.addListener(tab => {\n  chrome.tabs.executeScript(tab.id, {\n    file: 'entry.js'\n  });\n})\n;\n"
  },
  {
    "path": "examples/extension/src/editor/editor.vue",
    "content": "<template>\n  <div class=\"ext-panel\" :class=\"{moving : moving}\" :style=\"{top: `${top}px`, left: `${left}px`}\" ref=\"editor\" >\n    <img class=\"entrance touch-icon\" src=\"./icon-entrance.png\" v-show=\"!showSidebar\" @click=\"toggleSidebar\" />\n    <img class=\"close touch-icon\" src=\"./icon-close.png\" v-show=\"showSidebar\" @click=\"toggleSidebar\" />\n    <div class=\"editor\" :style=\"{height: `${height}px`}\" v-show=\"showSidebar\">\n      <el-tabs v-model=\"activeTab\" @tab-click=\"onTabClick\">\n        <el-tab-pane label=\"Config\" name=\"config\">\n          <theme-configurator\n            :themeConfig=\"themeConfig\"\n            :previewConfig=\"previewConfig\"\n            :onUserConfigUpdate=\"onUserConfigUpdate\"\n            from=\"extension\"\n          ></theme-configurator>\n        </el-tab-pane>\n        <el-tab-pane label=\"Gallery\" name=\"gallery\">\n          <gallery \n            ref='gallery'\n            :height=\"height\"\n            :width=\"width - 7\"\n            @action=\"onGalleryAction\"\n          />\n        </el-tab-pane>\n      </el-tabs>\n    </div>\n  </div>\n</template>\n\n<script>\nimport ThemeConfigurator from '../../../components/theme-configurator';\nimport themeLoader from '../../../components/theme/loader';\nimport gallery from './gallery';\nimport { loadUserThemeFromLocal, saveUserThemeToLocal } from './utils';\nimport bus from '../../../bus.js';\nimport {\n  ACTION_APPLY_THEME\n} from '../../../components/theme/constant.js';\n\nlet initX;\nlet initY;\nlet leftX = 0;\nlet topY = 25;\nexport default {\n  mixins: [themeLoader],\n  components: {\n    ThemeConfigurator,\n    gallery\n  },\n  data() {\n    return {\n      showSidebar: true,\n      previewConfig: {},\n      themeConfig: {},\n      top: topY,\n      left: leftX,\n      height: window.innerHeight - 30 * 2,\n      width: 0,\n      moving: false,\n      activeTab: 'config',\n      themeName: '',\n      userTheme: []\n    };\n  },\n  mounted() {\n    const editor = this.$refs.editor;\n    this.width = editor.offsetWidth;\n    leftX = window.innerWidth - 20 - this.width;\n    this.left = leftX;\n    editor.addEventListener('mousedown', e => {\n      initX = e.clientX;\n      initY = e.clientY;\n      leftX = this.left;\n      topY = this.top;\n      document.addEventListener('mousemove', this.moveFunc);\n    });\n    document.addEventListener('mouseup', e => {\n      document.removeEventListener('mousemove', this.moveFunc);\n      setTimeout(() => {this.moving = false;}, 0);\n    });\n    // chrome.storage.local.remove('ELEMENT_THEME_USER_CONFIG');\n    loadUserThemeFromLocal()\n      .then((result) => {\n        if (result) {\n          this.activeTab = 'gallery';\n          this.userTheme = result;\n        }\n      });\n  },\n  methods: {\n    checkLocalThemeConfig() {}, // disable mixin auto loading\n    toggleSidebar() {\n      if (this.moving) return;\n      this.showSidebar = !this.showSidebar;\n      if (!this.showSidebar) {\n        const windowWidth = window.innerWidth;\n        if (this.left + this.width * 0.5 < windowWidth * 0.5) {\n          this.left = 0;\n        } else {\n          this.left = windowWidth - 50;\n        }\n      } else {\n        this.moveEditor(this.left, this.top);\n      }\n    },\n    moveFunc(e) {\n      e.preventDefault();\n      const deltaX = initX - e.clientX;\n      const deltaY = initY - e.clientY;\n      if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {\n        this.moving = true;\n      }\n      this.moveEditor(leftX - deltaX, topY - deltaY);\n    },\n    moveEditor(x, y) {\n      const showSidebar = this.showSidebar;\n      let nextTop = y;\n      if (nextTop < 0) nextTop = 0;\n      const maxTop = window.innerHeight - (showSidebar ? (this.height + 5) : 50);\n      if (nextTop > maxTop) nextTop = maxTop;\n      this.top = nextTop;\n      let nextLeft = x;\n      if (nextLeft < 0) nextLeft = 0;\n      const maxLeft = window.innerWidth - (showSidebar ? (this.width + 5) : 50);\n      if (nextLeft > maxLeft) nextLeft = maxLeft;\n      this.left = nextLeft;\n    },\n    onGalleryAction(key, value) {\n      switch (key) {\n        case 'edit':\n          this.themeName = value.name;\n          this.themeConfig = JSON.parse(value.theme);\n          bus.$emit(ACTION_APPLY_THEME, this.themeConfig);\n          this.activeTab = 'config';\n          break;\n        default:\n          return;\n      }\n    },\n    onTabClick(e) {\n      if (e && e.name === 'gallery') {\n        this.$refs.gallery.init();\n      }\n    },\n    onUserConfigUpdate(userConfig) {\n      if (this.themeName) {\n        this.userTheme.forEach((config) => {\n          if (config.name === this.themeName) {\n            config.update = Date.now();\n            config.theme = JSON.stringify(userConfig);\n          }\n        });\n      } else {\n        this.themeName = `Theme-${Date.now()}`;\n        this.userTheme.push({\n          update: Date.now(),\n          name: this.themeName,\n          theme: JSON.stringify(userConfig)\n        });\n      }\n      saveUserThemeToLocal(this.userTheme);\n    }\n  }\n};\n</script>\n<style scoped>\n.ext-panel {\n  position: fixed;\n  background: transparent;\n  user-select: none;\n  z-index: 100000;\n}\n.ext-panel.moving{\n  cursor: move;\n}\n.ext-panel.moving .touch-icon{\n  cursor: move;\n}\n.ext-panel .touch-icon{\n  cursor: pointer;\n}\n.ext-panel .close {\n  position: absolute;\n  right: 0;\n  top: 0;\n  height: 20px;\n  width: 20px;\n  z-index: 100001;\n}\n.ext-panel .entrance {\n  height: 50px;\n  width: 50px;\n}\n.ext-panel .editor {\n  overflow: hidden;\n  background: #f5f7fa;\n  border: 1px solid #ebeef5;\n  border-radius: 5px;\n  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n  margin: 5px 5px 0 0;\n  min-width: 261px;\n}\n</style>\n<style>\n.ext-panel  .editor .el-tabs__content, .ext-panel  .editor .el-tabs--top, .ext-panel  .editor .el-tab-pane {\n  height: 100%;\n}\n.ext-panel .el-tabs__nav-scroll >div {\n  transform: translateX(60px)!important;\n}\n.ext-panel .editor-main {\n  padding: 0 18px 70px;\n}\n</style>"
  },
  {
    "path": "examples/extension/src/editor/gallery.vue",
    "content": "<template>\n  <div :style=\"{ \n    height: `${height}px`,\n      width: `${width}px`\n      }\"\n    class=\"main\"\n    >\n    <ul\n      class=\"theme-card-list\"\n    >\n      <li class=\"theme-card\" v-for=\"item in userTheme\" :key=\"item.name\">\n        <theme-card type=\"user\" :config=\"item\" @action=\"onAction\" from=\"extension\"></theme-card>\n      </li>\n      <li class=\"theme-card\">\n        <theme-card type=\"upload\" :config=\"{name: 'upload'}\" @action=\"onAction\"></theme-card>\n      </li>\n    </ul>\n    <el-dialog :visible.sync=\"copyDialogVisible\" :modal-append-to-body=\"false\">\n      <el-form :model=\"copyForm\" ref=\"copyForm\" :rules=\"copyFormRule\">\n        <el-form-item label=\"主题名称\" prop=\"name\">\n          <el-input v-model=\"copyForm.name\"></el-input>\n        </el-form-item>\n      </el-form>\n      <div slot=\"footer\" class=\"dialog-footer\">\n        <el-button @click=\"closeCopyForm\">取消</el-button>\n        <el-button type=\"primary\" @click=\"copyToUser\">确认</el-button>\n      </div>\n    </el-dialog>\n  </div>\n</template>\n\n<style scoped>\nul, li {\n  padding: 0;\n  margin: 0;\n}\n.main {\n  overflow: auto;\n}\n.theme-card-list {\n  padding-bottom: 50px;\n  width: 90%;\n  margin: 0 auto;\n}\n.theme-card {\n  display: inline-block;\n  height: 140px;\n  height: 15vw;\n  width: 100%;\n  max-height: 230px;\n  flex: 0 0 24%;\n  cursor: default;\n  vertical-align: bottom;\n}\n</style>\n<style>\n.theme-card .theme-card-item {\n  margin-top: 0;\n}\n.theme-card .theme-card-item.is-upload {\n  height: 80%\n}\n</style>\n\n<script>\nimport ThemeCard from '../../../components/theme/theme-card.vue';\nimport { loadUserThemeFromLocal, saveUserThemeToLocal } from './utils';\n\nexport default {\n  props: {\n    height: Number,\n    width: Number\n  },\n  data() {\n    return {\n      userTheme: [],\n      copyDialogVisible: false,\n      copyForm: {},\n      copyFormRule: {\n        name: [{\n          validator: this.validateCopyName,\n          trigger: 'blur'\n        }]\n      }\n    };\n  },\n  components: {\n    ThemeCard\n  },\n  mounted() {\n    this.init();\n  },\n  methods: {\n    init() {\n      loadUserThemeFromLocal().then(result => {\n        if (!result) return;\n        this.userTheme = result;\n      });\n    },\n    onAction(key, value) {\n      switch (key) {\n        case 'copy':\n          this.openCopyForm(value.theme);\n          break;\n        case 'upload':\n          this.openCopyForm(value);\n          break;\n        case 'delete':\n          this.$confirm('确定要删除这个主题?', '提示', {\n            confirmButtonText: '确认',\n            cancelButtonText: '取消',\n            type: 'warning'\n          }).then(() => {\n            this.deleteUserThemeByName(value.name);\n          }).catch(() => {});\n          break;\n        case 'rename':\n          this.openRenameForm(value.name);\n          break;\n        default:\n          this.$emit('action', key, value);\n          return;\n      }\n    },\n    openCopyForm(theme) {\n      this.copyForm.theme = theme;\n      this.copyDialogVisible = true;\n    },\n    openRenameForm(name) {\n      this.copyForm.oldname = name;\n      this.copyDialogVisible = true;\n    },\n    closeCopyForm() {\n      this.copyDialogVisible = false;\n      this.$nextTick(() => {\n        this.copyForm = {};\n      });\n    },\n    validateCopyName(rule, value, callback) {\n      if (!value) {\n        callback(new Error('主题名称是必填项'));\n      } else if (this.filterUserThemeByName(value).length > 0) {\n        callback(new Error('主题名称重复'));\n      } else {\n        callback();\n      }\n    },\n    copyToUser() {\n      this.$refs.copyForm.validate((valid) => {\n        if (valid) {\n          const { theme, name, oldname } = this.copyForm;\n          if (theme) {\n            // copy\n            this.userTheme.push({\n              update: Date.now(),\n              name,\n              theme\n            });\n          } else {\n            // rename\n            this.userTheme.forEach((config) => {\n              if (config.name === oldname) {\n                config.update = Date.now();\n                config.name = name;\n              }\n            });\n          }\n          this.saveToLocal();\n          this.closeCopyForm();\n        }\n      });\n    },\n    filterUserThemeByName(name, include = true) {\n      return this.userTheme.filter((theme) => (include ? theme.name === name : theme.name !== name));\n    },\n    saveToLocal() {\n      saveUserThemeToLocal(this.userTheme);\n    },\n    deleteUserThemeByName(name) {\n      this.userTheme = this.filterUserThemeByName(name, false);\n      this.saveToLocal();\n    }\n  }\n};\n</script>"
  },
  {
    "path": "examples/extension/src/editor/index.vue",
    "content": "<template>\n  <editor />\n</template>\n\n<script>\nimport editor from './editor';\n\nexport default {\n  components: {\n    editor\n  }\n};\n</script>\n"
  },
  {
    "path": "examples/extension/src/editor/utils.js",
    "content": "const ELEMENT_THEME_USER_CONFIG = 'ELEMENT_THEME_USER_CONFIG';\nexport const loadFromLocal = (key) => {\n  return new window.Promise((resolve) => {\n    chrome.storage.local.get([key], (result) => {\n      resolve(result[key]);\n    });\n  });\n};\nexport const saveToLocal = (key, value) => {\n  chrome.storage.local.set({[key]: value});\n};\n\nexport const loadUserThemeFromLocal = () => {\n  return loadFromLocal(ELEMENT_THEME_USER_CONFIG);\n};\nexport const saveUserThemeToLocal = (value) => {\n  saveToLocal(ELEMENT_THEME_USER_CONFIG, value);\n};\n"
  },
  {
    "path": "examples/extension/src/entry.js",
    "content": "import init from './app';\n\nif (!window.ElementThemeRollerInit) {\n  window.ElementThemeRollerInit = true;\n  init();\n}\n\n"
  },
  {
    "path": "examples/extension/src/manifest.json",
    "content": "{\n  \"name\": \"Element Theme Roller\",\n  \"version\": \"0.0.9\",\n  \"description\": \"Customize all Design Tokens of Element UI and preview in real-time\",\n  \"web_accessible_resources\": [\"entry.js\"],\n  \"background\": {\n    \"scripts\": [\n      \"background.js\"\n    ],\n    \"persistent\": true\n  },\n  \"icons\": {\n    \"128\": \"icon.png\"\n  },\n  \"browser_action\": {\n    \"default_icon\": \"icon.png\",\n    \"default_title\": \"Element Theme Roller\"\n  },\n  \"content_security_policy\": \"script-src 'self' 'unsafe-eval'; object-src 'self'\",\n  \"manifest_version\": 2,\n  \"permissions\": [\n    \"activeTab\",\n    \"storage\",\n    \"https://*.ele.me/\",\n    \"https://*.elenet.me/\"\n  ]\n}"
  },
  {
    "path": "examples/i18n/component.json",
    "content": "[\n  {\n    \"lang\": \"zh-CN\",\n    \"demo-block\": {\n      \"hide-text\": \"隐藏代码\",\n      \"show-text\": \"显示代码\",\n      \"button-text\": \"在线运行\",\n      \"tooltip-text\": \"前往 codepen.io 运行此示例\"\n    },\n    \"footer\": {\n      \"links\": \"链接\",\n      \"repo\": \"代码仓库\",\n      \"community\": \"社区\",\n      \"changelog\": \"更新日志\",\n      \"theme\": \"在线主题生成器\",\n      \"faq\": \"常见问题\",\n      \"gitter\": \"在线讨论\",\n      \"starter\": \"脚手架\",\n      \"feedback\": \"反馈建议\",\n      \"contribution\": \"贡献指南\",\n      \"eleme\": \"饿了么\",\n      \"elemeTech\": \"饿了么技术\",\n      \"elemeDesign\": \"饿了么设计\"\n    },\n    \"header\": {\n      \"guide\": \"指南\",\n      \"components\": \"组件\",\n      \"theme\": \"主题\",\n      \"resource\": \"资源\"\n    },\n    \"nav\": {\n      \"dropdown\": \"版本：\"\n    }\n  },\n  {\n    \"lang\": \"en-US\",\n    \"demo-block\": {\n      \"hide-text\": \"Hide\",\n      \"show-text\": \"Expand\",\n      \"button-text\": \"Try it!\",\n      \"tooltip-text\": \"Run this demo on codepen.io\"\n    },\n    \"footer\": {\n      \"links\": \"Links\",\n      \"repo\": \"GitHub\",\n      \"community\": \"Community\",\n      \"changelog\": \"Changelog\",\n      \"theme\": \"Online Theme Roller\",\n      \"faq\": \"FAQ\",\n      \"gitter\": \"Gitter\",\n      \"starter\": \"Starter kit\",\n      \"feedback\": \"Feedback\",\n      \"contribution\": \"Contribution\",\n      \"eleme\": \"Eleme\",\n      \"elemeTech\": \"Eleme Tech\",\n      \"elemeDesign\": \"Eleme Design\"\n    },\n    \"header\": {\n      \"guide\": \"Guide\",\n      \"components\": \"Component\",\n      \"theme\": \"Theme\",\n      \"resource\": \"Resource\"\n    },\n    \"nav\": {\n      \"dropdown\": \"Version: \"\n    }\n  },\n  {\n    \"lang\": \"es\",\n    \"demo-block\": {\n      \"hide-text\": \"Ocultar\",\n      \"show-text\": \"Mostrar\",\n      \"button-text\": \"Probar\",\n      \"tooltip-text\": \"Prueba este ejemplo en codepen.io\"\n    },\n    \"footer\": {\n      \"links\": \"Enlaces\",\n      \"repo\": \"GitHub\",\n      \"community\": \"Comunidad\",\n      \"changelog\": \"Lista de cambios\",\n      \"theme\": \"Online Theme Roller\",\n      \"faq\": \"FAQ\",\n      \"gitter\": \"Gitter\",\n      \"starter\": \"Kit de inicio\",\n      \"feedback\": \"Comentarios\",\n      \"contribution\": \"Contribución\",\n      \"eleme\": \"Eleme\",\n      \"elemeTech\": \"Eleme Tecnología\",\n      \"elemeDesign\": \"Eleme Diseño\"\n    },\n    \"header\": {\n      \"guide\": \"Guía\",\n      \"components\": \"Componentes\",\n      \"theme\": \"Theme\",\n      \"resource\": \"Recursos\"\n    },\n    \"nav\": {\n      \"dropdown\": \"Versión: \"\n    }\n  },\n  {\n    \"lang\": \"fr-FR\",\n    \"demo-block\": {\n      \"hide-text\": \"Réduire\",\n      \"show-text\": \"Agrandir\",\n      \"button-text\": \"Essayez!\",\n      \"tooltip-text\": \"Essayer cette démo sur codepen.io\"\n    },\n    \"footer\": {\n      \"links\": \"Liens\",\n      \"repo\": \"GitHub\",\n      \"community\": \"Communauté\",\n      \"changelog\": \"Changelog\",\n      \"theme\": \"Online Theme Roller\",\n      \"faq\": \"FAQ\",\n      \"gitter\": \"Gitter\",\n      \"starter\": \"Kit de démarrage\",\n      \"feedback\": \"Commentaires\",\n      \"contribution\": \"Contribution\",\n      \"eleme\": \"Eleme\",\n      \"elemeTech\": \"Eleme Technologie\",\n      \"elemeDesign\": \"Eleme Conception\"\n    },\n    \"header\": {\n      \"guide\": \"Guide\",\n      \"components\": \"Composants\",\n      \"theme\": \"Theme\",\n      \"resource\": \"Ressources\"\n    },\n    \"nav\": {\n      \"dropdown\": \"Version: \"\n    }\n  }\n]\n"
  },
  {
    "path": "examples/i18n/page.json",
    "content": "[\n  {\n    \"lang\": \"zh-CN\",\n    \"pages\": {\n      \"index\": {\n        \"1\": \"网站快速成型工具\",\n        \"2\": \"Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库\",\n        \"3\": \"指南\",\n        \"4\": \"了解设计指南，帮助产品设计人员搭建逻辑清晰、结构合理且高效易用的产品。\",\n        \"5\": \"查看详情\",\n        \"6\": \"组件\",\n        \"7\": \"使用组件 Demo 快速体验交互细节；使用前端框架封装的代码帮助工程师快速开发。\",\n        \"8\": \"资源\",\n        \"9\": \"下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。\",\n        \"10\": \"主题\",\n        \"11\": \"在线主题编辑器，可视化定制和管理站点主题、组件样式\",\n        \"12\": \"主题定制功能上线\",\n        \"13\": \"点击开始编辑\",\n        \"14\": \"尝试您的新主题\",\n        \"lang\": \"zh-CN\",\n        \"titleSize\": \"34\",\n        \"paraSize\": \"18\"\n      },\n      \"component\": {},\n      \"theme\": {\n        \"1\": \"官方主题\",\n        \"2\": \"我的主题\",\n        \"3\": \"主题名称\"\n      },\n      \"theme-preview\": {\n        \"1\": \"返回\"\n      },\n      \"theme-nav\": {},\n      \"changelog\": {\n        \"1\": \"更新日志\",\n        \"2\": \"zh-CN\"\n      },\n      \"design\": {\n        \"1\": \"设计原则\",\n        \"2\": \"一致\",\n        \"3\": \"Consistency\",\n        \"4\": \"反馈\",\n        \"5\": \"Feedback\",\n        \"6\": \"效率\",\n        \"7\": \"Efficiency\",\n        \"8\": \"可控\",\n        \"9\": \"Controllability\",\n        \"10\": \"一致性 Consistency\",\n        \"11\": \"与现实生活一致：\",\n        \"12\": \"与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；\",\n        \"13\": \"在界面中一致：\",\n        \"14\": \"所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。\",\n        \"15\": \"反馈 Feedback\",\n        \"16\": \"控制反馈：\",\n        \"17\": \"通过界面样式和交互动效让用户可以清晰的感知自己的操作；\",\n        \"18\": \"页面反馈：\",\n        \"19\": \"操作后，通过页面元素的变化清晰地展现当前状态。\",\n        \"20\": \"效率 Efficiency\",\n        \"21\": \"简化流程：\",\n        \"22\": \"设计简洁直观的操作流程；\",\n        \"23\": \"清晰明确：\",\n        \"24\": \"语言表达清晰且表意明确，让用户快速理解进而作出决策；\",\n        \"25\": \"帮助用户识别：\",\n        \"26\": \"界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。\",\n        \"27\": \"可控 Controllability\",\n        \"28\": \"用户决策：\",\n        \"29\": \"根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；\",\n        \"30\": \"结果可控：\",\n        \"31\": \"用户可以自由的进行操作，包括撤销、回退和终止当前操作等。\"\n      },\n      \"guide\": {\n        \"1\": \"设计原则\",\n        \"2\": \"导航\"\n      },\n      \"nav\": {\n        \"1\": \"导航\",\n        \"2\": \"导航可以解决用户在访问页面时：在哪里，去哪里，怎样去的问题。一般导航会有「侧栏导航」和「顶部导航」2 种类型。\",\n        \"3\": \"选择合适的导航\",\n        \"4\": \"选择合适的导航可以让用户在产品的使用过程中非常流畅，相反若是不合适就会引起用户操作不适（方向不明确），以下是「侧栏导航」和 「顶部导航」的区别。\",\n        \"5\": \"侧栏导航\",\n        \"6\": \"可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。\",\n        \"7\": \"一级类目\",\n        \"8\": \"适用于结构简单的网站：只有一级页面时，不需要使用面包屑。\",\n        \"9\": \"二级类目\",\n        \"10\": \"侧栏中最多可显示两级导航；当使用二级导航时，我们建议搭配使用面包屑，方便用户定位自己的位置和快速返回。\",\n        \"11\": \"三级类目\",\n        \"12\": \"适用于较复杂的工具型后台，左侧栏为一级导航，中间栏可显示其对应的二级导航，也可放置其他的工具型选项。\",\n        \"13\": \"顶部导航\",\n        \"14\": \"顺应了从上至下的正常浏览顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度。\",\n        \"15\": \"适用于导航较少，页面篇幅较长的网站。\"\n      },\n      \"resource\": {\n        \"1\": \"资源\",\n        \"2\": \"整理中\",\n        \"3\": \"Axure Components\",\n        \"4\": \"通过在 Axure 中导入 Element 组件库，可以在交互设计阶段方便地调用常用的组件\",\n        \"5\": \"下载\",\n        \"6\": \"Sketch Template\",\n        \"7\": \"从 Element Template 快速调用常用组件，在提升设计效率的同时，保证统一的视觉风格\",\n        \"8\": \"组件交互文档\",\n        \"9\": \"进一步查看 Element 交互文档，从一个较为微观的角度详细地了解各个组件的交互细节\",\n        \"paraHeight\": \"1.8\",\n        \"placeholder1\": \"整理中\",\n        \"placeholder2\": \"设计资源正在整理和完善中\"\n      }\n    }\n  },\n  {\n    \"lang\": \"en-US\",\n    \"pages\": {\n      \"index\": {\n        \"1\": \"A Desktop UI Library\",\n        \"2\": \"Element, a Vue 2.0 based component library for developers, designers and product managers\",\n        \"3\": \"Guide\",\n        \"4\": \"Understand the design guidelines, helping designers build product that's logically sound, reasonably structured and easy to use.\",\n        \"5\": \"View Detail\",\n        \"6\": \"Component\",\n        \"7\": \"Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency.\",\n        \"8\": \"Resource\",\n        \"9\": \"Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.\",\n        \"10\": \"Theme\",\n        \"11\": \"Online theme roller, visualize custom and manage site themes and component styles\",\n        \"12\": \"Theme customization is available!\",\n        \"13\": \"Click here\",\n        \"14\": \"Make your own theme\",\n        \"lang\": \"en-US\",\n        \"titleSize\": \"34\",\n        \"paraSize\": \"18\"\n      },\n      \"component\": {},\n      \"theme\": {\n        \"1\": \"Official Theme\",\n        \"2\": \"My Theme\",\n        \"3\": \"Theme name\"\n      },\n      \"theme-preview\": {\n        \"1\": \"Back\"\n      },\n      \"theme-nav\": {},\n      \"changelog\": {\n        \"1\": \"Changelog\",\n        \"2\": \"en-US\"\n      },\n      \"design\": {\n        \"1\": \"Design Disciplines\",\n        \"2\": \"Consistency\",\n        \"3\": \"\",\n        \"4\": \"Feedback\",\n        \"5\": \"\",\n        \"6\": \"Efficiency\",\n        \"7\": \"\",\n        \"8\": \"Controllability\",\n        \"9\": \"\",\n        \"10\": \"Consistency\",\n        \"11\": \"Consistent with real life: \",\n        \"12\": \"in line with the process and logic of real life, and comply with languages and habits that the users are used to.\",\n        \"13\": \"Consistent within interface: \",\n        \"14\": \"all elements should be consistent, such as: design style, icons and texts, position of elements, etc.\",\n        \"15\": \"Feedback\",\n        \"16\": \"Operation feedback: \",\n        \"17\": \"enable the users to clearly perceive their operations by style updates and interactive effects.\",\n        \"18\": \"Visual feedback: \",\n        \"19\": \"reflect current state by updating or rearranging elements of the page.\",\n        \"20\": \"Efficiency\",\n        \"21\": \"Simplify the process: \",\n        \"22\": \"keep operating process simple and intuitive.\",\n        \"23\": \"Definite and clear: \",\n        \"24\": \"enunciate your intentions clearly so that the users can quickly understand and make decisions.\",\n        \"25\": \"Easy to identify: \",\n        \"26\": \"the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.\",\n        \"27\": \"Controllability\",\n        \"28\": \"Decision making: \",\n        \"29\": \"giving advices about operations is acceptable, but do not make decisions for the users.\",\n        \"30\": \"Controlled consequences: \",\n        \"31\": \"users should be granted the freedom to operate, including canceling, aborting or terminating current operation.\"\n      },\n      \"guide\": {\n        \"1\": \"Design Disciplines\",\n        \"2\": \"Navigation\"\n      },\n      \"nav\": {\n        \"1\": \"Navigation\",\n        \"2\": \"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'.\",\n        \"3\": \"Choose the right navigation\",\n        \"4\": \"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\",\n        \"5\": \"Side Navigation\",\n        \"6\": \"Fix 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.\",\n        \"7\": \"Level 1 categories\",\n        \"8\": \"Suitable for simply structured sites with only one level of pages. No breadcrumb is needed.\",\n        \"9\": \"Level 2 categories\",\n        \"10\": \"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.\",\n        \"11\": \"Level 3 categories\",\n        \"12\": \"Suitable for complicated utility websites. The left sidebar holds first level navigation, and the middle column displays second level navigation or other utility options.\",\n        \"13\": \"Top Navigation\",\n        \"14\": \"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.\",\n        \"15\": \"Suitable for sites with few navigations and large chunks.\"\n      },\n      \"resource\": {\n        \"1\": \"Resource\",\n        \"2\": \"Under construction.\",\n        \"3\": \"Axure Components\",\n        \"4\": \"By importing Element UI in Axure, you can easily apply all the components we provide during interaction design.\",\n        \"5\": \"Download\",\n        \"6\": \"Sketch Template\",\n        \"7\": \"Apply components from Element template, so you can improve design efficiency while keeping a unified visual style.\",\n        \"8\": \"Interaction Design Documentation\",\n        \"9\": \"Take a closer look at the interaction design documentation. Learn more details of each component from a microcosmic perspective.\",\n        \"paraHeight\": \"1.6\",\n        \"placeholder1\": \"Under construction\",\n        \"placeholder2\": \"More resources are being developed\"\n      }\n    }\n  },\n  {\n    \"lang\": \"es\",\n    \"pages\": {\n      \"index\": {\n        \"1\": \"Un kit de interfaz de usuario para la web\",\n        \"2\": \"Element, una librería de componentes basada en Vue 2.0 para desarrolladores, diseñadores y jefes de producto\",\n        \"3\": \"Guía\",\n        \"4\": \"Entender los líneamientos de diseño, ayudando a diseñadores a crear productos que sean lógicos, razonablemente estructurados y fáciles de usar.\",\n        \"5\": \"Ver detalle\",\n        \"6\": \"Componentes\",\n        \"7\": \"Experimenta la interacción al pasear con los ejemplos de los componentes. Utiliza el código encapsulado para mejorar la eficiencia en el desarrollo.\",\n        \"8\": \"Recursos\",\n        \"9\": \"Descarga los recursos de diseño relevantes para dar forma a un prototipo o borrador, aumentando la eficiencia del diseño.\",\n        \"10\": \"Theme\",\n        \"11\": \"Online theme roller, visualize custom and manage site themes and component styles\",\n        \"12\": \"Theme customization is available!\",\n        \"13\": \"Click here\",\n        \"14\": \"Make your own theme\",\n        \"lang\": \"es\",\n        \"titleSize\": \"34\",\n        \"paraSize\": \"18\"\n      },\n      \"component\": {},\n      \"theme\": {\n        \"1\": \"Official Theme\",\n        \"2\": \"My Theme\",\n        \"3\": \"Theme name\"\n      },\n      \"theme-preview\": {\n        \"1\": \"Back\"\n      },\n      \"theme-nav\": {},\n      \"changelog\": {\n        \"1\": \"Lista de cambios\",\n        \"2\": \"es\"\n      },\n      \"design\": {\n        \"1\": \"Disciplinas de diseño\",\n        \"2\": \"Consistencia\",\n        \"3\": \"\",\n        \"4\": \"Comentarios\",\n        \"5\": \"\",\n        \"6\": \"Eficiencia\",\n        \"7\": \"\",\n        \"8\": \"Control\",\n        \"9\": \"\",\n        \"10\": \"Consistencia\",\n        \"11\": \"Consistente con la vida real: \",\n        \"12\": \"en línea con el proceso y la vida real, y cumple con los idiomas y hábitos a los que los usuarios están acostumbrados.\",\n        \"13\": \"Consistente dentro de la interfaz: \",\n        \"14\": \"todos los elementos deben ser consistentes, como: estilo de diseño, iconos y texto, posición de los elementos, etc.\",\n        \"15\": \"Comentarios\",\n        \"16\": \"Comentarios sobre la operación: \",\n        \"17\": \"Permite a los usuarios percibir claramente las operaciones mediante actualizaciones de estilo y efectos interactivos.\",\n        \"18\": \"Comentarios visuales: \",\n        \"19\": \"Refleja el estado actual al actualizar o reorganizar los elementos de la página.\",\n        \"20\": \"Eficiencia\",\n        \"21\": \"Simplifica el proceso: \",\n        \"22\": \"Mantiene el proceso operativo simple e intuitivo.\",\n        \"23\": \"Bien definido y claro: \",\n        \"24\": \"Expresa las intenciones claramente para que los usuarios puedan comprender y tomar decisiones rápidamente.\",\n        \"25\": \"Fácil de identificar: \",\n        \"26\": \"La interfaz debe ser sencilla, lo que permitirá a los usuarios a identificar y liberarlos de la memorización y recuerdos.\",\n        \"27\": \"Control\",\n        \"28\": \"Toma de decisiones: \",\n        \"29\": \"Brindar consejos sobres las operaciones es aceptable, pero no tomar desiciones para los usuarios.\",\n        \"30\": \"Consecuencias controladas: \",\n        \"31\": \"Los usuarios deben tener la libertad de operar, incluida la cancelación, el aborto o la terminación de las operaciones actuales.\"\n      },\n      \"guide\": {\n        \"1\": \"Disciplinas de diseño\",\n        \"2\": \"Navegación\"\n      },\n      \"nav\": {\n        \"1\": \"Navegación\",\n        \"2\": \"La navegación se centra en resolver los problemas de los usuarios sobre donde ir y como llegar ahí. En general, se puede categorizar en 'navegación de barra lateral' y 'navegación superior'.\",\n        \"3\": \"Elige la navegación correcta\",\n        \"4\": \"Una navegación apropiada provee a los usuarios una mejor experiencia, mientras que una inapropiada genera confusión. Esta es la diferencia entre la navegación de la barra lateral y la navegación superior.\",\n        \"5\": \"Navegación lateral\",\n        \"6\": \"Fija la navegación del lado izquierdo, esto permitirá una mejor visibilidad, lo que facilitará el cambio de pagina. En este caso, el área superior de la pagina contiene herramientas comúnmente utilizadas, por ejemplo, barra de búsqueda, botón de ayuda, botón de aviso, etc. Adecuado para sitios web de gestión.\",\n        \"7\": \"Categorías de Nivel 1\",\n        \"8\": \"Adecuado para sitios con una estructura simple con un solo nivel de páginas. No se necesita un 'breadcrumb'.\",\n        \"9\": \"Categorías de Nivel 2\",\n        \"10\": \"La barra lateral muestra hasta dos niveles de navegación. Se recomienda utilizar un 'breadcrumb' en combinación con la navegación de segundo nivel, lo que facilita la localización y navegación de los usuarios.\",\n        \"11\": \"Categorías de Nivel 3\",\n        \"12\": \"Adecuado para sitios web bastante complejos. La barra lateral izquierda contiene navegación de primer nivel, y la columna central muestra navegación de segundo nivel u otras opciones de utilidad.\",\n        \"13\": \"Navegación superior\",\n        \"14\": \"Se ajusta de acuerdo a la exploración normal de arriba a abajo, lo que hace que las cosas sean más naturales. La cantidad de navegación y la longitud del texto están limitadas al ancho de la parte superior.\",\n        \"15\": \"Adecuado para sitios con pocas navegaciones y grandes trozos.\"\n      },\n      \"resource\": {\n        \"1\": \"Recursos\",\n        \"2\": \"En construcción\",\n        \"3\": \"Componetes de Axure\",\n        \"4\": \"Mediante la importación de elementos de interfaz de usuario en Axure, se puede aplicar fácilmente a todos los componentes que proporcionamos durante el diseño de interacción.\",\n        \"5\": \"Descarga\",\n        \"6\": \"Plantilla de Sketch\",\n        \"7\": \"Aplica componentes de la plantilla Element para que pueda mejorarla eficiencia del diseño manteniendo un estilo visual unificado.\",\n        \"8\": \"Documentación de diseño de interacción\",\n        \"9\": \"Eche un vistazo más de cerca a la documentación de diseño de interacción. Conoce más detalles de cada componente desde una perspectiva microcósmica.\",\n        \"paraHeight\": \"1.6\",\n        \"placeholder1\": \"En construcción\",\n        \"placeholder2\": \"Se están desarrollando más recursos\"\n      }\n    }\n  },\n  {\n    \"lang\": \"fr-FR\",\n    \"pages\": {\n      \"index\": {\n        \"1\": \"Un kit de composants d'interface pour le web\",\n        \"2\": \"Element, une bibliothèque de composants web basée sur Vue 2.0 pour les développeurs, designers et chef de produits.\",\n        \"3\": \"Guide\",\n        \"4\": \"Comprendre le design, aider les designers à concevoir un produit adapté, structuré et facile d'utilisation.\",\n        \"5\": \"Détails\",\n        \"6\": \"Composants\",\n        \"7\": \"Découvrez les détails de chaque composant and parcourant les différentes démos. Utilisez l'encapsulation du code pour développer plus efficacement.\",\n        \"8\": \"Ressources\",\n        \"9\": \"Téléchargez différents outils de prototypage ou de visualisation pour un design plus efficace.\",\n        \"10\": \"Theme\",\n        \"11\": \"Online theme roller, visualize custom and manage site themes and component styles\",\n        \"12\": \"Theme customization is available!\",\n        \"13\": \"Click here\",\n        \"14\": \"Make your own theme\",\n        \"lang\": \"fr-FR\",\n        \"titleSize\": \"34\",\n        \"paraSize\": \"18\"\n      },\n      \"component\": {},\n      \"theme\": {\n        \"1\": \"Official Theme\",\n        \"2\": \"My Theme\",\n        \"3\": \"Theme name\"\n      },\n      \"theme-preview\": {\n        \"1\": \"Back\"\n      },\n      \"theme-nav\": {},\n      \"changelog\": {\n        \"1\": \"Changelog\",\n        \"2\": \"fr-FR\"\n      },\n      \"design\": {\n        \"1\": \"Principes de conception\",\n        \"2\": \"Cohérence\",\n        \"3\": \"\",\n        \"4\": \"Feedback\",\n        \"5\": \"\",\n        \"6\": \"Efficacité\",\n        \"7\": \"\",\n        \"8\": \"Controlabilité\",\n        \"9\": \"\",\n        \"10\": \"Cohérence\",\n        \"11\": \"Cohérence avec la vraie vie: \",\n        \"12\": \"en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs.\",\n        \"13\": \"Cohérence au sein de l'interface: \",\n        \"14\": \"tout les élements doivent être cohérents entre eux et suivre les même règles, par exemple: le style global, les icônes, la position des élements, etc.\",\n        \"15\": \"Feedback\",\n        \"16\": \"Retour d'expèrience: \",\n        \"17\": \"permets aux utilisateurs de percevoir clairement leur opérations par le biais d'animations et d'effets interactifs.\",\n        \"18\": \"Retour visuel: \",\n        \"19\": \"reflète l'état actuel de la page via le réarrangement ou la mise à jour des éléments.\",\n        \"20\": \"Efficacité\",\n        \"21\": \"Simplifier le processus: \",\n        \"22\": \"garde chaque operation simple et intuitive.\",\n        \"23\": \"Clair et défini: \",\n        \"24\": \"énonce clairement ses intentions afin que l'utilisateur puisse comprendre et prendre une décision rapidement.\",\n        \"25\": \"Facile à identifier: \",\n        \"26\": \"l'interface devrait être simple et facile d'accès, afin que les utilisateurs n'ai pas d'efforts de mémorisation à faire.\",\n        \"27\": \"Controllabilité\",\n        \"28\": \"Prise de décision: \",\n        \"29\": \"possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs\",\n        \"30\": \"Contrôle des conséquences: \",\n        \"31\": \"les utilisateurs devraient pouvoir controller l'exécution de leurs opérations, y compris l'annulation et la suppression des opérations courantes.\"\n      },\n      \"guide\": {\n        \"1\": \"Principes de conception\",\n        \"2\": \"Navigation\"\n      },\n      \"nav\": {\n        \"1\": \"Navigation\",\n        \"2\": \"La navigation a pour but de guider les utilisateurs pour qu'ils sachent ou aller et comment y parvenir. En général on peut distinguer deux types de navigation: le menu latéral ou 'sidebar' et le menu en haut de page ou 'topbar'.\",\n        \"3\": \"Choisir la bonne navigation\",\n        \"4\": \"Une navigation appropriée procure à l'utilisation une expèrience facile et fluide, alors qu'une mauvaise navigation entraîne de la confusion. Voici les différences entre les navigations 'sidebar' et 'topbar'\",\n        \"5\": \"Menu latéral\",\n        \"6\": \"Fixe la navigation sur le coté gauche, améliorant ainsi sa visibilité et facilitant le passage d'une page à l'autre. Dans ce cas, la zone en haut de la page peut contenir une barre de recherche, des liens vers de la documentation, des contacts, des boutons d'aide, etc. Utile pour des interfaces de gestion ou des sites utilitaires.\",\n        \"7\": \"Catégories de niveau 1\",\n        \"8\": \"Appropriées pour des sites avec une structure simple et un seul niveau de page. L'affichage du chemin de navigation n'est pas néccessaire.\",\n        \"9\": \"Catégories de niveau 2\",\n        \"10\": \"Le menu affiche au moins deux niveaux de navigation. Dans ce cas l'affichage du chemin de navigation est recommandé, afin que l'utilisateur sache facilement ou il se trouve.\",\n        \"11\": \"Catégories de niveau 3\",\n        \"12\": \"Appropriées pour les sites web complexes. La barre la plus à gauche gère le premier niveau de navigation, tandis que celle à coté gère le deuxième niveau ansi que d'autres options.\",\n        \"13\": \"Menu en haut de page\",\n        \"14\": \"Conforme à l'ordre normal de navigation qui va de haut en bas, ce qui rends les choses plus naturelles. Les quantités de liens et de texte sont limités par la largeur de la barre.\",\n        \"15\": \"Approprié pour les sites ayant une navigation simple et un contenu large.\"\n      },\n      \"resource\": {\n        \"1\": \"Resources\",\n        \"2\": \"En construction.\",\n        \"3\": \"Composants Axure\",\n        \"4\": \"En important ELement UI dans Axure, vous pourrez facilement utiliser les composants durant le design des interactions\",\n        \"5\": \"Téléchargement\",\n        \"6\": \"Modèle de croquis\",\n        \"7\": \"Applique des composants d'un template Element, afin d'améliorer l'efficacité du design tout en gardant un style visuel unifié.\",\n        \"8\": \"Documentation du design des interactions\",\n        \"9\": \"Jetez un oeil à la documentation du design des interactions. Obtenez des détails sur chaque composant.\",\n        \"paraHeight\": \"1.6\",\n        \"placeholder1\": \"En construction\",\n        \"placeholder2\": \"Plus de ressources sont en développement.\"\n      }\n    }\n  }\n]\n"
  },
  {
    "path": "examples/i18n/route.json",
    "content": "[\n  {\n    \"lang\": \"zh-CN\"\n  },\n  {\n    \"lang\": \"en-US\"\n  },\n  {\n    \"lang\": \"es\"\n  },\n  {\n    \"lang\": \"fr-FR\"\n  }\n]\n"
  },
  {
    "path": "examples/i18n/theme-editor.json",
    "content": "[\n  {\n    \"lang\": \"zh-CN\",\n    \"display-name\": {\n      \"border-color\": \"边框颜色\",\n      \"font-color\": \"文字颜色\",\n      \"background-color\": \"背景颜色\",\n      \"font-weight\": \"文字粗细\",\n      \"font-size\": \"文字大小\",\n      \"font-line-height\": \"文字行高\",\n      \"border-radius\": \"边框圆角\",\n      \"vertical\": \"纵向\",\n      \"horizontal\": \"横向\",\n      \"padding\": \"内间距\",\n      \"margin\": \"外间距\",\n      \"icon\": \"图标\",\n      \"placeholder\": \"占位符\",\n      \"dropdown\": \"下拉菜单\",\n      \"checked\": \"选中状态\",\n      \"active\": \"激活状态\",\n      \"hover\": \"鼠标悬停状态\",\n      \"max\": \"最大\",\n      \"medium\": \"中号\",\n      \"small\": \"小号\",\n      \"mini\": \"最小号\",\n      \"min\": \"最小\",\n      \"focus\": \"聚焦\",\n      \"selected\": \"选中\",\n      \"height\": \"高度\",\n      \"size\": \"大小\",\n      \"header\": \"头部\",\n      \"group\": \"分组\",\n      \"radius\": \"圆角\",\n      \"width\": \"宽度\",\n      \"color\": \"颜色\",\n      \"title\": \"标题\",\n      \"content\": \"内容\",\n      \"success\": \"成功状态\",\n      \"danger\": \"危险状态\",\n      \"warning\": \"警告状态\",\n      \"info\": \"提示状态\",\n      \"customed\": \"客制化的\",\n      \"disabled\": \"禁用状态\",\n      \"default\": \"默认\",\n      \"primary\": \"主要\",\n      \"inrange\": \"日期范围\"\n    },\n    \"action\": {\n      \"require-them-name\": \"主题名称是必填项\",\n      \"duplicate-them-name\": \"主题名称重复\",\n      \"confirm-delete-theme\": \"确定要删除这个主题?\",\n      \"max-user-theme\": \"已达自定义主题上限\",\n      \"no-preview-config\": \"获取主题预览配置错误\",\n      \"undo\": \"撤销\",\n      \"redo\": \"重做\",\n      \"notice\": \"提示\",\n      \"confirm\": \"确定\",\n      \"cancel\": \"取消\",\n      \"load-local-theme-config\": \"正在恢复您上次编辑的自定义主题\",\n      \"upload-theme\": \"点击上传主题\",\n      \"rename-theme\": \"修改命名\",\n      \"copy-theme\": \"复制主题\",\n      \"last-modified\": \"最近修改\",\n      \"reset-theme\": \"重置\",\n      \"delete-theme\": \"删除主题\",\n      \"download-theme\": \"下载\",\n      \"theme-check\": \"查看\",\n      \"theme-copy\": \"复制\",\n      \"theme-edit\": \"编辑\",\n      \"description-element\": \"默认主题\",\n      \"description-napos\": \"深色主题\",\n      \"description-kiwi\": \"KIWI 主题\"\n    },\n    \"category\": {\n      \"BrandColor\": \"品牌颜色\",\n      \"FunctionalColor\": \"辅助颜色\",\n      \"FontColor\": \"文字颜色\",\n      \"BorderColor\": \"边框颜色\",\n      \"BackgroundColor\": \"背景颜色\",\n      \"Other\": \"其他\",\n      \"Color\": \"颜色\",\n      \"Border\": \"边框\",\n      \"Font\": \"文字\",\n      \"Radius\": \"边框圆角\",\n      \"Shadow\": \"阴影\",\n      \"Spacing\": \"间距\",\n      \"FontSize\": \"文字大小\",\n      \"FontWeight\": \"文字粗细\",\n      \"LineHeight\": \"文字行高\"\n    },\n    \"variable-name\" : {\n      \"color-primary\": \"主题色\",\n      \"color-white\": \"基础白色\",\n      \"color-black\": \"基础黑色\",\n      \"color-success\": \"成功颜色\",\n      \"color-warning\": \"警告颜色\",\n      \"color-danger\": \"危险颜色\",\n      \"color-info\": \"信息颜色\",\n      \"color-text-primary\": \"主要文字颜色\",\n      \"color-text-regular\": \"常规文字颜色\",\n      \"color-text-secondary\": \"次要文字颜色\",\n      \"color-text-placeholder\": \"占位文字颜色\",\n      \"border-color-base\": \"一级边框颜色\",\n      \"border-color-light\": \"二级边框颜色\",\n      \"border-color-lighter\": \"三级边框颜色\",\n      \"border-color-extra-light\": \"四级边框颜色\",\n      \"background-color-base\": \"基础背景色\",\n      \"border-radius-base\": \"大圆角\",\n      \"border-radius-small\": \"小圆角\",\n      \"border-radius-zero\": \"无圆角\",\n      \"border-radius-circle\": \"圆形圆角\",\n      \"box-shadow-base\": \"基础投影\",\n      \"box-shadow-dark\": \"深色投影\",\n      \"box-shadow-light\": \"浅色投影\",\n      \"font-size-extra-large\": \"主标题文字大小\",\n      \"font-size-large\": \"标题文字大小\",\n      \"font-size-medium\": \"小标题文字大小\",\n      \"font-size-base\": \"正文文字大小\",\n      \"font-size-small\": \"正文（小）文字大小\",\n      \"font-size-extra-small\": \"辅助文字大小\",\n      \"font-weight-primary\": \"主要文字粗细\",\n      \"font-weight-secondary\": \"次要文字粗细\",\n      \"font-line-height-primary\": \"主要文字行高\",\n      \"font-line-height-secondary\": \"次要文字行高\",\n      \"tooltip-fill\": \"Dark 主题背景色\",\n      \"tooltip-color\": \"Light 主题背景色\",\n      \"slider-height\": \"滑块轨道高度\",\n      \"datepicker-off-font-color\": \"不是当前月份的日期文字颜色\"\n    }\n  },\n  {\n    \"lang\": \"en-US\",\n    \"variable-name\" : {\n      \"color-primary\": \"primary color\",\n      \"color-white\": \"basic white\",\n      \"color-black\": \"basic black\",\n      \"color-success\": \"success color\",\n      \"color-warning\": \"warning color\",\n      \"color-danger\": \"danger color\",\n      \"color-info\": \"info color\",\n      \"color-text-primary\": \"primary text color\",\n      \"color-text-regular\": \"regular text color\",\n      \"color-text-secondary\": \"secondary text color\",\n      \"color-text-placeholder\": \"placeholder text color\",\n      \"border-color-base\": \"border color base\",\n      \"border-color-light\": \"border color light\",\n      \"border-color-lighter\": \"border color lighter\",\n      \"border-color-extra-light\": \"border color extra light\",\n      \"background-color-base\": \"base background color\",\n      \"border-radius-base\": \"border radius base\",\n      \"border-radius-small\": \"border radius small\",\n      \"border-radius-circle\": \"border radius circle\",\n      \"box-shadow-base\": \"box shadow base\",\n      \"box-shadow-dark\": \"box shadow dark\",\n      \"box-shadow-light\": \"box shadow light\",\n      \"font-size-extra-large\": \"extra large font size\",\n      \"font-size-large\": \"large font size\",\n      \"font-size-medium\": \"medium font size\",\n      \"font-size-base\": \"base font size\",\n      \"font-size-small\": \"small font size\",\n      \"font-size-extra-small\": \"extra small font size\",\n      \"font-weight-primary\": \"primary font weight\",\n      \"font-weight-secondary\": \"secondary font weight\",\n      \"font-line-height-primary\": \"primary font line height\",\n      \"font-line-height-secondary\": \"secondary font line height\"\n    },\n    \"display-name\": {\n      \"border-color\": \"border color\",\n      \"font-color\": \"font color\",\n      \"background-color\": \"background color\",\n      \"font-weight\": \"font weight\",\n      \"font-size\": \"font size\",\n      \"font-line-height\": \"font line height\",\n      \"border-radius\": \"border radius\"\n    },\n    \"action\": {\n      \"require-them-name\": \"Theme name is required\",\n      \"duplicate-them-name\": \"Duplicate them name\",\n      \"confirm-delete-theme\": \"Are you sure you want to delete this theme?\",\n      \"no-preview-config\": \"No preview config found\",\n      \"max-user-theme\": \"Maxium user theme limit\",\n      \"undo\": \"Undo\",\n      \"redo\": \"Redo\",\n      \"notice\": \"Notice\",\n      \"confirm\": \"Confirm\",\n      \"cancel\": \"Cancel\",\n      \"load-local-theme-config\": \"Loading your last saved theme config\",\n      \"last-modified\": \"Last modified\",\n      \"upload-theme\": \"Click to upload theme\",\n      \"reset-theme\": \"Reset\",\n      \"rename-theme\": \"Rename\",\n      \"copy-theme\": \"Copy\",\n      \"delete-theme\": \"Delete\",\n      \"download-theme\": \"Download\",\n      \"theme-check\": \"Preview\",\n      \"theme-copy\": \"Copy\",\n      \"theme-edit\": \"Edit\",\n      \"description-element\": \"Default theme\",\n      \"description-napos\": \"Dark theme\",\n      \"description-kiwi\": \"kiwi theme\"\n    },\n    \"category\": {\n      \"BrandColor\": \"Brand Color\",\n      \"FunctionalColor\": \"Functional Color\",\n      \"FontColor\": \"Font Color\",\n      \"BorderColor\": \"Border Color\",\n      \"BackgroundColor\": \"Background Color\",\n      \"FontSize\": \"Font Size\",\n      \"FontWeight\": \"Font Weight\",\n      \"LineHeight\": \"Line Height\"\n    }\n  },\n  {\n    \"lang\": \"es\",\n    \"variable-name\" : {\n      \"color-primary\": \"primary color\",\n      \"color-white\": \"basic white\",\n      \"color-black\": \"basic black\",\n      \"color-success\": \"success color\",\n      \"color-warning\": \"warning color\",\n      \"color-danger\": \"danger color\",\n      \"color-info\": \"info color\",\n      \"color-text-primary\": \"primary text color\",\n      \"color-text-regular\": \"regular text color\",\n      \"color-text-secondary\": \"secondary text color\",\n      \"color-text-placeholder\": \"placeholder text color\",\n      \"border-color-base\": \"border color base\",\n      \"border-color-light\": \"border color light\",\n      \"border-color-lighter\": \"border color lighter\",\n      \"border-color-extra-light\": \"border color extra light\",\n      \"background-color-base\": \"base background color\",\n      \"border-radius-base\": \"border radius base\",\n      \"border-radius-small\": \"border radius small\",\n      \"border-radius-circle\": \"border radius circle\",\n      \"box-shadow-base\": \"box shadow base\",\n      \"box-shadow-dark\": \"box shadow dark\",\n      \"box-shadow-light\": \"box shadow light\",\n      \"font-size-extra-large\": \"extra large font size\",\n      \"font-size-large\": \"large font size\",\n      \"font-size-medium\": \"medium font size\",\n      \"font-size-base\": \"base font size\",\n      \"font-size-small\": \"small font size\",\n      \"font-size-extra-small\": \"extra small font size\",\n      \"font-weight-primary\": \"primary font weight\",\n      \"font-weight-secondary\": \"secondary font weight\",\n      \"font-line-height-primary\": \"primary font line height\",\n      \"font-line-height-secondary\": \"secondary font line height\"\n    },\n    \"display-name\": {\n      \"border-color\": \"border color\",\n      \"font-color\": \"font color\",\n      \"background-color\": \"background color\",\n      \"font-weight\": \"font weight\",\n      \"font-size\": \"font size\",\n      \"font-line-height\": \"font line height\",\n      \"border-radius\": \"border radius\"\n    },\n    \"action\": {\n      \"require-them-name\": \"Theme name is required\",\n      \"duplicate-them-name\": \"Duplicate them name\",\n      \"confirm-delete-theme\": \"Are you sure you want to delete this theme?\",\n      \"no-preview-config\": \"No preview config found\",\n      \"max-user-theme\": \"Maxium user theme limit\",\n      \"undo\": \"Undo\",\n      \"redo\": \"Redo\",\n      \"notice\": \"Notice\",\n      \"confirm\": \"Confirm\",\n      \"cancel\": \"Cancel\",\n      \"load-local-theme-config\": \"Loading your last saved theme config\",\n      \"last-modified\": \"Last modified\",\n      \"upload-theme\": \"Click to upload theme\",\n      \"reset-theme\": \"Reset\",\n      \"rename-theme\": \"Rename\",\n      \"copy-theme\": \"Copy\",\n      \"delete-theme\": \"Delete\",\n      \"download-theme\": \"Download\",\n      \"theme-check\": \"Preview\",\n      \"theme-copy\": \"Copy\",\n      \"theme-edit\": \"Edit\",\n      \"description-element\": \"Default theme\",\n      \"description-napos\": \"Dark theme\",\n      \"description-kiwi\": \"kiwi theme\"\n    },\n    \"category\": {\n      \"BrandColor\": \"Brand Color\",\n      \"FunctionalColor\": \"Functional Color\",\n      \"FontColor\": \"Font Color\",\n      \"BorderColor\": \"Border Color\",\n      \"BackgroundColor\": \"Background Color\",\n      \"FontSize\": \"Font Size\",\n      \"FontWeight\": \"Font Weight\",\n      \"LineHeight\": \"Line Height\"\n    }\n  },\n  {\n    \"lang\": \"fr-FR\",\n    \"variable-name\" : {\n      \"color-primary\": \"primary color\",\n      \"color-white\": \"basic white\",\n      \"color-black\": \"basic black\",\n      \"color-success\": \"success color\",\n      \"color-warning\": \"warning color\",\n      \"color-danger\": \"danger color\",\n      \"color-info\": \"info color\",\n      \"color-text-primary\": \"primary text color\",\n      \"color-text-regular\": \"regular text color\",\n      \"color-text-secondary\": \"secondary text color\",\n      \"color-text-placeholder\": \"placeholder text color\",\n      \"border-color-base\": \"border color base\",\n      \"border-color-light\": \"border color light\",\n      \"border-color-lighter\": \"border color lighter\",\n      \"border-color-extra-light\": \"border color extra light\",\n      \"background-color-base\": \"base background color\",\n      \"border-radius-base\": \"border radius base\",\n      \"border-radius-small\": \"border radius small\",\n      \"border-radius-circle\": \"border radius circle\",\n      \"box-shadow-base\": \"box shadow base\",\n      \"box-shadow-dark\": \"box shadow dark\",\n      \"box-shadow-light\": \"box shadow light\",\n      \"font-size-extra-large\": \"extra large font size\",\n      \"font-size-large\": \"large font size\",\n      \"font-size-medium\": \"medium font size\",\n      \"font-size-base\": \"base font size\",\n      \"font-size-small\": \"small font size\",\n      \"font-size-extra-small\": \"extra small font size\",\n      \"font-weight-primary\": \"primary font weight\",\n      \"font-weight-secondary\": \"secondary font weight\",\n      \"font-line-height-primary\": \"primary font line height\",\n      \"font-line-height-secondary\": \"secondary font line height\"\n    },\n    \"display-name\": {\n      \"border-color\": \"border color\",\n      \"font-color\": \"font color\",\n      \"background-color\": \"background color\",\n      \"font-weight\": \"font weight\",\n      \"font-size\": \"font size\",\n      \"font-line-height\": \"font line height\",\n      \"border-radius\": \"border radius\"\n    },\n    \"action\": {\n      \"require-them-name\": \"Theme name is required\",\n      \"duplicate-them-name\": \"Duplicate them name\",\n      \"confirm-delete-theme\": \"Are you sure you want to delete this theme?\",\n      \"no-preview-config\": \"No preview config found\",\n      \"max-user-theme\": \"Maxium user theme limit\",\n      \"undo\": \"Undo\",\n      \"redo\": \"Redo\",\n      \"notice\": \"Notice\",\n      \"confirm\": \"Confirm\",\n      \"cancel\": \"Cancel\",\n      \"load-local-theme-config\": \"Loading your last saved theme config\",\n      \"last-modified\": \"Last modified\",\n      \"upload-theme\": \"Click to upload theme\",\n      \"reset-theme\": \"Reset\",\n      \"rename-theme\": \"Rename\",\n      \"copy-theme\": \"Copy\",\n      \"delete-theme\": \"Delete\",\n      \"download-theme\": \"Download\",\n      \"theme-check\": \"Preview\",\n      \"theme-copy\": \"Copy\",\n      \"theme-edit\": \"Edit\",\n      \"description-element\": \"Default theme\",\n      \"description-napos\": \"Dark theme\",\n      \"description-kiwi\": \"kiwi theme\"\n    },\n    \"category\": {\n      \"BrandColor\": \"Brand Color\",\n      \"FunctionalColor\": \"Functional Color\",\n      \"FontColor\": \"Font Color\",\n      \"BorderColor\": \"Border Color\",\n      \"BackgroundColor\": \"Background Color\",\n      \"FontSize\": \"Font Size\",\n      \"FontWeight\": \"Font Weight\",\n      \"LineHeight\": \"Line Height\"\n    }\n  }\n]\n"
  },
  {
    "path": "examples/i18n/title.json",
    "content": "{\n  \"zh-CN\": {\n    \"home\": \"Element - 网站快速成型工具\",\n    \"guide\": \"指南 | Element\",\n    \"component\": \"组件 | Element\",\n    \"resource\": \"资源 | Element\"\n  },\n  \"en-US\": {\n    \"home\": \"Element - A Desktop UI Toolkit for Web\",\n    \"guide\": \"Guide | Element\",\n    \"component\": \"Component | Element\",\n    \"resource\": \"Resource | Element\"\n  },\n  \"es\": {\n    \"home\": \"Element - Un kit de interfaz de usuario para la web\",\n    \"guide\": \"Guía | Element\",\n    \"component\": \"Componentes | Element\",\n    \"resource\": \"Recursos | Element\"\n  },\n  \"fr-FR\": {\n    \"home\": \"Element - Un kit de composants d'interface pour le web\",\n    \"guide\": \"Guide | Element\",\n    \"component\": \"Composants | Element\",\n    \"resource\": \"Ressources | Element\"\n  }\n}\n"
  },
  {
    "path": "examples/icon.json",
    "content": "[\"platform-eleme\",\"eleme\",\"delete-solid\",\"delete\",\"s-tools\",\"setting\",\"user-solid\",\"user\",\"phone\",\"phone-outline\",\"more\",\"more-outline\",\"star-on\",\"star-off\",\"s-goods\",\"goods\",\"warning\",\"warning-outline\",\"question\",\"info\",\"remove\",\"circle-plus\",\"success\",\"error\",\"zoom-in\",\"zoom-out\",\"remove-outline\",\"circle-plus-outline\",\"circle-check\",\"circle-close\",\"s-help\",\"help\",\"minus\",\"plus\",\"check\",\"close\",\"picture\",\"picture-outline\",\"picture-outline-round\",\"upload\",\"upload2\",\"download\",\"camera-solid\",\"camera\",\"video-camera-solid\",\"video-camera\",\"message-solid\",\"bell\",\"s-cooperation\",\"s-order\",\"s-platform\",\"s-fold\",\"s-unfold\",\"s-operation\",\"s-promotion\",\"s-home\",\"s-release\",\"s-ticket\",\"s-management\",\"s-open\",\"s-shop\",\"s-marketing\",\"s-flag\",\"s-comment\",\"s-finance\",\"s-claim\",\"s-custom\",\"s-opportunity\",\"s-data\",\"s-check\",\"s-grid\",\"menu\",\"share\",\"d-caret\",\"caret-left\",\"caret-right\",\"caret-bottom\",\"caret-top\",\"bottom-left\",\"bottom-right\",\"back\",\"right\",\"bottom\",\"top\",\"top-left\",\"top-right\",\"arrow-left\",\"arrow-right\",\"arrow-down\",\"arrow-up\",\"d-arrow-left\",\"d-arrow-right\",\"video-pause\",\"video-play\",\"refresh\",\"refresh-right\",\"refresh-left\",\"finished\",\"sort\",\"sort-up\",\"sort-down\",\"rank\",\"loading\",\"view\",\"c-scale-to-original\",\"date\",\"edit\",\"edit-outline\",\"folder\",\"folder-opened\",\"folder-add\",\"folder-remove\",\"folder-delete\",\"folder-checked\",\"tickets\",\"document-remove\",\"document-delete\",\"document-copy\",\"document-checked\",\"document\",\"document-add\",\"printer\",\"paperclip\",\"takeaway-box\",\"search\",\"monitor\",\"attract\",\"mobile\",\"scissors\",\"umbrella\",\"headset\",\"brush\",\"mouse\",\"coordinate\",\"magic-stick\",\"reading\",\"data-line\",\"data-board\",\"pie-chart\",\"data-analysis\",\"collection-tag\",\"film\",\"suitcase\",\"suitcase-1\",\"receiving\",\"collection\",\"files\",\"notebook-1\",\"notebook-2\",\"toilet-paper\",\"office-building\",\"school\",\"table-lamp\",\"house\",\"no-smoking\",\"smoking\",\"shopping-cart-full\",\"shopping-cart-1\",\"shopping-cart-2\",\"shopping-bag-1\",\"shopping-bag-2\",\"sold-out\",\"sell\",\"present\",\"box\",\"bank-card\",\"money\",\"coin\",\"wallet\",\"discount\",\"price-tag\",\"news\",\"guide\",\"male\",\"female\",\"thumb\",\"cpu\",\"link\",\"connection\",\"open\",\"turn-off\",\"set-up\",\"chat-round\",\"chat-line-round\",\"chat-square\",\"chat-dot-round\",\"chat-dot-square\",\"chat-line-square\",\"message\",\"postcard\",\"position\",\"turn-off-microphone\",\"microphone\",\"close-notification\",\"bangzhu\",\"time\",\"odometer\",\"crop\",\"aim\",\"switch-button\",\"full-screen\",\"copy-document\",\"mic\",\"stopwatch\",\"medal-1\",\"medal\",\"trophy\",\"trophy-1\",\"first-aid-kit\",\"discover\",\"place\",\"location\",\"location-outline\",\"location-information\",\"add-location\",\"delete-location\",\"map-location\",\"alarm-clock\",\"timer\",\"watch-1\",\"watch\",\"lock\",\"unlock\",\"key\",\"service\",\"mobile-phone\",\"bicycle\",\"truck\",\"ship\",\"basketball\",\"football\",\"soccer\",\"baseball\",\"wind-power\",\"light-rain\",\"lightning\",\"heavy-rain\",\"sunrise\",\"sunrise-1\",\"sunset\",\"sunny\",\"cloudy\",\"partly-cloudy\",\"cloudy-and-sunny\",\"moon\",\"moon-night\",\"dish\",\"dish-1\",\"food\",\"chicken\",\"fork-spoon\",\"knife-fork\",\"burger\",\"tableware\",\"sugar\",\"dessert\",\"ice-cream\",\"hot-water\",\"water-cup\",\"coffee-cup\",\"cold-drink\",\"goblet\",\"goblet-full\",\"goblet-square\",\"goblet-square-full\",\"refrigerator\",\"grape\",\"watermelon\",\"cherry\",\"apple\",\"pear\",\"orange\",\"coffee\",\"ice-tea\",\"ice-drink\",\"milk-tea\",\"potato-strips\",\"lollipop\",\"ice-cream-square\",\"ice-cream-round\"]"
  },
  {
    "path": "examples/index.tpl",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\">\n    <link rel=\"stylesheet\" href=\"//at.alicdn.com/t/font_137970_p1tpzmomxp9cnmi.css\">\n    <link rel='mask-icon' href=\"https://raw.githubusercontent.com/ElemeFE/element/dev/examples/assets/images/element-logo-small.svg\" color=\"#409EFF\">\n    <link rel=\"stylesheet\" href=\"//shadow.elemecdn.com/npm/highlight.js@9.3.0/styles/color-brewer.css\">\n    <title>Element - The world's most popular Vue UI framework</title>\n    <meta name=\"description\" content=\"Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库\" />\n  </head>\n  <body>\n    <script>\n      if (!window.Promise) {\n        document.write('<script src=\"//cdn.jsdelivr.net/npm/es6-promise@4.1.1/dist/es6-promise.min.js\"><\\/script><script>ES6Promise.polyfill()<\\/script>')\n      }\n    </script>\n    <div id=\"app\"></div>\n    <% if (process.env.NODE_ENV === 'production') { %>\n      <script src=\"//shadow.elemecdn.com/npm/vue@2.5.21/dist/vue.runtime.min.js\"></script>\n      <script src=\"//shadow.elemecdn.com/npm/vue-router@3.0.1/dist/vue-router.min.js\"></script>\n      <script src=\"//shadow.elemecdn.com/app/element/highlight.pack.b1f71b31-3c07-11e9-ba1a-55bba1877129.js\"></script>\n    <% } %>\n  </body>\n  <% if (process.env.NODE_ENV === 'production') { %><script>\n    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){\n    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),\n    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)\n    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');\n\n    ga('create', 'UA-84335471-1', 'auto');\n    ga('send', 'pageview');\n\n    window.addEventListener('hashchange', function () {\n      ga('set', 'page', window.location.href);\n      ga('send', 'pageview');\n    });\n  </script><% } %>\n  <% if (process.env.NODE_ENV !== 'production') { %><script>\n    var ga = function() {\n      console.log(arguments)\n    };\n  </script><% } %>\n</html>\n"
  },
  {
    "path": "examples/nav.config.json",
    "content": "{\n  \"zh-CN\": [\n    {\n      \"name\": \"更新日志\",\n      \"path\": \"/changelog\"\n    },\n    {\n      \"name\": \"Element React\",\n      \"href\": \"https://elemefe.github.io/element-react/\"\n    },\n    {\n      \"name\": \"Element Angular\",\n      \"href\": \"https://element-angular.faas.ele.me/\"\n    },\n    {\n      \"name\": \"开发指南\",\n      \"children\": [\n        {\n          \"path\": \"/installation\",\n          \"name\": \"安装\"\n        },\n        {\n          \"path\": \"/quickstart\",\n          \"name\": \"快速上手\"\n        },\n        {\n          \"path\": \"/i18n\",\n          \"name\": \"国际化\"\n        },\n        {\n          \"path\": \"/custom-theme\",\n          \"name\": \"自定义主题\"\n        },\n        {\n          \"path\": \"/transition\",\n          \"name\": \"内置过渡动画\"\n        }\n      ]\n    },\n    {\n      \"name\": \"组件\",\n      \"groups\": [\n        {\n          \"groupName\": \"Basic\",\n          \"list\": [\n            {\n              \"path\": \"/layout\",\n              \"title\": \"Layout 布局\"\n            },\n            {\n              \"path\": \"/container\",\n              \"title\": \"Container 布局容器\"\n            },\n            {\n              \"path\": \"/color\",\n              \"title\": \"Color 色彩\"\n            },\n            {\n              \"path\": \"/typography\",\n              \"title\": \"Typography 字体\"\n            },\n            {\n              \"path\": \"/border\",\n              \"title\": \"Border 边框\"\n            },\n            {\n              \"path\": \"/icon\",\n              \"title\": \"Icon 图标\"\n            },\n            {\n              \"path\": \"/button\",\n              \"title\": \"Button 按钮\"\n            },\n            {\n              \"path\": \"/link\",\n              \"title\": \"Link 文字链接\"\n            }\n          ]\n        },\n        {\n          \"groupName\": \"Form\",\n          \"list\": [\n            {\n              \"path\": \"/radio\",\n              \"title\": \"Radio 单选框\"\n            },\n            {\n              \"path\": \"/checkbox\",\n              \"title\": \"Checkbox 多选框\"\n            },\n            {\n              \"path\": \"/input\",\n              \"title\": \"Input 输入框\"\n            },\n            {\n              \"path\": \"/input-number\",\n              \"title\": \"InputNumber 计数器\"\n            },\n            {\n              \"path\": \"/select\",\n              \"title\": \"Select 选择器\"\n            },\n            {\n              \"path\": \"/cascader\",\n              \"title\": \"Cascader 级联选择器\"\n            },\n            {\n              \"path\": \"/switch\",\n              \"title\": \"Switch 开关\"\n            },\n            {\n              \"path\": \"/slider\",\n              \"title\": \"Slider 滑块\"\n            },\n            {\n              \"path\": \"/time-picker\",\n              \"title\": \"TimePicker 时间选择器\"\n            },\n            {\n              \"path\": \"/date-picker\",\n              \"title\": \"DatePicker 日期选择器\"\n            },\n            {\n              \"path\": \"/datetime-picker\",\n              \"title\": \"DateTimePicker 日期时间选择器\"\n            },\n            {\n              \"path\": \"/upload\",\n              \"title\": \"Upload 上传\"\n            },\n            {\n              \"path\": \"/rate\",\n              \"title\": \"Rate 评分\"\n            },\n            {\n              \"path\": \"/color-picker\",\n              \"title\": \"ColorPicker 颜色选择器\"\n            },\n            {\n              \"path\": \"/transfer\",\n              \"title\": \"Transfer 穿梭框\"\n            },\n            {\n              \"path\": \"/form\",\n              \"title\": \"Form 表单\"\n            }\n          ]\n        },\n        {\n          \"groupName\": \"Data\",\n          \"list\": [\n            {\n              \"path\": \"/table\",\n              \"title\": \"Table 表格\"\n            },\n            {\n              \"path\": \"/tag\",\n              \"title\": \"Tag 标签\"\n            },\n            {\n              \"path\": \"/progress\",\n              \"title\": \"Progress 进度条\"\n            },\n            {\n              \"path\": \"/tree\",\n              \"title\": \"Tree 树形控件\"\n            },\n            {\n              \"path\": \"/pagination\",\n              \"title\": \"Pagination 分页\"\n            },\n            {\n              \"path\": \"/badge\",\n              \"title\": \"Badge 标记\"\n            },\n            {\n              \"path\": \"/avatar\",\n              \"title\": \"Avatar 头像\"\n            },\n            {\n              \"path\": \"/skeleton\",\n              \"title\": \"Skeleton 骨架屏\"\n            },\n            {\n              \"path\": \"/empty\",\n              \"title\": \"Empty 空状态\"\n            },\n            {\n              \"path\": \"/descriptions\",\n              \"title\": \"Descriptions 描述列表\"\n            },\n            {\n              \"path\": \"/result\",\n              \"title\": \"Result 结果\"\n            },\n            {\n              \"path\": \"/statistic\",\n              \"title\": \"Statistic 统计数值\"\n            }\n          ]\n        },\n        {\n          \"groupName\": \"Notice\",\n          \"list\": [\n            {\n              \"path\": \"/alert\",\n              \"title\": \"Alert 警告\"\n            },\n            {\n              \"path\": \"/loading\",\n              \"title\": \"Loading 加载\"\n            },\n            {\n              \"path\": \"/message\",\n              \"title\": \"Message 消息提示\"\n            },\n            {\n              \"path\": \"/message-box\",\n              \"title\": \"MessageBox 弹框\"\n            },\n            {\n              \"path\": \"/notification\",\n              \"title\": \"Notification 通知\"\n            }\n          ]\n        },\n        {\n          \"groupName\": \"Navigation\",\n          \"list\": [\n            {\n              \"path\": \"/menu\",\n              \"title\": \"NavMenu 导航菜单\"\n            },\n            {\n              \"path\": \"/tabs\",\n              \"title\": \"Tabs 标签页\"\n            },\n            {\n              \"path\": \"/breadcrumb\",\n              \"title\": \"Breadcrumb 面包屑\"\n            },\n            {\n              \"path\": \"/page-header\",\n              \"title\": \"PageHeader 页头\"\n            },\n            {\n              \"path\": \"/dropdown\",\n              \"title\": \"Dropdown 下拉菜单\"\n            },\n            {\n              \"path\": \"/steps\",\n              \"title\": \"Steps 步骤条\"\n            }\n          ]\n        },\n        {\n          \"groupName\": \"Others\",\n          \"list\": [\n            {\n              \"path\": \"/dialog\",\n              \"title\": \"Dialog 对话框\"\n            },\n            {\n              \"path\": \"/tooltip\",\n              \"title\": \"Tooltip 文字提示\"\n            },\n            {\n              \"path\": \"/popover\",\n              \"title\": \"Popover 弹出框\"\n            },\n            {\n              \"path\": \"/popconfirm\",\n              \"title\": \"Popconfirm 气泡确认框\"\n            },\n            {\n              \"path\": \"/card\",\n              \"title\": \"Card 卡片\"\n            },\n            {\n              \"path\": \"/carousel\",\n              \"title\": \"Carousel 走马灯\"\n            },\n            {\n              \"path\": \"/collapse\",\n              \"title\": \"Collapse 折叠面板\"\n            },\n            {\n              \"path\": \"/timeline\",\n              \"title\": \"Timeline 时间线\"\n            },\n            {\n              \"path\": \"/divider\",\n              \"title\": \"Divider 分割线\"\n            },\n            {\n              \"path\": \"/calendar\",\n              \"title\": \"Calendar 日历\"\n            },\n            {\n              \"path\": \"/image\",\n              \"title\": \"Image 图片\"\n            },\n            {\n              \"path\": \"/backtop\",\n              \"title\": \"Backtop 回到顶部\"\n            },\n            {\n              \"path\": \"/infiniteScroll\",\n              \"title\": \"InfiniteScroll 无限滚动\"\n            },\n            {\n              \"path\": \"/drawer\",\n              \"title\": \"Drawer 抽屉\"\n            }\n          ]\n        }\n      ]\n    }\n  ],\n  \"en-US\": [\n    {\n      \"name\": \"Changelog\",\n      \"path\": \"/changelog\"\n    },\n    {\n      \"name\": \"Element React\",\n      \"href\": \"https://elemefe.github.io/element-react/\"\n    },\n    {\n      \"name\": \"Element Angular\",\n      \"href\": \"https://element-angular.faas.ele.me/\"\n    },\n    {\n      \"name\": \"Development\",\n      \"children\": [\n        {\n          \"path\": \"/installation\",\n          \"name\": \"Installation\"\n        },\n        {\n          \"path\": \"/quickstart\",\n          \"name\": \"Quick Start\"\n        },\n        {\n          \"path\": \"/i18n\",\n          \"name\": \"Internationalization\"\n        },\n        {\n          \"path\": \"/custom-theme\",\n          \"name\": \"Custom Theme\"\n        },\n        {\n          \"path\": \"/transition\",\n          \"name\": \"Built-in transition\"\n        }\n      ]\n    },\n    {\n      \"name\": \"Components\",\n      \"groups\": [\n        {\n          \"groupName\": \"Basic\",\n          \"list\": [\n            {\n              \"path\": \"/layout\",\n              \"title\": \"Layout\"\n            },\n            {\n              \"path\": \"/container\",\n              \"title\": \"Layout Container\"\n            },\n            {\n              \"path\": \"/color\",\n              \"title\": \"Color\"\n            },\n            {\n              \"path\": \"/typography\",\n              \"title\": \"Typography\"\n            },\n            {\n              \"path\": \"/border\",\n              \"title\": \"Border\"\n            },\n            {\n              \"path\": \"/icon\",\n              \"title\": \"Icon\"\n            },\n            {\n              \"path\": \"/button\",\n              \"title\": \"Button\"\n            },\n            {\n              \"path\": \"/link\",\n              \"title\": \"Link\"\n            }\n          ]\n        },\n        {\n          \"groupName\": \"Form\",\n          \"list\": [\n            {\n              \"path\": \"/radio\",\n              \"title\": \"Radio\"\n            },\n            {\n              \"path\": \"/checkbox\",\n              \"title\": \"Checkbox\"\n            },\n            {\n              \"path\": \"/input\",\n              \"title\": \"Input\"\n            },\n            {\n              \"path\": \"/input-number\",\n              \"title\": \"InputNumber\"\n            },\n            {\n              \"path\": \"/select\",\n              \"title\": \"Select\"\n            },\n            {\n              \"path\": \"/cascader\",\n              \"title\": \"Cascader\"\n            },\n            {\n              \"path\": \"/switch\",\n              \"title\": \"Switch\"\n            },\n            {\n              \"path\": \"/slider\",\n              \"title\": \"Slider\"\n            },\n            {\n              \"path\": \"/time-picker\",\n              \"title\": \"TimePicker\"\n            },\n            {\n              \"path\": \"/date-picker\",\n              \"title\": \"DatePicker\"\n            },\n            {\n              \"path\": \"/datetime-picker\",\n              \"title\": \"DateTimePicker\"\n            },\n            {\n              \"path\": \"/upload\",\n              \"title\": \"Upload\"\n            },\n            {\n              \"path\": \"/rate\",\n              \"title\": \"Rate\"\n            },\n            {\n              \"path\": \"/color-picker\",\n              \"title\": \"ColorPicker\"\n            },\n            {\n              \"path\": \"/transfer\",\n              \"title\": \"Transfer\"\n            },\n            {\n              \"path\": \"/form\",\n              \"title\": \"Form\"\n            }\n          ]\n        },\n        {\n          \"groupName\": \"Data\",\n          \"list\": [\n            {\n              \"path\": \"/table\",\n              \"title\": \"Table\"\n            },\n            {\n              \"path\": \"/tag\",\n              \"title\": \"Tag\"\n            },\n            {\n              \"path\": \"/progress\",\n              \"title\": \"Progress\"\n            },\n            {\n              \"path\": \"/tree\",\n              \"title\": \"Tree\"\n            },\n            {\n              \"path\": \"/pagination\",\n              \"title\": \"Pagination\"\n            },\n            {\n              \"path\": \"/badge\",\n              \"title\": \"Badge\"\n            },\n            {\n              \"path\": \"/skeleton\",\n              \"title\": \"Skeleton\"\n            },\n            {\n              \"path\": \"/empty\",\n              \"title\": \"Empty\"\n            },\n            {\n              \"path\": \"/descriptions\",\n              \"title\": \"Descriptions\"\n            },\n            {\n              \"path\": \"/result\",\n              \"title\": \"Result\"\n            },\n            {\n              \"path\": \"/statistic\",\n              \"title\": \"Statistic\"\n            }\n          ]\n        },\n        {\n          \"groupName\": \"Notice\",\n          \"list\": [\n            {\n              \"path\": \"/alert\",\n              \"title\": \"Alert\"\n            },\n            {\n              \"path\": \"/loading\",\n              \"title\": \"Loading\"\n            },\n            {\n              \"path\": \"/message\",\n              \"title\": \"Message\"\n            },\n            {\n              \"path\": \"/message-box\",\n              \"title\": \"MessageBox\"\n            },\n            {\n              \"path\": \"/notification\",\n              \"title\": \"Notification\"\n            }\n          ]\n        },\n        {\n          \"groupName\": \"Navigation\",\n          \"list\": [\n            {\n              \"path\": \"/menu\",\n              \"title\": \"NavMenu\"\n            },\n            {\n              \"path\": \"/tabs\",\n              \"title\": \"Tabs\"\n            },\n            {\n              \"path\": \"/breadcrumb\",\n              \"title\": \"Breadcrumb\"\n            },\n            {\n              \"path\": \"/page-header\",\n              \"title\": \"PageHeader\"\n            },\n            {\n              \"path\": \"/dropdown\",\n              \"title\": \"Dropdown\"\n            },\n            {\n              \"path\": \"/steps\",\n              \"title\": \"Steps\"\n            }\n          ]\n        },\n        {\n          \"groupName\": \"Others\",\n          \"list\": [\n            {\n              \"path\": \"/dialog\",\n              \"title\": \"Dialog\"\n            },\n            {\n              \"path\": \"/tooltip\",\n              \"title\": \"Tooltip\"\n            },\n            {\n              \"path\": \"/popover\",\n              \"title\": \"Popover\"\n            },\n            {\n              \"path\": \"/popconfirm\",\n              \"title\": \"Popconfirm\"\n            },\n            {\n              \"path\": \"/card\",\n              \"title\": \"Card\"\n            },\n            {\n              \"path\": \"/carousel\",\n              \"title\": \"Carousel\"\n            },\n            {\n              \"path\": \"/collapse\",\n              \"title\": \"Collapse\"\n            },\n            {\n              \"path\": \"/timeline\",\n              \"title\": \"Timeline\"\n            },\n            {\n              \"path\": \"/divider\",\n              \"title\": \"Divider\"\n            },\n            {\n              \"path\": \"/calendar\",\n              \"title\": \"Calendar\"\n            },\n            {\n              \"path\": \"/image\",\n              \"title\": \"Image\"\n            },\n            {\n              \"path\": \"/backtop\",\n              \"title\": \"Backtop\"\n            },\n            {\n              \"path\": \"/infiniteScroll\",\n              \"title\": \"InfiniteScroll\"\n            },\n            {\n              \"path\": \"/avatar\",\n              \"title\": \"Avatar\"\n            },\n            {\n              \"path\": \"/drawer\",\n              \"title\": \"Drawer\"\n            }\n          ]\n        }\n      ]\n    }\n  ],\n  \"es\": [\n    {\n      \"name\": \"Changelog\",\n      \"path\": \"/changelog\"\n    },\n    {\n      \"name\": \"Element React\",\n      \"href\": \"https://elemefe.github.io/element-react/\"\n    },\n    {\n      \"name\": \"Element Angular\",\n      \"href\": \"https://element-angular.faas.ele.me/\"\n    },\n    {\n      \"name\": \"Development\",\n      \"children\": [\n        {\n          \"path\": \"/installation\",\n          \"name\": \"Installation\"\n        },\n        {\n          \"path\": \"/quickstart\",\n          \"name\": \"Quick Start\"\n        },\n        {\n          \"path\": \"/i18n\",\n          \"name\": \"Internationalization\"\n        },\n        {\n          \"path\": \"/custom-theme\",\n          \"name\": \"Custom Theme\"\n        },\n        {\n          \"path\": \"/transition\",\n          \"name\": \"Built-in transition\"\n        }\n      ]\n    },\n    {\n      \"name\": \"Components\",\n      \"groups\": [\n        {\n          \"groupName\": \"Basic\",\n          \"list\": [\n            {\n              \"path\": \"/layout\",\n              \"title\": \"Layout\"\n            },\n            {\n              \"path\": \"/container\",\n              \"title\": \"Layout Container\"\n            },\n            {\n              \"path\": \"/color\",\n              \"title\": \"Color\"\n            },\n            {\n              \"path\": \"/typography\",\n              \"title\": \"Typography\"\n            },\n            {\n              \"path\": \"/border\",\n              \"title\": \"Border\"\n            },\n            {\n              \"path\": \"/icon\",\n              \"title\": \"Icon\"\n            },\n            {\n              \"path\": \"/button\",\n              \"title\": \"Button\"\n            },\n            {\n              \"path\": \"/link\",\n              \"title\": \"Link\"\n            }\n          ]\n        },\n        {\n          \"groupName\": \"Form\",\n          \"list\": [\n            {\n              \"path\": \"/radio\",\n              \"title\": \"Radio\"\n            },\n            {\n              \"path\": \"/checkbox\",\n              \"title\": \"Checkbox\"\n            },\n            {\n              \"path\": \"/input\",\n              \"title\": \"Input\"\n            },\n            {\n              \"path\": \"/input-number\",\n              \"title\": \"InputNumber\"\n            },\n            {\n              \"path\": \"/select\",\n              \"title\": \"Select\"\n            },\n            {\n              \"path\": \"/cascader\",\n              \"title\": \"Cascader\"\n            },\n            {\n              \"path\": \"/switch\",\n              \"title\": \"Switch\"\n            },\n            {\n              \"path\": \"/slider\",\n              \"title\": \"Slider\"\n            },\n            {\n              \"path\": \"/time-picker\",\n              \"title\": \"TimePicker\"\n            },\n            {\n              \"path\": \"/date-picker\",\n              \"title\": \"DatePicker\"\n            },\n            {\n              \"path\": \"/datetime-picker\",\n              \"title\": \"DateTimePicker\"\n            },\n            {\n              \"path\": \"/upload\",\n              \"title\": \"Upload\"\n            },\n            {\n              \"path\": \"/rate\",\n              \"title\": \"Rate\"\n            },\n            {\n              \"path\": \"/color-picker\",\n              \"title\": \"ColorPicker\"\n            },\n            {\n              \"path\": \"/transfer\",\n              \"title\": \"Transfer\"\n            },\n            {\n              \"path\": \"/form\",\n              \"title\": \"Form\"\n            }\n          ]\n        },\n        {\n          \"groupName\": \"Data\",\n          \"list\": [\n            {\n              \"path\": \"/table\",\n              \"title\": \"Table\"\n            },\n            {\n              \"path\": \"/tag\",\n              \"title\": \"Tag\"\n            },\n            {\n              \"path\": \"/progress\",\n              \"title\": \"Progress\"\n            },\n            {\n              \"path\": \"/tree\",\n              \"title\": \"Tree\"\n            },\n            {\n              \"path\": \"/pagination\",\n              \"title\": \"Pagination\"\n            },\n            {\n              \"path\": \"/badge\",\n              \"title\": \"Badge\"\n            },\n            {\n              \"path\": \"/skeleton\",\n              \"title\": \"Skeleton\"\n            },\n            {\n              \"path\": \"/empty\",\n              \"title\": \"Empty\"\n            },\n            {\n              \"path\": \"/descriptions\",\n              \"title\": \"Descriptions\"\n            },\n            {\n              \"path\": \"/result\",\n              \"title\": \"Result\"\n            },\n            {\n              \"path\": \"/statistic\",\n              \"title\": \"Statistic\"\n            }\n          ]\n        },\n        {\n          \"groupName\": \"Notice\",\n          \"list\": [\n            {\n              \"path\": \"/alert\",\n              \"title\": \"Alert\"\n            },\n            {\n              \"path\": \"/loading\",\n              \"title\": \"Loading\"\n            },\n            {\n              \"path\": \"/message\",\n              \"title\": \"Message\"\n            },\n            {\n              \"path\": \"/message-box\",\n              \"title\": \"MessageBox\"\n            },\n            {\n              \"path\": \"/notification\",\n              \"title\": \"Notification\"\n            }\n          ]\n        },\n        {\n          \"groupName\": \"Navigation\",\n          \"list\": [\n            {\n              \"path\": \"/menu\",\n              \"title\": \"NavMenu\"\n            },\n            {\n              \"path\": \"/tabs\",\n              \"title\": \"Tabs\"\n            },\n            {\n              \"path\": \"/breadcrumb\",\n              \"title\": \"Breadcrumb\"\n            },\n            {\n              \"path\": \"/page-header\",\n              \"title\": \"PageHeader\"\n            },\n            {\n              \"path\": \"/dropdown\",\n              \"title\": \"Dropdown\"\n            },\n            {\n              \"path\": \"/steps\",\n              \"title\": \"Steps\"\n            }\n          ]\n        },\n        {\n          \"groupName\": \"Others\",\n          \"list\": [\n            {\n              \"path\": \"/dialog\",\n              \"title\": \"Dialog\"\n            },\n            {\n              \"path\": \"/tooltip\",\n              \"title\": \"Tooltip\"\n            },\n            {\n              \"path\": \"/popover\",\n              \"title\": \"Popover\"\n            },\n            {\n              \"path\": \"/popconfirm\",\n              \"title\": \"Popconfirm\"\n            },\n            {\n              \"path\": \"/card\",\n              \"title\": \"Card\"\n            },\n            {\n              \"path\": \"/carousel\",\n              \"title\": \"Carousel\"\n            },\n            {\n              \"path\": \"/collapse\",\n              \"title\": \"Collapse\"\n            },\n            {\n              \"path\": \"/timeline\",\n              \"title\": \"Timeline\"\n            },\n            {\n              \"path\": \"/divider\",\n              \"title\": \"Divider\"\n            },\n            {\n              \"path\": \"/calendar\",\n              \"title\": \"Calendar\"\n            },\n            {\n              \"path\": \"/image\",\n              \"title\": \"Image\"\n            },\n            {\n              \"path\": \"/backtop\",\n              \"title\": \"Backtop\"\n            },\n            {\n              \"path\": \"/infiniteScroll\",\n              \"title\": \"InfiniteScroll\"\n            },\n            {\n              \"path\": \"/avatar\",\n              \"title\": \"Avatar\"\n            },\n            {\n              \"path\": \"/drawer\",\n              \"title\": \"Drawer\"\n            }\n          ]\n        }\n      ]\n    }\n  ],\n  \"fr-FR\": [\n    {\n      \"name\": \"Changelog\",\n      \"path\": \"/changelog\"\n    },\n    {\n      \"name\": \"Element pour React\",\n      \"href\": \"https://elemefe.github.io/element-react/\"\n    },\n    {\n      \"name\": \"Element pour Angular\",\n      \"href\": \"https://element-angular.faas.ele.me/\"\n    },\n    {\n      \"name\": \"Développement\",\n      \"children\": [\n        {\n          \"path\": \"/installation\",\n          \"name\": \"Installation\"\n        },\n        {\n          \"path\": \"/quickstart\",\n          \"name\": \"Démarrer\"\n        },\n        {\n          \"path\": \"/i18n\",\n          \"name\": \"Internationalisation\"\n        },\n        {\n          \"path\": \"/custom-theme\",\n          \"name\": \"Thème\"\n        },\n        {\n          \"path\": \"/transition\",\n          \"name\": \"Transitions\"\n        }\n      ]\n    },\n    {\n      \"name\": \"Composants\",\n      \"groups\": [\n        {\n          \"groupName\": \"Basiques\",\n          \"list\": [\n            {\n              \"path\": \"/layout\",\n              \"title\": \"Layout\"\n            },\n            {\n              \"path\": \"/container\",\n              \"title\": \"Layout Container\"\n            },\n            {\n              \"path\": \"/color\",\n              \"title\": \"Color\"\n            },\n            {\n              \"path\": \"/typography\",\n              \"title\": \"Typography\"\n            },\n            {\n              \"path\": \"/border\",\n              \"title\": \"Border\"\n            },\n            {\n              \"path\": \"/icon\",\n              \"title\": \"Icon\"\n            },\n            {\n              \"path\": \"/button\",\n              \"title\": \"Button\"\n            },\n            {\n              \"path\": \"/link\",\n              \"title\": \"Link\"\n            }\n          ]\n        },\n        {\n          \"groupName\": \"Formulaire\",\n          \"list\": [\n            {\n              \"path\": \"/radio\",\n              \"title\": \"Radio\"\n            },\n            {\n              \"path\": \"/checkbox\",\n              \"title\": \"Checkbox\"\n            },\n            {\n              \"path\": \"/input\",\n              \"title\": \"Input\"\n            },\n            {\n              \"path\": \"/input-number\",\n              \"title\": \"InputNumber\"\n            },\n            {\n              \"path\": \"/select\",\n              \"title\": \"Select\"\n            },\n            {\n              \"path\": \"/cascader\",\n              \"title\": \"Cascader\"\n            },\n            {\n              \"path\": \"/switch\",\n              \"title\": \"Switch\"\n            },\n            {\n              \"path\": \"/slider\",\n              \"title\": \"Slider\"\n            },\n            {\n              \"path\": \"/time-picker\",\n              \"title\": \"TimePicker\"\n            },\n            {\n              \"path\": \"/date-picker\",\n              \"title\": \"DatePicker\"\n            },\n            {\n              \"path\": \"/datetime-picker\",\n              \"title\": \"DateTimePicker\"\n            },\n            {\n              \"path\": \"/upload\",\n              \"title\": \"Upload\"\n            },\n            {\n              \"path\": \"/rate\",\n              \"title\": \"Rate\"\n            },\n            {\n              \"path\": \"/color-picker\",\n              \"title\": \"ColorPicker\"\n            },\n            {\n              \"path\": \"/transfer\",\n              \"title\": \"Transfer\"\n            },\n            {\n              \"path\": \"/form\",\n              \"title\": \"Form\"\n            }\n          ]\n        },\n        {\n          \"groupName\": \"Données\",\n          \"list\": [\n            {\n              \"path\": \"/table\",\n              \"title\": \"Table\"\n            },\n            {\n              \"path\": \"/tag\",\n              \"title\": \"Tag\"\n            },\n            {\n              \"path\": \"/progress\",\n              \"title\": \"Progress\"\n            },\n            {\n              \"path\": \"/tree\",\n              \"title\": \"Tree\"\n            },\n            {\n              \"path\": \"/pagination\",\n              \"title\": \"Pagination\"\n            },\n            {\n              \"path\": \"/badge\",\n              \"title\": \"Badge\"\n            },\n            {\n              \"path\": \"/skeleton\",\n              \"title\": \"Skeleton\"\n            },\n            {\n              \"path\": \"/empty\",\n              \"title\": \"Empty\"\n            },\n            {\n              \"path\": \"/descriptions\",\n              \"title\": \"Descriptions\"\n            },\n            {\n              \"path\": \"/result\",\n              \"title\": \"Result\"\n            },\n            {\n              \"path\": \"/statistic\",\n              \"title\": \"Statistic\"\n            }\n          ]\n        },\n        {\n          \"groupName\": \"Notifier\",\n          \"list\": [\n            {\n              \"path\": \"/alert\",\n              \"title\": \"Alert\"\n            },\n            {\n              \"path\": \"/loading\",\n              \"title\": \"Loading\"\n            },\n            {\n              \"path\": \"/message\",\n              \"title\": \"Message\"\n            },\n            {\n              \"path\": \"/message-box\",\n              \"title\": \"MessageBox\"\n            },\n            {\n              \"path\": \"/notification\",\n              \"title\": \"Notification\"\n            }\n          ]\n        },\n        {\n          \"groupName\": \"Navigation\",\n          \"list\": [\n            {\n              \"path\": \"/menu\",\n              \"title\": \"NavMenu\"\n            },\n            {\n              \"path\": \"/tabs\",\n              \"title\": \"Tabs\"\n            },\n            {\n              \"path\": \"/breadcrumb\",\n              \"title\": \"Breadcrumb\"\n            },\n            {\n              \"path\": \"/page-header\",\n              \"title\": \"PageHeader\"\n            },\n            {\n              \"path\": \"/dropdown\",\n              \"title\": \"Dropdown\"\n            },\n            {\n              \"path\": \"/steps\",\n              \"title\": \"Steps\"\n            }\n          ]\n        },\n        {\n          \"groupName\": \"Autres\",\n          \"list\": [\n            {\n              \"path\": \"/dialog\",\n              \"title\": \"Dialog\"\n            },\n            {\n              \"path\": \"/tooltip\",\n              \"title\": \"Tooltip\"\n            },\n            {\n              \"path\": \"/popover\",\n              \"title\": \"Popover\"\n            },\n            {\n              \"path\": \"/popconfirm\",\n              \"title\": \"Popconfirm\"\n            },\n            {\n              \"path\": \"/card\",\n              \"title\": \"Card\"\n            },\n            {\n              \"path\": \"/carousel\",\n              \"title\": \"Carousel\"\n            },\n            {\n              \"path\": \"/collapse\",\n              \"title\": \"Collapse\"\n            },\n            {\n              \"path\": \"/timeline\",\n              \"title\": \"Timeline\"\n            },\n            {\n              \"path\": \"/divider\",\n              \"title\": \"Divider\"\n            },\n            {\n              \"path\": \"/calendar\",\n              \"title\": \"Calendar\"\n            },\n            {\n              \"path\": \"/image\",\n              \"title\": \"Image\"\n            },\n            {\n              \"path\": \"/backtop\",\n              \"title\": \"Backtop\"\n            },\n            {\n              \"path\": \"/infiniteScroll\",\n              \"title\": \"InfiniteScroll\"\n            },\n            {\n              \"path\": \"/avatar\",\n              \"title\": \"Avatar\"\n            },\n            {\n              \"path\": \"/drawer\",\n              \"title\": \"Drawer\"\n            }\n          ]\n        }\n      ]\n    }\n  ]\n}\n"
  },
  {
    "path": "examples/pages/template/changelog.tpl",
    "content": "<style>\n  .page-changelog {\n    padding-bottom: 100px;\n\n    .fr {\n      float: right;\n      padding: 0;\n\n      &.el-button {\n        transform: translateY(-3px);\n      }\n\n      a {\n        display: block;\n        padding: 10px 15px;\n        color: #333;\n      }\n\n      &:hover a {\n        color: #409EFF;\n      }\n    }\n\n    .heading {\n      font-size: 24px;\n      margin-bottom: 60px;\n      color: #333;\n    }\n\n    .timeline {\n      padding: 0;\n      padding-bottom: 10px;\n      position: relative;\n      color: #5e6d82;\n\n      > li {\n        position: relative;\n        padding-bottom: 15px;\n        list-style: none;\n        line-height: 1.8;\n        border: 1px solid #ddd;\n        border-radius: 4px;\n\n        &:not(:last-child) {\n          margin-bottom: 50px;\n        }\n      }\n\n      ul {\n        padding: 30px 30px 15px;\n\n        ul {\n          padding: 0;\n          padding-top: 5px;\n          padding-left: 27px;\n\n          li {\n            padding-left: 0;\n            color: #555;\n            word-break: normal;\n          }\n\n          li::before {\n            content: '';\n            circle: 4px #fff;\n            border: solid 1px #333;\n            margin-right: -12px;\n            display: inline-block;\n            vertical-align: middle;\n          }\n        }\n      }\n\n      li li {\n        font-size: 16px;\n        list-style: none;\n        padding-left: 20px;\n        padding-bottom: 5px;\n        color: #333;\n        word-break: break-all;\n\n        &:before {\n          content: '';\n          circle: 6px #333;\n          transform: translateX(-20px);\n          display: inline-block;\n          vertical-align: middle;\n        }\n      }\n  \n      i {\n        padding: 0 20px;\n        display: inline-block;\n      }\n\n      h3 {\n        margin:0;\n        padding: 15px 30px;\n        border-bottom: 1px solid #ddd;\n        font-size: 20px;\n        color: #333;\n        font-weight: bold;\n\n        a {\n          opacity: 1;\n          font-size: 20px;\n          float: none;\n          margin-left: 0;\n          color: #333;\n        }\n      }\n\n      h4 {\n        margin: 0;\n        margin-bottom: -10px;\n        font-size: 18px;\n        padding-left: 54px;\n        padding-top: 30px;\n        font-weight: bold;\n      }\n\n      p {\n        margin: 0;\n      }\n\n      em {\n        position: absolute;\n        right: 30px;\n        font-style: normal;\n        top: 23px;\n        font-size: 16px;\n        color: #666;\n      }\n    }\n  }\n</style>\n<template>\n  <div class=\"page-changelog\">\n    <div class=\"heading\">\n      <el-button class=\"fr\">\n        <a href=\"https://github.com/ElemeFE/element/releases\" target=\"_blank\">GitHub Releases</a>\n      </el-button>\n      <%= 1 >\n    </div>\n    <ul class=\"timeline\" ref=\"timeline\">\n    </ul>\n    <change-log ref=\"changeLog\"></change-log>\n  </div>\n</template>\n<script>\n  import ChangeLog from '../../../CHANGELOG.<%= 2 >.md';\n\n  export default {\n    components: {\n      ChangeLog\n    },\n    data() {\n      return {\n        count: 3\n      };\n    },\n    mounted() {\n      const changeLog = this.$refs.changeLog;\n      const changeLogNodes = changeLog.$el.children;\n      let a = changeLogNodes[1].querySelector('a');\n      a && a.remove();\n      let release = changeLogNodes[1].textContent.trim();\n      let fragments = `<li><h3><a href=\"https://github.com/ElemeFE/element/releases/tag/v${release}\" target=\"_blank\">${release}</a></h3>`;\n\n      for (let len = changeLogNodes.length, i = 2; i < len; i++) {\n        let node = changeLogNodes[i];\n        a = changeLogNodes[i].querySelector('a');\n        a && a.getAttribute('class') === 'header-anchor' && a.remove();\n        if (node.tagName !== 'H3') {\n          fragments += changeLogNodes[i].outerHTML;\n        } else {\n          release = changeLogNodes[i].textContent.trim();\n          fragments += `</li><li><h3><a href=\"https://github.com/ElemeFE/element/releases/tag/v${release}\" target=\"_blank\">${release}</a></h3>`;\n        }\n      }\n      fragments = fragments.replace(/#(\\d+)/g, '<a href=\"https://github.com/ElemeFE/element/issues/$1\" target=\"_blank\">#$1</a>');\n      fragments = fragments.replace(/@([\\w-]+)/g, '<a href=\"https://github.com/$1\" target=\"_blank\">@$1</a>');\n      this.$refs.timeline.innerHTML = `${fragments}</li>`;\n\n      changeLog.$el.remove();\n    }\n  };\n</script>\n"
  },
  {
    "path": "examples/pages/template/component.tpl",
    "content": "<style>\n  .page-component__scroll {\n    height: calc(100% - 80px);\n    margin-top: 80px;\n\n    > .el-scrollbar__wrap {\n      overflow-x: auto;\n    }\n  }\n\n  .page-component {\n    box-sizing: border-box;\n    height: 100%;\n  \n    &.page-container {\n      padding: 0;\n    }\n\n    .page-component__nav {\n      width: 240px;\n      position: fixed;\n      top: 0;\n      bottom: 0;\n      margin-top: 80px;\n      transition: padding-top .3s;\n\n      > .el-scrollbar__wrap {\n        height: 100%;\n        overflow-x: auto;\n      }\n\n      &.is-extended {\n        padding-top: 0;\n      }\n    }\n\n    .side-nav {\n      height: 100%;\n      padding-top: 50px;\n      padding-bottom: 50px;\n      padding-right: 0;\n\n      & > ul {\n        padding-bottom: 50px;\n      }\n    }\n\n    .page-component__content {\n      padding-left: 270px;\n      padding-bottom: 100px;\n      box-sizing: border-box;\n    }\n\n    .content {\n      padding-top: 50px;\n\n      > {\n        h3 {\n          margin: 55px 0 20px;\n        }\n\n        table {\n          border-collapse: collapse;\n          width: 100%;\n          background-color: #fff;\n          font-size: 14px;\n          margin-bottom: 45px;\n          line-height: 1.5em;\n\n          strong {\n            font-weight: normal;\n          }\n\n          td, th {\n            border-bottom: 1px solid #dcdfe6;\n            padding: 15px;\n            max-width: 250px;\n          }\n\n          th {\n            text-align: left;\n            white-space: nowrap;\n            color: #909399;\n            font-weight: normal;\n          }\n\n          td {\n            color: #606266;\n          }\n\n          th:first-child, td:first-child {\n            padding-left: 10px;\n          }\n        }\n\n        ul:not(.timeline) {\n          margin: 10px 0;\n          padding: 0 0 0 20px;\n          font-size: 14px;\n          color: #5e6d82;\n          line-height: 2em;\n        }\n      }\n    }\n  }\n\n  @media (max-width: 768px) {\n    .page-component {\n      .page-component__nav {\n        width: 100%;\n        position: static;\n        margin-top: 0;\n      }\n      .side-nav {\n        padding-top: 0;\n        padding-left: 50px;\n      }\n      .page-component__content {\n        padding-left: 10px;\n        padding-right: 10px;\n      }\n      .content {\n        padding-top: 0;\n      }\n      .content > table {\n        overflow: auto;\n        display: block;\n      }\n    }\n  }\n</style>\n<template>\n  <el-scrollbar class=\"page-component__scroll\" ref=\"componentScrollBar\">\n  <div class=\"page-container page-component\">\n    <el-scrollbar class=\"page-component__nav\">\n      <side-nav :data=\"navsData[lang]\" :base=\"`/${ lang }/component`\"></side-nav>\n    </el-scrollbar>\n    <div class=\"page-component__content\">\n      <router-view class=\"content\"></router-view>\n      <footer-nav></footer-nav>\n    </div>\n    <el-backtop \n      v-if=\"showBackToTop\"\n      target=\".page-component__scroll .el-scrollbar__wrap\"\n      :right=\"100\"\n      :bottom=\"150\"\n    ></el-backtop>\n  </div>\n  </el-scrollbar>\n</template>\n<script>\n  import bus from '../../bus';\n  import navsData from '../../nav.config.json';\n  import throttle from 'throttle-debounce/throttle';\n\n  export default {\n    data() {\n      return {\n        lang: this.$route.meta.lang,\n        navsData,\n        scrollTop: 0,\n        showHeader: true,\n        componentScrollBar: null,\n        componentScrollBoxElement: null\n      };\n    },\n    watch: {\n      '$route.path'() {\n        // 触发伪滚动条更新\n        this.componentScrollBox.scrollTop = 0;\n        this.$nextTick(() => {\n          this.componentScrollBar.update();\n        });\n      }\n    },\n    methods: {\n      renderAnchorHref() {\n        if (/changelog/g.test(location.href)) return;\n        const anchors = document.querySelectorAll('h2 a,h3 a,h4 a,h5 a');\n        const basePath = location.href.split('#').splice(0, 2).join('#');\n\n        [].slice.call(anchors).forEach(a => {\n          const href = a.getAttribute('href');\n          a.href = basePath + href;\n        });\n      },\n\n      goAnchor() {\n        if (location.href.match(/#/g).length > 1) {\n          const anchor = location.href.match(/#[^#]+$/g);\n          if (!anchor) return;\n          const elm = document.querySelector(anchor[0]);\n          if (!elm) return;\n\n          setTimeout(_ => {\n            this.componentScrollBox.scrollTop = elm.offsetTop;\n          }, 50);\n        }\n      },\n\n      handleScroll() {\n        const scrollTop = this.componentScrollBox.scrollTop;\n        if (this.showHeader !== this.scrollTop > scrollTop) {\n          this.showHeader = this.scrollTop > scrollTop;\n        }\n        if (scrollTop === 0) {\n          this.showHeader = true;\n        }\n        if (!this.navFaded) {\n          bus.$emit('fadeNav');\n        }\n        this.scrollTop = scrollTop;\n      }\n    },\n    computed: {\n      showBackToTop() {\n        return !this.$route.path.match(/backtop/);\n      }\n    },\n    created() {\n      bus.$on('navFade', val => {\n        this.navFaded = val;\n      });\n    },\n    mounted() {\n      this.componentScrollBar = this.$refs.componentScrollBar;\n      this.componentScrollBox = this.componentScrollBar.$el.querySelector('.el-scrollbar__wrap');\n      this.throttledScrollHandler = throttle(300, this.handleScroll);\n      this.componentScrollBox.addEventListener('scroll', this.throttledScrollHandler);\n      this.renderAnchorHref();\n      this.goAnchor();\n      document.body.classList.add('is-component');\n    },\n    destroyed() {\n      document.body.classList.remove('is-component');\n    },\n    beforeDestroy() {\n      this.componentScrollBox.removeEventListener('scroll', this.throttledScrollHandler);\n    },\n    beforeRouteUpdate(to, from, next) {\n      next();\n      setTimeout(() => {\n        const toPath = to.path;\n        const fromPath = from.path;\n        if (toPath === fromPath && to.hash) {\n          this.goAnchor();\n        }\n        if (toPath !== fromPath) {\n          document.documentElement.scrollTop = document.body.scrollTop = 0;\n          this.renderAnchorHref();\n        }\n      }, 100);\n    }\n  };\n</script>\n"
  },
  {
    "path": "examples/pages/template/design.tpl",
    "content": "<style scoped>\n  .cards {\n    margin: 30px 0 70px;\n  }\n  .card {\n    background: #fbfcfd;\n    height: 204px;\n    text-align: center;\n    \n    img {\n      margin: 40px auto 25px;\n      width: 80px;\n      height: 80px;\n    }\n    h4 {\n      font-size: 18px;\n      color: #1f2d3d;\n      font-weight: normal;\n      margin: 0;\n    }\n    span {\n      font-size: 14px;\n      color: #99a9bf;\n    }\n  }\n</style>\n<template>\n  <div>\n    <h2><%= 1 ></h2>\n    <el-row :gutter=\"14\" class=\"cards\">\n      <el-col :xs=\"12\" :sm=\"6\">\n        <div class=\"card\">\n          <img src=\"~examples/assets/images/consistency.png\" alt=\"Consistency\">\n          <h4><%= 2 ></h4>\n          <span><%= 3 ></span>\n        </div>\n      </el-col>\n      <el-col :xs=\"12\" :sm=\"6\">\n        <div class=\"card\">\n          <img src=\"~examples/assets/images/feedback.png\" alt=\"Feedback\">\n          <h4><%= 4 ></h4>\n          <span><%= 5 ></span>\n        </div>\n      </el-col>\n      <el-col :xs=\"12\" :sm=\"6\">\n        <div class=\"card\">\n          <img src=\"~examples/assets/images/efficiency.png\" alt=\"Efficiency\">\n          <h4><%= 6 ></h4>\n          <span><%= 7 ></span>\n        </div>\n      </el-col>\n      <el-col :xs=\"12\" :sm=\"6\">\n        <div class=\"card\">\n          <img src=\"~examples/assets/images/controllability.png\" alt=\"Controllability\">\n          <h4><%= 8 ></h4>\n          <span><%= 9 ></span>\n        </div>\n      </el-col>\n    </el-row>\n    <h3><%= 10 ></h3>\n    <ul>\n      <li><strong><%= 11 ></strong><%= 12 ></li>\n      <li><strong><%= 13 ></strong><%= 14 ></li>\n    </ul>\n    <h3><%= 15 ></h3>\n    <ul>\n      <li><strong><%= 16 ></strong><%= 17 ></li>\n      <li><strong><%= 18 ></strong><%= 19 ></li>\n    </ul>\n    <h3><%= 20 ></h3>\n    <ul>\n      <li><strong><%= 21 ></strong><%= 22 ></li>\n      <li><strong><%= 23 ></strong><%= 24 ></li>\n      <li><strong><%= 25 ></strong><%= 26 ></li>\n    </ul>\n    <h3><%= 27 ></h3>\n    <ul>\n      <li><strong><%= 28 ></strong><%= 29 ></li>\n      <li><strong><%= 30 ></strong><%= 31 ></li>\n    </ul>\n  </div>\n</template>\n"
  },
  {
    "path": "examples/pages/template/guide.tpl",
    "content": "<style>\n  .page-guide {\n    padding: 55px 30px 95px;\n    box-sizing: border-box;\n\n    .content {\n      padding-left: 25px;\n      margin-left: -1px;\n      h2 {\n        margin-bottom: 10px;\n      }\n\n      h3 {\n        font-size: 22px;\n        font-weight: normal;\n        margin: 0 0 30px;\n        color: #1f2d3d;\n      }\n      p {\n        line-height: 1.6;\n        font-size: 14px;\n        color: #5e6d82;\n      }\n      ul {\n        margin-bottom: 50px;\n        padding-left: 0;\n      }\n      li {\n        font-size: 14px;\n        margin-bottom: 10px;\n        color: #99a9bf;\n        list-style: none;\n\n        &:before {\n          content: '';\n          display: inline-block;\n          width: 4px;\n          height: 4px;\n          border-radius: 50%;\n          vertical-align: middle;\n          background-color: #5e6d82;\n          margin-right: 5px;\n        }\n\n        strong {\n          color: #5e6d82;\n          font-weight: 400;\n        }\n      }\n    }\n  }\n\n  @media (max-width: 768px) {\n    .page-guide {\n      .content {\n        padding-left: 0;\n      }\n    }\n  }\n</style>\n<template>\n  <div class=\"page-container page-guide\">\n    <el-row>\n      <el-col :xs=\"24\" :sm=\"5\">\n        <side-nav :data=\"navsData\" :base=\"`/${ lang }/guide`\"></side-nav>\n      </el-col>\n      <el-col :xs=\"24\" :sm=\"19\">\n        <router-view class=\"content\"></router-view>\n      </el-col>\n    </el-row>\n  </div>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        lang: this.$route.meta.lang,\n        navsData: [\n          {\n            path: '/design',\n            name: '<%= 1 >'\n          },\n          {\n            path: '/nav',\n            name: '<%= 2 >'\n          }\n        ]\n      };\n    }\n  };\n</script>\n"
  },
  {
    "path": "examples/pages/template/index.tpl",
    "content": "<style scoped>\n  .banner {\n    text-align: center;\n  }\n  .banner-desc {\n    padding-top: 50px;\n\n    h1 {\n      font-size: <%= titleSize >px;\n      margin: 0;\n      line-height: 48px;\n      color: #555;\n    }\n\n    p {\n      font-size: <%= paraSize >px;\n      line-height: 28px;\n      color: #888;\n      margin: 10px 0 5px;\n    }\n  }\n  .sponsors {\n    display: flex;\n    justify-content: center;\n  }\n  .sponsor {\n    margin: 0 20px 50px;\n    display: inline-flex;\n    width: 300px;\n    height: 100px;\n    justify-content: center;\n\n    img {\n      margin-right: 20px;\n    }\n\n    div {\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n    }\n\n    p {\n      margin: 0;\n      line-height: 1.8;\n      color: #999;\n      font-size: 14px;\n    }\n  }\n  .jumbotron {\n    width: 890px;\n    margin: 30px auto;\n    position: relative;\n    img {\n      width: 100%;\n    }\n    .jumbotron-red {\n      transition: height .1s;\n      background: #FFF;\n      position: absolute;\n      left: 0;\n      top:0;\n      overflow: hidden;\n    }\n  }\n  .cards {\n    margin: 0 auto 110px;\n    width: 1140px;\n\n    .container {\n      padding: 0;\n      margin: 0 -11px;\n      width: auto;\n      &::before, &::after {\n        display: table;\n        content: \"\";\n      }\n      &::after {\n        clear: both;\n      }\n    }\n\n\n    li {\n      width: 25%;\n      padding: 0 19px;\n      box-sizing: border-box;\n      float: left;\n      list-style: none;\n    }\n\n    img {\n      width: 160px;\n      height: 120px;\n    }\n  }\n  .card {\n    height: 430px;\n    width: 100%;\n    background:#ffffff;\n    border:1px solid #eaeefb;\n    border-radius:5px;\n    box-sizing: border-box;\n    text-align: center;\n    position: relative;\n    transition: all .3s ease-in-out;\n    bottom: 0;\n\n    img {\n      margin: 66px auto 60px;\n    }\n    h3 {\n      margin: 0;\n      font-size: 18px;\n      color: #1f2f3d;\n      font-weight: normal;\n    }\n    p {\n      font-size: 14px;\n      color: #99a9bf;\n      padding: 0 25px;\n      line-height: 20px;\n    }\n    a {\n      height: 53px;\n      line-height: 52px;\n      font-size: 14px;\n      color: #409EFF;\n      text-align: center;\n      border: 0;\n      border-top: 1px solid #eaeefb;\n      padding: 0;\n      cursor: pointer;\n      width: 100%;\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      background-color: #fff;\n      border-radius: 0 0 5px 5px;\n      transition: all .3s;\n      text-decoration: none;\n      display: block;\n\n      &:hover {\n        color: #fff;\n        background: #409EFF;\n      }\n    }\n    &:hover {\n      bottom: 6px;\n      box-shadow: 0 6px 18px 0 rgba(232,237,250,0.50);\n    }\n  }\n  @media (max-width: 1140px) {\n    .cards {\n      width: 100%;\n      .container {\n        width: 100%;\n        margin: 0;\n      }\n    }\n    .banner .container {\n      width: 100%;\n      box-sizing: border-box;\n    }\n    .banner img {\n      right: 0;\n    }\n  }\n\n  @media (max-width: 1000px) {\n    .banner .container {\n      img {\n        display: none;\n      }\n    }\n    .jumbotron {\n      display: none;\n    }\n  }\n\n  @media (max-width: 768px) {\n    .cards {\n      li {\n        width: 80%;\n        margin: 0 auto 20px;\n        float: none;\n      }\n      .card {\n        height: auto;\n        padding-bottom: 54px;\n      }\n    }\n    .banner-stars {\n      display: none;\n    }\n    .banner-desc {\n      #line2 {\n        display: none;\n      }\n      h2 {\n        font-size: 32px;\n      }\n      p {\n        width: auto;\n      }\n    }\n  }\n  .theme-intro-b {\n    position: fixed;\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    z-index: 200;\n    .intro-banner {\n      position: absolute\n    }\n    img {\n      width: 300px;\n    }\n    .title {\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      color: #FFF;\n      text-align: center;\n      font-weight: bold;\n      font-size: 20px;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      p {\n        padding: 0;\n        margin: 10px 0;\n      }\n    }\n  }\n  .theme-intro-a {\n    position: fixed;\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    z-index: 200;\n    .mask{\n      position: fixed;\n      left: 0;\n      right: 0;\n      top: 0;\n      bottom: 0;\n      background: #000;\n      opacity: .5;\n    }\n    .intro-banner {\n      top: 50%;\n      left: 50%;\n      position: fixed;\n      -webkit-transform: translate(-50%, -50%);\n      transform: translate(-50%, -50%);\n      box-sizing: border-box;\n      text-align: center;\n      z-index: 100;\n      img {\n        width: 100%;\n      }\n      .intro-text {\n        position: absolute;\n        top: 50%;\n        left: 0;\n        right: 0;\n        p {\n          padding: 0;\n          margin: 0;\n          font-size: 48px;\n          font-weight: bold;\n          color: #FFF;\n        }\n      }\n    }\n  }\n</style>\n<template>\n  <div>\n    <div class=\"banner\">\n      <div class=\"banner-desc\">\n        <h1><%= 1 ></h1>\n        <p><%= 2 ></p>\n      </div>\n    </div>\n    <div class=\"jumbotron\" ref=\"indexMainImg\">\n      <img src=\"~examples/assets/images/theme-index-blue.png\" alt=\"\">\n      <div class=\"jumbotron-red\" :style=\"{\n           height: mainImgOffset + 'px'\n         }\">\n        <img src=\"~examples/assets/images/theme-index-red.png\" alt=\"\">\n      </div>\n    </div>\n    <div class=\"cards\">\n      <ul class=\"container\">\n        <li>\n          <div class=\"card\">\n            <img src=\"~examples/assets/images/guide.png\" alt=\"\">\n            <h3><%= 3 ></h3>\n            <p><%= 4 ></p>\n            <router-link\n              active-class=\"active\"\n              to=\"/<%= lang >/guide/design\"\n              exact><%= 5 >\n            </router-link>\n          </div>\n        </li>\n        <li>\n          <div class=\"card\">\n            <img src=\"~examples/assets/images/component.png\" alt=\"\">\n            <h3><%= 6 ></h3>\n            <p><%= 7 ></p>\n            <router-link\n              active-class=\"active\"\n              to=\"/<%= lang >/component/layout\"\n              exact><%= 5 >\n            </router-link>\n          </div>\n        </li>\n        <li>\n          <div class=\"card\">\n            <img src=\"~examples/assets/images/theme-index-icon.svg\" alt=\"\">\n            <h3><%= 10 ></h3>\n            <p><%= 11 ></p>\n            <router-link\n              active-class=\"active\"\n              to=\"/<%= lang >/theme\"\n              exact><%= 5 >\n            </router-link>\n          </div>\n        </li>\n        <li>\n          <div class=\"card\">\n            <img src=\"~examples/assets/images/resource.png\" alt=\"\">\n            <h3><%= 8 ></h3>\n            <p><%= 9 ></p>\n            <router-link\n              active-class=\"active\"\n              to=\"/<%= lang >/resource\"\n              exact><%= 5 >\n            </router-link>\n          </div>\n        </li>\n      </ul>\n    </div>\n  </div>\n</template>\n<script>\n  import throttle from 'throttle-debounce/throttle';\n  \n  export default {\n    created() {\n      this.throttledHandleScroll = throttle(10, true, index => {\n        this.handleScroll(index);\n      });\n    },\n    methods: {\n      handleScroll(index) {\n        const ele = this.$refs.indexMainImg;\n        const rect = ele.getBoundingClientRect();\n        const eleHeight = ele.clientHeight + 55;\n        let calHeight = (180 - rect.top) * 2;\n        if (calHeight < 0) calHeight = 0;\n        if (calHeight > eleHeight) calHeight = eleHeight;\n        this.mainImgOffset = calHeight;\n      }\n    },\n    data() {\n      return {\n        lang: this.$route.meta.lang,\n        mainImgOffset: 0\n      };\n    },\n    beforeDestroy() {\n      window.removeEventListener('scroll', this.throttledHandleScroll);\n    },\n    mounted() {\n      window.addEventListener('scroll', this.throttledHandleScroll);\n    }\n  };\n</script>\n"
  },
  {
    "path": "examples/pages/template/nav.tpl",
    "content": "<style scoped>\n  h3 {\n    margin-bottom: 15px;\n  }\n  .block {\n    margin-bottom: 55px;\n  }\n  p {\n    margin: 0 0 15px;\n  }\n  .nav-demos {\n    p {\n      margin-bottom: 50px;\n    }\n    h5 {\n      margin: 0;\n    }\n    img {\n      padding: 15px;\n      background-color: #F9FAFC;\n      width: 100%;\n      margin-bottom: 15px;\n      cursor: pointer;\n    }\n  }\n  .dialog-img {\n    position: fixed;\n    overflow: auto;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 1000;\n    -webkit-overflow-scrolling: touch;\n    outline: 0;\n  \n    .imgWrap {\n      margin: 0 auto;\n      position: relative;\n      top: 100px;\n      padding-bottom: 50px;\n    }\n    img {\n      display: block;\n      width: 100%;\n    }\n  }\n  .mask {\n    position: fixed;\n    top: 0;\n    right: 0;\n    left: 0;\n    bottom: 0;\n    background-color: #373737;\n    background-color: rgba(55, 55, 55, 0.6);\n    height: 100%;\n    z-index: 1000;\n  }\n  .zoom-enter-active,\n  .zoom-leave-active {\n    transition: transform .3s cubic-bezier(0.78, 0.14, 0.15, 0.86), opacity .3s cubic-bezier(0.78, 0.14, 0.15, 0.86);\n  }\n  .zoom-enter,\n  .zoom-leave-active {\n    transform: scale(0.3);\n    opacity: 0;\n  }\n  .fade-enter-active,\n  .fade-leave-active {\n    transition: opacity .3s cubic-bezier(0.78, 0.14, 0.15, 0.86);\n  }\n  .fade-enter,\n  .fade-leave-active {\n    opacity: 0;\n  }\n</style>\n<template>\n  <div>\n    <h2><%= 1 ></h2>\n    <div class=\"block\">\n      <p><%= 2 ></p>\n    </div>\n    <div class=\"block\">\n      <h3><%= 3 ></h3>\n      <p><%= 4 ></p>\n    </div>\n    <div class=\"block\">\n      <h3><%= 5 ></h3>\n      <el-row :gutter=\"20\">\n        <el-col :span=\"9\">\n          <p><%= 6 ></p>\n        </el-col>\n        <el-col :span=\"15\" class=\"nav-demos\">\n          <img src=\"~examples/assets/images/navbar_1.png\" alt=\"<%= 7 >\" @click=\"enlarge(846, $event)\">\n          <h5><%= 7 ></h5>\n          <p><%= 8 ></p>\n          <img src=\"~examples/assets/images/navbar_2.png\" alt=\"<%= 9 >\" @click=\"enlarge(846, $event)\">\n          <h5><%= 9 ></h5>\n          <p><%= 10 ></p>\n          <img src=\"~examples/assets/images/navbar_3.png\" alt=\"<%= 11 >\" @click=\"enlarge(846, $event)\">\n          <h5><%= 11 ></h5>\n          <p><%= 12 ></p>\n        </el-col>\n      </el-row>\n    </div>\n    <div class=\"block\">\n      <h3><%= 13 ></h3>\n      <el-row>\n        <el-col :span=\"10\">\n          <p><%= 14 ></p>\n        </el-col>\n        <el-col :span=\"14\" class=\"nav-demos\">\n          <img src=\"~examples/assets/images/navbar_0.png\" alt=\"\" @click=\"enlarge(846, $event)\">\n          <p><%= 15 ></p>\n        </el-col>\n      </el-row>\n    </div>\n    <transition name=\"fade\">\n      <div class=\"mask\" v-show=\"showDialog\" @click=\"showDialog = false\"></div>\n    </transition>\n    <transition name=\"zoom\">\n      <div class=\"dialog-img\" :style='imgWrapStyle' v-show=\"showDialog\" @click=\"showDialog = false\">\n        <div class=\"imgWrap\" :style=\"imgStyle\">\n          <img :src=\"imgUrl\" alt=\"\">\n        </div>\n      </div>\n    </transition>\n  </div>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        imgUrl: '',\n        imgBound: {},\n        showDialog: false,\n        imgStyle: {},\n        imgWrapStyle: {}\n      };\n    },\n    watch: {\n      showDialog(val) {\n        document.body.style.overflow = val ? 'hidden' : '';\n      }\n    },\n    methods: {\n      enlarge(imgWidth, ev) {\n        var imgNode = ev.target;\n        // var bound = imgNode.getBoundingClientRect();\n        var offset = {};\n        var doc = document;\n\n        offset.left = (doc.body.scrollWidth - imgWidth) / 2;\n        offset.top = 100;\n\n        this.imgUrl = imgNode.src;\n        this.imgBound = imgNode.getBoundingClientRect();\n\n        this.imgWrapStyle.transformOrigin = `${ev.clientX}px ${ev.clientY}px`;\n        // this.imgStyle.transformOrigin = `${ev.clientX}px ${ev.clientY}px`;\n        this.imgStyle.width = imgWidth + 'px';\n        this.showDialog = true;\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "examples/pages/template/resource.tpl",
    "content": "<style scoped>\n  .page-resource {\n    padding-top: 55px;\n    box-sizing: border-box;\n    \n    .resource-placeholder {\n      margin: 50px auto 100px;\n      text-align: center;\n      \n      img {\n        width: 150px;\n      }\n      \n      h4 {\n        margin: 20px 0 16px;\n        font-size: 16px;\n        color: #1f2f3d;\n        line-height: 1;\n      }\n      \n      p {\n        margin: 0;\n        font-size: 14px;\n        color: #99a9bf;\n        line-height: 1;\n      }\n    }\n  }\n  .cards {\n    margin: 35px auto 110px;\n\n    .container {\n      &::before, &::after {\n        display: table;\n        content: \"\";\n      }\n      &::after {\n        clear: both;\n      }\n      padding: 0;\n      margin: 0 -11px;\n      width: auto;\n    }\n\n    li {\n      width: 33.33333%;\n      padding: 0 11px;\n      box-sizing: border-box;\n      float: left;\n      list-style: none;\n    }\n  }\n  h2 {\n    font-size: 28px;\n    margin: 0;\n  }\n  p {\n    font-size: 14px;\n    color: #5e6d82;\n  }\n  .card {\n    height: 394px;\n    width: 100%;\n    background:#ffffff;\n    border:1px solid #eaeefb;\n    border-radius:5px;\n    box-sizing: border-box;\n    text-align: center;\n    position: relative;\n    transition: bottom .3s;\n    bottom: 0;\n\n    img {\n      margin: 75px auto 35px;\n      height: 87px;\n    }\n    h3 {\n      margin: 0 0 10px;\n      font-size: 18px;\n      color: #1f2f3d;\n      font-weight: normal;\n      height: 22px;\n    }\n    p {\n      font-size: 14px;\n      color: #99a9bf;\n      padding: 0 30px;\n      margin: 0;\n      word-break: break-all;\n      line-height: <%= paraHeight >;\n    }\n    a {\n      height: 42px;\n      width: 190px;\n      display: inline-block;\n      line-height: 42px;\n      font-size: 14px;\n      background-color: #409EFF;\n      color: #fff;\n      text-align: center;\n      border: 0;\n      padding: 0;\n      cursor: pointer;\n      border-radius: 2px;\n      transition: all .3s;\n      text-decoration: none;\n      margin-top: 20px;\n    }\n  }\n  @media (max-width: 850px) {\n    .cards {\n      li {\n        max-width: 500px;\n        float: none;\n        margin: 10px auto 30px;\n        width: 80%;\n        .card {\n          height: auto;\n          padding-bottom: 20px;\n        }\n      }\n      h3 {\n        height: auto;\n      }\n    }\n  }\n</style>\n<template>\n  <div class=\"page-container page-resource\">\n    <h2><%= 1 ></h2>\n    <!--<div class=\"resource-placeholder\">-->\n      <!--<img src=\"~examples/assets/images/resource-placeholder.svg\" alt=\"\">-->\n      <!--<h4><%= placeholder1 ></h4>-->\n      <!--<p><%= placeholder2 ></p>-->\n    <!--</div>-->\n    \n    <p><%= placeholder2 ></p>\n    <div class=\"cards\">\n      <ul class=\"container\">\n        <li>\n          <div class=\"card\">\n            <img src=\"~examples/assets/images/Axure-Components.svg\" alt=\"\">\n            <h3><%= 3 ></h3>\n            <p><%= 4 ></p>\n            <a\n              onclick=\"ga('send', 'event', 'ResourceDownload', 'Download', 'Axure');\" \n              href=\"https://github.com/ElementUI/Resources/raw/master/Element_Components_v2.1.0.rplib\"\n            ><%= 5 ></a>\n          </div>\n        </li>\n        <li>\n          <div class=\"card\">\n            <img src=\"~examples/assets/images/Sketch-Template.svg\" alt=\"\">\n            <h3><%= 6 ></h3>\n            <p><%= 7 ></p>\n            <a \n              onclick=\"ga('send', 'event', 'ResourceDownload', 'Download', 'Sketch');\"\n              href=\"https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v2.0.sketch\"\n            ><%= 5 ></a>\n          </div>\n        </li>\n        <!--<li>-->\n          <!--<div class=\"card\">-->\n            <!--<img src=\"~examples/assets/images/Module.svg\" alt=\"\">-->\n            <!--<h3><%= 8 ></h3>-->\n            <!--<p><%= 9 ></p>-->\n            <!--<a href=\"https://github.com/ElementUI/Resources/raw/master/Element%20Components%20Documentation.zip\"><%= 5 ></a>-->\n          <!--</div>-->\n        <!--</li>-->\n      </ul>\n    </div>\n  </div>\n</template>\n"
  },
  {
    "path": "examples/pages/template/theme-nav.tpl",
    "content": "<template>\n  <router-view></router-view>\n</template>"
  },
  {
    "path": "examples/pages/template/theme-preview.tpl",
    "content": "<style lang=\"scss\">\n.page-container.page-theme-preview {\n  padding-top: 30px;\n  .display {\n    width: 75%;\n    display: inline-block;\n    vertical-align: top;\n    h3 {\n      font-size: 28px;\n      margin: 30px 0 0 0;\n    }\n  }\n  .side {\n    display: inline-block;\n    width: 25%;\n    .editor {\n      overflow: hidden;\n      background: #f5f7fa;\n      border: 1px solid #ebeef5;\n      border-radius: 5px;\n      margin-bottom: 20px;\n      &.fixed {\n        position: fixed;\n        width: 285px;\n        box-sizing: border-box;\n      }\n    }\n  }\n}\n</style>\n<template>\n  <div class=\"page-container page-theme-preview\" ref=\"themePreview\">\n    <section class=\"display\">\n      <el-button type=\"text\" icon=\"el-icon-back\" @click=\"navBack\">\n        <%= 1 >\n      </el-button>\n      <h3>{{previewConfig.name}}</h3>\n      <basic-tokens-preview>\n      </basic-tokens-preview>\n      <components-preview>\n      </components-preview>\n    </section>\n    <aside class=\"side\">\n      <section class=\"editor\" :style=\"{top: `${editorTop}px`, height: `${editorHeight}px`}\" :class=\"{'fixed': isFixed}\">\n        <theme-configurator\n          :isOfficial=\"isOfficial\"\n          :themeConfig=\"themeConfig\"\n          :previewConfig=\"previewConfig\"\n          :onUserConfigUpdate=\"onUserConfigUpdate\"\n        >\n        </theme-configurator>\n      </section>\n    </aside>\n  </div>\n</template>\n<script>\nimport bus from '../../bus.js';\nimport ThemeConfigurator from '../../components/theme-configurator';\nimport ComponentsPreview from '../../components/theme/components-preview';\nimport BasicTokensPreview from '../../components/theme/basic-tokens-preview';\nimport {\n  loadPreviewFromLocal,\n  loadUserThemeFromLocal,\n  saveUserThemeToLocal\n} from '../../components/theme/localstorage';\nimport {\n  getThemeConfigObject\n} from '../../components/theme/utils';\nimport {\n  ACTION_APPLY_THEME\n} from '../../components/theme/constant.js';\nimport throttle from 'throttle-debounce/throttle';\nimport { getActionDisplayName } from '../../components/theme-configurator/utils/utils';\n\nconst maxUserTheme = 8;\n\nexport default {\n  components: {\n    ThemeConfigurator,\n    BasicTokensPreview,\n    ComponentsPreview\n  },\n  data() {\n    return {\n      previewConfig: {},\n      themeConfig: {},\n      userTheme: [],\n      editorTop: 0,\n      editorHeight: 1000,\n      isFixed: false\n    };\n  },\n  computed: {\n    isOfficial() {\n      return this.previewConfig.type === 'official';\n    }\n  },\n  created() {\n    this.throttledHandleScroll = throttle(10, true, index => {\n      this.handleScroll(index);\n    });\n  },\n  methods: {\n    navBack() {\n      this.$router.go(-1);\n      this.$nextTick(() => {\n        window.scrollTo(0, 0);\n      });\n    },\n    getNewUserThemeName(originName) {\n      let n = 1;\n      let name;\n      while (true) {\n        name = `${originName}-${n}`;\n        if (this.userTheme.filter(theme => (theme.name === name)).length === 0) {\n          break;\n        }\n        n += 1;\n      }\n      return name;\n    },\n    onUserConfigUpdate(userConfig) {\n      const themeConfig = JSON.stringify(userConfig);\n      const { type, name } = this.previewConfig;\n      if (this.isOfficial) {\n        if (this.userTheme.length >= maxUserTheme) {\n          this.$message.error(getActionDisplayName('max-user-theme'));\n          return;\n        }\n        const autoUserName = this.getNewUserThemeName(name);\n        this.previewConfig.name = autoUserName;\n        this.previewConfig.type = 'user';\n        this.userTheme.push({\n          update: Date.now(),\n          name: autoUserName,\n          theme: themeConfig\n        });\n        saveUserThemeToLocal(this.userTheme);\n        return;\n      }\n      if (type === 'user') {\n        this.userTheme.forEach((config) => {\n          if (config.name === name) {\n            config.update = Date.now();\n            config.theme = themeConfig;\n          }\n        });\n        saveUserThemeToLocal(this.userTheme);\n      }\n    },\n    handleScroll() {\n      const rect = this.$refs.themePreview.getBoundingClientRect();\n      let offsetTop = rect.top;\n      let offsetBottom = rect.bottom;\n      const calHeight = this.editorHeight + 30 + 20;\n      if (offsetTop < 0) {\n        this.isFixed = true;\n        if (offsetBottom < calHeight) {\n          this.editorTop = 30 - calHeight + offsetBottom;\n        } else {\n          this.editorTop = 30;\n        }\n      } else {\n        this.isFixed = false;\n        this.editorTop = 0;\n      }\n    }\n  },\n  beforeDestroy() {\n    window.removeEventListener('scroll', this.throttledHandleScroll);\n  },\n  mounted() {\n    this.editorHeight = window.innerHeight - 40 - 5;\n    window.addEventListener('scroll', this.throttledHandleScroll);\n    this.userTheme = loadUserThemeFromLocal();\n    const previewConfig = loadPreviewFromLocal();\n    const pageRefer = this.$route.params.refer;\n    if (!previewConfig || !pageRefer) {\n      this.$alert(getActionDisplayName('no-preview-config'), getActionDisplayName('notice'), {\n        confirmButtonText: getActionDisplayName('confirm'),\n        callback: action => {\n          const newPath = this.$route.path.replace('/preview', '');\n          this.$router.replace(newPath);\n        }\n      });\n      return;\n    }\n    this.previewConfig = previewConfig;\n    const themeConfig = getThemeConfigObject(previewConfig.theme);\n    if (themeConfig) {\n      this.themeConfig = themeConfig;\n      bus.$emit(ACTION_APPLY_THEME, themeConfig);\n    }\n  }\n};\n</script>\n"
  },
  {
    "path": "examples/pages/template/theme.tpl",
    "content": "<style lang=\"scss\">\n.page-theme {\n  &:last-child {\n    margin-bottom: 55px;\n  }\n  h2 {\n    font-size: 28px;\n    line-height: 28px;\n    margin: 0;\n  }\n  ul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-between;\n  }\n  .theme-card {\n    display: inline-block;\n    height: 150px;\n    height: 16vw;\n    max-height: 230px;\n    flex: 0 0 24%;\n    cursor: default;\n    vertical-align: bottom;\n  }\n  .theme-section {\n    margin-bottom: 20px;\n  }\n  .second-section {\n    margin-top: 60px;\n  }\n}\n</style>\n<template>\n  <div class=\"page-container page-theme\">\n    <section class=\"theme-section\">\n      <h2><%= 1 ></h2>\n      <ul>\n        <li class=\"theme-card\" v-for=\"item in officialTheme\" :key=\"item.name\">\n          <theme-card \n            type=\"official\" \n            :config=\"item\"\n            @action=\"onAction\"\n          ></theme-card>\n        </li>\n      </ul>\n    </section>\n    <section class=\"theme-section second-section\">\n      <h2><%= 2 > ({{userThemeCount}}/{{maxUserTheme}})</h2>\n      <ul>\n        <li class=\"theme-card\" v-if=\"showUserUpload\">\n          <theme-card \n            type=\"upload\" \n            :config=\"{name: 'upload'}\"\n            @action=\"onAction\"\n          ></theme-card>\n        </li>\n        <li class=\"theme-card\" v-for=\"item in displayUserTheme\" :key=\"item.name\">\n          <theme-card \n            type=\"user\"\n            :config=\"item\"\n            @action=\"onAction\"\n          ></theme-card>\n        </li>\n      </ul>\n    </section>\n    <el-dialog :visible.sync=\"copyDialogVisible\">\n      <el-form :model=\"copyForm\" ref=\"copyForm\" :rules=\"copyFormRule\">\n        <el-form-item label=\"<%= 3 >\" prop=\"name\">\n          <el-input v-model=\"copyForm.name\"></el-input>\n        </el-form-item>\n      </el-form>\n      <div slot=\"footer\" class=\"dialog-footer\">\n        <el-button @click=\"closeCopyForm\">{{getActionDisplayName('cancel')}}</el-button>\n        <el-button type=\"primary\" @click=\"copyToUser\">{{getActionDisplayName('confirm')}}</el-button>\n      </div>\n    </el-dialog>\n  </div>\n</template>\n<script>\nimport ThemeCard from '../../components/theme/theme-card.vue';\nimport { themeList, eleThemeList } from '../../components/theme/theme-list.js';\nimport { saveUserThemeToLocal, loadUserThemeFromLocal } from '../../components/theme/localstorage';\nimport { getActionDisplayName } from '../../components/theme-configurator/utils/utils';\n\nconst maxUserTheme = 8;\n\nexport default {\n  components: {\n    ThemeCard\n  },\n  mounted() {\n    this.userTheme = loadUserThemeFromLocal();\n    if (!Array.isArray(this.userTheme)) {\n      this.userTheme = [];\n      saveUserThemeToLocal(this.userTheme);\n    }\n    this.$nextTick(() => {\n      window.scrollTo(0, 0);\n    });\n  },\n  data() {\n    return {\n      userTheme: [],\n      maxUserTheme,\n      copyDialogVisible: false,\n      copyForm: {},\n      copyFormRule: {\n        name: [{\n          validator: this.validateCopyName,\n          trigger: 'blur'\n        }]\n      }\n    };\n  },\n  computed: {\n    officialTheme() {\n      return this.padEmpeyTheme(themeList.concat(this.$isEle ? eleThemeList : []));\n    },\n    userThemeCount() {\n      return this.userTheme.length;\n    },\n    showUserUpload() {\n      return this.userThemeCount < maxUserTheme;\n    },\n    displayUserTheme() {\n      return this.padEmpeyTheme(this.userTheme, this.showUserUpload ? 1 : 0);\n    }\n  },\n  methods: {\n    getActionDisplayName(key) {\n      return getActionDisplayName(key);\n    },\n    validateCopyName(rule, value, callback) {\n      if (!value) {\n        callback(new Error(this.getActionDisplayName('require-them-name')));\n      } else if (this.filterUserThemeByName(value).length > 0) {\n        callback(new Error(this.getActionDisplayName('duplicate-them-name')));\n      } else {\n        callback();\n      }\n    },\n    filterUserThemeByName(name, include = true) {\n      return this.userTheme.filter((theme) => (include ? theme.name === name : theme.name !== name));\n    },\n    padEmpeyTheme(theme, add = 0) {\n      if (!theme.length) return [];\n      const pad = 4 - ((theme.length + add) % 4);\n      if (pad < 4) return theme.concat(Array(pad).fill({}));\n      return theme;\n    },\n    onAction(name, item) {\n      switch (name) {\n        case 'copy':\n          this.openCopyForm(item.theme);\n          break;\n        case 'upload':\n          this.openCopyForm(item);\n          break;\n        case 'rename':\n          this.openRenameForm(item.name);\n          break;\n        case 'delete':\n          this.$confirm(this.getActionDisplayName('confirm-delete-theme'), this.getActionDisplayName('notice'), {\n            confirmButtonText: this.getActionDisplayName('confirm'),\n            cancelButtonText: this.getActionDisplayName('cancel'),\n            type: 'warning'\n          }).then(() => {\n            this.deleteUserThemeByName(item.name);\n          }).catch(() => {});\n          break;\n        default:\n          return;\n      }\n    },\n    deleteUserThemeByName(name) {\n      this.userTheme = this.filterUserThemeByName(name, false);\n      this.saveToLocal();\n    },\n    openRenameForm(name) {\n      this.copyForm.oldname = name;\n      this.copyDialogVisible = true;\n    },\n    openCopyForm(theme) {\n      if (this.userTheme.length >= 8) {\n        this.$message.error(this.getActionDisplayName('max-user-theme'));\n        return;\n      }\n      this.copyForm.theme = theme;\n      this.copyDialogVisible = true;\n    },\n    closeCopyForm() {\n      this.copyDialogVisible = false;\n      this.$nextTick(() => {\n        this.copyForm = {};\n      });\n    },\n    copyToUser() {\n      this.$refs.copyForm.validate((valid) => {\n        if (valid) {\n          const { theme, name, oldname } = this.copyForm;\n          if (theme) {\n            // copy\n            this.userTheme.push({\n              update: Date.now(),\n              name,\n              theme\n            });\n          } else {\n            // rename\n            this.userTheme.forEach((config) => {\n              if (config.name === oldname) {\n                config.update = Date.now();\n                config.name = name;\n              }\n            });\n          }\n          this.saveToLocal();\n          this.closeCopyForm();\n        }\n      });\n    },\n    saveToLocal() {\n      saveUserThemeToLocal(this.userTheme);\n    }\n  }\n};\n</script>\n"
  },
  {
    "path": "examples/play/index.vue",
    "content": "<template>\n  <div style=\"margin: 20px;\">\n    <el-input v-model=\"input\" placeholder=\"请输入内容\"></el-input>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        input: 'Hello Element UI!'\n      };\n    }\n  };\n</script>\n"
  },
  {
    "path": "examples/play.js",
    "content": "import Vue from 'vue';\nimport Element from 'main/index.js';\nimport App from './play/index.vue';\nimport 'packages/theme-chalk/src/index.scss';\n\nVue.use(Element);\n\nnew Vue({ // eslint-disable-line\n  render: h => h(App)\n}).$mount('#app');\n"
  },
  {
    "path": "examples/route.config.js",
    "content": "import navConfig from './nav.config';\nimport langs from './i18n/route';\n\nconst LOAD_MAP = {\n  'zh-CN': name => {\n    return r => require.ensure([], () =>\n      r(require(`./pages/zh-CN/${name}.vue`)),\n    'zh-CN');\n  },\n  'en-US': name => {\n    return r => require.ensure([], () =>\n      r(require(`./pages/en-US/${name}.vue`)),\n    'en-US');\n  },\n  'es': name => {\n    return r => require.ensure([], () =>\n      r(require(`./pages/es/${name}.vue`)),\n    'es');\n  },\n  'fr-FR': name => {\n    return r => require.ensure([], () =>\n      r(require(`./pages/fr-FR/${name}.vue`)),\n    'fr-FR');\n  }\n};\n\nconst load = function(lang, path) {\n  return LOAD_MAP[lang](path);\n};\n\nconst LOAD_DOCS_MAP = {\n  'zh-CN': path => {\n    return r => require.ensure([], () =>\n      r(require(`./docs/zh-CN${path}.md`)),\n    'zh-CN');\n  },\n  'en-US': path => {\n    return r => require.ensure([], () =>\n      r(require(`./docs/en-US${path}.md`)),\n    'en-US');\n  },\n  'es': path => {\n    return r => require.ensure([], () =>\n      r(require(`./docs/es${path}.md`)),\n    'es');\n  },\n  'fr-FR': path => {\n    return r => require.ensure([], () =>\n      r(require(`./docs/fr-FR${path}.md`)),\n    'fr-FR');\n  }\n};\n\nconst loadDocs = function(lang, path) {\n  return LOAD_DOCS_MAP[lang](path);\n};\n\nconst registerRoute = (navConfig) => {\n  let route = [];\n  Object.keys(navConfig).forEach((lang, index) => {\n    let navs = navConfig[lang];\n    route.push({\n      path: `/${ lang }/component`,\n      redirect: `/${ lang }/component/installation`,\n      component: load(lang, 'component'),\n      children: []\n    });\n    navs.forEach(nav => {\n      if (nav.href) return;\n      if (nav.groups) {\n        nav.groups.forEach(group => {\n          group.list.forEach(nav => {\n            addRoute(nav, lang, index);\n          });\n        });\n      } else if (nav.children) {\n        nav.children.forEach(nav => {\n          addRoute(nav, lang, index);\n        });\n      } else {\n        addRoute(nav, lang, index);\n      }\n    });\n  });\n  function addRoute(page, lang, index) {\n    const component = page.path === '/changelog'\n      ? load(lang, 'changelog')\n      : loadDocs(lang, page.path);\n    let child = {\n      path: page.path.slice(1),\n      meta: {\n        title: page.title || page.name,\n        description: page.description,\n        lang\n      },\n      name: 'component-' + lang + (page.title || page.name),\n      component: component.default || component\n    };\n\n    route[index].children.push(child);\n  }\n\n  return route;\n};\n\nlet route = registerRoute(navConfig);\n\nconst generateMiscRoutes = function(lang) {\n  let guideRoute = {\n    path: `/${ lang }/guide`, // 指南\n    redirect: `/${ lang }/guide/design`,\n    component: load(lang, 'guide'),\n    children: [{\n      path: 'design', // 设计原则\n      name: 'guide-design' + lang,\n      meta: { lang },\n      component: load(lang, 'design')\n    }, {\n      path: 'nav', // 导航\n      name: 'guide-nav' + lang,\n      meta: { lang },\n      component: load(lang, 'nav')\n    }]\n  };\n\n  let themeRoute = {\n    path: `/${ lang }/theme`,\n    component: load(lang, 'theme-nav'),\n    children: [\n      {\n        path: '/', // 主题管理\n        name: 'theme' + lang,\n        meta: { lang },\n        component: load(lang, 'theme')\n      },\n      {\n        path: 'preview', // 主题预览编辑\n        name: 'theme-preview-' + lang,\n        meta: { lang },\n        component: load(lang, 'theme-preview')\n      }]\n  };\n\n  let resourceRoute = {\n    path: `/${ lang }/resource`, // 资源\n    meta: { lang },\n    name: 'resource' + lang,\n    component: load(lang, 'resource')\n  };\n\n  let indexRoute = {\n    path: `/${ lang }`, // 首页\n    meta: { lang },\n    name: 'home' + lang,\n    component: load(lang, 'index')\n  };\n\n  return [guideRoute, resourceRoute, themeRoute, indexRoute];\n};\n\nlangs.forEach(lang => {\n  route = route.concat(generateMiscRoutes(lang.lang));\n});\n\nroute.push({\n  path: '/play',\n  name: 'play',\n  component: require('./play/index.vue')\n});\n\nlet userLanguage = localStorage.getItem('ELEMENT_LANGUAGE') || window.navigator.language || 'en-US';\nlet defaultPath = '/en-US';\nif (userLanguage.indexOf('zh-') !== -1) {\n  defaultPath = '/zh-CN';\n} else if (userLanguage.indexOf('es') !== -1) {\n  defaultPath = '/es';\n} else if (userLanguage.indexOf('fr') !== -1) {\n  defaultPath = '/fr-FR';\n}\n\nroute = route.concat([{\n  path: '/',\n  redirect: defaultPath\n}, {\n  path: '*',\n  redirect: defaultPath\n}]);\n\nexport default route;\n"
  },
  {
    "path": "examples/util.js",
    "content": "export function stripScript(content) {\n  const result = content.match(/<(script)>([\\s\\S]+)<\\/\\1>/);\n  return result && result[2] ? result[2].trim() : '';\n}\n\nexport function stripStyle(content) {\n  const result = content.match(/<(style)\\s*>([\\s\\S]+)<\\/\\1>/);\n  return result && result[2] ? result[2].trim() : '';\n}\n\nexport function stripTemplate(content) {\n  content = content.trim();\n  if (!content) {\n    return content;\n  }\n  return content.replace(/<(script|style)[\\s\\S]+<\\/\\1>/g, '').trim();\n}\n"
  },
  {
    "path": "examples/versions.json",
    "content": "{\"1.4.13\":\"1.4\",\"2.0.11\":\"2.0\",\"2.1.0\":\"2.1\",\"2.2.2\":\"2.2\",\"2.3.9\":\"2.3\",\"2.4.11\":\"2.4\",\"2.5.4\":\"2.5\",\"2.6.3\":\"2.6\",\"2.7.2\":\"2.7\",\"2.8.2\":\"2.8\",\"2.9.2\":\"2.9\",\"2.10.1\":\"2.10\",\"2.11.1\":\"2.11\",\"2.12.0\":\"2.12\",\"2.13.2\":\"2.13\",\"2.14.1\":\"2.14\",\"2.15.14\":\"2.15\"}"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"element-ui\",\n  \"version\": \"2.15.14\",\n  \"description\": \"A Component Library for Vue.js.\",\n  \"main\": \"lib/element-ui.common.js\",\n  \"files\": [\n    \"lib\",\n    \"src\",\n    \"packages\",\n    \"types\",\n    \"web-types.json\"\n  ],\n  \"typings\": \"types/index.d.ts\",\n  \"scripts\": {\n    \"bootstrap\": \"yarn || npm i\",\n    \"build:file\": \"node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js\",\n    \"build:theme\": \"node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk\",\n    \"build:utils\": \"cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js\",\n    \"build:umd\": \"node build/bin/build-locale.js\",\n    \"clean\": \"rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage\",\n    \"deploy:build\": \"npm run build:file && cross-env NODE_ENV=production webpack --config build/webpack.demo.js && echo element.eleme.io>>examples/element-ui/CNAME\",\n    \"deploy:extension\": \"cross-env NODE_ENV=production webpack --config build/webpack.extension.js\",\n    \"dev:extension\": \"rimraf examples/extension/dist && cross-env NODE_ENV=development webpack --watch --config build/webpack.extension.js\",\n    \"dev\": \"npm run bootstrap && npm run build:file && cross-env NODE_ENV=development webpack-dev-server --config build/webpack.demo.js & node build/bin/template.js\",\n    \"dev:play\": \"npm run build:file && cross-env NODE_ENV=development PLAY_ENV=true webpack-dev-server --config build/webpack.demo.js\",\n    \"dist\": \"npm run clean && npm run build:file && npm run lint && webpack --config build/webpack.conf.js && webpack --config build/webpack.common.js && webpack --config build/webpack.component.js && npm run build:utils && npm run build:umd && npm run build:theme\",\n    \"i18n\": \"node build/bin/i18n.js\",\n    \"lint\": \"eslint src/**/* test/**/* packages/**/* build/**/* --quiet\",\n    \"pub\": \"npm run bootstrap && sh build/git-release.sh && sh build/release.sh && node build/bin/gen-indices.js\",\n    \"test\": \"npm run lint && npm run build:theme && cross-env CI_ENV=/dev/ BABEL_ENV=test karma start test/unit/karma.conf.js --single-run\",\n    \"test:watch\": \"npm run build:theme && cross-env BABEL_ENV=test karma start test/unit/karma.conf.js\"\n  },\n  \"faas\": [\n    {\n      \"domain\": \"element\",\n      \"public\": \"temp_web/element\"\n    },\n    {\n      \"domain\": \"element-theme\",\n      \"public\": \"examples/element-ui\",\n      \"build\": [\n        \"yarn\",\n        \"npm run deploy:build\"\n      ]\n    }\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git@github.com:ElemeFE/element.git\"\n  },\n  \"homepage\": \"http://element.eleme.io\",\n  \"keywords\": [\n    \"eleme\",\n    \"vue\",\n    \"components\"\n  ],\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/ElemeFE/element/issues\"\n  },\n  \"unpkg\": \"lib/index.js\",\n  \"style\": \"lib/theme-chalk/index.css\",\n  \"web-types\": \"./web-types.json\",\n  \"dependencies\": {\n    \"async-validator\": \"~1.8.1\",\n    \"babel-helper-vue-jsx-merge-props\": \"^2.0.0\",\n    \"deepmerge\": \"^1.2.0\",\n    \"normalize-wheel\": \"^1.0.1\",\n    \"resize-observer-polyfill\": \"^1.5.0\",\n    \"throttle-debounce\": \"^1.0.1\"\n  },\n  \"peerDependencies\": {\n    \"vue\": \"^2.5.17\"\n  },\n  \"devDependencies\": {\n    \"@vue/component-compiler-utils\": \"^2.6.0\",\n    \"algoliasearch\": \"^3.24.5\",\n    \"babel-cli\": \"^6.26.0\",\n    \"babel-core\": \"^6.26.3\",\n    \"babel-loader\": \"^7.1.5\",\n    \"babel-plugin-add-module-exports\": \"^0.2.1\",\n    \"babel-plugin-istanbul\": \"^4.1.1\",\n    \"babel-plugin-module-resolver\": \"^2.2.0\",\n    \"babel-plugin-syntax-jsx\": \"^6.18.0\",\n    \"babel-plugin-transform-vue-jsx\": \"^3.7.0\",\n    \"babel-preset-env\": \"^1.7.0\",\n    \"babel-preset-stage-2\": \"^6.24.1\",\n    \"babel-regenerator-runtime\": \"^6.5.0\",\n    \"chai\": \"^4.2.0\",\n    \"chokidar\": \"^1.7.0\",\n    \"copy-webpack-plugin\": \"^5.0.0\",\n    \"coveralls\": \"^3.0.3\",\n    \"cp-cli\": \"^1.0.2\",\n    \"cross-env\": \"^3.1.3\",\n    \"css-loader\": \"^2.1.0\",\n    \"es6-promise\": \"^4.0.5\",\n    \"eslint\": \"4.18.2\",\n    \"eslint-config-elemefe\": \"0.1.1\",\n    \"eslint-loader\": \"^2.0.0\",\n    \"eslint-plugin-html\": \"^4.0.1\",\n    \"eslint-plugin-json\": \"^1.2.0\",\n    \"file-loader\": \"^1.1.11\",\n    \"file-save\": \"^0.2.0\",\n    \"gulp\": \"^4.0.0\",\n    \"gulp-autoprefixer\": \"^6.0.0\",\n    \"gulp-cssmin\": \"^0.2.0\",\n    \"gulp-sass\": \"^4.0.2\",\n    \"highlight.js\": \"^9.3.0\",\n    \"html-webpack-plugin\": \"^3.2.0\",\n    \"json-loader\": \"^0.5.7\",\n    \"json-templater\": \"^1.0.4\",\n    \"karma\": \"^4.0.1\",\n    \"karma-chrome-launcher\": \"^2.2.0\",\n    \"karma-coverage\": \"^1.1.2\",\n    \"karma-mocha\": \"^1.3.0\",\n    \"karma-sinon-chai\": \"^2.0.2\",\n    \"karma-sourcemap-loader\": \"^0.3.7\",\n    \"karma-spec-reporter\": \"^0.0.32\",\n    \"karma-webpack\": \"^3.0.5\",\n    \"launch-editor-middleware\": \"^2.3.0\",\n    \"markdown-it\": \"^8.4.1\",\n    \"markdown-it-anchor\": \"^5.0.2\",\n    \"markdown-it-chain\": \"^1.3.0\",\n    \"markdown-it-container\": \"^2.0.0\",\n    \"mini-css-extract-plugin\": \"^0.4.1\",\n    \"mocha\": \"^6.0.2\",\n    \"node-sass\": \"^4.11.0\",\n    \"optimize-css-assets-webpack-plugin\": \"^5.0.1\",\n    \"postcss\": \"^7.0.14\",\n    \"progress-bar-webpack-plugin\": \"^1.11.0\",\n    \"rimraf\": \"^2.5.4\",\n    \"sass-loader\": \"^7.1.0\",\n    \"select-version-cli\": \"^0.0.2\",\n    \"sinon\": \"^7.2.7\",\n    \"sinon-chai\": \"^3.3.0\",\n    \"style-loader\": \"^0.23.1\",\n    \"transliteration\": \"^1.1.11\",\n    \"uglifyjs-webpack-plugin\": \"^2.1.1\",\n    \"uppercamelcase\": \"^1.1.0\",\n    \"url-loader\": \"^1.0.1\",\n    \"vue\": \"2.5.21\",\n    \"vue-loader\": \"^15.7.0\",\n    \"vue-router\": \"^3.0.1\",\n    \"vue-template-compiler\": \"2.5.21\",\n    \"vue-template-es2015-compiler\": \"^1.6.0\",\n    \"webpack\": \"^4.14.0\",\n    \"webpack-cli\": \"^3.0.8\",\n    \"webpack-dev-server\": \"^3.1.11\",\n    \"webpack-node-externals\": \"^1.7.2\"\n  }\n}\n"
  },
  {
    "path": "packages/alert/index.js",
    "content": "import Alert from './src/main';\n\n/* istanbul ignore next */\nAlert.install = function(Vue) {\n  Vue.component(Alert.name, Alert);\n};\n\nexport default Alert;\n"
  },
  {
    "path": "packages/alert/src/main.vue",
    "content": "<template>\n  <transition name=\"el-alert-fade\">\n    <div\n      class=\"el-alert\"\n      :class=\"[typeClass, center ? 'is-center' : '', 'is-' + effect]\"\n      v-show=\"visible\"\n      role=\"alert\"\n    >\n      <i class=\"el-alert__icon\" :class=\"[ iconClass, isBigIcon ]\" v-if=\"showIcon\"></i>\n      <div class=\"el-alert__content\">\n        <span class=\"el-alert__title\" :class=\"[ isBoldTitle ]\" v-if=\"title || $slots.title\">\n          <slot name=\"title\">{{ title }}</slot>\n        </span>\n        <p class=\"el-alert__description\" v-if=\"$slots.default && !description\"><slot></slot></p>\n        <p class=\"el-alert__description\" v-if=\"description && !$slots.default\">{{ description }}</p>\n        <i class=\"el-alert__closebtn\" :class=\"{ 'is-customed': closeText !== '', 'el-icon-close': closeText === '' }\" v-show=\"closable\" @click=\"close()\">{{closeText}}</i>\n      </div>\n    </div>\n  </transition>\n</template>\n\n<script type=\"text/babel\">\n  const TYPE_CLASSES_MAP = {\n    'success': 'el-icon-success',\n    'warning': 'el-icon-warning',\n    'error': 'el-icon-error'\n  };\n  export default {\n    name: 'ElAlert',\n\n    props: {\n      title: {\n        type: String,\n        default: ''\n      },\n      description: {\n        type: String,\n        default: ''\n      },\n      type: {\n        type: String,\n        default: 'info'\n      },\n      closable: {\n        type: Boolean,\n        default: true\n      },\n      closeText: {\n        type: String,\n        default: ''\n      },\n      showIcon: Boolean,\n      center: Boolean,\n      effect: {\n        type: String,\n        default: 'light',\n        validator: function(value) {\n          return ['light', 'dark'].indexOf(value) !== -1;\n        }\n      }\n    },\n\n    data() {\n      return {\n        visible: true\n      };\n    },\n\n    methods: {\n      close() {\n        this.visible = false;\n        this.$emit('close');\n      }\n    },\n\n    computed: {\n      typeClass() {\n        return `el-alert--${ this.type }`;\n      },\n\n      iconClass() {\n        return TYPE_CLASSES_MAP[this.type] || 'el-icon-info';\n      },\n\n      isBigIcon() {\n        return this.description || this.$slots.default ? 'is-big' : '';\n      },\n\n      isBoldTitle() {\n        return this.description || this.$slots.default ? 'is-bold' : '';\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/aside/index.js",
    "content": "import Aside from './src/main';\n\n/* istanbul ignore next */\nAside.install = function(Vue) {\n  Vue.component(Aside.name, Aside);\n};\n\nexport default Aside;\n"
  },
  {
    "path": "packages/aside/src/main.vue",
    "content": "<template>\n  <aside class=\"el-aside\" :style=\"{ width }\">\n    <slot></slot>\n  </aside>\n</template>\n\n<script>\n  export default {\n    name: 'ElAside',\n\n    componentName: 'ElAside',\n\n    props: {\n      width: {\n        type: String,\n        default: '300px'\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/autocomplete/index.js",
    "content": "import ElAutocomplete from './src/autocomplete';\n\n/* istanbul ignore next */\nElAutocomplete.install = function(Vue) {\n  Vue.component(ElAutocomplete.name, ElAutocomplete);\n};\n\nexport default ElAutocomplete;\n"
  },
  {
    "path": "packages/autocomplete/src/autocomplete-suggestions.vue",
    "content": "<template>\n  <transition name=\"el-zoom-in-top\" @after-leave=\"doDestroy\">\n    <div\n      v-show=\"showPopper\"\n      class=\"el-autocomplete-suggestion el-popper\"\n      :class=\"{ 'is-loading': !parent.hideLoading && parent.loading }\"\n      :style=\"{ width: dropdownWidth }\"\n      role=\"region\">\n      <el-scrollbar\n        tag=\"ul\"\n        wrap-class=\"el-autocomplete-suggestion__wrap\"\n        view-class=\"el-autocomplete-suggestion__list\">\n        <li v-if=\"!parent.hideLoading && parent.loading\"><i class=\"el-icon-loading\"></i></li>\n        <slot v-else>\n        </slot>\n      </el-scrollbar>\n    </div>\n  </transition>\n</template>\n<script>\n  import Popper from 'element-ui/src/utils/vue-popper';\n  import Emitter from 'element-ui/src/mixins/emitter';\n  import ElScrollbar from 'element-ui/packages/scrollbar';\n\n  export default {\n    components: { ElScrollbar },\n    mixins: [Popper, Emitter],\n\n    componentName: 'ElAutocompleteSuggestions',\n\n    data() {\n      return {\n        parent: this.$parent,\n        dropdownWidth: ''\n      };\n    },\n\n    props: {\n      options: {\n        default() {\n          return {\n            gpuAcceleration: false\n          };\n        }\n      },\n      id: String\n    },\n\n    methods: {\n      select(item) {\n        this.dispatch('ElAutocomplete', 'item-click', item);\n      }\n    },\n\n    updated() {\n      this.$nextTick(_ => {\n        this.popperJS && this.updatePopper();\n      });\n    },\n\n    mounted() {\n      this.$parent.popperElm = this.popperElm = this.$el;\n      this.referenceElm = this.$parent.$refs.input.$refs.input || this.$parent.$refs.input.$refs.textarea;\n      this.referenceList = this.$el.querySelector('.el-autocomplete-suggestion__list');\n      this.referenceList.setAttribute('role', 'listbox');\n      this.referenceList.setAttribute('id', this.id);\n    },\n\n    created() {\n      this.$on('visible', (val, inputWidth) => {\n        this.dropdownWidth = inputWidth + 'px';\n        this.showPopper = val;\n      });\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/autocomplete/src/autocomplete.vue",
    "content": "<template>\n  <div\n    class=\"el-autocomplete\"\n    v-clickoutside=\"close\"\n    aria-haspopup=\"listbox\"\n    role=\"combobox\"\n    :aria-expanded=\"suggestionVisible\"\n    :aria-owns=\"id\"\n  >\n    <el-input\n      ref=\"input\"\n      v-bind=\"[$props, $attrs]\"\n      @input=\"handleInput\"\n      @change=\"handleChange\"\n      @focus=\"handleFocus\"\n      @blur=\"handleBlur\"\n      @clear=\"handleClear\"\n      @keydown.up.native.prevent=\"highlight(highlightedIndex - 1)\"\n      @keydown.down.native.prevent=\"highlight(highlightedIndex + 1)\"\n      @keydown.enter.native=\"handleKeyEnter\"\n      @keydown.native.tab=\"close\"\n    >\n      <template slot=\"prepend\" v-if=\"$slots.prepend\">\n        <slot name=\"prepend\"></slot>\n      </template>\n      <template slot=\"append\" v-if=\"$slots.append\">\n        <slot name=\"append\"></slot>\n      </template>\n      <template slot=\"prefix\" v-if=\"$slots.prefix\">\n        <slot name=\"prefix\"></slot>\n      </template>\n      <template slot=\"suffix\" v-if=\"$slots.suffix\">\n        <slot name=\"suffix\"></slot>\n      </template>\n    </el-input>\n    <el-autocomplete-suggestions\n      visible-arrow\n      :class=\"[popperClass ? popperClass : '']\"\n      :popper-options=\"popperOptions\"\n      :append-to-body=\"popperAppendToBody\"\n      ref=\"suggestions\"\n      :placement=\"placement\"\n      :id=\"id\">\n      <li\n        v-for=\"(item, index) in suggestions\"\n        :key=\"index\"\n        :class=\"{'highlighted': highlightedIndex === index}\"\n        @click=\"select(item)\"\n        :id=\"`${id}-item-${index}`\"\n        role=\"option\"\n        :aria-selected=\"highlightedIndex === index\"\n      >\n        <slot :item=\"item\">\n          {{ item[valueKey] }}\n        </slot>\n      </li>\n    </el-autocomplete-suggestions>\n  </div>\n</template>\n<script>\n  import debounce from 'throttle-debounce/debounce';\n  import ElInput from 'element-ui/packages/input';\n  import Clickoutside from 'element-ui/src/utils/clickoutside';\n  import ElAutocompleteSuggestions from './autocomplete-suggestions.vue';\n  import Emitter from 'element-ui/src/mixins/emitter';\n  import Migrating from 'element-ui/src/mixins/migrating';\n  import { generateId } from 'element-ui/src/utils/util';\n  import Focus from 'element-ui/src/mixins/focus';\n\n  export default {\n    name: 'ElAutocomplete',\n\n    mixins: [Emitter, Focus('input'), Migrating],\n\n    inheritAttrs: false,\n\n    componentName: 'ElAutocomplete',\n\n    components: {\n      ElInput,\n      ElAutocompleteSuggestions\n    },\n\n    directives: { Clickoutside },\n\n    props: {\n      valueKey: {\n        type: String,\n        default: 'value'\n      },\n      popperClass: String,\n      popperOptions: Object,\n      placeholder: String,\n      clearable: {\n        type: Boolean,\n        default: false\n      },\n      disabled: Boolean,\n      name: String,\n      size: String,\n      value: String,\n      maxlength: Number,\n      minlength: Number,\n      autofocus: Boolean,\n      fetchSuggestions: Function,\n      triggerOnFocus: {\n        type: Boolean,\n        default: true\n      },\n      customItem: String,\n      selectWhenUnmatched: {\n        type: Boolean,\n        default: false\n      },\n      prefixIcon: String,\n      suffixIcon: String,\n      label: String,\n      debounce: {\n        type: Number,\n        default: 300\n      },\n      placement: {\n        type: String,\n        default: 'bottom-start'\n      },\n      hideLoading: Boolean,\n      popperAppendToBody: {\n        type: Boolean,\n        default: true\n      },\n      highlightFirstItem: {\n        type: Boolean,\n        default: false\n      }\n    },\n    data() {\n      return {\n        activated: false,\n        suggestions: [],\n        loading: false,\n        highlightedIndex: -1,\n        suggestionDisabled: false\n      };\n    },\n    computed: {\n      suggestionVisible() {\n        const suggestions = this.suggestions;\n        let isValidData = Array.isArray(suggestions) && suggestions.length > 0;\n        return (isValidData || this.loading) && this.activated;\n      },\n      id() {\n        return `el-autocomplete-${generateId()}`;\n      }\n    },\n    watch: {\n      suggestionVisible(val) {\n        let $input = this.getInput();\n        if ($input) {\n          this.broadcast('ElAutocompleteSuggestions', 'visible', [val, $input.offsetWidth]);\n        }\n      }\n    },\n    methods: {\n      getMigratingConfig() {\n        return {\n          props: {\n            'custom-item': 'custom-item is removed, use scoped slot instead.',\n            'props': 'props is removed, use value-key instead.'\n          }\n        };\n      },\n      getData(queryString) {\n        if (this.suggestionDisabled) {\n          return;\n        }\n        this.loading = true;\n        this.fetchSuggestions(queryString, (suggestions) => {\n          this.loading = false;\n          if (this.suggestionDisabled) {\n            return;\n          }\n          if (Array.isArray(suggestions)) {\n            this.suggestions = suggestions;\n            this.highlightedIndex = this.highlightFirstItem ? 0 : -1;\n          } else {\n            console.error('[Element Error][Autocomplete]autocomplete suggestions must be an array');\n          }\n        });\n      },\n      handleInput(value) {\n        this.$emit('input', value);\n        this.suggestionDisabled = false;\n        if (!this.triggerOnFocus && !value) {\n          this.suggestionDisabled = true;\n          this.suggestions = [];\n          return;\n        }\n        this.debouncedGetData(value);\n      },\n      handleChange(value) {\n        this.$emit('change', value);\n      },\n      handleFocus(event) {\n        this.activated = true;\n        this.$emit('focus', event);\n        if (this.triggerOnFocus) {\n          this.debouncedGetData(this.value);\n        }\n      },\n      handleBlur(event) {\n        this.$emit('blur', event);\n      },\n      handleClear() {\n        this.activated = false;\n        this.$emit('clear');\n      },\n      close(e) {\n        this.activated = false;\n      },\n      handleKeyEnter(e) {\n        if (this.suggestionVisible && this.highlightedIndex >= 0 && this.highlightedIndex < this.suggestions.length) {\n          e.preventDefault();\n          this.select(this.suggestions[this.highlightedIndex]);\n        } else if (this.selectWhenUnmatched) {\n          this.$emit('select', {value: this.value});\n          this.$nextTick(_ => {\n            this.suggestions = [];\n            this.highlightedIndex = -1;\n          });\n        }\n      },\n      select(item) {\n        this.$emit('input', item[this.valueKey]);\n        this.$emit('select', item);\n        this.$nextTick(_ => {\n          this.suggestions = [];\n          this.highlightedIndex = -1;\n        });\n      },\n      highlight(index) {\n        if (!this.suggestionVisible || this.loading) { return; }\n        if (index < 0) {\n          this.highlightedIndex = -1;\n          return;\n        }\n        if (index >= this.suggestions.length) {\n          index = this.suggestions.length - 1;\n        }\n        const suggestion = this.$refs.suggestions.$el.querySelector('.el-autocomplete-suggestion__wrap');\n        const suggestionList = suggestion.querySelectorAll('.el-autocomplete-suggestion__list li');\n\n        let highlightItem = suggestionList[index];\n        let scrollTop = suggestion.scrollTop;\n        let offsetTop = highlightItem.offsetTop;\n\n        if (offsetTop + highlightItem.scrollHeight > (scrollTop + suggestion.clientHeight)) {\n          suggestion.scrollTop += highlightItem.scrollHeight;\n        }\n        if (offsetTop < scrollTop) {\n          suggestion.scrollTop -= highlightItem.scrollHeight;\n        }\n        this.highlightedIndex = index;\n        let $input = this.getInput();\n        $input.setAttribute('aria-activedescendant', `${this.id}-item-${this.highlightedIndex}`);\n      },\n      getInput() {\n        return this.$refs.input.getInput();\n      }\n    },\n    mounted() {\n      this.debouncedGetData = debounce(this.debounce, this.getData);\n      this.$on('item-click', item => {\n        this.select(item);\n      });\n      let $input = this.getInput();\n      $input.setAttribute('role', 'textbox');\n      $input.setAttribute('aria-autocomplete', 'list');\n      $input.setAttribute('aria-controls', 'id');\n      $input.setAttribute('aria-activedescendant', `${this.id}-item-${this.highlightedIndex}`);\n    },\n    beforeDestroy() {\n      this.$refs.suggestions.$destroy();\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/avatar/index.js",
    "content": "import Avatar from './src/main';\n\n/* istanbul ignore next */\nAvatar.install = function(Vue) {\n  Vue.component(Avatar.name, Avatar);\n};\n\nexport default Avatar;\n"
  },
  {
    "path": "packages/avatar/src/main.vue",
    "content": "<script>\nexport default {\n  name: 'ElAvatar',\n\n  props: {\n    size: {\n      type: [Number, String],\n      validator(val) {\n        if (typeof val === 'string') {\n          return ['large', 'medium', 'small'].includes(val);\n        }\n        return typeof val === 'number';\n      }\n    },\n    shape: {\n      type: String,\n      default: 'circle',\n      validator(val) {\n        return ['circle', 'square'].includes(val);\n      }\n    },\n    icon: String,\n    src: String,\n    alt: String,\n    srcSet: String,\n    error: Function,\n    fit: {\n      type: String,\n      default: 'cover'\n    }\n  },\n\n  data() {\n    return {\n      isImageExist: true\n    };\n  },\n\n  computed: {\n    avatarClass() {\n      const { size, icon, shape } = this;\n      let classList = ['el-avatar'];\n\n      if (size && typeof size === 'string') {\n        classList.push(`el-avatar--${size}`);\n      }\n\n      if (icon) {\n        classList.push('el-avatar--icon');\n      }\n\n      if (shape) {\n        classList.push(`el-avatar--${shape}`);\n      }\n\n      return classList.join(' ');\n    }\n  },\n\n  methods: {\n    handleError() {\n      const { error } = this;\n      const errorFlag = error ? error() : undefined;\n      if (errorFlag !== false) {\n        this.isImageExist = false;\n      }\n    },\n    renderAvatar() {\n      const { icon, src, alt, isImageExist, srcSet, fit } = this;\n\n      if (isImageExist && src) {\n        return <img\n          src={src}\n          onError={this.handleError}\n          alt={alt}\n          srcSet={srcSet}\n          style={{ 'object-fit': fit }}/>;\n      }\n\n      if (icon) {\n        return (<i class={icon} />);\n      }\n\n      return this.$slots.default;\n    }\n  },\n\n  render() {\n    const { avatarClass, size } = this;\n\n    const sizeStyle = typeof size === 'number' ? {\n      height: `${size}px`,\n      width: `${size}px`,\n      lineHeight: `${size}px`\n    } : {};\n\n    return (\n      <span class={ avatarClass } style={ sizeStyle }>\n        {\n          this.renderAvatar()\n        }\n      </span>\n    );\n  }\n\n};\n</script>\n"
  },
  {
    "path": "packages/backtop/index.js",
    "content": "import Backtop from './src/main';\n\n/* istanbul ignore next */\nBacktop.install = function(Vue) {\n  Vue.component(Backtop.name, Backtop);\n};\n\nexport default Backtop;\n"
  },
  {
    "path": "packages/backtop/src/main.vue",
    "content": "<template>\n  <transition name=\"el-fade-in\">\n    <div\n      v-if=\"visible\"\n      @click.stop=\"handleClick\"\n      :style=\"{\n        'right': styleRight,\n        'bottom': styleBottom\n      }\"\n      class=\"el-backtop\">\n      <slot>\n        <el-icon name=\"caret-top\"></el-icon>\n      </slot>\n    </div>\n  </transition>\n</template>\n\n<script>\nimport throttle from 'throttle-debounce/throttle';\n\nconst cubic = value => Math.pow(value, 3);\nconst easeInOutCubic = value => value < 0.5\n  ? cubic(value * 2) / 2\n  : 1 - cubic((1 - value) * 2) / 2;\n\nexport default {\n  name: 'ElBacktop',\n\n  props: {\n    visibilityHeight: {\n      type: Number,\n      default: 200\n    },\n    target: [String],\n    right: {\n      type: Number,\n      default: 40\n    },\n    bottom: {\n      type: Number,\n      default: 40\n    }\n  },\n\n  data() {\n    return {\n      el: null,\n      container: null,\n      visible: false\n    };\n  },\n\n  computed: {\n    styleBottom() {\n      return `${this.bottom}px`;\n    },\n    styleRight() {\n      return `${this.right}px`;\n    }\n  },\n\n  mounted() {\n    this.init();\n    this.throttledScrollHandler = throttle(300, this.onScroll);\n    this.container.addEventListener('scroll', this.throttledScrollHandler);\n  },\n\n  methods: {\n    init() {\n      this.container = document;\n      this.el = document.documentElement;\n      if (this.target) {\n        this.el = document.querySelector(this.target);\n        if (!this.el) {\n          throw new Error(`target is not existed: ${this.target}`);\n        }\n        this.container = this.el;\n      }\n    },\n    onScroll() {\n      const scrollTop = this.el.scrollTop;\n      this.visible = scrollTop >= this.visibilityHeight;\n    },\n    handleClick(e) {\n      this.scrollToTop();\n      this.$emit('click', e);\n    },\n    scrollToTop() {\n      const el = this.el;\n      const beginTime = Date.now();\n      const beginValue = el.scrollTop;\n      const rAF = window.requestAnimationFrame || (func => setTimeout(func, 16));\n      const frameFunc = () => {\n        const progress = (Date.now() - beginTime) / 500;\n        if (progress < 1) {\n          el.scrollTop = beginValue * (1 - easeInOutCubic(progress));\n          rAF(frameFunc);\n        } else {\n          el.scrollTop = 0;\n        }\n      };\n      rAF(frameFunc);\n    }\n  },\n\n  beforeDestroy() {\n    this.container.removeEventListener('scroll', this.throttledScrollHandler);\n  }\n};\n</script>\n"
  },
  {
    "path": "packages/badge/index.js",
    "content": "import Badge from './src/main';\n\n/* istanbul ignore next */\nBadge.install = function(Vue) {\n  Vue.component(Badge.name, Badge);\n};\n\nexport default Badge;\n"
  },
  {
    "path": "packages/badge/src/main.vue",
    "content": "<template>\n  <div class=\"el-badge\">\n    <slot></slot>\n    <transition name=\"el-zoom-in-center\">\n      <sup\n        v-show=\"!hidden && (content || content === 0 || isDot)\"\n        v-text=\"content\"\n        class=\"el-badge__content\"\n        :class=\"[\n          type ? 'el-badge__content--' + type : null,\n          {\n            'is-fixed': $slots.default,\n            'is-dot': isDot\n          }\n        ]\">\n      </sup>\n    </transition>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'ElBadge',\n\n  props: {\n    value: [String, Number],\n    max: Number,\n    isDot: Boolean,\n    hidden: Boolean,\n    type: {\n      type: String,\n      validator(val) {\n        return ['primary', 'success', 'warning', 'info', 'danger'].indexOf(val) > -1;\n      }\n    }\n  },\n\n  computed: {\n    content() {\n      if (this.isDot) return;\n\n      const value = this.value;\n      const max = this.max;\n\n      if (typeof value === 'number' && typeof max === 'number') {\n        return max < value ? `${max}+` : value;\n      }\n\n      return value;\n    }\n  }\n};\n</script>\n"
  },
  {
    "path": "packages/breadcrumb/index.js",
    "content": "import ElBreadcrumb from './src/breadcrumb';\n\n/* istanbul ignore next */\nElBreadcrumb.install = function(Vue) {\n  Vue.component(ElBreadcrumb.name, ElBreadcrumb);\n};\n\nexport default ElBreadcrumb;\n"
  },
  {
    "path": "packages/breadcrumb/src/breadcrumb-item.vue",
    "content": "<template>\n  <span class=\"el-breadcrumb__item\">\n    <span\n      :class=\"['el-breadcrumb__inner', to ? 'is-link' : '']\"\n      ref=\"link\"\n      role=\"link\">\n      <slot></slot>\n    </span>\n    <i v-if=\"separatorClass\" class=\"el-breadcrumb__separator\" :class=\"separatorClass\"></i>\n    <span v-else class=\"el-breadcrumb__separator\" role=\"presentation\">{{separator}}</span>\n  </span>\n</template>\n<script>\n  export default {\n    name: 'ElBreadcrumbItem',\n    props: {\n      to: {},\n      replace: Boolean\n    },\n    data() {\n      return {\n        separator: '',\n        separatorClass: ''\n      };\n    },\n\n    inject: ['elBreadcrumb'],\n\n    mounted() {\n      this.separator = this.elBreadcrumb.separator;\n      this.separatorClass = this.elBreadcrumb.separatorClass;\n      const link = this.$refs.link;\n      link.setAttribute('role', 'link');\n      link.addEventListener('click', _ => {\n        const { to, $router } = this;\n        if (!to || !$router) return;\n        this.replace ? $router.replace(to) : $router.push(to);\n      });\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/breadcrumb/src/breadcrumb.vue",
    "content": "<template>\n  <div class=\"el-breadcrumb\" aria-label=\"Breadcrumb\" role=\"navigation\">\n    <slot></slot>\n  </div>\n</template>\n<script>\n  export default {\n    name: 'ElBreadcrumb',\n\n    props: {\n      separator: {\n        type: String,\n        default: '/'\n      },\n      separatorClass: {\n        type: String,\n        default: ''\n      }\n    },\n\n    provide() {\n      return {\n        elBreadcrumb: this\n      };\n    },\n\n    mounted() {\n      const items = this.$el.querySelectorAll('.el-breadcrumb__item');\n      if (items.length) {\n        items[items.length - 1].setAttribute('aria-current', 'page');\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/breadcrumb-item/index.js",
    "content": "import ElBreadcrumbItem from '../breadcrumb/src/breadcrumb-item';\n\n/* istanbul ignore next */\nElBreadcrumbItem.install = function(Vue) {\n  Vue.component(ElBreadcrumbItem.name, ElBreadcrumbItem);\n};\n\nexport default ElBreadcrumbItem;\n"
  },
  {
    "path": "packages/button/index.js",
    "content": "import ElButton from './src/button';\n\n/* istanbul ignore next */\nElButton.install = function(Vue) {\n  Vue.component(ElButton.name, ElButton);\n};\n\nexport default ElButton;\n"
  },
  {
    "path": "packages/button/src/button-group.vue",
    "content": "<template>\n  <div class=\"el-button-group\">\n    <slot></slot>\n  </div>\n</template>\n<script>\n  export default {\n    name: 'ElButtonGroup'\n  };\n</script>\n"
  },
  {
    "path": "packages/button/src/button.vue",
    "content": "<template>\n  <button\n    class=\"el-button\"\n    @click=\"handleClick\"\n    :disabled=\"buttonDisabled || loading\"\n    :autofocus=\"autofocus\"\n    :type=\"nativeType\"\n    :class=\"[\n      type ? 'el-button--' + type : '',\n      buttonSize ? 'el-button--' + buttonSize : '',\n      {\n        'is-disabled': buttonDisabled,\n        'is-loading': loading,\n        'is-plain': plain,\n        'is-round': round,\n        'is-circle': circle\n      }\n    ]\"\n  >\n    <i class=\"el-icon-loading\" v-if=\"loading\"></i>\n    <i :class=\"icon\" v-if=\"icon && !loading\"></i>\n    <span v-if=\"$slots.default\"><slot></slot></span>\n  </button>\n</template>\n<script>\n  export default {\n    name: 'ElButton',\n\n    inject: {\n      elForm: {\n        default: ''\n      },\n      elFormItem: {\n        default: ''\n      }\n    },\n\n    props: {\n      type: {\n        type: String,\n        default: 'default'\n      },\n      size: String,\n      icon: {\n        type: String,\n        default: ''\n      },\n      nativeType: {\n        type: String,\n        default: 'button'\n      },\n      loading: Boolean,\n      disabled: Boolean,\n      plain: Boolean,\n      autofocus: Boolean,\n      round: Boolean,\n      circle: Boolean\n    },\n\n    computed: {\n      _elFormItemSize() {\n        return (this.elFormItem || {}).elFormItemSize;\n      },\n      buttonSize() {\n        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;\n      },\n      buttonDisabled() {\n        return this.$options.propsData.hasOwnProperty('disabled') ? this.disabled : (this.elForm || {}).disabled;\n      }\n    },\n\n    methods: {\n      handleClick(evt) {\n        this.$emit('click', evt);\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/button-group/index.js",
    "content": "import ElButtonGroup from '../button/src/button-group';\n\n/* istanbul ignore next */\nElButtonGroup.install = function(Vue) {\n  Vue.component(ElButtonGroup.name, ElButtonGroup);\n};\n\nexport default ElButtonGroup;\n"
  },
  {
    "path": "packages/calendar/index.js",
    "content": "import Calendar from './src/main';\n\n/* istanbul ignore next */\nCalendar.install = function(Vue) {\n  Vue.component(Calendar.name, Calendar);\n};\n\nexport default Calendar;\n"
  },
  {
    "path": "packages/calendar/src/date-table.vue",
    "content": "<script>\nimport fecha from 'element-ui/src/utils/date';\nimport { range as rangeArr, getFirstDayOfMonth, getPrevMonthLastDays, getMonthDays, getI18nSettings, validateRangeInOneMonth } from 'element-ui/src/utils/date-util';\n\nexport default {\n  props: {\n    selectedDay: String, // formated date yyyy-MM-dd\n    range: {\n      type: Array,\n      validator(val) {\n        if (!(val && val.length)) return true;\n        const [start, end] = val;\n        return validateRangeInOneMonth(start, end);\n      }\n    },\n    date: Date,\n    hideHeader: Boolean,\n    firstDayOfWeek: Number\n  },\n\n  inject: ['elCalendar'],\n\n  methods: {\n    toNestedArr(days) {\n      return rangeArr(days.length / 7).map((_, index) => {\n        const start = index * 7;\n        return days.slice(start, start + 7);\n      });\n    },\n\n    getFormateDate(day, type) {\n      if (!day || ['prev', 'current', 'next'].indexOf(type) === -1) {\n        throw new Error('invalid day or type');\n      }\n      let prefix = this.curMonthDatePrefix;\n      if (type === 'prev') {\n        prefix = this.prevMonthDatePrefix;\n      } else if (type === 'next') {\n        prefix = this.nextMonthDatePrefix;\n      }\n      day = `00${day}`.slice(-2);\n      return `${prefix}-${day}`;\n    },\n\n    getCellClass({ text, type}) {\n      const classes = [type];\n      if (type === 'current') {\n        const date = this.getFormateDate(text, type);\n        if (date === this.selectedDay) {\n          classes.push('is-selected');\n        }\n        if (date === this.formatedToday) {\n          classes.push('is-today');\n        }\n      }\n      return classes;\n    },\n\n    pickDay({ text, type }) {\n      const date = this.getFormateDate(text, type);\n      this.$emit('pick', date);\n    },\n\n    cellRenderProxy({ text, type }) {\n      let render = this.elCalendar.$scopedSlots.dateCell;\n      if (!render) return <span>{ text }</span>;\n\n      const day = this.getFormateDate(text, type);\n      const date = new Date(day);\n      const data = {\n        isSelected: this.selectedDay === day,\n        type: `${type}-month`,\n        day\n      };\n      return render({ date, data });\n    }\n  },\n\n  computed: {\n    WEEK_DAYS() {\n      return getI18nSettings().dayNames;\n    },\n    prevMonthDatePrefix() {\n      const temp = new Date(this.date.getTime());\n      temp.setDate(0);\n      return fecha.format(temp, 'yyyy-MM');\n    },\n\n    curMonthDatePrefix() {\n      return fecha.format(this.date, 'yyyy-MM');\n    },\n\n    nextMonthDatePrefix() {\n      const temp = new Date(this.date.getFullYear(), this.date.getMonth() + 1, 1);\n      return fecha.format(temp, 'yyyy-MM');\n    },\n\n    formatedToday() {\n      return this.elCalendar.formatedToday;\n    },\n\n    isInRange() {\n      return this.range && this.range.length;\n    },\n\n    rows() {\n      let days = [];\n      // if range exists, should render days in range.\n      if (this.isInRange) {\n        const [start, end] = this.range;\n        const currentMonthRange = rangeArr(end.getDate() - start.getDate() + 1).map((_, index) => ({\n          text: start.getDate() + index,\n          type: 'current'\n        }));\n        let remaining = currentMonthRange.length % 7;\n        remaining = remaining === 0 ? 0 : 7 - remaining;\n        const nextMonthRange = rangeArr(remaining).map((_, index) => ({\n          text: index + 1,\n          type: 'next'\n        }));\n        days = currentMonthRange.concat(nextMonthRange);\n      } else {\n        const date = this.date;\n        let firstDay = getFirstDayOfMonth(date);\n        firstDay = firstDay === 0 ? 7 : firstDay;\n        const firstDayOfWeek = typeof this.firstDayOfWeek === 'number' ? this.firstDayOfWeek : 1;\n        const offset = (7 + firstDay - firstDayOfWeek) % 7;\n        const prevMonthDays = getPrevMonthLastDays(date, offset).map(day => ({\n          text: day,\n          type: 'prev'\n        }));\n        const currentMonthDays = getMonthDays(date).map(day => ({\n          text: day,\n          type: 'current'\n        }));\n        days = [...prevMonthDays, ...currentMonthDays];\n        const nextMonthDays = rangeArr(42 - days.length).map((_, index) => ({\n          text: index + 1,\n          type: 'next'\n        }));\n        days = days.concat(nextMonthDays);\n      }\n      return this.toNestedArr(days);\n    },\n\n    weekDays() {\n      const start = this.firstDayOfWeek;\n      const { WEEK_DAYS } = this;\n\n      if (typeof start !== 'number' || start === 0) {\n        return WEEK_DAYS.slice();\n      } else {\n        return WEEK_DAYS.slice(start).concat(WEEK_DAYS.slice(0, start));\n      }\n    }\n  },\n\n  render() {\n    const thead = this.hideHeader ? null : (<thead>\n      {\n        this.weekDays.map(day => <th key={day}>{ day }</th>)\n      }\n    </thead>);\n    return (\n      <table\n        class={{\n          'el-calendar-table': true,\n          'is-range': this.isInRange\n        }}\n        cellspacing=\"0\"\n        cellpadding=\"0\">\n        {\n          thead\n        }\n        <tbody>\n          {\n            this.rows.map((row, index) => <tr\n              class={{\n                'el-calendar-table__row': true,\n                'el-calendar-table__row--hide-border': index === 0 && this.hideHeader\n              }}\n              key={index}>\n              {\n                row.map((cell, key) => <td key={key}\n                  class={ this.getCellClass(cell) }\n                  onClick={this.pickDay.bind(this, cell)}>\n                  <div class=\"el-calendar-day\">\n                    {\n                      this.cellRenderProxy(cell)\n                    }\n                  </div>\n                </td>)\n              }\n            </tr>)\n          }\n        </tbody>\n      </table>);\n  }\n};\n</script>\n"
  },
  {
    "path": "packages/calendar/src/main.vue",
    "content": "<template>\n  <div class=\"el-calendar\">\n    <div class=\"el-calendar__header\">\n      <div class=\"el-calendar__title\">\n        {{ i18nDate }}\n      </div>\n      <div\n        class=\"el-calendar__button-group\"\n        v-if=\"validatedRange.length === 0\">\n        <el-button-group>\n          <el-button\n            type=\"plain\"\n            size=\"mini\"\n            @click=\"selectDate('prev-month')\">\n            {{ t('el.datepicker.prevMonth') }}\n          </el-button>\n          <el-button\n            type=\"plain\"\n            size=\"mini\"\n            @click=\"selectDate('today')\">\n            {{ t('el.datepicker.today') }}\n          </el-button>\n          <el-button\n            type=\"plain\"\n            size=\"mini\"\n            @click=\"selectDate('next-month')\">\n            {{ t('el.datepicker.nextMonth') }}\n          </el-button>\n        </el-button-group>\n      </div>\n    </div>\n    <div\n      class=\"el-calendar__body\"\n      v-if=\"validatedRange.length === 0\"\n      key=\"no-range\">\n      <date-table\n        :date=\"date\"\n        :selected-day=\"realSelectedDay\"\n        :first-day-of-week=\"realFirstDayOfWeek\"\n        @pick=\"pickDay\" />\n    </div>\n    <div\n      v-else\n      class=\"el-calendar__body\"\n      key=\"has-range\">\n      <date-table\n        v-for=\"(range, index) in validatedRange\"\n        :key=\"index\"\n        :date=\"range[0]\"\n        :selected-day=\"realSelectedDay\"\n        :range=\"range\"\n        :hide-header=\"index !== 0\"\n        :first-day-of-week=\"realFirstDayOfWeek\"\n        @pick=\"pickDay\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport Locale from 'element-ui/src/mixins/locale';\nimport fecha from 'element-ui/src/utils/date';\nimport ElButton from 'element-ui/packages/button';\nimport ElButtonGroup from 'element-ui/packages/button-group';\nimport DateTable from './date-table';\nimport { validateRangeInOneMonth } from 'element-ui/src/utils/date-util';\n\nconst validTypes = ['prev-month', 'today', 'next-month'];\nconst weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];\nconst oneDay = 86400000;\n\nexport default {\n  name: 'ElCalendar',\n\n  mixins: [Locale],\n\n  components: {\n    DateTable,\n    ElButton,\n    ElButtonGroup\n  },\n\n  props: {\n    value: [Date, String, Number],\n    range: {\n      type: Array,\n      validator(range) {\n        if (Array.isArray(range)) {\n          return range.length === 2 && range.every(\n            item => typeof item === 'string' ||\n            typeof item === 'number' ||\n            item instanceof Date);\n        } else {\n          return true;\n        }\n      }\n    },\n    firstDayOfWeek: {\n      type: Number,\n      default: 1\n    }\n  },\n\n  provide() {\n    return {\n      elCalendar: this\n    };\n  },\n\n  methods: {\n    pickDay(day) {\n      this.realSelectedDay = day;\n    },\n\n    selectDate(type) {\n      if (validTypes.indexOf(type) === -1) {\n        throw new Error(`invalid type ${type}`);\n      }\n      let day = '';\n      if (type === 'prev-month') {\n        day = `${this.prevMonthDatePrefix}-01`;\n      } else if (type === 'next-month') {\n        day = `${this.nextMonthDatePrefix}-01`;\n      } else {\n        day = this.formatedToday;\n      }\n\n      if (day === this.formatedDate) return;\n      this.pickDay(day);\n    },\n\n    toDate(val) {\n      if (!val) {\n        throw new Error('invalid val');\n      }\n      return val instanceof Date ? val : new Date(val);\n    },\n\n    rangeValidator(date, isStart) {\n      const firstDayOfWeek = this.realFirstDayOfWeek;\n      const expected = isStart ? firstDayOfWeek : (firstDayOfWeek === 0 ? 6 : firstDayOfWeek - 1);\n      const message = `${isStart ? 'start' : 'end'} of range should be ${weekDays[expected]}.`;\n      if (date.getDay() !== expected) {\n        console.warn('[ElementCalendar]', message, 'Invalid range will be ignored.');\n        return false;\n      }\n      return true;\n    }\n  },\n\n  computed: {\n    prevMonthDatePrefix() {\n      const temp = new Date(this.date.getTime());\n      temp.setDate(0);\n      return fecha.format(temp, 'yyyy-MM');\n    },\n\n    curMonthDatePrefix() {\n      return fecha.format(this.date, 'yyyy-MM');\n    },\n\n    nextMonthDatePrefix() {\n      const temp = new Date(this.date.getFullYear(), this.date.getMonth() + 1, 1);\n      return fecha.format(temp, 'yyyy-MM');\n    },\n\n    formatedDate() {\n      return fecha.format(this.date, 'yyyy-MM-dd');\n    },\n\n    i18nDate() {\n      const year = this.date.getFullYear();\n      const month = this.date.getMonth() + 1;\n      return `${year} ${this.t('el.datepicker.year')} ${this.t('el.datepicker.month' + month)}`;\n    },\n\n    formatedToday() {\n      return fecha.format(this.now, 'yyyy-MM-dd');\n    },\n\n    realSelectedDay: {\n      get() {\n        if (!this.value) return this.selectedDay;\n        return this.formatedDate;\n      },\n      set(val) {\n        this.selectedDay = val;\n        const date = new Date(val);\n        this.$emit('input', date);\n      }\n    },\n\n    date() {\n      if (!this.value) {\n        if (this.realSelectedDay) {\n          const d = this.selectedDay.split('-');\n          return new Date(d[0], d[1] - 1, d[2]);\n        } else if (this.validatedRange.length) {\n          return this.validatedRange[0][0];\n        }\n        return this.now;\n      } else {\n        return this.toDate(this.value);\n      }\n    },\n\n    // if range is valid, we get a two-digit array\n    validatedRange() {\n      let range = this.range;\n      if (!range) return [];\n      range = range.reduce((prev, val, index) => {\n        const date = this.toDate(val);\n        if (this.rangeValidator(date, index === 0)) {\n          prev = prev.concat(date);\n        }\n        return prev;\n      }, []);\n      if (range.length === 2) {\n        const [start, end] = range;\n        if (start > end) {\n          console.warn('[ElementCalendar]end time should be greater than start time');\n          return [];\n        }\n        // start time and end time in one month\n        if (validateRangeInOneMonth(start, end)) {\n          return [\n            [start, end]\n          ];\n        }\n        const data = [];\n        let startDay = new Date(start.getFullYear(), start.getMonth() + 1, 1);\n        const lastDay = this.toDate(startDay.getTime() - oneDay);\n        if (!validateRangeInOneMonth(startDay, end)) {\n          console.warn('[ElementCalendar]start time and end time interval must not exceed two months');\n          return [];\n        }\n        // 第一个月的时间范围\n        data.push([\n          start,\n          lastDay\n        ]);\n        // 下一月的时间范围，需要计算一下该月的第一个周起始日\n        const firstDayOfWeek = this.realFirstDayOfWeek;\n        const nextMontFirstDay = startDay.getDay();\n        let interval = 0;\n        if (nextMontFirstDay !== firstDayOfWeek) {\n          if (firstDayOfWeek === 0) {\n            interval = 7 - nextMontFirstDay;\n          } else {\n            interval = firstDayOfWeek - nextMontFirstDay;\n            interval = interval > 0 ? interval : 7 + interval;\n          }\n        }\n        startDay = this.toDate(startDay.getTime() + interval * oneDay);\n        if (startDay.getDate() < end.getDate()) {\n          data.push([\n            startDay,\n            end\n          ]);\n        }\n        return data;\n      }\n      return [];\n    },\n\n    realFirstDayOfWeek() {\n      if (this.firstDayOfWeek < 1 || this.firstDayOfWeek > 6) {\n        return 0;\n      }\n      return Math.floor(this.firstDayOfWeek);\n    }\n  },\n\n  data() {\n    return {\n      selectedDay: '',\n      now: new Date()\n    };\n  }\n};\n</script>\n"
  },
  {
    "path": "packages/card/index.js",
    "content": "import Card from './src/main';\n\n/* istanbul ignore next */\nCard.install = function(Vue) {\n  Vue.component(Card.name, Card);\n};\n\nexport default Card;\n"
  },
  {
    "path": "packages/card/src/main.vue",
    "content": "<template>\n  <div class=\"el-card\" :class=\"shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow'\">\n    <div class=\"el-card__header\" v-if=\"$slots.header || header\">\n      <slot name=\"header\">{{ header }}</slot>\n    </div>\n    <div class=\"el-card__body\" :style=\"bodyStyle\">\n      <slot></slot>\n    </div>\n  </div>\n</template>\n\n<script>\n  export default {\n    name: 'ElCard',\n    props: {\n      header: {},\n      bodyStyle: {},\n      shadow: {\n        type: String\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/carousel/index.js",
    "content": "import Carousel from './src/main';\n\n/* istanbul ignore next */\nCarousel.install = function(Vue) {\n  Vue.component(Carousel.name, Carousel);\n};\n\nexport default Carousel;\n"
  },
  {
    "path": "packages/carousel/src/item.vue",
    "content": "<template>\n  <div\n    v-show=\"ready\"\n    class=\"el-carousel__item\"\n    :class=\"{\n      'is-active': active,\n      'el-carousel__item--card': $parent.type === 'card',\n      'is-in-stage': inStage,\n      'is-hover': hover,\n      'is-animating': animating\n    }\"\n    @click=\"handleItemClick\"\n    :style=\"itemStyle\">\n    <div\n      v-if=\"$parent.type === 'card'\"\n      v-show=\"!active\"\n      class=\"el-carousel__mask\">\n    </div>\n    <slot></slot>\n  </div>\n</template>\n\n<script>\n  import { autoprefixer } from 'element-ui/src/utils/util';\n  const CARD_SCALE = 0.83;\n  export default {\n    name: 'ElCarouselItem',\n\n    props: {\n      name: String,\n      label: {\n        type: [String, Number],\n        default: ''\n      }\n    },\n\n    data() {\n      return {\n        hover: false,\n        translate: 0,\n        scale: 1,\n        active: false,\n        ready: false,\n        inStage: false,\n        animating: false\n      };\n    },\n\n    methods: {\n      processIndex(index, activeIndex, length) {\n        if (activeIndex === 0 && index === length - 1) {\n          return -1;\n        } else if (activeIndex === length - 1 && index === 0) {\n          return length;\n        } else if (index < activeIndex - 1 && activeIndex - index >= length / 2) {\n          return length + 1;\n        } else if (index > activeIndex + 1 && index - activeIndex >= length / 2) {\n          return -2;\n        }\n        return index;\n      },\n\n      calcCardTranslate(index, activeIndex) {\n        const parentWidth = this.$parent.$el.offsetWidth;\n        if (this.inStage) {\n          return parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1) / 4;\n        } else if (index < activeIndex) {\n          return -(1 + CARD_SCALE) * parentWidth / 4;\n        } else {\n          return (3 + CARD_SCALE) * parentWidth / 4;\n        }\n      },\n\n      calcTranslate(index, activeIndex, isVertical) {\n        const distance = this.$parent.$el[isVertical ? 'offsetHeight' : 'offsetWidth'];\n        return distance * (index - activeIndex);\n      },\n\n      translateItem(index, activeIndex, oldIndex) {\n        const parentType = this.$parent.type;\n        const parentDirection = this.parentDirection;\n        const length = this.$parent.items.length;\n        if (parentType !== 'card' && oldIndex !== undefined) {\n          this.animating = index === activeIndex || index === oldIndex;\n        }\n        if (index !== activeIndex && length > 2 && this.$parent.loop) {\n          index = this.processIndex(index, activeIndex, length);\n        }\n        if (parentType === 'card') {\n          if (parentDirection === 'vertical') {\n            console.warn('[Element Warn][Carousel]vertical direction is not supported in card mode');\n          }\n          this.inStage = Math.round(Math.abs(index - activeIndex)) <= 1;\n          this.active = index === activeIndex;\n          this.translate = this.calcCardTranslate(index, activeIndex);\n          this.scale = this.active ? 1 : CARD_SCALE;\n        } else {\n          this.active = index === activeIndex;\n          const isVertical = parentDirection === 'vertical';\n          this.translate = this.calcTranslate(index, activeIndex, isVertical);\n          this.scale = 1;\n        }\n        this.ready = true;\n      },\n\n      handleItemClick() {\n        const parent = this.$parent;\n        if (parent && parent.type === 'card') {\n          const index = parent.items.indexOf(this);\n          parent.setActiveItem(index);\n        }\n      }\n    },\n\n    computed: {\n      parentDirection() {\n        return this.$parent.direction;\n      },\n\n      itemStyle() {\n        const translateType = this.parentDirection === 'vertical' ? 'translateY' : 'translateX';\n        const value = `${translateType}(${ this.translate }px) scale(${ this.scale })`;\n        const style = {\n          transform: value\n        };\n        return autoprefixer(style);\n      }\n    },\n\n    created() {\n      this.$parent && this.$parent.updateItems();\n    },\n\n    destroyed() {\n      this.$parent && this.$parent.updateItems();\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/carousel/src/main.vue",
    "content": "<template>\n  <div\n    :class=\"carouselClasses\"\n    @mouseenter.stop=\"handleMouseEnter\"\n    @mouseleave.stop=\"handleMouseLeave\">\n    <div\n      class=\"el-carousel__container\"\n      :style=\"{ height: height }\">\n      <transition\n        v-if=\"arrowDisplay\"\n        name=\"carousel-arrow-left\">\n        <button\n          type=\"button\"\n          v-show=\"(arrow === 'always' || hover) && (loop || activeIndex > 0)\"\n          @mouseenter=\"handleButtonEnter('left')\"\n          @mouseleave=\"handleButtonLeave\"\n          @click.stop=\"throttledArrowClick(activeIndex - 1)\"\n          class=\"el-carousel__arrow el-carousel__arrow--left\">\n          <i class=\"el-icon-arrow-left\"></i>\n        </button>\n      </transition>\n      <transition\n        v-if=\"arrowDisplay\"\n        name=\"carousel-arrow-right\">\n        <button\n          type=\"button\"\n          v-show=\"(arrow === 'always' || hover) && (loop || activeIndex < items.length - 1)\"\n          @mouseenter=\"handleButtonEnter('right')\"\n          @mouseleave=\"handleButtonLeave\"\n          @click.stop=\"throttledArrowClick(activeIndex + 1)\"\n          class=\"el-carousel__arrow el-carousel__arrow--right\">\n          <i class=\"el-icon-arrow-right\"></i>\n        </button>\n      </transition>\n      <slot></slot>\n    </div>\n    <ul\n      v-if=\"indicatorPosition !== 'none'\"\n      :class=\"indicatorsClasses\">\n      <li\n        v-for=\"(item, index) in items\"\n        :key=\"index\"\n        :class=\"[\n          'el-carousel__indicator',\n          'el-carousel__indicator--' + direction,\n          { 'is-active': index === activeIndex }]\"\n        @mouseenter=\"throttledIndicatorHover(index)\"\n        @click.stop=\"handleIndicatorClick(index)\">\n        <button class=\"el-carousel__button\">\n          <span v-if=\"hasLabel\">{{ item.label }}</span>\n        </button>\n      </li>\n    </ul>\n  </div>\n</template>\n\n<script>\nimport throttle from 'throttle-debounce/throttle';\nimport { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';\n\nexport default {\n  name: 'ElCarousel',\n\n  props: {\n    initialIndex: {\n      type: Number,\n      default: 0\n    },\n    height: String,\n    trigger: {\n      type: String,\n      default: 'hover'\n    },\n    autoplay: {\n      type: Boolean,\n      default: true\n    },\n    interval: {\n      type: Number,\n      default: 3000\n    },\n    indicatorPosition: String,\n    indicator: {\n      type: Boolean,\n      default: true\n    },\n    arrow: {\n      type: String,\n      default: 'hover'\n    },\n    type: String,\n    loop: {\n      type: Boolean,\n      default: true\n    },\n    direction: {\n      type: String,\n      default: 'horizontal',\n      validator(val) {\n        return ['horizontal', 'vertical'].indexOf(val) !== -1;\n      }\n    }\n  },\n\n  data() {\n    return {\n      items: [],\n      activeIndex: -1,\n      containerWidth: 0,\n      timer: null,\n      hover: false\n    };\n  },\n\n  computed: {\n    arrowDisplay() {\n      return this.arrow !== 'never' && this.direction !== 'vertical';\n    },\n\n    hasLabel() {\n      return this.items.some(item => item.label.toString().length > 0);\n    },\n\n    carouselClasses() {\n      const classes = ['el-carousel', 'el-carousel--' + this.direction];\n      if (this.type === 'card') {\n        classes.push('el-carousel--card');\n      }\n      return classes;\n    },\n\n    indicatorsClasses() {\n      const classes = ['el-carousel__indicators', 'el-carousel__indicators--' + this.direction];\n      if (this.hasLabel) {\n        classes.push('el-carousel__indicators--labels');\n      }\n      if (this.indicatorPosition === 'outside' || this.type === 'card') {\n        classes.push('el-carousel__indicators--outside');\n      }\n      return classes;\n    }\n  },\n\n  watch: {\n    items(val) {\n      if (val.length > 0) this.setActiveItem(this.initialIndex);\n    },\n\n    activeIndex(val, oldVal) {\n      this.resetItemPosition(oldVal);\n      if (oldVal > -1) {\n        this.$emit('change', val, oldVal);\n      }\n    },\n\n    autoplay(val) {\n      val ? this.startTimer() : this.pauseTimer();\n    },\n\n    loop() {\n      this.setActiveItem(this.activeIndex);\n    },\n\n    interval() {\n      this.pauseTimer();\n      this.startTimer();\n    }\n  },\n\n  methods: {\n    handleMouseEnter() {\n      this.hover = true;\n      this.pauseTimer();\n    },\n\n    handleMouseLeave() {\n      this.hover = false;\n      this.startTimer();\n    },\n\n    itemInStage(item, index) {\n      const length = this.items.length;\n      if (index === length - 1 && item.inStage && this.items[0].active ||\n        (item.inStage && this.items[index + 1] && this.items[index + 1].active)) {\n        return 'left';\n      } else if (index === 0 && item.inStage && this.items[length - 1].active ||\n        (item.inStage && this.items[index - 1] && this.items[index - 1].active)) {\n        return 'right';\n      }\n      return false;\n    },\n\n    handleButtonEnter(arrow) {\n      if (this.direction === 'vertical') return;\n      this.items.forEach((item, index) => {\n        if (arrow === this.itemInStage(item, index)) {\n          item.hover = true;\n        }\n      });\n    },\n\n    handleButtonLeave() {\n      if (this.direction === 'vertical') return;\n      this.items.forEach(item => {\n        item.hover = false;\n      });\n    },\n\n    updateItems() {\n      this.items = this.$children.filter(child => child.$options.name === 'ElCarouselItem');\n    },\n\n    resetItemPosition(oldIndex) {\n      this.items.forEach((item, index) => {\n        item.translateItem(index, this.activeIndex, oldIndex);\n      });\n    },\n\n    playSlides() {\n      if (this.activeIndex < this.items.length - 1) {\n        this.activeIndex++;\n      } else if (this.loop) {\n        this.activeIndex = 0;\n      }\n    },\n\n    pauseTimer() {\n      if (this.timer) {\n        clearInterval(this.timer);\n        this.timer = null;\n      }\n    },\n\n    startTimer() {\n      if (this.interval <= 0 || !this.autoplay || this.timer) return;\n      this.timer = setInterval(this.playSlides, this.interval);\n    },\n\n    resetTimer() {\n      this.pauseTimer();\n      this.startTimer();\n    },\n\n    setActiveItem(index) {\n      if (typeof index === 'string') {\n        const filteredItems = this.items.filter(item => item.name === index);\n        if (filteredItems.length > 0) {\n          index = this.items.indexOf(filteredItems[0]);\n        }\n      }\n      index = Number(index);\n      if (isNaN(index) || index !== Math.floor(index)) {\n        console.warn('[Element Warn][Carousel]index must be an integer.');\n        return;\n      }\n      let length = this.items.length;\n      const oldIndex = this.activeIndex;\n      if (index < 0) {\n        this.activeIndex = this.loop ? length - 1 : 0;\n      } else if (index >= length) {\n        this.activeIndex = this.loop ? 0 : length - 1;\n      } else {\n        this.activeIndex = index;\n      }\n      if (oldIndex === this.activeIndex) {\n        this.resetItemPosition(oldIndex);\n      }\n      this.resetTimer();\n    },\n\n    prev() {\n      this.setActiveItem(this.activeIndex - 1);\n    },\n\n    next() {\n      this.setActiveItem(this.activeIndex + 1);\n    },\n\n    handleIndicatorClick(index) {\n      this.activeIndex = index;\n    },\n\n    handleIndicatorHover(index) {\n      if (this.trigger === 'hover' && index !== this.activeIndex) {\n        this.activeIndex = index;\n      }\n    }\n  },\n\n  created() {\n    this.throttledArrowClick = throttle(300, true, index => {\n      this.setActiveItem(index);\n    });\n    this.throttledIndicatorHover = throttle(300, index => {\n      this.handleIndicatorHover(index);\n    });\n  },\n\n  mounted() {\n    this.updateItems();\n    this.$nextTick(() => {\n      addResizeListener(this.$el, this.resetItemPosition);\n      if (this.initialIndex < this.items.length && this.initialIndex >= 0) {\n        this.activeIndex = this.initialIndex;\n      }\n      this.startTimer();\n    });\n  },\n\n  beforeDestroy() {\n    if (this.$el) removeResizeListener(this.$el, this.resetItemPosition);\n    this.pauseTimer();\n  }\n};\n</script>\n"
  },
  {
    "path": "packages/carousel-item/index.js",
    "content": "import ElCarouselItem from '../carousel/src/item';\n\n/* istanbul ignore next */\nElCarouselItem.install = function(Vue) {\n  Vue.component(ElCarouselItem.name, ElCarouselItem);\n};\n\nexport default ElCarouselItem;\n"
  },
  {
    "path": "packages/cascader/index.js",
    "content": "import Cascader from './src/cascader';\n\n/* istanbul ignore next */\nCascader.install = function(Vue) {\n  Vue.component(Cascader.name, Cascader);\n};\n\nexport default Cascader;\n"
  },
  {
    "path": "packages/cascader/src/cascader.vue",
    "content": "<template>\n  <div\n    ref=\"reference\"\n    :class=\"[\n      'el-cascader',\n      realSize && `el-cascader--${realSize}`,\n      { 'is-disabled': isDisabled }\n    ]\"\n    v-clickoutside=\"() => toggleDropDownVisible(false)\"\n    @mouseenter=\"inputHover = true\"\n    @mouseleave=\"inputHover = false\"\n    @click=\"() => toggleDropDownVisible(readonly ? undefined : true)\"\n    @keydown=\"handleKeyDown\">\n\n    <el-input\n      ref=\"input\"\n      v-model=\"multiple ? presentText : inputValue\"\n      :size=\"realSize\"\n      :placeholder=\"placeholder\"\n      :readonly=\"readonly\"\n      :disabled=\"isDisabled\"\n      :validate-event=\"false\"\n      :class=\"{ 'is-focus': dropDownVisible }\"\n      @focus=\"handleFocus\"\n      @blur=\"handleBlur\"\n      @input=\"handleInput\">\n      <template slot=\"suffix\">\n        <i\n          v-if=\"clearBtnVisible\"\n          key=\"clear\"\n          class=\"el-input__icon el-icon-circle-close\"\n          @click.stop=\"handleClear\"></i>\n        <i\n          v-else\n          key=\"arrow-down\"\n          :class=\"[\n            'el-input__icon',\n            'el-icon-arrow-down',\n            dropDownVisible && 'is-reverse'\n          ]\"\n          @click.stop=\"toggleDropDownVisible()\"></i>\n      </template>\n    </el-input>\n\n    <div v-if=\"multiple\" class=\"el-cascader__tags\">\n      <el-tag\n        v-for=\"tag in presentTags\"\n        :key=\"tag.key\"\n        type=\"info\"\n        :size=\"tagSize\"\n        :hit=\"tag.hitState\"\n        :closable=\"tag.closable\"\n        disable-transitions\n        @close=\"deleteTag(tag)\">\n        <span>{{ tag.text }}</span>\n      </el-tag>\n      <input\n        v-if=\"filterable && !isDisabled\"\n        v-model.trim=\"inputValue\"\n        type=\"text\"\n        class=\"el-cascader__search-input\"\n        :placeholder=\"presentTags.length ? '' : placeholder\"\n        @input=\"e => handleInput(inputValue, e)\"\n        @click.stop=\"toggleDropDownVisible(true)\"\n        @keydown.delete=\"handleDelete\">\n    </div>\n\n    <transition name=\"el-zoom-in-top\" @after-leave=\"handleDropdownLeave\">\n      <div\n        v-show=\"dropDownVisible\"\n        ref=\"popper\"\n        :class=\"['el-popper', 'el-cascader__dropdown', popperClass]\">\n        <el-cascader-panel\n          ref=\"panel\"\n          v-show=\"!filtering\"\n          v-model=\"checkedValue\"\n          :options=\"options\"\n          :props=\"config\"\n          :border=\"false\"\n          :render-label=\"$scopedSlots.default\"\n          @expand-change=\"handleExpandChange\"\n          @close=\"toggleDropDownVisible(false)\"></el-cascader-panel>\n        <el-scrollbar\n          ref=\"suggestionPanel\"\n          v-if=\"filterable\"\n          v-show=\"filtering\"\n          tag=\"ul\"\n          class=\"el-cascader__suggestion-panel\"\n          view-class=\"el-cascader__suggestion-list\"\n          @keydown.native=\"handleSuggestionKeyDown\">\n          <template v-if=\"suggestions.length\">\n            <li\n              v-for=\"(item, index) in suggestions\"\n              :key=\"item.uid\"\n              :class=\"[\n                'el-cascader__suggestion-item',\n                item.checked && 'is-checked'\n              ]\"\n              :tabindex=\"-1\"\n              @click=\"handleSuggestionClick(index)\">\n              <span>{{ item.text }}</span>\n              <i v-if=\"item.checked\" class=\"el-icon-check\"></i>\n            </li>\n          </template>\n          <slot v-else name=\"empty\">\n            <li class=\"el-cascader__empty-text\">{{ t('el.cascader.noMatch') }}</li>\n          </slot>\n        </el-scrollbar>\n      </div>\n    </transition>\n  </div>\n</template>\n\n<script>\nimport Popper from 'element-ui/src/utils/vue-popper';\nimport Clickoutside from 'element-ui/src/utils/clickoutside';\nimport Emitter from 'element-ui/src/mixins/emitter';\nimport Locale from 'element-ui/src/mixins/locale';\nimport Migrating from 'element-ui/src/mixins/migrating';\nimport ElInput from 'element-ui/packages/input';\nimport ElTag from 'element-ui/packages/tag';\nimport ElScrollbar from 'element-ui/packages/scrollbar';\nimport ElCascaderPanel from 'element-ui/packages/cascader-panel';\nimport AriaUtils from 'element-ui/src/utils/aria-utils';\nimport { t } from 'element-ui/src/locale';\nimport { isEqual, isEmpty, kebabCase } from 'element-ui/src/utils/util';\nimport { isUndefined, isFunction } from 'element-ui/src/utils/types';\nimport { isDef } from 'element-ui/src/utils/shared';\nimport { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';\nimport debounce from 'throttle-debounce/debounce';\n\nconst { keys: KeyCode } = AriaUtils;\nconst MigratingProps = {\n  expandTrigger: {\n    newProp: 'expandTrigger',\n    type: String\n  },\n  changeOnSelect: {\n    newProp: 'checkStrictly',\n    type: Boolean\n  },\n  hoverThreshold: {\n    newProp: 'hoverThreshold',\n    type: Number\n  }\n};\n\nconst PopperMixin = {\n  props: {\n    placement: {\n      type: String,\n      default: 'bottom-start'\n    },\n    appendToBody: Popper.props.appendToBody,\n    visibleArrow: {\n      type: Boolean,\n      default: true\n    },\n    arrowOffset: Popper.props.arrowOffset,\n    offset: Popper.props.offset,\n    boundariesPadding: Popper.props.boundariesPadding,\n    popperOptions: Popper.props.popperOptions,\n    transformOrigin: Popper.props.transformOrigin\n  },\n  methods: Popper.methods,\n  data: Popper.data,\n  beforeDestroy: Popper.beforeDestroy\n};\n\nconst InputSizeMap = {\n  medium: 36,\n  small: 32,\n  mini: 28\n};\n\nexport default {\n  name: 'ElCascader',\n\n  directives: { Clickoutside },\n\n  mixins: [PopperMixin, Emitter, Locale, Migrating],\n\n  inject: {\n    elForm: {\n      default: ''\n    },\n    elFormItem: {\n      default: ''\n    }\n  },\n\n  components: {\n    ElInput,\n    ElTag,\n    ElScrollbar,\n    ElCascaderPanel\n  },\n\n  props: {\n    value: {},\n    options: Array,\n    props: Object,\n    size: String,\n    placeholder: {\n      type: String,\n      default: () => t('el.cascader.placeholder')\n    },\n    disabled: Boolean,\n    clearable: Boolean,\n    filterable: Boolean,\n    filterMethod: Function,\n    separator: {\n      type: String,\n      default: ' / '\n    },\n    showAllLevels: {\n      type: Boolean,\n      default: true\n    },\n    collapseTags: Boolean,\n    debounce: {\n      type: Number,\n      default: 300\n    },\n    beforeFilter: {\n      type: Function,\n      default: () => (() => {})\n    },\n    popperClass: String\n  },\n\n  data() {\n    return {\n      dropDownVisible: false,\n      checkedValue: this.value,\n      inputHover: false,\n      inputValue: null,\n      presentText: null,\n      presentTags: [],\n      checkedNodes: [],\n      filtering: false,\n      suggestions: [],\n      inputInitialHeight: 0,\n      pressDeleteCount: 0\n    };\n  },\n\n  computed: {\n    realSize() {\n      const _elFormItemSize = (this.elFormItem || {}).elFormItemSize;\n      return this.size || _elFormItemSize || (this.$ELEMENT || {}).size;\n    },\n    tagSize() {\n      return ['small', 'mini'].indexOf(this.realSize) > -1\n        ? 'mini'\n        : 'small';\n    },\n    isDisabled() {\n      return this.disabled || (this.elForm || {}).disabled;\n    },\n    config() {\n      const config = this.props || {};\n      const { $attrs } = this;\n\n      Object\n        .keys(MigratingProps)\n        .forEach(oldProp => {\n          const { newProp, type } = MigratingProps[oldProp];\n          let oldValue = $attrs[oldProp] || $attrs[kebabCase(oldProp)];\n          if (isDef(oldProp) && !isDef(config[newProp])) {\n            if (type === Boolean && oldValue === '') {\n              oldValue = true;\n            }\n            config[newProp] = oldValue;\n          }\n        });\n\n      return config;\n    },\n    multiple() {\n      return this.config.multiple;\n    },\n    leafOnly() {\n      return !this.config.checkStrictly;\n    },\n    readonly() {\n      return !this.filterable || this.multiple;\n    },\n    clearBtnVisible() {\n      if (!this.clearable || this.isDisabled || this.filtering || !this.inputHover) {\n        return false;\n      }\n\n      return this.multiple\n        ? !!this.checkedNodes.filter(node => !node.isDisabled).length\n        : !!this.presentText;\n    },\n    panel() {\n      return this.$refs.panel;\n    }\n  },\n\n  watch: {\n    disabled() {\n      this.computePresentContent();\n    },\n    value(val) {\n      if (!isEqual(val, this.checkedValue)) {\n        this.checkedValue = val;\n        this.computePresentContent();\n      }\n    },\n    checkedValue(val) {\n      const { value, dropDownVisible } = this;\n      const { checkStrictly, multiple } = this.config;\n\n      if (!isEqual(val, value) || isUndefined(value)) {\n        this.computePresentContent();\n        // hide dropdown when single mode\n        if (!multiple && !checkStrictly && dropDownVisible) {\n          this.toggleDropDownVisible(false);\n        }\n\n        this.$emit('input', val);\n        this.$emit('change', val);\n        this.dispatch('ElFormItem', 'el.form.change', [val]);\n      }\n    },\n    options: {\n      handler: function() {\n        this.$nextTick(this.computePresentContent);\n      },\n      deep: true\n    },\n    presentText(val) {\n      this.inputValue = val;\n    },\n    presentTags(val, oldVal) {\n      if (this.multiple && (val.length || oldVal.length)) {\n        this.$nextTick(this.updateStyle);\n      }\n    },\n    filtering(val) {\n      this.$nextTick(this.updatePopper);\n    }\n  },\n\n  mounted() {\n    const { input } = this.$refs;\n    if (input && input.$el) {\n      this.inputInitialHeight = input.$el.offsetHeight || InputSizeMap[this.realSize] || 40;\n    }\n\n    if (!this.isEmptyValue(this.value)) {\n      this.computePresentContent();\n    }\n\n    this.filterHandler = debounce(this.debounce, () => {\n      const { inputValue } = this;\n\n      if (!inputValue) {\n        this.filtering = false;\n        return;\n      }\n\n      const before = this.beforeFilter(inputValue);\n      if (before && before.then) {\n        before.then(this.getSuggestions);\n      } else if (before !== false) {\n        this.getSuggestions();\n      } else {\n        this.filtering = false;\n      }\n    });\n\n    addResizeListener(this.$el, this.updateStyle);\n  },\n\n  beforeDestroy() {\n    removeResizeListener(this.$el, this.updateStyle);\n  },\n\n  methods: {\n    getMigratingConfig() {\n      return {\n        props: {\n          'expand-trigger': 'expand-trigger is removed, use `props.expandTrigger` instead.',\n          'change-on-select': 'change-on-select is removed, use `props.checkStrictly` instead.',\n          'hover-threshold': 'hover-threshold is removed, use `props.hoverThreshold` instead'\n        },\n        events: {\n          'active-item-change': 'active-item-change is renamed to expand-change'\n        }\n      };\n    },\n    toggleDropDownVisible(visible) {\n      if (this.isDisabled) return;\n\n      const { dropDownVisible } = this;\n      const { input } = this.$refs;\n      visible = isDef(visible) ? visible : !dropDownVisible;\n      if (visible !== dropDownVisible) {\n        this.dropDownVisible = visible;\n        if (visible) {\n          this.$nextTick(() => {\n            this.updatePopper();\n            this.panel.scrollIntoView();\n          });\n        }\n        input.$refs.input.setAttribute('aria-expanded', visible);\n        this.$emit('visible-change', visible);\n      }\n    },\n    handleDropdownLeave() {\n      this.filtering = false;\n      this.inputValue = this.presentText;\n      this.doDestroy();\n    },\n    handleKeyDown(event) {\n      switch (event.keyCode) {\n        case KeyCode.enter:\n          this.toggleDropDownVisible();\n          break;\n        case KeyCode.down:\n          this.toggleDropDownVisible(true);\n          this.focusFirstNode();\n          event.preventDefault();\n          break;\n        case KeyCode.esc:\n        case KeyCode.tab:\n          this.toggleDropDownVisible(false);\n          break;\n      }\n    },\n    handleFocus(e) {\n      this.$emit('focus', e);\n    },\n    handleBlur(e) {\n      this.$emit('blur', e);\n    },\n    handleInput(val, event) {\n      !this.dropDownVisible && this.toggleDropDownVisible(true);\n\n      if (event && event.isComposing) return;\n      if (val) {\n        this.filterHandler();\n      } else {\n        this.filtering = false;\n      }\n    },\n    handleClear() {\n      this.presentText = '';\n      this.panel.clearCheckedNodes();\n    },\n    handleExpandChange(value) {\n      this.$nextTick(this.updatePopper.bind(this));\n      this.$emit('expand-change', value);\n      this.$emit('active-item-change', value); // Deprecated\n    },\n    focusFirstNode() {\n      this.$nextTick(() => {\n        const { filtering } = this;\n        const { popper, suggestionPanel } = this.$refs;\n        let firstNode = null;\n\n        if (filtering && suggestionPanel) {\n          firstNode = suggestionPanel.$el.querySelector('.el-cascader__suggestion-item');\n        } else {\n          const firstMenu = popper.querySelector('.el-cascader-menu');\n          firstNode = firstMenu.querySelector('.el-cascader-node[tabindex=\"-1\"]');\n        }\n\n        if (firstNode) {\n          firstNode.focus();\n          !filtering && firstNode.click();\n        }\n      });\n    },\n    computePresentContent() {\n      // nextTick is required, because checked nodes may not change right now\n      this.$nextTick(() => {\n        if (this.config.multiple) {\n          this.computePresentTags();\n          this.presentText = this.presentTags.length ? ' ' : null;\n        } else {\n          this.computePresentText();\n        }\n      });\n    },\n    isEmptyValue(val) {\n      const { multiple } = this;\n      const { emitPath } = this.panel.config;\n      if (multiple || emitPath) {\n        return isEmpty(val);\n      }\n      return false;\n    },\n    computePresentText() {\n      const { checkedValue, config } = this;\n      if (!this.isEmptyValue(checkedValue)) {\n        const node = this.panel.getNodeByValue(checkedValue);\n        if (node && (config.checkStrictly || node.isLeaf)) {\n          this.presentText = node.getText(this.showAllLevels, this.separator);\n          return;\n        }\n      }\n      this.presentText = null;\n    },\n    computePresentTags() {\n      const { isDisabled, leafOnly, showAllLevels, separator, collapseTags } = this;\n      const checkedNodes = this.getCheckedNodes(leafOnly);\n      const tags = [];\n\n      const genTag = node => ({\n        node,\n        key: node.uid,\n        text: node.getText(showAllLevels, separator),\n        hitState: false,\n        closable: !isDisabled && !node.isDisabled\n      });\n\n      if (checkedNodes.length) {\n        const [first, ...rest] = checkedNodes;\n        const restCount = rest.length;\n        tags.push(genTag(first));\n\n        if (restCount) {\n          if (collapseTags) {\n            tags.push({\n              key: -1,\n              text: `+ ${restCount}`,\n              closable: false\n            });\n          } else {\n            rest.forEach(node => tags.push(genTag(node)));\n          }\n        }\n      }\n\n      this.checkedNodes = checkedNodes;\n      this.presentTags = tags;\n    },\n    getSuggestions() {\n      let { filterMethod } = this;\n\n      if (!isFunction(filterMethod)) {\n        filterMethod = (node, keyword) => node.text.includes(keyword);\n      }\n\n      const suggestions = this.panel.getFlattedNodes(this.leafOnly)\n        .filter(node => {\n          if (node.isDisabled) return false;\n          node.text = node.getText(this.showAllLevels, this.separator) || '';\n          return filterMethod(node, this.inputValue);\n        });\n\n      if (this.multiple) {\n        this.presentTags.forEach(tag => {\n          tag.hitState = false;\n        });\n      } else {\n        suggestions.forEach(node => {\n          node.checked = isEqual(this.checkedValue, node.getValueByOption());\n        });\n      }\n\n      this.filtering = true;\n      this.suggestions = suggestions;\n      this.$nextTick(this.updatePopper);\n    },\n    handleSuggestionKeyDown(event) {\n      const { keyCode, target } = event;\n      switch (keyCode) {\n        case KeyCode.enter:\n          target.click();\n          break;\n        case KeyCode.up:\n          const prev = target.previousElementSibling;\n          prev && prev.focus();\n          break;\n        case KeyCode.down:\n          const next = target.nextElementSibling;\n          next && next.focus();\n          break;\n        case KeyCode.esc:\n        case KeyCode.tab:\n          this.toggleDropDownVisible(false);\n          break;\n      }\n    },\n    handleDelete() {\n      const { inputValue, pressDeleteCount, presentTags } = this;\n      const lastIndex = presentTags.length - 1;\n      const lastTag = presentTags[lastIndex];\n      this.pressDeleteCount = inputValue ? 0 : pressDeleteCount + 1;\n\n      if (!lastTag) return;\n\n      if (this.pressDeleteCount) {\n        if (lastTag.hitState) {\n          this.deleteTag(lastTag);\n        } else {\n          lastTag.hitState = true;\n        }\n      }\n    },\n    handleSuggestionClick(index) {\n      const { multiple } = this;\n      const targetNode = this.suggestions[index];\n\n      if (multiple) {\n        const { checked } = targetNode;\n        targetNode.doCheck(!checked);\n        this.panel.calculateMultiCheckedValue();\n      } else {\n        this.checkedValue = targetNode.getValueByOption();\n        this.toggleDropDownVisible(false);\n      }\n    },\n    deleteTag(tag) {\n      const { checkedValue } = this;\n      const current = tag.node.getValueByOption();\n      const val = checkedValue.find(n => isEqual(n, current));\n      this.checkedValue = checkedValue.filter(n => !isEqual(n, current));\n      this.$emit('remove-tag', val);\n    },\n    updateStyle() {\n      const { $el, inputInitialHeight } = this;\n      if (this.$isServer || !$el) return;\n\n      const { suggestionPanel } = this.$refs;\n      const inputInner = $el.querySelector('.el-input__inner');\n\n      if (!inputInner) return;\n\n      const tags = $el.querySelector('.el-cascader__tags');\n      let suggestionPanelEl = null;\n\n      if (suggestionPanel && (suggestionPanelEl = suggestionPanel.$el)) {\n        const suggestionList = suggestionPanelEl.querySelector('.el-cascader__suggestion-list');\n        suggestionList.style.minWidth = inputInner.offsetWidth + 'px';\n      }\n\n      if (tags) {\n        const offsetHeight = Math.round(tags.getBoundingClientRect().height);\n        const height = Math.max(offsetHeight + 6, inputInitialHeight) + 'px';\n        inputInner.style.height = height;\n        if (this.dropDownVisible) {\n          this.updatePopper();\n        }\n      }\n    },\n\n    /**\n     * public methods\n    */\n    getCheckedNodes(leafOnly) {\n      return this.panel.getCheckedNodes(leafOnly);\n    }\n  }\n};\n</script>\n\n"
  },
  {
    "path": "packages/cascader-panel/index.js",
    "content": "import CascaderPanel from './src/cascader-panel';\n\n/* istanbul ignore next */\nCascaderPanel.install = function(Vue) {\n  Vue.component(CascaderPanel.name, CascaderPanel);\n};\n\nexport default CascaderPanel;\n"
  },
  {
    "path": "packages/cascader-panel/src/cascader-menu.vue",
    "content": "<script>\nimport ElScrollbar from 'element-ui/packages/scrollbar';\nimport CascaderNode from './cascader-node.vue';\nimport Locale from 'element-ui/src/mixins/locale';\nimport { generateId } from 'element-ui/src/utils/util';\n\nexport default {\n  name: 'ElCascaderMenu',\n\n  mixins: [Locale],\n\n  inject: ['panel'],\n\n  components: {\n    ElScrollbar,\n    CascaderNode\n  },\n\n  props: {\n    nodes: {\n      type: Array,\n      required: true\n    },\n    index: Number\n  },\n\n  data() {\n    return {\n      activeNode: null,\n      hoverTimer: null,\n      id: generateId()\n    };\n  },\n\n  computed: {\n    isEmpty() {\n      return !this.nodes.length;\n    },\n    menuId() {\n      return `cascader-menu-${this.id}-${this.index}`;\n    }\n  },\n\n  methods: {\n    handleExpand(e) {\n      this.activeNode = e.target;\n    },\n    handleMouseMove(e) {\n      const { activeNode, hoverTimer } = this;\n      const { hoverZone } = this.$refs;\n\n      if (!activeNode || !hoverZone) return;\n\n      if (activeNode.contains(e.target)) {\n        clearTimeout(hoverTimer);\n\n        const { left } = this.$el.getBoundingClientRect();\n        const startX = e.clientX - left;\n        const { offsetWidth, offsetHeight } = this.$el;\n        const top = activeNode.offsetTop;\n        const bottom = top + activeNode.offsetHeight;\n\n        hoverZone.innerHTML = `\n          <path style=\"pointer-events: auto;\" fill=\"transparent\" d=\"M${startX} ${top} L${offsetWidth} 0 V${top} Z\" />\n          <path style=\"pointer-events: auto;\" fill=\"transparent\" d=\"M${startX} ${bottom} L${offsetWidth} ${offsetHeight} V${bottom} Z\" />\n        `;\n      } else if (!hoverTimer) {\n        this.hoverTimer = setTimeout(this.clearHoverZone, this.panel.config.hoverThreshold);\n      }\n    },\n    clearHoverZone() {\n      const { hoverZone } = this.$refs;\n      if (!hoverZone) return;\n      hoverZone.innerHTML = '';\n    },\n\n    renderEmptyText(h) {\n      return (\n        <div class=\"el-cascader-menu__empty-text\">{ this.t('el.cascader.noData') }</div>\n      );\n    },\n    renderNodeList(h) {\n      const { menuId } = this;\n      const { isHoverMenu } = this.panel;\n      const events = { on: {} };\n\n      if (isHoverMenu) {\n        events.on.expand = this.handleExpand;\n      }\n\n      const nodes = this.nodes.map((node, index) => {\n        const { hasChildren } = node;\n        return (\n          <cascader-node\n            key={ node.uid }\n            node={ node }\n            node-id={ `${menuId}-${index}` }\n            aria-haspopup={ hasChildren }\n            aria-owns = { hasChildren ? menuId : null }\n            { ...events }></cascader-node>\n        );\n      });\n\n      return [\n        ...nodes,\n        isHoverMenu ? <svg ref='hoverZone' class='el-cascader-menu__hover-zone'></svg> : null\n      ];\n    }\n  },\n\n  render(h) {\n    const { isEmpty, menuId } = this;\n    const events = { nativeOn: {} };\n\n    // optimize hover to expand experience (#8010)\n    if (this.panel.isHoverMenu) {\n      events.nativeOn.mousemove = this.handleMouseMove;\n      // events.nativeOn.mouseleave = this.clearHoverZone;\n    }\n\n    return (\n      <el-scrollbar\n        tag=\"ul\"\n        role=\"menu\"\n        id={ menuId }\n        class=\"el-cascader-menu\"\n        wrap-class=\"el-cascader-menu__wrap\"\n        view-class={{\n          'el-cascader-menu__list': true,\n          'is-empty': isEmpty\n        }}\n        { ...events }>\n        { isEmpty ? this.renderEmptyText(h) : this.renderNodeList(h) }\n      </el-scrollbar>\n    );\n  }\n};\n</script>\n"
  },
  {
    "path": "packages/cascader-panel/src/cascader-node.vue",
    "content": "<script>\n  import ElCheckbox from 'element-ui/packages/checkbox';\n  import ElRadio from 'element-ui/packages/radio';\n  import { isEqual } from 'element-ui/src/utils/util';\n\n  const stopPropagation = e => e.stopPropagation();\n\n  export default {\n    inject: ['panel'],\n\n    components: {\n      ElCheckbox,\n      ElRadio\n    },\n\n    props: {\n      node: {\n        required: true\n      },\n      nodeId: String\n    },\n\n    computed: {\n      config() {\n        return this.panel.config;\n      },\n      isLeaf() {\n        return this.node.isLeaf;\n      },\n      isDisabled() {\n        return this.node.isDisabled;\n      },\n      checkedValue() {\n        return this.panel.checkedValue;\n      },\n      isChecked() {\n        return this.node.isSameNode(this.checkedValue);\n      },\n      inActivePath() {\n        return this.isInPath(this.panel.activePath);\n      },\n      inCheckedPath() {\n        if (!this.config.checkStrictly) return false;\n\n        return this.panel.checkedNodePaths\n          .some(checkedPath => this.isInPath(checkedPath));\n      },\n      value() {\n        return this.node.getValueByOption();\n      }\n    },\n\n    methods: {\n      handleExpand() {\n        const { panel, node, isDisabled, config } = this;\n        const { multiple, checkStrictly } = config;\n\n        if (!checkStrictly && isDisabled || node.loading) return;\n\n        if (config.lazy && !node.loaded) {\n          panel.lazyLoad(node, () => {\n            // do not use cached leaf value here, invoke this.isLeaf to get new value.\n            const { isLeaf } = this;\n\n            if (!isLeaf) this.handleExpand();\n            if (multiple) {\n              // if leaf sync checked state, else clear checked state\n              const checked = isLeaf ? node.checked : false;\n              this.handleMultiCheckChange(checked);\n            }\n          });\n        } else {\n          panel.handleExpand(node);\n        }\n      },\n\n      handleCheckChange() {\n        const { panel, value, node } = this;\n        panel.handleCheckChange(value);\n        panel.handleExpand(node);\n      },\n\n      handleMultiCheckChange(checked) {\n        this.node.doCheck(checked);\n        this.panel.calculateMultiCheckedValue();\n      },\n\n      isInPath(pathNodes) {\n        const { node } = this;\n        const selectedPathNode = pathNodes[node.level - 1] || {};\n        return selectedPathNode.uid === node.uid;\n      },\n\n      renderPrefix(h) {\n        const { isLeaf, isChecked, config } = this;\n        const { checkStrictly, multiple } = config;\n\n        if (multiple) {\n          return this.renderCheckbox(h);\n        } else if (checkStrictly) {\n          return this.renderRadio(h);\n        } else if (isLeaf && isChecked) {\n          return this.renderCheckIcon(h);\n        }\n\n        return null;\n      },\n\n      renderPostfix(h) {\n        const { node, isLeaf } = this;\n\n        if (node.loading) {\n          return this.renderLoadingIcon(h);\n        } else if (!isLeaf) {\n          return this.renderExpandIcon(h);\n        }\n\n        return null;\n      },\n\n      renderCheckbox(h) {\n        const { node, config, isDisabled } = this;\n        const events = {\n          on: { change: this.handleMultiCheckChange },\n          nativeOn: {}\n        };\n\n        if (config.checkStrictly) { // when every node is selectable, click event should not trigger expand event.\n          events.nativeOn.click = stopPropagation;\n        }\n\n        return (\n          <el-checkbox\n            value={ node.checked }\n            indeterminate={ node.indeterminate }\n            disabled={ isDisabled }\n            { ...events }\n          ></el-checkbox>\n        );\n      },\n\n      renderRadio(h) {\n        let { checkedValue, value, isDisabled } = this;\n\n        // to keep same reference if value cause radio's checked state is calculated by reference comparision;\n        if (isEqual(value, checkedValue)) {\n          value = checkedValue;\n        }\n\n        return (\n          <el-radio\n            value={ checkedValue }\n            label={ value }\n            disabled={ isDisabled }\n            onChange={ this.handleCheckChange }\n            nativeOnClick={ stopPropagation }>\n            {/* add an empty element to avoid render label */}\n            <span></span>\n          </el-radio>\n        );\n      },\n\n      renderCheckIcon(h) {\n        return (\n          <i class=\"el-icon-check el-cascader-node__prefix\"></i>\n        );\n      },\n\n      renderLoadingIcon(h) {\n        return (\n          <i class=\"el-icon-loading el-cascader-node__postfix\"></i>\n        );\n      },\n\n      renderExpandIcon(h) {\n        return (\n          <i class=\"el-icon-arrow-right el-cascader-node__postfix\"></i>\n        );\n      },\n\n      renderContent(h) {\n        const { panel, node } = this;\n        const render = panel.renderLabelFn;\n        const vnode = render\n          ? render({ node, data: node.data })\n          : null;\n\n        return (\n          <span class=\"el-cascader-node__label\">{ vnode || node.label }</span>\n        );\n      }\n    },\n\n    render(h) {\n      const {\n        inActivePath,\n        inCheckedPath,\n        isChecked,\n        isLeaf,\n        isDisabled,\n        config,\n        nodeId\n      } = this;\n      const { expandTrigger, checkStrictly, multiple } = config;\n      const disabled = !checkStrictly && isDisabled;\n      const events = { on: {} };\n\n      if (expandTrigger === 'click') {\n        events.on.click = this.handleExpand;\n      } else {\n        events.on.mouseenter = e => {\n          this.handleExpand();\n          this.$emit('expand', e);\n        };\n        events.on.focus = e => {\n          this.handleExpand();\n          this.$emit('expand', e);\n        };\n      }\n      if (isLeaf && !isDisabled && !checkStrictly && !multiple) {\n        events.on.click = this.handleCheckChange;\n      }\n\n      return (\n        <li\n          role=\"menuitem\"\n          id={ nodeId }\n          aria-expanded={ inActivePath }\n          tabindex={ disabled ? null : -1 }\n          class={{\n            'el-cascader-node': true,\n            'is-selectable': checkStrictly,\n            'in-active-path': inActivePath,\n            'in-checked-path': inCheckedPath,\n            'is-active': isChecked,\n            'is-disabled': disabled\n          }}\n          {...events}>\n          { this.renderPrefix(h) }\n          { this.renderContent(h) }\n          { this.renderPostfix(h) }\n        </li>\n      );\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/cascader-panel/src/cascader-panel.vue",
    "content": "<template>\n  <div\n    :class=\"[\n      'el-cascader-panel',\n      border && 'is-bordered'\n    ]\"\n    @keydown=\"handleKeyDown\">\n    <cascader-menu\n      ref=\"menu\"\n      v-for=\"(menu, index) in menus\"\n      :index=\"index\"\n      :key=\"index\"\n      :nodes=\"menu\"></cascader-menu>\n  </div>\n</template>\n\n<script>\nimport CascaderMenu from './cascader-menu';\nimport Store from './store';\nimport merge from 'element-ui/src/utils/merge';\nimport AriaUtils from 'element-ui/src/utils/aria-utils';\nimport scrollIntoView from 'element-ui/src/utils/scroll-into-view';\nimport {\n  noop,\n  coerceTruthyValueToArray,\n  isEqual,\n  isEmpty,\n  valueEquals\n} from 'element-ui/src/utils/util';\n\nconst { keys: KeyCode } = AriaUtils;\nconst DefaultProps = {\n  expandTrigger: 'click', // or hover\n  multiple: false,\n  checkStrictly: false, // whether all nodes can be selected\n  emitPath: true, // wether to emit an array of all levels value in which node is located\n  lazy: false,\n  lazyLoad: noop,\n  value: 'value',\n  label: 'label',\n  children: 'children',\n  leaf: 'leaf',\n  disabled: 'disabled',\n  hoverThreshold: 500\n};\n\nconst isLeaf = el => !el.getAttribute('aria-owns');\n\nconst getSibling = (el, distance) => {\n  const { parentNode } = el;\n  if (parentNode) {\n    const siblings = parentNode.querySelectorAll('.el-cascader-node[tabindex=\"-1\"]');\n    const index = Array.prototype.indexOf.call(siblings, el);\n    return siblings[index + distance] || null;\n  }\n  return null;\n};\n\nconst getMenuIndex = (el, distance) => {\n  if (!el) return;\n  const pieces = el.id.split('-');\n  return Number(pieces[pieces.length - 2]);\n};\n\nconst focusNode = el => {\n  if (!el) return;\n  el.focus();\n  !isLeaf(el) && el.click();\n};\n\nconst checkNode = el => {\n  if (!el) return;\n\n  const input = el.querySelector('input');\n  if (input) {\n    input.click();\n  } else if (isLeaf(el)) {\n    el.click();\n  }\n};\n\nexport default {\n  name: 'ElCascaderPanel',\n\n  components: {\n    CascaderMenu\n  },\n\n  props: {\n    value: {},\n    options: Array,\n    props: Object,\n    border: {\n      type: Boolean,\n      default: true\n    },\n    renderLabel: Function\n  },\n\n  provide() {\n    return {\n      panel: this\n    };\n  },\n\n  data() {\n    return {\n      checkedValue: null,\n      checkedNodePaths: [],\n      store: [],\n      menus: [],\n      activePath: [],\n      loadCount: 0\n    };\n  },\n\n  computed: {\n    config() {\n      return merge({ ...DefaultProps }, this.props || {});\n    },\n    multiple() {\n      return this.config.multiple;\n    },\n    checkStrictly() {\n      return this.config.checkStrictly;\n    },\n    leafOnly() {\n      return !this.checkStrictly;\n    },\n    isHoverMenu() {\n      return this.config.expandTrigger === 'hover';\n    },\n    renderLabelFn() {\n      return this.renderLabel || this.$scopedSlots.default;\n    }\n  },\n\n  watch: {\n    value() {\n      this.syncCheckedValue();\n      this.checkStrictly && this.calculateCheckedNodePaths();\n    },\n    options: {\n      handler: function() {\n        this.initStore();\n      },\n      immediate: true,\n      deep: true\n    },\n    checkedValue(val) {\n      if (!isEqual(val, this.value)) {\n        this.checkStrictly && this.calculateCheckedNodePaths();\n        this.$emit('input', val);\n        this.$emit('change', val);\n      }\n    }\n  },\n\n  mounted() {\n    if (!this.isEmptyValue(this.value)) {\n      this.syncCheckedValue();\n    }\n  },\n\n  methods: {\n    initStore() {\n      const { config, options } = this;\n      if (config.lazy && isEmpty(options)) {\n        this.lazyLoad();\n      } else {\n        this.store = new Store(options, config);\n        this.menus = [this.store.getNodes()];\n        this.syncMenuState();\n      }\n    },\n    syncCheckedValue() {\n      const { value, checkedValue } = this;\n      if (!isEqual(value, checkedValue)) {\n        this.activePath = [];\n        this.checkedValue = value;\n        this.syncMenuState();\n      }\n    },\n    syncMenuState() {\n      const { multiple, checkStrictly } = this;\n      this.syncActivePath();\n      multiple && this.syncMultiCheckState();\n      checkStrictly && this.calculateCheckedNodePaths();\n      this.$nextTick(this.scrollIntoView);\n    },\n    syncMultiCheckState() {\n      const nodes = this.getFlattedNodes(this.leafOnly);\n\n      nodes.forEach(node => {\n        node.syncCheckState(this.checkedValue);\n      });\n    },\n    isEmptyValue(val) {\n      const { multiple, config } = this;\n      const { emitPath } = config;\n      if (multiple || emitPath) {\n        return isEmpty(val);\n      }\n      return false;\n    },\n    syncActivePath() {\n      const { store, multiple, activePath, checkedValue } = this;\n\n      if (!isEmpty(activePath)) {\n        const nodes = activePath.map(node => this.getNodeByValue(node.getValue()));\n        this.expandNodes(nodes);\n      } else if (!this.isEmptyValue(checkedValue)) {\n        const value = multiple ? checkedValue[0] : checkedValue;\n        const checkedNode = this.getNodeByValue(value) || {};\n        const nodes = (checkedNode.pathNodes || []).slice(0, -1);\n        this.expandNodes(nodes);\n      } else {\n        this.activePath = [];\n        this.menus = [store.getNodes()];\n      }\n    },\n    expandNodes(nodes) {\n      nodes.forEach(node => this.handleExpand(node, true /* silent */));\n    },\n    calculateCheckedNodePaths() {\n      const { checkedValue, multiple } = this;\n      const checkedValues = multiple\n        ? coerceTruthyValueToArray(checkedValue)\n        : [ checkedValue ];\n      this.checkedNodePaths = checkedValues.map(v => {\n        const checkedNode = this.getNodeByValue(v);\n        return checkedNode ? checkedNode.pathNodes : [];\n      });\n    },\n    handleKeyDown(e) {\n      const { target, keyCode } = e;\n\n      switch (keyCode) {\n        case KeyCode.up:\n          const prev = getSibling(target, -1);\n          focusNode(prev);\n          break;\n        case KeyCode.down:\n          const next = getSibling(target, 1);\n          focusNode(next);\n          break;\n        case KeyCode.left:\n          const preMenu = this.$refs.menu[getMenuIndex(target) - 1];\n          if (preMenu) {\n            const expandedNode = preMenu.$el.querySelector('.el-cascader-node[aria-expanded=\"true\"]');\n            focusNode(expandedNode);\n          }\n          break;\n        case KeyCode.right:\n          const nextMenu = this.$refs.menu[getMenuIndex(target) + 1];\n          if (nextMenu) {\n            const firstNode = nextMenu.$el.querySelector('.el-cascader-node[tabindex=\"-1\"]');\n            focusNode(firstNode);\n          }\n          break;\n        case KeyCode.enter:\n          checkNode(target);\n          break;\n        case KeyCode.esc:\n        case KeyCode.tab:\n          this.$emit('close');\n          break;\n        default:\n          return;\n      }\n    },\n    handleExpand(node, silent) {\n      const { activePath } = this;\n      const { level } = node;\n      const path = activePath.slice(0, level - 1);\n      const menus = this.menus.slice(0, level);\n\n      if (!node.isLeaf) {\n        path.push(node);\n        menus.push(node.children);\n      }\n\n      this.activePath = path;\n      this.menus = menus;\n\n      if (!silent) {\n        const pathValues = path.map(node => node.getValue());\n        const activePathValues = activePath.map(node => node.getValue());\n        if (!valueEquals(pathValues, activePathValues)) {\n          this.$emit('active-item-change', pathValues); // Deprecated\n          this.$emit('expand-change', pathValues);\n        }\n      }\n    },\n    handleCheckChange(value) {\n      this.checkedValue = value;\n    },\n    lazyLoad(node, onFullfiled) {\n      const { config } = this;\n      if (!node) {\n        node = node || { root: true, level: 0 };\n        this.store = new Store([], config);\n        this.menus = [this.store.getNodes()];\n      }\n      node.loading = true;\n      const resolve = dataList => {\n        const parent = node.root ? null : node;\n        dataList && dataList.length && this.store.appendNodes(dataList, parent);\n        node.loading = false;\n        node.loaded = true;\n\n        // dispose default value on lazy load mode\n        if (Array.isArray(this.checkedValue)) {\n          const nodeValue = this.checkedValue[this.loadCount++];\n          const valueKey = this.config.value;\n          const leafKey = this.config.leaf;\n\n          if (Array.isArray(dataList) && dataList.filter(item => item[valueKey] === nodeValue).length > 0) {\n            const checkedNode = this.store.getNodeByValue(nodeValue);\n\n            if (!checkedNode.data[leafKey]) {\n              this.lazyLoad(checkedNode, () => {\n                this.handleExpand(checkedNode);\n              });\n            }\n\n            if (this.loadCount === this.checkedValue.length) {\n              this.$parent.computePresentText();\n            }\n          }\n        }\n\n        onFullfiled && onFullfiled(dataList);\n      };\n      config.lazyLoad(node, resolve);\n    },\n\n    /**\n     * public methods\n    */\n    calculateMultiCheckedValue() {\n      this.checkedValue = this.getCheckedNodes(this.leafOnly)\n        .map(node => node.getValueByOption());\n    },\n    scrollIntoView() {\n      if (this.$isServer) return;\n\n      const menus = this.$refs.menu || [];\n      menus.forEach(menu => {\n        const menuElement = menu.$el;\n        if (menuElement) {\n          const container = menuElement.querySelector('.el-scrollbar__wrap');\n          const activeNode = menuElement.querySelector('.el-cascader-node.is-active') ||\n            menuElement.querySelector('.el-cascader-node.in-active-path');\n          scrollIntoView(container, activeNode);\n        }\n      });\n    },\n    getNodeByValue(val) {\n      return this.store.getNodeByValue(val);\n    },\n    getFlattedNodes(leafOnly) {\n      const cached = !this.config.lazy;\n      return this.store.getFlattedNodes(leafOnly, cached);\n    },\n    getCheckedNodes(leafOnly) {\n      const { checkedValue, multiple } = this;\n      if (multiple) {\n        const nodes = this.getFlattedNodes(leafOnly);\n        return nodes.filter(node => node.checked);\n      } else {\n        return this.isEmptyValue(checkedValue)\n          ? []\n          : [this.getNodeByValue(checkedValue)];\n      }\n    },\n    clearCheckedNodes() {\n      const { config, leafOnly } = this;\n      const { multiple, emitPath } = config;\n      if (multiple) {\n        this.getCheckedNodes(leafOnly)\n          .filter(node => !node.isDisabled)\n          .forEach(node => node.doCheck(false));\n        this.calculateMultiCheckedValue();\n      } else {\n        this.checkedValue = emitPath ? [] : null;\n      }\n    }\n  }\n};\n</script>\n"
  },
  {
    "path": "packages/cascader-panel/src/node.js",
    "content": "import { isEqual, capitalize } from 'element-ui/src/utils/util';\nimport { isDef } from 'element-ui/src/utils/shared';\n\nlet uid = 0;\n\nexport default class Node {\n\n  constructor(data, config, parentNode) {\n    this.data = data;\n    this.config = config;\n    this.parent = parentNode || null;\n    this.level = !this.parent ? 1 : this.parent.level + 1;\n    this.uid = uid++;\n\n    this.initState();\n    this.initChildren();\n  }\n\n  initState() {\n    const { value: valueKey, label: labelKey } = this.config;\n\n    this.value = this.data[valueKey];\n    this.label = this.data[labelKey];\n    this.pathNodes = this.calculatePathNodes();\n    this.path = this.pathNodes.map(node => node.value);\n    this.pathLabels = this.pathNodes.map(node => node.label);\n\n    // lazy load\n    this.loading = false;\n    this.loaded = false;\n  }\n\n  initChildren() {\n    const { config } = this;\n    const childrenKey = config.children;\n    const childrenData = this.data[childrenKey];\n    this.hasChildren = Array.isArray(childrenData);\n    this.children = (childrenData || []).map(child => new Node(child, config, this));\n  }\n\n  get isDisabled() {\n    const { data, parent, config } = this;\n    const disabledKey = config.disabled;\n    const { checkStrictly } = config;\n    return data[disabledKey] ||\n      !checkStrictly && parent && parent.isDisabled;\n  }\n\n  get isLeaf() {\n    const { data, loaded, hasChildren, children } = this;\n    const { lazy, leaf: leafKey } = this.config;\n    if (lazy) {\n      const isLeaf = isDef(data[leafKey])\n        ? data[leafKey]\n        : (loaded ? !children.length : false);\n      this.hasChildren = !isLeaf;\n      return isLeaf;\n    }\n    return !hasChildren;\n  }\n\n  calculatePathNodes() {\n    const nodes = [this];\n    let parent = this.parent;\n\n    while (parent) {\n      nodes.unshift(parent);\n      parent = parent.parent;\n    }\n\n    return nodes;\n  }\n\n  getPath() {\n    return this.path;\n  }\n\n  getValue() {\n    return this.value;\n  }\n\n  getValueByOption() {\n    return this.config.emitPath\n      ? this.getPath()\n      : this.getValue();\n  }\n\n  getText(allLevels, separator) {\n    return allLevels ? this.pathLabels.join(separator) : this.label;\n  }\n\n  isSameNode(checkedValue) {\n    const value = this.getValueByOption();\n    return this.config.multiple && Array.isArray(checkedValue)\n      ? checkedValue.some(val => isEqual(val, value))\n      : isEqual(checkedValue, value);\n  }\n\n  broadcast(event, ...args) {\n    const handlerName = `onParent${capitalize(event)}`;\n\n    this.children.forEach(child => {\n      if (child) {\n        // bottom up\n        child.broadcast(event, ...args);\n        child[handlerName] && child[handlerName](...args);\n      }\n    });\n  }\n\n  emit(event, ...args) {\n    const { parent } = this;\n    const handlerName = `onChild${capitalize(event)}`;\n    if (parent) {\n      parent[handlerName] && parent[handlerName](...args);\n      parent.emit(event, ...args);\n    }\n  }\n\n  onParentCheck(checked) {\n    if (!this.isDisabled) {\n      this.setCheckState(checked);\n    }\n  }\n\n  onChildCheck() {\n    const { children } = this;\n    const validChildren = children.filter(child => !child.isDisabled);\n    const checked = validChildren.length\n      ? validChildren.every(child => child.checked)\n      : false;\n\n    this.setCheckState(checked);\n  }\n\n  setCheckState(checked) {\n    const totalNum = this.children.length;\n    const checkedNum = this.children.reduce((c, p) => {\n      const num = p.checked ? 1 : (p.indeterminate ? 0.5 : 0);\n      return c + num;\n    }, 0);\n\n    this.checked = checked;\n    this.indeterminate = checkedNum !== totalNum && checkedNum > 0;\n  }\n\n  syncCheckState(checkedValue) {\n    const value = this.getValueByOption();\n    const checked = this.isSameNode(checkedValue, value);\n\n    this.doCheck(checked);\n  }\n\n  doCheck(checked) {\n    if (this.checked !== checked) {\n      if (this.config.checkStrictly) {\n        this.checked = checked;\n      } else {\n        // bottom up to unify the calculation of the indeterminate state\n        this.broadcast('check', checked);\n        this.setCheckState(checked);\n        this.emit('check');\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/cascader-panel/src/store.js",
    "content": "import Node from './node';\nimport { coerceTruthyValueToArray, valueEquals } from 'element-ui/src/utils/util';\n\nconst flatNodes = (data, leafOnly) => {\n  return data.reduce((res, node) => {\n    if (node.isLeaf) {\n      res.push(node);\n    } else {\n      !leafOnly && res.push(node);\n      res = res.concat(flatNodes(node.children, leafOnly));\n    }\n    return res;\n  }, []);\n};\n\nexport default class Store {\n\n  constructor(data, config) {\n    this.config = config;\n    this.initNodes(data);\n  }\n\n  initNodes(data) {\n    data = coerceTruthyValueToArray(data);\n    this.nodes = data.map(nodeData => new Node(nodeData, this.config));\n    this.flattedNodes = this.getFlattedNodes(false, false);\n    this.leafNodes = this.getFlattedNodes(true, false);\n  }\n\n  appendNode(nodeData, parentNode) {\n    const node = new Node(nodeData, this.config, parentNode);\n    const children = parentNode ? parentNode.children : this.nodes;\n\n    children.push(node);\n  }\n\n  appendNodes(nodeDataList, parentNode) {\n    nodeDataList = coerceTruthyValueToArray(nodeDataList);\n    nodeDataList.forEach(nodeData => this.appendNode(nodeData, parentNode));\n  }\n\n  getNodes() {\n    return this.nodes;\n  }\n\n  getFlattedNodes(leafOnly, cached = true) {\n    const cachedNodes = leafOnly ? this.leafNodes : this.flattedNodes;\n    return cached\n      ? cachedNodes\n      : flatNodes(this.nodes, leafOnly);\n  }\n\n  getNodeByValue(value) {\n    const nodes = this.getFlattedNodes(false, !this.config.lazy)\n      .filter(node => (valueEquals(node.path, value) || node.value === value));\n    return nodes && nodes.length ? nodes[0] : null;\n  }\n}\n"
  },
  {
    "path": "packages/checkbox/index.js",
    "content": "import ElCheckbox from './src/checkbox';\n\n/* istanbul ignore next */\nElCheckbox.install = function(Vue) {\n  Vue.component(ElCheckbox.name, ElCheckbox);\n};\n\nexport default ElCheckbox;\n"
  },
  {
    "path": "packages/checkbox/src/checkbox-button.vue",
    "content": "<template>\n  <label\n    class=\"el-checkbox-button\"\n      :class=\"[\n        size ? 'el-checkbox-button--' + size : '',\n        { 'is-disabled': isDisabled },\n        { 'is-checked': isChecked },\n        { 'is-focus': focus },\n      ]\"\n    role=\"checkbox\"\n    :aria-checked=\"isChecked\"\n    :aria-disabled=\"isDisabled\"\n    >\n    <input\n      v-if=\"trueLabel || falseLabel\"\n      class=\"el-checkbox-button__original\"\n      type=\"checkbox\"\n      :name=\"name\"\n      :disabled=\"isDisabled\"\n      :true-value=\"trueLabel\"\n      :false-value=\"falseLabel\"\n      v-model=\"model\"\n      @change=\"handleChange\"\n      @focus=\"focus = true\"\n      @blur=\"focus = false\">\n    <input\n      v-else\n      class=\"el-checkbox-button__original\"\n      type=\"checkbox\"\n      :name=\"name\"\n      :disabled=\"isDisabled\"\n      :value=\"label\"\n      v-model=\"model\"\n      @change=\"handleChange\"\n      @focus=\"focus = true\"\n      @blur=\"focus = false\">\n\n    <span class=\"el-checkbox-button__inner\"\n      v-if=\"$slots.default || label\"\n      :style=\"isChecked ? activeStyle : null\">\n      <slot>{{label}}</slot>\n    </span>\n\n  </label>\n</template>\n<script>\n  import Emitter from 'element-ui/src/mixins/emitter';\n\n  export default {\n    name: 'ElCheckboxButton',\n\n    mixins: [Emitter],\n\n    inject: {\n      elForm: {\n        default: ''\n      },\n      elFormItem: {\n        default: ''\n      }\n    },\n\n    data() {\n      return {\n        selfModel: false,\n        focus: false,\n        isLimitExceeded: false\n      };\n    },\n\n    props: {\n      value: {},\n      label: {},\n      disabled: Boolean,\n      checked: Boolean,\n      name: String,\n      trueLabel: [String, Number],\n      falseLabel: [String, Number]\n    },\n    computed: {\n      model: {\n        get() {\n          return this._checkboxGroup\n            ? this.store : this.value !== undefined\n              ? this.value : this.selfModel;\n        },\n\n        set(val) {\n          if (this._checkboxGroup) {\n            this.isLimitExceeded = false;\n            (this._checkboxGroup.min !== undefined &&\n              val.length < this._checkboxGroup.min &&\n              (this.isLimitExceeded = true));\n\n            (this._checkboxGroup.max !== undefined &&\n              val.length > this._checkboxGroup.max &&\n              (this.isLimitExceeded = true));\n\n            this.isLimitExceeded === false &&\n            this.dispatch('ElCheckboxGroup', 'input', [val]);\n          } else if (this.value !== undefined) {\n            this.$emit('input', val);\n          } else {\n            this.selfModel = val;\n          }\n        }\n      },\n\n      isChecked() {\n        if ({}.toString.call(this.model) === '[object Boolean]') {\n          return this.model;\n        } else if (Array.isArray(this.model)) {\n          return this.model.indexOf(this.label) > -1;\n        } else if (this.model !== null && this.model !== undefined) {\n          return this.model === this.trueLabel;\n        }\n      },\n\n      _checkboxGroup() {\n        let parent = this.$parent;\n        while (parent) {\n          if (parent.$options.componentName !== 'ElCheckboxGroup') {\n            parent = parent.$parent;\n          } else {\n            return parent;\n          }\n        }\n        return false;\n      },\n\n      store() {\n        return this._checkboxGroup ? this._checkboxGroup.value : this.value;\n      },\n\n      activeStyle() {\n        return {\n          backgroundColor: this._checkboxGroup.fill || '',\n          borderColor: this._checkboxGroup.fill || '',\n          color: this._checkboxGroup.textColor || '',\n          'box-shadow': '-1px 0 0 0 ' + this._checkboxGroup.fill\n\n        };\n      },\n\n      _elFormItemSize() {\n        return (this.elFormItem || {}).elFormItemSize;\n      },\n\n      size() {\n        return this._checkboxGroup.checkboxGroupSize || this._elFormItemSize || (this.$ELEMENT || {}).size;\n      },\n\n      /* used to make the isDisabled judgment under max/min props */\n      isLimitDisabled() {\n        const { max, min } = this._checkboxGroup;\n        return !!(max || min) &&\n          (this.model.length >= max && !this.isChecked) ||\n          (this.model.length <= min && this.isChecked);\n      },\n\n      isDisabled() {\n        return this._checkboxGroup\n          ? this._checkboxGroup.disabled || this.disabled || (this.elForm || {}).disabled || this.isLimitDisabled\n          : this.disabled || (this.elForm || {}).disabled;\n      }\n    },\n    methods: {\n      addToStore() {\n        if (\n          Array.isArray(this.model) &&\n          this.model.indexOf(this.label) === -1\n        ) {\n          this.model.push(this.label);\n        } else {\n          this.model = this.trueLabel || true;\n        }\n      },\n      handleChange(ev) {\n        if (this.isLimitExceeded) return;\n        let value;\n        if (ev.target.checked) {\n          value = this.trueLabel === undefined ? true : this.trueLabel;\n        } else {\n          value = this.falseLabel === undefined ? false : this.falseLabel;\n        }\n        this.$emit('change', value, ev);\n        this.$nextTick(() => {\n          if (this._checkboxGroup) {\n            this.dispatch('ElCheckboxGroup', 'change', [this._checkboxGroup.value]);\n          }\n        });\n      }\n    },\n\n    created() {\n      this.checked && this.addToStore();\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/checkbox/src/checkbox-group.vue",
    "content": "<script>\n  import Emitter from 'element-ui/src/mixins/emitter';\n\n  export default {\n    name: 'ElCheckboxGroup',\n\n    componentName: 'ElCheckboxGroup',\n\n    mixins: [Emitter],\n\n    inject: {\n      elFormItem: {\n        default: ''\n      }\n    },\n\n    props: {\n      value: {},\n      disabled: Boolean,\n      min: Number,\n      max: Number,\n      size: String,\n      fill: String,\n      textColor: String\n    },\n\n    computed: {\n      _elFormItemSize() {\n        return (this.elFormItem || {}).elFormItemSize;\n      },\n      checkboxGroupSize() {\n        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;\n      }\n    },\n\n    watch: {\n      value(value) {\n        this.dispatch('ElFormItem', 'el.form.change', [value]);\n      }\n    }\n  };\n</script>\n\n<template>\n  <div class=\"el-checkbox-group\" role=\"group\" aria-label=\"checkbox-group\">\n    <slot></slot>\n  </div>\n</template>\n"
  },
  {
    "path": "packages/checkbox/src/checkbox.vue",
    "content": "<template>\n  <label\n    class=\"el-checkbox\"\n    :class=\"[\n      border && checkboxSize ? 'el-checkbox--' + checkboxSize : '',\n      { 'is-disabled': isDisabled },\n      { 'is-bordered': border },\n      { 'is-checked': isChecked }\n    ]\"\n    :id=\"id\"\n  >\n    <span class=\"el-checkbox__input\"\n      :class=\"{\n        'is-disabled': isDisabled,\n        'is-checked': isChecked,\n        'is-indeterminate': indeterminate,\n        'is-focus': focus\n      }\"\n      :tabindex=\"indeterminate ? 0 : false\"\n      :role=\"indeterminate ? 'checkbox' : false\"\n      :aria-checked=\"indeterminate ? 'mixed' : false\"\n    >\n      <span class=\"el-checkbox__inner\"></span>\n      <input\n        v-if=\"trueLabel || falseLabel\"\n        class=\"el-checkbox__original\"\n        type=\"checkbox\"\n        :aria-hidden=\"indeterminate ? 'true' : 'false'\"\n        :name=\"name\"\n        :disabled=\"isDisabled\"\n        :true-value=\"trueLabel\"\n        :false-value=\"falseLabel\"\n        v-model=\"model\"\n        @change=\"handleChange\"\n        @focus=\"focus = true\"\n        @blur=\"focus = false\">\n      <input\n        v-else\n        class=\"el-checkbox__original\"\n        type=\"checkbox\"\n        :aria-hidden=\"indeterminate ? 'true' : 'false'\"\n        :disabled=\"isDisabled\"\n        :value=\"label\"\n        :name=\"name\"\n        v-model=\"model\"\n        @change=\"handleChange\"\n        @focus=\"focus = true\"\n        @blur=\"focus = false\">\n    </span>\n    <span class=\"el-checkbox__label\" v-if=\"$slots.default || label\">\n      <slot></slot>\n      <template v-if=\"!$slots.default\">{{label}}</template>\n    </span>\n  </label>\n</template>\n<script>\n  import Emitter from 'element-ui/src/mixins/emitter';\n\n  export default {\n    name: 'ElCheckbox',\n\n    mixins: [Emitter],\n\n    inject: {\n      elForm: {\n        default: ''\n      },\n      elFormItem: {\n        default: ''\n      }\n    },\n\n    componentName: 'ElCheckbox',\n\n    data() {\n      return {\n        selfModel: false,\n        focus: false,\n        isLimitExceeded: false\n      };\n    },\n\n    computed: {\n      model: {\n        get() {\n          return this.isGroup\n            ? this.store : this.value !== undefined\n              ? this.value : this.selfModel;\n        },\n\n        set(val) {\n          if (this.isGroup) {\n            this.isLimitExceeded = false;\n            (this._checkboxGroup.min !== undefined &&\n              val.length < this._checkboxGroup.min &&\n              (this.isLimitExceeded = true));\n\n            (this._checkboxGroup.max !== undefined &&\n              val.length > this._checkboxGroup.max &&\n              (this.isLimitExceeded = true));\n\n            this.isLimitExceeded === false &&\n            this.dispatch('ElCheckboxGroup', 'input', [val]);\n          } else {\n            this.$emit('input', val);\n            this.selfModel = val;\n          }\n        }\n      },\n\n      isChecked() {\n        if ({}.toString.call(this.model) === '[object Boolean]') {\n          return this.model;\n        } else if (Array.isArray(this.model)) {\n          return this.model.indexOf(this.label) > -1;\n        } else if (this.model !== null && this.model !== undefined) {\n          return this.model === this.trueLabel;\n        }\n      },\n\n      isGroup() {\n        let parent = this.$parent;\n        while (parent) {\n          if (parent.$options.componentName !== 'ElCheckboxGroup') {\n            parent = parent.$parent;\n          } else {\n            this._checkboxGroup = parent;\n            return true;\n          }\n        }\n        return false;\n      },\n\n      store() {\n        return this._checkboxGroup ? this._checkboxGroup.value : this.value;\n      },\n\n      /* used to make the isDisabled judgment under max/min props */\n      isLimitDisabled() {\n        const { max, min } = this._checkboxGroup;\n        return !!(max || min) &&\n          (this.model.length >= max && !this.isChecked) ||\n          (this.model.length <= min && this.isChecked);\n      },\n\n      isDisabled() {\n        return this.isGroup\n          ? this._checkboxGroup.disabled || this.disabled || (this.elForm || {}).disabled || this.isLimitDisabled\n          : this.disabled || (this.elForm || {}).disabled;\n      },\n\n      _elFormItemSize() {\n        return (this.elFormItem || {}).elFormItemSize;\n      },\n\n      checkboxSize() {\n        const temCheckboxSize = this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;\n        return this.isGroup\n          ? this._checkboxGroup.checkboxGroupSize || temCheckboxSize\n          : temCheckboxSize;\n      }\n    },\n\n    props: {\n      value: {},\n      label: {},\n      indeterminate: Boolean,\n      disabled: Boolean,\n      checked: Boolean,\n      name: String,\n      trueLabel: [String, Number],\n      falseLabel: [String, Number],\n      id: String, /* 当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系*/\n      controls: String, /* 当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系*/\n      border: Boolean,\n      size: String\n    },\n\n    methods: {\n      addToStore() {\n        if (\n          Array.isArray(this.model) &&\n          this.model.indexOf(this.label) === -1\n        ) {\n          this.model.push(this.label);\n        } else {\n          this.model = this.trueLabel || true;\n        }\n      },\n      handleChange(ev) {\n        if (this.isLimitExceeded) return;\n        let value;\n        if (ev.target.checked) {\n          value = this.trueLabel === undefined ? true : this.trueLabel;\n        } else {\n          value = this.falseLabel === undefined ? false : this.falseLabel;\n        }\n        this.$emit('change', value, ev);\n        this.$nextTick(() => {\n          if (this.isGroup) {\n            this.dispatch('ElCheckboxGroup', 'change', [this._checkboxGroup.value]);\n          }\n        });\n      }\n    },\n\n    created() {\n      this.checked && this.addToStore();\n    },\n    mounted() { // 为indeterminate元素 添加aria-controls 属性\n      if (this.indeterminate) {\n        this.$el.setAttribute('aria-controls', this.controls);\n      }\n    },\n\n    watch: {\n      value(value) {\n        this.dispatch('ElFormItem', 'el.form.change', value);\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/checkbox-button/index.js",
    "content": "import ElCheckboxButton from '../checkbox/src/checkbox-button.vue';\n\n/* istanbul ignore next */\nElCheckboxButton.install = function(Vue) {\n  Vue.component(ElCheckboxButton.name, ElCheckboxButton);\n};\n\nexport default ElCheckboxButton;\n"
  },
  {
    "path": "packages/checkbox-group/index.js",
    "content": "import ElCheckboxGroup from '../checkbox/src/checkbox-group.vue';\n\n/* istanbul ignore next */\nElCheckboxGroup.install = function(Vue) {\n  Vue.component(ElCheckboxGroup.name, ElCheckboxGroup);\n};\n\nexport default ElCheckboxGroup;\n"
  },
  {
    "path": "packages/col/index.js",
    "content": "import ElCol from './src/col';\n\n/* istanbul ignore next */\nElCol.install = function(Vue) {\n  Vue.component(ElCol.name, ElCol);\n};\n\nexport default ElCol;\n\n"
  },
  {
    "path": "packages/col/src/col.js",
    "content": "export default {\n  name: 'ElCol',\n\n  props: {\n    span: {\n      type: Number,\n      default: 24\n    },\n    tag: {\n      type: String,\n      default: 'div'\n    },\n    offset: Number,\n    pull: Number,\n    push: Number,\n    xs: [Number, Object],\n    sm: [Number, Object],\n    md: [Number, Object],\n    lg: [Number, Object],\n    xl: [Number, Object]\n  },\n\n  computed: {\n    gutter() {\n      let parent = this.$parent;\n      while (parent && parent.$options.componentName !== 'ElRow') {\n        parent = parent.$parent;\n      }\n      return parent ? parent.gutter : 0;\n    }\n  },\n  render(h) {\n    let classList = [];\n    let style = {};\n\n    if (this.gutter) {\n      style.paddingLeft = this.gutter / 2 + 'px';\n      style.paddingRight = style.paddingLeft;\n    }\n\n    ['span', 'offset', 'pull', 'push'].forEach(prop => {\n      if (this[prop] || this[prop] === 0) {\n        classList.push(\n          prop !== 'span'\n            ? `el-col-${prop}-${this[prop]}`\n            : `el-col-${this[prop]}`\n        );\n      }\n    });\n\n    ['xs', 'sm', 'md', 'lg', 'xl'].forEach(size => {\n      if (typeof this[size] === 'number') {\n        classList.push(`el-col-${size}-${this[size]}`);\n      } else if (typeof this[size] === 'object') {\n        let props = this[size];\n        Object.keys(props).forEach(prop => {\n          classList.push(\n            prop !== 'span'\n              ? `el-col-${size}-${prop}-${props[prop]}`\n              : `el-col-${size}-${props[prop]}`\n          );\n        });\n      }\n    });\n\n    return h(this.tag, {\n      class: ['el-col', classList],\n      style\n    }, this.$slots.default);\n  }\n};\n"
  },
  {
    "path": "packages/collapse/index.js",
    "content": "import ElCollapse from './src/collapse';\n\n/* istanbul ignore next */\nElCollapse.install = function(Vue) {\n  Vue.component(ElCollapse.name, ElCollapse);\n};\n\nexport default ElCollapse;\n\n"
  },
  {
    "path": "packages/collapse/src/collapse-item.vue",
    "content": "<template>\n  <div class=\"el-collapse-item\"\n    :class=\"{'is-active': isActive, 'is-disabled': disabled }\">\n    <div\n      role=\"tab\"\n      :aria-expanded=\"isActive\"\n      :aria-controls=\"`el-collapse-content-${id}`\"\n      :aria-describedby =\"`el-collapse-content-${id}`\"\n    >\n      <div\n        class=\"el-collapse-item__header\"\n        @click=\"handleHeaderClick\"\n        role=\"button\"\n        :id=\"`el-collapse-head-${id}`\"\n        :tabindex=\"disabled ? undefined : 0\"\n        @keyup.space.enter.stop=\"handleEnterClick\"\n        :class=\"{\n          'focusing': focusing,\n          'is-active': isActive\n        }\"\n        @focus=\"handleFocus\"\n        @blur=\"focusing = false\"\n      >\n        <slot name=\"title\">{{title}}</slot>\n        <i\n          class=\"el-collapse-item__arrow el-icon-arrow-right\"\n          :class=\"{'is-active': isActive}\">\n        </i>\n      </div>\n    </div>\n    <el-collapse-transition>\n      <div\n        class=\"el-collapse-item__wrap\"\n        v-show=\"isActive\"\n        role=\"tabpanel\"\n        :aria-hidden=\"!isActive\"\n        :aria-labelledby=\"`el-collapse-head-${id}`\"\n        :id=\"`el-collapse-content-${id}`\"\n      >\n        <div class=\"el-collapse-item__content\">\n          <slot></slot>\n        </div>\n      </div>\n    </el-collapse-transition>\n  </div>\n</template>\n<script>\n  import ElCollapseTransition from 'element-ui/src/transitions/collapse-transition';\n  import Emitter from 'element-ui/src/mixins/emitter';\n  import { generateId } from 'element-ui/src/utils/util';\n\n  export default {\n    name: 'ElCollapseItem',\n\n    componentName: 'ElCollapseItem',\n\n    mixins: [Emitter],\n\n    components: { ElCollapseTransition },\n\n    data() {\n      return {\n        contentWrapStyle: {\n          height: 'auto',\n          display: 'block'\n        },\n        contentHeight: 0,\n        focusing: false,\n        isClick: false,\n        id: generateId()\n      };\n    },\n\n    inject: ['collapse'],\n\n    props: {\n      title: String,\n      name: {\n        type: [String, Number],\n        default() {\n          return this._uid;\n        }\n      },\n      disabled: Boolean\n    },\n\n    computed: {\n      isActive() {\n        return this.collapse.activeNames.indexOf(this.name) > -1;\n      }\n    },\n\n    methods: {\n      handleFocus() {\n        setTimeout(() => {\n          if (!this.isClick) {\n            this.focusing = true;\n          } else {\n            this.isClick = false;\n          }\n        }, 50);\n      },\n      handleHeaderClick() {\n        if (this.disabled) return;\n        this.dispatch('ElCollapse', 'item-click', this);\n        this.focusing = false;\n        this.isClick = true;\n      },\n      handleEnterClick() {\n        this.dispatch('ElCollapse', 'item-click', this);\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/collapse/src/collapse.vue",
    "content": "<template>\n  <div class=\"el-collapse\" role=\"tablist\" aria-multiselectable=\"true\">\n    <slot></slot>\n  </div>\n</template>\n<script>\n  export default {\n    name: 'ElCollapse',\n\n    componentName: 'ElCollapse',\n\n    props: {\n      accordion: Boolean,\n      value: {\n        type: [Array, String, Number],\n        default() {\n          return [];\n        }\n      }\n    },\n\n    data() {\n      return {\n        activeNames: [].concat(this.value)\n      };\n    },\n\n    provide() {\n      return {\n        collapse: this\n      };\n    },\n\n    watch: {\n      value(value) {\n        this.activeNames = [].concat(value);\n      }\n    },\n\n    methods: {\n      setActiveNames(activeNames) {\n        activeNames = [].concat(activeNames);\n        let value = this.accordion ? activeNames[0] : activeNames;\n        this.activeNames = activeNames;\n        this.$emit('input', value);\n        this.$emit('change', value);\n      },\n      handleItemClick(item) {\n        if (this.accordion) {\n          this.setActiveNames(\n            (this.activeNames[0] || this.activeNames[0] === 0) &&\n            this.activeNames[0] === item.name\n              ? '' : item.name\n          );\n        } else {\n          let activeNames = this.activeNames.slice(0);\n          let index = activeNames.indexOf(item.name);\n\n          if (index > -1) {\n            activeNames.splice(index, 1);\n          } else {\n            activeNames.push(item.name);\n          }\n          this.setActiveNames(activeNames);\n        }\n      }\n    },\n\n    created() {\n      this.$on('item-click', this.handleItemClick);\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/collapse-item/index.js",
    "content": "import ElCollapseItem from '../collapse/src/collapse-item.vue';\n\n/* istanbul ignore next */\nElCollapseItem.install = function(Vue) {\n  Vue.component(ElCollapseItem.name, ElCollapseItem);\n};\n\nexport default ElCollapseItem;\n"
  },
  {
    "path": "packages/color-picker/index.js",
    "content": "import ColorPicker from './src/main';\n\n/* istanbul ignore next */\nColorPicker.install = function(Vue) {\n  Vue.component(ColorPicker.name, ColorPicker);\n};\n\nexport default ColorPicker;\n"
  },
  {
    "path": "packages/color-picker/src/color.js",
    "content": "const hsv2hsl = function(hue, sat, val) {\n  return [\n    hue,\n    (sat * val / ((hue = (2 - sat) * val) < 1 ? hue : 2 - hue)) || 0,\n    hue / 2\n  ];\n};\n\n// Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1\n// <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>\nconst isOnePointZero = function(n) {\n  return typeof n === 'string' && n.indexOf('.') !== -1 && parseFloat(n) === 1;\n};\n\nconst isPercentage = function(n) {\n  return typeof n === 'string' && n.indexOf('%') !== -1;\n};\n\n// Take input from [0, n] and return it as [0, 1]\nconst bound01 = function(value, max) {\n  if (isOnePointZero(value)) value = '100%';\n\n  const processPercent = isPercentage(value);\n  value = Math.min(max, Math.max(0, parseFloat(value)));\n\n  // Automatically convert percentage into number\n  if (processPercent) {\n    value = parseInt(value * max, 10) / 100;\n  }\n\n  // Handle floating point rounding errors\n  if ((Math.abs(value - max) < 0.000001)) {\n    return 1;\n  }\n\n  // Convert into [0, 1] range if it isn't already\n  return (value % max) / parseFloat(max);\n};\n\nconst INT_HEX_MAP = { 10: 'A', 11: 'B', 12: 'C', 13: 'D', 14: 'E', 15: 'F' };\n\nconst toHex = function({ r, g, b }) {\n  const hexOne = function(value) {\n    value = Math.min(Math.round(value), 255);\n    const high = Math.floor(value / 16);\n    const low = value % 16;\n    return '' + (INT_HEX_MAP[high] || high) + (INT_HEX_MAP[low] || low);\n  };\n\n  if (isNaN(r) || isNaN(g) || isNaN(b)) return '';\n\n  return '#' + hexOne(r) + hexOne(g) + hexOne(b);\n};\n\nconst HEX_INT_MAP = { A: 10, B: 11, C: 12, D: 13, E: 14, F: 15 };\n\nconst parseHexChannel = function(hex) {\n  if (hex.length === 2) {\n    return (HEX_INT_MAP[hex[0].toUpperCase()] || +hex[0]) * 16 + (HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1]);\n  }\n\n  return HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1];\n};\n\nconst hsl2hsv = function(hue, sat, light) {\n  sat = sat / 100;\n  light = light / 100;\n  let smin = sat;\n  const lmin = Math.max(light, 0.01);\n  let sv;\n  let v;\n\n  light *= 2;\n  sat *= (light <= 1) ? light : 2 - light;\n  smin *= lmin <= 1 ? lmin : 2 - lmin;\n  v = (light + sat) / 2;\n  sv = light === 0 ? (2 * smin) / (lmin + smin) : (2 * sat) / (light + sat);\n\n  return {\n    h: hue,\n    s: sv * 100,\n    v: v * 100\n  };\n};\n\n// `rgbToHsv`\n// Converts an RGB color value to HSV\n// *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]\n// *Returns:* { h, s, v } in [0,1]\nconst rgb2hsv = function(r, g, b) {\n  r = bound01(r, 255);\n  g = bound01(g, 255);\n  b = bound01(b, 255);\n\n  const max = Math.max(r, g, b);\n  const min = Math.min(r, g, b);\n  let h, s;\n  let v = max;\n\n  const d = max - min;\n  s = max === 0 ? 0 : d / max;\n\n  if (max === min) {\n    h = 0; // achromatic\n  } else {\n    switch (max) {\n      case r:\n        h = (g - b) / d + (g < b ? 6 : 0);\n        break;\n      case g:\n        h = (b - r) / d + 2;\n        break;\n      case b:\n        h = (r - g) / d + 4;\n        break;\n    }\n    h /= 6;\n  }\n\n  return { h: h * 360, s: s * 100, v: v * 100 };\n};\n\n// `hsvToRgb`\n// Converts an HSV color value to RGB.\n// *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]\n// *Returns:* { r, g, b } in the set [0, 255]\nconst hsv2rgb = function(h, s, v) {\n  h = bound01(h, 360) * 6;\n  s = bound01(s, 100);\n  v = bound01(v, 100);\n\n  const i = Math.floor(h);\n  const f = h - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  const mod = i % 6;\n  const r = [v, q, p, p, t, v][mod];\n  const g = [t, v, v, q, p, p][mod];\n  const b = [p, p, t, v, v, q][mod];\n\n  return {\n    r: Math.round(r * 255),\n    g: Math.round(g * 255),\n    b: Math.round(b * 255)\n  };\n};\n\nexport default class Color {\n  constructor(options) {\n    this._hue = 0;\n    this._saturation = 100;\n    this._value = 100;\n    this._alpha = 100;\n\n    this.enableAlpha = false;\n    this.format = 'hex';\n    this.value = '';\n\n    options = options || {};\n\n    for (let option in options) {\n      if (options.hasOwnProperty(option)) {\n        this[option] = options[option];\n      }\n    }\n\n    this.doOnChange();\n  }\n\n  set(prop, value) {\n    if (arguments.length === 1 && typeof prop === 'object') {\n      for (let p in prop) {\n        if (prop.hasOwnProperty(p)) {\n          this.set(p, prop[p]);\n        }\n      }\n\n      return;\n    }\n\n    this['_' + prop] = value;\n    this.doOnChange();\n  }\n\n  get(prop) {\n    return this['_' + prop];\n  }\n\n  toRgb() {\n    return hsv2rgb(this._hue, this._saturation, this._value);\n  }\n\n  fromString(value) {\n    if (!value) {\n      this._hue = 0;\n      this._saturation = 100;\n      this._value = 100;\n\n      this.doOnChange();\n      return;\n    }\n\n    const fromHSV = (h, s, v) => {\n      this._hue = Math.max(0, Math.min(360, h));\n      this._saturation = Math.max(0, Math.min(100, s));\n      this._value = Math.max(0, Math.min(100, v));\n\n      this.doOnChange();\n    };\n\n    if (value.indexOf('hsl') !== -1) {\n      const parts = value.replace(/hsla|hsl|\\(|\\)/gm, '')\n        .split(/\\s|,/g).filter((val) => val !== '').map((val, index) => index > 2 ? parseFloat(val) : parseInt(val, 10));\n\n      if (parts.length === 4) {\n        this._alpha = Math.floor(parseFloat(parts[3]) * 100);\n      } else if (parts.length === 3) {\n        this._alpha = 100;\n      }\n      if (parts.length >= 3) {\n        const { h, s, v } = hsl2hsv(parts[0], parts[1], parts[2]);\n        fromHSV(h, s, v);\n      }\n    } else if (value.indexOf('hsv') !== -1) {\n      const parts = value.replace(/hsva|hsv|\\(|\\)/gm, '')\n        .split(/\\s|,/g).filter((val) => val !== '').map((val, index) => index > 2 ? parseFloat(val) : parseInt(val, 10));\n\n      if (parts.length === 4) {\n        this._alpha = Math.floor(parseFloat(parts[3]) * 100);\n      } else if (parts.length === 3) {\n        this._alpha = 100;\n      }\n      if (parts.length >= 3) {\n        fromHSV(parts[0], parts[1], parts[2]);\n      }\n    } else if (value.indexOf('rgb') !== -1) {\n      const parts = value.replace(/rgba|rgb|\\(|\\)/gm, '')\n        .split(/\\s|,/g).filter((val) => val !== '').map((val, index) => index > 2 ? parseFloat(val) : parseInt(val, 10));\n\n      if (parts.length === 4) {\n        this._alpha = Math.floor(parseFloat(parts[3]) * 100);\n      } else if (parts.length === 3) {\n        this._alpha = 100;\n      }\n      if (parts.length >= 3) {\n        const { h, s, v } = rgb2hsv(parts[0], parts[1], parts[2]);\n        fromHSV(h, s, v);\n      }\n    } else if (value.indexOf('#') !== -1) {\n      const hex = value.replace('#', '').trim();\n      if (!/^(?:[0-9a-fA-F]{3}){1,2}|[0-9a-fA-F]{8}$/.test(hex)) return;\n      let r, g, b;\n\n      if (hex.length === 3) {\n        r = parseHexChannel(hex[0] + hex[0]);\n        g = parseHexChannel(hex[1] + hex[1]);\n        b = parseHexChannel(hex[2] + hex[2]);\n      } else if (hex.length === 6 || hex.length === 8) {\n        r = parseHexChannel(hex.substring(0, 2));\n        g = parseHexChannel(hex.substring(2, 4));\n        b = parseHexChannel(hex.substring(4, 6));\n      }\n\n      if (hex.length === 8) {\n        this._alpha = Math.floor(parseHexChannel(hex.substring(6)) / 255 * 100);\n      } else if (hex.length === 3 || hex.length === 6) {\n        this._alpha = 100;\n      }\n\n      const { h, s, v } = rgb2hsv(r, g, b);\n      fromHSV(h, s, v);\n    }\n  }\n\n  compare(color) {\n    return Math.abs(color._hue - this._hue) < 2 &&\n      Math.abs(color._saturation - this._saturation) < 1 &&\n      Math.abs(color._value - this._value) < 1 &&\n      Math.abs(color._alpha - this._alpha) < 1;\n  }\n\n  doOnChange() {\n    const { _hue, _saturation, _value, _alpha, format } = this;\n\n    if (this.enableAlpha) {\n      switch (format) {\n        case 'hsl':\n          const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100);\n          this.value = `hsla(${ _hue }, ${ Math.round(hsl[1] * 100) }%, ${ Math.round(hsl[2] * 100) }%, ${ _alpha / 100})`;\n          break;\n        case 'hsv':\n          this.value = `hsva(${ _hue }, ${ Math.round(_saturation) }%, ${ Math.round(_value) }%, ${ _alpha / 100})`;\n          break;\n        default:\n          const { r, g, b } = hsv2rgb(_hue, _saturation, _value);\n          this.value = `rgba(${r}, ${g}, ${b}, ${ _alpha / 100 })`;\n      }\n    } else {\n      switch (format) {\n        case 'hsl':\n          const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100);\n          this.value = `hsl(${ _hue }, ${ Math.round(hsl[1] * 100) }%, ${ Math.round(hsl[2] * 100) }%)`;\n          break;\n        case 'hsv':\n          this.value = `hsv(${ _hue }, ${ Math.round(_saturation) }%, ${ Math.round(_value) }%)`;\n          break;\n        case 'rgb':\n          const { r, g, b } = hsv2rgb(_hue, _saturation, _value);\n          this.value = `rgb(${r}, ${g}, ${b})`;\n          break;\n        default:\n          this.value = toHex(hsv2rgb(_hue, _saturation, _value));\n      }\n    }\n  }\n};\n"
  },
  {
    "path": "packages/color-picker/src/components/alpha-slider.vue",
    "content": "<template>\n  <div class=\"el-color-alpha-slider\" :class=\"{ 'is-vertical': vertical }\">\n    <div class=\"el-color-alpha-slider__bar\"\n         @click=\"handleClick\"\n         ref=\"bar\"\n         :style=\"{\n           background: background\n         }\">\n    </div>\n    <div class=\"el-color-alpha-slider__thumb\"\n         ref=\"thumb\"\n         :style=\"{\n           left: thumbLeft + 'px',\n           top: thumbTop + 'px'\n         }\">\n    </div>\n  </div>\n</template>\n\n<script>\n  import draggable from '../draggable';\n\n  export default {\n    name: 'el-color-alpha-slider',\n\n    props: {\n      color: {\n        required: true\n      },\n      vertical: Boolean\n    },\n\n    watch: {\n      'color._alpha'() {\n        this.update();\n      },\n\n      'color.value'() {\n        this.update();\n      }\n    },\n\n    methods: {\n      handleClick(event) {\n        const thumb = this.$refs.thumb;\n        const target = event.target;\n\n        if (target !== thumb) {\n          this.handleDrag(event);\n        }\n      },\n\n      handleDrag(event) {\n        const rect = this.$el.getBoundingClientRect();\n        const { thumb } = this.$refs;\n\n        if (!this.vertical) {\n          let left = event.clientX - rect.left;\n          left = Math.max(thumb.offsetWidth / 2, left);\n          left = Math.min(left, rect.width - thumb.offsetWidth / 2);\n\n          this.color.set('alpha', Math.round((left - thumb.offsetWidth / 2) / (rect.width - thumb.offsetWidth) * 100));\n        } else {\n          let top = event.clientY - rect.top;\n          top = Math.max(thumb.offsetHeight / 2, top);\n          top = Math.min(top, rect.height - thumb.offsetHeight / 2);\n\n          this.color.set('alpha', Math.round((top - thumb.offsetHeight / 2) / (rect.height - thumb.offsetHeight) * 100));\n        }\n      },\n\n      getThumbLeft() {\n        if (this.vertical) return 0;\n        const el = this.$el;\n        const alpha = this.color._alpha;\n\n        if (!el) return 0;\n        const thumb = this.$refs.thumb;\n        return Math.round(alpha * (el.offsetWidth - thumb.offsetWidth / 2) / 100);\n      },\n\n      getThumbTop() {\n        if (!this.vertical) return 0;\n        const el = this.$el;\n        const alpha = this.color._alpha;\n\n        if (!el) return 0;\n        const thumb = this.$refs.thumb;\n        return Math.round(alpha * (el.offsetHeight - thumb.offsetHeight / 2) / 100);\n      },\n\n      getBackground() {\n        if (this.color && this.color.value) {\n          const { r, g, b } = this.color.toRgb();\n          return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`;\n        }\n        return null;\n      },\n\n      update() {\n        this.thumbLeft = this.getThumbLeft();\n        this.thumbTop = this.getThumbTop();\n        this.background = this.getBackground();\n      }\n    },\n\n    data() {\n      return {\n        thumbLeft: 0,\n        thumbTop: 0,\n        background: null\n      };\n    },\n\n    mounted() {\n      const { bar, thumb } = this.$refs;\n\n      const dragConfig = {\n        drag: (event) => {\n          this.handleDrag(event);\n        },\n        end: (event) => {\n          this.handleDrag(event);\n        }\n      };\n\n      draggable(bar, dragConfig);\n      draggable(thumb, dragConfig);\n      this.update();\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/color-picker/src/components/hue-slider.vue",
    "content": "<template>\n  <div class=\"el-color-hue-slider\" :class=\"{ 'is-vertical': vertical }\">\n    <div class=\"el-color-hue-slider__bar\" @click=\"handleClick\" ref=\"bar\"></div>\n    <div class=\"el-color-hue-slider__thumb\"\n         :style=\"{\n           left: thumbLeft + 'px',\n           top: thumbTop + 'px'\n         }\"\n         ref=\"thumb\">\n    </div>\n  </div>\n</template>\n\n<script>\n  import draggable from '../draggable';\n\n  export default {\n    name: 'el-color-hue-slider',\n\n    props: {\n      color: {\n        required: true\n      },\n\n      vertical: Boolean\n    },\n\n    data() {\n      return {\n        thumbLeft: 0,\n        thumbTop: 0\n      };\n    },\n\n    computed: {\n      hueValue() {\n        const hue = this.color.get('hue');\n        return hue;\n      }\n    },\n\n    watch: {\n      hueValue() {\n        this.update();\n      }\n    },\n\n    methods: {\n      handleClick(event) {\n        const thumb = this.$refs.thumb;\n        const target = event.target;\n\n        if (target !== thumb) {\n          this.handleDrag(event);\n        }\n      },\n\n      handleDrag(event) {\n        const rect = this.$el.getBoundingClientRect();\n        const { thumb } = this.$refs;\n        let hue;\n\n        if (!this.vertical) {\n          let left = event.clientX - rect.left;\n          left = Math.min(left, rect.width - thumb.offsetWidth / 2);\n          left = Math.max(thumb.offsetWidth / 2, left);\n\n          hue = Math.round((left - thumb.offsetWidth / 2) / (rect.width - thumb.offsetWidth) * 360);\n        } else {\n          let top = event.clientY - rect.top;\n          top = Math.min(top, rect.height - thumb.offsetHeight / 2);\n          top = Math.max(thumb.offsetHeight / 2, top);\n\n          hue = Math.round((top - thumb.offsetHeight / 2) / (rect.height - thumb.offsetHeight) * 360);\n        }\n\n        this.color.set('hue', hue);\n      },\n\n      getThumbLeft() {\n        if (this.vertical) return 0;\n        const el = this.$el;\n        const hue = this.color.get('hue');\n\n        if (!el) return 0;\n        const thumb = this.$refs.thumb;\n        return Math.round(hue * (el.offsetWidth - thumb.offsetWidth / 2) / 360);\n      },\n\n      getThumbTop() {\n        if (!this.vertical) return 0;\n        const el = this.$el;\n        const hue = this.color.get('hue');\n\n        if (!el) return 0;\n        const thumb = this.$refs.thumb;\n        return Math.round(hue * (el.offsetHeight - thumb.offsetHeight / 2) / 360);\n      },\n\n      update() {\n        this.thumbLeft = this.getThumbLeft();\n        this.thumbTop = this.getThumbTop();\n      }\n    },\n\n    mounted() {\n      const { bar, thumb } = this.$refs;\n\n      const dragConfig = {\n        drag: (event) => {\n          this.handleDrag(event);\n        },\n        end: (event) => {\n          this.handleDrag(event);\n        }\n      };\n\n      draggable(bar, dragConfig);\n      draggable(thumb, dragConfig);\n      this.update();\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/color-picker/src/components/picker-dropdown.vue",
    "content": "<template>\n  <transition name=\"el-zoom-in-top\" @after-leave=\"doDestroy\">\n    <div\n      class=\"el-color-dropdown\"\n      v-show=\"showPopper\">\n      <div class=\"el-color-dropdown__main-wrapper\">\n        <hue-slider ref=\"hue\" :color=\"color\" vertical style=\"float: right;\"></hue-slider>\n        <sv-panel ref=\"sl\" :color=\"color\"></sv-panel>\n      </div>\n      <alpha-slider v-if=\"showAlpha\" ref=\"alpha\" :color=\"color\"></alpha-slider>\n      <predefine v-if=\"predefine\" :color=\"color\" :colors=\"predefine\"></predefine>\n      <div class=\"el-color-dropdown__btns\">\n        <span class=\"el-color-dropdown__value\">\n          <el-input\n            v-model=\"customInput\"\n            @keyup.native.enter=\"handleConfirm\"\n            @blur=\"handleConfirm\"\n            :validate-event=\"false\"\n            size=\"mini\">\n          </el-input>\n        </span>\n        <el-button\n          size=\"mini\"\n          type=\"text\"\n          class=\"el-color-dropdown__link-btn\"\n          @click=\"$emit('clear')\">\n          {{ t('el.colorpicker.clear') }}\n        </el-button>\n        <el-button\n          plain\n          size=\"mini\"\n          class=\"el-color-dropdown__btn\"\n          @click=\"confirmValue\">\n          {{ t('el.colorpicker.confirm') }}\n        </el-button>\n      </div>\n    </div>\n  </transition>\n</template>\n\n<script>\n  import SvPanel from './sv-panel';\n  import HueSlider from './hue-slider';\n  import AlphaSlider from './alpha-slider';\n  import Predefine from './predefine';\n  import Popper from 'element-ui/src/utils/vue-popper';\n  import Locale from 'element-ui/src/mixins/locale';\n  import ElInput from 'element-ui/packages/input';\n  import ElButton from 'element-ui/packages/button';\n\n  export default {\n    name: 'el-color-picker-dropdown',\n\n    mixins: [Popper, Locale],\n\n    components: {\n      SvPanel,\n      HueSlider,\n      AlphaSlider,\n      ElInput,\n      ElButton,\n      Predefine\n    },\n\n    props: {\n      color: {\n        required: true\n      },\n      showAlpha: Boolean,\n      predefine: Array\n    },\n\n    data() {\n      return {\n        customInput: ''\n      };\n    },\n\n    computed: {\n      currentColor() {\n        const parent = this.$parent;\n        return !parent.value && !parent.showPanelColor ? '' : parent.color.value;\n      }\n    },\n\n    methods: {\n      confirmValue() {\n        this.$emit('pick');\n      },\n\n      handleConfirm() {\n        this.color.fromString(this.customInput);\n      }\n    },\n\n    mounted() {\n      this.$parent.popperElm = this.popperElm = this.$el;\n      this.referenceElm = this.$parent.$el;\n    },\n\n    watch: {\n      showPopper(val) {\n        if (val === true) {\n          this.$nextTick(() => {\n            const { sl, hue, alpha } = this.$refs;\n            sl && sl.update();\n            hue && hue.update();\n            alpha && alpha.update();\n          });\n        }\n      },\n\n      currentColor: {\n        immediate: true,\n        handler(val) {\n          this.customInput = val;\n        }\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/color-picker/src/components/predefine.vue",
    "content": "<template>\n  <div class=\"el-color-predefine\">\n    <div class=\"el-color-predefine__colors\">\n      <div class=\"el-color-predefine__color-selector\"\n           :class=\"{selected: item.selected, 'is-alpha': item._alpha < 100}\"\n           v-for=\"(item, index) in rgbaColors\"\n           :key=\"colors[index]\"\n           @click=\"handleSelect(index)\">\n        <div :style=\"{'background-color': item.value}\">\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\n  import Color from '../color';\n\n  export default {\n    props: {\n      colors: { type: Array, required: true },\n      color: { required: true }\n    },\n    data() {\n      return {\n        rgbaColors: this.parseColors(this.colors, this.color)\n      };\n    },\n    methods: {\n      handleSelect(index) {\n        this.color.fromString(this.colors[index]);\n      },\n      parseColors(colors, color) {\n        return colors.map(value => {\n          const c = new Color();\n          c.enableAlpha = true;\n          c.format = 'rgba';\n          c.fromString(value);\n          c.selected = c.value === color.value;\n          return c;\n        });\n      }\n    },\n    watch: {\n      '$parent.currentColor'(val) {\n        const color = new Color();\n        color.fromString(val);\n\n        this.rgbaColors.forEach(item => {\n          item.selected = color.compare(item);\n        });\n      },\n      colors(newVal) {\n        this.rgbaColors = this.parseColors(newVal, this.color);\n      },\n      color(newVal) {\n        this.rgbaColors = this.parseColors(this.colors, newVal);\n      }\n    }\n  };\n</script>"
  },
  {
    "path": "packages/color-picker/src/components/sv-panel.vue",
    "content": "<template>\n  <div class=\"el-color-svpanel\"\n      :style=\"{\n        backgroundColor: background\n      }\">\n    <div class=\"el-color-svpanel__white\"></div>\n    <div class=\"el-color-svpanel__black\"></div>\n    <div class=\"el-color-svpanel__cursor\"\n      :style=\"{\n        top: cursorTop + 'px',\n        left: cursorLeft + 'px'\n      }\">\n      <div></div>\n    </div>\n  </div>\n</template>\n\n<script>\n  import draggable from '../draggable';\n\n  export default {\n    name: 'el-sl-panel',\n\n    props: {\n      color: {\n        required: true\n      }\n    },\n\n    computed: {\n      colorValue() {\n        const hue = this.color.get('hue');\n        const value = this.color.get('value');\n        return { hue, value };\n      }\n    },\n\n    watch: {\n      colorValue() {\n        this.update();\n      }\n    },\n\n    methods: {\n      update() {\n        const saturation = this.color.get('saturation');\n        const value = this.color.get('value');\n\n        const el = this.$el;\n        let { clientWidth: width, clientHeight: height } = el;\n\n        this.cursorLeft = saturation * width / 100;\n        this.cursorTop = (100 - value) * height / 100;\n\n        this.background = 'hsl(' + this.color.get('hue') + ', 100%, 50%)';\n      },\n\n      handleDrag(event) {\n        const el = this.$el;\n        const rect = el.getBoundingClientRect();\n\n        let left = event.clientX - rect.left;\n        let top = event.clientY - rect.top;\n        left = Math.max(0, left);\n        left = Math.min(left, rect.width);\n\n        top = Math.max(0, top);\n        top = Math.min(top, rect.height);\n\n        this.cursorLeft = left;\n        this.cursorTop = top;\n        this.color.set({\n          saturation: left / rect.width * 100,\n          value: 100 - top / rect.height * 100\n        });\n      }\n    },\n\n    mounted() {\n      draggable(this.$el, {\n        drag: (event) => {\n          this.handleDrag(event);\n        },\n        end: (event) => {\n          this.handleDrag(event);\n        }\n      });\n\n      this.update();\n    },\n\n    data() {\n      return {\n        cursorTop: 0,\n        cursorLeft: 0,\n        background: 'hsl(0, 100%, 50%)'\n      };\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/color-picker/src/draggable.js",
    "content": "import Vue from 'vue';\nlet isDragging = false;\n\nexport default function(element, options) {\n  if (Vue.prototype.$isServer) return;\n  const moveFn = function(event) {\n    if (options.drag) {\n      options.drag(event);\n    }\n  };\n  const upFn = function(event) {\n    document.removeEventListener('mousemove', moveFn);\n    document.removeEventListener('mouseup', upFn);\n    document.onselectstart = null;\n    document.ondragstart = null;\n\n    isDragging = false;\n\n    if (options.end) {\n      options.end(event);\n    }\n  };\n  element.addEventListener('mousedown', function(event) {\n    if (isDragging) return;\n    document.onselectstart = function() { return false; };\n    document.ondragstart = function() { return false; };\n\n    document.addEventListener('mousemove', moveFn);\n    document.addEventListener('mouseup', upFn);\n    isDragging = true;\n\n    if (options.start) {\n      options.start(event);\n    }\n  });\n}\n"
  },
  {
    "path": "packages/color-picker/src/main.vue",
    "content": "<template>\n  <div\n    :class=\"[\n      'el-color-picker',\n      colorDisabled ? 'is-disabled' : '',\n      colorSize ? `el-color-picker--${ colorSize }` : ''\n    ]\"\n    v-clickoutside=\"hide\">\n    <div class=\"el-color-picker__mask\" v-if=\"colorDisabled\"></div>\n    <div class=\"el-color-picker__trigger\" @click=\"handleTrigger\">\n      <span class=\"el-color-picker__color\" :class=\"{ 'is-alpha': showAlpha }\">\n        <span class=\"el-color-picker__color-inner\"\n          :style=\"{\n            backgroundColor: displayedColor\n          }\"></span>\n        <span class=\"el-color-picker__empty el-icon-close\" v-if=\"!value && !showPanelColor\"></span>\n      </span>\n      <span class=\"el-color-picker__icon el-icon-arrow-down\" v-show=\"value || showPanelColor\"></span>\n    </div>\n    <picker-dropdown\n       ref=\"dropdown\"\n       :class=\"['el-color-picker__panel', popperClass || '']\"\n       v-model=\"showPicker\"\n       @pick=\"confirmValue\"\n       @clear=\"clearValue\"\n       :color=\"color\"\n       :show-alpha=\"showAlpha\"\n       :predefine=\"predefine\">\n    </picker-dropdown>\n  </div>\n</template>\n\n<script>\n  import Color from './color';\n  import PickerDropdown from './components/picker-dropdown.vue';\n  import Clickoutside from 'element-ui/src/utils/clickoutside';\n  import Emitter from 'element-ui/src/mixins/emitter';\n\n  export default {\n    name: 'ElColorPicker',\n\n    mixins: [Emitter],\n\n    props: {\n      value: String,\n      showAlpha: Boolean,\n      colorFormat: String,\n      disabled: Boolean,\n      size: String,\n      popperClass: String,\n      predefine: Array\n    },\n\n    inject: {\n      elForm: {\n        default: ''\n      },\n      elFormItem: {\n        default: ''\n      }\n    },\n\n    directives: { Clickoutside },\n\n    computed: {\n      displayedColor() {\n        if (!this.value && !this.showPanelColor) {\n          return 'transparent';\n        }\n\n        return this.displayedRgb(this.color, this.showAlpha);\n      },\n\n      _elFormItemSize() {\n        return (this.elFormItem || {}).elFormItemSize;\n      },\n\n      colorSize() {\n        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;\n      },\n\n      colorDisabled() {\n        return this.disabled || (this.elForm || {}).disabled;\n      }\n    },\n\n    watch: {\n      value(val) {\n        if (!val) {\n          this.showPanelColor = false;\n        } else if (val && val !== this.color.value) {\n          this.color.fromString(val);\n        }\n      },\n      color: {\n        deep: true,\n        handler() {\n          this.showPanelColor = true;\n        }\n      },\n      displayedColor(val) {\n        if (!this.showPicker) return;\n        const currentValueColor = new Color({\n          enableAlpha: this.showAlpha,\n          format: this.colorFormat\n        });\n        currentValueColor.fromString(this.value);\n\n        const currentValueColorRgb = this.displayedRgb(currentValueColor, this.showAlpha);\n        if (val !== currentValueColorRgb) {\n          this.$emit('active-change', val);\n        }\n      }\n    },\n\n    methods: {\n      handleTrigger() {\n        if (this.colorDisabled) return;\n        this.showPicker = !this.showPicker;\n      },\n      confirmValue() {\n        const value = this.color.value;\n        this.$emit('input', value);\n        this.$emit('change', value);\n        this.dispatch('ElFormItem', 'el.form.change', value);\n        this.showPicker = false;\n      },\n      clearValue() {\n        this.$emit('input', null);\n        this.$emit('change', null);\n        if (this.value !== null) {\n          this.dispatch('ElFormItem', 'el.form.change', null);\n        }\n        this.showPanelColor = false;\n        this.showPicker = false;\n        this.resetColor();\n      },\n      hide() {\n        this.showPicker = false;\n        this.resetColor();\n      },\n      resetColor() {\n        this.$nextTick(_ => {\n          if (this.value) {\n            this.color.fromString(this.value);\n          } else {\n            this.showPanelColor = false;\n          }\n        });\n      },\n      displayedRgb(color, showAlpha) {\n        if (!(color instanceof Color)) {\n          throw Error('color should be instance of Color Class');\n        }\n\n        const { r, g, b } = color.toRgb();\n        return showAlpha\n          ? `rgba(${ r }, ${ g }, ${ b }, ${ color.get('alpha') / 100 })`\n          : `rgb(${ r }, ${ g }, ${ b })`;\n      }\n    },\n\n    mounted() {\n      const value = this.value;\n      if (value) {\n        this.color.fromString(value);\n      }\n      this.popperElm = this.$refs.dropdown.$el;\n    },\n\n    data() {\n      const color = new Color({\n        enableAlpha: this.showAlpha,\n        format: this.colorFormat\n      });\n\n      return {\n        color,\n        showPicker: false,\n        showPanelColor: false\n      };\n    },\n\n    components: {\n      PickerDropdown\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/container/index.js",
    "content": "import Container from './src/main';\n\n/* istanbul ignore next */\nContainer.install = function(Vue) {\n  Vue.component(Container.name, Container);\n};\n\nexport default Container;\n"
  },
  {
    "path": "packages/container/src/main.vue",
    "content": "<template>\n  <section class=\"el-container\" :class=\"{ 'is-vertical': isVertical }\">\n    <slot></slot>\n  </section>\n</template>\n\n<script>\n  export default {\n    name: 'ElContainer',\n\n    componentName: 'ElContainer',\n\n    props: {\n      direction: String\n    },\n\n    computed: {\n      isVertical() {\n        if (this.direction === 'vertical') {\n          return true;\n        } else if (this.direction === 'horizontal') {\n          return false;\n        }\n        return this.$slots && this.$slots.default\n          ? this.$slots.default.some(vnode => {\n            const tag = vnode.componentOptions && vnode.componentOptions.tag;\n            return tag === 'el-header' || tag === 'el-footer';\n          })\n          : false;\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/date-picker/index.js",
    "content": "import DatePicker from './src/picker/date-picker';\n\n/* istanbul ignore next */\nDatePicker.install = function install(Vue) {\n  Vue.component(DatePicker.name, DatePicker);\n};\n\nexport default DatePicker;\n"
  },
  {
    "path": "packages/date-picker/src/basic/date-table.vue",
    "content": "<template>\n  <table\n    cellspacing=\"0\"\n    cellpadding=\"0\"\n    class=\"el-date-table\"\n    @click=\"handleClick\"\n    @mousemove=\"handleMouseMove\"\n    :class=\"{ 'is-week-mode': selectionMode === 'week' }\">\n    <tbody>\n    <tr>\n      <th v-if=\"showWeekNumber\">{{ t('el.datepicker.week') }}</th>\n      <th v-for=\"(week, key) in WEEKS\" :key=\"key\">{{ t('el.datepicker.weeks.' + week) }}</th>\n    </tr>\n    <tr\n      class=\"el-date-table__row\"\n      v-for=\"(row, key) in rows\"\n      :class=\"{ current: isWeekActive(row[1]) }\"\n      :key=\"key\">\n      <td\n        v-for=\"(cell, key) in row\"\n        :class=\"getCellClasses(cell)\"\n        :key=\"key\">\n        <div>\n          <span>\n            {{ cell.text }}\n          </span>\n        </div>\n      </td>\n    </tr>\n    </tbody>\n  </table>\n</template>\n\n<script>\n  import { getFirstDayOfMonth, getDayCountOfMonth, getWeekNumber, getStartDateOfMonth, prevDate, nextDate, isDate, clearTime as _clearTime} from 'element-ui/src/utils/date-util';\n  import Locale from 'element-ui/src/mixins/locale';\n  import { arrayFindIndex, arrayFind, coerceTruthyValueToArray } from 'element-ui/src/utils/util';\n\n  const WEEKS = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];\n  const getDateTimestamp = function(time) {\n    if (typeof time === 'number' || typeof time === 'string') {\n      return _clearTime(new Date(time)).getTime();\n    } else if (time instanceof Date) {\n      return _clearTime(time).getTime();\n    } else {\n      return NaN;\n    }\n  };\n\n  // remove the first element that satisfies `pred` from arr\n  // return a new array if modification occurs\n  // return the original array otherwise\n  const removeFromArray = function(arr, pred) {\n    const idx = typeof pred === 'function' ? arrayFindIndex(arr, pred) : arr.indexOf(pred);\n    return idx >= 0 ? [...arr.slice(0, idx), ...arr.slice(idx + 1)] : arr;\n  };\n\n  export default {\n    mixins: [Locale],\n\n    props: {\n      firstDayOfWeek: {\n        default: 7,\n        type: Number,\n        validator: val => val >= 1 && val <= 7\n      },\n\n      value: {},\n\n      defaultValue: {\n        validator(val) {\n          // either: null, valid Date object, Array of valid Date objects\n          return val === null || isDate(val) || (Array.isArray(val) && val.every(isDate));\n        }\n      },\n\n      date: {},\n\n      selectionMode: {\n        default: 'day'\n      },\n\n      showWeekNumber: {\n        type: Boolean,\n        default: false\n      },\n\n      disabledDate: {},\n  \n      cellClassName: {},\n\n      minDate: {},\n\n      maxDate: {},\n\n      rangeState: {\n        default() {\n          return {\n            endDate: null,\n            selecting: false\n          };\n        }\n      }\n    },\n\n    computed: {\n      offsetDay() {\n        const week = this.firstDayOfWeek;\n        // 周日为界限，左右偏移的天数，3217654 例如周一就是 -1，目的是调整前两行日期的位置\n        return week > 3 ? 7 - week : -week;\n      },\n\n      WEEKS() {\n        const week = this.firstDayOfWeek;\n        return WEEKS.concat(WEEKS).slice(week, week + 7);\n      },\n\n      year() {\n        return this.date.getFullYear();\n      },\n\n      month() {\n        return this.date.getMonth();\n      },\n\n      startDate() {\n        return getStartDateOfMonth(this.year, this.month);\n      },\n\n      rows() {\n        // TODO: refactory rows / getCellClasses\n        const date = new Date(this.year, this.month, 1);\n        let day = getFirstDayOfMonth(date); // day of first day\n        const dateCountOfMonth = getDayCountOfMonth(date.getFullYear(), date.getMonth());\n        const dateCountOfLastMonth = getDayCountOfMonth(date.getFullYear(), (date.getMonth() === 0 ? 11 : date.getMonth() - 1));\n\n        day = (day === 0 ? 7 : day);\n\n        const offset = this.offsetDay;\n        const rows = this.tableRows;\n        let count = 1;\n\n        const startDate = this.startDate;\n        const disabledDate = this.disabledDate;\n        const cellClassName = this.cellClassName;\n        const selectedDate = this.selectionMode === 'dates' ? coerceTruthyValueToArray(this.value) : [];\n        const now = getDateTimestamp(new Date());\n\n        for (let i = 0; i < 6; i++) {\n          const row = rows[i];\n\n          if (this.showWeekNumber) {\n            if (!row[0]) {\n              row[0] = { type: 'week', text: getWeekNumber(nextDate(startDate, i * 7 + 1)) };\n            }\n          }\n\n          for (let j = 0; j < 7; j++) {\n            let cell = row[this.showWeekNumber ? j + 1 : j];\n            if (!cell) {\n              cell = { row: i, column: j, type: 'normal', inRange: false, start: false, end: false };\n            }\n\n            cell.type = 'normal';\n\n            const index = i * 7 + j;\n            const time = nextDate(startDate, index - offset).getTime();\n            cell.inRange = time >= getDateTimestamp(this.minDate) && time <= getDateTimestamp(this.maxDate);\n            cell.start = this.minDate && time === getDateTimestamp(this.minDate);\n            cell.end = this.maxDate && time === getDateTimestamp(this.maxDate);\n            const isToday = time === now;\n\n            if (isToday) {\n              cell.type = 'today';\n            }\n\n            if (i >= 0 && i <= 1) {\n              const numberOfDaysFromPreviousMonth = day + offset < 0 ? 7 + day + offset : day + offset;\n\n              if (j + i * 7 >= numberOfDaysFromPreviousMonth) {\n                cell.text = count++;\n              } else {\n                cell.text = dateCountOfLastMonth - (numberOfDaysFromPreviousMonth - j % 7) + 1 + i * 7;\n                cell.type = 'prev-month';\n              }\n            } else {\n              if (count <= dateCountOfMonth) {\n                cell.text = count++;\n              } else {\n                cell.text = count++ - dateCountOfMonth;\n                cell.type = 'next-month';\n              }\n            }\n\n            let cellDate = new Date(time);\n            cell.disabled = typeof disabledDate === 'function' && disabledDate(cellDate);\n            cell.selected = arrayFind(selectedDate, date => date.getTime() === cellDate.getTime());\n            cell.customClass = typeof cellClassName === 'function' && cellClassName(cellDate);\n            this.$set(row, this.showWeekNumber ? j + 1 : j, cell);\n          }\n\n          if (this.selectionMode === 'week') {\n            const start = this.showWeekNumber ? 1 : 0;\n            const end = this.showWeekNumber ? 7 : 6;\n            const isWeekActive = this.isWeekActive(row[start + 1]);\n\n            row[start].inRange = isWeekActive;\n            row[start].start = isWeekActive;\n            row[end].inRange = isWeekActive;\n            row[end].end = isWeekActive;\n          }\n        }\n\n        return rows;\n      }\n    },\n\n    watch: {\n      'rangeState.endDate'(newVal) {\n        this.markRange(this.minDate, newVal);\n      },\n\n      minDate(newVal, oldVal) {\n        if (getDateTimestamp(newVal) !== getDateTimestamp(oldVal)) {\n          this.markRange(this.minDate, this.maxDate);\n        }\n      },\n\n      maxDate(newVal, oldVal) {\n        if (getDateTimestamp(newVal) !== getDateTimestamp(oldVal)) {\n          this.markRange(this.minDate, this.maxDate);\n        }\n      }\n    },\n\n    data() {\n      return {\n        tableRows: [ [], [], [], [], [], [] ],\n        lastRow: null,\n        lastColumn: null\n      };\n    },\n\n    methods: {\n      cellMatchesDate(cell, date) {\n        const value = new Date(date);\n        return this.year === value.getFullYear() &&\n          this.month === value.getMonth() &&\n          Number(cell.text) === value.getDate();\n      },\n\n      getCellClasses(cell) {\n        const selectionMode = this.selectionMode;\n        const defaultValue = this.defaultValue ? Array.isArray(this.defaultValue) ? this.defaultValue : [this.defaultValue] : [];\n\n        let classes = [];\n        if ((cell.type === 'normal' || cell.type === 'today') && !cell.disabled) {\n          classes.push('available');\n          if (cell.type === 'today') {\n            classes.push('today');\n          }\n        } else {\n          classes.push(cell.type);\n        }\n\n        if (cell.type === 'normal' && defaultValue.some(date => this.cellMatchesDate(cell, date))) {\n          classes.push('default');\n        }\n\n        if (selectionMode === 'day' && (cell.type === 'normal' || cell.type === 'today') && this.cellMatchesDate(cell, this.value)) {\n          classes.push('current');\n        }\n\n        if (cell.inRange && ((cell.type === 'normal' || cell.type === 'today') || this.selectionMode === 'week')) {\n          classes.push('in-range');\n\n          if (cell.start) {\n            classes.push('start-date');\n          }\n\n          if (cell.end) {\n            classes.push('end-date');\n          }\n        }\n\n        if (cell.disabled) {\n          classes.push('disabled');\n        }\n\n        if (cell.selected) {\n          classes.push('selected');\n        }\n\n        if (cell.customClass) {\n          classes.push(cell.customClass);\n        }\n\n        return classes.join(' ');\n      },\n\n      getDateOfCell(row, column) {\n        const offsetFromStart = row * 7 + (column - (this.showWeekNumber ? 1 : 0)) - this.offsetDay;\n        return nextDate(this.startDate, offsetFromStart);\n      },\n\n      isWeekActive(cell) {\n        if (this.selectionMode !== 'week') return false;\n        const newDate = new Date(this.year, this.month, 1);\n        const year = newDate.getFullYear();\n        const month = newDate.getMonth();\n\n        if (cell.type === 'prev-month') {\n          newDate.setMonth(month === 0 ? 11 : month - 1);\n          newDate.setFullYear(month === 0 ? year - 1 : year);\n        }\n\n        if (cell.type === 'next-month') {\n          newDate.setMonth(month === 11 ? 0 : month + 1);\n          newDate.setFullYear(month === 11 ? year + 1 : year);\n        }\n\n        newDate.setDate(parseInt(cell.text, 10));\n\n        if (isDate(this.value)) {\n          const dayOffset = (this.value.getDay() - this.firstDayOfWeek + 7) % 7 - 1;\n          const weekDate = prevDate(this.value, dayOffset);\n          return weekDate.getTime() === newDate.getTime();\n        }\n        return false;\n      },\n\n      markRange(minDate, maxDate) {\n        minDate = getDateTimestamp(minDate);\n        maxDate = getDateTimestamp(maxDate) || minDate;\n        [minDate, maxDate] = [Math.min(minDate, maxDate), Math.max(minDate, maxDate)];\n\n        const startDate = this.startDate;\n        const rows = this.rows;\n        for (let i = 0, k = rows.length; i < k; i++) {\n          const row = rows[i];\n          for (let j = 0, l = row.length; j < l; j++) {\n            if (this.showWeekNumber && j === 0) continue;\n\n            const cell = row[j];\n            const index = i * 7 + j + (this.showWeekNumber ? -1 : 0);\n            const time = nextDate(startDate, index - this.offsetDay).getTime();\n\n            cell.inRange = minDate && time >= minDate && time <= maxDate;\n            cell.start = minDate && time === minDate;\n            cell.end = maxDate && time === maxDate;\n          }\n        }\n      },\n\n      handleMouseMove(event) {\n        if (!this.rangeState.selecting) return;\n\n        let target = event.target;\n        if (target.tagName === 'SPAN') {\n          target = target.parentNode.parentNode;\n        }\n        if (target.tagName === 'DIV') {\n          target = target.parentNode;\n        }\n        if (target.tagName !== 'TD') return;\n\n        const row = target.parentNode.rowIndex - 1;\n        const column = target.cellIndex;\n\n        // can not select disabled date\n        if (this.rows[row][column].disabled) return;\n\n        // only update rangeState when mouse moves to a new cell\n        // this avoids frequent Date object creation and improves performance\n        if (row !== this.lastRow || column !== this.lastColumn) {\n          this.lastRow = row;\n          this.lastColumn = column;\n          this.$emit('changerange', {\n            minDate: this.minDate,\n            maxDate: this.maxDate,\n            rangeState: {\n              selecting: true,\n              endDate: this.getDateOfCell(row, column)\n            }\n          });\n        }\n      },\n\n      handleClick(event) {\n        let target = event.target;\n        if (target.tagName === 'SPAN') {\n          target = target.parentNode.parentNode;\n        }\n        if (target.tagName === 'DIV') {\n          target = target.parentNode;\n        }\n\n        if (target.tagName !== 'TD') return;\n\n        const row = target.parentNode.rowIndex - 1;\n        const column = this.selectionMode === 'week' ? 1 : target.cellIndex;\n        const cell = this.rows[row][column];\n\n        if (cell.disabled || cell.type === 'week') return;\n\n        const newDate = this.getDateOfCell(row, column);\n\n        if (this.selectionMode === 'range') {\n          if (!this.rangeState.selecting) {\n            this.$emit('pick', {minDate: newDate, maxDate: null});\n            this.rangeState.selecting = true;\n          } else {\n            if (newDate >= this.minDate) {\n              this.$emit('pick', {minDate: this.minDate, maxDate: newDate});\n            } else {\n              this.$emit('pick', {minDate: newDate, maxDate: this.minDate});\n            }\n            this.rangeState.selecting = false;\n          }\n        } else if (this.selectionMode === 'day') {\n          this.$emit('pick', newDate);\n        } else if (this.selectionMode === 'week') {\n          const weekNumber = getWeekNumber(newDate);\n          const value = newDate.getFullYear() + 'w' + weekNumber;\n          this.$emit('pick', {\n            year: newDate.getFullYear(),\n            week: weekNumber,\n            value: value,\n            date: newDate\n          });\n        } else if (this.selectionMode === 'dates') {\n          const value = this.value || [];\n          const newValue = cell.selected\n            ? removeFromArray(value, date => date.getTime() === newDate.getTime())\n            : [...value, newDate];\n          this.$emit('pick', newValue);\n        }\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/date-picker/src/basic/month-table.vue",
    "content": "<template>\n  <table @click=\"handleMonthTableClick\" @mousemove=\"handleMouseMove\" class=\"el-month-table\">\n    <tbody>\n    <tr v-for=\"(row, key) in rows\" :key=\"key\">\n      <td :class=\"getCellStyle(cell)\" v-for=\"(cell, key) in row\" :key=\"key\">\n        <div>\n          <a class=\"cell\">{{ t('el.datepicker.months.' + months[cell.text]) }}</a>\n        </div>\n      </td>\n    </tr>\n    </tbody>\n  </table>\n</template>\n\n<script type=\"text/babel\">\n  import Locale from 'element-ui/src/mixins/locale';\n  import { isDate, range, getDayCountOfMonth, nextDate } from 'element-ui/src/utils/date-util';\n  import { hasClass } from 'element-ui/src/utils/dom';\n  import { arrayFindIndex, coerceTruthyValueToArray, arrayFind } from 'element-ui/src/utils/util';\n\n  const datesInMonth = (year, month) => {\n    const numOfDays = getDayCountOfMonth(year, month);\n    const firstDay = new Date(year, month, 1);\n    return range(numOfDays).map(n => nextDate(firstDay, n));\n  };\n\n  const clearDate = (date) => {\n    return new Date(date.getFullYear(), date.getMonth());\n  };\n\n  const getMonthTimestamp = function(time) {\n    if (typeof time === 'number' || typeof time === 'string') {\n      return clearDate(new Date(time)).getTime();\n    } else if (time instanceof Date) {\n      return clearDate(time).getTime();\n    } else {\n      return NaN;\n    }\n  };\n\n  // remove the first element that satisfies `pred` from arr\n  // return a new array if modification occurs\n  // return the original array otherwise\n  const removeFromArray = function(arr, pred) {\n    const idx = typeof pred === 'function' ? arrayFindIndex(arr, pred) : arr.indexOf(pred);\n    return idx >= 0 ? [...arr.slice(0, idx), ...arr.slice(idx + 1)] : arr;\n  };\n  export default {\n    props: {\n      disabledDate: {},\n      value: {},\n      selectionMode: {\n        default: 'month'\n      },\n      minDate: {},\n\n      maxDate: {},\n      defaultValue: {\n        validator(val) {\n          // null or valid Date Object\n          return val === null || isDate(val) || (Array.isArray(val) && val.every(isDate));\n        }\n      },\n      date: {},\n      rangeState: {\n        default() {\n          return {\n            endDate: null,\n            selecting: false\n          };\n        }\n      }\n    },\n\n    mixins: [Locale],\n\n    watch: {\n      'rangeState.endDate'(newVal) {\n        this.markRange(this.minDate, newVal);\n      },\n\n      minDate(newVal, oldVal) {\n        if (getMonthTimestamp(newVal) !== getMonthTimestamp(oldVal)) {\n          this.markRange(this.minDate, this.maxDate);\n        }\n      },\n\n      maxDate(newVal, oldVal) {\n        if (getMonthTimestamp(newVal) !== getMonthTimestamp(oldVal)) {\n          this.markRange(this.minDate, this.maxDate);\n        }\n      }\n    },\n\n    data() {\n      return {\n        months: ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'],\n        tableRows: [ [], [], [] ],\n        lastRow: null,\n        lastColumn: null\n      };\n    },\n\n    methods: {\n      cellMatchesDate(cell, date) {\n        const value = new Date(date);\n        return this.date.getFullYear() === value.getFullYear() && Number(cell.text) === value.getMonth();\n      },\n      getCellStyle(cell) {\n        const style = {};\n        const year = this.date.getFullYear();\n        const today = new Date();\n        const month = cell.text;\n        const defaultValue = this.defaultValue ? Array.isArray(this.defaultValue) ? this.defaultValue : [this.defaultValue] : [];\n        style.disabled = typeof this.disabledDate === 'function'\n          ? datesInMonth(year, month).every(this.disabledDate)\n          : false;\n        style.current = arrayFindIndex(coerceTruthyValueToArray(this.value), date => date.getFullYear() === year && date.getMonth() === month) >= 0;\n        style.today = today.getFullYear() === year && today.getMonth() === month;\n        style.default = defaultValue.some(date => this.cellMatchesDate(cell, date));\n\n        if (cell.inRange) {\n          style['in-range'] = true;\n\n          if (cell.start) {\n            style['start-date'] = true;\n          }\n\n          if (cell.end) {\n            style['end-date'] = true;\n          }\n        }\n        return style;\n      },\n      getMonthOfCell(month) {\n        const year = this.date.getFullYear();\n        return new Date(year, month, 1);\n      },\n      markRange(minDate, maxDate) {\n        minDate = getMonthTimestamp(minDate);\n        maxDate = getMonthTimestamp(maxDate) || minDate;\n        [minDate, maxDate] = [Math.min(minDate, maxDate), Math.max(minDate, maxDate)];\n        const rows = this.rows;\n        for (let i = 0, k = rows.length; i < k; i++) {\n          const row = rows[i];\n          for (let j = 0, l = row.length; j < l; j++) {\n\n            const cell = row[j];\n            const index = i * 4 + j;\n            const time = new Date(this.date.getFullYear(), index).getTime();\n\n            cell.inRange = minDate && time >= minDate && time <= maxDate;\n            cell.start = minDate && time === minDate;\n            cell.end = maxDate && time === maxDate;\n          }\n        }\n      },\n      handleMouseMove(event) {\n        if (!this.rangeState.selecting) return;\n\n        let target = event.target;\n        if (target.tagName === 'A') {\n          target = target.parentNode.parentNode;\n        }\n        if (target.tagName === 'DIV') {\n          target = target.parentNode;\n        }\n        if (target.tagName !== 'TD') return;\n\n        const row = target.parentNode.rowIndex;\n        const column = target.cellIndex;\n        // can not select disabled date\n        if (this.rows[row][column].disabled) return;\n\n        // only update rangeState when mouse moves to a new cell\n        // this avoids frequent Date object creation and improves performance\n        if (row !== this.lastRow || column !== this.lastColumn) {\n          this.lastRow = row;\n          this.lastColumn = column;\n          this.$emit('changerange', {\n            minDate: this.minDate,\n            maxDate: this.maxDate,\n            rangeState: {\n              selecting: true,\n              endDate: this.getMonthOfCell(row * 4 + column)\n            }\n          });\n        }\n      },\n      handleMonthTableClick(event) {\n        let target = event.target;\n        if (target.tagName === 'A') {\n          target = target.parentNode.parentNode;\n        }\n        if (target.tagName === 'DIV') {\n          target = target.parentNode;\n        }\n        if (target.tagName !== 'TD') return;\n        if (hasClass(target, 'disabled')) return;\n        const column = target.cellIndex;\n        const row = target.parentNode.rowIndex;\n        const month = row * 4 + column;\n        const newDate = this.getMonthOfCell(month);\n        if (this.selectionMode === 'range') {\n          if (!this.rangeState.selecting) {\n            this.$emit('pick', {minDate: newDate, maxDate: null});\n            this.rangeState.selecting = true;\n          } else {\n            if (newDate >= this.minDate) {\n              this.$emit('pick', {minDate: this.minDate, maxDate: newDate});\n            } else {\n              this.$emit('pick', {minDate: newDate, maxDate: this.minDate});\n            }\n            this.rangeState.selecting = false;\n          }\n        } else if (this.selectionMode === 'months') {\n          const value = this.value || [];\n          const year = this.date.getFullYear();\n          const newValue = arrayFindIndex(value, date => date.getFullYear() === year && date.getMonth() === month) >= 0\n            ? removeFromArray(value, date => date.getTime() === newDate.getTime())\n            : [...value, newDate];\n          this.$emit('pick', newValue);\n        } else {\n          this.$emit('pick', month);\n        }\n      }\n    },\n\n    computed: {\n      rows() {\n        // TODO: refactory rows / getCellClasses\n        const rows = this.tableRows;\n        const disabledDate = this.disabledDate;\n        const selectedDate = [];\n        const now = getMonthTimestamp(new Date());\n\n        for (let i = 0; i < 3; i++) {\n          const row = rows[i];\n          for (let j = 0; j < 4; j++) {\n            let cell = row[j];\n            if (!cell) {\n              cell = { row: i, column: j, type: 'normal', inRange: false, start: false, end: false };\n            }\n\n            cell.type = 'normal';\n\n            const index = i * 4 + j;\n            const time = new Date(this.date.getFullYear(), index).getTime();\n            cell.inRange = time >= getMonthTimestamp(this.minDate) && time <= getMonthTimestamp(this.maxDate);\n            cell.start = this.minDate && time === getMonthTimestamp(this.minDate);\n            cell.end = this.maxDate && time === getMonthTimestamp(this.maxDate);\n            const isToday = time === now;\n\n            if (isToday) {\n              cell.type = 'today';\n            }\n            cell.text = index;\n            let cellDate = new Date(time);\n            cell.disabled = typeof disabledDate === 'function' && disabledDate(cellDate);\n            cell.selected = arrayFind(selectedDate, date => date.getTime() === cellDate.getTime());\n\n            this.$set(row, j, cell);\n          }\n        }\n        return rows;\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/date-picker/src/basic/time-spinner.vue",
    "content": "<template>\n  <div class=\"el-time-spinner\" :class=\"{ 'has-seconds': showSeconds }\">\n    <template v-if=\"!arrowControl\">\n      <el-scrollbar\n        @mouseenter.native=\"emitSelectRange('hours')\"\n        @mousemove.native=\"adjustCurrentSpinner('hours')\"\n        class=\"el-time-spinner__wrapper\"\n        wrap-style=\"max-height: inherit;\"\n        view-class=\"el-time-spinner__list\"\n        noresize\n        tag=\"ul\"\n        ref=\"hours\">\n        <li\n          @click=\"handleClick('hours', { value: hour, disabled: disabled })\"\n          v-for=\"(disabled, hour) in hoursList\"\n          class=\"el-time-spinner__item\"\n          :key=\"hour\"\n          :class=\"{ 'active': hour === hours, 'disabled': disabled }\">{{ ('0' + (amPmMode ? (hour % 12 || 12) : hour )).slice(-2) }}{{ amPm(hour) }}</li>\n      </el-scrollbar>\n      <el-scrollbar\n        @mouseenter.native=\"emitSelectRange('minutes')\"\n        @mousemove.native=\"adjustCurrentSpinner('minutes')\"\n        class=\"el-time-spinner__wrapper\"\n        wrap-style=\"max-height: inherit;\"\n        view-class=\"el-time-spinner__list\"\n        noresize\n        tag=\"ul\"\n        ref=\"minutes\">\n        <li\n          @click=\"handleClick('minutes', { value: key, disabled: false })\"\n          v-for=\"(enabled, key) in minutesList\"\n          :key=\"key\"\n          class=\"el-time-spinner__item\"\n          :class=\"{ 'active': key === minutes, disabled: !enabled }\">{{ ('0' + key).slice(-2) }}</li>\n      </el-scrollbar>\n      <el-scrollbar\n        v-show=\"showSeconds\"\n        @mouseenter.native=\"emitSelectRange('seconds')\"\n        @mousemove.native=\"adjustCurrentSpinner('seconds')\"\n        class=\"el-time-spinner__wrapper\"\n        wrap-style=\"max-height: inherit;\"\n        view-class=\"el-time-spinner__list\"\n        noresize\n        tag=\"ul\"\n        ref=\"seconds\">\n        <li\n          @click=\"handleClick('seconds', { value: key, disabled: false })\"\n          v-for=\"(second, key) in 60\"\n          class=\"el-time-spinner__item\"\n          :class=\"{ 'active': key === seconds }\"\n          :key=\"key\">{{ ('0' + key).slice(-2) }}</li>\n      </el-scrollbar>\n    </template>\n    <template v-if=\"arrowControl\">\n      <div\n        @mouseenter=\"emitSelectRange('hours')\"\n        class=\"el-time-spinner__wrapper is-arrow\">\n        <i v-repeat-click=\"decrease\" class=\"el-time-spinner__arrow el-icon-arrow-up\"></i>\n        <i v-repeat-click=\"increase\" class=\"el-time-spinner__arrow el-icon-arrow-down\"></i>\n        <ul class=\"el-time-spinner__list\" ref=\"hours\">\n          <li\n            class=\"el-time-spinner__item\"\n            :class=\"{ 'active': hour === hours, 'disabled': hoursList[hour] }\"\n            v-for=\"(hour, key) in arrowHourList\"\n            :key=\"key\">{{ hour === undefined ? '' : ('0' + (amPmMode ? (hour % 12 || 12) : hour )).slice(-2) + amPm(hour) }}</li>\n        </ul>\n      </div>\n      <div\n        @mouseenter=\"emitSelectRange('minutes')\"\n        class=\"el-time-spinner__wrapper is-arrow\">\n        <i v-repeat-click=\"decrease\" class=\"el-time-spinner__arrow el-icon-arrow-up\"></i>\n        <i v-repeat-click=\"increase\" class=\"el-time-spinner__arrow el-icon-arrow-down\"></i>\n        <ul class=\"el-time-spinner__list\" ref=\"minutes\">\n          <li\n            class=\"el-time-spinner__item\"\n            :class=\"{ 'active': minute === minutes }\"\n            v-for=\"(minute, key) in arrowMinuteList\"\n            :key=\"key\">\n            {{ minute === undefined ? '' : ('0' + minute).slice(-2) }}\n          </li>\n        </ul>\n      </div>\n      <div\n        @mouseenter=\"emitSelectRange('seconds')\"\n        class=\"el-time-spinner__wrapper is-arrow\"\n        v-if=\"showSeconds\">\n        <i v-repeat-click=\"decrease\" class=\"el-time-spinner__arrow el-icon-arrow-up\"></i>\n        <i v-repeat-click=\"increase\" class=\"el-time-spinner__arrow el-icon-arrow-down\"></i>\n        <ul class=\"el-time-spinner__list\" ref=\"seconds\">\n          <li\n            v-for=\"(second, key) in arrowSecondList\"\n            class=\"el-time-spinner__item\"\n            :class=\"{ 'active': second === seconds }\"\n            :key=\"key\">\n            {{ second === undefined ? '' : ('0' + second).slice(-2) }}\n          </li>\n        </ul>\n      </div>\n    </template>\n  </div>\n</template>\n\n<script type=\"text/babel\">\n  import { getRangeHours, getRangeMinutes, modifyTime } from 'element-ui/src/utils/date-util';\n  import ElScrollbar from 'element-ui/packages/scrollbar';\n  import RepeatClick from 'element-ui/src/directives/repeat-click';\n\n  export default {\n    components: { ElScrollbar },\n\n    directives: {\n      repeatClick: RepeatClick\n    },\n\n    props: {\n      date: {},\n      defaultValue: {}, // reserved for future use\n      showSeconds: {\n        type: Boolean,\n        default: true\n      },\n      arrowControl: Boolean,\n      amPmMode: {\n        type: String,\n        default: '' // 'a': am/pm; 'A': AM/PM\n      }\n    },\n\n    computed: {\n      hours() {\n        return this.date.getHours();\n      },\n      minutes() {\n        return this.date.getMinutes();\n      },\n      seconds() {\n        return this.date.getSeconds();\n      },\n      hoursList() {\n        return getRangeHours(this.selectableRange);\n      },\n      minutesList() {\n        return getRangeMinutes(this.selectableRange, this.hours);\n      },\n      arrowHourList() {\n        const hours = this.hours;\n        return [\n          hours > 0 ? hours - 1 : undefined,\n          hours,\n          hours < 23 ? hours + 1 : undefined\n        ];\n      },\n      arrowMinuteList() {\n        const minutes = this.minutes;\n        return [\n          minutes > 0 ? minutes - 1 : undefined,\n          minutes,\n          minutes < 59 ? minutes + 1 : undefined\n        ];\n      },\n      arrowSecondList() {\n        const seconds = this.seconds;\n        return [\n          seconds > 0 ? seconds - 1 : undefined,\n          seconds,\n          seconds < 59 ? seconds + 1 : undefined\n        ];\n      }\n    },\n\n    data() {\n      return {\n        selectableRange: [],\n        currentScrollbar: null\n      };\n    },\n\n    mounted() {\n      this.$nextTick(() => {\n        !this.arrowControl && this.bindScrollEvent();\n      });\n    },\n\n    methods: {\n      increase() {\n        this.scrollDown(1);\n      },\n\n      decrease() {\n        this.scrollDown(-1);\n      },\n\n      modifyDateField(type, value) {\n        switch (type) {\n          case 'hours': this.$emit('change', modifyTime(this.date, value, this.minutes, this.seconds)); break;\n          case 'minutes': this.$emit('change', modifyTime(this.date, this.hours, value, this.seconds)); break;\n          case 'seconds': this.$emit('change', modifyTime(this.date, this.hours, this.minutes, value)); break;\n        }\n      },\n\n      handleClick(type, {value, disabled}) {\n        if (!disabled) {\n          this.modifyDateField(type, value);\n          this.emitSelectRange(type);\n          this.adjustSpinner(type, value);\n        }\n      },\n\n      emitSelectRange(type) {\n        if (type === 'hours') {\n          this.$emit('select-range', 0, 2);\n        } else if (type === 'minutes') {\n          this.$emit('select-range', 3, 5);\n        } else if (type === 'seconds') {\n          this.$emit('select-range', 6, 8);\n        }\n        this.currentScrollbar = type;\n      },\n\n      bindScrollEvent() {\n        const bindFunction = (type) => {\n          this.$refs[type].wrap.onscroll = (e) => {\n            // TODO: scroll is emitted when set scrollTop programatically\n            // should find better solutions in the future!\n            this.handleScroll(type, e);\n          };\n        };\n        bindFunction('hours');\n        bindFunction('minutes');\n        bindFunction('seconds');\n      },\n\n      handleScroll(type) {\n        const value = Math.min(Math.round((this.$refs[type].wrap.scrollTop - (this.scrollBarHeight(type) * 0.5 - 10) / this.typeItemHeight(type) + 3) / this.typeItemHeight(type)), (type === 'hours' ? 23 : 59));\n        this.modifyDateField(type, value);\n      },\n\n      // NOTE: used by datetime / date-range panel\n      //       renamed from adjustScrollTop\n      //       should try to refactory it\n      adjustSpinners() {\n        this.adjustSpinner('hours', this.hours);\n        this.adjustSpinner('minutes', this.minutes);\n        this.adjustSpinner('seconds', this.seconds);\n      },\n\n      adjustCurrentSpinner(type) {\n        this.adjustSpinner(type, this[type]);\n      },\n\n      adjustSpinner(type, value) {\n        if (this.arrowControl) return;\n        const el = this.$refs[type].wrap;\n        if (el) {\n          el.scrollTop = Math.max(0, value * this.typeItemHeight(type));\n        }\n      },\n\n      scrollDown(step) {\n        if (!this.currentScrollbar) {\n          this.emitSelectRange('hours');\n        }\n\n        const label = this.currentScrollbar;\n        const hoursList = this.hoursList;\n        let now = this[label];\n\n        if (this.currentScrollbar === 'hours') {\n          let total = Math.abs(step);\n          step = step > 0 ? 1 : -1;\n          let length = hoursList.length;\n          while (length-- && total) {\n            now = (now + step + hoursList.length) % hoursList.length;\n            if (hoursList[now]) {\n              continue;\n            }\n            total--;\n          }\n          if (hoursList[now]) return;\n        } else {\n          now = (now + step + 60) % 60;\n        }\n\n        this.modifyDateField(label, now);\n        this.adjustSpinner(label, now);\n        this.$nextTick(() => this.emitSelectRange(this.currentScrollbar));\n      },\n      amPm(hour) {\n        let shouldShowAmPm = this.amPmMode.toLowerCase() === 'a';\n        if (!shouldShowAmPm) return '';\n        let isCapital = this.amPmMode === 'A';\n        let content = (hour < 12) ? ' am' : ' pm';\n        if (isCapital) content = content.toUpperCase();\n        return content;\n      },\n      typeItemHeight(type) {\n        return this.$refs[type].$el.querySelector('li').offsetHeight;\n      },\n      scrollBarHeight(type) {\n        return this.$refs[type].$el.offsetHeight;\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/date-picker/src/basic/year-table.vue",
    "content": "<template>\n  <table @click=\"handleYearTableClick\" class=\"el-year-table\">\n    <tbody>\n    <tr>\n      <td class=\"available\" :class=\"getCellStyle(startYear + 0)\">\n        <a class=\"cell\">{{ startYear }}</a>\n      </td>\n      <td class=\"available\" :class=\"getCellStyle(startYear + 1)\">\n        <a class=\"cell\">{{ startYear + 1 }}</a>\n      </td>\n      <td class=\"available\" :class=\"getCellStyle(startYear + 2)\">\n        <a class=\"cell\">{{ startYear + 2 }}</a>\n      </td>\n      <td class=\"available\" :class=\"getCellStyle(startYear + 3)\">\n        <a class=\"cell\">{{ startYear + 3 }}</a>\n      </td>\n    </tr>\n    <tr>\n      <td class=\"available\" :class=\"getCellStyle(startYear + 4)\">\n        <a class=\"cell\">{{ startYear + 4 }}</a>\n      </td>\n      <td class=\"available\" :class=\"getCellStyle(startYear + 5)\">\n        <a class=\"cell\">{{ startYear + 5 }}</a>\n      </td>\n      <td class=\"available\" :class=\"getCellStyle(startYear + 6)\">\n        <a class=\"cell\">{{ startYear + 6 }}</a>\n      </td>\n      <td class=\"available\" :class=\"getCellStyle(startYear + 7)\">\n        <a class=\"cell\">{{ startYear + 7 }}</a>\n      </td>\n    </tr>\n    <tr>\n      <td class=\"available\" :class=\"getCellStyle(startYear + 8)\">\n        <a class=\"cell\">{{ startYear + 8 }}</a>\n      </td>\n      <td class=\"available\" :class=\"getCellStyle(startYear + 9)\">\n        <a class=\"cell\">{{ startYear + 9 }}</a>\n      </td>\n      <td></td>\n      <td></td>\n    </tr>\n    </tbody>\n  </table>\n</template>\n\n<script type=\"text/babel\">\n  import { hasClass } from 'element-ui/src/utils/dom';\n  import { isDate, range, nextDate, getDayCountOfYear } from 'element-ui/src/utils/date-util';\n  import { arrayFindIndex, coerceTruthyValueToArray } from 'element-ui/src/utils/util';\n\n  const datesInYear = year => {\n    const numOfDays = getDayCountOfYear(year);\n    const firstDay = new Date(year, 0, 1);\n    return range(numOfDays).map(n => nextDate(firstDay, n));\n  };\n\n  export default {\n    props: {\n      disabledDate: {},\n      value: {},\n      defaultValue: {\n        validator(val) {\n          // null or valid Date Object\n          return val === null || (val instanceof Date && isDate(val));\n        }\n      },\n      date: {},\n      selectionMode: {}\n    },\n\n    computed: {\n      startYear() {\n        return Math.floor(this.date.getFullYear() / 10) * 10;\n      }\n    },\n\n    methods: {\n      getCellStyle(year) {\n        const style = {};\n        const today = new Date();\n\n        style.disabled = typeof this.disabledDate === 'function'\n          ? datesInYear(year).every(this.disabledDate)\n          : false;\n        style.current = arrayFindIndex(coerceTruthyValueToArray(this.value), date => date.getFullYear() === year) >= 0;\n        style.today = today.getFullYear() === year;\n        style.default = this.defaultValue && this.defaultValue.getFullYear() === year;\n\n        return style;\n      },\n\n      handleYearTableClick(event) {\n        const target = event.target;\n        if (target.tagName === 'A') {\n          if (hasClass(target.parentNode, 'disabled')) return;\n          const year = target.textContent || target.innerText;\n          if (this.selectionMode === 'years') {\n            const value = this.value || [];\n            const idx = arrayFindIndex(value, date => date.getFullYear() === Number(year));\n            const newValue = idx > -1\n              ? [...value.slice(0, idx), ...value.slice(idx + 1)]\n              : [...value, new Date(year)];\n            this.$emit('pick', newValue);\n          } else {\n            this.$emit('pick', Number(year));\n          }\n        }\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/date-picker/src/panel/date-range.vue",
    "content": "<template>\n  <transition name=\"el-zoom-in-top\" @after-leave=\"$emit('dodestroy')\">\n    <div\n      v-show=\"visible\"\n      class=\"el-picker-panel el-date-range-picker el-popper\"\n      :class=\"[{\n        'has-sidebar': $slots.sidebar || shortcuts,\n        'has-time': showTime\n      }, popperClass]\">\n      <div class=\"el-picker-panel__body-wrapper\">\n        <slot name=\"sidebar\" class=\"el-picker-panel__sidebar\"></slot>\n        <div class=\"el-picker-panel__sidebar\" v-if=\"shortcuts\">\n          <button\n            type=\"button\"\n            class=\"el-picker-panel__shortcut\"\n            v-for=\"(shortcut, key) in shortcuts\"\n            :key=\"key\"\n            @click=\"handleShortcutClick(shortcut)\">{{shortcut.text}}</button>\n        </div>\n        <div class=\"el-picker-panel__body\">\n          <div class=\"el-date-range-picker__time-header\" v-if=\"showTime\">\n            <span class=\"el-date-range-picker__editors-wrap\">\n              <span class=\"el-date-range-picker__time-picker-wrap\">\n                <el-input\n                  size=\"small\"\n                  :disabled=\"rangeState.selecting\"\n                  ref=\"minInput\"\n                  :placeholder=\"t('el.datepicker.startDate')\"\n                  class=\"el-date-range-picker__editor\"\n                  :value=\"minVisibleDate\"\n                  @input=\"val => handleDateInput(val, 'min')\"\n                  @change=\"val => handleDateChange(val, 'min')\" />\n              </span>\n              <span class=\"el-date-range-picker__time-picker-wrap\" v-clickoutside=\"handleMinTimeClose\">\n                <el-input\n                  size=\"small\"\n                  class=\"el-date-range-picker__editor\"\n                  :disabled=\"rangeState.selecting\"\n                  :placeholder=\"t('el.datepicker.startTime')\"\n                  :value=\"minVisibleTime\"\n                  @focus=\"minTimePickerVisible = true\"\n                  @input=\"val => handleTimeInput(val, 'min')\"\n                  @change=\"val => handleTimeChange(val, 'min')\" />\n                <time-picker\n                  ref=\"minTimePicker\"\n                  @pick=\"handleMinTimePick\"\n                  :time-arrow-control=\"arrowControl\"\n                  :visible=\"minTimePickerVisible\"\n                  @mounted=\"$refs.minTimePicker.format=timeFormat\">\n                </time-picker>\n              </span>\n            </span>\n            <span class=\"el-icon-arrow-right\"></span>\n            <span class=\"el-date-range-picker__editors-wrap is-right\">\n              <span class=\"el-date-range-picker__time-picker-wrap\">\n                <el-input\n                  size=\"small\"\n                  class=\"el-date-range-picker__editor\"\n                  :disabled=\"rangeState.selecting\"\n                  :placeholder=\"t('el.datepicker.endDate')\"\n                  :value=\"maxVisibleDate\"\n                  :readonly=\"!minDate\"\n                  @input=\"val => handleDateInput(val, 'max')\"\n                  @change=\"val => handleDateChange(val, 'max')\" />\n              </span>\n              <span class=\"el-date-range-picker__time-picker-wrap\" v-clickoutside=\"handleMaxTimeClose\">\n                <el-input\n                  size=\"small\"\n                  class=\"el-date-range-picker__editor\"\n                  :disabled=\"rangeState.selecting\"\n                  :placeholder=\"t('el.datepicker.endTime')\"\n                  :value=\"maxVisibleTime\"\n                  :readonly=\"!minDate\"\n                  @focus=\"minDate && (maxTimePickerVisible = true)\"\n                  @input=\"val => handleTimeInput(val, 'max')\"\n                  @change=\"val => handleTimeChange(val, 'max')\" />\n                <time-picker\n                  ref=\"maxTimePicker\"\n                  @pick=\"handleMaxTimePick\"\n                  :time-arrow-control=\"arrowControl\"\n                  :visible=\"maxTimePickerVisible\"\n                  @mounted=\"$refs.maxTimePicker.format=timeFormat\">\n                </time-picker>\n              </span>\n            </span>\n          </div>\n          <div class=\"el-picker-panel__content el-date-range-picker__content is-left\">\n            <div class=\"el-date-range-picker__header\">\n              <button\n                type=\"button\"\n                @click=\"leftPrevYear\"\n                class=\"el-picker-panel__icon-btn el-icon-d-arrow-left\"></button>\n              <button\n                type=\"button\"\n                @click=\"leftPrevMonth\"\n                class=\"el-picker-panel__icon-btn el-icon-arrow-left\"></button>\n              <button\n                type=\"button\"\n                @click=\"leftNextYear\"\n                v-if=\"unlinkPanels\"\n                :disabled=\"!enableYearArrow\"\n                :class=\"{ 'is-disabled': !enableYearArrow }\"\n                class=\"el-picker-panel__icon-btn el-icon-d-arrow-right\"></button>\n              <button\n                type=\"button\"\n                @click=\"leftNextMonth\"\n                v-if=\"unlinkPanels\"\n                :disabled=\"!enableMonthArrow\"\n                :class=\"{ 'is-disabled': !enableMonthArrow }\"\n                class=\"el-picker-panel__icon-btn el-icon-arrow-right\"></button>\n              <div>{{ leftLabel }}</div>\n            </div>\n            <date-table\n              selection-mode=\"range\"\n              :date=\"leftDate\"\n              :default-value=\"defaultValue\"\n              :min-date=\"minDate\"\n              :max-date=\"maxDate\"\n              :range-state=\"rangeState\"\n              :disabled-date=\"disabledDate\"\n              :cell-class-name=\"cellClassName\"\n              @changerange=\"handleChangeRange\"\n              :first-day-of-week=\"firstDayOfWeek\"\n              @pick=\"handleRangePick\">\n            </date-table>\n          </div>\n          <div class=\"el-picker-panel__content el-date-range-picker__content is-right\">\n            <div class=\"el-date-range-picker__header\">\n              <button\n                type=\"button\"\n                @click=\"rightPrevYear\"\n                v-if=\"unlinkPanels\"\n                :disabled=\"!enableYearArrow\"\n                :class=\"{ 'is-disabled': !enableYearArrow }\"\n                class=\"el-picker-panel__icon-btn el-icon-d-arrow-left\"></button>\n              <button\n                type=\"button\"\n                @click=\"rightPrevMonth\"\n                v-if=\"unlinkPanels\"\n                :disabled=\"!enableMonthArrow\"\n                :class=\"{ 'is-disabled': !enableMonthArrow }\"\n                class=\"el-picker-panel__icon-btn el-icon-arrow-left\"></button>\n              <button\n                type=\"button\"\n                @click=\"rightNextYear\"\n                class=\"el-picker-panel__icon-btn el-icon-d-arrow-right\"></button>\n              <button\n                type=\"button\"\n                @click=\"rightNextMonth\"\n                class=\"el-picker-panel__icon-btn el-icon-arrow-right\"></button>\n              <div>{{ rightLabel }}</div>\n            </div>\n            <date-table\n              selection-mode=\"range\"\n              :date=\"rightDate\"\n              :default-value=\"defaultValue\"\n              :min-date=\"minDate\"\n              :max-date=\"maxDate\"\n              :range-state=\"rangeState\"\n              :disabled-date=\"disabledDate\"\n              :cell-class-name=\"cellClassName\"\n              @changerange=\"handleChangeRange\"\n              :first-day-of-week=\"firstDayOfWeek\"\n              @pick=\"handleRangePick\">\n            </date-table>\n          </div>\n        </div>\n      </div>\n      <div class=\"el-picker-panel__footer\" v-if=\"showTime\">\n        <el-button\n          size=\"mini\"\n          type=\"text\"\n          class=\"el-picker-panel__link-btn\"\n          @click=\"handleClear\">\n          {{ t('el.datepicker.clear') }}\n        </el-button>\n        <el-button\n          plain\n          size=\"mini\"\n          class=\"el-picker-panel__link-btn\"\n          :disabled=\"btnDisabled\"\n          @click=\"handleConfirm(false)\">\n          {{ t('el.datepicker.confirm') }}\n        </el-button>\n      </div>\n    </div>\n  </transition>\n</template>\n\n<script type=\"text/babel\">\n  import {\n    formatDate,\n    parseDate,\n    isDate,\n    modifyDate,\n    modifyTime,\n    modifyWithTimeString,\n    prevYear,\n    nextYear,\n    prevMonth,\n    nextMonth,\n    nextDate,\n    extractDateFormat,\n    extractTimeFormat\n  } from 'element-ui/src/utils/date-util';\n  import Clickoutside from 'element-ui/src/utils/clickoutside';\n  import Locale from 'element-ui/src/mixins/locale';\n  import TimePicker from './time';\n  import DateTable from '../basic/date-table';\n  import ElInput from 'element-ui/packages/input';\n  import ElButton from 'element-ui/packages/button';\n\n  const calcDefaultValue = (defaultValue) => {\n    if (Array.isArray(defaultValue)) {\n      return [new Date(defaultValue[0]), new Date(defaultValue[1])];\n    } else if (defaultValue) {\n      return [new Date(defaultValue), nextDate(new Date(defaultValue), 1)];\n    } else {\n      return [new Date(), nextDate(new Date(), 1)];\n    }\n  };\n\n  export default {\n    mixins: [Locale],\n\n    directives: { Clickoutside },\n\n    computed: {\n      btnDisabled() {\n        return !(this.minDate && this.maxDate && !this.selecting && this.isValidValue([this.minDate, this.maxDate]));\n      },\n\n      leftLabel() {\n        return this.leftDate.getFullYear() + ' ' + this.t('el.datepicker.year') + ' ' + this.t(`el.datepicker.month${ this.leftDate.getMonth() + 1 }`);\n      },\n\n      rightLabel() {\n        return this.rightDate.getFullYear() + ' ' + this.t('el.datepicker.year') + ' ' + this.t(`el.datepicker.month${ this.rightDate.getMonth() + 1 }`);\n      },\n\n      leftYear() {\n        return this.leftDate.getFullYear();\n      },\n\n      leftMonth() {\n        return this.leftDate.getMonth();\n      },\n\n      leftMonthDate() {\n        return this.leftDate.getDate();\n      },\n\n      rightYear() {\n        return this.rightDate.getFullYear();\n      },\n\n      rightMonth() {\n        return this.rightDate.getMonth();\n      },\n\n      rightMonthDate() {\n        return this.rightDate.getDate();\n      },\n\n      minVisibleDate() {\n        if (this.dateUserInput.min !== null) return this.dateUserInput.min;\n        if (this.minDate) return formatDate(this.minDate, this.dateFormat);\n        return '';\n      },\n\n      maxVisibleDate() {\n        if (this.dateUserInput.max !== null) return this.dateUserInput.max;\n        if (this.maxDate || this.minDate) return formatDate(this.maxDate || this.minDate, this.dateFormat);\n        return '';\n      },\n\n      minVisibleTime() {\n        if (this.timeUserInput.min !== null) return this.timeUserInput.min;\n        if (this.minDate) return formatDate(this.minDate, this.timeFormat);\n        return '';\n      },\n\n      maxVisibleTime() {\n        if (this.timeUserInput.max !== null) return this.timeUserInput.max;\n        if (this.maxDate || this.minDate) return formatDate(this.maxDate || this.minDate, this.timeFormat);\n        return '';\n      },\n\n      timeFormat() {\n        if (this.format) {\n          return extractTimeFormat(this.format);\n        } else {\n          return 'HH:mm:ss';\n        }\n      },\n\n      dateFormat() {\n        if (this.format) {\n          return extractDateFormat(this.format);\n        } else {\n          return 'yyyy-MM-dd';\n        }\n      },\n\n      enableMonthArrow() {\n        const nextMonth = (this.leftMonth + 1) % 12;\n        const yearOffset = this.leftMonth + 1 >= 12 ? 1 : 0;\n        return this.unlinkPanels && new Date(this.leftYear + yearOffset, nextMonth) < new Date(this.rightYear, this.rightMonth);\n      },\n\n      enableYearArrow() {\n        return this.unlinkPanels && this.rightYear * 12 + this.rightMonth - (this.leftYear * 12 + this.leftMonth + 1) >= 12;\n      }\n    },\n\n    data() {\n      return {\n        popperClass: '',\n        value: [],\n        defaultValue: null,\n        defaultTime: null,\n        minDate: '',\n        maxDate: '',\n        leftDate: new Date(),\n        rightDate: nextMonth(new Date()),\n        rangeState: {\n          endDate: null,\n          selecting: false,\n          row: null,\n          column: null\n        },\n        showTime: false,\n        shortcuts: '',\n        visible: '',\n        disabledDate: '',\n        cellClassName: '',\n        firstDayOfWeek: 7,\n        minTimePickerVisible: false,\n        maxTimePickerVisible: false,\n        format: '',\n        arrowControl: false,\n        unlinkPanels: false,\n        dateUserInput: {\n          min: null,\n          max: null\n        },\n        timeUserInput: {\n          min: null,\n          max: null\n        }\n      };\n    },\n\n    watch: {\n      minDate(val) {\n        this.dateUserInput.min = null;\n        this.timeUserInput.min = null;\n        this.$nextTick(() => {\n          if (this.$refs.maxTimePicker && this.maxDate && this.maxDate < this.minDate) {\n            const format = 'HH:mm:ss';\n            this.$refs.maxTimePicker.selectableRange = [\n              [\n                parseDate(formatDate(this.minDate, format), format),\n                parseDate('23:59:59', format)\n              ]\n            ];\n          }\n        });\n        if (val && this.$refs.minTimePicker) {\n          this.$refs.minTimePicker.date = val;\n          this.$refs.minTimePicker.value = val;\n        }\n      },\n\n      maxDate(val) {\n        this.dateUserInput.max = null;\n        this.timeUserInput.max = null;\n        if (val && this.$refs.maxTimePicker) {\n          this.$refs.maxTimePicker.date = val;\n          this.$refs.maxTimePicker.value = val;\n        }\n      },\n\n      minTimePickerVisible(val) {\n        if (val) {\n          this.$nextTick(() => {\n            this.$refs.minTimePicker.date = this.minDate;\n            this.$refs.minTimePicker.value = this.minDate;\n            this.$refs.minTimePicker.adjustSpinners();\n          });\n        }\n      },\n\n      maxTimePickerVisible(val) {\n        if (val) {\n          this.$nextTick(() => {\n            this.$refs.maxTimePicker.date = this.maxDate;\n            this.$refs.maxTimePicker.value = this.maxDate;\n            this.$refs.maxTimePicker.adjustSpinners();\n          });\n        }\n      },\n\n      value(newVal) {\n        if (!newVal) {\n          this.minDate = null;\n          this.maxDate = null;\n        } else if (Array.isArray(newVal)) {\n          this.minDate = isDate(newVal[0]) ? new Date(newVal[0]) : null;\n          this.maxDate = isDate(newVal[1]) ? new Date(newVal[1]) : null;\n          if (this.minDate) {\n            this.leftDate = this.minDate;\n            if (this.unlinkPanels && this.maxDate) {\n              const minDateYear = this.minDate.getFullYear();\n              const minDateMonth = this.minDate.getMonth();\n              const maxDateYear = this.maxDate.getFullYear();\n              const maxDateMonth = this.maxDate.getMonth();\n              this.rightDate = minDateYear === maxDateYear && minDateMonth === maxDateMonth\n                ? nextMonth(this.maxDate)\n                : this.maxDate;\n            } else {\n              this.rightDate = nextMonth(this.leftDate);\n            }\n          } else {\n            this.leftDate = calcDefaultValue(this.defaultValue)[0];\n            this.rightDate = nextMonth(this.leftDate);\n          }\n        }\n      },\n\n      defaultValue(val) {\n        if (!Array.isArray(this.value)) {\n          const [left, right] = calcDefaultValue(val);\n          this.leftDate = left;\n          this.rightDate = val && val[1] && this.unlinkPanels\n            ? right\n            : nextMonth(this.leftDate);\n        }\n      }\n    },\n\n    methods: {\n      handleClear() {\n        this.minDate = null;\n        this.maxDate = null;\n        this.leftDate = calcDefaultValue(this.defaultValue)[0];\n        this.rightDate = nextMonth(this.leftDate);\n        this.$emit('pick', null);\n      },\n\n      handleChangeRange(val) {\n        this.minDate = val.minDate;\n        this.maxDate = val.maxDate;\n        this.rangeState = val.rangeState;\n      },\n\n      handleDateInput(value, type) {\n        this.dateUserInput[type] = value;\n        if (value.length !== this.dateFormat.length) return;\n        const parsedValue = parseDate(value, this.dateFormat);\n\n        if (parsedValue) {\n          if (typeof this.disabledDate === 'function' &&\n            this.disabledDate(new Date(parsedValue))) {\n            return;\n          }\n          if (type === 'min') {\n            this.minDate = modifyDate(this.minDate || new Date(), parsedValue.getFullYear(), parsedValue.getMonth(), parsedValue.getDate());\n            this.leftDate = new Date(parsedValue);\n            if (!this.unlinkPanels) {\n              this.rightDate = nextMonth(this.leftDate);\n            }\n          } else {\n            this.maxDate = modifyDate(this.maxDate || new Date(), parsedValue.getFullYear(), parsedValue.getMonth(), parsedValue.getDate());\n            this.rightDate = new Date(parsedValue);\n            if (!this.unlinkPanels) {\n              this.leftDate = prevMonth(parsedValue);\n            }\n          }\n        }\n      },\n\n      handleDateChange(value, type) {\n        const parsedValue = parseDate(value, this.dateFormat);\n        if (parsedValue) {\n          if (type === 'min') {\n            this.minDate = modifyDate(this.minDate, parsedValue.getFullYear(), parsedValue.getMonth(), parsedValue.getDate());\n            if (this.minDate > this.maxDate) {\n              this.maxDate = this.minDate;\n            }\n          } else {\n            this.maxDate = modifyDate(this.maxDate, parsedValue.getFullYear(), parsedValue.getMonth(), parsedValue.getDate());\n            if (this.maxDate < this.minDate) {\n              this.minDate = this.maxDate;\n            }\n          }\n        }\n      },\n\n      handleTimeInput(value, type) {\n        this.timeUserInput[type] = value;\n        if (value.length !== this.timeFormat.length) return;\n        const parsedValue = parseDate(value, this.timeFormat);\n\n        if (parsedValue) {\n          if (type === 'min') {\n            this.minDate = modifyTime(this.minDate, parsedValue.getHours(), parsedValue.getMinutes(), parsedValue.getSeconds());\n            this.$nextTick(_ => this.$refs.minTimePicker.adjustSpinners());\n          } else {\n            this.maxDate = modifyTime(this.maxDate, parsedValue.getHours(), parsedValue.getMinutes(), parsedValue.getSeconds());\n            this.$nextTick(_ => this.$refs.maxTimePicker.adjustSpinners());\n          }\n        }\n      },\n\n      handleTimeChange(value, type) {\n        const parsedValue = parseDate(value, this.timeFormat);\n        if (parsedValue) {\n          if (type === 'min') {\n            this.minDate = modifyTime(this.minDate, parsedValue.getHours(), parsedValue.getMinutes(), parsedValue.getSeconds());\n            if (this.minDate > this.maxDate) {\n              this.maxDate = this.minDate;\n            }\n            this.$refs.minTimePicker.value = this.minDate;\n            this.minTimePickerVisible = false;\n          } else {\n            this.maxDate = modifyTime(this.maxDate, parsedValue.getHours(), parsedValue.getMinutes(), parsedValue.getSeconds());\n            if (this.maxDate < this.minDate) {\n              this.minDate = this.maxDate;\n            }\n            this.$refs.maxTimePicker.value = this.minDate;\n            this.maxTimePickerVisible = false;\n          }\n        }\n      },\n\n      handleRangePick(val, close = true) {\n        const defaultTime = this.defaultTime || [];\n        const minDate = modifyWithTimeString(val.minDate, defaultTime[0]);\n        const maxDate = modifyWithTimeString(val.maxDate, defaultTime[1]);\n\n        if (this.maxDate === maxDate && this.minDate === minDate) {\n          return;\n        }\n        this.onPick && this.onPick(val);\n        this.maxDate = maxDate;\n        this.minDate = minDate;\n\n        // workaround for https://github.com/ElemeFE/element/issues/7539, should remove this block when we don't have to care about Chromium 55 - 57\n        setTimeout(() => {\n          this.maxDate = maxDate;\n          this.minDate = minDate;\n        }, 10);\n        if (!close || this.showTime) return;\n        this.handleConfirm();\n      },\n\n      handleShortcutClick(shortcut) {\n        if (shortcut.onClick) {\n          shortcut.onClick(this);\n        }\n      },\n\n      handleMinTimePick(value, visible, first) {\n        this.minDate = this.minDate || new Date();\n        if (value) {\n          this.minDate = modifyTime(this.minDate, value.getHours(), value.getMinutes(), value.getSeconds());\n        }\n\n        if (!first) {\n          this.minTimePickerVisible = visible;\n        }\n\n        if (!this.maxDate || this.maxDate && this.maxDate.getTime() < this.minDate.getTime()) {\n          this.maxDate = new Date(this.minDate);\n        }\n      },\n\n      handleMinTimeClose() {\n        this.minTimePickerVisible = false;\n      },\n\n      handleMaxTimePick(value, visible, first) {\n        if (this.maxDate && value) {\n          this.maxDate = modifyTime(this.maxDate, value.getHours(), value.getMinutes(), value.getSeconds());\n        }\n\n        if (!first) {\n          this.maxTimePickerVisible = visible;\n        }\n\n        if (this.maxDate && this.minDate && this.minDate.getTime() > this.maxDate.getTime()) {\n          this.minDate = new Date(this.maxDate);\n        }\n      },\n\n      handleMaxTimeClose() {\n        this.maxTimePickerVisible = false;\n      },\n\n      // leftPrev*, rightNext* need to take care of `unlinkPanels`\n      leftPrevYear() {\n        this.leftDate = prevYear(this.leftDate);\n        if (!this.unlinkPanels) {\n          this.rightDate = nextMonth(this.leftDate);\n        }\n      },\n\n      leftPrevMonth() {\n        this.leftDate = prevMonth(this.leftDate);\n        if (!this.unlinkPanels) {\n          this.rightDate = nextMonth(this.leftDate);\n        }\n      },\n\n      rightNextYear() {\n        if (!this.unlinkPanels) {\n          this.leftDate = nextYear(this.leftDate);\n          this.rightDate = nextMonth(this.leftDate);\n        } else {\n          this.rightDate = nextYear(this.rightDate);\n        }\n      },\n\n      rightNextMonth() {\n        if (!this.unlinkPanels) {\n          this.leftDate = nextMonth(this.leftDate);\n          this.rightDate = nextMonth(this.leftDate);\n        } else {\n          this.rightDate = nextMonth(this.rightDate);\n        }\n      },\n\n      // leftNext*, rightPrev* are called when `unlinkPanels` is true\n      leftNextYear() {\n        this.leftDate = nextYear(this.leftDate);\n      },\n\n      leftNextMonth() {\n        this.leftDate = nextMonth(this.leftDate);\n      },\n\n      rightPrevYear() {\n        this.rightDate = prevYear(this.rightDate);\n      },\n\n      rightPrevMonth() {\n        this.rightDate = prevMonth(this.rightDate);\n      },\n\n      handleConfirm(visible = false) {\n        if (this.isValidValue([this.minDate, this.maxDate])) {\n          this.$emit('pick', [this.minDate, this.maxDate], visible);\n        }\n      },\n\n      isValidValue(value) {\n        return Array.isArray(value) &&\n          value && value[0] && value[1] &&\n          isDate(value[0]) && isDate(value[1]) &&\n          value[0].getTime() <= value[1].getTime() && (\n          typeof this.disabledDate === 'function'\n            ? !this.disabledDate(value[0]) && !this.disabledDate(value[1])\n            : true\n        );\n      },\n\n      resetView() {\n        // NOTE: this is a hack to reset {min, max}Date on picker open.\n        // TODO: correct way of doing so is to refactor {min, max}Date to be dependent on value and internal selection state\n        //       an alternative would be resetView whenever picker becomes visible, should also investigate date-panel's resetView\n        if (this.minDate && this.maxDate == null) this.rangeState.selecting = false;\n        this.minDate = this.value && isDate(this.value[0]) ? new Date(this.value[0]) : null;\n        this.maxDate = this.value && isDate(this.value[0]) ? new Date(this.value[1]) : null;\n      }\n    },\n\n    components: { TimePicker, DateTable, ElInput, ElButton }\n  };\n</script>\n"
  },
  {
    "path": "packages/date-picker/src/panel/date.vue",
    "content": "<template>\n  <transition name=\"el-zoom-in-top\" @after-enter=\"handleEnter\" @after-leave=\"handleLeave\">\n    <div\n      v-show=\"visible\"\n      class=\"el-picker-panel el-date-picker el-popper\"\n      :class=\"[{\n        'has-sidebar': $slots.sidebar || shortcuts,\n        'has-time': showTime\n      }, popperClass]\">\n      <div class=\"el-picker-panel__body-wrapper\">\n        <slot name=\"sidebar\" class=\"el-picker-panel__sidebar\"></slot>\n        <div class=\"el-picker-panel__sidebar\" v-if=\"shortcuts\">\n          <button\n            type=\"button\"\n            class=\"el-picker-panel__shortcut\"\n            v-for=\"(shortcut, key) in shortcuts\"\n            :key=\"key\"\n            @click=\"handleShortcutClick(shortcut)\">{{ shortcut.text }}</button>\n        </div>\n        <div class=\"el-picker-panel__body\">\n          <div class=\"el-date-picker__time-header\" v-if=\"showTime\">\n            <span class=\"el-date-picker__editor-wrap\">\n              <el-input\n                :placeholder=\"t('el.datepicker.selectDate')\"\n                :value=\"visibleDate\"\n                size=\"small\"\n                @input=\"val => userInputDate = val\"\n                @change=\"handleVisibleDateChange\" />\n            </span>\n            <span class=\"el-date-picker__editor-wrap\" v-clickoutside=\"handleTimePickClose\">\n              <el-input\n                ref=\"input\"\n                @focus=\"timePickerVisible = true\"\n                :placeholder=\"t('el.datepicker.selectTime')\"\n                :value=\"visibleTime\"\n                size=\"small\"\n                @input=\"val => userInputTime = val\"\n                @change=\"handleVisibleTimeChange\" />\n              <time-picker\n                ref=\"timepicker\"\n                :time-arrow-control=\"arrowControl\"\n                @pick=\"handleTimePick\"\n                :visible=\"timePickerVisible\"\n                @mounted=\"proxyTimePickerDataProperties\">\n              </time-picker>\n            </span>\n          </div>\n          <div\n            class=\"el-date-picker__header\"\n            :class=\"{ 'el-date-picker__header--bordered': currentView === 'year' || currentView === 'month' }\"\n            v-show=\"currentView !== 'time'\">\n            <button\n              type=\"button\"\n              @click=\"prevYear\"\n              :aria-label=\"t(`el.datepicker.prevYear`)\"\n              class=\"el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left\">\n            </button>\n            <button\n              type=\"button\"\n              @click=\"prevMonth\"\n              v-show=\"currentView === 'date'\"\n              :aria-label=\"t(`el.datepicker.prevMonth`)\"\n              class=\"el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-arrow-left\">\n            </button>\n            <span\n              @click=\"showYearPicker\"\n              role=\"button\"\n              class=\"el-date-picker__header-label\">{{ yearLabel }}</span>\n            <span\n              @click=\"showMonthPicker\"\n              v-show=\"currentView === 'date'\"\n              role=\"button\"\n              class=\"el-date-picker__header-label\"\n              :class=\"{ active: currentView === 'month' }\">{{t(`el.datepicker.month${ month + 1 }`)}}</span>\n            <button\n              type=\"button\"\n              @click=\"nextYear\"\n              :aria-label=\"t(`el.datepicker.nextYear`)\"\n              class=\"el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right\">\n            </button>\n            <button\n              type=\"button\"\n              @click=\"nextMonth\"\n              v-show=\"currentView === 'date'\"\n              :aria-label=\"t(`el.datepicker.nextMonth`)\"\n              class=\"el-picker-panel__icon-btn el-date-picker__next-btn el-icon-arrow-right\">\n            </button>\n          </div>\n\n          <div class=\"el-picker-panel__content\">\n            <date-table\n              v-show=\"currentView === 'date'\"\n              @pick=\"handleDatePick\"\n              :selection-mode=\"selectionMode\"\n              :first-day-of-week=\"firstDayOfWeek\"\n              :value=\"value\"\n              :default-value=\"defaultValue ? new Date(defaultValue) : null\"\n              :date=\"date\"\n              :cell-class-name=\"cellClassName\"\n              :disabled-date=\"disabledDate\">\n            </date-table>\n            <year-table\n              v-show=\"currentView === 'year'\"\n              @pick=\"handleYearPick\"\n              :selection-mode=\"selectionMode\"\n              :value=\"value\"\n              :default-value=\"defaultValue ? new Date(defaultValue) : null\"\n              :date=\"date\"\n              :disabled-date=\"disabledDate\">\n            </year-table>\n            <month-table\n              v-show=\"currentView === 'month'\"\n              @pick=\"handleMonthPick\"\n              :selection-mode=\"selectionMode\"\n              :value=\"value\"\n              :default-value=\"defaultValue ? new Date(defaultValue) : null\"\n              :date=\"date\"\n              :disabled-date=\"disabledDate\">\n            </month-table>\n          </div>\n        </div>\n      </div>\n\n      <div\n        class=\"el-picker-panel__footer\"\n        v-show=\"footerVisible && (currentView === 'date' || currentView === 'month' || currentView === 'year')\">\n        <el-button\n          size=\"mini\"\n          type=\"text\"\n          class=\"el-picker-panel__link-btn\"\n          @click=\"changeToNow\"\n          v-show=\"selectionMode !== 'dates' && selectionMode !== 'months' && selectionMode !== 'years'\">\n          {{ t('el.datepicker.now') }}\n        </el-button>\n        <el-button\n          plain\n          size=\"mini\"\n          class=\"el-picker-panel__link-btn\"\n          @click=\"confirm\">\n          {{ t('el.datepicker.confirm') }}\n        </el-button>\n      </div>\n    </div>\n  </transition>\n</template>\n\n<script type=\"text/babel\">\n  import {\n    formatDate,\n    parseDate,\n    getWeekNumber,\n    isDate,\n    modifyDate,\n    modifyTime,\n    modifyWithTimeString,\n    clearMilliseconds,\n    clearTime,\n    prevYear,\n    nextYear,\n    prevMonth,\n    nextMonth,\n    changeYearMonthAndClampDate,\n    extractDateFormat,\n    extractTimeFormat,\n    timeWithinRange\n  } from 'element-ui/src/utils/date-util';\n  import Clickoutside from 'element-ui/src/utils/clickoutside';\n  import Locale from 'element-ui/src/mixins/locale';\n  import ElInput from 'element-ui/packages/input';\n  import ElButton from 'element-ui/packages/button';\n  import TimePicker from './time';\n  import YearTable from '../basic/year-table';\n  import MonthTable from '../basic/month-table';\n  import DateTable from '../basic/date-table';\n\n  export default {\n    mixins: [Locale],\n\n    directives: { Clickoutside },\n\n    watch: {\n      showTime(val) {\n        /* istanbul ignore if */\n        if (!val) return;\n        this.$nextTick(_ => {\n          const inputElm = this.$refs.input.$el;\n          if (inputElm) {\n            this.pickerWidth = inputElm.getBoundingClientRect().width + 10;\n          }\n        });\n      },\n\n      value(val) {\n        if (this.selectionMode === 'dates' && this.value) return;\n        if (this.selectionMode === 'months' && this.value) return;\n        if (this.selectionMode === 'years' && this.value) return;\n        if (isDate(val)) {\n          this.date = new Date(val);\n        } else {\n          this.date = this.getDefaultValue();\n        }\n      },\n\n      defaultValue(val) {\n        if (!isDate(this.value)) {\n          this.date = val ? new Date(val) : new Date();\n        }\n      },\n\n      timePickerVisible(val) {\n        if (val) this.$nextTick(() => this.$refs.timepicker.adjustSpinners());\n      },\n\n      selectionMode(newVal) {\n        if (newVal === 'month') {\n          /* istanbul ignore next */\n          if (this.currentView !== 'year' || this.currentView !== 'month') {\n            this.currentView = 'month';\n          }\n        } else if (newVal === 'dates') {\n          this.currentView = 'date';\n        } else if (newVal === 'years') {\n          this.currentView = 'year';\n        } else if (newVal === 'months') {\n          this.currentView = 'month';\n        }\n      }\n    },\n\n    methods: {\n      proxyTimePickerDataProperties() {\n        const format = timeFormat => {this.$refs.timepicker.format = timeFormat;};\n        const value = value => {this.$refs.timepicker.value = value;};\n        const date = date => {this.$refs.timepicker.date = date;};\n        const selectableRange = selectableRange => {this.$refs.timepicker.selectableRange = selectableRange;};\n\n        this.$watch('value', value);\n        this.$watch('date', date);\n        this.$watch('selectableRange', selectableRange);\n\n        format(this.timeFormat);\n        value(this.value);\n        date(this.date);\n        selectableRange(this.selectableRange);\n      },\n\n      handleClear() {\n        this.date = this.getDefaultValue();\n        this.$emit('pick', null);\n      },\n\n      emit(value, ...args) {\n        if (!value) {\n          this.$emit('pick', value, ...args);\n        } else if (Array.isArray(value)) {\n          const dates = value.map(date => this.showTime ? clearMilliseconds(date) : clearTime(date));\n          this.$emit('pick', dates, ...args);\n        } else {\n          this.$emit('pick', this.showTime ? clearMilliseconds(value) : clearTime(value), ...args);\n        }\n        this.userInputDate = null;\n        this.userInputTime = null;\n      },\n\n      // resetDate() {\n      //   this.date = new Date(this.date);\n      // },\n\n      showMonthPicker() {\n        this.currentView = 'month';\n      },\n\n      showYearPicker() {\n        this.currentView = 'year';\n      },\n\n      // XXX: 没用到\n      // handleLabelClick() {\n      //   if (this.currentView === 'date') {\n      //     this.showMonthPicker();\n      //   } else if (this.currentView === 'month') {\n      //     this.showYearPicker();\n      //   }\n      // },\n\n      prevMonth() {\n        this.date = prevMonth(this.date);\n      },\n\n      nextMonth() {\n        this.date = nextMonth(this.date);\n      },\n\n      prevYear() {\n        if (this.currentView === 'year') {\n          this.date = prevYear(this.date, 10);\n        } else {\n          this.date = prevYear(this.date);\n        }\n      },\n\n      nextYear() {\n        if (this.currentView === 'year') {\n          this.date = nextYear(this.date, 10);\n        } else {\n          this.date = nextYear(this.date);\n        }\n      },\n\n      handleShortcutClick(shortcut) {\n        if (shortcut.onClick) {\n          shortcut.onClick(this);\n        }\n      },\n\n      handleTimePick(value, visible, first) {\n        if (isDate(value)) {\n          const newDate = this.value\n            ? modifyTime(this.value, value.getHours(), value.getMinutes(), value.getSeconds())\n            : modifyWithTimeString(this.getDefaultValue(), this.defaultTime);\n          this.date = newDate;\n          this.emit(this.date, true);\n        } else {\n          this.emit(value, true);\n        }\n        if (!first) {\n          this.timePickerVisible = visible;\n        }\n      },\n\n      handleTimePickClose() {\n        this.timePickerVisible = false;\n      },\n\n      handleMonthPick(month) {\n        if (this.selectionMode === 'month') {\n          this.date = modifyDate(this.date, this.year, month, 1);\n          this.emit(this.date);\n        } else if (this.selectionMode === 'months') {\n          this.emit(month, true);\n        } else {\n          this.date = changeYearMonthAndClampDate(this.date, this.year, month);\n          // TODO: should emit intermediate value ??\n          // this.emit(this.date);\n          this.currentView = 'date';\n        }\n      },\n\n      handleDatePick(value) {\n        if (this.selectionMode === 'day') {\n          let newDate = this.value\n            ? modifyDate(this.value, value.getFullYear(), value.getMonth(), value.getDate())\n            : modifyWithTimeString(value, this.defaultTime);\n          // change default time while out of selectableRange\n          if (!this.checkDateWithinRange(newDate)) {\n            newDate = modifyDate(this.selectableRange[0][0], value.getFullYear(), value.getMonth(), value.getDate());\n          }\n          this.date = newDate;\n          this.emit(this.date, this.showTime);\n        } else if (this.selectionMode === 'week') {\n          this.emit(value.date);\n        } else if (this.selectionMode === 'dates') {\n          this.emit(value, true); // set false to keep panel open\n        }\n      },\n\n      handleYearPick(year) {\n        if (this.selectionMode === 'year') {\n          this.date = modifyDate(this.date, year, 0, 1);\n          this.emit(this.date);\n        } else if (this.selectionMode === 'years') {\n          this.emit(year, true);\n        } else {\n          this.date = changeYearMonthAndClampDate(this.date, year, this.month);\n          // TODO: should emit intermediate value ??\n          // this.emit(this.date, true);\n          this.currentView = 'month';\n        }\n      },\n\n      changeToNow() {\n        // NOTE: not a permanent solution\n        //       consider disable \"now\" button in the future\n        if ((!this.disabledDate || !this.disabledDate(new Date())) && this.checkDateWithinRange(new Date())) {\n          this.date = new Date();\n          this.emit(this.date);\n        }\n      },\n\n      confirm() {\n        if (this.selectionMode === 'dates' || this.selectionMode === 'months' || this.selectionMode === 'years') {\n          this.emit(this.value);\n        } else {\n          // value were emitted in handle{Date,Time}Pick, nothing to update here\n          // deal with the scenario where: user opens the picker, then confirm without doing anything\n          const value = this.value\n            ? this.value\n            : modifyWithTimeString(this.getDefaultValue(), this.defaultTime);\n          this.date = new Date(value); // refresh date\n          this.emit(value);\n        }\n      },\n\n      resetView() {\n        if (this.selectionMode === 'month' || this.selectionMode === 'months') {\n          this.currentView = 'month';\n        } else if (this.selectionMode === 'year' || this.selectionMode === 'years') {\n          this.currentView = 'year';\n        } else {\n          this.currentView = 'date';\n        }\n      },\n\n      handleEnter() {\n        document.body.addEventListener('keydown', this.handleKeydown);\n      },\n\n      handleLeave() {\n        this.$emit('dodestroy');\n        document.body.removeEventListener('keydown', this.handleKeydown);\n      },\n\n      handleKeydown(event) {\n        const keyCode = event.keyCode;\n        const list = [38, 40, 37, 39];\n        if (this.visible && !this.timePickerVisible) {\n          if (list.indexOf(keyCode) !== -1) {\n            this.handleKeyControl(keyCode);\n            event.stopPropagation();\n            event.preventDefault();\n          }\n          if (keyCode === 13 && this.userInputDate === null && this.userInputTime === null) { // Enter\n            this.emit(this.date, false);\n          }\n        }\n      },\n\n      handleKeyControl(keyCode) {\n        const mapping = {\n          'year': {\n            38: -4, 40: 4, 37: -1, 39: 1, offset: (date, step) => date.setFullYear(date.getFullYear() + step)\n          },\n          'month': {\n            38: -4, 40: 4, 37: -1, 39: 1, offset: (date, step) => date.setMonth(date.getMonth() + step)\n          },\n          'week': {\n            38: -1, 40: 1, 37: -1, 39: 1, offset: (date, step) => date.setDate(date.getDate() + step * 7)\n          },\n          'day': {\n            38: -7, 40: 7, 37: -1, 39: 1, offset: (date, step) => date.setDate(date.getDate() + step)\n          }\n        };\n        const mode = this.selectionMode;\n        const year = 3.1536e10;\n        const now = this.date.getTime();\n        const newDate = new Date(this.date.getTime());\n        while (Math.abs(now - newDate.getTime()) <= year) {\n          const map = mapping[mode];\n          map.offset(newDate, map[keyCode]);\n          if (typeof this.disabledDate === 'function' && this.disabledDate(newDate)) {\n            continue;\n          }\n          this.date = newDate;\n          this.$emit('pick', newDate, true);\n          break;\n        }\n      },\n\n      handleVisibleTimeChange(value) {\n        const time = parseDate(value, this.timeFormat);\n        if (time && this.checkDateWithinRange(time)) {\n          this.date = modifyDate(time, this.year, this.month, this.monthDate);\n          this.userInputTime = null;\n          this.$refs.timepicker.value = this.date;\n          this.timePickerVisible = false;\n          this.emit(this.date, true);\n        }\n      },\n\n      handleVisibleDateChange(value) {\n        const date = parseDate(value, this.dateFormat);\n        if (date) {\n          if (typeof this.disabledDate === 'function' && this.disabledDate(date)) {\n            return;\n          }\n          this.date = modifyTime(date, this.date.getHours(), this.date.getMinutes(), this.date.getSeconds());\n          this.userInputDate = null;\n          this.resetView();\n          this.emit(this.date, true);\n        }\n      },\n\n      isValidValue(value) {\n        return value && !isNaN(value) && (\n          typeof this.disabledDate === 'function'\n            ? !this.disabledDate(value)\n            : true\n        ) && this.checkDateWithinRange(value);\n      },\n\n      getDefaultValue() {\n        // if default-value is set, return it\n        // otherwise, return now (the moment this method gets called)\n        return this.defaultValue ? new Date(this.defaultValue) : new Date();\n      },\n\n      checkDateWithinRange(date) {\n        return this.selectableRange.length > 0\n          ? timeWithinRange(date, this.selectableRange, this.format || 'HH:mm:ss')\n          : true;\n      }\n    },\n\n    components: {\n      TimePicker, YearTable, MonthTable, DateTable, ElInput, ElButton\n    },\n\n    data() {\n      return {\n        popperClass: '',\n        date: new Date(),\n        value: '',\n        defaultValue: null, // use getDefaultValue() for time computation\n        defaultTime: null,\n        showTime: false,\n        selectionMode: 'day',\n        shortcuts: '',\n        visible: false,\n        currentView: 'date',\n        disabledDate: '',\n        cellClassName: '',\n        selectableRange: [],\n        firstDayOfWeek: 7,\n        showWeekNumber: false,\n        timePickerVisible: false,\n        format: '',\n        arrowControl: false,\n        userInputDate: null,\n        userInputTime: null\n      };\n    },\n\n    computed: {\n      year() {\n        return this.date.getFullYear();\n      },\n\n      month() {\n        return this.date.getMonth();\n      },\n\n      week() {\n        return getWeekNumber(this.date);\n      },\n\n      monthDate() {\n        return this.date.getDate();\n      },\n\n      footerVisible() {\n        return this.showTime || this.selectionMode === 'dates' || this.selectionMode === 'months' || this.selectionMode === 'years';\n      },\n\n      visibleTime() {\n        if (this.userInputTime !== null) {\n          return this.userInputTime;\n        } else {\n          return formatDate(this.value || this.defaultValue, this.timeFormat);\n        }\n      },\n\n      visibleDate() {\n        if (this.userInputDate !== null) {\n          return this.userInputDate;\n        } else {\n          return formatDate(this.value || this.defaultValue, this.dateFormat);\n        }\n      },\n\n      yearLabel() {\n        const yearTranslation = this.t('el.datepicker.year');\n        if (this.currentView === 'year') {\n          const startYear = Math.floor(this.year / 10) * 10;\n          if (yearTranslation) {\n            return startYear + ' ' + yearTranslation + ' - ' + (startYear + 9) + ' ' + yearTranslation;\n          }\n          return startYear + ' - ' + (startYear + 9);\n        }\n        return this.year + ' ' + yearTranslation;\n      },\n\n      timeFormat() {\n        if (this.format) {\n          return extractTimeFormat(this.format);\n        } else {\n          return 'HH:mm:ss';\n        }\n      },\n\n      dateFormat() {\n        if (this.format) {\n          return extractDateFormat(this.format);\n        } else {\n          return 'yyyy-MM-dd';\n        }\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/date-picker/src/panel/month-range.vue",
    "content": "<template>\n  <transition name=\"el-zoom-in-top\" @after-leave=\"$emit('dodestroy')\">\n    <div\n      v-show=\"visible\"\n      class=\"el-picker-panel el-date-range-picker el-popper\"\n      :class=\"[{\n        'has-sidebar': $slots.sidebar || shortcuts\n      }, popperClass]\">\n      <div class=\"el-picker-panel__body-wrapper\">\n        <slot name=\"sidebar\" class=\"el-picker-panel__sidebar\"></slot>\n        <div class=\"el-picker-panel__sidebar\" v-if=\"shortcuts\">\n          <button\n            type=\"button\"\n            class=\"el-picker-panel__shortcut\"\n            v-for=\"(shortcut, key) in shortcuts\"\n            :key=\"key\"\n            @click=\"handleShortcutClick(shortcut)\">{{shortcut.text}}</button>\n        </div>\n        <div class=\"el-picker-panel__body\">\n          <div class=\"el-picker-panel__content el-date-range-picker__content is-left\">\n            <div class=\"el-date-range-picker__header\">\n              <button\n                type=\"button\"\n                @click=\"leftPrevYear\"\n                class=\"el-picker-panel__icon-btn el-icon-d-arrow-left\"></button>\n              <button\n                type=\"button\"\n                v-if=\"unlinkPanels\"\n                @click=\"leftNextYear\"\n                :disabled=\"!enableYearArrow\"\n                :class=\"{ 'is-disabled': !enableYearArrow }\"\n                class=\"el-picker-panel__icon-btn el-icon-d-arrow-right\"></button>\n              <div>{{ leftLabel }}</div>\n            </div>\n            <month-table\n              selection-mode=\"range\"\n              :date=\"leftDate\"\n              :default-value=\"defaultValue\"\n              :min-date=\"minDate\"\n              :max-date=\"maxDate\"\n              :range-state=\"rangeState\"\n              :disabled-date=\"disabledDate\"\n              @changerange=\"handleChangeRange\"\n              @pick=\"handleRangePick\">\n            </month-table>\n          </div>\n          <div class=\"el-picker-panel__content el-date-range-picker__content is-right\">\n            <div class=\"el-date-range-picker__header\">\n              <button\n                type=\"button\"\n                v-if=\"unlinkPanels\"\n                @click=\"rightPrevYear\"\n                :disabled=\"!enableYearArrow\"\n                :class=\"{ 'is-disabled': !enableYearArrow }\"\n                class=\"el-picker-panel__icon-btn el-icon-d-arrow-left\"></button>\n              <button\n                type=\"button\"\n                @click=\"rightNextYear\"\n                class=\"el-picker-panel__icon-btn el-icon-d-arrow-right\"></button>\n              <div>{{ rightLabel }}</div>\n            </div>\n            <month-table\n              selection-mode=\"range\"\n              :date=\"rightDate\"\n              :default-value=\"defaultValue\"\n              :min-date=\"minDate\"\n              :max-date=\"maxDate\"\n              :range-state=\"rangeState\"\n              :disabled-date=\"disabledDate\"\n              @changerange=\"handleChangeRange\"\n              @pick=\"handleRangePick\">\n            </month-table>\n          </div>\n        </div>\n      </div>\n    </div>\n  </transition>\n</template>\n\n<script type=\"text/babel\">\n  import {\n    isDate,\n    modifyWithTimeString,\n    prevYear,\n    nextYear,\n    nextMonth\n  } from 'element-ui/src/utils/date-util';\n  import Clickoutside from 'element-ui/src/utils/clickoutside';\n  import Locale from 'element-ui/src/mixins/locale';\n  import MonthTable from '../basic/month-table';\n  import ElInput from 'element-ui/packages/input';\n  import ElButton from 'element-ui/packages/button';\n\n  const calcDefaultValue = (defaultValue) => {\n    if (Array.isArray(defaultValue)) {\n      return [new Date(defaultValue[0]), new Date(defaultValue[1])];\n    } else if (defaultValue) {\n      return [new Date(defaultValue), nextMonth(new Date(defaultValue))];\n    } else {\n      return [new Date(), nextMonth(new Date())];\n    }\n  };\n  export default {\n    mixins: [Locale],\n\n    directives: { Clickoutside },\n\n    computed: {\n      btnDisabled() {\n        return !(this.minDate && this.maxDate && !this.selecting && this.isValidValue([this.minDate, this.maxDate]));\n      },\n\n      leftLabel() {\n        return this.leftDate.getFullYear() + ' ' + this.t('el.datepicker.year');\n      },\n\n      rightLabel() {\n        return this.rightDate.getFullYear() + ' ' + this.t('el.datepicker.year');\n      },\n\n      leftYear() {\n        return this.leftDate.getFullYear();\n      },\n\n      rightYear() {\n        return this.rightDate.getFullYear() === this.leftDate.getFullYear() ? this.leftDate.getFullYear() + 1 : this.rightDate.getFullYear();\n      },\n\n      enableYearArrow() {\n        return this.unlinkPanels && this.rightYear > this.leftYear + 1;\n      }\n    },\n\n    data() {\n      return {\n        popperClass: '',\n        value: [],\n        defaultValue: null,\n        defaultTime: null,\n        minDate: '',\n        maxDate: '',\n        leftDate: new Date(),\n        rightDate: nextYear(new Date()),\n        rangeState: {\n          endDate: null,\n          selecting: false,\n          row: null,\n          column: null\n        },\n        shortcuts: '',\n        visible: '',\n        disabledDate: '',\n        format: '',\n        arrowControl: false,\n        unlinkPanels: false\n      };\n    },\n\n    watch: {\n      value(newVal) {\n        if (!newVal) {\n          this.minDate = null;\n          this.maxDate = null;\n        } else if (Array.isArray(newVal)) {\n          this.minDate = isDate(newVal[0]) ? new Date(newVal[0]) : null;\n          this.maxDate = isDate(newVal[1]) ? new Date(newVal[1]) : null;\n          if (this.minDate) {\n            this.leftDate = this.minDate;\n            if (this.unlinkPanels && this.maxDate) {\n              const minDateYear = this.minDate.getFullYear();\n              const maxDateYear = this.maxDate.getFullYear();\n              this.rightDate = minDateYear === maxDateYear\n                ? nextYear(this.maxDate)\n                : this.maxDate;\n            } else {\n              this.rightDate = nextYear(this.leftDate);\n            }\n          } else {\n            this.leftDate = calcDefaultValue(this.defaultValue)[0];\n            this.rightDate = nextYear(this.leftDate);\n          }\n        }\n      },\n\n      defaultValue(val) {\n        if (!Array.isArray(this.value)) {\n          const [left, right] = calcDefaultValue(val);\n          this.leftDate = left;\n          this.rightDate = val && val[1] && left.getFullYear() !== right.getFullYear() && this.unlinkPanels\n            ? right\n            : nextYear(this.leftDate);\n        }\n      }\n    },\n\n    methods: {\n      handleClear() {\n        this.minDate = null;\n        this.maxDate = null;\n        this.leftDate = calcDefaultValue(this.defaultValue)[0];\n        this.rightDate = nextYear(this.leftDate);\n        this.$emit('pick', null);\n      },\n\n      handleChangeRange(val) {\n        this.minDate = val.minDate;\n        this.maxDate = val.maxDate;\n        this.rangeState = val.rangeState;\n      },\n\n      handleRangePick(val, close = true) {\n        const defaultTime = this.defaultTime || [];\n        const minDate = modifyWithTimeString(val.minDate, defaultTime[0]);\n        const maxDate = modifyWithTimeString(val.maxDate, defaultTime[1]);\n        if (this.maxDate === maxDate && this.minDate === minDate) {\n          return;\n        }\n        this.onPick && this.onPick(val);\n        this.maxDate = maxDate;\n        this.minDate = minDate;\n\n        // workaround for https://github.com/ElemeFE/element/issues/7539, should remove this block when we don't have to care about Chromium 55 - 57\n        setTimeout(() => {\n          this.maxDate = maxDate;\n          this.minDate = minDate;\n        }, 10);\n        if (!close) return;\n        this.handleConfirm();\n      },\n\n      handleShortcutClick(shortcut) {\n        if (shortcut.onClick) {\n          shortcut.onClick(this);\n        }\n      },\n\n      // leftPrev*, rightNext* need to take care of `unlinkPanels`\n      leftPrevYear() {\n        this.leftDate = prevYear(this.leftDate);\n        if (!this.unlinkPanels) {\n          this.rightDate = prevYear(this.rightDate);\n        }\n      },\n\n      rightNextYear() {\n        if (!this.unlinkPanels) {\n          this.leftDate = nextYear(this.leftDate);\n        }\n        this.rightDate = nextYear(this.rightDate);\n      },\n\n      // leftNext*, rightPrev* are called when `unlinkPanels` is true\n      leftNextYear() {\n        this.leftDate = nextYear(this.leftDate);\n      },\n\n      rightPrevYear() {\n        this.rightDate = prevYear(this.rightDate);\n      },\n\n      handleConfirm(visible = false) {\n        if (this.isValidValue([this.minDate, this.maxDate])) {\n          this.$emit('pick', [this.minDate, this.maxDate], visible);\n        }\n      },\n\n      isValidValue(value) {\n        return Array.isArray(value) &&\n          value && value[0] && value[1] &&\n          isDate(value[0]) && isDate(value[1]) &&\n          value[0].getTime() <= value[1].getTime() && (\n          typeof this.disabledDate === 'function'\n            ? !this.disabledDate(value[0]) && !this.disabledDate(value[1])\n            : true\n        );\n      },\n\n      resetView() {\n        // NOTE: this is a hack to reset {min, max}Date on picker open.\n        // TODO: correct way of doing so is to refactor {min, max}Date to be dependent on value and internal selection state\n        //       an alternative would be resetView whenever picker becomes visible, should also investigate date-panel's resetView\n        this.minDate = this.value && isDate(this.value[0]) ? new Date(this.value[0]) : null;\n        this.maxDate = this.value && isDate(this.value[0]) ? new Date(this.value[1]) : null;\n      }\n    },\n\n    components: { MonthTable, ElInput, ElButton }\n  };\n</script>\n"
  },
  {
    "path": "packages/date-picker/src/panel/time-range.vue",
    "content": "<template>\n  <transition\n    name=\"el-zoom-in-top\"\n    @after-leave=\"$emit('dodestroy')\">\n    <div\n      v-show=\"visible\"\n      class=\"el-time-range-picker el-picker-panel el-popper\"\n      :class=\"popperClass\">\n      <div class=\"el-time-range-picker__content\">\n        <div class=\"el-time-range-picker__cell\">\n          <div class=\"el-time-range-picker__header\">{{ t('el.datepicker.startTime') }}</div>\n          <div\n            :class=\"{ 'has-seconds': showSeconds, 'is-arrow': arrowControl }\"\n            class=\"el-time-range-picker__body el-time-panel__content\">\n            <time-spinner\n              ref=\"minSpinner\"\n              :show-seconds=\"showSeconds\"\n              :am-pm-mode=\"amPmMode\"\n              @change=\"handleMinChange\"\n              :arrow-control=\"arrowControl\"\n              @select-range=\"setMinSelectionRange\"\n              :date=\"minDate\">\n            </time-spinner>\n          </div>\n        </div>\n        <div class=\"el-time-range-picker__cell\">\n          <div class=\"el-time-range-picker__header\">{{ t('el.datepicker.endTime') }}</div>\n          <div\n            :class=\"{ 'has-seconds': showSeconds, 'is-arrow': arrowControl }\"\n            class=\"el-time-range-picker__body el-time-panel__content\">\n            <time-spinner\n              ref=\"maxSpinner\"\n              :show-seconds=\"showSeconds\"\n              :am-pm-mode=\"amPmMode\"\n              @change=\"handleMaxChange\"\n              :arrow-control=\"arrowControl\"\n              @select-range=\"setMaxSelectionRange\"\n              :date=\"maxDate\">\n            </time-spinner>\n          </div>\n        </div>\n      </div>\n      <div class=\"el-time-panel__footer\">\n        <button\n          type=\"button\"\n          class=\"el-time-panel__btn cancel\"\n          @click=\"handleCancel()\">{{ t('el.datepicker.cancel') }}</button>\n        <button\n          type=\"button\"\n          class=\"el-time-panel__btn confirm\"\n          @click=\"handleConfirm()\"\n          :disabled=\"btnDisabled\">{{ t('el.datepicker.confirm') }}</button>\n      </div>\n    </div>\n  </transition>\n</template>\n\n<script type=\"text/babel\">\n  import {\n    parseDate,\n    limitTimeRange,\n    modifyDate,\n    clearMilliseconds,\n    timeWithinRange\n  } from 'element-ui/src/utils/date-util';\n  import Locale from 'element-ui/src/mixins/locale';\n  import TimeSpinner from '../basic/time-spinner';\n\n  const MIN_TIME = parseDate('00:00:00', 'HH:mm:ss');\n  const MAX_TIME = parseDate('23:59:59', 'HH:mm:ss');\n\n  const minTimeOfDay = function(date) {\n    return modifyDate(MIN_TIME, date.getFullYear(), date.getMonth(), date.getDate());\n  };\n  \n  const maxTimeOfDay = function(date) {\n    return modifyDate(MAX_TIME, date.getFullYear(), date.getMonth(), date.getDate());\n  };\n\n  // increase time by amount of milliseconds, but within the range of day\n  const advanceTime = function(date, amount) {\n    return new Date(Math.min(date.getTime() + amount, maxTimeOfDay(date).getTime()));\n  };\n\n  export default {\n    mixins: [Locale],\n\n    components: { TimeSpinner },\n\n    computed: {\n      showSeconds() {\n        return (this.format || '').indexOf('ss') !== -1;\n      },\n\n      offset() {\n        return this.showSeconds ? 11 : 8;\n      },\n\n      spinner() {\n        return this.selectionRange[0] < this.offset ? this.$refs.minSpinner : this.$refs.maxSpinner;\n      },\n\n      btnDisabled() {\n        return this.minDate.getTime() > this.maxDate.getTime();\n      },\n      amPmMode() {\n        if ((this.format || '').indexOf('A') !== -1) return 'A';\n        if ((this.format || '').indexOf('a') !== -1) return 'a';\n        return '';\n      }\n    },\n\n    data() {\n      return {\n        popperClass: '',\n        minDate: new Date(),\n        maxDate: new Date(),\n        value: [],\n        oldValue: [new Date(), new Date()],\n        defaultValue: null,\n        format: 'HH:mm:ss',\n        visible: false,\n        selectionRange: [0, 2],\n        arrowControl: false\n      };\n    },\n\n    watch: {\n      value(value) {\n        if (Array.isArray(value)) {\n          this.minDate = new Date(value[0]);\n          this.maxDate = new Date(value[1]);\n        } else {\n          if (Array.isArray(this.defaultValue)) {\n            this.minDate = new Date(this.defaultValue[0]);\n            this.maxDate = new Date(this.defaultValue[1]);\n          } else if (this.defaultValue) {\n            this.minDate = new Date(this.defaultValue);\n            this.maxDate = advanceTime(new Date(this.defaultValue), 60 * 60 * 1000);\n          } else {\n            this.minDate = new Date();\n            this.maxDate = advanceTime(new Date(), 60 * 60 * 1000);\n          }\n        }\n      },\n\n      visible(val) {\n        if (val) {\n          this.oldValue = this.value;\n          this.$nextTick(() => this.$refs.minSpinner.emitSelectRange('hours'));\n        }\n      }\n    },\n\n    methods: {\n      handleClear() {\n        this.$emit('pick', null);\n      },\n\n      handleCancel() {\n        this.$emit('pick', this.oldValue);\n      },\n\n      handleMinChange(date) {\n        this.minDate = clearMilliseconds(date);\n        this.handleChange();\n      },\n\n      handleMaxChange(date) {\n        this.maxDate = clearMilliseconds(date);\n        this.handleChange();\n      },\n\n      handleChange() {\n        if (this.isValidValue([this.minDate, this.maxDate])) {\n          this.$refs.minSpinner.selectableRange = [[minTimeOfDay(this.minDate), this.maxDate]];\n          this.$refs.maxSpinner.selectableRange = [[this.minDate, maxTimeOfDay(this.maxDate)]];\n          this.$emit('pick', [this.minDate, this.maxDate], true);\n        }\n      },\n\n      setMinSelectionRange(start, end) {\n        this.$emit('select-range', start, end, 'min');\n        this.selectionRange = [start, end];\n      },\n\n      setMaxSelectionRange(start, end) {\n        this.$emit('select-range', start, end, 'max');\n        this.selectionRange = [start + this.offset, end + this.offset];\n      },\n\n      handleConfirm(visible = false) {\n        const minSelectableRange = this.$refs.minSpinner.selectableRange;\n        const maxSelectableRange = this.$refs.maxSpinner.selectableRange;\n\n        this.minDate = limitTimeRange(this.minDate, minSelectableRange, this.format);\n        this.maxDate = limitTimeRange(this.maxDate, maxSelectableRange, this.format);\n\n        this.$emit('pick', [this.minDate, this.maxDate], visible);\n      },\n\n      adjustSpinners() {\n        this.$refs.minSpinner.adjustSpinners();\n        this.$refs.maxSpinner.adjustSpinners();\n      },\n\n      changeSelectionRange(step) {\n        const list = this.showSeconds ? [0, 3, 6, 11, 14, 17] : [0, 3, 8, 11];\n        const mapping = ['hours', 'minutes'].concat(this.showSeconds ? ['seconds'] : []);\n        const index = list.indexOf(this.selectionRange[0]);\n        const next = (index + step + list.length) % list.length;\n        const half = list.length / 2;\n        if (next < half) {\n          this.$refs.minSpinner.emitSelectRange(mapping[next]);\n        } else {\n          this.$refs.maxSpinner.emitSelectRange(mapping[next - half]);\n        }\n      },\n\n      isValidValue(date) {\n        return Array.isArray(date) &&\n          timeWithinRange(this.minDate, this.$refs.minSpinner.selectableRange) &&\n          timeWithinRange(this.maxDate, this.$refs.maxSpinner.selectableRange);\n      },\n\n      handleKeydown(event) {\n        const keyCode = event.keyCode;\n        const mapping = { 38: -1, 40: 1, 37: -1, 39: 1 };\n\n        // Left or Right\n        if (keyCode === 37 || keyCode === 39) {\n          const step = mapping[keyCode];\n          this.changeSelectionRange(step);\n          event.preventDefault();\n          return;\n        }\n\n        // Up or Down\n        if (keyCode === 38 || keyCode === 40) {\n          const step = mapping[keyCode];\n          this.spinner.scrollDown(step);\n          event.preventDefault();\n          return;\n        }\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/date-picker/src/panel/time-select.vue",
    "content": "<template>\n  <transition name=\"el-zoom-in-top\" @before-enter=\"handleMenuEnter\" @after-leave=\"$emit('dodestroy')\">\n    <div\n      ref=\"popper\"\n      v-show=\"visible\"\n      :style=\"{ width: width + 'px' }\"\n      :class=\"popperClass\"\n      class=\"el-picker-panel time-select el-popper\">\n      <el-scrollbar noresize wrap-class=\"el-picker-panel__content\">\n        <div class=\"time-select-item\"\n          v-for=\"item in items\"\n          :class=\"{ selected: value === item.value, disabled: item.disabled, default: item.value === defaultValue }\"\n          :disabled=\"item.disabled\"\n          :key=\"item.value\"\n          @click=\"handleClick(item)\">{{ item.value }}</div>\n      </el-scrollbar>\n    </div>\n  </transition>\n</template>\n\n<script type=\"text/babel\">\n  import ElScrollbar from 'element-ui/packages/scrollbar';\n  import scrollIntoView from 'element-ui/src/utils/scroll-into-view';\n\n  const parseTime = function(time) {\n    const values = (time || '').split(':');\n    if (values.length >= 2) {\n      const hours = parseInt(values[0], 10);\n      const minutes = parseInt(values[1], 10);\n\n      return {\n        hours,\n        minutes\n      };\n    }\n    /* istanbul ignore next */\n    return null;\n  };\n\n  const compareTime = function(time1, time2) {\n    const value1 = parseTime(time1);\n    const value2 = parseTime(time2);\n\n    const minutes1 = value1.minutes + value1.hours * 60;\n    const minutes2 = value2.minutes + value2.hours * 60;\n\n    if (minutes1 === minutes2) {\n      return 0;\n    }\n\n    return minutes1 > minutes2 ? 1 : -1;\n  };\n\n  const formatTime = function(time) {\n    return (time.hours < 10 ? '0' + time.hours : time.hours) + ':' + (time.minutes < 10 ? '0' + time.minutes : time.minutes);\n  };\n\n  const nextTime = function(time, step) {\n    const timeValue = parseTime(time);\n    const stepValue = parseTime(step);\n\n    const next = {\n      hours: timeValue.hours,\n      minutes: timeValue.minutes\n    };\n\n    next.minutes += stepValue.minutes;\n    next.hours += stepValue.hours;\n\n    next.hours += Math.floor(next.minutes / 60);\n    next.minutes = next.minutes % 60;\n\n    return formatTime(next);\n  };\n\n  export default {\n    components: { ElScrollbar },\n\n    watch: {\n      value(val) {\n        if (!val) return;\n        this.$nextTick(() => this.scrollToOption());\n      }\n    },\n\n    methods: {\n      handleClick(item) {\n        if (!item.disabled) {\n          this.$emit('pick', item.value);\n        }\n      },\n\n      handleClear() {\n        this.$emit('pick', null);\n      },\n\n      scrollToOption(selector = '.selected') {\n        const menu = this.$refs.popper.querySelector('.el-picker-panel__content');\n        scrollIntoView(menu, menu.querySelector(selector));\n      },\n\n      handleMenuEnter() {\n        const selected = this.items.map(item => item.value).indexOf(this.value) !== -1;\n        const hasDefault = this.items.map(item => item.value).indexOf(this.defaultValue) !== -1;\n        const option = (selected && '.selected') || (hasDefault && '.default') || '.time-select-item:not(.disabled)';\n        this.$nextTick(() => this.scrollToOption(option));\n      },\n\n      scrollDown(step) {\n        const items = this.items;\n        const length = items.length;\n        let total = items.length;\n        let index = items.map(item => item.value).indexOf(this.value);\n        while (total--) {\n          index = (index + step + length) % length;\n          if (!items[index].disabled) {\n            this.$emit('pick', items[index].value, true);\n            return;\n          }\n        }\n      },\n\n      isValidValue(date) {\n        return this.items.filter(item => !item.disabled).map(item => item.value).indexOf(date) !== -1;\n      },\n\n      handleKeydown(event) {\n        const keyCode = event.keyCode;\n        if (keyCode === 38 || keyCode === 40) {\n          const mapping = { 40: 1, 38: -1 };\n          const offset = mapping[keyCode.toString()];\n          this.scrollDown(offset);\n          event.stopPropagation();\n          return;\n        }\n      }\n    },\n\n    data() {\n      return {\n        popperClass: '',\n        start: '09:00',\n        end: '18:00',\n        step: '00:30',\n        value: '',\n        defaultValue: '',\n        visible: false,\n        minTime: '',\n        maxTime: '',\n        width: 0\n      };\n    },\n\n    computed: {\n      items() {\n        const start = this.start;\n        const end = this.end;\n        const step = this.step;\n\n        const result = [];\n\n        if (start && end && step) {\n          let current = start;\n          while (compareTime(current, end) <= 0) {\n            result.push({\n              value: current,\n              disabled: compareTime(current, this.minTime || '-1:-1') <= 0 ||\n                compareTime(current, this.maxTime || '100:100') >= 0\n            });\n            current = nextTime(current, step);\n          }\n        }\n\n        return result;\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/date-picker/src/panel/time.vue",
    "content": "<template>\n  <transition name=\"el-zoom-in-top\" @after-leave=\"$emit('dodestroy')\">\n    <div\n      v-show=\"visible\"\n      class=\"el-time-panel el-popper\"\n      :class=\"popperClass\">\n      <div class=\"el-time-panel__content\" :class=\"{ 'has-seconds': showSeconds }\">\n        <time-spinner\n          ref=\"spinner\"\n          @change=\"handleChange\"\n          :arrow-control=\"useArrow\"\n          :show-seconds=\"showSeconds\"\n          :am-pm-mode=\"amPmMode\"\n          @select-range=\"setSelectionRange\"\n          :date=\"date\">\n        </time-spinner>\n      </div>\n      <div class=\"el-time-panel__footer\">\n        <button\n          type=\"button\"\n          class=\"el-time-panel__btn cancel\"\n          @click=\"handleCancel\">{{ t('el.datepicker.cancel') }}</button>\n        <button\n          type=\"button\"\n          class=\"el-time-panel__btn\"\n          :class=\"{confirm: !disabled}\"\n          @click=\"handleConfirm()\">{{ t('el.datepicker.confirm') }}</button>\n      </div>\n    </div>\n  </transition>\n</template>\n\n<script type=\"text/babel\">\n  import { limitTimeRange, isDate, clearMilliseconds, timeWithinRange } from 'element-ui/src/utils/date-util';\n  import Locale from 'element-ui/src/mixins/locale';\n  import TimeSpinner from '../basic/time-spinner';\n\n  export default {\n    mixins: [Locale],\n\n    components: {\n      TimeSpinner\n    },\n\n    props: {\n      visible: Boolean,\n      timeArrowControl: Boolean\n    },\n\n    watch: {\n      visible(val) {\n        if (val) {\n          this.oldValue = this.value;\n          this.$nextTick(() => this.$refs.spinner.emitSelectRange('hours'));\n        } else {\n          this.needInitAdjust = true;\n        }\n      },\n\n      value(newVal) {\n        let date;\n        if (newVal instanceof Date) {\n          date = limitTimeRange(newVal, this.selectableRange, this.format);\n        } else if (!newVal) {\n          date = this.defaultValue ? new Date(this.defaultValue) : new Date();\n        }\n\n        this.date = date;\n        if (this.visible && this.needInitAdjust) {\n          this.$nextTick(_ => this.adjustSpinners());\n          this.needInitAdjust = false;\n        }\n      },\n\n      selectableRange(val) {\n        this.$refs.spinner.selectableRange = val;\n      },\n\n      defaultValue(val) {\n        if (!isDate(this.value)) {\n          this.date = val ? new Date(val) : new Date();\n        }\n      }\n    },\n\n    data() {\n      return {\n        popperClass: '',\n        format: 'HH:mm:ss',\n        value: '',\n        defaultValue: null,\n        date: new Date(),\n        oldValue: new Date(),\n        selectableRange: [],\n        selectionRange: [0, 2],\n        disabled: false,\n        arrowControl: false,\n        needInitAdjust: true\n      };\n    },\n\n    computed: {\n      showSeconds() {\n        return (this.format || '').indexOf('ss') !== -1;\n      },\n      useArrow() {\n        return this.arrowControl || this.timeArrowControl || false;\n      },\n      amPmMode() {\n        if ((this.format || '').indexOf('A') !== -1) return 'A';\n        if ((this.format || '').indexOf('a') !== -1) return 'a';\n        return '';\n      }\n    },\n\n    methods: {\n      handleCancel() {\n        this.$emit('pick', this.oldValue, false);\n      },\n\n      handleChange(date) {\n        // this.visible avoids edge cases, when use scrolls during panel closing animation\n        if (this.visible) {\n          this.date = clearMilliseconds(date);\n          // if date is out of range, do not emit\n          if (this.isValidValue(this.date)) {\n            this.$emit('pick', this.date, true);\n          }\n        }\n      },\n\n      setSelectionRange(start, end) {\n        this.$emit('select-range', start, end);\n        this.selectionRange = [start, end];\n      },\n\n      handleConfirm(visible = false, first) {\n        if (first) return;\n        const date = clearMilliseconds(limitTimeRange(this.date, this.selectableRange, this.format));\n        this.$emit('pick', date, visible, first);\n      },\n\n      handleKeydown(event) {\n        const keyCode = event.keyCode;\n        const mapping = { 38: -1, 40: 1, 37: -1, 39: 1 };\n\n        // Left or Right\n        if (keyCode === 37 || keyCode === 39) {\n          const step = mapping[keyCode];\n          this.changeSelectionRange(step);\n          event.preventDefault();\n          return;\n        }\n\n        // Up or Down\n        if (keyCode === 38 || keyCode === 40) {\n          const step = mapping[keyCode];\n          this.$refs.spinner.scrollDown(step);\n          event.preventDefault();\n          return;\n        }\n      },\n\n      isValidValue(date) {\n        return timeWithinRange(date, this.selectableRange, this.format);\n      },\n\n      adjustSpinners() {\n        return this.$refs.spinner.adjustSpinners();\n      },\n\n      changeSelectionRange(step) {\n        const list = [0, 3].concat(this.showSeconds ? [6] : []);\n        const mapping = ['hours', 'minutes'].concat(this.showSeconds ? ['seconds'] : []);\n        const index = list.indexOf(this.selectionRange[0]);\n        const next = (index + step + list.length) % list.length;\n        this.$refs.spinner.emitSelectRange(mapping[next]);\n      }\n    },\n\n    mounted() {\n      this.$nextTick(() => this.handleConfirm(true, true));\n      this.$emit('mounted');\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/date-picker/src/picker/date-picker.js",
    "content": "import Picker from '../picker';\nimport DatePanel from '../panel/date';\nimport DateRangePanel from '../panel/date-range';\nimport MonthRangePanel from '../panel/month-range';\n\nconst getPanel = function(type) {\n  if (type === 'daterange' || type === 'datetimerange') {\n    return DateRangePanel;\n  } else if (type === 'monthrange') {\n    return MonthRangePanel;\n  }\n  return DatePanel;\n};\n\nexport default {\n  mixins: [Picker],\n\n  name: 'ElDatePicker',\n\n  props: {\n    type: {\n      type: String,\n      default: 'date'\n    },\n    timeArrowControl: Boolean\n  },\n\n  watch: {\n    type(type) {\n      if (this.picker) {\n        this.unmountPicker();\n        this.panel = getPanel(type);\n        this.mountPicker();\n      } else {\n        this.panel = getPanel(type);\n      }\n    }\n  },\n\n  created() {\n    this.panel = getPanel(this.type);\n  }\n};\n"
  },
  {
    "path": "packages/date-picker/src/picker/time-picker.js",
    "content": "import Picker from '../picker';\nimport TimePanel from '../panel/time';\nimport TimeRangePanel from '../panel/time-range';\n\nexport default {\n  mixins: [Picker],\n\n  name: 'ElTimePicker',\n\n  props: {\n    isRange: Boolean,\n    arrowControl: Boolean\n  },\n\n  data() {\n    return {\n      type: ''\n    };\n  },\n\n  watch: {\n    isRange(isRange) {\n      if (this.picker) {\n        this.unmountPicker();\n        this.type = isRange ? 'timerange' : 'time';\n        this.panel = isRange ? TimeRangePanel : TimePanel;\n        this.mountPicker();\n      } else {\n        this.type = isRange ? 'timerange' : 'time';\n        this.panel = isRange ? TimeRangePanel : TimePanel;\n      }\n    }\n  },\n\n  created() {\n    this.type = this.isRange ? 'timerange' : 'time';\n    this.panel = this.isRange ? TimeRangePanel : TimePanel;\n  }\n};\n"
  },
  {
    "path": "packages/date-picker/src/picker/time-select.js",
    "content": "import Picker from '../picker';\nimport Panel from '../panel/time-select';\n\nexport default {\n  mixins: [Picker],\n\n  name: 'ElTimeSelect',\n\n  componentName: 'ElTimeSelect',\n\n  props: {\n    type: {\n      type: String,\n      default: 'time-select'\n    }\n  },\n\n  beforeCreate() {\n    this.panel = Panel;\n  }\n};\n"
  },
  {
    "path": "packages/date-picker/src/picker.vue",
    "content": "<template>\n  <el-input\n    class=\"el-date-editor\"\n    :class=\"'el-date-editor--' + type\"\n    :readonly=\"!editable || readonly || type === 'dates' || type === 'week' || type === 'years' || type === 'months'\"\n    :disabled=\"pickerDisabled\"\n    :size=\"pickerSize\"\n    :name=\"name\"\n    v-bind=\"firstInputId\"\n    v-if=\"!ranged\"\n    v-clickoutside=\"handleClose\"\n    :placeholder=\"placeholder\"\n    @focus=\"handleFocus\"\n    @keydown.native=\"handleKeydown\"\n    :value=\"displayValue\"\n    @input=\"value => userInput = value\"\n    @change=\"handleChange\"\n    @mouseenter.native=\"handleMouseEnter\"\n    @mouseleave.native=\"showClose = false\"\n    :validateEvent=\"false\"\n    ref=\"reference\">\n    <i slot=\"prefix\"\n      class=\"el-input__icon\"\n      :class=\"triggerClass\"\n      @click=\"handleFocus\">\n    </i>\n    <i slot=\"suffix\"\n      class=\"el-input__icon\"\n      @click=\"handleClickIcon\"\n      :class=\"[showClose ? '' + clearIcon : '']\"\n      v-if=\"haveTrigger\">\n    </i>\n  </el-input>\n  <div\n    class=\"el-date-editor el-range-editor el-input__inner\"\n    :class=\"[\n      'el-date-editor--' + type,\n      pickerSize ? `el-range-editor--${ pickerSize }` : '',\n      pickerDisabled ? 'is-disabled' : '',\n      pickerVisible ? 'is-active' : ''\n    ]\"\n    @click=\"handleRangeClick\"\n    @mouseenter=\"handleMouseEnter\"\n    @mouseleave=\"showClose = false\"\n    @keydown=\"handleKeydown\"\n    ref=\"reference\"\n    v-clickoutside=\"handleClose\"\n    v-else>\n    <i :class=\"['el-input__icon', 'el-range__icon', triggerClass]\"></i>\n    <input\n      autocomplete=\"off\"\n      :placeholder=\"startPlaceholder\"\n      :value=\"displayValue && displayValue[0]\"\n      :disabled=\"pickerDisabled\"\n      v-bind=\"firstInputId\"\n      :readonly=\"!editable || readonly\"\n      :name=\"name && name[0]\"\n      @input=\"handleStartInput\"\n      @change=\"handleStartChange\"\n      @focus=\"handleFocus\"\n      class=\"el-range-input\">\n    <slot name=\"range-separator\">\n      <span class=\"el-range-separator\">{{ rangeSeparator }}</span>\n    </slot>\n    <input\n      autocomplete=\"off\"\n      :placeholder=\"endPlaceholder\"\n      :value=\"displayValue && displayValue[1]\"\n      :disabled=\"pickerDisabled\"\n      v-bind=\"secondInputId\"\n      :readonly=\"!editable || readonly\"\n      :name=\"name && name[1]\"\n      @input=\"handleEndInput\"\n      @change=\"handleEndChange\"\n      @focus=\"handleFocus\"\n      class=\"el-range-input\">\n    <i\n      @click=\"handleClickIcon\"\n      v-if=\"haveTrigger\"\n      :class=\"[showClose ? '' + clearIcon : '']\"\n      class=\"el-input__icon el-range__close-icon\">\n    </i>\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue';\nimport Clickoutside from 'element-ui/src/utils/clickoutside';\nimport { formatDate, parseDate, isDateObject, getWeekNumber } from 'element-ui/src/utils/date-util';\nimport Popper from 'element-ui/src/utils/vue-popper';\nimport Emitter from 'element-ui/src/mixins/emitter';\nimport ElInput from 'element-ui/packages/input';\nimport merge from 'element-ui/src/utils/merge';\n\nconst NewPopper = {\n  props: {\n    appendToBody: Popper.props.appendToBody,\n    offset: Popper.props.offset,\n    boundariesPadding: Popper.props.boundariesPadding,\n    arrowOffset: Popper.props.arrowOffset,\n    transformOrigin: Popper.props.transformOrigin\n  },\n  methods: Popper.methods,\n  data() {\n    return merge({ visibleArrow: true }, Popper.data);\n  },\n  beforeDestroy: Popper.beforeDestroy\n};\n\nconst DEFAULT_FORMATS = {\n  date: 'yyyy-MM-dd',\n  month: 'yyyy-MM',\n  months: 'yyyy-MM',\n  datetime: 'yyyy-MM-dd HH:mm:ss',\n  time: 'HH:mm:ss',\n  week: 'yyyywWW',\n  timerange: 'HH:mm:ss',\n  daterange: 'yyyy-MM-dd',\n  monthrange: 'yyyy-MM',\n  datetimerange: 'yyyy-MM-dd HH:mm:ss',\n  year: 'yyyy',\n  years: 'yyyy'\n};\nconst HAVE_TRIGGER_TYPES = [\n  'date',\n  'datetime',\n  'time',\n  'time-select',\n  'week',\n  'month',\n  'year',\n  'daterange',\n  'monthrange',\n  'timerange',\n  'datetimerange',\n  'dates',\n  'months',\n  'years'\n];\nconst DATE_FORMATTER = function(value, format) {\n  if (format === 'timestamp') return value.getTime();\n  return formatDate(value, format);\n};\nconst DATE_PARSER = function(text, format) {\n  if (format === 'timestamp') return new Date(Number(text));\n  return parseDate(text, format);\n};\nconst RANGE_FORMATTER = function(value, format) {\n  if (Array.isArray(value) && value.length === 2) {\n    const start = value[0];\n    const end = value[1];\n\n    if (start && end) {\n      return [DATE_FORMATTER(start, format), DATE_FORMATTER(end, format)];\n    }\n  }\n  return '';\n};\nconst RANGE_PARSER = function(array, format, separator) {\n  if (!Array.isArray(array)) {\n    array = array.split(separator);\n  }\n  if (array.length === 2) {\n    const range1 = array[0];\n    const range2 = array[1];\n\n    return [DATE_PARSER(range1, format), DATE_PARSER(range2, format)];\n  }\n  return [];\n};\nconst TYPE_VALUE_RESOLVER_MAP = {\n  default: {\n    formatter(value) {\n      if (!value) return '';\n      return '' + value;\n    },\n    parser(text) {\n      if (text === undefined || text === '') return null;\n      return text;\n    }\n  },\n  week: {\n    formatter(value, format) {\n      let week = getWeekNumber(value);\n      let month = value.getMonth();\n      const trueDate = new Date(value);\n      if (week === 1 && month === 11) {\n        trueDate.setHours(0, 0, 0, 0);\n        trueDate.setDate(trueDate.getDate() + 3 - (trueDate.getDay() + 6) % 7);\n      }\n      let date = formatDate(trueDate, format);\n\n      date = /WW/.test(date)\n        ? date.replace(/WW/, week < 10 ? '0' + week : week)\n        : date.replace(/W/, week);\n      return date;\n    },\n    parser(text, format) {\n      // parse as if a normal date\n      return TYPE_VALUE_RESOLVER_MAP.date.parser(text, format);\n    }\n  },\n  date: {\n    formatter: DATE_FORMATTER,\n    parser: DATE_PARSER\n  },\n  datetime: {\n    formatter: DATE_FORMATTER,\n    parser: DATE_PARSER\n  },\n  daterange: {\n    formatter: RANGE_FORMATTER,\n    parser: RANGE_PARSER\n  },\n  monthrange: {\n    formatter: RANGE_FORMATTER,\n    parser: RANGE_PARSER\n  },\n  datetimerange: {\n    formatter: RANGE_FORMATTER,\n    parser: RANGE_PARSER\n  },\n  timerange: {\n    formatter: RANGE_FORMATTER,\n    parser: RANGE_PARSER\n  },\n  time: {\n    formatter: DATE_FORMATTER,\n    parser: DATE_PARSER\n  },\n  month: {\n    formatter: DATE_FORMATTER,\n    parser: DATE_PARSER\n  },\n  year: {\n    formatter: DATE_FORMATTER,\n    parser: DATE_PARSER\n  },\n  number: {\n    formatter(value) {\n      if (!value) return '';\n      return '' + value;\n    },\n    parser(text) {\n      let result = Number(text);\n\n      if (!isNaN(text)) {\n        return result;\n      } else {\n        return null;\n      }\n    }\n  },\n  dates: {\n    formatter(value, format) {\n      return value.map(date => DATE_FORMATTER(date, format));\n    },\n    parser(value, format) {\n      return (typeof value === 'string' ? value.split(', ') : value)\n        .map(date => date instanceof Date ? date : DATE_PARSER(date, format));\n    }\n  },\n  months: {\n    formatter(value, format) {\n      return value.map(date => DATE_FORMATTER(date, format));\n    },\n    parser(value, format) {\n      return (typeof value === 'string' ? value.split(', ') : value)\n        .map(date => date instanceof Date ? date : DATE_PARSER(date, format));\n    }\n  },\n  years: {\n    formatter(value, format) {\n      return value.map(date => DATE_FORMATTER(date, format));\n    },\n    parser(value, format) {\n      return (typeof value === 'string' ? value.split(', ') : value)\n        .map(date => date instanceof Date ? date : DATE_PARSER(date, format));\n    }\n  }\n};\nconst PLACEMENT_MAP = {\n  left: 'bottom-start',\n  center: 'bottom',\n  right: 'bottom-end'\n};\n\nconst parseAsFormatAndType = (value, customFormat, type, rangeSeparator = '-') => {\n  if (!value) return null;\n  const parser = (\n    TYPE_VALUE_RESOLVER_MAP[type] ||\n    TYPE_VALUE_RESOLVER_MAP['default']\n  ).parser;\n  const format = customFormat || DEFAULT_FORMATS[type];\n  return parser(value, format, rangeSeparator);\n};\n\nconst formatAsFormatAndType = (value, customFormat, type) => {\n  if (!value) return null;\n  const formatter = (\n    TYPE_VALUE_RESOLVER_MAP[type] ||\n    TYPE_VALUE_RESOLVER_MAP['default']\n  ).formatter;\n  const format = customFormat || DEFAULT_FORMATS[type];\n  return formatter(value, format);\n};\n\n/*\n * Considers:\n *   1. Date object\n *   2. date string\n *   3. array of 1 or 2\n */\nconst valueEquals = function(a, b) {\n  // considers Date object and string\n  const dateEquals = function(a, b) {\n    const aIsDate = a instanceof Date;\n    const bIsDate = b instanceof Date;\n    if (aIsDate && bIsDate) {\n      return a.getTime() === b.getTime();\n    }\n    if (!aIsDate && !bIsDate) {\n      return a === b;\n    }\n    return false;\n  };\n\n  const aIsArray = a instanceof Array;\n  const bIsArray = b instanceof Array;\n  if (aIsArray && bIsArray) {\n    if (a.length !== b.length) {\n      return false;\n    }\n    return a.every((item, index) => dateEquals(item, b[index]));\n  }\n  if (!aIsArray && !bIsArray) {\n    return dateEquals(a, b);\n  }\n  return false;\n};\n\nconst isString = function(val) {\n  return typeof val === 'string' || val instanceof String;\n};\n\nconst validator = function(val) {\n  // either: String, Array of String, null / undefined\n  return (\n    val === null ||\n    val === undefined ||\n    isString(val) ||\n    (Array.isArray(val) && val.length === 2 && val.every(isString))\n  );\n};\n\nexport default {\n  mixins: [Emitter, NewPopper],\n\n  inject: {\n    elForm: {\n      default: ''\n    },\n    elFormItem: {\n      default: ''\n    }\n  },\n\n  props: {\n    size: String,\n    format: String,\n    valueFormat: String,\n    readonly: Boolean,\n    placeholder: String,\n    startPlaceholder: String,\n    endPlaceholder: String,\n    prefixIcon: String,\n    clearIcon: {\n      type: String,\n      default: 'el-icon-circle-close'\n    },\n    name: {\n      default: '',\n      validator\n    },\n    disabled: Boolean,\n    clearable: {\n      type: Boolean,\n      default: true\n    },\n    id: {\n      default: '',\n      validator\n    },\n    popperClass: String,\n    editable: {\n      type: Boolean,\n      default: true\n    },\n    align: {\n      type: String,\n      default: 'left'\n    },\n    value: {},\n    defaultValue: {},\n    defaultTime: {},\n    rangeSeparator: {\n      default: '-'\n    },\n    pickerOptions: {},\n    unlinkPanels: Boolean,\n    validateEvent: {\n      type: Boolean,\n      default: true\n    }\n  },\n\n  components: { ElInput },\n\n  directives: { Clickoutside },\n\n  data() {\n    return {\n      pickerVisible: false,\n      showClose: false,\n      userInput: null,\n      valueOnOpen: null, // value when picker opens, used to determine whether to emit change\n      unwatchPickerOptions: null\n    };\n  },\n\n  watch: {\n    pickerVisible(val) {\n      if (this.readonly || this.pickerDisabled) return;\n      if (val) {\n        this.showPicker();\n        this.valueOnOpen = Array.isArray(this.value) ? [...this.value] : this.value;\n      } else {\n        this.hidePicker();\n        this.emitChange(this.value);\n        this.userInput = null;\n        if (this.validateEvent) {\n          this.dispatch('ElFormItem', 'el.form.blur');\n        }\n        this.$emit('blur', this);\n        this.blur();\n      }\n    },\n    parsedValue: {\n      immediate: true,\n      handler(val) {\n        if (this.picker) {\n          this.picker.value = val;\n        }\n      }\n    },\n    defaultValue(val) {\n      // NOTE: should eventually move to jsx style picker + panel ?\n      if (this.picker) {\n        this.picker.defaultValue = val;\n      }\n    },\n    value(val, oldVal) {\n      if (!valueEquals(val, oldVal) && !this.pickerVisible && this.validateEvent) {\n        this.dispatch('ElFormItem', 'el.form.change', val);\n      }\n    }\n  },\n\n  computed: {\n    ranged() {\n      return this.type.indexOf('range') > -1;\n    },\n\n    reference() {\n      const reference = this.$refs.reference;\n      return reference.$el || reference;\n    },\n\n    refInput() {\n      if (this.reference) {\n        return [].slice.call(this.reference.querySelectorAll('input'));\n      }\n      return [];\n    },\n\n    valueIsEmpty() {\n      const val = this.value;\n      if (Array.isArray(val)) {\n        for (let i = 0, len = val.length; i < len; i++) {\n          if (val[i]) {\n            return false;\n          }\n        }\n      } else {\n        if (val) {\n          return false;\n        }\n      }\n      return true;\n    },\n\n    triggerClass() {\n      return this.prefixIcon || (this.type.indexOf('time') !== -1 ? 'el-icon-time' : 'el-icon-date');\n    },\n\n    selectionMode() {\n      if (this.type === 'week') {\n        return 'week';\n      } else if (this.type === 'month') {\n        return 'month';\n      } else if (this.type === 'year') {\n        return 'year';\n      } else if (this.type === 'dates') {\n        return 'dates';\n      } else if (this.type === 'months') {\n        return 'months';\n      } else if (this.type === 'years') {\n        return 'years';\n      }\n\n      return 'day';\n    },\n\n    haveTrigger() {\n      if (typeof this.showTrigger !== 'undefined') {\n        return this.showTrigger;\n      }\n      return HAVE_TRIGGER_TYPES.indexOf(this.type) !== -1;\n    },\n\n    displayValue() {\n      const formattedValue = formatAsFormatAndType(this.parsedValue, this.format, this.type, this.rangeSeparator);\n      if (Array.isArray(this.userInput)) {\n        return [\n          this.userInput[0] || (formattedValue && formattedValue[0]) || '',\n          this.userInput[1] || (formattedValue && formattedValue[1]) || ''\n        ];\n      } else if (this.userInput !== null) {\n        return this.userInput;\n      } else if (formattedValue) {\n        return (this.type === 'dates' || this.type === 'years' || this.type === 'months')\n          ? formattedValue.join(', ')\n          : formattedValue;\n      } else {\n        return '';\n      }\n    },\n\n    parsedValue() {\n      if (!this.value) return this.value; // component value is not set\n      if (this.type === 'time-select') return this.value; // time-select does not require parsing, this might change in next major version\n\n      const valueIsDateObject = isDateObject(this.value) || (Array.isArray(this.value) && this.value.every(isDateObject));\n      if (valueIsDateObject) {\n        return this.value;\n      }\n\n      if (this.valueFormat) {\n        return parseAsFormatAndType(this.value, this.valueFormat, this.type, this.rangeSeparator) || this.value;\n      }\n\n      // NOTE: deal with common but incorrect usage, should remove in next major version\n      // user might provide string / timestamp without value-format, coerce them into date (or array of date)\n      return Array.isArray(this.value) ? this.value.map(val => new Date(val)) : new Date(this.value);\n    },\n\n    _elFormItemSize() {\n      return (this.elFormItem || {}).elFormItemSize;\n    },\n\n    pickerSize() {\n      return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;\n    },\n\n    pickerDisabled() {\n      return this.disabled || (this.elForm || {}).disabled;\n    },\n\n    firstInputId() {\n      const obj = {};\n      let id;\n      if (this.ranged) {\n        id = this.id && this.id[0];\n      } else {\n        id = this.id;\n      }\n      if (id) obj.id = id;\n      return obj;\n    },\n\n    secondInputId() {\n      const obj = {};\n      let id;\n      if (this.ranged) {\n        id = this.id && this.id[1];\n      }\n      if (id) obj.id = id;\n      return obj;\n    }\n  },\n\n  created() {\n    // vue-popper\n    this.popperOptions = {\n      boundariesPadding: 0,\n      gpuAcceleration: false\n    };\n    this.placement = PLACEMENT_MAP[this.align] || PLACEMENT_MAP.left;\n\n    this.$on('fieldReset', this.handleFieldReset);\n  },\n\n  methods: {\n    focus() {\n      if (!this.ranged) {\n        this.$refs.reference.focus();\n      } else {\n        this.handleFocus();\n      }\n    },\n\n    blur() {\n      this.refInput.forEach(input => input.blur());\n    },\n\n    // {parse, formatTo} Value deals maps component value with internal Date\n    parseValue(value) {\n      const isParsed = isDateObject(value) || (Array.isArray(value) && value.every(isDateObject));\n      if (this.valueFormat && !isParsed) {\n        return parseAsFormatAndType(value, this.valueFormat, this.type, this.rangeSeparator) || value;\n      } else {\n        return value;\n      }\n    },\n\n    formatToValue(date) {\n      const isFormattable = isDateObject(date) || (Array.isArray(date) && date.every(isDateObject));\n      if (this.valueFormat && isFormattable) {\n        return formatAsFormatAndType(date, this.valueFormat, this.type, this.rangeSeparator);\n      } else {\n        return date;\n      }\n    },\n\n    // {parse, formatTo} String deals with user input\n    parseString(value) {\n      const type = Array.isArray(value) ? this.type : this.type.replace('range', '');\n      return parseAsFormatAndType(value, this.format, type);\n    },\n\n    formatToString(value) {\n      const type = Array.isArray(value) ? this.type : this.type.replace('range', '');\n      return formatAsFormatAndType(value, this.format, type);\n    },\n\n    handleMouseEnter() {\n      if (this.readonly || this.pickerDisabled) return;\n      if (!this.valueIsEmpty && this.clearable) {\n        this.showClose = true;\n      }\n    },\n\n    handleChange() {\n      if (this.userInput) {\n        const value = this.parseString(this.displayValue);\n        if (value) {\n          this.picker.value = value;\n          if (this.isValidValue(value)) {\n            this.emitInput(value);\n            this.userInput = null;\n          }\n        }\n      }\n      if (this.userInput === '') {\n        this.emitInput(null);\n        this.emitChange(null);\n        this.userInput = null;\n      }\n    },\n\n    handleStartInput(event) {\n      if (this.userInput) {\n        this.userInput = [event.target.value, this.userInput[1]];\n      } else {\n        this.userInput = [event.target.value, null];\n      }\n    },\n\n    handleEndInput(event) {\n      if (this.userInput) {\n        this.userInput = [this.userInput[0], event.target.value];\n      } else {\n        this.userInput = [null, event.target.value];\n      }\n    },\n\n    handleStartChange(event) {\n      const value = this.parseString(this.userInput && this.userInput[0]);\n      if (value) {\n        this.userInput = [this.formatToString(value), this.displayValue[1]];\n        const newValue = [value, this.picker.value && this.picker.value[1]];\n        this.picker.value = newValue;\n        if (this.isValidValue(newValue)) {\n          this.emitInput(newValue);\n          this.userInput = null;\n        }\n      }\n    },\n\n    handleEndChange(event) {\n      const value = this.parseString(this.userInput && this.userInput[1]);\n      if (value) {\n        this.userInput = [this.displayValue[0], this.formatToString(value)];\n        const newValue = [this.picker.value && this.picker.value[0], value];\n        this.picker.value = newValue;\n        if (this.isValidValue(newValue)) {\n          this.emitInput(newValue);\n          this.userInput = null;\n        }\n      }\n    },\n\n    handleClickIcon(event) {\n      if (this.readonly || this.pickerDisabled) return;\n      if (this.showClose) {\n        this.valueOnOpen = this.value;\n        event.stopPropagation();\n        this.emitInput(null);\n        this.emitChange(null);\n        this.showClose = false;\n        if (this.picker && typeof this.picker.handleClear === 'function') {\n          this.picker.handleClear();\n        }\n      } else {\n        this.pickerVisible = !this.pickerVisible;\n      }\n    },\n\n    handleClose() {\n      if (!this.pickerVisible) return;\n      this.pickerVisible = false;\n\n      if (this.type === 'dates' || this.type === 'years' || this.type === 'months') {\n        // restore to former value\n        const oldValue = parseAsFormatAndType(this.valueOnOpen, this.valueFormat, this.type, this.rangeSeparator) || this.valueOnOpen;\n        this.emitInput(oldValue);\n      }\n    },\n\n    handleFieldReset(initialValue) {\n      this.userInput = initialValue === '' ? null : initialValue;\n    },\n\n    handleFocus() {\n      const type = this.type;\n\n      if (HAVE_TRIGGER_TYPES.indexOf(type) !== -1 && !this.pickerVisible) {\n        this.pickerVisible = true;\n      }\n      this.$emit('focus', this);\n    },\n\n    handleKeydown(event) {\n      const keyCode = event.keyCode;\n\n      // ESC\n      if (keyCode === 27) {\n        this.pickerVisible = false;\n        event.stopPropagation();\n        return;\n      }\n\n      // Tab\n      if (keyCode === 9) {\n        if (!this.ranged) {\n          this.handleChange();\n          this.pickerVisible = this.picker.visible = false;\n          this.blur();\n          event.stopPropagation();\n        } else {\n          // user may change focus between two input\n          setTimeout(() => {\n            if (this.refInput.indexOf(document.activeElement) === -1) {\n              this.pickerVisible = false;\n              this.blur();\n              event.stopPropagation();\n            }\n          }, 0);\n        }\n        return;\n      }\n\n      // Enter\n      if (keyCode === 13) {\n        if (this.userInput === '' || this.isValidValue(this.parseString(this.displayValue))) {\n          this.handleChange();\n          this.pickerVisible = this.picker.visible = false;\n          this.blur();\n        }\n        event.stopPropagation();\n        return;\n      }\n\n      // if user is typing, do not let picker handle key input\n      if (this.userInput) {\n        event.stopPropagation();\n        return;\n      }\n\n      // delegate other keys to panel\n      if (this.picker && this.picker.handleKeydown) {\n        this.picker.handleKeydown(event);\n      }\n    },\n\n    handleRangeClick() {\n      const type = this.type;\n\n      if (HAVE_TRIGGER_TYPES.indexOf(type) !== -1 && !this.pickerVisible) {\n        this.pickerVisible = true;\n      }\n      this.$emit('focus', this);\n    },\n\n    hidePicker() {\n      if (this.picker) {\n        this.picker.resetView && this.picker.resetView();\n        this.pickerVisible = this.picker.visible = false;\n        this.destroyPopper();\n      }\n    },\n\n    showPicker() {\n      if (this.$isServer) return;\n      if (!this.picker) {\n        this.mountPicker();\n      }\n      this.pickerVisible = this.picker.visible = true;\n\n      this.updatePopper();\n\n      this.picker.value = this.parsedValue;\n      this.picker.resetView && this.picker.resetView();\n\n      this.$nextTick(() => {\n        this.picker.adjustSpinners && this.picker.adjustSpinners();\n      });\n    },\n\n    mountPicker() {\n      this.picker = new Vue(this.panel).$mount();\n      this.picker.defaultValue = this.defaultValue;\n      this.picker.defaultTime = this.defaultTime;\n      this.picker.popperClass = this.popperClass;\n      this.popperElm = this.picker.$el;\n      this.picker.width = this.reference.getBoundingClientRect().width;\n      this.picker.showTime = this.type === 'datetime' || this.type === 'datetimerange';\n      this.picker.selectionMode = this.selectionMode;\n      this.picker.unlinkPanels = this.unlinkPanels;\n      this.picker.arrowControl = this.arrowControl || this.timeArrowControl || false;\n      this.$watch('format', (format) => {\n        this.picker.format = format;\n      });\n\n      const updateOptions = () => {\n        const options = this.pickerOptions;\n\n        if (options && options.selectableRange) {\n          let ranges = options.selectableRange;\n          const parser = TYPE_VALUE_RESOLVER_MAP.datetimerange.parser;\n          const format = DEFAULT_FORMATS.timerange;\n\n          ranges = Array.isArray(ranges) ? ranges : [ranges];\n          this.picker.selectableRange = ranges.map(range => parser(range, format, this.rangeSeparator));\n        }\n\n        for (const option in options) {\n          if (options.hasOwnProperty(option) &&\n              // 忽略 time-picker 的该配置项\n              option !== 'selectableRange') {\n            this.picker[option] = options[option];\n          }\n        }\n\n        // main format must prevail over undocumented pickerOptions.format\n        if (this.format) {\n          this.picker.format = this.format;\n        }\n      };\n      updateOptions();\n      this.unwatchPickerOptions = this.$watch('pickerOptions', () => updateOptions(), { deep: true });\n      this.$el.appendChild(this.picker.$el);\n      this.picker.resetView && this.picker.resetView();\n\n      this.picker.$on('dodestroy', this.doDestroy);\n      this.picker.$on('pick', (date = '', visible = false) => {\n        this.userInput = null;\n        this.pickerVisible = this.picker.visible = visible;\n        this.emitInput(date);\n        this.picker.resetView && this.picker.resetView();\n      });\n\n      this.picker.$on('select-range', (start, end, pos) => {\n        if (this.refInput.length === 0) return;\n        if (!pos || pos === 'min') {\n          this.refInput[0].setSelectionRange(start, end);\n          this.refInput[0].focus();\n        } else if (pos === 'max') {\n          this.refInput[1].setSelectionRange(start, end);\n          this.refInput[1].focus();\n        }\n      });\n    },\n\n    unmountPicker() {\n      if (this.picker) {\n        this.picker.$destroy();\n        this.picker.$off();\n        if (typeof this.unwatchPickerOptions === 'function') {\n          this.unwatchPickerOptions();\n        }\n        this.picker.$el.parentNode.removeChild(this.picker.$el);\n      }\n    },\n\n    emitChange(val) {\n      // determine user real change only\n      if (!valueEquals(val, this.valueOnOpen)) {\n        this.$emit('change', val);\n        this.valueOnOpen = val;\n        if (this.validateEvent) {\n          this.dispatch('ElFormItem', 'el.form.change', val);\n        }\n      }\n    },\n\n    emitInput(val) {\n      const formatted = this.formatToValue(val);\n      if (!valueEquals(this.value, formatted)) {\n        this.$emit('input', formatted);\n      }\n    },\n\n    isValidValue(value) {\n      if (!this.picker) {\n        this.mountPicker();\n      }\n      if (this.picker.isValidValue) {\n        return value && this.picker.isValidValue(value);\n      } else {\n        return true;\n      }\n    }\n  }\n};\n</script>\n"
  },
  {
    "path": "packages/descriptions/index.js",
    "content": "import Descriptions from './src/index';\n\n/* istanbul ignore next */\nDescriptions.install = function install(Vue) {\n  Vue.component(Descriptions.name, Descriptions);\n};\n\nexport default Descriptions;\n"
  },
  {
    "path": "packages/descriptions/src/descriptions-item.js",
    "content": "export default {\n  name: 'ElDescriptionsItem',\n  props: {\n    label: {\n      type: String,\n      default: ''\n    },\n    span: {\n      type: Number,\n      default: 1\n    },\n    contentClassName: {\n      type: String,\n      default: ''\n    },\n    contentStyle: {\n      type: Object\n    },\n    labelClassName: {\n      type: String,\n      default: ''\n    },\n    labelStyle: {\n      type: Object\n    }\n  },\n  render() {\n    return null;\n  }\n};\n"
  },
  {
    "path": "packages/descriptions/src/descriptions-row.js",
    "content": "export default {\n  name: 'ElDescriptionsRow',\n  props: {\n    row: {\n      type: Array\n    }\n  },\n  inject: ['elDescriptions'],\n  render(h) {\n    const { elDescriptions } = this;\n    const row = (this.row || []).map(item => {\n      return {\n        ...item,\n        label: item.slots.label || item.props.label,\n        ...['labelClassName', 'contentClassName', 'labelStyle', 'contentStyle'].reduce((res, key) => {\n          res[key] = item.props[key] || elDescriptions[key];\n          return res;\n        }, {})\n      };\n    });\n    if (elDescriptions.direction === 'vertical') {\n      return (\n        <tbody>\n          <tr class=\"el-descriptions-row\">\n            {\n              row.map(item => {\n                return (\n                  <th\n                    class={{\n                      'el-descriptions-item__cell': true,\n                      'el-descriptions-item__label': true,\n                      'has-colon': elDescriptions.border ? false : elDescriptions.colon,\n                      'is-bordered-label': elDescriptions.border,\n                      [item.labelClassName]: true\n                    }}\n                    style={item.labelStyle}\n                    colSpan={item.props.span}\n                  >{item.label}</th>\n                );\n              })\n            }\n          </tr>\n          <tr class=\"el-descriptions-row\">\n            {\n              row.map(item =>{\n                return (\n                  <td\n                    class={['el-descriptions-item__cell', 'el-descriptions-item__content', item.contentClassName]}\n                    style={item.contentStyle}\n                    colSpan={item.props.span}\n                  >{item.slots.default}</td>\n                );\n              })\n            }\n          </tr>\n        </tbody>\n      );\n    }\n    if (elDescriptions.border) {\n      return (\n        <tbody>\n          <tr class=\"el-descriptions-row\">\n            {\n              row.map(item=> {\n                return ([\n                  <th\n                    class={{\n                      'el-descriptions-item__cell': true,\n                      'el-descriptions-item__label': true,\n                      'is-bordered-label': elDescriptions.border,\n                      [item.labelClassName]: true\n                    }}\n                    style={item.labelStyle}\n                    colSpan=\"1\"\n                  >{item.label}</th>,\n                  <td\n                    class={['el-descriptions-item__cell', 'el-descriptions-item__content', item.contentClassName]}\n                    style={item.contentStyle}\n                    colSpan={item.props.span * 2 - 1}\n                  >{item.slots.default}</td>\n                ]);\n              })\n            }\n          </tr>\n        </tbody>\n      );\n    }\n    return (\n      <tbody>\n        <tr class=\"el-descriptions-row\">\n          {\n            row.map(item=> {\n              return (\n                <td class=\"el-descriptions-item el-descriptions-item__cell\" colSpan={item.props.span}>\n                  <div class=\"el-descriptions-item__container\">\n                    <span\n                      class={{\n                        'el-descriptions-item__label': true,\n                        'has-colon': elDescriptions.colon,\n                        [item.labelClassName]: true\n                      }}\n                      style={item.labelStyle}\n                    >{item.label}</span>\n                    <span\n                      class={['el-descriptions-item__content', item.contentClassName]}\n                      style={item.contentStyle}\n                    >{item.slots.default}</span>\n                  </div>\n                </td>);\n            })\n          }\n        </tr>\n      </tbody>\n    );\n  }\n};\n"
  },
  {
    "path": "packages/descriptions/src/index.js",
    "content": "import DescriptionsRow from './descriptions-row';\nimport { isFunction } from 'element-ui/src/utils/types';\n\nexport default {\n  name: 'ElDescriptions',\n  components: {\n    [DescriptionsRow.name]: DescriptionsRow\n  },\n  props: {\n    border: {\n      type: Boolean,\n      default: false\n    },\n    column: {\n      type: Number,\n      default: 3\n    },\n    direction: {\n      type: String,\n      default: 'horizontal'\n    },\n    size: {\n      type: String\n      // validator: isValidComponentSize,\n    },\n    title: {\n      type: String,\n      default: ''\n    },\n    extra: {\n      type: String,\n      default: ''\n    },\n    labelStyle: {\n      type: Object\n    },\n    contentStyle: {\n      type: Object\n    },\n    labelClassName: {\n      type: String,\n      default: ''\n    },\n    contentClassName: {\n      type: String,\n      default: ''\n    },\n    colon: {\n      type: Boolean,\n      default: true\n    }\n  },\n  computed: {\n    descriptionsSize() {\n      return this.size || (this.$ELEMENT || {}).size;\n    }\n  },\n  provide() {\n    return {\n      elDescriptions: this\n    };\n  },\n  methods: {\n    getOptionProps(vnode) {\n      if (vnode.componentOptions) {\n        const componentOptions = vnode.componentOptions;\n        const { propsData = {}, Ctor = {} } = componentOptions;\n        const props = (Ctor.options || {}).props || {};\n        const res = {};\n        for (const k in props) {\n          const v = props[k];\n          const defaultValue = v.default;\n          if (defaultValue !== undefined) {\n            res[k] = isFunction(defaultValue) ? defaultValue.call(vnode) : defaultValue;\n          }\n        }\n        return { ...res, ...propsData };\n      }\n      return {};\n    },\n    getSlots(vnode) {\n      let componentOptions = vnode.componentOptions || {};\n      const children = vnode.children || componentOptions.children || [];\n      const slots = {};\n      children.forEach(child => {\n        if (!this.isEmptyElement(child)) {\n          const name = (child.data && child.data.slot) || 'default';\n          slots[name] = slots[name] || [];\n          if (child.tag === 'template') {\n            slots[name].push(child.children);\n          } else {\n            slots[name].push(child);\n          }\n        }\n      });\n      return { ...slots };\n    },\n    isEmptyElement(c) {\n      return !(c.tag || (c.text && c.text.trim() !== ''));\n    },\n    filledNode(node, span, count, isLast = false) {\n      if (!node.props) {\n        node.props = {};\n      }\n      if (span > count) {\n        node.props.span = count;\n      }\n      if (isLast) {\n        // set the max span, cause of the last td\n        node.props.span = count;\n      }\n      return node;\n    },\n    getRows() {\n      const children = ((this.$slots.default || []).filter(vnode => vnode.tag &&\n            vnode.componentOptions && vnode.componentOptions.Ctor.options.name === 'ElDescriptionsItem'));\n      const nodes = children.map(vnode => {\n        return {\n          props: this.getOptionProps(vnode),\n          slots: this.getSlots(vnode),\n          vnode\n        };\n      });\n      const rows = [];\n      let temp = [];\n      let count = this.column;\n\n      nodes.forEach((node, index) => {\n        const span = node.props.span || 1;\n\n        if (index === children.length - 1) {\n          temp.push(this.filledNode(node, span, count, true));\n          rows.push(temp);\n          return;\n        }\n\n        if (span < count) {\n          count -= span;\n          temp.push(node);\n        } else {\n          temp.push(this.filledNode(node, span, count));\n          rows.push(temp);\n          count = this.column;\n          temp = [];\n        }\n      });\n\n      return rows;\n    }\n  },\n  render() {\n    const { title, extra, border, descriptionsSize, $slots } = this;\n    const rows = this.getRows();\n\n    return (\n      <div class=\"el-descriptions\">\n        {\n          (title || extra || $slots.title || $slots.extra)\n            ? <div class=\"el-descriptions__header\">\n              <div class=\"el-descriptions__title\">\n                { $slots.title ? $slots.title : title}\n              </div>\n              <div class=\"el-descriptions__extra\">\n                { $slots.extra ? $slots.extra : extra }\n              </div>\n            </div>\n            : null\n        }\n\n        <div class=\"el-descriptions__body\">\n          <table class={['el-descriptions__table', {'is-bordered': border}, descriptionsSize ? `el-descriptions--${descriptionsSize}` : '']}>\n            {rows.map(row => (\n              <DescriptionsRow row={row}></DescriptionsRow>\n            ))}\n          </table>\n        </div>\n      </div>\n    );\n  }\n};\n"
  },
  {
    "path": "packages/descriptions-item/index.js",
    "content": "import DescriptionsItem from '../descriptions/src/descriptions-item';\n\n/* istanbul ignore next */\nDescriptionsItem.install = function install(Vue) {\n  Vue.component(DescriptionsItem.name, DescriptionsItem);\n};\n\nexport default DescriptionsItem;\n"
  },
  {
    "path": "packages/dialog/index.js",
    "content": "import ElDialog from './src/component';\n\n/* istanbul ignore next */\nElDialog.install = function(Vue) {\n  Vue.component(ElDialog.name, ElDialog);\n};\n\nexport default ElDialog;\n"
  },
  {
    "path": "packages/dialog/src/component.vue",
    "content": "<template>\n  <transition\n    name=\"dialog-fade\"\n    @after-enter=\"afterEnter\"\n    @after-leave=\"afterLeave\">\n    <div\n      v-show=\"visible\"\n      class=\"el-dialog__wrapper\"\n      @click.self=\"handleWrapperClick\">\n      <div\n        role=\"dialog\"\n        :key=\"key\"\n        aria-modal=\"true\"\n        :aria-label=\"title || 'dialog'\"\n        :class=\"['el-dialog', { 'is-fullscreen': fullscreen, 'el-dialog--center': center }, customClass]\"\n        ref=\"dialog\"\n        :style=\"style\">\n        <div class=\"el-dialog__header\">\n          <slot name=\"title\">\n            <span class=\"el-dialog__title\">{{ title }}</span>\n          </slot>\n          <button\n            type=\"button\"\n            class=\"el-dialog__headerbtn\"\n            aria-label=\"Close\"\n            v-if=\"showClose\"\n            @click=\"handleClose\">\n            <i class=\"el-dialog__close el-icon el-icon-close\"></i>\n          </button>\n        </div>\n        <div class=\"el-dialog__body\" v-if=\"rendered\"><slot></slot></div>\n        <div class=\"el-dialog__footer\" v-if=\"$slots.footer\">\n          <slot name=\"footer\"></slot>\n        </div>\n      </div>\n    </div>\n  </transition>\n</template>\n\n<script>\n  import Popup from 'element-ui/src/utils/popup';\n  import Migrating from 'element-ui/src/mixins/migrating';\n  import emitter from 'element-ui/src/mixins/emitter';\n\n  export default {\n    name: 'ElDialog',\n\n    mixins: [Popup, emitter, Migrating],\n\n    props: {\n      title: {\n        type: String,\n        default: ''\n      },\n\n      modal: {\n        type: Boolean,\n        default: true\n      },\n\n      modalAppendToBody: {\n        type: Boolean,\n        default: true\n      },\n\n      appendToBody: {\n        type: Boolean,\n        default: false\n      },\n\n      lockScroll: {\n        type: Boolean,\n        default: true\n      },\n\n      closeOnClickModal: {\n        type: Boolean,\n        default: true\n      },\n\n      closeOnPressEscape: {\n        type: Boolean,\n        default: true\n      },\n\n      showClose: {\n        type: Boolean,\n        default: true\n      },\n\n      width: String,\n\n      fullscreen: Boolean,\n\n      customClass: {\n        type: String,\n        default: ''\n      },\n\n      top: {\n        type: String,\n        default: '15vh'\n      },\n      beforeClose: Function,\n      center: {\n        type: Boolean,\n        default: false\n      },\n\n      destroyOnClose: Boolean\n    },\n\n    data() {\n      return {\n        closed: false,\n        key: 0\n      };\n    },\n\n    watch: {\n      visible(val) {\n        if (val) {\n          this.closed = false;\n          this.$emit('open');\n          this.$el.addEventListener('scroll', this.updatePopper);\n          this.$nextTick(() => {\n            this.$refs.dialog.scrollTop = 0;\n          });\n          if (this.appendToBody) {\n            document.body.appendChild(this.$el);\n          }\n        } else {\n          this.$el.removeEventListener('scroll', this.updatePopper);\n          if (!this.closed) this.$emit('close');\n          if (this.destroyOnClose) {\n            this.$nextTick(() => {\n              this.key++;\n            });\n          }\n        }\n      }\n    },\n\n    computed: {\n      style() {\n        let style = {};\n        if (!this.fullscreen) {\n          style.marginTop = this.top;\n          if (this.width) {\n            style.width = this.width;\n          }\n        }\n        return style;\n      }\n    },\n\n    methods: {\n      getMigratingConfig() {\n        return {\n          props: {\n            'size': 'size is removed.'\n          }\n        };\n      },\n      handleWrapperClick() {\n        if (!this.closeOnClickModal) return;\n        this.handleClose();\n      },\n      handleClose() {\n        if (typeof this.beforeClose === 'function') {\n          this.beforeClose(this.hide);\n        } else {\n          this.hide();\n        }\n      },\n      hide(cancel) {\n        if (cancel !== false) {\n          this.$emit('update:visible', false);\n          this.$emit('close');\n          this.closed = true;\n        }\n      },\n      updatePopper() {\n        this.broadcast('ElSelectDropdown', 'updatePopper');\n        this.broadcast('ElDropdownMenu', 'updatePopper');\n      },\n      afterEnter() {\n        this.$emit('opened');\n      },\n      afterLeave() {\n        this.$emit('closed');\n      }\n    },\n\n    mounted() {\n      if (this.visible) {\n        this.rendered = true;\n        this.open();\n        if (this.appendToBody) {\n          document.body.appendChild(this.$el);\n        }\n      }\n    },\n\n    destroyed() {\n      // if appendToBody is true, remove DOM node after destroy\n      if (this.appendToBody && this.$el && this.$el.parentNode) {\n        this.$el.parentNode.removeChild(this.$el);\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/divider/index.js",
    "content": "import Divider from './src/main';\n\n/* istanbul ignore next */\nDivider.install = function(Vue) {\n  Vue.component(Divider.name, Divider);\n};\n\nexport default Divider;\n"
  },
  {
    "path": "packages/divider/src/main.vue",
    "content": "<template functional>\n  <div\n    v-bind=\"data.attrs\"\n    v-on=\"listeners\"\n    :class=\"[data.staticClass, 'el-divider', `el-divider--${props.direction}`]\"\n  >\n    <div\n      v-if=\"slots().default && props.direction !== 'vertical'\"\n      :class=\"['el-divider__text', `is-${props.contentPosition}`]\"\n     >\n      <slot />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'ElDivider',\n  props: {\n    direction: {\n      type: String,\n      default: 'horizontal',\n      validator(val) {\n        return ['horizontal', 'vertical'].indexOf(val) !== -1;\n      }\n    },\n    contentPosition: {\n      type: String,\n      default: 'center',\n      validator(val) {\n        return ['left', 'center', 'right'].indexOf(val) !== -1;\n      }\n    }\n  }\n};\n\n</script>\n"
  },
  {
    "path": "packages/drawer/index.js",
    "content": "import Drawer from './src/main';\n\n/* istanbul ignore next */\nDrawer.install = function(Vue) {\n  Vue.component(Drawer.name, Drawer);\n};\n\nexport default Drawer;\n"
  },
  {
    "path": "packages/drawer/src/main.vue",
    "content": "<template>\n  <transition\n    name=\"el-drawer-fade\"\n    @after-enter=\"afterEnter\"\n    @after-leave=\"afterLeave\">\n    <div\n      class=\"el-drawer__wrapper\"\n      tabindex=\"-1\"\n      v-show=\"visible\">\n      <div\n        class=\"el-drawer__container\"\n        :class=\"visible && 'el-drawer__open'\"\n        @click.self=\"handleWrapperClick\"\n        role=\"document\"\n        tabindex=\"-1\">\n        <div\n          aria-modal=\"true\"\n          aria-labelledby=\"el-drawer__title\"\n          :aria-label=\"title\"\n          class=\"el-drawer\"\n          :class=\"[direction, customClass]\"\n          :style=\"isHorizontal ? `width: ${drawerSize}` : `height: ${drawerSize}`\"\n          ref=\"drawer\"\n          role=\"dialog\"\n          tabindex=\"-1\"\n          >\n          <header class=\"el-drawer__header\" id=\"el-drawer__title\" v-if=\"withHeader\">\n            <slot name=\"title\">\n              <span role=\"heading\" :title=\"title\">{{ title }}</span>\n            </slot>\n            <button\n              :aria-label=\"`close ${title || 'drawer'}`\"\n              class=\"el-drawer__close-btn\"\n              type=\"button\"\n              v-if=\"showClose\"\n              @click=\"closeDrawer\">\n              <i class=\"el-dialog__close el-icon el-icon-close\"></i>\n            </button>\n          </header>\n          <section class=\"el-drawer__body\" v-if=\"rendered\">\n            <slot></slot>\n          </section>\n        </div>\n      </div>\n    </div>\n  </transition>\n</template>\n\n<script>\nimport Popup from 'element-ui/src/utils/popup';\nimport emitter from 'element-ui/src/mixins/emitter';\n\nexport default {\n  name: 'ElDrawer',\n  mixins: [Popup, emitter],\n  props: {\n    appendToBody: {\n      type: Boolean,\n      default: false\n    },\n    beforeClose: {\n      type: Function\n    },\n    customClass: {\n      type: String,\n      default: ''\n    },\n    closeOnPressEscape: {\n      type: Boolean,\n      default: true\n    },\n    destroyOnClose: {\n      type: Boolean,\n      default: false\n    },\n    modal: {\n      type: Boolean,\n      default: true\n    },\n    direction: {\n      type: String,\n      default: 'rtl',\n      validator(val) {\n        return ['ltr', 'rtl', 'ttb', 'btt'].indexOf(val) !== -1;\n      }\n    },\n    modalAppendToBody: {\n      type: Boolean,\n      default: true\n    },\n    showClose: {\n      type: Boolean,\n      default: true\n    },\n    size: {\n      type: [Number, String],\n      default: '30%'\n    },\n    title: {\n      type: String,\n      default: ''\n    },\n    visible: {\n      type: Boolean\n    },\n    wrapperClosable: {\n      type: Boolean,\n      default: true\n    },\n    withHeader: {\n      type: Boolean,\n      default: true\n    }\n  },\n  computed: {\n    isHorizontal() {\n      return this.direction === 'rtl' || this.direction === 'ltr';\n    },\n    drawerSize() {\n      return typeof this.size === 'number' ? `${this.size}px` : this.size;\n    }\n  },\n  data() {\n    return {\n      closed: false,\n      prevActiveElement: null\n    };\n  },\n  watch: {\n    visible(val) {\n      if (val) {\n        this.closed = false;\n        this.$emit('open');\n        if (this.appendToBody) {\n          document.body.appendChild(this.$el);\n        }\n        this.prevActiveElement = document.activeElement;\n      } else {\n        if (!this.closed) {\n          this.$emit('close');\n          if (this.destroyOnClose === true) {\n            this.rendered = false;\n          }\n        }\n        this.$nextTick(() => {\n          if (this.prevActiveElement) {\n            this.prevActiveElement.focus();\n          }\n        });\n      }\n    }\n  },\n  methods: {\n    afterEnter() {\n      this.$emit('opened');\n    },\n    afterLeave() {\n      this.$emit('closed');\n    },\n    hide(cancel) {\n      if (cancel !== false) {\n        this.$emit('update:visible', false);\n        this.$emit('close');\n        if (this.destroyOnClose === true) {\n          this.rendered = false;\n        }\n        this.closed = true;\n      }\n    },\n    handleWrapperClick() {\n      if (this.wrapperClosable) {\n        this.closeDrawer();\n      }\n    },\n    closeDrawer() {\n      if (typeof this.beforeClose === 'function') {\n        this.beforeClose(this.hide);\n      } else {\n        this.hide();\n      }\n    },\n    handleClose() {\n      // This method here will be called by PopupManger, when the `closeOnPressEscape` was set to true\n      // pressing `ESC` will call this method, and also close the drawer.\n      // This method also calls `beforeClose` if there was one.\n      this.closeDrawer();\n    }\n  },\n  mounted() {\n    if (this.visible) {\n      this.rendered = true;\n      this.open();\n      if (this.appendToBody) {\n        document.body.appendChild(this.$el);\n      }\n    }\n  },\n  destroyed() {\n    // if appendToBody is true, remove DOM node after destroy\n    if (this.appendToBody && this.$el && this.$el.parentNode) {\n      this.$el.parentNode.removeChild(this.$el);\n    }\n  }\n};\n</script>\n"
  },
  {
    "path": "packages/dropdown/index.js",
    "content": "import ElDropdown from './src/dropdown';\n\n/* istanbul ignore next */\nElDropdown.install = function(Vue) {\n  Vue.component(ElDropdown.name, ElDropdown);\n};\n\nexport default ElDropdown;\n"
  },
  {
    "path": "packages/dropdown/src/dropdown-item.vue",
    "content": "<template>\n  <li\n    class=\"el-dropdown-menu__item\"\n    :class=\"{\n      'is-disabled': disabled,\n      'el-dropdown-menu__item--divided': divided\n    }\"\n    @click=\"handleClick\"\n    :aria-disabled=\"disabled\"\n    :tabindex=\"disabled ? null : -1\"\n  >\n    <i :class=\"icon\" v-if=\"icon\"></i>\n    <slot></slot>\n  </li>\n</template>\n<script>\n  import Emitter from 'element-ui/src/mixins/emitter';\n\n  export default {\n    name: 'ElDropdownItem',\n\n    mixins: [Emitter],\n\n    props: {\n      command: {},\n      disabled: Boolean,\n      divided: Boolean,\n      icon: String\n    },\n\n    methods: {\n      handleClick(e) {\n        this.dispatch('ElDropdown', 'menu-item-click', [this.command, this]);\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/dropdown/src/dropdown-menu.vue",
    "content": "<template>\n  <transition name=\"el-zoom-in-top\" @after-leave=\"doDestroy\">\n    <ul class=\"el-dropdown-menu el-popper\" :class=\"[size && `el-dropdown-menu--${size}`]\" v-show=\"showPopper\">\n      <slot></slot>\n    </ul>\n  </transition>\n</template>\n<script>\n  import Popper from 'element-ui/src/utils/vue-popper';\n\n  export default {\n    name: 'ElDropdownMenu',\n\n    componentName: 'ElDropdownMenu',\n\n    mixins: [Popper],\n\n    props: {\n      visibleArrow: {\n        type: Boolean,\n        default: true\n      },\n      arrowOffset: {\n        type: Number,\n        default: 0\n      }\n    },\n\n    data() {\n      return {\n        size: this.dropdown.dropdownSize\n      };\n    },\n\n    inject: ['dropdown'],\n\n    created() {\n      this.$on('updatePopper', () => {\n        if (this.showPopper) this.updatePopper();\n      });\n      this.$on('visible', val => {\n        this.showPopper = val;\n      });\n    },\n\n    mounted() {\n      this.dropdown.popperElm = this.popperElm = this.$el;\n      this.referenceElm = this.dropdown.$el;\n      // compatible with 2.6 new v-slot syntax\n      // issue link https://github.com/ElemeFE/element/issues/14345\n      this.dropdown.initDomOperation();\n    },\n\n    watch: {\n      'dropdown.placement': {\n        immediate: true,\n        handler(val) {\n          this.currentPlacement = val;\n        }\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/dropdown/src/dropdown.vue",
    "content": "<script>\n  import Clickoutside from 'element-ui/src/utils/clickoutside';\n  import Emitter from 'element-ui/src/mixins/emitter';\n  import Migrating from 'element-ui/src/mixins/migrating';\n  import ElButton from 'element-ui/packages/button';\n  import ElButtonGroup from 'element-ui/packages/button-group';\n  import { generateId } from 'element-ui/src/utils/util';\n\n  export default {\n    name: 'ElDropdown',\n\n    componentName: 'ElDropdown',\n\n    mixins: [Emitter, Migrating],\n\n    directives: { Clickoutside },\n\n    components: {\n      ElButton,\n      ElButtonGroup\n    },\n\n    provide() {\n      return {\n        dropdown: this\n      };\n    },\n\n    props: {\n      trigger: {\n        type: String,\n        default: 'hover'\n      },\n      type: String,\n      size: {\n        type: String,\n        default: ''\n      },\n      splitButton: Boolean,\n      hideOnClick: {\n        type: Boolean,\n        default: true\n      },\n      placement: {\n        type: String,\n        default: 'bottom-end'\n      },\n      visibleArrow: {\n        default: true\n      },\n      showTimeout: {\n        type: Number,\n        default: 250\n      },\n      hideTimeout: {\n        type: Number,\n        default: 150\n      },\n      tabindex: {\n        type: Number,\n        default: 0\n      },\n      disabled: {\n        type: Boolean,\n        default: false\n      }\n    },\n\n    data() {\n      return {\n        timeout: null,\n        visible: false,\n        triggerElm: null,\n        menuItems: null,\n        menuItemsArray: null,\n        dropdownElm: null,\n        focusing: false,\n        listId: `dropdown-menu-${generateId()}`\n      };\n    },\n\n    computed: {\n      dropdownSize() {\n        return this.size || (this.$ELEMENT || {}).size;\n      }\n    },\n\n    mounted() {\n      this.$on('menu-item-click', this.handleMenuItemClick);\n    },\n\n    watch: {\n      visible(val) {\n        this.broadcast('ElDropdownMenu', 'visible', val);\n        this.$emit('visible-change', val);\n      },\n      focusing(val) {\n        const selfDefine = this.$el.querySelector('.el-dropdown-selfdefine');\n        if (selfDefine) { // 自定义\n          if (val) {\n            selfDefine.className += ' focusing';\n          } else {\n            selfDefine.className = selfDefine.className.replace('focusing', '');\n          }\n        }\n      }\n    },\n\n    methods: {\n      getMigratingConfig() {\n        return {\n          props: {\n            'menu-align': 'menu-align is renamed to placement.'\n          }\n        };\n      },\n      show() {\n        if (this.disabled) return;\n        clearTimeout(this.timeout);\n        this.timeout = setTimeout(() => {\n          this.visible = true;\n        }, this.trigger === 'click' ? 0 : this.showTimeout);\n      },\n      hide() {\n        if (this.disabled) return;\n        this.removeTabindex();\n        if (this.tabindex >= 0) {\n          this.resetTabindex(this.triggerElm);\n        }\n        clearTimeout(this.timeout);\n        this.timeout = setTimeout(() => {\n          this.visible = false;\n        }, this.trigger === 'click' ? 0 : this.hideTimeout);\n      },\n      handleClick() {\n        if (this.disabled) return;\n        if (this.visible) {\n          this.hide();\n        } else {\n          this.show();\n        }\n      },\n      handleTriggerKeyDown(ev) {\n        const keyCode = ev.keyCode;\n        if ([38, 40].indexOf(keyCode) > -1) { // up/down\n          this.removeTabindex();\n          this.resetTabindex(this.menuItems[0]);\n          this.menuItems[0].focus();\n          ev.preventDefault();\n          ev.stopPropagation();\n        } else if (keyCode === 13) { // space enter选中\n          this.handleClick();\n        } else if ([9, 27].indexOf(keyCode) > -1) { // tab || esc\n          this.hide();\n        }\n      },\n      handleItemKeyDown(ev) {\n        const keyCode = ev.keyCode;\n        const target = ev.target;\n        const currentIndex = this.menuItemsArray.indexOf(target);\n        const max = this.menuItemsArray.length - 1;\n        let nextIndex;\n        if ([38, 40].indexOf(keyCode) > -1) { // up/down\n          if (keyCode === 38) { // up\n            nextIndex = currentIndex !== 0 ? currentIndex - 1 : 0;\n          } else { // down\n            nextIndex = currentIndex < max ? currentIndex + 1 : max;\n          }\n          this.removeTabindex();\n          this.resetTabindex(this.menuItems[nextIndex]);\n          this.menuItems[nextIndex].focus();\n          ev.preventDefault();\n          ev.stopPropagation();\n        } else if (keyCode === 13) { // enter选中\n          this.triggerElmFocus();\n          target.click();\n          if (this.hideOnClick) { // click关闭\n            this.visible = false;\n          }\n        } else if ([9, 27].indexOf(keyCode) > -1) { // tab // esc\n          this.hide();\n          this.triggerElmFocus();\n        }\n      },\n      resetTabindex(ele) { // 下次tab时组件聚焦元素\n        this.removeTabindex();\n        ele.setAttribute('tabindex', '0'); // 下次期望的聚焦元素\n      },\n      removeTabindex() {\n        this.triggerElm.setAttribute('tabindex', '-1');\n        this.menuItemsArray.forEach((item) => {\n          item.setAttribute('tabindex', '-1');\n        });\n      },\n      initAria() {\n        this.dropdownElm.setAttribute('id', this.listId);\n        this.triggerElm.setAttribute('aria-haspopup', 'list');\n        this.triggerElm.setAttribute('aria-controls', this.listId);\n\n        if (!this.splitButton) { // 自定义\n          this.triggerElm.setAttribute('role', 'button');\n          this.triggerElm.setAttribute('tabindex', this.tabindex);\n          this.triggerElm.setAttribute('class', (this.triggerElm.getAttribute('class') || '') + ' el-dropdown-selfdefine'); // 控制\n        }\n      },\n      initEvent() {\n        let { trigger, show, hide, handleClick, splitButton, handleTriggerKeyDown, handleItemKeyDown } = this;\n        this.triggerElm = splitButton\n          ? this.$refs.trigger.$el\n          : this.$slots.default[0].elm;\n\n        let dropdownElm = this.dropdownElm;\n\n        this.triggerElm.addEventListener('keydown', handleTriggerKeyDown); // triggerElm keydown\n        dropdownElm.addEventListener('keydown', handleItemKeyDown, true); // item keydown\n        // 控制自定义元素的样式\n        if (!splitButton) {\n          this.triggerElm.addEventListener('focus', () => {\n            this.focusing = true;\n          });\n          this.triggerElm.addEventListener('blur', () => {\n            this.focusing = false;\n          });\n          this.triggerElm.addEventListener('click', () => {\n            this.focusing = false;\n          });\n        }\n        if (trigger === 'hover') {\n          this.triggerElm.addEventListener('mouseenter', show);\n          this.triggerElm.addEventListener('mouseleave', hide);\n          dropdownElm.addEventListener('mouseenter', show);\n          dropdownElm.addEventListener('mouseleave', hide);\n        } else if (trigger === 'click') {\n          this.triggerElm.addEventListener('click', handleClick);\n        }\n      },\n      handleMenuItemClick(command, instance) {\n        if (this.hideOnClick) {\n          this.visible = false;\n        }\n        this.$emit('command', command, instance);\n      },\n      triggerElmFocus() {\n        this.triggerElm.focus && this.triggerElm.focus();\n      },\n      initDomOperation() {\n        this.dropdownElm = this.popperElm;\n        this.menuItems = this.dropdownElm.querySelectorAll(\"[tabindex='-1']\");\n        this.menuItemsArray = [].slice.call(this.menuItems);\n\n        this.initEvent();\n        this.initAria();\n      }\n    },\n\n    render(h) {\n      let { hide, splitButton, type, dropdownSize, disabled } = this;\n\n      const handleMainButtonClick = (event) => {\n        this.$emit('click', event);\n        hide();\n      };\n\n      let triggerElm = null;\n      if (splitButton) {\n        triggerElm = <el-button-group>\n          <el-button type={type} size={dropdownSize} nativeOn-click={handleMainButtonClick} disabled={disabled}>\n            {this.$slots.default}\n          </el-button>\n          <el-button ref=\"trigger\" type={type} size={dropdownSize} class=\"el-dropdown__caret-button\" disabled={disabled}>\n            <i class=\"el-dropdown__icon el-icon-arrow-down\"></i>\n          </el-button>\n        </el-button-group>;\n      } else {\n        triggerElm = this.$slots.default;\n        const vnodeData = triggerElm[0].data || {};\n        let { attrs = {} } = vnodeData;\n        if (disabled && !attrs.disabled) {\n          attrs.disabled = true;\n          vnodeData.attrs = attrs;\n        }\n      }\n      const menuElm = disabled ? null : this.$slots.dropdown;\n\n      return (\n        <div class=\"el-dropdown\" v-clickoutside={hide} aria-disabled={disabled}>\n          {triggerElm}\n          {menuElm}\n        </div>\n      );\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/dropdown-item/index.js",
    "content": "import ElDropdownItem from '../dropdown/src/dropdown-item';\n\n/* istanbul ignore next */\nElDropdownItem.install = function(Vue) {\n  Vue.component(ElDropdownItem.name, ElDropdownItem);\n};\n\nexport default ElDropdownItem;\n"
  },
  {
    "path": "packages/dropdown-menu/index.js",
    "content": "import ElDropdownMenu from '../dropdown/src/dropdown-menu';\n\n/* istanbul ignore next */\nElDropdownMenu.install = function(Vue) {\n  Vue.component(ElDropdownMenu.name, ElDropdownMenu);\n};\n\nexport default ElDropdownMenu;\n"
  },
  {
    "path": "packages/empty/index.js",
    "content": "import Empty from './src/index.vue';\n\nEmpty.install = (Vue) => {\n  Vue.component(Empty.name, Empty);\n};\n\nexport default Empty;\n"
  },
  {
    "path": "packages/empty/src/img-empty.vue",
    "content": "<template>\n  <svg\n    viewBox=\"0 0 79 86\"\n    version=\"1.1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n  >\n    <defs>\n      <linearGradient\n        :id=\"`linearGradient-1-${id}`\"\n        x1=\"38.8503086%\"\n        y1=\"0%\"\n        x2=\"61.1496914%\"\n        y2=\"100%\"\n      >\n        <stop stop-color=\"#FCFCFD\" offset=\"0%\" />\n        <stop stop-color=\"#EEEFF3\" offset=\"100%\" />\n      </linearGradient>\n      <linearGradient\n        :id=\"`linearGradient-2-${id}`\"\n        x1=\"0%\"\n        y1=\"9.5%\"\n        x2=\"100%\"\n        y2=\"90.5%\"\n      >\n        <stop stop-color=\"#FCFCFD\" offset=\"0%\" />\n        <stop stop-color=\"#E9EBEF\" offset=\"100%\" />\n      </linearGradient>\n      <rect\n        :id=\"`path-3-${id}`\"\n        x=\"0\"\n        y=\"0\"\n        width=\"17\"\n        height=\"36\"\n      />\n    </defs>\n    <g\n      id=\"Illustrations\"\n      stroke=\"none\"\n      stroke-width=\"1\"\n      fill=\"none\"\n      fill-rule=\"evenodd\"\n    >\n      <g id=\"B-type\" transform=\"translate(-1268.000000, -535.000000)\">\n        <g id=\"Group-2\" transform=\"translate(1268.000000, 535.000000)\">\n          <path\n            id=\"Oval-Copy-2\"\n            d=\"M39.5,86 C61.3152476,86 79,83.9106622 79,81.3333333 C79,78.7560045 57.3152476,78 35.5,78 C13.6847524,78 0,78.7560045 0,81.3333333 C0,83.9106622 17.6847524,86 39.5,86 Z\"\n            fill=\"#F7F8FC\"\n          />\n          <polygon\n            id=\"Rectangle-Copy-14\"\n            fill=\"#E5E7E9\"\n            transform=\"translate(27.500000, 51.500000) scale(1, -1) translate(-27.500000, -51.500000) \"\n            points=\"13 58 53 58 42 45 2 45\"\n          />\n          <g\n            id=\"Group-Copy\"\n            transform=\"translate(34.500000, 31.500000) scale(-1, 1) rotate(-25.000000) translate(-34.500000, -31.500000) translate(7.000000, 10.000000)\"\n          >\n            <polygon\n              id=\"Rectangle-Copy-10\"\n              fill=\"#E5E7E9\"\n              transform=\"translate(11.500000, 5.000000) scale(1, -1) translate(-11.500000, -5.000000) \"\n              points=\"2.84078316e-14 3 18 3 23 7 5 7\"\n            />\n            <polygon id=\"Rectangle-Copy-11\" fill=\"#EDEEF2\" points=\"-3.69149156e-15 7 38 7 38 43 -3.69149156e-15 43\" />\n            <rect\n              id=\"Rectangle-Copy-12\"\n              :fill=\"`url(#linearGradient-1-${id})`\"\n              transform=\"translate(46.500000, 25.000000) scale(-1, 1) translate(-46.500000, -25.000000) \"\n              x=\"38\"\n              y=\"7\"\n              width=\"17\"\n              height=\"36\"\n            />\n            <polygon\n              id=\"Rectangle-Copy-13\"\n              fill=\"#F8F9FB\"\n              transform=\"translate(39.500000, 3.500000) scale(-1, 1) translate(-39.500000, -3.500000) \"\n              points=\"24 7 41 7 55 -3.63806207e-12 38 -3.63806207e-12\"\n            />\n          </g>\n          <rect\n            id=\"Rectangle-Copy-15\"\n            :fill=\"`url(#linearGradient-2-${id})`\"\n            x=\"13\"\n            y=\"45\"\n            width=\"40\"\n            height=\"36\"\n          />\n          <g id=\"Rectangle-Copy-17\" transform=\"translate(53.000000, 45.000000)\">\n            <mask :id=\"`mask-4-${id}`\" fill=\"white\">\n              <use :xlink:href=\"`#path-3-${id}`\" />\n            </mask>\n            <use\n              id=\"Mask\"\n              fill=\"#E0E3E9\"\n              transform=\"translate(8.500000, 18.000000) scale(-1, 1) translate(-8.500000, -18.000000) \"\n              :xlink:href=\"`#path-3-${id}`\"\n            />\n            <polygon\n              id=\"Rectangle-Copy\"\n              fill=\"#D5D7DE\"\n              :mask=\"`url(#mask-4-${id})`\"\n              transform=\"translate(12.000000, 9.000000) scale(-1, 1) translate(-12.000000, -9.000000) \"\n              points=\"7 0 24 0 20 18 -1.70530257e-13 16\"\n            />\n          </g>\n          <polygon\n            id=\"Rectangle-Copy-18\"\n            fill=\"#F8F9FB\"\n            transform=\"translate(66.000000, 51.500000) scale(-1, 1) translate(-66.000000, -51.500000) \"\n            points=\"62 45 79 45 70 58 53 58\"\n          />\n        </g>\n      </g>\n    </g>\n  </svg>\n</template>\n\n<script>\nlet id = 0;\nexport default {\n  name: 'ImgEmpty',\n  data() {\n    return {\n      id: ++id\n    };\n  }\n};\n</script>\n"
  },
  {
    "path": "packages/empty/src/index.vue",
    "content": "<template>\n  <div class=\"el-empty\">\n    <div class=\"el-empty__image\" :style=\"imageStyle\">\n      <img v-if=\"image\" :src=\"image\" ondragstart=\"return false\">\n      <slot v-else name=\"image\">\n        <img-empty />\n      </slot>\n    </div>\n    <div class=\"el-empty__description\">\n      <slot v-if=\"$slots.description\" name=\"description\"></slot>\n      <p v-else>{{ emptyDescription }}</p>\n    </div>\n    <div v-if=\"$slots.default\" class=\"el-empty__bottom\">\n      <slot></slot>\n    </div>\n  </div>\n</template>\n\n<script>\nimport ImgEmpty from './img-empty.vue';\nimport { t } from 'element-ui/src/locale';\n\nexport default {\n  name: 'ElEmpty',\n  components: {\n    [ImgEmpty.name]: ImgEmpty\n  },\n  props: {\n    image: {\n      type: String,\n      default: ''\n    },\n    imageSize: Number,\n    description: {\n      type: String,\n      default: ''\n    }\n  },\n  computed: {\n    emptyDescription() {\n      return this.description || t('el.empty.description');\n    },\n    imageStyle() {\n      return {\n        width: this.imageSize ? `${this.imageSize}px` : ''\n      };\n    }\n  }\n};\n</script>\n"
  },
  {
    "path": "packages/footer/index.js",
    "content": "import Footer from './src/main';\n\n/* istanbul ignore next */\nFooter.install = function(Vue) {\n  Vue.component(Footer.name, Footer);\n};\n\nexport default Footer;\n"
  },
  {
    "path": "packages/footer/src/main.vue",
    "content": "<template>\n  <footer class=\"el-footer\" :style=\"{ height }\">\n    <slot></slot>\n  </footer>\n</template>\n\n<script>\n  export default {\n    name: 'ElFooter',\n\n    componentName: 'ElFooter',\n\n    props: {\n      height: {\n        type: String,\n        default: '60px'\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/form/index.js",
    "content": "import ElForm from './src/form';\n\n/* istanbul ignore next */\nElForm.install = function(Vue) {\n  Vue.component(ElForm.name, ElForm);\n};\n\nexport default ElForm;\n"
  },
  {
    "path": "packages/form/src/form-item.vue",
    "content": "<template>\n  <div class=\"el-form-item\" :class=\"[{\n      'el-form-item--feedback': elForm && elForm.statusIcon,\n      'is-error': validateState === 'error',\n      'is-validating': validateState === 'validating',\n      'is-success': validateState === 'success',\n      'is-required': isRequired || required,\n      'is-no-asterisk': elForm && elForm.hideRequiredAsterisk\n    },\n    sizeClass ? 'el-form-item--' + sizeClass : ''\n  ]\">\n    <label-wrap\n      :is-auto-width=\"labelStyle && labelStyle.width === 'auto'\"\n      :update-all=\"form.labelWidth === 'auto'\">\n      <label :for=\"labelFor\" class=\"el-form-item__label\" :style=\"labelStyle\" v-if=\"label || $slots.label\">\n        <slot name=\"label\">{{label + form.labelSuffix}}</slot>\n      </label>\n    </label-wrap>\n    <div class=\"el-form-item__content\" :style=\"contentStyle\">\n      <slot></slot>\n      <transition name=\"el-zoom-in-top\">\n        <slot\n          v-if=\"validateState === 'error' && showMessage && form.showMessage\"\n          name=\"error\"\n          :error=\"validateMessage\">\n          <div\n            class=\"el-form-item__error\"\n            :class=\"{\n              'el-form-item__error--inline': typeof inlineMessage === 'boolean'\n                ? inlineMessage\n                : (elForm && elForm.inlineMessage || false)\n            }\"\n          >\n            {{validateMessage}}\n          </div>\n        </slot>\n      </transition>\n    </div>\n  </div>\n</template>\n<script>\n  import AsyncValidator from 'async-validator';\n  import emitter from 'element-ui/src/mixins/emitter';\n  import objectAssign from 'element-ui/src/utils/merge';\n  import { noop, getPropByPath } from 'element-ui/src/utils/util';\n  import LabelWrap from './label-wrap';\n  export default {\n    name: 'ElFormItem',\n\n    componentName: 'ElFormItem',\n\n    mixins: [emitter],\n\n    provide() {\n      return {\n        elFormItem: this\n      };\n    },\n\n    inject: ['elForm'],\n\n    props: {\n      label: String,\n      labelWidth: String,\n      prop: String,\n      required: {\n        type: Boolean,\n        default: undefined\n      },\n      rules: [Object, Array],\n      error: String,\n      validateStatus: String,\n      for: String,\n      inlineMessage: {\n        type: [String, Boolean],\n        default: ''\n      },\n      showMessage: {\n        type: Boolean,\n        default: true\n      },\n      size: String\n    },\n    components: {\n      // use this component to calculate auto width\n      LabelWrap\n    },\n    watch: {\n      error: {\n        immediate: true,\n        handler(value) {\n          this.validateMessage = value;\n          this.validateState = value ? 'error' : '';\n        }\n      },\n      validateStatus(value) {\n        this.validateState = value;\n      },\n      rules(value) {\n        if ((!value || value.length === 0) && this.required === undefined) {\n          this.clearValidate();\n        }\n      }\n    },\n    computed: {\n      labelFor() {\n        return this.for || this.prop;\n      },\n      labelStyle() {\n        const ret = {};\n        if (this.form.labelPosition === 'top') return ret;\n        const labelWidth = this.labelWidth || this.form.labelWidth;\n        if (labelWidth) {\n          ret.width = labelWidth;\n        }\n        return ret;\n      },\n      contentStyle() {\n        const ret = {};\n        const label = this.label;\n        if (this.form.labelPosition === 'top' || this.form.inline) return ret;\n        if (!label && !this.labelWidth && this.isNested) return ret;\n        const labelWidth = this.labelWidth || this.form.labelWidth;\n        if (labelWidth === 'auto') {\n          if (this.labelWidth === 'auto') {\n            ret.marginLeft = this.computedLabelWidth;\n          } else if (this.form.labelWidth === 'auto') {\n            ret.marginLeft = this.elForm.autoLabelWidth;\n          }\n        } else {\n          ret.marginLeft = labelWidth;\n        }\n        return ret;\n      },\n      form() {\n        let parent = this.$parent;\n        let parentName = parent.$options.componentName;\n        while (parentName !== 'ElForm') {\n          if (parentName === 'ElFormItem') {\n            this.isNested = true;\n          }\n          parent = parent.$parent;\n          parentName = parent.$options.componentName;\n        }\n        return parent;\n      },\n      fieldValue() {\n        const model = this.form.model;\n        if (!model || !this.prop) { return; }\n\n        let path = this.prop;\n        if (path.indexOf(':') !== -1) {\n          path = path.replace(/:/, '.');\n        }\n\n        return getPropByPath(model, path, true).v;\n      },\n      isRequired() {\n        let rules = this.getRules();\n        let isRequired = false;\n\n        if (rules && rules.length) {\n          rules.every(rule => {\n            if (rule.required) {\n              isRequired = true;\n              return false;\n            }\n            return true;\n          });\n        }\n        return isRequired;\n      },\n      _formSize() {\n        return this.elForm.size;\n      },\n      elFormItemSize() {\n        return this.size || this._formSize;\n      },\n      sizeClass() {\n        return this.elFormItemSize || (this.$ELEMENT || {}).size;\n      }\n    },\n    data() {\n      return {\n        validateState: '',\n        validateMessage: '',\n        validateDisabled: false,\n        validator: {},\n        isNested: false,\n        computedLabelWidth: ''\n      };\n    },\n    methods: {\n      validate(trigger, callback = noop) {\n        this.validateDisabled = false;\n        const rules = this.getFilteredRule(trigger);\n        if ((!rules || rules.length === 0) && this.required === undefined) {\n          callback();\n          return true;\n        }\n\n        this.validateState = 'validating';\n\n        const descriptor = {};\n        if (rules && rules.length > 0) {\n          rules.forEach(rule => {\n            delete rule.trigger;\n          });\n        }\n        descriptor[this.prop] = rules;\n\n        const validator = new AsyncValidator(descriptor);\n        const model = {};\n\n        model[this.prop] = this.fieldValue;\n\n        validator.validate(model, { firstFields: true }, (errors, invalidFields) => {\n          this.validateState = !errors ? 'success' : 'error';\n          this.validateMessage = errors ? errors[0].message : '';\n\n          callback(this.validateMessage, invalidFields);\n          this.elForm && this.elForm.$emit('validate', this.prop, !errors, this.validateMessage || null);\n        });\n      },\n      clearValidate() {\n        this.validateState = '';\n        this.validateMessage = '';\n        this.validateDisabled = false;\n      },\n      resetField() {\n        this.validateState = '';\n        this.validateMessage = '';\n\n        let model = this.form.model;\n        let value = this.fieldValue;\n        let path = this.prop;\n        if (path.indexOf(':') !== -1) {\n          path = path.replace(/:/, '.');\n        }\n\n        let prop = getPropByPath(model, path, true);\n\n        this.validateDisabled = true;\n        if (Array.isArray(value)) {\n          prop.o[prop.k] = [].concat(this.initialValue);\n        } else {\n          prop.o[prop.k] = this.initialValue;\n        }\n\n        // reset validateDisabled after onFieldChange triggered\n        this.$nextTick(() => {\n          this.validateDisabled = false;\n        });\n\n        this.broadcast('ElTimeSelect', 'fieldReset', this.initialValue);\n      },\n      getRules() {\n        let formRules = this.form.rules;\n        const selfRules = this.rules;\n        const requiredRule = this.required !== undefined ? { required: !!this.required } : [];\n\n        const prop = getPropByPath(formRules, this.prop || '');\n        formRules = formRules ? (prop.o[this.prop || ''] || prop.v) : [];\n\n        return [].concat(selfRules || formRules || []).concat(requiredRule);\n      },\n      getFilteredRule(trigger) {\n        const rules = this.getRules();\n\n        return rules.filter(rule => {\n          if (!rule.trigger || trigger === '') return true;\n          if (Array.isArray(rule.trigger)) {\n            return rule.trigger.indexOf(trigger) > -1;\n          } else {\n            return rule.trigger === trigger;\n          }\n        }).map(rule => objectAssign({}, rule));\n      },\n      onFieldBlur() {\n        this.validate('blur');\n      },\n      onFieldChange() {\n        if (this.validateDisabled) {\n          this.validateDisabled = false;\n          return;\n        }\n\n        this.validate('change');\n      },\n      updateComputedLabelWidth(width) {\n        this.computedLabelWidth = width ? `${width}px` : '';\n      },\n      addValidateEvents() {\n        const rules = this.getRules();\n\n        if (rules.length || this.required !== undefined) {\n          this.$on('el.form.blur', this.onFieldBlur);\n          this.$on('el.form.change', this.onFieldChange);\n        }\n      },\n      removeValidateEvents() {\n        this.$off();\n      }\n    },\n    mounted() {\n      if (this.prop) {\n        this.dispatch('ElForm', 'el.form.addField', [this]);\n\n        let initialValue = this.fieldValue;\n        if (Array.isArray(initialValue)) {\n          initialValue = [].concat(initialValue);\n        }\n        Object.defineProperty(this, 'initialValue', {\n          value: initialValue\n        });\n\n        this.addValidateEvents();\n      }\n    },\n    beforeDestroy() {\n      this.dispatch('ElForm', 'el.form.removeField', [this]);\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/form/src/form.vue",
    "content": "<template>\n  <form class=\"el-form\" :class=\"[\n    labelPosition ? 'el-form--label-' + labelPosition : '',\n    { 'el-form--inline': inline }\n  ]\">\n    <slot></slot>\n  </form>\n</template>\n<script>\n  import objectAssign from 'element-ui/src/utils/merge';\n\n  export default {\n    name: 'ElForm',\n\n    componentName: 'ElForm',\n\n    provide() {\n      return {\n        elForm: this\n      };\n    },\n\n    props: {\n      model: Object,\n      rules: Object,\n      labelPosition: String,\n      labelWidth: String,\n      labelSuffix: {\n        type: String,\n        default: ''\n      },\n      inline: Boolean,\n      inlineMessage: Boolean,\n      statusIcon: Boolean,\n      showMessage: {\n        type: Boolean,\n        default: true\n      },\n      size: String,\n      disabled: Boolean,\n      validateOnRuleChange: {\n        type: Boolean,\n        default: true\n      },\n      hideRequiredAsterisk: {\n        type: Boolean,\n        default: false\n      }\n    },\n    watch: {\n      rules() {\n        // remove then add event listeners on form-item after form rules change\n        this.fields.forEach(field => {\n          field.removeValidateEvents();\n          field.addValidateEvents();\n        });\n\n        if (this.validateOnRuleChange) {\n          this.validate(() => {});\n        }\n      }\n    },\n    computed: {\n      autoLabelWidth() {\n        if (!this.potentialLabelWidthArr.length) return 0;\n        const max = Math.max(...this.potentialLabelWidthArr);\n        return max ? `${max}px` : '';\n      }\n    },\n    data() {\n      return {\n        fields: [],\n        potentialLabelWidthArr: [] // use this array to calculate auto width\n      };\n    },\n    created() {\n      this.$on('el.form.addField', (field) => {\n        if (field) {\n          this.fields.push(field);\n        }\n      });\n      /* istanbul ignore next */\n      this.$on('el.form.removeField', (field) => {\n        if (field.prop) {\n          this.fields.splice(this.fields.indexOf(field), 1);\n        }\n      });\n    },\n    methods: {\n      resetFields() {\n        if (!this.model) {\n          console.warn('[Element Warn][Form]model is required for resetFields to work.');\n          return;\n        }\n        this.fields.forEach(field => {\n          field.resetField();\n        });\n      },\n      clearValidate(props = []) {\n        const fields = props.length\n          ? (typeof props === 'string'\n            ? this.fields.filter(field => props === field.prop)\n            : this.fields.filter(field => props.indexOf(field.prop) > -1)\n          ) : this.fields;\n        fields.forEach(field => {\n          field.clearValidate();\n        });\n      },\n      validate(callback) {\n        if (!this.model) {\n          console.warn('[Element Warn][Form]model is required for validate to work!');\n          return;\n        }\n\n        let promise;\n        // if no callback, return promise\n        if (typeof callback !== 'function' && window.Promise) {\n          promise = new window.Promise((resolve, reject) => {\n            callback = function(valid, invalidFields) {\n              valid ? resolve(valid) : reject(invalidFields);\n            };\n          });\n        }\n\n        let valid = true;\n        let count = 0;\n        // 如果需要验证的fields为空，调用验证时立刻返回callback\n        if (this.fields.length === 0 && callback) {\n          callback(true);\n        }\n        let invalidFields = {};\n        this.fields.forEach(field => {\n          field.validate('', (message, field) => {\n            if (message) {\n              valid = false;\n            }\n            invalidFields = objectAssign({}, invalidFields, field);\n            if (typeof callback === 'function' && ++count === this.fields.length) {\n              callback(valid, invalidFields);\n            }\n          });\n        });\n\n        if (promise) {\n          return promise;\n        }\n      },\n      validateField(props, cb) {\n        props = [].concat(props);\n        const fields = this.fields.filter(field => props.indexOf(field.prop) !== -1);\n        if (!fields.length) {\n          console.warn('[Element Warn]please pass correct props!');\n          return;\n        }\n\n        fields.forEach(field => {\n          field.validate('', cb);\n        });\n      },\n      getLabelWidthIndex(width) {\n        const index = this.potentialLabelWidthArr.indexOf(width);\n        // it's impossible\n        if (index === -1) {\n          throw new Error('[ElementForm]unpected width ', width);\n        }\n        return index;\n      },\n      registerLabelWidth(val, oldVal) {\n        if (val && oldVal) {\n          const index = this.getLabelWidthIndex(oldVal);\n          this.potentialLabelWidthArr.splice(index, 1, val);\n        } else if (val) {\n          this.potentialLabelWidthArr.push(val);\n        }\n      },\n      deregisterLabelWidth(val) {\n        const index = this.getLabelWidthIndex(val);\n        this.potentialLabelWidthArr.splice(index, 1);\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/form/src/label-wrap.vue",
    "content": "<script>\n\nexport default {\n  props: {\n    isAutoWidth: Boolean,\n    updateAll: Boolean\n  },\n\n  inject: ['elForm', 'elFormItem'],\n\n  render() {\n    const slots = this.$slots.default;\n    if (!slots) return null;\n    if (this.isAutoWidth) {\n      const autoLabelWidth = this.elForm.autoLabelWidth;\n      const style = {};\n      if (autoLabelWidth && autoLabelWidth !== 'auto') {\n        const marginLeft = parseInt(autoLabelWidth, 10) - this.computedWidth;\n        if (marginLeft) {\n          style.marginLeft = marginLeft + 'px';\n        }\n      }\n      return (<div class=\"el-form-item__label-wrap\" style={style}>\n        { slots }\n      </div>);\n    } else {\n      return slots[0];\n    }\n  },\n\n  methods: {\n    getLabelWidth() {\n      if (this.$el && this.$el.firstElementChild) {\n        const computedWidth = window.getComputedStyle(this.$el.firstElementChild).width;\n        return Math.ceil(parseFloat(computedWidth));\n      } else {\n        return 0;\n      }\n    },\n    updateLabelWidth(action = 'update') {\n      if (this.$slots.default && this.isAutoWidth && this.$el.firstElementChild) {\n        if (action === 'update') {\n          this.computedWidth = this.getLabelWidth();\n        } else if (action === 'remove') {\n          this.elForm.deregisterLabelWidth(this.computedWidth);\n        }\n      }\n    }\n  },\n\n  watch: {\n    computedWidth(val, oldVal) {\n      if (this.updateAll) {\n        this.elForm.registerLabelWidth(val, oldVal);\n        this.elFormItem.updateComputedLabelWidth(val);\n      }\n    }\n  },\n\n  data() {\n    return {\n      computedWidth: 0\n    };\n  },\n\n  mounted() {\n    this.updateLabelWidth('update');\n  },\n\n  updated() {\n    this.updateLabelWidth('update');\n  },\n\n  beforeDestroy() {\n    this.updateLabelWidth('remove');\n  }\n};\n</script>\n"
  },
  {
    "path": "packages/form-item/index.js",
    "content": "import ElFormItem from '../form/src/form-item';\n\n/* istanbul ignore next */\nElFormItem.install = function(Vue) {\n  Vue.component(ElFormItem.name, ElFormItem);\n};\n\nexport default ElFormItem;\n"
  },
  {
    "path": "packages/header/index.js",
    "content": "import Header from './src/main';\n\n/* istanbul ignore next */\nHeader.install = function(Vue) {\n  Vue.component(Header.name, Header);\n};\n\nexport default Header;\n"
  },
  {
    "path": "packages/header/src/main.vue",
    "content": "<template>\n  <header class=\"el-header\" :style=\"{ height }\">\n    <slot></slot>\n  </header>\n</template>\n\n<script>\n  export default {\n    name: 'ElHeader',\n\n    componentName: 'ElHeader',\n\n    props: {\n      height: {\n        type: String,\n        default: '60px'\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/icon/index.js",
    "content": "import ElIcon from './src/icon.vue';\n\n/* istanbul ignore next */\nElIcon.install = function(Vue) {\n  Vue.component(ElIcon.name, ElIcon);\n};\n\nexport default ElIcon;\n"
  },
  {
    "path": "packages/icon/src/icon.vue",
    "content": "<template>\n  <i :class=\"'el-icon-' + name\"></i>\n</template>\n\n<script>\n  export default {\n    name: 'ElIcon',\n\n    props: {\n      name: String\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/image/index.js",
    "content": "import Image from './src/main';\n\n/* istanbul ignore next */\nImage.install = function(Vue) {\n  Vue.component(Image.name, Image);\n};\n\nexport default Image;\n"
  },
  {
    "path": "packages/image/src/image-viewer.vue",
    "content": "<template>\n  <transition name=\"viewer-fade\">\n    <div tabindex=\"-1\" ref=\"el-image-viewer__wrapper\" class=\"el-image-viewer__wrapper\" :style=\"{ 'z-index': viewerZIndex }\">\n      <div class=\"el-image-viewer__mask\" @click.self=\"handleMaskClick\"></div>\n      <!-- CLOSE -->\n      <span class=\"el-image-viewer__btn el-image-viewer__close\" @click=\"hide\">\n        <i class=\"el-icon-close\"></i>\n      </span>\n      <!-- ARROW -->\n      <template v-if=\"!isSingle\">\n        <span\n          class=\"el-image-viewer__btn el-image-viewer__prev\"\n          :class=\"{ 'is-disabled': !infinite && isFirst }\"\n          @click=\"prev\">\n          <i class=\"el-icon-arrow-left\"/>\n        </span>\n        <span\n          class=\"el-image-viewer__btn el-image-viewer__next\"\n          :class=\"{ 'is-disabled': !infinite && isLast }\"\n          @click=\"next\">\n          <i class=\"el-icon-arrow-right\"/>\n        </span>\n      </template>\n      <!-- ACTIONS -->\n      <div class=\"el-image-viewer__btn el-image-viewer__actions\">\n        <div class=\"el-image-viewer__actions__inner\">\n          <i class=\"el-icon-zoom-out\" @click=\"handleActions('zoomOut')\"></i>\n          <i class=\"el-icon-zoom-in\" @click=\"handleActions('zoomIn')\"></i>\n          <i class=\"el-image-viewer__actions__divider\"></i>\n          <i :class=\"mode.icon\" @click=\"toggleMode\"></i>\n          <i class=\"el-image-viewer__actions__divider\"></i>\n          <i class=\"el-icon-refresh-left\" @click=\"handleActions('anticlocelise')\"></i>\n          <i class=\"el-icon-refresh-right\" @click=\"handleActions('clocelise')\"></i>\n        </div>\n      </div>\n      <!-- CANVAS -->\n      <div class=\"el-image-viewer__canvas\">\n        <img\n          v-for=\"(url, i) in urlList\"\n          v-if=\"i === index\"\n          ref=\"img\"\n          class=\"el-image-viewer__img\"\n          :key=\"url\"\n          :src=\"currentImg\"\n          :style=\"imgStyle\"\n          @load=\"handleImgLoad\"\n          @error=\"handleImgError\"\n          @mousedown=\"handleMouseDown\">\n      </div>\n    </div>\n  </transition>\n</template>\n\n<script>\nimport { on, off } from 'element-ui/src/utils/dom';\nimport { rafThrottle, isFirefox } from 'element-ui/src/utils/util';\nimport { PopupManager } from 'element-ui/src/utils/popup';\n\nconst Mode = {\n  CONTAIN: {\n    name: 'contain',\n    icon: 'el-icon-full-screen'\n  },\n  ORIGINAL: {\n    name: 'original',\n    icon: 'el-icon-c-scale-to-original'\n  }\n};\n\nconst mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel';\n\nexport default {\n  name: 'elImageViewer',\n\n  props: {\n    urlList: {\n      type: Array,\n      default: () => []\n    },\n    zIndex: {\n      type: Number,\n      default: 2000\n    },\n    onSwitch: {\n      type: Function,\n      default: () => {}\n    },\n    onClose: {\n      type: Function,\n      default: () => {}\n    },\n    initialIndex: {\n      type: Number,\n      default: 0\n    },\n    appendToBody: {\n      type: Boolean,\n      default: true\n    },\n    maskClosable: {\n      type: Boolean,\n      default: true\n    }\n  },\n\n  data() {\n    return {\n      index: this.initialIndex,\n      isShow: false,\n      infinite: true,\n      loading: false,\n      mode: Mode.CONTAIN,\n      transform: {\n        scale: 1,\n        deg: 0,\n        offsetX: 0,\n        offsetY: 0,\n        enableTransition: false\n      }\n    };\n  },\n  computed: {\n    isSingle() {\n      return this.urlList.length <= 1;\n    },\n    isFirst() {\n      return this.index === 0;\n    },\n    isLast() {\n      return this.index === this.urlList.length - 1;\n    },\n    currentImg() {\n      return this.urlList[this.index];\n    },\n    imgStyle() {\n      const { scale, deg, offsetX, offsetY, enableTransition } = this.transform;\n      const style = {\n        transform: `scale(${scale}) rotate(${deg}deg)`,\n        transition: enableTransition ? 'transform .3s' : '',\n        'margin-left': `${offsetX}px`,\n        'margin-top': `${offsetY}px`\n      };\n      if (this.mode === Mode.CONTAIN) {\n        style.maxWidth = style.maxHeight = '100%';\n      }\n      return style;\n    },\n    viewerZIndex() {\n      const nextZIndex = PopupManager.nextZIndex();\n      return this.zIndex > nextZIndex ? this.zIndex : nextZIndex;\n    }\n  },\n  watch: {\n    index: {\n      handler: function(val) {\n        this.reset();\n        this.onSwitch(val);\n      }\n    },\n    currentImg(val) {\n      this.$nextTick(_ => {\n        const $img = this.$refs.img[0];\n        if (!$img.complete) {\n          this.loading = true;\n        }\n      });\n    }\n  },\n  methods: {\n    hide() {\n      this.deviceSupportUninstall();\n      this.onClose();\n    },\n    deviceSupportInstall() {\n      this._keyDownHandler = e => {\n        e.stopPropagation();\n        const keyCode = e.keyCode;\n        switch (keyCode) {\n          // ESC\n          case 27:\n            this.hide();\n            break;\n          // SPACE\n          case 32:\n            this.toggleMode();\n            break;\n          // LEFT_ARROW\n          case 37:\n            this.prev();\n            break;\n          // UP_ARROW\n          case 38:\n            this.handleActions('zoomIn');\n            break;\n          // RIGHT_ARROW\n          case 39:\n            this.next();\n            break;\n          // DOWN_ARROW\n          case 40:\n            this.handleActions('zoomOut');\n            break;\n        }\n      };\n      this._mouseWheelHandler = rafThrottle(e => {\n        const delta = e.wheelDelta ? e.wheelDelta : -e.detail;\n        if (delta > 0) {\n          this.handleActions('zoomIn', {\n            zoomRate: 0.015,\n            enableTransition: false\n          });\n        } else {\n          this.handleActions('zoomOut', {\n            zoomRate: 0.015,\n            enableTransition: false\n          });\n        }\n      });\n      on(document, 'keydown', this._keyDownHandler);\n      on(document, mousewheelEventName, this._mouseWheelHandler);\n    },\n    deviceSupportUninstall() {\n      off(document, 'keydown', this._keyDownHandler);\n      off(document, mousewheelEventName, this._mouseWheelHandler);\n      this._keyDownHandler = null;\n      this._mouseWheelHandler = null;\n    },\n    handleImgLoad(e) {\n      this.loading = false;\n    },\n    handleImgError(e) {\n      this.loading = false;\n      e.target.alt = '加载失败';\n    },\n    handleMouseDown(e) {\n      if (this.loading || e.button !== 0) return;\n\n      const { offsetX, offsetY } = this.transform;\n      const startX = e.pageX;\n      const startY = e.pageY;\n      this._dragHandler = rafThrottle(ev => {\n        this.transform.offsetX = offsetX + ev.pageX - startX;\n        this.transform.offsetY = offsetY + ev.pageY - startY;\n      });\n      on(document, 'mousemove', this._dragHandler);\n      on(document, 'mouseup', ev => {\n        off(document, 'mousemove', this._dragHandler);\n      });\n\n      e.preventDefault();\n    },\n    handleMaskClick() {\n      if (this.maskClosable) {\n        this.hide();\n      }\n    },\n    reset() {\n      this.transform = {\n        scale: 1,\n        deg: 0,\n        offsetX: 0,\n        offsetY: 0,\n        enableTransition: false\n      };\n    },\n    toggleMode() {\n      if (this.loading) return;\n\n      const modeNames = Object.keys(Mode);\n      const modeValues = Object.values(Mode);\n      const index = modeValues.indexOf(this.mode);\n      const nextIndex = (index + 1) % modeNames.length;\n      this.mode = Mode[modeNames[nextIndex]];\n      this.reset();\n    },\n    prev() {\n      if (this.isFirst && !this.infinite) return;\n      const len = this.urlList.length;\n      this.index = (this.index - 1 + len) % len;\n    },\n    next() {\n      if (this.isLast && !this.infinite) return;\n      const len = this.urlList.length;\n      this.index = (this.index + 1) % len;\n    },\n    handleActions(action, options = {}) {\n      if (this.loading) return;\n      const { zoomRate, rotateDeg, enableTransition } = {\n        zoomRate: 0.2,\n        rotateDeg: 90,\n        enableTransition: true,\n        ...options\n      };\n      const { transform } = this;\n      switch (action) {\n        case 'zoomOut':\n          if (transform.scale > 0.2) {\n            transform.scale = parseFloat((transform.scale - zoomRate).toFixed(3));\n          }\n          break;\n        case 'zoomIn':\n          transform.scale = parseFloat((transform.scale + zoomRate).toFixed(3));\n          break;\n        case 'clocelise':\n          transform.deg += rotateDeg;\n          break;\n        case 'anticlocelise':\n          transform.deg -= rotateDeg;\n          break;\n      }\n      transform.enableTransition = enableTransition;\n    }\n  },\n  mounted() {\n    this.deviceSupportInstall();\n    if (this.appendToBody) {\n      document.body.appendChild(this.$el);\n    }\n    // add tabindex then wrapper can be focusable via Javascript\n    // focus wrapper so arrow key can't cause inner scroll behavior underneath\n    this.$refs['el-image-viewer__wrapper'].focus();\n  },\n  destroyed() {\n    // if appendToBody is true, remove DOM node after destroy\n    if (this.appendToBody && this.$el && this.$el.parentNode) {\n      this.$el.parentNode.removeChild(this.$el);\n    }\n  }\n};\n</script>\n"
  },
  {
    "path": "packages/image/src/main.vue",
    "content": "<template>\n  <div class=\"el-image\">\n    <slot v-if=\"loading\" name=\"placeholder\">\n      <div class=\"el-image__placeholder\"></div>\n    </slot>\n    <slot v-else-if=\"error\" name=\"error\">\n      <div class=\"el-image__error\">{{ t('el.image.error') }}</div>\n    </slot>\n    <img\n      v-else\n      class=\"el-image__inner\"\n      v-bind=\"$attrs\"\n      v-on=\"$listeners\"\n      @click=\"clickHandler\"\n      :src=\"src\"\n      :style=\"imageStyle\"\n      :class=\"{ 'el-image__inner--center': alignCenter, 'el-image__preview': preview }\">\n    <template v-if=\"preview\">\n      <image-viewer :z-index=\"zIndex\" :initial-index=\"imageIndex\" v-if=\"showViewer\" :on-close=\"closeViewer\" :url-list=\"previewSrcList\"/>\n    </template>\n  </div>\n</template>\n\n<script>\n  import ImageViewer from './image-viewer';\n  import Locale from 'element-ui/src/mixins/locale';\n  import { on, off, getScrollContainer, isInContainer } from 'element-ui/src/utils/dom';\n  import { isString, isHtmlElement } from 'element-ui/src/utils/types';\n  import throttle from 'throttle-debounce/throttle';\n\n  const isSupportObjectFit = () => document.documentElement.style.objectFit !== undefined;\n\n  const ObjectFit = {\n    NONE: 'none',\n    CONTAIN: 'contain',\n    COVER: 'cover',\n    FILL: 'fill',\n    SCALE_DOWN: 'scale-down'\n  };\n\n  let prevOverflow = '';\n\n  export default {\n    name: 'ElImage',\n\n    mixins: [Locale],\n    inheritAttrs: false,\n\n    components: {\n      ImageViewer\n    },\n\n    props: {\n      src: String,\n      fit: String,\n      lazy: Boolean,\n      scrollContainer: {},\n      previewSrcList: {\n        type: Array,\n        default: () => []\n      },\n      zIndex: {\n        type: Number,\n        default: 2000\n      },\n      initialIndex: Number\n    },\n\n    data() {\n      return {\n        loading: true,\n        error: false,\n        show: !this.lazy,\n        imageWidth: 0,\n        imageHeight: 0,\n        showViewer: false\n      };\n    },\n\n    computed: {\n      imageStyle() {\n        const { fit } = this;\n        if (!this.$isServer && fit) {\n          return isSupportObjectFit()\n            ? { 'object-fit': fit }\n            : this.getImageStyle(fit);\n        }\n        return {};\n      },\n      alignCenter() {\n        return !this.$isServer && !isSupportObjectFit() && this.fit !== ObjectFit.FILL;\n      },\n      preview() {\n        const { previewSrcList } = this;\n        return Array.isArray(previewSrcList) && previewSrcList.length > 0;\n      },\n      imageIndex() {\n        let previewIndex = 0;\n        const initialIndex = this.initialIndex;\n        if (initialIndex >= 0) {\n          previewIndex = initialIndex;\n          return previewIndex;\n        }\n        const srcIndex = this.previewSrcList.indexOf(this.src);\n        if (srcIndex >= 0) {\n          previewIndex = srcIndex;\n          return previewIndex;\n        }\n        return previewIndex;\n      }\n    },\n\n    watch: {\n      src(val) {\n        this.show && this.loadImage();\n      },\n      show(val) {\n        val && this.loadImage();\n      }\n    },\n\n    mounted() {\n      if (this.lazy) {\n        this.addLazyLoadListener();\n      } else {\n        this.loadImage();\n      }\n    },\n\n    beforeDestroy() {\n      this.lazy && this.removeLazyLoadListener();\n    },\n\n    methods: {\n      loadImage() {\n        if (this.$isServer) return;\n\n        // reset status\n        this.loading = true;\n        this.error = false;\n\n        const img = new Image();\n        img.onload = e => this.handleLoad(e, img);\n        img.onerror = this.handleError.bind(this);\n\n        // bind html attrs\n        // so it can behave consistently\n        Object.keys(this.$attrs)\n          .forEach((key) => {\n            const value = this.$attrs[key];\n            img.setAttribute(key, value);\n          });\n        img.src = this.src;\n      },\n      handleLoad(e, img) {\n        this.imageWidth = img.width;\n        this.imageHeight = img.height;\n        this.loading = false;\n        this.error = false;\n      },\n      handleError(e) {\n        this.loading = false;\n        this.error = true;\n        this.$emit('error', e);\n      },\n      handleLazyLoad() {\n        if (isInContainer(this.$el, this._scrollContainer)) {\n          this.show = true;\n          this.removeLazyLoadListener();\n        }\n      },\n      addLazyLoadListener() {\n        if (this.$isServer) return;\n\n        const { scrollContainer } = this;\n        let _scrollContainer = null;\n\n        if (isHtmlElement(scrollContainer)) {\n          _scrollContainer = scrollContainer;\n        } else if (isString(scrollContainer)) {\n          _scrollContainer = document.querySelector(scrollContainer);\n        } else {\n          _scrollContainer = getScrollContainer(this.$el);\n        }\n\n        if (_scrollContainer) {\n          this._scrollContainer = _scrollContainer;\n          this._lazyLoadHandler = throttle(200, this.handleLazyLoad);\n          on(_scrollContainer, 'scroll', this._lazyLoadHandler);\n          this.handleLazyLoad();\n        }\n      },\n      removeLazyLoadListener() {\n        const { _scrollContainer, _lazyLoadHandler } = this;\n\n        if (this.$isServer || !_scrollContainer || !_lazyLoadHandler) return;\n\n        off(_scrollContainer, 'scroll', _lazyLoadHandler);\n        this._scrollContainer = null;\n        this._lazyLoadHandler = null;\n      },\n      /**\n       * simulate object-fit behavior to compatible with IE11 and other browsers which not support object-fit\n       */\n      getImageStyle(fit) {\n        const { imageWidth, imageHeight } = this;\n        const {\n          clientWidth: containerWidth,\n          clientHeight: containerHeight\n        } = this.$el;\n\n        if (!imageWidth || !imageHeight || !containerWidth || !containerHeight) return {};\n\n        const imageAspectRatio = imageWidth / imageHeight;\n        const containerAspectRatio = containerWidth / containerHeight;\n\n        if (fit === ObjectFit.SCALE_DOWN) {\n          const isSmaller = imageWidth < containerWidth && imageHeight < containerHeight;\n          fit = isSmaller ? ObjectFit.NONE : ObjectFit.CONTAIN;\n        }\n\n        switch (fit) {\n          case ObjectFit.NONE:\n            return { width: 'auto', height: 'auto' };\n          case ObjectFit.CONTAIN:\n            return (imageAspectRatio < containerAspectRatio) ? { width: 'auto' } : { height: 'auto' };\n          case ObjectFit.COVER:\n            return (imageAspectRatio < containerAspectRatio) ? { height: 'auto' } : { width: 'auto' };\n          default:\n            return {};\n        }\n      },\n      clickHandler() {\n        // don't show viewer when preview is false\n        if (!this.preview) {\n          return;\n        }\n        // prevent body scroll\n        prevOverflow = document.body.style.overflow;\n        document.body.style.overflow = 'hidden';\n        this.showViewer = true;\n      },\n      closeViewer() {\n        document.body.style.overflow = prevOverflow;\n        this.showViewer = false;\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/infinite-scroll/index.js",
    "content": "import InfiniteScroll from './src/main.js';\n\n/* istanbul ignore next */\nInfiniteScroll.install = function(Vue) {\n  Vue.directive(InfiniteScroll.name, InfiniteScroll);\n};\n\nexport default InfiniteScroll;\n"
  },
  {
    "path": "packages/infinite-scroll/src/main.js",
    "content": "import throttle from 'throttle-debounce/debounce';\nimport {\n  isHtmlElement,\n  isFunction,\n  isUndefined,\n  isDefined\n} from 'element-ui/src/utils/types';\nimport {\n  getScrollContainer\n} from 'element-ui/src/utils/dom';\n\nconst getStyleComputedProperty = (element, property) => {\n  if (element === window) {\n    element = document.documentElement;\n  }\n\n  if (element.nodeType !== 1) {\n    return [];\n  }\n  // NOTE: 1 DOM access here\n  const css = window.getComputedStyle(element, null);\n  return property ? css[property] : css;\n};\n\nconst entries = (obj) => {\n  return Object.keys(obj || {})\n    .map(key => ([key, obj[key]]));\n};\n\nconst getPositionSize = (el, prop) => {\n  return el === window || el === document\n    ? document.documentElement[prop]\n    : el[prop];\n};\n\nconst getOffsetHeight = el => {\n  return getPositionSize(el, 'offsetHeight');\n};\n\nconst getClientHeight = el => {\n  return getPositionSize(el, 'clientHeight');\n};\n\nconst scope = 'ElInfiniteScroll';\nconst attributes = {\n  delay: {\n    type: Number,\n    default: 200\n  },\n  distance: {\n    type: Number,\n    default: 0\n  },\n  disabled: {\n    type: Boolean,\n    default: false\n  },\n  immediate: {\n    type: Boolean,\n    default: true\n  }\n};\n\nconst getScrollOptions = (el, vm) => {\n  if (!isHtmlElement(el)) return {};\n\n  return entries(attributes).reduce((map, [key, option]) => {\n    const { type, default: defaultValue } = option;\n    let value = el.getAttribute(`infinite-scroll-${key}`);\n    value = isUndefined(vm[value]) ? value : vm[value];\n    switch (type) {\n      case Number:\n        value = Number(value);\n        value = Number.isNaN(value) ? defaultValue : value;\n        break;\n      case Boolean:\n        value = isDefined(value) ? value === 'false' ? false : Boolean(value) : defaultValue;\n        break;\n      default:\n        value = type(value);\n    }\n    map[key] = value;\n    return map;\n  }, {});\n};\n\nconst getElementTop = el => el.getBoundingClientRect().top;\n\nconst handleScroll = function(cb) {\n  const { el, vm, container, observer } = this[scope];\n  const { distance, disabled } = getScrollOptions(el, vm);\n\n  if (disabled) return;\n\n  const containerInfo = container.getBoundingClientRect();\n  if (!containerInfo.width && !containerInfo.height) return;\n\n  let shouldTrigger = false;\n\n  if (container === el) {\n    // be aware of difference between clientHeight & offsetHeight & window.getComputedStyle().height\n    const scrollBottom = container.scrollTop + getClientHeight(container);\n    shouldTrigger = container.scrollHeight - scrollBottom <= distance;\n  } else {\n    const heightBelowTop = getOffsetHeight(el) + getElementTop(el) - getElementTop(container);\n    const offsetHeight = getOffsetHeight(container);\n    const borderBottom = Number.parseFloat(getStyleComputedProperty(container, 'borderBottomWidth'));\n    shouldTrigger = heightBelowTop - offsetHeight + borderBottom <= distance;\n  }\n\n  if (shouldTrigger && isFunction(cb)) {\n    cb.call(vm);\n  } else if (observer) {\n    observer.disconnect();\n    this[scope].observer = null;\n  }\n\n};\n\nexport default {\n  name: 'InfiniteScroll',\n  inserted(el, binding, vnode) {\n    const cb = binding.value;\n\n    const vm = vnode.context;\n    // only include vertical scroll\n    const container = getScrollContainer(el, true);\n    const { delay, immediate } = getScrollOptions(el, vm);\n    const onScroll = throttle(delay, handleScroll.bind(el, cb));\n\n    el[scope] = { el, vm, container, onScroll };\n\n    if (container) {\n      container.addEventListener('scroll', onScroll);\n\n      if (immediate) {\n        const observer = el[scope].observer = new MutationObserver(onScroll);\n        observer.observe(container, { childList: true, subtree: true });\n        onScroll();\n      }\n    }\n  },\n  unbind(el) {\n    const { container, onScroll } = el[scope];\n    if (container) {\n      container.removeEventListener('scroll', onScroll);\n    }\n  }\n};\n\n"
  },
  {
    "path": "packages/input/index.js",
    "content": "import ElInput from './src/input';\n\n/* istanbul ignore next */\nElInput.install = function(Vue) {\n  Vue.component(ElInput.name, ElInput);\n};\n\nexport default ElInput;\n"
  },
  {
    "path": "packages/input/src/calcTextareaHeight.js",
    "content": "let hiddenTextarea;\n\nconst HIDDEN_STYLE = `\n  height:0 !important;\n  visibility:hidden !important;\n  overflow:hidden !important;\n  position:absolute !important;\n  z-index:-1000 !important;\n  top:0 !important;\n  right:0 !important\n`;\n\nconst CONTEXT_STYLE = [\n  'letter-spacing',\n  'line-height',\n  'padding-top',\n  'padding-bottom',\n  'font-family',\n  'font-weight',\n  'font-size',\n  'text-rendering',\n  'text-transform',\n  'width',\n  'text-indent',\n  'padding-left',\n  'padding-right',\n  'border-width',\n  'box-sizing'\n];\n\nfunction calculateNodeStyling(targetElement) {\n  const style = window.getComputedStyle(targetElement);\n\n  const boxSizing = style.getPropertyValue('box-sizing');\n\n  const paddingSize = (\n    parseFloat(style.getPropertyValue('padding-bottom')) +\n    parseFloat(style.getPropertyValue('padding-top'))\n  );\n\n  const borderSize = (\n    parseFloat(style.getPropertyValue('border-bottom-width')) +\n    parseFloat(style.getPropertyValue('border-top-width'))\n  );\n\n  const contextStyle = CONTEXT_STYLE\n    .map(name => `${name}:${style.getPropertyValue(name)}`)\n    .join(';');\n\n  return { contextStyle, paddingSize, borderSize, boxSizing };\n}\n\nexport default function calcTextareaHeight(\n  targetElement,\n  minRows = 1,\n  maxRows = null\n) {\n  if (!hiddenTextarea) {\n    hiddenTextarea = document.createElement('textarea');\n    document.body.appendChild(hiddenTextarea);\n  }\n\n  let {\n    paddingSize,\n    borderSize,\n    boxSizing,\n    contextStyle\n  } = calculateNodeStyling(targetElement);\n\n  hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`);\n  hiddenTextarea.value = targetElement.value || targetElement.placeholder || '';\n\n  let height = hiddenTextarea.scrollHeight;\n  const result = {};\n\n  if (boxSizing === 'border-box') {\n    height = height + borderSize;\n  } else if (boxSizing === 'content-box') {\n    height = height - paddingSize;\n  }\n\n  hiddenTextarea.value = '';\n  let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;\n\n  if (minRows !== null) {\n    let minHeight = singleRowHeight * minRows;\n    if (boxSizing === 'border-box') {\n      minHeight = minHeight + paddingSize + borderSize;\n    }\n    height = Math.max(minHeight, height);\n    result.minHeight = `${ minHeight }px`;\n  }\n  if (maxRows !== null) {\n    let maxHeight = singleRowHeight * maxRows;\n    if (boxSizing === 'border-box') {\n      maxHeight = maxHeight + paddingSize + borderSize;\n    }\n    height = Math.min(maxHeight, height);\n  }\n  result.height = `${ height }px`;\n  hiddenTextarea.parentNode && hiddenTextarea.parentNode.removeChild(hiddenTextarea);\n  hiddenTextarea = null;\n  return result;\n};\n"
  },
  {
    "path": "packages/input/src/input.vue",
    "content": "<template>\n  <div :class=\"[\n    type === 'textarea' ? 'el-textarea' : 'el-input',\n    inputSize ? 'el-input--' + inputSize : '',\n    {\n      'is-disabled': inputDisabled,\n      'is-exceed': inputExceed,\n      'el-input-group': $slots.prepend || $slots.append,\n      'el-input-group--append': $slots.append,\n      'el-input-group--prepend': $slots.prepend,\n      'el-input--prefix': $slots.prefix || prefixIcon,\n      'el-input--suffix': $slots.suffix || suffixIcon || clearable || showPassword\n    }\n    ]\"\n    @mouseenter=\"hovering = true\"\n    @mouseleave=\"hovering = false\"\n  >\n    <template v-if=\"type !== 'textarea'\">\n      <!-- 前置元素 -->\n      <div class=\"el-input-group__prepend\" v-if=\"$slots.prepend\">\n        <slot name=\"prepend\"></slot>\n      </div>\n      <input\n        :tabindex=\"tabindex\"\n        v-if=\"type !== 'textarea'\"\n        class=\"el-input__inner\"\n        v-bind=\"$attrs\"\n        :type=\"showPassword ? (passwordVisible ? 'text': 'password') : type\"\n        :disabled=\"inputDisabled\"\n        :readonly=\"readonly\"\n        :autocomplete=\"autoComplete || autocomplete\"\n        ref=\"input\"\n        @compositionstart=\"handleCompositionStart\"\n        @compositionupdate=\"handleCompositionUpdate\"\n        @compositionend=\"handleCompositionEnd\"\n        @input=\"handleInput\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n        @change=\"handleChange\"\n        :aria-label=\"label\"\n      >\n      <!-- 前置内容 -->\n      <span class=\"el-input__prefix\" v-if=\"$slots.prefix || prefixIcon\">\n        <slot name=\"prefix\"></slot>\n        <i class=\"el-input__icon\"\n           v-if=\"prefixIcon\"\n           :class=\"prefixIcon\">\n        </i>\n      </span>\n      <!-- 后置内容 -->\n      <span\n        class=\"el-input__suffix\"\n        v-if=\"getSuffixVisible()\">\n        <span class=\"el-input__suffix-inner\">\n          <template v-if=\"!showClear || !showPwdVisible || !isWordLimitVisible\">\n            <slot name=\"suffix\"></slot>\n            <i class=\"el-input__icon\"\n              v-if=\"suffixIcon\"\n              :class=\"suffixIcon\">\n            </i>\n          </template>\n          <i v-if=\"showClear\"\n            class=\"el-input__icon el-icon-circle-close el-input__clear\"\n            @mousedown.prevent\n            @click=\"clear\"\n          ></i>\n          <i v-if=\"showPwdVisible\"\n            class=\"el-input__icon el-icon-view el-input__clear\"\n            @click=\"handlePasswordVisible\"\n          ></i>\n          <span v-if=\"isWordLimitVisible\" class=\"el-input__count\">\n            <span class=\"el-input__count-inner\">\n              {{ textLength }}/{{ upperLimit }}\n            </span>\n          </span>\n        </span>\n        <i class=\"el-input__icon\"\n          v-if=\"validateState\"\n          :class=\"['el-input__validateIcon', validateIcon]\">\n        </i>\n      </span>\n      <!-- 后置元素 -->\n      <div class=\"el-input-group__append\" v-if=\"$slots.append\">\n        <slot name=\"append\"></slot>\n      </div>\n    </template>\n    <textarea\n      v-else\n      :tabindex=\"tabindex\"\n      class=\"el-textarea__inner\"\n      @compositionstart=\"handleCompositionStart\"\n      @compositionupdate=\"handleCompositionUpdate\"\n      @compositionend=\"handleCompositionEnd\"\n      @input=\"handleInput\"\n      ref=\"textarea\"\n      v-bind=\"$attrs\"\n      :disabled=\"inputDisabled\"\n      :readonly=\"readonly\"\n      :autocomplete=\"autoComplete || autocomplete\"\n      :style=\"textareaStyle\"\n      @focus=\"handleFocus\"\n      @blur=\"handleBlur\"\n      @change=\"handleChange\"\n      :aria-label=\"label\"\n    >\n    </textarea>\n    <span v-if=\"isWordLimitVisible && type === 'textarea'\" class=\"el-input__count\">{{ textLength }}/{{ upperLimit }}</span>\n  </div>\n</template>\n<script>\n  import emitter from 'element-ui/src/mixins/emitter';\n  import Migrating from 'element-ui/src/mixins/migrating';\n  import calcTextareaHeight from './calcTextareaHeight';\n  import merge from 'element-ui/src/utils/merge';\n  import {isKorean} from 'element-ui/src/utils/shared';\n\n  export default {\n    name: 'ElInput',\n\n    componentName: 'ElInput',\n\n    mixins: [emitter, Migrating],\n\n    inheritAttrs: false,\n\n    inject: {\n      elForm: {\n        default: ''\n      },\n      elFormItem: {\n        default: ''\n      }\n    },\n\n    data() {\n      return {\n        textareaCalcStyle: {},\n        hovering: false,\n        focused: false,\n        isComposing: false,\n        passwordVisible: false\n      };\n    },\n\n    props: {\n      value: [String, Number],\n      size: String,\n      resize: String,\n      form: String,\n      disabled: Boolean,\n      readonly: Boolean,\n      type: {\n        type: String,\n        default: 'text'\n      },\n      autosize: {\n        type: [Boolean, Object],\n        default: false\n      },\n      autocomplete: {\n        type: String,\n        default: 'off'\n      },\n      /** @Deprecated in next major version */\n      autoComplete: {\n        type: String,\n        validator(val) {\n          process.env.NODE_ENV !== 'production' &&\n            console.warn('[Element Warn][Input]\\'auto-complete\\' property will be deprecated in next major version. please use \\'autocomplete\\' instead.');\n          return true;\n        }\n      },\n      validateEvent: {\n        type: Boolean,\n        default: true\n      },\n      suffixIcon: String,\n      prefixIcon: String,\n      label: String,\n      clearable: {\n        type: Boolean,\n        default: false\n      },\n      showPassword: {\n        type: Boolean,\n        default: false\n      },\n      showWordLimit: {\n        type: Boolean,\n        default: false\n      },\n      tabindex: String\n    },\n\n    computed: {\n      _elFormItemSize() {\n        return (this.elFormItem || {}).elFormItemSize;\n      },\n      validateState() {\n        return this.elFormItem ? this.elFormItem.validateState : '';\n      },\n      needStatusIcon() {\n        return this.elForm ? this.elForm.statusIcon : false;\n      },\n      validateIcon() {\n        return {\n          validating: 'el-icon-loading',\n          success: 'el-icon-circle-check',\n          error: 'el-icon-circle-close'\n        }[this.validateState];\n      },\n      textareaStyle() {\n        return merge({}, this.textareaCalcStyle, { resize: this.resize });\n      },\n      inputSize() {\n        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;\n      },\n      inputDisabled() {\n        return this.disabled || (this.elForm || {}).disabled;\n      },\n      nativeInputValue() {\n        return this.value === null || this.value === undefined ? '' : String(this.value);\n      },\n      showClear() {\n        return this.clearable &&\n          !this.inputDisabled &&\n          !this.readonly &&\n          this.nativeInputValue &&\n          (this.focused || this.hovering);\n      },\n      showPwdVisible() {\n        return this.showPassword &&\n          !this.inputDisabled &&\n          !this.readonly &&\n          (!!this.nativeInputValue || this.focused);\n      },\n      isWordLimitVisible() {\n        return this.showWordLimit &&\n          this.$attrs.maxlength &&\n          (this.type === 'text' || this.type === 'textarea') &&\n          !this.inputDisabled &&\n          !this.readonly &&\n          !this.showPassword;\n      },\n      upperLimit() {\n        return this.$attrs.maxlength;\n      },\n      textLength() {\n        if (typeof this.value === 'number') {\n          return String(this.value).length;\n        }\n\n        return (this.value || '').length;\n      },\n      inputExceed() {\n        // show exceed style if length of initial value greater then maxlength\n        return this.isWordLimitVisible &&\n          (this.textLength > this.upperLimit);\n      }\n    },\n\n    watch: {\n      value(val) {\n        this.$nextTick(this.resizeTextarea);\n        if (this.validateEvent) {\n          this.dispatch('ElFormItem', 'el.form.change', [val]);\n        }\n      },\n      // native input value is set explicitly\n      // do not use v-model / :value in template\n      // see: https://github.com/ElemeFE/element/issues/14521\n      nativeInputValue() {\n        this.setNativeInputValue();\n      },\n      // when change between <input> and <textarea>,\n      // update DOM dependent value and styles\n      // https://github.com/ElemeFE/element/issues/14857\n      type() {\n        this.$nextTick(() => {\n          this.setNativeInputValue();\n          this.resizeTextarea();\n          this.updateIconOffset();\n        });\n      }\n    },\n\n    methods: {\n      focus() {\n        this.getInput().focus();\n      },\n      blur() {\n        this.getInput().blur();\n      },\n      getMigratingConfig() {\n        return {\n          props: {\n            'icon': 'icon is removed, use suffix-icon / prefix-icon instead.',\n            'on-icon-click': 'on-icon-click is removed.'\n          },\n          events: {\n            'click': 'click is removed.'\n          }\n        };\n      },\n      handleBlur(event) {\n        this.focused = false;\n        this.$emit('blur', event);\n        if (this.validateEvent) {\n          this.dispatch('ElFormItem', 'el.form.blur', [this.value]);\n        }\n      },\n      select() {\n        this.getInput().select();\n      },\n      resizeTextarea() {\n        if (this.$isServer) return;\n        const { autosize, type } = this;\n        if (type !== 'textarea') return;\n        if (!autosize) {\n          this.textareaCalcStyle = {\n            minHeight: calcTextareaHeight(this.$refs.textarea).minHeight\n          };\n          return;\n        }\n        const minRows = autosize.minRows;\n        const maxRows = autosize.maxRows;\n\n        this.textareaCalcStyle = calcTextareaHeight(this.$refs.textarea, minRows, maxRows);\n      },\n      setNativeInputValue() {\n        const input = this.getInput();\n        if (!input) return;\n        if (input.value === this.nativeInputValue) return;\n        input.value = this.nativeInputValue;\n      },\n      handleFocus(event) {\n        this.focused = true;\n        this.$emit('focus', event);\n      },\n      handleCompositionStart(event) {\n        this.$emit('compositionstart', event);\n        this.isComposing = true;\n      },\n      handleCompositionUpdate(event) {\n        this.$emit('compositionupdate', event);\n        const text = event.target.value;\n        const lastCharacter = text[text.length - 1] || '';\n        this.isComposing = !isKorean(lastCharacter);\n      },\n      handleCompositionEnd(event) {\n        this.$emit('compositionend', event);\n        if (this.isComposing) {\n          this.isComposing = false;\n          this.handleInput(event);\n        }\n      },\n      handleInput(event) {\n        // should not emit input during composition\n        // see: https://github.com/ElemeFE/element/issues/10516\n        if (this.isComposing) return;\n\n        // hack for https://github.com/ElemeFE/element/issues/8548\n        // should remove the following line when we don't support IE\n        if (event.target.value === this.nativeInputValue) return;\n\n        this.$emit('input', event.target.value);\n\n        // ensure native input value is controlled\n        // see: https://github.com/ElemeFE/element/issues/12850\n        this.$nextTick(this.setNativeInputValue);\n      },\n      handleChange(event) {\n        this.$emit('change', event.target.value);\n      },\n      calcIconOffset(place) {\n        let elList = [].slice.call(this.$el.querySelectorAll(`.el-input__${place}`) || []);\n        if (!elList.length) return;\n        let el = null;\n        for (let i = 0; i < elList.length; i++) {\n          if (elList[i].parentNode === this.$el) {\n            el = elList[i];\n            break;\n          }\n        }\n        if (!el) return;\n        const pendantMap = {\n          suffix: 'append',\n          prefix: 'prepend'\n        };\n\n        const pendant = pendantMap[place];\n        if (this.$slots[pendant]) {\n          el.style.transform = `translateX(${place === 'suffix' ? '-' : ''}${this.$el.querySelector(`.el-input-group__${pendant}`).offsetWidth}px)`;\n        } else {\n          el.removeAttribute('style');\n        }\n      },\n      updateIconOffset() {\n        this.calcIconOffset('prefix');\n        this.calcIconOffset('suffix');\n      },\n      clear() {\n        this.$emit('input', '');\n        this.$emit('change', '');\n        this.$emit('clear');\n      },\n      handlePasswordVisible() {\n        this.passwordVisible = !this.passwordVisible;\n        this.$nextTick(() => {\n          this.focus();\n        });\n      },\n      getInput() {\n        return this.$refs.input || this.$refs.textarea;\n      },\n      getSuffixVisible() {\n        return this.$slots.suffix ||\n          this.suffixIcon ||\n          this.showClear ||\n          this.showPassword ||\n          this.isWordLimitVisible ||\n          (this.validateState && this.needStatusIcon);\n      }\n    },\n\n    created() {\n      this.$on('inputSelect', this.select);\n    },\n\n    mounted() {\n      this.setNativeInputValue();\n      this.resizeTextarea();\n      this.updateIconOffset();\n    },\n\n    updated() {\n      this.$nextTick(this.updateIconOffset);\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/input-number/index.js",
    "content": "import ElInputNumber from './src/input-number';\n\n/* istanbul ignore next */\nElInputNumber.install = function(Vue) {\n  Vue.component(ElInputNumber.name, ElInputNumber);\n};\n\nexport default ElInputNumber;\n"
  },
  {
    "path": "packages/input-number/src/input-number.vue",
    "content": "<template>\n  <div\n    @dragstart.prevent\n    :class=\"[\n      'el-input-number',\n      inputNumberSize ? 'el-input-number--' + inputNumberSize : '',\n      { 'is-disabled': inputNumberDisabled },\n      { 'is-without-controls': !controls },\n      { 'is-controls-right': controlsAtRight }\n    ]\">\n    <span\n      class=\"el-input-number__decrease\"\n      role=\"button\"\n      v-if=\"controls\"\n      v-repeat-click=\"decrease\"\n      :class=\"{'is-disabled': minDisabled}\"\n      @keydown.enter=\"decrease\">\n      <i :class=\"`el-icon-${controlsAtRight ? 'arrow-down' : 'minus'}`\"></i>\n    </span>\n    <span\n      class=\"el-input-number__increase\"\n      role=\"button\"\n      v-if=\"controls\"\n      v-repeat-click=\"increase\"\n      :class=\"{'is-disabled': maxDisabled}\"\n      @keydown.enter=\"increase\">\n      <i :class=\"`el-icon-${controlsAtRight ? 'arrow-up' : 'plus'}`\"></i>\n    </span>\n    <el-input\n      ref=\"input\"\n      :value=\"displayValue\"\n      :placeholder=\"placeholder\"\n      :disabled=\"inputNumberDisabled\"\n      :size=\"inputNumberSize\"\n      :max=\"max\"\n      :min=\"min\"\n      :name=\"name\"\n      :label=\"label\"\n      @keydown.up.native.prevent=\"increase\"\n      @keydown.down.native.prevent=\"decrease\"\n      @blur=\"handleBlur\"\n      @focus=\"handleFocus\"\n      @input=\"handleInput\"\n      @change=\"handleInputChange\">\n    </el-input>\n  </div>\n</template>\n<script>\n  import ElInput from 'element-ui/packages/input';\n  import Focus from 'element-ui/src/mixins/focus';\n  import RepeatClick from 'element-ui/src/directives/repeat-click';\n\n  export default {\n    name: 'ElInputNumber',\n    mixins: [Focus('input')],\n    inject: {\n      elForm: {\n        default: ''\n      },\n      elFormItem: {\n        default: ''\n      }\n    },\n    directives: {\n      repeatClick: RepeatClick\n    },\n    components: {\n      ElInput\n    },\n    props: {\n      step: {\n        type: Number,\n        default: 1\n      },\n      stepStrictly: {\n        type: Boolean,\n        default: false\n      },\n      max: {\n        type: Number,\n        default: Infinity\n      },\n      min: {\n        type: Number,\n        default: -Infinity\n      },\n      value: {},\n      disabled: Boolean,\n      size: String,\n      controls: {\n        type: Boolean,\n        default: true\n      },\n      controlsPosition: {\n        type: String,\n        default: ''\n      },\n      name: String,\n      label: String,\n      placeholder: String,\n      precision: {\n        type: Number,\n        validator(val) {\n          return val >= 0 && val === parseInt(val, 10);\n        }\n      }\n    },\n    data() {\n      return {\n        currentValue: 0,\n        userInput: null\n      };\n    },\n    watch: {\n      value: {\n        immediate: true,\n        handler(value) {\n          let newVal = value === undefined ? value : Number(value);\n          if (newVal !== undefined) {\n            if (isNaN(newVal)) {\n              return;\n            }\n\n            if (this.stepStrictly) {\n              const stepPrecision = this.getPrecision(this.step);\n              const precisionFactor = Math.pow(10, stepPrecision);\n              newVal = Math.round(newVal / this.step) * precisionFactor * this.step / precisionFactor;\n            }\n\n            if (this.precision !== undefined) {\n              newVal = this.toPrecision(newVal, this.precision);\n            }\n          }\n          if (newVal >= this.max) newVal = this.max;\n          if (newVal <= this.min) newVal = this.min;\n          this.currentValue = newVal;\n          this.userInput = null;\n          this.$emit('input', newVal);\n        }\n      }\n    },\n    computed: {\n      minDisabled() {\n        return this._decrease(this.value, this.step) < this.min;\n      },\n      maxDisabled() {\n        return this._increase(this.value, this.step) > this.max;\n      },\n      numPrecision() {\n        const { value, step, getPrecision, precision } = this;\n        const stepPrecision = getPrecision(step);\n        if (precision !== undefined) {\n          if (stepPrecision > precision) {\n            console.warn('[Element Warn][InputNumber]precision should not be less than the decimal places of step');\n          }\n          return precision;\n        } else {\n          return Math.max(getPrecision(value), stepPrecision);\n        }\n      },\n      controlsAtRight() {\n        return this.controls && this.controlsPosition === 'right';\n      },\n      _elFormItemSize() {\n        return (this.elFormItem || {}).elFormItemSize;\n      },\n      inputNumberSize() {\n        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;\n      },\n      inputNumberDisabled() {\n        return this.disabled || !!(this.elForm || {}).disabled;\n      },\n      displayValue() {\n        if (this.userInput !== null) {\n          return this.userInput;\n        }\n\n        let currentValue = this.currentValue;\n\n        if (typeof currentValue === 'number') {\n          if (this.stepStrictly) {\n            const stepPrecision = this.getPrecision(this.step);\n            const precisionFactor = Math.pow(10, stepPrecision);\n            currentValue = Math.round(currentValue / this.step) * precisionFactor * this.step / precisionFactor;\n          }\n\n          if (this.precision !== undefined) {\n            currentValue = currentValue.toFixed(this.precision);\n          }\n        }\n\n        return currentValue;\n      }\n    },\n    methods: {\n      toPrecision(num, precision) {\n        if (precision === undefined) precision = this.numPrecision;\n        return parseFloat(Math.round(num * Math.pow(10, precision)) / Math.pow(10, precision));\n      },\n      getPrecision(value) {\n        if (value === undefined) return 0;\n        const valueString = value.toString();\n        const dotPosition = valueString.indexOf('.');\n        let precision = 0;\n        if (dotPosition !== -1) {\n          precision = valueString.length - dotPosition - 1;\n        }\n        return precision;\n      },\n      _increase(val, step) {\n        if (typeof val !== 'number' && val !== undefined) return this.currentValue;\n\n        const precisionFactor = Math.pow(10, this.numPrecision);\n        // Solve the accuracy problem of JS decimal calculation by converting the value to integer.\n        return this.toPrecision((precisionFactor * val + precisionFactor * step) / precisionFactor);\n      },\n      _decrease(val, step) {\n        if (typeof val !== 'number' && val !== undefined) return this.currentValue;\n\n        const precisionFactor = Math.pow(10, this.numPrecision);\n\n        return this.toPrecision((precisionFactor * val - precisionFactor * step) / precisionFactor);\n      },\n      increase() {\n        if (this.inputNumberDisabled || this.maxDisabled) return;\n        const value = this.value || 0;\n        const newVal = this._increase(value, this.step);\n        this.setCurrentValue(newVal);\n      },\n      decrease() {\n        if (this.inputNumberDisabled || this.minDisabled) return;\n        const value = this.value || 0;\n        const newVal = this._decrease(value, this.step);\n        this.setCurrentValue(newVal);\n      },\n      handleBlur(event) {\n        this.$emit('blur', event);\n      },\n      handleFocus(event) {\n        this.$emit('focus', event);\n      },\n      setCurrentValue(newVal) {\n        const oldVal = this.currentValue;\n        if (typeof newVal === 'number' && this.precision !== undefined) {\n          newVal = this.toPrecision(newVal, this.precision);\n        }\n        if (newVal >= this.max) newVal = this.max;\n        if (newVal <= this.min) newVal = this.min;\n        if (oldVal === newVal) return;\n        this.userInput = null;\n        this.$emit('input', newVal);\n        this.$emit('change', newVal, oldVal);\n        this.currentValue = newVal;\n      },\n      handleInput(value) {\n        this.userInput = value;\n      },\n      handleInputChange(value) {\n        const newVal = value === '' ? undefined : Number(value);\n        if (!isNaN(newVal) || value === '') {\n          this.setCurrentValue(newVal);\n        }\n        this.userInput = null;\n      },\n      select() {\n        this.$refs.input.select();\n      }\n    },\n    mounted() {\n      let innerInput = this.$refs.input.$refs.input;\n      innerInput.setAttribute('role', 'spinbutton');\n      innerInput.setAttribute('aria-valuemax', this.max);\n      innerInput.setAttribute('aria-valuemin', this.min);\n      innerInput.setAttribute('aria-valuenow', this.currentValue);\n      innerInput.setAttribute('aria-disabled', this.inputNumberDisabled);\n    },\n    updated() {\n      if (!this.$refs || !this.$refs.input) return;\n      const innerInput = this.$refs.input.$refs.input;\n      innerInput.setAttribute('aria-valuenow', this.currentValue);\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/link/index.js",
    "content": "import Link from './src/main';\n\n/* istanbul ignore next */\nLink.install = function(Vue) {\n  Vue.component(Link.name, Link);\n};\n\nexport default Link;\n"
  },
  {
    "path": "packages/link/src/main.vue",
    "content": "<template>\n  <a\n    :class=\"[\n      'el-link',\n      type ? `el-link--${type}` : '',\n      disabled && 'is-disabled',\n      underline && !disabled && 'is-underline'\n    ]\"\n    :href=\"disabled ? null : href\"\n    v-bind=\"$attrs\"\n    @click=\"handleClick\"\n  >\n\n    <i :class=\"icon\" v-if=\"icon\"></i>\n\n    <span v-if=\"$slots.default\" class=\"el-link--inner\">\n      <slot></slot>\n    </span>\n\n    <template v-if=\"$slots.icon\"><slot v-if=\"$slots.icon\" name=\"icon\"></slot></template>\n  </a>\n</template>\n\n<script>\n\nexport default {\n  name: 'ElLink',\n\n  props: {\n    type: {\n      type: String,\n      default: 'default'\n    },\n    underline: {\n      type: Boolean,\n      default: true\n    },\n    disabled: Boolean,\n    href: String,\n    icon: String\n  },\n\n  methods: {\n    handleClick(event) {\n      if (!this.disabled) {\n        if (!this.href) {\n          this.$emit('click', event);\n        }\n      }\n    }\n  }\n};\n</script>\n"
  },
  {
    "path": "packages/loading/index.js",
    "content": "import directive from './src/directive';\nimport service from './src/index';\n\nexport default {\n  install(Vue) {\n    Vue.use(directive);\n    Vue.prototype.$loading = service;\n  },\n  directive,\n  service\n};\n"
  },
  {
    "path": "packages/loading/src/directive.js",
    "content": "import Vue from 'vue';\nimport Loading from './loading.vue';\nimport { addClass, removeClass, getStyle } from 'element-ui/src/utils/dom';\nimport { PopupManager } from 'element-ui/src/utils/popup';\nimport afterLeave from 'element-ui/src/utils/after-leave';\nconst Mask = Vue.extend(Loading);\n\nconst loadingDirective = {};\nloadingDirective.install = Vue => {\n  if (Vue.prototype.$isServer) return;\n  const toggleLoading = (el, binding) => {\n    if (binding.value) {\n      Vue.nextTick(() => {\n        if (binding.modifiers.fullscreen) {\n          el.originalPosition = getStyle(document.body, 'position');\n          el.originalOverflow = getStyle(document.body, 'overflow');\n          el.maskStyle.zIndex = PopupManager.nextZIndex();\n\n          addClass(el.mask, 'is-fullscreen');\n          insertDom(document.body, el, binding);\n        } else {\n          removeClass(el.mask, 'is-fullscreen');\n\n          if (binding.modifiers.body) {\n            el.originalPosition = getStyle(document.body, 'position');\n\n            ['top', 'left'].forEach(property => {\n              const scroll = property === 'top' ? 'scrollTop' : 'scrollLeft';\n              el.maskStyle[property] = el.getBoundingClientRect()[property] +\n                document.body[scroll] +\n                document.documentElement[scroll] -\n                parseInt(getStyle(document.body, `margin-${ property }`), 10) +\n                'px';\n            });\n            ['height', 'width'].forEach(property => {\n              el.maskStyle[property] = el.getBoundingClientRect()[property] + 'px';\n            });\n\n            insertDom(document.body, el, binding);\n          } else {\n            el.originalPosition = getStyle(el, 'position');\n            insertDom(el, el, binding);\n          }\n        }\n      });\n    } else {\n      afterLeave(el.instance, _ => {\n        if (!el.instance.hiding) return;\n        el.domVisible = false;\n        const target = binding.modifiers.fullscreen || binding.modifiers.body\n          ? document.body\n          : el;\n        removeClass(target, 'el-loading-parent--relative');\n        removeClass(target, 'el-loading-parent--hidden');\n        el.instance.hiding = false;\n      }, 300, true);\n      el.instance.visible = false;\n      el.instance.hiding = true;\n    }\n  };\n  const insertDom = (parent, el, binding) => {\n    if (!el.domVisible && getStyle(el, 'display') !== 'none' && getStyle(el, 'visibility') !== 'hidden') {\n      Object.keys(el.maskStyle).forEach(property => {\n        el.mask.style[property] = el.maskStyle[property];\n      });\n\n      if (el.originalPosition !== 'absolute' && el.originalPosition !== 'fixed' && el.originalPosition !== 'sticky') {\n        addClass(parent, 'el-loading-parent--relative');\n      }\n      if (binding.modifiers.fullscreen && binding.modifiers.lock) {\n        addClass(parent, 'el-loading-parent--hidden');\n      }\n      el.domVisible = true;\n\n      parent.appendChild(el.mask);\n      Vue.nextTick(() => {\n        if (el.instance.hiding) {\n          el.instance.$emit('after-leave');\n        } else {\n          el.instance.visible = true;\n        }\n      });\n      el.domInserted = true;\n    } else if (el.domVisible && el.instance.hiding === true) {\n      el.instance.visible = true;\n      el.instance.hiding = false;\n    }\n  };\n\n  Vue.directive('loading', {\n    bind: function(el, binding, vnode) {\n      const textExr = el.getAttribute('element-loading-text');\n      const spinnerExr = el.getAttribute('element-loading-spinner');\n      const backgroundExr = el.getAttribute('element-loading-background');\n      const customClassExr = el.getAttribute('element-loading-custom-class');\n      const vm = vnode.context;\n      const mask = new Mask({\n        el: document.createElement('div'),\n        data: {\n          text: vm && vm[textExr] || textExr,\n          spinner: vm && vm[spinnerExr] || spinnerExr,\n          background: vm && vm[backgroundExr] || backgroundExr,\n          customClass: vm && vm[customClassExr] || customClassExr,\n          fullscreen: !!binding.modifiers.fullscreen\n        }\n      });\n      el.instance = mask;\n      el.mask = mask.$el;\n      el.maskStyle = {};\n\n      binding.value && toggleLoading(el, binding);\n    },\n\n    update: function(el, binding) {\n      el.instance.setText(el.getAttribute('element-loading-text'));\n      if (binding.oldValue !== binding.value) {\n        toggleLoading(el, binding);\n      }\n    },\n\n    unbind: function(el, binding) {\n      if (el.domInserted) {\n        el.mask &&\n        el.mask.parentNode &&\n        el.mask.parentNode.removeChild(el.mask);\n        toggleLoading(el, { value: false, modifiers: binding.modifiers });\n      }\n      el.instance && el.instance.$destroy();\n    }\n  });\n};\n\nexport default loadingDirective;\n"
  },
  {
    "path": "packages/loading/src/index.js",
    "content": "import Vue from 'vue';\nimport loadingVue from './loading.vue';\nimport { addClass, removeClass, getStyle } from 'element-ui/src/utils/dom';\nimport { PopupManager } from 'element-ui/src/utils/popup';\nimport afterLeave from 'element-ui/src/utils/after-leave';\nimport merge from 'element-ui/src/utils/merge';\n\nconst LoadingConstructor = Vue.extend(loadingVue);\n\nconst defaults = {\n  text: null,\n  fullscreen: true,\n  body: false,\n  lock: false,\n  customClass: ''\n};\n\nlet fullscreenLoading;\n\nLoadingConstructor.prototype.originalPosition = '';\nLoadingConstructor.prototype.originalOverflow = '';\n\nLoadingConstructor.prototype.close = function() {\n  if (this.fullscreen) {\n    fullscreenLoading = undefined;\n  }\n  afterLeave(this, _ => {\n    const target = this.fullscreen || this.body\n      ? document.body\n      : this.target;\n    removeClass(target, 'el-loading-parent--relative');\n    removeClass(target, 'el-loading-parent--hidden');\n    if (this.$el && this.$el.parentNode) {\n      this.$el.parentNode.removeChild(this.$el);\n    }\n    this.$destroy();\n  }, 300);\n  this.visible = false;\n};\n\nconst addStyle = (options, parent, instance) => {\n  let maskStyle = {};\n  if (options.fullscreen) {\n    instance.originalPosition = getStyle(document.body, 'position');\n    instance.originalOverflow = getStyle(document.body, 'overflow');\n    maskStyle.zIndex = PopupManager.nextZIndex();\n  } else if (options.body) {\n    instance.originalPosition = getStyle(document.body, 'position');\n    ['top', 'left'].forEach(property => {\n      let scroll = property === 'top' ? 'scrollTop' : 'scrollLeft';\n      maskStyle[property] = options.target.getBoundingClientRect()[property] +\n        document.body[scroll] +\n        document.documentElement[scroll] +\n        'px';\n    });\n    ['height', 'width'].forEach(property => {\n      maskStyle[property] = options.target.getBoundingClientRect()[property] + 'px';\n    });\n  } else {\n    instance.originalPosition = getStyle(parent, 'position');\n  }\n  Object.keys(maskStyle).forEach(property => {\n    instance.$el.style[property] = maskStyle[property];\n  });\n};\n\nconst Loading = (options = {}) => {\n  if (Vue.prototype.$isServer) return;\n  options = merge({}, defaults, options);\n  if (typeof options.target === 'string') {\n    options.target = document.querySelector(options.target);\n  }\n  options.target = options.target || document.body;\n  if (options.target !== document.body) {\n    options.fullscreen = false;\n  } else {\n    options.body = true;\n  }\n  if (options.fullscreen && fullscreenLoading) {\n    return fullscreenLoading;\n  }\n\n  let parent = options.body ? document.body : options.target;\n  let instance = new LoadingConstructor({\n    el: document.createElement('div'),\n    data: options\n  });\n\n  addStyle(options, parent, instance);\n  if (instance.originalPosition !== 'absolute' && instance.originalPosition !== 'fixed' && instance.originalPosition !== 'sticky') {\n    addClass(parent, 'el-loading-parent--relative');\n  }\n  if (options.fullscreen && options.lock) {\n    addClass(parent, 'el-loading-parent--hidden');\n  }\n  parent.appendChild(instance.$el);\n  Vue.nextTick(() => {\n    instance.visible = true;\n  });\n  if (options.fullscreen) {\n    fullscreenLoading = instance;\n  }\n  return instance;\n};\n\nexport default Loading;\n"
  },
  {
    "path": "packages/loading/src/loading.vue",
    "content": "<template>\n  <transition name=\"el-loading-fade\" @after-leave=\"handleAfterLeave\">\n    <div\n      v-show=\"visible\"\n      class=\"el-loading-mask\"\n      :style=\"{ backgroundColor: background || '' }\"\n      :class=\"[customClass, { 'is-fullscreen': fullscreen }]\">\n      <div class=\"el-loading-spinner\">\n        <svg v-if=\"!spinner\" class=\"circular\" viewBox=\"25 25 50 50\">\n          <circle class=\"path\" cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\"/>\n        </svg>\n        <i v-else :class=\"spinner\"></i>\n        <p v-if=\"text\" class=\"el-loading-text\">{{ text }}</p>\n      </div>\n    </div>\n  </transition>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        text: null,\n        spinner: null,\n        background: null,\n        fullscreen: true,\n        visible: false,\n        customClass: ''\n      };\n    },\n\n    methods: {\n      handleAfterLeave() {\n        this.$emit('after-leave');\n      },\n      setText(text) {\n        this.text = text;\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/main/index.js",
    "content": "import Main from './src/main';\n\n/* istanbul ignore next */\nMain.install = function(Vue) {\n  Vue.component(Main.name, Main);\n};\n\nexport default Main;\n"
  },
  {
    "path": "packages/main/src/main.vue",
    "content": "<template>\n  <main class=\"el-main\">\n    <slot></slot>\n  </main>\n</template>\n\n<script>\n  export default {\n    name: 'ElMain',\n    componentName: 'ElMain'\n  };\n</script>\n"
  },
  {
    "path": "packages/menu/index.js",
    "content": "import ElMenu from './src/menu';\n\n/* istanbul ignore next */\nElMenu.install = function(Vue) {\n  Vue.component(ElMenu.name, ElMenu);\n};\n\nexport default ElMenu;\n"
  },
  {
    "path": "packages/menu/src/menu-item-group.vue",
    "content": "<template>\n  <li class=\"el-menu-item-group\">\n    <div class=\"el-menu-item-group__title\" :style=\"{paddingLeft: levelPadding + 'px'}\">\n      <template v-if=\"!$slots.title\">{{title}}</template>\n      <slot v-else name=\"title\"></slot>\n    </div>\n    <ul>\n      <slot></slot>\n    </ul>\n  </li>\n</template>\n<script>\n  export default {\n    name: 'ElMenuItemGroup',\n\n    componentName: 'ElMenuItemGroup',\n\n    inject: ['rootMenu'],\n    props: {\n      title: {\n        type: String\n      }\n    },\n    data() {\n      return {\n        paddingLeft: 20\n      };\n    },\n    computed: {\n      levelPadding() {\n        let padding = 20;\n        let parent = this.$parent;\n        if (this.rootMenu.collapse) return 20;\n        while (parent && parent.$options.componentName !== 'ElMenu') {\n          if (parent.$options.componentName === 'ElSubmenu') {\n            padding += 20;\n          }\n          parent = parent.$parent;\n        }\n        return padding;\n      }\n    }\n  };\n</script>\n\n"
  },
  {
    "path": "packages/menu/src/menu-item.vue",
    "content": "<template>\n  <li class=\"el-menu-item\"\n    role=\"menuitem\"\n    tabindex=\"-1\"\n    :style=\"[paddingStyle, itemStyle, { backgroundColor }]\"\n    :class=\"{\n      'is-active': active,\n      'is-disabled': disabled\n    }\"\n    @click=\"handleClick\"\n    @mouseenter=\"onMouseEnter\"\n    @focus=\"onMouseEnter\"\n    @blur=\"onMouseLeave\"\n    @mouseleave=\"onMouseLeave\"\n  >\n    <el-tooltip\n      v-if=\"parentMenu.$options.componentName === 'ElMenu' && rootMenu.collapse && $slots.title\"\n      effect=\"dark\"\n      placement=\"right\">\n      <div slot=\"content\"><slot name=\"title\"></slot></div>\n      <div style=\"position: absolute;left: 0;top: 0;height: 100%;width: 100%;display: inline-block;box-sizing: border-box;padding: 0 20px;\">\n        <slot></slot>\n      </div>\n    </el-tooltip>\n    <template v-else>\n      <slot></slot>\n      <slot name=\"title\"></slot>\n    </template>\n  </li>\n</template>\n<script>\n  import Menu from './menu-mixin';\n  import ElTooltip from 'element-ui/packages/tooltip';\n  import Emitter from 'element-ui/src/mixins/emitter';\n\n  export default {\n    name: 'ElMenuItem',\n\n    componentName: 'ElMenuItem',\n\n    mixins: [Menu, Emitter],\n\n    components: { ElTooltip },\n\n    props: {\n      index: {\n        default: null,\n        validator: val => typeof val === 'string' || val === null\n      },\n      route: [String, Object],\n      disabled: Boolean\n    },\n    computed: {\n      active() {\n        return this.index === this.rootMenu.activeIndex;\n      },\n      hoverBackground() {\n        return this.rootMenu.hoverBackground;\n      },\n      backgroundColor() {\n        return this.rootMenu.backgroundColor || '';\n      },\n      activeTextColor() {\n        return this.rootMenu.activeTextColor || '';\n      },\n      textColor() {\n        return this.rootMenu.textColor || '';\n      },\n      mode() {\n        return this.rootMenu.mode;\n      },\n      itemStyle() {\n        const style = {\n          color: this.active ? this.activeTextColor : this.textColor\n        };\n        if (this.mode === 'horizontal' && !this.isNested) {\n          style.borderBottomColor = this.active\n            ? (this.rootMenu.activeTextColor ? this.activeTextColor : '')\n            : 'transparent';\n        }\n        return style;\n      },\n      isNested() {\n        return this.parentMenu !== this.rootMenu;\n      }\n    },\n    methods: {\n      onMouseEnter() {\n        if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;\n        this.$el.style.backgroundColor = this.hoverBackground;\n      },\n      onMouseLeave() {\n        if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;\n        this.$el.style.backgroundColor = this.backgroundColor;\n      },\n      handleClick() {\n        if (!this.disabled) {\n          this.dispatch('ElMenu', 'item-click', this);\n          this.$emit('click', this);\n        }\n      }\n    },\n    mounted() {\n      this.parentMenu.addItem(this);\n      this.rootMenu.addItem(this);\n    },\n    beforeDestroy() {\n      this.parentMenu.removeItem(this);\n      this.rootMenu.removeItem(this);\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/menu/src/menu-mixin.js",
    "content": "export default {\n  inject: ['rootMenu'],\n  computed: {\n    indexPath() {\n      const path = [this.index];\n      let parent = this.$parent;\n      while (parent.$options.componentName !== 'ElMenu') {\n        if (parent.index) {\n          path.unshift(parent.index);\n        }\n        parent = parent.$parent;\n      }\n      return path;\n    },\n    parentMenu() {\n      let parent = this.$parent;\n      while (\n        parent &&\n        ['ElMenu', 'ElSubmenu'].indexOf(parent.$options.componentName) === -1\n      ) {\n        parent = parent.$parent;\n      }\n      return parent;\n    },\n    paddingStyle() {\n      if (this.rootMenu.mode !== 'vertical') return {};\n\n      let padding = 20;\n      let parent = this.$parent;\n\n      if (this.rootMenu.collapse) {\n        padding = 20;\n      } else {\n        while (parent && parent.$options.componentName !== 'ElMenu') {\n          if (parent.$options.componentName === 'ElSubmenu') {\n            padding += 20;\n          }\n          parent = parent.$parent;\n        }\n      }\n      return {paddingLeft: padding + 'px'};\n    }\n  }\n};\n"
  },
  {
    "path": "packages/menu/src/menu.vue",
    "content": "<script type=\"text/jsx\">\n  import emitter from 'element-ui/src/mixins/emitter';\n  import Migrating from 'element-ui/src/mixins/migrating';\n  import Menubar from 'element-ui/src/utils/menu/aria-menubar';\n  import { addClass, removeClass, hasClass } from 'element-ui/src/utils/dom';\n\n  export default {\n    name: 'ElMenu',\n\n    render (h) {\n      const component = (\n        <ul\n          role=\"menubar\"\n          key={ +this.collapse }\n          style={{ backgroundColor: this.backgroundColor || '' }}\n          class={{\n            'el-menu--horizontal': this.mode === 'horizontal',\n            'el-menu--collapse': this.collapse,\n            \"el-menu\": true\n          }}\n        >\n          { this.$slots.default }\n        </ul>\n      );\n\n      if (this.collapseTransition) {\n        return (\n          <el-menu-collapse-transition>\n            { component }\n          </el-menu-collapse-transition>\n        );\n      } else {\n        return component;\n      }\n    },\n\n    componentName: 'ElMenu',\n\n    mixins: [emitter, Migrating],\n\n    provide() {\n      return {\n        rootMenu: this\n      };\n    },\n\n    components: {\n      'el-menu-collapse-transition': {\n        functional: true,\n        render(createElement, context) {\n          const data = {\n            props: {\n              mode: 'out-in'\n            },\n            on: {\n              beforeEnter(el) {\n                el.style.opacity = 0.2;\n              },\n\n              enter(el) {\n                addClass(el, 'el-opacity-transition');\n                el.style.opacity = 1;\n              },\n\n              afterEnter(el) {\n                removeClass(el, 'el-opacity-transition');\n                el.style.opacity = '';\n              },\n\n              beforeLeave(el) {\n                if (!el.dataset) el.dataset = {};\n\n                if (hasClass(el, 'el-menu--collapse')) {\n                  removeClass(el, 'el-menu--collapse');\n                  el.dataset.oldOverflow = el.style.overflow;\n                  el.dataset.scrollWidth = el.clientWidth;\n                  addClass(el, 'el-menu--collapse');\n                } else {\n                  addClass(el, 'el-menu--collapse');\n                  el.dataset.oldOverflow = el.style.overflow;\n                  el.dataset.scrollWidth = el.clientWidth;\n                  removeClass(el, 'el-menu--collapse');\n                }\n\n                el.style.width = el.scrollWidth + 'px';\n                el.style.overflow = 'hidden';\n              },\n\n              leave(el) {\n                addClass(el, 'horizontal-collapse-transition');\n                el.style.width = el.dataset.scrollWidth + 'px';\n              }\n            }\n          };\n          return createElement('transition', data, context.children);\n        }\n      }\n    },\n\n    props: {\n      mode: {\n        type: String,\n        default: 'vertical'\n      },\n      defaultActive: {\n        type: String,\n        default: ''\n      },\n      defaultOpeneds: Array,\n      uniqueOpened: Boolean,\n      router: Boolean,\n      menuTrigger: {\n        type: String,\n        default: 'hover'\n      },\n      collapse: Boolean,\n      backgroundColor: String,\n      textColor: String,\n      activeTextColor: String,\n      collapseTransition: {\n        type: Boolean,\n        default: true\n      }\n    },\n    data() {\n      return {\n        activeIndex: this.defaultActive,\n        openedMenus: (this.defaultOpeneds && !this.collapse) ? this.defaultOpeneds.slice(0) : [],\n        items: {},\n        submenus: {}\n      };\n    },\n    computed: {\n      hoverBackground() {\n        return this.backgroundColor ? this.mixColor(this.backgroundColor, 0.2) : '';\n      },\n      isMenuPopup() {\n        return this.mode === 'horizontal' || (this.mode === 'vertical' && this.collapse);\n      }\n    },\n    watch: {\n      defaultActive(value){\n        if(!this.items[value]){\n          this.activeIndex = null\n        }\n        this.updateActiveIndex(value)\n      },\n\n      defaultOpeneds(value) {\n        if (!this.collapse) {\n          this.openedMenus = value;\n        }\n      },\n\n      collapse(value) {\n        if (value) this.openedMenus = [];\n        this.broadcast('ElSubmenu', 'toggle-collapse', value);\n      }\n    },\n    methods: {\n      updateActiveIndex(val) {\n        const item = this.items[val] || this.items[this.activeIndex] || this.items[this.defaultActive];\n        if (item) {\n          this.activeIndex = item.index;\n          this.initOpenedMenu();\n        } else {\n          this.activeIndex = null;\n        }\n      },\n\n      getMigratingConfig() {\n        return {\n          props: {\n            'theme': 'theme is removed.'\n          }\n        };\n      },\n      getColorChannels(color) {\n        color = color.replace('#', '');\n        if (/^[0-9a-fA-F]{3}$/.test(color)) {\n          color = color.split('');\n          for (let i = 2; i >= 0; i--) {\n            color.splice(i, 0, color[i]);\n          }\n          color = color.join('');\n        }\n        if (/^[0-9a-fA-F]{6}$/.test(color)) {\n          return {\n            red: parseInt(color.slice(0, 2), 16),\n            green: parseInt(color.slice(2, 4), 16),\n            blue: parseInt(color.slice(4, 6), 16)\n          };\n        } else {\n          return {\n            red: 255,\n            green: 255,\n            blue: 255\n          };\n        }\n      },\n      mixColor(color, percent) {\n        let { red, green, blue } = this.getColorChannels(color);\n        if (percent > 0) { // shade given color\n          red *= 1 - percent;\n          green *= 1 - percent;\n          blue *= 1 - percent;\n        } else { // tint given color\n          red += (255 - red) * percent;\n          green += (255 - green) * percent;\n          blue += (255 - blue) * percent;\n        }\n        return `rgb(${ Math.round(red) }, ${ Math.round(green) }, ${ Math.round(blue) })`;\n      },\n      addItem(item) {\n        this.$set(this.items, item.index, item);\n      },\n      removeItem(item) {\n        delete this.items[item.index];\n      },\n      addSubmenu(item) {\n        this.$set(this.submenus, item.index, item);\n      },\n      removeSubmenu(item) {\n        delete this.submenus[item.index];\n      },\n      openMenu(index, indexPath) {\n        let openedMenus = this.openedMenus;\n        if (openedMenus.indexOf(index) !== -1) return;\n        // 将不在该菜单路径下的其余菜单收起\n        // collapse all menu that are not under current menu item\n        if (this.uniqueOpened) {\n          this.openedMenus = openedMenus.filter(index => {\n            return indexPath.indexOf(index) !== -1;\n          });\n        }\n        this.openedMenus.push(index);\n      },\n      closeMenu(index) {\n        const i = this.openedMenus.indexOf(index);\n        if (i !== -1) {\n          this.openedMenus.splice(i, 1);\n        }\n      },\n      handleSubmenuClick(submenu) {\n        const { index, indexPath } = submenu;\n        let isOpened = this.openedMenus.indexOf(index) !== -1;\n\n        if (isOpened) {\n          this.closeMenu(index);\n          this.$emit('close', index, indexPath);\n        } else {\n          this.openMenu(index, indexPath);\n          this.$emit('open', index, indexPath);\n        }\n      },\n      handleItemClick(item) {\n        const { index, indexPath } = item;\n        const oldActiveIndex = this.activeIndex;\n        const hasIndex = item.index !== null;\n\n        if (hasIndex) {\n          this.activeIndex = item.index;\n        }\n\n        this.$emit('select', index, indexPath, item);\n\n        if (this.mode === 'horizontal' || this.collapse) {\n          this.openedMenus = [];\n        }\n\n        if (this.router && hasIndex) {\n          this.routeToItem(item, (error) => {\n            this.activeIndex = oldActiveIndex;\n            if (error) {\n              // vue-router 3.1.0+ push/replace cause NavigationDuplicated error \n              // https://github.com/ElemeFE/element/issues/17044\n              if (error.name === 'NavigationDuplicated') return\n              console.error(error)\n            }\n          });\n        }\n      },\n      // 初始化展开菜单\n      // initialize opened menu\n      initOpenedMenu() {\n        const index = this.activeIndex;\n        const activeItem = this.items[index];\n        if (!activeItem || this.mode === 'horizontal' || this.collapse) return;\n\n        let indexPath = activeItem.indexPath;\n\n        // 展开该菜单项的路径上所有子菜单\n        // expand all submenus of the menu item\n        indexPath.forEach(index => {\n          let submenu = this.submenus[index];\n          submenu && this.openMenu(index, submenu.indexPath);\n        });\n      },\n      routeToItem(item, onError) {\n        let route = item.route || item.index;\n        try {\n          this.$router.push(route, () => {}, onError);\n        } catch (e) {\n          console.error(e);\n        }\n      },\n      open(index) {\n        const { indexPath } = this.submenus[index.toString()];\n        indexPath.forEach(i => this.openMenu(i, indexPath));\n      },\n      close(index) {\n        this.closeMenu(index);\n      }\n    },\n    mounted() {\n      this.initOpenedMenu();\n      this.$on('item-click', this.handleItemClick);\n      this.$on('submenu-click', this.handleSubmenuClick);\n      if (this.mode === 'horizontal') {\n        new Menubar(this.$el); // eslint-disable-line\n      }\n      this.$watch('items', this.updateActiveIndex);\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/menu/src/submenu.vue",
    "content": "<script>\n  import ElCollapseTransition from 'element-ui/src/transitions/collapse-transition';\n  import menuMixin from './menu-mixin';\n  import Emitter from 'element-ui/src/mixins/emitter';\n  import Popper from 'element-ui/src/utils/vue-popper';\n\n  const poperMixins = {\n    props: {\n      transformOrigin: {\n        type: [Boolean, String],\n        default: false\n      },\n      offset: Popper.props.offset,\n      boundariesPadding: Popper.props.boundariesPadding,\n      popperOptions: Popper.props.popperOptions\n    },\n    data: Popper.data,\n    methods: Popper.methods,\n    beforeDestroy: Popper.beforeDestroy,\n    deactivated: Popper.deactivated\n  };\n\n  export default {\n    name: 'ElSubmenu',\n\n    componentName: 'ElSubmenu',\n\n    mixins: [menuMixin, Emitter, poperMixins],\n\n    components: { ElCollapseTransition },\n\n    props: {\n      index: {\n        type: String,\n        required: true\n      },\n      showTimeout: {\n        type: Number,\n        default: 300\n      },\n      hideTimeout: {\n        type: Number,\n        default: 300\n      },\n      popperClass: String,\n      disabled: Boolean,\n      popperAppendToBody: {\n        type: Boolean,\n        default: undefined\n      }\n    },\n\n    data() {\n      return {\n        popperJS: null,\n        timeout: null,\n        items: {},\n        submenus: {},\n        mouseInChild: false\n      };\n    },\n    watch: {\n      opened(val) {\n        if (this.isMenuPopup) {\n          this.$nextTick(_ => {\n            this.updatePopper();\n          });\n        }\n      }\n    },\n    computed: {\n      // popper option\n      appendToBody() {\n        return this.popperAppendToBody === undefined\n          ? this.isFirstLevel\n          : this.popperAppendToBody;\n      },\n      menuTransitionName() {\n        return this.rootMenu.collapse ? 'el-zoom-in-left' : 'el-zoom-in-top';\n      },\n      opened() {\n        return this.rootMenu.openedMenus.indexOf(this.index) > -1;\n      },\n      active() {\n        let isActive = false;\n        const submenus = this.submenus;\n        const items = this.items;\n\n        Object.keys(items).forEach(index => {\n          if (items[index].active) {\n            isActive = true;\n          }\n        });\n\n        Object.keys(submenus).forEach(index => {\n          if (submenus[index].active) {\n            isActive = true;\n          }\n        });\n\n        return isActive;\n      },\n      hoverBackground() {\n        return this.rootMenu.hoverBackground;\n      },\n      backgroundColor() {\n        return this.rootMenu.backgroundColor || '';\n      },\n      activeTextColor() {\n        return this.rootMenu.activeTextColor || '';\n      },\n      textColor() {\n        return this.rootMenu.textColor || '';\n      },\n      mode() {\n        return this.rootMenu.mode;\n      },\n      isMenuPopup() {\n        return this.rootMenu.isMenuPopup;\n      },\n      titleStyle() {\n        if (this.mode !== 'horizontal') {\n          return {\n            color: this.textColor\n          };\n        }\n        return {\n          borderBottomColor: this.active\n            ? (this.rootMenu.activeTextColor ? this.activeTextColor : '')\n            : 'transparent',\n          color: this.active\n            ? this.activeTextColor\n            : this.textColor\n        };\n      },\n      isFirstLevel() {\n        let isFirstLevel = true;\n        let parent = this.$parent;\n        while (parent && parent !== this.rootMenu) {\n          if (['ElSubmenu', 'ElMenuItemGroup'].indexOf(parent.$options.componentName) > -1) {\n            isFirstLevel = false;\n            break;\n          } else {\n            parent = parent.$parent;\n          }\n        }\n        return isFirstLevel;\n      }\n    },\n    methods: {\n      handleCollapseToggle(value) {\n        if (value) {\n          this.initPopper();\n        } else {\n          this.doDestroy();\n        }\n      },\n      addItem(item) {\n        this.$set(this.items, item.index, item);\n      },\n      removeItem(item) {\n        delete this.items[item.index];\n      },\n      addSubmenu(item) {\n        this.$set(this.submenus, item.index, item);\n      },\n      removeSubmenu(item) {\n        delete this.submenus[item.index];\n      },\n      handleClick() {\n        const { rootMenu, disabled } = this;\n        if (\n          (rootMenu.menuTrigger === 'hover' && rootMenu.mode === 'horizontal') ||\n          (rootMenu.collapse && rootMenu.mode === 'vertical') ||\n          disabled\n        ) {\n          return;\n        }\n        this.dispatch('ElMenu', 'submenu-click', this);\n      },\n      handleMouseenter(event, showTimeout = this.showTimeout) {\n\n        if (!('ActiveXObject' in window) && event.type === 'focus' && !event.relatedTarget) {\n          return;\n        }\n        const { rootMenu, disabled } = this;\n        if (\n          (rootMenu.menuTrigger === 'click' && rootMenu.mode === 'horizontal') ||\n          (!rootMenu.collapse && rootMenu.mode === 'vertical') ||\n          disabled\n        ) {\n          return;\n        }\n        this.dispatch('ElSubmenu', 'mouse-enter-child');\n        clearTimeout(this.timeout);\n        this.timeout = setTimeout(() => {\n          this.rootMenu.openMenu(this.index, this.indexPath);\n        }, showTimeout);\n\n        if (this.appendToBody) {\n          this.$parent.$el.dispatchEvent(new MouseEvent('mouseenter'));\n        }\n      },\n      handleMouseleave(deepDispatch = false) {\n        const {rootMenu} = this;\n        if (\n          (rootMenu.menuTrigger === 'click' && rootMenu.mode === 'horizontal') ||\n          (!rootMenu.collapse && rootMenu.mode === 'vertical')\n        ) {\n          return;\n        }\n        this.dispatch('ElSubmenu', 'mouse-leave-child');\n        clearTimeout(this.timeout);\n        this.timeout = setTimeout(() => {\n          !this.mouseInChild && this.rootMenu.closeMenu(this.index);\n        }, this.hideTimeout);\n\n        if (this.appendToBody && deepDispatch) {\n          if (this.$parent.$options.name === 'ElSubmenu') {\n            this.$parent.handleMouseleave(true);\n          }\n        }\n      },\n      handleTitleMouseenter() {\n        if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;\n        const title = this.$refs['submenu-title'];\n        title && (title.style.backgroundColor = this.rootMenu.hoverBackground);\n      },\n      handleTitleMouseleave() {\n        if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;\n        const title = this.$refs['submenu-title'];\n        title && (title.style.backgroundColor = this.rootMenu.backgroundColor || '');\n      },\n      updatePlacement() {\n        this.currentPlacement = this.mode === 'horizontal' && this.isFirstLevel\n          ? 'bottom-start'\n          : 'right-start';\n      },\n      initPopper() {\n        this.referenceElm = this.$el;\n        this.popperElm = this.$refs.menu;\n        this.updatePlacement();\n      }\n    },\n    created() {\n      this.$on('toggle-collapse', this.handleCollapseToggle);\n      this.$on('mouse-enter-child', () => {\n        this.mouseInChild = true;\n        clearTimeout(this.timeout);\n      });\n      this.$on('mouse-leave-child', () => {\n        this.mouseInChild = false;\n        clearTimeout(this.timeout);\n      });\n    },\n    mounted() {\n      this.parentMenu.addSubmenu(this);\n      this.rootMenu.addSubmenu(this);\n      this.initPopper();\n    },\n    beforeDestroy() {\n      this.parentMenu.removeSubmenu(this);\n      this.rootMenu.removeSubmenu(this);\n    },\n    render(h) {\n      const {\n        active,\n        opened,\n        paddingStyle,\n        titleStyle,\n        backgroundColor,\n        rootMenu,\n        currentPlacement,\n        menuTransitionName,\n        mode,\n        disabled,\n        popperClass,\n        $slots,\n        isFirstLevel\n      } = this;\n\n      const popupMenu = (\n        <transition name={menuTransitionName}>\n          <div\n            ref=\"menu\"\n            v-show={opened}\n            class={[`el-menu--${mode}`, popperClass]}\n            on-mouseenter={($event) => this.handleMouseenter($event, 100)}\n            on-mouseleave={() => this.handleMouseleave(true)}\n            on-focus={($event) => this.handleMouseenter($event, 100)}>\n            <ul\n              role=\"menu\"\n              class={['el-menu el-menu--popup', `el-menu--popup-${currentPlacement}`]}\n              style={{ backgroundColor: rootMenu.backgroundColor || '' }}>\n              {$slots.default}\n            </ul>\n          </div>\n        </transition>\n      );\n\n      const inlineMenu = (\n        <el-collapse-transition>\n          <ul\n            role=\"menu\"\n            class=\"el-menu el-menu--inline\"\n            v-show={opened}\n            style={{ backgroundColor: rootMenu.backgroundColor || '' }}>\n            {$slots.default}\n          </ul>\n        </el-collapse-transition>\n      );\n\n      const submenuTitleIcon = (\n        rootMenu.mode === 'horizontal' && isFirstLevel ||\n        rootMenu.mode === 'vertical' && !rootMenu.collapse\n      ) ? 'el-icon-arrow-down' : 'el-icon-arrow-right';\n\n      return (\n        <li\n          class={{\n            'el-submenu': true,\n            'is-active': active,\n            'is-opened': opened,\n            'is-disabled': disabled\n          }}\n          role=\"menuitem\"\n          aria-haspopup=\"true\"\n          aria-expanded={opened}\n          on-mouseenter={this.handleMouseenter}\n          on-mouseleave={() => this.handleMouseleave(false)}\n          on-focus={this.handleMouseenter}\n        >\n          <div\n            class=\"el-submenu__title\"\n            ref=\"submenu-title\"\n            on-click={this.handleClick}\n            on-mouseenter={this.handleTitleMouseenter}\n            on-mouseleave={this.handleTitleMouseleave}\n            style={[paddingStyle, titleStyle, { backgroundColor }]}\n          >\n            {$slots.title}\n            <i class={[ 'el-submenu__icon-arrow', submenuTitleIcon ]}></i>\n          </div>\n          {this.isMenuPopup ? popupMenu : inlineMenu}\n        </li>\n      );\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/menu-item/index.js",
    "content": "import ElMenuItem from '../menu/src/menu-item';\n\n/* istanbul ignore next */\nElMenuItem.install = function(Vue) {\n  Vue.component(ElMenuItem.name, ElMenuItem);\n};\n\nexport default ElMenuItem;\n"
  },
  {
    "path": "packages/menu-item-group/index.js",
    "content": "import ElMenuItemGroup from '../menu/src/menu-item-group';\n\n/* istanbul ignore next */\nElMenuItemGroup.install = function(Vue) {\n  Vue.component(ElMenuItemGroup.name, ElMenuItemGroup);\n};\n\nexport default ElMenuItemGroup;\n"
  },
  {
    "path": "packages/message/index.js",
    "content": "import Message from './src/main.js';\nexport default Message;\n"
  },
  {
    "path": "packages/message/src/main.js",
    "content": "import Vue from 'vue';\nimport Main from './main.vue';\nimport { PopupManager } from 'element-ui/src/utils/popup';\nimport { isVNode } from 'element-ui/src/utils/vdom';\nimport { isObject } from 'element-ui/src/utils/types';\nlet MessageConstructor = Vue.extend(Main);\n\nlet instance;\nlet instances = [];\nlet seed = 1;\n\nconst Message = function(options) {\n  if (Vue.prototype.$isServer) return;\n  options = options || {};\n  if (typeof options === 'string') {\n    options = {\n      message: options\n    };\n  }\n  let userOnClose = options.onClose;\n  let id = 'message_' + seed++;\n\n  options.onClose = function() {\n    Message.close(id, userOnClose);\n  };\n  instance = new MessageConstructor({\n    data: options\n  });\n  instance.id = id;\n  if (isVNode(instance.message)) {\n    instance.$slots.default = [instance.message];\n    instance.message = null;\n  }\n  instance.$mount();\n  document.body.appendChild(instance.$el);\n  let verticalOffset = options.offset || 20;\n  instances.forEach(item => {\n    verticalOffset += item.$el.offsetHeight + 16;\n  });\n  instance.verticalOffset = verticalOffset;\n  instance.visible = true;\n  instance.$el.style.zIndex = PopupManager.nextZIndex();\n  instances.push(instance);\n  return instance;\n};\n\n['success', 'warning', 'info', 'error'].forEach(type => {\n  Message[type] = (options) => {\n    if (isObject(options) && !isVNode(options)) {\n      return Message({\n        ...options,\n        type\n      });\n    }\n    return Message({\n      type,\n      message: options\n    });\n  };\n});\n\nMessage.close = function(id, userOnClose) {\n  let len = instances.length;\n  let index = -1;\n  let removedHeight;\n  for (let i = 0; i < len; i++) {\n    if (id === instances[i].id) {\n      removedHeight = instances[i].$el.offsetHeight;\n      index = i;\n      if (typeof userOnClose === 'function') {\n        userOnClose(instances[i]);\n      }\n      instances.splice(i, 1);\n      break;\n    }\n  }\n  if (len <= 1 || index === -1 || index > instances.length - 1) return;\n  for (let i = index; i < len - 1 ; i++) {\n    let dom = instances[i].$el;\n    dom.style['top'] =\n      parseInt(dom.style['top'], 10) - removedHeight - 16 + 'px';\n  }\n};\n\nMessage.closeAll = function() {\n  for (let i = instances.length - 1; i >= 0; i--) {\n    instances[i].close();\n  }\n};\n\nexport default Message;\n"
  },
  {
    "path": "packages/message/src/main.vue",
    "content": "<template>\n  <transition name=\"el-message-fade\" @after-leave=\"handleAfterLeave\">\n    <div\n      :class=\"[\n        'el-message',\n        type && !iconClass ? `el-message--${ type }` : '',\n        center ? 'is-center' : '',\n        showClose ? 'is-closable' : '',\n        customClass\n      ]\"\n      :style=\"positionStyle\"\n      v-show=\"visible\"\n      @mouseenter=\"clearTimer\"\n      @mouseleave=\"startTimer\"\n      role=\"alert\">\n      <i :class=\"iconClass\" v-if=\"iconClass\"></i>\n      <i :class=\"typeClass\" v-else></i>\n      <slot>\n        <p v-if=\"!dangerouslyUseHTMLString\" class=\"el-message__content\">{{ message }}</p>\n        <p v-else v-html=\"message\" class=\"el-message__content\"></p>\n      </slot>\n      <i v-if=\"showClose\" class=\"el-message__closeBtn el-icon-close\" @click=\"close\"></i>\n    </div>\n  </transition>\n</template>\n\n<script type=\"text/babel\">\n  const typeMap = {\n    success: 'success',\n    info: 'info',\n    warning: 'warning',\n    error: 'error'\n  };\n\n  export default {\n    data() {\n      return {\n        visible: false,\n        message: '',\n        duration: 3000,\n        type: 'info',\n        iconClass: '',\n        customClass: '',\n        onClose: null,\n        showClose: false,\n        closed: false,\n        verticalOffset: 20,\n        timer: null,\n        dangerouslyUseHTMLString: false,\n        center: false\n      };\n    },\n\n    computed: {\n      typeClass() {\n        return this.type && !this.iconClass\n          ? `el-message__icon el-icon-${ typeMap[this.type] }`\n          : '';\n      },\n      positionStyle() {\n        return {\n          'top': `${ this.verticalOffset }px`\n        };\n      }\n    },\n\n    watch: {\n      closed(newVal) {\n        if (newVal) {\n          this.visible = false;\n        }\n      }\n    },\n\n    methods: {\n      handleAfterLeave() {\n        this.$destroy(true);\n        this.$el.parentNode.removeChild(this.$el);\n      },\n\n      close() {\n        this.closed = true;\n        if (typeof this.onClose === 'function') {\n          this.onClose(this);\n        }\n      },\n\n      clearTimer() {\n        clearTimeout(this.timer);\n      },\n\n      startTimer() {\n        if (this.duration > 0) {\n          this.timer = setTimeout(() => {\n            if (!this.closed) {\n              this.close();\n            }\n          }, this.duration);\n        }\n      },\n      keydown(e) {\n        if (e.keyCode === 27) { // esc关闭消息\n          if (!this.closed) {\n            this.close();\n          }\n        }\n      }\n    },\n    mounted() {\n      this.startTimer();\n      document.addEventListener('keydown', this.keydown);\n    },\n    beforeDestroy() {\n      document.removeEventListener('keydown', this.keydown);\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/message-box/index.js",
    "content": "import MessageBox from './src/main.js';\nexport default MessageBox;\n"
  },
  {
    "path": "packages/message-box/src/main.js",
    "content": "const defaults = {\n  title: null,\n  message: '',\n  type: '',\n  iconClass: '',\n  showInput: false,\n  showClose: true,\n  modalFade: true,\n  lockScroll: true,\n  closeOnClickModal: true,\n  closeOnPressEscape: true,\n  closeOnHashChange: true,\n  inputValue: null,\n  inputPlaceholder: '',\n  inputType: 'text',\n  inputPattern: null,\n  inputValidator: null,\n  inputErrorMessage: '',\n  showConfirmButton: true,\n  showCancelButton: false,\n  confirmButtonPosition: 'right',\n  confirmButtonHighlight: false,\n  cancelButtonHighlight: false,\n  confirmButtonText: '',\n  cancelButtonText: '',\n  confirmButtonClass: '',\n  cancelButtonClass: '',\n  customClass: '',\n  beforeClose: null,\n  dangerouslyUseHTMLString: false,\n  center: false,\n  roundButton: false,\n  distinguishCancelAndClose: false\n};\n\nimport Vue from 'vue';\nimport msgboxVue from './main.vue';\nimport merge from 'element-ui/src/utils/merge';\nimport { isVNode } from 'element-ui/src/utils/vdom';\n\nconst MessageBoxConstructor = Vue.extend(msgboxVue);\n\nlet currentMsg, instance;\nlet msgQueue = [];\n\nconst defaultCallback = action => {\n  if (currentMsg) {\n    let callback = currentMsg.callback;\n    if (typeof callback === 'function') {\n      if (instance.showInput) {\n        callback(instance.inputValue, action);\n      } else {\n        callback(action);\n      }\n    }\n    if (currentMsg.resolve) {\n      if (action === 'confirm') {\n        if (instance.showInput) {\n          currentMsg.resolve({ value: instance.inputValue, action });\n        } else {\n          currentMsg.resolve(action);\n        }\n      } else if (currentMsg.reject && (action === 'cancel' || action === 'close')) {\n        currentMsg.reject(action);\n      }\n    }\n  }\n};\n\nconst initInstance = () => {\n  instance = new MessageBoxConstructor({\n    el: document.createElement('div')\n  });\n\n  instance.callback = defaultCallback;\n};\n\nconst showNextMsg = () => {\n  if (!instance) {\n    initInstance();\n  }\n  instance.action = '';\n\n  if (!instance.visible || instance.closeTimer) {\n    if (msgQueue.length > 0) {\n      currentMsg = msgQueue.shift();\n\n      let options = currentMsg.options;\n      for (let prop in options) {\n        if (options.hasOwnProperty(prop)) {\n          instance[prop] = options[prop];\n        }\n      }\n      if (options.callback === undefined) {\n        instance.callback = defaultCallback;\n      }\n\n      let oldCb = instance.callback;\n      instance.callback = (action, instance) => {\n        oldCb(action, instance);\n        showNextMsg();\n      };\n      if (isVNode(instance.message)) {\n        instance.$slots.default = [instance.message];\n        instance.message = null;\n      } else {\n        delete instance.$slots.default;\n      }\n      ['modal', 'showClose', 'closeOnClickModal', 'closeOnPressEscape', 'closeOnHashChange'].forEach(prop => {\n        if (instance[prop] === undefined) {\n          instance[prop] = true;\n        }\n      });\n      document.body.appendChild(instance.$el);\n\n      Vue.nextTick(() => {\n        instance.visible = true;\n      });\n    }\n  }\n};\n\nconst MessageBox = function(options, callback) {\n  if (Vue.prototype.$isServer) return;\n  if (typeof options === 'string' || isVNode(options)) {\n    options = {\n      message: options\n    };\n    if (typeof arguments[1] === 'string') {\n      options.title = arguments[1];\n    }\n  } else if (options.callback && !callback) {\n    callback = options.callback;\n  }\n\n  if (typeof Promise !== 'undefined') {\n    return new Promise((resolve, reject) => { // eslint-disable-line\n      msgQueue.push({\n        options: merge({}, defaults, MessageBox.defaults, options),\n        callback: callback,\n        resolve: resolve,\n        reject: reject\n      });\n\n      showNextMsg();\n    });\n  } else {\n    msgQueue.push({\n      options: merge({}, defaults, MessageBox.defaults, options),\n      callback: callback\n    });\n\n    showNextMsg();\n  }\n};\n\nMessageBox.setDefaults = defaults => {\n  MessageBox.defaults = defaults;\n};\n\nMessageBox.alert = (message, title, options) => {\n  if (typeof title === 'object') {\n    options = title;\n    title = '';\n  } else if (title === undefined) {\n    title = '';\n  }\n  return MessageBox(merge({\n    title: title,\n    message: message,\n    $type: 'alert',\n    closeOnPressEscape: false,\n    closeOnClickModal: false\n  }, options));\n};\n\nMessageBox.confirm = (message, title, options) => {\n  if (typeof title === 'object') {\n    options = title;\n    title = '';\n  } else if (title === undefined) {\n    title = '';\n  }\n  return MessageBox(merge({\n    title: title,\n    message: message,\n    $type: 'confirm',\n    showCancelButton: true\n  }, options));\n};\n\nMessageBox.prompt = (message, title, options) => {\n  if (typeof title === 'object') {\n    options = title;\n    title = '';\n  } else if (title === undefined) {\n    title = '';\n  }\n  return MessageBox(merge({\n    title: title,\n    message: message,\n    showCancelButton: true,\n    showInput: true,\n    $type: 'prompt'\n  }, options));\n};\n\nMessageBox.close = () => {\n  instance.doClose();\n  instance.visible = false;\n  msgQueue = [];\n  currentMsg = null;\n};\n\nexport default MessageBox;\nexport { MessageBox };\n"
  },
  {
    "path": "packages/message-box/src/main.vue",
    "content": "<template>\n  <transition name=\"msgbox-fade\">\n    <div\n      class=\"el-message-box__wrapper\"\n      tabindex=\"-1\"\n      v-show=\"visible\"\n      @click.self=\"handleWrapperClick\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      :aria-label=\"title || 'dialog'\">\n      <div class=\"el-message-box\" :class=\"[customClass, center && 'el-message-box--center']\">\n        <div class=\"el-message-box__header\" v-if=\"title !== null\">\n          <div class=\"el-message-box__title\">\n            <div\n              :class=\"['el-message-box__status', icon]\"\n              v-if=\"icon && center\">\n            </div>\n            <span>{{ title }}</span>\n          </div>\n          <button\n            type=\"button\"\n            class=\"el-message-box__headerbtn\"\n            aria-label=\"Close\"\n            v-if=\"showClose\"\n            @click=\"handleAction(distinguishCancelAndClose ? 'close' : 'cancel')\"\n            @keydown.enter=\"handleAction(distinguishCancelAndClose ? 'close' : 'cancel')\">\n            <i class=\"el-message-box__close el-icon-close\"></i>\n          </button>\n        </div>\n        <div class=\"el-message-box__content\">\n          <div class=\"el-message-box__container\">\n            <div\n              :class=\"['el-message-box__status', icon]\"\n              v-if=\"icon && !center && message !== ''\">\n            </div>\n            <div class=\"el-message-box__message\" v-if=\"message !== ''\">\n              <slot>\n                <p v-if=\"!dangerouslyUseHTMLString\">{{ message }}</p>\n                <p v-else v-html=\"message\"></p>\n              </slot>\n            </div>\n          </div>\n          <div class=\"el-message-box__input\" v-show=\"showInput\">\n            <el-input\n              v-model=\"inputValue\"\n              :type=\"inputType\"\n              @keydown.enter.native=\"handleInputEnter\"\n              :placeholder=\"inputPlaceholder\"\n              ref=\"input\"></el-input>\n            <div class=\"el-message-box__errormsg\" :style=\"{ visibility: !!editorErrorMessage ? 'visible' : 'hidden' }\">{{ editorErrorMessage }}</div>\n          </div>\n        </div>\n        <div class=\"el-message-box__btns\">\n          <el-button\n            :loading=\"cancelButtonLoading\"\n            :class=\"[ cancelButtonClasses ]\"\n            v-if=\"showCancelButton\"\n            :round=\"roundButton\"\n            size=\"small\"\n            @click.native=\"handleAction('cancel')\"\n            @keydown.enter=\"handleAction('cancel')\">\n            {{ cancelButtonText || t('el.messagebox.cancel') }}\n          </el-button>\n          <el-button\n            :loading=\"confirmButtonLoading\"\n            ref=\"confirm\"\n            :class=\"[ confirmButtonClasses ]\"\n            v-show=\"showConfirmButton\"\n            :round=\"roundButton\"\n            size=\"small\"\n            @click.native=\"handleAction('confirm')\"\n            @keydown.enter=\"handleAction('confirm')\">\n            {{ confirmButtonText || t('el.messagebox.confirm') }}\n          </el-button>\n        </div>\n      </div>\n    </div>\n  </transition>\n</template>\n\n<script type=\"text/babel\">\n  import Popup from 'element-ui/src/utils/popup';\n  import Locale from 'element-ui/src/mixins/locale';\n  import ElInput from 'element-ui/packages/input';\n  import ElButton from 'element-ui/packages/button';\n  import { addClass, removeClass } from 'element-ui/src/utils/dom';\n  import { t } from 'element-ui/src/locale';\n  import Dialog from 'element-ui/src/utils/aria-dialog';\n\n  let messageBox;\n  let typeMap = {\n    success: 'success',\n    info: 'info',\n    warning: 'warning',\n    error: 'error'\n  };\n\n  export default {\n    mixins: [Popup, Locale],\n\n    props: {\n      modal: {\n        default: true\n      },\n      lockScroll: {\n        default: true\n      },\n      showClose: {\n        type: Boolean,\n        default: true\n      },\n      closeOnClickModal: {\n        default: true\n      },\n      closeOnPressEscape: {\n        default: true\n      },\n      closeOnHashChange: {\n        default: true\n      },\n      center: {\n        default: false,\n        type: Boolean\n      },\n      roundButton: {\n        default: false,\n        type: Boolean\n      }\n    },\n\n    components: {\n      ElInput,\n      ElButton\n    },\n\n    computed: {\n      icon() {\n        const { type, iconClass } = this;\n        return iconClass || (type && typeMap[type] ? `el-icon-${ typeMap[type] }` : '');\n      },\n\n      confirmButtonClasses() {\n        return `el-button--primary ${ this.confirmButtonClass }`;\n      },\n      cancelButtonClasses() {\n        return `${ this.cancelButtonClass }`;\n      }\n    },\n\n    methods: {\n      getSafeClose() {\n        const currentId = this.uid;\n        return () => {\n          this.$nextTick(() => {\n            if (currentId === this.uid) this.doClose();\n          });\n        };\n      },\n      doClose() {\n        if (!this.visible) return;\n        this.visible = false;\n        this._closing = true;\n\n        this.onClose && this.onClose();\n        messageBox.closeDialog(); // 解绑\n        if (this.lockScroll) {\n          setTimeout(this.restoreBodyStyle, 200);\n        }\n        this.opened = false;\n        this.doAfterClose();\n        setTimeout(() => {\n          if (this.action) this.callback(this.action, this);\n        });\n      },\n\n      handleWrapperClick() {\n        if (this.closeOnClickModal) {\n          this.handleAction(this.distinguishCancelAndClose ? 'close' : 'cancel');\n        }\n      },\n\n      handleInputEnter() {\n        if (this.inputType !== 'textarea') {\n          return this.handleAction('confirm');\n        }\n      },\n\n      handleAction(action) {\n        if (this.$type === 'prompt' && action === 'confirm' && !this.validate()) {\n          return;\n        }\n        this.action = action;\n        if (typeof this.beforeClose === 'function') {\n          this.close = this.getSafeClose();\n          this.beforeClose(action, this, this.close);\n        } else {\n          this.doClose();\n        }\n      },\n\n      validate() {\n        if (this.$type === 'prompt') {\n          const inputPattern = this.inputPattern;\n          if (inputPattern && !inputPattern.test(this.inputValue || '')) {\n            this.editorErrorMessage = this.inputErrorMessage || t('el.messagebox.error');\n            addClass(this.getInputElement(), 'invalid');\n            return false;\n          }\n          const inputValidator = this.inputValidator;\n          if (typeof inputValidator === 'function') {\n            const validateResult = inputValidator(this.inputValue);\n            if (validateResult === false) {\n              this.editorErrorMessage = this.inputErrorMessage || t('el.messagebox.error');\n              addClass(this.getInputElement(), 'invalid');\n              return false;\n            }\n            if (typeof validateResult === 'string') {\n              this.editorErrorMessage = validateResult;\n              addClass(this.getInputElement(), 'invalid');\n              return false;\n            }\n          }\n        }\n        this.editorErrorMessage = '';\n        removeClass(this.getInputElement(), 'invalid');\n        return true;\n      },\n      getFirstFocus() {\n        const btn = this.$el.querySelector('.el-message-box__btns .el-button');\n        const title = this.$el.querySelector('.el-message-box__btns .el-message-box__title');\n        return btn || title;\n      },\n      getInputElement() {\n        const inputRefs = this.$refs.input.$refs;\n        return inputRefs.input || inputRefs.textarea;\n      },\n      handleClose() {\n        this.handleAction('close');\n      }\n    },\n\n    watch: {\n      inputValue: {\n        immediate: true,\n        handler(val) {\n          this.$nextTick(_ => {\n            if (this.$type === 'prompt' && val !== null) {\n              this.validate();\n            }\n          });\n        }\n      },\n\n      visible(val) {\n        if (val) {\n          this.uid++;\n          if (this.$type === 'alert' || this.$type === 'confirm') {\n            this.$nextTick(() => {\n              this.$refs.confirm.$el.focus();\n            });\n          }\n          this.focusAfterClosed = document.activeElement;\n          messageBox = new Dialog(this.$el, this.focusAfterClosed, this.getFirstFocus());\n        }\n\n        // prompt\n        if (this.$type !== 'prompt') return;\n        if (val) {\n          setTimeout(() => {\n            if (this.$refs.input && this.$refs.input.$el) {\n              this.getInputElement().focus();\n            }\n          }, 500);\n        } else {\n          this.editorErrorMessage = '';\n          removeClass(this.getInputElement(), 'invalid');\n        }\n      }\n    },\n\n    mounted() {\n      this.$nextTick(() => {\n        if (this.closeOnHashChange) {\n          window.addEventListener('hashchange', this.close);\n        }\n      });\n    },\n\n    beforeDestroy() {\n      if (this.closeOnHashChange) {\n        window.removeEventListener('hashchange', this.close);\n      }\n      setTimeout(() => {\n        messageBox.closeDialog();\n      });\n    },\n\n    data() {\n      return {\n        uid: 1,\n        title: undefined,\n        message: '',\n        type: '',\n        iconClass: '',\n        customClass: '',\n        showInput: false,\n        inputValue: null,\n        inputPlaceholder: '',\n        inputType: 'text',\n        inputPattern: null,\n        inputValidator: null,\n        inputErrorMessage: '',\n        showConfirmButton: true,\n        showCancelButton: false,\n        action: '',\n        confirmButtonText: '',\n        cancelButtonText: '',\n        confirmButtonLoading: false,\n        cancelButtonLoading: false,\n        confirmButtonClass: '',\n        confirmButtonDisabled: false,\n        cancelButtonClass: '',\n        editorErrorMessage: null,\n        callback: null,\n        dangerouslyUseHTMLString: false,\n        focusAfterClosed: null,\n        isOnComposition: false,\n        distinguishCancelAndClose: false\n      };\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/notification/index.js",
    "content": "import Notification from './src/main.js';\nexport default Notification;\n"
  },
  {
    "path": "packages/notification/src/main.js",
    "content": "import Vue from 'vue';\nimport Main from './main.vue';\nimport merge from 'element-ui/src/utils/merge';\nimport { PopupManager } from 'element-ui/src/utils/popup';\nimport { isVNode } from 'element-ui/src/utils/vdom';\nconst NotificationConstructor = Vue.extend(Main);\n\nlet instance;\nlet instances = [];\nlet seed = 1;\n\nconst Notification = function(options) {\n  if (Vue.prototype.$isServer) return;\n  options = merge({}, options);\n  const userOnClose = options.onClose;\n  const id = 'notification_' + seed++;\n  const position = options.position || 'top-right';\n\n  options.onClose = function() {\n    Notification.close(id, userOnClose);\n  };\n\n  instance = new NotificationConstructor({\n    data: options\n  });\n\n  if (isVNode(options.message)) {\n    instance.$slots.default = [options.message];\n    options.message = 'REPLACED_BY_VNODE';\n  }\n  instance.id = id;\n  instance.$mount();\n  document.body.appendChild(instance.$el);\n  instance.visible = true;\n  instance.dom = instance.$el;\n  instance.dom.style.zIndex = PopupManager.nextZIndex();\n\n  let verticalOffset = options.offset || 0;\n  instances.filter(item => item.position === position).forEach(item => {\n    verticalOffset += item.$el.offsetHeight + 16;\n  });\n  verticalOffset += 16;\n  instance.verticalOffset = verticalOffset;\n  instances.push(instance);\n  return instance;\n};\n\n['success', 'warning', 'info', 'error'].forEach(type => {\n  Notification[type] = options => {\n    if (typeof options === 'string' || isVNode(options)) {\n      options = {\n        message: options\n      };\n    }\n    options.type = type;\n    return Notification(options);\n  };\n});\n\nNotification.close = function(id, userOnClose) {\n  let index = -1;\n  const len = instances.length;\n  const instance = instances.filter((instance, i) => {\n    if (instance.id === id) {\n      index = i;\n      return true;\n    }\n    return false;\n  })[0];\n  if (!instance) return;\n\n  if (typeof userOnClose === 'function') {\n    userOnClose(instance);\n  }\n  instances.splice(index, 1);\n\n  if (len <= 1) return;\n  const position = instance.position;\n  const removedHeight = instance.dom.offsetHeight;\n  for (let i = index; i < len - 1 ; i++) {\n    if (instances[i].position === position) {\n      instances[i].dom.style[instance.verticalProperty] =\n        parseInt(instances[i].dom.style[instance.verticalProperty], 10) - removedHeight - 16 + 'px';\n    }\n  }\n};\n\nNotification.closeAll = function() {\n  for (let i = instances.length - 1; i >= 0; i--) {\n    instances[i].close();\n  }\n};\n\nexport default Notification;\n"
  },
  {
    "path": "packages/notification/src/main.vue",
    "content": "<template>\n  <transition name=\"el-notification-fade\">\n    <div\n      :class=\"['el-notification', customClass, horizontalClass]\"\n      v-show=\"visible\"\n      :style=\"positionStyle\"\n      @mouseenter=\"clearTimer()\"\n      @mouseleave=\"startTimer()\"\n      @click=\"click\"\n      role=\"alert\"\n    >\n      <i\n        class=\"el-notification__icon\"\n        :class=\"[ typeClass, iconClass ]\"\n        v-if=\"type || iconClass\">\n      </i>\n      <div class=\"el-notification__group\" :class=\"{ 'is-with-icon': typeClass || iconClass }\">\n        <h2 class=\"el-notification__title\" v-text=\"title\"></h2>\n        <div class=\"el-notification__content\" v-show=\"message\">\n          <slot>\n            <p v-if=\"!dangerouslyUseHTMLString\">{{ message }}</p>\n            <p v-else v-html=\"message\"></p>\n          </slot>\n        </div>\n        <div\n          class=\"el-notification__closeBtn el-icon-close\"\n          v-if=\"showClose\"\n          @click.stop=\"close\"></div>\n      </div>\n    </div>\n  </transition>\n</template>\n\n<script type=\"text/babel\">\n  let typeMap = {\n    success: 'success',\n    info: 'info',\n    warning: 'warning',\n    error: 'error'\n  };\n\n  export default {\n    data() {\n      return {\n        visible: false,\n        title: '',\n        message: '',\n        duration: 4500,\n        type: '',\n        showClose: true,\n        customClass: '',\n        iconClass: '',\n        onClose: null,\n        onClick: null,\n        closed: false,\n        verticalOffset: 0,\n        timer: null,\n        dangerouslyUseHTMLString: false,\n        position: 'top-right'\n      };\n    },\n\n    computed: {\n      typeClass() {\n        return this.type && typeMap[this.type] ? `el-icon-${ typeMap[this.type] }` : '';\n      },\n\n      horizontalClass() {\n        return this.position.indexOf('right') > -1 ? 'right' : 'left';\n      },\n\n      verticalProperty() {\n        return /^top-/.test(this.position) ? 'top' : 'bottom';\n      },\n\n      positionStyle() {\n        return {\n          [this.verticalProperty]: `${ this.verticalOffset }px`\n        };\n      }\n    },\n\n    watch: {\n      closed(newVal) {\n        if (newVal) {\n          this.visible = false;\n          this.$el.addEventListener('transitionend', this.destroyElement);\n        }\n      }\n    },\n\n    methods: {\n      destroyElement() {\n        this.$el.removeEventListener('transitionend', this.destroyElement);\n        this.$destroy(true);\n        this.$el.parentNode.removeChild(this.$el);\n      },\n\n      click() {\n        if (typeof this.onClick === 'function') {\n          this.onClick();\n        }\n      },\n\n      close() {\n        this.closed = true;\n        if (typeof this.onClose === 'function') {\n          this.onClose();\n        }\n      },\n\n      clearTimer() {\n        clearTimeout(this.timer);\n      },\n\n      startTimer() {\n        if (this.duration > 0) {\n          this.timer = setTimeout(() => {\n            if (!this.closed) {\n              this.close();\n            }\n          }, this.duration);\n        }\n      },\n      keydown(e) {\n        if (e.keyCode === 46 || e.keyCode === 8) {\n          this.clearTimer(); // detele 取消倒计时\n        } else if (e.keyCode === 27) { // esc关闭消息\n          if (!this.closed) {\n            this.close();\n          }\n        } else {\n          this.startTimer(); // 恢复倒计时\n        }\n      }\n    },\n    mounted() {\n      if (this.duration > 0) {\n        this.timer = setTimeout(() => {\n          if (!this.closed) {\n            this.close();\n          }\n        }, this.duration);\n      }\n      document.addEventListener('keydown', this.keydown);\n    },\n    beforeDestroy() {\n      document.removeEventListener('keydown', this.keydown);\n    }\n  };\n</script>\n\n"
  },
  {
    "path": "packages/option/index.js",
    "content": "import ElOption from '../select/src/option';\n\n/* istanbul ignore next */\nElOption.install = function(Vue) {\n  Vue.component(ElOption.name, ElOption);\n};\n\nexport default ElOption;\n"
  },
  {
    "path": "packages/option-group/index.js",
    "content": "import ElOptionGroup from '../select/src/option-group';\n\n/* istanbul ignore next */\nElOptionGroup.install = function(Vue) {\n  Vue.component(ElOptionGroup.name, ElOptionGroup);\n};\n\nexport default ElOptionGroup;\n"
  },
  {
    "path": "packages/page-header/index.js",
    "content": "import PageHeader from './src/main';\n\n/* istanbul ignore next */\nPageHeader.install = function(Vue) {\n  Vue.component(PageHeader.name, PageHeader);\n};\n\nexport default PageHeader;\n"
  },
  {
    "path": "packages/page-header/src/main.vue",
    "content": "<template>\n  <div class=\"el-page-header\">\n    <div class=\"el-page-header__left\" @click=\"$emit('back')\">\n      <i class=\"el-icon-back\"></i>\n      <div class=\"el-page-header__title\">\n        <slot name=\"title\">{{ title }}</slot>\n      </div>\n    </div>\n    <div class=\"el-page-header__content\">\n      <slot name=\"content\">{{ content }}</slot>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { t } from 'element-ui/src/locale';\nexport default {\n  name: 'ElPageHeader',\n\n  props: {\n    title: {\n      type: String,\n      default() {\n        return t('el.pageHeader.title');\n      }\n    },\n    content: String\n  }\n};\n</script>\n"
  },
  {
    "path": "packages/pagination/index.js",
    "content": "import Pagination from './src/pagination';\n\n/* istanbul ignore next */\nPagination.install = function(Vue) {\n  Vue.component(Pagination.name, Pagination);\n};\n\nexport default Pagination;\n"
  },
  {
    "path": "packages/pagination/src/pager.vue",
    "content": "<template>\n  <ul @click=\"onPagerClick\" class=\"el-pager\">\n    <li\n      :class=\"{ active: currentPage === 1, disabled }\"\n      v-if=\"pageCount > 0\"\n      class=\"number\">1</li>\n    <li\n      class=\"el-icon more btn-quickprev\"\n      :class=\"[quickprevIconClass, { disabled }]\"\n      v-if=\"showPrevMore\"\n      @mouseenter=\"onMouseenter('left')\"\n      @mouseleave=\"quickprevIconClass = 'el-icon-more'\">\n    </li>\n    <li\n      v-for=\"pager in pagers\"\n      :key=\"pager\"\n      :class=\"{ active: currentPage === pager, disabled }\"\n      class=\"number\">{{ pager }}</li>\n    <li\n      class=\"el-icon more btn-quicknext\"\n      :class=\"[quicknextIconClass, { disabled }]\"\n      v-if=\"showNextMore\"\n      @mouseenter=\"onMouseenter('right')\"\n      @mouseleave=\"quicknextIconClass = 'el-icon-more'\">\n    </li>\n    <li\n      :class=\"{ active: currentPage === pageCount, disabled }\"\n      class=\"number\"\n      v-if=\"pageCount > 1\">{{ pageCount }}</li>\n  </ul>\n</template>\n\n<script type=\"text/babel\">\n  export default {\n    name: 'ElPager',\n\n    props: {\n      currentPage: Number,\n\n      pageCount: Number,\n\n      pagerCount: Number,\n\n      disabled: Boolean\n    },\n\n    watch: {\n      showPrevMore(val) {\n        if (!val) this.quickprevIconClass = 'el-icon-more';\n      },\n\n      showNextMore(val) {\n        if (!val) this.quicknextIconClass = 'el-icon-more';\n      }\n    },\n\n    methods: {\n      onPagerClick(event) {\n        const target = event.target;\n        if (target.tagName === 'UL' || this.disabled) {\n          return;\n        }\n\n        let newPage = Number(event.target.textContent);\n        const pageCount = this.pageCount;\n        const currentPage = this.currentPage;\n        const pagerCountOffset = this.pagerCount - 2;\n\n        if (target.className.indexOf('more') !== -1) {\n          if (target.className.indexOf('quickprev') !== -1) {\n            newPage = currentPage - pagerCountOffset;\n          } else if (target.className.indexOf('quicknext') !== -1) {\n            newPage = currentPage + pagerCountOffset;\n          }\n        }\n\n        /* istanbul ignore if */\n        if (!isNaN(newPage)) {\n          if (newPage < 1) {\n            newPage = 1;\n          }\n\n          if (newPage > pageCount) {\n            newPage = pageCount;\n          }\n        }\n\n        if (newPage !== currentPage) {\n          this.$emit('change', newPage);\n        }\n      },\n\n      onMouseenter(direction) {\n        if (this.disabled) return;\n        if (direction === 'left') {\n          this.quickprevIconClass = 'el-icon-d-arrow-left';\n        } else {\n          this.quicknextIconClass = 'el-icon-d-arrow-right';\n        }\n      }\n    },\n\n    computed: {\n      pagers() {\n        const pagerCount = this.pagerCount;\n        const halfPagerCount = (pagerCount - 1) / 2;\n\n        const currentPage = Number(this.currentPage);\n        const pageCount = Number(this.pageCount);\n\n        let showPrevMore = false;\n        let showNextMore = false;\n\n        if (pageCount > pagerCount) {\n          if (currentPage > pagerCount - halfPagerCount) {\n            showPrevMore = true;\n          }\n\n          if (currentPage < pageCount - halfPagerCount) {\n            showNextMore = true;\n          }\n        }\n\n        const array = [];\n\n        if (showPrevMore && !showNextMore) {\n          const startPage = pageCount - (pagerCount - 2);\n          for (let i = startPage; i < pageCount; i++) {\n            array.push(i);\n          }\n        } else if (!showPrevMore && showNextMore) {\n          for (let i = 2; i < pagerCount; i++) {\n            array.push(i);\n          }\n        } else if (showPrevMore && showNextMore) {\n          const offset = Math.floor(pagerCount / 2) - 1;\n          for (let i = currentPage - offset ; i <= currentPage + offset; i++) {\n            array.push(i);\n          }\n        } else {\n          for (let i = 2; i < pageCount; i++) {\n            array.push(i);\n          }\n        }\n\n        this.showPrevMore = showPrevMore;\n        this.showNextMore = showNextMore;\n\n        return array;\n      }\n    },\n\n    data() {\n      return {\n        current: null,\n        showPrevMore: false,\n        showNextMore: false,\n        quicknextIconClass: 'el-icon-more',\n        quickprevIconClass: 'el-icon-more'\n      };\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/pagination/src/pagination.js",
    "content": "import Pager from './pager.vue';\nimport ElSelect from 'element-ui/packages/select';\nimport ElOption from 'element-ui/packages/option';\nimport ElInput from 'element-ui/packages/input';\nimport Locale from 'element-ui/src/mixins/locale';\nimport { valueEquals } from 'element-ui/src/utils/util';\n\nexport default {\n  name: 'ElPagination',\n\n  props: {\n    pageSize: {\n      type: Number,\n      default: 10\n    },\n\n    small: Boolean,\n\n    total: Number,\n\n    pageCount: Number,\n\n    pagerCount: {\n      type: Number,\n      validator(value) {\n        return (value | 0) === value && value > 4 && value < 22 && (value % 2) === 1;\n      },\n      default: 7\n    },\n\n    currentPage: {\n      type: Number,\n      default: 1\n    },\n\n    layout: {\n      default: 'prev, pager, next, jumper, ->, total'\n    },\n\n    pageSizes: {\n      type: Array,\n      default() {\n        return [10, 20, 30, 40, 50, 100];\n      }\n    },\n\n    popperClass: String,\n\n    prevText: String,\n\n    nextText: String,\n\n    background: Boolean,\n\n    disabled: Boolean,\n\n    hideOnSinglePage: Boolean\n  },\n\n  data() {\n    return {\n      internalCurrentPage: 1,\n      internalPageSize: 0,\n      lastEmittedPage: -1,\n      userChangePageSize: false\n    };\n  },\n\n  render(h) {\n    const layout = this.layout;\n    if (!layout) return null;\n    if (this.hideOnSinglePage && (!this.internalPageCount || this.internalPageCount === 1)) return null;\n\n    let template = <div class={['el-pagination', {\n      'is-background': this.background,\n      'el-pagination--small': this.small\n    }] }></div>;\n    const TEMPLATE_MAP = {\n      prev: <prev></prev>,\n      jumper: <jumper></jumper>,\n      pager: <pager currentPage={ this.internalCurrentPage } pageCount={ this.internalPageCount } pagerCount={ this.pagerCount } on-change={ this.handleCurrentChange } disabled={ this.disabled }></pager>,\n      next: <next></next>,\n      sizes: <sizes pageSizes={ this.pageSizes }></sizes>,\n      slot: <slot>{ this.$slots.default ? this.$slots.default : '' }</slot>,\n      total: <total></total>\n    };\n    const components = layout.split(',').map((item) => item.trim());\n    const rightWrapper = <div class=\"el-pagination__rightwrapper\"></div>;\n    let haveRightWrapper = false;\n\n    template.children = template.children || [];\n    rightWrapper.children = rightWrapper.children || [];\n    components.forEach(compo => {\n      if (compo === '->') {\n        haveRightWrapper = true;\n        return;\n      }\n\n      if (!haveRightWrapper) {\n        template.children.push(TEMPLATE_MAP[compo]);\n      } else {\n        rightWrapper.children.push(TEMPLATE_MAP[compo]);\n      }\n    });\n\n    if (haveRightWrapper) {\n      template.children.unshift(rightWrapper);\n    }\n\n    return template;\n  },\n\n  components: {\n    Prev: {\n      render(h) {\n        return (\n          <button\n            type=\"button\"\n            class=\"btn-prev\"\n            disabled={ this.$parent.disabled || this.$parent.internalCurrentPage <= 1 }\n            on-click={ this.$parent.prev }>\n            {\n              this.$parent.prevText\n                ? <span>{ this.$parent.prevText }</span>\n                : <i class=\"el-icon el-icon-arrow-left\"></i>\n            }\n          </button>\n        );\n      }\n    },\n\n    Next: {\n      render(h) {\n        return (\n          <button\n            type=\"button\"\n            class=\"btn-next\"\n            disabled={ this.$parent.disabled || this.$parent.internalCurrentPage === this.$parent.internalPageCount || this.$parent.internalPageCount === 0 }\n            on-click={ this.$parent.next }>\n            {\n              this.$parent.nextText\n                ? <span>{ this.$parent.nextText }</span>\n                : <i class=\"el-icon el-icon-arrow-right\"></i>\n            }\n          </button>\n        );\n      }\n    },\n\n    Sizes: {\n      mixins: [Locale],\n\n      props: {\n        pageSizes: Array\n      },\n\n      watch: {\n        pageSizes: {\n          immediate: true,\n          handler(newVal, oldVal) {\n            if (valueEquals(newVal, oldVal)) return;\n            if (Array.isArray(newVal)) {\n              this.$parent.internalPageSize = newVal.indexOf(this.$parent.pageSize) > -1\n                ? this.$parent.pageSize\n                : this.pageSizes[0];\n            }\n          }\n        }\n      },\n\n      render(h) {\n        return (\n          <span class=\"el-pagination__sizes\">\n            <el-select\n              value={ this.$parent.internalPageSize }\n              popperClass={ this.$parent.popperClass || '' }\n              size=\"mini\"\n              on-input={ this.handleChange }\n              disabled={ this.$parent.disabled }>\n              {\n                this.pageSizes.map(item =>\n                  <el-option\n                    value={ item }\n                    label={ item + this.t('el.pagination.pagesize') }>\n                  </el-option>\n                )\n              }\n            </el-select>\n          </span>\n        );\n      },\n\n      components: {\n        ElSelect,\n        ElOption\n      },\n\n      methods: {\n        handleChange(val) {\n          if (val !== this.$parent.internalPageSize) {\n            this.$parent.internalPageSize = val = parseInt(val, 10);\n            this.$parent.userChangePageSize = true;\n            this.$parent.$emit('update:pageSize', val);\n            this.$parent.$emit('size-change', val);\n          }\n        }\n      }\n    },\n\n    Jumper: {\n      mixins: [Locale],\n\n      components: { ElInput },\n\n      data() {\n        return {\n          userInput: null\n        };\n      },\n\n      watch: {\n        '$parent.internalCurrentPage'() {\n          this.userInput = null;\n        }\n      },\n\n      methods: {\n        handleKeyup({ keyCode, target }) {\n          // Chrome, Safari, Firefox triggers change event on Enter\n          // Hack for IE: https://github.com/ElemeFE/element/issues/11710\n          // Drop this method when we no longer supports IE\n          if (keyCode === 13) {\n            this.handleChange(target.value);\n          }\n        },\n        handleInput(value) {\n          this.userInput = value;\n        },\n        handleChange(value) {\n          this.$parent.internalCurrentPage = this.$parent.getValidCurrentPage(value);\n          this.$parent.emitChange();\n          this.userInput = null;\n        }\n      },\n\n      render(h) {\n        return (\n          <span class=\"el-pagination__jump\">\n            { this.t('el.pagination.goto') }\n            <el-input\n              class=\"el-pagination__editor is-in-pagination\"\n              min={ 1 }\n              max={ this.$parent.internalPageCount }\n              value={ this.userInput !== null ? this.userInput : this.$parent.internalCurrentPage }\n              type=\"number\"\n              disabled={ this.$parent.disabled }\n              nativeOnKeyup={ this.handleKeyup }\n              onInput={ this.handleInput }\n              onChange={ this.handleChange }/>\n            { this.t('el.pagination.pageClassifier') }\n          </span>\n        );\n      }\n    },\n\n    Total: {\n      mixins: [Locale],\n\n      render(h) {\n        return (\n          typeof this.$parent.total === 'number'\n            ? <span class=\"el-pagination__total\">{ this.t('el.pagination.total', { total: this.$parent.total }) }</span>\n            : ''\n        );\n      }\n    },\n\n    Pager\n  },\n\n  methods: {\n    handleCurrentChange(val) {\n      this.internalCurrentPage = this.getValidCurrentPage(val);\n      this.userChangePageSize = true;\n      this.emitChange();\n    },\n\n    prev() {\n      if (this.disabled) return;\n      const newVal = this.internalCurrentPage - 1;\n      this.internalCurrentPage = this.getValidCurrentPage(newVal);\n      this.$emit('prev-click', this.internalCurrentPage);\n      this.emitChange();\n    },\n\n    next() {\n      if (this.disabled) return;\n      const newVal = this.internalCurrentPage + 1;\n      this.internalCurrentPage = this.getValidCurrentPage(newVal);\n      this.$emit('next-click', this.internalCurrentPage);\n      this.emitChange();\n    },\n\n    getValidCurrentPage(value) {\n      value = parseInt(value, 10);\n\n      const havePageCount = typeof this.internalPageCount === 'number';\n\n      let resetValue;\n      if (!havePageCount) {\n        if (isNaN(value) || value < 1) resetValue = 1;\n      } else {\n        if (value < 1) {\n          resetValue = 1;\n        } else if (value > this.internalPageCount) {\n          resetValue = this.internalPageCount;\n        }\n      }\n\n      if (resetValue === undefined && isNaN(value)) {\n        resetValue = 1;\n      } else if (resetValue === 0) {\n        resetValue = 1;\n      }\n\n      return resetValue === undefined ? value : resetValue;\n    },\n\n    emitChange() {\n      this.$nextTick(() => {\n        if (this.internalCurrentPage !== this.lastEmittedPage || this.userChangePageSize) {\n          this.$emit('current-change', this.internalCurrentPage);\n          this.lastEmittedPage = this.internalCurrentPage;\n          this.userChangePageSize = false;\n        }\n      });\n    }\n  },\n\n  computed: {\n    internalPageCount() {\n      if (typeof this.total === 'number') {\n        return Math.max(1, Math.ceil(this.total / this.internalPageSize));\n      } else if (typeof this.pageCount === 'number') {\n        return Math.max(1, this.pageCount);\n      }\n      return null;\n    }\n  },\n\n  watch: {\n    currentPage: {\n      immediate: true,\n      handler(val) {\n        this.internalCurrentPage = this.getValidCurrentPage(val);\n      }\n    },\n\n    pageSize: {\n      immediate: true,\n      handler(val) {\n        this.internalPageSize = isNaN(val) ? 10 : val;\n      }\n    },\n\n    internalCurrentPage: {\n      immediate: true,\n      handler(newVal) {\n        this.$emit('update:currentPage', newVal);\n        this.lastEmittedPage = -1;\n      }\n    },\n\n    internalPageCount(newVal) {\n      /* istanbul ignore if */\n      const oldPage = this.internalCurrentPage;\n      if (newVal > 0 && oldPage === 0) {\n        this.internalCurrentPage = 1;\n      } else if (oldPage > newVal) {\n        this.internalCurrentPage = newVal === 0 ? 1 : newVal;\n        this.userChangePageSize && this.emitChange();\n      }\n      this.userChangePageSize = false;\n    }\n  }\n};\n"
  },
  {
    "path": "packages/popconfirm/index.js",
    "content": "import Popconfirm from './src/main';\n\n/* istanbul ignore next */\nPopconfirm.install = function(Vue) {\n  Vue.component(Popconfirm.name, Popconfirm);\n};\n\nexport default Popconfirm;\n"
  },
  {
    "path": "packages/popconfirm/src/main.vue",
    "content": "<template>\n  <el-popover\n    v-bind=\"$attrs\"\n    v-model=\"visible\"\n    trigger=\"click\"\n  >\n  <div class=\"el-popconfirm\">\n    <p class=\"el-popconfirm__main\">\n    <i\n      v-if=\"!hideIcon\"\n      :class=\"icon\"\n      class=\"el-popconfirm__icon\"\n      :style=\"{color: iconColor}\"\n    ></i>\n      {{title}}\n    </p>\n    <div class=\"el-popconfirm__action\">\n      <el-button \n        size=\"mini\" \n        :type=\"cancelButtonType\" \n        @click=\"cancel\"\n      >\n        {{ displayCancelButtonText }}\n      </el-button>\n      <el-button \n        size=\"mini\" \n        :type=\"confirmButtonType\" \n        @click=\"confirm\"\n      >\n        {{ displayConfirmButtonText }}\n      </el-button>\n    </div>\n  </div>\n  <slot name=\"reference\" slot=\"reference\"></slot>\n</el-popover>\n</template>\n\n<script>\nimport ElPopover from 'element-ui/packages/popover';\nimport ElButton from 'element-ui/packages/button';\nimport {t} from 'element-ui/src/locale';\n\nexport default {\n  name: 'ElPopconfirm',\n  props: {\n    title: {\n      type: String\n    },\n    confirmButtonText: {\n      type: String\n    },\n    cancelButtonText: {\n      type: String\n    },\n    confirmButtonType: {\n      type: String,\n      default: 'primary'\n    },\n    cancelButtonType: {\n      type: String,\n      default: 'text'\n    },\n    icon: {\n      type: String,\n      default: 'el-icon-question'\n    },\n    iconColor: {\n      type: String,\n      default: '#f90'\n    },\n    hideIcon: {\n      type: Boolean,\n      default: false\n    }\n  },\n  components: {\n    ElPopover,\n    ElButton\n  },\n  data() {\n    return {\n      visible: false\n    };\n  },\n  computed: {\n    displayConfirmButtonText() {\n      return this.confirmButtonText || t('el.popconfirm.confirmButtonText');\n    },\n    displayCancelButtonText() {\n      return this.cancelButtonText || t('el.popconfirm.cancelButtonText');\n    }\n  },\n  methods: {\n    confirm() {\n      this.visible = false;\n      this.$emit('confirm');\n    },\n    cancel() {\n      this.visible = false;\n      this.$emit('cancel');\n    }\n  }\n};\n</script>\n"
  },
  {
    "path": "packages/popover/index.js",
    "content": "import Popover from './src/main';\nimport directive from './src/directive';\nimport Vue from 'vue';\n\nVue.directive('popover', directive);\n\n/* istanbul ignore next */\nPopover.install = function(Vue) {\n  Vue.directive('popover', directive);\n  Vue.component(Popover.name, Popover);\n};\nPopover.directive = directive;\n\nexport default Popover;\n"
  },
  {
    "path": "packages/popover/src/directive.js",
    "content": "const getReference = (el, binding, vnode) => {\n  const _ref = binding.expression ? binding.value : binding.arg;\n  const popper = vnode.context.$refs[_ref];\n  if (popper) {\n    if (Array.isArray(popper)) {\n      popper[0].$refs.reference = el;\n    } else {\n      popper.$refs.reference = el;\n    }\n  }\n};\n\nexport default {\n  bind(el, binding, vnode) {\n    getReference(el, binding, vnode);\n  },\n  inserted(el, binding, vnode) {\n    getReference(el, binding, vnode);\n  }\n};\n"
  },
  {
    "path": "packages/popover/src/main.vue",
    "content": "<template>\n  <span>\n    <transition\n      :name=\"transition\"\n      @after-enter=\"handleAfterEnter\"\n      @after-leave=\"handleAfterLeave\">\n      <div\n        class=\"el-popover el-popper\"\n        :class=\"[popperClass, content && 'el-popover--plain']\"\n        ref=\"popper\"\n        v-show=\"!disabled && showPopper\"\n        :style=\"{ width: width + 'px' }\"\n        role=\"tooltip\"\n        :id=\"tooltipId\"\n        :aria-hidden=\"(disabled || !showPopper) ? 'true' : 'false'\"\n      >\n        <div class=\"el-popover__title\" v-if=\"title\" v-text=\"title\"></div>\n        <slot>{{ content }}</slot>\n      </div>\n    </transition>\n    <span class=\"el-popover__reference-wrapper\" ref=\"wrapper\" >\n      <slot name=\"reference\"></slot>\n    </span>\n  </span>\n</template>\n<script>\nimport Popper from 'element-ui/src/utils/vue-popper';\nimport { on, off } from 'element-ui/src/utils/dom';\nimport { addClass, removeClass } from 'element-ui/src/utils/dom';\nimport { generateId } from 'element-ui/src/utils/util';\n\nexport default {\n  name: 'ElPopover',\n\n  mixins: [Popper],\n\n  props: {\n    trigger: {\n      type: String,\n      default: 'click',\n      validator: value => ['click', 'focus', 'hover', 'manual'].indexOf(value) > -1\n    },\n    openDelay: {\n      type: Number,\n      default: 0\n    },\n    closeDelay: {\n      type: Number,\n      default: 200\n    },\n    title: String,\n    disabled: Boolean,\n    content: String,\n    reference: {},\n    popperClass: String,\n    width: {},\n    visibleArrow: {\n      default: true\n    },\n    arrowOffset: {\n      type: Number,\n      default: 0\n    },\n    transition: {\n      type: String,\n      default: 'fade-in-linear'\n    },\n    tabindex: {\n      type: Number,\n      default: 0\n    }\n  },\n\n  computed: {\n    tooltipId() {\n      return `el-popover-${generateId()}`;\n    }\n  },\n  watch: {\n    showPopper(val) {\n      if (this.disabled) {\n        return;\n      }\n      val ? this.$emit('show') : this.$emit('hide');\n    }\n  },\n\n  mounted() {\n    let reference = this.referenceElm = this.reference || this.$refs.reference;\n    const popper = this.popper || this.$refs.popper;\n\n    if (!reference && this.$refs.wrapper.children) {\n      reference = this.referenceElm = this.$refs.wrapper.children[0];\n    }\n    // 可访问性\n    if (reference) {\n      addClass(reference, 'el-popover__reference');\n      reference.setAttribute('aria-describedby', this.tooltipId);\n      reference.setAttribute('tabindex', this.tabindex); // tab序列\n      popper.setAttribute('tabindex', 0);\n\n      if (this.trigger !== 'click') {\n        on(reference, 'focusin', () => {\n          this.handleFocus();\n          const instance = reference.__vue__;\n          if (instance && typeof instance.focus === 'function') {\n            instance.focus();\n          }\n        });\n        on(popper, 'focusin', this.handleFocus);\n        on(reference, 'focusout', this.handleBlur);\n        on(popper, 'focusout', this.handleBlur);\n      }\n      on(reference, 'keydown', this.handleKeydown);\n      on(reference, 'click', this.handleClick);\n    }\n    if (this.trigger === 'click') {\n      on(reference, 'click', this.doToggle);\n      on(document, 'click', this.handleDocumentClick);\n    } else if (this.trigger === 'hover') {\n      on(reference, 'mouseenter', this.handleMouseEnter);\n      on(popper, 'mouseenter', this.handleMouseEnter);\n      on(reference, 'mouseleave', this.handleMouseLeave);\n      on(popper, 'mouseleave', this.handleMouseLeave);\n    } else if (this.trigger === 'focus') {\n      if (this.tabindex < 0) {\n        console.warn('[Element Warn][Popover]a negative taindex means that the element cannot be focused by tab key');\n      }\n      if (reference.querySelector('input, textarea')) {\n        on(reference, 'focusin', this.doShow);\n        on(reference, 'focusout', this.doClose);\n      } else {\n        on(reference, 'mousedown', this.doShow);\n        on(reference, 'mouseup', this.doClose);\n      }\n    }\n  },\n\n  beforeDestroy() {\n    this.cleanup();\n  },\n\n  deactivated() {\n    this.cleanup();\n  },\n\n  methods: {\n    doToggle() {\n      this.showPopper = !this.showPopper;\n    },\n    doShow() {\n      this.showPopper = true;\n    },\n    doClose() {\n      this.showPopper = false;\n    },\n    handleFocus() {\n      addClass(this.referenceElm, 'focusing');\n      if (this.trigger === 'click' || this.trigger === 'focus') this.showPopper = true;\n    },\n    handleClick() {\n      removeClass(this.referenceElm, 'focusing');\n    },\n    handleBlur() {\n      removeClass(this.referenceElm, 'focusing');\n      if (this.trigger === 'click' || this.trigger === 'focus') this.showPopper = false;\n    },\n    handleMouseEnter() {\n      clearTimeout(this._timer);\n      if (this.openDelay) {\n        this._timer = setTimeout(() => {\n          this.showPopper = true;\n        }, this.openDelay);\n      } else {\n        this.showPopper = true;\n      }\n    },\n    handleKeydown(ev) {\n      if (ev.keyCode === 27 && this.trigger !== 'manual') { // esc\n        this.doClose();\n      }\n    },\n    handleMouseLeave() {\n      clearTimeout(this._timer);\n      if (this.closeDelay) {\n        this._timer = setTimeout(() => {\n          this.showPopper = false;\n        }, this.closeDelay);\n      } else {\n        this.showPopper = false;\n      }\n    },\n    handleDocumentClick(e) {\n      let reference = this.reference || this.$refs.reference;\n      const popper = this.popper || this.$refs.popper;\n\n      if (!reference && this.$refs.wrapper.children) {\n        reference = this.referenceElm = this.$refs.wrapper.children[0];\n      }\n      if (!this.$el ||\n        !reference ||\n        this.$el.contains(e.target) ||\n        reference.contains(e.target) ||\n        !popper ||\n        popper.contains(e.target)) return;\n      this.showPopper = false;\n    },\n    handleAfterEnter() {\n      this.$emit('after-enter');\n    },\n    handleAfterLeave() {\n      this.$emit('after-leave');\n      this.doDestroy();\n    },\n    cleanup() {\n      if (this.openDelay || this.closeDelay) {\n        clearTimeout(this._timer);\n      }\n    }\n  },\n\n  destroyed() {\n    const reference = this.reference;\n\n    off(reference, 'click', this.doToggle);\n    off(reference, 'mouseup', this.doClose);\n    off(reference, 'mousedown', this.doShow);\n    off(reference, 'focusin', this.doShow);\n    off(reference, 'focusout', this.doClose);\n    off(reference, 'mousedown', this.doShow);\n    off(reference, 'mouseup', this.doClose);\n    off(reference, 'mouseleave', this.handleMouseLeave);\n    off(reference, 'mouseenter', this.handleMouseEnter);\n    off(document, 'click', this.handleDocumentClick);\n  }\n};\n</script>\n"
  },
  {
    "path": "packages/progress/index.js",
    "content": "import ElProgress from './src/progress';\n\n/* istanbul ignore next */\nElProgress.install = function(Vue) {\n  Vue.component(ElProgress.name, ElProgress);\n};\n\nexport default ElProgress;\n"
  },
  {
    "path": "packages/progress/src/progress.vue",
    "content": "<template>\n  <div\n    class=\"el-progress\"\n    :class=\"[\n      'el-progress--' + type,\n      status ? 'is-' + status : '',\n      {\n        'el-progress--without-text': !showText,\n        'el-progress--text-inside': textInside,\n      }\n    ]\"\n    role=\"progressbar\"\n    :aria-valuenow=\"percentage\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <div class=\"el-progress-bar\" v-if=\"type === 'line'\">\n      <div class=\"el-progress-bar__outer\" :style=\"{height: strokeWidth + 'px', backgroundColor:defineBackColor}\">\n        <div class=\"el-progress-bar__inner\" :style=\"barStyle\">\n          <div class=\"el-progress-bar__innerText\" :style=\"{color:textColor}\" v-if=\"showText && textInside\">{{content}}</div>\n        </div>\n      </div>\n    </div>\n    <div class=\"el-progress-circle\" :style=\"{height: width + 'px', width: width + 'px'}\" v-else>\n      <svg viewBox=\"0 0 100 100\">\n        <path\n          class=\"el-progress-circle__track\"\n          :d=\"trackPath\"\n          :stroke=\"defineBackColor\"\n          :stroke-width=\"relativeStrokeWidth\"\n          fill=\"none\"\n          :style=\"trailPathStyle\"></path>\n        <path\n          class=\"el-progress-circle__path\"\n          :d=\"trackPath\"\n          :stroke=\"stroke\"\n          fill=\"none\"\n          :stroke-linecap=\"strokeLinecap\"\n          :stroke-width=\"percentage ? relativeStrokeWidth : 0\"\n          :style=\"circlePathStyle\"></path>\n      </svg>\n    </div>\n    <div\n      class=\"el-progress__text\"\n      v-if=\"showText && !textInside\"\n      :style=\"{fontSize: progressTextSize + 'px', color:textColor}\"\n    >\n      <template v-if=\"!status\">{{content}}</template>\n      <i v-else :class=\"iconClass\"></i>\n    </div>\n  </div>\n</template>\n<script>\n  export default {\n    name: 'ElProgress',\n    props: {\n      type: {\n        type: String,\n        default: 'line',\n        validator: val => ['line', 'circle', 'dashboard'].indexOf(val) > -1\n      },\n      percentage: {\n        type: Number,\n        default: 0,\n        required: true,\n        validator: val => val >= 0 && val <= 100\n      },\n      status: {\n        type: String,\n        validator: val => ['success', 'exception', 'warning'].indexOf(val) > -1\n      },\n      strokeWidth: {\n        type: Number,\n        default: 6\n      },\n      strokeLinecap: {\n        type: String,\n        default: 'round'\n      },\n      textInside: {\n        type: Boolean,\n        default: false\n      },\n      width: {\n        type: Number,\n        default: 126\n      },\n      showText: {\n        type: Boolean,\n        default: true\n      },\n      color: {\n        type: [String, Array, Function],\n        default: ''\n      },\n      defineBackColor: {\n        type: [String, Array, Function],\n        default: '#ebeef5'\n      },\n      textColor: {\n        type: [String, Array, Function],\n        default: '#606266'\n      },\n      format: Function\n    },\n    computed: {\n      barStyle() {\n        const style = {};\n        style.width = this.percentage + '%';\n        style.backgroundColor = this.getCurrentColor(this.percentage);\n        return style;\n      },\n      relativeStrokeWidth() {\n        return (this.strokeWidth / this.width * 100).toFixed(1);\n      },\n      radius() {\n        if (this.type === 'circle' || this.type === 'dashboard') {\n          return parseInt(50 - parseFloat(this.relativeStrokeWidth) / 2, 10);\n        } else {\n          return 0;\n        }\n      },\n      trackPath() {\n        const radius = this.radius;\n        const isDashboard = this.type === 'dashboard';\n        return `\n          M 50 50\n          m 0 ${isDashboard ? '' : '-'}${radius}\n          a ${radius} ${radius} 0 1 1 0 ${isDashboard ? '-' : ''}${radius * 2}\n          a ${radius} ${radius} 0 1 1 0 ${isDashboard ? '' : '-'}${radius * 2}\n          `;\n      },\n      perimeter() {\n        return 2 * Math.PI * this.radius;\n      },\n      rate() {\n        return this.type === 'dashboard' ? 0.75 : 1;\n      },\n      strokeDashoffset() {\n        const offset = -1 * this.perimeter * (1 - this.rate) / 2;\n        return `${offset}px`;\n      },\n      trailPathStyle() {\n        return {\n          strokeDasharray: `${(this.perimeter * this.rate)}px, ${this.perimeter}px`,\n          strokeDashoffset: this.strokeDashoffset\n        };\n      },\n      circlePathStyle() {\n        return {\n          strokeDasharray: `${this.perimeter * this.rate * (this.percentage / 100) }px, ${this.perimeter}px`,\n          strokeDashoffset: this.strokeDashoffset,\n          transition: 'stroke-dasharray 0.6s ease 0s, stroke 0.6s ease'\n        };\n      },\n      stroke() {\n        let ret;\n        if (this.color) {\n          ret = this.getCurrentColor(this.percentage);\n        } else {\n          switch (this.status) {\n            case 'success':\n              ret = '#13ce66';\n              break;\n            case 'exception':\n              ret = '#ff4949';\n              break;\n            case 'warning':\n              ret = '#e6a23c';\n              break;\n            default:\n              ret = '#20a0ff';\n          }\n        }\n        return ret;\n      },\n      iconClass() {\n        if (this.status === 'warning') {\n          return 'el-icon-warning';\n        }\n        if (this.type === 'line') {\n          return this.status === 'success' ? 'el-icon-circle-check' : 'el-icon-circle-close';\n        } else {\n          return this.status === 'success' ? 'el-icon-check' : 'el-icon-close';\n        }\n      },\n      progressTextSize() {\n        return this.type === 'line'\n          ? 12 + this.strokeWidth * 0.4\n          : this.width * 0.111111 + 2 ;\n      },\n      content() {\n        if (typeof this.format === 'function') {\n          return this.format(this.percentage) || '';\n        } else {\n          return `${this.percentage}%`;\n        }\n      }\n    },\n    methods: {\n      getCurrentColor(percentage) {\n        if (typeof this.color === 'function') {\n          return this.color(percentage);\n        } else if (typeof this.color === 'string') {\n          return this.color;\n        } else {\n          return this.getLevelColor(percentage);\n        }\n      },\n      getLevelColor(percentage) {\n        const colorArray = this.getColorArray().sort((a, b) => a.percentage - b.percentage);\n\n        for (let i = 0; i < colorArray.length; i++) {\n          if (colorArray[i].percentage > percentage) {\n            return colorArray[i].color;\n          }\n        }\n        return colorArray[colorArray.length - 1].color;\n      },\n      getColorArray() {\n        const color = this.color;\n        const span = 100 / color.length;\n        return color.map((seriesColor, index) => {\n          if (typeof seriesColor === 'string') {\n            return {\n              color: seriesColor,\n              percentage: (index + 1) * span\n            };\n          }\n          return seriesColor;\n        });\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/radio/index.js",
    "content": "import Radio from './src/radio';\n\n/* istanbul ignore next */\nRadio.install = function(Vue) {\n  Vue.component(Radio.name, Radio);\n};\n\nexport default Radio;\n"
  },
  {
    "path": "packages/radio/src/radio-button.vue",
    "content": "<template>\n  <label\n    class=\"el-radio-button\"\n    :class=\"[\n      size ? 'el-radio-button--' + size : '',\n      { 'is-active': value === label },\n      { 'is-disabled': isDisabled },\n      { 'is-focus': focus }\n    ]\"\n    role=\"radio\"\n    :aria-checked=\"value === label\"\n    :aria-disabled=\"isDisabled\"\n    :tabindex=\"tabIndex\"\n    @keydown.space.stop.prevent=\"value = isDisabled ? value : label\"\n  >\n    <input\n      class=\"el-radio-button__orig-radio\"\n      :value=\"label\"\n      type=\"radio\"\n      v-model=\"value\"\n      :name=\"name\"\n      @change=\"handleChange\"\n      :disabled=\"isDisabled\"\n      tabindex=\"-1\"\n      @focus=\"focus = true\"\n      @blur=\"focus = false\"\n      autocomplete=\"off\"\n    >\n    <span\n      class=\"el-radio-button__inner\"\n      :style=\"value === label ? activeStyle : null\"\n      @keydown.stop>\n      <slot></slot>\n      <template v-if=\"!$slots.default\">{{label}}</template>\n    </span>\n  </label>\n</template>\n<script>\n  import Emitter from 'element-ui/src/mixins/emitter';\n\n  export default {\n    name: 'ElRadioButton',\n\n    mixins: [Emitter],\n\n    inject: {\n      elForm: {\n        default: ''\n      },\n      elFormItem: {\n        default: ''\n      }\n    },\n\n    props: {\n      label: {},\n      disabled: Boolean,\n      name: String\n    },\n    data() {\n      return {\n        focus: false\n      };\n    },\n    computed: {\n      value: {\n        get() {\n          return this._radioGroup.value;\n        },\n        set(value) {\n          this._radioGroup.$emit('input', value);\n        }\n      },\n      _radioGroup() {\n        let parent = this.$parent;\n        while (parent) {\n          if (parent.$options.componentName !== 'ElRadioGroup') {\n            parent = parent.$parent;\n          } else {\n            return parent;\n          }\n        }\n        return false;\n      },\n      activeStyle() {\n        return {\n          backgroundColor: this._radioGroup.fill || '',\n          borderColor: this._radioGroup.fill || '',\n          boxShadow: this._radioGroup.fill ? `-1px 0 0 0 ${this._radioGroup.fill}` : '',\n          color: this._radioGroup.textColor || ''\n        };\n      },\n      _elFormItemSize() {\n        return (this.elFormItem || {}).elFormItemSize;\n      },\n      size() {\n        return this._radioGroup.radioGroupSize || this._elFormItemSize || (this.$ELEMENT || {}).size;\n      },\n      isDisabled() {\n        return this.disabled || this._radioGroup.disabled || (this.elForm || {}).disabled;\n      },\n      tabIndex() {\n        return (this.isDisabled || (this._radioGroup && this.value !== this.label)) ? -1 : 0;\n      }\n    },\n\n    methods: {\n      handleChange() {\n        this.$nextTick(() => {\n          this.dispatch('ElRadioGroup', 'handleChange', this.value);\n        });\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/radio/src/radio-group.vue",
    "content": "<template>\n  <component\n    :is=\"_elTag\"\n    class=\"el-radio-group\"\n    role=\"radiogroup\"\n    @keydown=\"handleKeydown\"\n  >\n    <slot></slot>\n  </component>\n</template>\n<script>\n  import Emitter from 'element-ui/src/mixins/emitter';\n\n  const keyCode = Object.freeze({\n    LEFT: 37,\n    UP: 38,\n    RIGHT: 39,\n    DOWN: 40\n  });\n  export default {\n    name: 'ElRadioGroup',\n\n    componentName: 'ElRadioGroup',\n\n    inject: {\n      elFormItem: {\n        default: ''\n      }\n    },\n\n    mixins: [Emitter],\n\n    props: {\n      value: {},\n      size: String,\n      fill: String,\n      textColor: String,\n      disabled: Boolean\n    },\n\n    computed: {\n      _elFormItemSize() {\n        return (this.elFormItem || {}).elFormItemSize;\n      },\n      _elTag() {\n        let tag = (this.$vnode.data || {}).tag;\n        if (!tag || tag === 'component') tag = 'div';\n        return tag;\n      },\n      radioGroupSize() {\n        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;\n      }\n    },\n\n    created() {\n      this.$on('handleChange', value => {\n        this.$emit('change', value);\n      });\n    },\n    mounted() {\n      // 当radioGroup没有默认选项时，第一个可以选中Tab导航\n      const radios = this.$el.querySelectorAll('[type=radio]');\n      const firstLabel = this.$el.querySelectorAll('[role=radio]')[0];\n      if (![].some.call(radios, radio => radio.checked) && firstLabel) {\n        firstLabel.tabIndex = 0;\n      }\n    },\n    methods: {\n      handleKeydown(e) { // 左右上下按键 可以在radio组内切换不同选项\n        const target = e.target;\n        const className = target.nodeName === 'INPUT' ? '[type=radio]' : '[role=radio]';\n        const radios = this.$el.querySelectorAll(className);\n        const length = radios.length;\n        const index = [].indexOf.call(radios, target);\n        const roleRadios = this.$el.querySelectorAll('[role=radio]');\n        switch (e.keyCode) {\n          case keyCode.LEFT:\n          case keyCode.UP:\n            e.stopPropagation();\n            e.preventDefault();\n            if (index === 0) {\n              roleRadios[length - 1].click();\n              roleRadios[length - 1].focus();\n            } else {\n              roleRadios[index - 1].click();\n              roleRadios[index - 1].focus();\n            }\n            break;\n          case keyCode.RIGHT:\n          case keyCode.DOWN:\n            if (index === (length - 1)) {\n              e.stopPropagation();\n              e.preventDefault();\n              roleRadios[0].click();\n              roleRadios[0].focus();\n            } else {\n              roleRadios[index + 1].click();\n              roleRadios[index + 1].focus();\n            }\n            break;\n          default:\n            break;\n        }\n      }\n    },\n    watch: {\n      value(value) {\n        this.dispatch('ElFormItem', 'el.form.change', [this.value]);\n      }\n    }\n  };\n</script>\n\n"
  },
  {
    "path": "packages/radio/src/radio.vue",
    "content": "<template>\n  <label\n    class=\"el-radio\"\n    :class=\"[\n      border && radioSize ? 'el-radio--' + radioSize : '',\n      { 'is-disabled': isDisabled },\n      { 'is-focus': focus },\n      { 'is-bordered': border },\n      { 'is-checked': model === label }\n    ]\"\n    role=\"radio\"\n    :aria-checked=\"model === label\"\n    :aria-disabled=\"isDisabled\"\n    :tabindex=\"tabIndex\"\n    @keydown.space.stop.prevent=\"model = isDisabled ? model : label\"\n  >\n    <span class=\"el-radio__input\"\n      :class=\"{\n        'is-disabled': isDisabled,\n        'is-checked': model === label\n      }\"\n    >\n      <span class=\"el-radio__inner\"></span>\n      <input\n        ref=\"radio\"\n        class=\"el-radio__original\"\n        :value=\"label\"\n        type=\"radio\"\n        aria-hidden=\"true\"\n        v-model=\"model\"\n        @focus=\"focus = true\"\n        @blur=\"focus = false\"\n        @change=\"handleChange\"\n        :name=\"name\"\n        :disabled=\"isDisabled\"\n        tabindex=\"-1\"\n        autocomplete=\"off\"\n      >\n    </span>\n    <span class=\"el-radio__label\" @keydown.stop>\n      <slot></slot>\n      <template v-if=\"!$slots.default\">{{label}}</template>\n    </span>\n  </label>\n</template>\n<script>\n  import Emitter from 'element-ui/src/mixins/emitter';\n\n  export default {\n    name: 'ElRadio',\n\n    mixins: [Emitter],\n\n    inject: {\n      elForm: {\n        default: ''\n      },\n\n      elFormItem: {\n        default: ''\n      }\n    },\n\n    componentName: 'ElRadio',\n\n    props: {\n      value: {},\n      label: {},\n      disabled: Boolean,\n      name: String,\n      border: Boolean,\n      size: String\n    },\n\n    data() {\n      return {\n        focus: false\n      };\n    },\n    computed: {\n      isGroup() {\n        let parent = this.$parent;\n        while (parent) {\n          if (parent.$options.componentName !== 'ElRadioGroup') {\n            parent = parent.$parent;\n          } else {\n            this._radioGroup = parent;\n            return true;\n          }\n        }\n        return false;\n      },\n      model: {\n        get() {\n          return this.isGroup ? this._radioGroup.value : this.value;\n        },\n        set(val) {\n          if (this.isGroup) {\n            this.dispatch('ElRadioGroup', 'input', [val]);\n          } else {\n            this.$emit('input', val);\n          }\n          this.$refs.radio && (this.$refs.radio.checked = this.model === this.label);\n        }\n      },\n      _elFormItemSize() {\n        return (this.elFormItem || {}).elFormItemSize;\n      },\n      radioSize() {\n        const temRadioSize = this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;\n        return this.isGroup\n          ? this._radioGroup.radioGroupSize || temRadioSize\n          : temRadioSize;\n      },\n      isDisabled() {\n        return this.isGroup\n          ? this._radioGroup.disabled || this.disabled || (this.elForm || {}).disabled\n          : this.disabled || (this.elForm || {}).disabled;\n      },\n      tabIndex() {\n        return (this.isDisabled || (this.isGroup && this.model !== this.label)) ? -1 : 0;\n      }\n    },\n\n    methods: {\n      handleChange() {\n        this.$nextTick(() => {\n          this.$emit('change', this.model);\n          this.isGroup && this.dispatch('ElRadioGroup', 'handleChange', this.model);\n        });\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/radio-button/index.js",
    "content": "import RadioButton from '../radio/src/radio-button.vue';\n\n/* istanbul ignore next */\nRadioButton.install = function(Vue) {\n  Vue.component(RadioButton.name, RadioButton);\n};\n\nexport default RadioButton;\n"
  },
  {
    "path": "packages/radio-group/index.js",
    "content": "import RadioGroup from '../radio/src/radio-group.vue';\n\n/* istanbul ignore next */\nRadioGroup.install = function(Vue) {\n  Vue.component(RadioGroup.name, RadioGroup);\n};\n\nexport default RadioGroup;\n"
  },
  {
    "path": "packages/rate/index.js",
    "content": "import Rate from './src/main';\n\n/* istanbul ignore next */\nRate.install = function(Vue) {\n  Vue.component(Rate.name, Rate);\n};\n\nexport default Rate;\n"
  },
  {
    "path": "packages/rate/src/main.vue",
    "content": "<template>\n  <div\n    class=\"el-rate\"\n    @keydown=\"handleKey\"\n    role=\"slider\"\n    :aria-valuenow=\"currentValue\"\n    :aria-valuetext=\"text\"\n    aria-valuemin=\"0\"\n    :aria-valuemax=\"max\"\n    tabindex=\"0\">\n    <span\n      v-for=\"(item, key) in max\"\n      class=\"el-rate__item\"\n      @mousemove=\"setCurrentValue(item, $event)\"\n      @mouseleave=\"resetCurrentValue\"\n      @click=\"selectValue(item)\"\n      :style=\"{ cursor: rateDisabled ? 'auto' : 'pointer' }\"\n      :key=\"key\">\n      <i\n        :class=\"[classes[item - 1], { 'hover': hoverIndex === item }]\"\n        class=\"el-rate__icon\"\n        :style=\"getIconStyle(item)\">\n        <i\n          v-if=\"showDecimalIcon(item)\"\n          :class=\"decimalIconClass\"\n          :style=\"decimalStyle\"\n          class=\"el-rate__decimal\">\n        </i>\n      </i>\n    </span>\n    <span v-if=\"showText || showScore\" class=\"el-rate__text\" :style=\"{ color: textColor }\">{{ text }}</span>\n  </div>\n</template>\n\n<script>\n  import { hasClass } from 'element-ui/src/utils/dom';\n  import { isObject } from 'element-ui/src/utils/types';\n  import Migrating from 'element-ui/src/mixins/migrating';\n\n  export default {\n    name: 'ElRate',\n\n    mixins: [Migrating],\n\n    inject: {\n      elForm: {\n        default: ''\n      }\n    },\n\n    data() {\n      return {\n        pointerAtLeftHalf: true,\n        currentValue: this.value,\n        hoverIndex: -1\n      };\n    },\n\n    props: {\n      value: {\n        type: Number,\n        default: 0\n      },\n      lowThreshold: {\n        type: Number,\n        default: 2\n      },\n      highThreshold: {\n        type: Number,\n        default: 4\n      },\n      max: {\n        type: Number,\n        default: 5\n      },\n      colors: {\n        type: [Array, Object],\n        default() {\n          return ['#F7BA2A', '#F7BA2A', '#F7BA2A'];\n        }\n      },\n      voidColor: {\n        type: String,\n        default: '#C6D1DE'\n      },\n      disabledVoidColor: {\n        type: String,\n        default: '#EFF2F7'\n      },\n      iconClasses: {\n        type: [Array, Object],\n        default() {\n          return ['el-icon-star-on', 'el-icon-star-on', 'el-icon-star-on'];\n        }\n      },\n      voidIconClass: {\n        type: String,\n        default: 'el-icon-star-off'\n      },\n      disabledVoidIconClass: {\n        type: String,\n        default: 'el-icon-star-on'\n      },\n      disabled: {\n        type: Boolean,\n        default: false\n      },\n      allowHalf: {\n        type: Boolean,\n        default: false\n      },\n      showText: {\n        type: Boolean,\n        default: false\n      },\n      showScore: {\n        type: Boolean,\n        default: false\n      },\n      textColor: {\n        type: String,\n        default: '#1f2d3d'\n      },\n      texts: {\n        type: Array,\n        default() {\n          return ['极差', '失望', '一般', '满意', '惊喜'];\n        }\n      },\n      scoreTemplate: {\n        type: String,\n        default: '{value}'\n      }\n    },\n\n    computed: {\n      text() {\n        let result = '';\n        if (this.showScore) {\n          result = this.scoreTemplate.replace(/\\{\\s*value\\s*\\}/, this.rateDisabled\n            ? this.value\n            : this.currentValue);\n        } else if (this.showText) {\n          result = this.texts[Math.ceil(this.currentValue) - 1];\n        }\n        return result;\n      },\n\n      decimalStyle() {\n        let width = '';\n        if (this.rateDisabled) {\n          width = `${ this.valueDecimal }%`;\n        } else if (this.allowHalf) {\n          width = '50%';\n        }\n        return {\n          color: this.activeColor,\n          width\n        };\n      },\n\n      valueDecimal() {\n        return this.value * 100 - Math.floor(this.value) * 100;\n      },\n\n      classMap() {\n        return Array.isArray(this.iconClasses)\n          ? {\n            [this.lowThreshold]: this.iconClasses[0],\n            [this.highThreshold]: { value: this.iconClasses[1], excluded: true },\n            [this.max]: this.iconClasses[2]\n          } : this.iconClasses;\n      },\n\n      decimalIconClass() {\n        return this.getValueFromMap(this.value, this.classMap);\n      },\n\n      voidClass() {\n        return this.rateDisabled ? this.disabledVoidIconClass : this.voidIconClass;\n      },\n\n      activeClass() {\n        return this.getValueFromMap(this.currentValue, this.classMap);\n      },\n\n      colorMap() {\n        return Array.isArray(this.colors)\n          ? {\n            [this.lowThreshold]: this.colors[0],\n            [this.highThreshold]: { value: this.colors[1], excluded: true },\n            [this.max]: this.colors[2]\n          } : this.colors;\n      },\n\n      activeColor() {\n        return this.getValueFromMap(this.currentValue, this.colorMap);\n      },\n\n      classes() {\n        let result = [];\n        let i = 0;\n        let threshold = this.currentValue;\n        if (this.allowHalf && this.currentValue !== Math.floor(this.currentValue)) {\n          threshold--;\n        }\n        for (; i < threshold; i++) {\n          result.push(this.activeClass);\n        }\n        for (; i < this.max; i++) {\n          result.push(this.voidClass);\n        }\n        return result;\n      },\n\n      rateDisabled() {\n        return this.disabled || (this.elForm || {}).disabled;\n      }\n    },\n\n    watch: {\n      value(val) {\n        this.currentValue = val;\n        this.pointerAtLeftHalf = this.value !== Math.floor(this.value);\n      }\n    },\n\n    methods: {\n      getMigratingConfig() {\n        return {\n          props: {\n            'text-template': 'text-template is renamed to score-template.'\n          }\n        };\n      },\n\n      getValueFromMap(value, map) {\n        const matchedKeys = Object.keys(map)\n          .filter(key => {\n            const val = map[key];\n            const excluded = isObject(val) ? val.excluded : false;\n            return excluded ? value < key : value <= key;\n          })\n          .sort((a, b) => a - b);\n        const matchedValue = map[matchedKeys[0]];\n        return isObject(matchedValue) ? matchedValue.value : (matchedValue || '');\n      },\n\n      showDecimalIcon(item) {\n        let showWhenDisabled = this.rateDisabled && this.valueDecimal > 0 && item - 1 < this.value && item > this.value;\n        /* istanbul ignore next */\n        let showWhenAllowHalf = this.allowHalf &&\n          this.pointerAtLeftHalf &&\n          item - 0.5 <= this.currentValue &&\n          item > this.currentValue;\n        return showWhenDisabled || showWhenAllowHalf;\n      },\n\n      getIconStyle(item) {\n        const voidColor = this.rateDisabled ? this.disabledVoidColor : this.voidColor;\n        return {\n          color: item <= this.currentValue ? this.activeColor : voidColor\n        };\n      },\n\n      selectValue(value) {\n        if (this.rateDisabled) {\n          return;\n        }\n        if (this.allowHalf && this.pointerAtLeftHalf) {\n          this.$emit('input', this.currentValue);\n          this.$emit('change', this.currentValue);\n        } else {\n          this.$emit('input', value);\n          this.$emit('change', value);\n        }\n      },\n\n      handleKey(e) {\n        if (this.rateDisabled) {\n          return;\n        }\n        let currentValue = this.currentValue;\n        const keyCode = e.keyCode;\n        if (keyCode === 38 || keyCode === 39) { // left / down\n          if (this.allowHalf) {\n            currentValue += 0.5;\n          } else {\n            currentValue += 1;\n          }\n          e.stopPropagation();\n          e.preventDefault();\n        } else if (keyCode === 37 || keyCode === 40) {\n          if (this.allowHalf) {\n            currentValue -= 0.5;\n          } else {\n            currentValue -= 1;\n          }\n          e.stopPropagation();\n          e.preventDefault();\n        }\n        currentValue = currentValue < 0 ? 0 : currentValue;\n        currentValue = currentValue > this.max ? this.max : currentValue;\n\n        this.$emit('input', currentValue);\n        this.$emit('change', currentValue);\n      },\n\n      setCurrentValue(value, event) {\n        if (this.rateDisabled) {\n          return;\n        }\n        /* istanbul ignore if */\n        if (this.allowHalf) {\n          let target = event.target;\n          if (hasClass(target, 'el-rate__item')) {\n            target = target.querySelector('.el-rate__icon');\n          }\n          if (hasClass(target, 'el-rate__decimal')) {\n            target = target.parentNode;\n          }\n          this.pointerAtLeftHalf = event.offsetX * 2 <= target.clientWidth;\n          this.currentValue = this.pointerAtLeftHalf ? value - 0.5 : value;\n        } else {\n          this.currentValue = value;\n        }\n        this.hoverIndex = value;\n      },\n\n      resetCurrentValue() {\n        if (this.rateDisabled) {\n          return;\n        }\n        if (this.allowHalf) {\n          this.pointerAtLeftHalf = this.value !== Math.floor(this.value);\n        }\n        this.currentValue = this.value;\n        this.hoverIndex = -1;\n      }\n    },\n\n    created() {\n      if (!this.value) {\n        this.$emit('input', 0);\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/result/index.js",
    "content": "import Result from './src/index.vue';\n\n/* istanbul ignore next */\nResult.install = function(Vue) {\n  Vue.component(Result.name, Result);\n};\n\nexport default Result;\n"
  },
  {
    "path": "packages/result/src/icon-error.vue",
    "content": "<template>\n  <svg viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.57818,15.42182 C32.0157534,14.8593933 31.1038797,14.8593933 30.541453,15.42182 L30.541453,15.42182 L24.0006789,21.9625941 L17.458547,15.42182 C16.8961203,14.8593933 15.9842466,14.8593933 15.42182,15.42182 C14.8593933,15.9842466 14.8593933,16.8961203 15.42182,17.458547 L15.42182,17.458547 L21.9639519,23.9993211 L15.42182,30.541453 C14.8593933,31.1038797 14.8593933,32.0157534 15.42182,32.57818 C15.9842466,33.1406067 16.8961203,33.1406067 17.458547,32.57818 L17.458547,32.57818 L24.0006789,26.0360481 L30.541453,32.57818 C31.1038797,33.1406067 32.0157534,33.1406067 32.57818,32.57818 C33.1406067,32.0157534 33.1406067,31.1038797 32.57818,30.541453 L32.57818,30.541453 L26.0374059,23.9993211 L32.57818,17.458547 C33.1406067,16.8961203 33.1406067,15.9842466 32.57818,15.42182 Z\"\n    />\n  </svg>\n</template>\n\n<script>\nexport default {\n  name: 'IconError'\n};\n</script>\n"
  },
  {
    "path": "packages/result/src/icon-info.vue",
    "content": "<template>\n  <svg viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M24,19 L21,19 C20.1715729,19 19.5,19.6715729 19.5,20.5 C19.5,21.3284271 20.1715729,22 21,22 L21,22 L22.5,22 L22.5,31 L21,31 C20.1715729,31 19.5,31.6715729 19.5,32.5 C19.5,33.3284271 20.1715729,34 21,34 L21,34 L27,34 C27.8284271,34 28.5,33.3284271 28.5,32.5 C28.5,31.6715729 27.8284271,31 27,31 L27,31 L25.5,31 L25.5,20.5 C25.5,19.6715729 24.8284271,19 24,19 L24,19 Z M24,13 C22.8954305,13 22,13.8954305 22,15 C22,16.1045695 22.8954305,17 24,17 C25.1045695,17 26,16.1045695 26,15 C26,13.8954305 25.1045695,13 24,13 Z\"\n    />\n  </svg>\n</template>\n\n<script lang=\"ts\">\nexport default {\n  name: 'IconInfo'\n};\n</script>\n"
  },
  {
    "path": "packages/result/src/icon-success.vue",
    "content": "<template>\n  <svg viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M34.5548098,16.4485711 C33.9612228,15.8504763 32.9988282,15.8504763 32.4052412,16.4485711 L32.4052412,16.4485711 L21.413757,27.5805811 L21.413757,27.5805811 L21.4034642,27.590855 C21.0097542,27.9781674 20.3766105,27.9729811 19.9892981,27.5792711 L19.9892981,27.5792711 L15.5947588,23.1121428 C15.0011718,22.514048 14.0387772,22.514048 13.4451902,23.1121428 C12.8516033,23.7102376 12.8516033,24.6799409 13.4451902,25.2780357 L13.4451902,25.2780357 L19.6260786,31.5514289 C20.2196656,32.1495237 21.1820602,32.1495237 21.7756472,31.5514289 L21.7756472,31.5514289 L34.5548098,18.614464 C35.1483967,18.0163692 35.1483967,17.0466659 34.5548098,16.4485711 Z\"\n    />\n  </svg>\n</template>\n\n<script>\nexport default {\n  name: 'IconSuccess'\n};\n</script>\n"
  },
  {
    "path": "packages/result/src/icon-warning.vue",
    "content": "<template>\n  <svg viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M24,31 C22.8954305,31 22,31.8954305 22,33 C22,34.1045695 22.8954305,35 24,35 C25.1045695,35 26,34.1045695 26,33 C26,31.8954305 25.1045695,31 24,31 Z M24,14 C23.1715729,14 22.5,14.6715729 22.5,15.5 L22.5,15.5 L22.5,27.5 C22.5,28.3284271 23.1715729,29 24,29 C24.8284271,29 25.5,28.3284271 25.5,27.5 L25.5,27.5 L25.5,15.5 C25.5,14.6715729 24.8284271,14 24,14 Z\"\n    />\n  </svg>\n</template>\n\n<script lang=\"ts\">\nexport default {\n  name: 'IconWarning'\n};\n</script>\n"
  },
  {
    "path": "packages/result/src/index.vue",
    "content": "<template>\n  <div class=\"el-result\">\n    <div class=\"el-result__icon\">\n      <slot name=\"icon\">\n        <component :is=\"iconElement\" :class=\"iconElement\" />\n      </slot>\n    </div>\n    <div v-if=\"title || $slots.title\" class=\"el-result__title\">\n      <slot name=\"title\">\n        <p>{{ title }}</p>\n      </slot>\n    </div>\n    <div v-if=\"subTitle || $slots.subTitle\" class=\"el-result__subtitle\">\n      <slot name=\"subTitle\">\n        <p>{{ subTitle }}</p>\n      </slot>\n    </div>\n    <div v-if=\"$slots.extra\" class=\"el-result__extra\">\n      <slot name=\"extra\"></slot>\n    </div>\n  </div>\n</template>\n<script>\nimport IconSuccess from './icon-success.vue';\nimport IconError from './icon-error.vue';\nimport IconWarning from './icon-warning.vue';\nimport IconInfo from './icon-info.vue';\n\nconst IconMap = {\n  success: 'icon-success',\n  warning: 'icon-warning',\n  error: 'icon-error',\n  info: 'icon-info'\n};\n\nexport default {\n  name: 'ElResult',\n  components: {\n    [IconSuccess.name]: IconSuccess,\n    [IconError.name]: IconError,\n    [IconWarning.name]: IconWarning,\n    [IconInfo.name]: IconInfo\n  },\n  props: {\n    title: {\n      type: String,\n      default: ''\n    },\n    subTitle: {\n      type: String,\n      default: ''\n    },\n    icon: {\n      type: String,\n      default: 'info'\n    }\n  },\n  computed: {\n    iconElement() {\n      const icon = this.icon;\n      return icon && IconMap[icon] ? IconMap[icon] : 'icon-info';\n    }\n  }\n};\n</script>\n"
  },
  {
    "path": "packages/row/index.js",
    "content": "import Row from './src/row';\n\n/* istanbul ignore next */\nRow.install = function(Vue) {\n  Vue.component(Row.name, Row);\n};\n\nexport default Row;\n\n"
  },
  {
    "path": "packages/row/src/row.js",
    "content": "export default {\n  name: 'ElRow',\n\n  componentName: 'ElRow',\n\n  props: {\n    tag: {\n      type: String,\n      default: 'div'\n    },\n    gutter: Number,\n    type: String,\n    justify: {\n      type: String,\n      default: 'start'\n    },\n    align: String\n  },\n\n  computed: {\n    style() {\n      const ret = {};\n\n      if (this.gutter) {\n        ret.marginLeft = `-${this.gutter / 2}px`;\n        ret.marginRight = ret.marginLeft;\n      }\n\n      return ret;\n    }\n  },\n\n  render(h) {\n    return h(this.tag, {\n      class: [\n        'el-row',\n        this.justify !== 'start' ? `is-justify-${this.justify}` : '',\n        this.align ? `is-align-${this.align}` : '',\n        { 'el-row--flex': this.type === 'flex' }\n      ],\n      style: this.style\n    }, this.$slots.default);\n  }\n};\n"
  },
  {
    "path": "packages/scrollbar/index.js",
    "content": "import Scrollbar from './src/main';\n\n/* istanbul ignore next */\nScrollbar.install = function(Vue) {\n  Vue.component(Scrollbar.name, Scrollbar);\n};\n\nexport default Scrollbar;\n"
  },
  {
    "path": "packages/scrollbar/src/bar.js",
    "content": "import { on, off } from 'element-ui/src/utils/dom';\nimport { renderThumbStyle, BAR_MAP } from './util';\n\n/* istanbul ignore next */\nexport default {\n  name: 'Bar',\n\n  props: {\n    vertical: Boolean,\n    size: String,\n    move: Number\n  },\n\n  computed: {\n    bar() {\n      return BAR_MAP[this.vertical ? 'vertical' : 'horizontal'];\n    },\n\n    wrap() {\n      return this.$parent.wrap;\n    }\n  },\n\n  render(h) {\n    const { size, move, bar } = this;\n\n    return (\n      <div\n        class={ ['el-scrollbar__bar', 'is-' + bar.key] }\n        onMousedown={ this.clickTrackHandler } >\n        <div\n          ref=\"thumb\"\n          class=\"el-scrollbar__thumb\"\n          onMousedown={ this.clickThumbHandler }\n          style={ renderThumbStyle({ size, move, bar }) }>\n        </div>\n      </div>\n    );\n  },\n\n  methods: {\n    clickThumbHandler(e) {\n      // prevent click event of right button\n      if (e.ctrlKey || e.button === 2) {\n        return;\n      }\n      this.startDrag(e);\n      this[this.bar.axis] = (e.currentTarget[this.bar.offset] - (e[this.bar.client] - e.currentTarget.getBoundingClientRect()[this.bar.direction]));\n    },\n\n    clickTrackHandler(e) {\n      const offset = Math.abs(e.target.getBoundingClientRect()[this.bar.direction] - e[this.bar.client]);\n      const thumbHalf = (this.$refs.thumb[this.bar.offset] / 2);\n      const thumbPositionPercentage = ((offset - thumbHalf) * 100 / this.$el[this.bar.offset]);\n\n      this.wrap[this.bar.scroll] = (thumbPositionPercentage * this.wrap[this.bar.scrollSize] / 100);\n    },\n\n    startDrag(e) {\n      e.stopImmediatePropagation();\n      this.cursorDown = true;\n\n      on(document, 'mousemove', this.mouseMoveDocumentHandler);\n      on(document, 'mouseup', this.mouseUpDocumentHandler);\n      document.onselectstart = () => false;\n    },\n\n    mouseMoveDocumentHandler(e) {\n      if (this.cursorDown === false) return;\n      const prevPage = this[this.bar.axis];\n\n      if (!prevPage) return;\n\n      const offset = ((this.$el.getBoundingClientRect()[this.bar.direction] - e[this.bar.client]) * -1);\n      const thumbClickPosition = (this.$refs.thumb[this.bar.offset] - prevPage);\n      const thumbPositionPercentage = ((offset - thumbClickPosition) * 100 / this.$el[this.bar.offset]);\n\n      this.wrap[this.bar.scroll] = (thumbPositionPercentage * this.wrap[this.bar.scrollSize] / 100);\n    },\n\n    mouseUpDocumentHandler(e) {\n      this.cursorDown = false;\n      this[this.bar.axis] = 0;\n      off(document, 'mousemove', this.mouseMoveDocumentHandler);\n      document.onselectstart = null;\n    }\n  },\n\n  destroyed() {\n    off(document, 'mouseup', this.mouseUpDocumentHandler);\n  }\n};\n"
  },
  {
    "path": "packages/scrollbar/src/main.js",
    "content": "// reference https://github.com/noeldelgado/gemini-scrollbar/blob/master/index.js\n\nimport { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';\nimport scrollbarWidth from 'element-ui/src/utils/scrollbar-width';\nimport { toObject } from 'element-ui/src/utils/util';\nimport Bar from './bar';\n\n/* istanbul ignore next */\nexport default {\n  name: 'ElScrollbar',\n\n  components: { Bar },\n\n  props: {\n    native: Boolean,\n    wrapStyle: {},\n    wrapClass: {},\n    viewClass: {},\n    viewStyle: {},\n    noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能\n    tag: {\n      type: String,\n      default: 'div'\n    }\n  },\n\n  data() {\n    return {\n      sizeWidth: '0',\n      sizeHeight: '0',\n      moveX: 0,\n      moveY: 0\n    };\n  },\n\n  computed: {\n    wrap() {\n      return this.$refs.wrap;\n    }\n  },\n\n  render(h) {\n    let gutter = scrollbarWidth();\n    let style = this.wrapStyle;\n\n    if (gutter) {\n      const gutterWith = `-${gutter}px`;\n      const gutterStyle = `margin-bottom: ${gutterWith}; margin-right: ${gutterWith};`;\n\n      if (Array.isArray(this.wrapStyle)) {\n        style = toObject(this.wrapStyle);\n        style.marginRight = style.marginBottom = gutterWith;\n      } else if (typeof this.wrapStyle === 'string') {\n        style += gutterStyle;\n      } else {\n        style = gutterStyle;\n      }\n    }\n    const view = h(this.tag, {\n      class: ['el-scrollbar__view', this.viewClass],\n      style: this.viewStyle,\n      ref: 'resize'\n    }, this.$slots.default);\n    const wrap = (\n      <div\n        ref=\"wrap\"\n        style={ style }\n        onScroll={ this.handleScroll }\n        class={ [this.wrapClass, 'el-scrollbar__wrap', gutter ? '' : 'el-scrollbar__wrap--hidden-default'] }>\n        { [view] }\n      </div>\n    );\n    let nodes;\n\n    if (!this.native) {\n      nodes = ([\n        wrap,\n        <Bar\n          move={ this.moveX }\n          size={ this.sizeWidth }></Bar>,\n        <Bar\n          vertical\n          move={ this.moveY }\n          size={ this.sizeHeight }></Bar>\n      ]);\n    } else {\n      nodes = ([\n        <div\n          ref=\"wrap\"\n          class={ [this.wrapClass, 'el-scrollbar__wrap'] }\n          style={ style }>\n          { [view] }\n        </div>\n      ]);\n    }\n    return h('div', { class: 'el-scrollbar' }, nodes);\n  },\n\n  methods: {\n    handleScroll() {\n      const wrap = this.wrap;\n\n      this.moveY = ((wrap.scrollTop * 100) / wrap.clientHeight);\n      this.moveX = ((wrap.scrollLeft * 100) / wrap.clientWidth);\n    },\n\n    update() {\n      let heightPercentage, widthPercentage;\n      const wrap = this.wrap;\n      if (!wrap) return;\n\n      heightPercentage = (wrap.clientHeight * 100 / wrap.scrollHeight);\n      widthPercentage = (wrap.clientWidth * 100 / wrap.scrollWidth);\n\n      this.sizeHeight = (heightPercentage < 100) ? (heightPercentage + '%') : '';\n      this.sizeWidth = (widthPercentage < 100) ? (widthPercentage + '%') : '';\n    }\n  },\n\n  mounted() {\n    if (this.native) return;\n    this.$nextTick(this.update);\n    !this.noresize && addResizeListener(this.$refs.resize, this.update);\n  },\n\n  beforeDestroy() {\n    if (this.native) return;\n    !this.noresize && removeResizeListener(this.$refs.resize, this.update);\n  }\n};\n"
  },
  {
    "path": "packages/scrollbar/src/util.js",
    "content": "export const BAR_MAP = {\n  vertical: {\n    offset: 'offsetHeight',\n    scroll: 'scrollTop',\n    scrollSize: 'scrollHeight',\n    size: 'height',\n    key: 'vertical',\n    axis: 'Y',\n    client: 'clientY',\n    direction: 'top'\n  },\n  horizontal: {\n    offset: 'offsetWidth',\n    scroll: 'scrollLeft',\n    scrollSize: 'scrollWidth',\n    size: 'width',\n    key: 'horizontal',\n    axis: 'X',\n    client: 'clientX',\n    direction: 'left'\n  }\n};\n\nexport function renderThumbStyle({ move, size, bar }) {\n  const style = {};\n  const translate = `translate${bar.axis}(${ move }%)`;\n\n  style[bar.size] = size;\n  style.transform = translate;\n  style.msTransform = translate;\n  style.webkitTransform = translate;\n\n  return style;\n};\n"
  },
  {
    "path": "packages/select/index.js",
    "content": "import Select from './src/select';\n\n/* istanbul ignore next */\nSelect.install = function(Vue) {\n  Vue.component(Select.name, Select);\n};\n\nexport default Select;\n"
  },
  {
    "path": "packages/select/src/navigation-mixin.js",
    "content": "export default {\n  data() {\n    return {\n      hoverOption: -1\n    };\n  },\n\n  computed: {\n    optionsAllDisabled() {\n      return this.options.filter(option => option.visible).every(option => option.disabled);\n    }\n  },\n\n  watch: {\n    hoverIndex(val) {\n      if (typeof val === 'number' && val > -1) {\n        this.hoverOption = this.options[val] || {};\n      }\n      this.options.forEach(option => {\n        option.hover = this.hoverOption === option;\n      });\n    }\n  },\n\n  methods: {\n    navigateOptions(direction) {\n      if (!this.visible) {\n        this.visible = true;\n        return;\n      }\n      if (this.options.length === 0 || this.filteredOptionsCount === 0) return;\n      if (!this.optionsAllDisabled) {\n        if (direction === 'next') {\n          this.hoverIndex++;\n          if (this.hoverIndex === this.options.length) {\n            this.hoverIndex = 0;\n          }\n        } else if (direction === 'prev') {\n          this.hoverIndex--;\n          if (this.hoverIndex < 0) {\n            this.hoverIndex = this.options.length - 1;\n          }\n        }\n        const option = this.options[this.hoverIndex];\n        if (option.disabled === true ||\n          option.groupDisabled === true ||\n          !option.visible) {\n          this.navigateOptions(direction);\n        }\n        this.$nextTick(() => this.scrollToOption(this.hoverOption));\n      }\n    }\n  }\n};\n"
  },
  {
    "path": "packages/select/src/option-group.vue",
    "content": "<template>\n  <ul class=\"el-select-group__wrap\" v-show=\"visible\">\n    <li class=\"el-select-group__title\">{{ label }}</li>\n    <li>\n      <ul class=\"el-select-group\">\n        <slot></slot>\n      </ul>\n    </li>\n  </ul>\n</template>\n\n<script type=\"text/babel\">\n  import Emitter from 'element-ui/src/mixins/emitter';\n\n  export default {\n    mixins: [Emitter],\n\n    name: 'ElOptionGroup',\n\n    componentName: 'ElOptionGroup',\n\n    props: {\n      label: String,\n      disabled: {\n        type: Boolean,\n        default: false\n      }\n    },\n\n    data() {\n      return {\n        visible: true\n      };\n    },\n\n    watch: {\n      disabled(val) {\n        this.broadcast('ElOption', 'handleGroupDisabled', val);\n      }\n    },\n\n    methods: {\n      queryChange() {\n        this.visible = this.$children &&\n          Array.isArray(this.$children) &&\n          this.$children.some(option => option.visible === true);\n      }\n    },\n\n    created() {\n      this.$on('queryChange', this.queryChange);\n    },\n\n    mounted() {\n      if (this.disabled) {\n        this.broadcast('ElOption', 'handleGroupDisabled', this.disabled);\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/select/src/option.vue",
    "content": "<template>\n  <li\n    @mouseenter=\"hoverItem\"\n    @click.stop=\"selectOptionClick\"\n    class=\"el-select-dropdown__item\"\n    v-show=\"visible\"\n    :class=\"{\n      'selected': itemSelected,\n      'is-disabled': disabled || groupDisabled || limitReached,\n      'hover': hover\n    }\">\n    <slot>\n      <span>{{ currentLabel }}</span>\n    </slot>\n  </li>\n</template>\n\n<script type=\"text/babel\">\n  import Emitter from 'element-ui/src/mixins/emitter';\n  import { getValueByPath, escapeRegexpString } from 'element-ui/src/utils/util';\n\n  export default {\n    mixins: [Emitter],\n\n    name: 'ElOption',\n\n    componentName: 'ElOption',\n\n    inject: ['select'],\n\n    props: {\n      value: {\n        required: true\n      },\n      label: [String, Number],\n      created: Boolean,\n      disabled: {\n        type: Boolean,\n        default: false\n      }\n    },\n\n    data() {\n      return {\n        index: -1,\n        groupDisabled: false,\n        visible: true,\n        hitState: false,\n        hover: false\n      };\n    },\n\n    computed: {\n      isObject() {\n        return Object.prototype.toString.call(this.value).toLowerCase() === '[object object]';\n      },\n\n      currentLabel() {\n        return this.label || (this.isObject ? '' : this.value);\n      },\n\n      currentValue() {\n        return this.value || this.label || '';\n      },\n\n      itemSelected() {\n        if (!this.select.multiple) {\n          return this.isEqual(this.value, this.select.value);\n        } else {\n          return this.contains(this.select.value, this.value);\n        }\n      },\n\n      limitReached() {\n        if (this.select.multiple) {\n          return !this.itemSelected &&\n            (this.select.value || []).length >= this.select.multipleLimit &&\n            this.select.multipleLimit > 0;\n        } else {\n          return false;\n        }\n      }\n    },\n\n    watch: {\n      currentLabel() {\n        if (!this.created && !this.select.remote) this.dispatch('ElSelect', 'setSelected');\n      },\n      value(val, oldVal) {\n        const { remote, valueKey } = this.select;\n        if (!this.created && !remote) {\n          if (valueKey && typeof val === 'object' && typeof oldVal === 'object' && val[valueKey] === oldVal[valueKey]) {\n            return;\n          }\n          this.dispatch('ElSelect', 'setSelected');\n        }\n      }\n    },\n\n    methods: {\n      isEqual(a, b) {\n        if (!this.isObject) {\n          return a === b;\n        } else {\n          const valueKey = this.select.valueKey;\n          return getValueByPath(a, valueKey) === getValueByPath(b, valueKey);\n        }\n      },\n\n      contains(arr = [], target) {\n        if (!this.isObject) {\n          return arr && arr.indexOf(target) > -1;\n        } else {\n          const valueKey = this.select.valueKey;\n          return arr && arr.some(item => {\n            return getValueByPath(item, valueKey) === getValueByPath(target, valueKey);\n          });\n        }\n      },\n\n      handleGroupDisabled(val) {\n        this.groupDisabled = val;\n      },\n\n      hoverItem() {\n        if (!this.disabled && !this.groupDisabled) {\n          this.select.hoverIndex = this.select.options.indexOf(this);\n        }\n      },\n\n      selectOptionClick() {\n        if (this.disabled !== true && this.groupDisabled !== true) {\n          this.dispatch('ElSelect', 'handleOptionClick', [this, true]);\n        }\n      },\n\n      queryChange(query) {\n        this.visible = new RegExp(escapeRegexpString(query), 'i').test(this.currentLabel) || this.created;\n        if (!this.visible) {\n          this.select.filteredOptionsCount--;\n        }\n      }\n    },\n\n    created() {\n      this.select.options.push(this);\n      this.select.cachedOptions.push(this);\n      this.select.optionsCount++;\n      this.select.filteredOptionsCount++;\n\n      this.$on('queryChange', this.queryChange);\n      this.$on('handleGroupDisabled', this.handleGroupDisabled);\n    },\n\n    beforeDestroy() {\n      const { selected, multiple } = this.select;\n      let selectedOptions = multiple ? selected : [selected];\n      let index = this.select.cachedOptions.indexOf(this);\n      let selectedIndex = selectedOptions.indexOf(this);\n\n      // if option is not selected, remove it from cache\n      if (index > -1 && selectedIndex < 0) {\n        this.select.cachedOptions.splice(index, 1);\n      }\n      this.select.onOptionDestroy(this.select.options.indexOf(this));\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/select/src/select-dropdown.vue",
    "content": "<template>\n  <div\n    class=\"el-select-dropdown el-popper\"\n    :class=\"[{ 'is-multiple': $parent.multiple }, popperClass]\"\n    :style=\"{ minWidth: minWidth }\">\n    <slot></slot>\n  </div>\n</template>\n\n<script type=\"text/babel\">\n  import Popper from 'element-ui/src/utils/vue-popper';\n\n  export default {\n    name: 'ElSelectDropdown',\n\n    componentName: 'ElSelectDropdown',\n\n    mixins: [Popper],\n\n    props: {\n      placement: {\n        default: 'bottom-start'\n      },\n\n      boundariesPadding: {\n        default: 0\n      },\n\n      popperOptions: {\n        default() {\n          return {\n            gpuAcceleration: false\n          };\n        }\n      },\n\n      visibleArrow: {\n        default: true\n      },\n\n      appendToBody: {\n        type: Boolean,\n        default: true\n      }\n    },\n\n    data() {\n      return {\n        minWidth: ''\n      };\n    },\n\n    computed: {\n      popperClass() {\n        return this.$parent.popperClass;\n      }\n    },\n\n    watch: {\n      '$parent.inputWidth'() {\n        this.minWidth = this.$parent.$el.getBoundingClientRect().width + 'px';\n      }\n    },\n\n    mounted() {\n      this.referenceElm = this.$parent.$refs.reference.$el;\n      this.$parent.popperElm = this.popperElm = this.$el;\n      this.$on('updatePopper', () => {\n        if (this.$parent.visible) this.updatePopper();\n      });\n      this.$on('destroyPopper', this.destroyPopper);\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/select/src/select.vue",
    "content": "<template>\n  <div\n    class=\"el-select\"\n    :class=\"[selectSize ? 'el-select--' + selectSize : '']\"\n    @click.stop=\"toggleMenu\"\n    v-clickoutside=\"handleClose\">\n    <div\n      class=\"el-select__tags\"\n      v-if=\"multiple\"\n      ref=\"tags\"\n      :style=\"{ 'max-width': inputWidth - 32 + 'px', width: '100%' }\">\n      <span v-if=\"collapseTags && selected.length\">\n        <el-tag\n          :closable=\"!selectDisabled\"\n          :size=\"collapseTagSize\"\n          :hit=\"selected[0].hitState\"\n          type=\"info\"\n          @close=\"deleteTag($event, selected[0])\"\n          disable-transitions>\n          <span class=\"el-select__tags-text\">{{ selected[0].currentLabel }}</span>\n        </el-tag>\n        <el-tag\n          v-if=\"selected.length > 1\"\n          :closable=\"false\"\n          :size=\"collapseTagSize\"\n          type=\"info\"\n          disable-transitions>\n          <span class=\"el-select__tags-text\">+ {{ selected.length - 1 }}</span>\n        </el-tag>\n      </span>\n      <transition-group @after-leave=\"resetInputHeight\" v-if=\"!collapseTags\">\n        <el-tag\n          v-for=\"item in selected\"\n          :key=\"getValueKey(item)\"\n          :closable=\"!selectDisabled\"\n          :size=\"collapseTagSize\"\n          :hit=\"item.hitState\"\n          type=\"info\"\n          @close=\"deleteTag($event, item)\"\n          disable-transitions>\n          <span class=\"el-select__tags-text\">{{ item.currentLabel }}</span>\n        </el-tag>\n      </transition-group>\n\n      <input\n        type=\"text\"\n        class=\"el-select__input\"\n        :class=\"[selectSize ? `is-${ selectSize }` : '']\"\n        :disabled=\"selectDisabled\"\n        :autocomplete=\"autoComplete || autocomplete\"\n        @focus=\"handleFocus\"\n        @blur=\"softFocus = false\"\n        @keyup=\"managePlaceholder\"\n        @keydown=\"resetInputState\"\n        @keydown.down.prevent=\"handleNavigate('next')\"\n        @keydown.up.prevent=\"handleNavigate('prev')\"\n        @keydown.enter.prevent=\"selectOption\"\n        @keydown.esc.stop.prevent=\"visible = false\"\n        @keydown.delete=\"deletePrevTag\"\n        @keydown.tab=\"visible = false\"\n        @compositionstart=\"handleComposition\"\n        @compositionupdate=\"handleComposition\"\n        @compositionend=\"handleComposition\"\n        v-model=\"query\"\n        @input=\"debouncedQueryChange\"\n        v-if=\"filterable\"\n        :style=\"{ 'flex-grow': '1', width: inputLength / (inputWidth - 32) + '%', 'max-width': inputWidth - 42 + 'px' }\"\n        ref=\"input\">\n    </div>\n    <el-input\n      ref=\"reference\"\n      v-model=\"selectedLabel\"\n      type=\"text\"\n      :placeholder=\"currentPlaceholder\"\n      :name=\"name\"\n      :id=\"id\"\n      :autocomplete=\"autoComplete || autocomplete\"\n      :size=\"selectSize\"\n      :disabled=\"selectDisabled\"\n      :readonly=\"readonly\"\n      :validate-event=\"false\"\n      :class=\"{ 'is-focus': visible }\"\n      :tabindex=\"(multiple && filterable) ? '-1' : null\"\n      @focus=\"handleFocus\"\n      @blur=\"handleBlur\"\n      @input=\"debouncedOnInputChange\"\n      @keydown.native.down.stop.prevent=\"handleNavigate('next')\"\n      @keydown.native.up.stop.prevent=\"handleNavigate('prev')\"\n      @keydown.native.enter.prevent=\"selectOption\"\n      @keydown.native.esc.stop.prevent=\"visible = false\"\n      @keydown.native.tab=\"visible = false\"\n      @compositionstart=\"handleComposition\"\n      @compositionupdate=\"handleComposition\"\n      @compositionend=\"handleComposition\"\n      @mouseenter.native=\"inputHovering = true\"\n      @mouseleave.native=\"inputHovering = false\">\n      <template slot=\"prefix\" v-if=\"$slots.prefix\">\n        <slot name=\"prefix\"></slot>\n      </template>\n      <template slot=\"suffix\">\n        <i v-show=\"!showClose\" :class=\"['el-select__caret', 'el-input__icon', 'el-icon-' + iconClass]\"></i>\n        <i v-if=\"showClose\" class=\"el-select__caret el-input__icon el-icon-circle-close\" @click=\"handleClearClick\"></i>\n      </template>\n    </el-input>\n    <transition\n      name=\"el-zoom-in-top\"\n      @before-enter=\"handleMenuEnter\"\n      @after-leave=\"doDestroy\">\n      <el-select-menu\n        ref=\"popper\"\n        :append-to-body=\"popperAppendToBody\"\n        v-show=\"visible && emptyText !== false\">\n        <el-scrollbar\n          tag=\"ul\"\n          wrap-class=\"el-select-dropdown__wrap\"\n          view-class=\"el-select-dropdown__list\"\n          ref=\"scrollbar\"\n          :class=\"{ 'is-empty': !allowCreate && query && filteredOptionsCount === 0 }\"\n          v-show=\"options.length > 0 && !loading\">\n          <el-option\n            :value=\"query\"\n            created\n            v-if=\"showNewOption\">\n          </el-option>\n          <slot></slot>\n        </el-scrollbar>\n        <template v-if=\"emptyText && (!allowCreate || loading || (allowCreate && options.length === 0 ))\">\n          <slot name=\"empty\" v-if=\"$slots.empty\"></slot>\n          <p class=\"el-select-dropdown__empty\" v-else>\n            {{ emptyText }}\n          </p>\n        </template>\n      </el-select-menu>\n    </transition>\n  </div>\n</template>\n\n<script type=\"text/babel\">\n  import Emitter from 'element-ui/src/mixins/emitter';\n  import Focus from 'element-ui/src/mixins/focus';\n  import Locale from 'element-ui/src/mixins/locale';\n  import ElInput from 'element-ui/packages/input';\n  import ElSelectMenu from './select-dropdown.vue';\n  import ElOption from './option.vue';\n  import ElTag from 'element-ui/packages/tag';\n  import ElScrollbar from 'element-ui/packages/scrollbar';\n  import debounce from 'throttle-debounce/debounce';\n  import Clickoutside from 'element-ui/src/utils/clickoutside';\n  import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';\n  import scrollIntoView from 'element-ui/src/utils/scroll-into-view';\n  import { getValueByPath, valueEquals, isIE, isEdge } from 'element-ui/src/utils/util';\n  import NavigationMixin from './navigation-mixin';\n  import { isKorean } from 'element-ui/src/utils/shared';\n\n  export default {\n    mixins: [Emitter, Locale, Focus('reference'), NavigationMixin],\n\n    name: 'ElSelect',\n\n    componentName: 'ElSelect',\n\n    inject: {\n      elForm: {\n        default: ''\n      },\n\n      elFormItem: {\n        default: ''\n      }\n    },\n\n    provide() {\n      return {\n        'select': this\n      };\n    },\n\n    computed: {\n      _elFormItemSize() {\n        return (this.elFormItem || {}).elFormItemSize;\n      },\n\n      readonly() {\n        return !this.filterable || this.multiple || (!isIE() && !isEdge() && !this.visible);\n      },\n\n      showClose() {\n        let hasValue = this.multiple\n          ? Array.isArray(this.value) && this.value.length > 0\n          : this.value !== undefined && this.value !== null && this.value !== '';\n        let criteria = this.clearable &&\n          !this.selectDisabled &&\n          this.inputHovering &&\n          hasValue;\n        return criteria;\n      },\n\n      iconClass() {\n        return this.remote && this.filterable ? '' : (this.visible ? 'arrow-up is-reverse' : 'arrow-up');\n      },\n\n      debounce() {\n        return this.remote ? 300 : 0;\n      },\n\n      emptyText() {\n        if (this.loading) {\n          return this.loadingText || this.t('el.select.loading');\n        } else {\n          if (this.remote && this.query === '' && this.options.length === 0) return false;\n          if (this.filterable && this.query && this.options.length > 0 && this.filteredOptionsCount === 0) {\n            return this.noMatchText || this.t('el.select.noMatch');\n          }\n          if (this.options.length === 0) {\n            return this.noDataText || this.t('el.select.noData');\n          }\n        }\n        return null;\n      },\n\n      showNewOption() {\n        let hasExistingOption = this.options.filter(option => !option.created)\n          .some(option => option.currentLabel === this.query);\n        return this.filterable && this.allowCreate && this.query !== '' && !hasExistingOption;\n      },\n\n      selectSize() {\n        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;\n      },\n\n      selectDisabled() {\n        return this.disabled || (this.elForm || {}).disabled;\n      },\n\n      collapseTagSize() {\n        return ['small', 'mini'].indexOf(this.selectSize) > -1\n          ? 'mini'\n          : 'small';\n      },\n      propPlaceholder() {\n        return typeof this.placeholder !== 'undefined' ? this.placeholder : this.t('el.select.placeholder');\n      }\n    },\n\n    components: {\n      ElInput,\n      ElSelectMenu,\n      ElOption,\n      ElTag,\n      ElScrollbar\n    },\n\n    directives: { Clickoutside },\n\n    props: {\n      name: String,\n      id: String,\n      value: {\n        required: true\n      },\n      autocomplete: {\n        type: String,\n        default: 'off'\n      },\n      /** @Deprecated in next major version */\n      autoComplete: {\n        type: String,\n        validator(val) {\n          process.env.NODE_ENV !== 'production' &&\n            console.warn('[Element Warn][Select]\\'auto-complete\\' property will be deprecated in next major version. please use \\'autocomplete\\' instead.');\n          return true;\n        }\n      },\n      automaticDropdown: Boolean,\n      size: String,\n      disabled: Boolean,\n      clearable: Boolean,\n      filterable: Boolean,\n      allowCreate: Boolean,\n      loading: Boolean,\n      popperClass: String,\n      remote: Boolean,\n      loadingText: String,\n      noMatchText: String,\n      noDataText: String,\n      remoteMethod: Function,\n      filterMethod: Function,\n      multiple: Boolean,\n      multipleLimit: {\n        type: Number,\n        default: 0\n      },\n      placeholder: {\n        type: String,\n        required: false\n      },\n      defaultFirstOption: Boolean,\n      reserveKeyword: Boolean,\n      valueKey: {\n        type: String,\n        default: 'value'\n      },\n      collapseTags: Boolean,\n      popperAppendToBody: {\n        type: Boolean,\n        default: true\n      }\n    },\n\n    data() {\n      return {\n        options: [],\n        cachedOptions: [],\n        createdLabel: null,\n        createdSelected: false,\n        selected: this.multiple ? [] : {},\n        inputLength: 20,\n        inputWidth: 0,\n        initialInputHeight: 0,\n        cachedPlaceHolder: '',\n        optionsCount: 0,\n        filteredOptionsCount: 0,\n        visible: false,\n        softFocus: false,\n        selectedLabel: '',\n        hoverIndex: -1,\n        query: '',\n        previousQuery: null,\n        inputHovering: false,\n        currentPlaceholder: '',\n        menuVisibleOnFocus: false,\n        isOnComposition: false,\n        isSilentBlur: false\n      };\n    },\n\n    watch: {\n      selectDisabled() {\n        this.$nextTick(() => {\n          this.resetInputHeight();\n        });\n      },\n\n      propPlaceholder(val) {\n        this.cachedPlaceHolder = this.currentPlaceholder = val;\n      },\n\n      value(val, oldVal) {\n        if (this.multiple) {\n          this.resetInputHeight();\n          if ((val && val.length > 0) || (this.$refs.input && this.query !== '')) {\n            this.currentPlaceholder = '';\n          } else {\n            this.currentPlaceholder = this.cachedPlaceHolder;\n          }\n          if (this.filterable && !this.reserveKeyword) {\n            this.query = '';\n            this.handleQueryChange(this.query);\n          }\n        }\n        this.setSelected();\n        if (this.filterable && !this.multiple) {\n          this.inputLength = 20;\n        }\n        if (!valueEquals(val, oldVal)) {\n          this.dispatch('ElFormItem', 'el.form.change', val);\n        }\n      },\n\n      visible(val) {\n        if (!val) {\n          this.broadcast('ElSelectDropdown', 'destroyPopper');\n          if (this.$refs.input) {\n            this.$refs.input.blur();\n          }\n          this.query = '';\n          this.previousQuery = null;\n          this.selectedLabel = '';\n          this.inputLength = 20;\n          this.menuVisibleOnFocus = false;\n          this.resetHoverIndex();\n          this.$nextTick(() => {\n            if (this.$refs.input &&\n              this.$refs.input.value === '' &&\n              this.selected.length === 0) {\n              this.currentPlaceholder = this.cachedPlaceHolder;\n            }\n          });\n          if (!this.multiple) {\n            if (this.selected) {\n              if (this.filterable && this.allowCreate &&\n                this.createdSelected && this.createdLabel) {\n                this.selectedLabel = this.createdLabel;\n              } else {\n                this.selectedLabel = this.selected.currentLabel;\n              }\n              if (this.filterable) this.query = this.selectedLabel;\n            }\n\n            if (this.filterable) {\n              this.currentPlaceholder = this.cachedPlaceHolder;\n            }\n          }\n        } else {\n          this.broadcast('ElSelectDropdown', 'updatePopper');\n          if (this.filterable) {\n            this.query = this.remote ? '' : this.selectedLabel;\n            this.handleQueryChange(this.query);\n            if (this.multiple) {\n              this.$refs.input.focus();\n            } else {\n              if (!this.remote) {\n                this.broadcast('ElOption', 'queryChange', '');\n                this.broadcast('ElOptionGroup', 'queryChange');\n              }\n\n              if (this.selectedLabel) {\n                this.currentPlaceholder = this.selectedLabel;\n                this.selectedLabel = '';\n              }\n            }\n          }\n        }\n        this.$emit('visible-change', val);\n      },\n\n      options() {\n        if (this.$isServer) return;\n        this.$nextTick(() => {\n          this.broadcast('ElSelectDropdown', 'updatePopper');\n        });\n        if (this.multiple) {\n          this.resetInputHeight();\n        }\n        let inputs = this.$el.querySelectorAll('input');\n        if ([].indexOf.call(inputs, document.activeElement) === -1) {\n          this.setSelected();\n        }\n        if (this.defaultFirstOption && (this.filterable || this.remote) && this.filteredOptionsCount) {\n          this.checkDefaultFirstOption();\n        }\n      }\n    },\n\n    methods: {\n      handleNavigate(direction) {\n        if (this.isOnComposition) return;\n\n        this.navigateOptions(direction);\n      },\n      handleComposition(event) {\n        const text = event.target.value;\n        if (event.type === 'compositionend') {\n          this.isOnComposition = false;\n          this.$nextTick(_ => this.handleQueryChange(text));\n        } else {\n          const lastCharacter = text[text.length - 1] || '';\n          this.isOnComposition = !isKorean(lastCharacter);\n        }\n      },\n      handleQueryChange(val) {\n        if (this.previousQuery === val || this.isOnComposition) return;\n        if (\n          this.previousQuery === null &&\n          (typeof this.filterMethod === 'function' || typeof this.remoteMethod === 'function')\n        ) {\n          this.previousQuery = val;\n          return;\n        }\n        this.previousQuery = val;\n        this.$nextTick(() => {\n          if (this.visible) this.broadcast('ElSelectDropdown', 'updatePopper');\n        });\n        this.hoverIndex = -1;\n        if (this.multiple && this.filterable) {\n          this.$nextTick(() => {\n            const length = this.$refs.input.value.length * 15 + 20;\n            this.inputLength = this.collapseTags ? Math.min(50, length) : length;\n            this.managePlaceholder();\n            this.resetInputHeight();\n          });\n        }\n        if (this.remote && typeof this.remoteMethod === 'function') {\n          this.hoverIndex = -1;\n          this.remoteMethod(val);\n        } else if (typeof this.filterMethod === 'function') {\n          this.filterMethod(val);\n          this.broadcast('ElOptionGroup', 'queryChange');\n        } else {\n          this.filteredOptionsCount = this.optionsCount;\n          this.broadcast('ElOption', 'queryChange', val);\n          this.broadcast('ElOptionGroup', 'queryChange');\n        }\n        if (this.defaultFirstOption && (this.filterable || this.remote) && this.filteredOptionsCount) {\n          this.checkDefaultFirstOption();\n        }\n      },\n\n      scrollToOption(option) {\n        const target = Array.isArray(option) && option[0] ? option[0].$el : option.$el;\n        if (this.$refs.popper && target) {\n          const menu = this.$refs.popper.$el.querySelector('.el-select-dropdown__wrap');\n          scrollIntoView(menu, target);\n        }\n        this.$refs.scrollbar && this.$refs.scrollbar.handleScroll();\n      },\n\n      handleMenuEnter() {\n        this.$nextTick(() => this.scrollToOption(this.selected));\n      },\n\n      emitChange(val) {\n        if (!valueEquals(this.value, val)) {\n          this.$emit('change', val);\n        }\n      },\n\n      getOption(value) {\n        let option;\n        const isObject = Object.prototype.toString.call(value).toLowerCase() === '[object object]';\n        const isNull = Object.prototype.toString.call(value).toLowerCase() === '[object null]';\n        const isUndefined = Object.prototype.toString.call(value).toLowerCase() === '[object undefined]';\n\n        for (let i = this.cachedOptions.length - 1; i >= 0; i--) {\n          const cachedOption = this.cachedOptions[i];\n          const isEqual = isObject\n            ? getValueByPath(cachedOption.value, this.valueKey) === getValueByPath(value, this.valueKey)\n            : cachedOption.value === value;\n          if (isEqual) {\n            option = cachedOption;\n            break;\n          }\n        }\n        if (option) return option;\n        const label = (!isObject && !isNull && !isUndefined)\n          ? String(value) : '';\n        let newOption = {\n          value: value,\n          currentLabel: label\n        };\n        if (this.multiple) {\n          newOption.hitState = false;\n        }\n        return newOption;\n      },\n\n      setSelected() {\n        if (!this.multiple) {\n          let option = this.getOption(this.value);\n          if (option.created) {\n            this.createdLabel = option.currentLabel;\n            this.createdSelected = true;\n          } else {\n            this.createdSelected = false;\n          }\n          this.selectedLabel = option.currentLabel;\n          this.selected = option;\n          if (this.filterable) this.query = this.selectedLabel;\n          return;\n        }\n        let result = [];\n        if (Array.isArray(this.value)) {\n          this.value.forEach(value => {\n            result.push(this.getOption(value));\n          });\n        }\n        this.selected = result;\n        this.$nextTick(() => {\n          this.resetInputHeight();\n        });\n      },\n\n      handleFocus(event) {\n        if (!this.softFocus) {\n          if (this.automaticDropdown || this.filterable) {\n            if (this.filterable && !this.visible) {\n              this.menuVisibleOnFocus = true;\n            }\n            this.visible = true;\n          }\n          this.$emit('focus', event);\n        } else {\n          this.softFocus = false;\n        }\n      },\n\n      blur() {\n        this.visible = false;\n        this.$refs.reference.blur();\n      },\n\n      handleBlur(event) {\n        setTimeout(() => {\n          if (this.isSilentBlur) {\n            this.isSilentBlur = false;\n          } else {\n            this.$emit('blur', event);\n          }\n        }, 50);\n        this.softFocus = false;\n      },\n\n      handleClearClick(event) {\n        this.deleteSelected(event);\n      },\n\n      doDestroy() {\n        this.$refs.popper && this.$refs.popper.doDestroy();\n      },\n\n      handleClose() {\n        this.visible = false;\n      },\n\n      toggleLastOptionHitState(hit) {\n        if (!Array.isArray(this.selected)) return;\n        const option = this.selected[this.selected.length - 1];\n        if (!option) return;\n\n        if (hit === true || hit === false) {\n          option.hitState = hit;\n          return hit;\n        }\n\n        option.hitState = !option.hitState;\n        return option.hitState;\n      },\n\n      deletePrevTag(e) {\n        if (e.target.value.length <= 0 && !this.toggleLastOptionHitState()) {\n          const value = this.value.slice();\n          value.pop();\n          this.$emit('input', value);\n          this.emitChange(value);\n        }\n      },\n\n      managePlaceholder() {\n        if (this.currentPlaceholder !== '') {\n          this.currentPlaceholder = this.$refs.input.value ? '' : this.cachedPlaceHolder;\n        }\n      },\n\n      resetInputState(e) {\n        if (e.keyCode !== 8) this.toggleLastOptionHitState(false);\n        this.inputLength = this.$refs.input.value.length * 15 + 20;\n        this.resetInputHeight();\n      },\n\n      resetInputHeight() {\n        if (this.collapseTags && !this.filterable) return;\n        this.$nextTick(() => {\n          if (!this.$refs.reference) return;\n          let inputChildNodes = this.$refs.reference.$el.childNodes;\n          let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0];\n          const tags = this.$refs.tags;\n          const tagsHeight = tags ? Math.round(tags.getBoundingClientRect().height) : 0;\n          const sizeInMap = this.initialInputHeight || 40;\n          input.style.height = this.selected.length === 0\n            ? sizeInMap + 'px'\n            : Math.max(\n              tags ? (tagsHeight + (tagsHeight > sizeInMap ? 6 : 0)) : 0,\n              sizeInMap\n            ) + 'px';\n          if (this.visible && this.emptyText !== false) {\n            this.broadcast('ElSelectDropdown', 'updatePopper');\n          }\n        });\n      },\n\n      resetHoverIndex() {\n        setTimeout(() => {\n          if (!this.multiple) {\n            this.hoverIndex = this.options.indexOf(this.selected);\n          } else {\n            if (this.selected.length > 0) {\n              this.hoverIndex = Math.min.apply(null, this.selected.map(item => this.options.indexOf(item)));\n            } else {\n              this.hoverIndex = -1;\n            }\n          }\n        }, 300);\n      },\n\n      handleOptionSelect(option, byClick) {\n        if (this.multiple) {\n          const value = (this.value || []).slice();\n          const optionIndex = this.getValueIndex(value, option.value);\n          if (optionIndex > -1) {\n            value.splice(optionIndex, 1);\n          } else if (this.multipleLimit <= 0 || value.length < this.multipleLimit) {\n            value.push(option.value);\n          }\n          this.$emit('input', value);\n          this.emitChange(value);\n          if (option.created) {\n            this.query = '';\n            this.handleQueryChange('');\n            this.inputLength = 20;\n          }\n          if (this.filterable) this.$refs.input.focus();\n        } else {\n          this.$emit('input', option.value);\n          this.emitChange(option.value);\n          this.visible = false;\n        }\n        this.isSilentBlur = byClick;\n        this.setSoftFocus();\n        if (this.visible) return;\n        this.$nextTick(() => {\n          this.scrollToOption(option);\n        });\n      },\n\n      setSoftFocus() {\n        this.softFocus = true;\n        const input = this.$refs.input || this.$refs.reference;\n        if (input) {\n          input.focus();\n        }\n      },\n\n      getValueIndex(arr = [], value) {\n        const isObject = Object.prototype.toString.call(value).toLowerCase() === '[object object]';\n        if (!isObject) {\n          return arr.indexOf(value);\n        } else {\n          const valueKey = this.valueKey;\n          let index = -1;\n          arr.some((item, i) => {\n            if (getValueByPath(item, valueKey) === getValueByPath(value, valueKey)) {\n              index = i;\n              return true;\n            }\n            return false;\n          });\n          return index;\n        }\n      },\n\n      toggleMenu() {\n        if (!this.selectDisabled) {\n          if (this.menuVisibleOnFocus) {\n            this.menuVisibleOnFocus = false;\n          } else {\n            this.visible = !this.visible;\n          }\n          if (this.visible) {\n            (this.$refs.input || this.$refs.reference).focus();\n          }\n        }\n      },\n\n      selectOption() {\n        if (!this.visible) {\n          this.toggleMenu();\n        } else {\n          if (this.options[this.hoverIndex]) {\n            this.handleOptionSelect(this.options[this.hoverIndex]);\n          }\n        }\n      },\n\n      deleteSelected(event) {\n        event.stopPropagation();\n        const value = this.multiple ? [] : '';\n        this.$emit('input', value);\n        this.emitChange(value);\n        this.visible = false;\n        this.$emit('clear');\n      },\n\n      deleteTag(event, tag) {\n        let index = this.selected.indexOf(tag);\n        if (index > -1 && !this.selectDisabled) {\n          const value = this.value.slice();\n          value.splice(index, 1);\n          this.$emit('input', value);\n          this.emitChange(value);\n          this.$emit('remove-tag', tag.value);\n        }\n        event.stopPropagation();\n      },\n\n      onInputChange() {\n        if (this.filterable && this.query !== this.selectedLabel) {\n          this.query = this.selectedLabel;\n          this.handleQueryChange(this.query);\n        }\n      },\n\n      onOptionDestroy(index) {\n        if (index > -1) {\n          this.optionsCount--;\n          this.filteredOptionsCount--;\n          this.options.splice(index, 1);\n        }\n      },\n\n      resetInputWidth() {\n        this.inputWidth = this.$refs.reference.$el.getBoundingClientRect().width;\n      },\n\n      handleResize() {\n        this.resetInputWidth();\n        if (this.multiple) this.resetInputHeight();\n      },\n\n      checkDefaultFirstOption() {\n        this.hoverIndex = -1;\n        // highlight the created option\n        let hasCreated = false;\n        for (let i = this.options.length - 1; i >= 0; i--) {\n          if (this.options[i].created) {\n            hasCreated = true;\n            this.hoverIndex = i;\n            break;\n          }\n        }\n        if (hasCreated) return;\n        for (let i = 0; i !== this.options.length; ++i) {\n          const option = this.options[i];\n          if (this.query) {\n            // highlight first options that passes the filter\n            if (!option.disabled && !option.groupDisabled && option.visible) {\n              this.hoverIndex = i;\n              break;\n            }\n          } else {\n            // highlight currently selected option\n            if (option.itemSelected) {\n              this.hoverIndex = i;\n              break;\n            }\n          }\n        }\n      },\n\n      getValueKey(item) {\n        if (Object.prototype.toString.call(item.value).toLowerCase() !== '[object object]') {\n          return item.value;\n        } else {\n          return getValueByPath(item.value, this.valueKey);\n        }\n      }\n    },\n\n    created() {\n      this.cachedPlaceHolder = this.currentPlaceholder = this.propPlaceholder;\n      if (this.multiple && !Array.isArray(this.value)) {\n        this.$emit('input', []);\n      }\n      if (!this.multiple && Array.isArray(this.value)) {\n        this.$emit('input', '');\n      }\n\n      this.debouncedOnInputChange = debounce(this.debounce, () => {\n        this.onInputChange();\n      });\n\n      this.debouncedQueryChange = debounce(this.debounce, (e) => {\n        this.handleQueryChange(e.target.value);\n      });\n\n      this.$on('handleOptionClick', this.handleOptionSelect);\n      this.$on('setSelected', this.setSelected);\n    },\n\n    mounted() {\n      if (this.multiple && Array.isArray(this.value) && this.value.length > 0) {\n        this.currentPlaceholder = '';\n      }\n      addResizeListener(this.$el, this.handleResize);\n\n      const reference = this.$refs.reference;\n      if (reference && reference.$el) {\n        const sizeMap = {\n          medium: 36,\n          small: 32,\n          mini: 28\n        };\n        const input = reference.$el.querySelector('input');\n        this.initialInputHeight = input.getBoundingClientRect().height || sizeMap[this.selectSize];\n      }\n      if (this.remote && this.multiple) {\n        this.resetInputHeight();\n      }\n      this.$nextTick(() => {\n        if (reference && reference.$el) {\n          this.inputWidth = reference.$el.getBoundingClientRect().width;\n        }\n      });\n      this.setSelected();\n    },\n\n    beforeDestroy() {\n      if (this.$el && this.handleResize) removeResizeListener(this.$el, this.handleResize);\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/skeleton/index.js",
    "content": "import Skeleton from './src/index.vue';\n\n/* istanbul ignore next */\nSkeleton.install = function(Vue) {\n  Vue.component(Skeleton.name, Skeleton);\n};\n\nexport default Skeleton;\n"
  },
  {
    "path": "packages/skeleton/src/img-placeholder.vue",
    "content": "<template>\n  <svg\n    viewBox=\"0 0 1024 1024\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M64 896V128h896v768H64z m64-128l192-192 116.352 116.352L640 448l256 307.2V192H128v576z m224-480a96 96 0 1 1-0.064 192.064A96 96 0 0 1 352 288z\"\n    />\n  </svg>\n</template>\n\n<script>\nexport default {\n  name: 'ImgPlaceholder'\n};\n</script>\n"
  },
  {
    "path": "packages/skeleton/src/index.vue",
    "content": "<template>\n  <div>\n    <template v-if=\"uiLoading\">\n      <div :class=\"['el-skeleton', animated ? 'is-animated' : '', ]\" v-bind=\"$attrs\">\n        <template v-for=\"i in count\">\n          <slot v-if=\"loading\" name=\"template\">\n            <el-skeleton-item\n              v-for=\"item in rows\"\n              :key=\"`${i}-${item}`\"\n              :class=\"{\n                'el-skeleton__paragraph': item !== 1,\n                'is-first': item === 1,\n                'is-last': item === rows && rows > 1,\n              }\"\n              variant=\"p\"\n            />\n          </slot>\n        </template>\n      </div>\n    </template>\n    <template v-else>\n      <slot v-bind=\"$attrs\"></slot>\n    </template>\n  </div>\n</template>\n<script>\nexport default {\n  name: 'ElSkeleton',\n  props: {\n    animated: {\n      type: Boolean,\n      default: false\n    },\n    count: {\n      type: Number,\n      default: 1\n    },\n    rows: {\n      type: Number,\n      default: 4\n    },\n    loading: {\n      type: Boolean,\n      default: true\n    },\n    throttle: {\n      type: Number,\n      default: 0\n    }\n  },\n  watch: {\n    loading: {\n      handler(loading) {\n        if (this.throttle <= 0) {\n          this.uiLoading = loading;\n          return;\n        }\n        if (loading) {\n          clearTimeout(this.timeoutHandle);\n          this.timeoutHandle = setTimeout(() => {\n            this.uiLoading = this.loading;\n          }, this.throttle);\n        } else {\n          this.uiLoading = loading;\n        }\n      },\n      immediate: true\n    }\n  },\n  data() {\n    return {\n      uiLoading: this.throttle <= 0 ? this.loading : false\n    };\n  }\n};\n</script>\n"
  },
  {
    "path": "packages/skeleton/src/item.vue",
    "content": "<template>\n  <div :class=\"['el-skeleton__item', `el-skeleton__${variant}`]\">\n    <img-placeholder v-if=\"variant === 'image'\" />\n  </div>\n</template>\n\n<script>\n  import ImgPlaceholder from './img-placeholder';\n\n  export default {\n    name: 'ElSkeletonItem',\n    props: {\n      variant: {\n        type: String,\n        default: 'text'\n      }\n    },\n    components: {\n      [ImgPlaceholder.name]: ImgPlaceholder\n    }\n  };\n</script>"
  },
  {
    "path": "packages/skeleton-item/index.js",
    "content": "import SkeletonItem from '../skeleton/src/item';\n\n/* istanbul ignore next */\nSkeletonItem.install = function(Vue) {\n  Vue.component(SkeletonItem.name, SkeletonItem);\n};\n\nexport default SkeletonItem;\n"
  },
  {
    "path": "packages/slider/index.js",
    "content": "import Slider from './src/main';\n\n/* istanbul ignore next */\nSlider.install = function(Vue) {\n  Vue.component(Slider.name, Slider);\n};\n\nexport default Slider;\n"
  },
  {
    "path": "packages/slider/src/button.vue",
    "content": "<template>\n  <div\n    class=\"el-slider__button-wrapper\"\n    @mouseenter=\"handleMouseEnter\"\n    @mouseleave=\"handleMouseLeave\"\n    @mousedown=\"onButtonDown\"\n    @touchstart=\"onButtonDown\"\n    :class=\"{ 'hover': hovering, 'dragging': dragging }\"\n    :style=\"wrapperStyle\"\n    ref=\"button\"\n    tabindex=\"0\"\n    @focus=\"handleMouseEnter\"\n    @blur=\"handleMouseLeave\"\n    @keydown.left=\"onLeftKeyDown\"\n    @keydown.right=\"onRightKeyDown\"\n    @keydown.down.prevent=\"onLeftKeyDown\"\n    @keydown.up.prevent=\"onRightKeyDown\"\n  >\n    <el-tooltip\n      placement=\"top\"\n      ref=\"tooltip\"\n      :popper-class=\"tooltipClass\"\n      :disabled=\"!showTooltip\">\n      <span slot=\"content\">{{ formatValue }}</span>\n      <div class=\"el-slider__button\" :class=\"{ 'hover': hovering, 'dragging': dragging }\"></div>\n    </el-tooltip>\n  </div>\n</template>\n\n<script>\n  import ElTooltip from 'element-ui/packages/tooltip';\n\n  export default {\n    name: 'ElSliderButton',\n\n    components: {\n      ElTooltip\n    },\n\n    props: {\n      value: {\n        type: Number,\n        default: 0\n      },\n      vertical: {\n        type: Boolean,\n        default: false\n      },\n      tooltipClass: String\n    },\n\n    data() {\n      return {\n        hovering: false,\n        dragging: false,\n        isClick: false,\n        startX: 0,\n        currentX: 0,\n        startY: 0,\n        currentY: 0,\n        startPosition: 0,\n        newPosition: null,\n        oldValue: this.value\n      };\n    },\n\n    computed: {\n      disabled() {\n        return this.$parent.sliderDisabled;\n      },\n\n      max() {\n        return this.$parent.max;\n      },\n\n      min() {\n        return this.$parent.min;\n      },\n\n      step() {\n        return this.$parent.step;\n      },\n\n      showTooltip() {\n        return this.$parent.showTooltip;\n      },\n\n      precision() {\n        return this.$parent.precision;\n      },\n\n      currentPosition() {\n        return `${ (this.value - this.min) / (this.max - this.min) * 100 }%`;\n      },\n\n      enableFormat() {\n        return this.$parent.formatTooltip instanceof Function;\n      },\n\n      formatValue() {\n        return this.enableFormat && this.$parent.formatTooltip(this.value) || this.value;\n      },\n\n      wrapperStyle() {\n        return this.vertical ? { bottom: this.currentPosition } : { left: this.currentPosition };\n      }\n    },\n\n    watch: {\n      dragging(val) {\n        this.$parent.dragging = val;\n      }\n    },\n\n    methods: {\n      displayTooltip() {\n        this.$refs.tooltip && (this.$refs.tooltip.showPopper = true);\n      },\n\n      hideTooltip() {\n        this.$refs.tooltip && (this.$refs.tooltip.showPopper = false);\n      },\n\n      handleMouseEnter() {\n        this.hovering = true;\n        this.displayTooltip();\n      },\n\n      handleMouseLeave() {\n        this.hovering = false;\n        this.hideTooltip();\n      },\n\n      onButtonDown(event) {\n        if (this.disabled) return;\n        event.preventDefault();\n        this.onDragStart(event);\n        window.addEventListener('mousemove', this.onDragging);\n        window.addEventListener('touchmove', this.onDragging);\n        window.addEventListener('mouseup', this.onDragEnd);\n        window.addEventListener('touchend', this.onDragEnd);\n        window.addEventListener('contextmenu', this.onDragEnd);\n      },\n      onLeftKeyDown() {\n        if (this.disabled) return;\n        this.newPosition = parseFloat(this.currentPosition) - this.step / (this.max - this.min) * 100;\n        this.setPosition(this.newPosition);\n        this.$parent.emitChange();\n      },\n      onRightKeyDown() {\n        if (this.disabled) return;\n        this.newPosition = parseFloat(this.currentPosition) + this.step / (this.max - this.min) * 100;\n        this.setPosition(this.newPosition);\n        this.$parent.emitChange();\n      },\n      onDragStart(event) {\n        this.dragging = true;\n        this.isClick = true;\n        if (event.type === 'touchstart') {\n          event.clientY = event.touches[0].clientY;\n          event.clientX = event.touches[0].clientX;\n        }\n        if (this.vertical) {\n          this.startY = event.clientY;\n        } else {\n          this.startX = event.clientX;\n        }\n        this.startPosition = parseFloat(this.currentPosition);\n        this.newPosition = this.startPosition;\n      },\n\n      onDragging(event) {\n        if (this.dragging) {\n          this.isClick = false;\n          this.displayTooltip();\n          this.$parent.resetSize();\n          let diff = 0;\n          if (event.type === 'touchmove') {\n            event.clientY = event.touches[0].clientY;\n            event.clientX = event.touches[0].clientX;\n          }\n          if (this.vertical) {\n            this.currentY = event.clientY;\n            diff = (this.startY - this.currentY) / this.$parent.sliderSize * 100;\n          } else {\n            this.currentX = event.clientX;\n            diff = (this.currentX - this.startX) / this.$parent.sliderSize * 100;\n          }\n          this.newPosition = this.startPosition + diff;\n          this.setPosition(this.newPosition);\n        }\n      },\n\n      onDragEnd() {\n        if (this.dragging) {\n          /*\n           * 防止在 mouseup 后立即触发 click，导致滑块有几率产生一小段位移\n           * 不使用 preventDefault 是因为 mouseup 和 click 没有注册在同一个 DOM 上\n           */\n          setTimeout(() => {\n            this.dragging = false;\n            this.hideTooltip();\n            if (!this.isClick) {\n              this.setPosition(this.newPosition);\n              this.$parent.emitChange();\n            }\n          }, 0);\n          window.removeEventListener('mousemove', this.onDragging);\n          window.removeEventListener('touchmove', this.onDragging);\n          window.removeEventListener('mouseup', this.onDragEnd);\n          window.removeEventListener('touchend', this.onDragEnd);\n          window.removeEventListener('contextmenu', this.onDragEnd);\n        }\n      },\n\n      setPosition(newPosition) {\n        if (newPosition === null || isNaN(newPosition)) return;\n        if (newPosition < 0) {\n          newPosition = 0;\n        } else if (newPosition > 100) {\n          newPosition = 100;\n        }\n        const lengthPerStep = 100 / ((this.max - this.min) / this.step);\n        const steps = Math.round(newPosition / lengthPerStep);\n        let value = steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min;\n        value = parseFloat(value.toFixed(this.precision));\n        this.$emit('input', value);\n        this.$nextTick(() => {\n          this.displayTooltip();\n          this.$refs.tooltip && this.$refs.tooltip.updatePopper();\n        });\n        if (!this.dragging && this.value !== this.oldValue) {\n          this.oldValue = this.value;\n        }\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/slider/src/main.vue",
    "content": "<template>\n  <div\n    class=\"el-slider\"\n    :class=\"{ 'is-vertical': vertical, 'el-slider--with-input': showInput }\"\n    role=\"slider\"\n    :aria-valuemin=\"min\"\n    :aria-valuemax=\"max\"\n    :aria-orientation=\"vertical ? 'vertical': 'horizontal'\"\n    :aria-disabled=\"sliderDisabled\"\n  >\n    <el-input-number\n      v-model=\"firstValue\"\n      v-if=\"showInput && !range\"\n      class=\"el-slider__input\"\n      ref=\"input\"\n      @change=\"emitChange\"\n      :step=\"step\"\n      :disabled=\"sliderDisabled\"\n      :controls=\"showInputControls\"\n      :min=\"min\"\n      :max=\"max\"\n      :debounce=\"debounce\"\n      :size=\"inputSize\">\n    </el-input-number>\n    <div\n      class=\"el-slider__runway\"\n      :class=\"{ 'show-input': showInput, 'disabled': sliderDisabled }\"\n      :style=\"runwayStyle\"\n      @click=\"onSliderClick\"\n      ref=\"slider\">\n      <div\n        class=\"el-slider__bar\"\n        :style=\"barStyle\">\n      </div>\n      <slider-button\n        :vertical=\"vertical\"\n        v-model=\"firstValue\"\n        :tooltip-class=\"tooltipClass\"\n        ref=\"button1\">\n      </slider-button>\n      <slider-button\n        :vertical=\"vertical\"\n        v-model=\"secondValue\"\n        :tooltip-class=\"tooltipClass\"\n        ref=\"button2\"\n        v-if=\"range\">\n      </slider-button>\n      <div\n        class=\"el-slider__stop\"\n        v-for=\"(item, key) in stops\"\n        :key=\"key\"\n        :style=\"getStopStyle(item)\"\n        v-if=\"showStops\">\n      </div>\n      <template v-if=\"markList.length > 0\">\n        <div>\n          <div\n            v-for=\"(item, key) in markList\"\n            :style=\"getStopStyle(item.position)\"\n            class=\"el-slider__stop el-slider__marks-stop\"\n            :key=\"key\">\n          </div>\n        </div>\n        <div class=\"el-slider__marks\">\n          <slider-marker\n            :mark=\"item.mark\" v-for=\"(item, key) in markList\"\n            :key=\"key\"\n            :style=\"getStopStyle(item.position)\">\n          </slider-marker>\n        </div>\n      </template>\n    </div>\n  </div>\n</template>\n\n<script type=\"text/babel\">\n  import ElInputNumber from 'element-ui/packages/input-number';\n  import SliderButton from './button.vue';\n  import SliderMarker from './marker';\n  import Emitter from 'element-ui/src/mixins/emitter';\n\n  export default {\n    name: 'ElSlider',\n\n    mixins: [Emitter],\n\n    inject: {\n      elForm: {\n        default: ''\n      }\n    },\n\n    props: {\n      min: {\n        type: Number,\n        default: 0\n      },\n      max: {\n        type: Number,\n        default: 100\n      },\n      step: {\n        type: Number,\n        default: 1\n      },\n      value: {\n        type: [Number, Array],\n        default: 0\n      },\n      showInput: {\n        type: Boolean,\n        default: false\n      },\n      showInputControls: {\n        type: Boolean,\n        default: true\n      },\n      inputSize: {\n        type: String,\n        default: 'small'\n      },\n      showStops: {\n        type: Boolean,\n        default: false\n      },\n      showTooltip: {\n        type: Boolean,\n        default: true\n      },\n      formatTooltip: Function,\n      disabled: {\n        type: Boolean,\n        default: false\n      },\n      range: {\n        type: Boolean,\n        default: false\n      },\n      vertical: {\n        type: Boolean,\n        default: false\n      },\n      height: {\n        type: String\n      },\n      debounce: {\n        type: Number,\n        default: 300\n      },\n      label: {\n        type: String\n      },\n      tooltipClass: String,\n      marks: Object\n    },\n\n    components: {\n      ElInputNumber,\n      SliderButton,\n      SliderMarker\n    },\n\n    data() {\n      return {\n        firstValue: null,\n        secondValue: null,\n        oldValue: null,\n        dragging: false,\n        sliderSize: 1\n      };\n    },\n\n    watch: {\n      value(val, oldVal) {\n        if (this.dragging ||\n          Array.isArray(val) &&\n          Array.isArray(oldVal) &&\n          val.every((item, index) => item === oldVal[index])) {\n          return;\n        }\n        this.setValues();\n      },\n\n      dragging(val) {\n        if (!val) {\n          this.setValues();\n        }\n      },\n\n      firstValue(val) {\n        if (this.range) {\n          this.$emit('input', [this.minValue, this.maxValue]);\n        } else {\n          this.$emit('input', val);\n        }\n      },\n\n      secondValue() {\n        if (this.range) {\n          this.$emit('input', [this.minValue, this.maxValue]);\n        }\n      },\n\n      min() {\n        this.setValues();\n      },\n\n      max() {\n        this.setValues();\n      }\n    },\n\n    methods: {\n      valueChanged() {\n        if (this.range) {\n          return ![this.minValue, this.maxValue]\n            .every((item, index) => item === this.oldValue[index]);\n        } else {\n          return this.value !== this.oldValue;\n        }\n      },\n      setValues() {\n        if (this.min > this.max) {\n          console.error('[Element Error][Slider]min should not be greater than max.');\n          return;\n        }\n        const val = this.value;\n        if (this.range && Array.isArray(val)) {\n          if (val[1] < this.min) {\n            this.$emit('input', [this.min, this.min]);\n          } else if (val[0] > this.max) {\n            this.$emit('input', [this.max, this.max]);\n          } else if (val[0] < this.min) {\n            this.$emit('input', [this.min, val[1]]);\n          } else if (val[1] > this.max) {\n            this.$emit('input', [val[0], this.max]);\n          } else {\n            this.firstValue = val[0];\n            this.secondValue = val[1];\n            if (this.valueChanged()) {\n              this.dispatch('ElFormItem', 'el.form.change', [this.minValue, this.maxValue]);\n              this.oldValue = val.slice();\n            }\n          }\n        } else if (!this.range && typeof val === 'number' && !isNaN(val)) {\n          if (val < this.min) {\n            this.$emit('input', this.min);\n          } else if (val > this.max) {\n            this.$emit('input', this.max);\n          } else {\n            this.firstValue = val;\n            if (this.valueChanged()) {\n              this.dispatch('ElFormItem', 'el.form.change', val);\n              this.oldValue = val;\n            }\n          }\n        }\n      },\n\n      setPosition(percent) {\n        const targetValue = this.min + percent * (this.max - this.min) / 100;\n        if (!this.range) {\n          this.$refs.button1.setPosition(percent);\n          return;\n        }\n        let button;\n        if (Math.abs(this.minValue - targetValue) < Math.abs(this.maxValue - targetValue)) {\n          button = this.firstValue < this.secondValue ? 'button1' : 'button2';\n        } else {\n          button = this.firstValue > this.secondValue ? 'button1' : 'button2';\n        }\n        this.$refs[button].setPosition(percent);\n      },\n\n      onSliderClick(event) {\n        if (this.sliderDisabled || this.dragging) return;\n        this.resetSize();\n        if (this.vertical) {\n          const sliderOffsetBottom = this.$refs.slider.getBoundingClientRect().bottom;\n          this.setPosition((sliderOffsetBottom - event.clientY) / this.sliderSize * 100);\n        } else {\n          const sliderOffsetLeft = this.$refs.slider.getBoundingClientRect().left;\n          this.setPosition((event.clientX - sliderOffsetLeft) / this.sliderSize * 100);\n        }\n        this.emitChange();\n      },\n\n      resetSize() {\n        if (this.$refs.slider) {\n          this.sliderSize = this.$refs.slider[`client${ this.vertical ? 'Height' : 'Width' }`];\n        }\n      },\n\n      emitChange() {\n        this.$nextTick(() => {\n          this.$emit('change', this.range ? [this.minValue, this.maxValue] : this.value);\n        });\n      },\n\n      getStopStyle(position) {\n        return this.vertical ? { 'bottom': position + '%' } : { 'left': position + '%' };\n      }\n    },\n\n    computed: {\n      stops() {\n        if (!this.showStops || this.min > this.max) return [];\n        if (this.step === 0) {\n          process.env.NODE_ENV !== 'production' &&\n          console.warn('[Element Warn][Slider]step should not be 0.');\n          return [];\n        }\n        const stopCount = (this.max - this.min) / this.step;\n        const stepWidth = 100 * this.step / (this.max - this.min);\n        const result = [];\n        for (let i = 1; i < stopCount; i++) {\n          result.push(i * stepWidth);\n        }\n        if (this.range) {\n          return result.filter(step => {\n            return step < 100 * (this.minValue - this.min) / (this.max - this.min) ||\n              step > 100 * (this.maxValue - this.min) / (this.max - this.min);\n          });\n        } else {\n          return result.filter(step => step > 100 * (this.firstValue - this.min) / (this.max - this.min));\n        }\n      },\n\n      markList() {\n        if (!this.marks) {\n          return [];\n        }\n\n        const marksKeys = Object.keys(this.marks);\n        return marksKeys.map(parseFloat)\n          .sort((a, b) => a - b)\n          .filter(point => point <= this.max && point >= this.min)\n          .map(point => ({\n            point,\n            position: (point - this.min) * 100 / (this.max - this.min),\n            mark: this.marks[point]\n          }));\n      },\n\n      minValue() {\n        return Math.min(this.firstValue, this.secondValue);\n      },\n\n      maxValue() {\n        return Math.max(this.firstValue, this.secondValue);\n      },\n\n      barSize() {\n        return this.range\n          ? `${ 100 * (this.maxValue - this.minValue) / (this.max - this.min) }%`\n          : `${ 100 * (this.firstValue - this.min) / (this.max - this.min) }%`;\n      },\n\n      barStart() {\n        return this.range\n          ? `${ 100 * (this.minValue - this.min) / (this.max - this.min) }%`\n          : '0%';\n      },\n\n      precision() {\n        let precisions = [this.min, this.max, this.step].map(item => {\n          let decimal = ('' + item).split('.')[1];\n          return decimal ? decimal.length : 0;\n        });\n        return Math.max.apply(null, precisions);\n      },\n\n      runwayStyle() {\n        return this.vertical ? { height: this.height } : {};\n      },\n\n      barStyle() {\n        return this.vertical\n          ? {\n            height: this.barSize,\n            bottom: this.barStart\n          } : {\n            width: this.barSize,\n            left: this.barStart\n          };\n      },\n\n      sliderDisabled() {\n        return this.disabled || (this.elForm || {}).disabled;\n      }\n    },\n\n    mounted() {\n      let valuetext;\n      if (this.range) {\n        if (Array.isArray(this.value)) {\n          this.firstValue = Math.max(this.min, this.value[0]);\n          this.secondValue = Math.min(this.max, this.value[1]);\n        } else {\n          this.firstValue = this.min;\n          this.secondValue = this.max;\n        }\n        this.oldValue = [this.firstValue, this.secondValue];\n        valuetext = `${this.firstValue}-${this.secondValue}`;\n      } else {\n        if (typeof this.value !== 'number' || isNaN(this.value)) {\n          this.firstValue = this.min;\n        } else {\n          this.firstValue = Math.min(this.max, Math.max(this.min, this.value));\n        }\n        this.oldValue = this.firstValue;\n        valuetext = this.firstValue;\n      }\n      this.$el.setAttribute('aria-valuetext', valuetext);\n\n      // label screen reader\n      this.$el.setAttribute('aria-label', this.label ? this.label : `slider between ${this.min} and ${this.max}`);\n\n      this.resetSize();\n      window.addEventListener('resize', this.resetSize);\n    },\n\n    beforeDestroy() {\n      window.removeEventListener('resize', this.resetSize);\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/slider/src/marker.js",
    "content": "export default {\n  name: 'ElMarker',\n\n  props: {\n    mark: {\n      type: [String, Object]\n    }\n  },\n  render() {\n    let label = typeof this.mark === 'string' ? this.mark : this.mark.label;\n\n    return (\n      <div class=\"el-slider__marks-text\" style={ this.mark.style || {} }>\n        { label }\n      </div>\n    );\n  }\n};\n"
  },
  {
    "path": "packages/spinner/index.js",
    "content": "import Spinner from './src/spinner';\n\n/* istanbul ignore next */\nSpinner.install = function(Vue) {\n  Vue.component(Spinner.name, Spinner);\n};\n\nexport default Spinner;\n"
  },
  {
    "path": "packages/spinner/src/spinner.vue",
    "content": "<template>\n  <span class=\"el-spinner\">\n    <svg class=\"el-spinner-inner\" viewBox=\"0 0 50 50\" :style=\"{ width: radius/2 + 'px', height: radius/2 + 'px' }\">\n      <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" :stroke=\"strokeColor\" :stroke-width=\"strokeWidth\"></circle>\n    </svg>\n  </span>\n</template>\n<script>\n  export default {\n    name: 'ElSpinner',\n    props: {\n      type: String,\n      radius: {\n        type: Number,\n        default: 100\n      },\n      strokeWidth: {\n        type: Number,\n        default: 5\n      },\n      strokeColor: {\n        type: String,\n        default: '#efefef'\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/statistic/index.js",
    "content": "import Statistic from './src/main';\n\n/* istanbul ignore next */\nStatistic.install = function(Vue) {\n  Vue.component(Statistic.name, Statistic);\n};\n\nexport default Statistic;\n"
  },
  {
    "path": "packages/statistic/src/main.vue",
    "content": "<template>\n  <div class=\"el-statistic\">\n    <div class=\"head\" v-if=\"title||$slots.title\">\n      <slot name=\"title\">\n        <span class=\"title\">\n          {{ title }}\n        </span>\n      </slot>\n    </div>\n    <div class=\"con\">\n      <span class=\"prefix\" v-if=\"prefix||$slots.prefix\">\n        <slot name=\"prefix\" >\n          {{ prefix }}\n        </slot>\n      </span>\n      <span class=\"number\" :style=\"valueStyle\">\n        <slot name=\"formatter\"> {{ disposeValue }}</slot>\n      </span>\n      <span class=\"suffix\" v-if=\"suffix||$slots.suffix\">\n        <slot name=\"suffix\">\n          {{ suffix }}\n        </slot>\n      </span>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { isNumber, chain, multiply, padStart, reduce} from 'element-ui/src/utils/lodash';\nexport default {\n  name: 'ElStatistic',\n  data() {\n    return {\n      disposeValue: '',\n      timeTask: null,\n      REFRESH_INTERVAL: 1000 / 30\n    };\n  },\n  props: {\n    decimalSeparator: {\n      type: String,\n      default: '.'\n    },\n    groupSeparator: {\n      type: String,\n      default: ''\n    },\n    precision: {\n      type: Number,\n      default: null\n    },\n    value: {\n      type: [String, Number, Date],\n      default: ''\n    },\n    prefix: {\n      type: String,\n      default: ''\n    },\n    suffix: {\n      type: String,\n      default: ''\n    },\n    title: {\n      type: [String, Number],\n      default: ''\n    },\n    timeIndices: {\n      type: Boolean,\n      default: false\n    },\n    valueStyle: {\n      type: Object,\n      default: function() {\n        return {};\n      }\n    },\n    format: {\n      type: String,\n      default: 'HH:mm:ss:SSS'\n    },\n    rate: {\n      type: Number,\n      default: 1000\n    }\n  },\n  created() {\n    this.branch();\n  },\n  watch: {\n    value: function() {\n      this.branch();\n    },\n    groupSeparator() {\n      this.dispose();\n    },\n    mulriple() {\n      this.dispose();\n    }\n  },\n  methods: {\n    branch() {\n      let { timeIndices, countDown, dispose} = this;\n      if (timeIndices) {\n        countDown(this.value.valueOf() || this.value);\n      } else {\n        dispose();\n      }\n    },\n    magnification(num, mulriple = 1000, groupSeparator = ',') {\n      // magnification factor\n      const level = String(mulriple).length ;\n      return num.replace(new RegExp(`(\\\\d)(?=(\\\\d{${level - 1}})+$)`, 'g'), `$1${groupSeparator}`);\n    },\n    dispose() {\n      let { value, rate, groupSeparator } = this;\n      if (!isNumber(value)) return false;\n      if (this.precision) {\n        value = value.toFixed(this.precision);\n      }\n      let [integer, decimal] = String(value).split('.');\n      // 1000 multiplying power\n      if (groupSeparator) {\n        integer = this.magnification(integer, rate, groupSeparator);\n      }\n      let result = `${integer}${decimal ? this.decimalSeparator + decimal : ''}`;\n      this.disposeValue = result;\n      return result;\n    },\n    diffDate(minuend, subtrahend) {\n      return Math.max(minuend - subtrahend, 0);\n    },\n    suspend(isStop) {\n      if (isStop) {\n        if (this.timeTask) {\n          clearInterval(this.timeTask);\n          this.timeTask = null;\n        }\n      } else {\n        this.branch();\n      }\n      return this.disposeValue;\n    },\n    formatTimeStr: function(time) {\n      let {format} = this;\n      const escapeRegex = /\\[[^\\]]*]/g;\n      const keepList = (format.match(escapeRegex) || []).map(str => str.slice(1, -1));\n      const timeUnits = [\n        ['Y', 1000 * 60 * 60 * 24 * 365], // years\n        ['M', 1000 * 60 * 60 * 24 * 30], // months\n        ['D', 1000 * 60 * 60 * 24], // days\n        ['H', 1000 * 60 * 60], // hours\n        ['m', 1000 * 60], // minutes\n        ['s', 1000], // seconds\n        ['S', 1] // million seconds\n      ];\n      let formatText = reduce(\n        timeUnits,\n        (con, item) => {\n          const name = item[0];\n          return con.replace(new RegExp(`${name}+`, 'g'), (match) => {\n            let sum = chain(time).divide(item[1]).floor(0).value();\n            time -= multiply(sum, item[1]);\n            return padStart(String(sum), String(match).length, 0);\n          });\n        },\n        format\n      );\n      let index = 0;\n      return formatText.replace(escapeRegex, () => {\n        const match = keepList[index];\n        index += 1;\n        return match;\n      });\n    },\n    stopTime(time) {\n      let result = true; // stop\n      if (time) {\n        this.$emit('change', time);\n        result = false;\n      } else {\n        result = true;\n        this.suspend(true);\n        this.$emit('finish', true);\n      }\n      return result;\n    },\n    countDown(timeVlaue) {\n      let {REFRESH_INTERVAL, timeTask, diffDate, formatTimeStr, stopTime, suspend } = this;\n      if (timeTask) return;\n      let than = this;\n      this.timeTask = setInterval(()=> {\n        let diffTiem = diffDate(timeVlaue, Date.now());\n        than.disposeValue = formatTimeStr(diffTiem);\n        stopTime(diffTiem);\n      }, REFRESH_INTERVAL);\n      this.$once('hook:beforeDestroy', () => {\n        suspend(true);\n      });\n\n    }\n  }\n};\n</script>\n"
  },
  {
    "path": "packages/step/index.js",
    "content": "import Step from '../steps/src/step';\n\n/* istanbul ignore next */\nStep.install = function(Vue) {\n  Vue.component(Step.name, Step);\n};\n\nexport default Step;\n"
  },
  {
    "path": "packages/steps/README.md",
    "content": "# element-steps\n> A element-steps component for Vue.js.\n\n## Demo\nhttp://element-component.github.io/element-steps\n\n## Installation\n```shell\nnpm i element-steps -D\n```\n\n## Usage\n```javascript\nimport Vue from 'vue'\nimport ElStep from 'element-steps'\nimport 'element-theme-chalk/dist/step.css'\n\nVue.use(ElStep)\n```\n\nor\n\n```javascript\nimport Vue from 'vue'\nimport { ElSteps, ElStep } from 'element-steps'\n\nVue.component('el-steps', ElSteps)\nVue.component('el-step', ElStep)\n```\n\n### Steps Attributes\n\n| 参数      | 说明    | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| space | 每个 step 的间距，不填写将自适应间距 | Number | — | — |\n| direction | 显示方向 | string | vertical/horizontal | horizontal |\n| active | 设置当前激活步骤  | number | — | 0 |\n| process-status | 设置当前步骤的状态 | string | wait/process/finish/error/success | process |\n| finish-status | 设置结束步骤的状态 | string | wait/process/finish/error/success | finish |\n| align-center | 标题描述居中对齐 | boolean | - | false |\n\n### Step Attributes\n| 参数      | 说明    | 类型      | 可选值       | 默认值   |\n|---------- |-------- |---------- |-------------  |-------- |\n| title | 标题 | string | — | — |\n| description | 描述性文字 | string | — | — |\n| icon | 图标 | Element Icon 提供的图标，如果要使用自定义图标可以通过 slot 方式写入 | string | — |\n\n### Step Slot\n| name | 说明  |\n|----|----|\n| icon | 图标 |\n| title | 标题 |\n| description | 描述性文字 |\n\n\n## Development\n```shell\nmake dev\n\n## test\nmake test\n\n## build\nmake build\n```\n\n# License\n[MIT](https://opensource.org/licenses/MIT)\n"
  },
  {
    "path": "packages/steps/index.js",
    "content": "import Steps from './src/steps';\n\n/* istanbul ignore next */\nSteps.install = function(Vue) {\n  Vue.component(Steps.name, Steps);\n};\n\nexport default Steps;\n"
  },
  {
    "path": "packages/steps/src/step.vue",
    "content": "<template>\n  <div\n    class=\"el-step\"\n    :style=\"style\"\n    :class=\"[\n      !isSimple && `is-${$parent.direction}`,\n      isSimple && 'is-simple',\n      isLast && !space && !isCenter && 'is-flex',\n      isCenter && !isVertical && !isSimple && 'is-center'\n     ]\">\n    <!-- icon & line -->\n    <div\n      class=\"el-step__head\"\n      :class=\"`is-${currentStatus}`\">\n      <div\n        class=\"el-step__line\"\n        :style=\"isLast ? '' : { marginRight: $parent.stepOffset + 'px' }\"\n      >\n        <i class=\"el-step__line-inner\" :style=\"lineStyle\"></i>\n      </div>\n\n      <div class=\"el-step__icon\" :class=\"`is-${icon ? 'icon' : 'text'}`\">\n        <slot\n          v-if=\"currentStatus !== 'success' && currentStatus !== 'error'\"\n          name=\"icon\">\n          <i v-if=\"icon\" class=\"el-step__icon-inner\" :class=\"[icon]\"></i>\n          <div class=\"el-step__icon-inner\" v-if=\"!icon && !isSimple\">{{ index + 1 }}</div>\n        </slot>\n        <i\n          v-else\n          :class=\"['el-icon-' + (currentStatus === 'success' ? 'check' : 'close')]\"\n          class=\"el-step__icon-inner is-status\"\n        >\n        </i>\n      </div>\n    </div>\n    <!-- title & description -->\n    <div class=\"el-step__main\">\n      <div\n        class=\"el-step__title\"\n        ref=\"title\"\n        :class=\"['is-' + currentStatus]\">\n        <slot name=\"title\">{{ title }}</slot>\n      </div>\n      <div v-if=\"isSimple\" class=\"el-step__arrow\"></div>\n      <div\n        v-else\n        class=\"el-step__description\"\n        :class=\"['is-' + currentStatus]\">\n        <slot name=\"description\">{{ description }}</slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'ElStep',\n\n  props: {\n    title: String,\n    icon: String,\n    description: String,\n    status: String\n  },\n\n  data() {\n    return {\n      index: -1,\n      lineStyle: {},\n      internalStatus: ''\n    };\n  },\n\n  beforeCreate() {\n    this.$parent.steps.push(this);\n  },\n\n  beforeDestroy() {\n    const steps = this.$parent.steps;\n    const index = steps.indexOf(this);\n    if (index >= 0) {\n      steps.splice(index, 1);\n    }\n  },\n\n  computed: {\n    currentStatus() {\n      return this.status || this.internalStatus;\n    },\n    prevStatus() {\n      const prevStep = this.$parent.steps[this.index - 1];\n      return prevStep ? prevStep.currentStatus : 'wait';\n    },\n    isCenter() {\n      return this.$parent.alignCenter;\n    },\n    isVertical() {\n      return this.$parent.direction === 'vertical';\n    },\n    isSimple() {\n      return this.$parent.simple;\n    },\n    isLast() {\n      const parent = this.$parent;\n      return parent.steps[parent.steps.length - 1] === this;\n    },\n    stepsCount() {\n      return this.$parent.steps.length;\n    },\n    space() {\n      const { isSimple, $parent: { space } } = this;\n      return isSimple ? '' : space ;\n    },\n    style: function() {\n      const style = {};\n      const parent = this.$parent;\n      const len = parent.steps.length;\n\n      const space = (typeof this.space === 'number'\n        ? this.space + 'px'\n        : this.space\n          ? this.space\n          : 100 / (len - (this.isCenter ? 0 : 1)) + '%');\n      style.flexBasis = space;\n      if (this.isVertical) return style;\n      if (this.isLast) {\n        style.maxWidth = 100 / this.stepsCount + '%';\n      } else {\n        style.marginRight = -this.$parent.stepOffset + 'px';\n      }\n\n      return style;\n    }\n  },\n\n  methods: {\n    updateStatus(val) {\n      const prevChild = this.$parent.$children[this.index - 1];\n\n      if (val > this.index) {\n        this.internalStatus = this.$parent.finishStatus;\n      } else if (val === this.index && this.prevStatus !== 'error') {\n        this.internalStatus = this.$parent.processStatus;\n      } else {\n        this.internalStatus = 'wait';\n      }\n\n      if (prevChild) prevChild.calcProgress(this.internalStatus);\n    },\n\n    calcProgress(status) {\n      let step = 100;\n      const style = {};\n\n      style.transitionDelay = 150 * this.index + 'ms';\n      if (status === this.$parent.processStatus) {\n        step = this.currentStatus !== 'error' ? 0 : 0;\n      } else if (status === 'wait') {\n        step = 0;\n        style.transitionDelay = (-150 * this.index) + 'ms';\n      }\n\n      style.borderWidth = step && !this.isSimple ? '1px' : 0;\n      this.$parent.direction === 'vertical'\n        ? style.height = step + '%'\n        : style.width = step + '%';\n\n      this.lineStyle = style;\n    }\n  },\n\n  mounted() {\n    const unwatch = this.$watch('index', val => {\n      this.$watch('$parent.active', this.updateStatus, { immediate: true });\n      this.$watch('$parent.processStatus', () => {\n        const activeIndex = this.$parent.active;\n        this.updateStatus(activeIndex);\n      }, { immediate: true });\n      unwatch();\n    });\n  }\n};\n</script>\n"
  },
  {
    "path": "packages/steps/src/steps.vue",
    "content": "<template>\n  <div\n    class=\"el-steps\"\n    :class=\"[\n       !simple && 'el-steps--' + direction,\n       simple && 'el-steps--simple'\n     ]\">\n      <slot></slot>\n  </div>\n</template>\n\n<script>\nimport Migrating from 'element-ui/src/mixins/migrating';\n\nexport default {\n  name: 'ElSteps',\n\n  mixins: [Migrating],\n\n  props: {\n    space: [Number, String],\n    active: Number,\n    direction: {\n      type: String,\n      default: 'horizontal'\n    },\n    alignCenter: Boolean,\n    simple: Boolean,\n    finishStatus: {\n      type: String,\n      default: 'finish'\n    },\n    processStatus: {\n      type: String,\n      default: 'process'\n    }\n  },\n\n  data() {\n    return {\n      steps: [],\n      stepOffset: 0\n    };\n  },\n\n  methods: {\n    getMigratingConfig() {\n      return {\n        props: {\n          'center': 'center is removed.'\n        }\n      };\n    }\n  },\n\n  watch: {\n    active(newVal, oldVal) {\n      this.$emit('change', newVal, oldVal);\n    },\n\n    steps(steps) {\n      steps.forEach((child, index) => {\n        child.index = index;\n      });\n    }\n  }\n};\n</script>\n"
  },
  {
    "path": "packages/submenu/index.js",
    "content": "import ElSubmenu from '../menu/src/submenu';\n\n/* istanbul ignore next */\nElSubmenu.install = function(Vue) {\n  Vue.component(ElSubmenu.name, ElSubmenu);\n};\n\nexport default ElSubmenu;\n"
  },
  {
    "path": "packages/switch/index.js",
    "content": "import Switch from './src/component';\n\n/* istanbul ignore next */\nSwitch.install = function(Vue) {\n  Vue.component(Switch.name, Switch);\n};\n\nexport default Switch;\n\n"
  },
  {
    "path": "packages/switch/src/component.vue",
    "content": "<template>\n  <div\n    class=\"el-switch\"\n    :class=\"{ 'is-disabled': switchDisabled, 'is-checked': checked }\"\n    role=\"switch\"\n    :aria-checked=\"checked\"\n    :aria-disabled=\"switchDisabled\"\n    @click.prevent=\"switchValue\"\n  >\n    <input\n      class=\"el-switch__input\"\n      type=\"checkbox\"\n      @change=\"handleChange\"\n      ref=\"input\"\n      :id=\"id\"\n      :name=\"name\"\n      :true-value=\"activeValue\"\n      :false-value=\"inactiveValue\"\n      :disabled=\"switchDisabled\"\n      @keydown.enter=\"switchValue\"\n    >\n    <span\n      :class=\"['el-switch__label', 'el-switch__label--left', !checked ? 'is-active' : '']\"\n      v-if=\"inactiveIconClass || inactiveText\">\n      <i :class=\"[inactiveIconClass]\" v-if=\"inactiveIconClass\"></i>\n      <span v-if=\"!inactiveIconClass && inactiveText\" :aria-hidden=\"checked\">{{ inactiveText }}</span>\n    </span>\n    <span class=\"el-switch__core\" ref=\"core\" :style=\"{ 'width': coreWidth + 'px' }\">\n    </span>\n    <span\n      :class=\"['el-switch__label', 'el-switch__label--right', checked ? 'is-active' : '']\"\n      v-if=\"activeIconClass || activeText\">\n      <i :class=\"[activeIconClass]\" v-if=\"activeIconClass\"></i>\n      <span v-if=\"!activeIconClass && activeText\" :aria-hidden=\"!checked\">{{ activeText }}</span>\n    </span>\n  </div>\n</template>\n<script>\n  import emitter from 'element-ui/src/mixins/emitter';\n  import Focus from 'element-ui/src/mixins/focus';\n  import Migrating from 'element-ui/src/mixins/migrating';\n\n  export default {\n    name: 'ElSwitch',\n    mixins: [Focus('input'), Migrating, emitter],\n    inject: {\n      elForm: {\n        default: ''\n      }\n    },\n    props: {\n      value: {\n        type: [Boolean, String, Number],\n        default: false\n      },\n      disabled: {\n        type: Boolean,\n        default: false\n      },\n      width: {\n        type: Number,\n        default: 40\n      },\n      activeIconClass: {\n        type: String,\n        default: ''\n      },\n      inactiveIconClass: {\n        type: String,\n        default: ''\n      },\n      activeText: String,\n      inactiveText: String,\n      activeColor: {\n        type: String,\n        default: ''\n      },\n      inactiveColor: {\n        type: String,\n        default: ''\n      },\n      activeValue: {\n        type: [Boolean, String, Number],\n        default: true\n      },\n      inactiveValue: {\n        type: [Boolean, String, Number],\n        default: false\n      },\n      name: {\n        type: String,\n        default: ''\n      },\n      validateEvent: {\n        type: Boolean,\n        default: true\n      },\n      id: String\n    },\n    data() {\n      return {\n        coreWidth: this.width\n      };\n    },\n    created() {\n      if (!~[this.activeValue, this.inactiveValue].indexOf(this.value)) {\n        this.$emit('input', this.inactiveValue);\n      }\n    },\n    computed: {\n      checked() {\n        return this.value === this.activeValue;\n      },\n      switchDisabled() {\n        return this.disabled || (this.elForm || {}).disabled;\n      }\n    },\n    watch: {\n      checked() {\n        this.$refs.input.checked = this.checked;\n        if (this.activeColor || this.inactiveColor) {\n          this.setBackgroundColor();\n        }\n        if (this.validateEvent) {\n          this.dispatch('ElFormItem', 'el.form.change', [this.value]);\n        }\n      }\n    },\n    methods: {\n      handleChange(event) {\n        const val = this.checked ? this.inactiveValue : this.activeValue;\n        this.$emit('input', val);\n        this.$emit('change', val);\n        this.$nextTick(() => {\n          // set input's checked property\n          // in case parent refuses to change component's value\n          if (this.$refs.input) {\n            this.$refs.input.checked = this.checked;\n          }\n        });\n      },\n      setBackgroundColor() {\n        let newColor = this.checked ? this.activeColor : this.inactiveColor;\n        this.$refs.core.style.borderColor = newColor;\n        this.$refs.core.style.backgroundColor = newColor;\n      },\n      switchValue() {\n        !this.switchDisabled && this.handleChange();\n      },\n      getMigratingConfig() {\n        return {\n          props: {\n            'on-color': 'on-color is renamed to active-color.',\n            'off-color': 'off-color is renamed to inactive-color.',\n            'on-text': 'on-text is renamed to active-text.',\n            'off-text': 'off-text is renamed to inactive-text.',\n            'on-value': 'on-value is renamed to active-value.',\n            'off-value': 'off-value is renamed to inactive-value.',\n            'on-icon-class': 'on-icon-class is renamed to active-icon-class.',\n            'off-icon-class': 'off-icon-class is renamed to inactive-icon-class.'\n          }\n        };\n      }\n    },\n    mounted() {\n      /* istanbul ignore if */\n      this.coreWidth = this.width || 40;\n      if (this.activeColor || this.inactiveColor) {\n        this.setBackgroundColor();\n      }\n      this.$refs.input.checked = this.checked;\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/tab-pane/index.js",
    "content": "import TabPane from '../tabs/src/tab-pane.vue';\n\n/* istanbul ignore next */\nTabPane.install = function(Vue) {\n  Vue.component(TabPane.name, TabPane);\n};\n\nexport default TabPane;\n"
  },
  {
    "path": "packages/table/index.js",
    "content": "import ElTable from './src/table';\n\n/* istanbul ignore next */\nElTable.install = function(Vue) {\n  Vue.component(ElTable.name, ElTable);\n};\n\nexport default ElTable;\n"
  },
  {
    "path": "packages/table/src/config.js",
    "content": "import { getPropByPath } from 'element-ui/src/utils/util';\n\nexport const cellStarts = {\n  default: {\n    order: ''\n  },\n  selection: {\n    width: 48,\n    minWidth: 48,\n    realWidth: 48,\n    order: '',\n    className: 'el-table-column--selection'\n  },\n  expand: {\n    width: 48,\n    minWidth: 48,\n    realWidth: 48,\n    order: ''\n  },\n  index: {\n    width: 48,\n    minWidth: 48,\n    realWidth: 48,\n    order: ''\n  }\n};\n\n// 这些选项不应该被覆盖\nexport const cellForced = {\n  selection: {\n    renderHeader: function(h, { store }) {\n      return <el-checkbox\n        disabled={ store.states.data && store.states.data.length === 0 }\n        indeterminate={ store.states.selection.length > 0 && !this.isAllSelected }\n        on-input={ this.toggleAllSelection }\n        value={ this.isAllSelected } />;\n    },\n    renderCell: function(h, { row, column, isSelected, store, $index }) {\n      return <el-checkbox\n        nativeOn-click={ (event) => event.stopPropagation() }\n        value={ isSelected }\n        disabled={ column.selectable ? !column.selectable.call(null, row, $index) : false }\n        on-input={ () => { store.commit('rowSelectedChanged', row); } }\n      />;\n    },\n    sortable: false,\n    resizable: false\n  },\n  index: {\n    renderHeader: function(h, { column }) {\n      return column.label || '#';\n    },\n    renderCell: function(h, { $index, column }) {\n      let i = $index + 1;\n      const index = column.index;\n\n      if (typeof index === 'number') {\n        i = $index + index;\n      } else if (typeof index === 'function') {\n        i = index($index);\n      }\n\n      return <div>{ i }</div>;\n    },\n    sortable: false\n  },\n  expand: {\n    renderHeader: function(h, { column }) {\n      return column.label || '';\n    },\n    renderCell: function(h, { row, store, isExpanded }) {\n      const classes = ['el-table__expand-icon'];\n      if (isExpanded) {\n        classes.push('el-table__expand-icon--expanded');\n      }\n      const callback = function(e) {\n        e.stopPropagation();\n        store.toggleRowExpansion(row);\n      };\n      return (<div class={ classes }\n        on-click={callback}>\n        <i class='el-icon el-icon-arrow-right'></i>\n      </div>);\n    },\n    sortable: false,\n    resizable: false,\n    className: 'el-table__expand-column'\n  }\n};\n\nexport function defaultRenderCell(h, { row, column, $index }) {\n  const property = column.property;\n  const value = property && getPropByPath(row, property).v;\n  if (column && column.formatter) {\n    return column.formatter(row, column, value, $index);\n  }\n  return value;\n}\n\nexport function treeCellPrefix(h, { row, treeNode, store }) {\n  if (!treeNode) return null;\n  const ele = [];\n  const callback = function(e) {\n    e.stopPropagation();\n    store.loadOrToggle(row);\n  };\n  if (treeNode.indent) {\n    ele.push(<span class=\"el-table__indent\" style={{'padding-left': treeNode.indent + 'px'}}></span>);\n  }\n  if (typeof treeNode.expanded === 'boolean' && !treeNode.noLazyChildren) {\n    const expandClasses = ['el-table__expand-icon', treeNode.expanded ? 'el-table__expand-icon--expanded' : ''];\n    let iconClasses = ['el-icon-arrow-right'];\n    if (treeNode.loading) {\n      iconClasses = ['el-icon-loading'];\n    }\n    ele.push(<div class={ expandClasses }\n      on-click={ callback }>\n      <i class={ iconClasses }></i>\n    </div>);\n  } else {\n    ele.push(<span class=\"el-table__placeholder\"></span>);\n  }\n  return ele;\n}\n"
  },
  {
    "path": "packages/table/src/dropdown.js",
    "content": "import Vue from 'vue';\nvar dropdowns = [];\n\n!Vue.prototype.$isServer && document.addEventListener('click', function(event) {\n  dropdowns.forEach(function(dropdown) {\n    var target = event.target;\n    if (!dropdown || !dropdown.$el) return;\n    if (target === dropdown.$el || dropdown.$el.contains(target)) {\n      return;\n    }\n    dropdown.handleOutsideClick && dropdown.handleOutsideClick(event);\n  });\n});\n\nexport default {\n  open(instance) {\n    if (instance) {\n      dropdowns.push(instance);\n    }\n  },\n\n  close(instance) {\n    var index = dropdowns.indexOf(instance);\n    if (index !== -1) {\n      dropdowns.splice(instance, 1);\n    }\n  }\n};\n"
  },
  {
    "path": "packages/table/src/filter-panel.vue",
    "content": "<template>\n  <transition name=\"el-zoom-in-top\">\n    <div\n      class=\"el-table-filter\"\n      v-if=\"multiple\"\n      v-clickoutside=\"handleOutsideClick\"\n      v-show=\"showPopper\">\n      <div class=\"el-table-filter__content\">\n        <el-scrollbar wrap-class=\"el-table-filter__wrap\">\n          <el-checkbox-group class=\"el-table-filter__checkbox-group\" v-model=\"filteredValue\">\n            <el-checkbox\n              v-for=\"filter in filters\"\n              :key=\"filter.value\"\n              :label=\"filter.value\">{{ filter.text }}</el-checkbox>\n          </el-checkbox-group>\n        </el-scrollbar>\n      </div>\n      <div class=\"el-table-filter__bottom\">\n        <button @click=\"handleConfirm\"\n          :class=\"{ 'is-disabled': filteredValue.length === 0 }\"\n          :disabled=\"filteredValue.length === 0\">{{ t('el.table.confirmFilter') }}</button>\n        <button @click=\"handleReset\">{{ t('el.table.resetFilter') }}</button>\n      </div>\n    </div>\n    <div\n      class=\"el-table-filter\"\n      v-else\n      v-clickoutside=\"handleOutsideClick\"\n      v-show=\"showPopper\">\n      <ul class=\"el-table-filter__list\">\n        <li class=\"el-table-filter__list-item\"\n            :class=\"{ 'is-active': filterValue === undefined || filterValue === null }\"\n            @click=\"handleSelect(null)\">{{ t('el.table.clearFilter') }}</li>\n        <li class=\"el-table-filter__list-item\"\n            v-for=\"filter in filters\"\n            :label=\"filter.value\"\n            :key=\"filter.value\"\n            :class=\"{ 'is-active': isActive(filter) }\"\n            @click=\"handleSelect(filter.value)\" >{{ filter.text }}</li>\n      </ul>\n    </div>\n  </transition>\n</template>\n\n<script type=\"text/babel\">\n  import Popper from 'element-ui/src/utils/vue-popper';\n  import { PopupManager } from 'element-ui/src/utils/popup';\n  import Locale from 'element-ui/src/mixins/locale';\n  import Clickoutside from 'element-ui/src/utils/clickoutside';\n  import Dropdown from './dropdown';\n  import ElCheckbox from 'element-ui/packages/checkbox';\n  import ElCheckboxGroup from 'element-ui/packages/checkbox-group';\n  import ElScrollbar from 'element-ui/packages/scrollbar';\n\n  export default {\n    name: 'ElTableFilterPanel',\n\n    mixins: [Popper, Locale],\n\n    directives: {\n      Clickoutside\n    },\n\n    components: {\n      ElCheckbox,\n      ElCheckboxGroup,\n      ElScrollbar\n    },\n\n    props: {\n      placement: {\n        type: String,\n        default: 'bottom-end'\n      }\n    },\n\n    methods: {\n      isActive(filter) {\n        return filter.value === this.filterValue;\n      },\n\n      handleOutsideClick() {\n        setTimeout(() => {\n          this.showPopper = false;\n        }, 16);\n      },\n\n      handleConfirm() {\n        this.confirmFilter(this.filteredValue);\n        this.handleOutsideClick();\n      },\n\n      handleReset() {\n        this.filteredValue = [];\n        this.confirmFilter(this.filteredValue);\n        this.handleOutsideClick();\n      },\n\n      handleSelect(filterValue) {\n        this.filterValue = filterValue;\n\n        if ((typeof filterValue !== 'undefined') && (filterValue !== null)) {\n          this.confirmFilter(this.filteredValue);\n        } else {\n          this.confirmFilter([]);\n        }\n\n        this.handleOutsideClick();\n      },\n\n      confirmFilter(filteredValue) {\n        this.table.store.commit('filterChange', {\n          column: this.column,\n          values: filteredValue\n        });\n        this.table.store.updateAllSelected();\n      }\n    },\n\n    data() {\n      return {\n        table: null,\n        cell: null,\n        column: null\n      };\n    },\n\n    computed: {\n      filters() {\n        return this.column && this.column.filters;\n      },\n\n      filterValue: {\n        get() {\n          return (this.column.filteredValue || [])[0];\n        },\n        set(value) {\n          if (this.filteredValue) {\n            if ((typeof value !== 'undefined') && (value !== null)) {\n              this.filteredValue.splice(0, 1, value);\n            } else {\n              this.filteredValue.splice(0, 1);\n            }\n          }\n        }\n      },\n\n      filteredValue: {\n        get() {\n          if (this.column) {\n            return this.column.filteredValue || [];\n          }\n          return [];\n        },\n        set(value) {\n          if (this.column) {\n            this.column.filteredValue = value;\n          }\n        }\n      },\n\n      multiple() {\n        if (this.column) {\n          return this.column.filterMultiple;\n        }\n        return true;\n      }\n    },\n\n    mounted() {\n      this.popperElm = this.$el;\n      this.referenceElm = this.cell;\n      this.table.bodyWrapper.addEventListener('scroll', () => {\n        this.updatePopper();\n      });\n\n      this.$watch('showPopper', (value) => {\n        if (this.column) this.column.filterOpened = value;\n        if (value) {\n          Dropdown.open(this);\n        } else {\n          Dropdown.close(this);\n        }\n      });\n    },\n    watch: {\n      showPopper(val) {\n        if (val === true && parseInt(this.popperJS._popper.style.zIndex, 10) < PopupManager.zIndex) {\n          this.popperJS._popper.style.zIndex = PopupManager.nextZIndex();\n        }\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/table/src/layout-observer.js",
    "content": "export default {\n  created() {\n    this.tableLayout.addObserver(this);\n  },\n\n  destroyed() {\n    this.tableLayout.removeObserver(this);\n  },\n\n  computed: {\n    tableLayout() {\n      let layout = this.layout;\n      if (!layout && this.table) {\n        layout = this.table.layout;\n      }\n      if (!layout) {\n        throw new Error('Can not find table layout.');\n      }\n      return layout;\n    }\n  },\n\n  mounted() {\n    this.onColumnsChange(this.tableLayout);\n    this.onScrollableChange(this.tableLayout);\n  },\n\n  updated() {\n    if (this.__updated__) return;\n    this.onColumnsChange(this.tableLayout);\n    this.onScrollableChange(this.tableLayout);\n    this.__updated__ = true;\n  },\n\n  methods: {\n    onColumnsChange(layout) {\n      const cols = this.$el.querySelectorAll('colgroup > col');\n      if (!cols.length) return;\n      const flattenColumns = layout.getFlattenColumns();\n      const columnsMap = {};\n      flattenColumns.forEach((column) => {\n        columnsMap[column.id] = column;\n      });\n      for (let i = 0, j = cols.length; i < j; i++) {\n        const col = cols[i];\n        const name = col.getAttribute('name');\n        const column = columnsMap[name];\n        if (column) {\n          col.setAttribute('width', column.realWidth || column.width);\n        }\n      }\n    },\n\n    onScrollableChange(layout) {\n      const cols = this.$el.querySelectorAll('colgroup > col[name=gutter]');\n      for (let i = 0, j = cols.length; i < j; i++) {\n        const col = cols[i];\n        col.setAttribute('width', layout.scrollY ? layout.gutterWidth : '0');\n      }\n      const ths = this.$el.querySelectorAll('th.gutter');\n      for (let i = 0, j = ths.length; i < j; i++) {\n        const th = ths[i];\n        th.style.width = layout.scrollY ? layout.gutterWidth + 'px' : '0';\n        th.style.display = layout.scrollY ? '' : 'none';\n      }\n    }\n  }\n};\n"
  },
  {
    "path": "packages/table/src/store/current.js",
    "content": "import { arrayFind } from 'element-ui/src/utils/util';\nimport { getRowIdentity } from '../util';\n\nexport default {\n  data() {\n    return {\n      states: {\n        // 不可响应的，设置 currentRowKey 时，data 不一定存在，也许无法算出正确的 currentRow\n        // 把该值缓存一下，当用户点击修改 currentRow 时，把该值重置为 null\n        _currentRowKey: null,\n        currentRow: null\n      }\n    };\n  },\n\n  methods: {\n    setCurrentRowKey(key) {\n      this.assertRowKey();\n      this.states._currentRowKey = key;\n      this.setCurrentRowByKey(key);\n    },\n\n    restoreCurrentRowKey() {\n      this.states._currentRowKey = null;\n    },\n\n    setCurrentRowByKey(key) {\n      const { states } = this;\n      const { data = [], rowKey } = states;\n      let currentRow = null;\n      if (rowKey) {\n        currentRow = arrayFind(data, item => getRowIdentity(item, rowKey) === key);\n      }\n      states.currentRow = currentRow;\n    },\n\n    updateCurrentRow(currentRow) {\n      const { states, table } = this;\n      const oldCurrentRow = states.currentRow;\n      if (currentRow && currentRow !== oldCurrentRow) {\n        states.currentRow = currentRow;\n        table.$emit('current-change', currentRow, oldCurrentRow);\n        return;\n      }\n      if (!currentRow && oldCurrentRow) {\n        states.currentRow = null;\n        table.$emit('current-change', null, oldCurrentRow);\n      }\n    },\n\n    updateCurrentRowData() {\n      const { states, table } = this;\n      const { rowKey, _currentRowKey } = states;\n      // data 为 null 时，解构时的默认值会被忽略\n      const data = states.data || [];\n      const oldCurrentRow = states.currentRow;\n\n      // 当 currentRow 不在 data 中时尝试更新数据\n      if (data.indexOf(oldCurrentRow) === -1 && oldCurrentRow) {\n        if (rowKey) {\n          const currentRowKey = getRowIdentity(oldCurrentRow, rowKey);\n          this.setCurrentRowByKey(currentRowKey);\n        } else {\n          states.currentRow = null;\n        }\n        if (states.currentRow === null) {\n          table.$emit('current-change', null, oldCurrentRow);\n        }\n      } else if (_currentRowKey) {\n        // 把初始时下设置的 rowKey 转化成 rowData\n        this.setCurrentRowByKey(_currentRowKey);\n        this.restoreCurrentRowKey();\n      }\n    }\n  }\n};\n"
  },
  {
    "path": "packages/table/src/store/expand.js",
    "content": "import { toggleRowStatus, getKeysMap, getRowIdentity } from '../util';\n\nexport default {\n  data() {\n    return {\n      states: {\n        defaultExpandAll: false,\n        expandRows: []\n      }\n    };\n  },\n\n  methods: {\n    updateExpandRows() {\n      const { data = [], rowKey, defaultExpandAll, expandRows } = this.states;\n      if (defaultExpandAll) {\n        this.states.expandRows = data.slice();\n      } else if (rowKey) {\n        // TODO：这里的代码可以优化\n        const expandRowsMap = getKeysMap(expandRows, rowKey);\n        this.states.expandRows = data.reduce((prev, row) => {\n          const rowId = getRowIdentity(row, rowKey);\n          const rowInfo = expandRowsMap[rowId];\n          if (rowInfo) {\n            prev.push(row);\n          }\n          return prev;\n        }, []);\n      } else {\n        this.states.expandRows = [];\n      }\n    },\n\n    toggleRowExpansion(row, expanded) {\n      const changed = toggleRowStatus(this.states.expandRows, row, expanded);\n      if (changed) {\n        this.table.$emit('expand-change', row, this.states.expandRows.slice());\n        this.scheduleLayout();\n      }\n    },\n\n    setExpandRowKeys(rowKeys) {\n      this.assertRowKey();\n      // TODO：这里的代码可以优化\n      const { data, rowKey } = this.states;\n      const keysMap = getKeysMap(data, rowKey);\n      this.states.expandRows = rowKeys.reduce((prev, cur) => {\n        const info = keysMap[cur];\n        if (info) {\n          prev.push(info.row);\n        }\n        return prev;\n      }, []);\n    },\n\n    isRowExpanded(row) {\n      const { expandRows = [], rowKey } = this.states;\n      if (rowKey) {\n        const expandMap = getKeysMap(expandRows, rowKey);\n        return !!expandMap[getRowIdentity(row, rowKey)];\n      }\n      return expandRows.indexOf(row) !== -1;\n    }\n  }\n};\n"
  },
  {
    "path": "packages/table/src/store/helper.js",
    "content": "import Store from './index';\nimport debounce from 'throttle-debounce/debounce';\n\nexport function createStore(table, initialState = {}) {\n  if (!table) {\n    throw new Error('Table is required.');\n  }\n\n  const store = new Store();\n  store.table = table;\n  // fix https://github.com/ElemeFE/element/issues/14075\n  // related pr https://github.com/ElemeFE/element/pull/14146\n  store.toggleAllSelection = debounce(10, store._toggleAllSelection);\n  Object.keys(initialState).forEach(key => {\n    store.states[key] = initialState[key];\n  });\n  return store;\n}\n\nexport function mapStates(mapper) {\n  const res = {};\n  Object.keys(mapper).forEach(key => {\n    const value = mapper[key];\n    let fn;\n    if (typeof value === 'string') {\n      fn = function() {\n        return this.store.states[value];\n      };\n    } else if (typeof value === 'function') {\n      fn = function() {\n        return value.call(this, this.store.states);\n      };\n    } else {\n      console.error('invalid value type');\n    }\n    if (fn) {\n      res[key] = fn;\n    }\n  });\n  return res;\n};\n"
  },
  {
    "path": "packages/table/src/store/index.js",
    "content": "import Vue from 'vue';\nimport Watcher from './watcher';\nimport { arrayFind } from 'element-ui/src/utils/util';\n\nWatcher.prototype.mutations = {\n  setData(states, data) {\n    const dataInstanceChanged = states._data !== data;\n    states._data = data;\n\n    this.execQuery();\n    // 数据变化，更新部分数据。\n    // 没有使用 computed，而是手动更新部分数据 https://github.com/vuejs/vue/issues/6660#issuecomment-331417140\n    this.updateCurrentRowData();\n    this.updateExpandRows();\n    if (states.reserveSelection) {\n      this.assertRowKey();\n      this.updateSelectionByRowKey();\n    } else {\n      if (dataInstanceChanged) {\n        this.clearSelection();\n      } else {\n        this.cleanSelection();\n      }\n    }\n    this.updateAllSelected();\n\n    this.updateTableScrollY();\n  },\n\n  insertColumn(states, column, index, parent) {\n    let array = states._columns;\n    if (parent) {\n      array = parent.children;\n      if (!array) array = parent.children = [];\n    }\n\n    if (typeof index !== 'undefined') {\n      array.splice(index, 0, column);\n    } else {\n      array.push(column);\n    }\n\n    if (column.type === 'selection') {\n      states.selectable = column.selectable;\n      states.reserveSelection = column.reserveSelection;\n    }\n\n    if (this.table.$ready) {\n      this.updateColumns(); // hack for dynamics insert column\n      this.scheduleLayout();\n    }\n  },\n\n  removeColumn(states, column, parent) {\n    let array = states._columns;\n    if (parent) {\n      array = parent.children;\n      if (!array) array = parent.children = [];\n    }\n    if (array) {\n      array.splice(array.indexOf(column), 1);\n    }\n\n    if (this.table.$ready) {\n      this.updateColumns(); // hack for dynamics remove column\n      this.scheduleLayout();\n    }\n  },\n\n  sort(states, options) {\n    const { prop, order, init } = options;\n    if (prop) {\n      const column = arrayFind(states.columns, column => column.property === prop);\n      if (column) {\n        column.order = order;\n        this.updateSort(column, prop, order);\n        this.commit('changeSortCondition', { init });\n      }\n    }\n  },\n\n  changeSortCondition(states, options) {\n    // 修复 pr https://github.com/ElemeFE/element/pull/15012 导致的 bug\n    const { sortingColumn: column, sortProp: prop, sortOrder: order } = states;\n    if (order === null) {\n      states.sortingColumn = null;\n      states.sortProp = null;\n    }\n    const ingore = { filter: true };\n    this.execQuery(ingore);\n\n    if (!options || !(options.silent || options.init)) {\n      this.table.$emit('sort-change', {\n        column,\n        prop,\n        order\n      });\n    }\n\n    this.updateTableScrollY();\n  },\n\n  filterChange(states, options) {\n    let { column, values, silent } = options;\n    const newFilters = this.updateFilters(column, values);\n\n    this.execQuery();\n\n    if (!silent) {\n      this.table.$emit('filter-change', newFilters);\n    }\n\n    this.updateTableScrollY();\n  },\n\n  toggleAllSelection() {\n    this.toggleAllSelection();\n  },\n\n  rowSelectedChanged(states, row) {\n    this.toggleRowSelection(row);\n    this.updateAllSelected();\n  },\n\n  setHoverRow(states, row) {\n    states.hoverRow = row;\n  },\n\n  setCurrentRow(states, row) {\n    this.updateCurrentRow(row);\n  }\n};\n\nWatcher.prototype.commit = function(name, ...args) {\n  const mutations = this.mutations;\n  if (mutations[name]) {\n    mutations[name].apply(this, [this.states].concat(args));\n  } else {\n    throw new Error(`Action not found: ${name}`);\n  }\n};\n\nWatcher.prototype.updateTableScrollY = function() {\n  Vue.nextTick(this.table.updateScrollY);\n};\n\nexport default Watcher;\n"
  },
  {
    "path": "packages/table/src/store/tree.js",
    "content": "import { walkTreeNode, getRowIdentity } from '../util';\n\nexport default {\n  data() {\n    return {\n      states: {\n        // defaultExpandAll 存在于 expand.js 中，这里不重复添加\n        // 在展开行中，expandRowKeys 会被转化成 expandRows，expandRowKeys 这个属性只是记录了 TreeTable 行的展开\n        // TODO: 拆分为独立的 TreeTable，统一用法\n        expandRowKeys: [],\n        treeData: {},\n        indent: 16,\n        lazy: false,\n        lazyTreeNodeMap: {},\n        lazyColumnIdentifier: 'hasChildren',\n        childrenColumnName: 'children'\n      }\n    };\n  },\n\n  computed: {\n    // 嵌入型的数据，watch 无法是检测到变化 https://github.com/ElemeFE/element/issues/14998\n    // TODO: 使用 computed 解决该问题，是否会造成性能问题？\n    // @return { id: { level, children } }\n    normalizedData() {\n      if (!this.states.rowKey) return {};\n      const data = this.states.data || [];\n      return this.normalize(data);\n    },\n    // @return { id: { children } }\n    // 针对懒加载的情形，不处理嵌套数据\n    normalizedLazyNode() {\n      const { rowKey, lazyTreeNodeMap, lazyColumnIdentifier } = this.states;\n      const keys = Object.keys(lazyTreeNodeMap);\n      const res = {};\n      if (!keys.length) return res;\n      keys.forEach(key => {\n        if (lazyTreeNodeMap[key].length) {\n          const item = { children: [] };\n          lazyTreeNodeMap[key].forEach(row => {\n            const currentRowKey = getRowIdentity(row, rowKey);\n            item.children.push(currentRowKey);\n            if (row[lazyColumnIdentifier] && !res[currentRowKey]) {\n              res[currentRowKey] = { children: [] };\n            }\n          });\n          res[key] = item;\n        }\n      });\n      return res;\n    }\n  },\n\n  watch: {\n    normalizedData: 'updateTreeData',\n    normalizedLazyNode: 'updateTreeData'\n  },\n\n  methods: {\n    normalize(data) {\n      const {\n        childrenColumnName,\n        lazyColumnIdentifier,\n        rowKey,\n        lazy\n      } = this.states;\n      const res = {};\n      walkTreeNode(\n        data,\n        (parent, children, level) => {\n          const parentId = getRowIdentity(parent, rowKey);\n          if (Array.isArray(children)) {\n            res[parentId] = {\n              children: children.map(row => getRowIdentity(row, rowKey)),\n              level\n            };\n          } else if (lazy) {\n            // 当 children 不存在且 lazy 为 true，该节点即为懒加载的节点\n            res[parentId] = {\n              children: [],\n              lazy: true,\n              level\n            };\n          }\n        },\n        childrenColumnName,\n        lazyColumnIdentifier\n      );\n      return res;\n    },\n\n    updateTreeData() {\n      const nested = this.normalizedData;\n      const normalizedLazyNode = this.normalizedLazyNode;\n      const keys = Object.keys(nested);\n      const newTreeData = {};\n      if (keys.length) {\n        const {\n          treeData: oldTreeData,\n          defaultExpandAll,\n          expandRowKeys,\n          lazy\n        } = this.states;\n        const rootLazyRowKeys = [];\n        const getExpanded = (oldValue, key) => {\n          const included =\n            defaultExpandAll ||\n            (expandRowKeys && expandRowKeys.indexOf(key) !== -1);\n          return !!((oldValue && oldValue.expanded) || included);\n        };\n        // 合并 expanded 与 display，确保数据刷新后，状态不变\n        keys.forEach(key => {\n          const oldValue = oldTreeData[key];\n          const newValue = { ...nested[key] };\n          newValue.expanded = getExpanded(oldValue, key);\n          if (newValue.lazy) {\n            const { loaded = false, loading = false } = oldValue || {};\n            newValue.loaded = !!loaded;\n            newValue.loading = !!loading;\n            rootLazyRowKeys.push(key);\n          }\n          newTreeData[key] = newValue;\n        });\n        // 根据懒加载数据更新 treeData\n        const lazyKeys = Object.keys(normalizedLazyNode);\n        if (lazy && lazyKeys.length && rootLazyRowKeys.length) {\n          lazyKeys.forEach(key => {\n            const oldValue = oldTreeData[key];\n            const lazyNodeChildren = normalizedLazyNode[key].children;\n            if (rootLazyRowKeys.indexOf(key) !== -1) {\n              // 懒加载的 root 节点，更新一下原有的数据，原来的 children 一定是空数组\n              if (newTreeData[key].children.length !== 0) {\n                throw new Error('[ElTable]children must be an empty array.');\n              }\n              newTreeData[key].children = lazyNodeChildren;\n            } else {\n              const { loaded = false, loading = false } = oldValue || {};\n              newTreeData[key] = {\n                lazy: true,\n                loaded: !!loaded,\n                loading: !!loading,\n                expanded: getExpanded(oldValue, key),\n                children: lazyNodeChildren,\n                level: ''\n              };\n            }\n          });\n        }\n      }\n      this.states.treeData = newTreeData;\n      this.updateTableScrollY();\n    },\n\n    updateTreeExpandKeys(value) {\n      this.states.expandRowKeys = value;\n      this.updateTreeData();\n    },\n\n    toggleTreeExpansion(row, expanded) {\n      this.assertRowKey();\n\n      const { rowKey, treeData } = this.states;\n      const id = getRowIdentity(row, rowKey);\n      const data = id && treeData[id];\n      if (id && data && ('expanded' in data)) {\n        const oldExpanded = data.expanded;\n        expanded = typeof expanded === 'undefined' ? !data.expanded : expanded;\n        treeData[id].expanded = expanded;\n        if (oldExpanded !== expanded) {\n          this.table.$emit('expand-change', row, expanded);\n        }\n        this.updateTableScrollY();\n      }\n    },\n\n    loadOrToggle(row) {\n      this.assertRowKey();\n      const { lazy, treeData, rowKey } = this.states;\n      const id = getRowIdentity(row, rowKey);\n      const data = treeData[id];\n      if (lazy && data && 'loaded' in data && !data.loaded) {\n        this.loadData(row, id, data);\n      } else {\n        this.toggleTreeExpansion(row);\n      }\n    },\n\n    loadData(row, key, treeNode) {\n      const { load } = this.table;\n      const { treeData: rawTreeData } = this.states;\n      if (load && !rawTreeData[key].loaded) {\n        rawTreeData[key].loading = true;\n        load(row, treeNode, data => {\n          if (!Array.isArray(data)) {\n            throw new Error('[ElTable] data must be an array');\n          }\n          const { lazyTreeNodeMap, treeData } = this.states;\n          treeData[key].loading = false;\n          treeData[key].loaded = true;\n          treeData[key].expanded = true;\n          if (data.length) {\n            this.$set(lazyTreeNodeMap, key, data);\n          }\n          this.table.$emit('expand-change', row, true);\n        });\n      }\n    }\n  }\n};\n"
  },
  {
    "path": "packages/table/src/store/watcher.js",
    "content": "import Vue from 'vue';\nimport merge from 'element-ui/src/utils/merge';\nimport { getKeysMap, getRowIdentity, getColumnById, getColumnByKey, orderBy, toggleRowStatus } from '../util';\nimport expand from './expand';\nimport current from './current';\nimport tree from './tree';\n\nconst sortData = (data, states) => {\n  const sortingColumn = states.sortingColumn;\n  if (!sortingColumn || typeof sortingColumn.sortable === 'string') {\n    return data;\n  }\n  return orderBy(data, states.sortProp, states.sortOrder, sortingColumn.sortMethod, sortingColumn.sortBy);\n};\n\nconst doFlattenColumns = (columns) => {\n  const result = [];\n  columns.forEach((column) => {\n    if (column.children) {\n      result.push.apply(result, doFlattenColumns(column.children));\n    } else {\n      result.push(column);\n    }\n  });\n  return result;\n};\n\nexport default Vue.extend({\n  data() {\n    return {\n      states: {\n        // 3.0 版本后要求必须设置该属性\n        rowKey: null,\n\n        // 渲染的数据来源，是对 table 中的 data 过滤排序后的结果\n        data: [],\n\n        // 是否包含固定列\n        isComplex: false,\n\n        // 列\n        _columns: [], // 不可响应的\n        originColumns: [],\n        columns: [],\n        fixedColumns: [],\n        rightFixedColumns: [],\n        leafColumns: [],\n        fixedLeafColumns: [],\n        rightFixedLeafColumns: [],\n        leafColumnsLength: 0,\n        fixedLeafColumnsLength: 0,\n        rightFixedLeafColumnsLength: 0,\n\n        // 选择\n        isAllSelected: false,\n        selection: [],\n        reserveSelection: false,\n        selectOnIndeterminate: false,\n        selectable: null,\n\n        // 过滤\n        filters: {}, // 不可响应的\n        filteredData: null,\n\n        // 排序\n        sortingColumn: null,\n        sortProp: null,\n        sortOrder: null,\n\n        hoverRow: null\n      }\n    };\n  },\n\n  mixins: [expand, current, tree],\n\n  methods: {\n    // 检查 rowKey 是否存在\n    assertRowKey() {\n      const rowKey = this.states.rowKey;\n      if (!rowKey) throw new Error('[ElTable] prop row-key is required');\n    },\n\n    // 更新列\n    updateColumns() {\n      const states = this.states;\n      const _columns = states._columns || [];\n      states.fixedColumns = _columns.filter((column) => column.fixed === true || column.fixed === 'left');\n      states.rightFixedColumns = _columns.filter((column) => column.fixed === 'right');\n\n      if (states.fixedColumns.length > 0 && _columns[0] && _columns[0].type === 'selection' && !_columns[0].fixed) {\n        _columns[0].fixed = true;\n        states.fixedColumns.unshift(_columns[0]);\n      }\n\n      const notFixedColumns = _columns.filter(column => !column.fixed);\n      states.originColumns = [].concat(states.fixedColumns).concat(notFixedColumns).concat(states.rightFixedColumns);\n\n      const leafColumns = doFlattenColumns(notFixedColumns);\n      const fixedLeafColumns = doFlattenColumns(states.fixedColumns);\n      const rightFixedLeafColumns = doFlattenColumns(states.rightFixedColumns);\n\n      states.leafColumnsLength = leafColumns.length;\n      states.fixedLeafColumnsLength = fixedLeafColumns.length;\n      states.rightFixedLeafColumnsLength = rightFixedLeafColumns.length;\n\n      states.columns = [].concat(fixedLeafColumns).concat(leafColumns).concat(rightFixedLeafColumns);\n      states.isComplex = states.fixedColumns.length > 0 || states.rightFixedColumns.length > 0;\n    },\n\n    // 更新 DOM\n    scheduleLayout(needUpdateColumns) {\n      if (needUpdateColumns) {\n        this.updateColumns();\n      }\n      this.table.debouncedUpdateLayout();\n    },\n\n    // 选择\n    isSelected(row) {\n      const { selection = [] } = this.states;\n      return selection.indexOf(row) > -1;\n    },\n\n    clearSelection() {\n      const states = this.states;\n      states.isAllSelected = false;\n      const oldSelection = states.selection;\n      if (oldSelection.length) {\n        states.selection = [];\n        this.table.$emit('selection-change', []);\n      }\n    },\n\n    cleanSelection() {\n      const states = this.states;\n      const { data, rowKey, selection } = states;\n      let deleted;\n      if (rowKey) {\n        deleted = [];\n        const selectedMap = getKeysMap(selection, rowKey);\n        const dataMap = getKeysMap(data, rowKey);\n        for (let key in selectedMap) {\n          if (selectedMap.hasOwnProperty(key) && !dataMap[key]) {\n            deleted.push(selectedMap[key].row);\n          }\n        }\n      } else {\n        deleted = selection.filter(item => data.indexOf(item) === -1);\n      }\n      if (deleted.length) {\n        const newSelection = selection.filter(item => deleted.indexOf(item) === -1);\n        states.selection = newSelection;\n        this.table.$emit('selection-change', newSelection.slice());\n      }\n    },\n\n    toggleRowSelection(row, selected, emitChange = true) {\n      const changed = toggleRowStatus(this.states.selection, row, selected);\n      if (changed) {\n        const newSelection = (this.states.selection || []).slice();\n        // 调用 API 修改选中值，不触发 select 事件\n        if (emitChange) {\n          this.table.$emit('select', newSelection, row);\n        }\n        this.table.$emit('selection-change', newSelection);\n      }\n    },\n\n    _toggleAllSelection() {\n      const states = this.states;\n      const { data = [], selection } = states;\n      // when only some rows are selected (but not all), select or deselect all of them\n      // depending on the value of selectOnIndeterminate\n      const value = states.selectOnIndeterminate\n        ? !states.isAllSelected\n        : !(states.isAllSelected || selection.length);\n      states.isAllSelected = value;\n\n      let selectionChanged = false;\n      data.forEach((row, index) => {\n        if (states.selectable) {\n          if (states.selectable.call(null, row, index) && toggleRowStatus(selection, row, value)) {\n            selectionChanged = true;\n          }\n        } else {\n          if (toggleRowStatus(selection, row, value)) {\n            selectionChanged = true;\n          }\n        }\n      });\n\n      if (selectionChanged) {\n        this.table.$emit('selection-change', selection ? selection.slice() : []);\n      }\n      this.table.$emit('select-all', selection);\n    },\n\n    updateSelectionByRowKey() {\n      const states = this.states;\n      const { selection, rowKey, data } = states;\n      const selectedMap = getKeysMap(selection, rowKey);\n      data.forEach(row => {\n        const rowId = getRowIdentity(row, rowKey);\n        const rowInfo = selectedMap[rowId];\n        if (rowInfo) {\n          selection[rowInfo.index] = row;\n        }\n      });\n    },\n\n    updateAllSelected() {\n      const states = this.states;\n      const { selection, rowKey, selectable } = states;\n      // data 为 null 时，解构时的默认值会被忽略\n      const data = states.data || [];\n      if (data.length === 0) {\n        states.isAllSelected = false;\n        return;\n      }\n\n      let selectedMap;\n      if (rowKey) {\n        selectedMap = getKeysMap(selection, rowKey);\n      }\n      const isSelected = function(row) {\n        if (selectedMap) {\n          return !!selectedMap[getRowIdentity(row, rowKey)];\n        } else {\n          return selection.indexOf(row) !== -1;\n        }\n      };\n      let isAllSelected = true;\n      let selectedCount = 0;\n      for (let i = 0, j = data.length; i < j; i++) {\n        const item = data[i];\n        const isRowSelectable = selectable && selectable.call(null, item, i);\n        if (!isSelected(item)) {\n          if (!selectable || isRowSelectable) {\n            isAllSelected = false;\n            break;\n          }\n        } else {\n          selectedCount++;\n        }\n      }\n\n      if (selectedCount === 0) isAllSelected = false;\n      states.isAllSelected = isAllSelected;\n    },\n\n    // 过滤与排序\n    updateFilters(columns, values) {\n      if (!Array.isArray(columns)) {\n        columns = [columns];\n      }\n      const states = this.states;\n      const filters = {};\n      columns.forEach(col => {\n        states.filters[col.id] = values;\n        filters[col.columnKey || col.id] = values;\n      });\n\n      return filters;\n    },\n\n    updateSort(column, prop, order) {\n      if (this.states.sortingColumn && this.states.sortingColumn !== column) {\n        this.states.sortingColumn.order = null;\n      }\n      this.states.sortingColumn = column;\n      this.states.sortProp = prop;\n      this.states.sortOrder = order;\n    },\n\n    execFilter() {\n      const states = this.states;\n      const { _data, filters } = states;\n      let data = _data;\n\n      Object.keys(filters).forEach((columnId) => {\n        const values = states.filters[columnId];\n        if (!values || values.length === 0) return;\n        const column = getColumnById(this.states, columnId);\n        if (column && column.filterMethod) {\n          data = data.filter((row) => {\n            return values.some(value => column.filterMethod.call(null, value, row, column));\n          });\n        }\n      });\n\n      states.filteredData = data;\n    },\n\n    execSort() {\n      const states = this.states;\n      states.data = sortData(states.filteredData, states);\n    },\n\n    // 根据 filters 与 sort 去过滤 data\n    execQuery(ignore) {\n      if (!(ignore && ignore.filter)) {\n        this.execFilter();\n      }\n      this.execSort();\n    },\n\n    clearFilter(columnKeys) {\n      const states = this.states;\n      const { tableHeader, fixedTableHeader, rightFixedTableHeader } = this.table.$refs;\n\n      let panels = {};\n      if (tableHeader) panels = merge(panels, tableHeader.filterPanels);\n      if (fixedTableHeader) panels = merge(panels, fixedTableHeader.filterPanels);\n      if (rightFixedTableHeader) panels = merge(panels, rightFixedTableHeader.filterPanels);\n\n      const keys = Object.keys(panels);\n      if (!keys.length) return;\n\n      if (typeof columnKeys === 'string') {\n        columnKeys = [columnKeys];\n      }\n\n      if (Array.isArray(columnKeys)) {\n        const columns = columnKeys.map(key => getColumnByKey(states, key));\n        keys.forEach(key => {\n          const column = columns.find(col => col.id === key);\n          if (column) {\n            // TODO: 优化这里的代码\n            panels[key].filteredValue = [];\n          }\n        });\n        this.commit('filterChange', {\n          column: columns,\n          values: [],\n          silent: true,\n          multi: true\n        });\n      } else {\n        keys.forEach(key => {\n          // TODO: 优化这里的代码\n          panels[key].filteredValue = [];\n        });\n\n        states.filters = {};\n        this.commit('filterChange', {\n          column: {},\n          values: [],\n          silent: true\n        });\n      }\n    },\n\n    clearSort() {\n      const states = this.states;\n      if (!states.sortingColumn) return;\n\n      this.updateSort(null, null, null);\n      this.commit('changeSortCondition', {\n        silent: true\n      });\n    },\n\n    // 适配层，expand-row-keys 在 Expand 与 TreeTable 中都有使用\n    setExpandRowKeysAdapter(val) {\n      // 这里会触发额外的计算，但为了兼容性，暂时这么做\n      this.setExpandRowKeys(val);\n      this.updateTreeExpandKeys(val);\n    },\n\n    // 展开行与 TreeTable 都要使用\n    toggleRowExpansionAdapter(row, expanded) {\n      const hasExpandColumn = this.states.columns.some(({ type }) => type === 'expand');\n      if (hasExpandColumn) {\n        this.toggleRowExpansion(row, expanded);\n      } else {\n        this.toggleTreeExpansion(row, expanded);\n      }\n    }\n  }\n});\n"
  },
  {
    "path": "packages/table/src/table-body.js",
    "content": "import { arrayFindIndex } from 'element-ui/src/utils/util';\nimport { getCell, getColumnByCell, getRowIdentity, objectEquals } from './util';\nimport { getStyle, hasClass, removeClass, addClass } from 'element-ui/src/utils/dom';\nimport ElCheckbox from 'element-ui/packages/checkbox';\nimport ElTooltip from 'element-ui/packages/tooltip';\nimport debounce from 'throttle-debounce/debounce';\nimport LayoutObserver from './layout-observer';\nimport { mapStates } from './store/helper';\nimport TableRow from './table-row.js';\n\nexport default {\n  name: 'ElTableBody',\n\n  mixins: [LayoutObserver],\n\n  components: {\n    ElCheckbox,\n    ElTooltip,\n    TableRow\n  },\n\n  props: {\n    store: {\n      required: true\n    },\n    stripe: Boolean,\n    context: {},\n    rowClassName: [String, Function],\n    rowStyle: [Object, Function],\n    fixed: String,\n    highlight: Boolean\n  },\n\n  render(h) {\n    const data = this.data || [];\n    return (\n      <table\n        class=\"el-table__body\"\n        cellspacing=\"0\"\n        cellpadding=\"0\"\n        border=\"0\">\n        <colgroup>\n          {\n            this.columns.map(column => <col name={column.id} key={column.id} />)\n          }\n        </colgroup>\n        <tbody>\n          {\n            data.reduce((acc, row) => {\n              return acc.concat(this.wrappedRowRender(row, acc.length));\n            }, [])\n          }\n          <el-tooltip effect={this.table.tooltipEffect} placement=\"top\" ref=\"tooltip\" content={this.tooltipContent}></el-tooltip>\n        </tbody>\n      </table>\n    );\n  },\n\n  computed: {\n    table() {\n      return this.$parent;\n    },\n\n    ...mapStates({\n      data: 'data',\n      columns: 'columns',\n      treeIndent: 'indent',\n      leftFixedLeafCount: 'fixedLeafColumnsLength',\n      rightFixedLeafCount: 'rightFixedLeafColumnsLength',\n      columnsCount: states => states.columns.length,\n      leftFixedCount: states => states.fixedColumns.length,\n      rightFixedCount: states => states.rightFixedColumns.length,\n      hasExpandColumn: states => states.columns.some(({ type }) => type === 'expand')\n    }),\n\n    columnsHidden() {\n      return this.columns.map((column, index) => this.isColumnHidden(index));\n    },\n\n    firstDefaultColumnIndex() {\n      return arrayFindIndex(this.columns, ({ type }) => type === 'default');\n    }\n  },\n\n  watch: {\n    // don't trigger getter of currentRow in getCellClass. see https://jsfiddle.net/oe2b4hqt/\n    // update DOM manually. see https://github.com/ElemeFE/element/pull/13954/files#diff-9b450c00d0a9dec0ffad5a3176972e40\n    'store.states.hoverRow'(newVal, oldVal) {\n      if (!this.store.states.isComplex || this.$isServer) return;\n      let raf = window.requestAnimationFrame;\n      if (!raf) {\n        raf = (fn) => setTimeout(fn, 16);\n      }\n      raf(() => {\n        const rows = this.$el.querySelectorAll('.el-table__row');\n        const oldRow = rows[oldVal];\n        const newRow = rows[newVal];\n        if (oldRow) {\n          removeClass(oldRow, 'hover-row');\n        }\n        if (newRow) {\n          addClass(newRow, 'hover-row');\n        }\n      });\n    }\n  },\n\n  data() {\n    return {\n      tooltipContent: ''\n    };\n  },\n\n  created() {\n    this.activateTooltip = debounce(50, tooltip => tooltip.handleShowPopper());\n  },\n\n  methods: {\n    getKeyOfRow(row, index) {\n      const rowKey = this.table.rowKey;\n      if (rowKey) {\n        return getRowIdentity(row, rowKey);\n      }\n      return index;\n    },\n\n    isColumnHidden(index) {\n      if (this.fixed === true || this.fixed === 'left') {\n        return index >= this.leftFixedLeafCount;\n      } else if (this.fixed === 'right') {\n        return index < this.columnsCount - this.rightFixedLeafCount;\n      } else {\n        return (index < this.leftFixedLeafCount) || (index >= this.columnsCount - this.rightFixedLeafCount);\n      }\n    },\n\n    getSpan(row, column, rowIndex, columnIndex) {\n      let rowspan = 1;\n      let colspan = 1;\n      const fn = this.table.spanMethod;\n      if (typeof fn === 'function') {\n        const result = fn({\n          row,\n          column,\n          rowIndex,\n          columnIndex\n        });\n        if (Array.isArray(result)) {\n          rowspan = result[0];\n          colspan = result[1];\n        } else if (typeof result === 'object') {\n          rowspan = result.rowspan;\n          colspan = result.colspan;\n        }\n      }\n      return { rowspan, colspan };\n    },\n\n    getRowStyle(row, rowIndex) {\n      const rowStyle = this.table.rowStyle;\n      if (typeof rowStyle === 'function') {\n        return rowStyle.call(null, {\n          row,\n          rowIndex\n        });\n      }\n      return rowStyle || null;\n    },\n\n    getRowClass(row, rowIndex) {\n      let selection = this.store.states.selection;\n      const classes = ['el-table__row'];\n      if (this.table.highlightCurrentRow && row === this.store.states.currentRow) {\n        classes.push('current-row');\n      }\n\n      if (this.table.highlightSelectionRow) {\n        for (let i = 0; i < selection.length; i++) {\n          if (objectEquals(row, selection[i])) {\n            classes.push('selection-row');\n          }\n        };\n      }\n\n      if (this.stripe && rowIndex % 2 === 1) {\n        classes.push('el-table__row--striped');\n      }\n      const rowClassName = this.table.rowClassName;\n      if (typeof rowClassName === 'string') {\n        classes.push(rowClassName);\n      } else if (typeof rowClassName === 'function') {\n        classes.push(rowClassName.call(null, {\n          row,\n          rowIndex\n        }));\n      }\n\n      if (this.store.states.expandRows.indexOf(row) > -1) {\n        classes.push('expanded');\n      }\n\n      return classes;\n    },\n\n    getCellStyle(rowIndex, columnIndex, row, column) {\n      const cellStyle = this.table.cellStyle;\n      if (typeof cellStyle === 'function') {\n        return cellStyle.call(null, {\n          rowIndex,\n          columnIndex,\n          row,\n          column\n        });\n      }\n      return cellStyle;\n    },\n\n    getCellClass(rowIndex, columnIndex, row, column) {\n      const classes = [column.id, column.align, column.className];\n\n      if (this.isColumnHidden(columnIndex)) {\n        classes.push('is-hidden');\n      }\n\n      const cellClassName = this.table.cellClassName;\n      if (typeof cellClassName === 'string') {\n        classes.push(cellClassName);\n      } else if (typeof cellClassName === 'function') {\n        classes.push(cellClassName.call(null, {\n          rowIndex,\n          columnIndex,\n          row,\n          column\n        }));\n      }\n\n      classes.push('el-table__cell');\n\n      return classes.join(' ');\n    },\n\n    getColspanRealWidth(columns, colspan, index) {\n      if (colspan < 1) {\n        return columns[index].realWidth;\n      }\n      const widthArr = columns.map(({ realWidth }) => realWidth).slice(index, index + colspan);\n      return widthArr.reduce((acc, width) => acc + width, -1);\n    },\n\n    handleCellMouseEnter(event, row) {\n      const table = this.table;\n      const cell = getCell(event);\n\n      if (cell) {\n        const column = getColumnByCell(table, cell);\n        const hoverState = table.hoverState = { cell, column, row };\n        table.$emit('cell-mouse-enter', hoverState.row, hoverState.column, hoverState.cell, event);\n      }\n\n      // 判断是否text-overflow, 如果是就显示tooltip\n      const cellChild = event.target.querySelector('.cell');\n      if (!(hasClass(cellChild, 'el-tooltip') && cellChild.childNodes.length)) {\n        return;\n      }\n      // use range width instead of scrollWidth to determine whether the text is overflowing\n      // to address a potential FireFox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1074543#c3\n      const range = document.createRange();\n      range.setStart(cellChild, 0);\n      range.setEnd(cellChild, cellChild.childNodes.length);\n      const rangeWidth = range.getBoundingClientRect().width;\n      const padding = (parseInt(getStyle(cellChild, 'paddingLeft'), 10) || 0) +\n        (parseInt(getStyle(cellChild, 'paddingRight'), 10) || 0);\n      if ((rangeWidth + padding > cellChild.offsetWidth || cellChild.scrollWidth > cellChild.offsetWidth) && this.$refs.tooltip) {\n        const tooltip = this.$refs.tooltip;\n        // TODO 会引起整个 Table 的重新渲染，需要优化\n        this.tooltipContent = cell.innerText || cell.textContent;\n        tooltip.referenceElm = cell;\n        tooltip.$refs.popper && (tooltip.$refs.popper.style.display = 'none');\n        tooltip.doDestroy();\n        tooltip.setExpectedState(true);\n        this.activateTooltip(tooltip);\n      }\n    },\n\n    handleCellMouseLeave(event) {\n      const tooltip = this.$refs.tooltip;\n      if (tooltip) {\n        tooltip.setExpectedState(false);\n        tooltip.handleClosePopper();\n      }\n      const cell = getCell(event);\n      if (!cell) return;\n\n      const oldHoverState = this.table.hoverState || {};\n      this.table.$emit('cell-mouse-leave', oldHoverState.row, oldHoverState.column, oldHoverState.cell, event);\n    },\n\n    handleMouseEnter: debounce(30, function(index) {\n      this.store.commit('setHoverRow', index);\n    }),\n\n    handleMouseLeave: debounce(30, function() {\n      this.store.commit('setHoverRow', null);\n    }),\n\n    handleContextMenu(event, row) {\n      this.handleEvent(event, row, 'contextmenu');\n    },\n\n    handleDoubleClick(event, row) {\n      this.handleEvent(event, row, 'dblclick');\n    },\n\n    handleClick(event, row) {\n      this.store.commit('setCurrentRow', row);\n      this.handleEvent(event, row, 'click');\n    },\n\n    handleEvent(event, row, name) {\n      const table = this.table;\n      const cell = getCell(event);\n      let column;\n      if (cell) {\n        column = getColumnByCell(table, cell);\n        if (column) {\n          table.$emit(`cell-${name}`, row, column, cell, event);\n        }\n      }\n      table.$emit(`row-${name}`, row, column, event);\n    },\n\n    rowRender(row, $index, treeRowData) {\n      const { treeIndent, columns, firstDefaultColumnIndex } = this;\n      const rowClasses = this.getRowClass(row, $index);\n      let display = true;\n      if (treeRowData) {\n        rowClasses.push('el-table__row--level-' + treeRowData.level);\n        display = treeRowData.display;\n      }\n      // 指令 v-show 会覆盖 row-style 中 display\n      // 使用 :style 代替 v-show https://github.com/ElemeFE/element/issues/16995\n      let displayStyle = display ? null : {\n        display: 'none'\n      };\n      return (\n        <TableRow\n          style={[displayStyle, this.getRowStyle(row, $index)]}\n          class={rowClasses}\n          key={this.getKeyOfRow(row, $index)}\n          nativeOn-dblclick={($event) => this.handleDoubleClick($event, row)}\n          nativeOn-click={($event) => this.handleClick($event, row)}\n          nativeOn-contextmenu={($event) => this.handleContextMenu($event, row)}\n          nativeOn-mouseenter={_ => this.handleMouseEnter($index)}\n          nativeOn-mouseleave={this.handleMouseLeave}\n          columns={columns}\n          row={row}\n          index={$index}\n          store={this.store}\n          context={this.context || this.table.$vnode.context}\n          firstDefaultColumnIndex={firstDefaultColumnIndex}\n          treeRowData={treeRowData}\n          treeIndent={treeIndent}\n          columnsHidden={this.columnsHidden}\n          getSpan={this.getSpan}\n          getColspanRealWidth={this.getColspanRealWidth}\n          getCellStyle={this.getCellStyle}\n          getCellClass={this.getCellClass}\n          handleCellMouseEnter={this.handleCellMouseEnter}\n          handleCellMouseLeave={this.handleCellMouseLeave}\n          isSelected={this.store.isSelected(row)}\n          isExpanded={this.store.states.expandRows.indexOf(row) > -1}\n          fixed={this.fixed}\n        >\n        </TableRow>\n      );\n    },\n\n    wrappedRowRender(row, $index) {\n      const store = this.store;\n      const { isRowExpanded, assertRowKey } = store;\n      const { treeData, lazyTreeNodeMap, childrenColumnName, rowKey } = store.states;\n      if (this.hasExpandColumn && isRowExpanded(row)) {\n        const renderExpanded = this.table.renderExpanded;\n        const tr = this.rowRender(row, $index);\n        if (!renderExpanded) {\n          console.error('[Element Error]renderExpanded is required.');\n          return tr;\n        }\n        // 使用二维数组，避免修改 $index\n        return [[\n          tr,\n          <tr key={'expanded-row__' + tr.key}>\n            <td colspan={ this.columnsCount } class=\"el-table__cell el-table__expanded-cell\">\n              { renderExpanded(this.$createElement, { row, $index, store: this.store }) }\n            </td>\n          </tr>]];\n      } else if (Object.keys(treeData).length) {\n        assertRowKey();\n        // TreeTable 时，rowKey 必须由用户设定，不使用 getKeyOfRow 计算\n        // 在调用 rowRender 函数时，仍然会计算 rowKey，不太好的操作\n        const key = getRowIdentity(row, rowKey);\n        let cur = treeData[key];\n        let treeRowData = null;\n        if (cur) {\n          treeRowData = {\n            expanded: cur.expanded,\n            level: cur.level,\n            display: true\n          };\n          if (typeof cur.lazy === 'boolean') {\n            if (typeof cur.loaded === 'boolean' && cur.loaded) {\n              treeRowData.noLazyChildren = !(cur.children && cur.children.length);\n            }\n            treeRowData.loading = cur.loading;\n          }\n        }\n        const tmp = [this.rowRender(row, $index, treeRowData)];\n        // 渲染嵌套数据\n        if (cur) {\n          // currentRow 记录的是 index，所以还需主动增加 TreeTable 的 index\n          let i = 0;\n          const traverse = (children, parent) => {\n            if (!(children && children.length && parent)) return;\n            children.forEach(node => {\n              // 父节点的 display 状态影响子节点的显示状态\n              const innerTreeRowData = {\n                display: parent.display && parent.expanded,\n                level: parent.level + 1\n              };\n              const childKey = getRowIdentity(node, rowKey);\n              if (childKey === undefined || childKey === null) {\n                throw new Error('for nested data item, row-key is required.');\n              }\n              cur = { ...treeData[childKey] };\n              // 对于当前节点，分成有无子节点两种情况。\n              // 如果包含子节点的，设置 expanded 属性。\n              // 对于它子节点的 display 属性由它本身的 expanded 与 display 共同决定。\n              if (cur) {\n                innerTreeRowData.expanded = cur.expanded;\n                // 懒加载的某些节点，level 未知\n                cur.level = cur.level || innerTreeRowData.level;\n                cur.display = !!(cur.expanded && innerTreeRowData.display);\n                if (typeof cur.lazy === 'boolean') {\n                  if (typeof cur.loaded === 'boolean' && cur.loaded) {\n                    innerTreeRowData.noLazyChildren = !(cur.children && cur.children.length);\n                  }\n                  innerTreeRowData.loading = cur.loading;\n                }\n              }\n              i++;\n              tmp.push(this.rowRender(node, $index + i, innerTreeRowData));\n              if (cur) {\n                const nodes = lazyTreeNodeMap[childKey] || node[childrenColumnName];\n                traverse(nodes, cur);\n              }\n            });\n          };\n          // 对于 root 节点，display 一定为 true\n          cur.display = true;\n          const nodes = lazyTreeNodeMap[key] || row[childrenColumnName];\n          traverse(nodes, cur);\n        }\n        return tmp;\n      } else {\n        return this.rowRender(row, $index);\n      }\n    }\n  }\n};\n"
  },
  {
    "path": "packages/table/src/table-column.js",
    "content": "import { cellStarts, cellForced, defaultRenderCell, treeCellPrefix } from './config';\nimport { mergeOptions, parseWidth, parseMinWidth, compose } from './util';\nimport ElCheckbox from 'element-ui/packages/checkbox';\n\nlet columnIdSeed = 1;\n\nexport default {\n  name: 'ElTableColumn',\n\n  props: {\n    type: {\n      type: String,\n      default: 'default'\n    },\n    label: String,\n    className: String,\n    labelClassName: String,\n    property: String,\n    prop: String,\n    width: {},\n    minWidth: {},\n    renderHeader: Function,\n    sortable: {\n      type: [Boolean, String],\n      default: false\n    },\n    sortMethod: Function,\n    sortBy: [String, Function, Array],\n    resizable: {\n      type: Boolean,\n      default: true\n    },\n    columnKey: String,\n    align: String,\n    headerAlign: String,\n    showTooltipWhenOverflow: Boolean,\n    showOverflowTooltip: Boolean,\n    fixed: [Boolean, String],\n    formatter: Function,\n    selectable: Function,\n    reserveSelection: Boolean,\n    filterMethod: Function,\n    filteredValue: Array,\n    filters: Array,\n    filterPlacement: String,\n    filterMultiple: {\n      type: Boolean,\n      default: true\n    },\n    index: [Number, Function],\n    sortOrders: {\n      type: Array,\n      default() {\n        return ['ascending', 'descending', null];\n      },\n      validator(val) {\n        return val.every(order => ['ascending', 'descending', null].indexOf(order) > -1);\n      }\n    }\n  },\n\n  data() {\n    return {\n      isSubColumn: false,\n      columns: []\n    };\n  },\n\n  computed: {\n    owner() {\n      let parent = this.$parent;\n      while (parent && !parent.tableId) {\n        parent = parent.$parent;\n      }\n      return parent;\n    },\n\n    columnOrTableParent() {\n      let parent = this.$parent;\n      while (parent && !parent.tableId && !parent.columnId) {\n        parent = parent.$parent;\n      }\n      return parent;\n    },\n\n    realWidth() {\n      return parseWidth(this.width);\n    },\n\n    realMinWidth() {\n      return parseMinWidth(this.minWidth);\n    },\n\n    realAlign() {\n      return this.align ? 'is-' + this.align : null;\n    },\n\n    realHeaderAlign() {\n      return this.headerAlign ? 'is-' + this.headerAlign : this.realAlign;\n    }\n  },\n\n  methods: {\n    getPropsData(...props) {\n      return props.reduce((prev, cur) => {\n        if (Array.isArray(cur)) {\n          cur.forEach((key) => {\n            prev[key] = this[key];\n          });\n        }\n        return prev;\n      }, {});\n    },\n\n    getColumnElIndex(children, child) {\n      return [].indexOf.call(children, child);\n    },\n\n    setColumnWidth(column) {\n      if (this.realWidth) {\n        column.width = this.realWidth;\n      }\n      if (this.realMinWidth) {\n        column.minWidth = this.realMinWidth;\n      }\n      if (!column.minWidth) {\n        column.minWidth = 80;\n      }\n      column.realWidth = column.width === undefined ? column.minWidth : column.width;\n      return column;\n    },\n\n    setColumnForcedProps(column) {\n      // 对于特定类型的 column，某些属性不允许设置\n      const type = column.type;\n      const source = cellForced[type] || {};\n      Object.keys(source).forEach(prop => {\n        let value = source[prop];\n        if (value !== undefined) {\n          column[prop] = prop === 'className' ? `${column[prop]} ${value}` : value;\n        }\n      });\n      return column;\n    },\n\n    setColumnRenders(column) {\n      // renderHeader 属性不推荐使用。\n      if (this.renderHeader) {\n        console.warn('[Element Warn][TableColumn]Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header.');\n      } else if (column.type !== 'selection') {\n        column.renderHeader = (h, scope) => {\n          const renderHeader = this.$scopedSlots.header;\n          return renderHeader ? renderHeader(scope) : column.label;\n        };\n      }\n\n      let originRenderCell = column.renderCell;\n      // TODO: 这里的实现调整\n      if (column.type === 'expand') {\n        // 对于展开行，renderCell 不允许配置的。在上一步中已经设置过，这里需要简单封装一下。\n        column.renderCell = (h, data) => (<div class=\"cell\">\n          { originRenderCell(h, data) }\n        </div>);\n        this.owner.renderExpanded = (h, data) => {\n          return this.$scopedSlots.default\n            ? this.$scopedSlots.default(data)\n            : this.$slots.default;\n        };\n      } else {\n        originRenderCell = originRenderCell || defaultRenderCell;\n        // 对 renderCell 进行包装\n        column.renderCell = (h, data) => {\n          let children = null;\n          if (this.$scopedSlots.default) {\n            children = this.$scopedSlots.default(data);\n          } else {\n            children = originRenderCell(h, data);\n          }\n          const prefix = treeCellPrefix(h, data);\n          const props = {\n            class: 'cell',\n            style: {}\n          };\n          if (column.showOverflowTooltip) {\n            props.class += ' el-tooltip';\n            props.style = {width: (data.column.realWidth || data.column.width) - 1 + 'px'};\n          }\n          return (<div { ...props }>\n            { prefix }\n            { children }\n          </div>);\n        };\n      }\n      return column;\n    },\n\n    registerNormalWatchers() {\n      const props = ['label', 'property', 'filters', 'filterMultiple', 'sortable', 'index', 'formatter', 'className', 'labelClassName', 'showOverflowTooltip'];\n      // 一些属性具有别名\n      const aliases = {\n        prop: 'property',\n        realAlign: 'align',\n        realHeaderAlign: 'headerAlign',\n        realWidth: 'width'\n      };\n      const allAliases = props.reduce((prev, cur) => {\n        prev[cur] = cur;\n        return prev;\n      }, aliases);\n\n      Object.keys(allAliases).forEach(key => {\n        const columnKey = aliases[key];\n\n        this.$watch(key, (newVal) => {\n          this.columnConfig[columnKey] = newVal;\n        });\n      });\n    },\n\n    registerComplexWatchers() {\n      const props = ['fixed'];\n      const aliases = {\n        realWidth: 'width',\n        realMinWidth: 'minWidth'\n      };\n      const allAliases = props.reduce((prev, cur) => {\n        prev[cur] = cur;\n        return prev;\n      }, aliases);\n\n      Object.keys(allAliases).forEach(key => {\n        const columnKey = aliases[key];\n\n        this.$watch(key, (newVal) => {\n          this.columnConfig[columnKey] = newVal;\n          const updateColumns = columnKey === 'fixed';\n          this.owner.store.scheduleLayout(updateColumns);\n        });\n      });\n    }\n  },\n\n  components: {\n    ElCheckbox\n  },\n\n  beforeCreate() {\n    this.row = {};\n    this.column = {};\n    this.$index = 0;\n    this.columnId = '';\n  },\n\n  created() {\n    const parent = this.columnOrTableParent;\n    this.isSubColumn = this.owner !== parent;\n    this.columnId = (parent.tableId || parent.columnId) + '_column_' + columnIdSeed++;\n\n    const type = this.type || 'default';\n    const sortable = this.sortable === '' ? true : this.sortable;\n    const defaults = {\n      ...cellStarts[type],\n      id: this.columnId,\n      type: type,\n      property: this.prop || this.property,\n      align: this.realAlign,\n      headerAlign: this.realHeaderAlign,\n      showOverflowTooltip: this.showOverflowTooltip || this.showTooltipWhenOverflow,\n      // filter 相关属性\n      filterable: this.filters || this.filterMethod,\n      filteredValue: [],\n      filterPlacement: '',\n      isColumnGroup: false,\n      filterOpened: false,\n      // sort 相关属性\n      sortable: sortable,\n      // index 列\n      index: this.index\n    };\n\n    const basicProps = ['columnKey', 'label', 'className', 'labelClassName', 'type', 'renderHeader', 'formatter', 'fixed', 'resizable'];\n    const sortProps = ['sortMethod', 'sortBy', 'sortOrders'];\n    const selectProps = ['selectable', 'reserveSelection'];\n    const filterProps = ['filterMethod', 'filters', 'filterMultiple', 'filterOpened', 'filteredValue', 'filterPlacement'];\n\n    let column = this.getPropsData(basicProps, sortProps, selectProps, filterProps);\n    column = mergeOptions(defaults, column);\n\n    // 注意 compose 中函数执行的顺序是从右到左\n    const chains = compose(this.setColumnRenders, this.setColumnWidth, this.setColumnForcedProps);\n    column = chains(column);\n\n    this.columnConfig = column;\n\n    // 注册 watcher\n    this.registerNormalWatchers();\n    this.registerComplexWatchers();\n  },\n\n  mounted() {\n    const owner = this.owner;\n    const parent = this.columnOrTableParent;\n    const children = this.isSubColumn ? parent.$el.children : parent.$refs.hiddenColumns.children;\n    const columnIndex = this.getColumnElIndex(children, this.$el);\n\n    owner.store.commit('insertColumn', this.columnConfig, columnIndex, this.isSubColumn ? parent.columnConfig : null);\n  },\n\n  destroyed() {\n    if (!this.$parent) return;\n    const parent = this.$parent;\n    this.owner.store.commit('removeColumn', this.columnConfig, this.isSubColumn ? parent.columnConfig : null);\n  },\n\n  render(h) {\n    // slots 也要渲染，需要计算合并表头\n    return h('div', this.$slots.default);\n  }\n};\n"
  },
  {
    "path": "packages/table/src/table-footer.js",
    "content": "import LayoutObserver from './layout-observer';\nimport { mapStates } from './store/helper';\n\nexport default {\n  name: 'ElTableFooter',\n\n  mixins: [LayoutObserver],\n\n  render(h) {\n    let sums = [];\n    if (this.summaryMethod) {\n      sums = this.summaryMethod({ columns: this.columns, data: this.store.states.data });\n    } else {\n      this.columns.forEach((column, index) => {\n        if (index === 0) {\n          sums[index] = this.sumText;\n          return;\n        }\n        const values = this.store.states.data.map(item => Number(item[column.property]));\n        const precisions = [];\n        let notNumber = true;\n        values.forEach(value => {\n          if (!isNaN(value)) {\n            notNumber = false;\n            let decimal = ('' + value).split('.')[1];\n            precisions.push(decimal ? decimal.length : 0);\n          }\n        });\n        const precision = Math.max.apply(null, precisions);\n        if (!notNumber) {\n          sums[index] = values.reduce((prev, curr) => {\n            const value = Number(curr);\n            if (!isNaN(value)) {\n              return parseFloat((prev + curr).toFixed(Math.min(precision, 20)));\n            } else {\n              return prev;\n            }\n          }, 0);\n        } else {\n          sums[index] = '';\n        }\n      });\n    }\n\n    return (\n      <table\n        class=\"el-table__footer\"\n        cellspacing=\"0\"\n        cellpadding=\"0\"\n        border=\"0\">\n        <colgroup>\n          {\n            this.columns.map(column => <col name={ column.id } key={column.id} />)\n          }\n          {\n            this.hasGutter ? <col name=\"gutter\" /> : ''\n          }\n        </colgroup>\n        <tbody class={ [{ 'has-gutter': this.hasGutter }] }>\n          <tr>\n            {\n              this.columns.map((column, cellIndex) => <td\n                key={cellIndex}\n                colspan={ column.colSpan }\n                rowspan={ column.rowSpan }\n                class={ [...this.getRowClasses(column, cellIndex), 'el-table__cell'] }>\n                <div class={ ['cell', column.labelClassName] }>\n                  {\n                    sums[cellIndex]\n                  }\n                </div>\n              </td>)\n            }\n            {\n              this.hasGutter ? <th class=\"el-table__cell gutter\"></th> : ''\n            }\n          </tr>\n        </tbody>\n      </table>\n    );\n  },\n\n  props: {\n    fixed: String,\n    store: {\n      required: true\n    },\n    summaryMethod: Function,\n    sumText: String,\n    border: Boolean,\n    defaultSort: {\n      type: Object,\n      default() {\n        return {\n          prop: '',\n          order: ''\n        };\n      }\n    }\n  },\n\n  computed: {\n    table() {\n      return this.$parent;\n    },\n\n    hasGutter() {\n      return !this.fixed && this.tableLayout.gutterWidth;\n    },\n\n    ...mapStates({\n      columns: 'columns',\n      isAllSelected: 'isAllSelected',\n      leftFixedLeafCount: 'fixedLeafColumnsLength',\n      rightFixedLeafCount: 'rightFixedLeafColumnsLength',\n      columnsCount: states => states.columns.length,\n      leftFixedCount: states => states.fixedColumns.length,\n      rightFixedCount: states => states.rightFixedColumns.length\n    })\n  },\n\n  methods: {\n    isCellHidden(index, columns, column) {\n      if (this.fixed === true || this.fixed === 'left') {\n        return index >= this.leftFixedLeafCount;\n      } else if (this.fixed === 'right') {\n        let before = 0;\n        for (let i = 0; i < index; i++) {\n          before += columns[i].colSpan;\n        }\n        return before < this.columnsCount - this.rightFixedLeafCount;\n      } else if (!this.fixed && column.fixed) { // hide cell when footer instance is not fixed and column is fixed\n        return true;\n      } else {\n        return (index < this.leftFixedCount) || (index >= this.columnsCount - this.rightFixedCount);\n      }\n    },\n\n    getRowClasses(column, cellIndex) {\n      const classes = [column.id, column.align, column.labelClassName];\n      if (column.className) {\n        classes.push(column.className);\n      }\n      if (this.isCellHidden(cellIndex, this.columns, column)) {\n        classes.push('is-hidden');\n      }\n      if (!column.children) {\n        classes.push('is-leaf');\n      }\n      return classes;\n    }\n  }\n};\n"
  },
  {
    "path": "packages/table/src/table-header.js",
    "content": "import Vue from 'vue';\nimport { hasClass, addClass, removeClass } from 'element-ui/src/utils/dom';\nimport ElCheckbox from 'element-ui/packages/checkbox';\nimport FilterPanel from './filter-panel.vue';\nimport LayoutObserver from './layout-observer';\nimport { mapStates } from './store/helper';\n\nconst getAllColumns = (columns) => {\n  const result = [];\n  columns.forEach((column) => {\n    if (column.children) {\n      result.push(column);\n      result.push.apply(result, getAllColumns(column.children));\n    } else {\n      result.push(column);\n    }\n  });\n  return result;\n};\n\nconst convertToRows = (originColumns) => {\n  let maxLevel = 1;\n  const traverse = (column, parent) => {\n    if (parent) {\n      column.level = parent.level + 1;\n      if (maxLevel < column.level) {\n        maxLevel = column.level;\n      }\n    }\n    if (column.children) {\n      let colSpan = 0;\n      column.children.forEach((subColumn) => {\n        traverse(subColumn, column);\n        colSpan += subColumn.colSpan;\n      });\n      column.colSpan = colSpan;\n    } else {\n      column.colSpan = 1;\n    }\n  };\n\n  originColumns.forEach((column) => {\n    column.level = 1;\n    traverse(column);\n  });\n\n  const rows = [];\n  for (let i = 0; i < maxLevel; i++) {\n    rows.push([]);\n  }\n\n  const allColumns = getAllColumns(originColumns);\n\n  allColumns.forEach((column) => {\n    if (!column.children) {\n      column.rowSpan = maxLevel - column.level + 1;\n    } else {\n      column.rowSpan = 1;\n    }\n    rows[column.level - 1].push(column);\n  });\n\n  return rows;\n};\n\nexport default {\n  name: 'ElTableHeader',\n\n  mixins: [LayoutObserver],\n\n  render(h) {\n    const originColumns = this.store.states.originColumns;\n    const columnRows = convertToRows(originColumns, this.columns);\n    // 是否拥有多级表头\n    const isGroup = columnRows.length > 1;\n    if (isGroup) this.$parent.isGroup = true;\n    return (\n      <table\n        class=\"el-table__header\"\n        cellspacing=\"0\"\n        cellpadding=\"0\"\n        border=\"0\">\n        <colgroup>\n          {\n            this.columns.map(column => <col name={ column.id } key={column.id} />)\n          }\n          {\n            this.hasGutter ? <col name=\"gutter\" /> : ''\n          }\n        </colgroup>\n        <thead class={ [{ 'is-group': isGroup, 'has-gutter': this.hasGutter }] }>\n          {\n            this._l(columnRows, (columns, rowIndex) =>\n              <tr\n                style={ this.getHeaderRowStyle(rowIndex) }\n                class={ this.getHeaderRowClass(rowIndex) }\n              >\n                {\n                  columns.map((column, cellIndex) => (<th\n                    colspan={ column.colSpan }\n                    rowspan={ column.rowSpan }\n                    on-mousemove={ ($event) => this.handleMouseMove($event, column) }\n                    on-mouseout={ this.handleMouseOut }\n                    on-mousedown={ ($event) => this.handleMouseDown($event, column) }\n                    on-click={ ($event) => this.handleHeaderClick($event, column) }\n                    on-contextmenu={ ($event) => this.handleHeaderContextMenu($event, column) }\n                    style={ this.getHeaderCellStyle(rowIndex, cellIndex, columns, column) }\n                    class={ this.getHeaderCellClass(rowIndex, cellIndex, columns, column) }\n                    key={ column.id }>\n                    <div class={ ['cell', column.filteredValue && column.filteredValue.length > 0 ? 'highlight' : '', column.labelClassName] }>\n                      {\n                        column.renderHeader\n                          ? column.renderHeader.call(this._renderProxy, h, { column, $index: cellIndex, store: this.store, _self: this.$parent.$vnode.context })\n                          : column.label\n                      }\n                      {\n                        column.sortable ? (<span\n                          class=\"caret-wrapper\"\n                          on-click={ ($event) => this.handleSortClick($event, column) }>\n                          <i class=\"sort-caret ascending\"\n                            on-click={ ($event) => this.handleSortClick($event, column, 'ascending') }>\n                          </i>\n                          <i class=\"sort-caret descending\"\n                            on-click={ ($event) => this.handleSortClick($event, column, 'descending') }>\n                          </i>\n                        </span>) : ''\n                      }\n                      {\n                        column.filterable ? (<span\n                          class=\"el-table__column-filter-trigger\"\n                          on-click={ ($event) => this.handleFilterClick($event, column) }>\n                          <i class={ ['el-icon-arrow-down', column.filterOpened ? 'el-icon-arrow-up' : ''] }></i>\n                        </span>) : ''\n                      }\n                    </div>\n                  </th>))\n                }\n                {\n                  this.hasGutter ? <th class=\"el-table__cell gutter\"></th> : ''\n                }\n              </tr>\n            )\n          }\n        </thead>\n      </table>\n    );\n  },\n\n  props: {\n    fixed: String,\n    store: {\n      required: true\n    },\n    border: Boolean,\n    defaultSort: {\n      type: Object,\n      default() {\n        return {\n          prop: '',\n          order: ''\n        };\n      }\n    }\n  },\n\n  components: {\n    ElCheckbox\n  },\n\n  computed: {\n    table() {\n      return this.$parent;\n    },\n\n    hasGutter() {\n      return !this.fixed && this.tableLayout.gutterWidth;\n    },\n\n    ...mapStates({\n      columns: 'columns',\n      isAllSelected: 'isAllSelected',\n      leftFixedLeafCount: 'fixedLeafColumnsLength',\n      rightFixedLeafCount: 'rightFixedLeafColumnsLength',\n      columnsCount: states => states.columns.length,\n      leftFixedCount: states => states.fixedColumns.length,\n      rightFixedCount: states => states.rightFixedColumns.length\n    })\n  },\n\n  created() {\n    this.filterPanels = {};\n  },\n\n  mounted() {\n    // nextTick 是有必要的 https://github.com/ElemeFE/element/pull/11311\n    this.$nextTick(() => {\n      const { prop, order } = this.defaultSort;\n      const init = true;\n      this.store.commit('sort', { prop, order, init });\n    });\n  },\n\n  beforeDestroy() {\n    const panels = this.filterPanels;\n    for (let prop in panels) {\n      if (panels.hasOwnProperty(prop) && panels[prop]) {\n        panels[prop].$destroy(true);\n      }\n    }\n  },\n\n  methods: {\n    isCellHidden(index, columns) {\n      let start = 0;\n      for (let i = 0; i < index; i++) {\n        start += columns[i].colSpan;\n      }\n      const after = start + columns[index].colSpan - 1;\n      if (this.fixed === true || this.fixed === 'left') {\n        return after >= this.leftFixedLeafCount;\n      } else if (this.fixed === 'right') {\n        return start < this.columnsCount - this.rightFixedLeafCount;\n      } else {\n        return (after < this.leftFixedLeafCount) || (start >= this.columnsCount - this.rightFixedLeafCount);\n      }\n    },\n\n    getHeaderRowStyle(rowIndex) {\n      const headerRowStyle = this.table.headerRowStyle;\n      if (typeof headerRowStyle === 'function') {\n        return headerRowStyle.call(null, { rowIndex });\n      }\n      return headerRowStyle;\n    },\n\n    getHeaderRowClass(rowIndex) {\n      const classes = [];\n\n      const headerRowClassName = this.table.headerRowClassName;\n      if (typeof headerRowClassName === 'string') {\n        classes.push(headerRowClassName);\n      } else if (typeof headerRowClassName === 'function') {\n        classes.push(headerRowClassName.call(null, { rowIndex }));\n      }\n\n      return classes.join(' ');\n    },\n\n    getHeaderCellStyle(rowIndex, columnIndex, row, column) {\n      const headerCellStyle = this.table.headerCellStyle;\n      if (typeof headerCellStyle === 'function') {\n        return headerCellStyle.call(null, {\n          rowIndex,\n          columnIndex,\n          row,\n          column\n        });\n      }\n      return headerCellStyle;\n    },\n\n    getHeaderCellClass(rowIndex, columnIndex, row, column) {\n      const classes = [column.id, column.order, column.headerAlign, column.className, column.labelClassName];\n\n      if (rowIndex === 0 && this.isCellHidden(columnIndex, row)) {\n        classes.push('is-hidden');\n      }\n\n      if (!column.children) {\n        classes.push('is-leaf');\n      }\n\n      if (column.sortable) {\n        classes.push('is-sortable');\n      }\n\n      const headerCellClassName = this.table.headerCellClassName;\n      if (typeof headerCellClassName === 'string') {\n        classes.push(headerCellClassName);\n      } else if (typeof headerCellClassName === 'function') {\n        classes.push(headerCellClassName.call(null, {\n          rowIndex,\n          columnIndex,\n          row,\n          column\n        }));\n      }\n\n      classes.push('el-table__cell');\n\n      return classes.join(' ');\n    },\n\n    toggleAllSelection() {\n      this.store.commit('toggleAllSelection');\n    },\n\n    handleFilterClick(event, column) {\n      event.stopPropagation();\n      const target = event.target;\n      let cell = target.tagName === 'TH' ? target : target.parentNode;\n      if (hasClass(cell, 'noclick')) return;\n      cell = cell.querySelector('.el-table__column-filter-trigger') || cell;\n      const table = this.$parent;\n\n      let filterPanel = this.filterPanels[column.id];\n\n      if (filterPanel && column.filterOpened) {\n        filterPanel.showPopper = false;\n        return;\n      }\n\n      if (!filterPanel) {\n        filterPanel = new Vue(FilterPanel);\n        this.filterPanels[column.id] = filterPanel;\n        if (column.filterPlacement) {\n          filterPanel.placement = column.filterPlacement;\n        }\n        filterPanel.table = table;\n        filterPanel.cell = cell;\n        filterPanel.column = column;\n        !this.$isServer && filterPanel.$mount(document.createElement('div'));\n      }\n\n      setTimeout(() => {\n        filterPanel.showPopper = true;\n      }, 16);\n    },\n\n    handleHeaderClick(event, column) {\n      if (!column.filters && column.sortable) {\n        this.handleSortClick(event, column);\n      } else if (column.filterable && !column.sortable) {\n        this.handleFilterClick(event, column);\n      }\n\n      this.$parent.$emit('header-click', column, event);\n    },\n\n    handleHeaderContextMenu(event, column) {\n      this.$parent.$emit('header-contextmenu', column, event);\n    },\n\n    handleMouseDown(event, column) {\n      if (this.$isServer) return;\n      if (column.children && column.children.length > 0) return;\n      /* istanbul ignore if */\n      if (this.draggingColumn && this.border) {\n        this.dragging = true;\n\n        this.$parent.resizeProxyVisible = true;\n\n        const table = this.$parent;\n        const tableEl = table.$el;\n        const tableLeft = tableEl.getBoundingClientRect().left;\n        const columnEl = this.$el.querySelector(`th.${column.id}`);\n        const columnRect = columnEl.getBoundingClientRect();\n        const minLeft = columnRect.left - tableLeft + 30;\n\n        addClass(columnEl, 'noclick');\n\n        this.dragState = {\n          startMouseLeft: event.clientX,\n          startLeft: columnRect.right - tableLeft,\n          startColumnLeft: columnRect.left - tableLeft,\n          tableLeft\n        };\n\n        const resizeProxy = table.$refs.resizeProxy;\n        resizeProxy.style.left = this.dragState.startLeft + 'px';\n\n        document.onselectstart = function() { return false; };\n        document.ondragstart = function() { return false; };\n\n        const handleMouseMove = (event) => {\n          const deltaLeft = event.clientX - this.dragState.startMouseLeft;\n          const proxyLeft = this.dragState.startLeft + deltaLeft;\n\n          resizeProxy.style.left = Math.max(minLeft, proxyLeft) + 'px';\n        };\n\n        const handleMouseUp = () => {\n          if (this.dragging) {\n            const {\n              startColumnLeft,\n              startLeft\n            } = this.dragState;\n            const finalLeft = parseInt(resizeProxy.style.left, 10);\n            const columnWidth = finalLeft - startColumnLeft;\n            column.width = column.realWidth = columnWidth;\n            table.$emit('header-dragend', column.width, startLeft - startColumnLeft, column, event);\n\n            this.store.scheduleLayout();\n\n            document.body.style.cursor = '';\n            this.dragging = false;\n            this.draggingColumn = null;\n            this.dragState = {};\n\n            table.resizeProxyVisible = false;\n          }\n\n          document.removeEventListener('mousemove', handleMouseMove);\n          document.removeEventListener('mouseup', handleMouseUp);\n          document.onselectstart = null;\n          document.ondragstart = null;\n\n          setTimeout(function() {\n            removeClass(columnEl, 'noclick');\n          }, 0);\n        };\n\n        document.addEventListener('mousemove', handleMouseMove);\n        document.addEventListener('mouseup', handleMouseUp);\n      }\n    },\n\n    handleMouseMove(event, column) {\n      if (column.children && column.children.length > 0) return;\n      let target = event.target;\n      while (target && target.tagName !== 'TH') {\n        target = target.parentNode;\n      }\n\n      if (!column || !column.resizable) return;\n\n      if (!this.dragging && this.border) {\n        let rect = target.getBoundingClientRect();\n\n        const bodyStyle = document.body.style;\n        if (rect.width > 12 && rect.right - event.pageX < 8) {\n          bodyStyle.cursor = 'col-resize';\n          if (hasClass(target, 'is-sortable')) {\n            target.style.cursor = 'col-resize';\n          }\n          this.draggingColumn = column;\n        } else if (!this.dragging) {\n          bodyStyle.cursor = '';\n          if (hasClass(target, 'is-sortable')) {\n            target.style.cursor = 'pointer';\n          }\n          this.draggingColumn = null;\n        }\n      }\n    },\n\n    handleMouseOut() {\n      if (this.$isServer) return;\n      document.body.style.cursor = '';\n    },\n\n    toggleOrder({ order, sortOrders }) {\n      if (order === '') return sortOrders[0];\n      const index = sortOrders.indexOf(order || null);\n      return sortOrders[index > sortOrders.length - 2 ? 0 : index + 1];\n    },\n\n    handleSortClick(event, column, givenOrder) {\n      event.stopPropagation();\n      let order = column.order === givenOrder\n        ? null\n        : (givenOrder || this.toggleOrder(column));\n\n      let target = event.target;\n      while (target && target.tagName !== 'TH') {\n        target = target.parentNode;\n      }\n\n      if (target && target.tagName === 'TH') {\n        if (hasClass(target, 'noclick')) {\n          removeClass(target, 'noclick');\n          return;\n        }\n      }\n\n      if (!column.sortable) return;\n\n      const states = this.store.states;\n      let sortProp = states.sortProp;\n      let sortOrder;\n      const sortingColumn = states.sortingColumn;\n\n      if (sortingColumn !== column || (sortingColumn === column && sortingColumn.order === null)) {\n        if (sortingColumn) {\n          sortingColumn.order = null;\n        }\n        states.sortingColumn = column;\n        sortProp = column.property;\n      }\n\n      if (!order) {\n        sortOrder = column.order = null;\n      } else {\n        sortOrder = column.order = order;\n      }\n\n      states.sortProp = sortProp;\n      states.sortOrder = sortOrder;\n\n      this.store.commit('changeSortCondition');\n    }\n  },\n\n  data() {\n    return {\n      draggingColumn: null,\n      dragging: false,\n      dragState: {}\n    };\n  }\n};\n"
  },
  {
    "path": "packages/table/src/table-layout.js",
    "content": "import Vue from 'vue';\nimport scrollbarWidth from 'element-ui/src/utils/scrollbar-width';\nimport { parseHeight } from './util';\n\nclass TableLayout {\n  constructor(options) {\n    this.observers = [];\n    this.table = null;\n    this.store = null;\n    this.columns = null;\n    this.fit = true;\n    this.showHeader = true;\n\n    this.height = null;\n    this.scrollX = false;\n    this.scrollY = false;\n    this.bodyWidth = null;\n    this.fixedWidth = null;\n    this.rightFixedWidth = null;\n    this.tableHeight = null;\n    this.headerHeight = 44; // Table Header Height\n    this.appendHeight = 0; // Append Slot Height\n    this.footerHeight = 44; // Table Footer Height\n    this.viewportHeight = null; // Table Height - Scroll Bar Height\n    this.bodyHeight = null; // Table Height - Table Header Height\n    this.fixedBodyHeight = null; // Table Height - Table Header Height - Scroll Bar Height\n    this.gutterWidth = scrollbarWidth();\n\n    for (let name in options) {\n      if (options.hasOwnProperty(name)) {\n        this[name] = options[name];\n      }\n    }\n\n    if (!this.table) {\n      throw new Error('table is required for Table Layout');\n    }\n    if (!this.store) {\n      throw new Error('store is required for Table Layout');\n    }\n  }\n\n  updateScrollY() {\n    const height = this.height;\n    if (height === null) return false;\n    const bodyWrapper = this.table.bodyWrapper;\n    if (this.table.$el && bodyWrapper) {\n      const body = bodyWrapper.querySelector('.el-table__body');\n      const prevScrollY = this.scrollY;\n      const scrollY = body.offsetHeight > this.bodyHeight;\n      this.scrollY = scrollY;\n      return prevScrollY !== scrollY;\n    }\n    return false;\n  }\n\n  setHeight(value, prop = 'height') {\n    if (Vue.prototype.$isServer) return;\n    const el = this.table.$el;\n    value = parseHeight(value);\n    this.height = value;\n\n    if (!el && (value || value === 0)) return Vue.nextTick(() => this.setHeight(value, prop));\n\n    if (typeof value === 'number') {\n      el.style[prop] = value + 'px';\n      this.updateElsHeight();\n    } else if (typeof value === 'string') {\n      el.style[prop] = value;\n      this.updateElsHeight();\n    }\n  }\n\n  setMaxHeight(value) {\n    this.setHeight(value, 'max-height');\n  }\n\n  getFlattenColumns() {\n    const flattenColumns = [];\n    const columns = this.table.columns;\n    columns.forEach((column) => {\n      if (column.isColumnGroup) {\n        flattenColumns.push.apply(flattenColumns, column.columns);\n      } else {\n        flattenColumns.push(column);\n      }\n    });\n\n    return flattenColumns;\n  }\n\n  updateElsHeight() {\n    if (!this.table.$ready) return Vue.nextTick(() => this.updateElsHeight());\n    const { headerWrapper, appendWrapper, footerWrapper } = this.table.$refs;\n    this.appendHeight = appendWrapper ? appendWrapper.offsetHeight : 0;\n\n    if (this.showHeader && !headerWrapper) return;\n\n    // fix issue (https://github.com/ElemeFE/element/pull/16956)\n    const headerTrElm = headerWrapper ? headerWrapper.querySelector('.el-table__header tr') : null;\n    const noneHeader = this.headerDisplayNone(headerTrElm);\n\n    const headerHeight = this.headerHeight = !this.showHeader ? 0 : headerWrapper.offsetHeight;\n    if (this.showHeader && !noneHeader && headerWrapper.offsetWidth > 0 && (this.table.columns || []).length > 0 && headerHeight < 2) {\n      return Vue.nextTick(() => this.updateElsHeight());\n    }\n    const tableHeight = this.tableHeight = this.table.$el.clientHeight;\n    const footerHeight = this.footerHeight = footerWrapper ? footerWrapper.offsetHeight : 0;\n    if (this.height !== null) {\n      this.bodyHeight = tableHeight - headerHeight - footerHeight + (footerWrapper ? 1 : 0);\n    }\n    this.fixedBodyHeight = this.scrollX ? (this.bodyHeight - this.gutterWidth) : this.bodyHeight;\n\n    const noData = !(this.store.states.data && this.store.states.data.length);\n    this.viewportHeight = this.scrollX ? tableHeight - (noData ? 0 : this.gutterWidth) : tableHeight;\n    this.updateScrollY();\n    this.notifyObservers('scrollable');\n  }\n\n  headerDisplayNone(elm) {\n    if (!elm) return true;\n    let headerChild = elm;\n    while (headerChild.tagName !== 'DIV') {\n      if (getComputedStyle(headerChild).display === 'none') {\n        return true;\n      }\n      headerChild = headerChild.parentElement;\n    }\n    return false;\n  }\n\n  updateColumnsWidth() {\n    if (Vue.prototype.$isServer) return;\n    const fit = this.fit;\n    const bodyWidth = this.table.$el.clientWidth;\n    let bodyMinWidth = 0;\n\n    const flattenColumns = this.getFlattenColumns();\n    let flexColumns = flattenColumns.filter((column) => typeof column.width !== 'number');\n\n    flattenColumns.forEach((column) => { // Clean those columns whose width changed from flex to unflex\n      if (typeof column.width === 'number' && column.realWidth) column.realWidth = null;\n    });\n\n    if (flexColumns.length > 0 && fit) {\n      flattenColumns.forEach((column) => {\n        bodyMinWidth += column.width || column.minWidth || 80;\n      });\n\n      const scrollYWidth = this.scrollY ? this.gutterWidth : 0;\n\n      if (bodyMinWidth <= bodyWidth - scrollYWidth) { // DON'T HAVE SCROLL BAR\n        this.scrollX = false;\n\n        const totalFlexWidth = bodyWidth - scrollYWidth - bodyMinWidth;\n\n        if (flexColumns.length === 1) {\n          flexColumns[0].realWidth = (flexColumns[0].minWidth || 80) + totalFlexWidth;\n        } else {\n          const allColumnsWidth = flexColumns.reduce((prev, column) => prev + (column.minWidth || 80), 0);\n          const flexWidthPerPixel = totalFlexWidth / allColumnsWidth;\n          let noneFirstWidth = 0;\n\n          flexColumns.forEach((column, index) => {\n            if (index === 0) return;\n            const flexWidth = Math.floor((column.minWidth || 80) * flexWidthPerPixel);\n            noneFirstWidth += flexWidth;\n            column.realWidth = (column.minWidth || 80) + flexWidth;\n          });\n\n          flexColumns[0].realWidth = (flexColumns[0].minWidth || 80) + totalFlexWidth - noneFirstWidth;\n        }\n      } else { // HAVE HORIZONTAL SCROLL BAR\n        this.scrollX = true;\n        flexColumns.forEach(function(column) {\n          column.realWidth = column.minWidth;\n        });\n      }\n\n      this.bodyWidth = Math.max(bodyMinWidth, bodyWidth);\n      this.table.resizeState.width = this.bodyWidth;\n    } else {\n      flattenColumns.forEach((column) => {\n        if (!column.width && !column.minWidth) {\n          column.realWidth = 80;\n        } else {\n          column.realWidth = column.width || column.minWidth;\n        }\n\n        bodyMinWidth += column.realWidth;\n      });\n      this.scrollX = bodyMinWidth > bodyWidth;\n\n      this.bodyWidth = bodyMinWidth;\n    }\n\n    const fixedColumns = this.store.states.fixedColumns;\n\n    if (fixedColumns.length > 0) {\n      let fixedWidth = 0;\n      fixedColumns.forEach(function(column) {\n        fixedWidth += column.realWidth || column.width;\n      });\n\n      this.fixedWidth = fixedWidth;\n    }\n\n    const rightFixedColumns = this.store.states.rightFixedColumns;\n    if (rightFixedColumns.length > 0) {\n      let rightFixedWidth = 0;\n      rightFixedColumns.forEach(function(column) {\n        rightFixedWidth += column.realWidth || column.width;\n      });\n\n      this.rightFixedWidth = rightFixedWidth;\n    }\n\n    this.notifyObservers('columns');\n  }\n\n  addObserver(observer) {\n    this.observers.push(observer);\n  }\n\n  removeObserver(observer) {\n    const index = this.observers.indexOf(observer);\n    if (index !== -1) {\n      this.observers.splice(index, 1);\n    }\n  }\n\n  notifyObservers(event) {\n    const observers = this.observers;\n    observers.forEach((observer) => {\n      switch (event) {\n        case 'columns':\n          observer.onColumnsChange(this);\n          break;\n        case 'scrollable':\n          observer.onScrollableChange(this);\n          break;\n        default:\n          throw new Error(`Table Layout don't have event ${event}.`);\n      }\n    });\n  }\n}\n\nexport default TableLayout;\n"
  },
  {
    "path": "packages/table/src/table-row.js",
    "content": "import ElCheckbox from 'element-ui/packages/checkbox';\nexport default {\n  name: 'ElTableRow',\n  props: [\n    'columns',\n    'row',\n    'index',\n    'isSelected',\n    'isExpanded',\n    'store',\n    'context',\n    'firstDefaultColumnIndex',\n    'treeRowData',\n    'treeIndent',\n    'columnsHidden',\n    'getSpan',\n    'getColspanRealWidth',\n    'getCellStyle',\n    'getCellClass',\n    'handleCellMouseLeave',\n    'handleCellMouseEnter',\n    'fixed'\n  ],\n  components: {\n    ElCheckbox\n  },\n  render() {\n    const {\n      columns,\n      row,\n      index: $index,\n      store,\n      context,\n      firstDefaultColumnIndex,\n      treeRowData,\n      treeIndent,\n      columnsHidden = [],\n      isSelected,\n      isExpanded\n    } = this;\n\n    return (\n      <tr>\n        {\n          columns.map((column, cellIndex) => {\n            const { rowspan, colspan } = this.getSpan(row, column, $index, cellIndex);\n            if (!rowspan || !colspan) {\n              return null;\n            }\n            const columnData = { ...column };\n            columnData.realWidth = this.getColspanRealWidth(columns, colspan, cellIndex);\n            const data = {\n              store,\n              isSelected,\n              isExpanded,\n              _self: context,\n              column: columnData,\n              row,\n              $index\n            };\n            if (cellIndex === firstDefaultColumnIndex && treeRowData) {\n              data.treeNode = {\n                indent: treeRowData.level * treeIndent,\n                level: treeRowData.level\n              };\n              if (typeof treeRowData.expanded === 'boolean') {\n                data.treeNode.expanded = treeRowData.expanded;\n                // 表明是懒加载\n                if ('loading' in treeRowData) {\n                  data.treeNode.loading = treeRowData.loading;\n                }\n                if ('noLazyChildren' in treeRowData) {\n                  data.treeNode.noLazyChildren = treeRowData.noLazyChildren;\n                }\n              }\n            }\n            return (\n              <td\n                style={this.getCellStyle($index, cellIndex, row, column)}\n                class={this.getCellClass($index, cellIndex, row, column)}\n                rowspan={rowspan}\n                colspan={colspan}\n                on-mouseenter={($event) => this.handleCellMouseEnter($event, row)}\n                on-mouseleave={this.handleCellMouseLeave}\n              >\n                {\n                  column.renderCell.call(\n                    this._renderProxy,\n                    this.$createElement,\n                    data,\n                    columnsHidden[cellIndex]\n                  )\n                }\n              </td>\n            );\n          })\n        }\n      </tr>\n    );\n  }\n};\n"
  },
  {
    "path": "packages/table/src/table.vue",
    "content": "<template>\n  <div class=\"el-table\"\n    :class=\"[{\n      'el-table--fit': fit,\n      'el-table--striped': stripe,\n      'el-table--border': border || isGroup,\n      'el-table--hidden': isHidden,\n      'el-table--group': isGroup,\n      'el-table--fluid-height': maxHeight,\n      'el-table--scrollable-x': layout.scrollX,\n      'el-table--scrollable-y': layout.scrollY,\n      'el-table--enable-row-hover': !store.states.isComplex,\n      'el-table--enable-row-transition': (store.states.data || []).length !== 0 && (store.states.data || []).length < 100\n    }, tableSize ? `el-table--${ tableSize }` : '']\"\n    @mouseleave=\"handleMouseLeave($event)\">\n    <div class=\"hidden-columns\" ref=\"hiddenColumns\"><slot></slot></div>\n    <div\n      v-if=\"showHeader\"\n      v-mousewheel=\"handleHeaderFooterMousewheel\"\n      class=\"el-table__header-wrapper\"\n      ref=\"headerWrapper\">\n      <table-header\n        ref=\"tableHeader\"\n        :store=\"store\"\n        :border=\"border\"\n        :default-sort=\"defaultSort\"\n        :style=\"{\n          width: layout.bodyWidth ? layout.bodyWidth + 'px' : ''\n        }\">\n      </table-header>\n    </div>\n    <div\n      class=\"el-table__body-wrapper\"\n      ref=\"bodyWrapper\"\n      :class=\"[layout.scrollX ? `is-scrolling-${scrollPosition}` : 'is-scrolling-none']\"\n      :style=\"[bodyHeight]\">\n      <table-body\n        :context=\"context\"\n        :store=\"store\"\n        :stripe=\"stripe\"\n        :row-class-name=\"rowClassName\"\n        :row-style=\"rowStyle\"\n        :highlight=\"highlightCurrentRow\"\n        :style=\"{\n           width: bodyWidth\n        }\">\n      </table-body>\n      <div\n        v-if=\"!data || data.length === 0\"\n        class=\"el-table__empty-block\"\n        ref=\"emptyBlock\"\n        :style=\"emptyBlockStyle\">\n        <span class=\"el-table__empty-text\" >\n          <slot name=\"empty\">{{ emptyText || t('el.table.emptyText') }}</slot>\n        </span>\n      </div>\n      <div\n        v-if=\"$slots.append\"\n        class=\"el-table__append-wrapper\"\n        ref=\"appendWrapper\">\n        <slot name=\"append\"></slot>\n      </div>\n    </div>\n    <div\n      v-if=\"showSummary\"\n      v-show=\"data && data.length > 0\"\n      v-mousewheel=\"handleHeaderFooterMousewheel\"\n      class=\"el-table__footer-wrapper\"\n      ref=\"footerWrapper\">\n      <table-footer\n        :store=\"store\"\n        :border=\"border\"\n        :sum-text=\"sumText || t('el.table.sumText')\"\n        :summary-method=\"summaryMethod\"\n        :default-sort=\"defaultSort\"\n        :style=\"{\n          width: layout.bodyWidth ? layout.bodyWidth + 'px' : ''\n        }\">\n      </table-footer>\n    </div>\n    <div\n      v-if=\"fixedColumns.length > 0\"\n      v-mousewheel=\"handleFixedMousewheel\"\n      class=\"el-table__fixed\"\n      ref=\"fixedWrapper\"\n      :style=\"[{\n        width: layout.fixedWidth ? layout.fixedWidth + 'px' : ''\n      },\n      fixedHeight]\">\n      <div\n        v-if=\"showHeader\"\n        class=\"el-table__fixed-header-wrapper\"\n        ref=\"fixedHeaderWrapper\" >\n        <table-header\n          ref=\"fixedTableHeader\"\n          fixed=\"left\"\n          :border=\"border\"\n          :store=\"store\"\n          :style=\"{\n            width: bodyWidth\n          }\"></table-header>\n      </div>\n      <div\n        class=\"el-table__fixed-body-wrapper\"\n        ref=\"fixedBodyWrapper\"\n        :style=\"[{\n          top: layout.headerHeight + 'px'\n        },\n        fixedBodyHeight]\">\n        <table-body\n          fixed=\"left\"\n          :store=\"store\"\n          :stripe=\"stripe\"\n          :highlight=\"highlightCurrentRow\"\n          :row-class-name=\"rowClassName\"\n          :row-style=\"rowStyle\"\n          :style=\"{\n            width: bodyWidth\n          }\">\n        </table-body>\n        <div\n          v-if=\"$slots.append\"\n          class=\"el-table__append-gutter\"\n          :style=\"{ height: layout.appendHeight + 'px'}\"></div>\n      </div>\n      <div\n        v-if=\"showSummary\"\n        v-show=\"data && data.length > 0\"\n        class=\"el-table__fixed-footer-wrapper\"\n        ref=\"fixedFooterWrapper\">\n        <table-footer\n          fixed=\"left\"\n          :border=\"border\"\n          :sum-text=\"sumText || t('el.table.sumText')\"\n          :summary-method=\"summaryMethod\"\n          :store=\"store\"\n          :style=\"{\n            width: bodyWidth\n          }\"></table-footer>\n      </div>\n    </div>\n    <div\n      v-if=\"rightFixedColumns.length > 0\"\n      v-mousewheel=\"handleFixedMousewheel\"\n      class=\"el-table__fixed-right\"\n      ref=\"rightFixedWrapper\"\n      :style=\"[{\n        width: layout.rightFixedWidth ? layout.rightFixedWidth + 'px' : '',\n        right: layout.scrollY ? (border ? layout.gutterWidth : (layout.gutterWidth || 0)) + 'px' : ''\n      },\n      fixedHeight]\">\n      <div v-if=\"showHeader\"\n        class=\"el-table__fixed-header-wrapper\"\n        ref=\"rightFixedHeaderWrapper\">\n        <table-header\n          ref=\"rightFixedTableHeader\"\n          fixed=\"right\"\n          :border=\"border\"\n          :store=\"store\"\n          :style=\"{\n            width: bodyWidth\n          }\"></table-header>\n      </div>\n      <div\n        class=\"el-table__fixed-body-wrapper\"\n        ref=\"rightFixedBodyWrapper\"\n        :style=\"[{\n          top: layout.headerHeight + 'px'\n        },\n        fixedBodyHeight]\">\n        <table-body\n          fixed=\"right\"\n          :store=\"store\"\n          :stripe=\"stripe\"\n          :row-class-name=\"rowClassName\"\n          :row-style=\"rowStyle\"\n          :highlight=\"highlightCurrentRow\"\n          :style=\"{\n            width: bodyWidth\n          }\">\n        </table-body>\n         <div\n          v-if=\"$slots.append\"\n          class=\"el-table__append-gutter\"\n          :style=\"{ height: layout.appendHeight + 'px' }\"></div>\n      </div>\n      <div\n        v-if=\"showSummary\"\n        v-show=\"data && data.length > 0\"\n        class=\"el-table__fixed-footer-wrapper\"\n        ref=\"rightFixedFooterWrapper\">\n        <table-footer\n          fixed=\"right\"\n          :border=\"border\"\n          :sum-text=\"sumText || t('el.table.sumText')\"\n          :summary-method=\"summaryMethod\"\n          :store=\"store\"\n          :style=\"{\n            width: bodyWidth\n          }\"></table-footer>\n      </div>\n    </div>\n    <div\n      v-if=\"rightFixedColumns.length > 0\"\n      class=\"el-table__fixed-right-patch\"\n      ref=\"rightFixedPatch\"\n      :style=\"{\n        width: layout.scrollY ? layout.gutterWidth + 'px' : '0',\n        height: layout.headerHeight + 'px'\n      }\"></div>\n    <div class=\"el-table__column-resize-proxy\" ref=\"resizeProxy\" v-show=\"resizeProxyVisible\"></div>\n  </div>\n</template>\n\n<script type=\"text/babel\">\n  import ElCheckbox from 'element-ui/packages/checkbox';\n  import { debounce, throttle } from 'throttle-debounce';\n  import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';\n  import Mousewheel from 'element-ui/src/directives/mousewheel';\n  import Locale from 'element-ui/src/mixins/locale';\n  import Migrating from 'element-ui/src/mixins/migrating';\n  import { createStore, mapStates } from './store/helper';\n  import TableLayout from './table-layout';\n  import TableBody from './table-body';\n  import TableHeader from './table-header';\n  import TableFooter from './table-footer';\n  import { parseHeight } from './util';\n\n  let tableIdSeed = 1;\n\n  export default {\n    name: 'ElTable',\n\n    mixins: [Locale, Migrating],\n\n    directives: {\n      Mousewheel\n    },\n\n    props: {\n      data: {\n        type: Array,\n        default: function() {\n          return [];\n        }\n      },\n\n      size: String,\n\n      width: [String, Number],\n\n      height: [String, Number],\n\n      maxHeight: [String, Number],\n\n      fit: {\n        type: Boolean,\n        default: true\n      },\n\n      stripe: Boolean,\n\n      border: Boolean,\n\n      rowKey: [String, Function],\n\n      context: {},\n\n      showHeader: {\n        type: Boolean,\n        default: true\n      },\n\n      showSummary: Boolean,\n\n      sumText: String,\n\n      summaryMethod: Function,\n\n      rowClassName: [String, Function],\n\n      rowStyle: [Object, Function],\n\n      cellClassName: [String, Function],\n\n      cellStyle: [Object, Function],\n\n      headerRowClassName: [String, Function],\n\n      headerRowStyle: [Object, Function],\n\n      headerCellClassName: [String, Function],\n\n      headerCellStyle: [Object, Function],\n\n      highlightCurrentRow: Boolean,\n\n      highlightSelectionRow: {\n        type: Boolean,\n        default: false\n      },\n\n      currentRowKey: [String, Number],\n\n      emptyText: String,\n\n      expandRowKeys: Array,\n\n      defaultExpandAll: Boolean,\n\n      defaultSort: Object,\n\n      tooltipEffect: String,\n\n      spanMethod: Function,\n\n      selectOnIndeterminate: {\n        type: Boolean,\n        default: true\n      },\n\n      indent: {\n        type: Number,\n        default: 16\n      },\n\n      treeProps: {\n        type: Object,\n        default() {\n          return {\n            hasChildren: 'hasChildren',\n            children: 'children'\n          };\n        }\n      },\n\n      lazy: Boolean,\n\n      load: Function\n    },\n\n    components: {\n      TableHeader,\n      TableFooter,\n      TableBody,\n      ElCheckbox\n    },\n\n    methods: {\n      getMigratingConfig() {\n        return {\n          events: {\n            expand: 'expand is renamed to expand-change'\n          }\n        };\n      },\n\n      setCurrentRow(row) {\n        this.store.commit('setCurrentRow', row);\n      },\n\n      toggleRowSelection(row, selected) {\n        this.store.toggleRowSelection(row, selected, false);\n        this.store.updateAllSelected();\n      },\n\n      toggleRowExpansion(row, expanded) {\n        this.store.toggleRowExpansionAdapter(row, expanded);\n      },\n\n      clearSelection() {\n        this.store.clearSelection();\n      },\n\n      clearFilter(columnKeys) {\n        this.store.clearFilter(columnKeys);\n      },\n\n      clearSort() {\n        this.store.clearSort();\n      },\n\n      handleMouseLeave() {\n        this.store.commit('setHoverRow', null);\n        if (this.hoverState) this.hoverState = null;\n      },\n\n      updateScrollY() {\n        const changed = this.layout.updateScrollY();\n        if (changed) {\n          this.layout.notifyObservers('scrollable');\n          this.layout.updateColumnsWidth();\n        }\n      },\n\n      handleFixedMousewheel(event, data) {\n        const bodyWrapper = this.bodyWrapper;\n        if (Math.abs(data.spinY) > 0) {\n          const currentScrollTop = bodyWrapper.scrollTop;\n          if (data.pixelY < 0 && currentScrollTop !== 0) {\n            event.preventDefault();\n          }\n          if (data.pixelY > 0 && bodyWrapper.scrollHeight - bodyWrapper.clientHeight > currentScrollTop) {\n            event.preventDefault();\n          }\n          bodyWrapper.scrollTop += Math.ceil(data.pixelY / 5);\n        } else {\n          bodyWrapper.scrollLeft += Math.ceil(data.pixelX / 5);\n        }\n      },\n\n      handleHeaderFooterMousewheel(event, data) {\n        const { pixelX, pixelY } = data;\n        if (Math.abs(pixelX) >= Math.abs(pixelY)) {\n          this.bodyWrapper.scrollLeft += data.pixelX / 5;\n        }\n      },\n\n      // TODO 使用 CSS transform\n      syncPostion() {\n        const { scrollLeft, scrollTop, offsetWidth, scrollWidth } = this.bodyWrapper;\n        const { headerWrapper, footerWrapper, fixedBodyWrapper, rightFixedBodyWrapper } = this.$refs;\n        if (headerWrapper) headerWrapper.scrollLeft = scrollLeft;\n        if (footerWrapper) footerWrapper.scrollLeft = scrollLeft;\n        if (fixedBodyWrapper) fixedBodyWrapper.scrollTop = scrollTop;\n        if (rightFixedBodyWrapper) rightFixedBodyWrapper.scrollTop = scrollTop;\n        const maxScrollLeftPosition = scrollWidth - offsetWidth - 1;\n        if (scrollLeft >= maxScrollLeftPosition) {\n          this.scrollPosition = 'right';\n        } else if (scrollLeft === 0) {\n          this.scrollPosition = 'left';\n        } else {\n          this.scrollPosition = 'middle';\n        }\n      },\n\n      throttleSyncPostion: throttle(16, function() {\n        this.syncPostion();\n      }),\n\n      onScroll(evt) {\n        let raf = window.requestAnimationFrame;\n        if (!raf) {\n          this.throttleSyncPostion();\n        } else {\n          raf(this.syncPostion);\n        }\n      },\n\n      bindEvents() {\n        this.bodyWrapper.addEventListener('scroll', this.onScroll, { passive: true });\n        if (this.fit) {\n          addResizeListener(this.$el, this.resizeListener);\n        }\n      },\n\n      unbindEvents() {\n        this.bodyWrapper.removeEventListener('scroll', this.onScroll, { passive: true });\n        if (this.fit) {\n          removeResizeListener(this.$el, this.resizeListener);\n        }\n      },\n\n      resizeListener() {\n        if (!this.$ready) return;\n        let shouldUpdateLayout = false;\n        const el = this.$el;\n        const { width: oldWidth, height: oldHeight } = this.resizeState;\n\n        const width = el.offsetWidth;\n        if (oldWidth !== width) {\n          shouldUpdateLayout = true;\n        }\n\n        const height = el.offsetHeight;\n        if ((this.height || this.shouldUpdateHeight) && oldHeight !== height) {\n          shouldUpdateLayout = true;\n        }\n\n        if (shouldUpdateLayout) {\n          this.resizeState.width = width;\n          this.resizeState.height = height;\n          this.doLayout();\n        }\n      },\n\n      doLayout() {\n        if (this.shouldUpdateHeight) {\n          this.layout.updateElsHeight();\n        }\n        this.layout.updateColumnsWidth();\n      },\n\n      sort(prop, order) {\n        this.store.commit('sort', { prop, order });\n      },\n\n      toggleAllSelection() {\n        this.store.commit('toggleAllSelection');\n      }\n\n    },\n\n    computed: {\n      tableSize() {\n        return this.size || (this.$ELEMENT || {}).size;\n      },\n\n      bodyWrapper() {\n        return this.$refs.bodyWrapper;\n      },\n\n      shouldUpdateHeight() {\n        return this.height ||\n          this.maxHeight ||\n          this.fixedColumns.length > 0 ||\n          this.rightFixedColumns.length > 0;\n      },\n\n      bodyWidth() {\n        const { bodyWidth, scrollY, gutterWidth } = this.layout;\n        return bodyWidth ? bodyWidth - (scrollY ? gutterWidth : 0) + 'px' : '';\n      },\n\n      bodyHeight() {\n        const { headerHeight = 0, bodyHeight, footerHeight = 0} = this.layout;\n        if (this.height) {\n          return {\n            height: bodyHeight ? bodyHeight + 'px' : ''\n          };\n        } else if (this.maxHeight) {\n          const maxHeight = parseHeight(this.maxHeight);\n          if (typeof maxHeight === 'number') {\n            return {\n              'max-height': (maxHeight - footerHeight - (this.showHeader ? headerHeight : 0)) + 'px'\n            };\n          }\n        }\n        return {};\n      },\n\n      fixedBodyHeight() {\n        if (this.height) {\n          return {\n            height: this.layout.fixedBodyHeight ? this.layout.fixedBodyHeight + 'px' : ''\n          };\n        } else if (this.maxHeight) {\n          let maxHeight = parseHeight(this.maxHeight);\n          if (typeof maxHeight === 'number') {\n            maxHeight = this.layout.scrollX ? maxHeight - this.layout.gutterWidth : maxHeight;\n            if (this.showHeader) {\n              maxHeight -= this.layout.headerHeight;\n            }\n            maxHeight -= this.layout.footerHeight;\n            return {\n              'max-height': maxHeight + 'px'\n            };\n          }\n        }\n        return {};\n      },\n\n      fixedHeight() {\n        if (this.maxHeight) {\n          if (this.showSummary) {\n            return {\n              bottom: 0\n            };\n          }\n          return {\n            bottom: (this.layout.scrollX && this.data.length) ? this.layout.gutterWidth + 'px' : ''\n          };\n        } else {\n          if (this.showSummary) {\n            return {\n              height: this.layout.tableHeight ? this.layout.tableHeight + 'px' : ''\n            };\n          }\n          return {\n            height: this.layout.viewportHeight ? this.layout.viewportHeight + 'px' : ''\n          };\n        }\n      },\n\n      emptyBlockStyle() {\n        if (this.data && this.data.length) return null;\n        let height = '100%';\n        if (this.layout.appendHeight) {\n          height = `calc(100% - ${this.layout.appendHeight}px)`;\n        }\n        return {\n          width: this.bodyWidth,\n          height\n        };\n      },\n\n      ...mapStates({\n        selection: 'selection',\n        columns: 'columns',\n        tableData: 'data',\n        fixedColumns: 'fixedColumns',\n        rightFixedColumns: 'rightFixedColumns'\n      })\n    },\n\n    watch: {\n      height: {\n        immediate: true,\n        handler(value) {\n          this.layout.setHeight(value);\n        }\n      },\n\n      maxHeight: {\n        immediate: true,\n        handler(value) {\n          this.layout.setMaxHeight(value);\n        }\n      },\n\n      currentRowKey: {\n        immediate: true,\n        handler(value) {\n          if (!this.rowKey) return;\n          this.store.setCurrentRowKey(value);\n        }\n      },\n\n      data: {\n        immediate: true,\n        handler(value) {\n          this.store.commit('setData', value);\n        }\n      },\n\n      expandRowKeys: {\n        immediate: true,\n        handler(newVal) {\n          if (newVal) {\n            this.store.setExpandRowKeysAdapter(newVal);\n          }\n        }\n      }\n    },\n\n    created() {\n      this.tableId = 'el-table_' + tableIdSeed++;\n      this.debouncedUpdateLayout = debounce(50, () => this.doLayout());\n    },\n\n    mounted() {\n      this.bindEvents();\n      this.store.updateColumns();\n      this.doLayout();\n\n      this.resizeState = {\n        width: this.$el.offsetWidth,\n        height: this.$el.offsetHeight\n      };\n\n      // init filters\n      this.store.states.columns.forEach(column => {\n        if (column.filteredValue && column.filteredValue.length) {\n          this.store.commit('filterChange', {\n            column,\n            values: column.filteredValue,\n            silent: true\n          });\n        }\n      });\n\n      this.$ready = true;\n    },\n\n    destroyed() {\n      this.unbindEvents();\n    },\n\n    data() {\n      const { hasChildren = 'hasChildren', children = 'children' } = this.treeProps;\n      this.store = createStore(this, {\n        rowKey: this.rowKey,\n        defaultExpandAll: this.defaultExpandAll,\n        selectOnIndeterminate: this.selectOnIndeterminate,\n        // TreeTable 的相关配置\n        indent: this.indent,\n        lazy: this.lazy,\n        lazyColumnIdentifier: hasChildren,\n        childrenColumnName: children\n      });\n      const layout = new TableLayout({\n        store: this.store,\n        table: this,\n        fit: this.fit,\n        showHeader: this.showHeader\n      });\n      return {\n        layout,\n        isHidden: false,\n        renderExpanded: null,\n        resizeProxyVisible: false,\n        resizeState: {\n          width: null,\n          height: null\n        },\n        // 是否拥有多级表头\n        isGroup: false,\n        scrollPosition: 'left'\n      };\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/table/src/util.js",
    "content": "import { getValueByPath } from 'element-ui/src/utils/util';\n\nexport const getCell = function(event) {\n  let cell = event.target;\n\n  while (cell && cell.tagName.toUpperCase() !== 'HTML') {\n    if (cell.tagName.toUpperCase() === 'TD') {\n      return cell;\n    }\n    cell = cell.parentNode;\n  }\n\n  return null;\n};\n\nconst isObject = function(obj) {\n  return obj !== null && typeof obj === 'object';\n};\n\nexport const orderBy = function(array, sortKey, reverse, sortMethod, sortBy) {\n  if (!sortKey && !sortMethod && (!sortBy || Array.isArray(sortBy) && !sortBy.length)) {\n    return array;\n  }\n  if (typeof reverse === 'string') {\n    reverse = reverse === 'descending' ? -1 : 1;\n  } else {\n    reverse = (reverse && reverse < 0) ? -1 : 1;\n  }\n  const getKey = sortMethod ? null : function(value, index) {\n    if (sortBy) {\n      if (!Array.isArray(sortBy)) {\n        sortBy = [sortBy];\n      }\n      return sortBy.map(function(by) {\n        if (typeof by === 'string') {\n          return getValueByPath(value, by);\n        } else {\n          return by(value, index, array);\n        }\n      });\n    }\n    if (sortKey !== '$key') {\n      if (isObject(value) && '$value' in value) value = value.$value;\n    }\n    return [isObject(value) ? getValueByPath(value, sortKey) : value];\n  };\n  const compare = function(a, b) {\n    if (sortMethod) {\n      return sortMethod(a.value, b.value);\n    }\n    for (let i = 0, len = a.key.length; i < len; i++) {\n      if (a.key[i] < b.key[i]) {\n        return -1;\n      }\n      if (a.key[i] > b.key[i]) {\n        return 1;\n      }\n    }\n    return 0;\n  };\n  return array.map(function(value, index) {\n    return {\n      value: value,\n      index: index,\n      key: getKey ? getKey(value, index) : null\n    };\n  }).sort(function(a, b) {\n    let order = compare(a, b);\n    if (!order) {\n      // make stable https://en.wikipedia.org/wiki/Sorting_algorithm#Stability\n      order = a.index - b.index;\n    }\n    return order * reverse;\n  }).map(item => item.value);\n};\n\nexport const getColumnById = function(table, columnId) {\n  let column = null;\n  table.columns.forEach(function(item) {\n    if (item.id === columnId) {\n      column = item;\n    }\n  });\n  return column;\n};\n\nexport const getColumnByKey = function(table, columnKey) {\n  let column = null;\n  for (let i = 0; i < table.columns.length; i++) {\n    const item = table.columns[i];\n    if (item.columnKey === columnKey) {\n      column = item;\n      break;\n    }\n  }\n  return column;\n};\n\nexport const getColumnByCell = function(table, cell) {\n  const matches = (cell.className || '').match(/el-table_[^\\s]+/gm);\n  if (matches) {\n    return getColumnById(table, matches[0]);\n  }\n  return null;\n};\n\nexport const getRowIdentity = (row, rowKey) => {\n  if (!row) throw new Error('row is required when get row identity');\n  if (typeof rowKey === 'string') {\n    if (rowKey.indexOf('.') < 0) {\n      return row[rowKey];\n    }\n    let key = rowKey.split('.');\n    let current = row;\n    for (let i = 0; i < key.length; i++) {\n      current = current[key[i]];\n    }\n    return current;\n  } else if (typeof rowKey === 'function') {\n    return rowKey.call(null, row);\n  }\n};\n\nexport const getKeysMap = function(array, rowKey) {\n  const arrayMap = {};\n  (array || []).forEach((row, index) => {\n    arrayMap[getRowIdentity(row, rowKey)] = { row, index };\n  });\n  return arrayMap;\n};\n\nfunction hasOwn(obj, key) {\n  return Object.prototype.hasOwnProperty.call(obj, key);\n}\n\nexport function mergeOptions(defaults, config) {\n  const options = {};\n  let key;\n  for (key in defaults) {\n    options[key] = defaults[key];\n  }\n  for (key in config) {\n    if (hasOwn(config, key)) {\n      const value = config[key];\n      if (typeof value !== 'undefined') {\n        options[key] = value;\n      }\n    }\n  }\n  return options;\n}\n\nexport function parseWidth(width) {\n  if (width !== undefined) {\n    width = parseInt(width, 10);\n    if (isNaN(width)) {\n      width = null;\n    }\n  }\n  return width;\n}\n\nexport function parseMinWidth(minWidth) {\n  if (typeof minWidth !== 'undefined') {\n    minWidth = parseWidth(minWidth);\n    if (isNaN(minWidth)) {\n      minWidth = 80;\n    }\n  }\n  return minWidth;\n};\n\nexport function parseHeight(height) {\n  if (typeof height === 'number') {\n    return height;\n  }\n  if (typeof height === 'string') {\n    if (/^\\d+(?:px)?$/.test(height)) {\n      return parseInt(height, 10);\n    } else {\n      return height;\n    }\n  }\n  return null;\n}\n\n// https://github.com/reduxjs/redux/blob/master/src/compose.js\nexport function compose(...funcs) {\n  if (funcs.length === 0) {\n    return arg => arg;\n  }\n  if (funcs.length === 1) {\n    return funcs[0];\n  }\n  return funcs.reduce((a, b) => (...args) => a(b(...args)));\n}\n\nexport function toggleRowStatus(statusArr, row, newVal) {\n  let changed = false;\n  const index = statusArr.indexOf(row);\n  const included = index !== -1;\n\n  const addRow = () => {\n    statusArr.push(row);\n    changed = true;\n  };\n  const removeRow = () => {\n    statusArr.splice(index, 1);\n    changed = true;\n  };\n\n  if (typeof newVal === 'boolean') {\n    if (newVal && !included) {\n      addRow();\n    } else if (!newVal && included) {\n      removeRow();\n    }\n  } else {\n    if (included) {\n      removeRow();\n    } else {\n      addRow();\n    }\n  }\n  return changed;\n}\n\nexport function walkTreeNode(root, cb, childrenKey = 'children', lazyKey = 'hasChildren') {\n  const isNil = (array) => !(Array.isArray(array) && array.length);\n\n  function _walker(parent, children, level) {\n    cb(parent, children, level);\n    children.forEach(item => {\n      if (item[lazyKey]) {\n        cb(item, null, level + 1);\n        return;\n      }\n      const children = item[childrenKey];\n      if (!isNil(children)) {\n        _walker(item, children, level + 1);\n      }\n    });\n  }\n\n  root.forEach(item => {\n    if (item[lazyKey]) {\n      cb(item, null, 0);\n      return;\n    }\n    const children = item[childrenKey];\n    if (!isNil(children)) {\n      _walker(item, children, 0);\n    }\n  });\n}\n\nexport const objectEquals = function(objectA, objectB) {\n  // 取对象a和b的属性名\n  let aProps = Object.getOwnPropertyNames(objectA);\n  let bProps = Object.getOwnPropertyNames(objectB);\n  // 判断属性名的length是否一致\n  if (aProps.length !== bProps.length) {\n    return false;\n  }\n  // 循环取出属性名，再判断属性值是否一致\n  for (let i = 0; i < aProps.length; i++) {\n    let propName = aProps[i];\n    if (objectA[propName] !== objectB[propName]) {\n      return false;\n    }\n  }\n  return true;\n};\n"
  },
  {
    "path": "packages/table-column/index.js",
    "content": "import ElTableColumn from '../table/src/table-column';\n\n/* istanbul ignore next */\nElTableColumn.install = function(Vue) {\n  Vue.component(ElTableColumn.name, ElTableColumn);\n};\n\nexport default ElTableColumn;\n"
  },
  {
    "path": "packages/tabs/index.js",
    "content": "import ElTabs from './src/tabs';\n\n/* istanbul ignore next */\nElTabs.install = function(Vue) {\n  Vue.component(ElTabs.name, ElTabs);\n};\n\nexport default ElTabs;\n"
  },
  {
    "path": "packages/tabs/src/tab-bar.vue",
    "content": "<template>\n  <div class=\"el-tabs__active-bar\" :class=\"`is-${ rootTabs.tabPosition }`\" :style=\"barStyle\"></div>\n</template>\n<script>\n  import { arrayFind } from 'element-ui/src/utils/util';\n  export default {\n    name: 'TabBar',\n\n    props: {\n      tabs: Array\n    },\n\n    inject: ['rootTabs'],\n\n    computed: {\n      barStyle: {\n        get() {\n          let style = {};\n          let offset = 0;\n          let tabSize = 0;\n          const sizeName = ['top', 'bottom'].indexOf(this.rootTabs.tabPosition) !== -1 ? 'width' : 'height';\n          const sizeDir = sizeName === 'width' ? 'x' : 'y';\n          const firstUpperCase = str => {\n            return str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());\n          };\n          this.tabs.every((tab, index) => {\n            let $el = arrayFind(this.$parent.$refs.tabs || [], t => t.id.replace('tab-', '') === tab.paneName);\n            if (!$el) { return false; }\n\n            if (!tab.active) {\n              offset += $el[`client${firstUpperCase(sizeName)}`];\n              return true;\n            } else {\n              tabSize = $el[`client${firstUpperCase(sizeName)}`];\n              const tabStyles = window.getComputedStyle($el);\n              if (sizeName === 'width' && this.tabs.length > 1) {\n                tabSize -= parseFloat(tabStyles.paddingLeft) + parseFloat(tabStyles.paddingRight);\n              }\n              if (sizeName === 'width') {\n                offset += parseFloat(tabStyles.paddingLeft);\n              }\n              return false;\n            }\n          });\n\n          const transform = `translate${firstUpperCase(sizeDir)}(${offset}px)`;\n          style[sizeName] = tabSize + 'px';\n          style.transform = transform;\n          style.msTransform = transform;\n          style.webkitTransform = transform;\n\n          return style;\n        }\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/tabs/src/tab-nav.vue",
    "content": "<script>\n  import TabBar from './tab-bar';\n  import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';\n\n  function noop() {}\n  const firstUpperCase = str => {\n    return str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());\n  };\n\n  export default {\n    name: 'TabNav',\n\n    components: {\n      TabBar\n    },\n\n    inject: ['rootTabs'],\n\n    props: {\n      panes: Array,\n      currentName: String,\n      editable: Boolean,\n      onTabClick: {\n        type: Function,\n        default: noop\n      },\n      onTabRemove: {\n        type: Function,\n        default: noop\n      },\n      type: String,\n      stretch: Boolean\n    },\n\n    data() {\n      return {\n        scrollable: false,\n        navOffset: 0,\n        isFocus: false,\n        focusable: true\n      };\n    },\n\n    computed: {\n      navStyle() {\n        const dir = ['top', 'bottom'].indexOf(this.rootTabs.tabPosition) !== -1 ? 'X' : 'Y';\n        return {\n          transform: `translate${dir}(-${this.navOffset}px)`\n        };\n      },\n      sizeName() {\n        return ['top', 'bottom'].indexOf(this.rootTabs.tabPosition) !== -1 ? 'width' : 'height';\n      }\n    },\n\n    methods: {\n      scrollPrev() {\n        const containerSize = this.$refs.navScroll[`offset${firstUpperCase(this.sizeName)}`];\n        const currentOffset = this.navOffset;\n\n        if (!currentOffset) return;\n\n        let newOffset = currentOffset > containerSize\n          ? currentOffset - containerSize\n          : 0;\n\n        this.navOffset = newOffset;\n      },\n      scrollNext() {\n        const navSize = this.$refs.nav[`offset${firstUpperCase(this.sizeName)}`];\n        const containerSize = this.$refs.navScroll[`offset${firstUpperCase(this.sizeName)}`];\n        const currentOffset = this.navOffset;\n\n        if (navSize - currentOffset <= containerSize) return;\n\n        let newOffset = navSize - currentOffset > containerSize * 2\n          ? currentOffset + containerSize\n          : (navSize - containerSize);\n\n        this.navOffset = newOffset;\n      },\n      scrollToActiveTab() {\n        if (!this.scrollable) return;\n        const nav = this.$refs.nav;\n        const activeTab = this.$el.querySelector('.is-active');\n        if (!activeTab) return;\n        const navScroll = this.$refs.navScroll;\n        const isHorizontal = ['top', 'bottom'].indexOf(this.rootTabs.tabPosition) !== -1;\n        const activeTabBounding = activeTab.getBoundingClientRect();\n        const navScrollBounding = navScroll.getBoundingClientRect();\n        const maxOffset = isHorizontal\n          ? nav.offsetWidth - navScrollBounding.width\n          : nav.offsetHeight - navScrollBounding.height;\n        const currentOffset = this.navOffset;\n        let newOffset = currentOffset;\n\n        if (isHorizontal) {\n          if (activeTabBounding.left < navScrollBounding.left) {\n            newOffset = currentOffset - (navScrollBounding.left - activeTabBounding.left);\n          }\n          if (activeTabBounding.right > navScrollBounding.right) {\n            newOffset = currentOffset + activeTabBounding.right - navScrollBounding.right;\n          }\n        } else {\n          if (activeTabBounding.top < navScrollBounding.top) {\n            newOffset = currentOffset - (navScrollBounding.top - activeTabBounding.top);\n          }\n          if (activeTabBounding.bottom > navScrollBounding.bottom) {\n            newOffset = currentOffset + (activeTabBounding.bottom - navScrollBounding.bottom);\n          }\n        }\n        newOffset = Math.max(newOffset, 0);\n        this.navOffset = Math.min(newOffset, maxOffset);\n      },\n      update() {\n        if (!this.$refs.nav) return;\n        const sizeName = this.sizeName;\n        const navSize = this.$refs.nav[`offset${firstUpperCase(sizeName)}`];\n        const containerSize = this.$refs.navScroll[`offset${firstUpperCase(sizeName)}`];\n        const currentOffset = this.navOffset;\n\n        if (containerSize < navSize) {\n          const currentOffset = this.navOffset;\n          this.scrollable = this.scrollable || {};\n          this.scrollable.prev = currentOffset;\n          this.scrollable.next = currentOffset + containerSize < navSize;\n          if (navSize - currentOffset < containerSize) {\n            this.navOffset = navSize - containerSize;\n          }\n        } else {\n          this.scrollable = false;\n          if (currentOffset > 0) {\n            this.navOffset = 0;\n          }\n        }\n      },\n      changeTab(e) {\n        const keyCode = e.keyCode;\n        let nextIndex;\n        let currentIndex, tabList;\n        if ([37, 38, 39, 40].indexOf(keyCode) !== -1) { // 左右上下键更换tab\n          tabList = e.currentTarget.querySelectorAll('[role=tab]');\n          currentIndex = Array.prototype.indexOf.call(tabList, e.target);\n        } else {\n          return;\n        }\n        if (keyCode === 37 || keyCode === 38) { // left\n          if (currentIndex === 0) { // first\n            nextIndex = tabList.length - 1;\n          } else {\n            nextIndex = currentIndex - 1;\n          }\n        } else { // right\n          if (currentIndex < tabList.length - 1) { // not last\n            nextIndex = currentIndex + 1;\n          } else {\n            nextIndex = 0;\n          }\n        }\n        tabList[nextIndex].focus(); // 改变焦点元素\n        tabList[nextIndex].click(); // 选中下一个tab\n        this.setFocus();\n      },\n      setFocus() {\n        if (this.focusable) {\n          this.isFocus = true;\n        }\n      },\n      removeFocus() {\n        this.isFocus = false;\n      },\n      visibilityChangeHandler() {\n        const visibility = document.visibilityState;\n        if (visibility === 'hidden') {\n          this.focusable = false;\n        } else if (visibility === 'visible') {\n          setTimeout(() => {\n            this.focusable = true;\n          }, 50);\n        }\n      },\n      windowBlurHandler() {\n        this.focusable = false;\n      },\n      windowFocusHandler() {\n        setTimeout(() => {\n          this.focusable = true;\n        }, 50);\n      }\n    },\n\n    updated() {\n      this.update();\n    },\n\n    render(h) {\n      const {\n        type,\n        panes,\n        editable,\n        stretch,\n        onTabClick,\n        onTabRemove,\n        navStyle,\n        scrollable,\n        scrollNext,\n        scrollPrev,\n        changeTab,\n        setFocus,\n        removeFocus\n      } = this;\n      const scrollBtn = scrollable\n        ? [\n          <span class={['el-tabs__nav-prev', scrollable.prev ? '' : 'is-disabled']} on-click={scrollPrev}><i class=\"el-icon-arrow-left\"></i></span>,\n          <span class={['el-tabs__nav-next', scrollable.next ? '' : 'is-disabled']} on-click={scrollNext}><i class=\"el-icon-arrow-right\"></i></span>\n        ] : null;\n\n      const tabs = this._l(panes, (pane, index) => {\n        let tabName = pane.name || pane.index || index;\n        const closable = pane.isClosable || editable;\n\n        pane.index = `${index}`;\n\n        const btnClose = closable\n          ? <span class=\"el-icon-close\" on-click={(ev) => { onTabRemove(pane, ev); }}></span>\n          : null;\n\n        const tabLabelContent = pane.$slots.label || pane.label;\n        const tabindex = pane.active ? 0 : -1;\n        return (\n          <div\n            class={{\n              'el-tabs__item': true,\n              [`is-${ this.rootTabs.tabPosition }`]: true,\n              'is-active': pane.active,\n              'is-disabled': pane.disabled,\n              'is-closable': closable,\n              'is-focus': this.isFocus\n            }}\n            id={`tab-${tabName}`}\n            key={`tab-${tabName}`}\n            aria-controls={`pane-${tabName}`}\n            role=\"tab\"\n            aria-selected={ pane.active }\n            ref=\"tabs\"\n            tabindex={tabindex}\n            refInFor\n            on-focus={ ()=> { setFocus(); }}\n            on-blur ={ ()=> { removeFocus(); }}\n            on-click={(ev) => { removeFocus(); onTabClick(pane, tabName, ev); }}\n            on-keydown={(ev) => { if (closable && (ev.keyCode === 46 || ev.keyCode === 8)) { onTabRemove(pane, ev);} }}\n          >\n            {tabLabelContent}\n            {btnClose}\n          </div>\n        );\n      });\n      return (\n        <div class={['el-tabs__nav-wrap', scrollable ? 'is-scrollable' : '', `is-${ this.rootTabs.tabPosition }`]}>\n          {scrollBtn}\n          <div class={['el-tabs__nav-scroll']} ref=\"navScroll\">\n            <div\n              class={['el-tabs__nav', `is-${ this.rootTabs.tabPosition }`, stretch && ['top', 'bottom'].indexOf(this.rootTabs.tabPosition) !== -1 ? 'is-stretch' : '']}\n              ref=\"nav\"\n              style={navStyle}\n              role=\"tablist\"\n              on-keydown={ changeTab }\n            >\n              {!type ? <tab-bar tabs={panes}></tab-bar> : null}\n              {tabs}\n            </div>\n          </div>\n        </div>\n      );\n    },\n\n    mounted() {\n      addResizeListener(this.$el, this.update);\n      document.addEventListener('visibilitychange', this.visibilityChangeHandler);\n      window.addEventListener('blur', this.windowBlurHandler);\n      window.addEventListener('focus', this.windowFocusHandler);\n      setTimeout(() => {\n        this.scrollToActiveTab();\n      }, 0);\n    },\n\n    beforeDestroy() {\n      if (this.$el && this.update) removeResizeListener(this.$el, this.update);\n      document.removeEventListener('visibilitychange', this.visibilityChangeHandler);\n      window.removeEventListener('blur', this.windowBlurHandler);\n      window.removeEventListener('focus', this.windowFocusHandler);\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/tabs/src/tab-pane.vue",
    "content": "<template>\n  <div\n    class=\"el-tab-pane\"\n    v-if=\"(!lazy || loaded) || active\"\n    v-show=\"active\"\n    role=\"tabpanel\"\n    :aria-hidden=\"!active\"\n    :id=\"`pane-${paneName}`\"\n    :aria-labelledby=\"`tab-${paneName}`\"\n  >\n    <slot></slot>\n  </div>\n</template>\n<script>\n  export default {\n    name: 'ElTabPane',\n\n    componentName: 'ElTabPane',\n\n    props: {\n      label: String,\n      labelContent: Function,\n      name: String,\n      closable: Boolean,\n      disabled: Boolean,\n      lazy: Boolean\n    },\n\n    data() {\n      return {\n        index: null,\n        loaded: false\n      };\n    },\n\n    computed: {\n      isClosable() {\n        return this.closable || this.$parent.closable;\n      },\n      active() {\n        const active = this.$parent.currentName === (this.name || this.index);\n        if (active) {\n          this.loaded = true;\n        }\n        return active;\n      },\n      paneName() {\n        return this.name || this.index;\n      }\n    },\n\n    updated() {\n      this.$parent.$emit('tab-nav-update');\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/tabs/src/tabs.vue",
    "content": "<script>\n  import TabNav from './tab-nav';\n\n  export default {\n    name: 'ElTabs',\n\n    components: {\n      TabNav\n    },\n\n    props: {\n      type: String,\n      activeName: String,\n      closable: Boolean,\n      addable: Boolean,\n      value: {},\n      editable: Boolean,\n      tabPosition: {\n        type: String,\n        default: 'top'\n      },\n      beforeLeave: Function,\n      stretch: Boolean\n    },\n\n    provide() {\n      return {\n        rootTabs: this\n      };\n    },\n\n    data() {\n      return {\n        currentName: this.value || this.activeName,\n        panes: []\n      };\n    },\n\n    watch: {\n      activeName(value) {\n        this.setCurrentName(value);\n      },\n      value(value) {\n        this.setCurrentName(value);\n      },\n      currentName(value) {\n        if (this.$refs.nav) {\n          this.$nextTick(() => {\n            this.$refs.nav.$nextTick(_ => {\n              this.$refs.nav.scrollToActiveTab();\n            });\n          });\n        }\n      }\n    },\n\n    methods: {\n      calcPaneInstances(isForceUpdate = false) {\n        if (this.$slots.default) {\n          const paneSlots = this.$slots.default.filter(vnode => vnode.tag &&\n            vnode.componentOptions && vnode.componentOptions.Ctor.options.name === 'ElTabPane');\n          // update indeed\n          const panes = paneSlots.map(({ componentInstance }) => componentInstance);\n          const panesChanged = !(panes.length === this.panes.length && panes.every((pane, index) => pane === this.panes[index]));\n          if (isForceUpdate || panesChanged) {\n            this.panes = panes;\n          }\n        } else if (this.panes.length !== 0) {\n          this.panes = [];\n        }\n      },\n      handleTabClick(tab, tabName, event) {\n        if (tab.disabled) return;\n        this.setCurrentName(tabName);\n        this.$emit('tab-click', tab, event);\n      },\n      handleTabRemove(pane, ev) {\n        if (pane.disabled) return;\n        ev.stopPropagation();\n        this.$emit('edit', pane.name, 'remove');\n        this.$emit('tab-remove', pane.name);\n      },\n      handleTabAdd() {\n        this.$emit('edit', null, 'add');\n        this.$emit('tab-add');\n      },\n      setCurrentName(value) {\n        const changeCurrentName = () => {\n          this.currentName = value;\n          this.$emit('input', value);\n        };\n        if (this.currentName !== value && this.beforeLeave) {\n          const before = this.beforeLeave(value, this.currentName);\n          if (before && before.then) {\n            before\n              .then(() => {\n                changeCurrentName();\n                this.$refs.nav && this.$refs.nav.removeFocus();\n              }, () => {\n                // https://github.com/ElemeFE/element/pull/14816\n                // ignore promise rejection in `before-leave` hook\n              });\n          } else if (before !== false) {\n            changeCurrentName();\n          }\n        } else {\n          changeCurrentName();\n        }\n      }\n    },\n\n    render(h) {\n      let {\n        type,\n        handleTabClick,\n        handleTabRemove,\n        handleTabAdd,\n        currentName,\n        panes,\n        editable,\n        addable,\n        tabPosition,\n        stretch\n      } = this;\n\n      const newButton = editable || addable\n        ? (\n          <span\n            class=\"el-tabs__new-tab\"\n            on-click={ handleTabAdd }\n            tabindex=\"0\"\n            on-keydown={ (ev) => { if (ev.keyCode === 13) { handleTabAdd(); }} }\n          >\n            <i class=\"el-icon-plus\"></i>\n          </span>\n        )\n        : null;\n\n      const navData = {\n        props: {\n          currentName,\n          onTabClick: handleTabClick,\n          onTabRemove: handleTabRemove,\n          editable,\n          type,\n          panes,\n          stretch\n        },\n        ref: 'nav'\n      };\n      const header = (\n        <div class={['el-tabs__header', `is-${tabPosition}`]}>\n          {newButton}\n          <tab-nav { ...navData }></tab-nav>\n        </div>\n      );\n      const panels = (\n        <div class=\"el-tabs__content\">\n          {this.$slots.default}\n        </div>\n      );\n\n      return (\n        <div class={{\n          'el-tabs': true,\n          'el-tabs--card': type === 'card',\n          [`el-tabs--${tabPosition}`]: true,\n          'el-tabs--border-card': type === 'border-card'\n        }}>\n          { tabPosition !== 'bottom' ? [header, panels] : [panels, header] }\n        </div>\n      );\n    },\n  \n    created() {\n      if (!this.currentName) {\n        this.setCurrentName('0');\n      }\n\n      this.$on('tab-nav-update', this.calcPaneInstances.bind(null, true));\n    },\n\n    mounted() {\n      this.calcPaneInstances();\n    },\n\n    updated() {\n      this.calcPaneInstances();\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/tag/index.js",
    "content": "import ElTag from './src/tag';\n\n/* istanbul ignore next */\nElTag.install = function(Vue) {\n  Vue.component(ElTag.name, ElTag);\n};\n\nexport default ElTag;\n"
  },
  {
    "path": "packages/tag/src/tag.vue",
    "content": "<script>\n  export default {\n    name: 'ElTag',\n    props: {\n      text: String,\n      closable: Boolean,\n      type: String,\n      hit: Boolean,\n      disableTransitions: Boolean,\n      color: String,\n      size: String,\n      effect: {\n        type: String,\n        default: 'light',\n        validator(val) {\n          return ['dark', 'light', 'plain'].indexOf(val) !== -1;\n        }\n      }\n    },\n    methods: {\n      handleClose(event) {\n        event.stopPropagation();\n        this.$emit('close', event);\n      },\n      handleClick(event) {\n        this.$emit('click', event);\n      }\n    },\n    computed: {\n      tagSize() {\n        return this.size || (this.$ELEMENT || {}).size;\n      }\n    },\n    render(h) {\n      const { type, tagSize, hit, effect } = this;\n      const classes = [\n        'el-tag',\n        type ? `el-tag--${type}` : '',\n        tagSize ? `el-tag--${tagSize}` : '',\n        effect ? `el-tag--${effect}` : '',\n        hit && 'is-hit'\n      ];\n      const tagEl = (\n        <span\n          class={ classes }\n          style={{ backgroundColor: this.color }}\n          on-click={ this.handleClick }>\n          { this.$slots.default }\n          {\n            this.closable && <i class=\"el-tag__close el-icon-close\" on-click={ this.handleClose }></i>\n          }\n        </span>\n      );\n\n      return this.disableTransitions ? tagEl : <transition name=\"el-zoom-in-center\">{ tagEl }</transition>;\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/theme-chalk/.gitignore",
    "content": "node_modules\nlib\nnpm-debug*\n"
  },
  {
    "path": "packages/theme-chalk/README.md",
    "content": "# element-theme-chalk\n> element component chalk theme.\n\n\n## Installation\n```shell\nnpm i element-theme-chalk -S\n```\n\n## Usage\n\nUse Sass import\n```css\n@import 'element-theme-chalk';\n```\n\nOr Use webpack\n```javascript\nimport 'element-theme-chalk';\n```\n\nOr\n```html\n<link rel=\"stylesheet\" href=\"path/to/node_modules/element-theme-chalk/lib/index.css\">\n```\n\n##  Import on demand\n```javascript\nimport 'element-theme-chalk/lib/input.css';\nimport 'element-theme-chalk/lib/select.css';\n\n// ...\n```\n"
  },
  {
    "path": "packages/theme-chalk/gulpfile.js",
    "content": "'use strict';\n\nconst { series, src, dest } = require('gulp');\nconst sass = require('gulp-sass');\nconst autoprefixer = require('gulp-autoprefixer');\nconst cssmin = require('gulp-cssmin');\n\nfunction compile() {\n  return src('./src/*.scss')\n    .pipe(sass.sync())\n    .pipe(autoprefixer({\n      browsers: ['ie > 9', 'last 2 versions'],\n      cascade: false\n    }))\n    .pipe(cssmin())\n    .pipe(dest('./lib'));\n}\n\nfunction copyfont() {\n  return src('./src/fonts/**')\n    .pipe(cssmin())\n    .pipe(dest('./lib/fonts'));\n}\n\nexports.build = series(compile, copyfont);\n"
  },
  {
    "path": "packages/theme-chalk/package.json",
    "content": "{\n  \"name\": \"element-theme-chalk\",\n  \"version\": \"2.15.14\",\n  \"description\": \"Element component chalk theme.\",\n  \"main\": \"lib/index.css\",\n  \"style\": \"lib/index.css\",\n  \"files\": [\n    \"lib\",\n    \"src\"\n  ],\n  \"scripts\": {\n    \"build\": \"gulp build\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/ElementUI/theme-chalk.git\"\n  },\n  \"keywords\": [\n    \"element\",\n    \"theme\"\n  ],\n  \"author\": \"yi.shyang@ele.me\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/ElementUI/theme-chalk/issues\"\n  },\n  \"homepage\": \"https://github.com/ElementUI/theme-chalk#readme\",\n  \"devDependencies\": {\n    \"gulp\": \"^3.9.1\",\n    \"gulp-cssmin\": \"^0.1.7\",\n    \"gulp-sass\": \"^3.1.0\",\n    \"gulp-autoprefixer\": \"^4.0.0\"\n  },\n  \"dependencies\": {}\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/alert.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n\n@include b(alert) {\n  width: 100%;\n  padding: $--alert-padding;\n  margin: 0;\n  box-sizing: border-box;\n  border-radius: $--alert-border-radius;\n  position: relative;\n  background-color: $--color-white;\n  overflow: hidden;\n  opacity: 1;\n  display: flex;\n  align-items: center;\n  transition: opacity .2s;\n\n  @include when(light) {\n    .el-alert__closebtn {\n      color: $--color-text-placeholder;\n    }\n  }\n\n  @include when(dark) {\n    .el-alert__closebtn {\n      color: $--color-white;\n    }\n    .el-alert__description {\n      color: $--color-white;\n    }\n  }\n\n  @include when(center) {\n    justify-content: center;\n  }\n\n  @include m(success) {\n    &.is-light {\n      background-color: $--alert-success-color;\n      color: $--color-success;\n\n      .el-alert__description {\n        color: $--color-success;\n      }\n    }\n\n    &.is-dark {\n      background-color: $--color-success;\n      color: $--color-white;\n    }\n  }\n\n  @include m(info) {\n    &.is-light {\n      background-color: $--alert-info-color;\n      color: $--color-info;\n    }\n\n    &.is-dark {\n      background-color: $--color-info;\n      color: $--color-white;\n    }\n\n    .el-alert__description {\n      color: $--color-info;\n    }\n  }\n\n  @include m(warning) {\n    &.is-light {\n      background-color: $--alert-warning-color;\n      color: $--color-warning;\n\n      .el-alert__description {\n        color: $--color-warning;\n      }\n    }\n\n    &.is-dark {\n      background-color: $--color-warning;\n      color: $--color-white;\n    }\n  }\n\n  @include m(error) {\n    &.is-light {\n      background-color: $--alert-danger-color;\n      color: $--color-danger;\n\n      .el-alert__description {\n        color: $--color-danger;\n      }\n    }\n\n    &.is-dark {\n      background-color: $--color-danger;\n      color: $--color-white;\n    }\n  }\n\n  @include e(content) {\n    display: table-cell;\n    padding: 0 8px;\n  }\n\n  @include e(icon) {\n    font-size: $--alert-icon-size;\n    width: $--alert-icon-size;\n    @include when(big) {\n      font-size: $--alert-icon-large-size;\n      width: $--alert-icon-large-size;\n    }\n  }\n\n  @include e(title) {\n    font-size: $--alert-title-font-size;\n    line-height: 18px;\n    @include when(bold) {\n      font-weight: bold;\n    }\n  }\n\n  & .el-alert__description {\n    font-size: $--alert-description-font-size;\n    margin: 5px 0 0 0;\n  }\n\n  @include e(closebtn) {\n    font-size: $--alert-close-font-size;\n    opacity: 1;\n    position: absolute;\n    top: 12px;\n    right: 15px;\n    cursor: pointer;\n\n    @include when(customed) {\n      font-style: normal;\n      font-size: $--alert-close-customed-font-size;\n      top: 9px;\n    }\n  }\n}\n\n.el-alert-fade-enter,\n.el-alert-fade-leave-active {\n  opacity: 0;\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/aside.scss",
    "content": "@import \"mixins/mixins\";\n\n@include b(aside) {\n  overflow: auto;\n  box-sizing: border-box;\n  flex-shrink: 0;\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/autocomplete.scss",
    "content": "@import \"mixins/mixins\";\n@import \"mixins/utils\";\n@import \"common/var\";\n@import \"./input.scss\";\n@import \"./scrollbar.scss\";\n@import \"./popper\";\n\n@include b(autocomplete) {\n  position: relative;\n  display: inline-block;\n}\n\n@include b(autocomplete-suggestion) {\n  margin: 5px 0;\n  box-shadow: $--box-shadow-light;\n  border-radius: $--border-radius-base;\n  border: 1px solid $--border-color-light;\n  box-sizing: border-box;\n  background-color: $--color-white;\n\n  @include e(wrap) {\n    max-height: 280px;\n    padding: 10px 0;\n    box-sizing: border-box;\n  }\n\n  @include e(list) {\n    margin: 0;\n    padding: 0;\n  }\n\n  & li {\n    padding: 0 20px;\n    margin: 0;\n    line-height: 34px;\n    cursor: pointer;\n    color: $--color-text-regular;\n    font-size: $--font-size-base;\n    list-style: none;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    &:hover {\n      background-color: $--select-option-hover-background;\n    }\n\n    &.highlighted {\n      background-color: $--select-option-hover-background;\n    }\n\n    &.divider {\n      margin-top: 6px;\n      border-top: 1px solid $--color-black;\n    }\n\n    &.divider:last-child {\n      margin-bottom: -6px;\n    }\n  }\n\n  @include when(loading) {\n    li {\n      text-align: center;\n      height: 100px;\n      line-height: 100px;\n      font-size: 20px;\n      color: #999;\n      @include utils-vertical-center;\n\n      &:hover {\n        background-color: $--color-white;\n      }\n    }\n\n    & .el-icon-loading {\n      vertical-align: middle;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/avatar.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n\n@include b(avatar) {\n  display: inline-block;\n  box-sizing: border-box;\n  text-align: center;\n  overflow: hidden;\n  color: $--avatar-font-color;\n  background: $--avatar-background-color;\n  width: $--avatar-large-size;\n  height: $--avatar-large-size;\n  line-height: $--avatar-large-size;\n  font-size: $--avatar-text-font-size;\n\n  >img {\n    display: block;\n    height: 100%;\n    vertical-align: middle;\n  }\n\n  @include m(circle) {\n    border-radius: 50%;\n  }\n\n  @include m(square) {\n    border-radius: $--avatar-border-radius;\n  }\n\n  @include m(icon) {\n    font-size: $--avatar-icon-font-size;\n  }\n\n  @include m(large) {\n    width: $--avatar-large-size;\n    height: $--avatar-large-size;\n    line-height: $--avatar-large-size;\n  }\n\n  @include m(medium) {\n    width: $--avatar-medium-size;\n    height: $--avatar-medium-size;\n    line-height: $--avatar-medium-size;\n  }\n\n  @include m(small) {\n    width: $--avatar-small-size;\n    height: $--avatar-small-size;\n    line-height: $--avatar-small-size;\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/backtop.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n\n@include b(backtop) {\n  position: fixed;\n  background-color: $--backtop-background-color;\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  color: $--backtop-font-color;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 20px;\n  box-shadow: 0 0 6px rgba(0,0,0, .12);\n  cursor: pointer;\n  z-index: 5;\n\n  &:hover {\n    background-color: $--backtop-hover-background-color\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/badge.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n\n@include b(badge) {\n  position: relative;\n  vertical-align: middle;\n  display: inline-block;\n\n  @include e(content) {\n    background-color: $--badge-background-color;\n    border-radius: $--badge-radius;\n    color: $--color-white;\n    display: inline-block;\n    font-size: $--badge-font-size;\n    height: $--badge-size;\n    line-height: $--badge-size;\n    padding: 0 $--badge-padding;\n    text-align: center;\n    white-space: nowrap;\n    border: 1px solid $--color-white;\n\n    @include when(fixed) {\n      position: absolute;\n      top: 0;\n      right: #{1 + $--badge-size / 2};\n      transform: translateY(-50%) translateX(100%);\n\n      @include when(dot) {\n        right: 5px;\n      }\n    }\n\n    @include when(dot) {\n      height: 8px;\n      width: 8px;\n      padding: 0;\n      right: 0;\n      border-radius: 50%;\n    }\n\n    @each $type in (primary, success, warning, info, danger) {\n      @include m($type) {\n        @if $type == primary {\n          background-color: $--color-primary;\n        } @else if $type == success {\n          background-color: $--color-success;\n        } @else if $type == warning {\n          background-color: $--color-warning;\n        } @else if $type == info {\n          background-color: $--color-info;\n        } @else {\n          background-color: $--color-danger;\n        }\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/base.scss",
    "content": "@import \"common/transition.scss\";\n@import \"icon.scss\";\n"
  },
  {
    "path": "packages/theme-chalk/src/breadcrumb-item.scss",
    "content": ""
  },
  {
    "path": "packages/theme-chalk/src/breadcrumb.scss",
    "content": "@import \"mixins/mixins\";\n@import \"mixins/utils\";\n@import \"common/var\";\n\n@include b(breadcrumb) {\n  font-size: 14px;\n  line-height: 1;\n  @include utils-clearfix;\n\n  @include e(separator) {\n    margin: 0 9px;\n    font-weight: bold;\n    color: $--color-text-placeholder;\n\n    &[class*=icon] {\n      margin: 0 6px;\n      font-weight: normal;\n    }\n  }\n\n  @include e(item) {\n    float: left;\n\n    @include e(inner) {\n      color: $--color-text-regular;\n\n      &.is-link, & a {\n        font-weight: bold;\n        text-decoration: none;\n        transition: $--color-transition-base;\n        color: $--color-text-primary;\n\n        &:hover {\n          color: $--color-primary;\n          cursor: pointer;\n        }\n      }\n    }\n\n    &:last-child {\n      .el-breadcrumb__inner,\n      .el-breadcrumb__inner a {\n        &, &:hover {\n          font-weight: normal;\n          color: $--color-text-regular;\n          cursor: text;\n        }\n      }\n\n      .el-breadcrumb__separator {\n        display: none;\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/button-group.scss",
    "content": ""
  },
  {
    "path": "packages/theme-chalk/src/button.scss",
    "content": "@charset \"UTF-8\";\n@import \"common/var\";\n@import \"mixins/button\";\n@import \"mixins/mixins\";\n@import \"mixins/utils\";\n\n@include b(button) {\n  display: inline-block;\n  line-height: 1;\n  white-space: nowrap;\n  cursor: pointer;\n  background: $--button-default-background-color;\n  border: $--border-base;\n  border-color: $--button-default-border-color;\n  color: $--button-default-font-color;\n  -webkit-appearance: none;\n  text-align: center;\n  box-sizing: border-box;\n  outline: none;\n  margin: 0;\n  transition: .1s;\n  font-weight: $--button-font-weight;\n  @include utils-user-select(none);\n  & + & {\n    margin-left: 10px;\n  }\n\n  @include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, $--button-border-radius);\n\n  &:hover,\n  &:focus {\n    color: $--color-primary;\n    border-color: $--color-primary-light-7;\n    background-color: $--color-primary-light-9;\n  }\n\n  &:active {\n    color: mix($--color-black, $--color-primary, $--button-active-shade-percent);\n    border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);\n    outline: none;\n  }\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n\n  & [class*=\"el-icon-\"] {\n    & + span {\n      margin-left: 5px;\n    }\n  }\n\n  @include when(plain) {\n    &:hover,\n    &:focus {\n      background: $--color-white;\n      border-color: $--color-primary;\n      color: $--color-primary;\n    }\n\n    &:active {\n      background: $--color-white;\n      border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);\n      color: mix($--color-black, $--color-primary, $--button-active-shade-percent);\n      outline: none;\n    }\n  }\n\n  @include when(active) {\n    color: mix($--color-black, $--color-primary, $--button-active-shade-percent);\n    border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);\n  }\n\n  @include when(disabled) {\n    &,\n    &:hover,\n    &:focus {\n      color: $--button-disabled-font-color;\n      cursor: not-allowed;\n      background-image: none;\n      background-color: $--button-disabled-background-color;\n      border-color: $--button-disabled-border-color;\n    }\n\n    &.el-button--text {\n      background-color: transparent;\n    }\n\n    &.is-plain {\n      &,\n      &:hover,\n      &:focus {\n        background-color: $--color-white;\n        border-color: $--button-disabled-border-color;\n        color: $--button-disabled-font-color;\n      }\n    }\n  }\n\n  @include when(loading) {\n    position: relative;\n    pointer-events: none;\n\n    &:before {\n      pointer-events: none;\n      content: '';\n      position: absolute;\n      left: -1px;\n      top: -1px;\n      right: -1px;\n      bottom: -1px;\n      border-radius: inherit;\n      background-color: rgba(255,255,255,.35);\n    }\n  }\n  @include when(round) {\n    border-radius: 20px;\n    padding: 12px 23px;\n  }\n  @include when(circle) {\n    border-radius: 50%;\n    padding: $--button-padding-vertical;\n  }\n  @include m(primary) {\n    @include button-variant($--button-primary-font-color, $--button-primary-background-color, $--button-primary-border-color);\n  }\n  @include m(success) {\n    @include button-variant($--button-success-font-color, $--button-success-background-color, $--button-success-border-color);\n  }\n  @include m(warning) {\n    @include button-variant($--button-warning-font-color, $--button-warning-background-color, $--button-warning-border-color);\n  }\n  @include m(danger) {\n    @include button-variant($--button-danger-font-color, $--button-danger-background-color, $--button-danger-border-color);\n  }\n  @include m(info) {\n    @include button-variant($--button-info-font-color, $--button-info-background-color, $--button-info-border-color);\n  }\n  @include m(medium) {\n    @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, $--button-medium-border-radius);\n    @include when(circle) {\n      padding: $--button-medium-padding-vertical;\n    }\n  }\n  @include m(small) {\n    @include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, $--button-small-border-radius);\n    @include when(circle) {\n      padding: $--button-small-padding-vertical;\n    }\n  }\n  @include m(mini) {\n    @include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, $--button-mini-border-radius);\n    @include when(circle) {\n      padding: $--button-mini-padding-vertical;\n    }\n  }\n  @include m(text) {\n    border-color: transparent;\n    color: $--color-primary;\n    background: transparent;\n    padding-left: 0;\n    padding-right: 0;\n\n    &:hover,\n    &:focus {\n      color: mix($--color-white, $--color-primary, $--button-hover-tint-percent);\n      border-color: transparent;\n      background-color: transparent;\n    }\n    &:active {\n      color: mix($--color-black, $--color-primary, $--button-active-shade-percent);\n      border-color: transparent;\n      background-color: transparent;\n    }\n\n    &.is-disabled,\n    &.is-disabled:hover,\n    &.is-disabled:focus {\n      border-color: transparent;\n    }\n  }\n}\n\n@include b(button-group) {\n  @include utils-clearfix;\n  display: inline-block;\n  vertical-align: middle;\n\n  & > .el-button {\n    float: left;\n    position: relative;\n    & + .el-button {\n      margin-left: 0;\n    }\n    &.is-disabled {\n      z-index: 1;\n    }\n    &:first-child {\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n    &:last-child {\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n    }\n    &:first-child:last-child {\n      border-top-right-radius: $--button-border-radius;\n      border-bottom-right-radius: $--button-border-radius;\n      border-top-left-radius: $--button-border-radius;\n      border-bottom-left-radius: $--button-border-radius;\n\n      &.is-round {\n        border-radius: 20px;\n      }\n\n      &.is-circle {\n        border-radius: 50%;\n      }\n    }\n    &:not(:first-child):not(:last-child) {\n      border-radius: 0;\n    }\n    &:not(:last-child) {\n      margin-right: -1px;\n    }\n\n    &:not(.is-disabled) {\n      &:hover,\n      &:focus,\n      &:active {\n        z-index: 1;\n      }\n    }\n\n    @include when(active) {\n      z-index: 1;\n    }\n  }\n  \n  & > .el-dropdown {\n    & > .el-button {\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n      border-left-color: rgba($--color-white, 0.5);\n    }\n  }\n\n  @each $type in (primary, success, warning, danger, info) {\n    .el-button--#{$type} {\n      &:first-child {\n        border-right-color: rgba($--color-white, 0.5);\n      }\n      &:last-child {\n        border-left-color: rgba($--color-white, 0.5);\n      }\n      &:not(:first-child):not(:last-child) {\n        border-left-color: rgba($--color-white, 0.5);\n        border-right-color: rgba($--color-white, 0.5);\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/calendar.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n@import \"button\";\n@import \"button-group\";\n\n@include b(calendar) {\n  background-color:#fff;\n\n  @include e(header) {\n    display: flex;\n    justify-content: space-between;\n    padding: 12px 20px;\n    border-bottom: $--table-border;\n  }\n\n  @include e(title) {\n    color: #000000;\n    align-self: center;\n  }\n\n  @include e(body) {\n    padding: 12px 20px 35px;\n  }\n}\n\n@include b(calendar-table) {\n  table-layout: fixed;\n  width: 100%;\n\n  thead th {\n    padding: 12px 0;\n    color: $--color-text-regular;\n    font-weight: normal;\n  }\n\n  &:not(.is-range) {\n    td.prev,\n    td.next {\n      color: $--color-text-placeholder;\n    }\n  }\n\n  td {\n    border-bottom: $--calendar-border;\n    border-right: $--calendar-border;\n    vertical-align: top;\n    transition: background-color 0.2s ease;\n\n    @include when(selected) {\n      background-color: $--calendar-selected-background-color;\n    }\n\n    @include when(today) {\n      color: $--color-primary;\n    }\n  }\n\n  tr:first-child td {\n    border-top: $--calendar-border;\n  }\n\n  tr td:first-child {\n    border-left: $--calendar-border;\n  }\n\n  tr.el-calendar-table__row--hide-border td {\n    border-top: none;\n  }\n\n  @include b(calendar-day) {\n    box-sizing: border-box;\n    padding: 8px;\n    height: $--calendar-cell-width;\n    &:hover {\n      cursor: pointer;\n      background-color: $--calendar-selected-background-color;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/card.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n\n@include b(card) {\n  border-radius: $--card-border-radius;\n  border: 1px solid $--card-border-color;\n  background-color: $--color-white;\n  overflow: hidden;\n  color: $--color-text-primary;\n  transition: 0.3s;\n\n  @include when(always-shadow) {\n    box-shadow: $--box-shadow-light;\n  }\n\n  @include when(hover-shadow) {\n    &:hover,\n    &:focus {\n      box-shadow: $--box-shadow-light;\n    }\n  }\n\n  @include e(header) {\n    padding: #{$--card-padding - 2 $--card-padding};\n    border-bottom: 1px solid $--card-border-color;\n    box-sizing: border-box;\n  }\n\n  @include e(body) {\n    padding: $--card-padding;\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/carousel-item.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n\n@include b(carousel) {\n  @include e(item) {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: inline-block;\n    overflow: hidden;\n    z-index: #{$--index-normal - 1};\n\n    @include when(active) {\n      z-index: #{$--index-normal + 1};\n    }\n\n    @include when(animating) {\n      transition: transform .4s ease-in-out;\n    }\n\n    @include m(card) {\n      width: 50%;\n      transition: transform .4s ease-in-out;\n      &.is-in-stage {\n        cursor: pointer;\n        z-index: $--index-normal;\n        &:hover .el-carousel__mask,\n        &.is-hover .el-carousel__mask {\n          opacity: 0.12;\n        }\n      }\n      &.is-active {\n        z-index: #{$--index-normal + 1};\n      }\n    }\n  }\n\n  @include e(mask) {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    background-color: $--color-white;\n    opacity: 0.24;\n    transition: .2s;\n  }\n}"
  },
  {
    "path": "packages/theme-chalk/src/carousel.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n\n@include b(carousel) {\n  position: relative;\n\n  @include m(horizontal) {\n    overflow-x: hidden;\n  }\n\n  @include m(vertical) {\n    overflow-y: hidden;\n  }\n\n  @include e(container) {\n    position: relative;\n    height: 300px;\n  }\n\n  @include e(arrow) {\n    border: none;\n    outline: none;\n    padding: 0;\n    margin: 0;\n    height: $--carousel-arrow-size;\n    width: $--carousel-arrow-size;\n    cursor: pointer;\n    transition: .3s;\n    border-radius: 50%;\n    background-color: $--carousel-arrow-background;\n    color: $--color-white;\n    position: absolute;\n    top: 50%;\n    z-index: 10;\n    transform: translateY(-50%);\n    text-align: center;\n    font-size: $--carousel-arrow-font-size;\n\n    @include m(left) {\n      left: 16px;\n    }\n\n    @include m(right) {\n      right: 16px;\n    }\n\n    &:hover {\n      background-color: $--carousel-arrow-hover-background;\n    }\n\n    & i {\n      cursor: pointer;\n    }\n  }\n\n  @include e(indicators) {\n    position: absolute;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    z-index: #{$--index-normal + 1};\n\n    @include m(horizontal) {\n      bottom: 0;\n      left: 50%;\n      transform: translateX(-50%);\n    }\n\n    @include m(vertical) {\n      right: 0;\n      top: 50%;\n      transform: translateY(-50%);\n    }\n\n    @include m(outside) {\n      bottom: #{$--carousel-indicator-height + $--carousel-indicator-padding-vertical * 2};\n      text-align: center;\n      position: static;\n      transform: none;\n      .el-carousel__indicator:hover button {\n        opacity: 0.64;\n      }\n      button {\n        background-color: $--carousel-indicator-out-color;\n        opacity: 0.24;\n      }\n    }\n\n    @include m(labels) {\n      left: 0;\n      right: 0;\n      transform: none;\n      text-align: center;\n\n      .el-carousel__button {\n        height: auto;\n        width: auto;\n        padding: 2px 18px;\n        font-size: 12px;\n      }\n\n      .el-carousel__indicator {\n        padding: 6px 4px;\n      }\n    }\n  }\n\n  @include e(indicator) {\n    background-color: transparent;\n    cursor: pointer;\n\n    &:hover button {\n      opacity: 0.72;\n    }\n\n    @include m(horizontal) {\n      display: inline-block;\n      padding: $--carousel-indicator-padding-vertical $--carousel-indicator-padding-horizontal;\n    }\n\n    @include m(vertical) {\n      padding: $--carousel-indicator-padding-horizontal $--carousel-indicator-padding-vertical;\n      .el-carousel__button {\n        width: $--carousel-indicator-height;\n        height: #{$--carousel-indicator-width / 2};\n      }\n    }\n\n    @include when(active) {\n      button {\n        opacity: 1;\n      }\n    }\n  }\n\n  @include e(button) {\n    display: block;\n    opacity: 0.48;\n    width: $--carousel-indicator-width;\n    height: $--carousel-indicator-height;\n    background-color: $--color-white;\n    border: none;\n    outline: none;\n    padding: 0;\n    margin: 0;\n    cursor: pointer;\n    transition: .3s;\n  }\n}\n\n.carousel-arrow-left-enter,\n.carousel-arrow-left-leave-active {\n  transform: translateY(-50%) translateX(-10px);\n  opacity: 0;\n}\n\n.carousel-arrow-right-enter,\n.carousel-arrow-right-leave-active {\n  transform: translateY(-50%) translateX(10px);\n  opacity: 0;\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/cascader-panel.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n@import \"./checkbox\";\n@import \"./radio\";\n@import \"./scrollbar\";\n\n@include b(cascader-panel) {\n  display: flex;\n  border-radius: $--cascader-menu-radius;\n  font-size: $--cascader-menu-font-size;\n\n  @include when(bordered) {\n    border: $--cascader-menu-border;\n    border-radius: $--cascader-menu-radius;\n  }\n}\n\n@include b(cascader-menu) {\n  min-width: 180px;\n  box-sizing: border-box;\n  color: $--cascader-menu-font-color;\n  border-right: $--cascader-menu-border;\n\n  &:last-child {\n    border-right: none;\n    .el-cascader-node {\n      padding-right: 20px;\n    }\n  }\n\n  @include e(wrap) {\n    height: 204px;\n  }\n\n  @include e(list) {\n    position: relative;\n    min-height: 100%;\n    margin: 0;\n    padding: 6px 0;\n    list-style: none;\n    box-sizing: border-box;\n  }\n\n  @include e(hover-zone) {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n  }\n\n  @include e(empty-text) {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    text-align: center;\n    color: $--cascader-color-empty;\n  }\n}\n\n@include b(cascader-node) {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0 30px 0 20px;\n  height: 34px;\n  line-height: 34px;\n  outline: none;\n\n  &.is-selectable.in-active-path {\n    color: $--cascader-menu-font-color;\n  }\n\n  &.in-active-path,\n  &.is-selectable.in-checked-path,\n  &.is-active {\n    color: $--cascader-menu-selected-font-color;\n    font-weight: bold;\n  }\n\n  &:not(.is-disabled) {\n    cursor: pointer;\n    &:hover, &:focus {\n      background: $--cascader-node-background-hover;\n    }\n  }\n\n  @include when(disabled) {\n    color: $--cascader-node-color-disabled;\n    cursor: not-allowed;\n  }\n\n  @include e(prefix) {\n    position: absolute;\n    left: 10px;\n  }\n\n  @include e(postfix) {\n    position: absolute;\n    right: 10px;\n  }\n\n  @include e(label) {\n    flex: 1;\n    padding: 0 10px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  > .el-radio {\n    margin-right: 0;\n\n    .el-radio__label {\n      padding-left: 0;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/cascader.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n@import \"./input\";\n@import \"./popper\";\n@import \"./tag\";\n@import \"./cascader-panel\";\n\n@include b(cascader) {\n  display: inline-block;\n  position: relative;\n  font-size: $--font-size-base;\n  line-height: $--input-height;\n\n  &:not(.is-disabled):hover {\n    .el-input__inner {\n      cursor: pointer;\n      border-color: $--input-hover-border;\n    }\n  }\n\n  .el-input {\n    cursor: pointer;\n\n    .el-input__inner {\n      text-overflow: ellipsis;\n\n      &:focus {\n        border-color: $--input-focus-border;\n      }\n    }\n\n    .el-icon-arrow-down {\n      transition: transform .3s;\n      font-size: 14px;\n\n      @include when(reverse) {\n        transform: rotateZ(180deg);\n      }\n    }\n\n    .el-icon-circle-close:hover {\n      color: $--input-clear-hover-color;\n    }\n\n    @include when(focus) {\n      .el-input__inner {\n        border-color: $--input-focus-border;\n      }\n    }\n  }\n\n  @include m(medium) {\n    font-size: $--input-medium-font-size;\n    line-height: $--input-medium-height;\n  }\n\n  @include m(small) {\n    font-size: $--input-small-font-size;\n    line-height: $--input-small-height;\n  }\n\n  @include m(mini) {\n    font-size: $--input-mini-font-size;\n    line-height: $--input-mini-height;\n  }\n\n  @include when(disabled) {\n    .el-cascader__label {\n      z-index: #{$--index-normal + 1};\n      color: $--disabled-color-base;\n    }\n  }\n\n  @include e(dropdown) {\n    margin: 5px 0;\n    font-size: $--cascader-menu-font-size;\n    background: $--cascader-menu-fill;\n    border: $--cascader-menu-border;\n    border-radius: $--cascader-menu-radius;\n    box-shadow: $--cascader-menu-shadow;\n  }\n\n  @include e(tags) {\n    position: absolute;\n    left: 0;\n    right: 30px;\n    top: 50%;\n    transform: translateY(-50%);\n    display: flex;\n    flex-wrap: wrap;\n    line-height: normal;\n    text-align: left;\n    box-sizing: border-box;\n\n    .el-tag {\n      display: inline-flex;\n      align-items: center;\n      max-width: 100%;\n      margin: 2px 0 2px 6px;\n      text-overflow: ellipsis;\n      background: $--cascader-tag-background;\n\n      &:not(.is-hit) {\n        border-color: transparent;\n      }\n\n      > span {\n        flex: 1;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .el-icon-close {\n        flex: none;\n        background-color: $--color-text-placeholder;\n        color: $--color-white;\n\n        &:hover {\n          background-color: $--color-text-secondary;\n        }\n      }\n    }\n  }\n\n  @include e(suggestion-panel) {\n    border-radius: $--cascader-menu-radius;\n  }\n\n  @include e(suggestion-list) {\n    max-height: 204px;\n    margin: 0;\n    padding: 6px 0;\n    font-size: $--font-size-base;\n    color: $--cascader-menu-font-color;\n    text-align: center;\n  }\n\n  @include e(suggestion-item) {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    height: 34px;\n    padding: 0 15px;\n    text-align: left;\n    outline: none;\n    cursor: pointer;\n\n    &:hover, &:focus {\n      background: $--cascader-node-background-hover;\n    }\n\n    &.is-checked {\n      color: $--cascader-menu-selected-font-color;\n      font-weight: bold;\n    }\n\n    > span {\n      margin-right: 10px;\n    }\n  }\n\n  @include e(empty-text) {\n    margin: 10px 0;\n    color: $--cascader-color-empty;\n  }\n\n  @include e(search-input) {\n    flex: 1;\n    height: 24px;\n    min-width: 60px;\n    margin: 2px 0 2px 15px;\n    padding: 0;\n    color: $--cascader-menu-font-color;\n    border: none;\n    outline: none;\n    box-sizing: border-box;\n\n    &::placeholder {\n      color: $--color-text-placeholder;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/checkbox-button.scss",
    "content": ""
  },
  {
    "path": "packages/theme-chalk/src/checkbox-group.scss",
    "content": ""
  },
  {
    "path": "packages/theme-chalk/src/checkbox.scss",
    "content": "@import \"common/var\";\n@import \"mixins/mixins\";\n@import \"mixins/_button\";\n@import \"mixins/utils\";\n\n@include b(checkbox) {\n  color: $--checkbox-font-color;\n  font-weight: $--checkbox-font-weight;\n  font-size: $--font-size-base;\n  position: relative;\n  cursor: pointer;\n  display: inline-block;\n  white-space: nowrap;\n  user-select: none;\n  margin-right: 30px;\n\n  @include when(bordered) {\n    padding: $--checkbox-bordered-padding;\n    border-radius: $--border-radius-base;\n    border: $--border-base;\n    box-sizing: border-box;\n    line-height: normal;\n    height: $--checkbox-bordered-height;\n\n    &.is-checked {\n      border-color: $--color-primary;\n    }\n\n    &.is-disabled {\n      border-color: $--border-color-lighter;\n      cursor: not-allowed;\n    }\n\n    & + .el-checkbox.is-bordered {\n      margin-left: 10px;\n    }\n\n    &.el-checkbox--medium {\n      padding: $--checkbox-bordered-medium-padding;\n      border-radius: $--button-medium-border-radius;\n      height: $--checkbox-bordered-medium-height;\n\n      .el-checkbox__label {\n        line-height: 17px;\n        font-size: $--button-medium-font-size;\n      }\n\n      .el-checkbox__inner {\n        height: $--checkbox-bordered-medium-input-height;\n        width: $--checkbox-bordered-medium-input-width;\n      }\n    }\n\n    &.el-checkbox--small {\n      padding: $--checkbox-bordered-small-padding;\n      border-radius: $--button-small-border-radius;\n      height: $--checkbox-bordered-small-height;\n\n      .el-checkbox__label {\n        line-height: 15px;\n        font-size: $--button-small-font-size;\n      }\n\n      .el-checkbox__inner {\n        height: $--checkbox-bordered-small-input-height;\n        width: $--checkbox-bordered-small-input-width;\n\n        &::after {\n          height: 6px;\n          width: 2px;\n        }\n      }\n    }\n\n    &.el-checkbox--mini {\n      padding: $--checkbox-bordered-mini-padding;\n      border-radius: $--button-mini-border-radius;\n      height: $--checkbox-bordered-mini-height;\n\n      .el-checkbox__label {\n        line-height: 12px;\n        font-size: $--button-mini-font-size;\n      }\n\n      .el-checkbox__inner {\n        height: $--checkbox-bordered-mini-input-height;\n        width: $--checkbox-bordered-mini-input-width;\n        &::after {\n          height: 6px;\n          width: 2px;\n        }\n      }\n    }\n  }\n\n  @include e(input) {\n    white-space: nowrap;\n    cursor: pointer;\n    outline: none;\n    display: inline-block;\n    line-height: 1;\n    position: relative;\n    vertical-align: middle;\n\n    @include when(disabled) {\n      .el-checkbox__inner {\n        background-color: $--checkbox-disabled-input-fill;\n        border-color: $--checkbox-disabled-border-color;\n        cursor: not-allowed;\n\n        &::after {\n          cursor: not-allowed;\n          border-color: $--checkbox-disabled-icon-color;\n        }\n\n        & + .el-checkbox__label {\n          cursor: not-allowed;\n        }\n      }\n\n      &.is-checked {\n        .el-checkbox__inner {\n          background-color: $--checkbox-disabled-checked-input-fill;\n          border-color: $--checkbox-disabled-checked-input-border-color;\n\n          &::after {\n            border-color: $--checkbox-disabled-checked-icon-color;\n          }\n        }\n      }\n\n      &.is-indeterminate {\n        .el-checkbox__inner {\n          background-color: $--checkbox-disabled-checked-input-fill;\n          border-color: $--checkbox-disabled-checked-input-border-color;\n\n          &::before {\n            background-color: $--checkbox-disabled-checked-icon-color;\n            border-color: $--checkbox-disabled-checked-icon-color;\n          }\n        }\n      }\n\n      & + span.el-checkbox__label {\n        color: $--disabled-color-base;\n        cursor: not-allowed;\n      }\n    }\n\n    @include when(checked) {\n      .el-checkbox__inner {\n        background-color: $--checkbox-checked-background-color;\n        border-color: $--checkbox-checked-input-border-color;\n\n        &::after {\n          transform: rotate(45deg) scaleY(1);\n        }\n      }\n\n      & + .el-checkbox__label {\n        color: $--checkbox-checked-font-color;\n      }\n    }\n    @include when(focus) { /*focus时 视觉上区分*/\n      .el-checkbox__inner {\n        border-color: $--checkbox-input-border-color-hover;\n      }\n    }\n    @include when(indeterminate) {\n      .el-checkbox__inner {\n        background-color: $--checkbox-checked-background-color;\n        border-color: $--checkbox-checked-input-border-color;\n\n        &::before {\n          content: '';\n          position: absolute;\n          display: block;\n          background-color: $--checkbox-checked-icon-color;\n          height: 2px;\n          transform: scale(0.5);\n          left: 0;\n          right: 0;\n          top: 5px;\n        }\n\n        &::after {\n          display: none;\n        }\n      }\n    }\n  }\n  @include e(inner) {\n    display: inline-block;\n    position: relative;\n    border: $--checkbox-input-border;\n    border-radius: $--checkbox-border-radius;\n    box-sizing: border-box;\n    width: $--checkbox-input-width;\n    height: $--checkbox-input-height;\n    background-color: $--checkbox-background-color;\n    z-index: $--index-normal;\n    transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),\n    background-color .25s cubic-bezier(.71,-.46,.29,1.46);\n\n    &:hover {\n      border-color: $--checkbox-input-border-color-hover;\n    }\n\n    &::after {\n      box-sizing: content-box;\n      content: \"\";\n      border: 1px solid $--checkbox-checked-icon-color;\n      border-left: 0;\n      border-top: 0;\n      height: 7px;\n      left: 4px;\n      position: absolute;\n      top: 1px;\n      transform: rotate(45deg) scaleY(0);\n      width: 3px;\n      transition: transform .15s ease-in .05s;\n      transform-origin: center;\n    }\n  }\n\n  @include e(original) {\n    opacity: 0;\n    outline: none;\n    position: absolute;\n    margin: 0;\n    width: 0;\n    height: 0;\n    z-index: -1;\n  }\n\n  @include e(label) {\n    display: inline-block;\n    padding-left: 10px;\n    line-height: 19px;\n    font-size: $--checkbox-font-size;\n  }\n\n  &:last-of-type {\n    margin-right: 0;\n  }\n}\n\n@include b(checkbox-button) {\n  position: relative;\n  display: inline-block;\n\n  @include e(inner) {\n    display: inline-block;\n    line-height: 1;\n    font-weight: $--checkbox-font-weight;\n    white-space: nowrap;\n    vertical-align: middle;\n    cursor: pointer;\n    background: $--button-default-background-color;\n    border: $--border-base;\n    border-left: 0;\n    color: $--button-default-font-color;\n    -webkit-appearance: none;\n    text-align: center;\n    box-sizing: border-box;\n    outline: none;\n    margin: 0;\n    position: relative;\n    transition: $--all-transition;\n    @include utils-user-select(none);\n\n    @include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, 0);\n\n    &:hover {\n      color: $--color-primary;\n    }\n\n    & [class*=\"el-icon-\"] {\n      line-height: 0.9;\n\n      & + span {\n        margin-left: 5px;\n      }\n    }\n  }\n\n  @include e(original) {\n    opacity: 0;\n    outline: none;\n    position: absolute;\n    margin: 0;\n    z-index: -1;\n  }\n\n  &.is-checked {\n    & .el-checkbox-button__inner {\n      color: $--checkbox-button-checked-font-color;\n      background-color: $--checkbox-button-checked-background-color;\n      border-color: $--checkbox-button-checked-border-color;\n      box-shadow: -1px 0 0 0 $--color-primary-light-4;\n    }\n    &:first-child .el-checkbox-button__inner {\n      border-left-color: $--checkbox-button-checked-border-color;\n    }\n  }\n\n  &.is-disabled {\n    & .el-checkbox-button__inner {\n      color: $--button-disabled-font-color;\n      cursor: not-allowed;\n      background-image: none;\n      background-color: $--button-disabled-background-color;\n      border-color: $--button-disabled-border-color;\n      box-shadow: none;\n    }\n    &:first-child .el-checkbox-button__inner {\n      border-left-color: $--button-disabled-border-color;\n    }\n  }\n\n  &:first-child {\n    .el-checkbox-button__inner {\n      border-left: $--border-base;\n      border-radius: $--border-radius-base 0 0 $--border-radius-base;\n      box-shadow: none !important;\n    }\n  }\n\n  &.is-focus {\n    & .el-checkbox-button__inner {\n      border-color: $--checkbox-button-checked-border-color;\n    }\n  }\n\n  &:last-child {\n    .el-checkbox-button__inner {\n      border-radius: 0 $--border-radius-base $--border-radius-base 0;\n    }\n  }\n  @include m(medium) {\n    .el-checkbox-button__inner {\n      @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, 0);\n    }\n  }\n  @include m(small) {\n    .el-checkbox-button__inner {\n      @include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, 0);\n    }\n  }\n  @include m(mini) {\n    .el-checkbox-button__inner {\n      @include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, 0);\n    }\n  }\n}\n\n@include b(checkbox-group) {\n  font-size: 0;\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/col.scss",
    "content": "@import \"./common/var.scss\";\n@import \"./mixins/mixins.scss\";\n\n[class*=\"el-col-\"] {\n  float: left;\n  box-sizing: border-box;\n}\n\n.el-col-0 {\n  display: none;\n}\n\n@for $i from 0 through 24 {\n  .el-col-#{$i} {\n    width: (1 / 24 * $i * 100) * 1%;\n  }\n\n  .el-col-offset-#{$i} {\n    margin-left: (1 / 24 * $i * 100) * 1%;\n  }\n\n  .el-col-pull-#{$i} {\n    position: relative;\n    right: (1 / 24 * $i * 100) * 1%;\n  }\n\n  .el-col-push-#{$i} {\n    position: relative;\n    left: (1 / 24 * $i * 100) * 1%;\n  }\n}\n\n@include res(xs) {\n  .el-col-xs-0 {\n    display: none;\n  }\n  @for $i from 0 through 24 {\n    .el-col-xs-#{$i} {\n      width: (1 / 24 * $i * 100) * 1%;\n    }\n\n    .el-col-xs-offset-#{$i} {\n      margin-left: (1 / 24 * $i * 100) * 1%;\n    }\n\n    .el-col-xs-pull-#{$i} {\n      position: relative;\n      right: (1 / 24 * $i * 100) * 1%;\n    }\n\n    .el-col-xs-push-#{$i} {\n      position: relative;\n      left: (1 / 24 * $i * 100) * 1%;\n    }\n  }\n}\n\n@include res(sm) {\n  .el-col-sm-0 {\n    display: none;\n  }\n  @for $i from 0 through 24 {\n    .el-col-sm-#{$i} {\n      width: (1 / 24 * $i * 100) * 1%;\n    }\n\n    .el-col-sm-offset-#{$i} {\n      margin-left: (1 / 24 * $i * 100) * 1%;\n    }\n\n    .el-col-sm-pull-#{$i} {\n      position: relative;\n      right: (1 / 24 * $i * 100) * 1%;\n    }\n\n    .el-col-sm-push-#{$i} {\n      position: relative;\n      left: (1 / 24 * $i * 100) * 1%;\n    }\n  }\n}\n\n@include res(md) {\n  .el-col-md-0 {\n    display: none;\n  }\n  @for $i from 0 through 24 {\n    .el-col-md-#{$i} {\n      width: (1 / 24 * $i * 100) * 1%;\n    }\n\n    .el-col-md-offset-#{$i} {\n      margin-left: (1 / 24 * $i * 100) * 1%;\n    }\n\n    .el-col-md-pull-#{$i} {\n      position: relative;\n      right: (1 / 24 * $i * 100) * 1%;\n    }\n\n    .el-col-md-push-#{$i} {\n      position: relative;\n      left: (1 / 24 * $i * 100) * 1%;\n    }\n  }\n}\n\n@include res(lg) {\n  .el-col-lg-0 {\n    display: none;\n  }\n  @for $i from 0 through 24 {\n    .el-col-lg-#{$i} {\n      width: (1 / 24 * $i * 100) * 1%;\n    }\n\n    .el-col-lg-offset-#{$i} {\n      margin-left: (1 / 24 * $i * 100) * 1%;\n    }\n\n    .el-col-lg-pull-#{$i} {\n      position: relative;\n      right: (1 / 24 * $i * 100) * 1%;\n    }\n\n    .el-col-lg-push-#{$i} {\n      position: relative;\n      left: (1 / 24 * $i * 100) * 1%;\n    }\n  }\n}\n\n@include res(xl) {\n  .el-col-xl-0 {\n    display: none;\n  }\n  @for $i from 0 through 24 {\n    .el-col-xl-#{$i} {\n      width: (1 / 24 * $i * 100) * 1%;\n    }\n\n    .el-col-xl-offset-#{$i} {\n      margin-left: (1 / 24 * $i * 100) * 1%;\n    }\n\n    .el-col-xl-pull-#{$i} {\n      position: relative;\n      right: (1 / 24 * $i * 100) * 1%;\n    }\n\n    .el-col-xl-push-#{$i} {\n      position: relative;\n      left: (1 / 24 * $i * 100) * 1%;\n    }\n  }\n}"
  },
  {
    "path": "packages/theme-chalk/src/collapse-item.scss",
    "content": ""
  },
  {
    "path": "packages/theme-chalk/src/collapse.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n@import \"common/transition\";\n\n@include b(collapse) {\n  border-top: 1px solid $--collapse-border-color;\n  border-bottom: 1px solid $--collapse-border-color;\n}\n@include b(collapse-item) {\n  @include when(disabled) {\n    .el-collapse-item__header {\n      color: $--font-color-disabled-base;\n      cursor: not-allowed;\n    }\n  }\n  @include e(header) {\n    display: flex;\n    align-items: center;\n    height: $--collapse-header-height;\n    line-height: $--collapse-header-height;\n    background-color: $--collapse-header-background-color;\n    color: $--collapse-header-font-color;\n    cursor: pointer;\n    border-bottom: 1px solid $--collapse-border-color;\n    font-size: $--collapse-header-font-size;\n    font-weight: 500;\n    transition: border-bottom-color .3s;\n    outline: none;\n    @include e(arrow) {\n      margin: 0 8px 0 auto;\n      transition: transform .3s;\n      font-weight: 300;\n      @include when(active) {\n        transform: rotate(90deg);\n      }\n    }\n    &.focusing:focus:not(:hover){\n      color: $--color-primary;\n    }\n    @include when(active) {\n      border-bottom-color: transparent;\n    }\n  }\n\n  @include e(wrap) {\n    will-change: height;\n    background-color: $--collapse-content-background-color;\n    overflow: hidden;\n    box-sizing: border-box;\n    border-bottom: 1px solid $--collapse-border-color;\n  }\n\n  @include e(content) {\n    padding-bottom: 25px;\n    font-size: $--collapse-content-font-size;\n    color: $--collapse-content-font-color;\n    line-height: 1.769230769230769;\n  }\n\n  &:last-child {\n    margin-bottom: -1px;\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/color-picker.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n\n@include b(color-predefine) {\n  display: flex;\n  font-size: 12px;\n  margin-top: 8px;\n  width: 280px;\n\n  @include e(colors) {\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n  }\n\n  @include e(color-selector) {\n    margin: 0 0 8px 8px;\n    width: 20px;\n    height: 20px;\n    border-radius: 4px;\n    cursor: pointer;\n\n    &:nth-child(10n + 1) {\n      margin-left: 0;\n    }\n\n    &.selected {\n      box-shadow: 0 0 3px 2px $--color-primary;\n    }\n\n    > div {\n      display: flex;\n      height: 100%;\n      border-radius: 3px;\n    }\n\n    @include when(alpha) {\n      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);\n    }\n  }\n}\n\n@include b(color-hue-slider) {\n  position: relative;\n  box-sizing: border-box;\n  width: 280px;\n  height: 12px;\n  background-color: #f00;\n  padding: 0 2px;\n\n  @include e(bar) {\n    position: relative;\n    background: linear-gradient(\n      to right, #f00 0%,\n      #ff0 17%, #0f0 33%,\n      #0ff 50%, #00f 67%,\n      #f0f 83%, #f00 100%);\n    height: 100%;\n  }\n\n  @include e(thumb) {\n    position: absolute;\n    cursor: pointer;\n    box-sizing: border-box;\n    left: 0;\n    top: 0;\n    width: 4px;\n    height: 100%;\n    border-radius: 1px;\n    background: #fff;\n    border: 1px solid #f0f0f0;\n    box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);\n    z-index: 1;\n  }\n\n  @include when(vertical) {\n    width: 12px;\n    height: 180px;\n    padding: 2px 0;\n\n    .el-color-hue-slider__bar {\n      background: linear-gradient(\n        to bottom, #f00 0%,\n        #ff0 17%, #0f0 33%,\n        #0ff 50%, #00f 67%,\n        #f0f 83%, #f00 100%);\n    }\n\n    .el-color-hue-slider__thumb {\n      left: 0;\n      top: 0;\n      width: 100%;\n      height: 4px;\n    }\n  }\n}\n\n@include b(color-svpanel) {\n  position: relative;\n  width: 280px;\n  height: 180px;\n\n  @include e(('white', 'black')) {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n  }\n\n  @include e('white') {\n    background: linear-gradient(to right, #fff, rgba(255,255,255,0));\n  }\n\n  @include e('black') {\n    background: linear-gradient(to top, #000, rgba(0,0,0,0));\n  }\n\n  @include e(cursor) {\n    position: absolute;\n\n    > div {\n      cursor: head;\n      width: 4px;\n      height: 4px;\n      box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,0.3), 0 0 1px 2px rgba(0,0,0,0.4);\n      border-radius: 50%;\n      transform: translate(-2px, -2px);\n    }\n  }\n}\n\n@include b(color-alpha-slider) {\n  position: relative;\n  box-sizing: border-box;\n  width: 280px;\n  height: 12px;\n  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);\n\n  @include e(bar) {\n    position: relative;\n    background: linear-gradient(\n      to right, rgba(255, 255, 255, 0) 0%,\n      rgba(255, 255, 255, 1) 100%);\n    height: 100%;\n  }\n\n  @include e(thumb) {\n    position: absolute;\n    cursor: pointer;\n    box-sizing: border-box;\n    left: 0;\n    top: 0;\n    width: 4px;\n    height: 100%;\n    border-radius: 1px;\n    background: #fff;\n    border: 1px solid #f0f0f0;\n    box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);\n    z-index: 1;\n  }\n\n  @include when(vertical) {\n    width: 20px;\n    height: 180px;\n\n    .el-color-alpha-slider__bar {\n      background: linear-gradient(\n        to bottom, rgba(255, 255, 255, 0) 0%,\n        rgba(255, 255, 255, 1) 100%);\n    }\n\n    .el-color-alpha-slider__thumb {\n      left: 0;\n      top: 0;\n      width: 100%;\n      height: 4px;\n    }\n  }\n}\n\n@include b(color-dropdown) {\n  width: 300px;\n\n  @include e(main-wrapper) {\n    margin-bottom: 6px;\n\n    &::after {\n      content: \"\";\n      display: table;\n      clear: both;\n    }\n  }\n\n  @include e(btns) {\n    margin-top: 6px;\n    text-align: right;\n  }\n\n  @include e(value) {\n    float: left;\n    line-height: 26px;\n    font-size: 12px;\n    color: $--color-black;\n    width: 160px;\n  }\n\n  @include e(btn) {\n    border: 1px solid #dcdcdc;\n    color: #333;\n    line-height: 24px;\n    border-radius: 2px;\n    padding: 0 20px;\n    cursor: pointer;\n    background-color: transparent;\n    outline: none;\n    font-size: 12px;\n\n    &[disabled] {\n      color: #cccccc;\n      cursor: not-allowed;\n    }\n    &:hover {\n      color: $--color-primary;\n      border-color: $--color-primary;\n    }\n  }\n\n  @include e(link-btn) {\n    cursor: pointer;\n    color: $--color-primary;\n    text-decoration: none;\n    padding: 15px;\n    font-size: 12px;\n    &:hover {\n      color: tint($--color-primary, $--button-hover-tint-percent);\n    }\n  }\n}\n\n@include b(color-picker) {\n  display: inline-block;\n  position: relative;\n  line-height: normal;\n  height: 40px;\n\n  @include when(disabled) {\n    .el-color-picker__trigger {\n      cursor: not-allowed;\n    }\n  }\n\n  @include m(medium) {\n    height: 36px;\n\n    .el-color-picker__trigger {\n      height: 36px;\n      width: 36px;\n    }\n\n    .el-color-picker__mask {\n      height: 34px;\n      width: 34px;\n    }\n  }\n\n  @include m(small) {\n    height: 32px;\n\n    .el-color-picker__trigger {\n      height: 32px;\n      width: 32px;\n    }\n\n    .el-color-picker__mask {\n      height: 30px;\n      width: 30px;\n    }\n\n    .el-color-picker__icon,\n    .el-color-picker__empty {\n      transform: translate3d(-50%, -50%, 0) scale(0.8);\n    }\n  }\n\n  @include m(mini) {\n    height: 28px;\n\n    .el-color-picker__trigger {\n      height: 28px;\n      width: 28px;\n    }\n\n    .el-color-picker__mask {\n      height: 26px;\n      width: 26px;\n    }\n\n    .el-color-picker__icon,\n    .el-color-picker__empty {\n      transform: translate3d(-50%, -50%, 0) scale(0.8);\n    }\n  }\n\n  @include e(mask) {\n    height: 38px;\n    width: 38px;\n    border-radius: 4px;\n    position: absolute;\n    top: 1px;\n    left: 1px;\n    z-index: 1;\n    cursor: not-allowed;\n    background-color: rgba(255, 255, 255, .7);\n  }\n\n  @include e(trigger) {\n    display: inline-block;\n    box-sizing: border-box;\n    height: 40px;\n    width: 40px;\n    padding: 4px;\n    border: 1px solid #e6e6e6;\n    border-radius: 4px;\n    font-size: 0;\n    position: relative;\n    cursor: pointer;\n  }\n\n  @include e(color) {\n    position: relative;\n    display: block;\n    box-sizing: border-box;\n    border: 1px solid #999;\n    border-radius: $--border-radius-small;\n    width: 100%;\n    height: 100%;\n    text-align: center;\n\n    @include when(alpha) {\n      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);\n    }\n  }\n\n  @include e(color-inner) {\n    position: absolute;\n    left: 0;\n    top: 0;\n    right: 0;\n    bottom: 0;\n  }\n\n  @include e(empty) {\n    font-size: 12px;\n    color: #999;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate3d(-50%, -50%, 0);\n  }\n\n  @include e(icon) {\n    display: inline-block;\n    position: absolute;\n    width: 100%;\n    top: 50%;\n    left: 50%;\n    transform: translate3d(-50%, -50%, 0);\n    color: $--color-white;\n    text-align: center;\n    font-size: 12px;\n  }\n\n  @include e(panel) {\n    position: absolute;\n    z-index: 10;\n    padding: 6px;\n    box-sizing: content-box;\n    background-color: $--color-white;\n    border: 1px solid $--border-color-lighter;\n    border-radius: $--border-radius-base;\n    box-shadow: $--dropdown-menu-box-shadow;\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/common/popup.scss",
    "content": "@import \"./var.scss\";\n@import \"../mixins/mixins\";\n\n.v-modal-enter {\n  animation: v-modal-in .2s ease;\n}\n\n.v-modal-leave {\n  animation: v-modal-out .2s ease forwards;\n}\n\n@keyframes v-modal-in {\n  0% {\n    opacity: 0;\n  }\n  100% {\n  }\n}\n\n@keyframes v-modal-out {\n  0% {\n  }\n  100% {\n    opacity: 0;\n  }\n}\n\n.v-modal {\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  opacity: $--popup-modal-opacity;\n  background: $--popup-modal-background-color;\n}\n\n@include b(popup-parent) {\n  @include m(hidden) {\n    overflow: hidden;\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/common/transition.scss",
    "content": "@import \"var\";\n\n.fade-in-linear-enter-active,\n.fade-in-linear-leave-active {\n  transition: $--fade-linear-transition;\n}\n.fade-in-linear-enter,\n.fade-in-linear-leave,\n.fade-in-linear-leave-active {\n  opacity: 0;\n}\n\n.el-fade-in-linear-enter-active,\n.el-fade-in-linear-leave-active {\n  transition: $--fade-linear-transition;\n}\n.el-fade-in-linear-enter,\n.el-fade-in-linear-leave,\n.el-fade-in-linear-leave-active {\n  opacity: 0;\n}\n\n.el-fade-in-enter-active,\n.el-fade-in-leave-active {\n  transition: all .3s cubic-bezier(.55,0,.1,1);\n}\n.el-fade-in-enter,\n.el-fade-in-leave-active {\n  opacity: 0;\n}\n\n.el-zoom-in-center-enter-active,\n.el-zoom-in-center-leave-active {\n  transition: all .3s cubic-bezier(.55,0,.1,1);\n}\n.el-zoom-in-center-enter,\n.el-zoom-in-center-leave-active {\n  opacity: 0;\n  transform: scaleX(0);\n}\n\n.el-zoom-in-top-enter-active,\n.el-zoom-in-top-leave-active {\n  opacity: 1;\n  transform: scaleY(1);\n  transition: $--md-fade-transition;\n  transform-origin: center top;\n}\n.el-zoom-in-top-enter,\n.el-zoom-in-top-leave-active {\n  opacity: 0;\n  transform: scaleY(0);\n}\n\n.el-zoom-in-bottom-enter-active,\n.el-zoom-in-bottom-leave-active {\n  opacity: 1;\n  transform: scaleY(1);\n  transition: $--md-fade-transition;\n  transform-origin: center bottom;\n}\n.el-zoom-in-bottom-enter,\n.el-zoom-in-bottom-leave-active {\n  opacity: 0;\n  transform: scaleY(0);\n}\n\n.el-zoom-in-left-enter-active,\n.el-zoom-in-left-leave-active {\n  opacity: 1;\n  transform: scale(1, 1);\n  transition: $--md-fade-transition;\n  transform-origin: top left;\n}\n.el-zoom-in-left-enter,\n.el-zoom-in-left-leave-active {\n  opacity: 0;\n  transform: scale(.45, .45);\n}\n\n.collapse-transition {\n  transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;\n}\n.horizontal-collapse-transition {\n  transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out;\n}\n\n.el-list-enter-active,\n.el-list-leave-active {\n  transition: all 1s;\n}\n.el-list-enter, .el-list-leave-active {\n  opacity: 0;\n  transform: translateY(-30px);\n}\n\n.el-opacity-transition {\n  transition: opacity .3s cubic-bezier(.55,0,.1,1);\n}"
  },
  {
    "path": "packages/theme-chalk/src/common/var.scss",
    "content": "/* Element Chalk Variables */\n\n// Special comment for theme configurator\n// type|skipAutoTranslation|Category|Order\n// skipAutoTranslation 1\n\n/* Transition\n-------------------------- */\n$--all-transition: all .3s cubic-bezier(.645,.045,.355,1) !default;\n$--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;\n$--fade-linear-transition: opacity 200ms linear !default;\n$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;\n$--border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1) !default;\n$--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default;\n\n/* Color\n-------------------------- */\n/// color|1|Brand Color|0\n$--color-primary: #409EFF !default;\n/// color|1|Background Color|4\n$--color-white: #FFFFFF !default;\n/// color|1|Background Color|4\n$--color-black: #000000 !default;\n$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */\n$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */\n$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */\n$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */\n$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */\n$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */\n$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */\n$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */\n$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */\n/// color|1|Functional Color|1\n$--color-success: #67C23A !default;\n/// color|1|Functional Color|1\n$--color-warning: #E6A23C !default;\n/// color|1|Functional Color|1\n$--color-danger: #F56C6C !default;\n/// color|1|Functional Color|1\n$--color-info: #909399 !default;\n\n$--color-success-light: mix($--color-white, $--color-success, 80%) !default;\n$--color-warning-light: mix($--color-white, $--color-warning, 80%) !default;\n$--color-danger-light: mix($--color-white, $--color-danger, 80%) !default;\n$--color-info-light: mix($--color-white, $--color-info, 80%) !default;\n\n$--color-success-lighter: mix($--color-white, $--color-success, 90%) !default;\n$--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default;\n$--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default;\n$--color-info-lighter: mix($--color-white, $--color-info, 90%) !default;\n/// color|1|Font Color|2\n$--color-text-primary: #303133 !default;\n/// color|1|Font Color|2\n$--color-text-regular: #606266 !default;\n/// color|1|Font Color|2\n$--color-text-secondary: #909399 !default;\n/// color|1|Font Color|2\n$--color-text-placeholder: #C0C4CC !default;\n/// color|1|Border Color|3\n$--border-color-base: #DCDFE6 !default;\n/// color|1|Border Color|3\n$--border-color-light: #E4E7ED !default;\n/// color|1|Border Color|3\n$--border-color-lighter: #EBEEF5 !default;\n/// color|1|Border Color|3\n$--border-color-extra-light: #F2F6FC !default;\n\n// Background\n/// color|1|Background Color|4\n$--background-color-base: #F5F7FA !default;\n\n/* Link\n-------------------------- */\n$--link-color: $--color-primary-light-2 !default;\n$--link-hover-color: $--color-primary !default;\n\n/* Border\n-------------------------- */\n$--border-width-base: 1px !default;\n$--border-style-base: solid !default;\n$--border-color-hover: $--color-text-placeholder !default;\n$--border-base: $--border-width-base $--border-style-base $--border-color-base !default;\n/// borderRadius|1|Radius|0\n$--border-radius-base: 4px !default;\n/// borderRadius|1|Radius|0\n$--border-radius-small: 2px !default;\n/// borderRadius|1|Radius|0\n$--border-radius-circle: 100% !default;\n/// borderRadius|1|Radius|0\n$--border-radius-zero: 0 !default;\n\n// Box-shadow\n/// boxShadow|1|Shadow|1\n$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default;\n// boxShadow|1|Shadow|1\n$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default;\n/// boxShadow|1|Shadow|1\n$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;\n\n/* Fill\n-------------------------- */\n$--fill-base: $--color-white !default;\n\n/* Typography\n-------------------------- */\n$--font-path: 'fonts' !default;\n$--font-display: 'auto' !default;\n/// fontSize|1|Font Size|0\n$--font-size-extra-large: 20px !default;\n/// fontSize|1|Font Size|0\n$--font-size-large: 18px !default;\n/// fontSize|1|Font Size|0\n$--font-size-medium: 16px !default;\n/// fontSize|1|Font Size|0\n$--font-size-base: 14px !default;\n/// fontSize|1|Font Size|0\n$--font-size-small: 13px !default;\n/// fontSize|1|Font Size|0\n$--font-size-extra-small: 12px !default;\n/// fontWeight|1|Font Weight|1\n$--font-weight-primary: 500 !default;\n/// fontWeight|1|Font Weight|1\n$--font-weight-secondary: 100 !default;\n/// fontLineHeight|1|Line Height|2\n$--font-line-height-primary: 24px !default;\n/// fontLineHeight|1|Line Height|2\n$--font-line-height-secondary: 16px !default;\n$--font-color-disabled-base: #bbb !default;\n/* Size\n-------------------------- */\n$--size-base: 14px !default;\n\n/* z-index\n-------------------------- */\n$--index-normal: 1 !default;\n$--index-top: 1000 !default;\n$--index-popper: 2000 !default;\n\n/* Disable base\n-------------------------- */\n$--disabled-fill-base: $--background-color-base !default;\n$--disabled-color-base: $--color-text-placeholder !default;\n$--disabled-border-base: $--border-color-light !default;\n\n/* Icon\n-------------------------- */\n$--icon-color: #666 !default;\n$--icon-color-base: $--color-info !default;\n\n/* Checkbox\n-------------------------- */\n/// fontSize||Font|1\n$--checkbox-font-size: 14px !default;\n/// fontWeight||Font|1\n$--checkbox-font-weight: $--font-weight-primary !default;\n/// color||Color|0\n$--checkbox-font-color: $--color-text-regular !default;\n$--checkbox-input-height: 14px !default;\n$--checkbox-input-width: 14px !default;\n/// borderRadius||Border|2\n$--checkbox-border-radius: $--border-radius-small !default;\n/// color||Color|0\n$--checkbox-background-color: $--color-white !default;\n$--checkbox-input-border: $--border-base !default;\n\n/// color||Color|0\n$--checkbox-disabled-border-color: $--border-color-base !default;\n$--checkbox-disabled-input-fill: #edf2fc !default;\n$--checkbox-disabled-icon-color: $--color-text-placeholder !default;\n\n$--checkbox-disabled-checked-input-fill: $--border-color-extra-light !default;\n$--checkbox-disabled-checked-input-border-color: $--border-color-base !default;\n$--checkbox-disabled-checked-icon-color: $--color-text-placeholder !default;\n\n/// color||Color|0\n$--checkbox-checked-font-color: $--color-primary !default;\n$--checkbox-checked-input-border-color: $--color-primary !default;\n/// color||Color|0\n$--checkbox-checked-background-color: $--color-primary !default;\n$--checkbox-checked-icon-color: $--fill-base !default;\n\n$--checkbox-input-border-color-hover: $--color-primary !default;\n/// height||Other|4\n$--checkbox-bordered-height: 40px !default;\n/// padding||Spacing|3\n$--checkbox-bordered-padding: 9px 20px 9px 10px !default;\n/// padding||Spacing|3\n$--checkbox-bordered-medium-padding: 7px 20px 7px 10px !default;\n/// padding||Spacing|3\n$--checkbox-bordered-small-padding: 5px 15px 5px 10px !default;\n/// padding||Spacing|3\n$--checkbox-bordered-mini-padding: 3px 15px 3px 10px !default;\n$--checkbox-bordered-medium-input-height: 14px !default;\n$--checkbox-bordered-medium-input-width: 14px !default;\n/// height||Other|4\n$--checkbox-bordered-medium-height: 36px !default;\n$--checkbox-bordered-small-input-height: 12px !default;\n$--checkbox-bordered-small-input-width: 12px !default;\n/// height||Other|4\n$--checkbox-bordered-small-height: 32px !default;\n$--checkbox-bordered-mini-input-height: 12px !default;\n$--checkbox-bordered-mini-input-width: 12px !default;\n/// height||Other|4\n$--checkbox-bordered-mini-height: 28px !default;\n\n/// color||Color|0\n$--checkbox-button-checked-background-color: $--color-primary !default;\n/// color||Color|0\n$--checkbox-button-checked-font-color: $--color-white !default;\n/// color||Color|0\n$--checkbox-button-checked-border-color: $--color-primary !default;\n\n\n\n/* Radio\n-------------------------- */\n/// fontSize||Font|1\n$--radio-font-size: $--font-size-base !default;\n/// fontWeight||Font|1\n$--radio-font-weight: $--font-weight-primary !default;\n/// color||Color|0\n$--radio-font-color: $--color-text-regular !default;\n$--radio-input-height: 14px !default;\n$--radio-input-width: 14px !default;\n/// borderRadius||Border|2\n$--radio-input-border-radius: $--border-radius-circle !default;\n/// color||Color|0\n$--radio-input-background-color: $--color-white !default;\n$--radio-input-border: $--border-base !default;\n/// color||Color|0\n$--radio-input-border-color: $--border-color-base !default;\n/// color||Color|0\n$--radio-icon-color: $--color-white !default;\n\n$--radio-disabled-input-border-color: $--disabled-border-base !default;\n$--radio-disabled-input-fill: $--disabled-fill-base !default;\n$--radio-disabled-icon-color: $--disabled-fill-base !default;\n\n$--radio-disabled-checked-input-border-color: $--disabled-border-base !default;\n$--radio-disabled-checked-input-fill: $--disabled-fill-base !default;\n$--radio-disabled-checked-icon-color: $--color-text-placeholder !default;\n\n/// color||Color|0\n$--radio-checked-font-color: $--color-primary !default;\n/// color||Color|0\n$--radio-checked-input-border-color: $--color-primary !default;\n/// color||Color|0\n$--radio-checked-input-background-color: $--color-white !default;\n/// color||Color|0\n$--radio-checked-icon-color: $--color-primary !default;\n\n$--radio-input-border-color-hover: $--color-primary !default;\n\n$--radio-bordered-height: 40px !default;\n$--radio-bordered-padding: 12px 20px 0 10px !default;\n$--radio-bordered-medium-padding: 10px 20px 0 10px !default;\n$--radio-bordered-small-padding: 8px 15px 0 10px !default;\n$--radio-bordered-mini-padding: 6px 15px 0 10px !default;\n$--radio-bordered-medium-input-height: 14px !default;\n$--radio-bordered-medium-input-width: 14px !default;\n$--radio-bordered-medium-height: 36px !default;\n$--radio-bordered-small-input-height: 12px !default;\n$--radio-bordered-small-input-width: 12px !default;\n$--radio-bordered-small-height: 32px !default;\n$--radio-bordered-mini-input-height: 12px !default;\n$--radio-bordered-mini-input-width: 12px !default;\n$--radio-bordered-mini-height: 28px !default;\n\n/// fontSize||Font|1\n$--radio-button-font-size: $--font-size-base !default;\n/// color||Color|0\n$--radio-button-checked-background-color: $--color-primary !default;\n/// color||Color|0\n$--radio-button-checked-font-color: $--color-white !default;\n/// color||Color|0\n$--radio-button-checked-border-color: $--color-primary !default;\n$--radio-button-disabled-checked-fill: $--border-color-extra-light !default;\n\n/* Select\n-------------------------- */\n$--select-border-color-hover: $--border-color-hover !default;\n$--select-disabled-border: $--disabled-border-base !default;\n/// fontSize||Font|1\n$--select-font-size: $--font-size-base !default;\n$--select-close-hover-color: $--color-text-secondary !default;\n\n$--select-input-color: $--color-text-placeholder !default;\n$--select-multiple-input-color: #666 !default;\n/// color||Color|0\n$--select-input-focus-border-color: $--color-primary !default;\n/// fontSize||Font|1\n$--select-input-font-size: 14px !default;\n\n$--select-option-color: $--color-text-regular !default;\n$--select-option-disabled-color: $--color-text-placeholder !default;\n$--select-option-disabled-background: $--color-white !default;\n/// height||Other|4\n$--select-option-height: 34px !default;\n$--select-option-hover-background: $--background-color-base !default;\n/// color||Color|0\n$--select-option-selected-font-color: $--color-primary !default;\n$--select-option-selected-hover: $--background-color-base !default;\n\n$--select-group-color: $--color-info !default;\n$--select-group-height: 30px !default;\n$--select-group-font-size: 12px !default;\n\n$--select-dropdown-background: $--color-white !default;\n$--select-dropdown-shadow: $--box-shadow-light !default;\n$--select-dropdown-empty-color: #999 !default;\n/// height||Other|4\n$--select-dropdown-max-height: 274px !default;\n$--select-dropdown-padding: 6px 0 !default;\n$--select-dropdown-empty-padding: 10px 0 !default;\n$--select-dropdown-border: solid 1px $--border-color-light !default;\n\n/* Alert\n-------------------------- */\n$--alert-padding: 8px 16px !default;\n/// borderRadius||Border|2\n$--alert-border-radius: $--border-radius-base !default;\n/// fontSize||Font|1\n$--alert-title-font-size: 13px !default;\n/// fontSize||Font|1\n$--alert-description-font-size: 12px !default;\n/// fontSize||Font|1\n$--alert-close-font-size: 12px !default;\n/// fontSize||Font|1\n$--alert-close-customed-font-size: 13px !default;\n\n$--alert-success-color: $--color-success-lighter !default;\n$--alert-info-color: $--color-info-lighter !default;\n$--alert-warning-color: $--color-warning-lighter !default;\n$--alert-danger-color: $--color-danger-lighter !default;\n\n/// height||Other|4\n$--alert-icon-size: 16px !default;\n/// height||Other|4\n$--alert-icon-large-size: 28px !default;\n\n/* MessageBox\n-------------------------- */\n/// color||Color|0\n$--messagebox-title-color: $--color-text-primary !default;\n$--msgbox-width: 420px !default;\n$--msgbox-border-radius: 4px !default;\n/// fontSize||Font|1\n$--messagebox-font-size: $--font-size-large !default;\n/// fontSize||Font|1\n$--messagebox-content-font-size: $--font-size-base !default;\n/// color||Color|0\n$--messagebox-content-color: $--color-text-regular !default;\n/// fontSize||Font|1\n$--messagebox-error-font-size: 12px !default;\n$--msgbox-padding-primary: 15px !default;\n/// color||Color|0\n$--messagebox-success-color: $--color-success !default;\n/// color||Color|0\n$--messagebox-info-color: $--color-info !default;\n/// color||Color|0\n$--messagebox-warning-color: $--color-warning !default;\n/// color||Color|0\n$--messagebox-danger-color: $--color-danger !default;\n\n/* Message\n-------------------------- */\n$--message-shadow: $--box-shadow-base !default;\n$--message-min-width: 380px !default;\n$--message-background-color: #edf2fc !default;\n$--message-padding: 15px 15px 15px 20px !default;\n/// color||Color|0\n$--message-close-icon-color: $--color-text-placeholder !default;\n/// height||Other|4\n$--message-close-size: 16px !default;\n/// color||Color|0\n$--message-close-hover-color: $--color-text-secondary !default;\n\n/// color||Color|0\n$--message-success-font-color: $--color-success !default;\n/// color||Color|0\n$--message-info-font-color: $--color-info !default;\n/// color||Color|0\n$--message-warning-font-color: $--color-warning !default;\n/// color||Color|0\n$--message-danger-font-color: $--color-danger !default;\n\n/* Notification\n-------------------------- */\n$--notification-width: 330px !default;\n/// padding||Spacing|3\n$--notification-padding: 14px 26px 14px 13px !default;\n$--notification-radius: 8px !default;\n$--notification-shadow: $--box-shadow-light !default;\n/// color||Color|0\n$--notification-border-color: $--border-color-lighter !default;\n$--notification-icon-size: 24px !default;\n$--notification-close-font-size: $--message-close-size !default;\n$--notification-group-margin-left: 13px !default;\n$--notification-group-margin-right: 8px !default;\n/// fontSize||Font|1\n$--notification-content-font-size: $--font-size-base !default;\n/// color||Color|0\n$--notification-content-color: $--color-text-regular !default;\n/// fontSize||Font|1\n$--notification-title-font-size: 16px !default;\n/// color||Color|0\n$--notification-title-color: $--color-text-primary !default;\n\n/// color||Color|0\n$--notification-close-color: $--color-text-secondary !default;\n/// color||Color|0\n$--notification-close-hover-color: $--color-text-regular !default;\n\n/// color||Color|0\n$--notification-success-icon-color: $--color-success !default;\n/// color||Color|0\n$--notification-info-icon-color: $--color-info !default;\n/// color||Color|0\n$--notification-warning-icon-color: $--color-warning !default;\n/// color||Color|0\n$--notification-danger-icon-color: $--color-danger !default;\n\n/* Input\n-------------------------- */\n$--input-font-size: $--font-size-base !default;\n/// color||Color|0\n$--input-font-color: $--color-text-regular !default;\n/// height||Other|4\n$--input-height: 40px !default;\n$--input-border: $--border-base !default;\n$--input-border-color: $--border-color-base !default;\n/// borderRadius||Border|2\n$--input-border-radius: $--border-radius-base !default;\n$--input-border-color-hover: $--border-color-hover !default;\n/// color||Color|0\n$--input-background-color: $--color-white !default;\n$--input-fill-disabled: $--disabled-fill-base !default;\n$--input-color-disabled: $--font-color-disabled-base !default;\n/// color||Color|0\n$--input-icon-color: $--color-text-placeholder !default;\n/// color||Color|0\n$--input-placeholder-color: $--color-text-placeholder !default;\n$--input-max-width: 314px !default;\n\n$--input-hover-border: $--border-color-hover !default;\n$--input-clear-hover-color: $--color-text-secondary !default;\n\n$--input-focus-border: $--color-primary !default;\n$--input-focus-fill: $--color-white !default;\n\n$--input-disabled-fill: $--disabled-fill-base !default;\n$--input-disabled-border: $--disabled-border-base !default;\n$--input-disabled-color: $--disabled-color-base !default;\n$--input-disabled-placeholder-color: $--color-text-placeholder !default;\n\n/// fontSize||Font|1\n$--input-medium-font-size: 14px !default;\n/// height||Other|4\n$--input-medium-height: 36px !default;\n/// fontSize||Font|1\n$--input-small-font-size: 13px !default;\n/// height||Other|4\n$--input-small-height: 32px !default;\n/// fontSize||Font|1\n$--input-mini-font-size: 12px !default;\n/// height||Other|4\n$--input-mini-height: 28px !default;\n\n/* Cascader\n-------------------------- */\n/// color||Color|0\n$--cascader-menu-font-color: $--color-text-regular !default;\n/// color||Color|0\n$--cascader-menu-selected-font-color: $--color-primary !default;\n$--cascader-menu-fill: $--fill-base !default;\n$--cascader-menu-font-size: $--font-size-base !default;\n$--cascader-menu-radius: $--border-radius-base !default;\n$--cascader-menu-border: solid 1px $--border-color-light !default;\n$--cascader-menu-shadow: $--box-shadow-light !default;\n$--cascader-node-background-hover: $--background-color-base !default;\n$--cascader-node-color-disabled:$--color-text-placeholder !default;\n$--cascader-color-empty:$--color-text-placeholder !default;\n$--cascader-tag-background: #f0f2f5;\n\n/* Group\n-------------------------- */\n$--group-option-flex: 0 0 (1/5) * 100% !default;\n$--group-option-offset-bottom: 12px !default;\n$--group-option-fill-hover: rgba($--color-black, 0.06) !default;\n$--group-title-color: $--color-black !default;\n$--group-title-font-size: $--font-size-base !default;\n$--group-title-width: 66px !default;\n\n/* Tab\n-------------------------- */\n$--tab-font-size: $--font-size-base !default;\n$--tab-border-line: 1px solid #e4e4e4 !default;\n$--tab-header-color-active: $--color-text-secondary !default;\n$--tab-header-color-hover: $--color-text-regular !default;\n$--tab-header-color: $--color-text-regular !default;\n$--tab-header-fill-active: rgba($--color-black, 0.06) !default;\n$--tab-header-fill-hover: rgba($--color-black, 0.06) !default;\n$--tab-vertical-header-width: 90px !default;\n$--tab-vertical-header-count-color: $--color-white !default;\n$--tab-vertical-header-count-fill: $--color-text-secondary !default;\n\n/* Button\n-------------------------- */\n/// fontSize||Font|1\n$--button-font-size: $--font-size-base !default;\n/// fontWeight||Font|1\n$--button-font-weight: $--font-weight-primary !default;\n/// borderRadius||Border|2\n$--button-border-radius: $--border-radius-base !default;\n/// padding||Spacing|3\n$--button-padding-vertical: 12px !default;\n/// padding||Spacing|3\n$--button-padding-horizontal: 20px !default;\n\n/// fontSize||Font|1\n$--button-medium-font-size: $--font-size-base !default;\n/// borderRadius||Border|2\n$--button-medium-border-radius: $--border-radius-base !default;\n/// padding||Spacing|3\n$--button-medium-padding-vertical: 10px !default;\n/// padding||Spacing|3\n$--button-medium-padding-horizontal: 20px !default;\n\n/// fontSize||Font|1\n$--button-small-font-size: 12px !default;\n$--button-small-border-radius: #{$--border-radius-base - 1} !default;\n/// padding||Spacing|3\n$--button-small-padding-vertical: 9px !default;\n/// padding||Spacing|3\n$--button-small-padding-horizontal: 15px !default;\n/// fontSize||Font|1\n$--button-mini-font-size: 12px !default;\n$--button-mini-border-radius: #{$--border-radius-base - 1} !default;\n/// padding||Spacing|3\n$--button-mini-padding-vertical: 7px !default;\n/// padding||Spacing|3\n$--button-mini-padding-horizontal: 15px !default;\n\n/// color||Color|0\n$--button-default-font-color: $--color-text-regular !default;\n/// color||Color|0\n$--button-default-background-color: $--color-white !default;\n/// color||Color|0\n$--button-default-border-color: $--border-color-base !default;\n\n/// color||Color|0\n$--button-disabled-font-color: $--color-text-placeholder !default;\n/// color||Color|0\n$--button-disabled-background-color: $--color-white !default;\n/// color||Color|0\n$--button-disabled-border-color: $--border-color-lighter !default;\n\n/// color||Color|0\n$--button-primary-border-color: $--color-primary !default;\n/// color||Color|0\n$--button-primary-font-color: $--color-white !default;\n/// color||Color|0\n$--button-primary-background-color: $--color-primary !default;\n/// color||Color|0\n$--button-success-border-color: $--color-success !default;\n/// color||Color|0\n$--button-success-font-color: $--color-white !default;\n/// color||Color|0\n$--button-success-background-color: $--color-success !default;\n/// color||Color|0\n$--button-warning-border-color: $--color-warning !default;\n/// color||Color|0\n$--button-warning-font-color: $--color-white !default;\n/// color||Color|0\n$--button-warning-background-color: $--color-warning !default;\n/// color||Color|0\n$--button-danger-border-color: $--color-danger !default;\n/// color||Color|0\n$--button-danger-font-color: $--color-white !default;\n/// color||Color|0\n$--button-danger-background-color: $--color-danger !default;\n/// color||Color|0\n$--button-info-border-color: $--color-info !default;\n/// color||Color|0\n$--button-info-font-color: $--color-white !default;\n/// color||Color|0\n$--button-info-background-color: $--color-info !default;\n\n$--button-hover-tint-percent: 20% !default;\n$--button-active-shade-percent: 10% !default;\n\n\n/* cascader\n-------------------------- */\n$--cascader-height: 200px !default;\n\n/* Switch\n-------------------------- */\n/// color||Color|0\n$--switch-on-color: $--color-primary !default;\n/// color||Color|0\n$--switch-off-color: $--border-color-base !default;\n/// fontSize||Font|1\n$--switch-font-size: $--font-size-base !default;\n$--switch-core-border-radius: 10px !default;\n// height||Other|4 TODO: width 代码写死的40px 所以下面这三个属性都没意义\n$--switch-width: 40px !default;\n// height||Other|4\n$--switch-height: 20px !default;\n// height||Other|4\n$--switch-button-size: 16px !default;\n\n/* Dialog\n-------------------------- */\n$--dialog-background-color: $--color-white !default;\n$--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !default;\n/// fontSize||Font|1\n$--dialog-title-font-size: $--font-size-large !default;\n/// fontSize||Font|1\n$--dialog-content-font-size: 14px !default;\n/// fontLineHeight||LineHeight|2\n$--dialog-font-line-height: $--font-line-height-primary !default;\n/// padding||Spacing|3\n$--dialog-padding-primary: 20px !default;\n\n/* Table\n-------------------------- */\n/// color||Color|0\n$--table-border-color: $--border-color-lighter !default;\n$--table-border: 1px solid $--table-border-color !default;\n/// color||Color|0\n$--table-font-color: $--color-text-regular !default;\n/// color||Color|0\n$--table-header-font-color: $--color-text-secondary !default;\n/// color||Color|0\n$--table-row-hover-background-color: $--background-color-base !default;\n$--table-current-row-background-color: $--color-primary-light-9 !default;\n/// color||Color|0\n$--table-header-background-color: $--color-white !default;\n$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12) !default;\n\n/* Pagination\n-------------------------- */\n/// fontSize||Font|1\n$--pagination-font-size: 13px !default;\n/// color||Color|0\n$--pagination-background-color: $--color-white !default;\n/// color||Color|0\n$--pagination-font-color: $--color-text-primary !default;\n$--pagination-border-radius: 3px !default;\n/// color||Color|0\n$--pagination-button-color: $--color-text-primary !default;\n/// height||Other|4\n$--pagination-button-width: 35.5px !default;\n/// height||Other|4\n$--pagination-button-height: 28px !default;\n/// color||Color|0\n$--pagination-button-disabled-color: $--color-text-placeholder !default;\n/// color||Color|0\n$--pagination-button-disabled-background-color: $--color-white !default;\n/// color||Color|0\n$--pagination-hover-color: $--color-primary !default;\n\n/* Popup\n-------------------------- */\n/// color||Color|0\n$--popup-modal-background-color: $--color-black !default;\n/// opacity||Other|1\n$--popup-modal-opacity: 0.5 !default;\n\n/* Popover\n-------------------------- */\n/// color||Color|0\n$--popover-background-color: $--color-white !default;\n/// fontSize||Font|1\n$--popover-font-size: $--font-size-base !default;\n/// color||Color|0\n$--popover-border-color: $--border-color-lighter !default;\n$--popover-arrow-size: 6px !default;\n/// padding||Spacing|3\n$--popover-padding: 12px !default;\n$--popover-padding-large: 18px 20px !default;\n/// fontSize||Font|1\n$--popover-title-font-size: 16px !default;\n/// color||Color|0\n$--popover-title-font-color: $--color-text-primary !default;\n\n/* Tooltip\n-------------------------- */\n/// color|1|Color|0\n$--tooltip-fill: $--color-text-primary !default;\n/// color|1|Color|0\n$--tooltip-color: $--color-white !default;\n/// fontSize||Font|1\n$--tooltip-font-size: 12px !default;\n/// color||Color|0\n$--tooltip-border-color: $--color-text-primary !default;\n$--tooltip-arrow-size: 6px !default;\n/// padding||Spacing|3\n$--tooltip-padding: 10px !default;\n\n/* Tag\n-------------------------- */\n/// color||Color|0\n$--tag-info-color: $--color-info !default;\n/// color||Color|0\n$--tag-primary-color: $--color-primary !default;\n/// color||Color|0\n$--tag-success-color: $--color-success !default;\n/// color||Color|0\n$--tag-warning-color: $--color-warning !default;\n/// color||Color|0\n$--tag-danger-color: $--color-danger !default;\n/// fontSize||Font|1\n$--tag-font-size: 12px !default;\n$--tag-border-radius: 4px !default;\n$--tag-padding: 0 10px !default;\n\n/* Tree\n-------------------------- */\n/// color||Color|0\n$--tree-node-hover-background-color: $--background-color-base !default;\n/// color||Color|0\n$--tree-font-color: $--color-text-regular !default;\n/// color||Color|0\n$--tree-expand-icon-color: $--color-text-placeholder !default;\n\n/* Dropdown\n-------------------------- */\n$--dropdown-menu-box-shadow: $--box-shadow-light !default;\n$--dropdown-menuItem-hover-fill: $--color-primary-light-9 !default;\n$--dropdown-menuItem-hover-color: $--link-color !default;\n\n/* Badge\n-------------------------- */\n/// color||Color|0\n$--badge-background-color: $--color-danger !default;\n$--badge-radius: 10px !default;\n/// fontSize||Font|1\n$--badge-font-size: 12px !default;\n/// padding||Spacing|3\n$--badge-padding: 6px !default;\n/// height||Other|4\n$--badge-size: 18px !default;\n\n/* Card\n--------------------------*/\n/// color||Color|0\n$--card-border-color: $--border-color-lighter !default;\n$--card-border-radius: 4px !default;\n/// padding||Spacing|3\n$--card-padding: 20px !default;\n\n/* Slider\n--------------------------*/\n/// color||Color|0\n$--slider-main-background-color: $--color-primary !default;\n/// color||Color|0\n$--slider-runway-background-color: $--border-color-light !default;\n$--slider-button-hover-color: mix($--color-primary, black, 97%) !default;\n$--slider-stop-background-color: $--color-white !default;\n$--slider-disable-color: $--color-text-placeholder !default;\n$--slider-margin: 16px 0 !default;\n$--slider-border-radius: 3px !default;\n/// height|1|Other|4\n$--slider-height: 6px !default;\n/// height||Other|4\n$--slider-button-size: 16px !default;\n$--slider-button-wrapper-size: 36px !default;\n$--slider-button-wrapper-offset: -15px !default;\n\n/* Steps\n--------------------------*/\n$--steps-border-color: $--disabled-border-base !default;\n$--steps-border-radius: 4px !default;\n$--steps-padding: 20px !default;\n\n/* Menu\n--------------------------*/\n/// fontSize||Font|1\n$--menu-item-font-size: $--font-size-base !default;\n/// color||Color|0\n$--menu-item-font-color: $--color-text-primary !default;\n/// color||Color|0\n$--menu-background-color: $--color-white !default;\n$--menu-item-hover-fill: $--color-primary-light-9 !default;\n\n/* Rate\n--------------------------*/\n$--rate-height: 20px !default;\n/// fontSize||Font|1\n$--rate-font-size: $--font-size-base !default;\n/// height||Other|3\n$--rate-icon-size: 18px !default;\n/// margin||Spacing|2\n$--rate-icon-margin: 6px !default;\n$--rate-icon-color: $--color-text-placeholder !default;\n\n/* DatePicker\n--------------------------*/\n$--datepicker-font-color: $--color-text-regular !default;\n/// color|1|Color|0\n$--datepicker-off-font-color: $--color-text-placeholder !default;\n/// color||Color|0\n$--datepicker-header-font-color: $--color-text-regular !default;\n$--datepicker-icon-color: $--color-text-primary !default;\n$--datepicker-border-color: $--disabled-border-base !default;\n$--datepicker-inner-border-color: #e4e4e4 !default;\n/// color||Color|0\n$--datepicker-inrange-background-color: $--border-color-extra-light !default;\n/// color||Color|0\n$--datepicker-inrange-hover-background-color: $--border-color-extra-light !default;\n/// color||Color|0\n$--datepicker-active-color: $--color-primary !default;\n/// color||Color|0\n$--datepicker-hover-font-color: $--color-primary !default;\n$--datepicker-cell-hover-color: #fff !default;\n\n/* Loading\n--------------------------*/\n/// height||Other|4\n$--loading-spinner-size: 42px !default;\n/// height||Other|4\n$--loading-fullscreen-spinner-size: 50px !default;\n\n/* Scrollbar\n--------------------------*/\n$--scrollbar-background-color: rgba($--color-text-secondary, .3) !default;\n$--scrollbar-hover-background-color: rgba($--color-text-secondary, .5) !default;\n\n/* Carousel\n--------------------------*/\n/// fontSize||Font|1\n$--carousel-arrow-font-size: 12px !default;\n$--carousel-arrow-size: 36px !default;\n$--carousel-arrow-background: rgba(31, 45, 61, 0.11) !default;\n$--carousel-arrow-hover-background: rgba(31, 45, 61, 0.23) !default;\n/// width||Other|4\n$--carousel-indicator-width: 30px !default;\n/// height||Other|4\n$--carousel-indicator-height: 2px !default;\n$--carousel-indicator-padding-horizontal: 4px !default;\n$--carousel-indicator-padding-vertical: 12px !default;\n$--carousel-indicator-out-color: $--border-color-hover !default;\n\n/* Collapse\n--------------------------*/\n/// color||Color|0\n$--collapse-border-color: $--border-color-lighter !default;\n/// height||Other|4\n$--collapse-header-height: 48px !default;\n/// color||Color|0\n$--collapse-header-background-color: $--color-white !default;\n/// color||Color|0\n$--collapse-header-font-color: $--color-text-primary !default;\n/// fontSize||Font|1\n$--collapse-header-font-size: 13px !default;\n/// color||Color|0\n$--collapse-content-background-color: $--color-white !default;\n/// fontSize||Font|1\n$--collapse-content-font-size: 13px !default;\n/// color||Color|0\n$--collapse-content-font-color: $--color-text-primary !default;\n\n/* Transfer\n--------------------------*/\n$--transfer-border-color: $--border-color-lighter !default;\n$--transfer-border-radius: $--border-radius-base !default;\n/// height||Other|4\n$--transfer-panel-width: 200px !default;\n/// height||Other|4\n$--transfer-panel-header-height: 40px !default;\n/// color||Color|0\n$--transfer-panel-header-background-color: $--background-color-base !default;\n/// height||Other|4\n$--transfer-panel-footer-height: 40px !default;\n/// height||Other|4\n$--transfer-panel-body-height: 246px !default;\n/// height||Other|4\n$--transfer-item-height: 30px !default;\n/// height||Other|4\n$--transfer-filter-height: 32px !default;\n\n/* Header\n  --------------------------*/\n$--header-padding: 0 20px !default;\n\n/* Footer\n--------------------------*/\n$--footer-padding: 0 20px !default;\n\n/* Main\n--------------------------*/\n$--main-padding: 20px !default;\n\n/* Timeline\n--------------------------*/\n$--timeline-node-size-normal: 12px !default;\n$--timeline-node-size-large: 14px !default;\n$--timeline-node-color: $--border-color-light !default;\n\n/* Backtop\n--------------------------*/\n/// color||Color|0\n$--backtop-background-color: $--color-white !default;\n/// color||Color|0\n$--backtop-font-color: $--color-primary !default;\n/// color||Color|0\n$--backtop-hover-background-color: $--border-color-extra-light !default;\n\n/* Link\n--------------------------*/\n/// fontSize||Font|1\n$--link-font-size: $--font-size-base !default;\n/// fontWeight||Font|1\n$--link-font-weight: $--font-weight-primary !default;\n/// color||Color|0\n$--link-default-font-color: $--color-text-regular !default;\n/// color||Color|0\n$--link-default-active-color: $--color-primary !default;\n/// color||Color|0\n$--link-disabled-font-color: $--color-text-placeholder !default;\n/// color||Color|0\n$--link-primary-font-color: $--color-primary !default;\n/// color||Color|0\n$--link-success-font-color: $--color-success !default;\n/// color||Color|0\n$--link-warning-font-color: $--color-warning !default;\n/// color||Color|0\n$--link-danger-font-color: $--color-danger !default;\n/// color||Color|0\n$--link-info-font-color: $--color-info !default;\n/* Calendar\n--------------------------*/\n/// border||Other|4\n$--calendar-border: $--table-border !default;\n/// color||Other|4\n$--calendar-selected-background-color: #F2F8FE !default;\n$--calendar-cell-width: 85px !default;\n\n/* Form\n-------------------------- */\n/// fontSize||Font|1\n$--form-label-font-size: $--font-size-base !default;\n\n/* Avatar\n--------------------------*/\n/// color||Color|0\n$--avatar-font-color: #fff !default;\n/// color||Color|0\n$--avatar-background-color: #C0C4CC !default;\n/// fontSize||Font Size|1\n$--avatar-text-font-size: 14px !default;\n/// fontSize||Font Size|1\n$--avatar-icon-font-size: 18px !default;\n/// borderRadius||Border|2\n$--avatar-border-radius: $--border-radius-base !default;\n/// size|1|Avatar Size|3\n$--avatar-large-size: 40px !default;\n/// size|1|Avatar Size|3\n$--avatar-medium-size: 36px !default;\n/// size|1|Avatar Size|3\n$--avatar-small-size: 28px !default;\n\n/* Empty\n-------------------------- */\n$--empty-padding: 40px 0 !default;\n$--empty-image-width: 160px !default;\n$--empty-description-margin-top: 20px !default;\n$--empty-bottom-margin-top: 20px !default;\n\n/* Descriptions\n-------------------------- */\n$--descriptions-header-margin-bottom: 20px !default;\n$--descriptions-title-font-size: 16px !default;\n$--descriptions-table-border: 1px solid $--border-color-lighter !default;\n$--descriptions-item-bordered-label-background: #fafafa !default;\n\n/* Skeleton \n--------------------------*/\n$--skeleton-color: #f2f2f2 !default;\n$--skeleton-to-color: #e6e6e6 !default;\n\n/* Svg\n--------------- */\n$--svg-monochrome-grey: #DCDDE0 !default;\n\n/* Result\n-------------------------- */\n$--result-padding: 40px 30px !default;\n$--result-icon-font-size: 64px !default;\n$--result-title-font-size: 20px !default;\n$--result-title-margin-top: 20px !default;\n$--result-subtitle-margin-top: 10px !default;\n$--result-extra-margin-top: 30px !default;\n$--result-info-color: $--color-info !default;\n$--result-success-color: $--color-success !default;\n$--result-warning-color: $--color-warning !default;\n$--result-danger-color: $--color-danger !default;\n\n/* Break-point\n--------------------------*/\n$--sm: 768px !default;\n$--md: 992px !default;\n$--lg: 1200px !default;\n$--xl: 1920px !default;\n\n$--breakpoints: (\n  'xs' : (max-width: $--sm - 1),\n  'sm' : (min-width: $--sm),\n  'md' : (min-width: $--md),\n  'lg' : (min-width: $--lg),\n  'xl' : (min-width: $--xl)\n);\n\n$--breakpoints-spec: (\n  'xs-only' : (max-width: $--sm - 1),\n  'sm-and-up' : (min-width: $--sm),\n  'sm-only': \"(min-width: #{$--sm}) and (max-width: #{$--md - 1})\",\n  'sm-and-down': (max-width: $--md - 1),\n  'md-and-up' : (min-width: $--md),\n  'md-only': \"(min-width: #{$--md}) and (max-width: #{$--lg - 1})\",\n  'md-and-down': (max-width: $--lg - 1),\n  'lg-and-up' : (min-width: $--lg),\n  'lg-only': \"(min-width: #{$--lg}) and (max-width: #{$--xl - 1})\",\n  'lg-and-down': (max-width: $--xl - 1),\n  'xl-only' : (min-width: $--xl),\n);\n"
  },
  {
    "path": "packages/theme-chalk/src/container.scss",
    "content": "@import \"mixins/mixins\";\n\n@include b(container) {\n  display: flex;\n  flex-direction: row;\n  flex: 1;\n  flex-basis: auto;\n  box-sizing: border-box;\n  min-width: 0;\n\n  @include when(vertical) {\n    flex-direction: column;\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/date-picker/date-picker.scss",
    "content": "@import \"../common/var\";\n@import \"../mixins/mixins\";\n@import \"./picker-panel.scss\";\n\n@include b(date-picker) {\n  width: 322px;\n\n  &.has-sidebar.has-time {\n    width: 434px;\n  }\n\n  &.has-sidebar {\n    width: 438px;\n  }\n\n  &.has-time .el-picker-panel__body-wrapper {\n    position: relative;\n  }\n\n  .el-picker-panel__content {\n    width: 292px;\n  }\n\n  table {\n    table-layout: fixed;\n    width: 100%;\n  }\n\n  @include e(editor-wrap) {\n    position: relative;\n    display: table-cell;\n    padding: 0 5px;\n  }\n\n  @include e(time-header) {\n    position: relative;\n    border-bottom: 1px solid $--datepicker-inner-border-color;\n    font-size: 12px;\n    padding: 8px 5px 5px 5px;\n    display: table;\n    width: 100%;\n    box-sizing: border-box;\n  }\n\n  @include e(header) {\n    margin: 12px;\n    text-align: center;\n\n    @include m(bordered) {\n      margin-bottom: 0;\n      padding-bottom: 12px;\n      border-bottom: solid 1px $--border-color-lighter;\n\n      & + .el-picker-panel__content {\n        margin-top: 0;\n      }\n    }\n  }\n\n  @include e(header-label) {\n    font-size: 16px;\n    font-weight: 500;\n    padding: 0 5px;\n    line-height: 22px;\n    text-align: center;\n    cursor: pointer;\n    color: $--color-text-regular;\n\n    &:hover {\n      color: $--datepicker-hover-font-color;\n    }\n\n    &.active {\n      color: $--datepicker-active-color;\n    }\n  }\n\n  @include e(prev-btn) {\n    float: left;\n  }\n\n  @include e(next-btn) {\n    float: right;\n  }\n\n  @include e(time-wrap) {\n    padding: 10px;\n    text-align: center;\n  }\n\n  @include e(time-label) {\n    float: left;\n    cursor: pointer;\n    line-height: 30px;\n    margin-left: 10px;\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/date-picker/date-range-picker.scss",
    "content": "@import \"../common/var\";\n\n@include b(date-range-picker) {\n  width: 646px;\n\n  &.has-sidebar {\n    width: 756px;\n  }\n\n  table {\n    table-layout: fixed;\n    width: 100%;\n  }\n\n  .el-picker-panel__body {\n    min-width: 513px;\n  }\n\n  .el-picker-panel__content {\n    margin: 0;\n  }\n\n  @include e(header) {\n    position: relative;\n    text-align: center;\n    height: 28px;\n\n    [class*=arrow-left] {\n      float: left;\n    }\n\n    [class*=arrow-right] {\n      float: right;\n    }\n\n    div {\n      font-size: 16px;\n      font-weight: 500;\n      margin-right: 50px;\n    }\n  }\n\n  @include e(content) {\n    float: left;\n    width: 50%;\n    box-sizing: border-box;\n    margin: 0;\n    padding: 16px;\n\n    @include when(left) {\n      border-right: 1px solid $--datepicker-inner-border-color;\n    }\n    .el-date-range-picker__header {\n\n      div {\n        margin-left: 50px;\n        margin-right: 50px;\n      }\n    }\n  }\n\n  @include e(editors-wrap) {\n    box-sizing: border-box;\n    display: table-cell;\n\n    @include when(right) {\n      text-align: right;\n    }\n  }\n\n  @include e(time-header) {\n    position: relative;\n    border-bottom: 1px solid $--datepicker-inner-border-color;\n    font-size: 12px;\n    padding: 8px 5px 5px 5px;\n    display: table;\n    width: 100%;\n    box-sizing: border-box;\n\n    > .el-icon-arrow-right {\n      font-size: 20px;\n      vertical-align: middle;\n      display: table-cell;\n      color: $--datepicker-icon-color;\n    }\n  }\n\n  @include e(time-picker-wrap) {\n    position: relative;\n    display: table-cell;\n    padding: 0 5px;\n\n    .el-picker-panel {\n      position: absolute;\n      top: 13px;\n      right: 0;\n      z-index: 1;\n      background: $--color-white;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/date-picker/date-table.scss",
    "content": "@import \"../common/var\";\n@import \"../mixins/mixins\";\n\n@include b(date-table) {\n  font-size: 12px;\n  user-select: none;\n\n  @include when(week-mode) {\n    .el-date-table__row {\n      &:hover {\n        div {\n          background-color: $--datepicker-inrange-background-color;\n        }\n        td.available:hover {\n          color: $--datepicker-font-color;\n        }\n        td:first-child div {\n          margin-left: 5px;\n          border-top-left-radius: 15px;\n          border-bottom-left-radius: 15px;\n        }\n        td:last-child div {\n          margin-right: 5px;\n          border-top-right-radius: 15px;\n          border-bottom-right-radius: 15px;\n        }\n      }\n\n      &.current div {\n        background-color: $--datepicker-inrange-background-color;\n      }\n    }\n  }\n\n  td {\n    width: 32px;\n    height: 30px;\n    padding: 4px 0;\n    box-sizing: border-box;\n    text-align: center;\n    cursor: pointer;\n    position: relative;\n\n    & div {\n      height: 30px;\n      padding: 3px 0;\n      box-sizing: border-box;\n    }\n\n    & span {\n      width: 24px;\n      height: 24px;\n      display: block;\n      margin: 0 auto;\n      line-height: 24px;\n      position: absolute;\n      left: 50%;\n      transform: translateX(-50%);\n      border-radius: 50%;\n    }\n\n    &.next-month,\n    &.prev-month {\n      color: $--datepicker-off-font-color;\n    }\n\n    &.today {\n      position: relative;\n      span {\n        color: $--color-primary;\n        font-weight: bold;\n      }\n      &.start-date span,\n      &.end-date span {\n        color: $--color-white;\n      }\n    }\n\n    &.available:hover {\n      color: $--datepicker-hover-font-color;\n    }\n\n    &.in-range div {\n      background-color: $--datepicker-inrange-background-color;\n      &:hover {\n        background-color: $--datepicker-inrange-hover-background-color;\n      }\n    }\n\n    &.current:not(.disabled) span {\n      color: $--color-white;\n      background-color: $--datepicker-active-color;\n    }\n    &.start-date div,\n    &.end-date div {\n      color: $--color-white;\n    }\n\n    &.start-date span,\n    &.end-date span {\n      background-color: $--datepicker-active-color;\n    }\n\n    &.start-date div {\n      margin-left: 5px;\n      border-top-left-radius: 15px;\n      border-bottom-left-radius: 15px;\n    }\n\n    &.end-date div {\n      margin-right: 5px;\n      border-top-right-radius: 15px;\n      border-bottom-right-radius: 15px;\n    }\n\n    &.disabled div {\n      background-color: $--background-color-base;\n      opacity: 1;\n      cursor: not-allowed;\n      color: $--color-text-placeholder;\n    }\n\n    &.selected div {\n      margin-left: 5px;\n      margin-right: 5px;\n      background-color: $--datepicker-inrange-background-color;\n      border-radius: 15px;\n      &:hover {\n        background-color: $--datepicker-inrange-hover-background-color;\n      }\n    }\n\n    &.selected span {\n      background-color: $--datepicker-active-color;\n      color: $--color-white;\n      border-radius: 15px;\n    }\n\n    &.week {\n      font-size: 80%;\n      color: $--datepicker-header-font-color;\n    }\n  }\n\n  th {\n    padding: 5px;\n    color: $--datepicker-header-font-color;\n    font-weight: 400;\n    border-bottom: solid 1px $--border-color-lighter;\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/date-picker/month-table.scss",
    "content": "@import \"../common/var\";\n\n@include b(month-table) {\n  font-size: 12px;\n  margin: -1px;\n  border-collapse: collapse;\n\n  td {\n    text-align: center;\n    padding: 8px 0px;\n    cursor: pointer;\n    & div {\n      height: 48px;\n      padding: 6px 0;\n      box-sizing: border-box;\n    }\n    &.today {\n      .cell {\n        color: $--color-primary;\n        font-weight: bold;\n      }\n      &.start-date .cell,\n      &.end-date .cell {\n        color: $--color-white;\n      }\n    }\n\n    &.disabled .cell {\n      background-color: $--background-color-base;\n      cursor: not-allowed;\n      color: $--color-text-placeholder;\n\n      &:hover {\n        color: $--color-text-placeholder;\n      }\n    }\n\n    .cell {\n      width: 60px;\n      height: 36px;\n      display: block;\n      line-height: 36px;\n      color: $--datepicker-font-color;\n      margin: 0 auto;\n      border-radius: 18px;\n      &:hover {\n        color: $--datepicker-hover-font-color;\n      }\n    }\n\n    &.in-range div {\n      background-color: $--datepicker-inrange-background-color;\n      &:hover {\n        background-color: $--datepicker-inrange-hover-background-color;\n      }\n    }\n    &.start-date div,\n    &.end-date div {\n      color: $--color-white;\n    }\n\n    &.start-date .cell,\n    &.end-date .cell {\n      color: $--color-white;\n      background-color: $--datepicker-active-color;\n    }\n\n    &.start-date div {\n      border-top-left-radius: 24px;\n      border-bottom-left-radius: 24px;\n    }\n\n    &.end-date div {\n      border-top-right-radius: 24px;\n      border-bottom-right-radius: 24px;\n    }\n\n    &.current:not(.disabled) .cell {\n      color: $--datepicker-active-color;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/date-picker/picker-panel.scss",
    "content": "@import \"../common/var\";\n\n@include b(picker-panel) {\n  color: $--color-text-regular;\n  border: 1px solid $--datepicker-border-color;\n  box-shadow: $--box-shadow-light;\n  background: $--color-white;\n  border-radius: $--border-radius-base;\n  line-height: 30px;\n  margin: 5px 0;\n\n  @include e((body, body-wrapper)) {\n    &::after {\n      content: \"\";\n      display: table;\n      clear: both;\n    }\n  }\n\n  @include e(content) {\n    position: relative;\n    margin: 15px;\n  }\n\n  @include e(footer) {\n    border-top: 1px solid $--datepicker-inner-border-color;\n    padding: 4px;\n    text-align: right;\n    background-color: $--color-white;\n    position: relative;\n    font-size: 0;\n  }\n\n  @include e(shortcut) {\n    display: block;\n    width: 100%;\n    border: 0;\n    background-color: transparent;\n    line-height: 28px;\n    font-size: 14px;\n    color: $--datepicker-font-color;\n    padding-left: 12px;\n    text-align: left;\n    outline: none;\n    cursor: pointer;\n\n    &:hover {\n      color: $--datepicker-hover-font-color;\n    }\n\n    &.active {\n      background-color: #e6f1fe;\n      color: $--datepicker-active-color;\n    }\n  }\n\n  @include e(btn) {\n    border: 1px solid #dcdcdc;\n    color: #333;\n    line-height: 24px;\n    border-radius: 2px;\n    padding: 0 20px;\n    cursor: pointer;\n    background-color: transparent;\n    outline: none;\n    font-size: 12px;\n\n    &[disabled] {\n      color: #cccccc;\n      cursor: not-allowed;\n    }\n  }\n\n  @include e(icon-btn) {\n    font-size: 12px;\n    color: $--datepicker-icon-color;\n    border: 0;\n    background: transparent;\n    cursor: pointer;\n    outline: none;\n    margin-top: 8px;\n\n    &:hover {\n      color: $--datepicker-hover-font-color;\n    }\n\n    @include when(disabled) {\n      color: $--font-color-disabled-base;\n\n      &:hover {\n        cursor: not-allowed;\n      }\n    }\n  }\n\n  @include e(link-btn) {\n    vertical-align: middle;\n  }\n}\n\n.el-picker-panel *[slot=sidebar],\n.el-picker-panel__sidebar {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 110px;\n  border-right: 1px solid $--datepicker-inner-border-color;\n  box-sizing: border-box;\n  padding-top: 6px;\n  background-color: $--color-white;\n  overflow: auto;\n}\n\n.el-picker-panel *[slot=sidebar] + .el-picker-panel__body,\n.el-picker-panel__sidebar + .el-picker-panel__body {\n  margin-left: 110px;\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/date-picker/picker.scss",
    "content": "@import \"../mixins/mixins\";\n@import \"../common/var\";\n@import \"../common/transition\";\n\n@include b(date-editor) {\n  position: relative;\n  display: inline-block;\n  text-align: left;\n\n  &.el-input,\n  &.el-input__inner {\n    width: 220px;\n  }\n\n  @include m((monthrange)) {\n    &.el-input,\n    &.el-input__inner {\n      width: 300px;\n    }\n  }\n\n  @include m((daterange, timerange)) {\n    &.el-input,\n    &.el-input__inner {\n      width: 350px;\n    }\n  }\n\n  @include m(datetimerange) {\n    &.el-input,\n    &.el-input__inner {\n      width: 400px;\n    }\n  }\n\n  @include m(dates) {\n    .el-input__inner {\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  }\n\n  .el-icon-circle-close {\n    cursor: pointer;\n  }\n\n  .el-range__icon {\n    font-size: 14px;\n    margin-left: -5px;\n    color: $--color-text-placeholder;\n    float: left;\n    line-height: 32px;\n  }\n\n  .el-range-input {\n    appearance: none;\n    border: none;\n    outline: none;\n    display: inline-block;\n    height: 100%;\n    margin: 0;\n    padding: 0;\n    width: 39%;\n    text-align: center;\n    font-size: $--font-size-base;\n    color: $--color-text-regular;\n\n    &::placeholder {\n      color: $--color-text-placeholder;\n    }\n  }\n\n  .el-range-separator {\n    display: inline-block;\n    height: 100%;\n    padding: 0 5px;\n    margin: 0;\n    text-align: center;\n    line-height: 32px;\n    font-size: 14px;\n    width: 5%;\n    color: $--color-text-primary;\n  }\n\n  .el-range__close-icon {\n    font-size: 14px;\n    color: $--color-text-placeholder;\n    width: 25px;\n    display: inline-block;\n    float: right;\n    line-height: 32px;\n  }\n}\n\n@include b(range-editor) {\n  &.el-input__inner {\n    display: inline-flex;\n    align-items: center;\n    padding: 3px 10px;\n  }\n\n  .el-range-input {\n    line-height: 1;\n  }\n\n  @include when(active) {\n    border-color: $--color-primary;\n\n    &:hover {\n      border-color: $--color-primary;\n    }\n  }\n\n  @include m(medium) {\n    &.el-input__inner {\n      height: $--input-medium-height;\n    }\n\n    .el-range-separator {\n      line-height: 28px;\n      font-size: $--input-medium-font-size;\n    }\n\n    .el-range-input {\n      font-size: $--input-medium-font-size;\n    }\n\n    .el-range__icon,\n    .el-range__close-icon {\n      line-height: 28px;\n    }\n  }\n\n  @include m(small) {\n    &.el-input__inner {\n      height: $--input-small-height;\n    }\n\n    .el-range-separator {\n      line-height: 24px;\n      font-size: $--input-small-font-size;\n    }\n\n    .el-range-input {\n      font-size: $--input-small-font-size;\n    }\n\n    .el-range__icon,\n    .el-range__close-icon {\n      line-height: 24px;\n    }\n  }\n\n  @include m(mini) {\n    &.el-input__inner {\n      height: $--input-mini-height;\n    }\n\n    .el-range-separator {\n      line-height: 20px;\n      font-size: $--input-mini-font-size;\n    }\n\n    .el-range-input {\n      font-size: $--input-mini-font-size;\n    }\n\n    .el-range__icon,\n    .el-range__close-icon {\n      line-height: 20px;\n    }\n  }\n\n  @include when(disabled) {\n    background-color: $--input-disabled-fill;\n    border-color: $--input-disabled-border;\n    color: $--input-disabled-color;\n    cursor: not-allowed;\n\n    &:hover, &:focus {\n      border-color: $--input-disabled-border;\n    }\n\n    input {\n      background-color: $--input-disabled-fill;\n      color: $--input-disabled-color;\n      cursor: not-allowed;\n      &::placeholder {\n        color: $--input-disabled-placeholder-color;\n      }\n    }\n\n    .el-range-separator {\n      color: $--input-disabled-color;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/date-picker/time-picker.scss",
    "content": "@import \"../common/var\";\n\n@include b(time-panel) {\n  margin: 5px 0;\n  border: solid 1px $--datepicker-border-color;\n  background-color: $--color-white;\n  box-shadow: $--box-shadow-light;\n  border-radius: 2px;\n  position: absolute;\n  width: 180px;\n  left: 0;\n  z-index: $--index-top;\n  user-select: none;\n  box-sizing: content-box;\n\n  @include e(content) {\n    font-size: 0;\n    position: relative;\n    overflow: hidden;\n\n    &::after, &::before {\n      content: \"\";\n      top: 50%;\n      position: absolute;\n      margin-top: -15px;\n      height: 32px;\n      z-index: -1;\n      left: 0;\n      right: 0;\n      box-sizing: border-box;\n      padding-top: 6px;\n      text-align: left;\n      border-top: 1px solid $--border-color-light;\n      border-bottom: 1px solid $--border-color-light;\n    }\n\n    &::after {\n      left: 50%;\n      margin-left: 12%;\n      margin-right: 12%;\n    }\n\n    &::before {\n      padding-left: 50%;\n      margin-right: 12%;\n      margin-left: 12%;\n    }\n\n    &.has-seconds {\n      &::after {\n        left: calc(100% / 3 * 2);\n      }\n\n      &::before {\n        padding-left: calc(100% / 3);\n      }\n    }\n  }\n\n  @include e(footer) {\n    border-top: 1px solid $--datepicker-inner-border-color;\n    padding: 4px;\n    height: 36px;\n    line-height: 25px;\n    text-align: right;\n    box-sizing: border-box;\n  }\n\n  @include e(btn) {\n    border: none;\n    line-height: 28px;\n    padding: 0 5px;\n    margin: 0 5px;\n    cursor: pointer;\n    background-color: transparent;\n    outline: none;\n    font-size: 12px;\n    color: $--color-text-primary;\n\n    &.confirm {\n      font-weight: 800;\n      color: $--datepicker-active-color;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/date-picker/time-range-picker.scss",
    "content": "@import \"../common/var\";\n\n@include b(time-range-picker) {\n  width: 354px;\n  overflow: visible;\n\n  @include e(content) {\n    position: relative;\n    text-align: center;\n    padding: 10px;\n  }\n\n  @include e(cell) {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 4px 7px 7px;\n    width: 50%;\n    display: inline-block;\n  }\n\n  @include e(header) {\n    margin-bottom: 5px;\n    text-align: center;\n    font-size: 14px;\n  }\n\n  @include e(body) {\n    border-radius:2px;\n    border: 1px solid $--datepicker-border-color;\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/date-picker/time-spinner.scss",
    "content": "@import \"../common/var\";\n\n@include b(time-spinner) {\n  &.has-seconds {\n    .el-time-spinner__wrapper {\n      width: 33.3%;\n    }\n  }\n\n  @include e(wrapper) {\n    max-height: 190px;\n    overflow: auto;\n    display: inline-block;\n    width: 50%;\n    vertical-align: top;\n    position: relative;\n\n    & .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) {\n      padding-bottom: 15px;\n    }\n\n    @include when(arrow) {\n      box-sizing: border-box;\n      text-align: center;\n      overflow: hidden;\n\n      .el-time-spinner__list {\n        transform: translateY(-32px);\n      }\n\n      .el-time-spinner__item:hover:not(.disabled):not(.active) {\n        background: $--color-white;\n        cursor: default;\n      }\n    }\n  }\n\n  @include e(arrow) {\n    font-size: 12px;\n    color: $--color-text-secondary;\n    position: absolute;\n    left: 0;\n    width: 100%;\n    z-index: $--index-normal;\n    text-align: center;\n    height: 30px;\n    line-height: 30px;\n    cursor: pointer;\n\n    &:hover {\n      color: $--color-primary;\n    }\n\n    &.el-icon-arrow-up {\n      top: 10px;\n    }\n\n    &.el-icon-arrow-down {\n      bottom: 10px;\n    }\n  }\n\n  @include e(input) {\n    &.el-input {\n      width: 70%;\n\n      .el-input__inner {\n        padding: 0;\n        text-align: center;\n      }\n    }\n  }\n\n  @include e(list) {\n    padding: 0;\n    margin: 0;\n    list-style: none;\n    text-align: center;\n\n    &::after,\n    &::before {\n      content: '';\n      display: block;\n      width: 100%;\n      height: 80px;\n    }\n  }\n\n  @include e(item) {\n    height: 32px;\n    line-height: 32px;\n    font-size: 12px;\n    color: $--color-text-regular;\n\n    &:hover:not(.disabled):not(.active) {\n      background: $--background-color-base;\n      cursor: pointer;\n    }\n\n    &.active:not(.disabled) {\n      color: $--color-text-primary;\n      font-weight: bold;\n    }\n\n    &.disabled {\n      color: $--color-text-placeholder;\n      cursor: not-allowed;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/date-picker/year-table.scss",
    "content": "@import \"../common/var\";\n\n@include b(year-table) {\n  font-size: 12px;\n  margin: -1px;\n  border-collapse: collapse;\n\n  .el-icon {\n    color: $--datepicker-icon-color;\n  }\n\n  td {\n    text-align: center;\n    padding: 20px 3px;\n    cursor: pointer;\n\n    &.today {\n      .cell {\n        color: $--color-primary;\n        font-weight: bold;\n      }\n    }\n\n    &.disabled .cell {\n      background-color: $--background-color-base;\n      cursor: not-allowed;\n      color: $--color-text-placeholder;\n\n      &:hover {\n        color: $--color-text-placeholder;\n      }\n    }\n\n    .cell {\n      width: 48px;\n      height: 32px;\n      display: block;\n      line-height: 32px;\n      color: $--datepicker-font-color;\n      margin: 0 auto;\n\n      &:hover {\n        color: $--datepicker-hover-font-color;\n      }\n    }\n\n    &.current:not(.disabled) .cell {\n      color: $--datepicker-active-color;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/date-picker.scss",
    "content": "@import \"./date-picker/date-table.scss\";\n@import \"./date-picker/month-table.scss\";\n@import \"./date-picker/year-table.scss\";\n@import \"./date-picker/time-spinner.scss\";\n@import \"./date-picker/picker.scss\";\n@import \"./date-picker/date-picker.scss\";\n@import \"./date-picker/date-range-picker.scss\";\n@import \"./date-picker/time-range-picker.scss\";\n@import \"./date-picker/time-picker.scss\";\n@import \"./input.scss\";\n@import \"./scrollbar.scss\";\n@import \"./popper\";"
  },
  {
    "path": "packages/theme-chalk/src/descriptions-item.scss",
    "content": "@import 'mixins/mixins';\n@import 'common/var';\n\n@include b(descriptions-item) {\n  vertical-align: top;\n  \n  @include e(container) {\n    display: flex;\n\n    .el-descriptions-item__label,\n    .el-descriptions-item__content {\n      display: inline-flex;\n      align-items: baseline;\n    }\n    .el-descriptions-item__content {\n      flex: 1;\n    }\n  }\n\n  @include e(label) {\n    &.has-colon {\n      &::after {\n        content: ':';\n        position: relative;\n        top: -0.5px;\n      }\n    }\n    &.is-bordered-label {\n      font-weight: bold;\n      color: $--color-text-secondary;\n      background: $--descriptions-item-bordered-label-background;\n    }\n    &:not(.is-bordered-label) {\n      margin-right: 10px;\n    }\n  }\n\n  @include e(content) {\n    word-break: break-word;\n    overflow-wrap: break-word;\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/descriptions.scss",
    "content": "@import 'mixins/mixins';\n@import 'common/var';\n@import 'descriptions-item';\n\n@include b(descriptions) {\n  box-sizing: border-box;\n  font-size: $--font-size-base;\n  color: $--color-text-primary;\n\n  @include e(header) {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: $--descriptions-header-margin-bottom;\n\n    @include e(title) {\n      font-size: $--descriptions-title-font-size;\n      font-weight: bold;\n    }\n  }\n\n  @include e(body) {\n    color: $--color-text-regular;\n    background-color: $--color-white;\n\n    .el-descriptions__table {\n      border-collapse: collapse;\n      width: 100%;\n      table-layout: fixed;\n\n      .el-descriptions-item__cell {\n        box-sizing: border-box;\n        text-align: left;\n        font-weight: normal;\n        line-height: 1.5;\n\n        @include when(left) {\n          text-align: left;\n        }\n\n        @include when(center) {\n          text-align: center;\n        }\n\n        @include when(right) {\n          text-align: right;\n        }\n      }\n    }\n  }\n\n  .is-bordered {\n    table-layout: auto;\n    .el-descriptions-item__cell {\n      border: $--descriptions-table-border;\n      padding: 12px 10px;\n    }\n  }\n\n  :not(.is-bordered) {\n    .el-descriptions-item__cell {\n      padding-bottom: 12px;\n    }\n  }\n\n  @include m(medium) {\n    &.is-bordered {\n      .el-descriptions-item__cell {\n        padding: 10px;\n      }\n    }\n\n    &:not(.is-bordered) {\n      .el-descriptions-item__cell {\n        padding-bottom: 10px;\n      }\n    }\n  }\n\n  @include m(small) {\n    font-size: 12px;\n\n    &.is-bordered {\n      .el-descriptions-item__cell {\n        padding: 8px 10px;\n      }\n    }\n\n    &:not(.is-bordered) {\n      .el-descriptions-item__cell {\n        padding-bottom: 8px;\n      }\n    }\n  }\n\n  @include m(mini) {\n    font-size: 12px;\n\n    &.is-bordered {\n      .el-descriptions-item__cell {\n        padding: 6px 10px;\n      }\n    }\n\n    &:not(.is-bordered) {\n      .el-descriptions-item__cell {\n        padding-bottom: 6px;\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/dialog.scss",
    "content": "@import \"mixins/mixins\";\n@import \"mixins/utils\";\n@import \"common/var\";\n@import \"common/popup\";\n\n@include b(dialog) {\n  position: relative;\n  margin: 0 auto 50px;\n  background: $--dialog-background-color;\n  border-radius: $--border-radius-small;\n  box-shadow: $--dialog-box-shadow;\n  box-sizing: border-box;\n  width: 50%;\n\n  @include when(fullscreen) {\n    width: 100%;\n    margin-top: 0;\n    margin-bottom: 0;\n    height: 100%;\n    overflow: auto;\n  }\n\n  @include e(wrapper) {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    overflow: auto;\n    margin: 0;\n  }\n\n  @include e(header) {\n    padding: $--dialog-padding-primary;\n    padding-bottom: 10px;\n  }\n\n  @include e(headerbtn) {\n    position: absolute;\n    top: $--dialog-padding-primary;\n    right: $--dialog-padding-primary;\n    padding: 0;\n    background: transparent;\n    border: none;\n    outline: none;\n    cursor: pointer;\n    font-size: $--message-close-size;\n\n    .el-dialog__close {\n      color: $--color-info;\n    }\n\n    &:focus, &:hover {\n      .el-dialog__close {\n        color: $--color-primary;\n      }\n    }\n  }\n\n  @include e(title) {\n    line-height: $--dialog-font-line-height;\n    font-size: $--dialog-title-font-size;\n    color: $--color-text-primary;\n  }\n\n  @include e(body) {\n    padding: ($--dialog-padding-primary + 10px) $--dialog-padding-primary;\n    color: $--color-text-regular;\n    font-size: $--dialog-content-font-size;\n    word-break: break-all;\n  }\n\n  @include e(footer) {\n    padding: $--dialog-padding-primary;\n    padding-top: 10px;\n    text-align: right;\n    box-sizing: border-box;\n  }\n\n  // 内容居中布局\n  @include m(center) {\n    text-align: center;\n\n    @include e(body) {\n      text-align: initial;\n      padding: 25px ($--dialog-padding-primary + 5px) 30px;\n    }\n\n    @include e(footer) {\n      text-align: inherit;\n    }\n  }\n}\n\n.dialog-fade-enter-active {\n  animation: dialog-fade-in .3s;\n}\n\n.dialog-fade-leave-active {\n  animation: dialog-fade-out .3s;\n}\n\n@keyframes dialog-fade-in {\n  0% {\n    transform: translate3d(0, -20px, 0);\n    opacity: 0;\n  }\n  100% {\n    transform: translate3d(0, 0, 0);\n    opacity: 1;\n  }\n}\n\n@keyframes dialog-fade-out {\n  0% {\n    transform: translate3d(0, 0, 0);\n    opacity: 1;\n  }\n  100% {\n    transform: translate3d(0, -20px, 0);\n    opacity: 0;\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/display.scss",
    "content": "@import \"common/var\";\n@import \"mixins/mixins\";\n\n.hidden {\n  @each $break-point-name, $value in $--breakpoints-spec {\n    &-#{$break-point-name} {\n      @include res($break-point-name, $--breakpoints-spec) {\n        display: none !important;\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/divider.scss",
    "content": "@import \"common/var\";\n@import \"mixins/mixins\";\n\n@include b(divider) {\n  background-color: $--border-color-base;\n  position: relative;\n\n  @include m(horizontal) {\n    display: block;\n    height: 1px;\n    width: 100%;\n    margin: 24px 0;\n  }\n\n  @include m(vertical) {\n    display: inline-block;\n    width: 1px;\n    height: 1em;\n    margin: 0 8px;\n    vertical-align: middle;\n    position: relative;\n  }\n\n  @include e(text) {\n    position: absolute;\n    background-color: $--color-white;\n    padding: 0 20px;\n    font-weight: 500;\n    color: $--color-text-primary;\n    font-size: 14px;\n\n    @include when(left) {\n      left: 20px;\n      transform: translateY(-50%);\n    }\n\n    @include when(center)  {\n      left: 50%;\n      transform: translateX(-50%) translateY(-50%);\n    }\n\n    @include when(right)  {\n      right: 20px;\n      transform: translateY(-50%);\n    }\n  }\n}"
  },
  {
    "path": "packages/theme-chalk/src/drawer.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n\n@keyframes el-drawer-fade-in {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n@mixin drawer-animation($direction) {\n\n  @keyframes #{$direction}-drawer-in {\n    0% {\n\n      @if $direction == ltr {\n        transform: translate(-100%, 0px);\n      }\n\n      @if $direction == rtl {\n        transform: translate(100%, 0px);\n      }\n\n      @if $direction == ttb {\n        transform: translate(0px, -100%);\n      }\n\n      @if $direction == btt {\n        transform: translate(0px, 100%);\n      }\n    }\n\n    100% {\n      @if $direction == ltr {\n        transform: translate(0px, 0px);\n      }\n\n      @if $direction == rtl {\n        transform: translate(0px, 0px);\n      }\n\n      @if $direction == ttb {\n        transform: translate(0px, 0px);\n      }\n\n      @if $direction == btt {\n        transform: translate(0px, 0px);\n      }\n    }\n  }\n\n  @keyframes #{$direction}-drawer-out {\n    0% {\n      @if $direction == ltr {\n        transform: translate(0px, 0px);\n      }\n\n      @if $direction == rtl {\n        transform: translate(0px, 0px);;\n      }\n\n      @if $direction == ttb {\n        transform: translate(0px, 0px);\n      }\n\n      @if $direction == btt {\n        transform: translate(0px, 0);\n      }\n    }\n\n    100% {\n      @if $direction == ltr {\n        transform: translate(-100%, 0px);\n      }\n\n      @if $direction == rtl {\n        transform: translate(100%, 0px);\n      }\n\n      @if $direction == ttb {\n        transform: translate(0px, -100%);\n      }\n\n      @if $direction == btt {\n        transform: translate(0px, 100%);\n      }\n    }\n  }\n}\n\n@mixin animation-in($direction) {\n  .el-drawer__open &.#{$direction} {\n    animation: #{$direction}-drawer-in .3s 1ms;\n  }\n}\n\n@mixin animation-out($direction) {\n  &.#{$direction} {\n    animation: #{$direction}-drawer-out .3s;\n  }\n}\n\n@include drawer-animation(rtl);\n@include drawer-animation(ltr);\n@include drawer-animation(ttb);\n@include drawer-animation(btt);\n\n$directions: rtl, ltr, ttb, btt;\n\n@include b(drawer) {\n  position: absolute;\n  box-sizing: border-box;\n  background-color: $--dialog-background-color;\n  display: flex;\n  flex-direction: column;\n  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),\n  0 16px 24px 2px rgba(0, 0, 0, 0.14),\n  0 6px 30px 5px rgba(0, 0, 0, 0.12);\n  overflow: hidden;\n  outline: 0;\n\n  @each $direction in $directions {\n    @include animation-out($direction);\n    @include animation-in($direction);\n  }\n\n  &__wrapper {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    overflow: hidden;\n    margin: 0;\n  }\n\n  &__header {\n    align-items: center;\n    color: rgb(114, 118, 123);\n    display: flex;\n    margin-bottom: 32px;\n    padding: $--dialog-padding-primary;\n    padding-bottom: 0;\n    & > :first-child {\n      flex: 1;\n    }\n  }\n\n  &__title {\n    margin: 0;\n    flex: 1;\n    line-height: inherit;\n    font-size: 1rem;\n  }\n\n  &__close-btn {\n    border: none;\n    cursor: pointer;\n    font-size: $--font-size-extra-large;\n    color: inherit;\n    background-color: transparent;\n  }\n\n  &__body {\n    flex: 1;\n    overflow: auto;\n    & > * {\n      box-sizing: border-box;\n    }\n  }\n\n  &.ltr, &.rtl {\n    height: 100%;\n    top: 0;\n    bottom: 0;\n  }\n\n  &.ttb, &.btt {\n    width: 100%;\n    left: 0;\n    right: 0;\n  }\n\n  &.ltr {\n    left: 0;\n  }\n\n  &.rtl {\n    right: 0;\n  }\n\n  &.ttb {\n    top: 0;\n  }\n\n  &.btt {\n    bottom: 0;\n  }\n}\n\n.el-drawer__container {\n  position: relative;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  height: 100%;\n  width: 100%;\n}\n\n.el-drawer-fade-enter-active {\n  animation: el-drawer-fade-in .3s;\n}\n\n.el-drawer-fade-leave-active {\n  animation: el-drawer-fade-in .3s reverse;\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/dropdown-item.scss",
    "content": ""
  },
  {
    "path": "packages/theme-chalk/src/dropdown-menu.scss",
    "content": ""
  },
  {
    "path": "packages/theme-chalk/src/dropdown.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n@import \"button\";\n@import \"./popper\";\n\n@include b(dropdown) {\n  display: inline-block;\n  position: relative;\n  color: $--color-text-regular;\n  font-size: $--font-size-base;\n\n  .el-button-group {\n    display: block;\n    .el-button {\n      float: none;\n    }\n  }\n\n  & .el-dropdown__caret-button {\n    padding-left: 5px;\n    padding-right: 5px;\n    position: relative;\n    border-left: none;\n\n    &::before {\n      $gap: 5px;\n\n      content: '';\n      position: absolute;\n      display: block;\n      width: 1px;\n      top: $gap;\n      bottom: $gap;\n      left: 0;\n      background: mix(white, transparent, 50%);\n    }\n\n    &.el-button--default::before {\n      background: mix($--button-default-border-color, transparent, 50%);\n    }\n\n    &:hover {\n      &:not(.is-disabled)::before {\n        top: 0;\n        bottom: 0;\n      }\n    }\n\n    & .el-dropdown__icon {\n      padding-left: 0;\n    }\n  }\n  @include e(icon) {\n    font-size: 12px;\n    margin: 0 3px;\n  }\n\n  .el-dropdown-selfdefine { // 自定义\n    &:focus:active, &:focus:not(.focusing) {\n      outline-width: 0;\n    }\n  }\n\n  [disabled] {\n    cursor: not-allowed;\n    color: $--font-color-disabled-base;\n  }\n}\n\n@include b(dropdown-menu) {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 10;\n  padding: 10px 0;\n  margin: 5px 0;\n  background-color: $--color-white;\n  border: 1px solid $--border-color-lighter;\n  border-radius: $--border-radius-base;\n  box-shadow: $--dropdown-menu-box-shadow;\n\n  @include e(item) {\n    list-style: none;\n    line-height: 36px;\n    padding: 0 20px;\n    margin: 0;\n    font-size: $--font-size-base;\n    color: $--color-text-regular;\n    cursor: pointer;\n    outline: none;\n    &:not(.is-disabled):hover, &:focus {\n      background-color: $--dropdown-menuItem-hover-fill;\n      color: $--dropdown-menuItem-hover-color;\n    }\n\n    i {\n      margin-right: 5px;\n    }\n\n    @include m(divided) {\n      $divided-offset: 6px;\n\n      position: relative;\n      margin-top: $divided-offset;\n      border-top: 1px solid $--border-color-lighter;\n\n      &:before {\n        content: '';\n        height: $divided-offset;\n        display: block;\n        margin: 0 -20px;\n        background-color: $--color-white;\n      }\n    }\n\n    @include when(disabled) {\n      cursor: default;\n      color: $--font-color-disabled-base;\n      pointer-events: none;\n    }\n  }\n\n  @include m(medium) {\n    padding: 6px 0;\n\n    @include e(item) {\n      line-height: 30px;\n      padding: 0 17px;\n      font-size: 14px;\n\n      &.el-dropdown-menu__item--divided {\n        $divided-offset: 6px;\n        margin-top: $divided-offset;\n\n        &:before {\n          height: $divided-offset;\n          margin: 0 -17px;\n        }\n      }\n    }\n  }\n\n  @include m(small) {\n    padding: 6px 0;\n\n    @include e(item) {\n      line-height: 27px;\n      padding: 0 15px;\n      font-size: 13px;\n\n      &.el-dropdown-menu__item--divided {\n        $divided-offset: 4px;\n        margin-top: $divided-offset;\n\n        &:before {\n          height: $divided-offset;\n          margin: 0 -15px;\n        }\n      }\n    }\n  }\n\n  @include m(mini) {\n    padding: 3px 0;\n\n    @include e(item) {\n      line-height: 24px;\n      padding: 0 10px;\n      font-size: 12px;\n\n      &.el-dropdown-menu__item--divided {\n        $divided-offset: 3px;\n        margin-top: $divided-offset;\n\n        &:before {\n          height: $divided-offset;\n          margin: 0 -10px;\n        }\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/empty.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n\n@include b(empty) {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  text-align: center;\n  box-sizing: border-box;\n  padding: $--empty-padding;\n\n  @include e(image) {\n    width: $--empty-image-width;\n\n    img {\n      user-select: none;\n      width: 100%;\n      height: 100%;\n      vertical-align: top;\n      object-fit: contain;\n    }\n\n    svg {\n      fill: $--svg-monochrome-grey;\n      width: 100%;\n      height: 100%;\n      vertical-align: top;\n    }\n  }\n\n  @include e(description) {\n    margin-top: $--empty-description-margin-top;\n\n    p {\n      margin: 0;\n      font-size: $--font-size-base;\n      color: $--color-text-secondary;\n    }\n  }\n\n  @include e(bottom) {\n    margin-top: $--empty-bottom-margin-top;\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/footer.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n\n@include b(footer) {\n  padding: $--footer-padding;\n  box-sizing: border-box;\n  flex-shrink: 0;\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/form-item.scss",
    "content": ""
  },
  {
    "path": "packages/theme-chalk/src/form.scss",
    "content": "@import \"mixins/mixins\";\n@import \"mixins/utils\";\n@import \"common/var\";\n\n@include b(form) {\n  @include m(label-left) {\n    & .el-form-item__label {\n      text-align: left;\n    }\n  }\n  @include m(label-top) {\n    & .el-form-item__label {\n      float: none;\n      display: inline-block;\n      text-align: left;\n      padding: 0 0 10px 0;\n    }\n  }\n  @include m(inline) {\n    & .el-form-item {\n      display: inline-block;\n      margin-right: 10px;\n      vertical-align: top;\n    }\n    & .el-form-item__label {\n      float: none;\n      display: inline-block;\n    }\n    & .el-form-item__content {\n      display: inline-block;\n      vertical-align: top;\n    }\n    &.el-form--label-top .el-form-item__content {\n      display: block;\n    }\n  }\n}\n@include b(form-item) {\n  margin-bottom: 22px;\n  @include utils-clearfix;\n\n  & .el-form-item {\n    margin-bottom: 0;\n  }\n\n  & .el-input__validateIcon {\n    display: none;\n  }\n\n  @include m(medium) {\n    .el-form-item__label {\n      line-height: 36px;\n    }\n    .el-form-item__content {\n      line-height: 36px;\n    }\n  }\n  @include m(small) {\n    .el-form-item__label {\n      line-height: 32px;\n    }\n    .el-form-item__content {\n      line-height: 32px;\n    }\n    &.el-form-item {\n      margin-bottom: 18px;\n    }\n    .el-form-item__error {\n      padding-top: 2px;\n    }\n  }\n  @include m(mini) {\n    .el-form-item__label {\n      line-height: 28px;\n    }\n    .el-form-item__content {\n      line-height: 28px;\n    }\n    &.el-form-item {\n      margin-bottom: 18px;\n    }\n    .el-form-item__error {\n      padding-top: 1px;\n    }\n  }\n\n  @include e(label-wrap) {\n    float: left;\n    .el-form-item__label {\n      display: inline-block;\n      float: none;\n    }\n  }\n\n  @include e(label) {\n    text-align: right;\n    vertical-align: middle;\n    float: left;\n    font-size: $--form-label-font-size;\n    color: $--color-text-regular;\n    line-height: 40px;\n    padding: 0 12px 0 0;\n    box-sizing: border-box;\n  }\n  @include e(content) {\n    line-height: 40px;\n    position: relative;\n    font-size: 14px;\n    @include utils-clearfix;\n\n    .el-input-group {\n      vertical-align: top;\n    }\n  }\n  @include e(error) {\n    color: $--color-danger;\n    font-size: 12px;\n    line-height: 1;\n    padding-top: 4px;\n    position: absolute;\n    top: 100%;\n    left: 0;\n\n    @include m(inline) {\n      position: relative;\n      top: auto;\n      left: auto;\n      display: inline-block;\n      margin-left: 10px;\n    }\n  }\n\n  @include when(required) {\n    @include pseudo('not(.is-no-asterisk)') {\n      & > .el-form-item__label:before,\n      & .el-form-item__label-wrap > .el-form-item__label:before {\n        content: '*';\n        color: $--color-danger;\n        margin-right: 4px;\n      }\n    }\n  }\n\n  @include when(error) {\n    & .el-input__inner,\n    & .el-textarea__inner {\n      &, &:focus {\n        border-color: $--color-danger;\n      }\n    }\n    & .el-input-group__append,\n    & .el-input-group__prepend {\n      & .el-input__inner {\n        border-color: transparent;\n      }\n    }\n    .el-input__validateIcon {\n      color: $--color-danger;\n    }\n  }\n\n  @include m(feedback) {\n    .el-input__validateIcon {\n      display: inline-block;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/header.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n\n@include b(header) {\n  padding: $--header-padding;\n  box-sizing: border-box;\n  flex-shrink: 0;\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/icon.scss",
    "content": "@import \"common/var\";\n\n@font-face {\n  font-family: 'element-icons';\n  src: url('#{$--font-path}/element-icons.woff') format('woff'), /* chrome, firefox */\n       url('#{$--font-path}/element-icons.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/\n  font-weight: normal;\n  font-display: $--font-display;\n  font-style: normal;\n}\n\n[class^=\"el-icon-\"], [class*=\" el-icon-\"] {\n  /* use !important to prevent issues with browser extensions that change fonts */\n  font-family: 'element-icons' !important;\n  speak: none;\n  font-style: normal;\n  font-weight: normal;\n  font-variant: normal;\n  text-transform: none;\n  line-height: 1;\n  vertical-align: baseline;\n  display: inline-block;\n\n  /* Better Font Rendering =========== */\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.el-icon-ice-cream-round:before {\n  content: \"\\e6a0\";\n}\n\n.el-icon-ice-cream-square:before {\n  content: \"\\e6a3\";\n}\n\n.el-icon-lollipop:before {\n  content: \"\\e6a4\";\n}\n\n.el-icon-potato-strips:before {\n  content: \"\\e6a5\";\n}\n\n.el-icon-milk-tea:before {\n  content: \"\\e6a6\";\n}\n\n.el-icon-ice-drink:before {\n  content: \"\\e6a7\";\n}\n\n.el-icon-ice-tea:before {\n  content: \"\\e6a9\";\n}\n\n.el-icon-coffee:before {\n  content: \"\\e6aa\";\n}\n\n.el-icon-orange:before {\n  content: \"\\e6ab\";\n}\n\n.el-icon-pear:before {\n  content: \"\\e6ac\";\n}\n\n.el-icon-apple:before {\n  content: \"\\e6ad\";\n}\n\n.el-icon-cherry:before {\n  content: \"\\e6ae\";\n}\n\n.el-icon-watermelon:before {\n  content: \"\\e6af\";\n}\n\n.el-icon-grape:before {\n  content: \"\\e6b0\";\n}\n\n.el-icon-refrigerator:before {\n  content: \"\\e6b1\";\n}\n\n.el-icon-goblet-square-full:before {\n  content: \"\\e6b2\";\n}\n\n.el-icon-goblet-square:before {\n  content: \"\\e6b3\";\n}\n\n.el-icon-goblet-full:before {\n  content: \"\\e6b4\";\n}\n\n.el-icon-goblet:before {\n  content: \"\\e6b5\";\n}\n\n.el-icon-cold-drink:before {\n  content: \"\\e6b6\";\n}\n\n.el-icon-coffee-cup:before {\n  content: \"\\e6b8\";\n}\n\n.el-icon-water-cup:before {\n  content: \"\\e6b9\";\n}\n\n.el-icon-hot-water:before {\n  content: \"\\e6ba\";\n}\n\n.el-icon-ice-cream:before {\n  content: \"\\e6bb\";\n}\n\n.el-icon-dessert:before {\n  content: \"\\e6bc\";\n}\n\n.el-icon-sugar:before {\n  content: \"\\e6bd\";\n}\n\n.el-icon-tableware:before {\n  content: \"\\e6be\";\n}\n\n.el-icon-burger:before {\n  content: \"\\e6bf\";\n}\n\n.el-icon-knife-fork:before {\n  content: \"\\e6c1\";\n}\n\n.el-icon-fork-spoon:before {\n  content: \"\\e6c2\";\n}\n\n.el-icon-chicken:before {\n  content: \"\\e6c3\";\n}\n\n.el-icon-food:before {\n  content: \"\\e6c4\";\n}\n\n.el-icon-dish-1:before {\n  content: \"\\e6c5\";\n}\n\n.el-icon-dish:before {\n  content: \"\\e6c6\";\n}\n\n.el-icon-moon-night:before {\n  content: \"\\e6ee\";\n}\n\n.el-icon-moon:before {\n  content: \"\\e6f0\";\n}\n\n.el-icon-cloudy-and-sunny:before {\n  content: \"\\e6f1\";\n}\n\n.el-icon-partly-cloudy:before {\n  content: \"\\e6f2\";\n}\n\n.el-icon-cloudy:before {\n  content: \"\\e6f3\";\n}\n\n.el-icon-sunny:before {\n  content: \"\\e6f6\";\n}\n\n.el-icon-sunset:before {\n  content: \"\\e6f7\";\n}\n\n.el-icon-sunrise-1:before {\n  content: \"\\e6f8\";\n}\n\n.el-icon-sunrise:before {\n  content: \"\\e6f9\";\n}\n\n.el-icon-heavy-rain:before {\n  content: \"\\e6fa\";\n}\n\n.el-icon-lightning:before {\n  content: \"\\e6fb\";\n}\n\n.el-icon-light-rain:before {\n  content: \"\\e6fc\";\n}\n\n.el-icon-wind-power:before {\n  content: \"\\e6fd\";\n}\n\n.el-icon-baseball:before {\n  content: \"\\e712\";\n}\n\n.el-icon-soccer:before {\n  content: \"\\e713\";\n}\n\n.el-icon-football:before {\n  content: \"\\e715\";\n}\n\n.el-icon-basketball:before {\n  content: \"\\e716\";\n}\n\n.el-icon-ship:before {\n  content: \"\\e73f\";\n}\n\n.el-icon-truck:before {\n  content: \"\\e740\";\n}\n\n.el-icon-bicycle:before {\n  content: \"\\e741\";\n}\n\n.el-icon-mobile-phone:before {\n  content: \"\\e6d3\";\n}\n\n.el-icon-service:before {\n  content: \"\\e6d4\";\n}\n\n.el-icon-key:before {\n  content: \"\\e6e2\";\n}\n\n.el-icon-unlock:before {\n  content: \"\\e6e4\";\n}\n\n.el-icon-lock:before {\n  content: \"\\e6e5\";\n}\n\n.el-icon-watch:before {\n  content: \"\\e6fe\";\n}\n\n.el-icon-watch-1:before {\n  content: \"\\e6ff\";\n}\n\n.el-icon-timer:before {\n  content: \"\\e702\";\n}\n\n.el-icon-alarm-clock:before {\n  content: \"\\e703\";\n}\n\n.el-icon-map-location:before {\n  content: \"\\e704\";\n}\n\n.el-icon-delete-location:before {\n  content: \"\\e705\";\n}\n\n.el-icon-add-location:before {\n  content: \"\\e706\";\n}\n\n.el-icon-location-information:before {\n  content: \"\\e707\";\n}\n\n.el-icon-location-outline:before {\n  content: \"\\e708\";\n}\n\n.el-icon-location:before {\n  content: \"\\e79e\";\n}\n\n.el-icon-place:before {\n  content: \"\\e709\";\n}\n\n.el-icon-discover:before {\n  content: \"\\e70a\";\n}\n\n.el-icon-first-aid-kit:before {\n  content: \"\\e70b\";\n}\n\n.el-icon-trophy-1:before {\n  content: \"\\e70c\";\n}\n\n.el-icon-trophy:before {\n  content: \"\\e70d\";\n}\n\n.el-icon-medal:before {\n  content: \"\\e70e\";\n}\n\n.el-icon-medal-1:before {\n  content: \"\\e70f\";\n}\n\n.el-icon-stopwatch:before {\n  content: \"\\e710\";\n}\n\n.el-icon-mic:before {\n  content: \"\\e711\";\n}\n\n.el-icon-copy-document:before {\n  content: \"\\e718\";\n}\n\n.el-icon-full-screen:before {\n  content: \"\\e719\";\n}\n\n.el-icon-switch-button:before {\n  content: \"\\e71b\";\n}\n\n.el-icon-aim:before {\n  content: \"\\e71c\";\n}\n\n.el-icon-crop:before {\n  content: \"\\e71d\";\n}\n\n.el-icon-odometer:before {\n  content: \"\\e71e\";\n}\n\n.el-icon-time:before {\n  content: \"\\e71f\";\n}\n\n.el-icon-bangzhu:before {\n  content: \"\\e724\";\n}\n\n.el-icon-close-notification:before {\n  content: \"\\e726\";\n}\n\n.el-icon-microphone:before {\n  content: \"\\e727\";\n}\n\n.el-icon-turn-off-microphone:before {\n  content: \"\\e728\";\n}\n\n.el-icon-position:before {\n  content: \"\\e729\";\n}\n\n.el-icon-postcard:before {\n  content: \"\\e72a\";\n}\n\n.el-icon-message:before {\n  content: \"\\e72b\";\n}\n\n.el-icon-chat-line-square:before {\n  content: \"\\e72d\";\n}\n\n.el-icon-chat-dot-square:before {\n  content: \"\\e72e\";\n}\n\n.el-icon-chat-dot-round:before {\n  content: \"\\e72f\";\n}\n\n.el-icon-chat-square:before {\n  content: \"\\e730\";\n}\n\n.el-icon-chat-line-round:before {\n  content: \"\\e731\";\n}\n\n.el-icon-chat-round:before {\n  content: \"\\e732\";\n}\n\n.el-icon-set-up:before {\n  content: \"\\e733\";\n}\n\n.el-icon-turn-off:before {\n  content: \"\\e734\";\n}\n\n.el-icon-open:before {\n  content: \"\\e735\";\n}\n\n.el-icon-connection:before {\n  content: \"\\e736\";\n}\n\n.el-icon-link:before {\n  content: \"\\e737\";\n}\n\n.el-icon-cpu:before {\n  content: \"\\e738\";\n}\n\n.el-icon-thumb:before {\n  content: \"\\e739\";\n}\n\n.el-icon-female:before {\n  content: \"\\e73a\";\n}\n\n.el-icon-male:before {\n  content: \"\\e73b\";\n}\n\n.el-icon-guide:before {\n  content: \"\\e73c\";\n}\n\n.el-icon-news:before {\n  content: \"\\e73e\";\n}\n\n.el-icon-price-tag:before {\n  content: \"\\e744\";\n}\n\n.el-icon-discount:before {\n  content: \"\\e745\";\n}\n\n.el-icon-wallet:before {\n  content: \"\\e747\";\n}\n\n.el-icon-coin:before {\n  content: \"\\e748\";\n}\n\n.el-icon-money:before {\n  content: \"\\e749\";\n}\n\n.el-icon-bank-card:before {\n  content: \"\\e74a\";\n}\n\n.el-icon-box:before {\n  content: \"\\e74b\";\n}\n\n.el-icon-present:before {\n  content: \"\\e74c\";\n}\n\n.el-icon-sell:before {\n  content: \"\\e6d5\";\n}\n\n.el-icon-sold-out:before {\n  content: \"\\e6d6\";\n}\n\n.el-icon-shopping-bag-2:before {\n  content: \"\\e74d\";\n}\n\n.el-icon-shopping-bag-1:before {\n  content: \"\\e74e\";\n}\n\n.el-icon-shopping-cart-2:before {\n  content: \"\\e74f\";\n}\n\n.el-icon-shopping-cart-1:before {\n  content: \"\\e750\";\n}\n\n.el-icon-shopping-cart-full:before {\n  content: \"\\e751\";\n}\n\n.el-icon-smoking:before {\n  content: \"\\e752\";\n}\n\n.el-icon-no-smoking:before {\n  content: \"\\e753\";\n}\n\n.el-icon-house:before {\n  content: \"\\e754\";\n}\n\n.el-icon-table-lamp:before {\n  content: \"\\e755\";\n}\n\n.el-icon-school:before {\n  content: \"\\e756\";\n}\n\n.el-icon-office-building:before {\n  content: \"\\e757\";\n}\n\n.el-icon-toilet-paper:before {\n  content: \"\\e758\";\n}\n\n.el-icon-notebook-2:before {\n  content: \"\\e759\";\n}\n\n.el-icon-notebook-1:before {\n  content: \"\\e75a\";\n}\n\n.el-icon-files:before {\n  content: \"\\e75b\";\n}\n\n.el-icon-collection:before {\n  content: \"\\e75c\";\n}\n\n.el-icon-receiving:before {\n  content: \"\\e75d\";\n}\n\n.el-icon-suitcase-1:before {\n  content: \"\\e760\";\n}\n\n.el-icon-suitcase:before {\n  content: \"\\e761\";\n}\n\n.el-icon-film:before {\n  content: \"\\e763\";\n}\n\n.el-icon-collection-tag:before {\n  content: \"\\e765\";\n}\n\n.el-icon-data-analysis:before {\n  content: \"\\e766\";\n}\n\n.el-icon-pie-chart:before {\n  content: \"\\e767\";\n}\n\n.el-icon-data-board:before {\n  content: \"\\e768\";\n}\n\n.el-icon-data-line:before {\n  content: \"\\e76d\";\n}\n\n.el-icon-reading:before {\n  content: \"\\e769\";\n}\n\n.el-icon-magic-stick:before {\n  content: \"\\e76a\";\n}\n\n.el-icon-coordinate:before {\n  content: \"\\e76b\";\n}\n\n.el-icon-mouse:before {\n  content: \"\\e76c\";\n}\n\n.el-icon-brush:before {\n  content: \"\\e76e\";\n}\n\n.el-icon-headset:before {\n  content: \"\\e76f\";\n}\n\n.el-icon-umbrella:before {\n  content: \"\\e770\";\n}\n\n.el-icon-scissors:before {\n  content: \"\\e771\";\n}\n\n.el-icon-mobile:before {\n  content: \"\\e773\";\n}\n\n.el-icon-attract:before {\n  content: \"\\e774\";\n}\n\n.el-icon-monitor:before {\n  content: \"\\e775\";\n}\n\n.el-icon-search:before {\n  content: \"\\e778\";\n}\n\n.el-icon-takeaway-box:before {\n  content: \"\\e77a\";\n}\n\n.el-icon-paperclip:before {\n  content: \"\\e77d\";\n}\n\n.el-icon-printer:before {\n  content: \"\\e77e\";\n}\n\n.el-icon-document-add:before {\n  content: \"\\e782\";\n}\n\n.el-icon-document:before {\n  content: \"\\e785\";\n}\n\n.el-icon-document-checked:before {\n  content: \"\\e786\";\n}\n\n.el-icon-document-copy:before {\n  content: \"\\e787\";\n}\n\n.el-icon-document-delete:before {\n  content: \"\\e788\";\n}\n\n.el-icon-document-remove:before {\n  content: \"\\e789\";\n}\n\n.el-icon-tickets:before {\n  content: \"\\e78b\";\n}\n\n.el-icon-folder-checked:before {\n  content: \"\\e77f\";\n}\n\n.el-icon-folder-delete:before {\n  content: \"\\e780\";\n}\n\n.el-icon-folder-remove:before {\n  content: \"\\e781\";\n}\n\n.el-icon-folder-add:before {\n  content: \"\\e783\";\n}\n\n.el-icon-folder-opened:before {\n  content: \"\\e784\";\n}\n\n.el-icon-folder:before {\n  content: \"\\e78a\";\n}\n\n.el-icon-edit-outline:before {\n  content: \"\\e764\";\n}\n\n.el-icon-edit:before {\n  content: \"\\e78c\";\n}\n\n.el-icon-date:before {\n  content: \"\\e78e\";\n}\n\n.el-icon-c-scale-to-original:before {\n  content: \"\\e7c6\";\n}\n\n.el-icon-view:before {\n  content: \"\\e6ce\";\n}\n\n.el-icon-loading:before {\n  content: \"\\e6cf\";\n}\n\n.el-icon-rank:before {\n  content: \"\\e6d1\";\n}\n\n.el-icon-sort-down:before {\n  content: \"\\e7c4\";\n}\n\n.el-icon-sort-up:before {\n  content: \"\\e7c5\";\n}\n\n.el-icon-sort:before {\n  content: \"\\e6d2\";\n}\n\n.el-icon-finished:before {\n  content: \"\\e6cd\";\n}\n\n.el-icon-refresh-left:before {\n  content: \"\\e6c7\";\n}\n\n.el-icon-refresh-right:before {\n  content: \"\\e6c8\";\n}\n\n.el-icon-refresh:before {\n  content: \"\\e6d0\";\n}\n\n.el-icon-video-play:before {\n  content: \"\\e7c0\";\n}\n\n.el-icon-video-pause:before {\n  content: \"\\e7c1\";\n}\n\n.el-icon-d-arrow-right:before {\n  content: \"\\e6dc\";\n}\n\n.el-icon-d-arrow-left:before {\n  content: \"\\e6dd\";\n}\n\n.el-icon-arrow-up:before {\n  content: \"\\e6e1\";\n}\n\n.el-icon-arrow-down:before {\n  content: \"\\e6df\";\n}\n\n.el-icon-arrow-right:before {\n  content: \"\\e6e0\";\n}\n\n.el-icon-arrow-left:before {\n  content: \"\\e6de\";\n}\n\n.el-icon-top-right:before {\n  content: \"\\e6e7\";\n}\n\n.el-icon-top-left:before {\n  content: \"\\e6e8\";\n}\n\n.el-icon-top:before {\n  content: \"\\e6e6\";\n}\n\n.el-icon-bottom:before {\n  content: \"\\e6eb\";\n}\n\n.el-icon-right:before {\n  content: \"\\e6e9\";\n}\n\n.el-icon-back:before {\n  content: \"\\e6ea\";\n}\n\n.el-icon-bottom-right:before {\n  content: \"\\e6ec\";\n}\n\n.el-icon-bottom-left:before {\n  content: \"\\e6ed\";\n}\n\n.el-icon-caret-top:before {\n  content: \"\\e78f\";\n}\n\n.el-icon-caret-bottom:before {\n  content: \"\\e790\";\n}\n\n.el-icon-caret-right:before {\n  content: \"\\e791\";\n}\n\n.el-icon-caret-left:before {\n  content: \"\\e792\";\n}\n\n.el-icon-d-caret:before {\n  content: \"\\e79a\";\n}\n\n.el-icon-share:before {\n  content: \"\\e793\";\n}\n\n.el-icon-menu:before {\n  content: \"\\e798\";\n}\n\n.el-icon-s-grid:before {\n  content: \"\\e7a6\";\n}\n\n.el-icon-s-check:before {\n  content: \"\\e7a7\";\n}\n\n.el-icon-s-data:before {\n  content: \"\\e7a8\";\n}\n\n.el-icon-s-opportunity:before {\n  content: \"\\e7aa\";\n}\n\n.el-icon-s-custom:before {\n  content: \"\\e7ab\";\n}\n\n.el-icon-s-claim:before {\n  content: \"\\e7ad\";\n}\n\n.el-icon-s-finance:before {\n  content: \"\\e7ae\";\n}\n\n.el-icon-s-comment:before {\n  content: \"\\e7af\";\n}\n\n.el-icon-s-flag:before {\n  content: \"\\e7b0\";\n}\n\n.el-icon-s-marketing:before {\n  content: \"\\e7b1\";\n}\n\n.el-icon-s-shop:before {\n  content: \"\\e7b4\";\n}\n\n.el-icon-s-open:before {\n  content: \"\\e7b5\";\n}\n\n.el-icon-s-management:before {\n  content: \"\\e7b6\";\n}\n\n.el-icon-s-ticket:before {\n  content: \"\\e7b7\";\n}\n\n.el-icon-s-release:before {\n  content: \"\\e7b8\";\n}\n\n.el-icon-s-home:before {\n  content: \"\\e7b9\";\n}\n\n.el-icon-s-promotion:before {\n  content: \"\\e7ba\";\n}\n\n.el-icon-s-operation:before {\n  content: \"\\e7bb\";\n}\n\n.el-icon-s-unfold:before {\n  content: \"\\e7bc\";\n}\n\n.el-icon-s-fold:before {\n  content: \"\\e7a9\";\n}\n\n.el-icon-s-platform:before {\n  content: \"\\e7bd\";\n}\n\n.el-icon-s-order:before {\n  content: \"\\e7be\";\n}\n\n.el-icon-s-cooperation:before {\n  content: \"\\e7bf\";\n}\n\n.el-icon-bell:before {\n  content: \"\\e725\";\n}\n\n.el-icon-message-solid:before {\n  content: \"\\e799\";\n}\n\n.el-icon-video-camera:before {\n  content: \"\\e772\";\n}\n\n.el-icon-video-camera-solid:before {\n  content: \"\\e796\";\n}\n\n.el-icon-camera:before {\n  content: \"\\e779\";\n}\n\n.el-icon-camera-solid:before {\n  content: \"\\e79b\";\n}\n\n.el-icon-download:before {\n  content: \"\\e77c\";\n}\n\n.el-icon-upload2:before {\n  content: \"\\e77b\";\n}\n\n.el-icon-upload:before {\n  content: \"\\e7c3\";\n}\n\n.el-icon-picture-outline-round:before {\n  content: \"\\e75f\";\n}\n\n.el-icon-picture-outline:before {\n  content: \"\\e75e\";\n}\n\n.el-icon-picture:before {\n  content: \"\\e79f\";\n}\n\n.el-icon-close:before {\n  content: \"\\e6db\";\n}\n\n.el-icon-check:before {\n  content: \"\\e6da\";\n}\n\n.el-icon-plus:before {\n  content: \"\\e6d9\";\n}\n\n.el-icon-minus:before {\n  content: \"\\e6d8\";\n}\n\n.el-icon-help:before {\n  content: \"\\e73d\";\n}\n\n.el-icon-s-help:before {\n  content: \"\\e7b3\";\n}\n\n.el-icon-circle-close:before {\n  content: \"\\e78d\";\n}\n\n.el-icon-circle-check:before {\n  content: \"\\e720\";\n}\n\n.el-icon-circle-plus-outline:before {\n  content: \"\\e723\";\n}\n\n.el-icon-remove-outline:before {\n  content: \"\\e722\";\n}\n\n.el-icon-zoom-out:before {\n  content: \"\\e776\";\n}\n\n.el-icon-zoom-in:before {\n  content: \"\\e777\";\n}\n\n.el-icon-error:before {\n  content: \"\\e79d\";\n}\n\n.el-icon-success:before {\n  content: \"\\e79c\";\n}\n\n.el-icon-circle-plus:before {\n  content: \"\\e7a0\";\n}\n\n.el-icon-remove:before {\n  content: \"\\e7a2\";\n}\n\n.el-icon-info:before {\n  content: \"\\e7a1\";\n}\n\n.el-icon-question:before {\n  content: \"\\e7a4\";\n}\n\n.el-icon-warning-outline:before {\n  content: \"\\e6c9\";\n}\n\n.el-icon-warning:before {\n  content: \"\\e7a3\";\n}\n\n.el-icon-goods:before {\n  content: \"\\e7c2\";\n}\n\n.el-icon-s-goods:before {\n  content: \"\\e7b2\";\n}\n\n.el-icon-star-off:before {\n  content: \"\\e717\";\n}\n\n.el-icon-star-on:before {\n  content: \"\\e797\";\n}\n\n.el-icon-more-outline:before {\n  content: \"\\e6cc\";\n}\n\n.el-icon-more:before {\n  content: \"\\e794\";\n}\n\n.el-icon-phone-outline:before {\n  content: \"\\e6cb\";\n}\n\n.el-icon-phone:before {\n  content: \"\\e795\";\n}\n\n.el-icon-user:before {\n  content: \"\\e6e3\";\n}\n\n.el-icon-user-solid:before {\n  content: \"\\e7a5\";\n}\n\n.el-icon-setting:before {\n  content: \"\\e6ca\";\n}\n\n.el-icon-s-tools:before {\n  content: \"\\e7ac\";\n}\n\n.el-icon-delete:before {\n  content: \"\\e6d7\";\n}\n\n.el-icon-delete-solid:before {\n  content: \"\\e7c9\";\n}\n\n.el-icon-eleme:before {\n  content: \"\\e7c7\";\n}\n\n.el-icon-platform-eleme:before {\n  content: \"\\e7ca\";\n}\n\n.el-icon-loading {\n  animation: rotating 2s linear infinite;\n}\n\n.el-icon--right {\n  margin-left: 5px;\n}\n.el-icon--left {\n  margin-right: 5px;\n}\n\n@keyframes rotating {\n  0% {\n    transform: rotateZ(0deg);\n  }\n  100% {\n    transform: rotateZ(360deg);\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/image.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n\n%size {\n  width: 100%;\n  height: 100%;\n}\n\n@include b(image) {\n  position: relative;\n  display: inline-block;\n  overflow: hidden;\n\n  @include e(inner) {\n    @extend %size;\n    vertical-align: top;\n\n    @include m(center) {\n      position: relative;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      display: block;\n    }\n  }\n\n  @include e(placeholder) {\n    @extend %size;\n    background: $--background-color-base;\n  }\n\n  @include e(error) {\n    @extend %size;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-size: 14px;\n    background: $--background-color-base;\n    color: $--color-text-placeholder;\n    vertical-align: middle;\n  }\n\n  @include e(preview) {\n    cursor: pointer;\n  }\n}\n\n\n@include b(image-viewer) {\n\n\n  @include e(wrapper) {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n  }\n\n  @include e(btn) {\n    position: absolute;\n    z-index: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 50%;\n    opacity: .8;\n    cursor: pointer;\n    box-sizing: border-box;\n    user-select: none;\n  }\n\n  @include e(close) {\n    top: 40px;\n    right: 40px;\n    width: 40px;\n    height: 40px;\n    font-size: 24px;\n    color: #fff;\n    background-color: #606266;\n  }\n\n  @include e(canvas) {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  @include e(actions) {\n    left: 50%;\n    bottom: 30px;\n    transform: translateX(-50%);\n    width: 282px;\n    height: 44px;\n    padding: 0 23px;\n    background-color: #606266;\n    border-color: #fff;\n    border-radius: 22px;\n\n    @include e(actions__inner) {\n      width: 100%;\n      height: 100%;\n      text-align: justify;\n      cursor: default;\n      font-size: 23px;\n      color: #fff;\n      display: flex;\n      align-items: center;\n      justify-content: space-around;\n    }\n  }\n\n  @include e(prev){\n    top: 50%;\n    transform: translateY(-50%);\n    width: 44px;\n    height: 44px;\n    font-size: 24px;\n    color: #fff;\n    background-color: #606266;\n    border-color: #fff;\n    left: 40px;\n  }\n\n  @include e(next){\n    top: 50%;\n    transform: translateY(-50%);\n    width: 44px;\n    height: 44px;\n    font-size: 24px;\n    color: #fff;\n    background-color: #606266;\n    border-color: #fff;\n    right: 40px;\n    text-indent: 2px;\n  }\n\n  @include e(mask) {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    opacity: .5;\n    background: #000;\n  }\n}\n\n.viewer-fade-enter-active {\n  animation: viewer-fade-in .3s;\n}\n\n.viewer-fade-leave-active {\n  animation: viewer-fade-out .3s;\n}\n\n@keyframes viewer-fade-in {\n  0% {\n    transform: translate3d(0, -20px, 0);\n    opacity: 0;\n  }\n  100% {\n    transform: translate3d(0, 0, 0);\n    opacity: 1;\n  }\n}\n\n@keyframes viewer-fade-out {\n  0% {\n    transform: translate3d(0, 0, 0);\n    opacity: 1;\n  }\n  100% {\n    transform: translate3d(0, -20px, 0);\n    opacity: 0;\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/index.scss",
    "content": "@import \"./base.scss\";\n@import \"./pagination.scss\";\n@import \"./dialog.scss\";\n@import \"./autocomplete.scss\";\n@import \"./dropdown.scss\";\n@import \"./dropdown-menu.scss\";\n@import \"./dropdown-item.scss\";\n@import \"./menu.scss\";\n@import \"./submenu.scss\";\n@import \"./menu-item.scss\";\n@import \"./menu-item-group.scss\";\n@import \"./input.scss\";\n@import \"./input-number.scss\";\n@import \"./radio.scss\";\n@import \"./radio-group.scss\";\n@import \"./radio-button.scss\";\n@import \"./checkbox.scss\";\n@import \"./checkbox-button.scss\";\n@import \"./checkbox-group.scss\";\n@import \"./switch.scss\";\n@import \"./select.scss\";\n@import \"./button.scss\";\n@import \"./button-group.scss\";\n@import \"./table.scss\";\n@import \"./table-column.scss\";\n@import \"./date-picker.scss\";\n@import \"./time-select.scss\";\n@import \"./time-picker.scss\";\n@import \"./popover.scss\";\n@import \"./tooltip.scss\";\n@import \"./message-box.scss\";\n@import \"./breadcrumb.scss\";\n@import \"./breadcrumb-item.scss\";\n@import \"./form.scss\";\n@import \"./form-item.scss\";\n@import \"./tabs.scss\";\n@import \"./tab-pane.scss\";\n@import \"./tag.scss\";\n@import \"./tree.scss\";\n@import \"./alert.scss\";\n@import \"./notification.scss\";\n@import \"./slider.scss\";\n@import \"./loading.scss\";\n@import \"./row.scss\";\n@import \"./col.scss\";\n@import \"./upload.scss\";\n@import \"./progress.scss\";\n@import \"./spinner.scss\";\n@import \"./message.scss\";\n@import \"./badge.scss\";\n@import \"./card.scss\";\n@import \"./rate.scss\";\n@import \"./steps.scss\";\n@import \"./step.scss\";\n@import \"./carousel.scss\";\n@import \"./scrollbar.scss\";\n@import \"./carousel-item.scss\";\n@import \"./collapse.scss\";\n@import \"./collapse-item.scss\";\n@import \"./cascader.scss\";\n@import \"./color-picker.scss\";\n@import \"./transfer.scss\";\n@import \"./container.scss\";\n@import \"./header.scss\";\n@import \"./aside.scss\";\n@import \"./main.scss\";\n@import \"./footer.scss\";\n@import \"./timeline.scss\";\n@import \"./timeline-item.scss\";\n@import \"./link.scss\";\n@import \"./divider.scss\";\n@import \"./image.scss\";\n@import \"./calendar.scss\";\n@import \"./backtop.scss\";\n@import \"./infinite-scroll.scss\";\n@import \"./page-header.scss\";\n@import \"./cascader-panel.scss\";\n@import \"./avatar.scss\";\n@import \"./drawer.scss\";\n@import \"./statistic.scss\";\n@import \"./popconfirm.scss\";\n@import \"./skeleton.scss\";\n@import \"./skeleton-item.scss\";\n@import \"./empty.scss\";\n@import \"./descriptions.scss\";\n@import \"./descriptions-item.scss\";\n@import \"./result.scss\";\n"
  },
  {
    "path": "packages/theme-chalk/src/infinite-scroll.scss",
    "content": ""
  },
  {
    "path": "packages/theme-chalk/src/infiniteScroll.scss",
    "content": ""
  },
  {
    "path": "packages/theme-chalk/src/input-number.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n@import \"input\";\n\n@include b(input-number) {\n  position: relative;\n  display: inline-block;\n  width: 180px;\n  line-height: #{$--input-height - 2};\n\n  .el-input {\n    display: block;\n\n    &__inner {\n      -webkit-appearance: none;\n      padding-left: #{$--input-height + 10};\n      padding-right: #{$--input-height + 10};\n      text-align: center;\n    }\n  }\n\n  @include e((increase, decrease)) {\n    position: absolute;\n    z-index: 1;\n    top: 1px;\n    width: $--input-height;\n    height: auto;\n    text-align: center;\n    background: $--background-color-base;\n    color: $--color-text-regular;\n    cursor: pointer;\n    font-size: 13px;\n\n    &:hover {\n      color: $--color-primary;\n\n      &:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {\n        border-color: $--input-focus-border;\n      }\n    }\n\n    &.is-disabled {\n      color: $--disabled-color-base;\n      cursor: not-allowed;\n    }\n  }\n\n  @include e(increase) {\n    right: 1px;\n    border-radius: 0 $--border-radius-base $--border-radius-base 0;\n    border-left: $--border-base;\n  }\n\n  @include e(decrease) {\n    left: 1px;\n    border-radius: $--border-radius-base 0 0 $--border-radius-base;\n    border-right: $--border-base;\n  }\n\n  @include when(disabled) {\n    @include e((increase, decrease)) {\n      border-color: $--disabled-border-base;\n      color: $--disabled-border-base;\n\n      &:hover {\n        color: $--disabled-border-base;\n        cursor: not-allowed;\n      }\n    }\n  }\n\n  @include m(medium) {\n    width: 200px;\n    line-height: #{$--input-medium-height - 2};\n\n    @include e((increase, decrease)) {\n      width: $--input-medium-height;\n      font-size: $--input-medium-font-size;\n    }\n\n    .el-input__inner {\n      padding-left: #{$--input-medium-height + 7};\n      padding-right: #{$--input-medium-height + 7};\n    }\n  }\n\n  @include m(small) {\n    width: 130px;\n    line-height: #{$--input-small-height - 2};\n\n    @include e((increase, decrease)) {\n      width: $--input-small-height;\n      font-size: $--input-small-font-size;\n\n      [class*=el-icon] {\n        transform: scale(.9);\n      }\n    }\n\n    .el-input__inner {\n      padding-left: #{$--input-small-height + 7};\n      padding-right: #{$--input-small-height + 7};\n    }\n  }\n\n  @include m(mini) {\n    width: 130px;\n    line-height: #{$--input-mini-height - 2};\n\n    @include e((increase, decrease)) {\n      width: $--input-mini-height;\n      font-size: $--input-mini-font-size;\n\n      [class*=el-icon] {\n        transform: scale(.8);\n      }\n    }\n\n    .el-input__inner {\n      padding-left: #{$--input-mini-height + 7};\n      padding-right: #{$--input-mini-height + 7};\n    }\n  }\n\n  @include when(without-controls) {\n    .el-input__inner {\n      padding-left: 15px;\n      padding-right: 15px;\n    }\n  }\n\n  @include when(controls-right) {\n    .el-input__inner {\n      padding-left: 15px;\n      padding-right: #{$--input-height + 10};\n    }\n\n    @include e((increase, decrease)) {\n      height: auto;\n      line-height: #{($--input-height - 2) / 2};\n\n      [class*=el-icon] {\n        transform: scale(.8);\n      }\n    }\n\n    @include e(increase) {\n      border-radius: 0 $--border-radius-base 0 0;\n      border-bottom: $--border-base;\n    }\n\n    @include e(decrease) {\n      right: 1px;\n      bottom: 1px;\n      top: auto;\n      left: auto;\n      border-right: none;\n      border-left: $--border-base;\n      border-radius: 0 0 $--border-radius-base 0;\n    }\n\n    &[class*=medium] {\n      [class*=increase], [class*=decrease] {\n        line-height: #{($--input-medium-height - 2) / 2};\n      }\n    }\n\n    &[class*=small] {\n      [class*=increase], [class*=decrease] {\n        line-height: #{($--input-small-height - 2) / 2};\n      }\n    }\n\n    &[class*=mini] {\n      [class*=increase], [class*=decrease] {\n        line-height: #{($--input-mini-height - 2) / 2};\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/input.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n\n@include b(textarea) {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n  vertical-align: bottom;\n  font-size: $--font-size-base;\n\n  @include e(inner) {\n    display: block;\n    resize: vertical;\n    padding: 5px 15px;\n    line-height: 1.5;\n    box-sizing: border-box;\n    width: 100%;\n    font-size: inherit;\n    color: $--input-font-color;\n    background-color: $--input-background-color;\n    background-image: none;\n    border: $--input-border;\n    border-radius: $--input-border-radius;\n    transition: $--border-transition-base;\n\n    &::placeholder {\n      color: $--input-placeholder-color;\n    }\n\n    &:hover {\n      border-color: $--input-hover-border;\n    }\n\n    &:focus {\n      outline: none;\n      border-color: $--input-focus-border;\n    }\n  }\n\n  & .el-input__count {\n    color: $--color-info;\n    background: $--color-white;\n    position: absolute;\n    font-size: 12px;\n    bottom: 5px;\n    right: 10px;\n  }\n\n  @include when(disabled) {\n    .el-textarea__inner {\n      background-color: $--input-disabled-fill;\n      border-color: $--input-disabled-border;\n      color: $--input-disabled-color;\n      cursor: not-allowed;\n\n      &::placeholder {\n        color: $--input-disabled-placeholder-color;\n      }\n    }\n  }\n\n  @include when(exceed) {\n    .el-textarea__inner {\n      border-color: $--color-danger;\n    }\n\n    .el-input__count {\n      color: $--color-danger;\n    }\n  }\n}\n\n@include b(input) {\n  position: relative;\n  font-size: $--font-size-base;\n  display: inline-block;\n  width: 100%;\n  @include scroll-bar;\n\n  & .el-input__clear {\n    color: $--input-icon-color;\n    font-size: $--input-font-size;\n    cursor: pointer;\n    transition: $--color-transition-base;\n\n    &:hover {\n      color: $--input-clear-hover-color;\n    }\n  }\n\n  & .el-input__count {\n    height: 100%;\n    display: inline-flex;\n    align-items: center;\n    color: $--color-info;\n    font-size: 12px;\n\n    .el-input__count-inner {\n      background: $--color-white;\n      line-height: initial;\n      display: inline-block;\n      padding: 0 5px;\n    }\n  }\n\n  @include e(inner) {\n    -webkit-appearance: none;\n    background-color: $--input-background-color;\n    background-image: none;\n    border-radius: $--input-border-radius;\n    border: $--input-border;\n    box-sizing: border-box;\n    color: $--input-font-color;\n    display: inline-block;\n    font-size: inherit;\n    height: $--input-height;\n    line-height: $--input-height;\n    outline: none;\n    padding: 0 15px;\n    transition: $--border-transition-base;\n    width: 100%;\n\n    &::-ms-reveal {\n      display: none;\n    }\n\n    &::placeholder {\n      color: $--input-placeholder-color;\n    }\n\n    &:hover {\n      border-color: $--input-hover-border;\n    }\n\n    &:focus {\n      outline: none;\n      border-color: $--input-focus-border;\n    }\n  }\n\n  @include e(suffix) {\n    position: absolute;\n    height: 100%;\n    right: 5px;\n    top: 0;\n    text-align: center;\n    color: $--input-icon-color;\n    transition: all .3s;\n    pointer-events: none;\n  }\n\n  @include e(suffix-inner) {\n    pointer-events: all;\n  }\n\n  @include e(prefix) {\n    position: absolute;\n    height: 100%;\n    left: 5px;\n    top: 0;\n    text-align: center;\n    color: $--input-icon-color;\n    transition: all .3s;\n  }\n\n  @include e(icon) {\n    height: 100%;\n    width: 25px;\n    text-align: center;\n    transition: all .3s;\n    line-height: $--input-height;\n\n    &:after {\n      content: '';\n      height: 100%;\n      width: 0;\n      display: inline-block;\n      vertical-align: middle;\n    }\n  }\n\n  @include e(validateIcon) {\n    pointer-events: none;\n  }\n\n  @include when(active) {\n    .el-input__inner {\n      outline: none;\n      border-color: $--input-focus-border;\n    }\n  }\n\n  @include when(disabled) {\n    .el-input__inner {\n      background-color: $--input-disabled-fill;\n      border-color: $--input-disabled-border;\n      color: $--input-disabled-color;\n      cursor: not-allowed;\n\n      &::placeholder {\n        color: $--input-disabled-placeholder-color;\n      }\n    }\n\n    .el-input__icon {\n      cursor: not-allowed;\n    }\n  }\n\n  @include when(exceed) {\n    .el-input__inner {\n      border-color: $--color-danger;\n    }\n\n    .el-input__suffix {\n      .el-input__count {\n        color: $--color-danger;\n      }\n    }\n  }\n\n  @include m(suffix) {\n    .el-input__inner {\n      padding-right: 30px;\n    }\n  }\n\n  @include m(prefix) {\n    .el-input__inner {\n      padding-left: 30px;\n    }\n  }\n\n  @include m(medium) {\n    font-size: $--input-medium-font-size;\n\n    @include e(inner) {\n      height: $--input-medium-height;\n      line-height: $--input-medium-height;\n    }\n\n    .el-input__icon {\n      line-height: $--input-medium-height;\n    }\n  }\n  @include m(small) {\n    font-size: $--input-small-font-size;\n\n    @include e(inner) {\n      height: $--input-small-height;\n      line-height: $--input-small-height;\n    }\n\n    .el-input__icon {\n      line-height: $--input-small-height;\n    }\n  }\n  @include m(mini) {\n    font-size: $--input-mini-font-size;\n\n    @include e(inner) {\n      height: $--input-mini-height;\n      line-height: $--input-mini-height;\n    }\n\n    .el-input__icon {\n      line-height: $--input-mini-height;\n    }\n  }\n}\n\n@include b(input-group) {\n  line-height: normal;\n  display: inline-table;\n  width: 100%;\n  border-collapse: separate;\n  border-spacing:0;\n\n  > .el-input__inner {\n    vertical-align: middle;\n    display: table-cell;\n  }\n\n  @include e((append, prepend)) {\n    background-color: $--background-color-base;\n    color: $--color-info;\n    vertical-align: middle;\n    display: table-cell;\n    position: relative;\n    border: $--border-base;\n    border-radius: $--input-border-radius;\n    padding: 0 20px;\n    width: 1px;\n    white-space: nowrap;\n\n    &:focus {\n      outline: none;\n    }\n\n    .el-select,\n    .el-button {\n      display: inline-block;\n      margin: -10px -20px;\n    }\n\n    button.el-button,\n    div.el-select .el-input__inner,\n    div.el-select:hover .el-input__inner {\n      border-color: transparent;\n      background-color: transparent;\n      color: inherit;\n      border-top: 0;\n      border-bottom: 0;\n    }\n\n    .el-button,\n    .el-input {\n      font-size: inherit;\n    }\n  }\n\n  @include e(prepend) {\n    border-right: 0;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n\n  @include e(append) {\n    border-left: 0;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n\n  @include m(prepend) {\n    .el-input__inner {\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n    }\n    .el-select .el-input.is-focus .el-input__inner {\n      border-color: transparent;\n    }\n  }\n\n  @include m(append) {\n    .el-input__inner {\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n    .el-select .el-input.is-focus .el-input__inner {\n      border-color: transparent;\n    }\n  }\n}\n\n/** disalbe default clear on IE */\n.el-input__inner::-ms-clear {\n  display: none;\n  width: 0;\n  height: 0;\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/link.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n\n$typeMap: (\n  primary: $--link-primary-font-color, \n  danger: $--link-danger-font-color, \n  success: $--link-success-font-color, \n  warning: $--link-warning-font-color, \n  info: $--link-info-font-color);\n\n@include b(link) {\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  vertical-align: middle;\n  position: relative;\n  text-decoration: none;\n  outline: none;\n  cursor: pointer;\n  padding: 0;\n  font-size: $--link-font-size;\n  font-weight: $--link-font-weight;\n\n  @include when(underline) {\n    &:hover:after {\n      content: \"\";\n      position: absolute;\n      left: 0;\n      right: 0;\n      height: 0;\n      bottom: 0;\n      border-bottom: 1px solid $--link-default-active-color\n    }\n  }\n\n  @include when(disabled) {\n    cursor: not-allowed;\n  } \n\n  & [class*=\"el-icon-\"] {\n    & + span {\n      margin-left: 5px;\n    }\n  }\n    \n    \n  &.el-link--default  {\n    color: $--link-default-font-color;\n    &:hover {\n      color: $--link-default-active-color\n    }\n    &:after {\n      border-color: $--link-default-active-color\n    }\n    @include when(disabled) {\n      color: $--link-disabled-font-color\n    }\n  }\n\n  @each $type, $primaryColor in $typeMap {\n    &.el-link--#{$type} {\n      color: $primaryColor;\n      &:hover {\n        color: mix($primaryColor, $--color-white, 80%)\n      }\n      &:after {\n        border-color: $primaryColor\n      }\n      @include when(disabled) {\n        color: mix($primaryColor, $--color-white, 50%)\n      }\n      @include when(underline) {\n        &:hover:after {\n          border-color: $primaryColor\n        }\n      }\n    }\n  }\n    \n}\n"
  },
  {
    "path": "packages/theme-chalk/src/loading.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n\n@include b(loading-parent) {\n  @include m(relative) {\n    position: relative !important;\n  }\n\n  @include m(hidden) {\n    overflow: hidden !important;\n  }\n}\n\n@include b(loading-mask) {\n  position: absolute;\n  z-index: 2000;\n  background-color: rgba(255, 255, 255, .9);\n  margin: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transition: opacity 0.3s;\n\n  @include when(fullscreen) {\n    position: fixed;\n\n    .el-loading-spinner {\n      margin-top: #{- $--loading-fullscreen-spinner-size / 2};\n\n      .circular {\n        height: $--loading-fullscreen-spinner-size;\n        width: $--loading-fullscreen-spinner-size;\n      }\n    }\n  }\n}\n\n@include b(loading-spinner) {\n  top: 50%;\n  margin-top: #{- $--loading-spinner-size / 2};\n  width: 100%;\n  text-align: center;\n  position: absolute;\n\n  .el-loading-text {\n    color: $--color-primary;\n    margin: 3px 0;\n    font-size: 14px;\n  }\n\n  .circular {\n    height: $--loading-spinner-size;\n    width: $--loading-spinner-size;\n    animation: loading-rotate 2s linear infinite;\n  }\n\n  .path {\n    animation: loading-dash 1.5s ease-in-out infinite;\n    stroke-dasharray: 90, 150;\n    stroke-dashoffset: 0;\n    stroke-width: 2;\n    stroke: $--color-primary;\n    stroke-linecap: round;\n  }\n\n  i {\n    color: $--color-primary;\n  }\n}\n\n.el-loading-fade-enter,\n.el-loading-fade-leave-active {\n  opacity: 0;\n}\n\n@keyframes loading-rotate {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes loading-dash {\n  0% {\n    stroke-dasharray: 1, 200;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 90, 150;\n    stroke-dashoffset: -40px;\n  }\n  100% {\n    stroke-dasharray: 90, 150;\n    stroke-dashoffset: -120px;\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/main.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n\n@include b(main) {\n  // IE11 supports the <main> element partially https://caniuse.com/#search=main\n  display: block;\n  flex: 1;\n  flex-basis: auto;\n  overflow: auto;\n  box-sizing: border-box;\n  padding: $--main-padding;\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/menu-item-group.scss",
    "content": ""
  },
  {
    "path": "packages/theme-chalk/src/menu-item.scss",
    "content": ""
  },
  {
    "path": "packages/theme-chalk/src/menu.scss",
    "content": "@import \"mixins/mixins\";\n@import \"mixins/utils\";\n@import \"common/var\";\n@import \"common/transition\";\n\n@mixin menu-item {\n  height: 56px;\n  line-height: 56px;\n  font-size: $--menu-item-font-size;\n  color: $--menu-item-font-color;\n  padding: 0 20px;\n  list-style: none;\n  cursor: pointer;\n  position: relative;\n  transition: border-color .3s, background-color .3s, color .3s;\n  box-sizing: border-box;\n  white-space: nowrap;\n\n  * {\n    vertical-align: middle;\n  }\n\n  i {\n    color: $--color-text-secondary;\n  }\n\n  &:hover,\n  &:focus {\n    outline: none;\n    background-color: $--menu-item-hover-fill;\n  }\n\n  @include when(disabled) {\n    opacity: 0.25;\n    cursor: not-allowed;\n    background: none !important;\n  }\n}\n\n@include b(menu) {\n  border-right: solid 1px #e6e6e6;\n  list-style: none;\n  position: relative;\n  margin: 0;\n  padding-left: 0;\n  background-color: $--menu-background-color;\n  @include utils-clearfix;\n  &.el-menu--horizontal {\n    border-bottom: solid 1px #e6e6e6;\n  }\n\n  @include m(horizontal) {\n    border-right: none;\n    & > .el-menu-item {\n      float: left;\n      height: 60px;\n      line-height: 60px;\n      margin: 0;\n      border-bottom: 2px solid transparent;\n      color: $--color-text-secondary;\n\n      a,\n      a:hover {\n        color: inherit;\n      }\n\n      &:not(.is-disabled):hover,\n      &:not(.is-disabled):focus{\n        background-color: #fff;\n      }\n    }\n    & > .el-submenu {\n      float: left;\n\n      &:focus,\n      &:hover {\n        outline: none;\n        .el-submenu__title {\n          color: $--color-text-primary;\n        }\n      }\n\n      &.is-active {\n        .el-submenu__title {\n          border-bottom: 2px solid $--color-primary;\n          color: $--color-text-primary;\n        }\n      }\n\n      & .el-submenu__title {\n        height: 60px;\n        line-height: 60px;\n        border-bottom: 2px solid transparent;\n        color: $--color-text-secondary;\n\n        &:hover {\n          background-color: #fff;\n        }\n      }\n      & .el-submenu__icon-arrow {\n        position: static;\n        vertical-align: middle;\n        margin-left: 8px;\n        margin-top: -3px;\n      }\n    }\n    & .el-menu {\n      & .el-menu-item,\n      & .el-submenu__title {\n        background-color: $--color-white;\n        float: none;\n        height: 36px;\n        line-height: 36px;\n        padding: 0 10px;\n        color: $--color-text-secondary;\n      }\n      & .el-menu-item.is-active,\n      & .el-submenu.is-active > .el-submenu__title {\n        color: $--color-text-primary;\n      }\n    }\n    & .el-menu-item:not(.is-disabled):hover,\n    & .el-menu-item:not(.is-disabled):focus {\n      outline: none;\n      color: $--color-text-primary;\n    }\n    & > .el-menu-item.is-active {\n      border-bottom: 2px solid $--color-primary;\n      color: $--color-text-primary;\n    }\n  }\n  @include m(collapse) {\n    width: 64px;\n\n    > .el-menu-item,\n    > .el-submenu > .el-submenu__title {\n      [class^=\"el-icon-\"] {\n        margin: 0;\n        vertical-align: middle;\n        width: 24px;\n        text-align: center;\n      }\n      .el-submenu__icon-arrow {\n        display: none;\n      }\n      span {\n        height: 0;\n        width: 0;\n        overflow: hidden;\n        visibility: hidden;\n        display: inline-block;\n      }\n    }\n\n    > .el-menu-item.is-active i {\n      color: inherit;\n    }\n\n    .el-menu .el-submenu {\n      min-width: 200px;\n    }\n\n    .el-submenu {\n      position: relative;\n      & .el-menu {\n        position: absolute;\n        margin-left: 5px;\n        top: 0;\n        left: 100%;\n        z-index: 10;\n        border: 1px solid $--border-color-light;\n        border-radius: $--border-radius-small;\n        box-shadow: $--box-shadow-light;\n      }\n\n      &.is-opened {\n        > .el-submenu__title .el-submenu__icon-arrow {\n          transform: none;\n        }\n      }\n    }\n  }\n  @include m(popup) {\n    z-index: 100;\n    min-width: 200px;\n    border: none;\n    padding: 5px 0;\n    border-radius: $--border-radius-small;\n    box-shadow: $--box-shadow-light;\n\n    &-bottom-start {\n      margin-top: 5px;\n    }\n    &-right-start {\n      margin-left: 5px;\n      margin-right: 5px;\n    }\n  }\n}\n@include b(menu-item) {\n  @include menu-item;\n\n  & [class^=\"el-icon-\"] {\n    margin-right: 5px;\n    width: 24px;\n    text-align: center;\n    font-size: 18px;\n    vertical-align: middle;\n  }\n  @include when(active) {\n    color: $--color-primary;\n    i {\n      color: inherit;\n    }\n  }\n}\n  \n@include b(submenu) {\n  list-style: none;\n  margin: 0;\n  padding-left: 0;\n\n  @include e(title) {\n    @include menu-item;\n\n    &:hover {\n      background-color: $--menu-item-hover-fill;\n    }\n  }\n  & .el-menu {\n    border: none;\n  }\n  & .el-menu-item {\n    height: 50px;\n    line-height: 50px;\n    padding: 0 45px;\n    min-width: 200px;\n  }\n  @include e(icon-arrow) {\n    position: absolute;\n    top: 50%;\n    right: 20px;\n    margin-top: -7px;\n    transition: transform .3s;\n    font-size: 12px;\n  }\n  @include when(active) {\n    .el-submenu__title {\n      border-bottom-color: $--color-primary;\n    }\n  }\n  @include when(opened) {\n    > .el-submenu__title .el-submenu__icon-arrow {\n      transform: rotateZ(180deg);\n    }\n  }\n  @include when(disabled) {\n    .el-submenu__title,\n    .el-menu-item {\n      opacity: 0.25;\n      cursor: not-allowed;\n      background: none !important;\n    }\n  }\n  [class^=\"el-icon-\"] {\n    vertical-align: middle;\n    margin-right: 5px;\n    width: 24px;\n    text-align: center;\n    font-size: 18px;\n  }\n}\n\n@include b(menu-item-group) {\n  > ul {\n    padding: 0;\n  }\n  @include e(title) {\n    padding: 7px 0 7px 20px;\n    line-height: normal;\n    font-size: 12px;\n    color: $--color-text-secondary;\n  }\n}\n\n.horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow {\n  transition: .2s;\n  opacity: 0;\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/message-box.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n@import \"common/popup\";\n@import \"button\";\n@import \"input\";\n\n@include b(message-box) {\n  display: inline-block;\n  width: $--msgbox-width;\n  padding-bottom: 10px;\n  vertical-align: middle;\n  background-color: $--color-white;\n  border-radius: $--msgbox-border-radius;\n  border: 1px solid $--border-color-lighter;\n  font-size: $--messagebox-font-size;\n  box-shadow: $--box-shadow-light;\n  text-align: left;\n  overflow: hidden;\n  backface-visibility: hidden;\n\n  @include e(wrapper) {\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    text-align: center;\n\n    &::after {\n      content: \"\";\n      display: inline-block;\n      height: 100%;\n      width: 0;\n      vertical-align: middle;\n    }\n  }\n\n  @include e(header) {\n    position: relative;\n    padding: $--msgbox-padding-primary;\n    padding-bottom: 10px;\n  }\n\n  @include e(title) {\n    padding-left: 0;\n    margin-bottom: 0;\n    font-size: $--messagebox-font-size;\n    line-height: 1;\n    color: $--messagebox-title-color;\n  }\n\n  @include e(headerbtn) {\n    position: absolute;\n    top: $--msgbox-padding-primary;\n    right: $--msgbox-padding-primary;\n    padding: 0;\n    border: none;\n    outline: none;\n    background: transparent;\n    font-size: $--message-close-size;\n    cursor: pointer;\n\n    .el-message-box__close {\n      color: $--color-info;\n    }\n\n    &:focus, &:hover {\n      .el-message-box__close {\n        color: $--color-primary;\n      }\n    }\n\n  }\n\n  @include e(content) {\n    padding: 10px $--msgbox-padding-primary;\n    color: $--messagebox-content-color;\n    font-size: $--messagebox-content-font-size;\n  }\n  \n  @include e(container) {\n    position: relative;\n  }\n\n  @include e(input) {\n    padding-top: 15px;\n\n    & input.invalid {\n      border-color: $--color-danger;\n      &:focus {\n        border-color: $--color-danger;\n      }\n    }\n  }\n\n  @include e(status) {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    font-size: 24px !important;\n\n    &::before {\n      // 防止图标切割\n      padding-left: 1px;\n    }\n\n    + .el-message-box__message {\n      padding-left: 36px;\n      padding-right: 12px;\n    }\n\n    &.el-icon-success {\n      color: $--messagebox-success-color;\n    }\n\n    &.el-icon-info {\n      color: $--messagebox-info-color;\n    }\n\n    &.el-icon-warning {\n      color: $--messagebox-warning-color;\n    }\n\n    &.el-icon-error {\n      color: $--messagebox-danger-color;\n    }\n  }\n\n  @include e(message) {\n    margin: 0;\n\n    & p {\n      margin: 0;\n      line-height: 24px;\n    }\n  }\n\n  @include e(errormsg) {\n    color: $--color-danger;\n    font-size: $--messagebox-error-font-size;\n    min-height: 18px;\n    margin-top: 2px;\n  }\n\n  @include e(btns) {\n    padding: 5px 15px 0;\n    text-align: right;\n\n    & button:nth-child(2) {\n      margin-left: 10px;\n    }\n  }\n\n  @include e(btns-reverse) {\n    flex-direction: row-reverse;\n  }\n\n  // centerAlign 布局\n  @include m(center) {\n    padding-bottom: 30px;\n\n    @include e(header) {\n      padding-top: 30px;\n    }\n\n    @include e(title) {\n      position: relative;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    @include e(status) {\n      position: relative;\n      top: auto;\n      padding-right: 5px;\n      text-align: center;\n      transform: translateY(-1px);\n    }\n\n    @include e(message) {\n      margin-left: 0;\n    }\n\n    @include e((btns, content)) {\n      text-align: center;\n    }\n\n    @include e(content) {\n      $padding-horizontal: $--msgbox-padding-primary + 12px;\n\n      padding-left: $padding-horizontal;\n      padding-right: $padding-horizontal;\n    }\n  }\n}\n\n.msgbox-fade-enter-active {\n  animation: msgbox-fade-in .3s;\n}\n\n.msgbox-fade-leave-active {\n  animation: msgbox-fade-out .3s;\n}\n\n@keyframes msgbox-fade-in {\n  0% {\n    transform: translate3d(0, -20px, 0);\n    opacity: 0;\n  }\n  100% {\n    transform: translate3d(0, 0, 0);\n    opacity: 1;\n  }\n}\n\n@keyframes msgbox-fade-out {\n  0% {\n    transform: translate3d(0, 0, 0);\n    opacity: 1;\n  }\n  100% {\n    transform: translate3d(0, -20px, 0);\n    opacity: 0;\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/message.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n\n@include b(message) {\n  min-width: $--message-min-width;\n  box-sizing: border-box;\n  border-radius: $--border-radius-base;\n  border-width: $--border-width-base;\n  border-style: $--border-style-base;\n  border-color: $--border-color-lighter;\n  position: fixed;\n  left: 50%;\n  top: 20px;\n  transform: translateX(-50%);\n  background-color: $--message-background-color;\n  transition: opacity 0.3s, transform .4s, top 0.4s;\n  overflow: hidden;\n  padding: $--message-padding;\n  display: flex;\n  align-items: center;\n\n  @include when(center) {\n    justify-content: center;\n  }\n\n  @include when(closable) {\n    .el-message__content {\n      padding-right: 16px;\n    }\n  }\n\n  p {\n    margin: 0;\n  }\n\n  @include m(info) {\n    .el-message__content {\n      color: $--message-info-font-color;\n    }\n  }\n\n  @include m(success) {\n    background-color: $--color-success-lighter;\n    border-color: $--color-success-light;\n\n    .el-message__content {\n      color: $--message-success-font-color;\n    }\n  }\n\n  @include m(warning) {\n    background-color: $--color-warning-lighter;\n    border-color: $--color-warning-light;\n\n    .el-message__content {\n      color: $--message-warning-font-color;\n    }\n  }\n\n  @include m(error) {\n    background-color: $--color-danger-lighter;\n    border-color: $--color-danger-light;\n\n    .el-message__content {\n      color: $--message-danger-font-color;\n    }\n  }\n\n  @include e(icon) {\n    margin-right: 10px;\n  }\n\n  @include e(content) {\n    padding: 0;\n    font-size: 14px;\n    line-height: 1;\n    &:focus {\n      outline-width: 0;\n    }\n  }\n\n  @include e(closeBtn) {\n    position: absolute;\n    top: 50%;\n    right: 15px;\n    transform: translateY(-50%);\n    cursor: pointer;\n    color: $--message-close-icon-color;\n    font-size: $--message-close-size;\n\n    &:focus {\n      outline-width: 0;\n    }\n    &:hover {\n      color: $--message-close-hover-color;\n    }\n  }\n\n  & .el-icon-success {\n    color: $--message-success-font-color;\n  }\n\n  & .el-icon-error {\n    color: $--message-danger-font-color;\n  }\n\n  & .el-icon-info {\n    color: $--message-info-font-color;\n  }\n\n  & .el-icon-warning {\n    color: $--message-warning-font-color;\n  }\n}\n\n.el-message-fade-enter,\n.el-message-fade-leave-active {\n  opacity: 0;\n  transform: translate(-50%, -100%);\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/mixins/_button.scss",
    "content": "@import \"../common/var\";\n@mixin button-plain($color) {\n  color: $color;\n  background: mix($--color-white, $color, 90%);\n  border-color: mix($--color-white, $color, 60%);\n\n  &:hover,\n  &:focus {\n    background: $color;\n    border-color: $color;\n    color: $--color-white;\n  }\n\n  &:active {\n    background: mix($--color-black, $color, $--button-active-shade-percent);\n    border-color: mix($--color-black, $color, $--button-active-shade-percent);\n    color: $--color-white;\n    outline: none;\n  }\n\n  &.is-disabled {\n    &,\n    &:hover,\n    &:focus,\n    &:active {\n      color: mix($--color-white, $color, 40%);\n      background-color: mix($--color-white, $color, 90%);\n      border-color: mix($--color-white, $color, 80%);\n    }\n  }\n}\n\n@mixin button-variant($color, $background-color, $border-color) {\n  color: $color;\n  background-color: $background-color;\n  border-color: $border-color;\n\n  &:hover,\n  &:focus {\n    background: mix($--color-white, $background-color, $--button-hover-tint-percent);\n    border-color: mix($--color-white, $border-color, $--button-hover-tint-percent);\n    color: $color;\n  }\n  \n  &:active {\n    background: mix($--color-black, $background-color, $--button-active-shade-percent);\n    border-color: mix($--color-black, $border-color, $--button-active-shade-percent);\n    color: $color;\n    outline: none;\n  }\n\n  &.is-active {\n    background: mix($--color-black, $background-color, $--button-active-shade-percent);\n    border-color: mix($--color-black, $border-color, $--button-active-shade-percent);\n    color: $color;\n  }\n\n  &.is-disabled {\n    &,\n    &:hover,\n    &:focus,\n    &:active {\n      color: $--color-white;\n      background-color: mix($background-color, $--color-white);\n      border-color: mix($border-color, $--color-white);\n    }\n  }\n\n  &.is-plain {\n    @include button-plain($background-color);\n  }\n}\n\n@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {\n  padding: $padding-vertical $padding-horizontal;\n  font-size: $font-size;\n  border-radius: $border-radius;\n  &.is-round {\n    padding: $padding-vertical $padding-horizontal;\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/mixins/config.scss",
    "content": "$namespace: 'el';\n$element-separator: '__';\n$modifier-separator: '--';\n$state-prefix: 'is-';\n"
  },
  {
    "path": "packages/theme-chalk/src/mixins/function.scss",
    "content": "@import \"config\";\n\n/* BEM support Func\n -------------------------- */\n@function selectorToString($selector) {\n  $selector: inspect($selector);\n  $selector: str-slice($selector, 2, -2);\n  @return $selector;\n}\n\n@function containsModifier($selector) {\n  $selector: selectorToString($selector);\n\n  @if str-index($selector, $modifier-separator) {\n    @return true;\n  } @else {\n    @return false;\n  }\n}\n\n@function containWhenFlag($selector) {\n  $selector: selectorToString($selector);\n\n  @if str-index($selector, '.' + $state-prefix) {\n    @return true\n  } @else {\n    @return false\n  }\n}\n\n@function containPseudoClass($selector) {\n  $selector: selectorToString($selector);\n\n  @if str-index($selector, ':') {\n    @return true\n  } @else {\n    @return false\n  }\n}\n\n@function hitAllSpecialNestRule($selector) {\n\n  @return containsModifier($selector) or containWhenFlag($selector) or containPseudoClass($selector);\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/mixins/mixins.scss",
    "content": "@import \"function\";\n@import \"../common/var\";\n\n/* Break-points\n -------------------------- */\n@mixin res($key, $map: $--breakpoints) {\n  // 循环断点Map，如果存在则返回\n  @if map-has-key($map, $key) {\n    @media only screen and #{inspect(map-get($map, $key))} {\n      @content;\n    }\n  } @else {\n    @warn \"Undefeined points: `#{$map}`\";\n  }\n}\n\n/* Scrollbar\n -------------------------- */\n@mixin scroll-bar {\n  $--scrollbar-thumb-background: #b4bccc;\n  $--scrollbar-track-background: #fff;\n\n  &::-webkit-scrollbar {\n    z-index: 11;\n    width: 6px;\n\n    &:horizontal {\n      height: 6px;\n    }\n\n    &-thumb {\n      border-radius: 5px;\n      width: 6px;\n      background: $--scrollbar-thumb-background;\n    }\n\n    &-corner {\n      background: $--scrollbar-track-background;\n    }\n\n    &-track {\n      background: $--scrollbar-track-background;\n\n      &-piece {\n        background: $--scrollbar-track-background;\n        width: 6px;\n      }\n    }\n  }\n}\n\n/* Placeholder\n -------------------------- */\n@mixin placeholder {\n  &::-webkit-input-placeholder {\n    @content\n  }\n\n  &::-moz-placeholder {\n    @content\n  }\n\n  &:-ms-input-placeholder {\n    @content\n  }\n}\n\n/* BEM\n -------------------------- */\n@mixin b($block) {\n  $B: $namespace+'-'+$block !global;\n\n  .#{$B} {\n    @content;\n  }\n}\n\n@mixin e($element) {\n  $E: $element !global;\n  $selector: &;\n  $currentSelector: \"\";\n  @each $unit in $element {\n    $currentSelector: #{$currentSelector + \".\" + $B + $element-separator + $unit + \",\"};\n  }\n\n  @if hitAllSpecialNestRule($selector) {\n    @at-root {\n      #{$selector} {\n        #{$currentSelector} {\n          @content;\n        }\n      }\n    }\n  } @else {\n    @at-root {\n      #{$currentSelector} {\n        @content;\n      }\n    }\n  }\n}\n\n@mixin m($modifier) {\n  $selector: &;\n  $currentSelector: \"\";\n  @each $unit in $modifier {\n    $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + \",\"};\n  }\n\n  @at-root {\n    #{$currentSelector} {\n      @content;\n    }\n  }\n}\n\n@mixin configurable-m($modifier, $E-flag: false) {\n  $selector: &;\n  $interpolation: '';\n\n  @if $E-flag {\n    $interpolation: $element-separator + $E-flag;\n  }\n\n  @at-root {\n    #{$selector} {\n      .#{$B+$interpolation+$modifier-separator+$modifier} {\n        @content;\n      }\n    }\n  }\n}\n\n@mixin spec-selector($specSelector: '', $element: $E, $modifier: false, $block: $B) {\n  $modifierCombo: '';\n\n  @if $modifier {\n    $modifierCombo: $modifier-separator + $modifier;\n  }\n\n  @at-root {\n    #{&}#{$specSelector}.#{$block+$element-separator+$element+$modifierCombo} {\n      @content\n    }\n  }\n}\n\n@mixin meb($modifier: false, $element: $E, $block: $B) {\n  $selector: &;\n  $modifierCombo: '';\n\n  @if $modifier {\n    $modifierCombo: $modifier-separator + $modifier;\n  }\n\n  @at-root {\n    #{$selector} {\n      .#{$block+$element-separator+$element+$modifierCombo} {\n        @content\n      }\n    }\n  }\n}\n\n@mixin when($state) {\n  @at-root {\n    &.#{$state-prefix + $state} {\n      @content;\n    }\n  }\n}\n\n@mixin extend-rule($name) {\n  @extend #{'%shared-'+$name};\n}\n\n@mixin share-rule($name) {\n  $rule-name: '%shared-'+$name;\n\n  @at-root #{$rule-name} {\n    @content\n  }\n}\n\n@mixin pseudo($pseudo) {\n  @at-root #{&}#{':#{$pseudo}'} {\n    @content\n  }\n}\n\n"
  },
  {
    "path": "packages/theme-chalk/src/mixins/utils.scss",
    "content": "@mixin utils-user-select($value) {\n  -moz-user-select: $value;\n  -webkit-user-select: $value;\n  -ms-user-select: $value;\n}\n\n@mixin utils-clearfix {\n  $selector: &;\n\n  @at-root {\n    #{$selector}::before,\n    #{$selector}::after {\n      display: table;\n      content: \"\";\n    }\n    #{$selector}::after {\n      clear: both\n    }\n  }\n}\n\n@mixin utils-vertical-center {\n  $selector: &;\n\n  @at-root {\n    #{$selector}::after {\n      display: inline-block;\n      content: \"\";\n      height: 100%;\n      vertical-align: middle\n    }\n  }\n}\n\n@mixin utils-ellipsis {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}"
  },
  {
    "path": "packages/theme-chalk/src/notification.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n\n@include b(notification) {\n  display: flex;\n  width: $--notification-width;\n  padding: $--notification-padding;\n  border-radius: $--notification-radius;\n  box-sizing: border-box;\n  border: 1px solid $--notification-border-color;\n  position: fixed;\n  background-color: $--color-white;\n  box-shadow: $--notification-shadow;\n  transition: opacity .3s, transform .3s, left .3s, right .3s, top 0.4s, bottom .3s;\n  overflow: hidden;\n\n  &.right {\n    right: 16px;\n  }\n\n  &.left {\n    left: 16px;\n  }\n\n  @include e(group) {\n    margin-left: $--notification-group-margin-left;\n    margin-right: $--notification-group-margin-right;\n  }\n\n  @include e(title) {\n    font-weight: bold;\n    font-size: $--notification-title-font-size;\n    color: $--notification-title-color;\n    margin: 0;\n  }\n\n  @include e(content) {\n    font-size: $--notification-content-font-size;\n    line-height: 21px;\n    margin: 6px 0 0 0;\n    color: $--notification-content-color;\n    text-align: justify;\n\n    p {\n      margin: 0;\n    }\n  }\n\n  @include e(icon) {\n    height: $--notification-icon-size;\n    width: $--notification-icon-size;\n    font-size: $--notification-icon-size;\n  }\n\n  @include e(closeBtn) {\n    position: absolute;\n    top: 18px;\n    right: 15px;\n    cursor: pointer;\n    color: $--notification-close-color;\n    font-size: $--notification-close-font-size;\n\n    &:hover {\n      color: $--notification-close-hover-color;\n    }\n  }\n\n  .el-icon-success {\n    color: $--notification-success-icon-color;\n  }\n\n  .el-icon-error {\n    color: $--notification-danger-icon-color;\n  }\n\n  .el-icon-info {\n    color: $--notification-info-icon-color;\n  }\n\n  .el-icon-warning {\n    color: $--notification-warning-icon-color;\n  }\n}\n\n.el-notification-fade-enter {\n  &.right {\n    right: 0;\n    transform: translateX(100%);\n  }\n\n  &.left {\n    left: 0;\n    transform: translateX(-100%);\n  }\n}\n\n.el-notification-fade-leave-active {\n  opacity: 0;\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/option-group.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n\n@include b(select-group) {\n  $gap: 20px;\n\n  margin: 0;\n  padding: 0;\n\n  @include e(wrap) {\n    position: relative;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n\n    &:not(:last-of-type) {\n      padding-bottom: 24px;\n\n      &::after {\n        content: '';\n        position: absolute;\n        display: block;\n        left: $gap;\n        right: $gap;\n        bottom: 12px;\n        height: 1px;\n        background: $--border-color-light;\n      }\n    }\n  }\n\n  @include e(title) {\n    padding-left: $gap;\n    font-size: $--select-group-font-size;\n    color: $--select-group-color;\n    line-height: $--select-group-height;\n  }\n\n  & .el-select-dropdown__item {\n    padding-left: $gap;\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/option.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n\n@include b(select-dropdown) {\n  @include e(item) {\n    font-size: $--select-font-size;\n    padding: 0 20px;\n    position: relative;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    color: $--select-option-color;\n    height: $--select-option-height;\n    line-height: $--select-option-height;\n    box-sizing: border-box;\n    cursor: pointer;\n\n    @include when(disabled) {\n      color: $--select-option-disabled-color;\n      cursor: not-allowed;\n\n      &:hover {\n        background-color: $--color-white;\n      }\n    }\n\n    &.hover, &:hover {\n      background-color: $--select-option-hover-background;\n    }\n\n    &.selected {\n      color: $--select-option-selected-font-color;\n      font-weight: bold;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/page-header.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n\n@include b(page-header) {\n  display: flex;\n  line-height: 24px;\n\n  @include e(left) {\n    display: flex;\n    cursor: pointer;\n    margin-right: 40px;\n    position: relative;\n\n    &::after {\n      content: \"\";\n      position: absolute;\n      width: 1px;\n      height: 16px;\n      right: -20px;\n      top: 50%;\n      transform: translateY(-50%);\n      background-color: $--border-color-base;\n    }\n\n    .el-icon-back {\n      font-size: 18px;\n      margin-right: 6px;\n      align-self: center;\n    }\n\n    @include e(title) {\n      font-size: 14px;\n      font-weight: 500;\n    }\n  }\n\n  @include e(content) {\n    font-size: 18px;\n    color: $--color-text-primary;\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/pagination.scss",
    "content": "@import \"mixins/mixins\";\n@import \"mixins/utils\";\n@import \"common/var\";\n@import \"select\";\n\n@include b(pagination) {\n  white-space: nowrap;\n  padding: 2px 5px;\n  color: $--pagination-font-color;\n  font-weight: bold;\n  @include utils-clearfix;\n\n  span:not([class*=suffix]),\n  button {\n    display: inline-block;\n    font-size: $--pagination-font-size;\n    min-width: $--pagination-button-width;\n    height: $--pagination-button-height;\n    line-height: $--pagination-button-height;\n    vertical-align: top;\n    box-sizing: border-box;\n  }\n\n  .el-input__inner {\n    text-align: center;\n    -moz-appearance: textfield;\n    line-height: normal;\n  }\n\n  // pagesize 的下拉 icon\n  .el-input__suffix {\n    right: 0;\n    transform: scale(.8);\n  }\n\n  .el-select .el-input {\n    width: 100px;\n    margin: 0 5px;\n\n    .el-input__inner {\n      padding-right: 25px;\n      border-radius: $--pagination-border-radius;\n    }\n  }\n\n  button {\n    border: none;\n    padding: 0 6px;\n    background: transparent;\n\n    &:focus {\n      outline: none;\n    }\n\n    &:hover {\n      color: $--pagination-hover-color;\n    }\n\n    &:disabled {\n      color: $--pagination-button-disabled-color;\n      background-color: $--pagination-button-disabled-background-color;\n      cursor: not-allowed;\n    }\n  }\n\n  .btn-prev,\n  .btn-next {\n    background: center center no-repeat;\n    background-size: 16px;\n    background-color: $--pagination-background-color;\n    cursor: pointer;\n    margin: 0;\n    color: $--pagination-button-color;\n\n    .el-icon {\n      display: block;\n      font-size: 12px;\n      font-weight: bold;\n    }\n  }\n\n  .btn-prev {\n    padding-right: 12px;\n  }\n\n  .btn-next {\n    padding-left: 12px;    \n  }\n\n  .el-pager li.disabled {\n    color: $--color-text-placeholder;\n    cursor: not-allowed;\n  }\n\n  @include m(small) {\n    .btn-prev,\n    .btn-next,\n    .el-pager li,\n    .el-pager li.btn-quicknext,\n    .el-pager li.btn-quickprev,\n    .el-pager li:last-child {\n      border-color: transparent;\n      font-size: 12px;\n      line-height: 22px;\n      height: 22px;\n      min-width: 22px;\n    }\n\n    .arrow.disabled {\n      visibility: hidden;\n    }\n\n    .more::before,\n    li.more::before {\n      line-height: 24px;\n    }\n\n    span:not([class*=suffix]),\n    button {\n      height: 22px;\n      line-height: 22px;\n    }\n\n    @include e(editor) {\n      height: 22px;\n      &.el-input .el-input__inner {\n        height: 22px;\n      }\n    }\n  }\n\n  @include e(sizes) {\n    margin: 0 10px 0 0;\n    font-weight: normal;\n    color: $--color-text-regular;\n\n    .el-input .el-input__inner {\n      font-size: $--pagination-font-size;\n      padding-left: 8px;\n\n      &:hover {\n        border-color: $--pagination-hover-color;\n      }\n    }\n  }\n\n  @include e(total) {\n    margin-right: 10px;\n    font-weight: normal;\n    color: $--color-text-regular;\n  }\n\n  @include e(jump) {\n    margin-left: 24px;\n    font-weight: normal;\n    color: $--color-text-regular;\n\n    .el-input__inner {\n      padding: 0 3px;\n    }\n  }\n\n  @include e(rightwrapper) {\n    float: right;\n  }\n\n  @include e(editor) {\n    line-height: 18px;\n    padding: 0 2px;\n    height: $--pagination-button-height;\n      \n    text-align: center;\n    margin: 0 2px;\n    box-sizing: border-box;\n    border-radius: $--pagination-border-radius;\n\n    &.el-input {\n      width: 50px;\n    }\n\n    &.el-input .el-input__inner {\n      height: $--pagination-button-height;\n    }\n\n    .el-input__inner::-webkit-inner-spin-button,\n    .el-input__inner::-webkit-outer-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n  }\n\n  @include when(background) {\n    .btn-prev,\n    .btn-next,\n    .el-pager li {\n      margin: 0 5px;\n      background-color: $--color-info-lighter;\n      color: $--color-text-regular;\n      min-width: 30px;\n      border-radius: 2px;\n\n      &.disabled {\n        color: $--color-text-placeholder;\n      }\n    }\n\n    .btn-prev, .btn-next {\n      padding: 0;\n\n      &:disabled {\n        color: $--color-text-placeholder;\n      }\n    }\n\n    .el-pager li:not(.disabled) {\n      &:hover {\n        color: $--pagination-hover-color;\n      }\n\n      &.active {\n        background-color: $--color-primary;\n        color: $--color-white;\n      }\n    }\n\n    &.el-pagination--small {\n      .btn-prev,\n      .btn-next,\n      .el-pager li {\n        margin: 0 3px;\n        min-width: 22px;\n      }\n    }\n  }\n}\n\n@include b(pager) {\n  user-select: none;\n  list-style: none;\n  display: inline-block;\n  vertical-align: top;\n  font-size: 0;\n  padding: 0;\n  margin: 0;\n\n  .more::before {\n    line-height: 30px;\n  }\n\n  li {\n    padding: 0 4px;\n    background: $--pagination-background-color;\n    vertical-align: top;\n    display: inline-block;\n    font-size: $--pagination-font-size;\n    min-width: $--pagination-button-width;\n    height: $--pagination-button-height;\n    line-height: $--pagination-button-height;\n    cursor: pointer;\n    box-sizing: border-box;\n    text-align: center;\n    margin: 0;\n\n    &.btn-quicknext,\n    &.btn-quickprev {\n      line-height: 28px;\n      color: $--pagination-button-color;\n\n      &.disabled {\n        color: $--color-text-placeholder;\n      }\n    }\n\n    &.btn-quickprev:hover {\n      cursor: pointer;\n    }\n\n    &.btn-quicknext:hover {\n      cursor: pointer;\n    }\n\n    &.active + li {\n      border-left: 0;\n    }\n\n    &:hover {\n      color: $--pagination-hover-color;\n    }\n\n    &.active {\n      color: $--pagination-hover-color;\n      cursor: default;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/popconfirm.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n\n@include b(popconfirm) {\n  @include e(main) {\n    display: flex;\n    align-items: center;\n  }\n  @include e(icon) {\n    margin-right: 5px;\n  }\n  @include e(action) {\n    text-align: right; \n    margin: 0\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/popover.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n@import \"./popper\";\n\n@include b(popover) {\n  position: absolute;\n  background: $--popover-background-color;\n  min-width: 150px;\n  border-radius: 4px;\n  border: 1px solid $--popover-border-color;\n  padding: $--popover-padding;\n  z-index: $--index-popper;\n  color: $--color-text-regular;\n  line-height: 1.4;\n  text-align: justify;\n  font-size: $--popover-font-size;\n  box-shadow: $--box-shadow-light;\n  word-break: break-all;\n\n  @include m(plain) {\n    padding: $--popover-padding-large;\n  }\n\n  @include e(title) {\n    color: $--popover-title-font-color;\n    font-size: $--popover-title-font-size;\n    line-height: 1;\n    margin-bottom: 12px;\n  }\n\n  @include e(reference) {\n    &:focus:not(.focusing), &:focus:hover {\n      outline-width: 0;\n    }\n  }\n\n  &:focus:active, &:focus {\n    outline-width: 0;\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/popper.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n\n@include b(popper) {\n  .popper__arrow,\n  .popper__arrow::after {\n    position: absolute;\n    display: block;\n    width: 0;\n    height: 0;\n    border-color: transparent;\n    border-style: solid;\n  }\n\n  .popper__arrow {\n    border-width: $--popover-arrow-size;\n    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03))\n  }\n\n  .popper__arrow::after {\n    content: \" \";\n    border-width: $--popover-arrow-size;\n  }\n\n  &[x-placement^=\"top\"] {\n    margin-bottom: #{$--popover-arrow-size + 6};\n  }\n\n  &[x-placement^=\"top\"] .popper__arrow {\n    bottom: -$--popover-arrow-size;\n    left: 50%;\n    margin-right: #{$--tooltip-arrow-size / 2};\n    border-top-color: $--popover-border-color;\n    border-bottom-width: 0;\n\n    &::after {\n      bottom: 1px;\n      margin-left: -$--popover-arrow-size;\n      border-top-color: $--popover-background-color;\n      border-bottom-width: 0;\n    }\n  }\n\n  &[x-placement^=\"bottom\"] {\n    margin-top: #{$--popover-arrow-size + 6};\n  }\n\n  &[x-placement^=\"bottom\"] .popper__arrow {\n    top: -$--popover-arrow-size;\n    left: 50%;\n    margin-right: #{$--tooltip-arrow-size / 2};\n    border-top-width: 0;\n    border-bottom-color: $--popover-border-color;\n\n    &::after {\n      top: 1px;\n      margin-left: -$--popover-arrow-size;\n      border-top-width: 0;\n      border-bottom-color: $--popover-background-color;\n    }\n  }\n\n  &[x-placement^=\"right\"] {\n    margin-left: #{$--popover-arrow-size + 6};\n  }\n\n  &[x-placement^=\"right\"] .popper__arrow {\n    top: 50%;\n    left: -$--popover-arrow-size;\n    margin-bottom: #{$--tooltip-arrow-size / 2};\n    border-right-color: $--popover-border-color;\n    border-left-width: 0;\n\n    &::after {\n      bottom: -$--popover-arrow-size;\n      left: 1px;\n      border-right-color: $--popover-background-color;\n      border-left-width: 0;\n    }\n  }\n\n  &[x-placement^=\"left\"] {\n    margin-right: #{$--popover-arrow-size + 6};\n  }\n\n  &[x-placement^=\"left\"] .popper__arrow {\n    top: 50%;\n    right: -$--popover-arrow-size;\n    margin-bottom: #{$--tooltip-arrow-size / 2};\n    border-right-width: 0;\n    border-left-color: $--popover-border-color;\n\n    &::after {\n      right: 1px;\n      bottom: -$--popover-arrow-size;\n      margin-left: -$--popover-arrow-size;\n      border-right-width: 0;\n      border-left-color: $--popover-background-color;\n    }\n  }\n}"
  },
  {
    "path": "packages/theme-chalk/src/progress.scss",
    "content": "@import \"mixins/mixins\";\n@import \"mixins/utils\";\n@import \"common/var\";\n\n@include b(progress) {\n  position: relative;\n  line-height: 1;\n\n  @include e(text) {\n    font-size:14px;\n    color: $--color-text-regular;\n    display: inline-block;\n    vertical-align: middle;\n    margin-left: 10px;\n    line-height: 1;\n\n    i {\n      vertical-align: middle;\n      display: block;\n    }\n  }\n\n  @include m((circle,dashboard)) {\n    display: inline-block;\n\n    .el-progress__text {\n      position: absolute;\n      top: 50%;\n      left: 0;\n      width: 100%;\n      text-align: center;\n      margin: 0;\n      transform: translate(0, -50%);\n\n      i {\n        vertical-align: middle;\n        display: inline-block;\n      }\n    }\n  }\n\n\n  @include m(without-text) {\n    .el-progress__text {\n      display: none;\n    }\n\n    .el-progress-bar {\n      padding-right: 0;\n      margin-right: 0;\n      display: block;\n    }\n  }\n\n  @include m(text-inside) {\n    .el-progress-bar {\n      padding-right: 0;\n      margin-right: 0;\n    }\n  }\n\n  @include when(success) {\n    .el-progress-bar__inner {\n      background-color: $--color-success;\n    }\n\n    .el-progress__text {\n      color: $--color-success;\n    }\n  }\n\n  @include when(warning) {\n    .el-progress-bar__inner {\n      background-color: $--color-warning;\n    }\n\n    .el-progress__text {\n      color: $--color-warning;\n    }\n  }\n\n  @include when(exception) {\n    .el-progress-bar__inner {\n      background-color: $--color-danger;\n    }\n\n    .el-progress__text {\n      color: $--color-danger;\n    }\n  }\n}\n\n@include b(progress-bar) {\n  padding-right: 50px;\n  display: inline-block;\n  vertical-align: middle;\n  width: 100%;\n  margin-right: -55px;\n  box-sizing: border-box;\n\n  @include e(outer) {\n    height: 6px;\n    border-radius: 100px;\n    background-color: $--border-color-lighter;\n    overflow: hidden;\n    position: relative;\n    vertical-align: middle;\n  }\n  @include e(inner) {\n    position: absolute;\n    left: 0;\n    top: 0;\n    height: 100%;\n    background-color: $--color-primary;\n    text-align: right;\n    border-radius: 100px;\n    line-height: 1;\n    white-space: nowrap;\n    transition: width 0.6s ease;\n\n    @include utils-vertical-center;\n  }\n\n  @include e(innerText) {\n    display: inline-block;\n    vertical-align: middle;\n    color: $--color-white;\n    font-size: 12px;\n    margin: 0 5px;\n  }\n}\n\n@keyframes progress {\n  0% {\n    background-position: 0 0;\n  }\n\n  100% {\n    background-position: 32px 0;\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/radio-button.scss",
    "content": "@import \"mixins/mixins\";\n@import \"mixins/_button\";\n@import \"common/var\";\n\n@include b(radio-button) {\n  position: relative;\n  display: inline-block;\n  outline: none;\n\n  @include e(inner) {\n    display: inline-block;\n    line-height: 1;\n    white-space: nowrap;\n    vertical-align: middle;\n    background: $--button-default-background-color;\n    border: $--border-base;\n    font-weight: $--button-font-weight;\n    border-left: 0;\n    color: $--button-default-font-color;\n    -webkit-appearance: none;\n    text-align: center;\n    box-sizing: border-box;\n    outline: none;\n    margin: 0;\n    position: relative;\n    cursor: pointer;\n    transition: $--all-transition;\n\n    @include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, 0);\n\n    &:hover {\n      color: $--color-primary;\n    }\n\n    & [class*=\"el-icon-\"] {\n      line-height: 0.9;\n\n      & + span {\n        margin-left: 5px;\n      }\n    }\n  }\n\n  &:first-child {\n    .el-radio-button__inner {\n      border-left: $--border-base;\n      border-radius: $--border-radius-base 0 0 $--border-radius-base;\n      box-shadow: none !important;\n    }\n  }\n\n  @include e(orig-radio) {\n    opacity: 0;\n    outline: none;\n    position: absolute;\n    z-index: -1;\n\n    &:checked {\n      & + .el-radio-button__inner {\n        color: $--radio-button-checked-font-color;\n        background-color: $--radio-button-checked-background-color;\n        border-color: $--radio-button-checked-border-color;\n        box-shadow: -1px 0 0 0 $--radio-button-checked-border-color;\n      }\n    }\n\n    &:disabled {\n      & + .el-radio-button__inner {\n        color: $--button-disabled-font-color;\n        cursor: not-allowed;\n        background-image: none;\n        background-color: $--button-disabled-background-color;\n        border-color: $--button-disabled-border-color;\n        box-shadow: none;\n      }\n      &:checked + .el-radio-button__inner {\n        background-color: $--radio-button-disabled-checked-fill;\n      }\n    }\n  }\n\n  &:last-child {\n    .el-radio-button__inner {\n      border-radius: 0 $--border-radius-base $--border-radius-base 0;\n    }\n  }\n\n  &:first-child:last-child {\n    .el-radio-button__inner {\n      border-radius: $--border-radius-base;\n    }\n  }\n\n  @include m(medium) {\n    & .el-radio-button__inner {\n      @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, 0);\n    }\n  }\n  @include m(small) {\n    & .el-radio-button__inner {\n      @include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, 0);\n    }\n  }\n  @include m(mini) {\n    & .el-radio-button__inner {\n      @include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, 0);\n    }\n  }\n\n  &:focus:not(.is-focus):not(:active):not(.is-disabled){ /*获得焦点时 样式提醒*/\n    box-shadow: 0 0 2px 2px $--radio-button-checked-border-color;\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/radio-group.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n\n@include b(radio-group) {\n  display: inline-block;\n  line-height: 1;\n  vertical-align: middle;\n  font-size: 0;\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/radio.scss",
    "content": "@import \"mixins/mixins\";\n@import \"mixins/utils\";\n@import 'mixins/button';\n@import \"common/var\";\n\n@include b(radio) {\n  color: $--radio-font-color;\n  font-weight: $--radio-font-weight;\n  line-height: 1;\n  position: relative;\n  cursor: pointer;\n  display: inline-block;\n  white-space: nowrap;\n  outline: none;\n  font-size: $--font-size-base;\n  margin-right: 30px;\n  @include utils-user-select(none);\n\n  @include when(bordered) {\n    padding: $--radio-bordered-padding;\n    border-radius: $--border-radius-base;\n    border: $--border-base;\n    box-sizing: border-box;\n    height: $--radio-bordered-height;\n\n    &.is-checked {\n      border-color: $--color-primary;\n    }\n\n    &.is-disabled {\n      cursor: not-allowed;\n      border-color: $--border-color-lighter;\n    }\n\n    & + .el-radio.is-bordered {\n      margin-left: 10px;\n    }\n  }\n\n  @include m(medium) {\n    &.is-bordered {\n      padding: $--radio-bordered-medium-padding;\n      border-radius: $--button-medium-border-radius;\n      height: $--radio-bordered-medium-height;\n      .el-radio__label {\n        font-size: $--button-medium-font-size;\n      }\n      .el-radio__inner {\n        height: $--radio-bordered-medium-input-height;\n        width: $--radio-bordered-medium-input-width;\n      }\n    }\n  }\n  @include m(small) {\n    &.is-bordered {\n      padding: $--radio-bordered-small-padding;\n      border-radius: $--button-small-border-radius;\n      height: $--radio-bordered-small-height;\n      .el-radio__label {\n        font-size: $--button-small-font-size;\n      }\n      .el-radio__inner {\n        height: $--radio-bordered-small-input-height;\n        width: $--radio-bordered-small-input-width;\n      }\n    }\n  }\n  @include m(mini) {\n    &.is-bordered {\n      padding: $--radio-bordered-mini-padding;\n      border-radius: $--button-mini-border-radius;\n      height: $--radio-bordered-mini-height;\n      .el-radio__label {\n        font-size: $--button-mini-font-size;\n      }\n      .el-radio__inner {\n        height: $--radio-bordered-mini-input-height;\n        width: $--radio-bordered-mini-input-width;\n      }\n    }\n  }\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  @include e(input) {\n    white-space: nowrap;\n    cursor: pointer;\n    outline: none;\n    display: inline-block;\n    line-height: 1;\n    position: relative;\n    vertical-align: middle;\n\n    @include when(disabled) {\n      .el-radio__inner {\n        background-color: $--radio-disabled-input-fill;\n        border-color: $--radio-disabled-input-border-color;\n        cursor: not-allowed;\n\n        &::after {\n          cursor: not-allowed;\n          background-color: $--radio-disabled-icon-color;\n        }\n\n        & + .el-radio__label {\n          cursor: not-allowed;\n        }\n      }\n      &.is-checked {\n        .el-radio__inner {\n          background-color: $--radio-disabled-checked-input-fill;\n          border-color: $--radio-disabled-checked-input-border-color;\n\n          &::after {\n            background-color: $--radio-disabled-checked-icon-color;\n          }\n        }\n      }\n      & + span.el-radio__label {\n        color: $--color-text-placeholder;\n        cursor: not-allowed;\n      }\n    }\n\n    @include when(checked) {\n      .el-radio__inner {\n        border-color: $--radio-checked-input-border-color;\n        background: $--radio-checked-icon-color;\n\n        &::after {\n          transform: translate(-50%, -50%) scale(1);\n        }\n      }\n\n      & + .el-radio__label {\n        color: $--radio-checked-font-color;\n      }\n    }\n\n    @include when(focus) {\n      .el-radio__inner {\n        border-color: $--radio-input-border-color-hover;\n      }\n    }\n  }\n  @include e(inner) {\n    border: $--radio-input-border;\n    border-radius: $--radio-input-border-radius;\n    width: $--radio-input-width;\n    height: $--radio-input-height;\n    background-color: $--radio-input-background-color;\n    position: relative;\n    cursor: pointer;\n    display: inline-block;\n    box-sizing: border-box;\n\n    &:hover {\n      border-color: $--radio-input-border-color-hover;\n    }\n\n    &::after {\n      width: 4px;\n      height: 4px;\n      border-radius: $--radio-input-border-radius;\n      background-color: $--color-white;\n      content: \"\";\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%, -50%) scale(0);\n      transition: transform .15s ease-in;\n    }\n  }\n\n  @include e(original) {\n    opacity: 0;\n    outline: none;\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    margin: 0;\n  }\n\n  &:focus:not(.is-focus):not(:active):not(.is-disabled) { /*获得焦点时 样式提醒*/\n    .el-radio__inner {\n      box-shadow: 0 0 2px 2px $--radio-input-border-color-hover;\n    }\n  }\n\n  @include e(label) {\n    font-size: $--radio-font-size;\n    padding-left: 10px;\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/rate.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n\n@include b(rate) {\n  height: $--rate-height;\n  line-height: 1;\n\n  &:focus, &:active {\n    outline-width: 0;\n  }\n\n  @include e(item) {\n    display: inline-block;\n    position: relative;\n    font-size: 0;\n    vertical-align: middle;\n  }\n\n  @include e(icon) {\n    position: relative;\n    display: inline-block;\n    font-size: $--rate-icon-size;\n    margin-right: $--rate-icon-margin;\n    color: $--rate-icon-color;\n    transition: .3s;\n    &.hover {\n      transform: scale(1.15);\n    }\n\n    .path2 {\n      position: absolute;\n      left: 0;\n      top: 0;\n    }\n  }\n\n  @include e(decimal) {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: inline-block;\n    overflow: hidden;\n  }\n\n  @include e(text) {\n    font-size: $--rate-font-size;\n    vertical-align: middle;\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/reset.scss",
    "content": "@import 'common/var';\n\nbody {\n  font-family: \"Helvetica Neue\",Helvetica,\"PingFang SC\",\"Hiragino Sans GB\",\"Microsoft YaHei\",\"微软雅黑\",Arial,sans-serif;\n  font-weight: 400;\n  font-size: $--font-size-base;\n  color: $--color-black;\n  -webkit-font-smoothing: antialiased;\n}\n\na {\n  color: $--color-primary;\n  text-decoration: none;\n\n  &:hover,\n  &:focus {\n    color: mix($--color-white, $--color-primary, $--button-hover-tint-percent);\n  }\n\n  &:active {\n    color: mix($--color-black, $--color-primary, $--button-active-shade-percent);\n  }\n}\n\nh1, h2, h3, h4, h5, h6 {\n  color: $--color-text-regular;\n  font-weight: inherit;\n\n  &:first-child {\n    margin-top: 0;\n  }\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n}\n\nh1 {\n  font-size: #{$--font-size-base + 6px};\n}\n\nh2 {\n  font-size: #{$--font-size-base + 4px};\n}\n\nh3 {\n  font-size: #{$--font-size-base + 2px};\n}\n\nh4, h5, h6, p {\n  font-size: inherit;\n}\n\np {\n  line-height: 1.8;\n\n  &:first-child {\n    margin-top: 0;\n  }\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n}\n\nsup, sub {\n  font-size: #{$--font-size-base - 1px};\n}\n\nsmall {\n  font-size: #{$--font-size-base - 2px};\n}\n\nhr {\n  margin-top: 20px;\n  margin-bottom: 20px;\n  border: 0;\n  border-top: 1px solid #eeeeee;\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/result.scss",
    "content": "@import 'mixins/mixins';\n@import 'common/var';\n\n@include b(result) {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  text-align: center;\n  box-sizing: border-box;\n  padding: $--result-padding;\n\n  @include e(icon) {\n    svg {\n      width: $--result-icon-font-size;\n      height: $--result-icon-font-size;\n    }\n  }\n\n  @include e(title) {\n    margin-top: $--result-title-margin-top;\n\n    p {\n      margin: 0;\n      font-size: $--result-title-font-size;\n      color: $--color-text-primary;\n      line-height: 1.3;\n    }\n  }\n\n  @include e(subtitle) {\n    margin-top: $--result-subtitle-margin-top;\n\n    p {\n      margin: 0;\n      font-size: $--font-size-base;\n      color: $--color-text-regular;\n      line-height: 1.3;\n    }\n  }\n\n  @include e(extra) {\n    margin-top: $--result-extra-margin-top;\n  }\n\n  .icon-success {\n    fill: $--result-success-color;\n  }\n\n  .icon-error {\n    fill: $--result-danger-color;\n  }\n\n  .icon-info {\n    fill: $--result-info-color;\n  }\n\n  .icon-warning {\n    fill: $--result-warning-color;\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/row.scss",
    "content": "@import \"common/var\";\n@import \"mixins/mixins\";\n@import \"mixins/utils\";\n\n@include b(row) {\n  position: relative;\n  box-sizing: border-box;\n  @include utils-clearfix;\n\n  @include m(flex) {\n    display: flex;\n    &:before,\n    &:after {\n      display: none;\n    }\n\n    @include when(justify-center) {\n      justify-content: center;\n    }\n    @include when(justify-end) {\n      justify-content: flex-end;\n    }\n    @include when(justify-space-between) {\n      justify-content: space-between;\n    }\n    @include when(justify-space-around) {\n      justify-content: space-around;\n    }\n\n    @include when(align-top) {\n      align-items: flex-start;\n    }\n\n    @include when(align-middle) {\n      align-items: center;\n    }\n    @include when(align-bottom) {\n      align-items: flex-end;\n    }\n  }\n\n}\n\n"
  },
  {
    "path": "packages/theme-chalk/src/scrollbar.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n\n@include b(scrollbar) {\n  overflow: hidden;\n  position: relative;\n\n  &:hover,\n  &:active,\n  &:focus {\n    > .el-scrollbar__bar {\n      opacity: 1;\n      transition: opacity 340ms ease-out;\n    }\n  }\n\n  @include e(wrap) {\n    overflow: scroll;\n    height: 100%;\n\n    @include m(hidden-default) {\n      scrollbar-width: none;\n      &::-webkit-scrollbar {\n        width: 0;\n        height: 0;\n      }\n    }\n  }\n\n  @include e(thumb) {\n    position: relative;\n    display: block;\n    width: 0;\n    height: 0;\n    cursor: pointer;\n    border-radius: inherit;\n    background-color: $--scrollbar-background-color;\n    transition: .3s background-color;\n\n    &:hover {\n      background-color: $--scrollbar-hover-background-color;\n    }\n  }\n\n  @include e(bar) {\n    position: absolute;\n    right: 2px;\n    bottom: 2px;\n    z-index: 1;\n    border-radius: 4px;\n    opacity: 0;\n    transition: opacity 120ms ease-out;\n\n    @include when(vertical) {\n      width: 6px;\n      top: 2px;\n\n      > div {\n        width: 100%;\n      }\n    }\n\n    @include when(horizontal) {\n      height: 6px;\n      left: 2px;\n\n      > div {\n        height: 100%;\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/select-dropdown.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n@import \"./popper\";\n\n@include b(select-dropdown) {\n  position: absolute;\n  z-index: #{$--index-top + 1};\n  border: $--select-dropdown-border;\n  border-radius: $--border-radius-base;\n  background-color: $--select-dropdown-background;\n  box-shadow: $--select-dropdown-shadow;\n  box-sizing: border-box;\n  margin: 5px 0;\n\n  @include when(multiple) {\n    & .el-select-dropdown__item {\n      padding-right: 40px;\n    }\n    & .el-select-dropdown__item.selected {\n      color: $--select-option-selected-font-color;\n      background-color: $--select-dropdown-background;\n\n      &.hover {\n        background-color: $--select-option-hover-background;\n      }\n\n      &::after {\n        position: absolute;\n        right: 20px;\n        font-family: 'element-icons';\n        content: \"\\e6da\";\n        font-size: 12px;\n        font-weight: bold;\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n      }\n    }\n  }\n\n  .el-scrollbar.is-empty .el-select-dropdown__list{\n    padding: 0;\n  }\n}\n\n@include b(select-dropdown__empty) {\n  padding: $--select-dropdown-empty-padding;\n  margin: 0;\n  text-align: center;\n  color: $--select-dropdown-empty-color;\n  font-size: $--select-font-size;\n}\n\n@include b(select-dropdown__wrap) {\n  max-height: $--select-dropdown-max-height;\n}\n\n@include b(select-dropdown__list) {\n  list-style: none;\n  padding: $--select-dropdown-padding;\n  margin: 0;\n  box-sizing: border-box;\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/select.scss",
    "content": "@import \"mixins/mixins\";\n@import \"mixins/utils\";\n@import \"common/var\";\n@import \"select-dropdown\";\n@import \"input\";\n@import \"tag\";\n@import \"option\";\n@import \"option-group\";\n@import \"scrollbar\";\n\n@include b(select) {\n  display: inline-block;\n  position: relative;\n\n  .el-select__tags\n    >span {\n      display: contents;\n    }\n\n  &:hover {\n    .el-input__inner {\n      border-color: $--select-border-color-hover;\n    }\n  }\n\n  .el-input__inner {\n    cursor: pointer;\n    padding-right: 35px;\n\n    &:focus {\n      border-color: $--select-input-focus-border-color;\n    }\n  }\n\n  .el-input {\n    & .el-select__caret {\n      color: $--select-input-color;\n      font-size: $--select-input-font-size;\n      transition: transform .3s;\n      transform: rotateZ(180deg);\n      cursor: pointer;\n\n      @include when(reverse) {\n        transform: rotateZ(0deg);\n      }\n\n      @include when(show-close) {\n        font-size: $--select-font-size;\n        text-align: center;\n        transform: rotateZ(180deg);\n        border-radius: $--border-radius-circle;\n        color: $--select-input-color;\n        transition: $--color-transition-base;\n\n        &:hover {\n          color: $--select-close-hover-color;\n        }\n      }\n    }\n\n    &.is-disabled {\n      & .el-input__inner {\n        cursor: not-allowed;\n\n        &:hover {\n          border-color: $--select-disabled-border;\n        }\n      }\n    }\n\n    &.is-focus .el-input__inner {\n      border-color: $--select-input-focus-border-color;\n    }\n  }\n\n  > .el-input {\n    display: block;\n  }\n\n  @include e(input) {\n    border: none;\n    outline: none;\n    padding: 0;\n    margin-left: 15px;\n    color: $--select-multiple-input-color;\n    font-size: $--select-font-size;\n    appearance: none;\n    height: 28px;\n    background-color: transparent;\n    @include when(mini) {\n      height: 14px;\n    }\n  }\n\n  @include e(close) {\n    cursor: pointer;\n    position: absolute;\n    top: 8px;\n    z-index: $--index-top;\n    right: 25px;\n    color: $--select-input-color;\n    line-height: 18px;\n    font-size: $--select-input-font-size;\n\n    &:hover {\n      color: $--select-close-hover-color;\n    }\n  }\n\n  @include e(tags) {\n    position: absolute;\n    line-height: normal;\n    white-space: normal;\n    z-index: $--index-normal;\n    top: 50%;\n    transform: translateY(-50%);\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n  }\n\n  @include e(tags-text) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .el-tag {\n    box-sizing: border-box;\n    border-color: transparent;\n    margin: 2px 0 2px 6px;\n    background-color: #f0f2f5;\n    display: flex;\n    max-width: 100%;\n    align-items: center;\n\n    &__close.el-icon-close {\n      background-color: $--color-text-placeholder;\n      top: 0;\n      color: $--color-white;\n      flex-shrink: 0;\n\n      &:hover {\n        background-color: $--color-text-secondary;\n      }\n\n      &::before {\n        display: block;\n        transform: translate(0, .5px);\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/skeleton-item.scss",
    "content": "@import 'mixins/mixins';\n@import 'common/var';\n\n@mixin circle-size($size) {\n  width: $size;\n  height: $size;\n  line-height: $size;\n}\n\n@include b(skeleton) {\n  @include e(item) {\n    background: $--skeleton-color;\n    display: inline-block;\n    height: 16px;\n    border-radius: $--border-radius-base;\n    width: 100%;\n  }\n\n  @include e(circle) {\n    border-radius: 50%;\n    @include circle-size($--avatar-medium-size);\n\n    @include m(lg) {\n      @include circle-size($--avatar-large-size);\n    }\n\n    @include m(md) {\n      @include circle-size($--avatar-small-size);\n    }\n  }\n\n  @include e(button) {\n    height: 40px;\n    width: 64px;\n    border-radius: 4px;\n  }\n\n  @include e(p) {\n    width: 100%;\n    @include when(last) {\n      width: 61%;\n    }\n\n    @include when(first) {\n      width: 33%;\n    }\n  }\n\n  @include e(text) {\n    width: 100%;\n    height: $--font-size-small;\n  }\n\n  @include e(caption) {\n    height: $--font-size-extra-small;\n  }\n\n  @include e(h1) {\n    height: $--font-size-extra-large;\n  }\n\n  @include e(h3) {\n    height: $--font-size-large;\n  }\n\n  @include e(h5) {\n    height: $--font-size-medium;\n  }\n\n  @include e(image) {\n    width: unset;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 0;\n\n    svg {\n      fill: $--svg-monochrome-grey;\n      width: 22%;\n      height: 22%;\n    }\n  }\n\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/skeleton.scss",
    "content": "@import 'mixins/mixins';\n@import 'common/var';\n@import \"./skeleton-item.scss\";\n\n@mixin skeleton-color() {\n  background: linear-gradient(\n    90deg,\n    $--skeleton-color 25%,\n    $--skeleton-to-color 37%,\n    $--skeleton-color 63%\n  );\n  background-size: 400% 100%;\n  animation: #{$namespace}-skeleton-loading 1.4s ease infinite;\n}\n\n@keyframes #{$namespace}-skeleton-loading {\n  0% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0 50%;\n  }\n}\n\n@include b(skeleton) {\n  width: 100%;\n  @each $unit in (first-line, paragraph) {\n    @include e($unit) {\n      height: 16px;\n      margin-top: 16px;\n      background: $--skeleton-color;\n    }\n  }\n\n  @include when(animated) {\n    .#{$namespace}-skeleton__item {\n      @include skeleton-color();\n    }\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/slider.scss",
    "content": "@import \"mixins/mixins\";\n@import \"mixins/utils\";\n@import \"input-number\";\n@import \"tooltip\";\n@import \"common/var\";\n\n@include b(slider) {\n\n  @include utils-clearfix;\n\n  @include e(runway) {\n    width: 100%;\n    height: $--slider-height;\n    margin: $--slider-margin;\n    background-color: $--slider-runway-background-color;\n    border-radius: $--slider-border-radius;\n    position: relative;\n    cursor: pointer;\n    vertical-align: middle;\n\n    &.show-input {\n      margin-right: 160px;\n      width: auto;\n    }\n\n    &.disabled {\n      cursor: default;\n\n      .el-slider__bar {\n        background-color: $--slider-disable-color;\n      }\n\n      .el-slider__button {\n        border-color: $--slider-disable-color;\n      }\n\n      .el-slider__button-wrapper {\n        &:hover,\n        &.hover {\n          cursor: not-allowed;\n        }\n\n        &.dragging {\n          cursor: not-allowed;\n        }\n      }\n\n      .el-slider__button {\n        &:hover,\n        &.hover,\n        &.dragging {\n          transform: scale(1);\n        }\n\n        &:hover,\n        &.hover {\n          cursor: not-allowed;\n        }\n\n        &.dragging {\n          cursor: not-allowed;\n        }\n      }\n    }\n  }\n\n  @include e(input) {\n    float: right;\n    margin-top: 3px;\n    width: 130px;\n\n    &.el-input-number--mini {\n      margin-top: 5px;\n    }\n\n    &.el-input-number--medium {\n      margin-top: 0;\n    }\n\n    &.el-input-number--large {\n      margin-top: -2px;\n    }\n  }\n\n  @include e(bar) {\n    height: $--slider-height;\n    background-color: $--slider-main-background-color;\n    border-top-left-radius: $--slider-border-radius;\n    border-bottom-left-radius: $--slider-border-radius;\n    position: absolute;\n  }\n\n  @include e(button-wrapper) {\n    height: $--slider-button-wrapper-size;\n    width: $--slider-button-wrapper-size;\n    position: absolute;\n    z-index: 1001;\n    top: $--slider-button-wrapper-offset;\n    transform: translateX(-50%);\n    background-color: transparent;\n    text-align: center;\n    user-select: none;\n    line-height: normal;\n    @include utils-vertical-center;\n\n    .el-tooltip {\n      vertical-align: middle;\n      display: inline-block;\n    }\n\n    &:hover,\n    &.hover {\n      cursor: grab;\n    }\n\n    &.dragging {\n      cursor: grabbing;\n    }\n  }\n\n  @include e(button) {\n    width: $--slider-button-size;\n    height: $--slider-button-size;\n    border: solid 2px $--slider-main-background-color;\n    background-color: $--color-white;\n    border-radius: 50%;\n    transition: .2s;\n    user-select: none;\n\n    &:hover,\n    &.hover,\n    &.dragging {\n      transform: scale(1.2);\n    }\n\n    &:hover,\n    &.hover {\n      cursor: grab;\n    }\n\n    &.dragging {\n      cursor: grabbing;\n    }\n  }\n\n  @include e(stop) {\n    position: absolute;\n    height: $--slider-height;\n    width: $--slider-height;\n    border-radius: $--border-radius-circle;\n    background-color: $--slider-stop-background-color;\n    transform: translateX(-50%);\n  }\n\n  @include e(marks) {\n    top: 0;\n    left: 12px;\n    width: 18px;\n    height: 100%;\n\n    @include e(marks-text) {\n      position: absolute;\n      transform: translateX(-50%);\n      font-size: 14px;\n      color: $--color-info;\n      margin-top: 15px;\n    }\n  }\n\n  @include when(vertical) {\n    position: relative;\n    .el-slider__runway {\n      width: $--slider-height;\n      height: 100%;\n      margin: 0 16px;\n    }\n    .el-slider__bar {\n      width: $--slider-height;\n      height: auto;\n      border-radius: 0 0 3px 3px;\n    }\n    .el-slider__button-wrapper {\n      top: auto;\n      left: $--slider-button-wrapper-offset;\n      transform: translateY(50%);\n    }\n    .el-slider__stop {\n      transform: translateY(50%);\n    }\n    &.el-slider--with-input {\n      padding-bottom: #{$--input-medium-height + 22px};\n      .el-slider__input {\n        overflow: visible;\n        float: none;\n        position: absolute;\n        bottom: 22px;\n        width: 36px;\n        margin-top: 15px;\n        .el-input__inner {\n          text-align: center;\n          padding-left: 5px;\n          padding-right: 5px;\n        }\n        .el-input-number__decrease,\n        .el-input-number__increase\n        {\n          top: $--input-small-height;\n          margin-top: -1px;\n          border: $--input-border;\n          line-height: 20px;\n          box-sizing: border-box;\n          transition: $--border-transition-base;\n        }\n        .el-input-number__decrease {\n          width: 18px;\n          right: 18px;\n          border-bottom-left-radius: $--input-border-radius;\n        }\n        .el-input-number__increase {\n          width: 19px;\n          border-bottom-right-radius: $--input-border-radius;\n          & ~ .el-input .el-input__inner {\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n        }\n        &:hover {\n          .el-input-number__decrease,\n          .el-input-number__increase\n          {\n            border-color: $--input-hover-border;\n          }\n        }\n        &:active {\n          .el-input-number__decrease,\n          .el-input-number__increase\n          {\n            border-color: $--input-focus-border;\n          }\n        }\n      }\n    }\n\n    @include e(marks-text) {\n      margin-top: 0;\n      left: 15px;\n      transform: translateY(50%);\n    }\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/spinner.scss",
    "content": "@import \"mixins/mixins\";\n\n@include b(time-spinner) {\n  width: 100%;\n  white-space: nowrap;\n}\n\n@include b(spinner) {\n  display: inline-block;\n  vertical-align: middle;\n}\n@include b(spinner-inner) {\n  animation: rotate 2s linear infinite;\n  width: 50px;\n  height: 50px;\n\n  & .path {\n    stroke: #ececec;\n    stroke-linecap: round;\n    animation: dash 1.5s ease-in-out infinite;\n  }\n\n}\n\n@keyframes rotate {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes dash {\n  0% {\n    stroke-dasharray: 1, 150;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 90, 150;\n    stroke-dashoffset: -35;\n  }\n  100% {\n    stroke-dasharray: 90, 150;\n    stroke-dashoffset: -124;\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/statistic.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n\n@include b(statistic) {\n  $statistic-justify: center;\n  $statistic-align: center;\n  width: 100%;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  color: $--color-black;\n  font-variant: tabular-nums;\n  list-style: none;\n  font-feature-settings: \"tnum\";\n  text-align: center;\n  .head {\n    margin-bottom: 4px;\n    color: $--color-text-regular;\n    font-size: $--font-size-small;\n  }\n\n  .con {\n    font-family: Sans-serif;\n    display: flex;\n    justify-content: $statistic-justify;\n    align-items: $statistic-align;\n    color: $--color-text-primary;\n    .number {\n      font-size: $--font-size-extra-large;\n      padding: 0 4px;\n    }\n    span {\n      display: inline-block;\n      margin: 0;\n      line-height: 100%;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/step.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n\n@include b(step) {\n  position: relative;\n  flex-shrink: 1;\n\n  @include pseudo(last-of-type) {\n    @include e(line) {\n      display: none;\n    }\n\n    // 只有未设置 space 的情况下才自适应宽度\n    @include when(flex) {\n      flex-basis: auto !important;\n      flex-shrink: 0;\n      flex-grow: 0;\n    }\n\n    @include e((main, description)) {\n      padding-right: 0;\n    }\n  }\n\n  @include e(head) {\n    position: relative;\n    width: 100%;\n\n    @include when(process) {\n      color: $--color-text-primary;\n      border-color: $--color-text-primary;\n    }\n\n    @include when(wait) {\n      color: $--color-text-placeholder;\n      border-color: $--color-text-placeholder;\n    }\n\n    @include when(success) {\n      color: $--color-success;\n      border-color: $--color-success;\n    }\n\n    @include when(error) {\n      color: $--color-danger;\n      border-color: $--color-danger;\n    }\n\n    @include when(finish) {\n      color: $--color-primary;\n      border-color: $--color-primary;\n    }\n  }\n\n  @include e(icon) {\n    position: relative;\n    z-index: 1;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    width: 24px;\n    height: 24px;\n    font-size: 14px;\n    box-sizing: border-box;\n    background: $--color-white;\n    transition: .15s ease-out;\n\n    @include when(text) {\n      border-radius: 50%;\n      border: 2px solid;\n      border-color: inherit;\n    }\n\n    @include when(icon) {\n      width: 40px;\n    }\n  }\n\n  @include e(icon-inner) {\n    display: inline-block;\n    user-select: none;\n    text-align: center;\n    font-weight: bold;\n    line-height: 1;\n    color: inherit;\n\n    &[class*=el-icon]:not(.is-status) {\n      font-size: 25px;\n      font-weight: normal;\n    }\n\n    // 组件自身表示状态的图标\n    @include when(status) {\n      transform: translateY(1px);\n    }\n  }\n\n  @include e(line) {\n    position: absolute;\n    border-color: inherit;\n    background-color: $--color-text-placeholder;\n  }\n\n  @include e(line-inner) {\n    display: block;\n    border-width: 1px;\n    border-style: solid;\n    border-color: inherit;\n    transition: .15s ease-out;\n    box-sizing: border-box;\n    width: 0;\n    height: 0;\n  }\n\n  @include e(main) {\n    white-space: normal;\n    text-align: left;\n  }\n\n  @include e(title) {\n    font-size: 16px;\n    line-height: 38px;\n\n    @include when(process) {\n      font-weight: bold;\n      color: $--color-text-primary;\n    }\n\n    @include when(wait) {\n      color: $--color-text-placeholder;\n    }\n\n    @include when(success) {\n      color: $--color-success;\n    }\n\n    @include when(error) {\n      color: $--color-danger;\n    }\n\n    @include when(finish) {\n      color: $--color-primary;\n    }\n  }\n\n  @include e(description) {\n    padding-right: 10%;\n    margin-top: -5px;\n    font-size: 12px;\n    line-height: 20px;\n    font-weight: normal;\n\n    @include when(process) {\n      color: $--color-text-primary;\n    }\n\n    @include when(wait) {\n      color: $--color-text-placeholder;\n    }\n\n    @include when(success) {\n      color: $--color-success;\n    }\n\n    @include when(error) {\n      color: $--color-danger;\n    }\n\n    @include when(finish) {\n      color: $--color-primary;\n    }\n  }\n\n  @include when(horizontal) {\n    display: inline-block;\n\n    @include e(line) {\n      height: 2px;\n      top: 11px;\n      left: 0;\n      right: 0;\n    }\n  }\n\n  @include when(vertical) {\n    display: flex;\n\n    @include e(head) {\n      flex-grow: 0;\n      width: 24px;\n    }\n\n    @include e(main) {\n      padding-left: 10px;\n      flex-grow: 1;\n    }\n\n    @include e(title) {\n      line-height: 24px;\n      padding-bottom: 8px;\n    }\n\n    @include e(line) {\n      width: 2px;\n      top: 0;\n      bottom: 0;\n      left: 11px;\n    }\n\n    @include e(icon) {\n      @include when(icon) {\n        width: 24px;\n      }\n    }\n  }\n\n  @include when(center) {\n\n    @include e(head) {\n      text-align: center;\n    }\n\n    @include e(main) {\n      text-align: center;\n    }\n\n    @include e(description) {\n      padding-left: 20%;\n      padding-right: 20%;\n    }\n\n    @include e(line) {\n      left: 50%;\n      right: -50%;\n    }\n  }\n\n  @include when(simple) {\n    display: flex;\n    align-items: center;\n\n    @include e(head) {\n      width: auto;\n      font-size: 0;\n      padding-right: 10px;\n    }\n\n    @include e(icon) {\n      background: transparent;\n      width: 16px;\n      height: 16px;\n      font-size: 12px;\n    }\n\n    @include e(icon-inner) {\n      &[class*=el-icon]:not(.is-status) {\n        font-size: 18px;\n      }\n\n      &.is-status {\n        transform: scale(.8) translateY(1px);\n      }\n    }\n\n    @include e(main) {\n      position: relative;\n      display: flex;\n      align-items: stretch;\n      flex-grow: 1;\n    }\n\n    @include e(title) {\n      font-size: 16px;\n      line-height: 20px;\n    }\n\n    @include pseudo('not(:last-of-type)') {\n      @include e(title) {\n        max-width: 50%;\n        word-break: break-all;\n      }\n    }\n\n    @include e(arrow) {\n      flex-grow: 1;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      &::before,\n      &::after {\n        content: '';\n        display: inline-block;\n        position: absolute;\n        height: 15px;\n        width: 1px;\n        background: $--color-text-placeholder;\n      }\n\n      &::before {\n        transform: rotate(-45deg) translateY(-4px);\n        transform-origin: 0 0;\n      }\n\n      &::after {\n        transform: rotate(45deg) translateY(4px);\n        transform-origin: 100% 100%;\n      }\n    }\n\n    @include pseudo(last-of-type) {\n      @include e(arrow) {\n        display: none;\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/steps.scss",
    "content": "@import \"mixins/mixins\";\n\n@include b(steps) {\n  display: flex;\n\n  @include m(simple) {\n    padding: 13px 8%;\n    border-radius: 4px;\n    background: $--background-color-base;\n  }\n\n  @include m(horizontal) {\n    white-space: nowrap;\n  }\n\n  @include m(vertical) {\n    height: 100%;\n    flex-flow: column;\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/submenu.scss",
    "content": ""
  },
  {
    "path": "packages/theme-chalk/src/switch.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n\n@include b(switch) {\n  display: inline-flex;\n  align-items: center;\n  position: relative;\n  font-size: $--switch-font-size;\n  line-height: $--switch-height;\n  height: $--switch-height;\n  vertical-align: middle;\n  @include when(disabled) {\n    & .el-switch__core,\n    & .el-switch__label {\n      cursor: not-allowed;\n    }\n  }\n\n  @include e(label) {\n    transition: .2s;\n    height: $--switch-height;\n    display: inline-block;\n    font-size: $--switch-font-size;\n    font-weight: 500;\n    cursor: pointer;\n    vertical-align: middle;\n    color: $--color-text-primary;\n\n    @include when(active) {\n      color: $--color-primary;\n    }\n\n    @include m(left) {\n      margin-right: 10px;\n    }\n    @include m(right) {\n      margin-left: 10px;\n    }\n    & * {\n      line-height: 1;\n      font-size: $--switch-font-size;\n      display: inline-block;\n    }\n  }\n\n  @include e(input) {\n    position: absolute;\n    width: 0;\n    height: 0;\n    opacity: 0;\n    margin: 0;\n  }\n\n  @include e(core) {\n    margin: 0;\n    display: inline-block;\n    position: relative;\n    width: $--switch-width;\n    height: $--switch-height;\n    border: 1px solid $--switch-off-color;\n    outline: none;\n    border-radius: $--switch-core-border-radius;\n    box-sizing: border-box;\n    background: $--switch-off-color;\n    cursor: pointer;\n    transition: border-color .3s, background-color .3s;\n    vertical-align: middle;\n\n    &:after {\n      content: \"\";\n      position: absolute;\n      top: 1px;\n      left: 1px;\n      border-radius: $--border-radius-circle;\n      transition: all .3s;\n      width: $--switch-button-size;\n      height: $--switch-button-size;\n      background-color: $--color-white;\n    }\n  }\n\n  @include when(checked) {\n    .el-switch__core {\n      border-color: $--switch-on-color;\n      background-color: $--switch-on-color;\n      &::after {\n        left: 100%;\n        margin-left: -$--switch-button-size - 1px;\n      }\n    }\n  }\n\n  @include when(disabled) {\n    opacity: 0.6;\n  }\n\n  @include m(wide) {\n    .el-switch__label {\n      &.el-switch__label--left {\n        span {\n          left: 10px;\n        }\n      }\n      &.el-switch__label--right {\n        span {\n          right: 10px;\n        }\n      }\n    }\n  }\n\n  & .label-fade-enter,\n  & .label-fade-leave-active {\n    opacity: 0;\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/tab-pane.scss",
    "content": ""
  },
  {
    "path": "packages/theme-chalk/src/table-column.scss",
    "content": "@import \"mixins/mixins\";\n@import \"checkbox\";\n@import \"tag\";\n@import \"common/var\";\n\n@include b(table-column) {\n  @include m(selection) {\n    .cell {\n      padding-left: 14px;\n      padding-right: 14px;\n    }\n  }\n}\n\n@include b(table-filter) {\n  border: solid 1px $--border-color-lighter;\n  border-radius: 2px;\n  background-color: $--color-white;\n  box-shadow: $--dropdown-menu-box-shadow;\n  box-sizing: border-box;\n  margin: 2px 0;\n\n  /** used for dropdown mode */\n  @include e(list) {\n    padding: 5px 0;\n    margin: 0;\n    list-style: none;\n    min-width: 100px;\n  }\n\n  @include e(list-item) {\n    line-height: 36px;\n    padding: 0 10px;\n    cursor: pointer;\n    font-size: $--font-size-base;\n\n    &:hover {\n      background-color: $--dropdown-menuItem-hover-fill;\n      color: $--dropdown-menuItem-hover-color;\n    }\n\n    @include when(active) {\n      background-color: $--color-primary;\n      color: $--color-white;\n    }\n  }\n\n  @include e(content) {\n    min-width: 100px;\n  }\n\n  @include e(bottom) {\n    border-top: 1px solid $--border-color-lighter;\n    padding: 8px;\n\n    button {\n      background: transparent;\n      border: none;\n      color: $--color-text-regular;\n      cursor: pointer;\n      font-size: $--font-size-small;\n      padding: 0 3px;\n\n      &:hover {\n        color: $--color-primary;\n      }\n\n      &:focus {\n        outline: none;\n      }\n\n      &.is-disabled {\n        color: $--disabled-color-base;\n        cursor: not-allowed;\n      }\n    }\n  }\n\n  @include e(wrap) {\n    max-height: 280px;\n  }\n\n  @include e(checkbox-group) {\n    padding: 10px;\n\n    label.el-checkbox {\n      display: block;\n      margin-right: 5px;\n      margin-bottom: 8px;\n      margin-left: 5px;\n    }\n\n    .el-checkbox:last-child {\n      margin-bottom: 0;\n    }\n  }\n}"
  },
  {
    "path": "packages/theme-chalk/src/table.scss",
    "content": "@import \"mixins/mixins\";\n@import \"checkbox\";\n@import \"tag\";\n@import \"tooltip\";\n@import \"common/var\";\n\n@include b(table) {\n  position: relative;\n  overflow: hidden;\n  box-sizing: border-box;\n  flex: 1;\n  width: 100%;\n  max-width: 100%;\n  background-color: $--color-white;\n  font-size: 14px;\n  color: $--table-font-color;\n\n  // 数据为空\n  @include e(empty-block) {\n    min-height: 60px;\n    text-align: center;\n    width: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  @include e(empty-text) {\n    // min-height doesn't work in IE10 and IE11 https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items\n    // set empty text line height up to contrainer min-height as workaround.\n    line-height: 60px;\n    width: 50%;\n    color: $--color-text-secondary;\n  }\n\n  // 展开行\n  @include e(expand-column) {\n    .cell {\n      padding: 0;\n      text-align: center;\n    }\n  }\n\n  @include e(expand-icon) {\n    position: relative;\n    cursor: pointer;\n    color: #666;\n    font-size: 12px;\n    transition: transform 0.2s ease-in-out;\n    height: 20px;\n\n    @include m(expanded) {\n      transform: rotate(90deg);\n    }\n\n    > .el-icon {\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      margin-left: -5px;\n      margin-top: -5px;\n    }\n  }\n\n  @include e(expanded-cell) {\n    background-color: $--color-white;\n\n    // 纯属为了增加权重\n    &[class*=cell] {\n      padding: 20px 50px;\n    }\n\n    &:hover {\n      background-color: transparent !important;\n    }\n  }\n\n  @include e(placeholder) {\n    display: inline-block;\n    width: 20px;\n  }\n\n  @include e(append-wrapper) {\n    // 避免外边距重合 https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n    overflow: hidden;\n  }\n\n  @include m(fit) {\n    border-right: 0;\n    border-bottom: 0;\n\n    .el-table__cell.gutter {\n      border-right-width: 1px;\n    }\n  }\n\n  @include m(scrollable-x) {\n    .el-table__body-wrapper {\n      overflow-x: auto;\n    }\n  }\n\n  @include m(scrollable-y) {\n    .el-table__body-wrapper {\n      overflow-y: auto;\n    }\n  }\n\n  thead {\n    color: $--table-header-font-color;\n    font-weight: 500;\n\n    &.is-group {\n      th.el-table__cell {\n        background: $--background-color-base;\n      }\n    }\n  }\n\n  .el-table__cell {\n    padding: 12px 0;\n    min-width: 0;\n    box-sizing: border-box;\n    text-overflow: ellipsis;\n    vertical-align: middle;\n    position: relative;\n    text-align: left;\n\n    @include when(center) {\n      text-align: center;\n    }\n\n    @include when(right) {\n      text-align: right;\n    }\n\n    &.gutter {\n      width: 15px;\n      border-right-width: 0;\n      border-bottom-width: 0;\n      padding: 0;\n    }\n\n    &.is-hidden {\n      > * {\n        visibility: hidden;\n      }\n    }\n  }\n\n  @include m(medium) {\n    .el-table__cell {\n      padding: 10px 0;\n    }\n  }\n\n  @include m(small) {\n    font-size: 12px;\n    .el-table__cell {\n      padding: 8px 0;\n    }\n  }\n\n  @include m(mini) {\n    font-size: 12px;\n    .el-table__cell {\n      padding: 6px 0;\n    }\n  }\n\n  tr {\n    background-color: $--color-white;\n\n    input[type=\"checkbox\"] {\n      margin: 0;\n    }\n  }\n\n  th.el-table__cell.is-leaf,\n  td.el-table__cell {\n    border-bottom: $--table-border;\n  }\n\n  th.el-table__cell.is-sortable {\n    cursor: pointer;\n  }\n\n  th.el-table__cell {\n    overflow: hidden;\n    user-select: none;\n    background-color: $--table-header-background-color;\n\n    > .cell {\n      display: inline-block;\n      box-sizing: border-box;\n      position: relative;\n      vertical-align: middle;\n      padding-left: 10px;\n      padding-right: 10px;\n      width: 100%;\n\n      &.highlight {\n        color: $--color-primary;\n      }\n    }\n\n    &.required > div::before {\n      display: inline-block;\n      content: \"\";\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n      background: #ff4d51;\n      margin-right: 5px;\n      vertical-align: middle;\n    }\n  }\n\n  td.el-table__cell {\n    div {\n      box-sizing: border-box;\n    }\n\n    &.gutter {\n      width: 0;\n    }\n  }\n\n  .cell {\n    box-sizing: border-box;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: normal;\n    word-break: break-all;\n    line-height: 23px;\n    padding-left: 10px;\n    padding-right: 10px;\n\n    &.el-tooltip {\n      white-space: nowrap;\n      min-width: 50px;\n    }\n  }\n\n  // 拥有多级表头\n  @include m((group, border)) {\n    border: $--table-border;\n\n    @include share-rule(border-pseudo) {\n      content: '';\n      position: absolute;\n      background-color: $--table-border-color;\n      z-index: 1;\n    }\n\n    // 表格右部伪 border\n    &::after {\n      @include extend-rule(border-pseudo);\n      top: 0;\n      right: 0;\n      width: 1px;\n      height: 100%;\n    }\n  }\n\n  // 表格底部伪 border，总是有的\n  &::before {\n    @include extend-rule(border-pseudo);\n    left: 0;\n    bottom: 0;\n    width: 100%;\n    height: 1px;\n  }\n\n  // table--border\n  @include m(border) {\n    border-right: none;\n    border-bottom: none;\n\n    &.el-loading-parent--relative {\n      border-color: transparent;\n    }\n\n    .el-table__cell {\n      border-right: $--table-border;\n\n      &:first-child .cell {\n        padding-left: 10px;\n      }\n    }\n\n    th.el-table__cell.gutter:last-of-type {\n      border-bottom: $--table-border;\n      border-bottom-width: 1px;\n    }\n\n    & th.el-table__cell {\n      border-bottom: $--table-border;\n    }\n  }\n\n  @include m(hidden) {\n    visibility: hidden;\n  }\n\n  @include e((fixed, fixed-right)) {\n    position: absolute;\n    top: 0;\n    left: 0;\n    overflow-x: hidden;\n    overflow-y: hidden;\n    box-shadow: $--table-fixed-box-shadow;\n\n    &::before {\n      content: '';\n      position: absolute;\n      left: 0;\n      bottom: 0;\n      width: 100%;\n      height: 1px;\n      background-color: $--border-color-lighter;\n      z-index: 4;\n    }\n  }\n\n  @include e(fixed-right-patch) {\n    position: absolute;\n    top: -1px;\n    right: 0;\n    background-color: $--color-white;\n    border-bottom: $--table-border;\n  }\n\n  @include e(fixed-right) {\n    top: 0;\n    left: auto;\n    right: 0;\n\n    .el-table__fixed-header-wrapper,\n    .el-table__fixed-body-wrapper,\n    .el-table__fixed-footer-wrapper {\n      left: auto;\n      right: 0;\n    }\n  }\n\n  @include e(fixed-header-wrapper) {\n    position: absolute;\n    left: 0;\n    top: 0;\n    z-index: 3;\n  }\n\n  @include e(fixed-footer-wrapper) {\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    z-index: 3;\n\n    & tbody td.el-table__cell {\n      border-top: $--table-border;\n      background-color: $--table-row-hover-background-color;\n      color: $--table-font-color;\n    }\n  }\n\n  @include e(fixed-body-wrapper) {\n    position: absolute;\n    left: 0;\n    top: 37px;\n    overflow: hidden;\n    z-index: 3;\n  }\n\n  @include e((header-wrapper, body-wrapper, footer-wrapper)) {\n    width: 100%;\n  }\n\n  @include e(footer-wrapper) {\n    margin-top: -1px;\n    td.el-table__cell {\n      border-top: $--table-border;\n    }\n  }\n\n  @include e((header, body, footer)) {\n    table-layout: fixed;\n    border-collapse: separate;\n  }\n\n  @include e((header-wrapper, footer-wrapper)) {\n    overflow: hidden;\n\n    & tbody td.el-table__cell {\n      background-color: $--table-row-hover-background-color;\n      color: $--table-font-color;\n    }\n  }\n\n  @include e(body-wrapper) {\n    overflow: hidden;\n    position: relative;\n\n    @include when(scrolling-none) {\n      ~ .el-table__fixed,\n      ~ .el-table__fixed-right {\n        box-shadow: none;\n      }\n    }\n\n    @include when(scrolling-left) {\n      ~ .el-table__fixed {\n        box-shadow: none;\n      }\n    }\n\n    @include when(scrolling-right) {\n      ~ .el-table__fixed-right {\n        box-shadow: none;\n      }\n    }\n\n    .el-table--border {\n      @include when(scrolling-right) {\n        ~ .el-table__fixed-right {\n          border-left: $--table-border;\n        }\n      }\n\n      @include when(scrolling-left) {\n        ~ .el-table__fixed {\n          border-right: $--table-border;\n        }\n      }\n    }\n  }\n\n  .caret-wrapper {\n    display: inline-flex;\n    flex-direction: column;\n    align-items: center;\n    height: 34px;\n    width: 24px;\n    vertical-align: middle;\n    cursor: pointer;\n    overflow: initial;\n    position: relative;\n  }\n\n  .sort-caret {\n    width: 0;\n    height: 0;\n    border: solid 5px transparent;\n    position: absolute;\n    left: 7px;\n\n    &.ascending {\n      border-bottom-color: $--color-text-placeholder;\n      top: 5px;\n    }\n\n    &.descending {\n      border-top-color: $--color-text-placeholder;\n      bottom: 7px;\n    }\n  }\n\n  .ascending .sort-caret.ascending {\n    border-bottom-color: $--color-primary;\n  }\n\n  .descending .sort-caret.descending {\n    border-top-color: $--color-primary;\n  }\n\n  .hidden-columns {\n    visibility: hidden;\n    position: absolute;\n    z-index: -1;\n  }\n\n  @include m(striped) {\n    & .el-table__body {\n      & tr.el-table__row--striped {\n        td.el-table__cell {\n          background: #FAFAFA;\n        }\n\n        &.current-row td.el-table__cell, &.selection-row td.el-table__cell {\n          background-color: $--table-current-row-background-color;\n        }\n      }\n    }\n  }\n\n  @include e(body) {\n    tr.hover-row {\n      &, &.el-table__row--striped {\n        &, &.current-row, &.selection-row {\n          > td.el-table__cell {\n            background-color: $--table-row-hover-background-color;\n          }\n        }\n      }\n    }\n\n    tr.current-row > td.el-table__cell, tr.selection-row > td.el-table__cell {\n      background-color: $--table-current-row-background-color;\n    }\n  }\n\n  @include e(column-resize-proxy) {\n    position: absolute;\n    left: 200px;\n    top: 0;\n    bottom: 0;\n    width: 0;\n    border-left: $--table-border;\n    z-index: 10;\n  }\n\n  @include e(column-filter-trigger) {\n    display: inline-block;\n    line-height: 34px;\n    cursor: pointer;\n\n    & i {\n      color: $--color-info;\n      font-size: 12px;\n      transform: scale(.75);\n    }\n  }\n\n  @include m(enable-row-transition) {\n    .el-table__body td.el-table__cell {\n      transition: background-color .25s ease;\n    }\n  }\n\n  @include m(enable-row-hover) {\n    .el-table__body tr:hover > td.el-table__cell {\n      background-color: $--table-row-hover-background-color;\n    }\n  }\n\n  @include m(fluid-height) {\n    .el-table__fixed,\n    .el-table__fixed-right {\n      bottom: 0;\n      overflow: hidden;\n    }\n  }\n\n  [class*=el-table__row--level] {\n    .el-table__expand-icon {\n      display: inline-block;\n      width: 20px;\n      line-height: 20px;\n      height: 20px;\n      text-align: center;\n      margin-right: 3px;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/tabs.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n\n@include b(tabs) {\n  @include e(header) {\n    padding: 0;\n    position: relative;\n    margin: 0 0 15px;\n  }\n  @include e(active-bar) {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    height: 2px;\n    background-color: $--color-primary;\n    z-index: 1;\n    transition: transform .3s cubic-bezier(.645,.045,.355,1);\n    list-style: none;\n  }\n  @include e(new-tab) {\n    float: right;\n    border: 1px solid #d3dce6;\n    height: 18px;\n    width: 18px;\n    line-height: 18px;\n    margin: 12px 0 9px 10px;\n    border-radius: 3px;\n    text-align: center;\n    font-size: 12px;\n    color: #d3dce6;\n    cursor: pointer;\n    transition: all .15s;\n\n    .el-icon-plus {\n      transform: scale(0.8, 0.8);\n    }\n\n    &:hover {\n      color: $--color-primary;\n    }\n  }\n  @include e(nav-wrap) {\n    overflow: hidden;\n    margin-bottom: -1px;\n    position: relative;\n\n    &::after {\n      content: \"\";\n      position: absolute;\n      left: 0;\n      bottom: 0;\n      width: 100%;\n      height: 2px;\n      background-color: $--border-color-light;\n      z-index: $--index-normal;\n    }\n\n    @include when(scrollable) {\n      padding: 0 20px;\n      box-sizing: border-box;\n    }\n  }\n  @include e(nav-scroll) {\n    overflow: hidden;\n  }\n  @include e((nav-next, nav-prev)) {\n    position: absolute;\n    cursor: pointer;\n    line-height: 44px;\n    font-size: 12px;\n    color: $--color-text-secondary;\n  }\n  @include e(nav-next) {\n    right: 0;\n  }\n  @include e(nav-prev) {\n    left: 0;\n  }\n  @include e(nav) {\n    white-space: nowrap;\n    position: relative;\n    transition: transform .3s;\n    float: left;\n    z-index: #{$--index-normal + 1};\n\n    @include when(stretch) {\n      min-width: 100%;\n      display: flex;\n      & > * {\n        flex: 1;\n        text-align: center;\n      }\n    }\n  }\n  @include e(item) {\n    padding: 0 20px;\n    height: 40px;\n    box-sizing: border-box;\n    line-height: 40px;\n    display: inline-block;\n    list-style: none;\n    font-size: 14px;\n    font-weight: 500;\n    color: $--color-text-primary;\n    position: relative;\n\n    &:focus, &:focus:active {\n      outline: none;\n    }\n\n    &:focus.is-active.is-focus:not(:active) {\n      box-shadow: 0 0 2px 2px $--color-primary inset;\n      border-radius: 3px;\n    }\n\n    & .el-icon-close {\n      border-radius: 50%;\n      text-align: center;\n      transition: all .3s cubic-bezier(.645,.045,.355,1);\n      margin-left: 5px;\n      &:before {\n        transform: scale(.9);\n        display: inline-block;\n      }\n\n      &:hover {\n        background-color: $--color-text-placeholder;\n        color: $--color-white;\n      }\n    }\n\n    @include when(active) {\n      color: $--color-primary;\n    }\n\n    &:hover {\n      color: $--color-primary;\n      cursor: pointer;\n    }\n\n    @include when(disabled) {\n      color: $--disabled-color-base;\n      cursor: default;\n    }\n  }\n  @include e(content) {\n    overflow: hidden;\n    position: relative;\n  }\n  @include m(card) {\n    > .el-tabs__header {\n      border-bottom: 1px solid $--border-color-light;\n    }\n    > .el-tabs__header .el-tabs__nav-wrap::after {\n      content: none;\n    }\n    > .el-tabs__header .el-tabs__nav {\n      border: 1px solid $--border-color-light;\n      border-bottom: none;\n      border-radius: 4px 4px 0 0;\n      box-sizing: border-box;\n    }\n    > .el-tabs__header .el-tabs__active-bar {\n      display: none;\n    }\n    > .el-tabs__header .el-tabs__item .el-icon-close {\n      position: relative;\n      font-size: 12px;\n      width: 0;\n      height: 14px;\n      vertical-align: middle;\n      line-height: 15px;\n      overflow: hidden;\n      top: -1px;\n      right: -2px;\n      transform-origin: 100% 50%;\n    }\n    > .el-tabs__header .el-tabs__item {\n      border-bottom: 1px solid transparent;\n      border-left: 1px solid $--border-color-light;\n      transition: color .3s cubic-bezier(.645,.045,.355,1), padding .3s cubic-bezier(.645,.045,.355,1);\n      &:first-child {\n        border-left: none;\n      }\n      &.is-closable {\n        &:hover {\n          padding-left: 13px;\n          padding-right: 13px;\n\n          & .el-icon-close {\n            width: 14px;\n          }\n        }\n      }\n      &.is-active {\n        border-bottom-color: $--color-white;\n\n        &.is-closable {\n          padding-left: 20px;\n          padding-right: 20px;\n\n          .el-icon-close {\n            width: 14px;\n          }\n        }\n      }\n    }\n  }\n  @include m(border-card) {\n    background: $--color-white;\n    border: 1px solid $--border-color-base;\n    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12), 0 0 6px 0 rgba(0,0,0,0.04);\n\n    > .el-tabs__content {\n      padding: 15px;\n    }\n    > .el-tabs__header {\n      background-color: $--background-color-base;\n      border-bottom: 1px solid $--border-color-light;\n      margin: 0;\n    }\n    > .el-tabs__header .el-tabs__nav-wrap::after {\n      content: none;\n    }\n    > .el-tabs__header .el-tabs__item {\n      transition: all .3s cubic-bezier(.645,.045,.355,1);\n      border: 1px solid transparent;\n      margin-top: -1px;\n      color: $--color-text-secondary;\n\n      &:first-child {\n        margin-left: -1px;\n      }\n\n      & + .el-tabs__item {\n        margin-left: -1px;\n      }\n\n      &.is-active {\n        color: $--color-primary;\n        background-color: $--color-white;\n        border-right-color: $--border-color-base;\n        border-left-color: $--border-color-base;\n      }\n      &:not(.is-disabled):hover {\n        color: $--color-primary;\n      }\n      &.is-disabled {\n        color: $--disabled-color-base;\n      }\n    }\n\n    > .el-tabs__header .is-scrollable .el-tabs__item:first-child {\n      margin-left: 0;\n    }\n  }\n  @include m((top, bottom)) {\n    .el-tabs__item.is-top:nth-child(2),\n    .el-tabs__item.is-bottom:nth-child(2) {\n      padding-left: 0;\n    }\n    .el-tabs__item.is-top:last-child,\n    .el-tabs__item.is-bottom:last-child {\n      padding-right: 0;\n    }\n\n    &.el-tabs--border-card, &.el-tabs--card,\n    .el-tabs--left, .el-tabs--right {\n      > .el-tabs__header {\n        .el-tabs__item:nth-child(2) {\n          padding-left: 20px;\n        }\n        .el-tabs__item:last-child {\n          padding-right: 20px;\n        }\n      }\n    }\n  }\n  @include m(bottom) {\n    .el-tabs__header.is-bottom {\n      margin-bottom: 0;\n      margin-top: 10px;\n    }\n    &.el-tabs--border-card {\n      .el-tabs__header.is-bottom {\n        border-bottom: 0;\n        border-top: 1px solid $--border-color-base;\n      }\n      .el-tabs__nav-wrap.is-bottom {\n        margin-top: -1px;\n        margin-bottom: 0;\n      }\n      .el-tabs__item.is-bottom:not(.is-active) {\n        border: 1px solid transparent;\n      }\n      .el-tabs__item.is-bottom {\n        margin: 0 -1px -1px -1px;\n      }\n    }\n  }\n  @include m((left, right)) {\n    overflow: hidden;\n\n    .el-tabs__header.is-left,\n    .el-tabs__header.is-right,\n    .el-tabs__nav-wrap.is-left,\n    .el-tabs__nav-wrap.is-right,\n    .el-tabs__nav-scroll {\n      height: 100%;\n    }\n\n    .el-tabs__active-bar.is-left,\n    .el-tabs__active-bar.is-right {\n      top: 0;\n      bottom: auto;\n      width: 2px;\n      height: auto;\n    }\n\n    .el-tabs__nav-wrap.is-left,\n    .el-tabs__nav-wrap.is-right {\n      margin-bottom: 0;\n\n      > .el-tabs__nav-prev,\n      > .el-tabs__nav-next {\n        height: 30px;\n        line-height: 30px;\n        width: 100%;\n        text-align: center;\n        cursor: pointer;\n\n        i {\n          transform: rotateZ(90deg);\n        }\n      }\n      > .el-tabs__nav-prev {\n        left: auto;\n        top: 0;\n      }\n      > .el-tabs__nav-next {\n        right: auto;\n        bottom: 0;\n      }\n\n      &.is-scrollable {\n        padding: 30px 0;\n      }\n\n      &::after {\n        height: 100%;\n        width: 2px;\n        bottom: auto;\n        top: 0;\n      }\n    }\n\n    .el-tabs__nav.is-left,\n    .el-tabs__nav.is-right {\n      float: none;\n    }\n    .el-tabs__item.is-left,\n    .el-tabs__item.is-right {\n      display: block;\n    }\n  }\n  @include m(left) {\n    .el-tabs__header.is-left {\n      float: left;\n      margin-bottom: 0;\n      margin-right: 10px;\n    }\n    .el-tabs__nav-wrap.is-left {\n      margin-right: -1px;\n      &::after {\n        left: auto;\n        right: 0;\n      }\n    }\n    .el-tabs__active-bar.is-left {\n      right: 0;\n      left: auto;\n    }\n    .el-tabs__item.is-left {\n      text-align: right;\n    }\n\n    &.el-tabs--card {\n      .el-tabs__active-bar.is-left {\n        display: none;\n      }\n      .el-tabs__item.is-left {\n        border-left: none;\n        border-right: 1px solid $--border-color-light;\n        border-bottom: none;\n        border-top: 1px solid $--border-color-light;\n        text-align: left;\n      }\n      .el-tabs__item.is-left:first-child {\n        border-right: 1px solid $--border-color-light;\n        border-top: none;\n      }\n      .el-tabs__item.is-left.is-active {\n        border: 1px solid $--border-color-light;\n        border-right-color: #fff;\n        border-left: none;\n        border-bottom: none;\n\n        &:first-child {\n          border-top: none;\n        }\n        &:last-child {\n          border-bottom: none;\n        }\n      }\n\n      .el-tabs__nav {\n        border-radius: 4px 0 0 4px;\n        border-bottom: 1px solid $--border-color-light;\n        border-right: none;\n      }\n\n      .el-tabs__new-tab {\n        float: none;\n      }\n    }\n\n    &.el-tabs--border-card {\n      .el-tabs__header.is-left {\n        border-right: 1px solid #dfe4ed;\n      }\n      .el-tabs__item.is-left {\n        border: 1px solid transparent;\n        margin: -1px 0 -1px -1px;\n\n        &.is-active {\n          border-color: transparent;\n          border-top-color: rgb(209, 219, 229);\n          border-bottom-color: rgb(209, 219, 229);\n        }\n      }\n    }\n  }\n  @include m(right) {\n    .el-tabs__header.is-right {\n      float: right;\n      margin-bottom: 0;\n      margin-left: 10px;\n    }\n\n    .el-tabs__nav-wrap.is-right {\n      margin-left: -1px;\n      &::after {\n        left: 0;\n        right: auto;\n      }\n    }\n\n    .el-tabs__active-bar.is-right {\n      left: 0;\n    }\n\n    &.el-tabs--card {\n      .el-tabs__active-bar.is-right {\n        display: none;\n      }\n      .el-tabs__item.is-right {\n        border-bottom: none;\n        border-top: 1px solid $--border-color-light;\n      }\n      .el-tabs__item.is-right:first-child {\n        border-left: 1px solid $--border-color-light;\n        border-top: none;\n      }\n      .el-tabs__item.is-right.is-active {\n        border: 1px solid $--border-color-light;\n        border-left-color: #fff;\n        border-right: none;\n        border-bottom: none;\n\n        &:first-child {\n          border-top: none;\n        }\n        &:last-child {\n          border-bottom: none;\n        }\n      }\n\n      .el-tabs__nav {\n        border-radius: 0 4px 4px 0;\n        border-bottom: 1px solid $--border-color-light;\n        border-left: none;\n      }\n    }\n    &.el-tabs--border-card {\n      .el-tabs__header.is-right {\n        border-left: 1px solid #dfe4ed;\n      }\n      .el-tabs__item.is-right {\n        border: 1px solid transparent;\n        margin: -1px -1px -1px 0;\n\n        &.is-active {\n          border-color: transparent;\n          border-top-color: rgb(209, 219, 229);\n          border-bottom-color: rgb(209, 219, 229);\n        }\n      }\n    }\n  }\n}\n\n.slideInRight-transition,\n.slideInLeft-transition {\n  display: inline-block;\n}\n.slideInRight-enter {\n  animation: slideInRight-enter .3s;\n}\n.slideInRight-leave {\n  position: absolute;\n  left: 0;\n  right: 0;\n  animation: slideInRight-leave .3s;\n}\n.slideInLeft-enter {\n  animation: slideInLeft-enter .3s;\n}\n.slideInLeft-leave {\n  position: absolute;\n  left: 0;\n  right: 0;\n  animation: slideInLeft-leave .3s;\n}\n\n@keyframes slideInRight-enter {\n  0% {\n    opacity: 0;\n    -webkit-transform-origin: 0 0;\n    transform-origin: 0 0;\n    -webkit-transform: translateX(100%);\n    transform: translateX(100%)\n  }\n\n  to {\n    opacity: 1;\n    -webkit-transform-origin: 0 0;\n    transform-origin: 0 0;\n    -webkit-transform: translateX(0);\n    transform: translateX(0)\n  }\n}\n@keyframes slideInRight-leave {\n  0% {\n    -webkit-transform-origin: 0 0;\n    transform-origin: 0 0;\n    -webkit-transform: translateX(0);\n    transform: translateX(0);\n    opacity: 1\n  }\n\n  100% {\n    -webkit-transform-origin: 0 0;\n    transform-origin: 0 0;\n    -webkit-transform: translateX(100%);\n    transform: translateX(100%);\n    opacity: 0\n  }\n}\n@keyframes slideInLeft-enter {\n  0% {\n    opacity: 0;\n    -webkit-transform-origin: 0 0;\n    transform-origin: 0 0;\n    -webkit-transform: translateX(-100%);\n    transform: translateX(-100%)\n  }\n\n  to {\n    opacity: 1;\n    -webkit-transform-origin: 0 0;\n    transform-origin: 0 0;\n    -webkit-transform: translateX(0);\n    transform: translateX(0)\n  }\n}\n@keyframes slideInLeft-leave {\n  0% {\n    -webkit-transform-origin: 0 0;\n    transform-origin: 0 0;\n    -webkit-transform: translateX(0);\n    transform: translateX(0);\n    opacity: 1\n  }\n\n  100% {\n    -webkit-transform-origin: 0 0;\n    transform-origin: 0 0;\n    -webkit-transform: translateX(-100%);\n    transform: translateX(-100%);\n    opacity: 0\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/tag.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n\n@mixin genTheme($backgroundColorWeight, $borderColorWeight, $fontColorWeight, $hoverColorWeight) {\n  background-color: mix($--tag-primary-color, $--color-white, $backgroundColorWeight);\n  border-color: mix($--tag-primary-color, $--color-white, $borderColorWeight);\n  color: mix($--tag-primary-color, $--color-white, $fontColorWeight);\n\n  @include when(hit) {\n    border-color: $--tag-primary-color;\n  }\n\n  .el-tag__close {\n    color: mix($--tag-primary-color, $--color-white, $fontColorWeight);\n    &:hover {\n      color: $--color-white;\n      background-color: mix($--tag-primary-color, $--color-white, $hoverColorWeight);\n    }\n  }\n\n  &.el-tag--info {\n    background-color: mix($--tag-info-color, $--color-white, $backgroundColorWeight);\n    border-color: mix($--tag-info-color, $--color-white, $borderColorWeight);\n    color: mix($--tag-info-color, $--color-white, $fontColorWeight);\n\n    @include when(hit) {\n      border-color: $--tag-info-color;\n    }\n\n    .el-tag__close {\n      color: mix($--tag-info-color, $--color-white, $fontColorWeight);\n      &:hover {\n        color: $--color-white;\n        background-color: mix($--tag-info-color, $--color-white, $hoverColorWeight);\n      }\n    }\n  }\n\n  &.el-tag--success {\n    background-color: mix($--tag-success-color, $--color-white, $backgroundColorWeight);\n    border-color: mix($--tag-success-color, $--color-white, $borderColorWeight);\n    color: mix($--tag-success-color, $--color-white, $fontColorWeight);\n\n    @include when(hit) {\n      border-color: $--tag-success-color;\n    }\n\n    .el-tag__close {\n      color: mix($--tag-success-color, $--color-white, $fontColorWeight);\n      &:hover {\n        color: $--color-white;\n        background-color: mix($--tag-success-color, $--color-white, $hoverColorWeight);\n      }\n    }\n  }\n\n  &.el-tag--warning {\n    background-color: mix($--tag-warning-color, $--color-white, $backgroundColorWeight);\n    border-color: mix($--tag-warning-color, $--color-white, $borderColorWeight);\n    color: mix($--tag-warning-color, $--color-white, $fontColorWeight);\n\n    @include when(hit) {\n      border-color: $--tag-warning-color;\n    }\n\n    .el-tag__close {\n      color: mix($--tag-warning-color, $--color-white, $fontColorWeight);\n      &:hover {\n        color: $--color-white;\n        background-color: mix($--tag-warning-color, $--color-white, $hoverColorWeight);\n      }\n    }\n  }\n\n  &.el-tag--danger {\n    background-color: mix($--tag-danger-color, $--color-white, $backgroundColorWeight);\n    border-color: mix($--tag-danger-color, $--color-white, $borderColorWeight);\n    color: mix($--tag-danger-color, $--color-white, $fontColorWeight);\n\n    @include when(hit) {\n      border-color: $--tag-danger-color;\n    }\n\n    .el-tag__close {\n      color: mix($--tag-danger-color, $--color-white, $fontColorWeight);\n      &:hover {\n        color: $--color-white;\n        background-color: mix($--tag-danger-color, $--color-white, $hoverColorWeight);\n      }\n    }\n  }\n}\n\n@include b(tag) {\n  @include genTheme(10%, 20%, 100%, 100%);\n  display: inline-block;\n  height: 32px;\n  padding: $--tag-padding;\n  line-height: 30px;\n  font-size: $--tag-font-size;\n  color: $--tag-primary-color;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: $--tag-border-radius;\n  box-sizing: border-box;\n  white-space: nowrap;\n\n  .el-icon-close {\n    border-radius: 50%;\n    text-align: center;\n    position: relative;\n    cursor: pointer;\n    font-size: 12px;\n    height: 16px;\n    width: 16px;\n    line-height: 16px;\n    vertical-align: middle;\n    top: -1px;\n    right: -5px;\n\n    &::before {\n      display: block;\n    }\n  }\n\n  @include m(dark) {\n    @include genTheme(100%, 100%, 0, 80%);\n  }\n\n  @include m(plain) {\n    @include genTheme(0, 40%, 100%, 100%);\n  }\n\n  @include m(medium) {\n    height: 28px;\n    line-height: 26px;\n\n    .el-icon-close {\n      transform: scale(.8);\n    }\n  }\n\n  @include m(small) {\n    height: 24px;\n    padding: 0 8px;\n    line-height: 22px;\n\n    .el-icon-close {\n      transform: scale(.8);\n    }\n  }\n\n  @include m(mini) {\n    height: 20px;\n    padding: 0 5px;\n    line-height: 19px;\n\n    .el-icon-close {\n      margin-left: -3px;\n      transform: scale(.7);\n    }\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/time-picker.scss",
    "content": "@import \"./date-picker/picker.scss\";\n@import \"./date-picker/picker-panel.scss\";\n@import \"./date-picker/time-spinner.scss\";\n@import \"./date-picker/time-picker.scss\";\n@import \"./date-picker/time-range-picker.scss\";\n@import \"./input.scss\";\n@import \"./scrollbar.scss\";\n@import \"./popper\";\n"
  },
  {
    "path": "packages/theme-chalk/src/time-select.scss",
    "content": "@import \"common/var\";\n@import \"./date-picker/picker.scss\";\n@import \"./date-picker/date-picker.scss\";\n@import \"./scrollbar.scss\";\n@import \"./popper\";\n\n.time-select {\n  margin: 5px 0;\n  min-width: 0;\n}\n\n.time-select .el-picker-panel__content {\n  max-height: 200px;\n  margin: 0;\n}\n\n.time-select-item {\n  padding: 8px 10px;\n  font-size: 14px;\n  line-height: 20px;\n}\n\n.time-select-item.selected:not(.disabled) {\n  color: $--color-primary;\n  font-weight: bold;\n}\n\n.time-select-item.disabled {\n  color: $--datepicker-border-color;\n  cursor: not-allowed;\n}\n\n.time-select-item:hover {\n  background-color: $--background-color-base;\n  font-weight: bold;\n  cursor: pointer;\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/timeline-item.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n\n@include b(timeline-item) {\n  position: relative;\n  padding-bottom: 20px;\n\n  @include e(wrapper) {\n    position: relative;\n    padding-left: 28px;\n    top: -3px;\n  }\n\n  @include e(tail) {\n    position: absolute;\n    left: 4px;\n    height: 100%;\n    border-left: 2px solid $--timeline-node-color;\n  }\n\n  @include e(icon) {\n    color: $--color-white;\n    font-size: $--font-size-small;\n  }\n\n  @include e(node) {\n    position: absolute;\n    background-color: $--timeline-node-color;\n    border-radius: 50%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    @include m(normal) {\n      left: -1px;\n      width: $--timeline-node-size-normal;\n      height: $--timeline-node-size-normal;\n    }\n    @include m(large) {\n      left: -2px;\n      width: $--timeline-node-size-large;\n      height: $--timeline-node-size-large;\n    }\n\n    @include m(primary) {\n      background-color: $--color-primary;\n    }\n    @include m(success) {\n      background-color: $--color-success;\n    }\n    @include m(warning) {\n      background-color: $--color-warning;\n    }\n    @include m(danger) {\n      background-color: $--color-danger;\n    }\n    @include m(info) {\n      background-color: $--color-info;\n    }\n  }\n\n  @include e(dot) {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  @include e(content) {\n    color: $--color-text-primary;\n  }\n\n  @include e(timestamp) {\n    color: $--color-text-secondary;\n    line-height: 1;\n    font-size: $--font-size-small;\n\n    @include when(top) {\n      margin-bottom: 8px;\n      padding-top: 4px;\n    }\n    @include when(bottom) {\n      margin-top: 8px;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/timeline.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n\n@include b(timeline) {\n  margin: 0;\n  font-size: $--font-size-base;\n  list-style: none;\n\n  & .el-timeline-item:last-child {\n    & .el-timeline-item__tail {\n      display: none;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/tooltip.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n\n@include b(tooltip) {\n  &:focus:not(.focusing), &:focus:hover {\n    outline-width: 0;\n  }\n  @include e(popper) {\n    position: absolute;\n    border-radius: 4px;\n    padding: $--tooltip-padding;\n    z-index: $--index-popper;\n    font-size: $--tooltip-font-size;\n    line-height: 1.2;\n    min-width: 10px;\n    word-wrap: break-word;\n\n    .popper__arrow,\n    .popper__arrow::after {\n      position: absolute;\n      display: block;\n      width: 0;\n      height: 0;\n      border-color: transparent;\n      border-style: solid;\n    }\n\n    .popper__arrow {\n      border-width: $--tooltip-arrow-size;\n    }\n\n    .popper__arrow::after {\n      content: \" \";\n      border-width: 5px;\n    }\n\n    &[x-placement^=\"top\"] {\n      margin-bottom: #{$--tooltip-arrow-size + 6px};\n    }\n\n    &[x-placement^=\"top\"] .popper__arrow {\n      bottom: -$--tooltip-arrow-size;\n      border-top-color: $--tooltip-border-color;\n      border-bottom-width: 0;\n\n      &::after {\n        bottom: 1px;\n        margin-left: -5px;\n        border-top-color: $--tooltip-fill;\n        border-bottom-width: 0;\n      }\n    }\n\n    &[x-placement^=\"bottom\"] {\n      margin-top: #{$--tooltip-arrow-size + 6px};\n    }\n\n    &[x-placement^=\"bottom\"] .popper__arrow {\n      top: -$--tooltip-arrow-size;\n      border-top-width: 0;\n      border-bottom-color: $--tooltip-border-color;\n\n      &::after {\n        top: 1px;\n        margin-left: -5px;\n        border-top-width: 0;\n        border-bottom-color: $--tooltip-fill;\n      }\n    }\n\n    &[x-placement^=\"right\"] {\n      margin-left: #{$--tooltip-arrow-size + 6px};\n    }\n\n    &[x-placement^=\"right\"] .popper__arrow {\n      left: -$--tooltip-arrow-size;\n      border-right-color: $--tooltip-border-color;\n      border-left-width: 0;\n\n      &::after {\n        bottom: -5px;\n        left: 1px;\n        border-right-color: $--tooltip-fill;\n        border-left-width: 0;\n      }\n    }\n\n    &[x-placement^=\"left\"] {\n      margin-right: #{$--tooltip-arrow-size + 6px};\n    }\n\n    &[x-placement^=\"left\"] .popper__arrow {\n      right: -$--tooltip-arrow-size;\n      border-right-width: 0;\n      border-left-color: $--tooltip-border-color;\n\n      &::after {\n        right: 1px;\n        bottom: -5px;\n        margin-left: -5px;\n        border-right-width: 0;\n        border-left-color: $--tooltip-fill;\n      }\n    }\n\n    @include when(dark) {\n      background: $--tooltip-fill;\n      color: $--tooltip-color;\n    }\n\n    @include when(light) {\n      background: $--tooltip-color;\n      border: 1px solid $--tooltip-fill;\n\n      &[x-placement^=\"top\"] .popper__arrow {\n        border-top-color: $--tooltip-fill;\n        &::after {\n          border-top-color: $--tooltip-color;\n        }\n      }\n      &[x-placement^=\"bottom\"] .popper__arrow {\n        border-bottom-color: $--tooltip-fill;\n        &::after {\n          border-bottom-color: $--tooltip-color;\n        }\n      }\n      &[x-placement^=\"left\"] .popper__arrow {\n        border-left-color: $--tooltip-fill;\n        &::after {\n          border-left-color: $--tooltip-color;\n        }\n      }\n      &[x-placement^=\"right\"] .popper__arrow {\n        border-right-color: $--tooltip-fill;\n        &::after {\n          border-right-color: $--tooltip-color;\n        }\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/transfer.scss",
    "content": "@import \"mixins/mixins\";\n@import \"mixins/utils\";\n@import \"common/var\";\n@import \"input\";\n@import \"button\";\n@import \"checkbox\";\n@import \"checkbox-group\";\n\n@include b(transfer) {\n  font-size: $--font-size-base;\n\n  @include e(buttons) {\n    display: inline-block;\n    vertical-align: middle;\n    padding: 0 30px;\n  }\n\n  @include e(button) {\n    display: block;\n    margin: 0 auto;\n    padding: 10px;\n    border-radius: 50%;\n    color: $--color-white;\n    background-color: $--color-primary;\n    font-size: 0;\n\n    @include when(with-texts) {\n      border-radius: $--border-radius-base;\n    }\n\n    @include when(disabled) {\n      border: $--border-base;\n      background-color: $--background-color-base;\n      color: $--color-text-placeholder;\n\n      &:hover {\n        border: $--border-base;\n        background-color: $--background-color-base;\n        color: $--color-text-placeholder;\n      }\n    }\n\n    &:first-child {\n      margin-bottom: 10px;\n    }\n\n    &:nth-child(2) {\n      margin: 0;\n    }\n\n    i, span {\n      font-size: 14px;\n    }\n\n    & [class*=\"el-icon-\"] + span {\n      margin-left: 0;\n    }\n  }\n}\n\n@include b(transfer-panel) {\n  border: 1px solid $--transfer-border-color;\n  border-radius: $--transfer-border-radius;\n  overflow: hidden;\n  background: $--color-white;\n  display: inline-block;\n  vertical-align: middle;\n  width: $--transfer-panel-width;\n  max-height: 100%;\n  box-sizing: border-box;\n  position: relative;\n\n  @include e(body) {\n    height: $--transfer-panel-body-height;\n\n    @include when(with-footer) {\n      padding-bottom: $--transfer-panel-footer-height;\n    }\n  }\n\n  @include e(list) {\n    margin: 0;\n    padding: 6px 0;\n    list-style: none;\n    height: $--transfer-panel-body-height;\n    overflow: auto;\n    box-sizing: border-box;\n\n    @include when(filterable) {\n      height: #{$--transfer-panel-body-height - $--transfer-filter-height - 20px};\n      padding-top: 0;\n    }\n  }\n\n  @include e(item) {\n    height: $--transfer-item-height;\n    line-height: $--transfer-item-height;\n    padding-left: 15px;\n    display: block !important;\n\n    & + .el-transfer-panel__item {\n      margin-left: 0;\n    }\n\n    &.el-checkbox {\n      color: $--color-text-regular;\n    }\n\n    &:hover {\n      color: $--color-primary;\n    }\n\n    &.el-checkbox .el-checkbox__label {\n      width: 100%;\n      @include utils-ellipsis;\n      display: block;\n      box-sizing: border-box;\n      padding-left: 24px;\n      line-height: $--transfer-item-height;\n    }\n\n    .el-checkbox__input {\n      position: absolute;\n      top: 8px;\n    }\n  }\n\n  @include e(filter) {\n    text-align: center;\n    margin: 15px;\n    box-sizing: border-box;\n    display: block;\n    width: auto;\n\n    .el-input__inner {\n      height: $--transfer-filter-height;\n      width: 100%;\n      font-size: 12px;\n      display: inline-block;\n      box-sizing: border-box;\n      border-radius: #{$--transfer-filter-height / 2};\n      padding-right: 10px;\n      padding-left: 30px;\n    }\n\n    .el-input__icon {\n      margin-left: 5px;\n    }\n\n    .el-icon-circle-close {\n      cursor: pointer;\n    }\n  }\n\n  .el-transfer-panel__header {\n    height: $--transfer-panel-header-height;\n    line-height: $--transfer-panel-header-height;\n    background: $--transfer-panel-header-background-color;\n    margin: 0;\n    padding-left: 15px;\n    border-bottom: 1px solid $--transfer-border-color;\n    box-sizing: border-box;\n    color: $--color-black;\n\n    .el-checkbox {\n      display: block;\n      line-height: 40px;\n\n      .el-checkbox__label {\n        font-size: 16px;\n        color: $--color-text-primary;\n        font-weight: normal;\n\n        span {\n          position: absolute;\n          right: 15px;\n          color: $--color-text-secondary;\n          font-size: 12px;\n          font-weight: normal;\n        }\n      }\n    }\n  }\n\n  .el-transfer-panel__footer {\n    height: $--transfer-panel-footer-height;\n    background: $--color-white;\n    margin: 0;\n    padding: 0;\n    border-top: 1px solid $--transfer-border-color;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    z-index: $--index-normal;\n    @include utils-vertical-center;\n\n    .el-checkbox {\n      padding-left: 20px;\n      color: $--color-text-regular;\n    }\n  }\n\n  .el-transfer-panel__empty {\n    margin: 0;\n    height: $--transfer-item-height;\n    line-height: $--transfer-item-height;\n    padding: 6px 15px 0;\n    color: $--color-text-secondary;\n    text-align: center;\n  }\n\n  .el-checkbox__label {\n    padding-left: 8px;\n  }\n\n  .el-checkbox__inner {\n    height: 14px;\n    width: 14px;\n    border-radius: 3px;\n    &::after {\n      height: 6px;\n      width: 3px;\n      left: 4px;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/tree.scss",
    "content": "@import \"mixins/mixins\";\n@import \"common/var\";\n@import \"common/transition\";\n@import \"checkbox\";\n\n@include b(tree) {\n  position: relative;\n  cursor: default;\n  background: $--color-white;\n  color: $--tree-font-color;\n\n  @include e(empty-block) {\n    position: relative;\n    min-height: 60px;\n    text-align: center;\n    width: 100%;\n    height: 100%;\n  }\n\n  @include e(empty-text) {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    color: $--color-text-secondary;\n    font-size: $--font-size-base;\n  }\n\n  @include e(drop-indicator) {\n    position: absolute;\n    left: 0;\n    right: 0;\n    height: 1px;\n    background-color: $--color-primary;\n  }\n}\n\n@include b(tree-node) {\n  white-space: nowrap;\n  outline: none;\n  &:focus { /* focus */\n    > .el-tree-node__content {\n      background-color: $--tree-node-hover-background-color;\n    }\n  }\n\n  @include when(drop-inner) {\n    > .el-tree-node__content .el-tree-node__label {\n      background-color: $--color-primary;\n      color: #fff;\n    }\n  }\n\n  @include e(content) {\n    display: flex;\n    align-items: center;\n    height: 26px;\n    cursor: pointer;\n\n    & > .el-tree-node__expand-icon {\n      padding: 6px;\n    }\n    & > label.el-checkbox {\n      margin-right: 8px;\n    }\n    &:hover {\n      background-color: $--tree-node-hover-background-color;\n    }\n\n    .el-tree.is-dragging & {\n      cursor: move;\n\n      & * {\n        pointer-events: none;\n      }\n    }\n\n    .el-tree.is-dragging.is-drop-not-allow & {\n      cursor: not-allowed;\n    }\n  }\n\n  @include e(expand-icon) {\n    cursor: pointer;\n    color: $--tree-expand-icon-color;\n    font-size: 12px;\n\n    transform: rotate(0deg);\n    transition: transform 0.3s ease-in-out;\n\n    &.expanded {\n      transform: rotate(90deg);\n    }\n\n    &.is-leaf {\n      color: transparent;\n      cursor: default;\n    }\n  }\n\n  @include e(label) {\n    font-size: $--font-size-base;\n  }\n\n  @include e(loading-icon) {\n    margin-right: 8px;\n    font-size: $--font-size-base;\n    color: $--tree-expand-icon-color;\n  }\n\n  & > .el-tree-node__children {\n    overflow: hidden;\n    background-color: transparent;\n  }\n\n  &.is-expanded > .el-tree-node__children {\n    display: block;\n  }\n}\n\n.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {\n  background-color: mix($--color-white, $--color-primary, 92%);\n}\n"
  },
  {
    "path": "packages/theme-chalk/src/upload.scss",
    "content": "@import \"mixins/mixins\";\n@import \"progress\";\n@import \"common/var\";\n\n@include b(upload) {\n  display: inline-block;\n  text-align: center;\n  cursor: pointer;\n  outline: none;\n  @include e(input) {\n    display: none;\n  }\n\n  @include e(tip) {\n    font-size: 12px;\n    color: $--color-text-regular;\n    margin-top: 7px;\n  }\n\n  iframe {\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    opacity: 0;\n    filter: alpha(opacity=0);\n  }\n\n  /* 照片墙模式 */\n  @include m(picture-card) {\n    background-color: #fbfdff;\n    border: 1px dashed #c0ccda;\n    border-radius: 6px;\n    box-sizing: border-box;\n    width: 148px;\n    height: 148px;\n    cursor: pointer;\n    line-height: 146px;\n    vertical-align: top;\n\n    i {\n      font-size: 28px;\n      color: #8c939d;\n    }\n\n    &:hover {\n      border-color: $--color-primary;\n      color: $--color-primary;\n    }\n  }\n  &:focus {\n    border-color: $--color-primary;\n    color: $--color-primary;\n\n    .el-upload-dragger {\n      border-color: $--color-primary;\n    }\n  }\n}\n\n@include b(upload-dragger) {\n  background-color: #fff;\n  border: 1px dashed #d9d9d9;\n  border-radius: 6px;\n  box-sizing: border-box;\n  width: 360px;\n  height: 180px;\n  text-align: center;\n  cursor: pointer;\n  position: relative;\n  overflow: hidden;\n\n  .el-icon-upload {\n    font-size: 67px;\n    color: $--color-text-placeholder;\n    margin: 40px 0 16px;\n    line-height: 50px;\n  }\n\n  + .el-upload__tip {\n    text-align: center;\n  }\n\n  ~ .el-upload__files {\n    border-top: $--border-base;\n    margin-top: 7px;\n    padding-top: 5px;\n  }\n\n  .el-upload__text {\n    color: $--color-text-regular;\n    font-size: 14px;\n    text-align: center;\n\n    em {\n      color: $--color-primary;\n      font-style: normal;\n    }\n  }\n\n  &:hover {\n    border-color: $--color-primary;\n  }\n\n  @include when(dragover) {\n    background-color: rgba(32, 159, 255, .06);\n    border: 2px dashed $--color-primary;\n  }\n}\n\n@include b(upload-list) {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n\n  @include e(item) {\n    transition: all .5s cubic-bezier(.55,0,.1,1);\n    font-size: 14px;\n    color: $--color-text-regular;\n    line-height: 1.8;\n    margin-top: 5px;\n    position: relative;\n    box-sizing: border-box;\n    border-radius: 4px;\n    width: 100%;\n\n    .el-progress {\n      position: absolute;\n      top: 20px;\n      width: 100%;\n    }\n\n    .el-progress__text {\n      position: absolute;\n      right: 0;\n      top: -13px;\n    }\n\n    .el-progress-bar {\n      margin-right: 0;\n      padding-right: 0;\n    }\n\n    &:first-child {\n      margin-top: 10px;\n    }\n\n    & .el-icon-upload-success {\n      color: $--color-success;\n    }\n\n    .el-icon-close {\n      display: none;\n      position: absolute;\n      top: 5px;\n      right: 5px;\n      cursor: pointer;\n      opacity: .75;\n      color: $--color-text-regular;\n      //transform: scale(.7);\n\n      &:hover {\n        opacity: 1;\n      }\n    }\n\n    & .el-icon-close-tip {\n      display: none;\n      position: absolute;\n      top: 5px;\n      right: 5px;\n      font-size: 12px;\n      cursor: pointer;\n      opacity: 1;\n      color: $--color-primary;\n    }\n    \n    &:hover {\n      background-color: $--background-color-base;\n\n      .el-icon-close {\n        display: inline-block;\n      }\n\n      .el-progress__text {\n        display: none;\n      }\n    }\n\n    @include when(success) {\n      .el-upload-list__item-status-label {\n        display: block;\n      }\n\n      .el-upload-list__item-name:hover, .el-upload-list__item-name:focus {\n        color: $--link-hover-color;\n        cursor: pointer;\n      }\n\n      &:focus:not(:hover) {  /* 键盘focus */\n        .el-icon-close-tip {\n          display: inline-block;\n        }\n      }\n\n      &:not(.focusing):focus, &:active { /* click时 */\n        outline-width: 0;\n        .el-icon-close-tip {\n          display: none;\n        }\n      }\n\n      &:hover, &:focus {\n        .el-upload-list__item-status-label {\n          display: none;\n        }\n      }\n    }\n  }\n\n  @include when(disabled) {\n    .el-upload-list__item:hover .el-upload-list__item-status-label {\n      display: block;\n    }\n  }\n\n  @include e(item-name) {\n    color: $--color-text-regular;\n    display: block;\n    margin-right: 40px;\n    overflow: hidden;\n    padding-left: 4px;\n    text-overflow: ellipsis;\n    transition: color .3s;\n    white-space: nowrap;\n\n    [class^=\"el-icon\"] {\n      height: 100%;\n      margin-right: 7px;\n      color: $--color-text-secondary;\n      line-height: inherit;\n    }\n  }\n\n  @include e(item-status-label) {\n    position: absolute;\n    right: 5px;\n    top: 0;\n    line-height: inherit;\n    display: none;\n  }\n\n  @include e(item-delete) {\n    position: absolute;\n    right: 10px;\n    top: 0;\n    font-size: 12px;\n    color: $--color-text-regular;\n    display: none;\n\n    &:hover {\n      color: $--color-primary;\n    }\n  }\n\n  @include m(picture-card) {\n    margin: 0;\n    display: inline;\n    vertical-align: top;\n\n    .el-upload-list__item {\n      overflow: hidden;\n      background-color: #fff;\n      border: 1px solid #c0ccda;\n      border-radius: 6px;\n      box-sizing: border-box;\n      width: 148px;\n      height: 148px;\n      margin: 0 8px 8px 0;\n      display: inline-block;\n\n      .el-icon-check,\n      .el-icon-circle-check {\n        color: $--color-white;\n      }\n\n      .el-icon-close {\n        display: none;\n      }\n      &:hover {\n        .el-upload-list__item-status-label {\n          display: none;\n        }\n\n        .el-progress__text {\n          display: block;\n        }\n      }\n    }\n\n    .el-upload-list__item-name {\n      display: none;\n    }\n\n    .el-upload-list__item-thumbnail {\n      width: 100%;\n      height: 100%;\n    }\n\n    .el-upload-list__item-status-label {\n      position: absolute;\n      right: -15px;\n      top: -6px;\n      width: 40px;\n      height: 24px;\n      background: #13ce66;\n      text-align: center;\n      transform: rotate(45deg);\n      box-shadow: 0 0 1pc 1px rgba(0,0,0,0.2);\n\n      i {\n        font-size: 12px;\n        margin-top: 11px;\n        transform: rotate(-45deg);\n      }\n    }\n\n    .el-upload-list__item-actions {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      left: 0;\n      top: 0;\n      cursor: default;\n      text-align: center;\n      color: #fff;\n      opacity: 0;\n      font-size: 20px;\n      background-color: rgba(0, 0, 0, .5);\n      transition: opacity .3s;\n      &::after {\n        display: inline-block;\n        content: \"\";\n        height: 100%;\n        vertical-align: middle\n      }\n\n      span {\n        display: none;\n        cursor: pointer;\n      }\n\n      span + span {\n        margin-left: 15px;\n      }\n\n      .el-upload-list__item-delete {\n        position: static;\n        font-size: inherit;\n        color: inherit;\n      }\n\n      &:hover {\n        opacity: 1;\n        span {\n          display: inline-block;\n        }\n      }\n    }\n\n    .el-progress {\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      bottom: auto;\n      width: 126px;\n\n      .el-progress__text {\n        top: 50%;\n      }\n    }\n  }\n\n  @include m(picture) {\n    .el-upload-list__item {\n      overflow: hidden;\n      z-index: 0;\n      background-color: #fff;\n      border: 1px solid #c0ccda;\n      border-radius: 6px;\n      box-sizing: border-box;\n      margin-top: 10px;\n      padding: 10px 10px 10px 90px;\n      height: 92px;\n\n      .el-icon-check,\n      .el-icon-circle-check {\n        color: $--color-white;\n      }\n\n      &:hover {\n        .el-upload-list__item-status-label {\n          background: transparent;\n          box-shadow: none;\n          top: -2px;\n          right: -12px;\n        }\n\n        .el-progress__text {\n          display: block;\n        }\n      }\n\n      &.is-success {\n        .el-upload-list__item-name {\n          line-height: 70px;\n          margin-top: 0;\n          i {\n            display: none;\n          }\n        }\n      }\n    }\n\n    .el-upload-list__item-thumbnail {\n      vertical-align: middle;\n      display: inline-block;\n      width: 70px;\n      height: 70px;\n      float: left;\n      position: relative;\n      z-index: 1;\n      margin-left: -80px;\n      background-color: $--color-white\n    }\n\n    .el-upload-list__item-name {\n      display: block;\n      margin-top: 20px;\n\n      i {\n        font-size: 70px;\n        line-height: 1;\n        position: absolute;\n        left: 9px;\n        top: 10px;\n      }\n    }\n\n    .el-upload-list__item-status-label {\n      position: absolute;\n      right: -17px;\n      top: -7px;\n      width: 46px;\n      height: 26px;\n      background: #13ce66;\n      text-align: center;\n      transform: rotate(45deg);\n      box-shadow: 0 1px 1px #ccc;\n\n      i {\n        font-size: 12px;\n        margin-top: 12px;\n        transform: rotate(-45deg);\n      }\n    }\n\n    .el-progress {\n      position: relative;\n      top: -7px;\n    }\n  }\n}\n\n@include b(upload-cover) {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  z-index: 10;\n  cursor: default;\n  @include utils-vertical-center;\n\n  img {\n    display: block;\n    width: 100%;\n    height: 100%;\n  }\n\n  @include e(label) {\n    position: absolute;\n    right: -15px;\n    top: -6px;\n    width: 40px;\n    height: 24px;\n    background: #13ce66;\n    text-align: center;\n    transform: rotate(45deg);\n    box-shadow: 0 0 1pc 1px rgba(0,0,0,0.2);\n\n    i {\n      font-size: 12px;\n      margin-top: 11px;\n      transform: rotate(-45deg);\n      color: #fff;\n    }\n  }\n\n  @include e(progress) {\n    display: inline-block;\n    vertical-align: middle;\n    position: static;\n    width: 243px;\n\n    + .el-upload__inner {\n      opacity: 0;\n    }\n  }\n\n  @include e(content) {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  @include e(interact) {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(#000, .72);\n    text-align: center;\n\n    .btn {\n      display: inline-block;\n      color: $--color-white;\n      font-size: 14px;\n      cursor: pointer;\n      vertical-align: middle;\n      transition: $--md-fade-transition;\n      margin-top: 60px;\n\n      i {\n        margin-top: 0;\n      }\n\n      span {\n        opacity: 0;\n        transition: opacity .15s linear;\n      }\n\n      &:not(:first-child) {\n        margin-left: 35px;\n      }\n\n      &:hover {\n        transform: translateY(-13px);\n\n        span {\n          opacity: 1;\n        }\n      }\n\n      i {\n        color: $--color-white;\n        display: block;\n        font-size: 24px;\n        line-height: inherit;\n        margin: 0 auto 5px;\n      }\n    }\n  }\n\n  @include e(title) {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    background-color: $--color-white;\n    height: 36px;\n    width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    font-weight: normal;\n    text-align: left;\n    padding: 0 10px;\n    margin: 0;\n    line-height: 36px;\n    font-size: 14px;\n    color: $--color-text-primary;\n  }\n\n  + .el-upload__inner {\n    opacity: 0;\n    position: relative;\n    z-index: 1;\n  }\n}\n"
  },
  {
    "path": "packages/time-picker/index.js",
    "content": "import TimePicker from '../date-picker/src/picker/time-picker';\n\n/* istanbul ignore next */\nTimePicker.install = function(Vue) {\n  Vue.component(TimePicker.name, TimePicker);\n};\n\nexport default TimePicker;\n"
  },
  {
    "path": "packages/time-select/index.js",
    "content": "import TimeSelect from '../date-picker/src/picker/time-select';\n\n/* istanbul ignore next */\nTimeSelect.install = function(Vue) {\n  Vue.component(TimeSelect.name, TimeSelect);\n};\n\nexport default TimeSelect;\n"
  },
  {
    "path": "packages/timeline/index.js",
    "content": "import Timeline from './src/main';\n\n/* istanbul ignore next */\nTimeline.install = function(Vue) {\n  Vue.component(Timeline.name, Timeline);\n};\n\nexport default Timeline;\n"
  },
  {
    "path": "packages/timeline/src/item.vue",
    "content": "<template>\n  <li class=\"el-timeline-item\">\n    <div class=\"el-timeline-item__tail\"></div>\n\n    <div v-if=\"!$slots.dot\"\n      class=\"el-timeline-item__node\"\n      :class=\"[\n        `el-timeline-item__node--${size || ''}`,\n        `el-timeline-item__node--${type || ''}`\n      ]\"\n      :style=\"{\n        backgroundColor: color\n      }\"\n    >\n      <i v-if=\"icon\"\n        class=\"el-timeline-item__icon\"\n        :class=\"icon\"\n      ></i>\n    </div>\n    <div v-if=\"$slots.dot\" class=\"el-timeline-item__dot\">\n      <slot name=\"dot\"></slot>\n    </div>\n\n    <div class=\"el-timeline-item__wrapper\">\n      <div v-if=\"!hideTimestamp && placement === 'top'\"\n        class=\"el-timeline-item__timestamp is-top\">\n        {{timestamp}}\n      </div>\n\n      <div class=\"el-timeline-item__content\">\n        <slot></slot>\n      </div>\n\n      <div v-if=\"!hideTimestamp && placement === 'bottom'\"\n        class=\"el-timeline-item__timestamp is-bottom\">\n        {{timestamp}}\n      </div>\n    </div>\n  </li>\n</template>\n\n<script>\n  export default {\n    name: 'ElTimelineItem',\n\n    inject: ['timeline'],\n\n    props: {\n      timestamp: String,\n\n      hideTimestamp: {\n        type: Boolean,\n        default: false\n      },\n\n      placement: {\n        type: String,\n        default: 'bottom'\n      },\n\n      type: String,\n\n      color: String,\n\n      size: {\n        type: String,\n        default: 'normal'\n      },\n\n      icon: String\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/timeline/src/main.vue",
    "content": "<script>\n  export default {\n    name: 'ElTimeline',\n\n    props: {\n      reverse: {\n        type: Boolean,\n        default: false\n      }\n    },\n\n    provide() {\n      return {\n        timeline: this\n      };\n    },\n\n    render() {\n      const reverse = this.reverse;\n      const classes = {\n        'el-timeline': true,\n        'is-reverse': reverse\n      };\n      let slots = this.$slots.default || [];\n      if (reverse) {\n        slots = slots.reverse();\n      }\n      return (<ul class={ classes }>\n        { slots }\n      </ul>);\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/timeline-item/index.js",
    "content": "import ElTimelineItem from '../timeline/src/item';\n\n/* istanbul ignore next */\nElTimelineItem.install = function(Vue) {\n  Vue.component(ElTimelineItem.name, ElTimelineItem);\n};\n\nexport default ElTimelineItem;\n"
  },
  {
    "path": "packages/tooltip/index.js",
    "content": "import Tooltip from './src/main';\n\n/* istanbul ignore next */\nTooltip.install = function(Vue) {\n  Vue.component(Tooltip.name, Tooltip);\n};\n\nexport default Tooltip;\n"
  },
  {
    "path": "packages/tooltip/src/main.js",
    "content": "import Popper from 'element-ui/src/utils/vue-popper';\nimport debounce from 'throttle-debounce/debounce';\nimport { addClass, removeClass, on, off } from 'element-ui/src/utils/dom';\nimport { generateId } from 'element-ui/src/utils/util';\nimport Vue from 'vue';\n\nexport default {\n  name: 'ElTooltip',\n\n  mixins: [Popper],\n\n  props: {\n    openDelay: {\n      type: Number,\n      default: 0\n    },\n    disabled: Boolean,\n    manual: Boolean,\n    effect: {\n      type: String,\n      default: 'dark'\n    },\n    arrowOffset: {\n      type: Number,\n      default: 0\n    },\n    popperClass: String,\n    content: String,\n    visibleArrow: {\n      default: true\n    },\n    transition: {\n      type: String,\n      default: 'el-fade-in-linear'\n    },\n    popperOptions: {\n      default() {\n        return {\n          boundariesPadding: 10,\n          gpuAcceleration: false\n        };\n      }\n    },\n    enterable: {\n      type: Boolean,\n      default: true\n    },\n    hideAfter: {\n      type: Number,\n      default: 0\n    },\n    tabindex: {\n      type: Number,\n      default: 0\n    }\n  },\n\n  data() {\n    return {\n      tooltipId: `el-tooltip-${generateId()}`,\n      timeoutPending: null,\n      focusing: false\n    };\n  },\n  beforeCreate() {\n    if (this.$isServer) return;\n\n    this.popperVM = new Vue({\n      data: { node: '' },\n      render(h) {\n        return this.node;\n      }\n    }).$mount();\n\n    this.debounceClose = debounce(200, () => this.handleClosePopper());\n  },\n\n  render(h) {\n    if (this.popperVM) {\n      this.popperVM.node = (\n        <transition\n          name={ this.transition }\n          onAfterLeave={ this.doDestroy }>\n          <div\n            onMouseleave={ () => { this.setExpectedState(false); this.debounceClose(); } }\n            onMouseenter= { () => { this.setExpectedState(true); } }\n            ref=\"popper\"\n            role=\"tooltip\"\n            id={this.tooltipId}\n            aria-hidden={ (this.disabled || !this.showPopper) ? 'true' : 'false' }\n            v-show={!this.disabled && this.showPopper}\n            class={\n              ['el-tooltip__popper', 'is-' + this.effect, this.popperClass]\n            }>\n            { this.$slots.content || this.content }\n          </div>\n        </transition>);\n    }\n\n    const firstElement = this.getFirstElement();\n    if (!firstElement) return null;\n\n    const data = firstElement.data = firstElement.data || {};\n    data.staticClass = this.addTooltipClass(data.staticClass);\n\n    return firstElement;\n  },\n\n  mounted() {\n    this.referenceElm = this.$el;\n    if (this.$el.nodeType === 1) {\n      this.$el.setAttribute('aria-describedby', this.tooltipId);\n      this.$el.setAttribute('tabindex', this.tabindex);\n      on(this.referenceElm, 'mouseenter', this.show);\n      on(this.referenceElm, 'mouseleave', this.hide);\n      on(this.referenceElm, 'focus', () => {\n        if (!this.$slots.default || !this.$slots.default.length) {\n          this.handleFocus();\n          return;\n        }\n        const instance = this.$slots.default[0].componentInstance;\n        if (instance && instance.focus) {\n          instance.focus();\n        } else {\n          this.handleFocus();\n        }\n      });\n      on(this.referenceElm, 'blur', this.handleBlur);\n      on(this.referenceElm, 'click', this.removeFocusing);\n    }\n    // fix issue https://github.com/ElemeFE/element/issues/14424\n    if (this.value && this.popperVM) {\n      this.popperVM.$nextTick(() => {\n        if (this.value) {\n          this.updatePopper();\n        }\n      });\n    }\n  },\n  watch: {\n    focusing(val) {\n      if (val) {\n        addClass(this.referenceElm, 'focusing');\n      } else {\n        removeClass(this.referenceElm, 'focusing');\n      }\n    }\n  },\n  methods: {\n    show() {\n      this.setExpectedState(true);\n      this.handleShowPopper();\n    },\n\n    hide() {\n      this.setExpectedState(false);\n      this.debounceClose();\n    },\n    handleFocus() {\n      this.focusing = true;\n      this.show();\n    },\n    handleBlur() {\n      this.focusing = false;\n      this.hide();\n    },\n    removeFocusing() {\n      this.focusing = false;\n    },\n\n    addTooltipClass(prev) {\n      if (!prev) {\n        return 'el-tooltip';\n      } else {\n        return 'el-tooltip ' + prev.replace('el-tooltip', '');\n      }\n    },\n\n    handleShowPopper() {\n      if (!this.expectedState || this.manual) return;\n      clearTimeout(this.timeout);\n      this.timeout = setTimeout(() => {\n        this.showPopper = true;\n      }, this.openDelay);\n\n      if (this.hideAfter > 0) {\n        this.timeoutPending = setTimeout(() => {\n          this.showPopper = false;\n        }, this.hideAfter);\n      }\n    },\n\n    handleClosePopper() {\n      if (this.enterable && this.expectedState || this.manual) return;\n      clearTimeout(this.timeout);\n\n      if (this.timeoutPending) {\n        clearTimeout(this.timeoutPending);\n      }\n      this.showPopper = false;\n\n      if (this.disabled) {\n        this.doDestroy();\n      }\n    },\n\n    setExpectedState(expectedState) {\n      if (expectedState === false) {\n        clearTimeout(this.timeoutPending);\n      }\n      this.expectedState = expectedState;\n    },\n\n    getFirstElement() {\n      const slots = this.$slots.default;\n      if (!Array.isArray(slots)) return null;\n      let element = null;\n      for (let index = 0; index < slots.length; index++) {\n        if (slots[index] && slots[index].tag) {\n          element = slots[index];\n          break;\n        };\n      }\n      return element;\n    }\n  },\n\n  beforeDestroy() {\n    this.popperVM && this.popperVM.$destroy();\n  },\n\n  destroyed() {\n    const reference = this.referenceElm;\n    if (reference.nodeType === 1) {\n      off(reference, 'mouseenter', this.show);\n      off(reference, 'mouseleave', this.hide);\n      off(reference, 'focus', this.handleFocus);\n      off(reference, 'blur', this.handleBlur);\n      off(reference, 'click', this.removeFocusing);\n    }\n  }\n};\n"
  },
  {
    "path": "packages/transfer/index.js",
    "content": "import Transfer from './src/main';\n\n/* istanbul ignore next */\nTransfer.install = function(Vue) {\n  Vue.component(Transfer.name, Transfer);\n};\n\nexport default Transfer;\n"
  },
  {
    "path": "packages/transfer/src/main.vue",
    "content": "<template>\n  <div class=\"el-transfer\">\n    <transfer-panel\n      v-bind=\"$props\"\n      ref=\"leftPanel\"\n      :data=\"sourceData\"\n      :title=\"titles[0] || t('el.transfer.titles.0')\"\n      :default-checked=\"leftDefaultChecked\"\n      :placeholder=\"filterPlaceholder || t('el.transfer.filterPlaceholder')\"\n      @checked-change=\"onSourceCheckedChange\">\n      <slot name=\"left-footer\"></slot>\n    </transfer-panel>\n    <div class=\"el-transfer__buttons\">\n      <el-button\n        type=\"primary\"\n        :class=\"['el-transfer__button', hasButtonTexts ? 'is-with-texts' : '']\"\n        @click.native=\"addToLeft\"\n        :disabled=\"rightChecked.length === 0\">\n        <i class=\"el-icon-arrow-left\"></i>\n        <span v-if=\"buttonTexts[0] !== undefined\">{{ buttonTexts[0] }}</span>\n      </el-button>\n      <el-button\n        type=\"primary\"\n        :class=\"['el-transfer__button', hasButtonTexts ? 'is-with-texts' : '']\"\n        @click.native=\"addToRight\"\n        :disabled=\"leftChecked.length === 0\">\n        <span v-if=\"buttonTexts[1] !== undefined\">{{ buttonTexts[1] }}</span>\n        <i class=\"el-icon-arrow-right\"></i>\n      </el-button>\n    </div>\n    <transfer-panel\n      v-bind=\"$props\"\n      ref=\"rightPanel\"\n      :data=\"targetData\"\n      :title=\"titles[1] || t('el.transfer.titles.1')\"\n      :default-checked=\"rightDefaultChecked\"\n      :placeholder=\"filterPlaceholder || t('el.transfer.filterPlaceholder')\"\n      @checked-change=\"onTargetCheckedChange\">\n      <slot name=\"right-footer\"></slot>\n    </transfer-panel>\n  </div>\n</template>\n\n<script>\n  import ElButton from 'element-ui/packages/button';\n  import Emitter from 'element-ui/src/mixins/emitter';\n  import Locale from 'element-ui/src/mixins/locale';\n  import TransferPanel from './transfer-panel.vue';\n  import Migrating from 'element-ui/src/mixins/migrating';\n\n  export default {\n    name: 'ElTransfer',\n\n    mixins: [Emitter, Locale, Migrating],\n\n    components: {\n      TransferPanel,\n      ElButton\n    },\n\n    props: {\n      data: {\n        type: Array,\n        default() {\n          return [];\n        }\n      },\n      titles: {\n        type: Array,\n        default() {\n          return [];\n        }\n      },\n      buttonTexts: {\n        type: Array,\n        default() {\n          return [];\n        }\n      },\n      filterPlaceholder: {\n        type: String,\n        default: ''\n      },\n      filterMethod: Function,\n      leftDefaultChecked: {\n        type: Array,\n        default() {\n          return [];\n        }\n      },\n      rightDefaultChecked: {\n        type: Array,\n        default() {\n          return [];\n        }\n      },\n      renderContent: Function,\n      value: {\n        type: Array,\n        default() {\n          return [];\n        }\n      },\n      format: {\n        type: Object,\n        default() {\n          return {};\n        }\n      },\n      filterable: Boolean,\n      props: {\n        type: Object,\n        default() {\n          return {\n            label: 'label',\n            key: 'key',\n            disabled: 'disabled'\n          };\n        }\n      },\n      targetOrder: {\n        type: String,\n        default: 'original'\n      }\n    },\n\n    data() {\n      return {\n        leftChecked: [],\n        rightChecked: []\n      };\n    },\n\n    computed: {\n      dataObj() {\n        const key = this.props.key;\n        return this.data.reduce((o, cur) => (o[cur[key]] = cur) && o, {});\n      },\n  \n      sourceData() {\n        return this.data.filter(item => this.value.indexOf(item[this.props.key]) === -1);\n      },\n\n      targetData() {\n        if (this.targetOrder === 'original') {\n          return this.data.filter(item => this.value.indexOf(item[this.props.key]) > -1);\n        } else {\n          return this.value.reduce((arr, cur) => {\n            const val = this.dataObj[cur];\n            if (val) {\n              arr.push(val);\n            }\n            return arr;\n          }, []);\n        }\n      },\n\n      hasButtonTexts() {\n        return this.buttonTexts.length === 2;\n      }\n    },\n\n    watch: {\n      value(val) {\n        this.dispatch('ElFormItem', 'el.form.change', val);\n      }\n    },\n\n    methods: {\n      getMigratingConfig() {\n        return {\n          props: {\n            'footer-format': 'footer-format is renamed to format.'\n          }\n        };\n      },\n\n      onSourceCheckedChange(val, movedKeys) {\n        this.leftChecked = val;\n        if (movedKeys === undefined) return;\n        this.$emit('left-check-change', val, movedKeys);\n      },\n\n      onTargetCheckedChange(val, movedKeys) {\n        this.rightChecked = val;\n        if (movedKeys === undefined) return;\n        this.$emit('right-check-change', val, movedKeys);\n      },\n\n      addToLeft() {\n        let currentValue = this.value.slice();\n        this.rightChecked.forEach(item => {\n          const index = currentValue.indexOf(item);\n          if (index > -1) {\n            currentValue.splice(index, 1);\n          }\n        });\n        this.$emit('input', currentValue);\n        this.$emit('change', currentValue, 'left', this.rightChecked);\n      },\n\n      addToRight() {\n        let currentValue = this.value.slice();\n        const itemsToBeMoved = [];\n        const key = this.props.key;\n        this.data.forEach(item => {\n          const itemKey = item[key];\n          if (\n            this.leftChecked.indexOf(itemKey) > -1 &&\n            this.value.indexOf(itemKey) === -1\n          ) {\n            itemsToBeMoved.push(itemKey);\n          }\n        });\n        currentValue = this.targetOrder === 'unshift'\n          ? itemsToBeMoved.concat(currentValue)\n          : currentValue.concat(itemsToBeMoved);\n        this.$emit('input', currentValue);\n        this.$emit('change', currentValue, 'right', this.leftChecked);\n      },\n\n      clearQuery(which) {\n        if (which === 'left') {\n          this.$refs.leftPanel.query = '';\n        } else if (which === 'right') {\n          this.$refs.rightPanel.query = '';\n        }\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/transfer/src/transfer-panel.vue",
    "content": "<template>\n  <div class=\"el-transfer-panel\">\n    <p class=\"el-transfer-panel__header\">\n      <el-checkbox\n        v-model=\"allChecked\"\n        @change=\"handleAllCheckedChange\"\n        :indeterminate=\"isIndeterminate\">\n        {{ title }}\n        <span>{{ checkedSummary }}</span>\n      </el-checkbox>\n    </p>\n    \n    <div :class=\"['el-transfer-panel__body', hasFooter ? 'is-with-footer' : '']\">\n      <el-input\n        class=\"el-transfer-panel__filter\"\n        v-model=\"query\"\n        size=\"small\"\n        :placeholder=\"placeholder\"\n        @mouseenter.native=\"inputHover = true\"\n        @mouseleave.native=\"inputHover = false\"\n        v-if=\"filterable\">\n        <i slot=\"prefix\"\n          :class=\"['el-input__icon', 'el-icon-' + inputIcon]\"\n          @click=\"clearQuery\"\n        ></i>\n      </el-input>\n      <el-checkbox-group\n        v-model=\"checked\"\n        v-show=\"!hasNoMatch && data.length > 0\"\n        :class=\"{ 'is-filterable': filterable }\"\n        class=\"el-transfer-panel__list\">\n        <el-checkbox\n          class=\"el-transfer-panel__item\"\n          :label=\"item[keyProp]\"\n          :disabled=\"item[disabledProp]\"\n          :key=\"item[keyProp]\"\n          v-for=\"item in filteredData\">\n          <option-content :option=\"item\"></option-content>\n        </el-checkbox>\n      </el-checkbox-group>\n      <p\n        class=\"el-transfer-panel__empty\"\n        v-show=\"hasNoMatch\">{{ t('el.transfer.noMatch') }}</p>\n      <p\n        class=\"el-transfer-panel__empty\"\n        v-show=\"data.length === 0 && !hasNoMatch\">{{ t('el.transfer.noData') }}</p>\n    </div>\n    <p class=\"el-transfer-panel__footer\" v-if=\"hasFooter\">\n      <slot></slot>\n    </p>\n  </div>\n</template>\n\n<script>\n  import ElCheckboxGroup from 'element-ui/packages/checkbox-group';\n  import ElCheckbox from 'element-ui/packages/checkbox';\n  import ElInput from 'element-ui/packages/input';\n  import Locale from 'element-ui/src/mixins/locale';\n\n  export default {\n    mixins: [Locale],\n\n    name: 'ElTransferPanel',\n\n    componentName: 'ElTransferPanel',\n\n    components: {\n      ElCheckboxGroup,\n      ElCheckbox,\n      ElInput,\n      OptionContent: {\n        props: {\n          option: Object\n        },\n        render(h) {\n          const getParent = vm => {\n            if (vm.$options.componentName === 'ElTransferPanel') {\n              return vm;\n            } else if (vm.$parent) {\n              return getParent(vm.$parent);\n            } else {\n              return vm;\n            }\n          };\n          const panel = getParent(this);\n          const transfer = panel.$parent || panel;\n          return panel.renderContent\n            ? panel.renderContent(h, this.option)\n            : transfer.$scopedSlots.default\n              ? transfer.$scopedSlots.default({ option: this.option })\n              : <span>{ this.option[panel.labelProp] || this.option[panel.keyProp] }</span>;\n        }\n      }\n    },\n\n    props: {\n      data: {\n        type: Array,\n        default() {\n          return [];\n        }\n      },\n      renderContent: Function,\n      placeholder: String,\n      title: String,\n      filterable: Boolean,\n      format: Object,\n      filterMethod: Function,\n      defaultChecked: Array,\n      props: Object\n    },\n\n    data() {\n      return {\n        checked: [],\n        allChecked: false,\n        query: '',\n        inputHover: false,\n        checkChangeByUser: true\n      };\n    },\n\n    watch: {\n      checked(val, oldVal) {\n        this.updateAllChecked();\n        if (this.checkChangeByUser) {\n          const movedKeys = val.concat(oldVal)\n            .filter(v => val.indexOf(v) === -1 || oldVal.indexOf(v) === -1);\n          this.$emit('checked-change', val, movedKeys);\n        } else {\n          this.$emit('checked-change', val);\n          this.checkChangeByUser = true;\n        }\n      },\n\n      data() {\n        const checked = [];\n        const filteredDataKeys = this.filteredData.map(item => item[this.keyProp]);\n        this.checked.forEach(item => {\n          if (filteredDataKeys.indexOf(item) > -1) {\n            checked.push(item);\n          }\n        });\n        this.checkChangeByUser = false;\n        this.checked = checked;\n      },\n\n      checkableData() {\n        this.updateAllChecked();\n      },\n\n      defaultChecked: {\n        immediate: true,\n        handler(val, oldVal) {\n          if (oldVal && val.length === oldVal.length &&\n            val.every(item => oldVal.indexOf(item) > -1)) return;\n          const checked = [];\n          const checkableDataKeys = this.checkableData.map(item => item[this.keyProp]);\n          val.forEach(item => {\n            if (checkableDataKeys.indexOf(item) > -1) {\n              checked.push(item);\n            }\n          });\n          this.checkChangeByUser = false;\n          this.checked = checked;\n        }\n      }\n    },\n\n    computed: {\n      filteredData() {\n        return this.data.filter(item => {\n          if (typeof this.filterMethod === 'function') {\n            return this.filterMethod(this.query, item);\n          } else {\n            const label = item[this.labelProp] || item[this.keyProp].toString();\n            return label.toLowerCase().indexOf(this.query.toLowerCase()) > -1;\n          }\n        });\n      },\n\n      checkableData() {\n        return this.filteredData.filter(item => !item[this.disabledProp]);\n      },\n\n      checkedSummary() {\n        const checkedLength = this.checked.length;\n        const dataLength = this.data.length;\n        const { noChecked, hasChecked } = this.format;\n        if (noChecked && hasChecked) {\n          return checkedLength > 0\n            ? hasChecked.replace(/\\${checked}/g, checkedLength).replace(/\\${total}/g, dataLength)\n            : noChecked.replace(/\\${total}/g, dataLength);\n        } else {\n          return `${ checkedLength }/${ dataLength }`;\n        }\n      },\n\n      isIndeterminate() {\n        const checkedLength = this.checked.length;\n        return checkedLength > 0 && checkedLength < this.checkableData.length;\n      },\n\n      hasNoMatch() {\n        return this.query.length > 0 && this.filteredData.length === 0;\n      },\n\n      inputIcon() {\n        return this.query.length > 0 && this.inputHover\n          ? 'circle-close'\n          : 'search';\n      },\n\n      labelProp() {\n        return this.props.label || 'label';\n      },\n\n      keyProp() {\n        return this.props.key || 'key';\n      },\n\n      disabledProp() {\n        return this.props.disabled || 'disabled';\n      },\n\n      hasFooter() {\n        return !!this.$slots.default;\n      }\n    },\n\n    methods: {\n      updateAllChecked() {\n        const checkableDataKeys = this.checkableData.map(item => item[this.keyProp]);\n        this.allChecked = checkableDataKeys.length > 0 &&\n          checkableDataKeys.every(item => this.checked.indexOf(item) > -1);\n      },\n\n      handleAllCheckedChange(value) {\n        this.checked = value\n          ? this.checkableData.map(item => item[this.keyProp])\n          : [];\n      },\n\n      clearQuery() {\n        if (this.inputIcon === 'circle-close') {\n          this.query = '';\n        }\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/tree/index.js",
    "content": "import Tree from './src/tree.vue';\n\n/* istanbul ignore next */\nTree.install = function(Vue) {\n  Vue.component(Tree.name, Tree);\n};\n\nexport default Tree;\n"
  },
  {
    "path": "packages/tree/src/model/node.js",
    "content": "import objectAssign from 'element-ui/src/utils/merge';\nimport { markNodeData, NODE_KEY } from './util';\nimport { arrayFindIndex } from 'element-ui/src/utils/util';\n\nexport const getChildState = node => {\n  let all = true;\n  let none = true;\n  let allWithoutDisable = true;\n  for (let i = 0, j = node.length; i < j; i++) {\n    const n = node[i];\n    if (n.checked !== true || n.indeterminate) {\n      all = false;\n      if (!n.disabled) {\n        allWithoutDisable = false;\n      }\n    }\n    if (n.checked !== false || n.indeterminate) {\n      none = false;\n    }\n  }\n\n  return { all, none, allWithoutDisable, half: !all && !none };\n};\n\nconst reInitChecked = function(node) {\n  if (node.childNodes.length === 0 || node.loading) return;\n\n  const {all, none, half} = getChildState(node.childNodes);\n  if (all) {\n    node.checked = true;\n    node.indeterminate = false;\n  } else if (half) {\n    node.checked = false;\n    node.indeterminate = true;\n  } else if (none) {\n    node.checked = false;\n    node.indeterminate = false;\n  }\n\n  const parent = node.parent;\n  if (!parent || parent.level === 0) return;\n\n  if (!node.store.checkStrictly) {\n    reInitChecked(parent);\n  }\n};\n\nconst getPropertyFromData = function(node, prop) {\n  const props = node.store.props;\n  const data = node.data || {};\n  const config = props[prop];\n\n  if (typeof config === 'function') {\n    return config(data, node);\n  } else if (typeof config === 'string') {\n    return data[config];\n  } else if (typeof config === 'undefined') {\n    const dataProp = data[prop];\n    return dataProp === undefined ? '' : dataProp;\n  }\n};\n\nlet nodeIdSeed = 0;\n\nexport default class Node {\n  constructor(options) {\n    this.id = nodeIdSeed++;\n    this.text = null;\n    this.checked = false;\n    this.indeterminate = false;\n    this.data = null;\n    this.expanded = false;\n    this.parent = null;\n    this.visible = true;\n    this.isCurrent = false;\n\n    for (let name in options) {\n      if (options.hasOwnProperty(name)) {\n        this[name] = options[name];\n      }\n    }\n\n    // internal\n    this.level = 0;\n    this.loaded = false;\n    this.childNodes = [];\n    this.loading = false;\n\n    if (this.parent) {\n      this.level = this.parent.level + 1;\n    }\n\n    const store = this.store;\n    if (!store) {\n      throw new Error('[Node]store is required!');\n    }\n    store.registerNode(this);\n\n    const props = store.props;\n    if (props && typeof props.isLeaf !== 'undefined') {\n      const isLeaf = getPropertyFromData(this, 'isLeaf');\n      if (typeof isLeaf === 'boolean') {\n        this.isLeafByUser = isLeaf;\n      }\n    }\n\n    if (store.lazy !== true && this.data) {\n      this.setData(this.data);\n\n      if (store.defaultExpandAll) {\n        this.expanded = true;\n      }\n    } else if (this.level > 0 && store.lazy && store.defaultExpandAll) {\n      this.expand();\n    }\n    if (!Array.isArray(this.data)) {\n      markNodeData(this, this.data);\n    }\n    if (!this.data) return;\n    const defaultExpandedKeys = store.defaultExpandedKeys;\n    const key = store.key;\n    if (key && defaultExpandedKeys && defaultExpandedKeys.indexOf(this.key) !== -1) {\n      this.expand(null, store.autoExpandParent);\n    }\n\n    if (key && store.currentNodeKey !== undefined && this.key === store.currentNodeKey) {\n      store.currentNode = this;\n      store.currentNode.isCurrent = true;\n    }\n\n    if (store.lazy) {\n      store._initDefaultCheckedNode(this);\n    }\n\n    this.updateLeafState();\n  }\n\n  setData(data) {\n    if (!Array.isArray(data)) {\n      markNodeData(this, data);\n    }\n\n    this.data = data;\n    this.childNodes = [];\n\n    let children;\n    if (this.level === 0 && this.data instanceof Array) {\n      children = this.data;\n    } else {\n      children = getPropertyFromData(this, 'children') || [];\n    }\n\n    for (let i = 0, j = children.length; i < j; i++) {\n      this.insertChild({ data: children[i] });\n    }\n  }\n\n  get label() {\n    return getPropertyFromData(this, 'label');\n  }\n\n  get key() {\n    const nodeKey = this.store.key;\n    if (this.data) return this.data[nodeKey];\n    return null;\n  }\n\n  get disabled() {\n    return getPropertyFromData(this, 'disabled');\n  }\n\n  get nextSibling() {\n    const parent = this.parent;\n    if (parent) {\n      const index = parent.childNodes.indexOf(this);\n      if (index > -1) {\n        return parent.childNodes[index + 1];\n      }\n    }\n    return null;\n  }\n\n  get previousSibling() {\n    const parent = this.parent;\n    if (parent) {\n      const index = parent.childNodes.indexOf(this);\n      if (index > -1) {\n        return index > 0 ? parent.childNodes[index - 1] : null;\n      }\n    }\n    return null;\n  }\n\n  contains(target, deep = true) {\n    const walk = function(parent) {\n      const children = parent.childNodes || [];\n      let result = false;\n      for (let i = 0, j = children.length; i < j; i++) {\n        const child = children[i];\n        if (child === target || (deep && walk(child))) {\n          result = true;\n          break;\n        }\n      }\n      return result;\n    };\n\n    return walk(this);\n  }\n\n  remove() {\n    const parent = this.parent;\n    if (parent) {\n      parent.removeChild(this);\n    }\n  }\n\n  insertChild(child, index, batch) {\n    if (!child) throw new Error('insertChild error: child is required.');\n\n    if (!(child instanceof Node)) {\n      if (!batch) {\n        const children = this.getChildren(true) || [];\n        if (children.indexOf(child.data) === -1) {\n          if (typeof index === 'undefined' || index < 0) {\n            children.push(child.data);\n          } else {\n            children.splice(index, 0, child.data);\n          }\n        }\n      }\n      objectAssign(child, {\n        parent: this,\n        store: this.store\n      });\n      child = new Node(child);\n    }\n\n    child.level = this.level + 1;\n\n    if (typeof index === 'undefined' || index < 0) {\n      this.childNodes.push(child);\n    } else {\n      this.childNodes.splice(index, 0, child);\n    }\n\n    this.updateLeafState();\n  }\n\n  insertBefore(child, ref) {\n    let index;\n    if (ref) {\n      index = this.childNodes.indexOf(ref);\n    }\n    this.insertChild(child, index);\n  }\n\n  insertAfter(child, ref) {\n    let index;\n    if (ref) {\n      index = this.childNodes.indexOf(ref);\n      if (index !== -1) index += 1;\n    }\n    this.insertChild(child, index);\n  }\n\n  removeChild(child) {\n    const children = this.getChildren() || [];\n    const dataIndex = children.indexOf(child.data);\n    if (dataIndex > -1) {\n      children.splice(dataIndex, 1);\n    }\n\n    const index = this.childNodes.indexOf(child);\n\n    if (index > -1) {\n      this.store && this.store.deregisterNode(child);\n      child.parent = null;\n      this.childNodes.splice(index, 1);\n    }\n\n    this.updateLeafState();\n  }\n\n  removeChildByData(data) {\n    let targetNode = null;\n\n    for (let i = 0; i < this.childNodes.length; i++) {\n      if (this.childNodes[i].data === data) {\n        targetNode = this.childNodes[i];\n        break;\n      }\n    }\n\n    if (targetNode) {\n      this.removeChild(targetNode);\n    }\n  }\n\n  expand(callback, expandParent) {\n    const done = () => {\n      if (expandParent) {\n        let parent = this.parent;\n        while (parent.level > 0) {\n          parent.expanded = true;\n          parent = parent.parent;\n        }\n      }\n      this.expanded = true;\n      if (callback) callback();\n    };\n\n    if (this.shouldLoadData()) {\n      this.loadData((data) => {\n        if (data instanceof Array) {\n          if (this.checked) {\n            this.setChecked(true, true);\n          } else if (!this.store.checkStrictly) {\n            reInitChecked(this);\n          }\n          done();\n        }\n      });\n    } else {\n      done();\n    }\n  }\n\n  doCreateChildren(array, defaultProps = {}) {\n    array.forEach((item) => {\n      this.insertChild(objectAssign({ data: item }, defaultProps), undefined, true);\n    });\n  }\n\n  collapse() {\n    this.expanded = false;\n  }\n\n  shouldLoadData() {\n    return this.store.lazy === true && this.store.load && !this.loaded;\n  }\n\n  updateLeafState() {\n    if (this.store.lazy === true && this.loaded !== true && typeof this.isLeafByUser !== 'undefined') {\n      this.isLeaf = this.isLeafByUser;\n      return;\n    }\n    const childNodes = this.childNodes;\n    if (!this.store.lazy || (this.store.lazy === true && this.loaded === true)) {\n      this.isLeaf = !childNodes || childNodes.length === 0;\n      return;\n    }\n    this.isLeaf = false;\n  }\n\n  setChecked(value, deep, recursion, passValue) {\n    this.indeterminate = value === 'half';\n    this.checked = value === true;\n\n    if (this.store.checkStrictly) return;\n\n    if (!(this.shouldLoadData() && !this.store.checkDescendants)) {\n      let { all, allWithoutDisable } = getChildState(this.childNodes);\n\n      if (!this.isLeaf && (!all && allWithoutDisable)) {\n        this.checked = false;\n        value = false;\n      }\n\n      const handleDescendants = () => {\n        if (deep) {\n          const childNodes = this.childNodes;\n          for (let i = 0, j = childNodes.length; i < j; i++) {\n            const child = childNodes[i];\n            passValue = passValue || value !== false;\n            const isCheck = child.disabled ? child.checked : passValue;\n            child.setChecked(isCheck, deep, true, passValue);\n          }\n          const { half, all } = getChildState(childNodes);\n          if (!all) {\n            this.checked = all;\n            this.indeterminate = half;\n          }\n        }\n      };\n\n      if (this.shouldLoadData()) {\n        // Only work on lazy load data.\n        this.loadData(() => {\n          handleDescendants();\n          reInitChecked(this);\n        }, {\n          checked: value !== false\n        });\n        return;\n      } else {\n        handleDescendants();\n      }\n    }\n\n    const parent = this.parent;\n    if (!parent || parent.level === 0) return;\n\n    if (!recursion) {\n      reInitChecked(parent);\n    }\n  }\n\n  getChildren(forceInit = false) { // this is data\n    if (this.level === 0) return this.data;\n    const data = this.data;\n    if (!data) return null;\n\n    const props = this.store.props;\n    let children = 'children';\n    if (props) {\n      children = props.children || 'children';\n    }\n\n    if (data[children] === undefined) {\n      data[children] = null;\n    }\n\n    if (forceInit && !data[children]) {\n      data[children] = [];\n    }\n\n    return data[children];\n  }\n\n  updateChildren() {\n    const newData = this.getChildren() || [];\n    const oldData = this.childNodes.map((node) => node.data);\n\n    const newDataMap = {};\n    const newNodes = [];\n\n    newData.forEach((item, index) => {\n      const key = item[NODE_KEY];\n      const isNodeExists = !!key && arrayFindIndex(oldData, data => data[NODE_KEY] === key) >= 0;\n      if (isNodeExists) {\n        newDataMap[key] = { index, data: item };\n      } else {\n        newNodes.push({ index, data: item });\n      }\n    });\n\n    if (!this.store.lazy) {\n      oldData.forEach((item) => {\n        if (!newDataMap[item[NODE_KEY]]) this.removeChildByData(item);\n      });\n    }\n\n    newNodes.forEach(({ index, data }) => {\n      this.insertChild({ data }, index);\n    });\n\n    this.updateLeafState();\n  }\n\n  loadData(callback, defaultProps = {}) {\n    if (this.store.lazy === true && this.store.load && !this.loaded && (!this.loading || Object.keys(defaultProps).length)) {\n      this.loading = true;\n\n      const resolve = (children) => {\n        this.childNodes = [];\n\n        this.doCreateChildren(children, defaultProps);\n        this.loaded = true;\n        this.loading = false;\n        this.updateLeafState();\n        if (callback) {\n          callback.call(this, children);\n        }\n      };\n\n      this.store.load(this, resolve);\n    } else {\n      if (callback) {\n        callback.call(this);\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/tree/src/model/tree-store.js",
    "content": "import Node from './node';\nimport { getNodeKey } from './util';\n\nexport default class TreeStore {\n  constructor(options) {\n    this.currentNode = null;\n    this.currentNodeKey = null;\n\n    for (let option in options) {\n      if (options.hasOwnProperty(option)) {\n        this[option] = options[option];\n      }\n    }\n\n    this.nodesMap = {};\n\n    this.root = new Node({\n      data: this.data,\n      store: this\n    });\n\n    if (this.lazy && this.load) {\n      const loadFn = this.load;\n      loadFn(this.root, (data) => {\n        this.root.doCreateChildren(data);\n        this._initDefaultCheckedNodes();\n      });\n    } else {\n      this._initDefaultCheckedNodes();\n    }\n  }\n\n  filter(value) {\n    const filterNodeMethod = this.filterNodeMethod;\n    const lazy = this.lazy;\n    const traverse = function(node) {\n      const childNodes = node.root ? node.root.childNodes : node.childNodes;\n\n      childNodes.forEach((child) => {\n        child.visible = filterNodeMethod.call(child, value, child.data, child);\n\n        traverse(child);\n      });\n\n      if (!node.visible && childNodes.length) {\n        let allHidden = true;\n        allHidden = !childNodes.some(child => child.visible);\n\n        if (node.root) {\n          node.root.visible = allHidden === false;\n        } else {\n          node.visible = allHidden === false;\n        }\n      }\n      if (!value) return;\n\n      if (node.visible && !node.isLeaf && !lazy) node.expand();\n    };\n\n    traverse(this);\n  }\n\n  setData(newVal) {\n    const instanceChanged = newVal !== this.root.data;\n    if (instanceChanged) {\n      this.root.setData(newVal);\n      this._initDefaultCheckedNodes();\n    } else {\n      this.root.updateChildren();\n    }\n  }\n\n  getNode(data) {\n    if (data instanceof Node) return data;\n    const key = typeof data !== 'object' ? data : getNodeKey(this.key, data);\n    return this.nodesMap[key] || null;\n  }\n\n  insertBefore(data, refData) {\n    const refNode = this.getNode(refData);\n    refNode.parent.insertBefore({ data }, refNode);\n  }\n\n  insertAfter(data, refData) {\n    const refNode = this.getNode(refData);\n    refNode.parent.insertAfter({ data }, refNode);\n  }\n\n  remove(data) {\n    const node = this.getNode(data);\n\n    if (node && node.parent) {\n      if (node === this.currentNode) {\n        this.currentNode = null;\n      }\n      node.parent.removeChild(node);\n    }\n  }\n\n  append(data, parentData) {\n    const parentNode = parentData ? this.getNode(parentData) : this.root;\n\n    if (parentNode) {\n      parentNode.insertChild({ data });\n    }\n  }\n\n  _initDefaultCheckedNodes() {\n    const defaultCheckedKeys = this.defaultCheckedKeys || [];\n    const nodesMap = this.nodesMap;\n\n    defaultCheckedKeys.forEach((checkedKey) => {\n      const node = nodesMap[checkedKey];\n\n      if (node) {\n        node.setChecked(true, !this.checkStrictly);\n      }\n    });\n  }\n\n  _initDefaultCheckedNode(node) {\n    const defaultCheckedKeys = this.defaultCheckedKeys || [];\n\n    if (defaultCheckedKeys.indexOf(node.key) !== -1) {\n      node.setChecked(true, !this.checkStrictly);\n    }\n  }\n\n  setDefaultCheckedKey(newVal) {\n    if (newVal !== this.defaultCheckedKeys) {\n      this.defaultCheckedKeys = newVal;\n      this._initDefaultCheckedNodes();\n    }\n  }\n\n  registerNode(node) {\n    const key = this.key;\n    if (!key || !node || !node.data) return;\n\n    const nodeKey = node.key;\n    if (nodeKey !== undefined) this.nodesMap[node.key] = node;\n  }\n\n  deregisterNode(node) {\n    const key = this.key;\n    if (!key || !node || !node.data) return;\n\n    node.childNodes.forEach(child => {\n      this.deregisterNode(child);\n    });\n\n    delete this.nodesMap[node.key];\n  }\n\n  getCheckedNodes(leafOnly = false, includeHalfChecked = false) {\n    const checkedNodes = [];\n    const traverse = function(node) {\n      const childNodes = node.root ? node.root.childNodes : node.childNodes;\n\n      childNodes.forEach((child) => {\n        if ((child.checked || (includeHalfChecked && child.indeterminate)) && (!leafOnly || (leafOnly && child.isLeaf))) {\n          checkedNodes.push(child.data);\n        }\n\n        traverse(child);\n      });\n    };\n\n    traverse(this);\n\n    return checkedNodes;\n  }\n\n  getCheckedKeys(leafOnly = false) {\n    return this.getCheckedNodes(leafOnly).map((data) => (data || {})[this.key]);\n  }\n\n  getHalfCheckedNodes() {\n    const nodes = [];\n    const traverse = function(node) {\n      const childNodes = node.root ? node.root.childNodes : node.childNodes;\n\n      childNodes.forEach((child) => {\n        if (child.indeterminate) {\n          nodes.push(child.data);\n        }\n\n        traverse(child);\n      });\n    };\n\n    traverse(this);\n\n    return nodes;\n  }\n\n  getHalfCheckedKeys() {\n    return this.getHalfCheckedNodes().map((data) => (data || {})[this.key]);\n  }\n\n  _getAllNodes() {\n    const allNodes = [];\n    const nodesMap = this.nodesMap;\n    for (let nodeKey in nodesMap) {\n      if (nodesMap.hasOwnProperty(nodeKey)) {\n        allNodes.push(nodesMap[nodeKey]);\n      }\n    }\n\n    return allNodes;\n  }\n\n  updateChildren(key, data) {\n    const node = this.nodesMap[key];\n    if (!node) return;\n    const childNodes = node.childNodes;\n    for (let i = childNodes.length - 1; i >= 0; i--) {\n      const child = childNodes[i];\n      this.remove(child.data);\n    }\n    for (let i = 0, j = data.length; i < j; i++) {\n      const child = data[i];\n      this.append(child, node.data);\n    }\n  }\n\n  _setCheckedKeys(key, leafOnly = false, checkedKeys) {\n    const allNodes = this._getAllNodes().sort((a, b) => b.level - a.level);\n    const cache = Object.create(null);\n    const keys = Object.keys(checkedKeys);\n    allNodes.forEach(node => node.setChecked(false, false));\n    for (let i = 0, j = allNodes.length; i < j; i++) {\n      const node = allNodes[i];\n      const nodeKey = node.data[key].toString();\n      let checked = keys.indexOf(nodeKey) > -1;\n      if (!checked) {\n        if (node.checked && !cache[nodeKey]) {\n          node.setChecked(false, false);\n        }\n        continue;\n      }\n\n      let parent = node.parent;\n      while (parent && parent.level > 0) {\n        cache[parent.data[key]] = true;\n        parent = parent.parent;\n      }\n\n      if (node.isLeaf || this.checkStrictly) {\n        node.setChecked(true, false);\n        continue;\n      }\n      node.setChecked(true, true);\n\n      if (leafOnly) {\n        node.setChecked(false, false);\n        const traverse = function(node) {\n          const childNodes = node.childNodes;\n          childNodes.forEach((child) => {\n            if (!child.isLeaf) {\n              child.setChecked(false, false);\n            }\n            traverse(child);\n          });\n        };\n        traverse(node);\n      }\n    }\n  }\n\n  setCheckedNodes(array, leafOnly = false) {\n    const key = this.key;\n    const checkedKeys = {};\n    array.forEach((item) => {\n      checkedKeys[(item || {})[key]] = true;\n    });\n\n    this._setCheckedKeys(key, leafOnly, checkedKeys);\n  }\n\n  setCheckedKeys(keys, leafOnly = false) {\n    this.defaultCheckedKeys = keys;\n    const key = this.key;\n    const checkedKeys = {};\n    keys.forEach((key) => {\n      checkedKeys[key] = true;\n    });\n\n    this._setCheckedKeys(key, leafOnly, checkedKeys);\n  }\n\n  setDefaultExpandedKeys(keys) {\n    keys = keys || [];\n    this.defaultExpandedKeys = keys;\n\n    keys.forEach((key) => {\n      const node = this.getNode(key);\n      if (node) node.expand(null, this.autoExpandParent);\n    });\n  }\n\n  setChecked(data, checked, deep) {\n    const node = this.getNode(data);\n\n    if (node) {\n      node.setChecked(!!checked, deep);\n    }\n  }\n\n  getCurrentNode() {\n    return this.currentNode;\n  }\n\n  setCurrentNode(currentNode) {\n    const prevCurrentNode = this.currentNode;\n    if (prevCurrentNode) {\n      prevCurrentNode.isCurrent = false;\n    }\n    this.currentNode = currentNode;\n    this.currentNode.isCurrent = true;\n  }\n\n  setUserCurrentNode(node) {\n    const key = node[this.key];\n    const currNode = this.nodesMap[key];\n    this.setCurrentNode(currNode);\n  }\n\n  setCurrentNodeKey(key) {\n    if (key === null || key === undefined) {\n      this.currentNode && (this.currentNode.isCurrent = false);\n      this.currentNode = null;\n      return;\n    }\n    const node = this.getNode(key);\n    if (node) {\n      this.setCurrentNode(node);\n    }\n  }\n};\n"
  },
  {
    "path": "packages/tree/src/model/util.js",
    "content": "export const NODE_KEY = '$treeNodeId';\n\nexport const markNodeData = function(node, data) {\n  if (!data || data[NODE_KEY]) return;\n  Object.defineProperty(data, NODE_KEY, {\n    value: node.id,\n    enumerable: false,\n    configurable: false,\n    writable: false\n  });\n};\n\nexport const getNodeKey = function(key, data) {\n  if (!key) return data[NODE_KEY];\n  return data[key];\n};\n\nexport const findNearestComponent = (element, componentName) => {\n  let target = element;\n  while (target && target.tagName !== 'BODY') {\n    if (target.__vue__ && target.__vue__.$options.name === componentName) {\n      return target.__vue__;\n    }\n    target = target.parentNode;\n  }\n  return null;\n};\n"
  },
  {
    "path": "packages/tree/src/tree-node.vue",
    "content": "<template>\n  <div\n    class=\"el-tree-node\"\n    @click.stop=\"handleClick\"\n    @contextmenu=\"($event) => this.handleContextMenu($event)\"\n    v-show=\"node.visible\"\n    :class=\"{\n      'is-expanded': expanded,\n      'is-current': node.isCurrent,\n      'is-hidden': !node.visible,\n      'is-focusable': !node.disabled,\n      'is-checked': !node.disabled && node.checked\n    }\"\n    role=\"treeitem\"\n    tabindex=\"-1\"\n    :aria-expanded=\"expanded\"\n    :aria-disabled=\"node.disabled\"\n    :aria-checked=\"node.checked\"\n    :draggable=\"tree.draggable\"\n    @dragstart.stop=\"handleDragStart\"\n    @dragover.stop=\"handleDragOver\"\n    @dragend.stop=\"handleDragEnd\"\n    @drop.stop=\"handleDrop\"\n    ref=\"node\"\n  >\n    <div class=\"el-tree-node__content\"\n      :style=\"{ 'padding-left': (node.level - 1) * tree.indent + 'px' }\">\n      <span\n        @click.stop=\"handleExpandIconClick\"\n        :class=\"[\n          { 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded },\n          'el-tree-node__expand-icon',\n          tree.iconClass ? tree.iconClass : 'el-icon-caret-right'\n        ]\"\n      >\n      </span>\n      <el-checkbox\n        v-if=\"showCheckbox\"\n        v-model=\"node.checked\"\n        :indeterminate=\"node.indeterminate\"\n        :disabled=\"!!node.disabled\"\n        @click.native.stop\n        @change=\"handleCheckChange\"\n      >\n      </el-checkbox>\n      <span\n        v-if=\"node.loading\"\n        class=\"el-tree-node__loading-icon el-icon-loading\">\n      </span>\n      <node-content :node=\"node\"></node-content>\n    </div>\n    <el-collapse-transition>\n      <div\n        class=\"el-tree-node__children\"\n        v-if=\"!renderAfterExpand || childNodeRendered\"\n        v-show=\"expanded\"\n        role=\"group\"\n        :aria-expanded=\"expanded\"\n      >\n        <el-tree-node\n          :render-content=\"renderContent\"\n          v-for=\"child in node.childNodes\"\n          :render-after-expand=\"renderAfterExpand\"\n          :show-checkbox=\"showCheckbox\"\n          :key=\"getNodeKey(child)\"\n          :node=\"child\"\n          @node-expand=\"handleChildNodeExpand\">\n        </el-tree-node>\n      </div>\n    </el-collapse-transition>\n  </div>\n</template>\n\n<script type=\"text/jsx\">\n  import ElCollapseTransition from 'element-ui/src/transitions/collapse-transition';\n  import ElCheckbox from 'element-ui/packages/checkbox';\n  import emitter from 'element-ui/src/mixins/emitter';\n  import { getNodeKey } from './model/util';\n\n  export default {\n    name: 'ElTreeNode',\n\n    componentName: 'ElTreeNode',\n\n    mixins: [emitter],\n\n    props: {\n      node: {\n        default() {\n          return {};\n        }\n      },\n      props: {},\n      renderContent: Function,\n      renderAfterExpand: {\n        type: Boolean,\n        default: true\n      },\n      showCheckbox: {\n        type: Boolean,\n        default: false\n      }\n    },\n\n    components: {\n      ElCollapseTransition,\n      ElCheckbox,\n      NodeContent: {\n        props: {\n          node: {\n            required: true\n          }\n        },\n        render(h) {\n          const parent = this.$parent;\n          const tree = parent.tree;\n          const node = this.node;\n          const { data, store } = node;\n          return (\n            parent.renderContent\n              ? parent.renderContent.call(parent._renderProxy, h, { _self: tree.$vnode.context, node, data, store })\n              : tree.$scopedSlots.default\n                ? tree.$scopedSlots.default({ node, data })\n                : <span class=\"el-tree-node__label\">{ node.label }</span>\n          );\n        }\n      }\n    },\n\n    data() {\n      return {\n        tree: null,\n        expanded: false,\n        childNodeRendered: false,\n        oldChecked: null,\n        oldIndeterminate: null\n      };\n    },\n\n    watch: {\n      'node.indeterminate'(val) {\n        this.handleSelectChange(this.node.checked, val);\n      },\n\n      'node.checked'(val) {\n        this.handleSelectChange(val, this.node.indeterminate);\n      },\n\n      'node.expanded'(val) {\n        this.$nextTick(() => this.expanded = val);\n        if (val) {\n          this.childNodeRendered = true;\n        }\n      }\n    },\n\n    methods: {\n      getNodeKey(node) {\n        return getNodeKey(this.tree.nodeKey, node.data);\n      },\n\n      handleSelectChange(checked, indeterminate) {\n        if (this.oldChecked !== checked && this.oldIndeterminate !== indeterminate) {\n          this.tree.$emit('check-change', this.node.data, checked, indeterminate);\n        }\n        this.oldChecked = checked;\n        this.indeterminate = indeterminate;\n      },\n\n      handleClick() {\n        const store = this.tree.store;\n        store.setCurrentNode(this.node);\n        this.tree.$emit('current-change', store.currentNode ? store.currentNode.data : null, store.currentNode);\n        this.tree.currentNode = this;\n        if (this.tree.expandOnClickNode) {\n          this.handleExpandIconClick();\n        }\n        if (this.tree.checkOnClickNode && !this.node.disabled) {\n          this.handleCheckChange(null, {\n            target: { checked: !this.node.checked }\n          });\n        }\n        this.tree.$emit('node-click', this.node.data, this.node, this);\n      },\n\n      handleContextMenu(event) {\n        if (this.tree._events['node-contextmenu'] && this.tree._events['node-contextmenu'].length > 0) {\n          event.stopPropagation();\n          event.preventDefault();\n        }\n        this.tree.$emit('node-contextmenu', event, this.node.data, this.node, this);\n      },\n\n      handleExpandIconClick() {\n        if (this.node.isLeaf) return;\n        if (this.expanded) {\n          this.tree.$emit('node-collapse', this.node.data, this.node, this);\n          this.node.collapse();\n        } else {\n          this.node.expand();\n          this.$emit('node-expand', this.node.data, this.node, this);\n        }\n      },\n\n      handleCheckChange(value, ev) {\n        this.node.setChecked(ev.target.checked, !this.tree.checkStrictly);\n        this.$nextTick(() => {\n          const store = this.tree.store;\n          this.tree.$emit('check', this.node.data, {\n            checkedNodes: store.getCheckedNodes(),\n            checkedKeys: store.getCheckedKeys(),\n            halfCheckedNodes: store.getHalfCheckedNodes(),\n            halfCheckedKeys: store.getHalfCheckedKeys(),\n          });\n        });\n      },\n\n      handleChildNodeExpand(nodeData, node, instance) {\n        this.broadcast('ElTreeNode', 'tree-node-expand', node);\n        this.tree.$emit('node-expand', nodeData, node, instance);\n      },\n\n      handleDragStart(event) {\n        if (!this.tree.draggable) return;\n        this.tree.$emit('tree-node-drag-start', event, this);\n      },\n\n      handleDragOver(event) {\n        if (!this.tree.draggable) return;\n        this.tree.$emit('tree-node-drag-over', event, this);\n        event.preventDefault();\n      },\n\n      handleDrop(event) {\n        event.preventDefault();\n      },\n\n      handleDragEnd(event) {\n        if (!this.tree.draggable) return;\n        this.tree.$emit('tree-node-drag-end', event, this);\n      }\n    },\n\n    created() {\n      const parent = this.$parent;\n\n      if (parent.isTree) {\n        this.tree = parent;\n      } else {\n        this.tree = parent.tree;\n      }\n\n      const tree = this.tree;\n      if (!tree) {\n        console.warn('Can not find node\\'s tree.');\n      }\n\n      const props = tree.props || {};\n      const childrenKey = props['children'] || 'children';\n\n      this.$watch(`node.data.${childrenKey}`, () => {\n        this.node.updateChildren();\n      });\n\n      if (this.node.expanded) {\n        this.expanded = true;\n        this.childNodeRendered = true;\n      }\n\n      if(this.tree.accordion) {\n        this.$on('tree-node-expand', node => {\n          if(this.node !== node) {\n            this.node.collapse();\n          }\n        });\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/tree/src/tree.vue",
    "content": "<template>\n  <div\n    class=\"el-tree\"\n    :class=\"{\n      'el-tree--highlight-current': highlightCurrent,\n      'is-dragging': !!dragState.draggingNode,\n      'is-drop-not-allow': !dragState.allowDrop,\n      'is-drop-inner': dragState.dropType === 'inner'\n    }\"\n    role=\"tree\"\n  >\n    <el-tree-node\n      v-for=\"child in root.childNodes\"\n      :node=\"child\"\n      :props=\"props\"\n      :render-after-expand=\"renderAfterExpand\"\n      :show-checkbox=\"showCheckbox\"\n      :key=\"getNodeKey(child)\"\n      :render-content=\"renderContent\"\n      @node-expand=\"handleNodeExpand\">\n    </el-tree-node>\n    <div class=\"el-tree__empty-block\" v-if=\"isEmpty\">\n      <span class=\"el-tree__empty-text\">{{ emptyText }}</span>\n    </div>\n    <div\n      v-show=\"dragState.showDropIndicator\"\n      class=\"el-tree__drop-indicator\"\n      ref=\"dropIndicator\">\n    </div>\n  </div>\n</template>\n\n<script>\n  import TreeStore from './model/tree-store';\n  import { getNodeKey, findNearestComponent } from './model/util';\n  import ElTreeNode from './tree-node.vue';\n  import {t} from 'element-ui/src/locale';\n  import emitter from 'element-ui/src/mixins/emitter';\n  import { addClass, removeClass } from 'element-ui/src/utils/dom';\n\n  export default {\n    name: 'ElTree',\n\n    mixins: [emitter],\n\n    components: {\n      ElTreeNode\n    },\n\n    data() {\n      return {\n        store: null,\n        root: null,\n        currentNode: null,\n        treeItems: null,\n        checkboxItems: [],\n        dragState: {\n          showDropIndicator: false,\n          draggingNode: null,\n          dropNode: null,\n          allowDrop: true\n        }\n      };\n    },\n\n    props: {\n      data: {\n        type: Array\n      },\n      emptyText: {\n        type: String,\n        default() {\n          return t('el.tree.emptyText');\n        }\n      },\n      renderAfterExpand: {\n        type: Boolean,\n        default: true\n      },\n      nodeKey: String,\n      checkStrictly: Boolean,\n      defaultExpandAll: Boolean,\n      expandOnClickNode: {\n        type: Boolean,\n        default: true\n      },\n      checkOnClickNode: Boolean,\n      checkDescendants: {\n        type: Boolean,\n        default: false\n      },\n      autoExpandParent: {\n        type: Boolean,\n        default: true\n      },\n      defaultCheckedKeys: Array,\n      defaultExpandedKeys: Array,\n      currentNodeKey: [String, Number],\n      renderContent: Function,\n      showCheckbox: {\n        type: Boolean,\n        default: false\n      },\n      draggable: {\n        type: Boolean,\n        default: false\n      },\n      allowDrag: Function,\n      allowDrop: Function,\n      props: {\n        default() {\n          return {\n            children: 'children',\n            label: 'label',\n            disabled: 'disabled'\n          };\n        }\n      },\n      lazy: {\n        type: Boolean,\n        default: false\n      },\n      highlightCurrent: Boolean,\n      load: Function,\n      filterNodeMethod: Function,\n      accordion: Boolean,\n      indent: {\n        type: Number,\n        default: 18\n      },\n      iconClass: String\n    },\n\n    computed: {\n      children: {\n        set(value) {\n          this.data = value;\n        },\n        get() {\n          return this.data;\n        }\n      },\n\n      treeItemArray() {\n        return Array.prototype.slice.call(this.treeItems);\n      },\n\n      isEmpty() {\n        const { childNodes } = this.root;\n        return !childNodes || childNodes.length === 0 || childNodes.every(({visible}) => !visible);\n      }\n    },\n\n    watch: {\n      defaultCheckedKeys(newVal) {\n        this.store.setDefaultCheckedKey(newVal);\n      },\n\n      defaultExpandedKeys(newVal) {\n        this.store.defaultExpandedKeys = newVal;\n        this.store.setDefaultExpandedKeys(newVal);\n      },\n\n      data(newVal) {\n        this.store.setData(newVal);\n      },\n\n      checkboxItems(val) {\n        Array.prototype.forEach.call(val, (checkbox) => {\n          checkbox.setAttribute('tabindex', -1);\n        });\n      },\n\n      checkStrictly(newVal) {\n        this.store.checkStrictly = newVal;\n      }\n    },\n\n    methods: {\n      filter(value) {\n        if (!this.filterNodeMethod) throw new Error('[Tree] filterNodeMethod is required when filter');\n        this.store.filter(value);\n      },\n\n      getNodeKey(node) {\n        return getNodeKey(this.nodeKey, node.data);\n      },\n\n      getNodePath(data) {\n        if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in getNodePath');\n        const node = this.store.getNode(data);\n        if (!node) return [];\n        const path = [node.data];\n        let parent = node.parent;\n        while (parent && parent !== this.root) {\n          path.push(parent.data);\n          parent = parent.parent;\n        }\n        return path.reverse();\n      },\n\n      getCheckedNodes(leafOnly, includeHalfChecked) {\n        return this.store.getCheckedNodes(leafOnly, includeHalfChecked);\n      },\n\n      getCheckedKeys(leafOnly) {\n        return this.store.getCheckedKeys(leafOnly);\n      },\n\n      getCurrentNode() {\n        const currentNode = this.store.getCurrentNode();\n        return currentNode ? currentNode.data : null;\n      },\n\n      getCurrentKey() {\n        if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in getCurrentKey');\n        const currentNode = this.getCurrentNode();\n        return currentNode ? currentNode[this.nodeKey] : null;\n      },\n\n      setCheckedNodes(nodes, leafOnly) {\n        if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCheckedNodes');\n        this.store.setCheckedNodes(nodes, leafOnly);\n      },\n\n      setCheckedKeys(keys, leafOnly) {\n        if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCheckedKeys');\n        this.store.setCheckedKeys(keys, leafOnly);\n      },\n\n      setChecked(data, checked, deep) {\n        this.store.setChecked(data, checked, deep);\n      },\n\n      getHalfCheckedNodes() {\n        return this.store.getHalfCheckedNodes();\n      },\n\n      getHalfCheckedKeys() {\n        return this.store.getHalfCheckedKeys();\n      },\n\n      setCurrentNode(node) {\n        if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCurrentNode');\n        this.store.setUserCurrentNode(node);\n      },\n\n      setCurrentKey(key) {\n        if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCurrentKey');\n        this.store.setCurrentNodeKey(key);\n      },\n\n      getNode(data) {\n        return this.store.getNode(data);\n      },\n\n      remove(data) {\n        this.store.remove(data);\n      },\n\n      append(data, parentNode) {\n        this.store.append(data, parentNode);\n      },\n\n      insertBefore(data, refNode) {\n        this.store.insertBefore(data, refNode);\n      },\n\n      insertAfter(data, refNode) {\n        this.store.insertAfter(data, refNode);\n      },\n\n      handleNodeExpand(nodeData, node, instance) {\n        this.broadcast('ElTreeNode', 'tree-node-expand', node);\n        this.$emit('node-expand', nodeData, node, instance);\n      },\n\n      updateKeyChildren(key, data) {\n        if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in updateKeyChild');\n        this.store.updateChildren(key, data);\n      },\n\n      initTabIndex() {\n        this.treeItems = this.$el.querySelectorAll('.is-focusable[role=treeitem]');\n        this.checkboxItems = this.$el.querySelectorAll('input[type=checkbox]');\n        const checkedItem = this.$el.querySelectorAll('.is-checked[role=treeitem]');\n        if (checkedItem.length) {\n          checkedItem[0].setAttribute('tabindex', 0);\n          return;\n        }\n        this.treeItems[0] && this.treeItems[0].setAttribute('tabindex', 0);\n      },\n\n      handleKeydown(ev) {\n        const currentItem = ev.target;\n        if (currentItem.className.indexOf('el-tree-node') === -1) return;\n        const keyCode = ev.keyCode;\n        this.treeItems = this.$el.querySelectorAll('.is-focusable[role=treeitem]');\n        const currentIndex = this.treeItemArray.indexOf(currentItem);\n        let nextIndex;\n        if ([38, 40].indexOf(keyCode) > -1) { // up、down\n          ev.preventDefault();\n          if (keyCode === 38) { // up\n            nextIndex = currentIndex !== 0 ? currentIndex - 1 : 0;\n          } else {\n            nextIndex = (currentIndex < this.treeItemArray.length - 1) ? currentIndex + 1 : 0;\n          }\n          this.treeItemArray[nextIndex].focus(); // 选中\n        }\n        if ([37, 39].indexOf(keyCode) > -1) { // left、right 展开\n          ev.preventDefault();\n          currentItem.click(); // 选中\n        }\n        const hasInput = currentItem.querySelector('[type=\"checkbox\"]');\n        if ([13, 32].indexOf(keyCode) > -1 && hasInput) { // space enter选中checkbox\n          ev.preventDefault();\n          hasInput.click();\n        }\n      }\n    },\n\n    created() {\n      this.isTree = true;\n\n      this.store = new TreeStore({\n        key: this.nodeKey,\n        data: this.data,\n        lazy: this.lazy,\n        props: this.props,\n        load: this.load,\n        currentNodeKey: this.currentNodeKey,\n        checkStrictly: this.checkStrictly,\n        checkDescendants: this.checkDescendants,\n        defaultCheckedKeys: this.defaultCheckedKeys,\n        defaultExpandedKeys: this.defaultExpandedKeys,\n        autoExpandParent: this.autoExpandParent,\n        defaultExpandAll: this.defaultExpandAll,\n        filterNodeMethod: this.filterNodeMethod\n      });\n\n      this.root = this.store.root;\n\n      let dragState = this.dragState;\n      this.$on('tree-node-drag-start', (event, treeNode) => {\n        if (typeof this.allowDrag === 'function' && !this.allowDrag(treeNode.node)) {\n          event.preventDefault();\n          return false;\n        }\n        event.dataTransfer.effectAllowed = 'move';\n\n        // wrap in try catch to address IE's error when first param is 'text/plain'\n        try {\n          // setData is required for draggable to work in FireFox\n          // the content has to be '' so dragging a node out of the tree won't open a new tab in FireFox\n          event.dataTransfer.setData('text/plain', '');\n        } catch (e) {}\n        dragState.draggingNode = treeNode;\n        this.$emit('node-drag-start', treeNode.node, event);\n      });\n\n      this.$on('tree-node-drag-over', (event, treeNode) => {\n        const dropNode = findNearestComponent(event.target, 'ElTreeNode');\n        const oldDropNode = dragState.dropNode;\n        if (oldDropNode && oldDropNode !== dropNode) {\n          removeClass(oldDropNode.$el, 'is-drop-inner');\n        }\n        const draggingNode = dragState.draggingNode;\n        if (!draggingNode || !dropNode) return;\n\n        let dropPrev = true;\n        let dropInner = true;\n        let dropNext = true;\n        let userAllowDropInner = true;\n        if (typeof this.allowDrop === 'function') {\n          dropPrev = this.allowDrop(draggingNode.node, dropNode.node, 'prev');\n          userAllowDropInner = dropInner = this.allowDrop(draggingNode.node, dropNode.node, 'inner');\n          dropNext = this.allowDrop(draggingNode.node, dropNode.node, 'next');\n        }\n        event.dataTransfer.dropEffect = dropInner ? 'move' : 'none';\n        if ((dropPrev || dropInner || dropNext) && oldDropNode !== dropNode) {\n          if (oldDropNode) {\n            this.$emit('node-drag-leave', draggingNode.node, oldDropNode.node, event);\n          }\n          this.$emit('node-drag-enter', draggingNode.node, dropNode.node, event);\n        }\n\n        if (dropPrev || dropInner || dropNext) {\n          dragState.dropNode = dropNode;\n        }\n\n        if (dropNode.node.nextSibling === draggingNode.node) {\n          dropNext = false;\n        }\n        if (dropNode.node.previousSibling === draggingNode.node) {\n          dropPrev = false;\n        }\n        if (dropNode.node.contains(draggingNode.node, false)) {\n          dropInner = false;\n        }\n        if (draggingNode.node === dropNode.node || draggingNode.node.contains(dropNode.node)) {\n          dropPrev = false;\n          dropInner = false;\n          dropNext = false;\n        }\n\n        const targetPosition = dropNode.$el.getBoundingClientRect();\n        const treePosition = this.$el.getBoundingClientRect();\n\n        let dropType;\n        const prevPercent = dropPrev ? (dropInner ? 0.25 : (dropNext ? 0.45 : 1)) : -1;\n        const nextPercent = dropNext ? (dropInner ? 0.75 : (dropPrev ? 0.55 : 0)) : 1;\n\n        let indicatorTop = -9999;\n        const distance = event.clientY - targetPosition.top;\n        if (distance < targetPosition.height * prevPercent) {\n          dropType = 'before';\n        } else if (distance > targetPosition.height * nextPercent) {\n          dropType = 'after';\n        } else if (dropInner) {\n          dropType = 'inner';\n        } else {\n          dropType = 'none';\n        }\n\n        const iconPosition = dropNode.$el.querySelector('.el-tree-node__expand-icon').getBoundingClientRect();\n        const dropIndicator = this.$refs.dropIndicator;\n        if (dropType === 'before') {\n          indicatorTop = iconPosition.top - treePosition.top;\n        } else if (dropType === 'after') {\n          indicatorTop = iconPosition.bottom - treePosition.top;\n        }\n        dropIndicator.style.top = indicatorTop + 'px';\n        dropIndicator.style.left = (iconPosition.right - treePosition.left) + 'px';\n\n        if (dropType === 'inner') {\n          addClass(dropNode.$el, 'is-drop-inner');\n        } else {\n          removeClass(dropNode.$el, 'is-drop-inner');\n        }\n\n        dragState.showDropIndicator = dropType === 'before' || dropType === 'after';\n        dragState.allowDrop = dragState.showDropIndicator || userAllowDropInner;\n        dragState.dropType = dropType;\n        this.$emit('node-drag-over', draggingNode.node, dropNode.node, event);\n      });\n\n      this.$on('tree-node-drag-end', (event) => {\n        const { draggingNode, dropType, dropNode } = dragState;\n        event.preventDefault();\n        event.dataTransfer.dropEffect = 'move';\n\n        if (draggingNode && dropNode) {\n          const draggingNodeCopy = { data: draggingNode.node.data };\n          if (dropType !== 'none') {\n            draggingNode.node.remove();\n          }\n          if (dropType === 'before') {\n            dropNode.node.parent.insertBefore(draggingNodeCopy, dropNode.node);\n          } else if (dropType === 'after') {\n            dropNode.node.parent.insertAfter(draggingNodeCopy, dropNode.node);\n          } else if (dropType === 'inner') {\n            dropNode.node.insertChild(draggingNodeCopy);\n          }\n          if (dropType !== 'none') {\n            this.store.registerNode(draggingNodeCopy);\n          }\n\n          removeClass(dropNode.$el, 'is-drop-inner');\n\n          this.$emit('node-drag-end', draggingNode.node, dropNode.node, dropType, event);\n          if (dropType !== 'none') {\n            this.$emit('node-drop', draggingNode.node, dropNode.node, dropType, event);\n          }\n        }\n        if (draggingNode && !dropNode) {\n          this.$emit('node-drag-end', draggingNode.node, null, dropType, event);\n        }\n\n        dragState.showDropIndicator = false;\n        dragState.draggingNode = null;\n        dragState.dropNode = null;\n        dragState.allowDrop = true;\n      });\n    },\n\n    mounted() {\n      this.initTabIndex();\n      this.$el.addEventListener('keydown', this.handleKeydown);\n    },\n\n    updated() {\n      this.treeItems = this.$el.querySelectorAll('[role=treeitem]');\n      this.checkboxItems = this.$el.querySelectorAll('input[type=checkbox]');\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/upload/index.js",
    "content": "import Upload from './src';\n\n/* istanbul ignore next */\nUpload.install = function(Vue) {\n  Vue.component(Upload.name, Upload);\n};\n\nexport default Upload;\n"
  },
  {
    "path": "packages/upload/src/ajax.js",
    "content": "function getError(action, option, xhr) {\n  let msg;\n  if (xhr.response) {\n    msg = `${xhr.response.error || xhr.response}`;\n  } else if (xhr.responseText) {\n    msg = `${xhr.responseText}`;\n  } else {\n    msg = `fail to post ${action} ${xhr.status}`;\n  }\n\n  const err = new Error(msg);\n  err.status = xhr.status;\n  err.method = 'post';\n  err.url = action;\n  return err;\n}\n\nfunction getBody(xhr) {\n  const text = xhr.responseText || xhr.response;\n  if (!text) {\n    return text;\n  }\n\n  try {\n    return JSON.parse(text);\n  } catch (e) {\n    return text;\n  }\n}\n\nexport default function upload(option) {\n  if (typeof XMLHttpRequest === 'undefined') {\n    return;\n  }\n\n  const xhr = new XMLHttpRequest();\n  const action = option.action;\n\n  if (xhr.upload) {\n    xhr.upload.onprogress = function progress(e) {\n      if (e.total > 0) {\n        e.percent = e.loaded / e.total * 100;\n      }\n      option.onProgress(e);\n    };\n  }\n\n  const formData = new FormData();\n\n  if (option.data) {\n    Object.keys(option.data).forEach(key => {\n      formData.append(key, option.data[key]);\n    });\n  }\n\n  formData.append(option.filename, option.file, option.file.name);\n\n  xhr.onerror = function error(e) {\n    option.onError(e);\n  };\n\n  xhr.onload = function onload() {\n    if (xhr.status < 200 || xhr.status >= 300) {\n      return option.onError(getError(action, option, xhr));\n    }\n\n    option.onSuccess(getBody(xhr));\n  };\n\n  xhr.open('post', action, true);\n\n  if (option.withCredentials && 'withCredentials' in xhr) {\n    xhr.withCredentials = true;\n  }\n\n  const headers = option.headers || {};\n\n  for (let item in headers) {\n    if (headers.hasOwnProperty(item) && headers[item] !== null) {\n      xhr.setRequestHeader(item, headers[item]);\n    }\n  }\n  xhr.send(formData);\n  return xhr;\n}\n"
  },
  {
    "path": "packages/upload/src/index.vue",
    "content": "<script>\nimport UploadList from './upload-list';\nimport Upload from './upload';\nimport ElProgress from 'element-ui/packages/progress';\nimport Migrating from 'element-ui/src/mixins/migrating';\n\nfunction noop() {}\n\nexport default {\n  name: 'ElUpload',\n\n  mixins: [Migrating],\n\n  components: {\n    ElProgress,\n    UploadList,\n    Upload\n  },\n\n  provide() {\n    return {\n      uploader: this\n    };\n  },\n\n  inject: {\n    elForm: {\n      default: ''\n    }\n  },\n\n  props: {\n    action: {\n      type: String,\n      required: true\n    },\n    headers: {\n      type: Object,\n      default() {\n        return {};\n      }\n    },\n    data: Object,\n    multiple: Boolean,\n    name: {\n      type: String,\n      default: 'file'\n    },\n    drag: Boolean,\n    dragger: Boolean,\n    withCredentials: Boolean,\n    showFileList: {\n      type: Boolean,\n      default: true\n    },\n    accept: String,\n    type: {\n      type: String,\n      default: 'select'\n    },\n    beforeUpload: Function,\n    beforeRemove: Function,\n    onRemove: {\n      type: Function,\n      default: noop\n    },\n    onChange: {\n      type: Function,\n      default: noop\n    },\n    onPreview: {\n      type: Function\n    },\n    onSuccess: {\n      type: Function,\n      default: noop\n    },\n    onProgress: {\n      type: Function,\n      default: noop\n    },\n    onError: {\n      type: Function,\n      default: noop\n    },\n    fileList: {\n      type: Array,\n      default() {\n        return [];\n      }\n    },\n    autoUpload: {\n      type: Boolean,\n      default: true\n    },\n    listType: {\n      type: String,\n      default: 'text' // text,picture,picture-card\n    },\n    httpRequest: Function,\n    disabled: Boolean,\n    limit: Number,\n    onExceed: {\n      type: Function,\n      default: noop\n    }\n  },\n\n  data() {\n    return {\n      uploadFiles: [],\n      dragOver: false,\n      draging: false,\n      tempIndex: 1\n    };\n  },\n\n  computed: {\n    uploadDisabled() {\n      return this.disabled || (this.elForm || {}).disabled;\n    }\n  },\n\n  watch: {\n    listType(type) {\n      if (type === 'picture-card' || type === 'picture') {\n        this.uploadFiles = this.uploadFiles.map(file => {\n          if (!file.url && file.raw) {\n            try {\n              file.url = URL.createObjectURL(file.raw);\n            } catch (err) {\n              console.error('[Element Error][Upload]', err);\n            }\n          }\n          return file;\n        });\n      }\n    },\n    fileList: {\n      immediate: true,\n      handler(fileList) {\n        this.uploadFiles = fileList.map(item => {\n          item.uid = item.uid || (Date.now() + this.tempIndex++);\n          item.status = item.status || 'success';\n          return item;\n        });\n      }\n    }\n  },\n\n  methods: {\n    handleStart(rawFile) {\n      rawFile.uid = Date.now() + this.tempIndex++;\n      let file = {\n        status: 'ready',\n        name: rawFile.name,\n        size: rawFile.size,\n        percentage: 0,\n        uid: rawFile.uid,\n        raw: rawFile\n      };\n\n      if (this.listType === 'picture-card' || this.listType === 'picture') {\n        try {\n          file.url = URL.createObjectURL(rawFile);\n        } catch (err) {\n          console.error('[Element Error][Upload]', err);\n          return;\n        }\n      }\n\n      this.uploadFiles.push(file);\n      this.onChange(file, this.uploadFiles);\n    },\n    handleProgress(ev, rawFile) {\n      const file = this.getFile(rawFile);\n      this.onProgress(ev, file, this.uploadFiles);\n      file.status = 'uploading';\n      file.percentage = ev.percent || 0;\n    },\n    handleSuccess(res, rawFile) {\n      const file = this.getFile(rawFile);\n\n      if (file) {\n        file.status = 'success';\n        file.response = res;\n\n        this.onSuccess(res, file, this.uploadFiles);\n        this.onChange(file, this.uploadFiles);\n      }\n    },\n    handleError(err, rawFile) {\n      const file = this.getFile(rawFile);\n      const fileList = this.uploadFiles;\n\n      file.status = 'fail';\n\n      fileList.splice(fileList.indexOf(file), 1);\n\n      this.onError(err, file, this.uploadFiles);\n      this.onChange(file, this.uploadFiles);\n    },\n    handleRemove(file, raw) {\n      if (raw) {\n        file = this.getFile(raw);\n      }\n      let doRemove = () => {\n        this.abort(file);\n        let fileList = this.uploadFiles;\n        fileList.splice(fileList.indexOf(file), 1);\n        this.onRemove(file, fileList);\n      };\n\n      if (!this.beforeRemove) {\n        doRemove();\n      } else if (typeof this.beforeRemove === 'function') {\n        const before = this.beforeRemove(file, this.uploadFiles);\n        if (before && before.then) {\n          before.then(() => {\n            doRemove();\n          }, noop);\n        } else if (before !== false) {\n          doRemove();\n        }\n      }\n    },\n    getFile(rawFile) {\n      let fileList = this.uploadFiles;\n      let target;\n      fileList.every(item => {\n        target = rawFile.uid === item.uid ? item : null;\n        return !target;\n      });\n      return target;\n    },\n    abort(file) {\n      this.$refs['upload-inner'].abort(file);\n    },\n    clearFiles() {\n      this.uploadFiles = [];\n    },\n    submit() {\n      this.uploadFiles\n        .filter(file => file.status === 'ready')\n        .forEach(file => {\n          this.$refs['upload-inner'].upload(file.raw);\n        });\n    },\n    getMigratingConfig() {\n      return {\n        props: {\n          'default-file-list': 'default-file-list is renamed to file-list.',\n          'show-upload-list': 'show-upload-list is renamed to show-file-list.',\n          'thumbnail-mode': 'thumbnail-mode has been deprecated, you can implement the same effect according to this case: http://element.eleme.io/#/zh-CN/component/upload#yong-hu-tou-xiang-shang-chuan'\n        }\n      };\n    }\n  },\n\n  beforeDestroy() {\n    this.uploadFiles.forEach(file => {\n      if (file.url && file.url.indexOf('blob:') === 0) {\n        URL.revokeObjectURL(file.url);\n      }\n    });\n  },\n\n  render(h) {\n    let uploadList;\n\n    if (this.showFileList) {\n      uploadList = (\n        <UploadList\n          disabled={this.uploadDisabled}\n          listType={this.listType}\n          files={this.uploadFiles}\n          on-remove={this.handleRemove}\n          handlePreview={this.onPreview}>\n          {\n            (props) => {\n              if (this.$scopedSlots.file) {\n                return this.$scopedSlots.file({\n                  file: props.file\n                });\n              }\n            }\n          }\n        </UploadList>\n      );\n    }\n\n    const uploadData = {\n      props: {\n        type: this.type,\n        drag: this.drag,\n        action: this.action,\n        multiple: this.multiple,\n        'before-upload': this.beforeUpload,\n        'with-credentials': this.withCredentials,\n        headers: this.headers,\n        name: this.name,\n        data: this.data,\n        accept: this.accept,\n        fileList: this.uploadFiles,\n        autoUpload: this.autoUpload,\n        listType: this.listType,\n        disabled: this.uploadDisabled,\n        limit: this.limit,\n        'on-exceed': this.onExceed,\n        'on-start': this.handleStart,\n        'on-progress': this.handleProgress,\n        'on-success': this.handleSuccess,\n        'on-error': this.handleError,\n        'on-preview': this.onPreview,\n        'on-remove': this.handleRemove,\n        'http-request': this.httpRequest\n      },\n      ref: 'upload-inner'\n    };\n\n    const trigger = this.$slots.trigger || this.$slots.default;\n    const uploadComponent = <upload {...uploadData}>{trigger}</upload>;\n\n    return (\n      <div>\n        { this.listType === 'picture-card' ? uploadList : ''}\n        {\n          this.$slots.trigger\n            ? [uploadComponent, this.$slots.default]\n            : uploadComponent\n        }\n        {this.$slots.tip}\n        { this.listType !== 'picture-card' ? uploadList : ''}\n      </div>\n    );\n  }\n};\n</script>\n"
  },
  {
    "path": "packages/upload/src/upload-dragger.vue",
    "content": "<template>\n  <div\n    class=\"el-upload-dragger\"\n    :class=\"{\n      'is-dragover': dragover\n    }\"\n    @drop.prevent=\"onDrop\"\n    @dragover.prevent=\"onDragover\"\n    @dragleave.prevent=\"dragover = false\"\n  >\n    <slot></slot>\n  </div>\n</template>\n<script>\n  export default {\n    name: 'ElUploadDrag',\n    props: {\n      disabled: Boolean\n    },\n    inject: {\n      uploader: {\n        default: ''\n      }\n    },\n    data() {\n      return {\n        dragover: false\n      };\n    },\n    methods: {\n      onDragover() {\n        if (!this.disabled) {\n          this.dragover = true;\n        }\n      },\n      onDrop(e) {\n        if (this.disabled || !this.uploader) return;\n        const accept = this.uploader.accept;\n        this.dragover = false;\n        if (!accept) {\n          this.$emit('file', e.dataTransfer.files);\n          return;\n        }\n        this.$emit('file', [].slice.call(e.dataTransfer.files).filter(file => {\n          const { type, name } = file;\n          const extension = name.indexOf('.') > -1\n            ? `.${ name.split('.').pop() }`\n            : '';\n          const baseType = type.replace(/\\/.*$/, '');\n          return accept.split(',')\n            .map(type => type.trim())\n            .filter(type => type)\n            .some(acceptedType => {\n              if (/\\..+$/.test(acceptedType)) {\n                return extension === acceptedType;\n              }\n              if (/\\/\\*$/.test(acceptedType)) {\n                return baseType === acceptedType.replace(/\\/\\*$/, '');\n              }\n              if (/^[^\\/]+\\/[^\\/]+$/.test(acceptedType)) {\n                return type === acceptedType;\n              }\n              return false;\n            });\n        }));\n      }\n    }\n  };\n</script>\n\n"
  },
  {
    "path": "packages/upload/src/upload-list.vue",
    "content": "<template>\n  <transition-group\n    tag=\"ul\"\n    :class=\"[\n      'el-upload-list',\n      'el-upload-list--' + listType,\n      { 'is-disabled': disabled }\n    ]\"\n    name=\"el-list\"\n  >\n    <li\n      v-for=\"file in files\"\n      :class=\"['el-upload-list__item', 'is-' + file.status, focusing ? 'focusing' : '']\"\n      :key=\"file.uid\"\n      tabindex=\"0\"\n      @keydown.delete=\"!disabled && $emit('remove', file)\"\n      @focus=\"focusing = true\"\n      @blur=\"focusing = false\"\n      @click=\"focusing = false\"\n    >\n      <slot :file=\"file\">\n        <img\n          class=\"el-upload-list__item-thumbnail\"\n          v-if=\"file.status !== 'uploading' && ['picture-card', 'picture'].indexOf(listType) > -1\"\n          :src=\"file.url\" alt=\"\"\n        >\n        <a class=\"el-upload-list__item-name\" @click=\"handleClick(file)\">\n          <i class=\"el-icon-document\"></i>{{file.name}}\n        </a>\n        <label class=\"el-upload-list__item-status-label\">\n          <i :class=\"{\n            'el-icon-upload-success': true,\n            'el-icon-circle-check': listType === 'text',\n            'el-icon-check': ['picture-card', 'picture'].indexOf(listType) > -1\n          }\"></i>\n        </label>\n        <i class=\"el-icon-close\" v-if=\"!disabled\" @click=\"$emit('remove', file)\"></i>\n        <i class=\"el-icon-close-tip\" v-if=\"!disabled\">{{ t('el.upload.deleteTip') }}</i> <!--因为close按钮只在li:focus的时候 display, li blur后就不存在了，所以键盘导航时永远无法 focus到 close按钮上-->\n        <el-progress\n          v-if=\"file.status === 'uploading'\"\n          :type=\"listType === 'picture-card' ? 'circle' : 'line'\"\n          :stroke-width=\"listType === 'picture-card' ? 6 : 2\"\n          :percentage=\"parsePercentage(file.percentage)\">\n        </el-progress>\n        <span class=\"el-upload-list__item-actions\" v-if=\"listType === 'picture-card'\">\n          <span\n            class=\"el-upload-list__item-preview\"\n            v-if=\"handlePreview && listType === 'picture-card'\"\n            @click=\"handlePreview(file)\"\n          >\n            <i class=\"el-icon-zoom-in\"></i>\n          </span>\n          <span\n            v-if=\"!disabled\"\n            class=\"el-upload-list__item-delete\"\n            @click=\"$emit('remove', file)\"\n          >\n            <i class=\"el-icon-delete\"></i>\n          </span>\n        </span>\n      </slot>\n    </li>\n  </transition-group>\n</template>\n<script>\n  import Locale from 'element-ui/src/mixins/locale';\n  import ElProgress from 'element-ui/packages/progress';\n\n  export default {\n\n    name: 'ElUploadList',\n\n    mixins: [Locale],\n\n    data() {\n      return {\n        focusing: false\n      };\n    },\n    components: { ElProgress },\n\n    props: {\n      files: {\n        type: Array,\n        default() {\n          return [];\n        }\n      },\n      disabled: {\n        type: Boolean,\n        default: false\n      },\n      handlePreview: Function,\n      listType: String\n    },\n    methods: {\n      parsePercentage(val) {\n        return parseInt(val, 10);\n      },\n      handleClick(file) {\n        this.handlePreview && this.handlePreview(file);\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "packages/upload/src/upload.vue",
    "content": "<script>\nimport ajax from './ajax';\nimport UploadDragger from './upload-dragger.vue';\n\nexport default {\n  inject: ['uploader'],\n  components: {\n    UploadDragger\n  },\n  props: {\n    type: String,\n    action: {\n      type: String,\n      required: true\n    },\n    name: {\n      type: String,\n      default: 'file'\n    },\n    data: Object,\n    headers: Object,\n    withCredentials: Boolean,\n    multiple: Boolean,\n    accept: String,\n    onStart: Function,\n    onProgress: Function,\n    onSuccess: Function,\n    onError: Function,\n    beforeUpload: Function,\n    drag: Boolean,\n    onPreview: {\n      type: Function,\n      default: function() {}\n    },\n    onRemove: {\n      type: Function,\n      default: function() {}\n    },\n    fileList: Array,\n    autoUpload: Boolean,\n    listType: String,\n    httpRequest: {\n      type: Function,\n      default: ajax\n    },\n    disabled: Boolean,\n    limit: Number,\n    onExceed: Function\n  },\n\n  data() {\n    return {\n      mouseover: false,\n      reqs: {}\n    };\n  },\n\n  methods: {\n    isImage(str) {\n      return str.indexOf('image') !== -1;\n    },\n    handleChange(ev) {\n      const files = ev.target.files;\n\n      if (!files) return;\n      this.uploadFiles(files);\n    },\n    uploadFiles(files) {\n      if (this.limit && this.fileList.length + files.length > this.limit) {\n        this.onExceed && this.onExceed(files, this.fileList);\n        return;\n      }\n\n      let postFiles = Array.prototype.slice.call(files);\n      if (!this.multiple) { postFiles = postFiles.slice(0, 1); }\n\n      if (postFiles.length === 0) { return; }\n\n      postFiles.forEach(rawFile => {\n        this.onStart(rawFile);\n        if (this.autoUpload) this.upload(rawFile);\n      });\n    },\n    upload(rawFile) {\n      this.$refs.input.value = null;\n\n      if (!this.beforeUpload) {\n        return this.post(rawFile);\n      }\n\n      const before = this.beforeUpload(rawFile);\n      if (before && before.then) {\n        before.then(processedFile => {\n          const fileType = Object.prototype.toString.call(processedFile);\n\n          if (fileType === '[object File]' || fileType === '[object Blob]') {\n            if (fileType === '[object Blob]') {\n              processedFile = new File([processedFile], rawFile.name, {\n                type: rawFile.type\n              });\n            }\n            for (const p in rawFile) {\n              if (rawFile.hasOwnProperty(p)) {\n                processedFile[p] = rawFile[p];\n              }\n            }\n            this.post(processedFile);\n          } else {\n            this.post(rawFile);\n          }\n        }, () => {\n          this.onRemove(null, rawFile);\n        });\n      } else if (before !== false) {\n        this.post(rawFile);\n      } else {\n        this.onRemove(null, rawFile);\n      }\n    },\n    abort(file) {\n      const { reqs } = this;\n      if (file) {\n        let uid = file;\n        if (file.uid) uid = file.uid;\n        if (reqs[uid]) {\n          reqs[uid].abort();\n        }\n      } else {\n        Object.keys(reqs).forEach((uid) => {\n          if (reqs[uid]) reqs[uid].abort();\n          delete reqs[uid];\n        });\n      }\n    },\n    post(rawFile) {\n      const { uid } = rawFile;\n      const options = {\n        headers: this.headers,\n        withCredentials: this.withCredentials,\n        file: rawFile,\n        data: this.data,\n        filename: this.name,\n        action: this.action,\n        onProgress: e => {\n          this.onProgress(e, rawFile);\n        },\n        onSuccess: res => {\n          this.onSuccess(res, rawFile);\n          delete this.reqs[uid];\n        },\n        onError: err => {\n          this.onError(err, rawFile);\n          delete this.reqs[uid];\n        }\n      };\n      const req = this.httpRequest(options);\n      this.reqs[uid] = req;\n      if (req && req.then) {\n        req.then(options.onSuccess, options.onError);\n      }\n    },\n    handleClick() {\n      if (!this.disabled) {\n        this.$refs.input.value = null;\n        this.$refs.input.click();\n      }\n    },\n    handleKeydown(e) {\n      if (e.target !== e.currentTarget) return;\n      if (e.keyCode === 13 || e.keyCode === 32) {\n        this.handleClick();\n      }\n    }\n  },\n\n  render(h) {\n    let {\n      handleClick,\n      drag,\n      name,\n      handleChange,\n      multiple,\n      accept,\n      listType,\n      uploadFiles,\n      disabled,\n      handleKeydown\n    } = this;\n    const data = {\n      class: {\n        'el-upload': true\n      },\n      on: {\n        click: handleClick,\n        keydown: handleKeydown\n      }\n    };\n    data.class[`el-upload--${listType}`] = true;\n    return (\n      <div {...data} tabindex=\"0\" >\n        {\n          drag\n            ? <upload-dragger disabled={disabled} on-file={uploadFiles}>{this.$slots.default}</upload-dragger>\n            : this.$slots.default\n        }\n        <input class=\"el-upload__input\" type=\"file\" ref=\"input\" name={name} on-change={handleChange} multiple={multiple} accept={accept}></input>\n      </div>\n    );\n  }\n};\n</script>\n"
  },
  {
    "path": "src/directives/mousewheel.js",
    "content": "import normalizeWheel from 'normalize-wheel';\n\nconst isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n\nconst mousewheel = function(element, callback) {\n  if (element && element.addEventListener) {\n    element.addEventListener(isFirefox ? 'DOMMouseScroll' : 'mousewheel', function(event) {\n      const normalized = normalizeWheel(event);\n      callback && callback.apply(this, [event, normalized]);\n    });\n  }\n};\n\nexport default {\n  bind(el, binding) {\n    mousewheel(el, binding.value);\n  }\n};\n"
  },
  {
    "path": "src/directives/repeat-click.js",
    "content": "import { once, on } from 'element-ui/src/utils/dom';\nimport { isMac } from 'element-ui/src/utils/util';\n\nexport default {\n  bind(el, binding, vnode) {\n    let interval = null;\n    let startTime;\n    const maxIntervals = isMac() ? 100 : 200;\n    const handler = () => vnode.context[binding.expression].apply();\n    const clear = () => {\n      if (Date.now() - startTime < maxIntervals) {\n        handler();\n      }\n      clearInterval(interval);\n      interval = null;\n    };\n\n    on(el, 'mousedown', (e) => {\n      if (e.button !== 0) return;\n      startTime = Date.now();\n      once(document, 'mouseup', clear);\n      clearInterval(interval);\n      interval = setInterval(handler, maxIntervals);\n    });\n  }\n};\n"
  },
  {
    "path": "src/index.js",
    "content": "/* Automatically generated by './build/bin/build-entry.js' */\n\nimport Pagination from '../packages/pagination/index.js';\nimport Dialog from '../packages/dialog/index.js';\nimport Autocomplete from '../packages/autocomplete/index.js';\nimport Dropdown from '../packages/dropdown/index.js';\nimport DropdownMenu from '../packages/dropdown-menu/index.js';\nimport DropdownItem from '../packages/dropdown-item/index.js';\nimport Menu from '../packages/menu/index.js';\nimport Submenu from '../packages/submenu/index.js';\nimport MenuItem from '../packages/menu-item/index.js';\nimport MenuItemGroup from '../packages/menu-item-group/index.js';\nimport Input from '../packages/input/index.js';\nimport InputNumber from '../packages/input-number/index.js';\nimport Radio from '../packages/radio/index.js';\nimport RadioGroup from '../packages/radio-group/index.js';\nimport RadioButton from '../packages/radio-button/index.js';\nimport Checkbox from '../packages/checkbox/index.js';\nimport CheckboxButton from '../packages/checkbox-button/index.js';\nimport CheckboxGroup from '../packages/checkbox-group/index.js';\nimport Switch from '../packages/switch/index.js';\nimport Select from '../packages/select/index.js';\nimport Option from '../packages/option/index.js';\nimport OptionGroup from '../packages/option-group/index.js';\nimport Button from '../packages/button/index.js';\nimport ButtonGroup from '../packages/button-group/index.js';\nimport Table from '../packages/table/index.js';\nimport TableColumn from '../packages/table-column/index.js';\nimport DatePicker from '../packages/date-picker/index.js';\nimport TimeSelect from '../packages/time-select/index.js';\nimport TimePicker from '../packages/time-picker/index.js';\nimport Popover from '../packages/popover/index.js';\nimport Tooltip from '../packages/tooltip/index.js';\nimport MessageBox from '../packages/message-box/index.js';\nimport Breadcrumb from '../packages/breadcrumb/index.js';\nimport BreadcrumbItem from '../packages/breadcrumb-item/index.js';\nimport Form from '../packages/form/index.js';\nimport FormItem from '../packages/form-item/index.js';\nimport Tabs from '../packages/tabs/index.js';\nimport TabPane from '../packages/tab-pane/index.js';\nimport Tag from '../packages/tag/index.js';\nimport Tree from '../packages/tree/index.js';\nimport Alert from '../packages/alert/index.js';\nimport Notification from '../packages/notification/index.js';\nimport Slider from '../packages/slider/index.js';\nimport Loading from '../packages/loading/index.js';\nimport Icon from '../packages/icon/index.js';\nimport Row from '../packages/row/index.js';\nimport Col from '../packages/col/index.js';\nimport Upload from '../packages/upload/index.js';\nimport Progress from '../packages/progress/index.js';\nimport Spinner from '../packages/spinner/index.js';\nimport Message from '../packages/message/index.js';\nimport Badge from '../packages/badge/index.js';\nimport Card from '../packages/card/index.js';\nimport Rate from '../packages/rate/index.js';\nimport Steps from '../packages/steps/index.js';\nimport Step from '../packages/step/index.js';\nimport Carousel from '../packages/carousel/index.js';\nimport Scrollbar from '../packages/scrollbar/index.js';\nimport CarouselItem from '../packages/carousel-item/index.js';\nimport Collapse from '../packages/collapse/index.js';\nimport CollapseItem from '../packages/collapse-item/index.js';\nimport Cascader from '../packages/cascader/index.js';\nimport ColorPicker from '../packages/color-picker/index.js';\nimport Transfer from '../packages/transfer/index.js';\nimport Container from '../packages/container/index.js';\nimport Header from '../packages/header/index.js';\nimport Aside from '../packages/aside/index.js';\nimport Main from '../packages/main/index.js';\nimport Footer from '../packages/footer/index.js';\nimport Timeline from '../packages/timeline/index.js';\nimport TimelineItem from '../packages/timeline-item/index.js';\nimport Link from '../packages/link/index.js';\nimport Divider from '../packages/divider/index.js';\nimport Image from '../packages/image/index.js';\nimport Calendar from '../packages/calendar/index.js';\nimport Backtop from '../packages/backtop/index.js';\nimport InfiniteScroll from '../packages/infinite-scroll/index.js';\nimport PageHeader from '../packages/page-header/index.js';\nimport CascaderPanel from '../packages/cascader-panel/index.js';\nimport Avatar from '../packages/avatar/index.js';\nimport Drawer from '../packages/drawer/index.js';\nimport Statistic from '../packages/statistic/index.js';\nimport Popconfirm from '../packages/popconfirm/index.js';\nimport Skeleton from '../packages/skeleton/index.js';\nimport SkeletonItem from '../packages/skeleton-item/index.js';\nimport Empty from '../packages/empty/index.js';\nimport Descriptions from '../packages/descriptions/index.js';\nimport DescriptionsItem from '../packages/descriptions-item/index.js';\nimport Result from '../packages/result/index.js';\nimport locale from 'element-ui/src/locale';\nimport CollapseTransition from 'element-ui/src/transitions/collapse-transition';\n\nconst components = [\n  Pagination,\n  Dialog,\n  Autocomplete,\n  Dropdown,\n  DropdownMenu,\n  DropdownItem,\n  Menu,\n  Submenu,\n  MenuItem,\n  MenuItemGroup,\n  Input,\n  InputNumber,\n  Radio,\n  RadioGroup,\n  RadioButton,\n  Checkbox,\n  CheckboxButton,\n  CheckboxGroup,\n  Switch,\n  Select,\n  Option,\n  OptionGroup,\n  Button,\n  ButtonGroup,\n  Table,\n  TableColumn,\n  DatePicker,\n  TimeSelect,\n  TimePicker,\n  Popover,\n  Tooltip,\n  Breadcrumb,\n  BreadcrumbItem,\n  Form,\n  FormItem,\n  Tabs,\n  TabPane,\n  Tag,\n  Tree,\n  Alert,\n  Slider,\n  Icon,\n  Row,\n  Col,\n  Upload,\n  Progress,\n  Spinner,\n  Badge,\n  Card,\n  Rate,\n  Steps,\n  Step,\n  Carousel,\n  Scrollbar,\n  CarouselItem,\n  Collapse,\n  CollapseItem,\n  Cascader,\n  ColorPicker,\n  Transfer,\n  Container,\n  Header,\n  Aside,\n  Main,\n  Footer,\n  Timeline,\n  TimelineItem,\n  Link,\n  Divider,\n  Image,\n  Calendar,\n  Backtop,\n  PageHeader,\n  CascaderPanel,\n  Avatar,\n  Drawer,\n  Statistic,\n  Popconfirm,\n  Skeleton,\n  SkeletonItem,\n  Empty,\n  Descriptions,\n  DescriptionsItem,\n  Result,\n  CollapseTransition\n];\n\nconst install = function(Vue, opts = {}) {\n  locale.use(opts.locale);\n  locale.i18n(opts.i18n);\n\n  components.forEach(component => {\n    Vue.component(component.name, component);\n  });\n\n  Vue.use(InfiniteScroll);\n  Vue.use(Loading.directive);\n\n  Vue.prototype.$ELEMENT = {\n    size: opts.size || '',\n    zIndex: opts.zIndex || 2000\n  };\n\n  Vue.prototype.$loading = Loading.service;\n  Vue.prototype.$msgbox = MessageBox;\n  Vue.prototype.$alert = MessageBox.alert;\n  Vue.prototype.$confirm = MessageBox.confirm;\n  Vue.prototype.$prompt = MessageBox.prompt;\n  Vue.prototype.$notify = Notification;\n  Vue.prototype.$message = Message;\n\n};\n\n/* istanbul ignore if */\nif (typeof window !== 'undefined' && window.Vue) {\n  install(window.Vue);\n}\n\nexport default {\n  version: '2.15.14',\n  locale: locale.use,\n  i18n: locale.i18n,\n  install,\n  CollapseTransition,\n  Loading,\n  Pagination,\n  Dialog,\n  Autocomplete,\n  Dropdown,\n  DropdownMenu,\n  DropdownItem,\n  Menu,\n  Submenu,\n  MenuItem,\n  MenuItemGroup,\n  Input,\n  InputNumber,\n  Radio,\n  RadioGroup,\n  RadioButton,\n  Checkbox,\n  CheckboxButton,\n  CheckboxGroup,\n  Switch,\n  Select,\n  Option,\n  OptionGroup,\n  Button,\n  ButtonGroup,\n  Table,\n  TableColumn,\n  DatePicker,\n  TimeSelect,\n  TimePicker,\n  Popover,\n  Tooltip,\n  MessageBox,\n  Breadcrumb,\n  BreadcrumbItem,\n  Form,\n  FormItem,\n  Tabs,\n  TabPane,\n  Tag,\n  Tree,\n  Alert,\n  Notification,\n  Slider,\n  Icon,\n  Row,\n  Col,\n  Upload,\n  Progress,\n  Spinner,\n  Message,\n  Badge,\n  Card,\n  Rate,\n  Steps,\n  Step,\n  Carousel,\n  Scrollbar,\n  CarouselItem,\n  Collapse,\n  CollapseItem,\n  Cascader,\n  ColorPicker,\n  Transfer,\n  Container,\n  Header,\n  Aside,\n  Main,\n  Footer,\n  Timeline,\n  TimelineItem,\n  Link,\n  Divider,\n  Image,\n  Calendar,\n  Backtop,\n  InfiniteScroll,\n  PageHeader,\n  CascaderPanel,\n  Avatar,\n  Drawer,\n  Statistic,\n  Popconfirm,\n  Skeleton,\n  SkeletonItem,\n  Empty,\n  Descriptions,\n  DescriptionsItem,\n  Result\n};\n"
  },
  {
    "path": "src/locale/format.js",
    "content": "import { hasOwn } from 'element-ui/src/utils/util';\n\nconst RE_NARGS = /(%|)\\{([0-9a-zA-Z_]+)\\}/g;\n/**\n *  String format template\n *  - Inspired:\n *    https://github.com/Matt-Esch/string-template/index.js\n */\nexport default function(Vue) {\n\n  /**\n   * template\n   *\n   * @param {String} string\n   * @param {Array} ...args\n   * @return {String}\n   */\n\n  function template(string, ...args) {\n    if (args.length === 1 && typeof args[0] === 'object') {\n      args = args[0];\n    }\n\n    if (!args || !args.hasOwnProperty) {\n      args = {};\n    }\n\n    return string.replace(RE_NARGS, (match, prefix, i, index) => {\n      let result;\n\n      if (string[index - 1] === '{' &&\n        string[index + match.length] === '}') {\n        return i;\n      } else {\n        result = hasOwn(args, i) ? args[i] : null;\n        if (result === null || result === undefined) {\n          return '';\n        }\n\n        return result;\n      }\n    });\n  }\n\n  return template;\n}\n"
  },
  {
    "path": "src/locale/index.js",
    "content": "import defaultLang from 'element-ui/src/locale/lang/zh-CN';\nimport Vue from 'vue';\nimport deepmerge from 'deepmerge';\nimport Format from './format';\n\nconst format = Format(Vue);\nlet lang = defaultLang;\nlet merged = false;\nlet i18nHandler = function() {\n  const vuei18n = Object.getPrototypeOf(this || Vue).$t;\n  if (typeof vuei18n === 'function' && !!Vue.locale) {\n    if (!merged) {\n      merged = true;\n      Vue.locale(\n        Vue.config.lang,\n        deepmerge(lang, Vue.locale(Vue.config.lang) || {}, { clone: true })\n      );\n    }\n    return vuei18n.apply(this, arguments);\n  }\n};\n\nexport const t = function(path, options) {\n  let value = i18nHandler.apply(this, arguments);\n  if (value !== null && value !== undefined) return value;\n\n  const array = path.split('.');\n  let current = lang;\n\n  for (let i = 0, j = array.length; i < j; i++) {\n    const property = array[i];\n    value = current[property];\n    if (i === j - 1) return format(value, options);\n    if (!value) return '';\n    current = value;\n  }\n  return '';\n};\n\nexport const use = function(l) {\n  lang = l || lang;\n};\n\nexport const i18n = function(fn) {\n  i18nHandler = fn || i18nHandler;\n};\n\nexport default { use, t, i18n };\n"
  },
  {
    "path": "src/locale/lang/af-ZA.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'Bevestig',\n      clear: 'Maak skoon'\n    },\n    datepicker: {\n      now: 'Nou',\n      today: 'Vandag',\n      cancel: 'Kanselleer',\n      clear: 'Maak skoon',\n      confirm: 'Bevestig',\n      selectDate: 'Kies datum',\n      selectTime: 'Kies tyd',\n      startDate: 'Begindatum',\n      startTime: 'Begintyd',\n      endDate: 'Einddatum',\n      endTime: 'Eindtyd',\n      prevYear: 'Previous Year', // to be translated\n      nextYear: 'Next Year', // to be translated\n      prevMonth: 'Previous Month', // to be translated\n      nextMonth: 'Next Month', // to be translated\n      year: 'Jaar',\n      month1: 'Jan',\n      month2: 'Feb',\n      month3: 'Mrt',\n      month4: 'Apr',\n      month5: 'Mei',\n      month6: 'Jun',\n      month7: 'Jul',\n      month8: 'Aug',\n      month9: 'Sep',\n      month10: 'Okt',\n      month11: 'Nov',\n      month12: 'Des',\n      // week: 'week',\n      weeks: {\n        sun: 'So',\n        mon: 'Ma',\n        tue: 'Di',\n        wed: 'Wo',\n        thu: 'Do',\n        fri: 'Vr',\n        sat: 'Sa'\n      },\n      months: {\n        jan: 'Jan',\n        feb: 'Feb',\n        mar: 'Mrt',\n        apr: 'Apr',\n        may: 'Mei',\n        jun: 'Jun',\n        jul: 'Jul',\n        aug: 'Aug',\n        sep: 'Sep',\n        oct: 'Okt',\n        nov: 'Nov',\n        dec: 'Des'\n      }\n    },\n    select: {\n      loading: 'Laai',\n      noMatch: 'Geen toepaslike data',\n      noData: 'Geen data',\n      placeholder: 'Kies'\n    },\n    cascader: {\n      noMatch: 'Geen toepaslike data',\n      loading: 'Laai',\n      placeholder: 'Kies',\n      noData: 'Geen data'\n    },\n    pagination: {\n      goto: 'Gaan na',\n      pagesize: '/page',\n      total: 'Totaal {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'Boodskap',\n      confirm: 'Bevestig',\n      cancel: 'Kanselleer',\n      error: 'Ongeldige invoer'\n    },\n    upload: {\n      deleteTip: 'press delete to remove', // to be translated\n      delete: 'Verwyder',\n      preview: 'Voorskou',\n      continue: 'Gaan voort'\n    },\n    table: {\n      emptyText: 'Geen Data',\n      confirmFilter: 'Bevestig',\n      resetFilter: 'Herstel',\n      clearFilter: 'Alles',\n      sumText: 'Som'\n    },\n    tree: {\n      emptyText: 'Geen Data'\n    },\n    transfer: {\n      noMatch: 'Geen toepaslike data',\n      noData: 'Geen data',\n      titles: ['Lys 1', 'Lys 2'],\n      filterPlaceholder: 'Voer sleutelwoord in',\n      noCheckedFormat: '{total} items',\n      hasCheckedFormat: '{checked}/{total} gekies'\n    },\n    image: {\n      error: 'FAILED' // to be translated\n    },\n    pageHeader: {\n      title: 'Back' // to be translated\n    },\n    popconfirm: {\n      confirmButtonText: 'Yes', // to be translated\n      cancelButtonText: 'No' // to be translated\n    },\n    empty: {\n      description: 'Geen Data'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/ar.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'موافق',\n      clear: 'إزالة'\n    },\n    datepicker: {\n      now: 'الآن',\n      today: 'اليوم',\n      cancel: 'إلغاء',\n      clear: 'إزالة',\n      confirm: 'موافق',\n      selectDate: 'إختر التاريخ',\n      selectTime: 'إختر الوقت',\n      startDate: 'تاريخ البدء',\n      startTime: 'وقت البدء',\n      endDate: 'تاريخ الإنتهاء',\n      endTime: 'وقت الإنتهاء',\n      prevYear: 'السنة السابقة',\n      nextYear: 'السنة التالية',\n      prevMonth: 'الشهر السابق',\n      nextMonth: 'الشهر التالي',\n      year: 'سنة',\n      month1: 'يناير',\n      month2: 'فبراير',\n      month3: 'مارس',\n      month4: 'ابريل',\n      month5: 'مايو',\n      month6: 'يونيو',\n      month7: 'يوليو',\n      month8: 'أغسطس',\n      month9: 'سبتمبر',\n      month10: 'أكتوبر',\n      month11: 'نوفمبر',\n      month12: 'ديسمبر',\n      week: 'أسبوع',\n      weeks: {\n        sun: 'الأحد',\n        mon: 'الأثنين',\n        tue: 'الثلاثاء',\n        wed: 'الأربعاء',\n        thu: 'الخميس',\n        fri: 'الجمعة',\n        sat: 'السبت'\n      },\n      months: {\n        jan: 'يناير',\n        feb: 'فبراير',\n        mar: 'مارس',\n        apr: 'أبريل',\n        may: 'مايو',\n        jun: 'يونيو',\n        jul: 'يوليو',\n        aug: 'أغسطس',\n        sep: 'سبتمبر',\n        oct: 'أكتوبر',\n        nov: 'نوفمبر',\n        dec: 'ديسمبر'\n      }\n    },\n    select: {\n      loading: 'جار التحميل',\n      noMatch: 'لايوجد بيانات مطابقة',\n      noData: 'لايوجد بيانات',\n      placeholder: 'إختر'\n    },\n    cascader: {\n      noMatch: 'لايوجد بيانات مطابقة',\n      loading: 'جار التحميل',\n      placeholder: 'إختر',\n      noData: 'لايوجد بيانات'\n    },\n    pagination: {\n      goto: 'أذهب إلى',\n      pagesize: '/صفحة',\n      total: 'الكل {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'العنوان',\n      confirm: 'موافق',\n      cancel: 'إلغاء',\n      error: 'مدخل غير صحيح'\n    },\n    upload: {\n      delete: 'حذف',\n      preview: 'عرض',\n      continue: 'إستمرار'\n    },\n    table: {\n      emptyText: 'لايوجد بيانات',\n      confirmFilter: 'تأكيد',\n      resetFilter: 'حذف',\n      clearFilter: 'الكل',\n      sumText: 'المجموع'\n    },\n    tree: {\n      emptyText: 'لايوجد بيانات'\n    },\n    transfer: {\n      noMatch: 'لايوجد بيانات مطابقة',\n      noData: 'لايوجد بيانات',\n      titles: ['قائمة 1', 'قائمة 2'],\n      filterPlaceholder: 'ادخل كلمة',\n      noCheckedFormat: '{total} عناصر',\n      hasCheckedFormat: '{checked}/{total} مختار'\n    },\n    image: {\n      error: 'فشل'\n    },\n    pageHeader: {\n      title: 'عودة'\n    },\n    popconfirm: {\n      confirmButtonText: 'تأكيد',\n      cancelButtonText: 'إلغاء'\n    },\n    empty: {\n      description: 'لايوجد بيانات'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/az.js",
    "content": "'use strict';\n\nexports.__esModule = true;\nexports.default = {\n  el: {\n    colorpicker: {\n      confirm: 'Təsdiqlə',\n      clear: 'Təmizlə'\n    },\n    datepicker: {\n      now: 'İndi',\n      today: 'Bugün',\n      cancel: 'İmtina',\n      clear: 'Təmizlə',\n      confirm: 'Təsdiqlə',\n      selectDate: 'Taxir seç',\n      selectTime: 'Saat seç',\n      startDate: 'Başlanğıc Tarixi',\n      startTime: 'Başlanğıc Saatı',\n      endDate: 'Bitmə Tarixi',\n      endTime: 'Bitmə Saatı',\n      prevYear: 'Öncəki il',\n      nextYear: 'Sonrakı il',\n      prevMonth: 'Öncəki ay',\n      nextMonth: 'Sonrakı ay',\n      year: '',\n      month1: 'Yanvar',\n      month2: 'Fevral',\n      month3: 'Mart',\n      month4: 'Aprel',\n      month5: 'May',\n      month6: 'İyun',\n      month7: 'İyul',\n      month8: 'Avqust',\n      month9: 'Sentyabr',\n      month10: 'Oktyabr',\n      month11: 'Noyabr',\n      month12: 'Dekabr',\n      // week: 'week',\n      weeks: {\n        sun: 'Baz',\n        mon: 'B.e',\n        tue: 'Ç.a',\n        wed: 'Çər',\n        thu: 'C.a',\n        fri: 'Cüm',\n        sat: 'Şən'\n      },\n      months: {\n        jan: 'Yan',\n        feb: 'Fev',\n        mar: 'Mar',\n        apr: 'Apr',\n        may: 'May',\n        jun: 'İyn',\n        jul: 'İyl',\n        aug: 'Avq',\n        sep: 'Sen',\n        oct: 'Okt',\n        nov: 'Noy',\n        dec: 'Dek'\n      }\n    },\n    select: {\n      loading: 'Yüklənir',\n      noMatch: 'Nəticə tapılmadı',\n      noData: 'Məlumat yoxdur',\n      placeholder: 'Seç'\n    },\n    cascader: {\n      noMatch: 'Nəticə tapılmadı',\n      loading: 'Yüklənir',\n      placeholder: 'Seç',\n      noData: 'Məlumat yoxdur'\n    },\n    pagination: {\n      goto: 'Get',\n      pagesize: '/səhifə',\n      total: 'Toplam {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'Mesaj',\n      confirm: 'Təsdiqlə',\n      cancel: 'İmtina',\n      error: 'Səhv'\n    },\n    upload: {\n      deleteTip: 'Sürüşdürmədən sonra sil',\n      delete: 'Sil',\n      preview: 'Ön izlə',\n      continue: 'Davam et'\n    },\n    table: {\n      emptyText: 'Məlumat yoxdur',\n      confirmFilter: 'Təsdiqlə',\n      resetFilter: 'Sıfırla',\n      clearFilter: 'Bütün',\n      sumText: 'Cəmi'\n    },\n    tree: {\n      emptyText: 'Məlumat yoxdur'\n    },\n    transfer: {\n      noMatch: 'Nəticə tapılmadı',\n      noData: 'Məlumat yoxdur',\n      titles: ['List 1', 'List 2'],\n      filterPlaceholder: 'Kəliməliri daxil et',\n      noCheckedFormat: '{total} ədəd',\n      hasCheckedFormat: '{checked}/{total} seçildi'\n    },\n    image: {\n      error: 'SƏHV' // to be translated\n    },\n    pageHeader: {\n      title: 'Geri' // to be translated\n    },\n    popconfirm: {\n      confirmButtonText: 'Bəli', // to be translated\n      cancelButtonText: 'Xeyr' // to be translated\n    },\n    empty: {\n      description: 'Məlumat yoxdur'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/bg.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'OK',\n      clear: 'Изчисти'\n    },\n    datepicker: {\n      now: 'Сега',\n      today: 'Днес',\n      cancel: 'Откажи',\n      clear: 'Изчисти',\n      confirm: 'ОК',\n      selectDate: 'Избери дата',\n      selectTime: 'Избери час',\n      startDate: 'Начална дата',\n      startTime: 'Начален час',\n      endDate: 'Крайна дата',\n      endTime: 'Краен час',\n      prevYear: 'Previous Year', // to be translated\n      nextYear: 'Next Year', // to be translated\n      prevMonth: 'Previous Month', // to be translated\n      nextMonth: 'Next Month', // to be translated\n      year: '',\n      month1: 'Януари',\n      month2: 'Февруари',\n      month3: 'Март',\n      month4: 'Април',\n      month5: 'Май',\n      month6: 'Юни',\n      month7: 'Юли',\n      month8: 'Август',\n      month9: 'Септември',\n      month10: 'Октомври',\n      month11: 'Ноември',\n      month12: 'Декември',\n      // week: 'Седмица',\n      weeks: {\n        sun: 'Нед',\n        mon: 'Пон',\n        tue: 'Вто',\n        wed: 'Сря',\n        thu: 'Чет',\n        fri: 'Пет',\n        sat: 'Съб'\n      },\n      months: {\n        jan: 'Яну',\n        feb: 'Фев',\n        mar: 'Мар',\n        apr: 'Апр',\n        may: 'Май',\n        jun: 'Юни',\n        jul: 'Юли',\n        aug: 'Авг',\n        sep: 'Сеп',\n        oct: 'Окт',\n        nov: 'Ное',\n        dec: 'Дек'\n      }\n    },\n    select: {\n      loading: 'Зареждане',\n      noMatch: 'Няма намерени',\n      noData: 'Няма данни',\n      placeholder: 'Избери'\n    },\n    cascader: {\n      noMatch: 'Няма намерени',\n      loading: 'Зареждане',\n      placeholder: 'Избери',\n      noData: 'Няма данни'\n    },\n    pagination: {\n      goto: 'Иди на',\n      pagesize: '/страница',\n      total: 'Общо {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'Съобщение',\n      confirm: 'ОК',\n      cancel: 'Откажи',\n      error: 'Невалидни данни'\n    },\n    upload: {\n      deleteTip: 'press delete to remove', // to be translated\n      delete: 'Изтрий',\n      preview: 'Прегледай',\n      continue: 'Продължи'\n    },\n    table: {\n      emptyText: 'Няма данни',\n      confirmFilter: 'Потвърди',\n      resetFilter: 'Изчисти',\n      clearFilter: 'Всички',\n      sumText: 'Sum' // to be translated\n    },\n    tree: {\n      emptyText: 'Няма данни'\n    },\n    transfer: {\n      noMatch: 'Няма намерени',\n      noData: 'Няма данни',\n      titles: ['List 1', 'List 2'], // to be translated\n      filterPlaceholder: 'Enter keyword', // to be translated\n      noCheckedFormat: '{total} items', // to be translated\n      hasCheckedFormat: '{checked}/{total} checked' // to be translated\n    },\n    image: {\n      error: 'FAILED' // to be translated\n    },\n    pageHeader: {\n      title: 'Back' // to be translated\n    },\n    popconfirm: {\n      confirmButtonText: 'Yes', // to be translated\n      cancelButtonText: 'No' // to be translated\n    },\n    empty: {\n      description: 'Няма данни'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/bn.js",
    "content": "'use strict';\n\nexports.__esModule = true;\nexports.default = {\n  el: {\n    colorpicker: {\n      confirm: 'নিশ্চিত',\n      clear: 'খালি'\n    },\n    datepicker: {\n      now: 'এখন',\n      today: 'আজকাল',\n      cancel: 'বাতিল করুন',\n      clear: 'খালি',\n      confirm: 'নিশ্চিত',\n      selectDate: 'তারিখ নির্বাচন করুন',\n      selectTime: 'নির্বাচনের সময়কাল',\n      startDate: 'শুরুর তারিখ',\n      startTime: 'শুরুর সময়',\n      endDate: 'শেষ তারিখ',\n      endTime: 'শেষ সময়',\n      prevYear: 'গত বছর',\n      nextYear: 'আগামী বছর',\n      prevMonth: 'গত মাসে',\n      nextMonth: 'পরের মাসে',\n      year: 'বছর',\n      month1: 'জানুয়ারি',\n      month2: 'ফেব্রুয়ারি',\n      month3: 'মার্চ',\n      month4: 'এপ্রিল',\n      month5: 'মে',\n      month6: 'জুন',\n      month7: 'জুলাই',\n      month8: 'আগস্ট',\n      month9: 'সেপ্টেম্বর',\n      month10: 'অক্টোবর',\n      month11: 'নভেম্বর',\n      month12: 'ডিসেম্বর',\n      // week: '周次',\n      weeks: {\n        sun: 'রবিবার',\n        mon: 'সোমবারে',\n        tue: 'মঙ্গলবার',\n        wed: 'বুধবার',\n        thu: 'বৃহস্পতিবার',\n        fri: 'শুক্রবার',\n        sat: 'শনিবার'\n      },\n      months: {\n        jan: 'জানুয়ারি',\n        feb: 'ফেব্রুয়ারি',\n        mar: 'মার্চ',\n        apr: 'এপ্রিল',\n        may: 'মে',\n        jun: 'জুন',\n        jul: 'জুলাই',\n        aug: 'আগস্ট',\n        sep: 'সেপ্টেম্বর',\n        oct: 'অক্টোবর',\n        nov: 'নভেম্বর',\n        dec: 'ডিসেম্বর'\n      }\n    },\n    select: {\n      loading: 'লোড হচ্ছে',\n      noMatch: 'কোন মিল তথ্য',\n      noData: 'কোন তথ্য নেই',\n      placeholder: 'পছন্দ কর'\n    },\n    cascader: {\n      noMatch: 'কোন মিল তথ্য',\n      loading: 'লোড হচ্ছে',\n      placeholder: 'পছন্দ কর',\n      noData: 'কোন তথ্য নেই'\n    },\n    pagination: {\n      goto: 'যাও',\n      pagesize: 'প্রবন্ধ/পৃষ্ঠা',\n      total: 'সর্বমোট {total} ফালা',\n      pageClassifier: 'পাতা'\n    },\n    messagebox: {\n      title: 'ইঙ্গিত',\n      confirm: 'নিশ্চিত',\n      cancel: 'বাতিল করুন',\n      error: 'প্রবেশ করা তথ্য অবৈধ!'\n    },\n    upload: {\n      deleteTip: 'অনুসারে delete মুছে ফেলা',\n      delete: 'মুছে ফেলা',\n      preview: 'ভিউ ইমেজ',\n      continue: 'আপলোড চালিয়ে যান'\n    },\n    table: {\n      emptyText: 'কোন তথ্য নেই',\n      confirmFilter: 'ছাঁকনি',\n      resetFilter: 'রিসেট',\n      clearFilter: 'সব',\n      sumText: 'মোট'\n    },\n    tree: {\n      emptyText: 'কোন তথ্য নেই'\n    },\n    transfer: {\n      noMatch: 'কোন মিল তথ্য',\n      noData: 'কোন তথ্য নেই',\n      titles: ['তালিকা 1', 'তালিকা 2'],\n      filterPlaceholder: 'অনুসন্ধান বিষয়বস্তু লিখুন',\n      noCheckedFormat: 'মোট {total} আইটেম',\n      hasCheckedFormat: 'নির্বাচিত {checked}/{total}  আইটেম'\n    },\n    image: {\n      error: 'লোড করতে ব্যর্থ'\n    },\n    pageHeader: {\n      title: 'প্রত্যাবর্তন'\n    },\n    popconfirm: {\n      confirmButtonText: 'নিশ্চিত',\n      cancelButtonText: 'বাতিল করুন'\n    },\n    empty: {\n      description: 'কোন তথ্য নেই'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/ca.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'Confirmar',\n      clear: 'Netejar'\n    },\n    datepicker: {\n      now: 'Ara',\n      today: 'Avui',\n      cancel: 'Cancel·lar',\n      clear: 'Netejar',\n      confirm: 'Confirmar',\n      selectDate: 'Seleccionar data',\n      selectTime: 'Seleccionar hora',\n      startDate: 'Data Inici',\n      startTime: 'Hora Inici',\n      endDate: 'Data Final',\n      endTime: 'Hora Final',\n      prevYear: 'Any anterior',\n      nextYear: 'Pròxim Any',\n      prevMonth: 'Mes anterior',\n      nextMonth: 'Pròxim Mes',\n      year: '',\n      month1: 'Gener',\n      month2: 'Febrer',\n      month3: 'Març',\n      month4: 'Abril',\n      month5: 'Maig',\n      month6: 'Juny',\n      month7: 'Juliol',\n      month8: 'Agost',\n      month9: 'Setembre',\n      month10: 'Octubre',\n      month11: 'Novembre',\n      month12: 'Desembre',\n      // week: 'setmana',\n      weeks: {\n        sun: 'Dg',\n        mon: 'Dl',\n        tue: 'Dt',\n        wed: 'Dc',\n        thu: 'Dj',\n        fri: 'Dv',\n        sat: 'Ds'\n      },\n      months: {\n        jan: 'Gen',\n        feb: 'Febr',\n        mar: 'Març',\n        apr: 'Abr',\n        may: 'Maig',\n        jun: 'Juny',\n        jul: 'Jul',\n        aug: 'Ag',\n        sep: 'Set',\n        oct: 'Oct',\n        nov: 'Nov',\n        dec: 'Des'\n      }\n    },\n    select: {\n      loading: 'Carregant',\n      noMatch: 'No hi ha dades que coincideixin',\n      noData: 'Sense Dades',\n      placeholder: 'Seleccionar'\n    },\n    cascader: {\n      noMatch: 'No hi ha dades que coincideixin',\n      loading: 'Carregant',\n      placeholder: 'Seleccionar',\n      noData: 'Sense Dades'\n    },\n    pagination: {\n      goto: 'Anar a',\n      pagesize: '/pagina',\n      total: 'Total {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      confirm: 'Acceptar',\n      cancel: 'Cancel·lar',\n      error: 'Entrada invàlida'\n    },\n    upload: {\n      deleteTip: 'premi eliminar per descartar',\n      delete: 'Eliminar',\n      preview: 'Vista Prèvia',\n      continue: 'Continuar'\n    },\n    table: {\n      emptyText: 'Sense Dades',\n      confirmFilter: 'Confirmar',\n      resetFilter: 'Netejar',\n      clearFilter: 'Tot',\n      sumText: 'Tot'\n    },\n    tree: {\n      emptyText: 'Sense Dades'\n    },\n    transfer: {\n      noMatch: 'No hi ha dades que coincideixin',\n      noData: 'Sense Dades',\n      titles: ['Llista 1', 'Llista 2'],\n      filterPlaceholder: 'Introdueix la paraula clau',\n      noCheckedFormat: '{total} ítems',\n      hasCheckedFormat: '{checked}/{total} seleccionats'\n    },\n    image: {\n      error: 'HA FALLAT'\n    },\n    pageHeader: {\n      title: 'Tornar'\n    },\n    popconfirm: {\n      confirmButtonText: 'Si',\n      cancelButtonText: 'No'\n    },\n    empty: {\n      description: 'Sense Dades'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/cs-CZ.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'OK',\n      clear: 'Vymazat'\n    },\n    datepicker: {\n      now: 'Teď',\n      today: 'Dnes',\n      cancel: 'Zrušit',\n      clear: 'Vymazat',\n      confirm: 'OK',\n      selectDate: 'Vybrat datum',\n      selectTime: 'Vybrat čas',\n      startDate: 'Datum začátku',\n      startTime: 'Čas začátku',\n      endDate: 'Datum konce',\n      endTime: 'Čas konce',\n      prevYear: 'Předchozí rok',\n      nextYear: 'Příští rok',\n      prevMonth: 'Předchozí měsíc',\n      nextMonth: 'Příští měsíc',\n      day: 'Den',\n      week: 'Týden',\n      month: 'Měsíc',\n      year: 'Rok',\n      month1: 'Leden',\n      month2: 'Únor',\n      month3: 'Březen',\n      month4: 'Duben',\n      month5: 'Květen',\n      month6: 'Červen',\n      month7: 'Červenec',\n      month8: 'Srpen',\n      month9: 'Září',\n      month10: 'Říjen',\n      month11: 'Listopad',\n      month12: 'Prosinec',\n      weeks: {\n        sun: 'Ne',\n        mon: 'Po',\n        tue: 'Út',\n        wed: 'St',\n        thu: 'Čt',\n        fri: 'Pá',\n        sat: 'So'\n      },\n      months: {\n        jan: 'Led',\n        feb: 'Úno',\n        mar: 'Bře',\n        apr: 'Dub',\n        may: 'Kvě',\n        jun: 'Čer',\n        jul: 'Čvc',\n        aug: 'Srp',\n        sep: 'Zář',\n        oct: 'Říj',\n        nov: 'Lis',\n        dec: 'Pro'\n      }\n    },\n    select: {\n      loading: 'Načítání',\n      noMatch: 'Žádná shoda',\n      noData: 'Žádná data',\n      placeholder: 'Vybrat'\n    },\n    cascader: {\n      noMatch: 'Žádná shoda',\n      loading: 'Načítání',\n      placeholder: 'Vybrat',\n      noData: 'Žádná data'\n    },\n    pagination: {\n      goto: 'Jít na',\n      pagesize: 'na stranu',\n      total: 'Celkem {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'Zpráva',\n      confirm: 'OK',\n      cancel: 'Zrušit',\n      error: 'Neplatný vstup'\n    },\n    upload: {\n      deleteTip: 'Stisknout pro smazání',\n      delete: 'Vymazat',\n      preview: 'Náhled',\n      continue: 'Pokračovat'\n    },\n    table: {\n      emptyText: 'Žádná data',\n      confirmFilter: 'Potvrdit',\n      resetFilter: 'Resetovat',\n      clearFilter: 'Vše',\n      sumText: 'Celkem'\n    },\n    tree: {\n      emptyText: 'Žádná data'\n    },\n    transfer: {\n      noMatch: 'Žádná shoda',\n      noData: 'Žádná data',\n      titles: ['Seznam 1', 'Seznam 2'],\n      filterPlaceholder: 'Klíčové slovo',\n      noCheckedFormat: '{total} položek',\n      hasCheckedFormat: '{checked}/{total} vybráno'\n    },\n    image: {\n      error: 'FAILED' // to be translated\n    },\n    pageHeader: {\n      title: 'Back' // to be translated\n    },\n    popconfirm: {\n      confirmButtonText: 'Yes', // to be translated\n      cancelButtonText: 'No' // to be translated\n    },\n    empty: {\n      description: 'Žádná data'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/da.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'OK',\n      clear: 'Ryd'\n    },\n    datepicker: {\n      now: 'Nu',\n      today: 'I dag',\n      cancel: 'Annuller',\n      clear: 'Ryd',\n      confirm: 'OK',\n      selectDate: 'Vælg dato',\n      selectTime: 'Vælg tidspunkt',\n      startDate: 'Startdato',\n      startTime: 'Starttidspunkt',\n      endDate: 'Slutdato',\n      endTime: 'Sluttidspunkt',\n      prevYear: 'Forrige år',\n      nextYear: 'Næste år',\n      prevMonth: 'Forrige måned',\n      nextMonth: 'Næste måned',\n      year: '',\n      month1: 'Januar',\n      month2: 'Februar',\n      month3: 'Marts',\n      month4: 'April',\n      month5: 'Maj',\n      month6: 'Juni',\n      month7: 'Juli',\n      month8: 'August',\n      month9: 'September',\n      month10: 'Oktober',\n      month11: 'November',\n      month12: 'December',\n      week: 'uge',\n      weeks: {\n        sun: 'Søn',\n        mon: 'Man',\n        tue: 'Tir',\n        wed: 'Ons',\n        thu: 'Tor',\n        fri: 'Fre',\n        sat: 'Lør'\n      },\n      months: {\n        jan: 'Jan',\n        feb: 'Feb',\n        mar: 'Mar',\n        apr: 'Apr',\n        may: 'Maj',\n        jun: 'Jun',\n        jul: 'Jul',\n        aug: 'Aug',\n        sep: 'Sep',\n        oct: 'Okt',\n        nov: 'Nov',\n        dec: 'Dec'\n      }\n    },\n    select: {\n      loading: 'Henter',\n      noMatch: 'Ingen matchende data',\n      noData: 'Ingen data',\n      placeholder: 'Vælg'\n    },\n    cascader: {\n      noMatch: 'Ingen matchende data',\n      loading: 'Henter',\n      placeholder: 'Vælg',\n      noData: 'Ingen data'\n    },\n    pagination: {\n      goto: 'Gå til',\n      pagesize: '/side',\n      total: 'Total {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      confirm: 'OK',\n      cancel: 'Annuller',\n      error: 'Ugyldig input'\n    },\n    upload: {\n      deleteTip: 'tryk slet for at fjerne',\n      delete: 'Slet',\n      preview: 'Forhåndsvisning',\n      continue: 'Fortsæt'\n    },\n    table: {\n      emptyText: 'Ingen data',\n      confirmFilter: 'Bekræft',\n      resetFilter: 'Nulstil',\n      clearFilter: 'Alle',\n      sumText: 'Sum'\n    },\n    tree: {\n      emptyText: 'Ingen data'\n    },\n    transfer: {\n      noMatch: 'Ingen matchende data',\n      noData: 'Ingen data',\n      titles: ['Liste 1', 'Liste 2'],\n      filterPlaceholder: 'Indtast søgeord',\n      noCheckedFormat: '{total} emner',\n      hasCheckedFormat: '{checked}/{total} valgt'\n    },\n    image: {\n      error: 'FAILED' // to be translated\n    },\n    pageHeader: {\n      title: 'Back' // to be translated\n    },\n    popconfirm: {\n      confirmButtonText: 'Yes', // to be translated\n      cancelButtonText: 'No' // to be translated\n    },\n    empty: {\n      description: 'Ingen data'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/de.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'OK',\n      clear: 'Leeren'\n    },\n    datepicker: {\n      now: 'Jetzt',\n      today: 'Heute',\n      cancel: 'Abbrechen',\n      clear: 'Leeren',\n      confirm: 'OK',\n      selectDate: 'Datum wählen',\n      selectTime: 'Uhrzeit wählen',\n      startDate: 'Startdatum',\n      startTime: 'Startzeit',\n      endDate: 'Enddatum',\n      endTime: 'Endzeit',\n      prevYear: 'Letztes Jahr',\n      nextYear: 'Nächtes Jahr',\n      prevMonth: 'Letzter Monat',\n      nextMonth: 'Nächster Monat',\n      day: 'Tag',\n      week: 'Woche',\n      month: 'Monat',\n      year: '',\n      month1: 'Januar',\n      month2: 'Februar',\n      month3: 'März',\n      month4: 'April',\n      month5: 'Mai',\n      month6: 'Juni',\n      month7: 'Juli',\n      month8: 'August',\n      month9: 'September',\n      month10: 'Oktober',\n      month11: 'November',\n      month12: 'Dezember',\n      weeks: {\n        sun: 'So',\n        mon: 'Mo',\n        tue: 'Di',\n        wed: 'Mi',\n        thu: 'Do',\n        fri: 'Fr',\n        sat: 'Sa'\n      },\n      months: {\n        jan: 'Jan',\n        feb: 'Feb',\n        mar: 'Mär',\n        apr: 'Apr',\n        may: 'Mai',\n        jun: 'Jun',\n        jul: 'Jul',\n        aug: 'Aug',\n        sep: 'Sep',\n        oct: 'Okt',\n        nov: 'Nov',\n        dec: 'Dez'\n      }\n    },\n    select: {\n      loading: 'Lädt.',\n      noMatch: 'Nichts gefunden.',\n      noData: 'Keine Daten',\n      placeholder: 'Daten wählen'\n    },\n    cascader: {\n      noMatch: 'Nichts gefunden.',\n      loading: 'Lädt.',\n      placeholder: 'Daten wählen',\n      noData: 'Keine Daten'\n    },\n    pagination: {\n      goto: 'Gehe zu',\n      pagesize: ' pro Seite',\n      total: 'Gesamt {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      confirm: 'OK',\n      cancel: 'Abbrechen',\n      error: 'Fehler'\n    },\n    upload: {\n      deleteTip: 'Klicke löschen zum entfernen',\n      delete: 'Löschen',\n      preview: 'Vorschau',\n      continue: 'Fortsetzen'\n    },\n    table: {\n      emptyText: 'Keine Daten',\n      confirmFilter: 'Anwenden',\n      resetFilter: 'Zurücksetzen',\n      clearFilter: 'Alles ',\n      sumText: 'Summe'\n    },\n    tree: {\n      emptyText: 'Keine Einträge'\n    },\n    transfer: {\n      noMatch: 'Nichts gefunden.',\n      noData: 'Keine Einträge',\n      titles: ['Liste 1', 'Liste 2'],\n      filterPlaceholder: 'Einträge filtern',\n      noCheckedFormat: '{total} Einträge',\n      hasCheckedFormat: '{checked}/{total} ausgewählt'\n    },\n    image: {\n      error: 'FAILED' // to be translated\n    },\n    pageHeader: {\n      title: 'Back' // to be translated\n    },\n    popconfirm: {\n      confirmButtonText: 'Yes', // to be translated\n      cancelButtonText: 'No' // to be translated\n    },\n    empty: {\n      description: 'Keine Daten'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/ee.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'OK',\n      clear: 'Tühjenda'\n    },\n    datepicker: {\n      now: 'Praegu',\n      today: 'Täna',\n      cancel: 'Tühista',\n      clear: 'Tühjenda',\n      confirm: 'OK',\n      selectDate: 'Vali kuupäev',\n      selectTime: 'Vali kellaaeg',\n      startDate: 'Alguskuupäev',\n      startTime: 'Algusaeg',\n      endDate: 'Lõpukuupäev',\n      endTime: 'Lõpuaeg',\n      prevYear: 'Eelmine aasta',\n      nextYear: 'Järgmine aasta',\n      prevMonth: 'Eelmine kuu',\n      nextMonth: 'Järgmine kuu',\n      year: '',\n      month1: 'Jaanuar',\n      month2: 'Veebruar',\n      month3: 'Märts',\n      month4: 'Aprill',\n      month5: 'Mai',\n      month6: 'Juuni',\n      month7: 'Juuli',\n      month8: 'August',\n      month9: 'September',\n      month10: 'Oktoober',\n      month11: 'November',\n      month12: 'Detsember',\n      // week: 'nädal',\n      weeks: {\n        sun: 'P',\n        mon: 'E',\n        tue: 'T',\n        wed: 'K',\n        thu: 'N',\n        fri: 'R',\n        sat: 'L'\n      },\n      months: {\n        jan: 'Jaan',\n        feb: 'Veeb',\n        mar: 'Mär',\n        apr: 'Apr',\n        may: 'Mai',\n        jun: 'Juun',\n        jul: 'Juul',\n        aug: 'Aug',\n        sep: 'Sept',\n        oct: 'Okt',\n        nov: 'Nov',\n        dec: 'Dets'\n      }\n    },\n    select: {\n      loading: 'Laadimine',\n      noMatch: 'Sobivad andmed puuduvad',\n      noData: 'Andmed puuduvad',\n      placeholder: 'Vali'\n    },\n    cascader: {\n      noMatch: 'Sobivad andmed puuduvad',\n      loading: 'Laadimine',\n      placeholder: 'Vali',\n      noData: 'Andmed puuduvad'\n    },\n    pagination: {\n      goto: 'Mine lehele',\n      pagesize: '/page',\n      total: 'Kokku {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'Teade',\n      confirm: 'OK',\n      cancel: 'Tühista',\n      error: 'Vigane sisend'\n    },\n    upload: {\n      deleteTip: 'Vajuta \"Kustuta\", et eemaldada',\n      delete: 'Kustuta',\n      preview: 'Eelvaate',\n      continue: 'Jätka'\n    },\n    table: {\n      emptyText: 'Andmed puuduvad',\n      confirmFilter: 'Kinnita',\n      resetFilter: 'Taasta',\n      clearFilter: 'Kõik',\n      sumText: 'Summa'\n    },\n    tree: {\n      emptyText: 'Andmed puuduvad'\n    },\n    transfer: {\n      noMatch: 'Sobivad andmed puuduvad',\n      noData: 'Andmed puuduvad',\n      titles: ['Loend 1', 'Loend 2'],\n      filterPlaceholder: 'Sisesta märksõna',\n      noCheckedFormat: '{total} objekti',\n      hasCheckedFormat: '{checked}/{total} valitud'\n    },\n    image: {\n      error: 'FAILED' // to be translated\n    },\n    pageHeader: {\n      title: 'Back' // to be translated\n    },\n    popconfirm: {\n      confirmButtonText: 'Yes', // to be translated\n      cancelButtonText: 'No' // to be translated\n    },\n    empty: {\n      description: 'Andmed puuduvad'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/el.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'Εντάξει',\n      clear: 'Καθαρισμός'\n    },\n    datepicker: {\n      now: 'Τώρα',\n      today: 'Σήμερα',\n      cancel: 'Ακύρωση',\n      clear: 'Καθαρισμός',\n      confirm: 'Εντάξει',\n      selectDate: 'Επιλέξτε ημέρα',\n      selectTime: 'Επιλέξτε ώρα',\n      startDate: 'Ημερομηνία Έναρξης',\n      startTime: 'Ωρα Έναρξης',\n      endDate: 'Ημερομηνία Λήξης',\n      endTime: 'Ωρα Λήξης',\n      prevYear: 'Προηγούμενο Έτος',\n      nextYear: 'Επόμενο Έτος',\n      prevMonth: 'Προηγούμενος Μήνας',\n      nextMonth: 'Επόμενος Μήνας',\n      year: 'Έτος',\n      month1: 'Ιανουάριος',\n      month2: 'Φεβρουάριος',\n      month3: 'Μάρτιος',\n      month4: 'Απρίλιος',\n      month5: 'Μάιος',\n      month6: 'Ιούνιος',\n      month7: 'Ιούλιος',\n      month8: 'Αύγουστος',\n      month9: 'Σεπτέμβριος',\n      month10: 'Οκτώβριος',\n      month11: 'Νοέμβριος',\n      month12: 'Δεκέμβριος',\n      // week: 'εβδομάδα',\n      weeks: {\n        sun: 'Κυρ',\n        mon: 'Δευ',\n        tue: 'Τρι',\n        wed: 'Τετ',\n        thu: 'Πεμ',\n        fri: 'Παρ',\n        sat: 'Σαβ'\n      },\n      months: {\n        jan: 'Ιαν',\n        feb: 'Φεβ',\n        mar: 'Μαρ',\n        apr: 'Απρ',\n        may: 'Μαϊ',\n        jun: 'Ιουν',\n        jul: 'Ιουλ',\n        aug: 'Αυγ',\n        sep: 'Σεπ',\n        oct: 'Οκτ',\n        nov: 'Νοε',\n        dec: 'Δεκ'\n      }\n    },\n    select: {\n      loading: 'Φόρτωση',\n      noMatch: 'Δεν βρέθηκαν αποτελέσματα',\n      noData: 'Χωρίς δεδομένα',\n      placeholder: 'Επιλογή'\n    },\n    cascader: {\n      noMatch: 'Δεν βρέθηκαν αποτελέσματα',\n      loading: 'Φόρτωση',\n      placeholder: 'Επιλογή',\n      noData: 'Χωρίς δεδομένα'\n    },\n    pagination: {\n      goto: 'Μετάβαση σε',\n      pagesize: '/σελίδα',\n      total: 'Σύνολο {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'Μήνυμα',\n      confirm: 'Εντάξει',\n      cancel: 'Ακύρωση',\n      error: 'Άκυρη εισαγωγή'\n    },\n    upload: {\n      deleteTip: 'Πάτησε Διαγραφή για αφαίρεση',\n      delete: 'Διαγραφή',\n      preview: 'Προεπισκόπηση',\n      continue: 'Συνέχεια'\n    },\n    table: {\n      emptyText: 'Χωρίς Δεδομένα',\n      confirmFilter: 'Επιβεβαίωση',\n      resetFilter: 'Επαναφορά',\n      clearFilter: 'Όλα',\n      sumText: 'Σύνολο'\n    },\n    tree: {\n      emptyText: 'Χωρίς Δεδομένα'\n    },\n    transfer: {\n      noMatch: 'Δεν βρέθηκαν αποτελέσματα',\n      noData: 'Χωρίς δεδομένα',\n      titles: ['Λίστα 1', 'Λίστα 2'],\n      filterPlaceholder: 'Αναζήτηση',\n      noCheckedFormat: '{total} Αντικείμενα',\n      hasCheckedFormat: '{checked}/{total} επιλεγμένα'\n    },\n    image: {\n      error: 'FAILED' // to be translated\n    },\n    pageHeader: {\n      title: 'Back' // to be translated\n    },\n    popconfirm: {\n      confirmButtonText: 'Yes', // to be translated\n      cancelButtonText: 'No' // to be translated\n    },\n    empty: {\n      description: 'Χωρίς Δεδομένα'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/en.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'OK',\n      clear: 'Clear'\n    },\n    datepicker: {\n      now: 'Now',\n      today: 'Today',\n      cancel: 'Cancel',\n      clear: 'Clear',\n      confirm: 'OK',\n      selectDate: 'Select date',\n      selectTime: 'Select time',\n      startDate: 'Start Date',\n      startTime: 'Start Time',\n      endDate: 'End Date',\n      endTime: 'End Time',\n      prevYear: 'Previous Year',\n      nextYear: 'Next Year',\n      prevMonth: 'Previous Month',\n      nextMonth: 'Next Month',\n      year: '',\n      month1: 'January',\n      month2: 'February',\n      month3: 'March',\n      month4: 'April',\n      month5: 'May',\n      month6: 'June',\n      month7: 'July',\n      month8: 'August',\n      month9: 'September',\n      month10: 'October',\n      month11: 'November',\n      month12: 'December',\n      week: 'week',\n      weeks: {\n        sun: 'Sun',\n        mon: 'Mon',\n        tue: 'Tue',\n        wed: 'Wed',\n        thu: 'Thu',\n        fri: 'Fri',\n        sat: 'Sat'\n      },\n      months: {\n        jan: 'Jan',\n        feb: 'Feb',\n        mar: 'Mar',\n        apr: 'Apr',\n        may: 'May',\n        jun: 'Jun',\n        jul: 'Jul',\n        aug: 'Aug',\n        sep: 'Sep',\n        oct: 'Oct',\n        nov: 'Nov',\n        dec: 'Dec'\n      }\n    },\n    select: {\n      loading: 'Loading',\n      noMatch: 'No matching data',\n      noData: 'No data',\n      placeholder: 'Select'\n    },\n    cascader: {\n      noMatch: 'No matching data',\n      loading: 'Loading',\n      placeholder: 'Select',\n      noData: 'No data'\n    },\n    pagination: {\n      goto: 'Go to',\n      pagesize: '/page',\n      total: 'Total {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'Message',\n      confirm: 'OK',\n      cancel: 'Cancel',\n      error: 'Illegal input'\n    },\n    upload: {\n      deleteTip: 'press delete to remove',\n      delete: 'Delete',\n      preview: 'Preview',\n      continue: 'Continue'\n    },\n    table: {\n      emptyText: 'No Data',\n      confirmFilter: 'Confirm',\n      resetFilter: 'Reset',\n      clearFilter: 'All',\n      sumText: 'Sum'\n    },\n    tree: {\n      emptyText: 'No Data'\n    },\n    transfer: {\n      noMatch: 'No matching data',\n      noData: 'No data',\n      titles: ['List 1', 'List 2'], // to be translated\n      filterPlaceholder: 'Enter keyword', // to be translated\n      noCheckedFormat: '{total} items', // to be translated\n      hasCheckedFormat: '{checked}/{total} checked' // to be translated\n    },\n    image: {\n      error: 'FAILED'\n    },\n    pageHeader: {\n      title: 'Back' // to be translated\n    },\n    popconfirm: {\n      confirmButtonText: 'Yes',\n      cancelButtonText: 'No'\n    },\n    empty: {\n      description: 'No Data'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/eo.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'Bone',\n      clear: 'Malplenigi'\n    },\n    datepicker: {\n      now: 'Nun',\n      today: 'Hodiaŭ',\n      cancel: 'Nuligi',\n      clear: 'Malplenigi',\n      confirm: 'Bone',\n      selectDate: 'Elektu daton',\n      selectTime: 'Elektu horon',\n      startDate: 'Komenca Dato',\n      startTime: 'Komenca Horo',\n      endDate: 'Fina Dato',\n      endTime: 'Fina Horo',\n      prevYear: 'Antaŭa Jaro',\n      nextYear: 'Sekva Jaro',\n      prevMonth: 'Antaŭa Monato',\n      nextMonth: 'Sekva Monato',\n      year: 'Jaro',\n      month1: 'Januaro',\n      month2: 'Februaro',\n      month3: 'Marto',\n      month4: 'Aprilo',\n      month5: 'Majo',\n      month6: 'Junio',\n      month7: 'Julio',\n      month8: 'Aŭgusto',\n      month9: 'Septembro',\n      month10: 'Oktobro',\n      month11: 'Novembro',\n      month12: 'Decembro',\n      week: 'Semajno',\n      weeks: {\n        sun: 'Dim',\n        mon: 'Lun',\n        tue: 'Mar',\n        wed: 'Mer',\n        thu: 'Ĵaŭ',\n        fri: 'Ven',\n        sat: 'Sab'\n      },\n      months: {\n        jan: 'Jan',\n        feb: 'Feb',\n        mar: 'Mar',\n        apr: 'Apr',\n        may: 'Maj',\n        jun: 'Jun',\n        jul: 'Jul',\n        aug: 'Aŭg',\n        sep: 'Sep',\n        oct: 'Okt',\n        nov: 'Nov',\n        dec: 'Dec'\n      }\n    },\n    select: {\n      loading: 'Ŝarĝante',\n      noMatch: 'Neniuj kongruaj datumoj',\n      noData: 'Neniuj datumoj',\n      placeholder: 'Bonvolu elekti'\n    },\n    cascader: {\n      noMatch: 'Neniuj kongruaj datumoj',\n      loading: 'Ŝarĝante',\n      placeholder: 'Bonvolu elekti',\n      noData: 'Neniuj datumoj'\n    },\n    pagination: {\n      goto: 'Iru al',\n      pagesize: '/ paĝo',\n      total: 'Entute {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'Mesaĝo',\n      confirm: 'Bone',\n      cancel: 'Nuligi',\n      error: 'Nevalida Enigo!'\n    },\n    upload: {\n      deleteTip: 'Premu \"Delete\" por forigi',\n      delete: 'Forigi',\n      preview: 'Antaŭrigardi',\n      continue: 'Daŭrigi'\n    },\n    table: {\n      emptyText: 'Neniuj datumoj',\n      confirmFilter: 'Konfirmi',\n      resetFilter: 'Restarigi',\n      clearFilter: 'Ĉiuj',\n      sumText: 'Sumo'\n    },\n    tree: {\n      emptyText: 'Neniuj datumoj'\n    },\n    transfer: {\n      noMatch: 'Neniuj kongruaj datumoj',\n      noData: 'Neniuj datumoj',\n      titles: ['Listo 1', 'Listo 2'],\n      filterPlaceholder: 'Enigu ŝlosilvorton',\n      noCheckedFormat: '{total} elementoj',\n      hasCheckedFormat: '{checked}/{total} elektitaj'\n    },\n    image: {\n      error: 'MALSUKCESIS'\n    },\n    pageHeader: {\n      title: 'Reen'\n    },\n    popconfirm: {\n      confirmButtonText: 'Yes', // to be translated\n      cancelButtonText: 'No' // to be translated\n    },\n    empty: {\n      description: 'Neniuj datumoj'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/es.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'Confirmar',\n      clear: 'Limpiar'\n    },\n    datepicker: {\n      now: 'Ahora',\n      today: 'Hoy',\n      cancel: 'Cancelar',\n      clear: 'Limpiar',\n      confirm: 'Confirmar',\n      selectDate: 'Seleccionar fecha',\n      selectTime: 'Seleccionar hora',\n      startDate: 'Fecha Incial',\n      startTime: 'Hora Inicial',\n      endDate: 'Fecha Final',\n      endTime: 'Hora Final',\n      prevYear: 'Año Anterior',\n      nextYear: 'Próximo Año',\n      prevMonth: 'Mes Anterior',\n      nextMonth: 'Próximo Mes',\n      year: '',\n      month1: 'enero',\n      month2: 'febrero',\n      month3: 'marzo',\n      month4: 'abril',\n      month5: 'mayo',\n      month6: 'junio',\n      month7: 'julio',\n      month8: 'agosto',\n      month9: 'septiembre',\n      month10: 'octubre',\n      month11: 'noviembre',\n      month12: 'diciembre',\n      // week: 'semana',\n      weeks: {\n        sun: 'dom',\n        mon: 'lun',\n        tue: 'mar',\n        wed: 'mié',\n        thu: 'jue',\n        fri: 'vie',\n        sat: 'sáb'\n      },\n      months: {\n        jan: 'ene',\n        feb: 'feb',\n        mar: 'mar',\n        apr: 'abr',\n        may: 'may',\n        jun: 'jun',\n        jul: 'jul',\n        aug: 'ago',\n        sep: 'sep',\n        oct: 'oct',\n        nov: 'nov',\n        dec: 'dic'\n      }\n    },\n    select: {\n      loading: 'Cargando',\n      noMatch: 'No hay datos que coincidan',\n      noData: 'Sin datos',\n      placeholder: 'Seleccionar'\n    },\n    cascader: {\n      noMatch: 'No hay datos que coincidan',\n      loading: 'Cargando',\n      placeholder: 'Seleccionar',\n      noData: 'Sin datos'\n    },\n    pagination: {\n      goto: 'Ir a',\n      pagesize: '/página',\n      total: 'Total {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      confirm: 'Aceptar',\n      cancel: 'Cancelar',\n      error: 'Entrada inválida'\n    },\n    upload: {\n      deleteTip: 'Pulse Eliminar para retirar',\n      delete: 'Eliminar',\n      preview: 'Vista Previa',\n      continue: 'Continuar'\n    },\n    table: {\n      emptyText: 'Sin Datos',\n      confirmFilter: 'Confirmar',\n      resetFilter: 'Reiniciar',\n      clearFilter: 'Limpiar',\n      sumText: 'Suma'\n    },\n    tree: {\n      emptyText: 'Sin Datos'\n    },\n    transfer: {\n      noMatch: 'No hay datos que coincidan',\n      noData: 'Sin datos',\n      titles: ['Lista 1', 'Lista 2'],\n      filterPlaceholder: 'Ingresar palabra clave',\n      noCheckedFormat: '{total} artículos',\n      hasCheckedFormat: '{checked}/{total} revisados'\n    },\n    image: {\n      error: 'HA FALLADO'\n    },\n    pageHeader: {\n      title: 'Volver'\n    },\n    popconfirm: {\n      confirmButtonText: 'Si',\n      cancelButtonText: 'No'\n    },\n    empty: {\n      description: 'Sin Datos'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/eu.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'Ados',\n      clear: 'Garbitu'\n    },\n    datepicker: {\n      now: 'Orain',\n      today: 'Gaur',\n      cancel: 'Utzi',\n      clear: 'Garbitu',\n      confirm: 'Ados',\n      selectDate: 'Hautatu data',\n      selectTime: 'Hautatu ordua',\n      startDate: 'Hasierako data',\n      startTime: 'Hasierako ordua',\n      endDate: 'Amaierako data',\n      endTime: 'Amaierako ordua',\n      prevYear: 'Aurreko urtea',\n      nextYear: 'Hurrengo urtea',\n      prevMonth: 'Aurreko hilabetea',\n      nextMonth: 'Hurrengo hilabetea',\n      year: '',\n      month1: 'Urtarrila',\n      month2: 'Otsaila',\n      month3: 'Martxoa',\n      month4: 'Apirila',\n      month5: 'Maiatza',\n      month6: 'Ekaina',\n      month7: 'Uztaila',\n      month8: 'Abuztua',\n      month9: 'Iraila',\n      month10: 'Urria',\n      month11: 'Azaroa',\n      month12: 'Abendua',\n      // week: 'astea',\n      weeks: {\n        sun: 'ig.',\n        mon: 'al.',\n        tue: 'ar.',\n        wed: 'az.',\n        thu: 'og.',\n        fri: 'ol.',\n        sat: 'lr.'\n      },\n      months: {\n        jan: 'urt',\n        feb: 'ots',\n        mar: 'mar',\n        apr: 'api',\n        may: 'mai',\n        jun: 'eka',\n        jul: 'uzt',\n        aug: 'abu',\n        sep: 'ira',\n        oct: 'urr',\n        nov: 'aza',\n        dec: 'abe'\n      }\n    },\n    select: {\n      loading: 'Kargatzen',\n      noMatch: 'Bat datorren daturik ez',\n      noData: 'Daturik ez',\n      placeholder: 'Hautatu'\n    },\n    cascader: {\n      noMatch: 'Bat datorren daturik ez',\n      loading: 'Kargatzen',\n      placeholder: 'Hautatu',\n      noData: 'Daturik ez'\n    },\n    pagination: {\n      goto: 'Joan',\n      pagesize: '/orria',\n      total: 'Guztira {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'Mezua',\n      confirm: 'Ados',\n      cancel: 'Utzi',\n      error: 'Sarrera baliogabea'\n    },\n    upload: {\n      deleteTip: 'sakatu Ezabatu kentzeko',\n      delete: 'Ezabatu',\n      preview: 'Aurrebista',\n      continue: 'Jarraitu'\n    },\n    table: {\n      emptyText: 'Daturik ez',\n      confirmFilter: 'Baieztatu',\n      resetFilter: 'Berrezarri',\n      clearFilter: 'Guztia',\n      sumText: 'Batura'\n    },\n    tree: {\n      emptyText: 'Daturik ez'\n    },\n    transfer: {\n      noMatch: 'Bat datorren daturik ez',\n      noData: 'Daturik ez',\n      titles: ['Zerrenda 1', 'Zerrenda 2'], // to be translated\n      filterPlaceholder: 'Sartu gako-hitza', // to be translated\n      noCheckedFormat: '{total} elementu', // to be translated\n      hasCheckedFormat: '{checked}/{total} hautatuta' // to be translated\n    },\n    image: {\n      error: 'FAILED' // to be translated\n    },\n    pageHeader: {\n      title: 'Back' // to be translated\n    },\n    popconfirm: {\n      confirmButtonText: 'Yes', // to be translated\n      cancelButtonText: 'No' // to be translated\n    },\n    empty: {\n      description: 'Daturik ez'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/fa.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'باشد',\n      clear: 'حذف'\n    },\n    datepicker: {\n      now: 'اکنون',\n      today: 'امروز',\n      cancel: 'لغو',\n      clear: 'حذف',\n      confirm: 'باشه',\n      selectDate: 'انتخاب تاریخ',\n      selectTime: 'انتخاب زمان',\n      startDate: 'تاریخ شروع',\n      startTime: 'زمان شروع',\n      endDate: 'تاریخ پایان',\n      endTime: 'زمان پایان',\n      prevYear: 'سال قبل',\n      nextYear: 'سال بعد',\n      prevMonth: 'ماه قبل',\n      nextMonth: 'ماه بعد',\n      year: 'سال',\n      month1: 'ژانویه',\n      month2: 'فوریه',\n      month3: 'مارس',\n      month4: 'آوریل',\n      month5: 'مه',\n      month6: 'ژوئن',\n      month7: 'جولای',\n      month8: 'اوت',\n      month9: 'سپتامبر',\n      month10: 'اکتبر',\n      month11: 'نوامبر',\n      month12: 'دسامبر',\n      // week: 'week',\n      weeks: {\n        sun: 'یکشنبه',\n        mon: 'دوشنبه',\n        tue: 'سه​شنبه',\n        wed: 'چهارشنبه',\n        thu: 'پنج​شنبه',\n        fri: 'جمعه',\n        sat: 'شنبه'\n      },\n      months: {\n        jan: 'ژانویه',\n        feb: 'فوریه',\n        mar: 'مارس',\n        apr: 'آوریل',\n        may: 'مه',\n        jun: 'ژوئن',\n        jul: 'جولای',\n        aug: 'اوت',\n        sep: 'سپتامبر',\n        oct: 'اکتبر',\n        nov: 'نوامبر',\n        dec: 'دسامبر'\n      }\n    },\n    select: {\n      loading: 'بارگیری',\n      noMatch: 'هیچ داده‌ای پیدا نشد',\n      noData: 'اطلاعاتی وجود ندارد',\n      placeholder: 'انتخاب کنید'\n    },\n    cascader: {\n      noMatch: 'هیچ داده‌ای پیدا نشد',\n      loading: 'بارگیری',\n      placeholder: 'انتخاب کنید',\n      noData: 'اطلاعاتی وجود ندارد'\n    },\n    pagination: {\n      goto: 'برو به',\n      pagesize: '/صفحه',\n      total: 'مجموع {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'پیام',\n      confirm: 'باشه',\n      cancel: 'لغو',\n      error: 'ورودی غیر مجاز'\n    },\n    upload: {\n      deleteTip: 'برای پاک کردن حذف را فشار دهید',\n      delete: 'حذف',\n      preview: 'پیش‌نمایش',\n      continue: 'ادامه'\n    },\n    table: {\n      emptyText: 'اطلاعاتی وجود ندارد',\n      confirmFilter: 'تایید',\n      resetFilter: 'حذف',\n      clearFilter: 'همه',\n      sumText: 'جمع'\n    },\n    tree: {\n      emptyText: 'اطلاعاتی وجود ندارد'\n    },\n    transfer: {\n      noMatch: 'هیچ داده‌ای پیدا نشد',\n      noData: 'اطلاعاتی وجود ندارد',\n      titles: ['لیست 1', 'لیست 2'],\n      filterPlaceholder: 'کلید واژه هارو وارد کن',\n      noCheckedFormat: '{total} مورد',\n      hasCheckedFormat: '{checked} مورد از {total} مورد انتخاب شده است'\n    },\n    image: {\n      error: 'خطا در بارگیری تصویر'\n    },\n    pageHeader: {\n      title: 'بازگشت'\n    },\n    popconfirm: {\n      confirmButtonText: 'Yes', // to be translated\n      cancelButtonText: 'No' // to be translated\n    },\n    empty: {\n      description: 'اطلاعاتی وجود ندارد'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/fi.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'OK',\n      clear: 'Tyhjennä'\n    },\n    datepicker: {\n      now: 'Nyt',\n      today: 'Tänään',\n      cancel: 'Peruuta',\n      clear: 'Tyhjennä',\n      confirm: 'OK',\n      selectDate: 'Valitse päivä',\n      selectTime: 'Valitse aika',\n      startDate: 'Aloituspäivä',\n      startTime: 'Aloitusaika',\n      endDate: 'Lopetuspäivä',\n      endTime: 'Lopetusaika',\n      prevYear: 'Edellinen vuosi',\n      nextYear: 'Seuraava vuosi',\n      prevMonth: 'Edellinen kuukausi',\n      nextMonth: 'Seuraava kuukausi',\n      year: '',\n      month1: 'tammikuu',\n      month2: 'helmikuu',\n      month3: 'maaliskuu',\n      month4: 'huhtikuu',\n      month5: 'toukokuu',\n      month6: 'kesäkuu',\n      month7: 'heinäkuu',\n      month8: 'elokuu',\n      month9: 'syyskuu',\n      month10: 'lokakuu',\n      month11: 'marraskuu',\n      month12: 'joulukuu',\n      // week: 'week',\n      weeks: {\n        sun: 'su',\n        mon: 'ma',\n        tue: 'ti',\n        wed: 'ke',\n        thu: 'to',\n        fri: 'pe',\n        sat: 'la'\n      },\n      months: {\n        jan: 'tammi',\n        feb: 'helmi',\n        mar: 'maalis',\n        apr: 'huhti',\n        may: 'touko',\n        jun: 'kesä',\n        jul: 'heinä',\n        aug: 'elo',\n        sep: 'syys',\n        oct: 'loka',\n        nov: 'marras',\n        dec: 'joulu'\n      }\n    },\n    select: {\n      loading: 'Lataa',\n      noMatch: 'Ei vastaavia tietoja',\n      noData: 'Ei tietoja',\n      placeholder: 'Valitse'\n    },\n    cascader: {\n      noMatch: 'Ei vastaavia tietoja',\n      loading: 'Lataa',\n      placeholder: 'Valitse',\n      noData: 'Ei tietoja'\n    },\n    pagination: {\n      goto: 'Mene',\n      pagesize: '/sivu',\n      total: 'Yhteensä {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'Viesti',\n      confirm: 'OK',\n      cancel: 'Peruuta',\n      error: 'Virheellinen syöte'\n    },\n    upload: {\n      deleteTip: 'Poista Delete-näppäimellä',\n      delete: 'Poista',\n      preview: 'Esikatsele',\n      continue: 'Jatka'\n    },\n    table: {\n      emptyText: 'Ei tietoja',\n      confirmFilter: 'Vahvista',\n      resetFilter: 'Tyhjennä',\n      clearFilter: 'Kaikki',\n      sumText: 'Summa'\n    },\n    tree: {\n      emptyText: 'Ei tietoja'\n    },\n    transfer: {\n      noMatch: 'Ei vastaavia tietoja',\n      noData: 'Ei tietoja',\n      titles: ['Luettelo 1', 'Luettelo 2'],\n      filterPlaceholder: 'Syötä hakusana',\n      noCheckedFormat: '{total} kohdetta',\n      hasCheckedFormat: '{checked}/{total} valittu'\n    },\n    image: {\n      error: 'FAILED' // to be translated\n    },\n    pageHeader: {\n      title: 'Back' // to be translated\n    },\n    popconfirm: {\n      confirmButtonText: 'Yes', // to be translated\n      cancelButtonText: 'No' // to be translated\n    },\n    empty: {\n      description: 'Ei tietoja'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/fr.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'OK',\n      clear: 'Effacer'\n    },\n    datepicker: {\n      now: 'Maintenant',\n      today: 'Auj.',\n      cancel: 'Annuler',\n      clear: 'Effacer',\n      confirm: 'OK',\n      selectDate: 'Choisir date',\n      selectTime: 'Choisir horaire',\n      startDate: 'Date début',\n      startTime: 'Horaire début',\n      endDate: 'Date fin',\n      endTime: 'Horaire fin',\n      prevYear: 'Année précédente',\n      nextYear: 'Année suivante',\n      prevMonth: 'Mois précédent',\n      nextMonth: 'Mois suivant',\n      year: '', // In french, like in english, we don't say \"Année\" after the year number.\n      month1: 'Janvier',\n      month2: 'Février',\n      month3: 'Mars',\n      month4: 'Avril',\n      month5: 'Mai',\n      month6: 'Juin',\n      month7: 'Juillet',\n      month8: 'Août',\n      month9: 'Septembre',\n      month10: 'Octobre',\n      month11: 'Novembre',\n      month12: 'Décembre',\n      // week: 'Semaine',\n      weeks: {\n        sun: 'Dim',\n        mon: 'Lun',\n        tue: 'Mar',\n        wed: 'Mer',\n        thu: 'Jeu',\n        fri: 'Ven',\n        sat: 'Sam'\n      },\n      months: {\n        jan: 'Jan',\n        feb: 'Fév',\n        mar: 'Mar',\n        apr: 'Avr',\n        may: 'Mai',\n        jun: 'Jun',\n        jul: 'Jul',\n        aug: 'Aoû',\n        sep: 'Sep',\n        oct: 'Oct',\n        nov: 'Nov',\n        dec: 'Déc'\n      }\n    },\n    select: {\n      loading: 'Chargement',\n      noMatch: 'Aucune correspondance',\n      noData: 'Aucune donnée',\n      placeholder: 'Choisir'\n    },\n    cascader: {\n      noMatch: 'Aucune correspondance',\n      loading: 'Chargement',\n      placeholder: 'Choisir',\n      noData: 'Aucune donnée'\n    },\n    pagination: {\n      goto: 'Aller à',\n      pagesize: '/page',\n      total: 'Total {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      confirm: 'Confirmer',\n      cancel: 'Annuler',\n      error: 'Erreur'\n    },\n    upload: {\n      deleteTip: 'Cliquer sur supprimer pour retirer le fichier',\n      delete: 'Supprimer',\n      preview: 'Aperçu',\n      continue: 'Continuer'\n    },\n    table: {\n      emptyText: 'Aucune donnée',\n      confirmFilter: 'Confirmer',\n      resetFilter: 'Réinitialiser',\n      clearFilter: 'Tous',\n      sumText: 'Somme'\n    },\n    tree: {\n      emptyText: 'Aucune donnée'\n    },\n    transfer: {\n      noMatch: 'Aucune correspondance',\n      noData: 'Aucune donnée',\n      titles: ['Liste 1', 'Liste 2'],\n      filterPlaceholder: 'Entrer un mot clef',\n      noCheckedFormat: '{total} elements',\n      hasCheckedFormat: '{checked}/{total} coché(s)'\n    },\n    image: {\n      error: 'FAILED' // to be translated\n    },\n    pageHeader: {\n      title: 'Back' // to be translated\n    },\n    popconfirm: {\n      confirmButtonText: 'Yes', // to be translated\n      cancelButtonText: 'No' // to be translated\n    },\n    empty: {\n      description: 'Aucune donnée'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/he.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'אישור',\n      clear: 'נקה'\n    },\n    datepicker: {\n      now: 'כעת',\n      today: 'היום',\n      cancel: 'בטל',\n      clear: 'נקה',\n      confirm: 'אישור',\n      selectDate: 'בחר תאריך',\n      selectTime: 'בחר זמן',\n      startDate: 'תאריך התחלה',\n      startTime: 'זמן התחלה',\n      endDate: 'תאריך סיום',\n      endTime: 'זמן סיום',\n      prevYear: 'Previous Year', // to be translated\n      nextYear: 'Next Year', // to be translated\n      prevMonth: 'Previous Month', // to be translated\n      nextMonth: 'Next Month', // to be translated\n      year: '',\n      month1: 'ינואר',\n      month2: 'פברואר',\n      month3: 'מרץ',\n      month4: 'אפריל',\n      month5: 'מאי',\n      month6: 'יוני',\n      month7: 'יולי',\n      month8: 'אוגוסט',\n      month9: 'ספטמבר',\n      month10: 'אוקטובר',\n      month11: 'נובמבר',\n      month12: 'דצמבר',\n      // week: 'week',\n      weeks: {\n        sun: 'א׳',\n        mon: 'ב׳',\n        tue: 'ג׳',\n        wed: 'ד׳',\n        thu: 'ה׳',\n        fri: 'ו׳',\n        sat: 'שבת'\n      },\n      months: {\n        jan: 'ינואר',\n        feb: 'פברואר',\n        mar: 'מרץ',\n        apr: 'אפריל',\n        may: 'מאי',\n        jun: 'יוני',\n        jul: 'יולי',\n        aug: 'אוגוסט',\n        sep: 'ספטמבר',\n        oct: 'אוקטובר',\n        nov: 'נובמבר',\n        dec: 'דצמבר'\n      }\n    },\n    select: {\n      loading: 'טוען',\n      noMatch: 'לא נמצאו נתונים',\n      noData: 'ללא נתונים',\n      placeholder: 'בחר'\n    },\n    cascader: {\n      noMatch: 'ללא נתונים מתאימים',\n      loading: 'טוען',\n      placeholder: 'בחר',\n      noData: 'ללא נתונים'\n    },\n    pagination: {\n      goto: 'עבור ל',\n      pagesize: '/page',\n      total: 'כולל {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'הודעה',\n      confirm: 'אישור',\n      cancel: 'בטל',\n      error: 'קלט לא תקין'\n    },\n    upload: {\n      deleteTip: 'press delete to remove', // to be translated\n      delete: 'מחק',\n      preview: 'תצוגה מקדימה',\n      continue: 'המשך'\n    },\n    table: {\n      emptyText: 'אין נתונים',\n      confirmFilter: 'אישור',\n      resetFilter: 'נקה',\n      clearFilter: 'הכל',\n      sumText: 'סך'\n    },\n    tree: {\n      emptyText: 'אין נתונים'\n    },\n    transfer: {\n      noMatch: 'אין נתונים מתאימים',\n      noData: 'ללא נתונים',\n      titles: ['רשימה 1', 'רשימה 2'],\n      filterPlaceholder: 'הקלד',\n      noCheckedFormat: 'פריטים {total}',\n      hasCheckedFormat: ' אישור {checked}/{total}'\n    },\n    image: {\n      error: 'FAILED' // to be translated\n    },\n    pageHeader: {\n      title: 'Back' // to be translated\n    },\n    popconfirm: {\n      confirmButtonText: 'Yes', // to be translated\n      cancelButtonText: 'No' // to be translated\n    },\n    empty: {\n      description: 'אין נתונים'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/hr.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'OK',\n      clear: 'Očisti'\n    },\n    datepicker: {\n      now: 'Sada',\n      today: 'Danas',\n      cancel: 'Otkaži',\n      clear: 'Očisti',\n      confirm: 'OK',\n      selectDate: 'Odaberi datum',\n      selectTime: 'Odaberi vrijeme',\n      startDate: 'Datum početka',\n      startTime: 'Vrijeme početka',\n      endDate: 'Datum završetka',\n      endTime: 'Vrijeme završetka',\n      prevYear: 'Prethodna godina',\n      nextYear: 'Sljedeća godina',\n      prevMonth: 'Prethodni mjesec',\n      nextMonth: 'Sljedeći mjesec',\n      year: '',\n      month1: 'Siječanj',\n      month2: 'Veljača',\n      month3: 'Ožujak',\n      month4: 'Travanj',\n      month5: 'Svibanj',\n      month6: 'Lipanj',\n      month7: 'Srpanj',\n      month8: 'Kolovoz',\n      month9: 'Rujan',\n      month10: 'Listopad',\n      month11: 'Studeni',\n      month12: 'Prosinac',\n      week: 'tjedan',\n      weeks: {\n        sun: 'Ned',\n        mon: 'Pon',\n        tue: 'Uto',\n        wed: 'Sri',\n        thu: 'Čet',\n        fri: 'Pet',\n        sat: 'Sub'\n      },\n      months: {\n        jan: 'Jan',\n        feb: 'Feb',\n        mar: 'Mar',\n        apr: 'Apr',\n        may: 'May',\n        jun: 'Jun',\n        jul: 'Jul',\n        aug: 'Aug',\n        sep: 'Sep',\n        oct: 'Oct',\n        nov: 'Nov',\n        dec: 'Dec'\n      }\n    },\n    select: {\n      loading: 'Učitavanje',\n      noMatch: 'Nema pronađenih podataka',\n      noData: 'Nema podataka',\n      placeholder: 'Izaberi'\n    },\n    cascader: {\n      noMatch: 'Nema pronađenih podataka',\n      loading: 'Učitavanje',\n      placeholder: 'Izaberi',\n      noData: 'Nema podataka'\n    },\n    pagination: {\n      goto: 'Idi na',\n      pagesize: '/stranica',\n      total: 'Ukupno {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'Poruka',\n      confirm: 'OK',\n      cancel: 'Otkaži',\n      error: 'Pogrešan unos'\n    },\n    upload: {\n      deleteTip: 'pritisnite izbriši za brisanje',\n      delete: 'Izbriši',\n      preview: 'Pregled',\n      continue: 'Nastavak'\n    },\n    table: {\n      emptyText: 'Nema podataka',\n      confirmFilter: 'Potvrdi',\n      resetFilter: 'Resetiraj',\n      clearFilter: 'Sve',\n      sumText: 'Suma'\n    },\n    tree: {\n      emptyText: 'Nema podataka'\n    },\n    transfer: {\n      noMatch: 'Nema pronađenih podataka',\n      noData: 'Nema podataka',\n      titles: ['Lista 1', 'Lista 2'], // to be translated\n      filterPlaceholder: 'Unesite ključnu riječ', // to be translated\n      noCheckedFormat: '{total} stavki', // to be translated\n      hasCheckedFormat: '{checked}/{total} checked' // to be translated\n    },\n    image: {\n      error: 'FAILED' // to be translated\n    },\n    pageHeader: {\n      title: 'Back' // to be translated\n    },\n    popconfirm: {\n      confirmButtonText: 'Yes', // to be translated\n      cancelButtonText: 'No' // to be translated\n    },\n    empty: {\n      description: 'Nema podataka'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/hu.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'OK',\n      clear: 'Törlés'\n    },\n    datepicker: {\n      now: 'Most',\n      today: 'Ma',\n      cancel: 'Mégse',\n      clear: 'Törlés',\n      confirm: 'OK',\n      selectDate: 'Dátum',\n      selectTime: 'Időpont',\n      startDate: 'Dátum-tól',\n      startTime: 'Időpont-tól',\n      endDate: 'Dátum-ig',\n      endTime: 'Időpont-ig',\n      prevYear: 'Előző év',\n      nextYear: 'Következő év',\n      prevMonth: 'Előző hónap',\n      nextMonth: 'Következő hónap',\n      year: '',\n      month1: 'Január',\n      month2: 'Február',\n      month3: 'Március',\n      month4: 'Április',\n      month5: 'Május',\n      month6: 'Június',\n      month7: 'Július',\n      month8: 'Augusztus',\n      month9: 'Szeptember',\n      month10: 'Október',\n      month11: 'November',\n      month12: 'December',\n      weeks: {\n        sun: 'Vas',\n        mon: 'Hét',\n        tue: 'Ked',\n        wed: 'Sze',\n        thu: 'Csü',\n        fri: 'Pén',\n        sat: 'Szo'\n      },\n      months: {\n        jan: 'Jan',\n        feb: 'Feb',\n        mar: 'Már',\n        apr: 'Ápr',\n        may: 'Máj',\n        jun: 'Jún',\n        jul: 'Júl',\n        aug: 'Aug',\n        sep: 'Szep',\n        oct: 'Okt',\n        nov: 'Nov',\n        dec: 'Dec'\n      }\n    },\n    select: {\n      loading: 'Betöltés',\n      noMatch: 'Nincs találat',\n      noData: 'Nincs adat',\n      placeholder: 'Válassz'\n    },\n    cascader: {\n      noMatch: 'Nincs találat',\n      loading: 'Betöltés',\n      placeholder: 'Válassz',\n      noData: 'Nincs adat'\n    },\n    pagination: {\n      goto: 'Ugrás',\n      pagesize: '/oldal',\n      total: 'Össz {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'Üzenet',\n      confirm: 'OK',\n      cancel: 'Mégse',\n      error: 'Hibás adat'\n    },\n    upload: {\n      deleteTip: 'kattints a törléshez',\n      delete: 'Törlés',\n      preview: 'Előnézet',\n      continue: 'Tovább'\n    },\n    table: {\n      emptyText: 'Nincs adat',\n      confirmFilter: 'Megerősít',\n      resetFilter: 'Alaphelyet',\n      clearFilter: 'Mind',\n      sumText: 'Összeg'\n    },\n    tree: {\n      emptyText: 'Nincs adat'\n    },\n    transfer: {\n      noMatch: 'Nincs találat',\n      noData: 'Nincs adat',\n      titles: ['Lista 1', 'Lista 2'],\n      filterPlaceholder: 'Kulcsszó',\n      noCheckedFormat: '{total} elem',\n      hasCheckedFormat: '{checked}/{total} kiválasztva'\n    },\n    image: {\n      error: 'FAILED' // to be translated\n    },\n    pageHeader: {\n      title: 'Back' // to be translated\n    },\n    popconfirm: {\n      confirmButtonText: 'Yes', // to be translated\n      cancelButtonText: 'No' // to be translated\n    },\n    empty: {\n      description: 'Nincs adat'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/hy-AM.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'Լաւ',\n      clear: 'Մաքրել'\n    },\n    datepicker: {\n      now: 'Հիմա',\n      today: 'Այսօր',\n      cancel: 'Չեղարկել',\n      clear: 'Մաքրել',\n      confirm: 'Լաւ',\n      selectDate: 'Ընտրեք ամսաթիւը',\n      selectTime: 'Ընտրեք ժամանակը',\n      startDate: 'Սկզբ. ամսաթիւը',\n      startTime: 'Սկզբ. ժամանակը',\n      endDate: 'Վերջ. ամսաթիվը',\n      endTime: 'Վերջ. ժամանակը',\n      prevYear: 'Նախորդ տարի',\n      nextYear: 'Յաջորդ տարի',\n      prevMonth: 'Նախորդ ամիս',\n      nextMonth: 'Յաջորդ ամիս',\n      year: 'Տարի',\n      month1: 'Յունուար',\n      month2: 'Փետրուար',\n      month3: 'Մարտ',\n      month4: 'Ապրիլ',\n      month5: 'Մայիս',\n      month6: 'Յունիս',\n      month7: 'Յուլիս',\n      month8: 'Օգոստոս',\n      month9: 'Սեպտեմբեր',\n      month10: 'Յոկտեմբեր',\n      month11: 'Նոյեմբեր',\n      month12: 'Դեկտեմբեր',\n      week: 'Շաբաթ',\n      weeks: {\n        sun: 'Կիր',\n        mon: 'Երկ',\n        tue: 'Եր',\n        wed: 'Չոր',\n        thu: 'Հինգ',\n        fri: 'Ուրբ',\n        sat: 'Շաբ'\n      },\n      months: {\n        jan: 'Յունվ',\n        feb: 'Փետ',\n        mar: 'Մար',\n        apr: 'Ապր',\n        may: 'Մայ',\n        jun: 'Յուն',\n        jul: 'Յուլ',\n        aug: 'Օգ',\n        sep: 'Սեպտ',\n        oct: 'Յոկ',\n        nov: 'Նոյ',\n        dec: 'Դեկ'\n      }\n    },\n    select: {\n      loading: 'Բեռնում',\n      noMatch: 'Համապատասխան տուեալներ չկան',\n      noData: 'Տվյալներ չկան',\n      placeholder: 'Ընտրել'\n    },\n    cascader: {\n      noMatch: 'Համապատասխան տուեալներ չկան',\n      loading: 'Բեռնում',\n      placeholder: 'Ընտրել',\n      noData: 'Տվյալներ չկան'\n    },\n    pagination: {\n      goto: 'Անցնել',\n      pagesize: ' էջում',\n      total: 'Ընդամենը {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'Հաղորդագրութիւն',\n      confirm: 'Լաւ',\n      cancel: 'Չեղարկել',\n      error: 'Անվաւեր տուեալների մուտք'\n    },\n    upload: {\n      deleteTip: 'Սեղմեք [Ջնջել] ջնջելու համար',\n      delete: 'Ջնջել',\n      preview: 'Նախադիտում',\n      continue: 'Շարունակել'\n    },\n    table: {\n      emptyText: 'Տուեալներ չկան',\n      confirmFilter: 'Յաստատել',\n      resetFilter: 'Վերագործարկել',\n      clearFilter: 'Բոլորը',\n      sumText: 'Գումարը'\n    },\n    tree: {\n      emptyText: 'Տուեալներ չկան'\n    },\n    transfer: {\n      noMatch: 'Համապատասխան տուեալներ չկան',\n      noData: 'Տուեալներ չկան',\n      titles: ['Ցուցակ 1', 'Ցուցակ 2'],\n      filterPlaceholder: 'Մուտքագրեք բանալի բառ',\n      noCheckedFormat: '{total} միաւոր',\n      hasCheckedFormat: '{checked}/{total} ընտրուած է'\n    },\n    image: {\n      error: 'FAILED' // to be translated\n    },\n    pageHeader: {\n      title: 'Back' // to be translated\n    },\n    popconfirm: {\n      confirmButtonText: 'Yes', // to be translated\n      cancelButtonText: 'No' // to be translated\n    },\n    empty: {\n      description: 'Տուեալներ չկան'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/id.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'Pilih',\n      clear: 'Kosongkan'\n    },\n    datepicker: {\n      now: 'Sekarang',\n      today: 'Hari ini',\n      cancel: 'Batal',\n      clear: 'Kosongkan',\n      confirm: 'Ya',\n      selectDate: 'Pilih tanggal',\n      selectTime: 'Pilih waktu',\n      startDate: 'Tanggal Mulai',\n      startTime: 'Waktu Mulai',\n      endDate: 'Tanggal Selesai',\n      endTime: 'Waktu Selesai',\n      prevYear: 'Tahun Sebelumnya',\n      nextYear: 'Tahun Selanjutnya',\n      prevMonth: 'Bulan Sebelumnya',\n      nextMonth: 'Bulan Selanjutnya',\n      year: 'Tahun',\n      month1: 'Januari',\n      month2: 'Februari',\n      month3: 'Maret',\n      month4: 'April',\n      month5: 'Mei',\n      month6: 'Juni',\n      month7: 'Juli',\n      month8: 'Agustus',\n      month9: 'September',\n      month10: 'Oktober',\n      month11: 'November',\n      month12: 'Desember',\n      // week: 'minggu',\n      weeks: {\n        sun: 'Min',\n        mon: 'Sen',\n        tue: 'Sel',\n        wed: 'Rab',\n        thu: 'Kam',\n        fri: 'Jum',\n        sat: 'Sab'\n      },\n      months: {\n        jan: 'Jan',\n        feb: 'Feb',\n        mar: 'Mar',\n        apr: 'Apr',\n        may: 'Mei',\n        jun: 'Jun',\n        jul: 'Jul',\n        aug: 'Agu',\n        sep: 'Sep',\n        oct: 'Okt',\n        nov: 'Nov',\n        dec: 'Des'\n      }\n    },\n    select: {\n      loading: 'Memuat',\n      noMatch: 'Tidak ada data yg cocok',\n      noData: 'Tidak ada data',\n      placeholder: 'Pilih'\n    },\n    cascader: {\n      noMatch: 'Tidak ada data yg cocok',\n      loading: 'Memuat',\n      placeholder: 'Pilih',\n      noData: 'Tidak ada data'\n    },\n    pagination: {\n      goto: 'Pergi ke',\n      pagesize: '/laman',\n      total: 'Total {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'Pesan',\n      confirm: 'Ya',\n      cancel: 'Batal',\n      error: 'Masukan ilegal'\n    },\n    upload: {\n      deleteTip: 'Tekan hapus untuk melanjutkan',\n      delete: 'Hapus',\n      preview: 'Pratinjau',\n      continue: 'Lanjutkan'\n    },\n    table: {\n      emptyText: 'Tidak ada data',\n      confirmFilter: 'Konfirmasi',\n      resetFilter: 'Atur ulang',\n      clearFilter: 'Semua',\n      sumText: 'Jml'\n    },\n    tree: {\n      emptyText: 'Tidak ada data'\n    },\n    transfer: {\n      noMatch: 'Tidak ada data yg cocok',\n      noData: 'Tidak ada data',\n      titles: ['Senarai 1', 'Senarai 2'],\n      filterPlaceholder: 'Masukan kata kunci',\n      noCheckedFormat: '{total} butir',\n      hasCheckedFormat: '{checked}/{total} terpilih'\n    },\n    image: {\n      error: 'GAGAL'\n    },\n    pageHeader: {\n      title: 'Kembali'\n    },\n    popconfirm: {\n      confirmButtonText: 'Ya',\n      cancelButtonText: 'Tidak'\n    },\n    empty: {\n      description: 'Tidak ada data'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/is.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'OK',\n      clear: 'Hreinsa'\n    },\n    datepicker: {\n      now: 'Núna',\n      today: 'Í dag',\n      cancel: 'Hætta við',\n      clear: 'Hreinsa',\n      confirm: 'OK',\n      selectDate: 'Velja dagsetningu',\n      selectTime: 'Velja tíma',\n      startDate: 'Upphafsdagsetning',\n      startTime: 'Upphafstími',\n      endDate: 'Lokadagsetning',\n      endTime: 'Lokatími',\n      prevYear: 'Síðasta ár',\n      nextYear: 'Næsta ár',\n      prevMonth: 'Síðasti mánuður',\n      nextMonth: 'Næsti mánuður',\n      year: 'Ár',\n      month1: 'Janúar',\n      month2: 'Febrúar',\n      month3: 'Mars',\n      month4: 'Apríl',\n      month5: 'Maí',\n      month6: 'Júní',\n      month7: 'Júlí',\n      month8: 'Ágúst',\n      month9: 'September',\n      month10: 'Október',\n      month11: 'Nóvember',\n      month12: 'Desember',\n      week: 'Vika',\n      weeks: {\n        sun: 'Sun',\n        mon: 'Mán',\n        tue: 'Þri',\n        wed: 'Mið',\n        thu: 'Fim',\n        fri: 'Fös',\n        sat: 'Lau'\n      },\n      months: {\n        jan: 'Jan',\n        feb: 'Feb',\n        mar: 'Mar',\n        apr: 'Apr',\n        may: 'Maí',\n        jun: 'Jún',\n        jul: 'Júl',\n        aug: 'Ágú',\n        sep: 'Sep',\n        oct: 'Okt',\n        nov: 'Nóv',\n        dec: 'Des'\n      }\n    },\n    select: {\n      loading: 'Hleð',\n      noMatch: 'Ekkert fannst',\n      noData: 'Engin gögn',\n      placeholder: 'Velja'\n    },\n    cascader: {\n      noMatch: 'Ekkert fannst',\n      loading: 'Hleð',\n      placeholder: 'Velja',\n      noData: 'Engin gögn'\n    },\n    pagination: {\n      goto: 'Fara á',\n      pagesize: '/sida',\n      total: 'Samtals {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'Skilaboð',\n      confirm: 'OK',\n      cancel: 'Hætta við',\n      error: 'Rangt innslegið'\n    },\n    upload: {\n      deleteTip: 'smelltu á eyða til að eyða',\n      delete: 'Eyða',\n      preview: 'Skoða',\n      continue: 'Halda áfram'\n    },\n    table: {\n      emptyText: 'Engin gögn',\n      confirmFilter: 'Staðfesta',\n      resetFilter: 'Endurstilla',\n      clearFilter: 'Allt',\n      sumText: 'Summa'\n    },\n    tree: {\n      emptyText: 'Engin gögn'\n    },\n    transfer: {\n      noMatch: 'Engin gögn fundust',\n      noData: 'Engin gögn',\n      titles: ['Listi 1', 'Listi 2'],\n      filterPlaceholder: 'Slá inn orð',\n      noCheckedFormat: '{total} atriði',\n      hasCheckedFormat: '{checked}/{total} valin'\n    },\n    image: {\n      error: 'VILLA'\n    },\n    pageHeader: {\n      title: 'Til baka'\n    },\n    popconfirm: {\n      confirmButtonText: 'Já',\n      cancelButtonText: 'Nei'\n    },\n    empty: {\n      description: 'Engin gögn'\n    }\n  }\n};\n\n"
  },
  {
    "path": "src/locale/lang/it.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'OK',\n      clear: 'Pulisci'\n    },\n    datepicker: {\n      now: 'Ora',\n      today: 'Oggi',\n      cancel: 'Cancella',\n      clear: 'Pulisci',\n      confirm: 'OK',\n      selectDate: 'Seleziona data',\n      selectTime: 'Seleziona ora',\n      startDate: 'Data inizio',\n      startTime: 'Ora inizio',\n      endDate: 'Data fine',\n      endTime: 'Ora fine',\n      prevYear: 'Anno precedente',\n      nextYear: 'Anno successivo',\n      prevMonth: 'Mese precedente',\n      nextMonth: 'Mese successivo',\n      year: 'anno',\n      month1: 'Gennaio',\n      month2: 'Febbraio',\n      month3: 'Marzo',\n      month4: 'Aprile',\n      month5: 'Maggio',\n      month6: 'Giugno',\n      month7: 'Luglio',\n      month8: 'Agosto',\n      month9: 'Settembre',\n      month10: 'Ottobre',\n      month11: 'Novembre',\n      month12: 'Dicembre',\n      // week: 'settimana',\n      weeks: {\n        sun: 'Dom',\n        mon: 'Lun',\n        tue: 'Mar',\n        wed: 'Mer',\n        thu: 'Gio',\n        fri: 'Ven',\n        sat: 'Sab'\n      },\n      months: {\n        jan: 'Gen',\n        feb: 'Feb',\n        mar: 'Mar',\n        apr: 'Apr',\n        may: 'Mag',\n        jun: 'Giu',\n        jul: 'Lug',\n        aug: 'Ago',\n        sep: 'Set',\n        oct: 'Ott',\n        nov: 'Nov',\n        dec: 'Dic'\n      }\n    },\n    select: {\n      loading: 'Caricamento',\n      noMatch: 'Nessuna corrispondenza',\n      noData: 'Nessun dato',\n      placeholder: 'Seleziona'\n    },\n    cascader: {\n      noMatch: 'Nessuna corrispondenza',\n      loading: 'Caricamento',\n      placeholder: 'Seleziona',\n      noData: 'Nessun dato'\n    },\n    pagination: {\n      goto: 'Vai a',\n      pagesize: '/pagina',\n      total: 'Totale {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      confirm: 'OK',\n      cancel: 'Annulla',\n      error: 'Input non valido'\n    },\n    upload: {\n      deleteTip: 'Premi cancella per rimuovere',\n      delete: 'Cancella',\n      preview: 'Anteprima',\n      continue: 'Continua'\n    },\n    table: {\n      emptyText: 'Nessun dato',\n      confirmFilter: 'Conferma',\n      resetFilter: 'Reset',\n      clearFilter: 'Tutti',\n      sumText: 'Somma'\n    },\n    tree: {\n      emptyText: 'Nessun dato'\n    },\n    transfer: {\n      noMatch: 'Nessuna corrispondenza',\n      noData: 'Nessun dato',\n      titles: ['Lista 1', 'Lista 2'],\n      filterPlaceholder: 'Inserisci filtro',\n      noCheckedFormat: '{total} elementi',\n      hasCheckedFormat: '{checked}/{total} selezionati'\n    },\n    image: {\n      error: 'ERRORE'\n    },\n    pageHeader: {\n      title: 'Indietro'\n    },\n    popconfirm: {\n      confirmButtonText: 'Sì',\n      cancelButtonText: 'No'\n    },\n    empty: {\n      description: 'Nessun dato'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/ja.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'OK',\n      clear: 'クリア'\n    },\n    datepicker: {\n      now: '現在',\n      today: '今日',\n      cancel: 'キャンセル',\n      clear: 'クリア',\n      confirm: 'OK',\n      selectDate: '日付を選択',\n      selectTime: '時間を選択',\n      startDate: '開始日',\n      startTime: '開始時間',\n      endDate: '終了日',\n      endTime: '終了時間',\n      prevYear: '前年',\n      nextYear: '翌年',\n      prevMonth: '前月',\n      nextMonth: '翌月',\n      year: '年',\n      month1: '1月',\n      month2: '2月',\n      month3: '3月',\n      month4: '4月',\n      month5: '5月',\n      month6: '6月',\n      month7: '7月',\n      month8: '8月',\n      month9: '9月',\n      month10: '10月',\n      month11: '11月',\n      month12: '12月',\n      // week: '週次',\n      weeks: {\n        sun: '日',\n        mon: '月',\n        tue: '火',\n        wed: '水',\n        thu: '木',\n        fri: '金',\n        sat: '土'\n      },\n      months: {\n        jan: '1月',\n        feb: '2月',\n        mar: '3月',\n        apr: '4月',\n        may: '5月',\n        jun: '6月',\n        jul: '7月',\n        aug: '8月',\n        sep: '9月',\n        oct: '10月',\n        nov: '11月',\n        dec: '12月'\n      }\n    },\n    select: {\n      loading: 'ロード中',\n      noMatch: 'データなし',\n      noData: 'データなし',\n      placeholder: '選択してください'\n    },\n    cascader: {\n      noMatch: 'データなし',\n      loading: 'ロード中',\n      placeholder: '選択してください',\n      noData: 'データなし'\n    },\n    pagination: {\n      goto: '',\n      pagesize: '件/ページ',\n      total: '総計 {total} 件',\n      pageClassifier: 'ページ目へ'\n    },\n    messagebox: {\n      title: 'メッセージ',\n      confirm: 'OK',\n      cancel: 'キャンセル',\n      error: '正しくない入力'\n    },\n    upload: {\n      deleteTip: 'Delキーを押して削除する',\n      delete: '削除する',\n      preview: 'プレビュー',\n      continue: '続行する'\n    },\n    table: {\n      emptyText: 'データなし',\n      confirmFilter: '確認',\n      resetFilter: '初期化',\n      clearFilter: 'すべて',\n      sumText: '合計'\n    },\n    tree: {\n      emptyText: 'データなし'\n    },\n    transfer: {\n      noMatch: 'データなし',\n      noData: 'データなし',\n      titles: ['リスト 1', 'リスト 2'],\n      filterPlaceholder: 'キーワードを入力',\n      noCheckedFormat: '総計 {total} 件',\n      hasCheckedFormat: '{checked}/{total} を選択した'\n    },\n    image: {\n      error: 'FAILED' // to be translated\n    },\n    pageHeader: {\n      title: 'Back' // to be translated\n    },\n    popconfirm: {\n      confirmButtonText: 'Yes', // to be translated\n      cancelButtonText: 'No' // to be translated\n    },\n    empty: {\n      description: 'データなし'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/kg.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'Мурунку',\n      clear: 'ачык'\n    },\n    datepicker: {\n      now: 'азыр',\n      today: 'бүгүн',\n      cancel: 'жокко чыгарылды',\n      clear: 'ачык',\n      confirm: 'белгилөө',\n      selectDate: 'дата',\n      selectTime: 'тандоо убактысы',\n      startDate: 'Башталган датасы',\n      startTime: 'Start убакыт',\n      endDate: 'Бүткөн датасы',\n      endTime: 'End убакыт',\n      prevYear: 'өткөн жылы',\n      nextYear: 'бир жылдан кийин',\n      prevMonth: 'Өткөн айда',\n      nextMonth: 'Кийинки ай',\n      year: 'жыл',\n      month1: 'биринчи ай',\n      month2: 'Экинчи айда',\n      month3: 'Үчүнчү айда',\n      month4: 'Төртүнчү айда',\n      month5: 'бешинчи айда',\n      month6: 'Алгачкы алты ай',\n      month7: 'жетинчи айда',\n      month8: 'сегизинчи ай',\n      month9: 'Алгачкы тогуз ай',\n      month10: 'онунчу айда',\n      month11: 'он биринчи ай',\n      month12: 'он экинчи айда',\n      // week: '周次',\n      weeks: {\n        sun: 'жети жума',\n        mon: 'дүйшөмбү',\n        tue: 'шейшемби',\n        wed: 'шаршемби',\n        thu: 'бейшемби',\n        fri: 'жума',\n        sat: 'ишемби'\n      },\n      months: {\n        jan: 'биринчи ай',\n        feb: 'Экинчи айда',\n        mar: 'Үчүнчү айда',\n        apr: 'Төртүнчү айда',\n        may: 'бешинчи айда',\n        jun: 'Алгачкы алты ай',\n        jul: 'жетинчи айда',\n        aug: 'сегизинчи ай',\n        sep: 'Алгачкы тогуз ай',\n        oct: 'онунчу айда',\n        nov: 'он биринчи ай',\n        dec: 'он экинчи айда'\n      }\n    },\n    select: {\n      loading: 'Жүктөлүүдө',\n      noMatch: 'Дал келген маалыматтар',\n      noData: 'маалымат жок',\n      placeholder: 'тандоо'\n    },\n    cascader: {\n      noMatch: 'Дал келген маалыматтар',\n      loading: 'Жүктөлүүдө',\n      placeholder: 'тандоо',\n      noData: 'маалымат жок'\n    },\n    pagination: {\n      goto: 'Мурунку',\n      pagesize: 'бир',\n      total: 'бүтүндөй {total} сан ',\n      pageClassifier: 'бет'\n    },\n    messagebox: {\n      title: 'тез',\n      confirm: 'белгилөө',\n      cancel: 'жокко чыгарылды',\n      error: 'Маалыматтарды киргизүү мыйзамдуу эмес!'\n    },\n    upload: {\n      deleteTip: 'Жок кылуу баскычын басуу жок',\n      delete: 'жок кылуу',\n      preview: 'ЖМКнын картинки',\n      continue: 'жүктөп бер'\n    },\n    table: {\n      emptyText: 'маалымат жок',\n      confirmFilter: 'чыпка',\n      resetFilter: 'кайра орнотуу',\n      clearFilter: 'бүткөн',\n      sumText: 'Бардыгы болуп'\n    },\n    tree: {\n      emptyText: 'маалымат жок'\n    },\n    transfer: {\n      noMatch: 'Дал келген маалыматтар',\n      noData: 'маалымат жок',\n      titles: ['1 тизмеси', '2 тизмеси'],\n      filterPlaceholder: 'Сураныч, издөө кирет',\n      noCheckedFormat: 'бүтүндөй {total} сан',\n      hasCheckedFormat: 'Тандалган {checked}/{total} сан'\n    },\n    image: {\n      error: 'FAILED' // to be translated\n    },\n    pageHeader: {\n      title: 'Back' // to be translated\n    },\n    popconfirm: {\n      confirmButtonText: 'Yes', // to be translated\n      cancelButtonText: 'No' // to be translated\n    },\n    empty: {\n      description: 'маалымат жок'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/km.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'យល់ព្រម',\n      clear: 'លុប'\n    },\n    datepicker: {\n      now: 'ឥឡូវនេះ',\n      today: 'ថ្ងៃនេះ',\n      cancel: 'បោះបង់',\n      clear: 'លុប',\n      confirm: 'យល់ព្រម',\n      selectDate: 'ជ្រើសរើសថ្ងៃ',\n      selectTime: 'ជ្រើសរើសម៉ោង',\n      startDate: 'ថ្ងៃចាប់ផ្តើម',\n      startTime: 'ម៉ោងចាប់ផ្តើម',\n      endDate: 'ថ្ងៃបញ្ចប់',\n      endTime: 'ម៉ោងបញ្ចប់',\n      prevYear: 'ឆ្នាំមុន',\n      nextYear: 'ឆ្នាំក្រោយ',\n      prevMonth: 'ខែមុន',\n      nextMonth: 'ខែក្រោយ',\n      year: 'ឆ្នាំ',\n      month1: 'មករា',\n      month2: 'កុម្ភៈ',\n      month3: 'មីនា',\n      month4: 'មេសា',\n      month5: 'ឧសភា',\n      month6: 'មិថុនា',\n      month7: 'កក្កដា',\n      month8: 'សីហា',\n      month9: 'កញ្ញា',\n      month10: 'តុលា',\n      month11: 'វិច្ឆកា',\n      month12: 'ធ្នូ',\n      week: 'សប្តាហ៍',\n      weeks: {\n        sun: 'អាទិត្យ',\n        mon: 'ច័ន្ទ',\n        tue: 'អង្គារ',\n        wed: 'ពុធ',\n        thu: 'ព្រ.ហ',\n        fri: 'សុក្រ',\n        sat: 'សៅរ៏'\n      },\n      months: {\n        jan: 'មករា',\n        feb: 'កុម្ភៈ',\n        mar: 'មីនា',\n        apr: 'មេសា',\n        may: 'ឧសភា',\n        jun: 'មិថុនា',\n        jul: 'កក្កដា',\n        aug: 'សីហា',\n        sep: 'កញ្ញា',\n        oct: 'តុលា',\n        nov: 'វិច្ឆកា',\n        dec: 'ធ្នូ'\n      }\n    },\n    select: {\n      loading: 'កំពុងផ្ទុក',\n      noMatch: 'គ្មានទិន្ន័យដូច',\n      noData: 'គ្មានទិន្ន័យ',\n      placeholder: 'ជ្រើសរើស'\n    },\n    cascader: {\n      noMatch: 'គ្មានទិន្ន័យដូច',\n      loading: 'កំពុងផ្ទុក',\n      placeholder: 'ជ្រើសរើស',\n      noData: 'គ្មានទិន្ន័យ'\n    },\n    pagination: {\n      goto: 'ទៅកាន់',\n      pagesize: '/ទំព័រ',\n      total: 'សរុប {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'សារ',\n      confirm: 'យល់ព្រម',\n      cancel: 'បោះបង់',\n      error: 'ការបញ្ចូលមិនអនុញ្ញាត'\n    },\n    upload: {\n      deleteTip: 'ចុចលុបដើម្បីដកចេញ',\n      delete: 'លុប',\n      preview: 'មើល',\n      continue: 'បន្ត'\n    },\n    table: {\n      emptyText: 'គ្មានទិន្ន័យ',\n      confirmFilter: 'យល់ព្រម',\n      resetFilter: 'កំណត់ឡើងវិញ',\n      clearFilter: 'ទាំងអស់',\n      sumText: 'បូក'\n    },\n    tree: {\n      emptyText: 'គ្មានទិន្ន័យ'\n    },\n    transfer: {\n      noMatch: 'គ្មានទិន្ន័យដូច',\n      noData: 'គ្មានទិន្ន័យ',\n      titles: ['បញ្ជី ១', 'បញ្ជី ២'],\n      filterPlaceholder: 'បញ្ចូលពាក្យ',\n      noCheckedFormat: '{total} ធាតុ',\n      hasCheckedFormat: '{checked}/{total} បានគូសធីក'\n    },\n    image: {\n      error: 'បរាជ័យ'\n    },\n    pageHeader: {\n      title: 'Back'\n    },\n    popconfirm: {\n      confirmButtonText: 'ព្រម',\n      cancelButtonText: 'មិនព្រម'\n    },\n    empty: {\n      description: 'គ្មានទិន្ន័យ'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/ko.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: '확인',\n      clear: '초기화'\n    },\n    datepicker: {\n      now: '지금',\n      today: '오늘',\n      cancel: '취소',\n      clear: '초기화',\n      confirm: '확인',\n      selectDate: '날짜 선택',\n      selectTime: '시간 선택',\n      startDate: '시작 날짜',\n      startTime: '시작 시간',\n      endDate: '종료 날짜',\n      endTime: '종료 시간',\n      prevYear: '지난해',\n      nextYear: '다음해',\n      prevMonth: '지난달',\n      nextMonth: '다음달',\n      year: '년',\n      month1: '1월',\n      month2: '2월',\n      month3: '3월',\n      month4: '4월',\n      month5: '5월',\n      month6: '6월',\n      month7: '7월',\n      month8: '8월',\n      month9: '9월',\n      month10: '10월',\n      month11: '11월',\n      month12: '12월',\n      // week: 'week',\n      weeks: {\n        sun: '일',\n        mon: '월',\n        tue: '화',\n        wed: '수',\n        thu: '목',\n        fri: '금',\n        sat: '토'\n      },\n      months: {\n        jan: '1월',\n        feb: '2월',\n        mar: '3월',\n        apr: '4월',\n        may: '5월',\n        jun: '6월',\n        jul: '7월',\n        aug: '8월',\n        sep: '9월',\n        oct: '10월',\n        nov: '11월',\n        dec: '12월'\n      }\n    },\n    select: {\n      loading: '불러오는 중',\n      noMatch: '맞는 데이터가 없습니다',\n      noData: '데이터 없음',\n      placeholder: '선택'\n    },\n    cascader: {\n      noMatch: '맞는 데이터가 없습니다',\n      loading: '불러오는 중',\n      placeholder: '선택',\n      noData: '데이터 없음'\n    },\n    pagination: {\n      goto: '이동',\n      pagesize: '/page',\n      total: '총 {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: '메시지',\n      confirm: '확인',\n      cancel: '취소',\n      error: '올바르지 않은 입력'\n    },\n    upload: {\n      deleteTip: '클릭시 삭제됩니다',\n      delete: '삭제',\n      preview: '미리보기',\n      continue: '계속하기'\n    },\n    table: {\n      emptyText: '데이터 없음',\n      confirmFilter: '확인',\n      resetFilter: '초기화',\n      clearFilter: '전체',\n      sumText: '합'\n    },\n    tree: {\n      emptyText: '데이터 없음'\n    },\n    transfer: {\n      noMatch: '맞는 데이터가 없습니다',\n      noData: '데이터 없음',\n      titles: ['리스트 1', '리스트 2'],\n      filterPlaceholder: ' 입력하세요',\n      noCheckedFormat: '{total} 항목',\n      hasCheckedFormat: '{checked}/{total} 선택됨'\n    },\n    image: {\n      error: 'FAILED' // to be translated\n    },\n    pageHeader: {\n      title: 'Back' // to be translated\n    },\n    popconfirm: {\n      confirmButtonText: 'Yes', // to be translated\n      cancelButtonText: 'No' // to be translated\n    },\n    empty: {\n      description: '데이터 없음'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/ku.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'Temam',\n      clear: 'Paqij bike'\n    },\n    datepicker: {\n      now: 'Niha',\n      today: 'Îro',\n      cancel: 'Betal bike',\n      clear: 'Paqij bike',\n      confirm: 'Temam',\n      selectDate: 'Dîrokê bibijêre',\n      selectTime: 'Demê bibijêre',\n      startDate: 'Dîroka Destpêkê',\n      startTime: 'Dema Destpêkê',\n      endDate: 'Dîroka Dawî',\n      endTime: 'Dema Dawî',\n      prevYear: 'Sala Pêş',\n      nextYear: 'Sala Paş',\n      prevMonth: 'Meha Pêş',\n      nextMonth: 'Meha Paş',\n      year: 'Sal',\n      month1: 'Rêbendan',\n      month2: 'Reşemeh',\n      month3: 'Adar',\n      month4: 'Avrêl',\n      month5: 'Gulan',\n      month6: 'Pûşber',\n      month7: 'Tîrmeh',\n      month8: 'Gilavêj',\n      month9: 'Rezber',\n      month10: 'Kewçêr',\n      month11: 'Sarmawaz',\n      month12: 'Berfanbar',\n      // week: 'week',\n      weeks: {\n        sun: 'Yek',\n        mon: 'Duş',\n        tue: 'Sêş',\n        wed: 'Çar',\n        thu: 'Pên',\n        fri: 'În',\n        sat: 'Şem'\n      },\n      months: {\n        jan: 'Rêb',\n        feb: 'Reş',\n        mar: 'Ada',\n        apr: 'Avr',\n        may: 'Gul',\n        jun: 'Pûş',\n        jul: 'Tîr',\n        aug: 'Gil',\n        sep: 'Rez',\n        oct: 'Kew',\n        nov: 'Sar',\n        dec: 'Ber'\n      }\n    },\n    select: {\n      loading: 'Bardibe',\n      noMatch: 'Li hembere ve agahî tune',\n      noData: 'Agahî tune',\n      placeholder: 'Bibijêre'\n    },\n    cascader: {\n      noMatch: 'Li hembere ve agahî tune',\n      loading: 'Bardibe',\n      placeholder: 'Bibijêre',\n      noData: 'Agahî tune'\n    },\n    pagination: {\n      goto: 'Biçe',\n      pagesize: '/rupel',\n      total: 'Tevahî {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'Peyam',\n      confirm: 'Temam',\n      cancel: 'Betal bike',\n      error: 'Beyana çewt'\n    },\n    upload: {\n      deleteTip: 'ji bo rake pêl \"delete\" bike',\n      delete: 'Rake',\n      preview: 'Pêşdîtin',\n      continue: 'Berdewam'\n    },\n    table: {\n      emptyText: 'Agahî tune',\n      confirmFilter: 'Piştrast bike',\n      resetFilter: 'Jê bibe',\n      clearFilter: 'Hemû',\n      sumText: 'Kom'\n    },\n    tree: {\n      emptyText: 'Agahî tune'\n    },\n    transfer: {\n      noMatch: 'Li hembere ve agahî tune',\n      noData: 'Agahî tune',\n      titles: ['Lîste 1', 'Lîste 2'],\n      filterPlaceholder: 'Binivîse',\n      noCheckedFormat: '{total} lib',\n      hasCheckedFormat: '{checked}/{total} bijartin'\n    },\n    image: {\n      error: 'FAILED' // to be translated\n    },\n    pageHeader: {\n      title: 'Back' // to be translated\n    },\n    popconfirm: {\n      confirmButtonText: 'Yes', // to be translated\n      cancelButtonText: 'No' // to be translated\n    },\n    empty: {\n      description: 'Agahî tune'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/kz.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'Қабылдау',\n      clear: 'Тазалау'\n    },\n    datepicker: {\n      now: 'Қазір',\n      today: 'Бүгін',\n      cancel: 'Болдырмау',\n      clear: 'Тазалау',\n      confirm: 'Қабылдау',\n      selectDate: 'Күнді таңдаңыз',\n      selectTime: 'Сағатты таңдаңыз',\n      startDate: 'Басталу күні',\n      startTime: 'Басталу сағаты',\n      endDate: 'Аяқталу күні',\n      endTime: 'Аяқталу сағаты',\n      prevYear: 'Алдыңғы жыл',\n      nextYear: 'Келесі жыл',\n      prevMonth: 'Алдыңғы ай',\n      nextMonth: 'Келесі ай',\n      year: 'Жыл',\n      month1: 'Қаңтар',\n      month2: 'Ақпан',\n      month3: 'Наурыз',\n      month4: 'Сәуір',\n      month5: 'Мамыр',\n      month6: 'Маусым',\n      month7: 'Шілде',\n      month8: 'Тамыз',\n      month9: 'Қыркүйек',\n      month10: 'Қазан',\n      month11: 'Қараша',\n      month12: 'Желтоқсан',\n      week: 'Апта',\n      weeks: {\n        sun: 'Жек',\n        mon: 'Дүй',\n        tue: 'Сей',\n        wed: 'Сәр',\n        thu: 'Бей',\n        fri: 'Жұм',\n        sat: 'Сен'\n      },\n      months: {\n        jan: 'Қаң',\n        feb: 'Ақп',\n        mar: 'Нау',\n        apr: 'Сәу',\n        may: 'Мам',\n        jun: 'Мау',\n        jul: 'Шіл',\n        aug: 'Там',\n        sep: 'Қыр',\n        oct: 'Қаз',\n        nov: 'Қар',\n        dec: 'Жел'\n      }\n    },\n    select: {\n      loading: 'Жүктелуде',\n      noMatch: 'Сәйкес деректер жоқ',\n      noData: 'Деректер жоқ',\n      placeholder: 'Таңдаңыз'\n    },\n    cascader: {\n      noMatch: 'Сәйкес деректер жоқ',\n      loading: 'Жүктелуде',\n      placeholder: 'Таңдаңыз',\n      noData: 'Деректер жоқ'\n    },\n    pagination: {\n      goto: 'Бару',\n      pagesize: '/page',\n      total: 'Барлығы {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'Хабар',\n      confirm: 'Қабылдау',\n      cancel: 'Болдырмау',\n      error: 'Жарамсыз енгізулер'\n    },\n    upload: {\n      deleteTip: 'Өшіруді басып өшіріңіз',\n      delete: 'Өшіру',\n      preview: 'Алдын ала қарау',\n      continue: 'Жалғастыру'\n    },\n    table: {\n      emptyText: 'Деректер жоқ',\n      confirmFilter: 'Қабылдау',\n      resetFilter: 'Қалпына келтіру',\n      clearFilter: 'Барлығы',\n      sumText: 'Сомасы'\n    },\n    tree: {\n      emptyText: 'Деректер жоқ'\n    },\n    transfer: {\n      noMatch: 'Сәйкес деректер жоқ',\n      noData: 'Деректер жоқ',\n      titles: ['List 1', 'List 2'],\n      filterPlaceholder: 'Кілт сөзді енгізіңіз',\n      noCheckedFormat: '{total} элэмэнт',\n      hasCheckedFormat: '{checked}/{total} құсбелгісі қойылды'\n    },\n    image: {\n      error: 'FAILED' // to be translated\n    },\n    pageHeader: {\n      title: 'Back' // to be translated\n    },\n    popconfirm: {\n      confirmButtonText: 'Yes', // to be translated\n      cancelButtonText: 'No' // to be translated\n    },\n    empty: {\n      description: 'Деректер жоқ'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/lo-LA.js",
    "content": "'use strict';\n\nexports.__esModule = true;\nexports.default = {\n  el: {\n    colorpicker: {\n      confirm: 'ຢືນຢັນ',\n      clear: 'ເປົ່າ'\n    },\n    datepicker: {\n      now: 'ດຽວນີ້',\n      today: 'ມື້ນີ້',\n      cancel: 'ຍົກເລີກ',\n      clear: 'ເປົ່າ',\n      confirm: 'ຢືນຢັນ',\n      selectDate: 'ເລືອກ ວັນທີ',\n      selectTime: 'ເລືອກ ເວລາ',\n      startDate: 'ວັນ​ທີ່​ເລີ່ມ',\n      startTime: 'ເວລາເລີ່ມຕົ້ນ',\n      endDate: 'ວັນສິ້ນສຸດ',\n      endTime: 'ສິ້ນສຸດເວລາ',\n      prevYear: 'ປີກ່ອນ',\n      nextYear: 'ປີ ຕໍ່ມາ',\n      prevMonth: 'ເດືອນກ່ອນ',\n      nextMonth: 'ເດືອນ ຖັດ ໄປ',\n      year: 'ປີ',\n      month1: 'ມັງກອນ',\n      month2: 'ເດືອນ ກຸມພາ',\n      month3: 'ເດືອນມີນາ',\n      month4: 'ເດືອນເມສາ',\n      month5: 'ເດືອນພຶດສະພາ',\n      month6: 'ມິຖຸນາ',\n      month7: 'ເດືອນກໍລະກົດ',\n      month8: 'ເດືອນ ສິງຫາ',\n      month9: 'ເດືອນ ກັນຍາ',\n      month10: 'ເດືອນ ຕຸລາ',\n      month11: 'ເດືອນພະຈິກ',\n      month12: 'ທັນວາ',\n      // week: '周次',\n      weeks: {\n        sun: 'ວັນ',\n        mon: 'ກ',\n        tue: 'ສອງ',\n        wed: 'ສາມ',\n        thu: 'ສີ່',\n        fri: 'ຫ້າ',\n        sat: 'ຫົກ'\n      },\n      months: {\n        jan: 'ມັງກອນ',\n        feb: 'ເດືອນ ກຸມພາ',\n        mar: 'ເດືອນມີນາ',\n        apr: 'ເດືອນເມສາ',\n        may: 'ເດືອນພຶດສະພາ',\n        jun: 'ມິຖຸນາ',\n        jul: 'ເດືອນກໍລະກົດ',\n        aug: 'ເດືອນ ສິງຫາ',\n        sep: 'ເດືອນ ກັນຍາ',\n        oct: 'ເດືອນ ຕຸລາ',\n        nov: 'ເດືອນພະຈິກ',\n        dec: 'ທັນວາ'\n      }\n    },\n    select: {\n      loading: 'ກຳລັງອອກ...',\n      noMatch: 'ບໍ່ມີຂໍ້ມູນທີ່ກົງກັນ',\n      noData: 'ບໍ່​ມີ​ຂໍ້​ມູນ',\n      placeholder: 'ກະລຸນາເລືອກ'\n    },\n    cascader: {\n      noMatch: 'ບໍ່ມີຂໍ້ມູນທີ່ກົງກັນ',\n      loading: 'ກຳລັງອອກ...',\n      placeholder: 'ກະລຸນາເລືອກ',\n      noData: 'ບໍ່​ມີ​ຂໍ້​ມູນ'\n    },\n    pagination: {\n      goto: 'ໄປທີ່',\n      pagesize: 'ແຖບ/ໜ້າ',\n      total: 'ປົກຕ່າງໆ {total} ກະລຸນາປັດ',\n      pageClassifier: 'ຫມາຍເລກຫນ້າ'\n    },\n    messagebox: {\n      title: 'ຄຳ ແນະ ນຳ',\n      confirm: 'ຢືນຢັນ',\n      cancel: 'ຍົກເລີກ',\n      error: 'ຂໍ້ມູນການປ້ອນຂໍ້ມູນແມ່ນຜິດກົດຫມາຍ!'\n    },\n    upload: {\n      deleteTip: 'ກະລຸນາໃສເພື່ອລຶບ',\n      delete: 'ລຶບ',\n      preview: 'ເບິ່ງຮູບພາບ',\n      continue: 'ສືບຕໍ່ອັບໂຫລດ'\n    },\n    table: {\n      emptyText: 'ບໍ່​ມີ​ຂໍ້​ມູນ',\n      confirmFilter: 'ການ ຄັດເລືອກ',\n      resetFilter: 'ເລີ່ມ​ຕົ້ນ​ໃຫມ່',\n      clearFilter: 'ທັງຫມົດ',\n      sumText: 'ທັງຫມົດ'\n    },\n    tree: {\n      emptyText: 'ບໍ່​ມີ​ຂໍ້​ມູນ'\n    },\n    transfer: {\n      noMatch: 'ບໍ່ມີຂໍ້ມູນທີ່ກົງກັນ',\n      noData: 'ບໍ່​ມີ​ຂໍ້​ມູນ',\n      titles: ['ລາຍຊື່ 1', 'ລາຍຊື່ 2'],\n      filterPlaceholder: 'ໃສ່ເນື້ອຫາຄົ້ນຫາ',\n      noCheckedFormat: 'ປົກຕ່າງໆ {total} ຄໍາສຸດ',\n      hasCheckedFormat: 'ໂຕເລືອກ {checked}/{total} ຄໍາສຸດ'\n    },\n    image: {\n      error: 'ລົ້ມເຫລວໃນການໂຫຼດ'\n    },\n    pageHeader: {\n      title: 'ກັບ ຄືນ'\n    },\n    popconfirm: {\n      confirmButtonText: 'ຢືນຢັນ',\n      cancelButtonText: 'ຍົກເລີກ'\n    },\n    empty: {\n      description: 'ບໍ່​ມີ​ຂໍ້​ມູນ'\n    }\n  }\n};"
  },
  {
    "path": "src/locale/lang/lt.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'OK',\n      clear: 'Valyti'\n    },\n    datepicker: {\n      now: 'Dabar',\n      today: 'Šiandien',\n      cancel: 'Atšaukti',\n      clear: 'Valyti',\n      confirm: 'OK',\n      selectDate: 'Pasirink datą',\n      selectTime: 'Pasirink laiką',\n      startDate: 'Data nuo',\n      startTime: 'Laikas nuo',\n      endDate: 'Data iki',\n      endTime: 'Laikas iki',\n      prevYear: 'Metai atgal',\n      nextYear: 'Metai į priekį',\n      prevMonth: 'Mėn. atgal',\n      nextMonth: 'Mėn. į priekį',\n      year: '',\n      month1: 'Sausis',\n      month2: 'Vasaris',\n      month3: 'Kovas',\n      month4: 'Balandis',\n      month5: 'Gegužė',\n      month6: 'Birželis',\n      month7: 'Liepa',\n      month8: 'Rugpjūtis',\n      month9: 'Rugsėjis',\n      month10: 'Spalis',\n      month11: 'Lapkritis',\n      month12: 'Gruodis',\n      // week: 'savaitė',\n      weeks: {\n        sun: 'S.',\n        mon: 'Pr.',\n        tue: 'A.',\n        wed: 'T.',\n        thu: 'K.',\n        fri: 'Pn.',\n        sat: 'Š.'\n      },\n      months: {\n        jan: 'Sau',\n        feb: 'Vas',\n        mar: 'Kov',\n        apr: 'Bal',\n        may: 'Geg',\n        jun: 'Bir',\n        jul: 'Lie',\n        aug: 'Rugp',\n        sep: 'Rugs',\n        oct: 'Spa',\n        nov: 'Lap',\n        dec: 'Gruo'\n      }\n    },\n    select: {\n      loading: 'Kraunasi',\n      noMatch: 'Duomenų nerasta',\n      noData: 'Nėra duomenų',\n      placeholder: 'Pasirink'\n    },\n    cascader: {\n      noMatch: 'Duomenų nerasta',\n      loading: 'Kraunasi',\n      placeholder: 'Pasirink',\n      noData: 'Nėra duomenų'\n    },\n    pagination: {\n      goto: 'Eiti į',\n      pagesize: '/p',\n      total: 'Viso {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'Žinutė',\n      confirm: 'OK',\n      cancel: 'Atšaukti',\n      error: 'Klaida įvestuose duomenyse'\n    },\n    upload: {\n      deleteTip: 'spauskite \"Trinti\" norėdami pašalinti',\n      delete: 'Trinti',\n      preview: 'Peržiūrėti',\n      continue: 'Toliau'\n    },\n    table: {\n      emptyText: 'Duomenų nerasta',\n      confirmFilter: 'Patvirtinti',\n      resetFilter: 'Atstatyti',\n      clearFilter: 'Išvalyti',\n      sumText: 'Suma'\n    },\n    tree: {\n      emptyText: 'Nėra duomenų'\n    },\n    transfer: {\n      noMatch: 'Duomenų nerasta',\n      noData: 'Nėra duomenų',\n      titles: ['Sąrašas 1', 'Sąrašas 2'],\n      filterPlaceholder: 'Įvesk raktažodį',\n      noCheckedFormat: 'Viso: {total}',\n      hasCheckedFormat: 'Pažymėta {checked} iš {total}'\n    },\n    image: {\n      error: 'FAILED' // to be translated\n    },\n    pageHeader: {\n      title: 'Back' // to be translated\n    },\n    popconfirm: {\n      confirmButtonText: 'Yes', // to be translated\n      cancelButtonText: 'No' // to be translated\n    },\n    empty: {\n      description: 'Duomenų nerasta'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/lv.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'Labi',\n      clear: 'Notīrīt'\n    },\n    datepicker: {\n      now: 'Tagad',\n      today: 'Šodien',\n      cancel: 'Atcelt',\n      clear: 'Notīrīt',\n      confirm: 'Labi',\n      selectDate: 'Izvēlēties datumu',\n      selectTime: 'Izvēlēties laiku',\n      startDate: 'Sākuma datums',\n      startTime: 'Sākuma laiks',\n      endDate: 'Beigu datums',\n      endTime: 'Beigu laiks',\n      prevYear: 'Iepriekšējais gads',\n      nextYear: 'Nākamais gads',\n      prevMonth: 'Iepriekšējais mēnesis',\n      nextMonth: 'Nākamais mēnesis',\n      year: '',\n      month1: 'Janvāris',\n      month2: 'Februāris',\n      month3: 'Marts',\n      month4: 'Aprīlis',\n      month5: 'Maijs',\n      month6: 'Jūnijs',\n      month7: 'Jūlijs',\n      month8: 'Augusts',\n      month9: 'Septembris',\n      month10: 'Oktobris',\n      month11: 'Novembris',\n      month12: 'Decembris',\n      // week: 'nedēļa',\n      weeks: {\n        sun: 'Sv',\n        mon: 'Pr',\n        tue: 'Ot',\n        wed: 'Tr',\n        thu: 'Ce',\n        fri: 'Pk',\n        sat: 'Se'\n      },\n      months: {\n        jan: 'Jan',\n        feb: 'Feb',\n        mar: 'Mar',\n        apr: 'Apr',\n        may: 'Mai',\n        jun: 'Jūn',\n        jul: 'Jūl',\n        aug: 'Aug',\n        sep: 'Sep',\n        oct: 'Okt',\n        nov: 'Nov',\n        dec: 'Dec'\n      }\n    },\n    select: {\n      loading: 'Ielādē',\n      noMatch: 'Nav atbilstošu datu',\n      noData: 'Nav datu',\n      placeholder: 'Izvēlēties'\n    },\n    cascader: {\n      noMatch: 'Nav atbilstošu datu',\n      loading: 'Ielādē',\n      placeholder: 'Izvēlēties',\n      noData: 'Nav datu'\n    },\n    pagination: {\n      goto: 'Iet uz',\n      pagesize: '/lapa',\n      total: 'Kopā {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'Paziņojums',\n      confirm: 'Labi',\n      cancel: 'Atcelt',\n      error: 'Nederīga ievade'\n    },\n    upload: {\n      deleteTip: 'Nospiediet dzēst lai izņemtu',\n      delete: 'Dzēst',\n      preview: 'Priekšskatīt',\n      continue: 'Turpināt'\n    },\n    table: {\n      emptyText: 'Nav datu',\n      confirmFilter: 'Apstiprināt',\n      resetFilter: 'Atiestatīt',\n      clearFilter: 'Visi',\n      sumText: 'Summa'\n    },\n    tree: {\n      emptyText: 'Nav datu'\n    },\n    transfer: {\n      noMatch: 'Nav atbilstošu datu',\n      noData: 'Nav datu',\n      titles: ['Saraksts 1', 'Saraksts 2'],\n      filterPlaceholder: 'Ievadīt atslēgvārdu',\n      noCheckedFormat: '{total} vienības',\n      hasCheckedFormat: '{checked}/{total} atzīmēti'\n    },\n    image: {\n      error: 'FAILED' // to be translated\n    },\n    pageHeader: {\n      title: 'Back' // to be translated\n    },\n    popconfirm: {\n      confirmButtonText: 'Yes', // to be translated\n      cancelButtonText: 'No' // to be translated\n    },\n    empty: {\n      description: 'Nav datu'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/mn.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'Тийм',\n      clear: 'Цэвэрлэх'\n    },\n    datepicker: {\n      now: 'Одоо',\n      today: 'Өнөөдөр',\n      cancel: 'Болих',\n      clear: 'Цэвэрлэх',\n      confirm: 'Тийм',\n      selectDate: 'Огноог сонго',\n      selectTime: 'Цагийг сонго',\n      startDate: 'Эхлэх огноо',\n      startTime: 'Эхлэх цаг',\n      endDate: 'Дуусах огноо',\n      endTime: 'Дуусах цаг',\n      prevYear: 'Өмнөх жил',\n      nextYear: 'Дараа жил',\n      prevMonth: 'Өмнөх сар',\n      nextMonth: 'Дараа сар',\n      year: 'он',\n      month1: '1 сар',\n      month2: '2 сар',\n      month3: '3 сар',\n      month4: '4 сар',\n      month5: '5 сар',\n      month6: '6 сар',\n      month7: '7 сар',\n      month8: '8 сар',\n      month9: '9 сар',\n      month10: '10 сар',\n      month11: '11 сар',\n      month12: '12 сар',\n      week: 'Долоо хоног',\n      weeks: {\n        sun: 'Ням',\n        mon: 'Дав',\n        tue: 'Мяг',\n        wed: 'Лха',\n        thu: 'Пүр',\n        fri: 'Баа',\n        sat: 'Бям'\n      },\n      months: {\n        jan: '1 сар',\n        feb: '2 сар',\n        mar: '3 сар',\n        apr: '4 сар',\n        may: '5 сар',\n        jun: '6 сар',\n        jul: '7 сар',\n        aug: '8 сар',\n        sep: '9 сар',\n        oct: '10 сар',\n        nov: '11 сар',\n        dec: '12 сар'\n      }\n    },\n    select: {\n      loading: 'Ачаалж байна',\n      noMatch: 'Тохирох өгөгдөл байхгүй',\n      noData: 'Өгөгдөл байхгүй',\n      placeholder: 'Сонгох'\n    },\n    cascader: {\n      noMatch: 'Тохирох өгөгдөл байхгүй',\n      loading: 'Ачаалж байна',\n      placeholder: 'Сонгох',\n      noData: 'Өгөгдөл байхгүй'\n    },\n    pagination: {\n      goto: 'Очих',\n      pagesize: '/хуудас',\n      total: 'Нийт {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'Зурвас',\n      confirm: 'Тийм',\n      cancel: 'Болих',\n      error: 'Буруу утга'\n    },\n    upload: {\n      deleteTip: 'Устгахын дарж арилга',\n      delete: 'Устгах',\n      preview: 'Өмнөх',\n      continue: 'Үргэлжлүүлэх'\n    },\n    table: {\n      emptyText: 'Өгөгдөл байхгүй',\n      confirmFilter: 'Зөвшөөрөх',\n      resetFilter: 'Цэвэрлэх',\n      clearFilter: 'Бүгд',\n      sumText: 'Нийт'\n    },\n    tree: {\n      emptyText: 'Өгөгдөл байхгүй'\n    },\n    transfer: {\n      noMatch: 'Тохирох өгөгдөл байхгүй',\n      noData: 'Өгөгдөл байхгүй',\n      titles: ['Жагсаалт 1', 'Жагсаалт 2'],\n      filterPlaceholder: 'Утга оруул',\n      noCheckedFormat: '{total} өгөгдөл',\n      hasCheckedFormat: '{checked}/{total} сонгосон'\n    },\n    image: {\n      error: 'FAILED' // to be translated\n    },\n    pageHeader: {\n      title: 'Back' // to be translated\n    },\n    popconfirm: {\n      confirmButtonText: 'Yes', // to be translated\n      cancelButtonText: 'No' // to be translated\n    },\n    empty: {\n      description: 'Өгөгдөл байхгүй'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/ms.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'Sah',\n      clear: 'Padam'\n    },\n    datepicker: {\n      now: 'Sekarang',\n      today: 'Hari ini',\n      cancel: 'Batal',\n      clear: 'Padam',\n      confirm: 'Sah',\n      selectDate: 'Pilih Tarikh',\n      selectTime: 'Pilih Masa',\n      startDate: 'Tarikh Mula',\n      startTime: 'Masa Mula',\n      endDate: 'Tarikh Tamat',\n      endTime: 'Masa Tamat',\n      prevYear: 'Tahun Lepas',\n      nextYear: 'Tahun Depan',\n      prevMonth: 'Bulan Lepas',\n      nextMonth: 'Bulan Depan',\n      year: 'Tahun',\n      month1: 'Januari',\n      month2: 'Febuari',\n      month3: 'Mac',\n      month4: 'April',\n      month5: 'Mei',\n      month6: 'Jun',\n      month7: 'Julai',\n      month8: 'Ogos',\n      month9: 'September',\n      month10: 'Oktober',\n      month11: 'November',\n      month12: 'Disember',\n      weeks: {\n        sun: 'Ahad',\n        mon: 'Isnin',\n        tue: 'Selasa',\n        wed: 'Rabu',\n        thu: 'Khamis',\n        fri: 'Jumaat',\n        sat: 'Sabtu'\n      },\n      months: {\n        jan: 'Januari',\n        feb: 'Febuari',\n        mar: 'Mac',\n        apr: 'April',\n        may: 'Mei',\n        jun: 'Jun',\n        jul: 'Julai',\n        aug: 'Ogos',\n        sep: 'September',\n        oct: 'Oktober',\n        nov: 'November',\n        dec: 'Disember'\n      }\n    },\n    select: {\n      loading: 'Sedang dimuat turun',\n      noMatch: 'Tiada maklumat yang sepadan',\n      noData: 'Tiada maklumat',\n      placeholder: 'Sila pilih'\n    },\n    cascader: {\n      noMatch: 'Tiada maklumat yang sepadan',\n      loading: 'Sedang dimuat turun',\n      placeholder: 'Sila pilih',\n      noData: 'Tiada maklumat'\n    },\n    pagination: {\n      goto: 'Seterusnya',\n      pagesize: 'x/Halaman',\n      total: 'Jumlah {total} ',\n      pageClassifier: 'Halaman'\n    },\n    messagebox: {\n      title: 'Tip',\n      confirm: 'Sah',\n      cancel: 'Batal',\n      error: 'Data yang diisi tidak sah!'\n    },\n    upload: {\n      deleteTip: 'Tekan \"Padam\" untuk memadam',\n      delete: 'Padam',\n      preview: 'Pratonton gambar',\n      continue: 'Meneruskan muat naik'\n    },\n    table: {\n      emptyText: 'Tiada maklumat',\n      confirmFilter: 'Tapis',\n      resetFilter: 'Set Semula',\n      clearFilter: 'Semua',\n      sumText: 'Jumlah'\n    },\n    tree: {\n      emptyText: 'Tiada maklumat'\n    },\n    transfer: {\n      noMatch: 'Tiada maklumat yang sepadan',\n      noData: 'Tiada maklumat',\n      titles: ['Senarai 1', 'Senarai 2'],\n      filterPlaceholder: 'Masukkan kandungan carian',\n      noCheckedFormat: 'Jumlah {total} item',\n      hasCheckedFormat: 'Telah memilih {checked}/{total} item'\n    },\n    image: {\n      error: 'Muat turun gagal'\n    },\n    pageHeader: {\n      title: 'Kembali'\n    },\n    popconfirm: {\n      confirmButtonText: 'Sah',\n      cancelButtonText: 'Batal'\n    },\n    empty: {\n      description: 'Tiada maklumat'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/nb-NO.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'OK',\n      clear: 'Tøm'\n    },\n    datepicker: {\n      now: 'Nå',\n      today: 'I dag',\n      cancel: 'Avbryt',\n      clear: 'Tøm',\n      confirm: 'OK',\n      selectDate: 'Velg dato',\n      selectTime: 'Velg tidspunkt',\n      startDate: 'Start Dato',\n      startTime: 'Start Tidspunkt',\n      endDate: 'Sluttdato',\n      endTime: 'Sluttidspunkt',\n      prevYear: 'Forrige År',\n      nextYear: 'Neste År',\n      prevMonth: 'Forrige Måned',\n      nextMonth: 'Neste Måned',\n      year: '',\n      month1: 'Januar',\n      month2: 'Februar',\n      month3: 'Mars',\n      month4: 'April',\n      month5: 'Mai',\n      month6: 'Juni',\n      month7: 'Juli',\n      month8: 'August',\n      month9: 'September',\n      month10: 'Oktober',\n      month11: 'November',\n      month12: 'Desember',\n      // week: 'week',\n      weeks: {\n        sun: 'Søn',\n        mon: 'Man',\n        tue: 'Tir',\n        wed: 'Ons',\n        thu: 'Tor',\n        fri: 'Fre',\n        sat: 'Lør'\n      },\n      months: {\n        jan: 'Jan',\n        feb: 'Feb',\n        mar: 'Mar',\n        apr: 'Apr',\n        may: 'Mai',\n        jun: 'Jun',\n        jul: 'Jul',\n        aug: 'Aug',\n        sep: 'Sep',\n        oct: 'Okt',\n        nov: 'Nov',\n        dec: 'Des'\n      }\n    },\n    select: {\n      loading: 'Laster',\n      noMatch: 'Ingen samsvarende data',\n      noData: 'Ingen data',\n      placeholder: 'Velg'\n    },\n    cascader: {\n      noMatch: 'Ingen samsvarende data',\n      loading: 'Laster',\n      placeholder: 'Velg',\n      noData: 'Ingen data'\n    },\n    pagination: {\n      goto: 'Gå til',\n      pagesize: '/side',\n      total: 'Total {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      confirm: 'OK',\n      cancel: 'Avbryt',\n      error: 'Ugyldig input'\n    },\n    upload: {\n      deleteTip: 'trykk slett for å ta bort',\n      delete: 'Slett',\n      preview: 'Forhåndsvisning',\n      continue: 'Fortsett'\n    },\n    table: {\n      emptyText: 'Ingen Data',\n      confirmFilter: 'Bekreft',\n      resetFilter: 'Tilbakestill',\n      clearFilter: 'Alle',\n      sumText: 'Sum'\n    },\n    tree: {\n      emptyText: 'Ingen Data'\n    },\n    transfer: {\n      noMatch: 'Ingen samsvarende data',\n      noData: 'Ingen data',\n      titles: ['Liste 1', 'Liste 2'],\n      filterPlaceholder: 'Tast inn nøkkelord',\n      noCheckedFormat: '{total} gjenstander',\n      hasCheckedFormat: '{checked}/{total} sjekket'\n    },\n    image: {\n      error: 'MISLYKTES'\n    },\n    pageHeader: {\n      title: 'Tilbake'\n    },\n    popconfirm: {\n      confirmButtonText: 'Ja',\n      cancelButtonText: 'Nei'\n    },\n    empty: {\n      description: 'Ingen Data'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/nl.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'Bevestig',\n      clear: 'Wissen'\n    },\n    datepicker: {\n      now: 'Nu',\n      today: 'Vandaag',\n      cancel: 'Annuleren',\n      clear: 'Legen',\n      confirm: 'Bevestig',\n      selectDate: 'Selecteer datum',\n      selectTime: 'Selecteer tijd',\n      startDate: 'Startdatum',\n      startTime: 'Starttijd',\n      endDate: 'Einddatum',\n      endTime: 'Eindtijd',\n      prevYear: 'Vorig jaar',\n      nextYear: 'Volgend jaar',\n      prevMonth: 'Vorige maand',\n      nextMonth: 'Volgende maand',\n      year: '',\n      month1: 'januari',\n      month2: 'februari',\n      month3: 'maart',\n      month4: 'april',\n      month5: 'mei',\n      month6: 'juni',\n      month7: 'juli',\n      month8: 'augustus',\n      month9: 'september',\n      month10: 'oktober',\n      month11: 'november',\n      month12: 'december',\n      // week: 'week',\n      weeks: {\n        sun: 'Zo',\n        mon: 'Ma',\n        tue: 'Di',\n        wed: 'Wo',\n        thu: 'Do',\n        fri: 'Vr',\n        sat: 'Za'\n      },\n      months: {\n        jan: 'jan',\n        feb: 'feb',\n        mar: 'maa',\n        apr: 'apr',\n        may: 'mei',\n        jun: 'jun',\n        jul: 'jul',\n        aug: 'aug',\n        sep: 'sep',\n        oct: 'okt',\n        nov: 'nov',\n        dec: 'dec'\n      }\n    },\n    select: {\n      loading: 'Laden',\n      noMatch: 'Geen overeenkomende resultaten',\n      noData: 'Geen data',\n      placeholder: 'Selecteer'\n    },\n    cascader: {\n      noMatch: 'Geen overeenkomende resultaten',\n      loading: 'Laden',\n      placeholder: 'Selecteer',\n      noData: 'Geen data'\n    },\n    pagination: {\n      goto: 'Ga naar',\n      pagesize: '/pagina',\n      total: 'Totaal {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'Bericht',\n      confirm: 'Bevestig',\n      cancel: 'Annuleren',\n      error: 'Ongeldige invoer'\n    },\n    upload: {\n      deleteTip: 'Kies verwijder om te wissen',\n      delete: 'Verwijder',\n      preview: 'Voorbeeld',\n      continue: 'Doorgaan'\n    },\n    table: {\n      emptyText: 'Geen data',\n      confirmFilter: 'Bevestigen',\n      resetFilter: 'Reset',\n      clearFilter: 'Alles',\n      sumText: 'Som'\n    },\n    tree: {\n      emptyText: 'Geen data'\n    },\n    transfer: {\n      noMatch: 'Geen overeenkomende resultaten',\n      noData: 'Geen data',\n      titles: ['Lijst 1', 'Lijst 2'],\n      filterPlaceholder: 'Geef zoekwoerd',\n      noCheckedFormat: '{total} items',\n      hasCheckedFormat: '{checked}/{total} geselecteerd'\n    },\n    image: {\n      error: 'FAILED' // to be translated\n    },\n    pageHeader: {\n      title: 'Back' // to be translated\n    },\n    popconfirm: {\n      confirmButtonText: 'Yes', // to be translated\n      cancelButtonText: 'No' // to be translated\n    },\n    empty: {\n      description: 'Geen data'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/pl.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'OK',\n      clear: 'Wyczyść'\n    },\n    datepicker: {\n      now: 'Teraz',\n      today: 'Dzisiaj',\n      cancel: 'Anuluj',\n      clear: 'Wyczyść',\n      confirm: 'OK',\n      selectDate: 'Wybierz datę',\n      selectTime: 'Wybierz godzinę',\n      startDate: 'Data początkowa',\n      startTime: 'Godzina początkowa',\n      endDate: 'Data końcowa',\n      endTime: 'Czas końcowa',\n      prevYear: 'Poprzedni rok',\n      nextYear: 'Następny rok',\n      prevMonth: 'Poprzedni miesiąc',\n      nextMonth: 'Następny miesiąc',\n      year: 'rok',\n      month1: 'styczeń',\n      month2: 'luty',\n      month3: 'marzec',\n      month4: 'kwiecień',\n      month5: 'maj',\n      month6: 'czerwiec',\n      month7: 'lipiec',\n      month8: 'sierpień',\n      month9: 'wrzesień',\n      month10: 'październik',\n      month11: 'listopad',\n      month12: 'grudzień',\n      week: 'tydzień',\n      weeks: {\n        sun: 'niedz.',\n        mon: 'pon.',\n        tue: 'wt.',\n        wed: 'śr.',\n        thu: 'czw.',\n        fri: 'pt.',\n        sat: 'sob.'\n      },\n      months: {\n        jan: 'STY',\n        feb: 'LUT',\n        mar: 'MAR',\n        apr: 'KWI',\n        may: 'MAJ',\n        jun: 'CZE',\n        jul: 'LIP',\n        aug: 'SIE',\n        sep: 'WRZ',\n        oct: 'PAŹ',\n        nov: 'LIS',\n        dec: 'GRU'\n      }\n    },\n    select: {\n      loading: 'Ładowanie',\n      noMatch: 'Brak dopasowań',\n      noData: 'Brak danych',\n      placeholder: 'Wybierz'\n    },\n    cascader: {\n      noMatch: 'Brak dopasowań',\n      loading: 'Ładowanie',\n      placeholder: 'Wybierz',\n      noData: 'Brak danych'\n    },\n    pagination: {\n      goto: 'Idź do',\n      pagesize: '/strona',\n      total: 'Wszystkich {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'Wiadomość',\n      confirm: 'OK',\n      cancel: 'Anuluj',\n      error: 'Wiadomość zawiera niedozwolone znaki'\n    },\n    upload: {\n      deleteTip: 'kliknij kasuj aby usunąć',\n      delete: 'Kasuj',\n      preview: 'Podgląd',\n      continue: 'Kontynuuj'\n    },\n    table: {\n      emptyText: 'Brak danych',\n      confirmFilter: 'Potwierdź',\n      resetFilter: 'Resetuj',\n      clearFilter: 'Wszystko',\n      sumText: 'Razem'\n    },\n    tree: {\n      emptyText: 'Brak danych'\n    },\n    transfer: {\n      noMatch: 'Brak dopasowań',\n      noData: 'Brak danych',\n      titles: ['Lista 1', 'Lista 2'],\n      filterPlaceholder: 'Wpisz szukaną frazę',\n      noCheckedFormat: 'razem: {total}',\n      hasCheckedFormat: 'wybranych: {checked}/{total}'\n    },\n    image: {\n      error: 'FAILED' // to be translated\n    },\n    pageHeader: {\n      title: 'Back' // to be translated\n    },\n    popconfirm: {\n      confirmButtonText: 'Yes', // to be translated\n      cancelButtonText: 'No' // to be translated\n    },\n    empty: {\n      description: 'Brak danych'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/pt-br.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'Confirmar',\n      clear: 'Limpar'\n    },\n    datepicker: {\n      now: 'Agora',\n      today: 'Hoje',\n      cancel: 'Cancelar',\n      clear: 'Limpar',\n      confirm: 'Confirmar',\n      selectDate: 'Selecione a data',\n      selectTime: 'Selecione a hora',\n      startDate: 'Data inicial',\n      startTime: 'Hora inicial',\n      endDate: 'Data final',\n      endTime: 'Hora final',\n      prevYear: 'Ano anterior',\n      nextYear: 'Próximo ano',\n      prevMonth: 'Mês anterior',\n      nextMonth: 'Próximo mês',\n      year: '',\n      month1: 'Janeiro',\n      month2: 'Fevereiro',\n      month3: 'Março',\n      month4: 'Abril',\n      month5: 'Maio',\n      month6: 'Junho',\n      month7: 'Julho',\n      month8: 'Agosto',\n      month9: 'Setembro',\n      month10: 'Outubro',\n      month11: 'Novembro',\n      month12: 'Dezembro',\n      // week: 'semana',\n      weeks: {\n        sun: 'Dom',\n        mon: 'Seg',\n        tue: 'Ter',\n        wed: 'Qua',\n        thu: 'Qui',\n        fri: 'Sex',\n        sat: 'Sab'\n      },\n      months: {\n        jan: 'Jan',\n        feb: 'Fev',\n        mar: 'Mar',\n        apr: 'Abr',\n        may: 'Mai',\n        jun: 'Jun',\n        jul: 'Jul',\n        aug: 'Ago',\n        sep: 'Set',\n        oct: 'Out',\n        nov: 'Nov',\n        dec: 'Dez'\n      }\n    },\n    select: {\n      loading: 'Carregando',\n      noMatch: 'Sem resultados',\n      noData: 'Sem dados',\n      placeholder: 'Selecione'\n    },\n    cascader: {\n      noMatch: 'Sem resultados',\n      loading: 'Carregando',\n      placeholder: 'Selecione',\n      noData: 'Sem dados'\n    },\n    pagination: {\n      goto: 'Ir para',\n      pagesize: '/página',\n      total: 'Total {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'Mensagem',\n      confirm: 'Confirmar',\n      cancel: 'Cancelar',\n      error: 'Erro!'\n    },\n    upload: {\n      deleteTip: 'aperte delete para apagar',\n      delete: 'Apagar',\n      preview: 'Pré-visualizar',\n      continue: 'Continuar'\n    },\n    table: {\n      emptyText: 'Sem dados',\n      confirmFilter: 'Confirmar',\n      resetFilter: 'Limpar',\n      clearFilter: 'Todos',\n      sumText: 'Total'\n    },\n    tree: {\n      emptyText: 'Sem dados'\n    },\n    transfer: {\n      noMatch: 'Sem resultados',\n      noData: 'Sem dados',\n      titles: ['Lista 1', 'Lista 2'],\n      filterPlaceholder: 'Digite uma palavra-chave',\n      noCheckedFormat: '{total} itens',\n      hasCheckedFormat: '{checked}/{total} selecionados'\n    },\n    image: {\n      error: 'Erro ao carregar imagem'\n    },\n    pageHeader: {\n      title: 'Voltar'\n    },\n    popconfirm: {\n      confirmButtonText: 'Sim',\n      cancelButtonText: 'Não'\n    },\n    empty: {\n      description: 'Sem dados'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/pt.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'Confirmar',\n      clear: 'Limpar'\n    },\n    datepicker: {\n      now: 'Agora',\n      today: 'Hoje',\n      cancel: 'Cancelar',\n      clear: 'Limpar',\n      confirm: 'Confirmar',\n      selectDate: 'Selecione a data',\n      selectTime: 'Selecione a hora',\n      startDate: 'Data de inicio',\n      startTime: 'Hora de inicio',\n      endDate: 'Data de fim',\n      endTime: 'Hora de fim',\n      prevYear: 'Previous Year', // to be translated\n      nextYear: 'Next Year', // to be translated\n      prevMonth: 'Previous Month', // to be translated\n      nextMonth: 'Next Month', // to be translated\n      year: '',\n      month1: 'Janeiro',\n      month2: 'Fevereiro',\n      month3: 'Março',\n      month4: 'Abril',\n      month5: 'Maio',\n      month6: 'Junho',\n      month7: 'Julho',\n      month8: 'Agosto',\n      month9: 'Setembro',\n      month10: 'Outubro',\n      month11: 'Novembro',\n      month12: 'Dezembro',\n      // week: 'semana',\n      weeks: {\n        sun: 'Dom',\n        mon: 'Seg',\n        tue: 'Ter',\n        wed: 'Qua',\n        thu: 'Qui',\n        fri: 'Sex',\n        sat: 'Sab'\n      },\n      months: {\n        jan: 'Jan',\n        feb: 'Fev',\n        mar: 'Mar',\n        apr: 'Abr',\n        may: 'Mai',\n        jun: 'Jun',\n        jul: 'Jul',\n        aug: 'Ago',\n        sep: 'Set',\n        oct: 'Out',\n        nov: 'Nov',\n        dec: 'Dez'\n      }\n    },\n    select: {\n      loading: 'A carregar',\n      noMatch: 'Sem correspondência',\n      noData: 'Sem dados',\n      placeholder: 'Selecione'\n    },\n    cascader: {\n      noMatch: 'Sem correspondência',\n      loading: 'A carregar',\n      placeholder: 'Selecione',\n      noData: 'Sem dados'\n    },\n    pagination: {\n      goto: 'Ir para',\n      pagesize: '/pagina',\n      total: 'Total {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'Mensagem',\n      confirm: 'Confirmar',\n      cancel: 'Cancelar',\n      error: 'Erro!'\n    },\n    upload: {\n      deleteTip: 'press delete to remove', // to be translated\n      delete: 'Apagar',\n      preview: 'Previsualizar',\n      continue: 'Continuar'\n    },\n    table: {\n      emptyText: 'Sem dados',\n      confirmFilter: 'Confirmar',\n      resetFilter: 'Limpar',\n      clearFilter: 'Todos',\n      sumText: 'Sum' // to be translated\n    },\n    tree: {\n      emptyText: 'Sem dados'\n    },\n    transfer: {\n      noMatch: 'Sem correspondência',\n      noData: 'Sem dados',\n      titles: ['List 1', 'List 2'], // to be translated\n      filterPlaceholder: 'Enter keyword', // to be translated\n      noCheckedFormat: '{total} items', // to be translated\n      hasCheckedFormat: '{checked}/{total} checked' // to be translated\n    },\n    image: {\n      error: 'FAILED' // to be translated\n    },\n    pageHeader: {\n      title: 'Back' // to be translated\n    },\n    popconfirm: {\n      confirmButtonText: 'Yes', // to be translated\n      cancelButtonText: 'No' // to be translated\n    },\n    empty: {\n      description: 'Sem dados'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/ro.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'OK',\n      clear: 'Șterge'\n    },\n    datepicker: {\n      now: 'Acum',\n      today: 'Azi',\n      cancel: 'Anulează',\n      clear: 'Șterge',\n      confirm: 'OK',\n      selectDate: 'Selectează data',\n      selectTime: 'Selectează ora',\n      startDate: 'Data de început',\n      startTime: 'Ora de început',\n      endDate: 'Data de sfârșit',\n      endTime: 'Ora de sfârșit',\n      prevYear: 'Anul trecut',\n      nextYear: 'Anul următor',\n      prevMonth: 'Luna trecută',\n      nextMonth: 'Luna următoare',\n      year: '',\n      month1: 'Ianuarie',\n      month2: 'Februarie',\n      month3: 'Martie',\n      month4: 'Aprilie',\n      month5: 'Mai',\n      month6: 'Iunie',\n      month7: 'Iulie',\n      month8: 'August',\n      month9: 'Septembrie',\n      month10: 'Octombrie',\n      month11: 'Noiembrie',\n      month12: 'Decembrie',\n      // week: 'week',\n      weeks: {\n        sun: 'Du',\n        mon: 'Lu',\n        tue: 'Ma',\n        wed: 'Mi',\n        thu: 'Jo',\n        fri: 'Vi',\n        sat: 'Sâ'\n      },\n      months: {\n        jan: 'Ian',\n        feb: 'Feb',\n        mar: 'Mar',\n        apr: 'Apr',\n        may: 'Mai',\n        jun: 'Iun',\n        jul: 'Iul',\n        aug: 'Aug',\n        sep: 'Sep',\n        oct: 'Oct',\n        nov: 'Noi',\n        dec: 'Dec'\n      }\n    },\n    select: {\n      loading: 'Se încarcă',\n      noMatch: 'Nu există date potrivite',\n      noData: 'Nu există date',\n      placeholder: 'Selectează'\n    },\n    cascader: {\n      noMatch: 'Nu există date potrivite',\n      loading: 'Se încarcă',\n      placeholder: 'Selectează',\n      noData: 'Nu există date'\n    },\n    pagination: {\n      goto: 'Go to',\n      pagesize: '/pagina',\n      total: 'Total {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'Mesaj',\n      confirm: 'OK',\n      cancel: 'Anulează',\n      error: 'Date introduse eronate'\n    },\n    upload: {\n      deleteTip: 'apăsați pe ștergeți pentru a elimina',\n      delete: 'șterge',\n      preview: 'previzualizare',\n      continue: 'continuă'\n    },\n    table: {\n      emptyText: 'Nu există date',\n      confirmFilter: 'Confirmă',\n      resetFilter: 'Resetează',\n      clearFilter: 'Tot',\n      sumText: 'Suma'\n    },\n    tree: {\n      emptyText: 'Nu există date'\n    },\n    transfer: {\n      noMatch: 'Nu există date potrivite',\n      noData: 'Nu există date',\n      titles: ['Lista 1', 'Lista 2'],\n      filterPlaceholder: 'Introduceți cuvântul cheie',\n      noCheckedFormat: '{total} elemente',\n      hasCheckedFormat: '{checked}/{total} verificate'\n    },\n    image: {\n      error: 'FAILED' // to be translated\n    },\n    pageHeader: {\n      title: 'Back' // to be translated\n    },\n    popconfirm: {\n      confirmButtonText: 'Yes', // to be translated\n      cancelButtonText: 'No' // to be translated\n    },\n    empty: {\n      description: 'Nu există date'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/ru-RU.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'OK',\n      clear: 'Очистить'\n    },\n    datepicker: {\n      now: 'Сейчас',\n      today: 'Сегодня',\n      cancel: 'Отмена',\n      clear: 'Очистить',\n      confirm: 'OK',\n      selectDate: 'Выбрать дату',\n      selectTime: 'Выбрать время',\n      startDate: 'Дата начала',\n      startTime: 'Время начала',\n      endDate: 'Дата окончания',\n      endTime: 'Время окончания',\n      prevYear: 'Предыдущий год',\n      nextYear: 'Следующий год',\n      prevMonth: 'Предыдущий месяц',\n      nextMonth: 'Следующий месяц',\n      year: '',\n      month1: 'Январь',\n      month2: 'Февраль',\n      month3: 'Март',\n      month4: 'Апрель',\n      month5: 'Май',\n      month6: 'Июнь',\n      month7: 'Июль',\n      month8: 'Август',\n      month9: 'Сентябрь',\n      month10: 'Октябрь',\n      month11: 'Ноябрь',\n      month12: 'Декабрь',\n      week: 'неделя',\n      weeks: {\n        sun: 'Вс',\n        mon: 'Пн',\n        tue: 'Вт',\n        wed: 'Ср',\n        thu: 'Чт',\n        fri: 'Пт',\n        sat: 'Сб'\n      },\n      months: {\n        jan: 'Янв',\n        feb: 'Фев',\n        mar: 'Мар',\n        apr: 'Апр',\n        may: 'Май',\n        jun: 'Июн',\n        jul: 'Июл',\n        aug: 'Авг',\n        sep: 'Сен',\n        oct: 'Окт',\n        nov: 'Ноя',\n        dec: 'Дек'\n      }\n    },\n    select: {\n      loading: 'Загрузка',\n      noMatch: 'Совпадений не найдено',\n      noData: 'Нет данных',\n      placeholder: 'Выбрать'\n    },\n    cascader: {\n      noMatch: 'Совпадений не найдено',\n      loading: 'Загрузка',\n      placeholder: 'Выбрать',\n      noData: 'Нет данных'\n    },\n    pagination: {\n      goto: 'Перейти',\n      pagesize: ' на странице',\n      total: 'Всего {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'Сообщение',\n      confirm: 'OK',\n      cancel: 'Отмена',\n      error: 'Недопустимый ввод данных'\n    },\n    upload: {\n      deleteTip: 'Нажмите [Удалить] для удаления',\n      delete: 'Удалить',\n      preview: 'Предпросмотр',\n      continue: 'Продолжить'\n    },\n    table: {\n      emptyText: 'Нет данных',\n      confirmFilter: 'Подтвердить',\n      resetFilter: 'Сбросить',\n      clearFilter: 'Все',\n      sumText: 'Сумма'\n    },\n    tree: {\n      emptyText: 'Нет данных'\n    },\n    transfer: {\n      noMatch: 'Совпадений не найдено',\n      noData: 'Нет данных',\n      titles: ['Список 1', 'Список 2'],\n      filterPlaceholder: 'Введите ключевое слово',\n      noCheckedFormat: '{total} пунктов',\n      hasCheckedFormat: '{checked}/{total} выбрано'\n    },\n    image: {\n      error: 'Произошла ошибка'\n    },\n    pageHeader: {\n      title: 'Назад'\n    },\n    popconfirm: {\n      confirmButtonText: 'OK',\n      cancelButtonText: 'Отмена'\n    },\n    empty: {\n      description: 'Нет данных'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/si.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'හරි',\n      clear: 'හිස් කරන්න'\n    },\n    datepicker: {\n      now: 'දැන්',\n      today: 'අද',\n      cancel: 'අවලංගු කරන්න',\n      clear: 'හිස් කරන්න',\n      confirm: 'හරි',\n      selectDate: 'දිනය තෝරන්න',\n      selectTime: 'වේලාව තෝරන්න',\n      startDate: 'ආරම්භක දිනය',\n      startTime: 'ආරම්භක වේලාව',\n      endDate: 'අවසන් වන දිනය',\n      endTime: 'අවසන් වන වේලාව',\n      prevYear: 'කලින් අවුරුද්ද',\n      nextYear: 'ඊළඟ අවුරුද්ද',\n      prevMonth: 'කලින් මාසය',\n      nextMonth: 'ඊළඟ මාසය',\n      year: '',\n      month1: 'දුරුතු',\n      month2: 'නවම්',\n      month3: 'මැදින්',\n      month4: 'බක්',\n      month5: 'වෙසක්',\n      month6: 'පොසොන්',\n      month7: 'ඇසළ',\n      month8: 'නිකිණි',\n      month9: 'බිනර',\n      month10: 'වප්',\n      month11: 'ඉල්',\n      month12: 'උඳුවප්',\n      week: 'සතිය',\n      weeks: {\n        sun: 'ඉරිදා',\n        mon: 'සඳුදා',\n        tue: 'අඟහ',\n        wed: 'බදාදා',\n        thu: 'බ්‍රහස්',\n        fri: 'සිකු',\n        sat: 'සෙන'\n      },\n      months: {\n        jan: 'දුරුතු',\n        feb: 'නවම්',\n        mar: 'මැදින්',\n        apr: 'බක්',\n        may: 'වෙසක්',\n        jun: 'පොසොන්',\n        jul: 'ඇසළ',\n        aug: 'නිකිණි',\n        sep: 'බිනර',\n        oct: 'වප්',\n        nov: 'ඉල්',\n        dec: 'උඳුව'\n      }\n    },\n    select: {\n      loading: 'පූරණය වෙමින්',\n      noMatch: 'ගැළපෙන දත්ත නැත',\n      noData: 'දත්ත නැත',\n      placeholder: 'තෝරන්න'\n    },\n    cascader: {\n      noMatch: 'ගැළපෙන දත්ත නැත',\n      loading: 'පූරණය වෙමින්',\n      placeholder: 'තෝරන්න',\n      noData: 'දත්ත නැත'\n    },\n    pagination: {\n      goto: 'වෙත යන්න',\n      pagesize: '/පිටුව',\n      total: 'මුළු {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'පණිවිඩය',\n      confirm: 'හරි',\n      cancel: 'අවලංගු කරන්න',\n      error: 'අනීතික ආදානයකි'\n    },\n    upload: {\n      deleteTip: 'ඉවතලීමට මකන්න ඔබන්න',\n      delete: 'මකන්න',\n      preview: 'පෙරදසුන',\n      continue: 'ඉදිරියට'\n    },\n    table: {\n      emptyText: 'දත්ත නැත',\n      confirmFilter: 'තහවුරු',\n      resetFilter: 'යළි සකසන්න',\n      clearFilter: 'සියල්ල',\n      sumText: 'එකතුව'\n    },\n    tree: {\n      emptyText: 'දත්ත නැත'\n    },\n    transfer: {\n      noMatch: 'ගැළපෙන දත්ත නැත',\n      noData: 'තෝරන්න',\n      titles: ['ලේඛනය 1', 'ලේඛනය 2'], // to be translated\n      filterPlaceholder: 'මූලපදය යොදන්න', // to be translated\n      noCheckedFormat: 'අථක {total}', // to be translated\n      hasCheckedFormat: '{checked}/{total} පරීක්‍ෂා විය' // to be translated\n    },\n    image: {\n      error: 'අසමත් විය'\n    },\n    pageHeader: {\n      title: 'ආපසු' // to be translated\n    },\n    popconfirm: {\n      confirmButtonText: 'ඔව්',\n      cancelButtonText: 'නැහැ'\n    },\n    empty: {\n      description: 'දත්ත නැත'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/sk.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'OK',\n      clear: 'Zmazať'\n    },\n    datepicker: {\n      now: 'Teraz',\n      today: 'Dnes',\n      cancel: 'Zrušiť',\n      clear: 'Zmazať',\n      confirm: 'OK',\n      selectDate: 'Vybrať dátum',\n      selectTime: 'Vybrať čas',\n      startDate: 'Dátum začiatku',\n      startTime: 'Čas začiatku',\n      endDate: 'Dátum konca',\n      endTime: 'Čas konca',\n      prevYear: 'Predošlý rok',\n      nextYear: 'Ďalší rok',\n      prevMonth: 'Predošlý mesiac',\n      nextMonth: 'Ďalší mesiac',\n      day: 'Deň',\n      week: 'Týždeň',\n      month: 'Mesiac',\n      year: 'Rok',\n      month1: 'Január',\n      month2: 'Február',\n      month3: 'Marec',\n      month4: 'Apríl',\n      month5: 'Máj',\n      month6: 'Jún',\n      month7: 'Júl',\n      month8: 'August',\n      month9: 'September',\n      month10: 'Október',\n      month11: 'November',\n      month12: 'December',\n      weeks: {\n        sun: 'Ne',\n        mon: 'Po',\n        tue: 'Ut',\n        wed: 'St',\n        thu: 'Št',\n        fri: 'Pi',\n        sat: 'So'\n      },\n      months: {\n        jan: 'Jan',\n        feb: 'Feb',\n        mar: 'Mar',\n        apr: 'Apr',\n        may: 'Máj',\n        jun: 'Jún',\n        jul: 'Júl',\n        aug: 'Aug',\n        sep: 'Sep',\n        oct: 'Okt',\n        nov: 'Nov',\n        dec: 'Dec'\n      }\n    },\n    select: {\n      loading: 'Načítavanie',\n      noMatch: 'Žiadna zhoda',\n      noData: 'Žiadne dáta',\n      placeholder: 'Vybrať'\n    },\n    cascader: {\n      noMatch: 'Žiadna zhoda',\n      loading: 'Načítavanie',\n      placeholder: 'Vybrať',\n      noData: 'Žiadne dáta'\n    },\n    pagination: {\n      goto: 'Choď na',\n      pagesize: 'na stranu',\n      total: 'Všetko {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'Správa',\n      confirm: 'OK',\n      cancel: 'Zrušiť',\n      error: 'Neplatný vstup'\n    },\n    upload: {\n      deleteTip: 'pre odstránenie stisni klávesu Delete',\n      delete: 'Vymazať',\n      preview: 'Prehliadať',\n      continue: 'Pokračovať'\n    },\n    table: {\n      emptyText: 'Žiadne dáta',\n      confirmFilter: 'Potvrdiť',\n      resetFilter: 'Zresetovať',\n      clearFilter: 'Všetko',\n      sumText: 'Spolu'\n    },\n    tree: {\n      emptyText: 'Žiadne dáta'\n    },\n    transfer: {\n      noMatch: 'Žiadna zhoda',\n      noData: 'Žiadne dáta',\n      titles: ['Zoznam 1', 'Zoznam 2'],\n      filterPlaceholder: 'Filtrovať podľa',\n      noCheckedFormat: '{total} položiek',\n      hasCheckedFormat: '{checked}/{total} označených'\n    },\n    image: {\n      error: 'Chyba načítania'\n    },\n    pageHeader: {\n      title: 'Späť'\n    },\n    popconfirm: {\n      confirmButtonText: 'Potvrdiť',\n      cancelButtonText: 'Zrušiť'\n    },\n    empty: {\n      description: 'Žiadne dáta'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/sl.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'V redu',\n      clear: 'Počisti'\n    },\n    datepicker: {\n      now: 'Zdaj',\n      today: 'Danes',\n      cancel: 'Prekliči',\n      clear: 'Počisti',\n      confirm: 'Potrdi',\n      selectDate: 'Izberi datum',\n      selectTime: 'Izberi čas',\n      startDate: 'Začetni datum',\n      startTime: 'Začetni čas',\n      endDate: 'Končni datum',\n      endTime: 'Končni čas',\n      prevYear: 'Prejšnje leto',\n      nextYear: 'Naslednje leto',\n      prevMonth: 'Prejšnji mesec',\n      nextMonth: 'Naslednji mesec',\n      year: '',\n      month1: 'Jan',\n      month2: 'Feb',\n      month3: 'Mar',\n      month4: 'Apr',\n      month5: 'Maj',\n      month6: 'Jun',\n      month7: 'Jul',\n      month8: 'Avg',\n      month9: 'Sep',\n      month10: 'Okt',\n      month11: 'Nov',\n      month12: 'Dec',\n      week: 'teden',\n      weeks: {\n        sun: 'Ned',\n        mon: 'Pon',\n        tue: 'Tor',\n        wed: 'Sre',\n        thu: 'Čet',\n        fri: 'Pet',\n        sat: 'Sob'\n      },\n      months: {\n        jan: 'Jan',\n        feb: 'Feb',\n        mar: 'Mar',\n        apr: 'Apr',\n        may: 'Maj',\n        jun: 'Jun',\n        jul: 'Jul',\n        aug: 'Avg',\n        sep: 'Sep',\n        oct: 'Okt',\n        nov: 'Nov',\n        dec: 'Dec'\n      }\n    },\n    select: {\n      loading: 'Nalaganje',\n      noMatch: 'Ni ustreznih podatkov',\n      noData: 'Ni podatkov',\n      placeholder: 'Izberi'\n    },\n    cascader: {\n      noMatch: 'Ni ustreznih podatkov',\n      loading: 'Nalaganje',\n      placeholder: 'Izberi',\n      noData: 'Ni podatkov'\n    },\n    pagination: {\n      goto: 'Pojdi na',\n      pagesize: '/stran',\n      total: 'Skupno {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'Sporočilo',\n      confirm: 'V redu',\n      cancel: 'Prekliči',\n      error: 'Nedovoljen vnos'\n    },\n    upload: {\n      deleteTip: 'press delete to remove', // to be translated\n      delete: 'Izbriši',\n      preview: 'Predogled',\n      continue: 'Nadaljuj'\n    },\n    table: {\n      emptyText: 'Ni podatkov',\n      confirmFilter: 'Potrdi',\n      resetFilter: 'Ponastavi',\n      clearFilter: 'Vse',\n      sumText: 'Skupno'\n    },\n    tree: {\n      emptyText: 'Ni podatkov'\n    },\n    transfer: {\n      noMatch: 'Ni ustreznih podatkov',\n      noData: 'Ni podatkov',\n      titles: ['Seznam 1', 'Seznam 2'],\n      filterPlaceholder: 'Vnesi ključno besedo',\n      noCheckedFormat: '{total} elementov',\n      hasCheckedFormat: '{checked}/{total} izbranih'\n    },\n    image: {\n      error: 'NEUSPELO'\n    },\n    pageHeader: {\n      title: 'Nazaj'\n    },\n    popconfirm: {\n      confirmButtonText: 'Da',\n      cancelButtonText: 'Ne'\n    },\n    empty: {\n      description: 'Ni podatkov'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/sr-Latn.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'OK',\n      clear: 'Poništi'\n    },\n    datepicker: {\n      now: 'Sad',\n      today: 'Danas',\n      cancel: 'Otkaži',\n      clear: 'Briši',\n      confirm: 'OK',\n      selectDate: 'Izaberi datum',\n      selectTime: 'Izaberi vreme',\n      startDate: 'Datum početka',\n      startTime: 'Vreme početka',\n      endDate: 'Datum završetka',\n      endTime: 'Vreme završetka',\n      prevYear: 'Prethodna godina',\n      nextYear: 'Sledeća godina',\n      prevMonth: 'Prethodni mesec',\n      nextMonth: 'Sledeći mesec',\n      year: 'godina',\n      month1: 'januar',\n      month2: 'februar',\n      month3: 'mart',\n      month4: 'april',\n      month5: 'maj',\n      month6: 'jun',\n      month7: 'jul',\n      month8: 'avgust',\n      month9: 'septembar',\n      month10: 'oktobar',\n      month11: 'novembar',\n      month12: 'decembar',\n      week: 'sedmica',\n      weeks: {\n        sun: 'Ned',\n        mon: 'Pon',\n        tue: 'Uto',\n        wed: 'Sre',\n        thu: 'Čet',\n        fri: 'Pet',\n        sat: 'Sub'\n      },\n      months: {\n        jan: 'jan',\n        feb: 'feb',\n        mar: 'mar',\n        apr: 'apr',\n        may: 'maj',\n        jun: 'jun',\n        jul: 'jul',\n        aug: 'avg',\n        sep: 'sep',\n        oct: 'okt',\n        nov: 'nov',\n        dec: 'dev'\n      }\n    },\n    select: {\n      loading: 'Učitavanje',\n      noMatch: 'Nema rezultata',\n      noData: 'Nema podataka',\n      placeholder: 'Izaberi'\n    },\n    cascader: {\n      noMatch: 'Nema rezultata',\n      loading: 'Učitavanje',\n      placeholder: 'Izaberi',\n      noData: 'Nema podataka'\n    },\n    pagination: {\n      goto: 'Idi na',\n      pagesize: '/strani',\n      total: 'Ukupno {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'Poruka',\n      confirm: 'OK',\n      cancel: 'Otkaži',\n      error: 'Neisravan unos'\n    },\n    upload: {\n      deleteTip: 'pritisni BRIŠI da obrišeš',\n      delete: 'Briši',\n      preview: 'Vidi',\n      continue: 'Nastavi'\n    },\n    table: {\n      emptyText: 'Nema podataka',\n      confirmFilter: 'Potvrdi',\n      resetFilter: 'Resetuj',\n      clearFilter: 'Sve',\n      sumText: 'Zbir'\n    },\n    tree: {\n      emptyText: 'Nema podataka'\n    },\n    transfer: {\n      noMatch: 'Nema rezultata',\n      noData: 'Nema podataka',\n      titles: ['Lista 1', 'Lista 2'],\n      filterPlaceholder: 'Unesi ključnu reč',\n      noCheckedFormat: '{total} stavki',\n      hasCheckedFormat: '{checked}/{total} obeleženih'\n    },\n    image: {\n      error: 'NEUSPEŠNO'\n    },\n    pageHeader: {\n      title: 'Nazad'\n    },\n    popconfirm: {\n      confirmButtonText: 'Da',\n      cancelButtonText: 'Ne'\n    },\n    empty: {\n      description: 'Nema podataka'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/sr.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'OK',\n      clear: 'Поништи'\n    },\n    datepicker: {\n      now: 'Сад',\n      today: 'Данас',\n      cancel: 'Откажи',\n      clear: 'Бриши',\n      confirm: 'OK',\n      selectDate: 'Изабери датум',\n      selectTime: 'Изабери време',\n      startDate: 'Датум почетка',\n      startTime: 'Време почетка',\n      endDate: 'Датум завршетка',\n      endTime: 'Време завршетка',\n      prevYear: 'Претходна година',\n      nextYear: 'Следећа година',\n      prevMonth: 'Претходни месец',\n      nextMonth: 'Следећи месец',\n      year: 'година',\n      month1: 'јануар',\n      month2: 'фебруар',\n      month3: 'март',\n      month4: 'април',\n      month5: 'мај',\n      month6: 'јун',\n      month7: 'јул',\n      month8: 'август',\n      month9: 'септембар',\n      month10: 'октобар',\n      month11: 'новембар',\n      month12: 'децембар',\n      week: 'седмица',\n      weeks: {\n        sun: 'Нед',\n        mon: 'Пон',\n        tue: 'Уто',\n        wed: 'Сре',\n        thu: 'Чет',\n        fri: 'Пет',\n        sat: 'Суб'\n      },\n      months: {\n        jan: 'јан',\n        feb: 'феб',\n        mar: 'мар',\n        apr: 'апр',\n        may: 'мај',\n        jun: 'јун',\n        jul: 'јул',\n        aug: 'авг',\n        sep: 'сеп',\n        oct: 'окт',\n        nov: 'нов',\n        dec: 'дец'\n      }\n    },\n    select: {\n      loading: 'Учитавање',\n      noMatch: 'Нема резултата',\n      noData: 'Нема података',\n      placeholder: 'Изабери'\n    },\n    cascader: {\n      noMatch: 'Нема резултата',\n      loading: 'Учитавање',\n      placeholder: 'Изабери',\n      noData: 'Нема података'\n    },\n    pagination: {\n      goto: 'Иди на',\n      pagesize: '/страни',\n      total: 'Укупно {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'Порука',\n      confirm: 'OK',\n      cancel: 'Откажи',\n      error: 'Неисправан унос'\n    },\n    upload: {\n      deleteTip: 'притисни БРИШИ да обришеш',\n      delete: 'Бриши',\n      preview: 'Види',\n      continue: 'Настави'\n    },\n    table: {\n      emptyText: 'Нема података',\n      confirmFilter: 'Потврди',\n      resetFilter: 'Ресетуј',\n      clearFilter: 'Све',\n      sumText: 'Збир'\n    },\n    tree: {\n      emptyText: 'Нема података'\n    },\n    transfer: {\n      noMatch: 'Нема резултата',\n      noData: 'Нема података',\n      titles: ['Листа 1', 'Листа 2'], // to be translated\n      filterPlaceholder: 'Унеси кључну реч', // to be translated\n      noCheckedFormat: '{total} ставки', // to be translated\n      hasCheckedFormat: '{checked}/{total} обележених' // to be translated\n    },\n    image: {\n      error: 'FAILED' // to be translated\n    },\n    pageHeader: {\n      title: 'Back' // to be translated\n    },\n    popconfirm: {\n      confirmButtonText: 'Yes', // to be translated\n      cancelButtonText: 'No' // to be translated\n    },\n    empty: {\n      description: 'Нема података'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/sv-SE.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'OK',\n      clear: 'Töm'\n    },\n    datepicker: {\n      now: 'Nu',\n      today: 'Idag',\n      cancel: 'Avbryt',\n      clear: 'Töm',\n      confirm: 'OK',\n      selectDate: 'Välj datum',\n      selectTime: 'Välj tid',\n      startDate: 'Startdatum',\n      startTime: 'Starttid',\n      endDate: 'Slutdatum',\n      endTime: 'Sluttid',\n      prevYear: 'Föregående år',\n      nextYear: 'Nästa år',\n      prevMonth: 'Föregående månad',\n      nextMonth: 'Nästa månad',\n      year: '',\n      month1: 'Januari',\n      month2: 'Februari',\n      month3: 'Mars',\n      month4: 'April',\n      month5: 'Maj',\n      month6: 'Juni',\n      month7: 'Juli',\n      month8: 'Augusti',\n      month9: 'September',\n      month10: 'Oktober',\n      month11: 'November',\n      month12: 'December',\n      // week: 'week',\n      weeks: {\n        sun: 'Sön',\n        mon: 'Mån',\n        tue: 'Tis',\n        wed: 'Ons',\n        thu: 'Tor',\n        fri: 'Fre',\n        sat: 'Lör'\n      },\n      months: {\n        jan: 'Jan',\n        feb: 'Feb',\n        mar: 'Mar',\n        apr: 'Apr',\n        may: 'Maj',\n        jun: 'Jun',\n        jul: 'Jul',\n        aug: 'Aug',\n        sep: 'Sep',\n        oct: 'Okt',\n        nov: 'Nov',\n        dec: 'Dec'\n      }\n    },\n    select: {\n      loading: 'Laddar',\n      noMatch: 'Hittade inget',\n      noData: 'Ingen data',\n      placeholder: 'Välj'\n    },\n    cascader: {\n      noMatch: 'Hittade inget',\n      loading: 'Laddar',\n      placeholder: 'Välj',\n      noData: 'Ingen data'\n    },\n    pagination: {\n      goto: 'Gå till',\n      pagesize: '/sida',\n      total: 'Totalt {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'Meddelande',\n      confirm: 'OK',\n      cancel: 'Avbryt',\n      error: 'Felaktig inmatning'\n    },\n    upload: {\n      deleteTip: 'press delete to remove', // to be translated\n      delete: 'Radera',\n      preview: 'Förhandsvisa',\n      continue: 'Fortsätt'\n    },\n    table: {\n      emptyText: 'Inga Data',\n      confirmFilter: 'Bekräfta',\n      resetFilter: 'Återställ',\n      clearFilter: 'Alla',\n      sumText: 'Summa'\n    },\n    tree: {\n      emptyText: 'Ingen data'\n    },\n    transfer: {\n      noMatch: 'Hittade inget',\n      noData: 'Ingen data',\n      titles: ['List 1', 'List 2'], // to be translated\n      filterPlaceholder: 'Enter keyword', // to be translated\n      noCheckedFormat: '{total} items', // to be translated\n      hasCheckedFormat: '{checked}/{total} checked' // to be translated\n    },\n    image: {\n      error: 'FAILED' // to be translated\n    },\n    pageHeader: {\n      title: 'Bakåt' // to be translated\n    },\n    popconfirm: {\n      confirmButtonText: 'Ja',\n      cancelButtonText: 'Nej'\n    },\n    empty: {\n      description: 'Inga Data'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/sw.js",
    "content": "export default {\r\n  el: {\r\n    colorpicker: {\r\n      confirm: 'Sawa',\r\n      clear: 'Futa'\r\n    },\r\n    datepicker: {\r\n      now: 'Hivi Punde',\r\n      today: 'Leo',\r\n      cancel: 'Katisha',\r\n      clear: 'Futa',\r\n      confirm: 'Sawa',\r\n      selectDate: 'Chagua tarehe',\r\n      selectTime: 'Chagua Muda',\r\n      startDate: 'Kuanzia Tarehe',\r\n      startTime: 'Kuanzia Saa',\r\n      endDate: 'Mpaka Tarehe',\r\n      endTime: 'Mpaka Saa',\r\n      prevYear: 'Mwaka uliopita',\r\n      nextYear: 'Mwaka ujao',\r\n      prevMonth: 'Mwezi uliopita',\r\n      nextMonth: 'Mwezi ujao',\r\n      year: '',\r\n      month1: 'Januari',\r\n      month2: 'Februari',\r\n      month3: 'Machi',\r\n      month4: 'Aprili',\r\n      month5: 'Mei',\r\n      month6: 'Juni',\r\n      month7: 'Julai',\r\n      month8: 'Agosti',\r\n      month9: 'Septemba',\r\n      month10: 'Oktoba',\r\n      month11: 'Novemba',\r\n      month12: 'Disemba',\r\n      week: 'wiki',\r\n      weeks: {\r\n        sun: 'J2',\r\n        mon: 'J3',\r\n        tue: 'J4',\r\n        wed: 'J5',\r\n        thu: 'Alhamisi',\r\n        fri: 'Ijumaa',\r\n        sat: 'J1'\r\n      },\r\n      months: {\r\n        jan: 'Jan',\r\n        feb: 'Feb',\r\n        mar: 'Mar',\r\n        apr: 'Apr',\r\n        may: 'Mei',\r\n        jun: 'Jun',\r\n        jul: 'Jul',\r\n        aug: 'Ago',\r\n        sep: 'Sep',\r\n        oct: 'Okt',\r\n        nov: 'Nov',\r\n        dec: 'Dec'\r\n      }\r\n    },\r\n    select: {\r\n      loading: 'Inapakia',\r\n      noMatch: 'Hakuna Matokeo yaliyofanana',\r\n      noData: 'Hakuna Matokeo',\r\n      placeholder: 'Chagua'\r\n    },\r\n    cascader: {\r\n      noMatch: 'Hakuna Matokeo yaliyofanana',\r\n      loading: 'Inapakia',\r\n      placeholder: 'Chagua',\r\n      noData: 'Hakuna Matokeo'\r\n    },\r\n    pagination: {\r\n      goto: 'Nenda',\r\n      pagesize: '/page',\r\n      total: 'Jumla {total}',\r\n      pageClassifier: ''\r\n    },\r\n    messagebox: {\r\n      title: 'Ujumbe',\r\n      confirm: 'Sawa',\r\n      cancel: 'Katisha',\r\n      error: 'Maingizo yasiyo sahihi'\r\n    },\r\n    upload: {\r\n      deleteTip: 'bonyeza futa kuondoa',\r\n      delete: 'Futa',\r\n      preview: 'Onyesha',\r\n      continue: 'Endelea'\r\n    },\r\n    table: {\r\n      emptyText: 'Hakuna Data',\r\n      confirmFilter: 'Hakikisha',\r\n      resetFilter: 'Ondoa Kichujio',\r\n      clearFilter: 'Zote',\r\n      sumText: 'Jumla'\r\n    },\r\n    tree: {\r\n      emptyText: 'Hakuna Data'\r\n    },\r\n    transfer: {\r\n      noMatch: 'Hakuna Matokeo yaliyofanana',\r\n      noData: 'Hakuna Data',\r\n      titles: ['List 1', 'List 2'], // to be translated\r\n      filterPlaceholder: 'Enter keyword', // to be translated\r\n      noCheckedFormat: '{total} ya zote', // to be translated\r\n      hasCheckedFormat: '{checked}/{total} zilizochaguliwa' // to be translated\r\n    },\r\n    image: {\r\n      error: 'IMEFELI'\r\n    },\r\n    pageHeader: {\r\n      title: 'Nyuma' // to be translated\r\n    },\r\n    popconfirm: {\r\n      confirmButtonText: 'Ndio',\r\n      cancelButtonText: 'Hapana'\r\n    },\r\n    empty: {\r\n      description: 'Hakuna Data'\r\n    }\r\n  }\r\n};\r\n"
  },
  {
    "path": "src/locale/lang/ta.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'உறுதி செய்',\n      clear: 'தெளிவாக்கு'\n    },\n    datepicker: {\n      now: 'தற்போது',\n      today: 'இன்று',\n      cancel: 'ரத்து செய்',\n      clear: 'சரி',\n      confirm: 'உறுதி செய்',\n      selectDate: 'தேதியை தேர்வு செய்',\n      selectTime: 'நேரத்தை தேர்வு செய்',\n      startDate: 'தொடங்கும் நாள்',\n      startTime: 'தொடங்கும் நேரம்',\n      endDate: 'முடியும் தேதி',\n      endTime: 'முடியும் நேரம்',\n      prevYear: 'Previous Year', // to be translated\n      nextYear: 'Next Year', // to be translated\n      prevMonth: 'Previous Month', // to be translated\n      nextMonth: 'Next Month', // to be translated\n      year: 'வருடம்',\n      month1: 'ஜனவரி',\n      month2: 'பிப்ரவரி',\n      month3: 'மார்ச்',\n      month4: 'ஏப்ரல்',\n      month5: 'மே',\n      month6: 'ஜூன்',\n      month7: 'ஜூலை',\n      month8: 'ஆகஸ்ட்',\n      month9: 'செப்டம்பர்',\n      month10: 'அக்டோபர்',\n      month11: 'நவம்பர்',\n      month12: 'டிசம்பர்',\n      weeks: {\n        sun: 'ஞாயிறு',\n        mon: 'திங்கள்',\n        tue: 'செவ்வாய்',\n        wed: 'புதன்',\n        thu: 'வியாழன்',\n        fri: 'வெள்ளி',\n        sat: 'சனி'\n      },\n      months: {\n        jan: 'ஜனவரி',\n        feb: 'பிப்ரவரி',\n        mar: 'மார்ச்',\n        apr: 'ஏப்ரல்',\n        may: 'மே',\n        jun: 'ஜூன்',\n        jul: 'ஜூலை',\n        aug: 'ஆகஸ்ட்',\n        sep: 'செப்டம்பர்',\n        oct: 'அக்டோபர்',\n        nov: 'நவம்பர்',\n        dec: 'டிசம்பர்'\n      }\n    },\n    select: {\n      loading: 'தயாராகிக்கொண்டிருக்கிறது',\n      noMatch: 'பொருத்தமான தரவு கிடைக்கவில்லை',\n      noData: 'தரவு இல்லை',\n      placeholder: 'தேர்வு செய்'\n    },\n    cascader: {\n      noMatch: 'பொருத்தமான தரவு கிடைக்கவில்லை',\n      loading: 'தயாராகிக்கொண்டிருக்கிறது',\n      placeholder: 'தேர்வு செய்',\n      noData: 'தரவு இல்லை'\n    },\n    pagination: {\n      goto: 'தேவையான் பகுதிக்கு செல்',\n      pagesize: '/page',\n      total: 'மொத்தம் {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'செய்தி',\n      confirm: 'உறுதி செய்',\n      cancel: 'ரத்து செய்',\n      error: 'பொருத்தாமில்லாத உள்ளீடு'\n    },\n    upload: {\n      deleteTip: 'press delete to remove', // to be translated\n      delete: 'நீக்கு',\n      preview: 'முன்னோட்டம் பார்',\n      continue: 'தொடரு'\n    },\n    table: {\n      emptyText: 'தரவு இல்லை',\n      confirmFilter: 'உறுதி செய்',\n      resetFilter: 'புதுமாற்றம் செய்',\n      clearFilter: 'அனைத்தும்',\n      sumText: 'கூட்டு'\n    },\n    tree: {\n      emptyText: 'தரவு இல்லை'\n    },\n    transfer: {\n      noMatch: 'பொருத்தமான தரவு கிடைக்கவில்லை',\n      noData: 'தரவு இல்லை',\n      titles: ['பட்டியல் 1', 'பட்டியல் 2'],\n      filterPlaceholder: 'சொல்லை உள்ளீடு செய்',\n      noCheckedFormat: '{total} items', // to be translated\n      hasCheckedFormat: '{checked}/{total} தேர்வு செய்யப்பட்டவைகள்'\n    },\n    image: {\n      error: 'FAILED' // to be translated\n    },\n    pageHeader: {\n      title: 'Back' // to be translated\n    },\n    popconfirm: {\n      confirmButtonText: 'Yes', // to be translated\n      cancelButtonText: 'No' // to be translated\n    },\n    empty: {\n      description: 'தரவு இல்லை'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/th.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'ตกลง',\n      clear: 'ล้างข้อมูล'\n    },\n    datepicker: {\n      now: 'ตอนนี้',\n      today: 'วันนี้',\n      cancel: 'ยกเลิก',\n      clear: 'ล้างข้อมูล',\n      confirm: 'ตกลง',\n      selectDate: 'เลือกวันที่',\n      selectTime: 'เลือกเวลา',\n      startDate: 'วันที่เริ่มต้น',\n      startTime: 'เวลาเริ่มต้น',\n      endDate: 'วันที่สิ้นสุด',\n      endTime: 'เวลาสิ้นสุด',\n      prevYear: 'ปีก่อนหน้า',\n      nextYear: 'ปีถัดไป',\n      prevMonth: 'เดือนก่อนหน้า',\n      nextMonth: 'เดือนถัดไป',\n      year: 'ปี',\n      month1: 'มกราคม',\n      month2: 'กุมภาพันธ์',\n      month3: 'มีนาคม',\n      month4: 'เมษายน',\n      month5: 'พฤษภาคม',\n      month6: 'มิถุนายน',\n      month7: 'กรกฎาคม',\n      month8: 'สิงหาคม',\n      month9: 'กันยายน',\n      month10: 'ตุลาคม',\n      month11: 'พฤศจิกายน',\n      month12: 'ธันวาคม',\n      // week: 'week',\n      weeks: {\n        sun: 'อา',\n        mon: 'จ',\n        tue: 'อ',\n        wed: 'พ',\n        thu: 'พฤ',\n        fri: 'ศ',\n        sat: 'ส'\n      },\n      months: {\n        jan: 'มกรา',\n        feb: 'กุมภา',\n        mar: 'มีนา',\n        apr: 'เมษา',\n        may: 'พฤษภา',\n        jun: 'มิถุนา',\n        jul: 'กรกฎา',\n        aug: 'สิงหา',\n        sep: 'กันยา',\n        oct: 'ตุลา',\n        nov: 'พฤศจิกา',\n        dec: 'ธันวา'\n      }\n    },\n    select: {\n      loading: 'กำลังโหลด',\n      noMatch: 'ไม่พบข้อมูลที่ตรงกัน',\n      noData: 'ไม่พบข้อมูล',\n      placeholder: 'เลือก'\n    },\n    cascader: {\n      noMatch: 'ไม่พบข้อมูลที่ตรงกัน',\n      loading: 'กำลังโหลด',\n      placeholder: 'เลือก',\n      noData: 'ไม่พบข้อมูล'\n    },\n    pagination: {\n      goto: 'ไปที่',\n      pagesize: '/หน้า',\n      total: 'ทั้งหมด {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'ข้อความ',\n      confirm: 'ตกลง',\n      cancel: 'ยกเลิก',\n      error: 'คุณป้อนข้อมูลไม่ถูกต้อง'\n    },\n    upload: {\n      deleteTip: 'กดปุ่ม \"ลบ\" เพื่อลบออก',\n      delete: 'ลบ',\n      preview: 'ตัวอย่าง',\n      continue: 'ทำต่อ'\n    },\n    table: {\n      emptyText: 'ไม่พบข้อมูล',\n      confirmFilter: 'ยืนยัน',\n      resetFilter: 'รีเซ็ต',\n      clearFilter: 'ทั้งหมด',\n      sumText: 'รวม'\n    },\n    tree: {\n      emptyText: 'ไม่พบข้อมูล'\n    },\n    transfer: {\n      noMatch: 'ไม่พบข้อมูลที่ตรงกัน',\n      noData: 'ไม่พบข้อมูล',\n      titles: ['List 1', 'List 2'], // to be translated\n      filterPlaceholder: 'กรอกคีย์เวิร์ด',\n      noCheckedFormat: '{total} items', // to be translated\n      hasCheckedFormat: '{checked}/{total} checked' // to be translated\n    },\n    image: {\n      error: 'FAILED' // to be translated\n    },\n    pageHeader: {\n      title: 'ย้อนกลับ'\n    },\n    popconfirm: {\n      confirmButtonText: 'Yes', // to be translated\n      cancelButtonText: 'No' // to be translated\n    },\n    empty: {\n      description: 'ไม่พบข้อมูล'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/tk.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'OK',\n      clear: 'Arassala'\n    },\n    datepicker: {\n      now: 'Şuwagt',\n      today: 'Şügün',\n      cancel: 'Bes et',\n      clear: 'Arassala',\n      confirm: 'OK',\n      selectDate: 'Güni saýlaň',\n      selectTime: 'Wagty saýlaň',\n      startDate: 'Başlaýan güni',\n      startTime: 'Başlaýan wagty',\n      endDate: 'Gutarýan güni',\n      endTime: 'Gutarýan wagty',\n      prevYear: 'Previous Year', // to be translated\n      nextYear: 'Next Year', // to be translated\n      prevMonth: 'Previous Month', // to be translated\n      nextMonth: 'Next Month', // to be translated\n      year: '',\n      month1: 'Ýan',\n      month2: 'Few',\n      month3: 'Mar',\n      month4: 'Apr',\n      month5: 'Maý',\n      month6: 'Iýn',\n      month7: 'Iýl',\n      month8: 'Awg',\n      month9: 'Sen',\n      month10: 'Okt',\n      month11: 'Noý',\n      month12: 'Dek',\n      // week: 'week',\n      weeks: {\n        sun: 'Ýek',\n        mon: 'Duş',\n        tue: 'Siş',\n        wed: 'Çar',\n        thu: 'Pen',\n        fri: 'Ann',\n        sat: 'Şen'\n      },\n      months: {\n        jan: 'Ýan',\n        feb: 'Few',\n        mar: 'Mar',\n        apr: 'Apr',\n        may: 'Maý',\n        jun: 'Iýn',\n        jul: 'Iýl',\n        aug: 'Awg',\n        sep: 'Sep',\n        oct: 'Okt',\n        nov: 'Noý',\n        dec: 'Dek'\n      }\n    },\n    select: {\n      loading: 'Indirilýär',\n      noMatch: 'Hiçzat tapylmady',\n      noData: 'Hiçzat ýok',\n      placeholder: 'Saýla'\n    },\n    cascader: {\n      noMatch: 'Hiçzat tapylmady',\n      loading: 'Indirilýär',\n      placeholder: 'Saýlaň',\n      noData: 'Hiçzat ýok'\n    },\n    pagination: {\n      goto: 'Git',\n      pagesize: '/sahypa',\n      total: 'Umumy {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'Hat',\n      confirm: 'OK',\n      cancel: 'Bes et',\n      error: 'Ýalňyş girizme'\n    },\n    upload: {\n      deleteTip: 'Pozmak üçin \"poz\" düwmä basyň',\n      delete: 'Poz',\n      preview: 'Gör',\n      continue: 'Dowam et'\n    },\n    table: {\n      emptyText: 'Maglumat ýok',\n      confirmFilter: 'Tassykla',\n      resetFilter: 'Arassala',\n      clearFilter: 'Hemmesi',\n      sumText: 'Jemi'\n    },\n    tree: {\n      emptyText: 'Maglumat ýok'\n    },\n    transfer: {\n      noMatch: 'Hiçzat tapylmady',\n      noData: 'Hiçzat ýok',\n      titles: ['Sanaw 1', 'Sanaw 2'],\n      filterPlaceholder: 'Gözleg sözlerini giriziň',\n      noCheckedFormat: '{total} sany',\n      hasCheckedFormat: '{checked}/{total} saýlanan'\n    },\n    image: {\n      error: 'FAILED' // to be translated\n    },\n    pageHeader: {\n      title: 'Back' // to be translated\n    },\n    popconfirm: {\n      confirmButtonText: 'Yes', // to be translated\n      cancelButtonText: 'No' // to be translated\n    },\n    empty: {\n      description: 'Maglumat ýok'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/tr-TR.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'Onayla',\n      clear: 'Temizle'\n    },\n    datepicker: {\n      now: 'Şimdi',\n      today: 'Bugün',\n      cancel: 'İptal',\n      clear: 'Temizle',\n      confirm: 'Onayla',\n      selectDate: 'Tarih seç',\n      selectTime: 'Saat seç',\n      startDate: 'Başlangıç Tarihi',\n      startTime: 'Başlangıç Saati',\n      endDate: 'Bitiş Tarihi',\n      endTime: 'Bitiş Saati',\n      prevYear: 'Önceki Yıl',\n      nextYear: 'Sonraki Yıl',\n      prevMonth: 'Önceki Ay',\n      nextMonth: 'Sonraki Ay',\n      year: '',\n      month1: 'Ocak',\n      month2: 'Şubat',\n      month3: 'Mart',\n      month4: 'Nisan',\n      month5: 'Mayıs',\n      month6: 'Haziran',\n      month7: 'Temmuz',\n      month8: 'Ağustos',\n      month9: 'Eylül',\n      month10: 'Ekim',\n      month11: 'Kasım',\n      month12: 'Aralık',\n      // week: 'week',\n      weeks: {\n        sun: 'Paz',\n        mon: 'Pzt',\n        tue: 'Sal',\n        wed: 'Çar',\n        thu: 'Per',\n        fri: 'Cum',\n        sat: 'Cmt'\n      },\n      months: {\n        jan: 'Oca',\n        feb: 'Şub',\n        mar: 'Mar',\n        apr: 'Nis',\n        may: 'May',\n        jun: 'Haz',\n        jul: 'Tem',\n        aug: 'Ağu',\n        sep: 'Eyl',\n        oct: 'Eki',\n        nov: 'Kas',\n        dec: 'Ara'\n      }\n    },\n    select: {\n      loading: 'Yükleniyor',\n      noMatch: 'Eşleşen veri bulunamadı',\n      noData: 'Veri yok',\n      placeholder: 'Seç'\n    },\n    cascader: {\n      noMatch: 'Eşleşen veri bulunamadı',\n      loading: 'Yükleniyor',\n      placeholder: 'Seç',\n      noData: 'Veri yok'\n    },\n    pagination: {\n      goto: 'Git',\n      pagesize: '/sayfa',\n      total: 'Toplam {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'Mesaj',\n      confirm: 'Onayla',\n      cancel: 'İptal',\n      error: 'İllegal giriş'\n    },\n    upload: {\n      deleteTip: 'kaldırmak için delete tuşuna bas',\n      delete: 'Sil',\n      preview: 'Görüntüle',\n      continue: 'Devam'\n    },\n    table: {\n      emptyText: 'Veri yok',\n      confirmFilter: 'Onayla',\n      resetFilter: 'Sıfırla',\n      clearFilter: 'Hepsi',\n      sumText: 'Sum'\n    },\n    tree: {\n      emptyText: 'Veri yok'\n    },\n    transfer: {\n      noMatch: 'Eşleşen veri bulunamadı',\n      noData: 'Veri yok',\n      titles: ['Liste 1', 'Liste 2'],\n      filterPlaceholder: 'Anahtar kelimeleri gir',\n      noCheckedFormat: '{total} adet',\n      hasCheckedFormat: '{checked}/{total} seçildi'\n    },\n    image: {\n      error: 'FAILED' // to be translated\n    },\n    pageHeader: {\n      title: 'Back' // to be translated\n    },\n    popconfirm: {\n      confirmButtonText: 'Yes', // to be translated\n      cancelButtonText: 'No' // to be translated\n    },\n    empty: {\n      description: 'Veri yok'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/ua.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'Обрати',\n      clear: 'Очистити'\n    },\n    datepicker: {\n      now: 'Зараз',\n      today: 'Сьогодні',\n      cancel: 'Відміна',\n      clear: 'Очистити',\n      confirm: 'OK',\n      selectDate: 'Вибрати дату',\n      selectTime: 'Вибрати час',\n      startDate: 'Дата початку',\n      startTime: 'Час початку',\n      endDate: 'Дата завершення',\n      endTime: 'Час завершення',\n      prevYear: 'Попередній Рік',\n      nextYear: 'Наступний Рік',\n      prevMonth: 'Попередній Місяць',\n      nextMonth: 'Наступний Місяць',\n      year: '',\n      month1: 'Січень',\n      month2: 'Лютий',\n      month3: 'Березень',\n      month4: 'Квітень',\n      month5: 'Травень',\n      month6: 'Червень',\n      month7: 'Липень',\n      month8: 'Серпень',\n      month9: 'Вересень',\n      month10: 'Жовтень',\n      month11: 'Листопад',\n      month12: 'Грудень',\n      week: 'тиждень',\n      weeks: {\n        sun: 'Нд',\n        mon: 'Пн',\n        tue: 'Вт',\n        wed: 'Ср',\n        thu: 'Чт',\n        fri: 'Пт',\n        sat: 'Сб'\n      },\n      months: {\n        jan: 'Січ',\n        feb: 'Лют',\n        mar: 'Бер',\n        apr: 'Кві',\n        may: 'Тра',\n        jun: 'Чер',\n        jul: 'Лип',\n        aug: 'Сер',\n        sep: 'Вер',\n        oct: 'Жов',\n        nov: 'Лис',\n        dec: 'Гру'\n      }\n    },\n    select: {\n      loading: 'Завантаження',\n      noMatch: 'Співпадінь не знайдено',\n      noData: 'Немає даних',\n      placeholder: 'Обрати'\n    },\n    cascader: {\n      noMatch: 'Співпадінь не знайдено',\n      loading: 'Завантаження',\n      placeholder: 'Обрати',\n      noData: 'Немає даних'\n    },\n    pagination: {\n      goto: 'Перейти',\n      pagesize: 'на сторінці',\n      total: 'Всього {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'Повідомлення',\n      confirm: 'OK',\n      cancel: 'Відміна',\n      error: 'Неприпустимий ввід даних'\n    },\n    upload: {\n      deleteTip: 'натисніть кнопку щоб видалити',\n      delete: 'Видалити',\n      preview: 'Перегляд',\n      continue: 'Продовжити'\n    },\n    table: {\n      emptyText: 'Немає даних',\n      confirmFilter: 'Підтвердити',\n      resetFilter: 'Скинути',\n      clearFilter: 'Все',\n      sumText: 'Сума'\n    },\n    tree: {\n      emptyText: 'Немає даних'\n    },\n    transfer: {\n      noMatch: 'Співпадінь не знайдено',\n      noData: 'Обрати',\n      titles: ['Список 1', 'Список 2'],\n      filterPlaceholder: 'Введіть ключове слово',\n      noCheckedFormat: '{total} пунктів',\n      hasCheckedFormat: '{checked}/{total} вибрано'\n    },\n    image: {\n      error: 'ПОМИЛКА'\n    },\n    pageHeader: {\n      title: 'Назад'\n    },\n    popconfirm: {\n      confirmButtonText: 'Так',\n      cancelButtonText: 'Ні'\n    },\n    empty: {\n      description: 'Немає даних'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/ug-CN.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'جەزملەش',\n      clear: 'قۇرۇقداش'\n    },\n    datepicker: {\n      now: 'ھازىرقى ۋاقىت',\n      today: 'بۈگۈن',\n      cancel: 'بىكار قىلىش',\n      clear: 'قۇرۇقداش',\n      confirm: 'جەزملەش',\n      selectDate: 'چىسلا تاللاڭ',\n      selectTime: 'ۋاقىت تاللاڭ',\n      startDate: 'باشلانغان چىسلا',\n      startTime: 'باشلانغان ۋاقىت',\n      endDate: 'ئاخىرلاشقان چىسلا',\n      endTime: 'ئاخىرلاشقان ۋاقىت',\n      prevYear: 'ئالدىنقى يىل',\n      nextYear: 'كىيىنكى يىل',\n      prevMonth: 'ئالدىنقى ئاي',\n      nextMonth: 'كىيىنكى ئاي',\n      year: '- يىل',\n      month1: '1-ئاي',\n      month2: '2-ئاي',\n      month3: '3-ئاي',\n      month4: '4-ئاي',\n      month5: '5-ئاي',\n      month6: '6-ئاي',\n      month7: '7-ئاي',\n      month8: '8-ئاي',\n      month9: '9-ئاي',\n      month10: '10-ئاي',\n      month11: '11-ئاي',\n      month12: '12-ئاي',\n      // week: '周次',\n      weeks: {\n        sun: 'يەكشەنبە',\n        mon: 'دۈشەنبە',\n        tue: 'سەيشەنبە',\n        wed: 'چارشەنبە',\n        thu: 'پەيشەنبە',\n        fri: 'جۈمە',\n        sat: 'شەنبە'\n      },\n      months: {\n        jan: '1-ئاي',\n        feb: '2-ئاي',\n        mar: '3-ئاي',\n        apr: '4-ئاي',\n        may: '5-ئاي',\n        jun: '6-ئاي',\n        jul: '7-ئاي',\n        aug: '8-ئاي',\n        sep: '9-ئاي',\n        oct: '10-ئاي',\n        nov: '11-ئاي',\n        dec: '12-ئاي'\n      }\n    },\n    select: {\n      loading: 'يۈكلىنىۋاتىدۇ',\n      noMatch: 'ئۇچۇر تېپىلمىدى',\n      noData: 'ئۇچۇر يوق',\n      placeholder: 'تاللاڭ'\n    },\n    cascader: {\n      noMatch: 'ئۇچۇر تېپىلمىدى',\n      loading: 'يۈكلىنىۋاتىدۇ',\n      placeholder: 'تاللاڭ',\n      noData: 'ئۇچۇر يوق'\n    },\n    pagination: {\n      goto: 'كىيىنكى بەت',\n      pagesize: 'تال/بەت',\n      total: 'جەمئىي {total} تال',\n      pageClassifier: 'بەت'\n    },\n    messagebox: {\n      title: 'ئەسكەرتىش',\n      confirm: 'جەزملەش',\n      cancel: 'بىكار قىلىش',\n      error: 'كىرگۈزگەن ئۇچۇرىڭىزدا خاتالىق بار!'\n    },\n    upload: {\n      deleteTip: 'delete كۇنپكىسىنى بېسىپ ئۆچۈرەلەيسىز',\n      delete: 'ئۆچۈرۈش',\n      preview: 'رەسىمنى كۆرۈش',\n      continue: 'رەسىم يوللاش'\n    },\n    table: {\n      emptyText: 'ئۇچۇر يوق',\n      confirmFilter: 'سۈزگۈچ',\n      resetFilter: 'قايتا تولدۇرۇش',\n      clearFilter: 'ھەممە',\n      sumText: 'جەمئىي'\n    },\n    tree: {\n      emptyText: 'ئۇچۇر يوق'\n    },\n    transfer: {\n      noMatch: 'ئۇچۇر تېپىلمىدى',\n      noData: 'ئۇچۇر يوق',\n      titles: ['جەدۋەل 1', 'جەدۋەل 2'],\n      filterPlaceholder: 'ئىزدىمەكچى بولغان مەزمۇننى كىرگۈزۈڭ',\n      noCheckedFormat: 'جەمئىي {total} تۈر',\n      hasCheckedFormat: 'تاللانغىنى {checked}/{total} تۈر'\n    },\n    image: {\n      error: 'مەغلۇب بولدى'\n    },\n    pageHeader: {\n      title: 'قايتىش'\n    },\n    popconfirm: {\n      confirmButtonText: 'ھەئە',\n      cancelButtonText: 'ياق'\n    },\n    empty: {\n      description: 'ئۇچۇر يوق'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/uz-UZ.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'Qabul qilish',\n      clear: 'Tozalash'\n    },\n    datepicker: {\n      now: 'Hozir',\n      today: 'Bugun',\n      cancel: 'Bekor qilish',\n      clear: 'Tozalash',\n      confirm: 'Qabul qilish',\n      selectDate: 'Kunni tanlash',\n      selectTime: 'Soatni tanlash',\n      startDate: 'Boshlanish sanasi',\n      startTime: 'Boshlanish vaqti',\n      endDate: 'Tugash sanasi',\n      endTime: 'Tugash vaqti',\n      prevYear: 'Oʻtgan yil',\n      nextYear: 'Kelgusi yil',\n      prevMonth: 'Oʻtgan oy',\n      nextMonth: 'Kelgusi oy',\n      year: 'Yil',\n      month1: 'Yanvar',\n      month2: 'Fevral',\n      month3: 'Mart',\n      month4: 'Aprel',\n      month5: 'May',\n      month6: 'Iyun',\n      month7: 'Iyul',\n      month8: 'Avgust',\n      month9: 'Sentabr',\n      month10: 'Oktabr',\n      month11: 'Noyabr',\n      month12: 'Dekabr',\n      week: 'Hafta',\n      weeks: {\n        sun: 'Yak',\n        mon: 'Dush',\n        tue: 'Sesh',\n        wed: 'Chor',\n        thu: 'Pay',\n        fri: 'Jum',\n        sat: 'Shan'\n      },\n      months: {\n        jan: 'Yan',\n        feb: 'Fev',\n        mar: 'Mar',\n        apr: 'Apr',\n        may: 'May',\n        jun: 'Iyun',\n        jul: 'Iyul',\n        aug: 'Avg',\n        sep: 'Sen',\n        oct: 'Okt',\n        nov: 'Noy',\n        dec: 'Dek'\n      }\n    },\n    select: {\n      loading: 'Yuklanmoqda',\n      noMatch: 'Mos maʼlumot yoʻq',\n      noData: 'Maʼlumot yoʻq',\n      placeholder: 'Tanlang'\n    },\n    cascader: {\n      noMatch: 'Mos maʼlumot topilmadi',\n      loading: 'Yuklanmoqda',\n      placeholder: 'Tanlash',\n      noData: 'Maʼlumot yoʻq'\n    },\n    pagination: {\n      goto: 'Oʻtish',\n      pagesize: '/sahifa',\n      total: 'Barchasi {total} ta',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'Xabar',\n      confirm: 'Qabul qilish',\n      cancel: 'Bekor qilish',\n      error: 'Xatolik'\n    },\n    upload: {\n      deleteTip: 'Oʻchirish tugmasini bosib oʻchiring',\n      delete: 'Oʻchirish',\n      preview: 'Oldindan koʻrish',\n      continue: 'Davom etish'\n    },\n    table: {\n      emptyText: 'Boʻsh',\n      confirmFilter: 'Qabul qilish',\n      resetFilter: 'Oldingi holatga qaytarish',\n      clearFilter: 'Jami',\n      sumText: 'Summasi'\n    },\n    tree: {\n      emptyText: 'Maʼlumot yoʻq'\n    },\n    transfer: {\n      noMatch: 'Mos maʼlumot topilmadi',\n      noData: 'Maʼlumot yoʻq',\n      titles: ['1-jadval', '2-jadval'],\n      filterPlaceholder: 'Kalit soʻzni kiriting',\n      noCheckedFormat: '{total} ta element',\n      hasCheckedFormat: '{checked}/{total} ta belgilandi'\n    },\n    image: {\n      error: 'Xatolik'\n    },\n    pageHeader: {\n      title: 'Orqaga'\n    },\n    popconfirm: {\n      confirmButtonText: 'Tasdiqlash',\n      cancelButtonText: 'Bekor qilish'\n    },\n    empty: {\n      description: 'Boʻsh'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/vi.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: 'OK',\n      clear: 'Xóa'\n    },\n    datepicker: {\n      now: 'Hiện tại',\n      today: 'Hôm nay',\n      cancel: 'Hủy',\n      clear: 'Xóa',\n      confirm: 'OK',\n      selectDate: 'Chọn ngày',\n      selectTime: 'Chọn giờ',\n      startDate: 'Ngày bắt đầu',\n      startTime: 'Thời gian bắt đầu',\n      endDate: 'Ngày kết thúc',\n      endTime: 'Thời gian kết thúc',\n      prevYear: 'Năm trước',\n      nextYear: 'Năm tới',\n      prevMonth: 'Tháng trước',\n      nextMonth: 'Tháng tới',\n      year: 'Năm',\n      month1: 'Tháng 1',\n      month2: 'Tháng 2',\n      month3: 'Tháng 3',\n      month4: 'Tháng 4',\n      month5: 'Tháng 5',\n      month6: 'Tháng 6',\n      month7: 'Tháng 7',\n      month8: 'Tháng 8',\n      month9: 'Tháng 9',\n      month10: 'Tháng 10',\n      month11: 'Tháng 11',\n      month12: 'Tháng 12',\n      // week: 'week',\n      weeks: {\n        sun: 'CN',\n        mon: 'T2',\n        tue: 'T3',\n        wed: 'T4',\n        thu: 'T5',\n        fri: 'T6',\n        sat: 'T7'\n      },\n      months: {\n        jan: 'Th.1',\n        feb: 'Th.2',\n        mar: 'Th.3',\n        apr: 'Th.4',\n        may: 'Th.5',\n        jun: 'Th.6',\n        jul: 'Th.7',\n        aug: 'Th.8',\n        sep: 'Th.9',\n        oct: 'Th.10',\n        nov: 'Th.11',\n        dec: 'Th.12'\n      }\n    },\n    select: {\n      loading: 'Đang tải',\n      noMatch: 'Dữ liệu không phù hợp',\n      noData: 'Không tìm thấy dữ liệu',\n      placeholder: 'Chọn'\n    },\n    cascader: {\n      noMatch: 'Dữ liệu không phù hợp',\n      loading: 'Đang tải',\n      placeholder: 'Chọn',\n      noData: 'Không tìm thấy dữ liệu'\n    },\n    pagination: {\n      goto: 'Nhảy tới',\n      pagesize: '/trang',\n      total: 'Tổng {total}',\n      pageClassifier: ''\n    },\n    messagebox: {\n      title: 'Thông báo',\n      confirm: 'OK',\n      cancel: 'Hủy',\n      error: 'Dữ liệu không hợp lệ'\n    },\n    upload: {\n      deleteTip: 'Nhấn xoá để xoá',\n      delete: 'Xóa',\n      preview: 'Xem trước',\n      continue: 'Tiếp tục'\n    },\n    table: {\n      emptyText: 'Không có dữ liệu',\n      confirmFilter: 'Xác nhận',\n      resetFilter: 'Làm mới',\n      clearFilter: 'Xóa hết',\n      sumText: 'Tổng'\n    },\n    tree: {\n      emptyText: 'Không có dữ liệu'\n    },\n    transfer: {\n      noMatch: 'Dữ liệu không phù hợp',\n      noData: 'Không tìm thấy dữ liệu',\n      titles: ['Danh sách 1', 'Danh sách 2'],\n      filterPlaceholder: 'Nhập từ khóa',\n      noCheckedFormat: '{total} mục',\n      hasCheckedFormat: '{checked}/{total} đã chọn '\n    },\n    image: {\n      error: 'LỖI'\n    },\n    pageHeader: {\n      title: 'Quay lại'\n    },\n    popconfirm: {\n      confirmButtonText: 'Ok',\n      cancelButtonText: 'Huỷ'\n    },\n    empty: {\n      description: 'Không có dữ liệu'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/zh-CN.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: '确定',\n      clear: '清空'\n    },\n    datepicker: {\n      now: '此刻',\n      today: '今天',\n      cancel: '取消',\n      clear: '清空',\n      confirm: '确定',\n      selectDate: '选择日期',\n      selectTime: '选择时间',\n      startDate: '开始日期',\n      startTime: '开始时间',\n      endDate: '结束日期',\n      endTime: '结束时间',\n      prevYear: '前一年',\n      nextYear: '后一年',\n      prevMonth: '上个月',\n      nextMonth: '下个月',\n      year: '年',\n      month1: '1 月',\n      month2: '2 月',\n      month3: '3 月',\n      month4: '4 月',\n      month5: '5 月',\n      month6: '6 月',\n      month7: '7 月',\n      month8: '8 月',\n      month9: '9 月',\n      month10: '10 月',\n      month11: '11 月',\n      month12: '12 月',\n      // week: '周次',\n      weeks: {\n        sun: '日',\n        mon: '一',\n        tue: '二',\n        wed: '三',\n        thu: '四',\n        fri: '五',\n        sat: '六'\n      },\n      months: {\n        jan: '一月',\n        feb: '二月',\n        mar: '三月',\n        apr: '四月',\n        may: '五月',\n        jun: '六月',\n        jul: '七月',\n        aug: '八月',\n        sep: '九月',\n        oct: '十月',\n        nov: '十一月',\n        dec: '十二月'\n      }\n    },\n    select: {\n      loading: '加载中',\n      noMatch: '无匹配数据',\n      noData: '无数据',\n      placeholder: '请选择'\n    },\n    cascader: {\n      noMatch: '无匹配数据',\n      loading: '加载中',\n      placeholder: '请选择',\n      noData: '暂无数据'\n    },\n    pagination: {\n      goto: '前往',\n      pagesize: '条/页',\n      total: '共 {total} 条',\n      pageClassifier: '页'\n    },\n    messagebox: {\n      title: '提示',\n      confirm: '确定',\n      cancel: '取消',\n      error: '输入的数据不合法!'\n    },\n    upload: {\n      deleteTip: '按 delete 键可删除',\n      delete: '删除',\n      preview: '查看图片',\n      continue: '继续上传'\n    },\n    table: {\n      emptyText: '暂无数据',\n      confirmFilter: '筛选',\n      resetFilter: '重置',\n      clearFilter: '全部',\n      sumText: '合计'\n    },\n    tree: {\n      emptyText: '暂无数据'\n    },\n    transfer: {\n      noMatch: '无匹配数据',\n      noData: '无数据',\n      titles: ['列表 1', '列表 2'],\n      filterPlaceholder: '请输入搜索内容',\n      noCheckedFormat: '共 {total} 项',\n      hasCheckedFormat: '已选 {checked}/{total} 项'\n    },\n    image: {\n      error: '加载失败'\n    },\n    pageHeader: {\n      title: '返回'\n    },\n    popconfirm: {\n      confirmButtonText: '确定',\n      cancelButtonText: '取消'\n    },\n    empty: {\n      description: '暂无数据'\n    }\n  }\n};\n"
  },
  {
    "path": "src/locale/lang/zh-TW.js",
    "content": "export default {\n  el: {\n    colorpicker: {\n      confirm: '確認',\n      clear: '清空'\n    },\n    datepicker: {\n      now: '現在',\n      today: '今天',\n      cancel: '取消',\n      clear: '清空',\n      confirm: '確認',\n      selectDate: '選擇日期',\n      selectTime: '選擇時間',\n      startDate: '開始日期',\n      startTime: '開始時間',\n      endDate: '結束日期',\n      endTime: '結束時間',\n      prevYear: '前一年',\n      nextYear: '後一年',\n      prevMonth: '上個月',\n      nextMonth: '下個月',\n      year: '年',\n      month1: '1 月',\n      month2: '2 月',\n      month3: '3 月',\n      month4: '4 月',\n      month5: '5 月',\n      month6: '6 月',\n      month7: '7 月',\n      month8: '8 月',\n      month9: '9 月',\n      month10: '10 月',\n      month11: '11 月',\n      month12: '12 月',\n      // week: '周次',\n      weeks: {\n        sun: '日',\n        mon: '一',\n        tue: '二',\n        wed: '三',\n        thu: '四',\n        fri: '五',\n        sat: '六'\n      },\n      months: {\n        jan: '一月',\n        feb: '二月',\n        mar: '三月',\n        apr: '四月',\n        may: '五月',\n        jun: '六月',\n        jul: '七月',\n        aug: '八月',\n        sep: '九月',\n        oct: '十月',\n        nov: '十一月',\n        dec: '十二月'\n      }\n    },\n    select: {\n      loading: '加載中',\n      noMatch: '無匹配資料',\n      noData: '無資料',\n      placeholder: '請選擇'\n    },\n    cascader: {\n      noMatch: '無匹配資料',\n      loading: '加載中',\n      placeholder: '請選擇',\n      noData: '無資料'\n    },\n    pagination: {\n      goto: '前往',\n      pagesize: '項/頁',\n      total: '共 {total} 項',\n      pageClassifier: '頁'\n    },\n    messagebox: {\n      title: '提示',\n      confirm: '確定',\n      cancel: '取消',\n      error: '輸入的資料不符規定!'\n    },\n    upload: {\n      deleteTip: '按 delete 鍵可刪除',\n      delete: '刪除',\n      preview: '查看圖片',\n      continue: '繼續上傳'\n    },\n    table: {\n      emptyText: '暫無資料',\n      confirmFilter: '篩選',\n      resetFilter: '重置',\n      clearFilter: '全部',\n      sumText: 'Sum' // to be translated\n    },\n    tree: {\n      emptyText: '暫無資料'\n    },\n    transfer: {\n      noMatch: '無匹配資料',\n      noData: '無資料',\n      titles: ['List 1', 'List 2'], // to be translated\n      filterPlaceholder: 'Enter keyword', // to be translated\n      noCheckedFormat: '{total} items', // to be translated\n      hasCheckedFormat: '{checked}/{total} checked' // to be translated\n    },\n    image: {\n      error: '加載失敗'\n    },\n    pageHeader: {\n      title: '返回'\n    },\n    popconfirm: {\n      confirmButtonText: 'Yes', // to be translated\n      cancelButtonText: 'No' // to be translated\n    },\n    empty: {\n      description: '暫無資料'\n    }\n  }\n};\n"
  },
  {
    "path": "src/mixins/emitter.js",
    "content": "function broadcast(componentName, eventName, params) {\n  this.$children.forEach(child => {\n    var name = child.$options.componentName;\n\n    if (name === componentName) {\n      child.$emit.apply(child, [eventName].concat(params));\n    } else {\n      broadcast.apply(child, [componentName, eventName].concat([params]));\n    }\n  });\n}\nexport default {\n  methods: {\n    dispatch(componentName, eventName, params) {\n      var parent = this.$parent || this.$root;\n      var name = parent.$options.componentName;\n\n      while (parent && (!name || name !== componentName)) {\n        parent = parent.$parent;\n\n        if (parent) {\n          name = parent.$options.componentName;\n        }\n      }\n      if (parent) {\n        parent.$emit.apply(parent, [eventName].concat(params));\n      }\n    },\n    broadcast(componentName, eventName, params) {\n      broadcast.call(this, componentName, eventName, params);\n    }\n  }\n};\n"
  },
  {
    "path": "src/mixins/focus.js",
    "content": "export default function(ref) {\n  return {\n    methods: {\n      focus() {\n        this.$refs[ref].focus();\n      }\n    }\n  };\n};\n"
  },
  {
    "path": "src/mixins/locale.js",
    "content": "import { t } from 'element-ui/src/locale';\n\nexport default {\n  methods: {\n    t(...args) {\n      return t.apply(this, args);\n    }\n  }\n};\n"
  },
  {
    "path": "src/mixins/migrating.js",
    "content": "import { kebabCase } from 'element-ui/src/utils/util';\n/**\n * Show migrating guide in browser console.\n *\n * Usage:\n * import Migrating from 'element-ui/src/mixins/migrating';\n *\n * mixins: [Migrating]\n *\n * add getMigratingConfig method for your component.\n *  getMigratingConfig() {\n *    return {\n *      props: {\n *        'allow-no-selection': 'allow-no-selection is removed.',\n *        'selection-mode': 'selection-mode is removed.'\n *      },\n *      events: {\n *        selectionchange: 'selectionchange is renamed to selection-change.'\n *      }\n *    };\n *  },\n */\nexport default {\n  mounted() {\n    if (process.env.NODE_ENV === 'production') return;\n    if (!this.$vnode) return;\n    const { props = {}, events = {} } = this.getMigratingConfig();\n    const { data, componentOptions } = this.$vnode;\n    const definedProps = data.attrs || {};\n    const definedEvents = componentOptions.listeners || {};\n\n    for (let propName in definedProps) {\n      propName = kebabCase(propName); // compatible with camel case\n      if (props[propName]) {\n        console.warn(`[Element Migrating][${this.$options.name}][Attribute]: ${props[propName]}`);\n      }\n    }\n\n    for (let eventName in definedEvents) {\n      eventName = kebabCase(eventName); // compatible with camel case\n      if (events[eventName]) {\n        console.warn(`[Element Migrating][${this.$options.name}][Event]: ${events[eventName]}`);\n      }\n    }\n  },\n  methods: {\n    getMigratingConfig() {\n      return {\n        props: {},\n        events: {}\n      };\n    }\n  }\n};\n"
  },
  {
    "path": "src/transitions/collapse-transition.js",
    "content": "import { addClass, removeClass } from 'element-ui/src/utils/dom';\n\nclass Transition {\n  beforeEnter(el) {\n    addClass(el, 'collapse-transition');\n    if (!el.dataset) el.dataset = {};\n\n    el.dataset.oldPaddingTop = el.style.paddingTop;\n    el.dataset.oldPaddingBottom = el.style.paddingBottom;\n\n    el.style.height = '0';\n    el.style.paddingTop = 0;\n    el.style.paddingBottom = 0;\n  }\n\n  enter(el) {\n    el.dataset.oldOverflow = el.style.overflow;\n    if (el.scrollHeight !== 0) {\n      el.style.height = el.scrollHeight + 'px';\n      el.style.paddingTop = el.dataset.oldPaddingTop;\n      el.style.paddingBottom = el.dataset.oldPaddingBottom;\n    } else {\n      el.style.height = '';\n      el.style.paddingTop = el.dataset.oldPaddingTop;\n      el.style.paddingBottom = el.dataset.oldPaddingBottom;\n    }\n\n    el.style.overflow = 'hidden';\n  }\n\n  afterEnter(el) {\n    // for safari: remove class then reset height is necessary\n    removeClass(el, 'collapse-transition');\n    el.style.height = '';\n    el.style.overflow = el.dataset.oldOverflow;\n  }\n\n  beforeLeave(el) {\n    if (!el.dataset) el.dataset = {};\n    el.dataset.oldPaddingTop = el.style.paddingTop;\n    el.dataset.oldPaddingBottom = el.style.paddingBottom;\n    el.dataset.oldOverflow = el.style.overflow;\n\n    el.style.height = el.scrollHeight + 'px';\n    el.style.overflow = 'hidden';\n  }\n\n  leave(el) {\n    if (el.scrollHeight !== 0) {\n      // for safari: add class after set height, or it will jump to zero height suddenly, weired\n      addClass(el, 'collapse-transition');\n      el.style.height = 0;\n      el.style.paddingTop = 0;\n      el.style.paddingBottom = 0;\n    }\n  }\n\n  afterLeave(el) {\n    removeClass(el, 'collapse-transition');\n    el.style.height = '';\n    el.style.overflow = el.dataset.oldOverflow;\n    el.style.paddingTop = el.dataset.oldPaddingTop;\n    el.style.paddingBottom = el.dataset.oldPaddingBottom;\n  }\n}\n\nexport default {\n  name: 'ElCollapseTransition',\n  functional: true,\n  render(h, { children }) {\n    const data = {\n      on: new Transition()\n    };\n\n    return h('transition', data, children);\n  }\n};\n"
  },
  {
    "path": "src/utils/after-leave.js",
    "content": "/**\n * Bind after-leave event for vue instance. Make sure after-leave is called in any browsers.\n *\n * @param {Vue} instance Vue instance.\n * @param {Function} callback callback of after-leave event\n * @param {Number} speed the speed of transition, default value is 300ms\n * @param {Boolean} once weather bind after-leave once. default value is false.\n */\nexport default function(instance, callback, speed = 300, once = false) {\n  if (!instance || !callback) throw new Error('instance & callback is required');\n  let called = false;\n  const afterLeaveCallback = function() {\n    if (called) return;\n    called = true;\n    if (callback) {\n      callback.apply(null, arguments);\n    }\n  };\n  if (once) {\n    instance.$once('after-leave', afterLeaveCallback);\n  } else {\n    instance.$on('after-leave', afterLeaveCallback);\n  }\n  setTimeout(() => {\n    afterLeaveCallback();\n  }, speed + 100);\n};\n"
  },
  {
    "path": "src/utils/aria-dialog.js",
    "content": "import Utils from './aria-utils';\n\n/**\n * @constructor\n * @desc Dialog object providing modal focus management.\n *\n * Assumptions: The element serving as the dialog container is present in the\n * DOM and hidden. The dialog container has role='dialog'.\n *\n * @param dialogId\n *          The ID of the element serving as the dialog container.\n * @param focusAfterClosed\n *          Either the DOM node or the ID of the DOM node to focus when the\n *          dialog closes.\n * @param focusFirst\n *          Optional parameter containing either the DOM node or the ID of the\n *          DOM node to focus when the dialog opens. If not specified, the\n *          first focusable element in the dialog will receive focus.\n */\nvar aria = aria || {};\nvar tabEvent;\n\naria.Dialog = function(dialog, focusAfterClosed, focusFirst) {\n  this.dialogNode = dialog;\n  if (this.dialogNode === null || this.dialogNode.getAttribute('role') !== 'dialog') {\n    throw new Error('Dialog() requires a DOM element with ARIA role of dialog.');\n  }\n\n  if (typeof focusAfterClosed === 'string') {\n    this.focusAfterClosed = document.getElementById(focusAfterClosed);\n  } else if (typeof focusAfterClosed === 'object') {\n    this.focusAfterClosed = focusAfterClosed;\n  } else {\n    this.focusAfterClosed = null;\n  }\n\n  if (typeof focusFirst === 'string') {\n    this.focusFirst = document.getElementById(focusFirst);\n  } else if (typeof focusFirst === 'object') {\n    this.focusFirst = focusFirst;\n  } else {\n    this.focusFirst = null;\n  }\n\n  if (this.focusFirst) {\n    this.focusFirst.focus();\n  } else {\n    Utils.focusFirstDescendant(this.dialogNode);\n  }\n\n  this.lastFocus = document.activeElement;\n  tabEvent = (e) => {\n    this.trapFocus(e);\n  };\n  this.addListeners();\n};\n\naria.Dialog.prototype.addListeners = function() {\n  document.addEventListener('focus', tabEvent, true);\n};\n\naria.Dialog.prototype.removeListeners = function() {\n  document.removeEventListener('focus', tabEvent, true);\n};\n\naria.Dialog.prototype.closeDialog = function() {\n  this.removeListeners();\n  if (this.focusAfterClosed) {\n    setTimeout(() => {\n      this.focusAfterClosed.focus();\n    });\n  }\n};\n\naria.Dialog.prototype.trapFocus = function(event) {\n  if (Utils.IgnoreUtilFocusChanges) {\n    return;\n  }\n  if (this.dialogNode.contains(event.target)) {\n    this.lastFocus = event.target;\n  } else {\n    Utils.focusFirstDescendant(this.dialogNode);\n    if (this.lastFocus === document.activeElement) {\n      Utils.focusLastDescendant(this.dialogNode);\n    }\n    this.lastFocus = document.activeElement;\n  }\n};\n\nexport default aria.Dialog;\n"
  },
  {
    "path": "src/utils/aria-utils.js",
    "content": "var aria = aria || {};\n\naria.Utils = aria.Utils || {};\n\n/**\n * @desc Set focus on descendant nodes until the first focusable element is\n *       found.\n * @param element\n *          DOM node for which to find the first focusable descendant.\n * @returns\n *  true if a focusable element is found and focus is set.\n */\naria.Utils.focusFirstDescendant = function(element) {\n  for (var i = 0; i < element.childNodes.length; i++) {\n    var child = element.childNodes[i];\n    if (aria.Utils.attemptFocus(child) || aria.Utils.focusFirstDescendant(child)) {\n      return true;\n    }\n  }\n  return false;\n};\n\n/**\n * @desc Find the last descendant node that is focusable.\n * @param element\n *          DOM node for which to find the last focusable descendant.\n * @returns\n *  true if a focusable element is found and focus is set.\n */\n\naria.Utils.focusLastDescendant = function(element) {\n  for (var i = element.childNodes.length - 1; i >= 0; i--) {\n    var child = element.childNodes[i];\n    if (aria.Utils.attemptFocus(child) || aria.Utils.focusLastDescendant(child)) {\n      return true;\n    }\n  }\n  return false;\n};\n\n/**\n * @desc Set Attempt to set focus on the current node.\n * @param element\n *          The node to attempt to focus on.\n * @returns\n *  true if element is focused.\n */\naria.Utils.attemptFocus = function(element) {\n  if (!aria.Utils.isFocusable(element)) {\n    return false;\n  }\n  aria.Utils.IgnoreUtilFocusChanges = true;\n  try {\n    element.focus();\n  } catch (e) {\n  }\n  aria.Utils.IgnoreUtilFocusChanges = false;\n  return (document.activeElement === element);\n};\n\naria.Utils.isFocusable = function(element) {\n  if (element.tabIndex > 0 || (element.tabIndex === 0 && element.getAttribute('tabIndex') !== null)) {\n    return true;\n  }\n\n  if (element.disabled) {\n    return false;\n  }\n\n  switch (element.nodeName) {\n    case 'A':\n      return !!element.href && element.rel !== 'ignore';\n    case 'INPUT':\n      return element.type !== 'hidden' && element.type !== 'file';\n    case 'BUTTON':\n    case 'SELECT':\n    case 'TEXTAREA':\n      return true;\n    default:\n      return false;\n  }\n};\n\n/**\n * 触发一个事件\n * mouseenter, mouseleave, mouseover, keyup, change, click 等\n * @param  {Element} elm\n * @param  {String} name\n * @param  {*} opts\n */\naria.Utils.triggerEvent = function(elm, name, ...opts) {\n  let eventName;\n\n  if (/^mouse|click/.test(name)) {\n    eventName = 'MouseEvents';\n  } else if (/^key/.test(name)) {\n    eventName = 'KeyboardEvent';\n  } else {\n    eventName = 'HTMLEvents';\n  }\n  const evt = document.createEvent(eventName);\n\n  evt.initEvent(name, ...opts);\n  elm.dispatchEvent\n    ? elm.dispatchEvent(evt)\n    : elm.fireEvent('on' + name, evt);\n\n  return elm;\n};\n\naria.Utils.keys = {\n  tab: 9,\n  enter: 13,\n  space: 32,\n  left: 37,\n  up: 38,\n  right: 39,\n  down: 40,\n  esc: 27\n};\n\nexport default aria.Utils;\n"
  },
  {
    "path": "src/utils/clickoutside.js",
    "content": "import Vue from 'vue';\nimport { on } from 'element-ui/src/utils/dom';\n\nconst nodeList = [];\nconst ctx = '@@clickoutsideContext';\n\nlet startClick;\nlet seed = 0;\n\n!Vue.prototype.$isServer && on(document, 'mousedown', e => (startClick = e));\n\n!Vue.prototype.$isServer && on(document, 'mouseup', e => {\n  nodeList.forEach(node => node[ctx].documentHandler(e, startClick));\n});\n\nfunction createDocumentHandler(el, binding, vnode) {\n  return function(mouseup = {}, mousedown = {}) {\n    if (!vnode ||\n      !vnode.context ||\n      !mouseup.target ||\n      !mousedown.target ||\n      el.contains(mouseup.target) ||\n      el.contains(mousedown.target) ||\n      el === mouseup.target ||\n      (vnode.context.popperElm &&\n      (vnode.context.popperElm.contains(mouseup.target) ||\n      vnode.context.popperElm.contains(mousedown.target)))) return;\n\n    if (binding.expression &&\n      el[ctx].methodName &&\n      vnode.context[el[ctx].methodName]) {\n      vnode.context[el[ctx].methodName]();\n    } else {\n      el[ctx].bindingFn && el[ctx].bindingFn();\n    }\n  };\n}\n\n/**\n * v-clickoutside\n * @desc 点击元素外面才会触发的事件\n * @example\n * ```vue\n * <div v-element-clickoutside=\"handleClose\">\n * ```\n */\nexport default {\n  bind(el, binding, vnode) {\n    nodeList.push(el);\n    const id = seed++;\n    el[ctx] = {\n      id,\n      documentHandler: createDocumentHandler(el, binding, vnode),\n      methodName: binding.expression,\n      bindingFn: binding.value\n    };\n  },\n\n  update(el, binding, vnode) {\n    el[ctx].documentHandler = createDocumentHandler(el, binding, vnode);\n    el[ctx].methodName = binding.expression;\n    el[ctx].bindingFn = binding.value;\n  },\n\n  unbind(el) {\n    let len = nodeList.length;\n\n    for (let i = 0; i < len; i++) {\n      if (nodeList[i][ctx].id === el[ctx].id) {\n        nodeList.splice(i, 1);\n        break;\n      }\n    }\n    delete el[ctx];\n  }\n};\n"
  },
  {
    "path": "src/utils/date-util.js",
    "content": "import fecha from 'element-ui/src/utils/date';\nimport { t } from 'element-ui/src/locale';\n\nconst weeks = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];\nconst months = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];\n\nconst newArray = function(start, end) {\n  let result = [];\n  for (let i = start; i <= end; i++) {\n    result.push(i);\n  }\n  return result;\n};\n\nexport const getI18nSettings = () => {\n  return {\n    dayNamesShort: weeks.map(week => t(`el.datepicker.weeks.${ week }`)),\n    dayNames: weeks.map(week => t(`el.datepicker.weeks.${ week }`)),\n    monthNamesShort: months.map(month => t(`el.datepicker.months.${ month }`)),\n    monthNames: months.map((month, index) => t(`el.datepicker.month${ index + 1 }`)),\n    amPm: ['am', 'pm']\n  };\n};\n\nexport const toDate = function(date) {\n  return isDate(date) ? new Date(date) : null;\n};\n\nexport const isDate = function(date) {\n  if (date === null || date === undefined) return false;\n  if (isNaN(new Date(date).getTime())) return false;\n  if (Array.isArray(date)) return false; // deal with `new Date([ new Date() ]) -> new Date()`\n  return true;\n};\n\nexport const isDateObject = function(val) {\n  return val instanceof Date;\n};\n\nexport const formatDate = function(date, format) {\n  date = toDate(date);\n  if (!date) return '';\n  return fecha.format(date, format || 'yyyy-MM-dd', getI18nSettings());\n};\n\nexport const parseDate = function(string, format) {\n  return fecha.parse(string, format || 'yyyy-MM-dd', getI18nSettings());\n};\n\nexport const getDayCountOfMonth = function(year, month) {\n  if (isNaN(+month)) return 31;\n\n  return new Date(year, +month + 1, 0).getDate();\n};\n\nexport const getDayCountOfYear = function(year) {\n  const isLeapYear = year % 400 === 0 || (year % 100 !== 0 && year % 4 === 0);\n  return isLeapYear ? 366 : 365;\n};\n\nexport const getFirstDayOfMonth = function(date) {\n  const temp = new Date(date.getTime());\n  temp.setDate(1);\n  return temp.getDay();\n};\n\n// see: https://stackoverflow.com/questions/3674539/incrementing-a-date-in-javascript\n// {prev, next} Date should work for Daylight Saving Time\n// Adding 24 * 60 * 60 * 1000 does not work in the above scenario\nexport const prevDate = function(date, amount = 1) {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate() - amount);\n};\n\nexport const nextDate = function(date, amount = 1) {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount);\n};\n\nexport const getStartDateOfMonth = function(year, month) {\n  const result = new Date(year, month, 1);\n  const day = result.getDay();\n\n  if (day === 0) {\n    return prevDate(result, 7);\n  } else {\n    return prevDate(result, day);\n  }\n};\n\nexport const getWeekNumber = function(src) {\n  if (!isDate(src)) return null;\n  const date = new Date(src.getTime());\n  date.setHours(0, 0, 0, 0);\n  // Thursday in current week decides the year.\n  date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7);\n  // January 4 is always in week 1.\n  const week1 = new Date(date.getFullYear(), 0, 4);\n  // Adjust to Thursday in week 1 and count number of weeks from date to week 1.\n  // Rounding should be fine for Daylight Saving Time. Its shift should never be more than 12 hours.\n  return 1 + Math.round(((date.getTime() - week1.getTime()) / 86400000 - 3 + (week1.getDay() + 6) % 7) / 7);\n};\n\nexport const getRangeHours = function(ranges) {\n  const hours = [];\n  let disabledHours = [];\n\n  (ranges || []).forEach(range => {\n    const value = range.map(date => date.getHours());\n\n    disabledHours = disabledHours.concat(newArray(value[0], value[1]));\n  });\n\n  if (disabledHours.length) {\n    for (let i = 0; i < 24; i++) {\n      hours[i] = disabledHours.indexOf(i) === -1;\n    }\n  } else {\n    for (let i = 0; i < 24; i++) {\n      hours[i] = false;\n    }\n  }\n\n  return hours;\n};\n\nexport const getPrevMonthLastDays = (date, amount) => {\n  if (amount <= 0) return [];\n  const temp = new Date(date.getTime());\n  temp.setDate(0);\n  const lastDay = temp.getDate();\n  return range(amount).map((_, index) => lastDay - (amount - index - 1));\n};\n\nexport const getMonthDays = (date) => {\n  const temp = new Date(date.getFullYear(), date.getMonth() + 1, 0);\n  const days = temp.getDate();\n  return range(days).map((_, index) => index + 1);\n};\n\nfunction setRangeData(arr, start, end, value) {\n  for (let i = start; i < end; i++) {\n    arr[i] = value;\n  }\n}\n\nexport const getRangeMinutes = function(ranges, hour) {\n  const minutes = new Array(60);\n\n  if (ranges.length > 0) {\n    ranges.forEach(range => {\n      const start = range[0];\n      const end = range[1];\n      const startHour = start.getHours();\n      const startMinute = start.getMinutes();\n      const endHour = end.getHours();\n      const endMinute = end.getMinutes();\n      if (startHour === hour && endHour !== hour) {\n        setRangeData(minutes, startMinute, 60, true);\n      } else if (startHour === hour && endHour === hour) {\n        setRangeData(minutes, startMinute, endMinute + 1, true);\n      } else if (startHour !== hour && endHour === hour) {\n        setRangeData(minutes, 0, endMinute + 1, true);\n      } else if (startHour < hour && endHour > hour) {\n        setRangeData(minutes, 0, 60, true);\n      }\n    });\n  } else {\n    setRangeData(minutes, 0, 60, true);\n  }\n  return minutes;\n};\n\nexport const range = function(n) {\n  // see https://stackoverflow.com/questions/3746725/create-a-javascript-array-containing-1-n\n  return Array.apply(null, {length: n}).map((_, n) => n);\n};\n\nexport const modifyDate = function(date, y, m, d) {\n  return new Date(y, m, d, date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());\n};\n\nexport const modifyTime = function(date, h, m, s) {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate(), h, m, s, date.getMilliseconds());\n};\n\nexport const modifyWithTimeString = (date, time) => {\n  if (date == null || !time) {\n    return date;\n  }\n  time = parseDate(time, 'HH:mm:ss');\n  return modifyTime(date, time.getHours(), time.getMinutes(), time.getSeconds());\n};\n\nexport const clearTime = function(date) {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate());\n};\n\nexport const clearMilliseconds = function(date) {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), 0);\n};\n\nexport const limitTimeRange = function(date, ranges, format = 'HH:mm:ss') {\n  // TODO: refactory a more elegant solution\n  if (ranges.length === 0) return date;\n  const normalizeDate = date => fecha.parse(fecha.format(date, format), format);\n  const ndate = normalizeDate(date);\n  const nranges = ranges.map(range => range.map(normalizeDate));\n  if (nranges.some(nrange => ndate >= nrange[0] && ndate <= nrange[1])) return date;\n\n  let minDate = nranges[0][0];\n  let maxDate = nranges[0][0];\n\n  nranges.forEach(nrange => {\n    minDate = new Date(Math.min(nrange[0], minDate));\n    maxDate = new Date(Math.max(nrange[1], minDate));\n  });\n\n  const ret = ndate < minDate ? minDate : maxDate;\n  // preserve Year/Month/Date\n  return modifyDate(\n    ret,\n    date.getFullYear(),\n    date.getMonth(),\n    date.getDate()\n  );\n};\n\nexport const timeWithinRange = function(date, selectableRange, format) {\n  const limitedDate = limitTimeRange(date, selectableRange, format);\n  return limitedDate.getTime() === date.getTime();\n};\n\nexport const changeYearMonthAndClampDate = function(date, year, month) {\n  // clamp date to the number of days in `year`, `month`\n  // eg: (2010-1-31, 2010, 2) => 2010-2-28\n  const monthDate = Math.min(date.getDate(), getDayCountOfMonth(year, month));\n  return modifyDate(date, year, month, monthDate);\n};\n\nexport const prevMonth = function(date) {\n  const year = date.getFullYear();\n  const month = date.getMonth();\n  return month === 0\n    ? changeYearMonthAndClampDate(date, year - 1, 11)\n    : changeYearMonthAndClampDate(date, year, month - 1);\n};\n\nexport const nextMonth = function(date) {\n  const year = date.getFullYear();\n  const month = date.getMonth();\n  return month === 11\n    ? changeYearMonthAndClampDate(date, year + 1, 0)\n    : changeYearMonthAndClampDate(date, year, month + 1);\n};\n\nexport const prevYear = function(date, amount = 1) {\n  const year = date.getFullYear();\n  const month = date.getMonth();\n  return changeYearMonthAndClampDate(date, year - amount, month);\n};\n\nexport const nextYear = function(date, amount = 1) {\n  const year = date.getFullYear();\n  const month = date.getMonth();\n  return changeYearMonthAndClampDate(date, year + amount, month);\n};\n\nexport const extractDateFormat = function(format) {\n  return format\n    .replace(/\\W?m{1,2}|\\W?ZZ/g, '')\n    .replace(/\\W?h{1,2}|\\W?s{1,3}|\\W?a/gi, '')\n    .trim();\n};\n\nexport const extractTimeFormat = function(format) {\n  return format\n    .replace(/\\W?D{1,2}|\\W?Do|\\W?d{1,4}|\\W?M{1,4}|\\W?y{2,4}/g, '')\n    .trim();\n};\n\nexport const validateRangeInOneMonth = function(start, end) {\n  return (start.getMonth() === end.getMonth()) && (start.getFullYear() === end.getFullYear());\n};\n"
  },
  {
    "path": "src/utils/date.js",
    "content": "/* Modified from https://github.com/taylorhakes/fecha\n *\n * The MIT License (MIT)\n *\n * Copyright (c) 2015 Taylor Hakes\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n *     The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n *     THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n *     FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n *     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\n/*eslint-disable*/\n// 把 YYYY-MM-DD 改成了 yyyy-MM-dd\n(function (main) {\n  'use strict';\n\n  /**\n   * Parse or format dates\n   * @class fecha\n   */\n  var fecha = {};\n  var token = /d{1,4}|M{1,4}|yy(?:yy)?|S{1,3}|Do|ZZ|([HhMsDm])\\1?|[aA]|\"[^\"]*\"|'[^']*'/g;\n  var twoDigits = '\\\\d\\\\d?';\n  var threeDigits = '\\\\d{3}';\n  var fourDigits = '\\\\d{4}';\n  var word = '[^\\\\s]+';\n  var literal = /\\[([^]*?)\\]/gm;\n  var noop = function () {\n  };\n\n  function regexEscape(str) {\n    return str.replace( /[|\\\\{()[^$+*?.-]/g, '\\\\$&');\n  }\n\n  function shorten(arr, sLen) {\n    var newArr = [];\n    for (var i = 0, len = arr.length; i < len; i++) {\n      newArr.push(arr[i].substr(0, sLen));\n    }\n    return newArr;\n  }\n\n  function monthUpdate(arrName) {\n    return function (d, v, i18n) {\n      var index = i18n[arrName].indexOf(v.charAt(0).toUpperCase() + v.substr(1).toLowerCase());\n      if (~index) {\n        d.month = index;\n      }\n    };\n  }\n\n  function pad(val, len) {\n    val = String(val);\n    len = len || 2;\n    while (val.length < len) {\n      val = '0' + val;\n    }\n    return val;\n  }\n\n  var dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];\n  var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n  var monthNamesShort = shorten(monthNames, 3);\n  var dayNamesShort = shorten(dayNames, 3);\n  fecha.i18n = {\n    dayNamesShort: dayNamesShort,\n    dayNames: dayNames,\n    monthNamesShort: monthNamesShort,\n    monthNames: monthNames,\n    amPm: ['am', 'pm'],\n    DoFn: function DoFn(D) {\n      return D + ['th', 'st', 'nd', 'rd'][D % 10 > 3 ? 0 : (D - D % 10 !== 10) * D % 10];\n    }\n  };\n\n  var formatFlags = {\n    D: function(dateObj) {\n      return dateObj.getDay();\n    },\n    DD: function(dateObj) {\n      return pad(dateObj.getDay());\n    },\n    Do: function(dateObj, i18n) {\n      return i18n.DoFn(dateObj.getDate());\n    },\n    d: function(dateObj) {\n      return dateObj.getDate();\n    },\n    dd: function(dateObj) {\n      return pad(dateObj.getDate());\n    },\n    ddd: function(dateObj, i18n) {\n      return i18n.dayNamesShort[dateObj.getDay()];\n    },\n    dddd: function(dateObj, i18n) {\n      return i18n.dayNames[dateObj.getDay()];\n    },\n    M: function(dateObj) {\n      return dateObj.getMonth() + 1;\n    },\n    MM: function(dateObj) {\n      return pad(dateObj.getMonth() + 1);\n    },\n    MMM: function(dateObj, i18n) {\n      return i18n.monthNamesShort[dateObj.getMonth()];\n    },\n    MMMM: function(dateObj, i18n) {\n      return i18n.monthNames[dateObj.getMonth()];\n    },\n    yy: function(dateObj) {\n      return pad(String(dateObj.getFullYear()), 4).substr(2);\n    },\n    yyyy: function(dateObj) {\n      return pad(dateObj.getFullYear(), 4);\n    },\n    h: function(dateObj) {\n      return dateObj.getHours() % 12 || 12;\n    },\n    hh: function(dateObj) {\n      return pad(dateObj.getHours() % 12 || 12);\n    },\n    H: function(dateObj) {\n      return dateObj.getHours();\n    },\n    HH: function(dateObj) {\n      return pad(dateObj.getHours());\n    },\n    m: function(dateObj) {\n      return dateObj.getMinutes();\n    },\n    mm: function(dateObj) {\n      return pad(dateObj.getMinutes());\n    },\n    s: function(dateObj) {\n      return dateObj.getSeconds();\n    },\n    ss: function(dateObj) {\n      return pad(dateObj.getSeconds());\n    },\n    S: function(dateObj) {\n      return Math.round(dateObj.getMilliseconds() / 100);\n    },\n    SS: function(dateObj) {\n      return pad(Math.round(dateObj.getMilliseconds() / 10), 2);\n    },\n    SSS: function(dateObj) {\n      return pad(dateObj.getMilliseconds(), 3);\n    },\n    a: function(dateObj, i18n) {\n      return dateObj.getHours() < 12 ? i18n.amPm[0] : i18n.amPm[1];\n    },\n    A: function(dateObj, i18n) {\n      return dateObj.getHours() < 12 ? i18n.amPm[0].toUpperCase() : i18n.amPm[1].toUpperCase();\n    },\n    ZZ: function(dateObj) {\n      var o = dateObj.getTimezoneOffset();\n      return (o > 0 ? '-' : '+') + pad(Math.floor(Math.abs(o) / 60) * 100 + Math.abs(o) % 60, 4);\n    }\n  };\n\n  var parseFlags = {\n    d: [twoDigits, function (d, v) {\n      d.day = v;\n    }],\n    Do: [twoDigits + word, function (d, v) {\n      d.day = parseInt(v, 10);\n    }],\n    M: [twoDigits, function (d, v) {\n      d.month = v - 1;\n    }],\n    yy: [twoDigits, function (d, v) {\n      var da = new Date(), cent = +('' + da.getFullYear()).substr(0, 2);\n      d.year = '' + (v > 68 ? cent - 1 : cent) + v;\n    }],\n    h: [twoDigits, function (d, v) {\n      d.hour = v;\n    }],\n    m: [twoDigits, function (d, v) {\n      d.minute = v;\n    }],\n    s: [twoDigits, function (d, v) {\n      d.second = v;\n    }],\n    yyyy: [fourDigits, function (d, v) {\n      d.year = v;\n    }],\n    S: ['\\\\d', function (d, v) {\n      d.millisecond = v * 100;\n    }],\n    SS: ['\\\\d{2}', function (d, v) {\n      d.millisecond = v * 10;\n    }],\n    SSS: [threeDigits, function (d, v) {\n      d.millisecond = v;\n    }],\n    D: [twoDigits, noop],\n    ddd: [word, noop],\n    MMM: [word, monthUpdate('monthNamesShort')],\n    MMMM: [word, monthUpdate('monthNames')],\n    a: [word, function (d, v, i18n) {\n      var val = v.toLowerCase();\n      if (val === i18n.amPm[0]) {\n        d.isPm = false;\n      } else if (val === i18n.amPm[1]) {\n        d.isPm = true;\n      }\n    }],\n    ZZ: ['[^\\\\s]*?[\\\\+\\\\-]\\\\d\\\\d:?\\\\d\\\\d|[^\\\\s]*?Z', function (d, v) {\n      var parts = (v + '').match(/([+-]|\\d\\d)/gi), minutes;\n\n      if (parts) {\n        minutes = +(parts[1] * 60) + parseInt(parts[2], 10);\n        d.timezoneOffset = parts[0] === '+' ? minutes : -minutes;\n      }\n    }]\n  };\n  parseFlags.dd = parseFlags.d;\n  parseFlags.dddd = parseFlags.ddd;\n  parseFlags.DD = parseFlags.D;\n  parseFlags.mm = parseFlags.m;\n  parseFlags.hh = parseFlags.H = parseFlags.HH = parseFlags.h;\n  parseFlags.MM = parseFlags.M;\n  parseFlags.ss = parseFlags.s;\n  parseFlags.A = parseFlags.a;\n\n\n  // Some common format strings\n  fecha.masks = {\n    default: 'ddd MMM dd yyyy HH:mm:ss',\n    shortDate: 'M/D/yy',\n    mediumDate: 'MMM d, yyyy',\n    longDate: 'MMMM d, yyyy',\n    fullDate: 'dddd, MMMM d, yyyy',\n    shortTime: 'HH:mm',\n    mediumTime: 'HH:mm:ss',\n    longTime: 'HH:mm:ss.SSS'\n  };\n\n  /***\n   * Format a date\n   * @method format\n   * @param {Date|number} dateObj\n   * @param {string} mask Format of the date, i.e. 'mm-dd-yy' or 'shortDate'\n   */\n  fecha.format = function (dateObj, mask, i18nSettings) {\n    var i18n = i18nSettings || fecha.i18n;\n\n    if (typeof dateObj === 'number') {\n      dateObj = new Date(dateObj);\n    }\n\n    if (Object.prototype.toString.call(dateObj) !== '[object Date]' || isNaN(dateObj.getTime())) {\n      throw new Error('Invalid Date in fecha.format');\n    }\n\n    mask = fecha.masks[mask] || mask || fecha.masks['default'];\n\n    var literals = [];\n\n    // Make literals inactive by replacing them with ??\n    mask = mask.replace(literal, function($0, $1) {\n      literals.push($1);\n      return '@@@';\n    });\n    // Apply formatting rules\n    mask = mask.replace(token, function ($0) {\n      return $0 in formatFlags ? formatFlags[$0](dateObj, i18n) : $0.slice(1, $0.length - 1);\n    });\n    // Inline literal values back into the formatted value\n    return mask.replace(/@@@/g, function() {\n      return literals.shift();\n    });\n  };\n\n  /**\n   * Parse a date string into an object, changes - into /\n   * @method parse\n   * @param {string} dateStr Date string\n   * @param {string} format Date parse format\n   * @returns {Date|boolean}\n   */\n  fecha.parse = function (dateStr, format, i18nSettings) {\n    var i18n = i18nSettings || fecha.i18n;\n\n    if (typeof format !== 'string') {\n      throw new Error('Invalid format in fecha.parse');\n    }\n\n    format = fecha.masks[format] || format;\n\n    // Avoid regular expression denial of service, fail early for really long strings\n    // https://www.owasp.org/index.php/Regular_expression_Denial_of_Service_-_ReDoS\n    if (dateStr.length > 1000) {\n      return null;\n    }\n\n    var dateInfo = {};\n    var parseInfo = [];\n    var literals = [];\n    format = format.replace(literal, function($0, $1) {\n      literals.push($1);\n      return '@@@';\n    });\n    var newFormat = regexEscape(format).replace(token, function ($0) {\n      if (parseFlags[$0]) {\n        var info = parseFlags[$0];\n        parseInfo.push(info[1]);\n        return '(' + info[0] + ')';\n      }\n\n      return $0;\n    });\n    newFormat = newFormat.replace(/@@@/g, function() {\n      return literals.shift();\n    });\n    var matches = dateStr.match(new RegExp(newFormat, 'i'));\n    if (!matches) {\n      return null;\n    }\n\n    for (var i = 1; i < matches.length; i++) {\n      parseInfo[i - 1](dateInfo, matches[i], i18n);\n    }\n\n    var today = new Date();\n    if (dateInfo.isPm === true && dateInfo.hour != null && +dateInfo.hour !== 12) {\n      dateInfo.hour = +dateInfo.hour + 12;\n    } else if (dateInfo.isPm === false && +dateInfo.hour === 12) {\n      dateInfo.hour = 0;\n    }\n\n    var date;\n    if (dateInfo.timezoneOffset != null) {\n      dateInfo.minute = +(dateInfo.minute || 0) - +dateInfo.timezoneOffset;\n      date = new Date(Date.UTC(dateInfo.year || today.getFullYear(), dateInfo.month || 0, dateInfo.day || 1,\n        dateInfo.hour || 0, dateInfo.minute || 0, dateInfo.second || 0, dateInfo.millisecond || 0));\n    } else {\n      date = new Date(dateInfo.year || today.getFullYear(), dateInfo.month || 0, dateInfo.day || 1,\n        dateInfo.hour || 0, dateInfo.minute || 0, dateInfo.second || 0, dateInfo.millisecond || 0);\n    }\n    return date;\n  };\n\n  /* istanbul ignore next */\n  if (typeof module !== 'undefined' && module.exports) {\n    module.exports = fecha;\n  } else if (typeof define === 'function' && define.amd) {\n    define(function () {\n      return fecha;\n    });\n  } else {\n    main.fecha = fecha;\n  }\n})(this);\n"
  },
  {
    "path": "src/utils/dom.js",
    "content": "/* istanbul ignore next */\n\nimport Vue from 'vue';\n\nconst isServer = Vue.prototype.$isServer;\nconst SPECIAL_CHARS_REGEXP = /([\\:\\-\\_]+(.))/g;\nconst MOZ_HACK_REGEXP = /^moz([A-Z])/;\nconst ieVersion = isServer ? 0 : Number(document.documentMode);\n\n/* istanbul ignore next */\nconst trim = function(string) {\n  return (string || '').replace(/^[\\s\\uFEFF]+|[\\s\\uFEFF]+$/g, '');\n};\n/* istanbul ignore next */\nconst camelCase = function(name) {\n  return name.replace(SPECIAL_CHARS_REGEXP, function(_, separator, letter, offset) {\n    return offset ? letter.toUpperCase() : letter;\n  }).replace(MOZ_HACK_REGEXP, 'Moz$1');\n};\n\n/* istanbul ignore next */\nexport const on = (function() {\n  if (!isServer && document.addEventListener) {\n    return function(element, event, handler) {\n      if (element && event && handler) {\n        element.addEventListener(event, handler, false);\n      }\n    };\n  } else {\n    return function(element, event, handler) {\n      if (element && event && handler) {\n        element.attachEvent('on' + event, handler);\n      }\n    };\n  }\n})();\n\n/* istanbul ignore next */\nexport const off = (function() {\n  if (!isServer && document.removeEventListener) {\n    return function(element, event, handler) {\n      if (element && event) {\n        element.removeEventListener(event, handler, false);\n      }\n    };\n  } else {\n    return function(element, event, handler) {\n      if (element && event) {\n        element.detachEvent('on' + event, handler);\n      }\n    };\n  }\n})();\n\n/* istanbul ignore next */\nexport const once = function(el, event, fn) {\n  var listener = function() {\n    if (fn) {\n      fn.apply(this, arguments);\n    }\n    off(el, event, listener);\n  };\n  on(el, event, listener);\n};\n\n/* istanbul ignore next */\nexport function hasClass(el, cls) {\n  if (!el || !cls) return false;\n  if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');\n  if (el.classList) {\n    return el.classList.contains(cls);\n  } else {\n    return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;\n  }\n};\n\n/* istanbul ignore next */\nexport function addClass(el, cls) {\n  if (!el) return;\n  var curClass = el.className;\n  var classes = (cls || '').split(' ');\n\n  for (var i = 0, j = classes.length; i < j; i++) {\n    var clsName = classes[i];\n    if (!clsName) continue;\n\n    if (el.classList) {\n      el.classList.add(clsName);\n    } else if (!hasClass(el, clsName)) {\n      curClass += ' ' + clsName;\n    }\n  }\n  if (!el.classList) {\n    el.setAttribute('class', curClass);\n  }\n};\n\n/* istanbul ignore next */\nexport function removeClass(el, cls) {\n  if (!el || !cls) return;\n  var classes = cls.split(' ');\n  var curClass = ' ' + el.className + ' ';\n\n  for (var i = 0, j = classes.length; i < j; i++) {\n    var clsName = classes[i];\n    if (!clsName) continue;\n\n    if (el.classList) {\n      el.classList.remove(clsName);\n    } else if (hasClass(el, clsName)) {\n      curClass = curClass.replace(' ' + clsName + ' ', ' ');\n    }\n  }\n  if (!el.classList) {\n    el.setAttribute('class', trim(curClass));\n  }\n};\n\n/* istanbul ignore next */\nexport const getStyle = ieVersion < 9 ? function(element, styleName) {\n  if (isServer) return;\n  if (!element || !styleName) return null;\n  styleName = camelCase(styleName);\n  if (styleName === 'float') {\n    styleName = 'styleFloat';\n  }\n  try {\n    switch (styleName) {\n      case 'opacity':\n        try {\n          return element.filters.item('alpha').opacity / 100;\n        } catch (e) {\n          return 1.0;\n        }\n      default:\n        return (element.style[styleName] || element.currentStyle ? element.currentStyle[styleName] : null);\n    }\n  } catch (e) {\n    return element.style[styleName];\n  }\n} : function(element, styleName) {\n  if (isServer) return;\n  if (!element || !styleName) return null;\n  styleName = camelCase(styleName);\n  if (styleName === 'float') {\n    styleName = 'cssFloat';\n  }\n  try {\n    var computed = document.defaultView.getComputedStyle(element, '');\n    return element.style[styleName] || computed ? computed[styleName] : null;\n  } catch (e) {\n    return element.style[styleName];\n  }\n};\n\n/* istanbul ignore next */\nexport function setStyle(element, styleName, value) {\n  if (!element || !styleName) return;\n\n  if (typeof styleName === 'object') {\n    for (var prop in styleName) {\n      if (styleName.hasOwnProperty(prop)) {\n        setStyle(element, prop, styleName[prop]);\n      }\n    }\n  } else {\n    styleName = camelCase(styleName);\n    if (styleName === 'opacity' && ieVersion < 9) {\n      element.style.filter = isNaN(value) ? '' : 'alpha(opacity=' + value * 100 + ')';\n    } else {\n      element.style[styleName] = value;\n    }\n  }\n};\n\nexport const isScroll = (el, vertical) => {\n  if (isServer) return;\n\n  const determinedDirection = vertical !== null && vertical !== undefined;\n  const overflow = determinedDirection\n    ? vertical\n      ? getStyle(el, 'overflow-y')\n      : getStyle(el, 'overflow-x')\n    : getStyle(el, 'overflow');\n\n  return overflow.match(/(scroll|auto|overlay)/);\n};\n\nexport const getScrollContainer = (el, vertical) => {\n  if (isServer) return;\n\n  let parent = el;\n  while (parent) {\n    if ([window, document, document.documentElement].includes(parent)) {\n      return window;\n    }\n    if (isScroll(parent, vertical)) {\n      return parent;\n    }\n    parent = parent.parentNode;\n  }\n\n  return parent;\n};\n\nexport const isInContainer = (el, container) => {\n  if (isServer || !el || !container) return false;\n\n  const elRect = el.getBoundingClientRect();\n  let containerRect;\n\n  if ([window, document, document.documentElement, null, undefined].includes(container)) {\n    containerRect = {\n      top: 0,\n      right: window.innerWidth,\n      bottom: window.innerHeight,\n      left: 0\n    };\n  } else {\n    containerRect = container.getBoundingClientRect();\n  }\n\n  return elRect.top < containerRect.bottom &&\n    elRect.bottom > containerRect.top &&\n    elRect.right > containerRect.left &&\n    elRect.left < containerRect.right;\n};\n"
  },
  {
    "path": "src/utils/lodash.js",
    "content": "/**\n * @license\n * Lodash <https://lodash.com/>\n * Copyright JS Foundation and other contributors <https://js.foundation/>\n * Released under MIT license <https://lodash.com/license>\n * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>\n * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors\n */\n/*eslint-disable*/\n(function() {\n  /** Used as a safe reference for `undefined` in pre-ES5 environments. */\n  var undefined;\n\n  /** Used as the semantic version number. */\n  var VERSION = '4.17.10';\n\n  /** Used as the size to enable large array optimizations. */\n  var LARGE_ARRAY_SIZE = 200;\n\n  /** Error message constants. */\n  var CORE_ERROR_TEXT =\n      'Unsupported core-js use. Try https://npms.io/search?q=ponyfill.',\n    FUNC_ERROR_TEXT = 'Expected a function';\n\n  /** Used to stand-in for `undefined` hash values. */\n  var HASH_UNDEFINED = '__lodash_hash_undefined__';\n\n  /** Used as the maximum memoize cache size. */\n  var MAX_MEMOIZE_SIZE = 500;\n\n  /** Used as the internal argument placeholder. */\n  var PLACEHOLDER = '__lodash_placeholder__';\n\n  /** Used to compose bitmasks for cloning. */\n  var CLONE_DEEP_FLAG = 1,\n    CLONE_FLAT_FLAG = 2,\n    CLONE_SYMBOLS_FLAG = 4;\n\n  /** Used to compose bitmasks for value comparisons. */\n  var COMPARE_PARTIAL_FLAG = 1,\n    COMPARE_UNORDERED_FLAG = 2;\n\n  /** Used to compose bitmasks for function metadata. */\n  var WRAP_BIND_FLAG = 1,\n    WRAP_BIND_KEY_FLAG = 2,\n    WRAP_CURRY_BOUND_FLAG = 4,\n    WRAP_CURRY_FLAG = 8,\n    WRAP_CURRY_RIGHT_FLAG = 16,\n    WRAP_PARTIAL_FLAG = 32,\n    WRAP_PARTIAL_RIGHT_FLAG = 64,\n    WRAP_ARY_FLAG = 128,\n    WRAP_REARG_FLAG = 256,\n    WRAP_FLIP_FLAG = 512;\n\n  /** Used as default options for `_.truncate`. */\n  var DEFAULT_TRUNC_LENGTH = 30,\n    DEFAULT_TRUNC_OMISSION = '...';\n\n  /** Used to detect hot functions by number of calls within a span of milliseconds. */\n  var HOT_COUNT = 800,\n    HOT_SPAN = 16;\n\n  /** Used to indicate the type of lazy iteratees. */\n  var LAZY_FILTER_FLAG = 1,\n    LAZY_MAP_FLAG = 2,\n    LAZY_WHILE_FLAG = 3;\n\n  /** Used as references for various `Number` constants. */\n  var INFINITY = 1 / 0,\n    MAX_SAFE_INTEGER = 9007199254740991,\n    MAX_INTEGER = 1.7976931348623157e308,\n    NAN = 0 / 0;\n\n  /** Used as references for the maximum length and index of an array. */\n  var MAX_ARRAY_LENGTH = 4294967295,\n    MAX_ARRAY_INDEX = MAX_ARRAY_LENGTH - 1,\n    HALF_MAX_ARRAY_LENGTH = MAX_ARRAY_LENGTH >>> 1;\n\n  /** Used to associate wrap methods with their bit flags. */\n  var wrapFlags = [\n    ['ary', WRAP_ARY_FLAG],\n    ['bind', WRAP_BIND_FLAG],\n    ['bindKey', WRAP_BIND_KEY_FLAG],\n    ['curry', WRAP_CURRY_FLAG],\n    ['curryRight', WRAP_CURRY_RIGHT_FLAG],\n    ['flip', WRAP_FLIP_FLAG],\n    ['partial', WRAP_PARTIAL_FLAG],\n    ['partialRight', WRAP_PARTIAL_RIGHT_FLAG],\n    ['rearg', WRAP_REARG_FLAG]\n  ];\n\n  /** `Object#toString` result references. */\n  var argsTag = '[object Arguments]',\n    arrayTag = '[object Array]',\n    asyncTag = '[object AsyncFunction]',\n    boolTag = '[object Boolean]',\n    dateTag = '[object Date]',\n    domExcTag = '[object DOMException]',\n    errorTag = '[object Error]',\n    funcTag = '[object Function]',\n    genTag = '[object GeneratorFunction]',\n    mapTag = '[object Map]',\n    numberTag = '[object Number]',\n    nullTag = '[object Null]',\n    objectTag = '[object Object]',\n    promiseTag = '[object Promise]',\n    proxyTag = '[object Proxy]',\n    regexpTag = '[object RegExp]',\n    setTag = '[object Set]',\n    stringTag = '[object String]',\n    symbolTag = '[object Symbol]',\n    undefinedTag = '[object Undefined]',\n    weakMapTag = '[object WeakMap]',\n    weakSetTag = '[object WeakSet]';\n\n  var arrayBufferTag = '[object ArrayBuffer]',\n    dataViewTag = '[object DataView]',\n    float32Tag = '[object Float32Array]',\n    float64Tag = '[object Float64Array]',\n    int8Tag = '[object Int8Array]',\n    int16Tag = '[object Int16Array]',\n    int32Tag = '[object Int32Array]',\n    uint8Tag = '[object Uint8Array]',\n    uint8ClampedTag = '[object Uint8ClampedArray]',\n    uint16Tag = '[object Uint16Array]',\n    uint32Tag = '[object Uint32Array]';\n\n  /** Used to match empty string literals in compiled template source. */\n  var reEmptyStringLeading = /\\b__p \\+= '';/g,\n    reEmptyStringMiddle = /\\b(__p \\+=) '' \\+/g,\n    reEmptyStringTrailing = /(__e\\(.*?\\)|\\b__t\\)) \\+\\n'';/g;\n\n  /** Used to match HTML entities and HTML characters. */\n  var reEscapedHtml = /&(?:amp|lt|gt|quot|#39);/g,\n    reUnescapedHtml = /[&<>\"']/g,\n    reHasEscapedHtml = RegExp(reEscapedHtml.source),\n    reHasUnescapedHtml = RegExp(reUnescapedHtml.source);\n\n  /** Used to match template delimiters. */\n  var reEscape = /<%-([\\s\\S]+?)%>/g,\n    reEvaluate = /<%([\\s\\S]+?)%>/g,\n    reInterpolate = /<%=([\\s\\S]+?)%>/g;\n\n  /** Used to match property names within property paths. */\n  var reIsDeepProp = /\\.|\\[(?:[^[\\]]*|([\"'])(?:(?!\\1)[^\\\\]|\\\\.)*?\\1)\\]/,\n    reIsPlainProp = /^\\w*$/,\n    rePropName = /[^.[\\]]+|\\[(?:(-?\\d+(?:\\.\\d+)?)|([\"'])((?:(?!\\2)[^\\\\]|\\\\.)*?)\\2)\\]|(?=(?:\\.|\\[\\])(?:\\.|\\[\\]|$))/g;\n\n  /**\n     * Used to match `RegExp`\n     * [syntax characters](http://ecma-international.org/ecma-262/7.0/#sec-patterns).\n     */\n  var reRegExpChar = /[\\\\^$.*+?()[\\]{}|]/g,\n    reHasRegExpChar = RegExp(reRegExpChar.source);\n\n  /** Used to match leading and trailing whitespace. */\n  var reTrim = /^\\s+|\\s+$/g,\n    reTrimStart = /^\\s+/,\n    reTrimEnd = /\\s+$/;\n\n  /** Used to match wrap detail comments. */\n  var reWrapComment = /\\{(?:\\n\\/\\* \\[wrapped with .+\\] \\*\\/)?\\n?/,\n    reWrapDetails = /\\{\\n\\/\\* \\[wrapped with (.+)\\] \\*/,\n    reSplitDetails = /,? & /;\n\n  /** Used to match words composed of alphanumeric characters. */\n  var reAsciiWord = /[^\\x00-\\x2f\\x3a-\\x40\\x5b-\\x60\\x7b-\\x7f]+/g;\n\n  /** Used to match backslashes in property paths. */\n  var reEscapeChar = /\\\\(\\\\)?/g;\n\n  /**\n     * Used to match\n     * [ES template delimiters](http://ecma-international.org/ecma-262/7.0/#sec-template-literal-lexical-components).\n     */\n  var reEsTemplate = /\\$\\{([^\\\\}]*(?:\\\\.[^\\\\}]*)*)\\}/g;\n\n  /** Used to match `RegExp` flags from their coerced string values. */\n  var reFlags = /\\w*$/;\n\n  /** Used to detect bad signed hexadecimal string values. */\n  var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;\n\n  /** Used to detect binary string values. */\n  var reIsBinary = /^0b[01]+$/i;\n\n  /** Used to detect host constructors (Safari). */\n  var reIsHostCtor = /^\\[object .+?Constructor\\]$/;\n\n  /** Used to detect octal string values. */\n  var reIsOctal = /^0o[0-7]+$/i;\n\n  /** Used to detect unsigned integer values. */\n  var reIsUint = /^(?:0|[1-9]\\d*)$/;\n\n  /** Used to match Latin Unicode letters (excluding mathematical operators). */\n  var reLatin = /[\\xc0-\\xd6\\xd8-\\xf6\\xf8-\\xff\\u0100-\\u017f]/g;\n\n  /** Used to ensure capturing order of template delimiters. */\n  var reNoMatch = /($^)/;\n\n  /** Used to match unescaped characters in compiled string literals. */\n  var reUnescapedString = /['\\n\\r\\u2028\\u2029\\\\]/g;\n\n  /** Used to compose unicode character classes. */\n  var rsAstralRange = '\\\\ud800-\\\\udfff',\n    rsComboMarksRange = '\\\\u0300-\\\\u036f',\n    reComboHalfMarksRange = '\\\\ufe20-\\\\ufe2f',\n    rsComboSymbolsRange = '\\\\u20d0-\\\\u20ff',\n    rsComboRange =\n         rsComboMarksRange + reComboHalfMarksRange + rsComboSymbolsRange,\n    rsDingbatRange = '\\\\u2700-\\\\u27bf',\n    rsLowerRange = 'a-z\\\\xdf-\\\\xf6\\\\xf8-\\\\xff',\n    rsMathOpRange = '\\\\xac\\\\xb1\\\\xd7\\\\xf7',\n    rsNonCharRange = '\\\\x00-\\\\x2f\\\\x3a-\\\\x40\\\\x5b-\\\\x60\\\\x7b-\\\\xbf',\n    rsPunctuationRange = '\\\\u2000-\\\\u206f',\n    rsSpaceRange =\n         ' \\\\t\\\\x0b\\\\f\\\\xa0\\\\ufeff\\\\n\\\\r\\\\u2028\\\\u2029\\\\u1680\\\\u180e\\\\u2000\\\\u2001\\\\u2002\\\\u2003\\\\u2004\\\\u2005\\\\u2006\\\\u2007\\\\u2008\\\\u2009\\\\u200a\\\\u202f\\\\u205f\\\\u3000',\n    rsUpperRange = 'A-Z\\\\xc0-\\\\xd6\\\\xd8-\\\\xde',\n    rsVarRange = '\\\\ufe0e\\\\ufe0f',\n    rsBreakRange =\n         rsMathOpRange + rsNonCharRange + rsPunctuationRange + rsSpaceRange;\n\n  /** Used to compose unicode capture groups. */\n  var rsApos = \"['\\u2019]\",\n    rsAstral = '[' + rsAstralRange + ']',\n    rsBreak = '[' + rsBreakRange + ']',\n    rsCombo = '[' + rsComboRange + ']',\n    rsDigits = '\\\\d+',\n    rsDingbat = '[' + rsDingbatRange + ']',\n    rsLower = '[' + rsLowerRange + ']',\n    rsMisc =\n         '[^' +\n         rsAstralRange +\n         rsBreakRange +\n         rsDigits +\n         rsDingbatRange +\n         rsLowerRange +\n         rsUpperRange +\n         ']',\n    rsFitz = '\\\\ud83c[\\\\udffb-\\\\udfff]',\n    rsModifier = '(?:' + rsCombo + '|' + rsFitz + ')',\n    rsNonAstral = '[^' + rsAstralRange + ']',\n    rsRegional = '(?:\\\\ud83c[\\\\udde6-\\\\uddff]){2}',\n    rsSurrPair = '[\\\\ud800-\\\\udbff][\\\\udc00-\\\\udfff]',\n    rsUpper = '[' + rsUpperRange + ']',\n    rsZWJ = '\\\\u200d';\n\n  /** Used to compose unicode regexes. */\n  var rsMiscLower = '(?:' + rsLower + '|' + rsMisc + ')',\n    rsMiscUpper = '(?:' + rsUpper + '|' + rsMisc + ')',\n    rsOptContrLower = '(?:' + rsApos + '(?:d|ll|m|re|s|t|ve))?',\n    rsOptContrUpper = '(?:' + rsApos + '(?:D|LL|M|RE|S|T|VE))?',\n    reOptMod = rsModifier + '?',\n    rsOptVar = '[' + rsVarRange + ']?',\n    rsOptJoin =\n         '(?:' +\n         rsZWJ +\n         '(?:' +\n         [rsNonAstral, rsRegional, rsSurrPair].join('|') +\n         ')' +\n         rsOptVar +\n         reOptMod +\n         ')*',\n    rsOrdLower = '\\\\d*(?:1st|2nd|3rd|(?![123])\\\\dth)(?=\\\\b|[A-Z_])',\n    rsOrdUpper = '\\\\d*(?:1ST|2ND|3RD|(?![123])\\\\dTH)(?=\\\\b|[a-z_])',\n    rsSeq = rsOptVar + reOptMod + rsOptJoin,\n    rsEmoji =\n         '(?:' + [rsDingbat, rsRegional, rsSurrPair].join('|') + ')' + rsSeq,\n    rsSymbol =\n         '(?:' +\n         [\n           rsNonAstral + rsCombo + '?',\n           rsCombo,\n           rsRegional,\n           rsSurrPair,\n           rsAstral\n         ].join('|') +\n         ')';\n\n  /** Used to match apostrophes. */\n  var reApos = RegExp(rsApos, 'g');\n\n  /**\n     * Used to match [combining diacritical marks](https://en.wikipedia.org/wiki/Combining_Diacritical_Marks) and\n     * [combining diacritical marks for symbols](https://en.wikipedia.org/wiki/Combining_Diacritical_Marks_for_Symbols).\n     */\n  var reComboMark = RegExp(rsCombo, 'g');\n\n  /** Used to match [string symbols](https://mathiasbynens.be/notes/javascript-unicode). */\n  var reUnicode = RegExp(\n    rsFitz + '(?=' + rsFitz + ')|' + rsSymbol + rsSeq,\n    'g'\n  );\n\n  /** Used to match complex or compound words. */\n  var reUnicodeWord = RegExp(\n    [\n      rsUpper +\n         '?' +\n         rsLower +\n         '+' +\n         rsOptContrLower +\n         '(?=' +\n         [rsBreak, rsUpper, '$'].join('|') +\n         ')',\n      rsMiscUpper +\n         '+' +\n         rsOptContrUpper +\n         '(?=' +\n         [rsBreak, rsUpper + rsMiscLower, '$'].join('|') +\n         ')',\n      rsUpper + '?' + rsMiscLower + '+' + rsOptContrLower,\n      rsUpper + '+' + rsOptContrUpper,\n      rsOrdUpper,\n      rsOrdLower,\n      rsDigits,\n      rsEmoji\n    ].join('|'),\n    'g'\n  );\n\n  /** Used to detect strings with [zero-width joiners or code points from the astral planes](http://eev.ee/blog/2015/09/12/dark-corners-of-unicode/). */\n  var reHasUnicode = RegExp(\n    '[' + rsZWJ + rsAstralRange + rsComboRange + rsVarRange + ']'\n  );\n\n  /** Used to detect strings that need a more robust regexp to match words. */\n  var reHasUnicodeWord = /[a-z][A-Z]|[A-Z]{2,}[a-z]|[0-9][a-zA-Z]|[a-zA-Z][0-9]|[^a-zA-Z0-9 ]/;\n\n  /** Used to assign default `context` object properties. */\n  var contextProps = [\n    'Array',\n    'Buffer',\n    'DataView',\n    'Date',\n    'Error',\n    'Float32Array',\n    'Float64Array',\n    'Function',\n    'Int8Array',\n    'Int16Array',\n    'Int32Array',\n    'Map',\n    'Math',\n    'Object',\n    'Promise',\n    'RegExp',\n    'Set',\n    'String',\n    'Symbol',\n    'TypeError',\n    'Uint8Array',\n    'Uint8ClampedArray',\n    'Uint16Array',\n    'Uint32Array',\n    'WeakMap',\n    '_',\n    'clearTimeout',\n    'isFinite',\n    'parseInt',\n    'setTimeout'\n  ];\n\n  /** Used to make template sourceURLs easier to identify. */\n  var templateCounter = -1;\n\n  /** Used to identify `toStringTag` values of typed arrays. */\n  var typedArrayTags = {};\n  typedArrayTags[float32Tag] = typedArrayTags[float64Tag] = typedArrayTags[\n    int8Tag\n  ] = typedArrayTags[int16Tag] = typedArrayTags[int32Tag] = typedArrayTags[\n    uint8Tag\n  ] = typedArrayTags[uint8ClampedTag] = typedArrayTags[\n    uint16Tag\n  ] = typedArrayTags[uint32Tag] = true;\n  typedArrayTags[argsTag] = typedArrayTags[arrayTag] = typedArrayTags[\n    arrayBufferTag\n  ] = typedArrayTags[boolTag] = typedArrayTags[dataViewTag] = typedArrayTags[\n    dateTag\n  ] = typedArrayTags[errorTag] = typedArrayTags[funcTag] = typedArrayTags[\n    mapTag\n  ] = typedArrayTags[numberTag] = typedArrayTags[objectTag] = typedArrayTags[\n    regexpTag\n  ] = typedArrayTags[setTag] = typedArrayTags[stringTag] = typedArrayTags[\n    weakMapTag\n  ] = false;\n\n  /** Used to identify `toStringTag` values supported by `_.clone`. */\n  var cloneableTags = {};\n  cloneableTags[argsTag] = cloneableTags[arrayTag] = cloneableTags[\n    arrayBufferTag\n  ] = cloneableTags[dataViewTag] = cloneableTags[boolTag] = cloneableTags[\n    dateTag\n  ] = cloneableTags[float32Tag] = cloneableTags[float64Tag] = cloneableTags[\n    int8Tag\n  ] = cloneableTags[int16Tag] = cloneableTags[int32Tag] = cloneableTags[\n    mapTag\n  ] = cloneableTags[numberTag] = cloneableTags[objectTag] = cloneableTags[\n    regexpTag\n  ] = cloneableTags[setTag] = cloneableTags[stringTag] = cloneableTags[\n    symbolTag\n  ] = cloneableTags[uint8Tag] = cloneableTags[uint8ClampedTag] = cloneableTags[\n    uint16Tag\n  ] = cloneableTags[uint32Tag] = true;\n  cloneableTags[errorTag] = cloneableTags[funcTag] = cloneableTags[\n    weakMapTag\n  ] = false;\n\n  /** Used to map Latin Unicode letters to basic Latin letters. */\n  var deburredLetters = {\n    // Latin-1 Supplement block.\n    À: 'A',\n    Á: 'A',\n    Â: 'A',\n    Ã: 'A',\n    Ä: 'A',\n    Å: 'A',\n    à: 'a',\n    á: 'a',\n    â: 'a',\n    ã: 'a',\n    ä: 'a',\n    å: 'a',\n    Ç: 'C',\n    ç: 'c',\n    Ð: 'D',\n    ð: 'd',\n    È: 'E',\n    É: 'E',\n    Ê: 'E',\n    Ë: 'E',\n    è: 'e',\n    é: 'e',\n    ê: 'e',\n    ë: 'e',\n    Ì: 'I',\n    Í: 'I',\n    Î: 'I',\n    Ï: 'I',\n    ì: 'i',\n    í: 'i',\n    î: 'i',\n    ï: 'i',\n    Ñ: 'N',\n    ñ: 'n',\n    Ò: 'O',\n    Ó: 'O',\n    Ô: 'O',\n    Õ: 'O',\n    Ö: 'O',\n    Ø: 'O',\n    ò: 'o',\n    ó: 'o',\n    ô: 'o',\n    õ: 'o',\n    ö: 'o',\n    ø: 'o',\n    Ù: 'U',\n    Ú: 'U',\n    Û: 'U',\n    Ü: 'U',\n    ù: 'u',\n    ú: 'u',\n    û: 'u',\n    ü: 'u',\n    Ý: 'Y',\n    ý: 'y',\n    ÿ: 'y',\n    Æ: 'Ae',\n    æ: 'ae',\n    Þ: 'Th',\n    þ: 'th',\n    ß: 'ss',\n    // Latin Extended-A block.\n    Ā: 'A',\n    Ă: 'A',\n    Ą: 'A',\n    ā: 'a',\n    ă: 'a',\n    ą: 'a',\n    Ć: 'C',\n    Ĉ: 'C',\n    Ċ: 'C',\n    Č: 'C',\n    ć: 'c',\n    ĉ: 'c',\n    ċ: 'c',\n    č: 'c',\n    Ď: 'D',\n    Đ: 'D',\n    ď: 'd',\n    đ: 'd',\n    Ē: 'E',\n    Ĕ: 'E',\n    Ė: 'E',\n    Ę: 'E',\n    Ě: 'E',\n    ē: 'e',\n    ĕ: 'e',\n    ė: 'e',\n    ę: 'e',\n    ě: 'e',\n    Ĝ: 'G',\n    Ğ: 'G',\n    Ġ: 'G',\n    Ģ: 'G',\n    ĝ: 'g',\n    ğ: 'g',\n    ġ: 'g',\n    ģ: 'g',\n    Ĥ: 'H',\n    Ħ: 'H',\n    ĥ: 'h',\n    ħ: 'h',\n    Ĩ: 'I',\n    Ī: 'I',\n    Ĭ: 'I',\n    Į: 'I',\n    İ: 'I',\n    ĩ: 'i',\n    ī: 'i',\n    ĭ: 'i',\n    į: 'i',\n    ı: 'i',\n    Ĵ: 'J',\n    ĵ: 'j',\n    Ķ: 'K',\n    ķ: 'k',\n    ĸ: 'k',\n    Ĺ: 'L',\n    Ļ: 'L',\n    Ľ: 'L',\n    Ŀ: 'L',\n    Ł: 'L',\n    ĺ: 'l',\n    ļ: 'l',\n    ľ: 'l',\n    ŀ: 'l',\n    ł: 'l',\n    Ń: 'N',\n    Ņ: 'N',\n    Ň: 'N',\n    Ŋ: 'N',\n    ń: 'n',\n    ņ: 'n',\n    ň: 'n',\n    ŋ: 'n',\n    Ō: 'O',\n    Ŏ: 'O',\n    Ő: 'O',\n    ō: 'o',\n    ŏ: 'o',\n    ő: 'o',\n    Ŕ: 'R',\n    Ŗ: 'R',\n    Ř: 'R',\n    ŕ: 'r',\n    ŗ: 'r',\n    ř: 'r',\n    Ś: 'S',\n    Ŝ: 'S',\n    Ş: 'S',\n    Š: 'S',\n    ś: 's',\n    ŝ: 's',\n    ş: 's',\n    š: 's',\n    Ţ: 'T',\n    Ť: 'T',\n    Ŧ: 'T',\n    ţ: 't',\n    ť: 't',\n    ŧ: 't',\n    Ũ: 'U',\n    Ū: 'U',\n    Ŭ: 'U',\n    Ů: 'U',\n    Ű: 'U',\n    Ų: 'U',\n    ũ: 'u',\n    ū: 'u',\n    ŭ: 'u',\n    ů: 'u',\n    ű: 'u',\n    ų: 'u',\n    Ŵ: 'W',\n    ŵ: 'w',\n    Ŷ: 'Y',\n    ŷ: 'y',\n    Ÿ: 'Y',\n    Ź: 'Z',\n    Ż: 'Z',\n    Ž: 'Z',\n    ź: 'z',\n    ż: 'z',\n    ž: 'z',\n    IJ: 'IJ',\n    ij: 'ij',\n    Œ: 'Oe',\n    œ: 'oe',\n    ʼn: \"'n\",\n    ſ: 's'\n  };\n\n  /** Used to map characters to HTML entities. */\n  var htmlEscapes = {\n    '&': '&amp;',\n    '<': '&lt;',\n    '>': '&gt;',\n    '\"': '&quot;',\n    \"'\": '&#39;'\n  };\n\n  /** Used to map HTML entities to characters. */\n  var htmlUnescapes = {\n    '&amp;': '&',\n    '&lt;': '<',\n    '&gt;': '>',\n    '&quot;': '\"',\n    '&#39;': \"'\"\n  };\n\n  /** Used to escape characters for inclusion in compiled string literals. */\n  var stringEscapes = {\n    '\\\\': '\\\\',\n    \"'\": \"'\",\n    '\\n': 'n',\n    '\\r': 'r',\n    '\\u2028': 'u2028',\n    '\\u2029': 'u2029'\n  };\n\n  /** Built-in method references without a dependency on `root`. */\n  var freeParseFloat = parseFloat,\n    freeParseInt = parseInt;\n\n  /** Detect free variable `global` from Node.js. */\n  var freeGlobal =\n      typeof global === 'object' && global && global.Object === Object && global;\n\n  /** Detect free variable `self`. */\n  var freeSelf =\n      typeof self === 'object' && self && self.Object === Object && self;\n\n  /** Used as a reference to the global object. */\n  var root = freeGlobal || freeSelf || Function('return this')();\n\n  /** Detect free variable `exports`. */\n  var freeExports =\n      typeof exports === 'object' && exports && !exports.nodeType && exports;\n\n  /** Detect free variable `module`. */\n  var freeModule =\n      freeExports &&\n      typeof module === 'object' &&\n      module &&\n      !module.nodeType &&\n      module;\n\n  /** Detect the popular CommonJS extension `module.exports`. */\n  var moduleExports = freeModule && freeModule.exports === freeExports;\n\n  /** Detect free variable `process` from Node.js. */\n  var freeProcess = moduleExports && freeGlobal.process;\n\n  /** Used to access faster Node.js helpers. */\n  var nodeUtil = (function() {\n    try {\n      // Use `util.types` for Node.js 10+.\n      var types =\n            freeModule && freeModule.require && freeModule.require('util').types;\n\n      if (types) {\n        return types;\n      }\n\n      // Legacy `process.binding('util')` for Node.js < 10.\n      return freeProcess && freeProcess.binding && freeProcess.binding('util');\n    } catch (e) { }\n  })();\n\n  /* Node.js helper references. */\n  var nodeIsArrayBuffer = nodeUtil && nodeUtil.isArrayBuffer,\n    nodeIsDate = nodeUtil && nodeUtil.isDate,\n    nodeIsMap = nodeUtil && nodeUtil.isMap,\n    nodeIsRegExp = nodeUtil && nodeUtil.isRegExp,\n    nodeIsSet = nodeUtil && nodeUtil.isSet,\n    nodeIsTypedArray = nodeUtil && nodeUtil.isTypedArray;\n\n  /* --------------------------------------------------------------------------*/\n\n  /**\n     * A faster alternative to `Function#apply`, this function invokes `func`\n     * with the `this` binding of `thisArg` and the arguments of `args`.\n     *\n     * @private\n     * @param {Function} func The function to invoke.\n     * @param {*} thisArg The `this` binding of `func`.\n     * @param {Array} args The arguments to invoke `func` with.\n     * @returns {*} Returns the result of `func`.\n     */\n  function apply(func, thisArg, args) {\n    switch (args.length) {\n      case 0:\n        return func.call(thisArg);\n      case 1:\n        return func.call(thisArg, args[0]);\n      case 2:\n        return func.call(thisArg, args[0], args[1]);\n      case 3:\n        return func.call(thisArg, args[0], args[1], args[2]);\n    }\n    return func.apply(thisArg, args);\n  }\n\n  /**\n     * A specialized version of `baseAggregator` for arrays.\n     *\n     * @private\n     * @param {Array} [array] The array to iterate over.\n     * @param {Function} setter The function to set `accumulator` values.\n     * @param {Function} iteratee The iteratee to transform keys.\n     * @param {Object} accumulator The initial aggregated object.\n     * @returns {Function} Returns `accumulator`.\n     */\n  function arrayAggregator(array, setter, iteratee, accumulator) {\n    var index = -1,\n      length = array == null ? 0 : array.length;\n\n    while (++index < length) {\n      var value = array[index];\n      setter(accumulator, value, iteratee(value), array);\n    }\n    return accumulator;\n  }\n\n  /**\n     * A specialized version of `_.forEach` for arrays without support for\n     * iteratee shorthands.\n     *\n     * @private\n     * @param {Array} [array] The array to iterate over.\n     * @param {Function} iteratee The function invoked per iteration.\n     * @returns {Array} Returns `array`.\n     */\n  function arrayEach(array, iteratee) {\n    var index = -1,\n      length = array == null ? 0 : array.length;\n\n    while (++index < length) {\n      if (iteratee(array[index], index, array) === false) {\n        break;\n      }\n    }\n    return array;\n  }\n\n  /**\n     * A specialized version of `_.forEachRight` for arrays without support for\n     * iteratee shorthands.\n     *\n     * @private\n     * @param {Array} [array] The array to iterate over.\n     * @param {Function} iteratee The function invoked per iteration.\n     * @returns {Array} Returns `array`.\n     */\n  function arrayEachRight(array, iteratee) {\n    var length = array == null ? 0 : array.length;\n\n    while (length--) {\n      if (iteratee(array[length], length, array) === false) {\n        break;\n      }\n    }\n    return array;\n  }\n\n  /**\n     * A specialized version of `_.every` for arrays without support for\n     * iteratee shorthands.\n     *\n     * @private\n     * @param {Array} [array] The array to iterate over.\n     * @param {Function} predicate The function invoked per iteration.\n     * @returns {boolean} Returns `true` if all elements pass the predicate check,\n     *  else `false`.\n     */\n  function arrayEvery(array, predicate) {\n    var index = -1,\n      length = array == null ? 0 : array.length;\n\n    while (++index < length) {\n      if (!predicate(array[index], index, array)) {\n        return false;\n      }\n    }\n    return true;\n  }\n\n  /**\n     * A specialized version of `_.filter` for arrays without support for\n     * iteratee shorthands.\n     *\n     * @private\n     * @param {Array} [array] The array to iterate over.\n     * @param {Function} predicate The function invoked per iteration.\n     * @returns {Array} Returns the new filtered array.\n     */\n  function arrayFilter(array, predicate) {\n    var index = -1,\n      length = array == null ? 0 : array.length,\n      resIndex = 0,\n      result = [];\n\n    while (++index < length) {\n      var value = array[index];\n      if (predicate(value, index, array)) {\n        result[resIndex++] = value;\n      }\n    }\n    return result;\n  }\n\n  /**\n     * A specialized version of `_.includes` for arrays without support for\n     * specifying an index to search from.\n     *\n     * @private\n     * @param {Array} [array] The array to inspect.\n     * @param {*} target The value to search for.\n     * @returns {boolean} Returns `true` if `target` is found, else `false`.\n     */\n  function arrayIncludes(array, value) {\n    var length = array == null ? 0 : array.length;\n    return !!length && baseIndexOf(array, value, 0) > -1;\n  }\n\n  /**\n     * This function is like `arrayIncludes` except that it accepts a comparator.\n     *\n     * @private\n     * @param {Array} [array] The array to inspect.\n     * @param {*} target The value to search for.\n     * @param {Function} comparator The comparator invoked per element.\n     * @returns {boolean} Returns `true` if `target` is found, else `false`.\n     */\n  function arrayIncludesWith(array, value, comparator) {\n    var index = -1,\n      length = array == null ? 0 : array.length;\n\n    while (++index < length) {\n      if (comparator(value, array[index])) {\n        return true;\n      }\n    }\n    return false;\n  }\n\n  /**\n     * A specialized version of `_.map` for arrays without support for iteratee\n     * shorthands.\n     *\n     * @private\n     * @param {Array} [array] The array to iterate over.\n     * @param {Function} iteratee The function invoked per iteration.\n     * @returns {Array} Returns the new mapped array.\n     */\n  function arrayMap(array, iteratee) {\n    var index = -1,\n      length = array == null ? 0 : array.length,\n      result = Array(length);\n\n    while (++index < length) {\n      result[index] = iteratee(array[index], index, array);\n    }\n    return result;\n  }\n\n  /**\n     * Appends the elements of `values` to `array`.\n     *\n     * @private\n     * @param {Array} array The array to modify.\n     * @param {Array} values The values to append.\n     * @returns {Array} Returns `array`.\n     */\n  function arrayPush(array, values) {\n    var index = -1,\n      length = values.length,\n      offset = array.length;\n\n    while (++index < length) {\n      array[offset + index] = values[index];\n    }\n    return array;\n  }\n\n  /**\n     * A specialized version of `_.reduce` for arrays without support for\n     * iteratee shorthands.\n     *\n     * @private\n     * @param {Array} [array] The array to iterate over.\n     * @param {Function} iteratee The function invoked per iteration.\n     * @param {*} [accumulator] The initial value.\n     * @param {boolean} [initAccum] Specify using the first element of `array` as\n     *  the initial value.\n     * @returns {*} Returns the accumulated value.\n     */\n  function arrayReduce(array, iteratee, accumulator, initAccum) {\n    var index = -1,\n      length = array == null ? 0 : array.length;\n\n    if (initAccum && length) {\n      accumulator = array[++index];\n    }\n    while (++index < length) {\n      accumulator = iteratee(accumulator, array[index], index, array);\n    }\n    return accumulator;\n  }\n\n  /**\n     * A specialized version of `_.reduceRight` for arrays without support for\n     * iteratee shorthands.\n     *\n     * @private\n     * @param {Array} [array] The array to iterate over.\n     * @param {Function} iteratee The function invoked per iteration.\n     * @param {*} [accumulator] The initial value.\n     * @param {boolean} [initAccum] Specify using the last element of `array` as\n     *  the initial value.\n     * @returns {*} Returns the accumulated value.\n     */\n  function arrayReduceRight(array, iteratee, accumulator, initAccum) {\n    var length = array == null ? 0 : array.length;\n    if (initAccum && length) {\n      accumulator = array[--length];\n    }\n    while (length--) {\n      accumulator = iteratee(accumulator, array[length], length, array);\n    }\n    return accumulator;\n  }\n\n  /**\n     * A specialized version of `_.some` for arrays without support for iteratee\n     * shorthands.\n     *\n     * @private\n     * @param {Array} [array] The array to iterate over.\n     * @param {Function} predicate The function invoked per iteration.\n     * @returns {boolean} Returns `true` if any element passes the predicate check,\n     *  else `false`.\n     */\n  function arraySome(array, predicate) {\n    var index = -1,\n      length = array == null ? 0 : array.length;\n\n    while (++index < length) {\n      if (predicate(array[index], index, array)) {\n        return true;\n      }\n    }\n    return false;\n  }\n\n  /**\n     * Gets the size of an ASCII `string`.\n     *\n     * @private\n     * @param {string} string The string inspect.\n     * @returns {number} Returns the string size.\n     */\n  var asciiSize = baseProperty('length');\n\n  /**\n     * Converts an ASCII `string` to an array.\n     *\n     * @private\n     * @param {string} string The string to convert.\n     * @returns {Array} Returns the converted array.\n     */\n  function asciiToArray(string) {\n    return string.split('');\n  }\n\n  /**\n     * Splits an ASCII `string` into an array of its words.\n     *\n     * @private\n     * @param {string} The string to inspect.\n     * @returns {Array} Returns the words of `string`.\n     */\n  function asciiWords(string) {\n    return string.match(reAsciiWord) || [];\n  }\n\n  /**\n     * The base implementation of methods like `_.findKey` and `_.findLastKey`,\n     * without support for iteratee shorthands, which iterates over `collection`\n     * using `eachFunc`.\n     *\n     * @private\n     * @param {Array|Object} collection The collection to inspect.\n     * @param {Function} predicate The function invoked per iteration.\n     * @param {Function} eachFunc The function to iterate over `collection`.\n     * @returns {*} Returns the found element or its key, else `undefined`.\n     */\n  function baseFindKey(collection, predicate, eachFunc) {\n    var result;\n    eachFunc(collection, function(value, key, collection) {\n      if (predicate(value, key, collection)) {\n        result = key;\n        return false;\n      }\n    });\n    return result;\n  }\n\n  /**\n     * The base implementation of `_.findIndex` and `_.findLastIndex` without\n     * support for iteratee shorthands.\n     *\n     * @private\n     * @param {Array} array The array to inspect.\n     * @param {Function} predicate The function invoked per iteration.\n     * @param {number} fromIndex The index to search from.\n     * @param {boolean} [fromRight] Specify iterating from right to left.\n     * @returns {number} Returns the index of the matched value, else `-1`.\n     */\n  function baseFindIndex(array, predicate, fromIndex, fromRight) {\n    var length = array.length,\n      index = fromIndex + (fromRight ? 1 : -1);\n\n    while (fromRight ? index-- : ++index < length) {\n      if (predicate(array[index], index, array)) {\n        return index;\n      }\n    }\n    return -1;\n  }\n\n  /**\n     * The base implementation of `_.indexOf` without `fromIndex` bounds checks.\n     *\n     * @private\n     * @param {Array} array The array to inspect.\n     * @param {*} value The value to search for.\n     * @param {number} fromIndex The index to search from.\n     * @returns {number} Returns the index of the matched value, else `-1`.\n     */\n  function baseIndexOf(array, value, fromIndex) {\n    return value === value\n      ? strictIndexOf(array, value, fromIndex)\n      : baseFindIndex(array, baseIsNaN, fromIndex);\n  }\n\n  /**\n     * This function is like `baseIndexOf` except that it accepts a comparator.\n     *\n     * @private\n     * @param {Array} array The array to inspect.\n     * @param {*} value The value to search for.\n     * @param {number} fromIndex The index to search from.\n     * @param {Function} comparator The comparator invoked per element.\n     * @returns {number} Returns the index of the matched value, else `-1`.\n     */\n  function baseIndexOfWith(array, value, fromIndex, comparator) {\n    var index = fromIndex - 1,\n      length = array.length;\n\n    while (++index < length) {\n      if (comparator(array[index], value)) {\n        return index;\n      }\n    }\n    return -1;\n  }\n\n  /**\n     * The base implementation of `_.isNaN` without support for number objects.\n     *\n     * @private\n     * @param {*} value The value to check.\n     * @returns {boolean} Returns `true` if `value` is `NaN`, else `false`.\n     */\n  function baseIsNaN(value) {\n    return value !== value;\n  }\n\n  /**\n     * The base implementation of `_.mean` and `_.meanBy` without support for\n     * iteratee shorthands.\n     *\n     * @private\n     * @param {Array} array The array to iterate over.\n     * @param {Function} iteratee The function invoked per iteration.\n     * @returns {number} Returns the mean.\n     */\n  function baseMean(array, iteratee) {\n    var length = array == null ? 0 : array.length;\n    return length ? baseSum(array, iteratee) / length : NAN;\n  }\n\n  /**\n     * The base implementation of `_.property` without support for deep paths.\n     *\n     * @private\n     * @param {string} key The key of the property to get.\n     * @returns {Function} Returns the new accessor function.\n     */\n  function baseProperty(key) {\n    return function(object) {\n      return object == null ? undefined : object[key];\n    };\n  }\n\n  /**\n     * The base implementation of `_.propertyOf` without support for deep paths.\n     *\n     * @private\n     * @param {Object} object The object to query.\n     * @returns {Function} Returns the new accessor function.\n     */\n  function basePropertyOf(object) {\n    return function(key) {\n      return object == null ? undefined : object[key];\n    };\n  }\n\n  /**\n     * The base implementation of `_.reduce` and `_.reduceRight`, without support\n     * for iteratee shorthands, which iterates over `collection` using `eachFunc`.\n     *\n     * @private\n     * @param {Array|Object} collection The collection to iterate over.\n     * @param {Function} iteratee The function invoked per iteration.\n     * @param {*} accumulator The initial value.\n     * @param {boolean} initAccum Specify using the first or last element of\n     *  `collection` as the initial value.\n     * @param {Function} eachFunc The function to iterate over `collection`.\n     * @returns {*} Returns the accumulated value.\n     */\n  function baseReduce(collection, iteratee, accumulator, initAccum, eachFunc) {\n    eachFunc(collection, function(value, index, collection) {\n      accumulator = initAccum\n        ? ((initAccum = false), value)\n        : iteratee(accumulator, value, index, collection);\n    });\n    return accumulator;\n  }\n\n  /**\n     * The base implementation of `_.sortBy` which uses `comparer` to define the\n     * sort order of `array` and replaces criteria objects with their corresponding\n     * values.\n     *\n     * @private\n     * @param {Array} array The array to sort.\n     * @param {Function} comparer The function to define sort order.\n     * @returns {Array} Returns `array`.\n     */\n  function baseSortBy(array, comparer) {\n    var length = array.length;\n\n    array.sort(comparer);\n    while (length--) {\n      array[length] = array[length].value;\n    }\n    return array;\n  }\n\n  /**\n     * The base implementation of `_.sum` and `_.sumBy` without support for\n     * iteratee shorthands.\n     *\n     * @private\n     * @param {Array} array The array to iterate over.\n     * @param {Function} iteratee The function invoked per iteration.\n     * @returns {number} Returns the sum.\n     */\n  function baseSum(array, iteratee) {\n    var result,\n      index = -1,\n      length = array.length;\n\n    while (++index < length) {\n      var current = iteratee(array[index]);\n      if (current !== undefined) {\n        result = result === undefined ? current : result + current;\n      }\n    }\n    return result;\n  }\n\n  /**\n     * The base implementation of `_.times` without support for iteratee shorthands\n     * or max array length checks.\n     *\n     * @private\n     * @param {number} n The number of times to invoke `iteratee`.\n     * @param {Function} iteratee The function invoked per iteration.\n     * @returns {Array} Returns the array of results.\n     */\n  function baseTimes(n, iteratee) {\n    var index = -1,\n      result = Array(n);\n\n    while (++index < n) {\n      result[index] = iteratee(index);\n    }\n    return result;\n  }\n\n  /**\n     * The base implementation of `_.toPairs` and `_.toPairsIn` which creates an array\n     * of key-value pairs for `object` corresponding to the property names of `props`.\n     *\n     * @private\n     * @param {Object} object The object to query.\n     * @param {Array} props The property names to get values for.\n     * @returns {Object} Returns the key-value pairs.\n     */\n  function baseToPairs(object, props) {\n    return arrayMap(props, function(key) {\n      return [key, object[key]];\n    });\n  }\n\n  /**\n     * The base implementation of `_.unary` without support for storing metadata.\n     *\n     * @private\n     * @param {Function} func The function to cap arguments for.\n     * @returns {Function} Returns the new capped function.\n     */\n  function baseUnary(func) {\n    return function(value) {\n      return func(value);\n    };\n  }\n\n  /**\n     * The base implementation of `_.values` and `_.valuesIn` which creates an\n     * array of `object` property values corresponding to the property names\n     * of `props`.\n     *\n     * @private\n     * @param {Object} object The object to query.\n     * @param {Array} props The property names to get values for.\n     * @returns {Object} Returns the array of property values.\n     */\n  function baseValues(object, props) {\n    return arrayMap(props, function(key) {\n      return object[key];\n    });\n  }\n\n  /**\n     * Checks if a `cache` value for `key` exists.\n     *\n     * @private\n     * @param {Object} cache The cache to query.\n     * @param {string} key The key of the entry to check.\n     * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.\n     */\n  function cacheHas(cache, key) {\n    return cache.has(key);\n  }\n\n  /**\n     * Used by `_.trim` and `_.trimStart` to get the index of the first string symbol\n     * that is not found in the character symbols.\n     *\n     * @private\n     * @param {Array} strSymbols The string symbols to inspect.\n     * @param {Array} chrSymbols The character symbols to find.\n     * @returns {number} Returns the index of the first unmatched string symbol.\n     */\n  function charsStartIndex(strSymbols, chrSymbols) {\n    var index = -1,\n      length = strSymbols.length;\n\n    while (\n      ++index < length &&\n         baseIndexOf(chrSymbols, strSymbols[index], 0) > -1\n    ) { }\n    return index;\n  }\n\n  /**\n     * Used by `_.trim` and `_.trimEnd` to get the index of the last string symbol\n     * that is not found in the character symbols.\n     *\n     * @private\n     * @param {Array} strSymbols The string symbols to inspect.\n     * @param {Array} chrSymbols The character symbols to find.\n     * @returns {number} Returns the index of the last unmatched string symbol.\n     */\n  function charsEndIndex(strSymbols, chrSymbols) {\n    var index = strSymbols.length;\n\n    while (index-- && baseIndexOf(chrSymbols, strSymbols[index], 0) > -1) { }\n    return index;\n  }\n\n  /**\n     * Gets the number of `placeholder` occurrences in `array`.\n     *\n     * @private\n     * @param {Array} array The array to inspect.\n     * @param {*} placeholder The placeholder to search for.\n     * @returns {number} Returns the placeholder count.\n     */\n  function countHolders(array, placeholder) {\n    var length = array.length,\n      result = 0;\n\n    while (length--) {\n      if (array[length] === placeholder) {\n        ++result;\n      }\n    }\n    return result;\n  }\n\n  /**\n     * Used by `_.deburr` to convert Latin-1 Supplement and Latin Extended-A\n     * letters to basic Latin letters.\n     *\n     * @private\n     * @param {string} letter The matched letter to deburr.\n     * @returns {string} Returns the deburred letter.\n     */\n  var deburrLetter = basePropertyOf(deburredLetters);\n\n  /**\n     * Used by `_.escape` to convert characters to HTML entities.\n     *\n     * @private\n     * @param {string} chr The matched character to escape.\n     * @returns {string} Returns the escaped character.\n     */\n  var escapeHtmlChar = basePropertyOf(htmlEscapes);\n\n  /**\n     * Used by `_.template` to escape characters for inclusion in compiled string literals.\n     *\n     * @private\n     * @param {string} chr The matched character to escape.\n     * @returns {string} Returns the escaped character.\n     */\n  function escapeStringChar(chr) {\n    return '\\\\' + stringEscapes[chr];\n  }\n\n  /**\n     * Gets the value at `key` of `object`.\n     *\n     * @private\n     * @param {Object} [object] The object to query.\n     * @param {string} key The key of the property to get.\n     * @returns {*} Returns the property value.\n     */\n  function getValue(object, key) {\n    return object == null ? undefined : object[key];\n  }\n\n  /**\n     * Checks if `string` contains Unicode symbols.\n     *\n     * @private\n     * @param {string} string The string to inspect.\n     * @returns {boolean} Returns `true` if a symbol is found, else `false`.\n     */\n  function hasUnicode(string) {\n    return reHasUnicode.test(string);\n  }\n\n  /**\n     * Checks if `string` contains a word composed of Unicode symbols.\n     *\n     * @private\n     * @param {string} string The string to inspect.\n     * @returns {boolean} Returns `true` if a word is found, else `false`.\n     */\n  function hasUnicodeWord(string) {\n    return reHasUnicodeWord.test(string);\n  }\n\n  /**\n     * Converts `iterator` to an array.\n     *\n     * @private\n     * @param {Object} iterator The iterator to convert.\n     * @returns {Array} Returns the converted array.\n     */\n  function iteratorToArray(iterator) {\n    var data,\n      result = [];\n\n    while (!(data = iterator.next()).done) {\n      result.push(data.value);\n    }\n    return result;\n  }\n\n  /**\n     * Converts `map` to its key-value pairs.\n     *\n     * @private\n     * @param {Object} map The map to convert.\n     * @returns {Array} Returns the key-value pairs.\n     */\n  function mapToArray(map) {\n    var index = -1,\n      result = Array(map.size);\n\n    map.forEach(function(value, key) {\n      result[++index] = [key, value];\n    });\n    return result;\n  }\n\n  /**\n     * Creates a unary function that invokes `func` with its argument transformed.\n     *\n     * @private\n     * @param {Function} func The function to wrap.\n     * @param {Function} transform The argument transform.\n     * @returns {Function} Returns the new function.\n     */\n  function overArg(func, transform) {\n    return function(arg) {\n      return func(transform(arg));\n    };\n  }\n\n  /**\n     * Replaces all `placeholder` elements in `array` with an internal placeholder\n     * and returns an array of their indexes.\n     *\n     * @private\n     * @param {Array} array The array to modify.\n     * @param {*} placeholder The placeholder to replace.\n     * @returns {Array} Returns the new array of placeholder indexes.\n     */\n  function replaceHolders(array, placeholder) {\n    var index = -1,\n      length = array.length,\n      resIndex = 0,\n      result = [];\n\n    while (++index < length) {\n      var value = array[index];\n      if (value === placeholder || value === PLACEHOLDER) {\n        array[index] = PLACEHOLDER;\n        result[resIndex++] = index;\n      }\n    }\n    return result;\n  }\n\n  /**\n     * Gets the value at `key`, unless `key` is \"__proto__\".\n     *\n     * @private\n     * @param {Object} object The object to query.\n     * @param {string} key The key of the property to get.\n     * @returns {*} Returns the property value.\n     */\n  function safeGet(object, key) {\n    return key == '__proto__' ? undefined : object[key];\n  }\n\n  /**\n     * Converts `set` to an array of its values.\n     *\n     * @private\n     * @param {Object} set The set to convert.\n     * @returns {Array} Returns the values.\n     */\n  function setToArray(set) {\n    var index = -1,\n      result = Array(set.size);\n\n    set.forEach(function(value) {\n      result[++index] = value;\n    });\n    return result;\n  }\n\n  /**\n     * Converts `set` to its value-value pairs.\n     *\n     * @private\n     * @param {Object} set The set to convert.\n     * @returns {Array} Returns the value-value pairs.\n     */\n  function setToPairs(set) {\n    var index = -1,\n      result = Array(set.size);\n\n    set.forEach(function(value) {\n      result[++index] = [value, value];\n    });\n    return result;\n  }\n\n  /**\n     * A specialized version of `_.indexOf` which performs strict equality\n     * comparisons of values, i.e. `===`.\n     *\n     * @private\n     * @param {Array} array The array to inspect.\n     * @param {*} value The value to search for.\n     * @param {number} fromIndex The index to search from.\n     * @returns {number} Returns the index of the matched value, else `-1`.\n     */\n  function strictIndexOf(array, value, fromIndex) {\n    var index = fromIndex - 1,\n      length = array.length;\n\n    while (++index < length) {\n      if (array[index] === value) {\n        return index;\n      }\n    }\n    return -1;\n  }\n\n  /**\n     * A specialized version of `_.lastIndexOf` which performs strict equality\n     * comparisons of values, i.e. `===`.\n     *\n     * @private\n     * @param {Array} array The array to inspect.\n     * @param {*} value The value to search for.\n     * @param {number} fromIndex The index to search from.\n     * @returns {number} Returns the index of the matched value, else `-1`.\n     */\n  function strictLastIndexOf(array, value, fromIndex) {\n    var index = fromIndex + 1;\n    while (index--) {\n      if (array[index] === value) {\n        return index;\n      }\n    }\n    return index;\n  }\n\n  /**\n     * Gets the number of symbols in `string`.\n     *\n     * @private\n     * @param {string} string The string to inspect.\n     * @returns {number} Returns the string size.\n     */\n  function stringSize(string) {\n    return hasUnicode(string) ? unicodeSize(string) : asciiSize(string);\n  }\n\n  /**\n     * Converts `string` to an array.\n     *\n     * @private\n     * @param {string} string The string to convert.\n     * @returns {Array} Returns the converted array.\n     */\n  function stringToArray(string) {\n    return hasUnicode(string) ? unicodeToArray(string) : asciiToArray(string);\n  }\n\n  /**\n     * Used by `_.unescape` to convert HTML entities to characters.\n     *\n     * @private\n     * @param {string} chr The matched character to unescape.\n     * @returns {string} Returns the unescaped character.\n     */\n  var unescapeHtmlChar = basePropertyOf(htmlUnescapes);\n\n  /**\n     * Gets the size of a Unicode `string`.\n     *\n     * @private\n     * @param {string} string The string inspect.\n     * @returns {number} Returns the string size.\n     */\n  function unicodeSize(string) {\n    var result = (reUnicode.lastIndex = 0);\n    while (reUnicode.test(string)) {\n      ++result;\n    }\n    return result;\n  }\n\n  /**\n     * Converts a Unicode `string` to an array.\n     *\n     * @private\n     * @param {string} string The string to convert.\n     * @returns {Array} Returns the converted array.\n     */\n  function unicodeToArray(string) {\n    return string.match(reUnicode) || [];\n  }\n\n  /**\n     * Splits a Unicode `string` into an array of its words.\n     *\n     * @private\n     * @param {string} The string to inspect.\n     * @returns {Array} Returns the words of `string`.\n     */\n  function unicodeWords(string) {\n    return string.match(reUnicodeWord) || [];\n  }\n\n  /* --------------------------------------------------------------------------*/\n\n  /**\n     * Create a new pristine `lodash` function using the `context` object.\n     *\n     * @static\n     * @memberOf _\n     * @since 1.1.0\n     * @category Util\n     * @param {Object} [context=root] The context object.\n     * @returns {Function} Returns a new `lodash` function.\n     * @example\n     *\n     * _.mixin({ 'foo': _.constant('foo') });\n     *\n     * var lodash = _.runInContext();\n     * lodash.mixin({ 'bar': lodash.constant('bar') });\n     *\n     * _.isFunction(_.foo);\n     * // => true\n     * _.isFunction(_.bar);\n     * // => false\n     *\n     * lodash.isFunction(lodash.foo);\n     * // => false\n     * lodash.isFunction(lodash.bar);\n     * // => true\n     *\n     * // Create a suped-up `defer` in Node.js.\n     * var defer = _.runInContext({ 'setTimeout': setImmediate }).defer;\n     */\n  var runInContext = function runInContext(context) {\n    context =\n         context == null\n           ? root\n           : _.defaults(root.Object(), context, _.pick(root, contextProps));\n\n    /** Built-in constructor references. */\n    var Array = context.Array,\n      Date = context.Date,\n      Error = context.Error,\n      Function = context.Function,\n      Math = context.Math,\n      Object = context.Object,\n      RegExp = context.RegExp,\n      String = context.String,\n      TypeError = context.TypeError;\n\n      /** Used for built-in method references. */\n    var arrayProto = Array.prototype,\n      funcProto = Function.prototype,\n      objectProto = Object.prototype;\n\n      /** Used to detect overreaching core-js shims. */\n    var coreJsData = context['__core-js_shared__'];\n\n    /** Used to resolve the decompiled source of functions. */\n    var funcToString = funcProto.toString;\n\n    /** Used to check objects for own properties. */\n    var hasOwnProperty = objectProto.hasOwnProperty;\n\n    /** Used to generate unique IDs. */\n    var idCounter = 0;\n\n    /** Used to detect methods masquerading as native. */\n    var maskSrcKey = (function() {\n      var uid = /[^.]+$/.exec(\n        (coreJsData && coreJsData.keys && coreJsData.keys.IE_PROTO) || ''\n      );\n      return uid ? 'Symbol(src)_1.' + uid : '';\n    })();\n\n      /**\n       * Used to resolve the\n       * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)\n       * of values.\n       */\n    var nativeObjectToString = objectProto.toString;\n\n    /** Used to infer the `Object` constructor. */\n    var objectCtorString = funcToString.call(Object);\n\n    /** Used to restore the original `_` reference in `_.noConflict`. */\n    var oldDash = root._;\n\n    /** Used to detect if a method is native. */\n    var reIsNative = RegExp(\n      '^' +\n         funcToString\n           .call(hasOwnProperty)\n           .replace(reRegExpChar, '\\\\$&')\n           .replace(\n             /hasOwnProperty|(function).*?(?=\\\\\\()| for .+?(?=\\\\\\])/g,\n             '$1.*?'\n           ) +\n         '$'\n    );\n\n      /** Built-in value references. */\n    var Buffer = moduleExports ? context.Buffer : undefined,\n      Symbol = context.Symbol,\n      Uint8Array = context.Uint8Array,\n      allocUnsafe = Buffer ? Buffer.allocUnsafe : undefined,\n      getPrototype = overArg(Object.getPrototypeOf, Object),\n      objectCreate = Object.create,\n      propertyIsEnumerable = objectProto.propertyIsEnumerable,\n      splice = arrayProto.splice,\n      spreadableSymbol = Symbol ? Symbol.isConcatSpreadable : undefined,\n      symIterator = Symbol ? Symbol.iterator : undefined,\n      symToStringTag = Symbol ? Symbol.toStringTag : undefined;\n\n    var defineProperty = (function() {\n      try {\n        var func = getNative(Object, 'defineProperty');\n        func({}, '', {});\n        return func;\n      } catch (e) { }\n    })();\n\n      /** Mocked built-ins. */\n    var ctxClearTimeout =\n         context.clearTimeout !== root.clearTimeout && context.clearTimeout,\n      ctxNow = Date && Date.now !== root.Date.now && Date.now,\n      ctxSetTimeout =\n            context.setTimeout !== root.setTimeout && context.setTimeout;\n\n      /* Built-in method references for those with the same name as other `lodash` methods. */\n    var nativeCeil = Math.ceil,\n      nativeFloor = Math.floor,\n      nativeGetSymbols = Object.getOwnPropertySymbols,\n      nativeIsBuffer = Buffer ? Buffer.isBuffer : undefined,\n      nativeIsFinite = context.isFinite,\n      nativeJoin = arrayProto.join,\n      nativeKeys = overArg(Object.keys, Object),\n      nativeMax = Math.max,\n      nativeMin = Math.min,\n      nativeNow = Date.now,\n      nativeParseInt = context.parseInt,\n      nativeRandom = Math.random,\n      nativeReverse = arrayProto.reverse;\n\n      /* Built-in method references that are verified to be native. */\n    var DataView = getNative(context, 'DataView'),\n      Map = getNative(context, 'Map'),\n      Promise = getNative(context, 'Promise'),\n      Set = getNative(context, 'Set'),\n      WeakMap = getNative(context, 'WeakMap'),\n      nativeCreate = getNative(Object, 'create');\n\n      /** Used to store function metadata. */\n    var metaMap = WeakMap && new WeakMap();\n\n    /** Used to lookup unminified function names. */\n    var realNames = {};\n\n    /** Used to detect maps, sets, and weakmaps. */\n    var dataViewCtorString = toSource(DataView),\n      mapCtorString = toSource(Map),\n      promiseCtorString = toSource(Promise),\n      setCtorString = toSource(Set),\n      weakMapCtorString = toSource(WeakMap);\n\n      /** Used to convert symbols to primitives and strings. */\n    var symbolProto = Symbol ? Symbol.prototype : undefined,\n      symbolValueOf = symbolProto ? symbolProto.valueOf : undefined,\n      symbolToString = symbolProto ? symbolProto.toString : undefined;\n\n      /* ------------------------------------------------------------------------*/\n\n      /**\n       * Creates a `lodash` object which wraps `value` to enable implicit method\n       * chain sequences. Methods that operate on and return arrays, collections,\n       * and functions can be chained together. Methods that retrieve a single value\n       * or may return a primitive value will automatically end the chain sequence\n       * and return the unwrapped value. Otherwise, the value must be unwrapped\n       * with `_#value`.\n       *\n       * Explicit chain sequences, which must be unwrapped with `_#value`, may be\n       * enabled using `_.chain`.\n       *\n       * The execution of chained methods is lazy, that is, it's deferred until\n       * `_#value` is implicitly or explicitly called.\n       *\n       * Lazy evaluation allows several methods to support shortcut fusion.\n       * Shortcut fusion is an optimization to merge iteratee calls; this avoids\n       * the creation of intermediate arrays and can greatly reduce the number of\n       * iteratee executions. Sections of a chain sequence qualify for shortcut\n       * fusion if the section is applied to an array and iteratees accept only\n       * one argument. The heuristic for whether a section qualifies for shortcut\n       * fusion is subject to change.\n       *\n       * Chaining is supported in custom builds as long as the `_#value` method is\n       * directly or indirectly included in the build.\n       *\n       * In addition to lodash methods, wrappers have `Array` and `String` methods.\n       *\n       * The wrapper `Array` methods are:\n       * `concat`, `join`, `pop`, `push`, `shift`, `sort`, `splice`, and `unshift`\n       *\n       * The wrapper `String` methods are:\n       * `replace` and `split`\n       *\n       * The wrapper methods that support shortcut fusion are:\n       * `at`, `compact`, `drop`, `dropRight`, `dropWhile`, `filter`, `find`,\n       * `findLast`, `head`, `initial`, `last`, `map`, `reject`, `reverse`, `slice`,\n       * `tail`, `take`, `takeRight`, `takeRightWhile`, `takeWhile`, and `toArray`\n       *\n       * The chainable wrapper methods are:\n       * `after`, `ary`, `assign`, `assignIn`, `assignInWith`, `assignWith`, `at`,\n       * `before`, `bind`, `bindAll`, `bindKey`, `castArray`, `chain`, `chunk`,\n       * `commit`, `compact`, `concat`, `conforms`, `constant`, `countBy`, `create`,\n       * `curry`, `debounce`, `defaults`, `defaultsDeep`, `defer`, `delay`,\n       * `difference`, `differenceBy`, `differenceWith`, `drop`, `dropRight`,\n       * `dropRightWhile`, `dropWhile`, `extend`, `extendWith`, `fill`, `filter`,\n       * `flatMap`, `flatMapDeep`, `flatMapDepth`, `flatten`, `flattenDeep`,\n       * `flattenDepth`, `flip`, `flow`, `flowRight`, `fromPairs`, `functions`,\n       * `functionsIn`, `groupBy`, `initial`, `intersection`, `intersectionBy`,\n       * `intersectionWith`, `invert`, `invertBy`, `invokeMap`, `iteratee`, `keyBy`,\n       * `keys`, `keysIn`, `map`, `mapKeys`, `mapValues`, `matches`, `matchesProperty`,\n       * `memoize`, `merge`, `mergeWith`, `method`, `methodOf`, `mixin`, `negate`,\n       * `nthArg`, `omit`, `omitBy`, `once`, `orderBy`, `over`, `overArgs`,\n       * `overEvery`, `overSome`, `partial`, `partialRight`, `partition`, `pick`,\n       * `pickBy`, `plant`, `property`, `propertyOf`, `pull`, `pullAll`, `pullAllBy`,\n       * `pullAllWith`, `pullAt`, `push`, `range`, `rangeRight`, `rearg`, `reject`,\n       * `remove`, `rest`, `reverse`, `sampleSize`, `set`, `setWith`, `shuffle`,\n       * `slice`, `sort`, `sortBy`, `splice`, `spread`, `tail`, `take`, `takeRight`,\n       * `takeRightWhile`, `takeWhile`, `tap`, `throttle`, `thru`, `toArray`,\n       * `toPairs`, `toPairsIn`, `toPath`, `toPlainObject`, `transform`, `unary`,\n       * `union`, `unionBy`, `unionWith`, `uniq`, `uniqBy`, `uniqWith`, `unset`,\n       * `unshift`, `unzip`, `unzipWith`, `update`, `updateWith`, `values`,\n       * `valuesIn`, `without`, `wrap`, `xor`, `xorBy`, `xorWith`, `zip`,\n       * `zipObject`, `zipObjectDeep`, and `zipWith`\n       *\n       * The wrapper methods that are **not** chainable by default are:\n       * `add`, `attempt`, `camelCase`, `capitalize`, `ceil`, `clamp`, `clone`,\n       * `cloneDeep`, `cloneDeepWith`, `cloneWith`, `conformsTo`, `deburr`,\n       * `defaultTo`, `divide`, `each`, `eachRight`, `endsWith`, `eq`, `escape`,\n       * `escapeRegExp`, `every`, `find`, `findIndex`, `findKey`, `findLast`,\n       * `findLastIndex`, `findLastKey`, `first`, `floor`, `forEach`, `forEachRight`,\n       * `forIn`, `forInRight`, `forOwn`, `forOwnRight`, `get`, `gt`, `gte`, `has`,\n       * `hasIn`, `head`, `identity`, `includes`, `indexOf`, `inRange`, `invoke`,\n       * `isArguments`, `isArray`, `isArrayBuffer`, `isArrayLike`, `isArrayLikeObject`,\n       * `isBoolean`, `isBuffer`, `isDate`, `isElement`, `isEmpty`, `isEqual`,\n       * `isEqualWith`, `isError`, `isFinite`, `isFunction`, `isInteger`, `isLength`,\n       * `isMap`, `isMatch`, `isMatchWith`, `isNaN`, `isNative`, `isNil`, `isNull`,\n       * `isNumber`, `isObject`, `isObjectLike`, `isPlainObject`, `isRegExp`,\n       * `isSafeInteger`, `isSet`, `isString`, `isUndefined`, `isTypedArray`,\n       * `isWeakMap`, `isWeakSet`, `join`, `kebabCase`, `last`, `lastIndexOf`,\n       * `lowerCase`, `lowerFirst`, `lt`, `lte`, `max`, `maxBy`, `mean`, `meanBy`,\n       * `min`, `minBy`, `multiply`, `noConflict`, `noop`, `now`, `nth`, `pad`,\n       * `padEnd`, `padStart`, `parseInt`, `pop`, `random`, `reduce`, `reduceRight`,\n       * `repeat`, `result`, `round`, `runInContext`, `sample`, `shift`, `size`,\n       * `snakeCase`, `some`, `sortedIndex`, `sortedIndexBy`, `sortedLastIndex`,\n       * `sortedLastIndexBy`, `startCase`, `startsWith`, `stubArray`, `stubFalse`,\n       * `stubObject`, `stubString`, `stubTrue`, `subtract`, `sum`, `sumBy`,\n       * `template`, `times`, `toFinite`, `toInteger`, `toJSON`, `toLength`,\n       * `toLower`, `toNumber`, `toSafeInteger`, `toString`, `toUpper`, `trim`,\n       * `trimEnd`, `trimStart`, `truncate`, `unescape`, `uniqueId`, `upperCase`,\n       * `upperFirst`, `value`, and `words`\n       *\n       * @name _\n       * @constructor\n       * @category Seq\n       * @param {*} value The value to wrap in a `lodash` instance.\n       * @returns {Object} Returns the new `lodash` wrapper instance.\n       * @example\n       *\n       * function square(n) {\n       *   return n * n;\n       * }\n       *\n       * var wrapped = _([1, 2, 3]);\n       *\n       * // Returns an unwrapped value.\n       * wrapped.reduce(_.add);\n       * // => 6\n       *\n       * // Returns a wrapped value.\n       * var squares = wrapped.map(square);\n       *\n       * _.isArray(squares);\n       * // => false\n       *\n       * _.isArray(squares.value());\n       * // => true\n       */\n    function lodash(value) {\n      if (\n        isObjectLike(value) &&\n            !isArray(value) &&\n            !(value instanceof LazyWrapper)\n      ) {\n        if (value instanceof LodashWrapper) {\n          return value;\n        }\n        if (hasOwnProperty.call(value, '__wrapped__')) {\n          return wrapperClone(value);\n        }\n      }\n      return new LodashWrapper(value);\n    }\n\n    /**\n         * The base implementation of `_.create` without support for assigning\n         * properties to the created object.\n         *\n         * @private\n         * @param {Object} proto The object to inherit from.\n         * @returns {Object} Returns the new object.\n         */\n    var baseCreate = (function() {\n      function object() { }\n      return function(proto) {\n        if (!isObject(proto)) {\n          return {};\n        }\n        if (objectCreate) {\n          return objectCreate(proto);\n        }\n        object.prototype = proto;\n        var result = new object();\n        object.prototype = undefined;\n        return result;\n      };\n    })();\n\n      /**\n       * The function whose prototype chain sequence wrappers inherit from.\n       *\n       * @private\n       */\n    function baseLodash() {\n      // No operation performed.\n    }\n\n    /**\n         * The base constructor for creating `lodash` wrapper objects.\n         *\n         * @private\n         * @param {*} value The value to wrap.\n         * @param {boolean} [chainAll] Enable explicit method chain sequences.\n         */\n    function LodashWrapper(value, chainAll) {\n      this.__wrapped__ = value;\n      this.__actions__ = [];\n      this.__chain__ = !!chainAll;\n      this.__index__ = 0;\n      this.__values__ = undefined;\n    }\n\n    /**\n         * By default, the template delimiters used by lodash are like those in\n         * embedded Ruby (ERB) as well as ES2015 template strings. Change the\n         * following template settings to use alternative delimiters.\n         *\n         * @static\n         * @memberOf _\n         * @type {Object}\n         */\n    lodash.templateSettings = {\n      /**\n             * Used to detect `data` property values to be HTML-escaped.\n             *\n             * @memberOf _.templateSettings\n             * @type {RegExp}\n             */\n      escape: reEscape,\n\n      /**\n             * Used to detect code to be evaluated.\n             *\n             * @memberOf _.templateSettings\n             * @type {RegExp}\n             */\n      evaluate: reEvaluate,\n\n      /**\n             * Used to detect `data` property values to inject.\n             *\n             * @memberOf _.templateSettings\n             * @type {RegExp}\n             */\n      interpolate: reInterpolate,\n\n      /**\n             * Used to reference the data object in the template text.\n             *\n             * @memberOf _.templateSettings\n             * @type {string}\n             */\n      variable: '',\n\n      /**\n             * Used to import variables into the compiled template.\n             *\n             * @memberOf _.templateSettings\n             * @type {Object}\n             */\n      imports: {\n        /**\n                 * A reference to the `lodash` function.\n                 *\n                 * @memberOf _.templateSettings.imports\n                 * @type {Function}\n                 */\n        _: lodash\n      }\n    };\n\n    // Ensure wrappers are instances of `baseLodash`.\n    lodash.prototype = baseLodash.prototype;\n    lodash.prototype.constructor = lodash;\n\n    LodashWrapper.prototype = baseCreate(baseLodash.prototype);\n    LodashWrapper.prototype.constructor = LodashWrapper;\n\n    /* ------------------------------------------------------------------------*/\n\n    /**\n         * Creates a lazy wrapper object which wraps `value` to enable lazy evaluation.\n         *\n         * @private\n         * @constructor\n         * @param {*} value The value to wrap.\n         */\n    function LazyWrapper(value) {\n      this.__wrapped__ = value;\n      this.__actions__ = [];\n      this.__dir__ = 1;\n      this.__filtered__ = false;\n      this.__iteratees__ = [];\n      this.__takeCount__ = MAX_ARRAY_LENGTH;\n      this.__views__ = [];\n    }\n\n    /**\n         * Creates a clone of the lazy wrapper object.\n         *\n         * @private\n         * @name clone\n         * @memberOf LazyWrapper\n         * @returns {Object} Returns the cloned `LazyWrapper` object.\n         */\n    function lazyClone() {\n      var result = new LazyWrapper(this.__wrapped__);\n      result.__actions__ = copyArray(this.__actions__);\n      result.__dir__ = this.__dir__;\n      result.__filtered__ = this.__filtered__;\n      result.__iteratees__ = copyArray(this.__iteratees__);\n      result.__takeCount__ = this.__takeCount__;\n      result.__views__ = copyArray(this.__views__);\n      return result;\n    }\n\n    /**\n         * Reverses the direction of lazy iteration.\n         *\n         * @private\n         * @name reverse\n         * @memberOf LazyWrapper\n         * @returns {Object} Returns the new reversed `LazyWrapper` object.\n         */\n    function lazyReverse() {\n      if (this.__filtered__) {\n        var result = new LazyWrapper(this);\n        result.__dir__ = -1;\n        result.__filtered__ = true;\n      } else {\n        result = this.clone();\n        result.__dir__ *= -1;\n      }\n      return result;\n    }\n\n    /**\n         * Extracts the unwrapped value from its lazy wrapper.\n         *\n         * @private\n         * @name value\n         * @memberOf LazyWrapper\n         * @returns {*} Returns the unwrapped value.\n         */\n    function lazyValue() {\n      var array = this.__wrapped__.value(),\n        dir = this.__dir__,\n        isArr = isArray(array),\n        isRight = dir < 0,\n        arrLength = isArr ? array.length : 0,\n        view = getView(0, arrLength, this.__views__),\n        start = view.start,\n        end = view.end,\n        length = end - start,\n        index = isRight ? end : start - 1,\n        iteratees = this.__iteratees__,\n        iterLength = iteratees.length,\n        resIndex = 0,\n        takeCount = nativeMin(length, this.__takeCount__);\n\n      if (!isArr || (!isRight && arrLength == length && takeCount == length)) {\n        return baseWrapperValue(array, this.__actions__);\n      }\n      var result = [];\n\n      outer: while (length-- && resIndex < takeCount) {\n        index += dir;\n\n        var iterIndex = -1,\n          value = array[index];\n\n        while (++iterIndex < iterLength) {\n          var data = iteratees[iterIndex],\n            iteratee = data.iteratee,\n            type = data.type,\n            computed = iteratee(value);\n\n          if (type == LAZY_MAP_FLAG) {\n            value = computed;\n          } else if (!computed) {\n            if (type == LAZY_FILTER_FLAG) {\n              continue outer;\n            } else {\n              break outer;\n            }\n          }\n        }\n        result[resIndex++] = value;\n      }\n      return result;\n    }\n\n    // Ensure `LazyWrapper` is an instance of `baseLodash`.\n    LazyWrapper.prototype = baseCreate(baseLodash.prototype);\n    LazyWrapper.prototype.constructor = LazyWrapper;\n\n    /* ------------------------------------------------------------------------*/\n\n    /**\n         * Creates a hash object.\n         *\n         * @private\n         * @constructor\n         * @param {Array} [entries] The key-value pairs to cache.\n         */\n    function Hash(entries) {\n      var index = -1,\n        length = entries == null ? 0 : entries.length;\n\n      this.clear();\n      while (++index < length) {\n        var entry = entries[index];\n        this.set(entry[0], entry[1]);\n      }\n    }\n\n    /**\n         * Removes all key-value entries from the hash.\n         *\n         * @private\n         * @name clear\n         * @memberOf Hash\n         */\n    function hashClear() {\n      this.__data__ = nativeCreate ? nativeCreate(null) : {};\n      this.size = 0;\n    }\n\n    /**\n         * Removes `key` and its value from the hash.\n         *\n         * @private\n         * @name delete\n         * @memberOf Hash\n         * @param {Object} hash The hash to modify.\n         * @param {string} key The key of the value to remove.\n         * @returns {boolean} Returns `true` if the entry was removed, else `false`.\n         */\n    function hashDelete(key) {\n      var result = this.has(key) && delete this.__data__[key];\n      this.size -= result ? 1 : 0;\n      return result;\n    }\n\n    /**\n         * Gets the hash value for `key`.\n         *\n         * @private\n         * @name get\n         * @memberOf Hash\n         * @param {string} key The key of the value to get.\n         * @returns {*} Returns the entry value.\n         */\n    function hashGet(key) {\n      var data = this.__data__;\n      if (nativeCreate) {\n        var result = data[key];\n        return result === HASH_UNDEFINED ? undefined : result;\n      }\n      return hasOwnProperty.call(data, key) ? data[key] : undefined;\n    }\n\n    /**\n         * Checks if a hash value for `key` exists.\n         *\n         * @private\n         * @name has\n         * @memberOf Hash\n         * @param {string} key The key of the entry to check.\n         * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.\n         */\n    function hashHas(key) {\n      var data = this.__data__;\n      return nativeCreate\n        ? data[key] !== undefined\n        : hasOwnProperty.call(data, key);\n    }\n\n    /**\n         * Sets the hash `key` to `value`.\n         *\n         * @private\n         * @name set\n         * @memberOf Hash\n         * @param {string} key The key of the value to set.\n         * @param {*} value The value to set.\n         * @returns {Object} Returns the hash instance.\n         */\n    function hashSet(key, value) {\n      var data = this.__data__;\n      this.size += this.has(key) ? 0 : 1;\n      data[key] = nativeCreate && value === undefined ? HASH_UNDEFINED : value;\n      return this;\n    }\n\n    // Add methods to `Hash`.\n    Hash.prototype.clear = hashClear;\n    Hash.prototype['delete'] = hashDelete;\n    Hash.prototype.get = hashGet;\n    Hash.prototype.has = hashHas;\n    Hash.prototype.set = hashSet;\n\n    /* ------------------------------------------------------------------------*/\n\n    /**\n         * Creates an list cache object.\n         *\n         * @private\n         * @constructor\n         * @param {Array} [entries] The key-value pairs to cache.\n         */\n    function ListCache(entries) {\n      var index = -1,\n        length = entries == null ? 0 : entries.length;\n\n      this.clear();\n      while (++index < length) {\n        var entry = entries[index];\n        this.set(entry[0], entry[1]);\n      }\n    }\n\n    /**\n         * Removes all key-value entries from the list cache.\n         *\n         * @private\n         * @name clear\n         * @memberOf ListCache\n         */\n    function listCacheClear() {\n      this.__data__ = [];\n      this.size = 0;\n    }\n\n    /**\n         * Removes `key` and its value from the list cache.\n         *\n         * @private\n         * @name delete\n         * @memberOf ListCache\n         * @param {string} key The key of the value to remove.\n         * @returns {boolean} Returns `true` if the entry was removed, else `false`.\n         */\n    function listCacheDelete(key) {\n      var data = this.__data__,\n        index = assocIndexOf(data, key);\n\n      if (index < 0) {\n        return false;\n      }\n      var lastIndex = data.length - 1;\n      if (index == lastIndex) {\n        data.pop();\n      } else {\n        splice.call(data, index, 1);\n      }\n      --this.size;\n      return true;\n    }\n\n    /**\n         * Gets the list cache value for `key`.\n         *\n         * @private\n         * @name get\n         * @memberOf ListCache\n         * @param {string} key The key of the value to get.\n         * @returns {*} Returns the entry value.\n         */\n    function listCacheGet(key) {\n      var data = this.__data__,\n        index = assocIndexOf(data, key);\n\n      return index < 0 ? undefined : data[index][1];\n    }\n\n    /**\n         * Checks if a list cache value for `key` exists.\n         *\n         * @private\n         * @name has\n         * @memberOf ListCache\n         * @param {string} key The key of the entry to check.\n         * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.\n         */\n    function listCacheHas(key) {\n      return assocIndexOf(this.__data__, key) > -1;\n    }\n\n    /**\n         * Sets the list cache `key` to `value`.\n         *\n         * @private\n         * @name set\n         * @memberOf ListCache\n         * @param {string} key The key of the value to set.\n         * @param {*} value The value to set.\n         * @returns {Object} Returns the list cache instance.\n         */\n    function listCacheSet(key, value) {\n      var data = this.__data__,\n        index = assocIndexOf(data, key);\n\n      if (index < 0) {\n        ++this.size;\n        data.push([key, value]);\n      } else {\n        data[index][1] = value;\n      }\n      return this;\n    }\n\n    // Add methods to `ListCache`.\n    ListCache.prototype.clear = listCacheClear;\n    ListCache.prototype['delete'] = listCacheDelete;\n    ListCache.prototype.get = listCacheGet;\n    ListCache.prototype.has = listCacheHas;\n    ListCache.prototype.set = listCacheSet;\n\n    /* ------------------------------------------------------------------------*/\n\n    /**\n         * Creates a map cache object to store key-value pairs.\n         *\n         * @private\n         * @constructor\n         * @param {Array} [entries] The key-value pairs to cache.\n         */\n    function MapCache(entries) {\n      var index = -1,\n        length = entries == null ? 0 : entries.length;\n\n      this.clear();\n      while (++index < length) {\n        var entry = entries[index];\n        this.set(entry[0], entry[1]);\n      }\n    }\n\n    /**\n         * Removes all key-value entries from the map.\n         *\n         * @private\n         * @name clear\n         * @memberOf MapCache\n         */\n    function mapCacheClear() {\n      this.size = 0;\n      this.__data__ = {\n        hash: new Hash(),\n        map: new (Map || ListCache)(),\n        string: new Hash()\n      };\n    }\n\n    /**\n         * Removes `key` and its value from the map.\n         *\n         * @private\n         * @name delete\n         * @memberOf MapCache\n         * @param {string} key The key of the value to remove.\n         * @returns {boolean} Returns `true` if the entry was removed, else `false`.\n         */\n    function mapCacheDelete(key) {\n      var result = getMapData(this, key)['delete'](key);\n      this.size -= result ? 1 : 0;\n      return result;\n    }\n\n    /**\n         * Gets the map value for `key`.\n         *\n         * @private\n         * @name get\n         * @memberOf MapCache\n         * @param {string} key The key of the value to get.\n         * @returns {*} Returns the entry value.\n         */\n    function mapCacheGet(key) {\n      return getMapData(this, key).get(key);\n    }\n\n    /**\n         * Checks if a map value for `key` exists.\n         *\n         * @private\n         * @name has\n         * @memberOf MapCache\n         * @param {string} key The key of the entry to check.\n         * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.\n         */\n    function mapCacheHas(key) {\n      return getMapData(this, key).has(key);\n    }\n\n    /**\n         * Sets the map `key` to `value`.\n         *\n         * @private\n         * @name set\n         * @memberOf MapCache\n         * @param {string} key The key of the value to set.\n         * @param {*} value The value to set.\n         * @returns {Object} Returns the map cache instance.\n         */\n    function mapCacheSet(key, value) {\n      var data = getMapData(this, key),\n        size = data.size;\n\n      data.set(key, value);\n      this.size += data.size == size ? 0 : 1;\n      return this;\n    }\n\n    // Add methods to `MapCache`.\n    MapCache.prototype.clear = mapCacheClear;\n    MapCache.prototype['delete'] = mapCacheDelete;\n    MapCache.prototype.get = mapCacheGet;\n    MapCache.prototype.has = mapCacheHas;\n    MapCache.prototype.set = mapCacheSet;\n\n    /* ------------------------------------------------------------------------*/\n\n    /**\n         *\n         * Creates an array cache object to store unique values.\n         *\n         * @private\n         * @constructor\n         * @param {Array} [values] The values to cache.\n         */\n    function SetCache(values) {\n      var index = -1,\n        length = values == null ? 0 : values.length;\n\n      this.__data__ = new MapCache();\n      while (++index < length) {\n        this.add(values[index]);\n      }\n    }\n\n    /**\n         * Adds `value` to the array cache.\n         *\n         * @private\n         * @name add\n         * @memberOf SetCache\n         * @alias push\n         * @param {*} value The value to cache.\n         * @returns {Object} Returns the cache instance.\n         */\n    function setCacheAdd(value) {\n      this.__data__.set(value, HASH_UNDEFINED);\n      return this;\n    }\n\n    /**\n         * Checks if `value` is in the array cache.\n         *\n         * @private\n         * @name has\n         * @memberOf SetCache\n         * @param {*} value The value to search for.\n         * @returns {number} Returns `true` if `value` is found, else `false`.\n         */\n    function setCacheHas(value) {\n      return this.__data__.has(value);\n    }\n\n    // Add methods to `SetCache`.\n    SetCache.prototype.add = SetCache.prototype.push = setCacheAdd;\n    SetCache.prototype.has = setCacheHas;\n\n    /* ------------------------------------------------------------------------*/\n\n    /**\n         * Creates a stack cache object to store key-value pairs.\n         *\n         * @private\n         * @constructor\n         * @param {Array} [entries] The key-value pairs to cache.\n         */\n    function Stack(entries) {\n      var data = (this.__data__ = new ListCache(entries));\n      this.size = data.size;\n    }\n\n    /**\n         * Removes all key-value entries from the stack.\n         *\n         * @private\n         * @name clear\n         * @memberOf Stack\n         */\n    function stackClear() {\n      this.__data__ = new ListCache();\n      this.size = 0;\n    }\n\n    /**\n         * Removes `key` and its value from the stack.\n         *\n         * @private\n         * @name delete\n         * @memberOf Stack\n         * @param {string} key The key of the value to remove.\n         * @returns {boolean} Returns `true` if the entry was removed, else `false`.\n         */\n    function stackDelete(key) {\n      var data = this.__data__,\n        result = data['delete'](key);\n\n      this.size = data.size;\n      return result;\n    }\n\n    /**\n         * Gets the stack value for `key`.\n         *\n         * @private\n         * @name get\n         * @memberOf Stack\n         * @param {string} key The key of the value to get.\n         * @returns {*} Returns the entry value.\n         */\n    function stackGet(key) {\n      return this.__data__.get(key);\n    }\n\n    /**\n         * Checks if a stack value for `key` exists.\n         *\n         * @private\n         * @name has\n         * @memberOf Stack\n         * @param {string} key The key of the entry to check.\n         * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.\n         */\n    function stackHas(key) {\n      return this.__data__.has(key);\n    }\n\n    /**\n         * Sets the stack `key` to `value`.\n         *\n         * @private\n         * @name set\n         * @memberOf Stack\n         * @param {string} key The key of the value to set.\n         * @param {*} value The value to set.\n         * @returns {Object} Returns the stack cache instance.\n         */\n    function stackSet(key, value) {\n      var data = this.__data__;\n      if (data instanceof ListCache) {\n        var pairs = data.__data__;\n        if (!Map || pairs.length < LARGE_ARRAY_SIZE - 1) {\n          pairs.push([key, value]);\n          this.size = ++data.size;\n          return this;\n        }\n        data = this.__data__ = new MapCache(pairs);\n      }\n      data.set(key, value);\n      this.size = data.size;\n      return this;\n    }\n\n    // Add methods to `Stack`.\n    Stack.prototype.clear = stackClear;\n    Stack.prototype['delete'] = stackDelete;\n    Stack.prototype.get = stackGet;\n    Stack.prototype.has = stackHas;\n    Stack.prototype.set = stackSet;\n\n    /* ------------------------------------------------------------------------*/\n\n    /**\n         * Creates an array of the enumerable property names of the array-like `value`.\n         *\n         * @private\n         * @param {*} value The value to query.\n         * @param {boolean} inherited Specify returning inherited property names.\n         * @returns {Array} Returns the array of property names.\n         */\n    function arrayLikeKeys(value, inherited) {\n      var isArr = isArray(value),\n        isArg = !isArr && isArguments(value),\n        isBuff = !isArr && !isArg && isBuffer(value),\n        isType = !isArr && !isArg && !isBuff && isTypedArray(value),\n        skipIndexes = isArr || isArg || isBuff || isType,\n        result = skipIndexes ? baseTimes(value.length, String) : [],\n        length = result.length;\n\n      for (var key in value) {\n        if (\n          (inherited || hasOwnProperty.call(value, key)) &&\n               !(\n            skipIndexes &&\n                  // Safari 9 has enumerable `arguments.length` in strict mode.\n                  (key == 'length' ||\n                     // Node.js 0.10 has enumerable non-index properties on buffers.\n                     (isBuff && (key == 'offset' || key == 'parent')) ||\n                     // PhantomJS 2 has enumerable non-index properties on typed arrays.\n                     (isType &&\n                        (key == 'buffer' ||\n                           key == 'byteLength' ||\n                           key == 'byteOffset')) ||\n                     // Skip index properties.\n                     isIndex(key, length))\n          )\n        ) {\n          result.push(key);\n        }\n      }\n      return result;\n    }\n\n    /**\n         * A specialized version of `_.sample` for arrays.\n         *\n         * @private\n         * @param {Array} array The array to sample.\n         * @returns {*} Returns the random element.\n         */\n    function arraySample(array) {\n      var length = array.length;\n      return length ? array[baseRandom(0, length - 1)] : undefined;\n    }\n\n    /**\n         * A specialized version of `_.sampleSize` for arrays.\n         *\n         * @private\n         * @param {Array} array The array to sample.\n         * @param {number} n The number of elements to sample.\n         * @returns {Array} Returns the random elements.\n         */\n    function arraySampleSize(array, n) {\n      return shuffleSelf(copyArray(array), baseClamp(n, 0, array.length));\n    }\n\n    /**\n         * A specialized version of `_.shuffle` for arrays.\n         *\n         * @private\n         * @param {Array} array The array to shuffle.\n         * @returns {Array} Returns the new shuffled array.\n         */\n    function arrayShuffle(array) {\n      return shuffleSelf(copyArray(array));\n    }\n\n    /**\n         * This function is like `assignValue` except that it doesn't assign\n         * `undefined` values.\n         *\n         * @private\n         * @param {Object} object The object to modify.\n         * @param {string} key The key of the property to assign.\n         * @param {*} value The value to assign.\n         */\n    function assignMergeValue(object, key, value) {\n      if (\n        (value !== undefined && !eq(object[key], value)) ||\n            (value === undefined && !(key in object))\n      ) {\n        baseAssignValue(object, key, value);\n      }\n    }\n\n    /**\n         * Assigns `value` to `key` of `object` if the existing value is not equivalent\n         * using [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)\n         * for equality comparisons.\n         *\n         * @private\n         * @param {Object} object The object to modify.\n         * @param {string} key The key of the property to assign.\n         * @param {*} value The value to assign.\n         */\n    function assignValue(object, key, value) {\n      var objValue = object[key];\n      if (\n        !(hasOwnProperty.call(object, key) && eq(objValue, value)) ||\n            (value === undefined && !(key in object))\n      ) {\n        baseAssignValue(object, key, value);\n      }\n    }\n\n    /**\n         * Gets the index at which the `key` is found in `array` of key-value pairs.\n         *\n         * @private\n         * @param {Array} array The array to inspect.\n         * @param {*} key The key to search for.\n         * @returns {number} Returns the index of the matched value, else `-1`.\n         */\n    function assocIndexOf(array, key) {\n      var length = array.length;\n      while (length--) {\n        if (eq(array[length][0], key)) {\n          return length;\n        }\n      }\n      return -1;\n    }\n\n    /**\n         * Aggregates elements of `collection` on `accumulator` with keys transformed\n         * by `iteratee` and values set by `setter`.\n         *\n         * @private\n         * @param {Array|Object} collection The collection to iterate over.\n         * @param {Function} setter The function to set `accumulator` values.\n         * @param {Function} iteratee The iteratee to transform keys.\n         * @param {Object} accumulator The initial aggregated object.\n         * @returns {Function} Returns `accumulator`.\n         */\n    function baseAggregator(collection, setter, iteratee, accumulator) {\n      baseEach(collection, function(value, key, collection) {\n        setter(accumulator, value, iteratee(value), collection);\n      });\n      return accumulator;\n    }\n\n    /**\n         * The base implementation of `_.assign` without support for multiple sources\n         * or `customizer` functions.\n         *\n         * @private\n         * @param {Object} object The destination object.\n         * @param {Object} source The source object.\n         * @returns {Object} Returns `object`.\n         */\n    function baseAssign(object, source) {\n      return object && copyObject(source, keys(source), object);\n    }\n\n    /**\n         * The base implementation of `_.assignIn` without support for multiple sources\n         * or `customizer` functions.\n         *\n         * @private\n         * @param {Object} object The destination object.\n         * @param {Object} source The source object.\n         * @returns {Object} Returns `object`.\n         */\n    function baseAssignIn(object, source) {\n      return object && copyObject(source, keysIn(source), object);\n    }\n\n    /**\n         * The base implementation of `assignValue` and `assignMergeValue` without\n         * value checks.\n         *\n         * @private\n         * @param {Object} object The object to modify.\n         * @param {string} key The key of the property to assign.\n         * @param {*} value The value to assign.\n         */\n    function baseAssignValue(object, key, value) {\n      if (key == '__proto__' && defineProperty) {\n        defineProperty(object, key, {\n          configurable: true,\n          enumerable: true,\n          value: value,\n          writable: true\n        });\n      } else {\n        object[key] = value;\n      }\n    }\n\n    /**\n         * The base implementation of `_.at` without support for individual paths.\n         *\n         * @private\n         * @param {Object} object The object to iterate over.\n         * @param {string[]} paths The property paths to pick.\n         * @returns {Array} Returns the picked elements.\n         */\n    function baseAt(object, paths) {\n      var index = -1,\n        length = paths.length,\n        result = Array(length),\n        skip = object == null;\n\n      while (++index < length) {\n        result[index] = skip ? undefined : get(object, paths[index]);\n      }\n      return result;\n    }\n\n    /**\n         * The base implementation of `_.clamp` which doesn't coerce arguments.\n         *\n         * @private\n         * @param {number} number The number to clamp.\n         * @param {number} [lower] The lower bound.\n         * @param {number} upper The upper bound.\n         * @returns {number} Returns the clamped number.\n         */\n    function baseClamp(number, lower, upper) {\n      if (number === number) {\n        if (upper !== undefined) {\n          number = number <= upper ? number : upper;\n        }\n        if (lower !== undefined) {\n          number = number >= lower ? number : lower;\n        }\n      }\n      return number;\n    }\n\n    /**\n         * The base implementation of `_.clone` and `_.cloneDeep` which tracks\n         * traversed objects.\n         *\n         * @private\n         * @param {*} value The value to clone.\n         * @param {boolean} bitmask The bitmask flags.\n         *  1 - Deep clone\n         *  2 - Flatten inherited properties\n         *  4 - Clone symbols\n         * @param {Function} [customizer] The function to customize cloning.\n         * @param {string} [key] The key of `value`.\n         * @param {Object} [object] The parent object of `value`.\n         * @param {Object} [stack] Tracks traversed objects and their clone counterparts.\n         * @returns {*} Returns the cloned value.\n         */\n    function baseClone(value, bitmask, customizer, key, object, stack) {\n      var result,\n        isDeep = bitmask & CLONE_DEEP_FLAG,\n        isFlat = bitmask & CLONE_FLAT_FLAG,\n        isFull = bitmask & CLONE_SYMBOLS_FLAG;\n\n      if (customizer) {\n        result = object\n          ? customizer(value, key, object, stack)\n          : customizer(value);\n      }\n      if (result !== undefined) {\n        return result;\n      }\n      if (!isObject(value)) {\n        return value;\n      }\n      var isArr = isArray(value);\n      if (isArr) {\n        result = initCloneArray(value);\n        if (!isDeep) {\n          return copyArray(value, result);\n        }\n      } else {\n        var tag = getTag(value),\n          isFunc = tag == funcTag || tag == genTag;\n\n        if (isBuffer(value)) {\n          return cloneBuffer(value, isDeep);\n        }\n        if (tag == objectTag || tag == argsTag || (isFunc && !object)) {\n          result = isFlat || isFunc ? {} : initCloneObject(value);\n          if (!isDeep) {\n            return isFlat\n              ? copySymbolsIn(value, baseAssignIn(result, value))\n              : copySymbols(value, baseAssign(result, value));\n          }\n        } else {\n          if (!cloneableTags[tag]) {\n            return object ? value : {};\n          }\n          result = initCloneByTag(value, tag, isDeep);\n        }\n      }\n      // Check for circular references and return its corresponding clone.\n      stack || (stack = new Stack());\n      var stacked = stack.get(value);\n      if (stacked) {\n        return stacked;\n      }\n      stack.set(value, result);\n\n      if (isSet(value)) {\n        value.forEach(function(subValue) {\n          result.add(\n            baseClone(subValue, bitmask, customizer, subValue, value, stack)\n          );\n        });\n\n        return result;\n      }\n\n      if (isMap(value)) {\n        value.forEach(function(subValue, key) {\n          result.set(\n            key,\n            baseClone(subValue, bitmask, customizer, key, value, stack)\n          );\n        });\n\n        return result;\n      }\n\n      var keysFunc = isFull\n        ? isFlat\n          ? getAllKeysIn\n          : getAllKeys\n        : isFlat\n          ? keysIn\n          : keys;\n\n      var props = isArr ? undefined : keysFunc(value);\n      arrayEach(props || value, function(subValue, key) {\n        if (props) {\n          key = subValue;\n          subValue = value[key];\n        }\n        // Recursively populate clone (susceptible to call stack limits).\n        assignValue(\n          result,\n          key,\n          baseClone(subValue, bitmask, customizer, key, value, stack)\n        );\n      });\n      return result;\n    }\n\n    /**\n         * The base implementation of `_.conforms` which doesn't clone `source`.\n         *\n         * @private\n         * @param {Object} source The object of property predicates to conform to.\n         * @returns {Function} Returns the new spec function.\n         */\n    function baseConforms(source) {\n      var props = keys(source);\n      return function(object) {\n        return baseConformsTo(object, source, props);\n      };\n    }\n\n    /**\n         * The base implementation of `_.conformsTo` which accepts `props` to check.\n         *\n         * @private\n         * @param {Object} object The object to inspect.\n         * @param {Object} source The object of property predicates to conform to.\n         * @returns {boolean} Returns `true` if `object` conforms, else `false`.\n         */\n    function baseConformsTo(object, source, props) {\n      var length = props.length;\n      if (object == null) {\n        return !length;\n      }\n      object = Object(object);\n      while (length--) {\n        var key = props[length],\n          predicate = source[key],\n          value = object[key];\n\n        if ((value === undefined && !(key in object)) || !predicate(value)) {\n          return false;\n        }\n      }\n      return true;\n    }\n\n    /**\n         * The base implementation of `_.delay` and `_.defer` which accepts `args`\n         * to provide to `func`.\n         *\n         * @private\n         * @param {Function} func The function to delay.\n         * @param {number} wait The number of milliseconds to delay invocation.\n         * @param {Array} args The arguments to provide to `func`.\n         * @returns {number|Object} Returns the timer id or timeout object.\n         */\n    function baseDelay(func, wait, args) {\n      if (typeof func !== 'function') {\n        throw new TypeError(FUNC_ERROR_TEXT);\n      }\n      return setTimeout(function() {\n        func.apply(undefined, args);\n      }, wait);\n    }\n\n    /**\n         * The base implementation of methods like `_.difference` without support\n         * for excluding multiple arrays or iteratee shorthands.\n         *\n         * @private\n         * @param {Array} array The array to inspect.\n         * @param {Array} values The values to exclude.\n         * @param {Function} [iteratee] The iteratee invoked per element.\n         * @param {Function} [comparator] The comparator invoked per element.\n         * @returns {Array} Returns the new array of filtered values.\n         */\n    function baseDifference(array, values, iteratee, comparator) {\n      var index = -1,\n        includes = arrayIncludes,\n        isCommon = true,\n        length = array.length,\n        result = [],\n        valuesLength = values.length;\n\n      if (!length) {\n        return result;\n      }\n      if (iteratee) {\n        values = arrayMap(values, baseUnary(iteratee));\n      }\n      if (comparator) {\n        includes = arrayIncludesWith;\n        isCommon = false;\n      } else if (values.length >= LARGE_ARRAY_SIZE) {\n        includes = cacheHas;\n        isCommon = false;\n        values = new SetCache(values);\n      }\n      outer: while (++index < length) {\n        var value = array[index],\n          computed = iteratee == null ? value : iteratee(value);\n\n        value = comparator || value !== 0 ? value : 0;\n        if (isCommon && computed === computed) {\n          var valuesIndex = valuesLength;\n          while (valuesIndex--) {\n            if (values[valuesIndex] === computed) {\n              continue outer;\n            }\n          }\n          result.push(value);\n        } else if (!includes(values, computed, comparator)) {\n          result.push(value);\n        }\n      }\n      return result;\n    }\n\n    /**\n         * The base implementation of `_.forEach` without support for iteratee shorthands.\n         *\n         * @private\n         * @param {Array|Object} collection The collection to iterate over.\n         * @param {Function} iteratee The function invoked per iteration.\n         * @returns {Array|Object} Returns `collection`.\n         */\n    var baseEach = createBaseEach(baseForOwn);\n\n    /**\n         * The base implementation of `_.forEachRight` without support for iteratee shorthands.\n         *\n         * @private\n         * @param {Array|Object} collection The collection to iterate over.\n         * @param {Function} iteratee The function invoked per iteration.\n         * @returns {Array|Object} Returns `collection`.\n         */\n    var baseEachRight = createBaseEach(baseForOwnRight, true);\n\n    /**\n         * The base implementation of `_.every` without support for iteratee shorthands.\n         *\n         * @private\n         * @param {Array|Object} collection The collection to iterate over.\n         * @param {Function} predicate The function invoked per iteration.\n         * @returns {boolean} Returns `true` if all elements pass the predicate check,\n         *  else `false`\n         */\n    function baseEvery(collection, predicate) {\n      var result = true;\n      baseEach(collection, function(value, index, collection) {\n        result = !!predicate(value, index, collection);\n        return result;\n      });\n      return result;\n    }\n\n    /**\n         * The base implementation of methods like `_.max` and `_.min` which accepts a\n         * `comparator` to determine the extremum value.\n         *\n         * @private\n         * @param {Array} array The array to iterate over.\n         * @param {Function} iteratee The iteratee invoked per iteration.\n         * @param {Function} comparator The comparator used to compare values.\n         * @returns {*} Returns the extremum value.\n         */\n    function baseExtremum(array, iteratee, comparator) {\n      var index = -1,\n        length = array.length;\n\n      while (++index < length) {\n        var value = array[index],\n          current = iteratee(value);\n\n        if (\n          current != null &&\n               (computed === undefined\n                 ? current === current && !isSymbol(current)\n                 : comparator(current, computed))\n        ) {\n          var computed = current,\n            result = value;\n        }\n      }\n      return result;\n    }\n\n    /**\n         * The base implementation of `_.fill` without an iteratee call guard.\n         *\n         * @private\n         * @param {Array} array The array to fill.\n         * @param {*} value The value to fill `array` with.\n         * @param {number} [start=0] The start position.\n         * @param {number} [end=array.length] The end position.\n         * @returns {Array} Returns `array`.\n         */\n    function baseFill(array, value, start, end) {\n      var length = array.length;\n\n      start = toInteger(start);\n      if (start < 0) {\n        start = -start > length ? 0 : length + start;\n      }\n      end = end === undefined || end > length ? length : toInteger(end);\n      if (end < 0) {\n        end += length;\n      }\n      end = start > end ? 0 : toLength(end);\n      while (start < end) {\n        array[start++] = value;\n      }\n      return array;\n    }\n\n    /**\n         * The base implementation of `_.filter` without support for iteratee shorthands.\n         *\n         * @private\n         * @param {Array|Object} collection The collection to iterate over.\n         * @param {Function} predicate The function invoked per iteration.\n         * @returns {Array} Returns the new filtered array.\n         */\n    function baseFilter(collection, predicate) {\n      var result = [];\n      baseEach(collection, function(value, index, collection) {\n        if (predicate(value, index, collection)) {\n          result.push(value);\n        }\n      });\n      return result;\n    }\n\n    /**\n         * The base implementation of `_.flatten` with support for restricting flattening.\n         *\n         * @private\n         * @param {Array} array The array to flatten.\n         * @param {number} depth The maximum recursion depth.\n         * @param {boolean} [predicate=isFlattenable] The function invoked per iteration.\n         * @param {boolean} [isStrict] Restrict to values that pass `predicate` checks.\n         * @param {Array} [result=[]] The initial result value.\n         * @returns {Array} Returns the new flattened array.\n         */\n    function baseFlatten(array, depth, predicate, isStrict, result) {\n      var index = -1,\n        length = array.length;\n\n      predicate || (predicate = isFlattenable);\n      result || (result = []);\n\n      while (++index < length) {\n        var value = array[index];\n        if (depth > 0 && predicate(value)) {\n          if (depth > 1) {\n            // Recursively flatten arrays (susceptible to call stack limits).\n            baseFlatten(value, depth - 1, predicate, isStrict, result);\n          } else {\n            arrayPush(result, value);\n          }\n        } else if (!isStrict) {\n          result[result.length] = value;\n        }\n      }\n      return result;\n    }\n\n    /**\n         * The base implementation of `baseForOwn` which iterates over `object`\n         * properties returned by `keysFunc` and invokes `iteratee` for each property.\n         * Iteratee functions may exit iteration early by explicitly returning `false`.\n         *\n         * @private\n         * @param {Object} object The object to iterate over.\n         * @param {Function} iteratee The function invoked per iteration.\n         * @param {Function} keysFunc The function to get the keys of `object`.\n         * @returns {Object} Returns `object`.\n         */\n    var baseFor = createBaseFor();\n\n    /**\n         * This function is like `baseFor` except that it iterates over properties\n         * in the opposite order.\n         *\n         * @private\n         * @param {Object} object The object to iterate over.\n         * @param {Function} iteratee The function invoked per iteration.\n         * @param {Function} keysFunc The function to get the keys of `object`.\n         * @returns {Object} Returns `object`.\n         */\n    var baseForRight = createBaseFor(true);\n\n    /**\n         * The base implementation of `_.forOwn` without support for iteratee shorthands.\n         *\n         * @private\n         * @param {Object} object The object to iterate over.\n         * @param {Function} iteratee The function invoked per iteration.\n         * @returns {Object} Returns `object`.\n         */\n    function baseForOwn(object, iteratee) {\n      return object && baseFor(object, iteratee, keys);\n    }\n\n    /**\n         * The base implementation of `_.forOwnRight` without support for iteratee shorthands.\n         *\n         * @private\n         * @param {Object} object The object to iterate over.\n         * @param {Function} iteratee The function invoked per iteration.\n         * @returns {Object} Returns `object`.\n         */\n    function baseForOwnRight(object, iteratee) {\n      return object && baseForRight(object, iteratee, keys);\n    }\n\n    /**\n         * The base implementation of `_.functions` which creates an array of\n         * `object` function property names filtered from `props`.\n         *\n         * @private\n         * @param {Object} object The object to inspect.\n         * @param {Array} props The property names to filter.\n         * @returns {Array} Returns the function names.\n         */\n    function baseFunctions(object, props) {\n      return arrayFilter(props, function(key) {\n        return isFunction(object[key]);\n      });\n    }\n\n    /**\n         * The base implementation of `_.get` without support for default values.\n         *\n         * @private\n         * @param {Object} object The object to query.\n         * @param {Array|string} path The path of the property to get.\n         * @returns {*} Returns the resolved value.\n         */\n    function baseGet(object, path) {\n      path = castPath(path, object);\n\n      var index = 0,\n        length = path.length;\n\n      while (object != null && index < length) {\n        object = object[toKey(path[index++])];\n      }\n      return index && index == length ? object : undefined;\n    }\n\n    /**\n         * The base implementation of `getAllKeys` and `getAllKeysIn` which uses\n         * `keysFunc` and `symbolsFunc` to get the enumerable property names and\n         * symbols of `object`.\n         *\n         * @private\n         * @param {Object} object The object to query.\n         * @param {Function} keysFunc The function to get the keys of `object`.\n         * @param {Function} symbolsFunc The function to get the symbols of `object`.\n         * @returns {Array} Returns the array of property names and symbols.\n         */\n    function baseGetAllKeys(object, keysFunc, symbolsFunc) {\n      var result = keysFunc(object);\n      return isArray(object) ? result : arrayPush(result, symbolsFunc(object));\n    }\n\n    /**\n         * The base implementation of `getTag` without fallbacks for buggy environments.\n         *\n         * @private\n         * @param {*} value The value to query.\n         * @returns {string} Returns the `toStringTag`.\n         */\n    function baseGetTag(value) {\n      if (value == null) {\n        return value === undefined ? undefinedTag : nullTag;\n      }\n      return symToStringTag && symToStringTag in Object(value)\n        ? getRawTag(value)\n        : objectToString(value);\n    }\n\n    /**\n         * The base implementation of `_.gt` which doesn't coerce arguments.\n         *\n         * @private\n         * @param {*} value The value to compare.\n         * @param {*} other The other value to compare.\n         * @returns {boolean} Returns `true` if `value` is greater than `other`,\n         *  else `false`.\n         */\n    function baseGt(value, other) {\n      return value > other;\n    }\n\n    /**\n         * The base implementation of `_.has` without support for deep paths.\n         *\n         * @private\n         * @param {Object} [object] The object to query.\n         * @param {Array|string} key The key to check.\n         * @returns {boolean} Returns `true` if `key` exists, else `false`.\n         */\n    function baseHas(object, key) {\n      return object != null && hasOwnProperty.call(object, key);\n    }\n\n    /**\n         * The base implementation of `_.hasIn` without support for deep paths.\n         *\n         * @private\n         * @param {Object} [object] The object to query.\n         * @param {Array|string} key The key to check.\n         * @returns {boolean} Returns `true` if `key` exists, else `false`.\n         */\n    function baseHasIn(object, key) {\n      return object != null && key in Object(object);\n    }\n\n    /**\n         * The base implementation of `_.inRange` which doesn't coerce arguments.\n         *\n         * @private\n         * @param {number} number The number to check.\n         * @param {number} start The start of the range.\n         * @param {number} end The end of the range.\n         * @returns {boolean} Returns `true` if `number` is in the range, else `false`.\n         */\n    function baseInRange(number, start, end) {\n      return number >= nativeMin(start, end) && number < nativeMax(start, end);\n    }\n\n    /**\n         * The base implementation of methods like `_.intersection`, without support\n         * for iteratee shorthands, that accepts an array of arrays to inspect.\n         *\n         * @private\n         * @param {Array} arrays The arrays to inspect.\n         * @param {Function} [iteratee] The iteratee invoked per element.\n         * @param {Function} [comparator] The comparator invoked per element.\n         * @returns {Array} Returns the new array of shared values.\n         */\n    function baseIntersection(arrays, iteratee, comparator) {\n      var includes = comparator ? arrayIncludesWith : arrayIncludes,\n        length = arrays[0].length,\n        othLength = arrays.length,\n        othIndex = othLength,\n        caches = Array(othLength),\n        maxLength = Infinity,\n        result = [];\n\n      while (othIndex--) {\n        var array = arrays[othIndex];\n        if (othIndex && iteratee) {\n          array = arrayMap(array, baseUnary(iteratee));\n        }\n        maxLength = nativeMin(array.length, maxLength);\n        caches[othIndex] =\n               !comparator && (iteratee || (length >= 120 && array.length >= 120))\n                 ? new SetCache(othIndex && array)\n                 : undefined;\n      }\n      array = arrays[0];\n\n      var index = -1,\n        seen = caches[0];\n\n      outer: while (++index < length && result.length < maxLength) {\n        var value = array[index],\n          computed = iteratee ? iteratee(value) : value;\n\n        value = comparator || value !== 0 ? value : 0;\n        if (\n          !(seen\n            ? cacheHas(seen, computed)\n            : includes(result, computed, comparator))\n        ) {\n          othIndex = othLength;\n          while (--othIndex) {\n            var cache = caches[othIndex];\n            if (\n              !(cache\n                ? cacheHas(cache, computed)\n                : includes(arrays[othIndex], computed, comparator))\n            ) {\n              continue outer;\n            }\n          }\n          if (seen) {\n            seen.push(computed);\n          }\n          result.push(value);\n        }\n      }\n      return result;\n    }\n\n    /**\n         * The base implementation of `_.invert` and `_.invertBy` which inverts\n         * `object` with values transformed by `iteratee` and set by `setter`.\n         *\n         * @private\n         * @param {Object} object The object to iterate over.\n         * @param {Function} setter The function to set `accumulator` values.\n         * @param {Function} iteratee The iteratee to transform values.\n         * @param {Object} accumulator The initial inverted object.\n         * @returns {Function} Returns `accumulator`.\n         */\n    function baseInverter(object, setter, iteratee, accumulator) {\n      baseForOwn(object, function(value, key, object) {\n        setter(accumulator, iteratee(value), key, object);\n      });\n      return accumulator;\n    }\n\n    /**\n         * The base implementation of `_.invoke` without support for individual\n         * method arguments.\n         *\n         * @private\n         * @param {Object} object The object to query.\n         * @param {Array|string} path The path of the method to invoke.\n         * @param {Array} args The arguments to invoke the method with.\n         * @returns {*} Returns the result of the invoked method.\n         */\n    function baseInvoke(object, path, args) {\n      path = castPath(path, object);\n      object = parent(object, path);\n      var func = object == null ? object : object[toKey(last(path))];\n      return func == null ? undefined : apply(func, object, args);\n    }\n\n    /**\n         * The base implementation of `_.isArguments`.\n         *\n         * @private\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is an `arguments` object,\n         */\n    function baseIsArguments(value) {\n      return isObjectLike(value) && baseGetTag(value) == argsTag;\n    }\n\n    /**\n         * The base implementation of `_.isArrayBuffer` without Node.js optimizations.\n         *\n         * @private\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is an array buffer, else `false`.\n         */\n    function baseIsArrayBuffer(value) {\n      return isObjectLike(value) && baseGetTag(value) == arrayBufferTag;\n    }\n\n    /**\n         * The base implementation of `_.isDate` without Node.js optimizations.\n         *\n         * @private\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is a date object, else `false`.\n         */\n    function baseIsDate(value) {\n      return isObjectLike(value) && baseGetTag(value) == dateTag;\n    }\n\n    /**\n         * The base implementation of `_.isEqual` which supports partial comparisons\n         * and tracks traversed objects.\n         *\n         * @private\n         * @param {*} value The value to compare.\n         * @param {*} other The other value to compare.\n         * @param {boolean} bitmask The bitmask flags.\n         *  1 - Unordered comparison\n         *  2 - Partial comparison\n         * @param {Function} [customizer] The function to customize comparisons.\n         * @param {Object} [stack] Tracks traversed `value` and `other` objects.\n         * @returns {boolean} Returns `true` if the values are equivalent, else `false`.\n         */\n    function baseIsEqual(value, other, bitmask, customizer, stack) {\n      if (value === other) {\n        return true;\n      }\n      if (\n        value == null ||\n            other == null ||\n            (!isObjectLike(value) && !isObjectLike(other))\n      ) {\n        return value !== value && other !== other;\n      }\n      return baseIsEqualDeep(\n        value,\n        other,\n        bitmask,\n        customizer,\n        baseIsEqual,\n        stack\n      );\n    }\n\n    /**\n         * A specialized version of `baseIsEqual` for arrays and objects which performs\n         * deep comparisons and tracks traversed objects enabling objects with circular\n         * references to be compared.\n         *\n         * @private\n         * @param {Object} object The object to compare.\n         * @param {Object} other The other object to compare.\n         * @param {number} bitmask The bitmask flags. See `baseIsEqual` for more details.\n         * @param {Function} customizer The function to customize comparisons.\n         * @param {Function} equalFunc The function to determine equivalents of values.\n         * @param {Object} [stack] Tracks traversed `object` and `other` objects.\n         * @returns {boolean} Returns `true` if the objects are equivalent, else `false`.\n         */\n    function baseIsEqualDeep(\n      object,\n      other,\n      bitmask,\n      customizer,\n      equalFunc,\n      stack\n    ) {\n      var objIsArr = isArray(object),\n        othIsArr = isArray(other),\n        objTag = objIsArr ? arrayTag : getTag(object),\n        othTag = othIsArr ? arrayTag : getTag(other);\n\n      objTag = objTag == argsTag ? objectTag : objTag;\n      othTag = othTag == argsTag ? objectTag : othTag;\n\n      var objIsObj = objTag == objectTag,\n        othIsObj = othTag == objectTag,\n        isSameTag = objTag == othTag;\n\n      if (isSameTag && isBuffer(object)) {\n        if (!isBuffer(other)) {\n          return false;\n        }\n        objIsArr = true;\n        objIsObj = false;\n      }\n      if (isSameTag && !objIsObj) {\n        stack || (stack = new Stack());\n        return objIsArr || isTypedArray(object)\n          ? equalArrays(object, other, bitmask, customizer, equalFunc, stack)\n          : equalByTag(\n            object,\n            other,\n            objTag,\n            bitmask,\n            customizer,\n            equalFunc,\n            stack\n          );\n      }\n      if (!(bitmask & COMPARE_PARTIAL_FLAG)) {\n        var objIsWrapped =\n               objIsObj && hasOwnProperty.call(object, '__wrapped__'),\n          othIsWrapped = othIsObj && hasOwnProperty.call(other, '__wrapped__');\n\n        if (objIsWrapped || othIsWrapped) {\n          var objUnwrapped = objIsWrapped ? object.value() : object,\n            othUnwrapped = othIsWrapped ? other.value() : other;\n\n          stack || (stack = new Stack());\n          return equalFunc(\n            objUnwrapped,\n            othUnwrapped,\n            bitmask,\n            customizer,\n            stack\n          );\n        }\n      }\n      if (!isSameTag) {\n        return false;\n      }\n      stack || (stack = new Stack());\n      return equalObjects(object, other, bitmask, customizer, equalFunc, stack);\n    }\n\n    /**\n         * The base implementation of `_.isMap` without Node.js optimizations.\n         *\n         * @private\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is a map, else `false`.\n         */\n    function baseIsMap(value) {\n      return isObjectLike(value) && getTag(value) == mapTag;\n    }\n\n    /**\n         * The base implementation of `_.isMatch` without support for iteratee shorthands.\n         *\n         * @private\n         * @param {Object} object The object to inspect.\n         * @param {Object} source The object of property values to match.\n         * @param {Array} matchData The property names, values, and compare flags to match.\n         * @param {Function} [customizer] The function to customize comparisons.\n         * @returns {boolean} Returns `true` if `object` is a match, else `false`.\n         */\n    function baseIsMatch(object, source, matchData, customizer) {\n      var index = matchData.length,\n        length = index,\n        noCustomizer = !customizer;\n\n      if (object == null) {\n        return !length;\n      }\n      object = Object(object);\n      while (index--) {\n        var data = matchData[index];\n        if (\n          noCustomizer && data[2]\n            ? data[1] !== object[data[0]]\n            : !(data[0] in object)\n        ) {\n          return false;\n        }\n      }\n      while (++index < length) {\n        data = matchData[index];\n        var key = data[0],\n          objValue = object[key],\n          srcValue = data[1];\n\n        if (noCustomizer && data[2]) {\n          if (objValue === undefined && !(key in object)) {\n            return false;\n          }\n        } else {\n          var stack = new Stack();\n          if (customizer) {\n            var result = customizer(\n              objValue,\n              srcValue,\n              key,\n              object,\n              source,\n              stack\n            );\n          }\n          if (\n            !(result === undefined\n              ? baseIsEqual(\n                srcValue,\n                objValue,\n                COMPARE_PARTIAL_FLAG | COMPARE_UNORDERED_FLAG,\n                customizer,\n                stack\n              )\n              : result)\n          ) {\n            return false;\n          }\n        }\n      }\n      return true;\n    }\n\n    /**\n         * The base implementation of `_.isNative` without bad shim checks.\n         *\n         * @private\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is a native function,\n         *  else `false`.\n         */\n    function baseIsNative(value) {\n      if (!isObject(value) || isMasked(value)) {\n        return false;\n      }\n      var pattern = isFunction(value) ? reIsNative : reIsHostCtor;\n      return pattern.test(toSource(value));\n    }\n\n    /**\n         * The base implementation of `_.isRegExp` without Node.js optimizations.\n         *\n         * @private\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is a regexp, else `false`.\n         */\n    function baseIsRegExp(value) {\n      return isObjectLike(value) && baseGetTag(value) == regexpTag;\n    }\n\n    /**\n         * The base implementation of `_.isSet` without Node.js optimizations.\n         *\n         * @private\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is a set, else `false`.\n         */\n    function baseIsSet(value) {\n      return isObjectLike(value) && getTag(value) == setTag;\n    }\n\n    /**\n         * The base implementation of `_.isTypedArray` without Node.js optimizations.\n         *\n         * @private\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is a typed array, else `false`.\n         */\n    function baseIsTypedArray(value) {\n      return (\n        isObjectLike(value) &&\n            isLength(value.length) &&\n            !!typedArrayTags[baseGetTag(value)]\n      );\n    }\n\n    /**\n         * The base implementation of `_.iteratee`.\n         *\n         * @private\n         * @param {*} [value=_.identity] The value to convert to an iteratee.\n         * @returns {Function} Returns the iteratee.\n         */\n    function baseIteratee(value) {\n      // Don't store the `typeof` result in a variable to avoid a JIT bug in Safari 9.\n      // See https://bugs.webkit.org/show_bug.cgi?id=156034 for more details.\n      if (typeof value === 'function') {\n        return value;\n      }\n      if (value == null) {\n        return identity;\n      }\n      if (typeof value === 'object') {\n        return isArray(value)\n          ? baseMatchesProperty(value[0], value[1])\n          : baseMatches(value);\n      }\n      return property(value);\n    }\n\n    /**\n         * The base implementation of `_.keys` which doesn't treat sparse arrays as dense.\n         *\n         * @private\n         * @param {Object} object The object to query.\n         * @returns {Array} Returns the array of property names.\n         */\n    function baseKeys(object) {\n      if (!isPrototype(object)) {\n        return nativeKeys(object);\n      }\n      var result = [];\n      for (var key in Object(object)) {\n        if (hasOwnProperty.call(object, key) && key != 'constructor') {\n          result.push(key);\n        }\n      }\n      return result;\n    }\n\n    /**\n         * The base implementation of `_.keysIn` which doesn't treat sparse arrays as dense.\n         *\n         * @private\n         * @param {Object} object The object to query.\n         * @returns {Array} Returns the array of property names.\n         */\n    function baseKeysIn(object) {\n      if (!isObject(object)) {\n        return nativeKeysIn(object);\n      }\n      var isProto = isPrototype(object),\n        result = [];\n\n      for (var key in object) {\n        if (\n          !(\n            key == 'constructor' &&\n                  (isProto || !hasOwnProperty.call(object, key))\n          )\n        ) {\n          result.push(key);\n        }\n      }\n      return result;\n    }\n\n    /**\n         * The base implementation of `_.lt` which doesn't coerce arguments.\n         *\n         * @private\n         * @param {*} value The value to compare.\n         * @param {*} other The other value to compare.\n         * @returns {boolean} Returns `true` if `value` is less than `other`,\n         *  else `false`.\n         */\n    function baseLt(value, other) {\n      return value < other;\n    }\n\n    /**\n         * The base implementation of `_.map` without support for iteratee shorthands.\n         *\n         * @private\n         * @param {Array|Object} collection The collection to iterate over.\n         * @param {Function} iteratee The function invoked per iteration.\n         * @returns {Array} Returns the new mapped array.\n         */\n    function baseMap(collection, iteratee) {\n      var index = -1,\n        result = isArrayLike(collection) ? Array(collection.length) : [];\n\n      baseEach(collection, function(value, key, collection) {\n        result[++index] = iteratee(value, key, collection);\n      });\n      return result;\n    }\n\n    /**\n         * The base implementation of `_.matches` which doesn't clone `source`.\n         *\n         * @private\n         * @param {Object} source The object of property values to match.\n         * @returns {Function} Returns the new spec function.\n         */\n    function baseMatches(source) {\n      var matchData = getMatchData(source);\n      if (matchData.length == 1 && matchData[0][2]) {\n        return matchesStrictComparable(matchData[0][0], matchData[0][1]);\n      }\n      return function(object) {\n        return object === source || baseIsMatch(object, source, matchData);\n      };\n    }\n\n    /**\n         * The base implementation of `_.matchesProperty` which doesn't clone `srcValue`.\n         *\n         * @private\n         * @param {string} path The path of the property to get.\n         * @param {*} srcValue The value to match.\n         * @returns {Function} Returns the new spec function.\n         */\n    function baseMatchesProperty(path, srcValue) {\n      if (isKey(path) && isStrictComparable(srcValue)) {\n        return matchesStrictComparable(toKey(path), srcValue);\n      }\n      return function(object) {\n        var objValue = get(object, path);\n        return objValue === undefined && objValue === srcValue\n          ? hasIn(object, path)\n          : baseIsEqual(\n            srcValue,\n            objValue,\n            COMPARE_PARTIAL_FLAG | COMPARE_UNORDERED_FLAG\n          );\n      };\n    }\n\n    /**\n         * The base implementation of `_.merge` without support for multiple sources.\n         *\n         * @private\n         * @param {Object} object The destination object.\n         * @param {Object} source The source object.\n         * @param {number} srcIndex The index of `source`.\n         * @param {Function} [customizer] The function to customize merged values.\n         * @param {Object} [stack] Tracks traversed source values and their merged\n         *  counterparts.\n         */\n    function baseMerge(object, source, srcIndex, customizer, stack) {\n      if (object === source) {\n        return;\n      }\n      baseFor(\n        source,\n        function(srcValue, key) {\n          if (isObject(srcValue)) {\n            stack || (stack = new Stack());\n            baseMergeDeep(\n              object,\n              source,\n              key,\n              srcIndex,\n              baseMerge,\n              customizer,\n              stack\n            );\n          } else {\n            var newValue = customizer\n              ? customizer(\n                safeGet(object, key),\n                srcValue,\n                key + '',\n                object,\n                source,\n                stack\n              )\n              : undefined;\n\n            if (newValue === undefined) {\n              newValue = srcValue;\n            }\n            assignMergeValue(object, key, newValue);\n          }\n        },\n        keysIn\n      );\n    }\n\n    /**\n         * A specialized version of `baseMerge` for arrays and objects which performs\n         * deep merges and tracks traversed objects enabling objects with circular\n         * references to be merged.\n         *\n         * @private\n         * @param {Object} object The destination object.\n         * @param {Object} source The source object.\n         * @param {string} key The key of the value to merge.\n         * @param {number} srcIndex The index of `source`.\n         * @param {Function} mergeFunc The function to merge values.\n         * @param {Function} [customizer] The function to customize assigned values.\n         * @param {Object} [stack] Tracks traversed source values and their merged\n         *  counterparts.\n         */\n    function baseMergeDeep(\n      object,\n      source,\n      key,\n      srcIndex,\n      mergeFunc,\n      customizer,\n      stack\n    ) {\n      var objValue = safeGet(object, key),\n        srcValue = safeGet(source, key),\n        stacked = stack.get(srcValue);\n\n      if (stacked) {\n        assignMergeValue(object, key, stacked);\n        return;\n      }\n      var newValue = customizer\n        ? customizer(objValue, srcValue, key + '', object, source, stack)\n        : undefined;\n\n      var isCommon = newValue === undefined;\n\n      if (isCommon) {\n        var isArr = isArray(srcValue),\n          isBuff = !isArr && isBuffer(srcValue),\n          isTyped = !isArr && !isBuff && isTypedArray(srcValue);\n\n        newValue = srcValue;\n        if (isArr || isBuff || isTyped) {\n          if (isArray(objValue)) {\n            newValue = objValue;\n          } else if (isArrayLikeObject(objValue)) {\n            newValue = copyArray(objValue);\n          } else if (isBuff) {\n            isCommon = false;\n            newValue = cloneBuffer(srcValue, true);\n          } else if (isTyped) {\n            isCommon = false;\n            newValue = cloneTypedArray(srcValue, true);\n          } else {\n            newValue = [];\n          }\n        } else if (isPlainObject(srcValue) || isArguments(srcValue)) {\n          newValue = objValue;\n          if (isArguments(objValue)) {\n            newValue = toPlainObject(objValue);\n          } else if (\n            !isObject(objValue) ||\n                  (srcIndex && isFunction(objValue))\n          ) {\n            newValue = initCloneObject(srcValue);\n          }\n        } else {\n          isCommon = false;\n        }\n      }\n      if (isCommon) {\n        // Recursively merge objects and arrays (susceptible to call stack limits).\n        stack.set(srcValue, newValue);\n        mergeFunc(newValue, srcValue, srcIndex, customizer, stack);\n        stack['delete'](srcValue);\n      }\n      assignMergeValue(object, key, newValue);\n    }\n\n    /**\n         * The base implementation of `_.nth` which doesn't coerce arguments.\n         *\n         * @private\n         * @param {Array} array The array to query.\n         * @param {number} n The index of the element to return.\n         * @returns {*} Returns the nth element of `array`.\n         */\n    function baseNth(array, n) {\n      var length = array.length;\n      if (!length) {\n        return;\n      }\n      n += n < 0 ? length : 0;\n      return isIndex(n, length) ? array[n] : undefined;\n    }\n\n    /**\n         * The base implementation of `_.orderBy` without param guards.\n         *\n         * @private\n         * @param {Array|Object} collection The collection to iterate over.\n         * @param {Function[]|Object[]|string[]} iteratees The iteratees to sort by.\n         * @param {string[]} orders The sort orders of `iteratees`.\n         * @returns {Array} Returns the new sorted array.\n         */\n    function baseOrderBy(collection, iteratees, orders) {\n      var index = -1;\n      iteratees = arrayMap(\n        iteratees.length ? iteratees : [identity],\n        baseUnary(getIteratee())\n      );\n\n      var result = baseMap(collection, function(value, key, collection) {\n        var criteria = arrayMap(iteratees, function(iteratee) {\n          return iteratee(value);\n        });\n        return { criteria: criteria, index: ++index, value: value };\n      });\n\n      return baseSortBy(result, function(object, other) {\n        return compareMultiple(object, other, orders);\n      });\n    }\n\n    /**\n         * The base implementation of `_.pick` without support for individual\n         * property identifiers.\n         *\n         * @private\n         * @param {Object} object The source object.\n         * @param {string[]} paths The property paths to pick.\n         * @returns {Object} Returns the new object.\n         */\n    function basePick(object, paths) {\n      return basePickBy(object, paths, function(value, path) {\n        return hasIn(object, path);\n      });\n    }\n\n    /**\n         * The base implementation of  `_.pickBy` without support for iteratee shorthands.\n         *\n         * @private\n         * @param {Object} object The source object.\n         * @param {string[]} paths The property paths to pick.\n         * @param {Function} predicate The function invoked per property.\n         * @returns {Object} Returns the new object.\n         */\n    function basePickBy(object, paths, predicate) {\n      var index = -1,\n        length = paths.length,\n        result = {};\n\n      while (++index < length) {\n        var path = paths[index],\n          value = baseGet(object, path);\n\n        if (predicate(value, path)) {\n          baseSet(result, castPath(path, object), value);\n        }\n      }\n      return result;\n    }\n\n    /**\n         * A specialized version of `baseProperty` which supports deep paths.\n         *\n         * @private\n         * @param {Array|string} path The path of the property to get.\n         * @returns {Function} Returns the new accessor function.\n         */\n    function basePropertyDeep(path) {\n      return function(object) {\n        return baseGet(object, path);\n      };\n    }\n\n    /**\n         * The base implementation of `_.pullAllBy` without support for iteratee\n         * shorthands.\n         *\n         * @private\n         * @param {Array} array The array to modify.\n         * @param {Array} values The values to remove.\n         * @param {Function} [iteratee] The iteratee invoked per element.\n         * @param {Function} [comparator] The comparator invoked per element.\n         * @returns {Array} Returns `array`.\n         */\n    function basePullAll(array, values, iteratee, comparator) {\n      var indexOf = comparator ? baseIndexOfWith : baseIndexOf,\n        index = -1,\n        length = values.length,\n        seen = array;\n\n      if (array === values) {\n        values = copyArray(values);\n      }\n      if (iteratee) {\n        seen = arrayMap(array, baseUnary(iteratee));\n      }\n      while (++index < length) {\n        var fromIndex = 0,\n          value = values[index],\n          computed = iteratee ? iteratee(value) : value;\n\n        while (\n          (fromIndex = indexOf(seen, computed, fromIndex, comparator)) > -1\n        ) {\n          if (seen !== array) {\n            splice.call(seen, fromIndex, 1);\n          }\n          splice.call(array, fromIndex, 1);\n        }\n      }\n      return array;\n    }\n\n    /**\n         * The base implementation of `_.pullAt` without support for individual\n         * indexes or capturing the removed elements.\n         *\n         * @private\n         * @param {Array} array The array to modify.\n         * @param {number[]} indexes The indexes of elements to remove.\n         * @returns {Array} Returns `array`.\n         */\n    function basePullAt(array, indexes) {\n      var length = array ? indexes.length : 0,\n        lastIndex = length - 1;\n\n      while (length--) {\n        var index = indexes[length];\n        if (length == lastIndex || index !== previous) {\n          var previous = index;\n          if (isIndex(index)) {\n            splice.call(array, index, 1);\n          } else {\n            baseUnset(array, index);\n          }\n        }\n      }\n      return array;\n    }\n\n    /**\n         * The base implementation of `_.random` without support for returning\n         * floating-point numbers.\n         *\n         * @private\n         * @param {number} lower The lower bound.\n         * @param {number} upper The upper bound.\n         * @returns {number} Returns the random number.\n         */\n    function baseRandom(lower, upper) {\n      return lower + nativeFloor(nativeRandom() * (upper - lower + 1));\n    }\n\n    /**\n         * The base implementation of `_.range` and `_.rangeRight` which doesn't\n         * coerce arguments.\n         *\n         * @private\n         * @param {number} start The start of the range.\n         * @param {number} end The end of the range.\n         * @param {number} step The value to increment or decrement by.\n         * @param {boolean} [fromRight] Specify iterating from right to left.\n         * @returns {Array} Returns the range of numbers.\n         */\n    function baseRange(start, end, step, fromRight) {\n      var index = -1,\n        length = nativeMax(nativeCeil((end - start) / (step || 1)), 0),\n        result = Array(length);\n\n      while (length--) {\n        result[fromRight ? length : ++index] = start;\n        start += step;\n      }\n      return result;\n    }\n\n    /**\n         * The base implementation of `_.repeat` which doesn't coerce arguments.\n         *\n         * @private\n         * @param {string} string The string to repeat.\n         * @param {number} n The number of times to repeat the string.\n         * @returns {string} Returns the repeated string.\n         */\n    function baseRepeat(string, n) {\n      var result = '';\n      if (!string || n < 1 || n > MAX_SAFE_INTEGER) {\n        return result;\n      }\n      // Leverage the exponentiation by squaring algorithm for a faster repeat.\n      // See https://en.wikipedia.org/wiki/Exponentiation_by_squaring for more details.\n      do {\n        if (n % 2) {\n          result += string;\n        }\n        n = nativeFloor(n / 2);\n        if (n) {\n          string += string;\n        }\n      } while (n);\n\n      return result;\n    }\n\n    /**\n         * The base implementation of `_.rest` which doesn't validate or coerce arguments.\n         *\n         * @private\n         * @param {Function} func The function to apply a rest parameter to.\n         * @param {number} [start=func.length-1] The start position of the rest parameter.\n         * @returns {Function} Returns the new function.\n         */\n    function baseRest(func, start) {\n      return setToString(overRest(func, start, identity), func + '');\n    }\n\n    /**\n         * The base implementation of `_.sample`.\n         *\n         * @private\n         * @param {Array|Object} collection The collection to sample.\n         * @returns {*} Returns the random element.\n         */\n    function baseSample(collection) {\n      return arraySample(values(collection));\n    }\n\n    /**\n         * The base implementation of `_.sampleSize` without param guards.\n         *\n         * @private\n         * @param {Array|Object} collection The collection to sample.\n         * @param {number} n The number of elements to sample.\n         * @returns {Array} Returns the random elements.\n         */\n    function baseSampleSize(collection, n) {\n      var array = values(collection);\n      return shuffleSelf(array, baseClamp(n, 0, array.length));\n    }\n\n    /**\n         * The base implementation of `_.set`.\n         *\n         * @private\n         * @param {Object} object The object to modify.\n         * @param {Array|string} path The path of the property to set.\n         * @param {*} value The value to set.\n         * @param {Function} [customizer] The function to customize path creation.\n         * @returns {Object} Returns `object`.\n         */\n    function baseSet(object, path, value, customizer) {\n      if (!isObject(object)) {\n        return object;\n      }\n      path = castPath(path, object);\n\n      var index = -1,\n        length = path.length,\n        lastIndex = length - 1,\n        nested = object;\n\n      while (nested != null && ++index < length) {\n        var key = toKey(path[index]),\n          newValue = value;\n\n        if (index != lastIndex) {\n          var objValue = nested[key];\n          newValue = customizer ? customizer(objValue, key, nested) : undefined;\n          if (newValue === undefined) {\n            newValue = isObject(objValue)\n              ? objValue\n              : isIndex(path[index + 1])\n                ? []\n                : {};\n          }\n        }\n        assignValue(nested, key, newValue);\n        nested = nested[key];\n      }\n      return object;\n    }\n\n    /**\n         * The base implementation of `setData` without support for hot loop shorting.\n         *\n         * @private\n         * @param {Function} func The function to associate metadata with.\n         * @param {*} data The metadata.\n         * @returns {Function} Returns `func`.\n         */\n    var baseSetData = !metaMap\n      ? identity\n      : function(func, data) {\n        metaMap.set(func, data);\n        return func;\n      };\n\n      /**\n       * The base implementation of `setToString` without support for hot loop shorting.\n       *\n       * @private\n       * @param {Function} func The function to modify.\n       * @param {Function} string The `toString` result.\n       * @returns {Function} Returns `func`.\n       */\n    var baseSetToString = !defineProperty\n      ? identity\n      : function(func, string) {\n        return defineProperty(func, 'toString', {\n          configurable: true,\n          enumerable: false,\n          value: constant(string),\n          writable: true\n        });\n      };\n\n      /**\n       * The base implementation of `_.shuffle`.\n       *\n       * @private\n       * @param {Array|Object} collection The collection to shuffle.\n       * @returns {Array} Returns the new shuffled array.\n       */\n    function baseShuffle(collection) {\n      return shuffleSelf(values(collection));\n    }\n\n    /**\n         * The base implementation of `_.slice` without an iteratee call guard.\n         *\n         * @private\n         * @param {Array} array The array to slice.\n         * @param {number} [start=0] The start position.\n         * @param {number} [end=array.length] The end position.\n         * @returns {Array} Returns the slice of `array`.\n         */\n    function baseSlice(array, start, end) {\n      var index = -1,\n        length = array.length;\n\n      if (start < 0) {\n        start = -start > length ? 0 : length + start;\n      }\n      end = end > length ? length : end;\n      if (end < 0) {\n        end += length;\n      }\n      length = start > end ? 0 : (end - start) >>> 0;\n      start >>>= 0;\n\n      var result = Array(length);\n      while (++index < length) {\n        result[index] = array[index + start];\n      }\n      return result;\n    }\n\n    /**\n         * The base implementation of `_.some` without support for iteratee shorthands.\n         *\n         * @private\n         * @param {Array|Object} collection The collection to iterate over.\n         * @param {Function} predicate The function invoked per iteration.\n         * @returns {boolean} Returns `true` if any element passes the predicate check,\n         *  else `false`.\n         */\n    function baseSome(collection, predicate) {\n      var result;\n\n      baseEach(collection, function(value, index, collection) {\n        result = predicate(value, index, collection);\n        return !result;\n      });\n      return !!result;\n    }\n\n    /**\n         * The base implementation of `_.sortedIndex` and `_.sortedLastIndex` which\n         * performs a binary search of `array` to determine the index at which `value`\n         * should be inserted into `array` in order to maintain its sort order.\n         *\n         * @private\n         * @param {Array} array The sorted array to inspect.\n         * @param {*} value The value to evaluate.\n         * @param {boolean} [retHighest] Specify returning the highest qualified index.\n         * @returns {number} Returns the index at which `value` should be inserted\n         *  into `array`.\n         */\n    function baseSortedIndex(array, value, retHighest) {\n      var low = 0,\n        high = array == null ? low : array.length;\n\n      if (\n        typeof value === 'number' &&\n            value === value &&\n            high <= HALF_MAX_ARRAY_LENGTH\n      ) {\n        while (low < high) {\n          var mid = (low + high) >>> 1,\n            computed = array[mid];\n\n          if (\n            computed !== null &&\n                  !isSymbol(computed) &&\n                  (retHighest ? computed <= value : computed < value)\n          ) {\n            low = mid + 1;\n          } else {\n            high = mid;\n          }\n        }\n        return high;\n      }\n      return baseSortedIndexBy(array, value, identity, retHighest);\n    }\n\n    /**\n         * The base implementation of `_.sortedIndexBy` and `_.sortedLastIndexBy`\n         * which invokes `iteratee` for `value` and each element of `array` to compute\n         * their sort ranking. The iteratee is invoked with one argument; (value).\n         *\n         * @private\n         * @param {Array} array The sorted array to inspect.\n         * @param {*} value The value to evaluate.\n         * @param {Function} iteratee The iteratee invoked per element.\n         * @param {boolean} [retHighest] Specify returning the highest qualified index.\n         * @returns {number} Returns the index at which `value` should be inserted\n         *  into `array`.\n         */\n    function baseSortedIndexBy(array, value, iteratee, retHighest) {\n      value = iteratee(value);\n\n      var low = 0,\n        high = array == null ? 0 : array.length,\n        valIsNaN = value !== value,\n        valIsNull = value === null,\n        valIsSymbol = isSymbol(value),\n        valIsUndefined = value === undefined;\n\n      while (low < high) {\n        var mid = nativeFloor((low + high) / 2),\n          computed = iteratee(array[mid]),\n          othIsDefined = computed !== undefined,\n          othIsNull = computed === null,\n          othIsReflexive = computed === computed,\n          othIsSymbol = isSymbol(computed);\n\n        if (valIsNaN) {\n          var setLow = retHighest || othIsReflexive;\n        } else if (valIsUndefined) {\n          setLow = othIsReflexive && (retHighest || othIsDefined);\n        } else if (valIsNull) {\n          setLow = othIsReflexive && othIsDefined && (retHighest || !othIsNull);\n        } else if (valIsSymbol) {\n          setLow =\n                  othIsReflexive &&\n                  othIsDefined &&\n                  !othIsNull &&\n                  (retHighest || !othIsSymbol);\n        } else if (othIsNull || othIsSymbol) {\n          setLow = false;\n        } else {\n          setLow = retHighest ? computed <= value : computed < value;\n        }\n        if (setLow) {\n          low = mid + 1;\n        } else {\n          high = mid;\n        }\n      }\n      return nativeMin(high, MAX_ARRAY_INDEX);\n    }\n\n    /**\n         * The base implementation of `_.sortedUniq` and `_.sortedUniqBy` without\n         * support for iteratee shorthands.\n         *\n         * @private\n         * @param {Array} array The array to inspect.\n         * @param {Function} [iteratee] The iteratee invoked per element.\n         * @returns {Array} Returns the new duplicate free array.\n         */\n    function baseSortedUniq(array, iteratee) {\n      var index = -1,\n        length = array.length,\n        resIndex = 0,\n        result = [];\n\n      while (++index < length) {\n        var value = array[index],\n          computed = iteratee ? iteratee(value) : value;\n\n        if (!index || !eq(computed, seen)) {\n          var seen = computed;\n          result[resIndex++] = value === 0 ? 0 : value;\n        }\n      }\n      return result;\n    }\n\n    /**\n         * The base implementation of `_.toNumber` which doesn't ensure correct\n         * conversions of binary, hexadecimal, or octal string values.\n         *\n         * @private\n         * @param {*} value The value to process.\n         * @returns {number} Returns the number.\n         */\n    function baseToNumber(value) {\n      if (typeof value === 'number') {\n        return value;\n      }\n      if (isSymbol(value)) {\n        return NAN;\n      }\n      return +value;\n    }\n\n    /**\n         * The base implementation of `_.toString` which doesn't convert nullish\n         * values to empty strings.\n         *\n         * @private\n         * @param {*} value The value to process.\n         * @returns {string} Returns the string.\n         */\n    function baseToString(value) {\n      // Exit early for strings to avoid a performance hit in some environments.\n      if (typeof value === 'string') {\n        return value;\n      }\n      if (isArray(value)) {\n        // Recursively convert values (susceptible to call stack limits).\n        return arrayMap(value, baseToString) + '';\n      }\n      if (isSymbol(value)) {\n        return symbolToString ? symbolToString.call(value) : '';\n      }\n      var result = value + '';\n      return result == '0' && 1 / value == -INFINITY ? '-0' : result;\n    }\n\n    /**\n         * The base implementation of `_.uniqBy` without support for iteratee shorthands.\n         *\n         * @private\n         * @param {Array} array The array to inspect.\n         * @param {Function} [iteratee] The iteratee invoked per element.\n         * @param {Function} [comparator] The comparator invoked per element.\n         * @returns {Array} Returns the new duplicate free array.\n         */\n    function baseUniq(array, iteratee, comparator) {\n      var index = -1,\n        includes = arrayIncludes,\n        length = array.length,\n        isCommon = true,\n        result = [],\n        seen = result;\n\n      if (comparator) {\n        isCommon = false;\n        includes = arrayIncludesWith;\n      } else if (length >= LARGE_ARRAY_SIZE) {\n        var set = iteratee ? null : createSet(array);\n        if (set) {\n          return setToArray(set);\n        }\n        isCommon = false;\n        includes = cacheHas;\n        seen = new SetCache();\n      } else {\n        seen = iteratee ? [] : result;\n      }\n      outer: while (++index < length) {\n        var value = array[index],\n          computed = iteratee ? iteratee(value) : value;\n\n        value = comparator || value !== 0 ? value : 0;\n        if (isCommon && computed === computed) {\n          var seenIndex = seen.length;\n          while (seenIndex--) {\n            if (seen[seenIndex] === computed) {\n              continue outer;\n            }\n          }\n          if (iteratee) {\n            seen.push(computed);\n          }\n          result.push(value);\n        } else if (!includes(seen, computed, comparator)) {\n          if (seen !== result) {\n            seen.push(computed);\n          }\n          result.push(value);\n        }\n      }\n      return result;\n    }\n\n    /**\n         * The base implementation of `_.unset`.\n         *\n         * @private\n         * @param {Object} object The object to modify.\n         * @param {Array|string} path The property path to unset.\n         * @returns {boolean} Returns `true` if the property is deleted, else `false`.\n         */\n    function baseUnset(object, path) {\n      path = castPath(path, object);\n      object = parent(object, path);\n      return object == null || delete object[toKey(last(path))];\n    }\n\n    /**\n         * The base implementation of `_.update`.\n         *\n         * @private\n         * @param {Object} object The object to modify.\n         * @param {Array|string} path The path of the property to update.\n         * @param {Function} updater The function to produce the updated value.\n         * @param {Function} [customizer] The function to customize path creation.\n         * @returns {Object} Returns `object`.\n         */\n    function baseUpdate(object, path, updater, customizer) {\n      return baseSet(object, path, updater(baseGet(object, path)), customizer);\n    }\n\n    /**\n         * The base implementation of methods like `_.dropWhile` and `_.takeWhile`\n         * without support for iteratee shorthands.\n         *\n         * @private\n         * @param {Array} array The array to query.\n         * @param {Function} predicate The function invoked per iteration.\n         * @param {boolean} [isDrop] Specify dropping elements instead of taking them.\n         * @param {boolean} [fromRight] Specify iterating from right to left.\n         * @returns {Array} Returns the slice of `array`.\n         */\n    function baseWhile(array, predicate, isDrop, fromRight) {\n      var length = array.length,\n        index = fromRight ? length : -1;\n\n      while (\n        (fromRight ? index-- : ++index < length) &&\n            predicate(array[index], index, array)\n      ) { }\n\n      return isDrop\n        ? baseSlice(\n          array,\n          fromRight ? 0 : index,\n          fromRight ? index + 1 : length\n        )\n        : baseSlice(\n          array,\n          fromRight ? index + 1 : 0,\n          fromRight ? length : index\n        );\n    }\n\n    /**\n         * The base implementation of `wrapperValue` which returns the result of\n         * performing a sequence of actions on the unwrapped `value`, where each\n         * successive action is supplied the return value of the previous.\n         *\n         * @private\n         * @param {*} value The unwrapped value.\n         * @param {Array} actions Actions to perform to resolve the unwrapped value.\n         * @returns {*} Returns the resolved value.\n         */\n    function baseWrapperValue(value, actions) {\n      var result = value;\n      if (result instanceof LazyWrapper) {\n        result = result.value();\n      }\n      return arrayReduce(\n        actions,\n        function(result, action) {\n          return action.func.apply(\n            action.thisArg,\n            arrayPush([result], action.args)\n          );\n        },\n        result\n      );\n    }\n\n    /**\n         * The base implementation of methods like `_.xor`, without support for\n         * iteratee shorthands, that accepts an array of arrays to inspect.\n         *\n         * @private\n         * @param {Array} arrays The arrays to inspect.\n         * @param {Function} [iteratee] The iteratee invoked per element.\n         * @param {Function} [comparator] The comparator invoked per element.\n         * @returns {Array} Returns the new array of values.\n         */\n    function baseXor(arrays, iteratee, comparator) {\n      var length = arrays.length;\n      if (length < 2) {\n        return length ? baseUniq(arrays[0]) : [];\n      }\n      var index = -1,\n        result = Array(length);\n\n      while (++index < length) {\n        var array = arrays[index],\n          othIndex = -1;\n\n        while (++othIndex < length) {\n          if (othIndex != index) {\n            result[index] = baseDifference(\n              result[index] || array,\n              arrays[othIndex],\n              iteratee,\n              comparator\n            );\n          }\n        }\n      }\n      return baseUniq(baseFlatten(result, 1), iteratee, comparator);\n    }\n\n    /**\n         * This base implementation of `_.zipObject` which assigns values using `assignFunc`.\n         *\n         * @private\n         * @param {Array} props The property identifiers.\n         * @param {Array} values The property values.\n         * @param {Function} assignFunc The function to assign values.\n         * @returns {Object} Returns the new object.\n         */\n    function baseZipObject(props, values, assignFunc) {\n      var index = -1,\n        length = props.length,\n        valsLength = values.length,\n        result = {};\n\n      while (++index < length) {\n        var value = index < valsLength ? values[index] : undefined;\n        assignFunc(result, props[index], value);\n      }\n      return result;\n    }\n\n    /**\n         * Casts `value` to an empty array if it's not an array like object.\n         *\n         * @private\n         * @param {*} value The value to inspect.\n         * @returns {Array|Object} Returns the cast array-like object.\n         */\n    function castArrayLikeObject(value) {\n      return isArrayLikeObject(value) ? value : [];\n    }\n\n    /**\n         * Casts `value` to `identity` if it's not a function.\n         *\n         * @private\n         * @param {*} value The value to inspect.\n         * @returns {Function} Returns cast function.\n         */\n    function castFunction(value) {\n      return typeof value === 'function' ? value : identity;\n    }\n\n    /**\n         * Casts `value` to a path array if it's not one.\n         *\n         * @private\n         * @param {*} value The value to inspect.\n         * @param {Object} [object] The object to query keys on.\n         * @returns {Array} Returns the cast property path array.\n         */\n    function castPath(value, object) {\n      if (isArray(value)) {\n        return value;\n      }\n      return isKey(value, object) ? [value] : stringToPath(toString(value));\n    }\n\n    /**\n         * A `baseRest` alias which can be replaced with `identity` by module\n         * replacement plugins.\n         *\n         * @private\n         * @type {Function}\n         * @param {Function} func The function to apply a rest parameter to.\n         * @returns {Function} Returns the new function.\n         */\n    var castRest = baseRest;\n\n    /**\n         * Casts `array` to a slice if it's needed.\n         *\n         * @private\n         * @param {Array} array The array to inspect.\n         * @param {number} start The start position.\n         * @param {number} [end=array.length] The end position.\n         * @returns {Array} Returns the cast slice.\n         */\n    function castSlice(array, start, end) {\n      var length = array.length;\n      end = end === undefined ? length : end;\n      return !start && end >= length ? array : baseSlice(array, start, end);\n    }\n\n    /**\n         * A simple wrapper around the global [`clearTimeout`](https://mdn.io/clearTimeout).\n         *\n         * @private\n         * @param {number|Object} id The timer id or timeout object of the timer to clear.\n         */\n    var clearTimeout =\n         ctxClearTimeout ||\n         function(id) {\n           return root.clearTimeout(id);\n         };\n\n      /**\n       * Creates a clone of  `buffer`.\n       *\n       * @private\n       * @param {Buffer} buffer The buffer to clone.\n       * @param {boolean} [isDeep] Specify a deep clone.\n       * @returns {Buffer} Returns the cloned buffer.\n       */\n    function cloneBuffer(buffer, isDeep) {\n      if (isDeep) {\n        return buffer.slice();\n      }\n      var length = buffer.length,\n        result = allocUnsafe\n          ? allocUnsafe(length)\n          : new buffer.constructor(length);\n\n      buffer.copy(result);\n      return result;\n    }\n\n    /**\n         * Creates a clone of `arrayBuffer`.\n         *\n         * @private\n         * @param {ArrayBuffer} arrayBuffer The array buffer to clone.\n         * @returns {ArrayBuffer} Returns the cloned array buffer.\n         */\n    function cloneArrayBuffer(arrayBuffer) {\n      var result = new arrayBuffer.constructor(arrayBuffer.byteLength);\n      new Uint8Array(result).set(new Uint8Array(arrayBuffer));\n      return result;\n    }\n\n    /**\n         * Creates a clone of `dataView`.\n         *\n         * @private\n         * @param {Object} dataView The data view to clone.\n         * @param {boolean} [isDeep] Specify a deep clone.\n         * @returns {Object} Returns the cloned data view.\n         */\n    function cloneDataView(dataView, isDeep) {\n      var buffer = isDeep ? cloneArrayBuffer(dataView.buffer) : dataView.buffer;\n      return new dataView.constructor(\n        buffer,\n        dataView.byteOffset,\n        dataView.byteLength\n      );\n    }\n\n    /**\n         * Creates a clone of `regexp`.\n         *\n         * @private\n         * @param {Object} regexp The regexp to clone.\n         * @returns {Object} Returns the cloned regexp.\n         */\n    function cloneRegExp(regexp) {\n      var result = new regexp.constructor(regexp.source, reFlags.exec(regexp));\n      result.lastIndex = regexp.lastIndex;\n      return result;\n    }\n\n    /**\n         * Creates a clone of the `symbol` object.\n         *\n         * @private\n         * @param {Object} symbol The symbol object to clone.\n         * @returns {Object} Returns the cloned symbol object.\n         */\n    function cloneSymbol(symbol) {\n      return symbolValueOf ? Object(symbolValueOf.call(symbol)) : {};\n    }\n\n    /**\n         * Creates a clone of `typedArray`.\n         *\n         * @private\n         * @param {Object} typedArray The typed array to clone.\n         * @param {boolean} [isDeep] Specify a deep clone.\n         * @returns {Object} Returns the cloned typed array.\n         */\n    function cloneTypedArray(typedArray, isDeep) {\n      var buffer = isDeep\n        ? cloneArrayBuffer(typedArray.buffer)\n        : typedArray.buffer;\n      return new typedArray.constructor(\n        buffer,\n        typedArray.byteOffset,\n        typedArray.length\n      );\n    }\n\n    /**\n         * Compares values to sort them in ascending order.\n         *\n         * @private\n         * @param {*} value The value to compare.\n         * @param {*} other The other value to compare.\n         * @returns {number} Returns the sort order indicator for `value`.\n         */\n    function compareAscending(value, other) {\n      if (value !== other) {\n        var valIsDefined = value !== undefined,\n          valIsNull = value === null,\n          valIsReflexive = value === value,\n          valIsSymbol = isSymbol(value);\n\n        var othIsDefined = other !== undefined,\n          othIsNull = other === null,\n          othIsReflexive = other === other,\n          othIsSymbol = isSymbol(other);\n\n        if (\n          (!othIsNull && !othIsSymbol && !valIsSymbol && value > other) ||\n               (valIsSymbol &&\n                  othIsDefined &&\n                  othIsReflexive &&\n                  !othIsNull &&\n                  !othIsSymbol) ||\n               (valIsNull && othIsDefined && othIsReflexive) ||\n               (!valIsDefined && othIsReflexive) ||\n               !valIsReflexive\n        ) {\n          return 1;\n        }\n        if (\n          (!valIsNull && !valIsSymbol && !othIsSymbol && value < other) ||\n               (othIsSymbol &&\n                  valIsDefined &&\n                  valIsReflexive &&\n                  !valIsNull &&\n                  !valIsSymbol) ||\n               (othIsNull && valIsDefined && valIsReflexive) ||\n               (!othIsDefined && valIsReflexive) ||\n               !othIsReflexive\n        ) {\n          return -1;\n        }\n      }\n      return 0;\n    }\n\n    /**\n         * Used by `_.orderBy` to compare multiple properties of a value to another\n         * and stable sort them.\n         *\n         * If `orders` is unspecified, all values are sorted in ascending order. Otherwise,\n         * specify an order of \"desc\" for descending or \"asc\" for ascending sort order\n         * of corresponding values.\n         *\n         * @private\n         * @param {Object} object The object to compare.\n         * @param {Object} other The other object to compare.\n         * @param {boolean[]|string[]} orders The order to sort by for each property.\n         * @returns {number} Returns the sort order indicator for `object`.\n         */\n    function compareMultiple(object, other, orders) {\n      var index = -1,\n        objCriteria = object.criteria,\n        othCriteria = other.criteria,\n        length = objCriteria.length,\n        ordersLength = orders.length;\n\n      while (++index < length) {\n        var result = compareAscending(objCriteria[index], othCriteria[index]);\n        if (result) {\n          if (index >= ordersLength) {\n            return result;\n          }\n          var order = orders[index];\n          return result * (order == 'desc' ? -1 : 1);\n        }\n      }\n      // Fixes an `Array#sort` bug in the JS engine embedded in Adobe applications\n      // that causes it, under certain circumstances, to provide the same value for\n      // `object` and `other`. See https://github.com/jashkenas/underscore/pull/1247\n      // for more details.\n      //\n      // This also ensures a stable sort in V8 and other engines.\n      // See https://bugs.chromium.org/p/v8/issues/detail?id=90 for more details.\n      return object.index - other.index;\n    }\n\n    /**\n         * Creates an array that is the composition of partially applied arguments,\n         * placeholders, and provided arguments into a single array of arguments.\n         *\n         * @private\n         * @param {Array} args The provided arguments.\n         * @param {Array} partials The arguments to prepend to those provided.\n         * @param {Array} holders The `partials` placeholder indexes.\n         * @params {boolean} [isCurried] Specify composing for a curried function.\n         * @returns {Array} Returns the new array of composed arguments.\n         */\n    function composeArgs(args, partials, holders, isCurried) {\n      var argsIndex = -1,\n        argsLength = args.length,\n        holdersLength = holders.length,\n        leftIndex = -1,\n        leftLength = partials.length,\n        rangeLength = nativeMax(argsLength - holdersLength, 0),\n        result = Array(leftLength + rangeLength),\n        isUncurried = !isCurried;\n\n      while (++leftIndex < leftLength) {\n        result[leftIndex] = partials[leftIndex];\n      }\n      while (++argsIndex < holdersLength) {\n        if (isUncurried || argsIndex < argsLength) {\n          result[holders[argsIndex]] = args[argsIndex];\n        }\n      }\n      while (rangeLength--) {\n        result[leftIndex++] = args[argsIndex++];\n      }\n      return result;\n    }\n\n    /**\n         * This function is like `composeArgs` except that the arguments composition\n         * is tailored for `_.partialRight`.\n         *\n         * @private\n         * @param {Array} args The provided arguments.\n         * @param {Array} partials The arguments to append to those provided.\n         * @param {Array} holders The `partials` placeholder indexes.\n         * @params {boolean} [isCurried] Specify composing for a curried function.\n         * @returns {Array} Returns the new array of composed arguments.\n         */\n    function composeArgsRight(args, partials, holders, isCurried) {\n      var argsIndex = -1,\n        argsLength = args.length,\n        holdersIndex = -1,\n        holdersLength = holders.length,\n        rightIndex = -1,\n        rightLength = partials.length,\n        rangeLength = nativeMax(argsLength - holdersLength, 0),\n        result = Array(rangeLength + rightLength),\n        isUncurried = !isCurried;\n\n      while (++argsIndex < rangeLength) {\n        result[argsIndex] = args[argsIndex];\n      }\n      var offset = argsIndex;\n      while (++rightIndex < rightLength) {\n        result[offset + rightIndex] = partials[rightIndex];\n      }\n      while (++holdersIndex < holdersLength) {\n        if (isUncurried || argsIndex < argsLength) {\n          result[offset + holders[holdersIndex]] = args[argsIndex++];\n        }\n      }\n      return result;\n    }\n\n    /**\n         * Copies the values of `source` to `array`.\n         *\n         * @private\n         * @param {Array} source The array to copy values from.\n         * @param {Array} [array=[]] The array to copy values to.\n         * @returns {Array} Returns `array`.\n         */\n    function copyArray(source, array) {\n      var index = -1,\n        length = source.length;\n\n      array || (array = Array(length));\n      while (++index < length) {\n        array[index] = source[index];\n      }\n      return array;\n    }\n\n    /**\n         * Copies properties of `source` to `object`.\n         *\n         * @private\n         * @param {Object} source The object to copy properties from.\n         * @param {Array} props The property identifiers to copy.\n         * @param {Object} [object={}] The object to copy properties to.\n         * @param {Function} [customizer] The function to customize copied values.\n         * @returns {Object} Returns `object`.\n         */\n    function copyObject(source, props, object, customizer) {\n      var isNew = !object;\n      object || (object = {});\n\n      var index = -1,\n        length = props.length;\n\n      while (++index < length) {\n        var key = props[index];\n\n        var newValue = customizer\n          ? customizer(object[key], source[key], key, object, source)\n          : undefined;\n\n        if (newValue === undefined) {\n          newValue = source[key];\n        }\n        if (isNew) {\n          baseAssignValue(object, key, newValue);\n        } else {\n          assignValue(object, key, newValue);\n        }\n      }\n      return object;\n    }\n\n    /**\n         * Copies own symbols of `source` to `object`.\n         *\n         * @private\n         * @param {Object} source The object to copy symbols from.\n         * @param {Object} [object={}] The object to copy symbols to.\n         * @returns {Object} Returns `object`.\n         */\n    function copySymbols(source, object) {\n      return copyObject(source, getSymbols(source), object);\n    }\n\n    /**\n         * Copies own and inherited symbols of `source` to `object`.\n         *\n         * @private\n         * @param {Object} source The object to copy symbols from.\n         * @param {Object} [object={}] The object to copy symbols to.\n         * @returns {Object} Returns `object`.\n         */\n    function copySymbolsIn(source, object) {\n      return copyObject(source, getSymbolsIn(source), object);\n    }\n\n    /**\n         * Creates a function like `_.groupBy`.\n         *\n         * @private\n         * @param {Function} setter The function to set accumulator values.\n         * @param {Function} [initializer] The accumulator object initializer.\n         * @returns {Function} Returns the new aggregator function.\n         */\n    function createAggregator(setter, initializer) {\n      return function(collection, iteratee) {\n        var func = isArray(collection) ? arrayAggregator : baseAggregator,\n          accumulator = initializer ? initializer() : {};\n\n        return func(collection, setter, getIteratee(iteratee, 2), accumulator);\n      };\n    }\n\n    /**\n         * Creates a function like `_.assign`.\n         *\n         * @private\n         * @param {Function} assigner The function to assign values.\n         * @returns {Function} Returns the new assigner function.\n         */\n    function createAssigner(assigner) {\n      return baseRest(function(object, sources) {\n        var index = -1,\n          length = sources.length,\n          customizer = length > 1 ? sources[length - 1] : undefined,\n          guard = length > 2 ? sources[2] : undefined;\n\n        customizer =\n               assigner.length > 3 && typeof customizer === 'function'\n                 ? (length--, customizer)\n                 : undefined;\n\n        if (guard && isIterateeCall(sources[0], sources[1], guard)) {\n          customizer = length < 3 ? undefined : customizer;\n          length = 1;\n        }\n        object = Object(object);\n        while (++index < length) {\n          var source = sources[index];\n          if (source) {\n            assigner(object, source, index, customizer);\n          }\n        }\n        return object;\n      });\n    }\n\n    /**\n         * Creates a `baseEach` or `baseEachRight` function.\n         *\n         * @private\n         * @param {Function} eachFunc The function to iterate over a collection.\n         * @param {boolean} [fromRight] Specify iterating from right to left.\n         * @returns {Function} Returns the new base function.\n         */\n    function createBaseEach(eachFunc, fromRight) {\n      return function(collection, iteratee) {\n        if (collection == null) {\n          return collection;\n        }\n        if (!isArrayLike(collection)) {\n          return eachFunc(collection, iteratee);\n        }\n        var length = collection.length,\n          index = fromRight ? length : -1,\n          iterable = Object(collection);\n\n        while (fromRight ? index-- : ++index < length) {\n          if (iteratee(iterable[index], index, iterable) === false) {\n            break;\n          }\n        }\n        return collection;\n      };\n    }\n\n    /**\n         * Creates a base function for methods like `_.forIn` and `_.forOwn`.\n         *\n         * @private\n         * @param {boolean} [fromRight] Specify iterating from right to left.\n         * @returns {Function} Returns the new base function.\n         */\n    function createBaseFor(fromRight) {\n      return function(object, iteratee, keysFunc) {\n        var index = -1,\n          iterable = Object(object),\n          props = keysFunc(object),\n          length = props.length;\n\n        while (length--) {\n          var key = props[fromRight ? length : ++index];\n          if (iteratee(iterable[key], key, iterable) === false) {\n            break;\n          }\n        }\n        return object;\n      };\n    }\n\n    /**\n         * Creates a function that wraps `func` to invoke it with the optional `this`\n         * binding of `thisArg`.\n         *\n         * @private\n         * @param {Function} func The function to wrap.\n         * @param {number} bitmask The bitmask flags. See `createWrap` for more details.\n         * @param {*} [thisArg] The `this` binding of `func`.\n         * @returns {Function} Returns the new wrapped function.\n         */\n    function createBind(func, bitmask, thisArg) {\n      var isBind = bitmask & WRAP_BIND_FLAG,\n        Ctor = createCtor(func);\n\n      function wrapper() {\n        var fn = this && this !== root && this instanceof wrapper ? Ctor : func;\n        return fn.apply(isBind ? thisArg : this, arguments);\n      }\n      return wrapper;\n    }\n\n    /**\n         * Creates a function like `_.lowerFirst`.\n         *\n         * @private\n         * @param {string} methodName The name of the `String` case method to use.\n         * @returns {Function} Returns the new case function.\n         */\n    function createCaseFirst(methodName) {\n      return function(string) {\n        string = toString(string);\n\n        var strSymbols = hasUnicode(string) ? stringToArray(string) : undefined;\n\n        var chr = strSymbols ? strSymbols[0] : string.charAt(0);\n\n        var trailing = strSymbols\n          ? castSlice(strSymbols, 1).join('')\n          : string.slice(1);\n\n        return chr[methodName]() + trailing;\n      };\n    }\n\n    /**\n         * Creates a function like `_.camelCase`.\n         *\n         * @private\n         * @param {Function} callback The function to combine each word.\n         * @returns {Function} Returns the new compounder function.\n         */\n    function createCompounder(callback) {\n      return function(string) {\n        return arrayReduce(\n          words(deburr(string).replace(reApos, '')),\n          callback,\n          ''\n        );\n      };\n    }\n\n    /**\n         * Creates a function that produces an instance of `Ctor` regardless of\n         * whether it was invoked as part of a `new` expression or by `call` or `apply`.\n         *\n         * @private\n         * @param {Function} Ctor The constructor to wrap.\n         * @returns {Function} Returns the new wrapped function.\n         */\n    function createCtor(Ctor) {\n      return function() {\n        // Use a `switch` statement to work with class constructors. See\n        // http://ecma-international.org/ecma-262/7.0/#sec-ecmascript-function-objects-call-thisargument-argumentslist\n        // for more details.\n        var args = arguments;\n        switch (args.length) {\n          case 0:\n            return new Ctor();\n          case 1:\n            return new Ctor(args[0]);\n          case 2:\n            return new Ctor(args[0], args[1]);\n          case 3:\n            return new Ctor(args[0], args[1], args[2]);\n          case 4:\n            return new Ctor(args[0], args[1], args[2], args[3]);\n          case 5:\n            return new Ctor(args[0], args[1], args[2], args[3], args[4]);\n          case 6:\n            return new Ctor(\n              args[0],\n              args[1],\n              args[2],\n              args[3],\n              args[4],\n              args[5]\n            );\n          case 7:\n            return new Ctor(\n              args[0],\n              args[1],\n              args[2],\n              args[3],\n              args[4],\n              args[5],\n              args[6]\n            );\n        }\n        var thisBinding = baseCreate(Ctor.prototype),\n          result = Ctor.apply(thisBinding, args);\n\n        // Mimic the constructor's `return` behavior.\n        // See https://es5.github.io/#x13.2.2 for more details.\n        return isObject(result) ? result : thisBinding;\n      };\n    }\n\n    /**\n         * Creates a function that wraps `func` to enable currying.\n         *\n         * @private\n         * @param {Function} func The function to wrap.\n         * @param {number} bitmask The bitmask flags. See `createWrap` for more details.\n         * @param {number} arity The arity of `func`.\n         * @returns {Function} Returns the new wrapped function.\n         */\n    function createCurry(func, bitmask, arity) {\n      var Ctor = createCtor(func);\n\n      function wrapper() {\n        var length = arguments.length,\n          args = Array(length),\n          index = length,\n          placeholder = getHolder(wrapper);\n\n        while (index--) {\n          args[index] = arguments[index];\n        }\n        var holders =\n               length < 3 &&\n                  args[0] !== placeholder &&\n                  args[length - 1] !== placeholder\n                 ? []\n                 : replaceHolders(args, placeholder);\n\n        length -= holders.length;\n        if (length < arity) {\n          return createRecurry(\n            func,\n            bitmask,\n            createHybrid,\n            wrapper.placeholder,\n            undefined,\n            args,\n            holders,\n            undefined,\n            undefined,\n            arity - length\n          );\n        }\n        var fn = this && this !== root && this instanceof wrapper ? Ctor : func;\n        return apply(fn, this, args);\n      }\n      return wrapper;\n    }\n\n    /**\n         * Creates a `_.find` or `_.findLast` function.\n         *\n         * @private\n         * @param {Function} findIndexFunc The function to find the collection index.\n         * @returns {Function} Returns the new find function.\n         */\n    function createFind(findIndexFunc) {\n      return function(collection, predicate, fromIndex) {\n        var iterable = Object(collection);\n        if (!isArrayLike(collection)) {\n          var iteratee = getIteratee(predicate, 3);\n          collection = keys(collection);\n          predicate = function(key) {\n            return iteratee(iterable[key], key, iterable);\n          };\n        }\n        var index = findIndexFunc(collection, predicate, fromIndex);\n        return index > -1\n          ? iterable[iteratee ? collection[index] : index]\n          : undefined;\n      };\n    }\n\n    /**\n         * Creates a `_.flow` or `_.flowRight` function.\n         *\n         * @private\n         * @param {boolean} [fromRight] Specify iterating from right to left.\n         * @returns {Function} Returns the new flow function.\n         */\n    function createFlow(fromRight) {\n      return flatRest(function(funcs) {\n        var length = funcs.length,\n          index = length,\n          prereq = LodashWrapper.prototype.thru;\n\n        if (fromRight) {\n          funcs.reverse();\n        }\n        while (index--) {\n          var func = funcs[index];\n          if (typeof func !== 'function') {\n            throw new TypeError(FUNC_ERROR_TEXT);\n          }\n          if (prereq && !wrapper && getFuncName(func) == 'wrapper') {\n            var wrapper = new LodashWrapper([], true);\n          }\n        }\n        index = wrapper ? index : length;\n        while (++index < length) {\n          func = funcs[index];\n\n          var funcName = getFuncName(func),\n            data = funcName == 'wrapper' ? getData(func) : undefined;\n\n          if (\n            data &&\n                  isLaziable(data[0]) &&\n                  data[1] ==\n                  (WRAP_ARY_FLAG |\n                     WRAP_CURRY_FLAG |\n                     WRAP_PARTIAL_FLAG |\n                     WRAP_REARG_FLAG) &&\n                  !data[4].length &&\n                  data[9] == 1\n          ) {\n            wrapper = wrapper[getFuncName(data[0])].apply(wrapper, data[3]);\n          } else {\n            wrapper =\n                     func.length == 1 && isLaziable(func)\n                       ? wrapper[funcName]()\n                       : wrapper.thru(func);\n          }\n        }\n        return function() {\n          var args = arguments,\n            value = args[0];\n\n          if (wrapper && args.length == 1 && isArray(value)) {\n            return wrapper.plant(value).value();\n          }\n          var index = 0,\n            result = length ? funcs[index].apply(this, args) : value;\n\n          while (++index < length) {\n            result = funcs[index].call(this, result);\n          }\n          return result;\n        };\n      });\n    }\n\n    /**\n         * Creates a function that wraps `func` to invoke it with optional `this`\n         * binding of `thisArg`, partial application, and currying.\n         *\n         * @private\n         * @param {Function|string} func The function or method name to wrap.\n         * @param {number} bitmask The bitmask flags. See `createWrap` for more details.\n         * @param {*} [thisArg] The `this` binding of `func`.\n         * @param {Array} [partials] The arguments to prepend to those provided to\n         *  the new function.\n         * @param {Array} [holders] The `partials` placeholder indexes.\n         * @param {Array} [partialsRight] The arguments to append to those provided\n         *  to the new function.\n         * @param {Array} [holdersRight] The `partialsRight` placeholder indexes.\n         * @param {Array} [argPos] The argument positions of the new function.\n         * @param {number} [ary] The arity cap of `func`.\n         * @param {number} [arity] The arity of `func`.\n         * @returns {Function} Returns the new wrapped function.\n         */\n    function createHybrid(\n      func,\n      bitmask,\n      thisArg,\n      partials,\n      holders,\n      partialsRight,\n      holdersRight,\n      argPos,\n      ary,\n      arity\n    ) {\n      var isAry = bitmask & WRAP_ARY_FLAG,\n        isBind = bitmask & WRAP_BIND_FLAG,\n        isBindKey = bitmask & WRAP_BIND_KEY_FLAG,\n        isCurried = bitmask & (WRAP_CURRY_FLAG | WRAP_CURRY_RIGHT_FLAG),\n        isFlip = bitmask & WRAP_FLIP_FLAG,\n        Ctor = isBindKey ? undefined : createCtor(func);\n\n      function wrapper() {\n        var length = arguments.length,\n          args = Array(length),\n          index = length;\n\n        while (index--) {\n          args[index] = arguments[index];\n        }\n        if (isCurried) {\n          var placeholder = getHolder(wrapper),\n            holdersCount = countHolders(args, placeholder);\n        }\n        if (partials) {\n          args = composeArgs(args, partials, holders, isCurried);\n        }\n        if (partialsRight) {\n          args = composeArgsRight(args, partialsRight, holdersRight, isCurried);\n        }\n        length -= holdersCount;\n        if (isCurried && length < arity) {\n          var newHolders = replaceHolders(args, placeholder);\n          return createRecurry(\n            func,\n            bitmask,\n            createHybrid,\n            wrapper.placeholder,\n            thisArg,\n            args,\n            newHolders,\n            argPos,\n            ary,\n            arity - length\n          );\n        }\n        var thisBinding = isBind ? thisArg : this,\n          fn = isBindKey ? thisBinding[func] : func;\n\n        length = args.length;\n        if (argPos) {\n          args = reorder(args, argPos);\n        } else if (isFlip && length > 1) {\n          args.reverse();\n        }\n        if (isAry && ary < length) {\n          args.length = ary;\n        }\n        if (this && this !== root && this instanceof wrapper) {\n          fn = Ctor || createCtor(fn);\n        }\n        return fn.apply(thisBinding, args);\n      }\n      return wrapper;\n    }\n\n    /**\n         * Creates a function like `_.invertBy`.\n         *\n         * @private\n         * @param {Function} setter The function to set accumulator values.\n         * @param {Function} toIteratee The function to resolve iteratees.\n         * @returns {Function} Returns the new inverter function.\n         */\n    function createInverter(setter, toIteratee) {\n      return function(object, iteratee) {\n        return baseInverter(object, setter, toIteratee(iteratee), {});\n      };\n    }\n\n    /**\n         * Creates a function that performs a mathematical operation on two values.\n         *\n         * @private\n         * @param {Function} operator The function to perform the operation.\n         * @param {number} [defaultValue] The value used for `undefined` arguments.\n         * @returns {Function} Returns the new mathematical operation function.\n         */\n    function createMathOperation(operator, defaultValue) {\n      return function(value, other) {\n        var result;\n        if (value === undefined && other === undefined) {\n          return defaultValue;\n        }\n        if (value !== undefined) {\n          result = value;\n        }\n        if (other !== undefined) {\n          if (result === undefined) {\n            return other;\n          }\n          if (typeof value === 'string' || typeof other === 'string') {\n            value = baseToString(value);\n            other = baseToString(other);\n          } else {\n            value = baseToNumber(value);\n            other = baseToNumber(other);\n          }\n          result = operator(value, other);\n        }\n        return result;\n      };\n    }\n\n    /**\n         * Creates a function like `_.over`.\n         *\n         * @private\n         * @param {Function} arrayFunc The function to iterate over iteratees.\n         * @returns {Function} Returns the new over function.\n         */\n    function createOver(arrayFunc) {\n      return flatRest(function(iteratees) {\n        iteratees = arrayMap(iteratees, baseUnary(getIteratee()));\n        return baseRest(function(args) {\n          var thisArg = this;\n          return arrayFunc(iteratees, function(iteratee) {\n            return apply(iteratee, thisArg, args);\n          });\n        });\n      });\n    }\n\n    /**\n         * Creates the padding for `string` based on `length`. The `chars` string\n         * is truncated if the number of characters exceeds `length`.\n         *\n         * @private\n         * @param {number} length The padding length.\n         * @param {string} [chars=' '] The string used as padding.\n         * @returns {string} Returns the padding for `string`.\n         */\n    function createPadding(length, chars) {\n      chars = chars === undefined ? ' ' : baseToString(chars);\n\n      var charsLength = chars.length;\n      if (charsLength < 2) {\n        return charsLength ? baseRepeat(chars, length) : chars;\n      }\n      var result = baseRepeat(chars, nativeCeil(length / stringSize(chars)));\n      return hasUnicode(chars)\n        ? castSlice(stringToArray(result), 0, length).join('')\n        : result.slice(0, length);\n    }\n\n    /**\n         * Creates a function that wraps `func` to invoke it with the `this` binding\n         * of `thisArg` and `partials` prepended to the arguments it receives.\n         *\n         * @private\n         * @param {Function} func The function to wrap.\n         * @param {number} bitmask The bitmask flags. See `createWrap` for more details.\n         * @param {*} thisArg The `this` binding of `func`.\n         * @param {Array} partials The arguments to prepend to those provided to\n         *  the new function.\n         * @returns {Function} Returns the new wrapped function.\n         */\n    function createPartial(func, bitmask, thisArg, partials) {\n      var isBind = bitmask & WRAP_BIND_FLAG,\n        Ctor = createCtor(func);\n\n      function wrapper() {\n        var argsIndex = -1,\n          argsLength = arguments.length,\n          leftIndex = -1,\n          leftLength = partials.length,\n          args = Array(leftLength + argsLength),\n          fn = this && this !== root && this instanceof wrapper ? Ctor : func;\n\n        while (++leftIndex < leftLength) {\n          args[leftIndex] = partials[leftIndex];\n        }\n        while (argsLength--) {\n          args[leftIndex++] = arguments[++argsIndex];\n        }\n        return apply(fn, isBind ? thisArg : this, args);\n      }\n      return wrapper;\n    }\n\n    /**\n         * Creates a `_.range` or `_.rangeRight` function.\n         *\n         * @private\n         * @param {boolean} [fromRight] Specify iterating from right to left.\n         * @returns {Function} Returns the new range function.\n         */\n    function createRange(fromRight) {\n      return function(start, end, step) {\n        if (\n          step &&\n               typeof step !== 'number' &&\n               isIterateeCall(start, end, step)\n        ) {\n          end = step = undefined;\n        }\n        // Ensure the sign of `-0` is preserved.\n        start = toFinite(start);\n        if (end === undefined) {\n          end = start;\n          start = 0;\n        } else {\n          end = toFinite(end);\n        }\n        step = step === undefined ? (start < end ? 1 : -1) : toFinite(step);\n        return baseRange(start, end, step, fromRight);\n      };\n    }\n\n    /**\n         * Creates a function that performs a relational operation on two values.\n         *\n         * @private\n         * @param {Function} operator The function to perform the operation.\n         * @returns {Function} Returns the new relational operation function.\n         */\n    function createRelationalOperation(operator) {\n      return function(value, other) {\n        if (!(typeof value === 'string' && typeof other === 'string')) {\n          value = toNumber(value);\n          other = toNumber(other);\n        }\n        return operator(value, other);\n      };\n    }\n\n    /**\n         * Creates a function that wraps `func` to continue currying.\n         *\n         * @private\n         * @param {Function} func The function to wrap.\n         * @param {number} bitmask The bitmask flags. See `createWrap` for more details.\n         * @param {Function} wrapFunc The function to create the `func` wrapper.\n         * @param {*} placeholder The placeholder value.\n         * @param {*} [thisArg] The `this` binding of `func`.\n         * @param {Array} [partials] The arguments to prepend to those provided to\n         *  the new function.\n         * @param {Array} [holders] The `partials` placeholder indexes.\n         * @param {Array} [argPos] The argument positions of the new function.\n         * @param {number} [ary] The arity cap of `func`.\n         * @param {number} [arity] The arity of `func`.\n         * @returns {Function} Returns the new wrapped function.\n         */\n    function createRecurry(\n      func,\n      bitmask,\n      wrapFunc,\n      placeholder,\n      thisArg,\n      partials,\n      holders,\n      argPos,\n      ary,\n      arity\n    ) {\n      var isCurry = bitmask & WRAP_CURRY_FLAG,\n        newHolders = isCurry ? holders : undefined,\n        newHoldersRight = isCurry ? undefined : holders,\n        newPartials = isCurry ? partials : undefined,\n        newPartialsRight = isCurry ? undefined : partials;\n\n      bitmask |= isCurry ? WRAP_PARTIAL_FLAG : WRAP_PARTIAL_RIGHT_FLAG;\n      bitmask &= ~(isCurry ? WRAP_PARTIAL_RIGHT_FLAG : WRAP_PARTIAL_FLAG);\n\n      if (!(bitmask & WRAP_CURRY_BOUND_FLAG)) {\n        bitmask &= ~(WRAP_BIND_FLAG | WRAP_BIND_KEY_FLAG);\n      }\n      var newData = [\n        func,\n        bitmask,\n        thisArg,\n        newPartials,\n        newHolders,\n        newPartialsRight,\n        newHoldersRight,\n        argPos,\n        ary,\n        arity\n      ];\n\n      var result = wrapFunc.apply(undefined, newData);\n      if (isLaziable(func)) {\n        setData(result, newData);\n      }\n      result.placeholder = placeholder;\n      return setWrapToString(result, func, bitmask);\n    }\n\n    /**\n         * Creates a function like `_.round`.\n         *\n         * @private\n         * @param {string} methodName The name of the `Math` method to use when rounding.\n         * @returns {Function} Returns the new round function.\n         */\n    function createRound(methodName) {\n      var func = Math[methodName];\n      return function(number, precision) {\n        number = toNumber(number);\n        precision =\n               precision == null ? 0 : nativeMin(toInteger(precision), 292);\n        if (precision) {\n          // Shift with exponential notation to avoid floating-point issues.\n          // See [MDN](https://mdn.io/round#Examples) for more details.\n          var pair = (toString(number) + 'e').split('e'),\n            value = func(pair[0] + 'e' + (+pair[1] + precision));\n\n          pair = (toString(value) + 'e').split('e');\n          return +(pair[0] + 'e' + (+pair[1] - precision));\n        }\n        return func(number);\n      };\n    }\n\n    /**\n         * Creates a set object of `values`.\n         *\n         * @private\n         * @param {Array} values The values to add to the set.\n         * @returns {Object} Returns the new set.\n         */\n    var createSet = !(Set && 1 / setToArray(new Set([, -0]))[1] == INFINITY)\n      ? noop\n      : function(values) {\n        return new Set(values);\n      };\n\n      /**\n       * Creates a `_.toPairs` or `_.toPairsIn` function.\n       *\n       * @private\n       * @param {Function} keysFunc The function to get the keys of a given object.\n       * @returns {Function} Returns the new pairs function.\n       */\n    function createToPairs(keysFunc) {\n      return function(object) {\n        var tag = getTag(object);\n        if (tag == mapTag) {\n          return mapToArray(object);\n        }\n        if (tag == setTag) {\n          return setToPairs(object);\n        }\n        return baseToPairs(object, keysFunc(object));\n      };\n    }\n\n    /**\n         * Creates a function that either curries or invokes `func` with optional\n         * `this` binding and partially applied arguments.\n         *\n         * @private\n         * @param {Function|string} func The function or method name to wrap.\n         * @param {number} bitmask The bitmask flags.\n         *    1 - `_.bind`\n         *    2 - `_.bindKey`\n         *    4 - `_.curry` or `_.curryRight` of a bound function\n         *    8 - `_.curry`\n         *   16 - `_.curryRight`\n         *   32 - `_.partial`\n         *   64 - `_.partialRight`\n         *  128 - `_.rearg`\n         *  256 - `_.ary`\n         *  512 - `_.flip`\n         * @param {*} [thisArg] The `this` binding of `func`.\n         * @param {Array} [partials] The arguments to be partially applied.\n         * @param {Array} [holders] The `partials` placeholder indexes.\n         * @param {Array} [argPos] The argument positions of the new function.\n         * @param {number} [ary] The arity cap of `func`.\n         * @param {number} [arity] The arity of `func`.\n         * @returns {Function} Returns the new wrapped function.\n         */\n    function createWrap(\n      func,\n      bitmask,\n      thisArg,\n      partials,\n      holders,\n      argPos,\n      ary,\n      arity\n    ) {\n      var isBindKey = bitmask & WRAP_BIND_KEY_FLAG;\n      if (!isBindKey && typeof func !== 'function') {\n        throw new TypeError(FUNC_ERROR_TEXT);\n      }\n      var length = partials ? partials.length : 0;\n      if (!length) {\n        bitmask &= ~(WRAP_PARTIAL_FLAG | WRAP_PARTIAL_RIGHT_FLAG);\n        partials = holders = undefined;\n      }\n      ary = ary === undefined ? ary : nativeMax(toInteger(ary), 0);\n      arity = arity === undefined ? arity : toInteger(arity);\n      length -= holders ? holders.length : 0;\n\n      if (bitmask & WRAP_PARTIAL_RIGHT_FLAG) {\n        var partialsRight = partials,\n          holdersRight = holders;\n\n        partials = holders = undefined;\n      }\n      var data = isBindKey ? undefined : getData(func);\n\n      var newData = [\n        func,\n        bitmask,\n        thisArg,\n        partials,\n        holders,\n        partialsRight,\n        holdersRight,\n        argPos,\n        ary,\n        arity\n      ];\n\n      if (data) {\n        mergeData(newData, data);\n      }\n      func = newData[0];\n      bitmask = newData[1];\n      thisArg = newData[2];\n      partials = newData[3];\n      holders = newData[4];\n      arity = newData[9] =\n            newData[9] === undefined\n              ? isBindKey\n                ? 0\n                : func.length\n              : nativeMax(newData[9] - length, 0);\n\n      if (!arity && bitmask & (WRAP_CURRY_FLAG | WRAP_CURRY_RIGHT_FLAG)) {\n        bitmask &= ~(WRAP_CURRY_FLAG | WRAP_CURRY_RIGHT_FLAG);\n      }\n      if (!bitmask || bitmask == WRAP_BIND_FLAG) {\n        var result = createBind(func, bitmask, thisArg);\n      } else if (\n        bitmask == WRAP_CURRY_FLAG ||\n            bitmask == WRAP_CURRY_RIGHT_FLAG\n      ) {\n        result = createCurry(func, bitmask, arity);\n      } else if (\n        (bitmask == WRAP_PARTIAL_FLAG ||\n               bitmask == (WRAP_BIND_FLAG | WRAP_PARTIAL_FLAG)) &&\n            !holders.length\n      ) {\n        result = createPartial(func, bitmask, thisArg, partials);\n      } else {\n        result = createHybrid.apply(undefined, newData);\n      }\n      var setter = data ? baseSetData : setData;\n      return setWrapToString(setter(result, newData), func, bitmask);\n    }\n\n    /**\n         * Used by `_.defaults` to customize its `_.assignIn` use to assign properties\n         * of source objects to the destination object for all destination properties\n         * that resolve to `undefined`.\n         *\n         * @private\n         * @param {*} objValue The destination value.\n         * @param {*} srcValue The source value.\n         * @param {string} key The key of the property to assign.\n         * @param {Object} object The parent object of `objValue`.\n         * @returns {*} Returns the value to assign.\n         */\n    function customDefaultsAssignIn(objValue, srcValue, key, object) {\n      if (\n        objValue === undefined ||\n            (eq(objValue, objectProto[key]) && !hasOwnProperty.call(object, key))\n      ) {\n        return srcValue;\n      }\n      return objValue;\n    }\n\n    /**\n         * Used by `_.defaultsDeep` to customize its `_.merge` use to merge source\n         * objects into destination objects that are passed thru.\n         *\n         * @private\n         * @param {*} objValue The destination value.\n         * @param {*} srcValue The source value.\n         * @param {string} key The key of the property to merge.\n         * @param {Object} object The parent object of `objValue`.\n         * @param {Object} source The parent object of `srcValue`.\n         * @param {Object} [stack] Tracks traversed source values and their merged\n         *  counterparts.\n         * @returns {*} Returns the value to assign.\n         */\n    function customDefaultsMerge(\n      objValue,\n      srcValue,\n      key,\n      object,\n      source,\n      stack\n    ) {\n      if (isObject(objValue) && isObject(srcValue)) {\n        // Recursively merge objects and arrays (susceptible to call stack limits).\n        stack.set(srcValue, objValue);\n        baseMerge(objValue, srcValue, undefined, customDefaultsMerge, stack);\n        stack['delete'](srcValue);\n      }\n      return objValue;\n    }\n\n    /**\n         * Used by `_.omit` to customize its `_.cloneDeep` use to only clone plain\n         * objects.\n         *\n         * @private\n         * @param {*} value The value to inspect.\n         * @param {string} key The key of the property to inspect.\n         * @returns {*} Returns the uncloned value or `undefined` to defer cloning to `_.cloneDeep`.\n         */\n    function customOmitClone(value) {\n      return isPlainObject(value) ? undefined : value;\n    }\n\n    /**\n         * A specialized version of `baseIsEqualDeep` for arrays with support for\n         * partial deep comparisons.\n         *\n         * @private\n         * @param {Array} array The array to compare.\n         * @param {Array} other The other array to compare.\n         * @param {number} bitmask The bitmask flags. See `baseIsEqual` for more details.\n         * @param {Function} customizer The function to customize comparisons.\n         * @param {Function} equalFunc The function to determine equivalents of values.\n         * @param {Object} stack Tracks traversed `array` and `other` objects.\n         * @returns {boolean} Returns `true` if the arrays are equivalent, else `false`.\n         */\n    function equalArrays(array, other, bitmask, customizer, equalFunc, stack) {\n      var isPartial = bitmask & COMPARE_PARTIAL_FLAG,\n        arrLength = array.length,\n        othLength = other.length;\n\n      if (arrLength != othLength && !(isPartial && othLength > arrLength)) {\n        return false;\n      }\n      // Assume cyclic values are equal.\n      var stacked = stack.get(array);\n      if (stacked && stack.get(other)) {\n        return stacked == other;\n      }\n      var index = -1,\n        result = true,\n        seen = bitmask & COMPARE_UNORDERED_FLAG ? new SetCache() : undefined;\n\n      stack.set(array, other);\n      stack.set(other, array);\n\n      // Ignore non-index properties.\n      while (++index < arrLength) {\n        var arrValue = array[index],\n          othValue = other[index];\n\n        if (customizer) {\n          var compared = isPartial\n            ? customizer(othValue, arrValue, index, other, array, stack)\n            : customizer(arrValue, othValue, index, array, other, stack);\n        }\n        if (compared !== undefined) {\n          if (compared) {\n            continue;\n          }\n          result = false;\n          break;\n        }\n        // Recursively compare arrays (susceptible to call stack limits).\n        if (seen) {\n          if (\n            !arraySome(other, function(othValue, othIndex) {\n              if (\n                !cacheHas(seen, othIndex) &&\n                        (arrValue === othValue ||\n                           equalFunc(arrValue, othValue, bitmask, customizer, stack))\n              ) {\n                return seen.push(othIndex);\n              }\n            })\n          ) {\n            result = false;\n            break;\n          }\n        } else if (\n          !(\n            arrValue === othValue ||\n                  equalFunc(arrValue, othValue, bitmask, customizer, stack)\n          )\n        ) {\n          result = false;\n          break;\n        }\n      }\n      stack['delete'](array);\n      stack['delete'](other);\n      return result;\n    }\n\n    /**\n         * A specialized version of `baseIsEqualDeep` for comparing objects of\n         * the same `toStringTag`.\n         *\n         * **Note:** This function only supports comparing values with tags of\n         * `Boolean`, `Date`, `Error`, `Number`, `RegExp`, or `String`.\n         *\n         * @private\n         * @param {Object} object The object to compare.\n         * @param {Object} other The other object to compare.\n         * @param {string} tag The `toStringTag` of the objects to compare.\n         * @param {number} bitmask The bitmask flags. See `baseIsEqual` for more details.\n         * @param {Function} customizer The function to customize comparisons.\n         * @param {Function} equalFunc The function to determine equivalents of values.\n         * @param {Object} stack Tracks traversed `object` and `other` objects.\n         * @returns {boolean} Returns `true` if the objects are equivalent, else `false`.\n         */\n    function equalByTag(\n      object,\n      other,\n      tag,\n      bitmask,\n      customizer,\n      equalFunc,\n      stack\n    ) {\n      switch (tag) {\n        case dataViewTag:\n          if (\n            object.byteLength != other.byteLength ||\n                  object.byteOffset != other.byteOffset\n          ) {\n            return false;\n          }\n          object = object.buffer;\n          other = other.buffer;\n\n        case arrayBufferTag:\n          if (\n            object.byteLength != other.byteLength ||\n                  !equalFunc(new Uint8Array(object), new Uint8Array(other))\n          ) {\n            return false;\n          }\n          return true;\n\n        case boolTag:\n        case dateTag:\n        case numberTag:\n          // Coerce booleans to `1` or `0` and dates to milliseconds.\n          // Invalid dates are coerced to `NaN`.\n          return eq(+object, +other);\n\n        case errorTag:\n          return object.name == other.name && object.message == other.message;\n\n        case regexpTag:\n        case stringTag:\n          // Coerce regexes to strings and treat strings, primitives and objects,\n          // as equal. See http://www.ecma-international.org/ecma-262/7.0/#sec-regexp.prototype.tostring\n          // for more details.\n          return object == other + '';\n\n        case mapTag:\n          var convert = mapToArray;\n\n        case setTag:\n          var isPartial = bitmask & COMPARE_PARTIAL_FLAG;\n          convert || (convert = setToArray);\n\n          if (object.size != other.size && !isPartial) {\n            return false;\n          }\n          // Assume cyclic values are equal.\n          var stacked = stack.get(object);\n          if (stacked) {\n            return stacked == other;\n          }\n          bitmask |= COMPARE_UNORDERED_FLAG;\n\n          // Recursively compare objects (susceptible to call stack limits).\n          stack.set(object, other);\n          var result = equalArrays(\n            convert(object),\n            convert(other),\n            bitmask,\n            customizer,\n            equalFunc,\n            stack\n          );\n          stack['delete'](object);\n          return result;\n\n        case symbolTag:\n          if (symbolValueOf) {\n            return symbolValueOf.call(object) == symbolValueOf.call(other);\n          }\n      }\n      return false;\n    }\n\n    /**\n         * A specialized version of `baseIsEqualDeep` for objects with support for\n         * partial deep comparisons.\n         *\n         * @private\n         * @param {Object} object The object to compare.\n         * @param {Object} other The other object to compare.\n         * @param {number} bitmask The bitmask flags. See `baseIsEqual` for more details.\n         * @param {Function} customizer The function to customize comparisons.\n         * @param {Function} equalFunc The function to determine equivalents of values.\n         * @param {Object} stack Tracks traversed `object` and `other` objects.\n         * @returns {boolean} Returns `true` if the objects are equivalent, else `false`.\n         */\n    function equalObjects(\n      object,\n      other,\n      bitmask,\n      customizer,\n      equalFunc,\n      stack\n    ) {\n      var isPartial = bitmask & COMPARE_PARTIAL_FLAG,\n        objProps = getAllKeys(object),\n        objLength = objProps.length,\n        othProps = getAllKeys(other),\n        othLength = othProps.length;\n\n      if (objLength != othLength && !isPartial) {\n        return false;\n      }\n      var index = objLength;\n      while (index--) {\n        var key = objProps[index];\n        if (!(isPartial ? key in other : hasOwnProperty.call(other, key))) {\n          return false;\n        }\n      }\n      // Assume cyclic values are equal.\n      var stacked = stack.get(object);\n      if (stacked && stack.get(other)) {\n        return stacked == other;\n      }\n      var result = true;\n      stack.set(object, other);\n      stack.set(other, object);\n\n      var skipCtor = isPartial;\n      while (++index < objLength) {\n        key = objProps[index];\n        var objValue = object[key],\n          othValue = other[key];\n\n        if (customizer) {\n          var compared = isPartial\n            ? customizer(othValue, objValue, key, other, object, stack)\n            : customizer(objValue, othValue, key, object, other, stack);\n        }\n        // Recursively compare objects (susceptible to call stack limits).\n        if (\n          !(compared === undefined\n            ? objValue === othValue ||\n                  equalFunc(objValue, othValue, bitmask, customizer, stack)\n            : compared)\n        ) {\n          result = false;\n          break;\n        }\n        skipCtor || (skipCtor = key == 'constructor');\n      }\n      if (result && !skipCtor) {\n        var objCtor = object.constructor,\n          othCtor = other.constructor;\n\n        // Non `Object` object instances with different constructors are not equal.\n        if (\n          objCtor != othCtor &&\n               ('constructor' in object && 'constructor' in other) &&\n               !(\n            typeof objCtor === 'function' &&\n                  objCtor instanceof objCtor &&\n                  typeof othCtor === 'function' &&\n                  othCtor instanceof othCtor\n          )\n        ) {\n          result = false;\n        }\n      }\n      stack['delete'](object);\n      stack['delete'](other);\n      return result;\n    }\n\n    /**\n         * A specialized version of `baseRest` which flattens the rest array.\n         *\n         * @private\n         * @param {Function} func The function to apply a rest parameter to.\n         * @returns {Function} Returns the new function.\n         */\n    function flatRest(func) {\n      return setToString(overRest(func, undefined, flatten), func + '');\n    }\n\n    /**\n         * Creates an array of own enumerable property names and symbols of `object`.\n         *\n         * @private\n         * @param {Object} object The object to query.\n         * @returns {Array} Returns the array of property names and symbols.\n         */\n    function getAllKeys(object) {\n      return baseGetAllKeys(object, keys, getSymbols);\n    }\n\n    /**\n         * Creates an array of own and inherited enumerable property names and\n         * symbols of `object`.\n         *\n         * @private\n         * @param {Object} object The object to query.\n         * @returns {Array} Returns the array of property names and symbols.\n         */\n    function getAllKeysIn(object) {\n      return baseGetAllKeys(object, keysIn, getSymbolsIn);\n    }\n\n    /**\n         * Gets metadata for `func`.\n         *\n         * @private\n         * @param {Function} func The function to query.\n         * @returns {*} Returns the metadata for `func`.\n         */\n    var getData = !metaMap\n      ? noop\n      : function(func) {\n        return metaMap.get(func);\n      };\n\n      /**\n       * Gets the name of `func`.\n       *\n       * @private\n       * @param {Function} func The function to query.\n       * @returns {string} Returns the function name.\n       */\n    function getFuncName(func) {\n      var result = func.name + '',\n        array = realNames[result],\n        length = hasOwnProperty.call(realNames, result) ? array.length : 0;\n\n      while (length--) {\n        var data = array[length],\n          otherFunc = data.func;\n        if (otherFunc == null || otherFunc == func) {\n          return data.name;\n        }\n      }\n      return result;\n    }\n\n    /**\n         * Gets the argument placeholder value for `func`.\n         *\n         * @private\n         * @param {Function} func The function to inspect.\n         * @returns {*} Returns the placeholder value.\n         */\n    function getHolder(func) {\n      var object = hasOwnProperty.call(lodash, 'placeholder') ? lodash : func;\n      return object.placeholder;\n    }\n\n    /**\n         * Gets the appropriate \"iteratee\" function. If `_.iteratee` is customized,\n         * this function returns the custom method, otherwise it returns `baseIteratee`.\n         * If arguments are provided, the chosen function is invoked with them and\n         * its result is returned.\n         *\n         * @private\n         * @param {*} [value] The value to convert to an iteratee.\n         * @param {number} [arity] The arity of the created iteratee.\n         * @returns {Function} Returns the chosen function or its result.\n         */\n    function getIteratee() {\n      var result = lodash.iteratee || iteratee;\n      result = result === iteratee ? baseIteratee : result;\n      return arguments.length ? result(arguments[0], arguments[1]) : result;\n    }\n\n    /**\n         * Gets the data for `map`.\n         *\n         * @private\n         * @param {Object} map The map to query.\n         * @param {string} key The reference key.\n         * @returns {*} Returns the map data.\n         */\n    function getMapData(map, key) {\n      var data = map.__data__;\n      return isKeyable(key)\n        ? data[typeof key === 'string' ? 'string' : 'hash']\n        : data.map;\n    }\n\n    /**\n         * Gets the property names, values, and compare flags of `object`.\n         *\n         * @private\n         * @param {Object} object The object to query.\n         * @returns {Array} Returns the match data of `object`.\n         */\n    function getMatchData(object) {\n      var result = keys(object),\n        length = result.length;\n\n      while (length--) {\n        var key = result[length],\n          value = object[key];\n\n        result[length] = [key, value, isStrictComparable(value)];\n      }\n      return result;\n    }\n\n    /**\n         * Gets the native function at `key` of `object`.\n         *\n         * @private\n         * @param {Object} object The object to query.\n         * @param {string} key The key of the method to get.\n         * @returns {*} Returns the function if it's native, else `undefined`.\n         */\n    function getNative(object, key) {\n      var value = getValue(object, key);\n      return baseIsNative(value) ? value : undefined;\n    }\n\n    /**\n         * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.\n         *\n         * @private\n         * @param {*} value The value to query.\n         * @returns {string} Returns the raw `toStringTag`.\n         */\n    function getRawTag(value) {\n      var isOwn = hasOwnProperty.call(value, symToStringTag),\n        tag = value[symToStringTag];\n\n      try {\n        value[symToStringTag] = undefined;\n        var unmasked = true;\n      } catch (e) { }\n\n      var result = nativeObjectToString.call(value);\n      if (unmasked) {\n        if (isOwn) {\n          value[symToStringTag] = tag;\n        } else {\n          delete value[symToStringTag];\n        }\n      }\n      return result;\n    }\n\n    /**\n         * Creates an array of the own enumerable symbols of `object`.\n         *\n         * @private\n         * @param {Object} object The object to query.\n         * @returns {Array} Returns the array of symbols.\n         */\n    var getSymbols = !nativeGetSymbols\n      ? stubArray\n      : function(object) {\n        if (object == null) {\n          return [];\n        }\n        object = Object(object);\n        return arrayFilter(nativeGetSymbols(object), function(symbol) {\n          return propertyIsEnumerable.call(object, symbol);\n        });\n      };\n\n      /**\n       * Creates an array of the own and inherited enumerable symbols of `object`.\n       *\n       * @private\n       * @param {Object} object The object to query.\n       * @returns {Array} Returns the array of symbols.\n       */\n    var getSymbolsIn = !nativeGetSymbols\n      ? stubArray\n      : function(object) {\n        var result = [];\n        while (object) {\n          arrayPush(result, getSymbols(object));\n          object = getPrototype(object);\n        }\n        return result;\n      };\n\n      /**\n       * Gets the `toStringTag` of `value`.\n       *\n       * @private\n       * @param {*} value The value to query.\n       * @returns {string} Returns the `toStringTag`.\n       */\n    var getTag = baseGetTag;\n\n    // Fallback for data views, maps, sets, and weak maps in IE 11 and promises in Node.js < 6.\n    if (\n      (DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag) ||\n         (Map && getTag(new Map()) != mapTag) ||\n         (Promise && getTag(Promise.resolve()) != promiseTag) ||\n         (Set && getTag(new Set()) != setTag) ||\n         (WeakMap && getTag(new WeakMap()) != weakMapTag)\n    ) {\n      getTag = function(value) {\n        var result = baseGetTag(value),\n          Ctor = result == objectTag ? value.constructor : undefined,\n          ctorString = Ctor ? toSource(Ctor) : '';\n\n        if (ctorString) {\n          switch (ctorString) {\n            case dataViewCtorString:\n              return dataViewTag;\n            case mapCtorString:\n              return mapTag;\n            case promiseCtorString:\n              return promiseTag;\n            case setCtorString:\n              return setTag;\n            case weakMapCtorString:\n              return weakMapTag;\n          }\n        }\n        return result;\n      };\n    }\n\n    /**\n         * Gets the view, applying any `transforms` to the `start` and `end` positions.\n         *\n         * @private\n         * @param {number} start The start of the view.\n         * @param {number} end The end of the view.\n         * @param {Array} transforms The transformations to apply to the view.\n         * @returns {Object} Returns an object containing the `start` and `end`\n         *  positions of the view.\n         */\n    function getView(start, end, transforms) {\n      var index = -1,\n        length = transforms.length;\n\n      while (++index < length) {\n        var data = transforms[index],\n          size = data.size;\n\n        switch (data.type) {\n          case 'drop':\n            start += size;\n            break;\n          case 'dropRight':\n            end -= size;\n            break;\n          case 'take':\n            end = nativeMin(end, start + size);\n            break;\n          case 'takeRight':\n            start = nativeMax(start, end - size);\n            break;\n        }\n      }\n      return { start: start, end: end };\n    }\n\n    /**\n         * Extracts wrapper details from the `source` body comment.\n         *\n         * @private\n         * @param {string} source The source to inspect.\n         * @returns {Array} Returns the wrapper details.\n         */\n    function getWrapDetails(source) {\n      var match = source.match(reWrapDetails);\n      return match ? match[1].split(reSplitDetails) : [];\n    }\n\n    /**\n         * Checks if `path` exists on `object`.\n         *\n         * @private\n         * @param {Object} object The object to query.\n         * @param {Array|string} path The path to check.\n         * @param {Function} hasFunc The function to check properties.\n         * @returns {boolean} Returns `true` if `path` exists, else `false`.\n         */\n    function hasPath(object, path, hasFunc) {\n      path = castPath(path, object);\n\n      var index = -1,\n        length = path.length,\n        result = false;\n\n      while (++index < length) {\n        var key = toKey(path[index]);\n        if (!(result = object != null && hasFunc(object, key))) {\n          break;\n        }\n        object = object[key];\n      }\n      if (result || ++index != length) {\n        return result;\n      }\n      length = object == null ? 0 : object.length;\n      return (\n        !!length &&\n            isLength(length) &&\n            isIndex(key, length) &&\n            (isArray(object) || isArguments(object))\n      );\n    }\n\n    /**\n         * Initializes an array clone.\n         *\n         * @private\n         * @param {Array} array The array to clone.\n         * @returns {Array} Returns the initialized clone.\n         */\n    function initCloneArray(array) {\n      var length = array.length,\n        result = new array.constructor(length);\n\n      // Add properties assigned by `RegExp#exec`.\n      if (\n        length &&\n            typeof array[0] === 'string' &&\n            hasOwnProperty.call(array, 'index')\n      ) {\n        result.index = array.index;\n        result.input = array.input;\n      }\n      return result;\n    }\n\n    /**\n         * Initializes an object clone.\n         *\n         * @private\n         * @param {Object} object The object to clone.\n         * @returns {Object} Returns the initialized clone.\n         */\n    function initCloneObject(object) {\n      return typeof object.constructor === 'function' && !isPrototype(object)\n        ? baseCreate(getPrototype(object))\n        : {};\n    }\n\n    /**\n         * Initializes an object clone based on its `toStringTag`.\n         *\n         * **Note:** This function only supports cloning values with tags of\n         * `Boolean`, `Date`, `Error`, `Map`, `Number`, `RegExp`, `Set`, or `String`.\n         *\n         * @private\n         * @param {Object} object The object to clone.\n         * @param {string} tag The `toStringTag` of the object to clone.\n         * @param {boolean} [isDeep] Specify a deep clone.\n         * @returns {Object} Returns the initialized clone.\n         */\n    function initCloneByTag(object, tag, isDeep) {\n      var Ctor = object.constructor;\n      switch (tag) {\n        case arrayBufferTag:\n          return cloneArrayBuffer(object);\n\n        case boolTag:\n        case dateTag:\n          return new Ctor(+object);\n\n        case dataViewTag:\n          return cloneDataView(object, isDeep);\n\n        case float32Tag:\n        case float64Tag:\n        case int8Tag:\n        case int16Tag:\n        case int32Tag:\n        case uint8Tag:\n        case uint8ClampedTag:\n        case uint16Tag:\n        case uint32Tag:\n          return cloneTypedArray(object, isDeep);\n\n        case mapTag:\n          return new Ctor();\n\n        case numberTag:\n        case stringTag:\n          return new Ctor(object);\n\n        case regexpTag:\n          return cloneRegExp(object);\n\n        case setTag:\n          return new Ctor();\n\n        case symbolTag:\n          return cloneSymbol(object);\n      }\n    }\n\n    /**\n         * Inserts wrapper `details` in a comment at the top of the `source` body.\n         *\n         * @private\n         * @param {string} source The source to modify.\n         * @returns {Array} details The details to insert.\n         * @returns {string} Returns the modified source.\n         */\n    function insertWrapDetails(source, details) {\n      var length = details.length;\n      if (!length) {\n        return source;\n      }\n      var lastIndex = length - 1;\n      details[lastIndex] = (length > 1 ? '& ' : '') + details[lastIndex];\n      details = details.join(length > 2 ? ', ' : ' ');\n      return source.replace(\n        reWrapComment,\n        '{\\n/* [wrapped with ' + details + '] */\\n'\n      );\n    }\n\n    /**\n         * Checks if `value` is a flattenable `arguments` object or array.\n         *\n         * @private\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is flattenable, else `false`.\n         */\n    function isFlattenable(value) {\n      return (\n        isArray(value) ||\n            isArguments(value) ||\n            !!(spreadableSymbol && value && value[spreadableSymbol])\n      );\n    }\n\n    /**\n         * Checks if `value` is a valid array-like index.\n         *\n         * @private\n         * @param {*} value The value to check.\n         * @param {number} [length=MAX_SAFE_INTEGER] The upper bounds of a valid index.\n         * @returns {boolean} Returns `true` if `value` is a valid index, else `false`.\n         */\n    function isIndex(value, length) {\n      var type = typeof value;\n      length = length == null ? MAX_SAFE_INTEGER : length;\n\n      return (\n        !!length &&\n            (type == 'number' || (type != 'symbol' && reIsUint.test(value))) &&\n            (value > -1 && value % 1 == 0 && value < length)\n      );\n    }\n\n    /**\n         * Checks if the given arguments are from an iteratee call.\n         *\n         * @private\n         * @param {*} value The potential iteratee value argument.\n         * @param {*} index The potential iteratee index or key argument.\n         * @param {*} object The potential iteratee object argument.\n         * @returns {boolean} Returns `true` if the arguments are from an iteratee call,\n         *  else `false`.\n         */\n    function isIterateeCall(value, index, object) {\n      if (!isObject(object)) {\n        return false;\n      }\n      var type = typeof index;\n      if (\n        type == 'number'\n          ? isArrayLike(object) && isIndex(index, object.length)\n          : type == 'string' && index in object\n      ) {\n        return eq(object[index], value);\n      }\n      return false;\n    }\n\n    /**\n         * Checks if `value` is a property name and not a property path.\n         *\n         * @private\n         * @param {*} value The value to check.\n         * @param {Object} [object] The object to query keys on.\n         * @returns {boolean} Returns `true` if `value` is a property name, else `false`.\n         */\n    function isKey(value, object) {\n      if (isArray(value)) {\n        return false;\n      }\n      var type = typeof value;\n      if (\n        type == 'number' ||\n            type == 'symbol' ||\n            type == 'boolean' ||\n            value == null ||\n            isSymbol(value)\n      ) {\n        return true;\n      }\n      return (\n        reIsPlainProp.test(value) ||\n            !reIsDeepProp.test(value) ||\n            (object != null && value in Object(object))\n      );\n    }\n\n    /**\n         * Checks if `value` is suitable for use as unique object key.\n         *\n         * @private\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is suitable, else `false`.\n         */\n    function isKeyable(value) {\n      var type = typeof value;\n      return type == 'string' ||\n            type == 'number' ||\n            type == 'symbol' ||\n            type == 'boolean'\n        ? value !== '__proto__'\n        : value === null;\n    }\n\n    /**\n         * Checks if `func` has a lazy counterpart.\n         *\n         * @private\n         * @param {Function} func The function to check.\n         * @returns {boolean} Returns `true` if `func` has a lazy counterpart,\n         *  else `false`.\n         */\n    function isLaziable(func) {\n      var funcName = getFuncName(func),\n        other = lodash[funcName];\n\n      if (typeof other !== 'function' || !(funcName in LazyWrapper.prototype)) {\n        return false;\n      }\n      if (func === other) {\n        return true;\n      }\n      var data = getData(other);\n      return !!data && func === data[0];\n    }\n\n    /**\n         * Checks if `func` has its source masked.\n         *\n         * @private\n         * @param {Function} func The function to check.\n         * @returns {boolean} Returns `true` if `func` is masked, else `false`.\n         */\n    function isMasked(func) {\n      return !!maskSrcKey && maskSrcKey in func;\n    }\n\n    /**\n         * Checks if `func` is capable of being masked.\n         *\n         * @private\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `func` is maskable, else `false`.\n         */\n    var isMaskable = coreJsData ? isFunction : stubFalse;\n\n    /**\n         * Checks if `value` is likely a prototype object.\n         *\n         * @private\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is a prototype, else `false`.\n         */\n    function isPrototype(value) {\n      var Ctor = value && value.constructor,\n        proto = (typeof Ctor === 'function' && Ctor.prototype) || objectProto;\n\n      return value === proto;\n    }\n\n    /**\n         * Checks if `value` is suitable for strict equality comparisons, i.e. `===`.\n         *\n         * @private\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` if suitable for strict\n         *  equality comparisons, else `false`.\n         */\n    function isStrictComparable(value) {\n      return value === value && !isObject(value);\n    }\n\n    /**\n         * A specialized version of `matchesProperty` for source values suitable\n         * for strict equality comparisons, i.e. `===`.\n         *\n         * @private\n         * @param {string} key The key of the property to get.\n         * @param {*} srcValue The value to match.\n         * @returns {Function} Returns the new spec function.\n         */\n    function matchesStrictComparable(key, srcValue) {\n      return function(object) {\n        if (object == null) {\n          return false;\n        }\n        return (\n          object[key] === srcValue &&\n               (srcValue !== undefined || key in Object(object))\n        );\n      };\n    }\n\n    /**\n         * A specialized version of `_.memoize` which clears the memoized function's\n         * cache when it exceeds `MAX_MEMOIZE_SIZE`.\n         *\n         * @private\n         * @param {Function} func The function to have its output memoized.\n         * @returns {Function} Returns the new memoized function.\n         */\n    function memoizeCapped(func) {\n      var result = memoize(func, function(key) {\n        if (cache.size === MAX_MEMOIZE_SIZE) {\n          cache.clear();\n        }\n        return key;\n      });\n\n      var cache = result.cache;\n      return result;\n    }\n\n    /**\n         * Merges the function metadata of `source` into `data`.\n         *\n         * Merging metadata reduces the number of wrappers used to invoke a function.\n         * This is possible because methods like `_.bind`, `_.curry`, and `_.partial`\n         * may be applied regardless of execution order. Methods like `_.ary` and\n         * `_.rearg` modify function arguments, making the order in which they are\n         * executed important, preventing the merging of metadata. However, we make\n         * an exception for a safe combined case where curried functions have `_.ary`\n         * and or `_.rearg` applied.\n         *\n         * @private\n         * @param {Array} data The destination metadata.\n         * @param {Array} source The source metadata.\n         * @returns {Array} Returns `data`.\n         */\n    function mergeData(data, source) {\n      var bitmask = data[1],\n        srcBitmask = source[1],\n        newBitmask = bitmask | srcBitmask,\n        isCommon =\n               newBitmask < (WRAP_BIND_FLAG | WRAP_BIND_KEY_FLAG | WRAP_ARY_FLAG);\n\n      var isCombo =\n            (srcBitmask == WRAP_ARY_FLAG && bitmask == WRAP_CURRY_FLAG) ||\n            (srcBitmask == WRAP_ARY_FLAG &&\n               bitmask == WRAP_REARG_FLAG &&\n               data[7].length <= source[8]) ||\n            (srcBitmask == (WRAP_ARY_FLAG | WRAP_REARG_FLAG) &&\n               source[7].length <= source[8] &&\n               bitmask == WRAP_CURRY_FLAG);\n\n      // Exit early if metadata can't be merged.\n      if (!(isCommon || isCombo)) {\n        return data;\n      }\n      // Use source `thisArg` if available.\n      if (srcBitmask & WRAP_BIND_FLAG) {\n        data[2] = source[2];\n        // Set when currying a bound function.\n        newBitmask |= bitmask & WRAP_BIND_FLAG ? 0 : WRAP_CURRY_BOUND_FLAG;\n      }\n      // Compose partial arguments.\n      var value = source[3];\n      if (value) {\n        var partials = data[3];\n        data[3] = partials ? composeArgs(partials, value, source[4]) : value;\n        data[4] = partials ? replaceHolders(data[3], PLACEHOLDER) : source[4];\n      }\n      // Compose partial right arguments.\n      value = source[5];\n      if (value) {\n        partials = data[5];\n        data[5] = partials\n          ? composeArgsRight(partials, value, source[6])\n          : value;\n        data[6] = partials ? replaceHolders(data[5], PLACEHOLDER) : source[6];\n      }\n      // Use source `argPos` if available.\n      value = source[7];\n      if (value) {\n        data[7] = value;\n      }\n      // Use source `ary` if it's smaller.\n      if (srcBitmask & WRAP_ARY_FLAG) {\n        data[8] = data[8] == null ? source[8] : nativeMin(data[8], source[8]);\n      }\n      // Use source `arity` if one is not provided.\n      if (data[9] == null) {\n        data[9] = source[9];\n      }\n      // Use source `func` and merge bitmasks.\n      data[0] = source[0];\n      data[1] = newBitmask;\n\n      return data;\n    }\n\n    /**\n         * This function is like\n         * [`Object.keys`](http://ecma-international.org/ecma-262/7.0/#sec-object.keys)\n         * except that it includes inherited enumerable properties.\n         *\n         * @private\n         * @param {Object} object The object to query.\n         * @returns {Array} Returns the array of property names.\n         */\n    function nativeKeysIn(object) {\n      var result = [];\n      if (object != null) {\n        for (var key in Object(object)) {\n          result.push(key);\n        }\n      }\n      return result;\n    }\n\n    /**\n         * Converts `value` to a string using `Object.prototype.toString`.\n         *\n         * @private\n         * @param {*} value The value to convert.\n         * @returns {string} Returns the converted string.\n         */\n    function objectToString(value) {\n      return nativeObjectToString.call(value);\n    }\n\n    /**\n         * A specialized version of `baseRest` which transforms the rest array.\n         *\n         * @private\n         * @param {Function} func The function to apply a rest parameter to.\n         * @param {number} [start=func.length-1] The start position of the rest parameter.\n         * @param {Function} transform The rest array transform.\n         * @returns {Function} Returns the new function.\n         */\n    function overRest(func, start, transform) {\n      start = nativeMax(start === undefined ? func.length - 1 : start, 0);\n      return function() {\n        var args = arguments,\n          index = -1,\n          length = nativeMax(args.length - start, 0),\n          array = Array(length);\n\n        while (++index < length) {\n          array[index] = args[start + index];\n        }\n        index = -1;\n        var otherArgs = Array(start + 1);\n        while (++index < start) {\n          otherArgs[index] = args[index];\n        }\n        otherArgs[start] = transform(array);\n        return apply(func, this, otherArgs);\n      };\n    }\n\n    /**\n         * Gets the parent value at `path` of `object`.\n         *\n         * @private\n         * @param {Object} object The object to query.\n         * @param {Array} path The path to get the parent value of.\n         * @returns {*} Returns the parent value.\n         */\n    function parent(object, path) {\n      return path.length < 2 ? object : baseGet(object, baseSlice(path, 0, -1));\n    }\n\n    /**\n         * Reorder `array` according to the specified indexes where the element at\n         * the first index is assigned as the first element, the element at\n         * the second index is assigned as the second element, and so on.\n         *\n         * @private\n         * @param {Array} array The array to reorder.\n         * @param {Array} indexes The arranged array indexes.\n         * @returns {Array} Returns `array`.\n         */\n    function reorder(array, indexes) {\n      var arrLength = array.length,\n        length = nativeMin(indexes.length, arrLength),\n        oldArray = copyArray(array);\n\n      while (length--) {\n        var index = indexes[length];\n        array[length] = isIndex(index, arrLength) ? oldArray[index] : undefined;\n      }\n      return array;\n    }\n\n    /**\n         * Sets metadata for `func`.\n         *\n         * **Note:** If this function becomes hot, i.e. is invoked a lot in a short\n         * period of time, it will trip its breaker and transition to an identity\n         * function to avoid garbage collection pauses in V8. See\n         * [V8 issue 2070](https://bugs.chromium.org/p/v8/issues/detail?id=2070)\n         * for more details.\n         *\n         * @private\n         * @param {Function} func The function to associate metadata with.\n         * @param {*} data The metadata.\n         * @returns {Function} Returns `func`.\n         */\n    var setData = shortOut(baseSetData);\n\n    /**\n         * A simple wrapper around the global [`setTimeout`](https://mdn.io/setTimeout).\n         *\n         * @private\n         * @param {Function} func The function to delay.\n         * @param {number} wait The number of milliseconds to delay invocation.\n         * @returns {number|Object} Returns the timer id or timeout object.\n         */\n    var setTimeout =\n         ctxSetTimeout ||\n         function(func, wait) {\n           return root.setTimeout(func, wait);\n         };\n\n      /**\n       * Sets the `toString` method of `func` to return `string`.\n       *\n       * @private\n       * @param {Function} func The function to modify.\n       * @param {Function} string The `toString` result.\n       * @returns {Function} Returns `func`.\n       */\n    var setToString = shortOut(baseSetToString);\n\n    /**\n         * Sets the `toString` method of `wrapper` to mimic the source of `reference`\n         * with wrapper details in a comment at the top of the source body.\n         *\n         * @private\n         * @param {Function} wrapper The function to modify.\n         * @param {Function} reference The reference function.\n         * @param {number} bitmask The bitmask flags. See `createWrap` for more details.\n         * @returns {Function} Returns `wrapper`.\n         */\n    function setWrapToString(wrapper, reference, bitmask) {\n      var source = reference + '';\n      return setToString(\n        wrapper,\n        insertWrapDetails(\n          source,\n          updateWrapDetails(getWrapDetails(source), bitmask)\n        )\n      );\n    }\n\n    /**\n         * Creates a function that'll short out and invoke `identity` instead\n         * of `func` when it's called `HOT_COUNT` or more times in `HOT_SPAN`\n         * milliseconds.\n         *\n         * @private\n         * @param {Function} func The function to restrict.\n         * @returns {Function} Returns the new shortable function.\n         */\n    function shortOut(func) {\n      var count = 0,\n        lastCalled = 0;\n\n      return function() {\n        var stamp = nativeNow(),\n          remaining = HOT_SPAN - (stamp - lastCalled);\n\n        lastCalled = stamp;\n        if (remaining > 0) {\n          if (++count >= HOT_COUNT) {\n            return arguments[0];\n          }\n        } else {\n          count = 0;\n        }\n        return func.apply(undefined, arguments);\n      };\n    }\n\n    /**\n         * A specialized version of `_.shuffle` which mutates and sets the size of `array`.\n         *\n         * @private\n         * @param {Array} array The array to shuffle.\n         * @param {number} [size=array.length] The size of `array`.\n         * @returns {Array} Returns `array`.\n         */\n    function shuffleSelf(array, size) {\n      var index = -1,\n        length = array.length,\n        lastIndex = length - 1;\n\n      size = size === undefined ? length : size;\n      while (++index < size) {\n        var rand = baseRandom(index, lastIndex),\n          value = array[rand];\n\n        array[rand] = array[index];\n        array[index] = value;\n      }\n      array.length = size;\n      return array;\n    }\n\n    /**\n         * Converts `string` to a property path array.\n         *\n         * @private\n         * @param {string} string The string to convert.\n         * @returns {Array} Returns the property path array.\n         */\n    var stringToPath = memoizeCapped(function(string) {\n      var result = [];\n      if (string.charCodeAt(0) === 46 /* . */) {\n        result.push('');\n      }\n      string.replace(rePropName, function(match, number, quote, subString) {\n        result.push(\n          quote ? subString.replace(reEscapeChar, '$1') : number || match\n        );\n      });\n      return result;\n    });\n\n      /**\n       * Converts `value` to a string key if it's not a string or symbol.\n       *\n       * @private\n       * @param {*} value The value to inspect.\n       * @returns {string|symbol} Returns the key.\n       */\n    function toKey(value) {\n      if (typeof value === 'string' || isSymbol(value)) {\n        return value;\n      }\n      var result = value + '';\n      return result == '0' && 1 / value == -INFINITY ? '-0' : result;\n    }\n\n    /**\n         * Converts `func` to its source code.\n         *\n         * @private\n         * @param {Function} func The function to convert.\n         * @returns {string} Returns the source code.\n         */\n    function toSource(func) {\n      if (func != null) {\n        try {\n          return funcToString.call(func);\n        } catch (e) { }\n        try {\n          return func + '';\n        } catch (e) { }\n      }\n      return '';\n    }\n\n    /**\n         * Updates wrapper `details` based on `bitmask` flags.\n         *\n         * @private\n         * @returns {Array} details The details to modify.\n         * @param {number} bitmask The bitmask flags. See `createWrap` for more details.\n         * @returns {Array} Returns `details`.\n         */\n    function updateWrapDetails(details, bitmask) {\n      arrayEach(wrapFlags, function(pair) {\n        var value = '_.' + pair[0];\n        if (bitmask & pair[1] && !arrayIncludes(details, value)) {\n          details.push(value);\n        }\n      });\n      return details.sort();\n    }\n\n    /**\n         * Creates a clone of `wrapper`.\n         *\n         * @private\n         * @param {Object} wrapper The wrapper to clone.\n         * @returns {Object} Returns the cloned wrapper.\n         */\n    function wrapperClone(wrapper) {\n      if (wrapper instanceof LazyWrapper) {\n        return wrapper.clone();\n      }\n      var result = new LodashWrapper(wrapper.__wrapped__, wrapper.__chain__);\n      result.__actions__ = copyArray(wrapper.__actions__);\n      result.__index__ = wrapper.__index__;\n      result.__values__ = wrapper.__values__;\n      return result;\n    }\n\n    /* ------------------------------------------------------------------------*/\n\n    /**\n         * Creates an array of elements split into groups the length of `size`.\n         * If `array` can't be split evenly, the final chunk will be the remaining\n         * elements.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category Array\n         * @param {Array} array The array to process.\n         * @param {number} [size=1] The length of each chunk\n         * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.\n         * @returns {Array} Returns the new array of chunks.\n         * @example\n         *\n         * _.chunk(['a', 'b', 'c', 'd'], 2);\n         * // => [['a', 'b'], ['c', 'd']]\n         *\n         * _.chunk(['a', 'b', 'c', 'd'], 3);\n         * // => [['a', 'b', 'c'], ['d']]\n         */\n    function chunk(array, size, guard) {\n      if (guard ? isIterateeCall(array, size, guard) : size === undefined) {\n        size = 1;\n      } else {\n        size = nativeMax(toInteger(size), 0);\n      }\n      var length = array == null ? 0 : array.length;\n      if (!length || size < 1) {\n        return [];\n      }\n      var index = 0,\n        resIndex = 0,\n        result = Array(nativeCeil(length / size));\n\n      while (index < length) {\n        result[resIndex++] = baseSlice(array, index, (index += size));\n      }\n      return result;\n    }\n\n    /**\n         * Creates an array with all falsey values removed. The values `false`, `null`,\n         * `0`, `\"\"`, `undefined`, and `NaN` are falsey.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Array\n         * @param {Array} array The array to compact.\n         * @returns {Array} Returns the new array of filtered values.\n         * @example\n         *\n         * _.compact([0, 1, false, 2, '', 3]);\n         * // => [1, 2, 3]\n         */\n    function compact(array) {\n      var index = -1,\n        length = array == null ? 0 : array.length,\n        resIndex = 0,\n        result = [];\n\n      while (++index < length) {\n        var value = array[index];\n        if (value) {\n          result[resIndex++] = value;\n        }\n      }\n      return result;\n    }\n\n    /**\n         * Creates a new array concatenating `array` with any additional arrays\n         * and/or values.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Array\n         * @param {Array} array The array to concatenate.\n         * @param {...*} [values] The values to concatenate.\n         * @returns {Array} Returns the new concatenated array.\n         * @example\n         *\n         * var array = [1];\n         * var other = _.concat(array, 2, [3], [[4]]);\n         *\n         * console.log(other);\n         * // => [1, 2, 3, [4]]\n         *\n         * console.log(array);\n         * // => [1]\n         */\n    function concat() {\n      var length = arguments.length;\n      if (!length) {\n        return [];\n      }\n      var args = Array(length - 1),\n        array = arguments[0],\n        index = length;\n\n      while (index--) {\n        args[index - 1] = arguments[index];\n      }\n      return arrayPush(\n        isArray(array) ? copyArray(array) : [array],\n        baseFlatten(args, 1)\n      );\n    }\n\n    /**\n         * Creates an array of `array` values not included in the other given arrays\n         * using [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)\n         * for equality comparisons. The order and references of result values are\n         * determined by the first array.\n         *\n         * **Note:** Unlike `_.pullAll`, this method returns a new array.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Array\n         * @param {Array} array The array to inspect.\n         * @param {...Array} [values] The values to exclude.\n         * @returns {Array} Returns the new array of filtered values.\n         * @see _.without, _.xor\n         * @example\n         *\n         * _.difference([2, 1], [2, 3]);\n         * // => [1]\n         */\n    var difference = baseRest(function(array, values) {\n      return isArrayLikeObject(array)\n        ? baseDifference(array, baseFlatten(values, 1, isArrayLikeObject, true))\n        : [];\n    });\n\n      /**\n       * This method is like `_.difference` except that it accepts `iteratee` which\n       * is invoked for each element of `array` and `values` to generate the criterion\n       * by which they're compared. The order and references of result values are\n       * determined by the first array. The iteratee is invoked with one argument:\n       * (value).\n       *\n       * **Note:** Unlike `_.pullAllBy`, this method returns a new array.\n       *\n       * @static\n       * @memberOf _\n       * @since 4.0.0\n       * @category Array\n       * @param {Array} array The array to inspect.\n       * @param {...Array} [values] The values to exclude.\n       * @param {Function} [iteratee=_.identity] The iteratee invoked per element.\n       * @returns {Array} Returns the new array of filtered values.\n       * @example\n       *\n       * _.differenceBy([2.1, 1.2], [2.3, 3.4], Math.floor);\n       * // => [1.2]\n       *\n       * // The `_.property` iteratee shorthand.\n       * _.differenceBy([{ 'x': 2 }, { 'x': 1 }], [{ 'x': 1 }], 'x');\n       * // => [{ 'x': 2 }]\n       */\n    var differenceBy = baseRest(function(array, values) {\n      var iteratee = last(values);\n      if (isArrayLikeObject(iteratee)) {\n        iteratee = undefined;\n      }\n      return isArrayLikeObject(array)\n        ? baseDifference(\n          array,\n          baseFlatten(values, 1, isArrayLikeObject, true),\n          getIteratee(iteratee, 2)\n        )\n        : [];\n    });\n\n      /**\n       * This method is like `_.difference` except that it accepts `comparator`\n       * which is invoked to compare elements of `array` to `values`. The order and\n       * references of result values are determined by the first array. The comparator\n       * is invoked with two arguments: (arrVal, othVal).\n       *\n       * **Note:** Unlike `_.pullAllWith`, this method returns a new array.\n       *\n       * @static\n       * @memberOf _\n       * @since 4.0.0\n       * @category Array\n       * @param {Array} array The array to inspect.\n       * @param {...Array} [values] The values to exclude.\n       * @param {Function} [comparator] The comparator invoked per element.\n       * @returns {Array} Returns the new array of filtered values.\n       * @example\n       *\n       * var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }];\n       *\n       * _.differenceWith(objects, [{ 'x': 1, 'y': 2 }], _.isEqual);\n       * // => [{ 'x': 2, 'y': 1 }]\n       */\n    var differenceWith = baseRest(function(array, values) {\n      var comparator = last(values);\n      if (isArrayLikeObject(comparator)) {\n        comparator = undefined;\n      }\n      return isArrayLikeObject(array)\n        ? baseDifference(\n          array,\n          baseFlatten(values, 1, isArrayLikeObject, true),\n          undefined,\n          comparator\n        )\n        : [];\n    });\n\n      /**\n       * Creates a slice of `array` with `n` elements dropped from the beginning.\n       *\n       * @static\n       * @memberOf _\n       * @since 0.5.0\n       * @category Array\n       * @param {Array} array The array to query.\n       * @param {number} [n=1] The number of elements to drop.\n       * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.\n       * @returns {Array} Returns the slice of `array`.\n       * @example\n       *\n       * _.drop([1, 2, 3]);\n       * // => [2, 3]\n       *\n       * _.drop([1, 2, 3], 2);\n       * // => [3]\n       *\n       * _.drop([1, 2, 3], 5);\n       * // => []\n       *\n       * _.drop([1, 2, 3], 0);\n       * // => [1, 2, 3]\n       */\n    function drop(array, n, guard) {\n      var length = array == null ? 0 : array.length;\n      if (!length) {\n        return [];\n      }\n      n = guard || n === undefined ? 1 : toInteger(n);\n      return baseSlice(array, n < 0 ? 0 : n, length);\n    }\n\n    /**\n         * Creates a slice of `array` with `n` elements dropped from the end.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category Array\n         * @param {Array} array The array to query.\n         * @param {number} [n=1] The number of elements to drop.\n         * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.\n         * @returns {Array} Returns the slice of `array`.\n         * @example\n         *\n         * _.dropRight([1, 2, 3]);\n         * // => [1, 2]\n         *\n         * _.dropRight([1, 2, 3], 2);\n         * // => [1]\n         *\n         * _.dropRight([1, 2, 3], 5);\n         * // => []\n         *\n         * _.dropRight([1, 2, 3], 0);\n         * // => [1, 2, 3]\n         */\n    function dropRight(array, n, guard) {\n      var length = array == null ? 0 : array.length;\n      if (!length) {\n        return [];\n      }\n      n = guard || n === undefined ? 1 : toInteger(n);\n      n = length - n;\n      return baseSlice(array, 0, n < 0 ? 0 : n);\n    }\n\n    /**\n         * Creates a slice of `array` excluding elements dropped from the end.\n         * Elements are dropped until `predicate` returns falsey. The predicate is\n         * invoked with three arguments: (value, index, array).\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category Array\n         * @param {Array} array The array to query.\n         * @param {Function} [predicate=_.identity] The function invoked per iteration.\n         * @returns {Array} Returns the slice of `array`.\n         * @example\n         *\n         * var users = [\n         *   { 'user': 'barney',  'active': true },\n         *   { 'user': 'fred',    'active': false },\n         *   { 'user': 'pebbles', 'active': false }\n         * ];\n         *\n         * _.dropRightWhile(users, function(o) { return !o.active; });\n         * // => objects for ['barney']\n         *\n         * // The `_.matches` iteratee shorthand.\n         * _.dropRightWhile(users, { 'user': 'pebbles', 'active': false });\n         * // => objects for ['barney', 'fred']\n         *\n         * // The `_.matchesProperty` iteratee shorthand.\n         * _.dropRightWhile(users, ['active', false]);\n         * // => objects for ['barney']\n         *\n         * // The `_.property` iteratee shorthand.\n         * _.dropRightWhile(users, 'active');\n         * // => objects for ['barney', 'fred', 'pebbles']\n         */\n    function dropRightWhile(array, predicate) {\n      return array && array.length\n        ? baseWhile(array, getIteratee(predicate, 3), true, true)\n        : [];\n    }\n\n    /**\n         * Creates a slice of `array` excluding elements dropped from the beginning.\n         * Elements are dropped until `predicate` returns falsey. The predicate is\n         * invoked with three arguments: (value, index, array).\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category Array\n         * @param {Array} array The array to query.\n         * @param {Function} [predicate=_.identity] The function invoked per iteration.\n         * @returns {Array} Returns the slice of `array`.\n         * @example\n         *\n         * var users = [\n         *   { 'user': 'barney',  'active': false },\n         *   { 'user': 'fred',    'active': false },\n         *   { 'user': 'pebbles', 'active': true }\n         * ];\n         *\n         * _.dropWhile(users, function(o) { return !o.active; });\n         * // => objects for ['pebbles']\n         *\n         * // The `_.matches` iteratee shorthand.\n         * _.dropWhile(users, { 'user': 'barney', 'active': false });\n         * // => objects for ['fred', 'pebbles']\n         *\n         * // The `_.matchesProperty` iteratee shorthand.\n         * _.dropWhile(users, ['active', false]);\n         * // => objects for ['pebbles']\n         *\n         * // The `_.property` iteratee shorthand.\n         * _.dropWhile(users, 'active');\n         * // => objects for ['barney', 'fred', 'pebbles']\n         */\n    function dropWhile(array, predicate) {\n      return array && array.length\n        ? baseWhile(array, getIteratee(predicate, 3), true)\n        : [];\n    }\n\n    /**\n         * Fills elements of `array` with `value` from `start` up to, but not\n         * including, `end`.\n         *\n         * **Note:** This method mutates `array`.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.2.0\n         * @category Array\n         * @param {Array} array The array to fill.\n         * @param {*} value The value to fill `array` with.\n         * @param {number} [start=0] The start position.\n         * @param {number} [end=array.length] The end position.\n         * @returns {Array} Returns `array`.\n         * @example\n         *\n         * var array = [1, 2, 3];\n         *\n         * _.fill(array, 'a');\n         * console.log(array);\n         * // => ['a', 'a', 'a']\n         *\n         * _.fill(Array(3), 2);\n         * // => [2, 2, 2]\n         *\n         * _.fill([4, 6, 8, 10], '*', 1, 3);\n         * // => [4, '*', '*', 10]\n         */\n    function fill(array, value, start, end) {\n      var length = array == null ? 0 : array.length;\n      if (!length) {\n        return [];\n      }\n      if (\n        start &&\n            typeof start !== 'number' &&\n            isIterateeCall(array, value, start)\n      ) {\n        start = 0;\n        end = length;\n      }\n      return baseFill(array, value, start, end);\n    }\n\n    /**\n         * This method is like `_.find` except that it returns the index of the first\n         * element `predicate` returns truthy for instead of the element itself.\n         *\n         * @static\n         * @memberOf _\n         * @since 1.1.0\n         * @category Array\n         * @param {Array} array The array to inspect.\n         * @param {Function} [predicate=_.identity] The function invoked per iteration.\n         * @param {number} [fromIndex=0] The index to search from.\n         * @returns {number} Returns the index of the found element, else `-1`.\n         * @example\n         *\n         * var users = [\n         *   { 'user': 'barney',  'active': false },\n         *   { 'user': 'fred',    'active': false },\n         *   { 'user': 'pebbles', 'active': true }\n         * ];\n         *\n         * _.findIndex(users, function(o) { return o.user == 'barney'; });\n         * // => 0\n         *\n         * // The `_.matches` iteratee shorthand.\n         * _.findIndex(users, { 'user': 'fred', 'active': false });\n         * // => 1\n         *\n         * // The `_.matchesProperty` iteratee shorthand.\n         * _.findIndex(users, ['active', false]);\n         * // => 0\n         *\n         * // The `_.property` iteratee shorthand.\n         * _.findIndex(users, 'active');\n         * // => 2\n         */\n    function findIndex(array, predicate, fromIndex) {\n      var length = array == null ? 0 : array.length;\n      if (!length) {\n        return -1;\n      }\n      var index = fromIndex == null ? 0 : toInteger(fromIndex);\n      if (index < 0) {\n        index = nativeMax(length + index, 0);\n      }\n      return baseFindIndex(array, getIteratee(predicate, 3), index);\n    }\n\n    /**\n         * This method is like `_.findIndex` except that it iterates over elements\n         * of `collection` from right to left.\n         *\n         * @static\n         * @memberOf _\n         * @since 2.0.0\n         * @category Array\n         * @param {Array} array The array to inspect.\n         * @param {Function} [predicate=_.identity] The function invoked per iteration.\n         * @param {number} [fromIndex=array.length-1] The index to search from.\n         * @returns {number} Returns the index of the found element, else `-1`.\n         * @example\n         *\n         * var users = [\n         *   { 'user': 'barney',  'active': true },\n         *   { 'user': 'fred',    'active': false },\n         *   { 'user': 'pebbles', 'active': false }\n         * ];\n         *\n         * _.findLastIndex(users, function(o) { return o.user == 'pebbles'; });\n         * // => 2\n         *\n         * // The `_.matches` iteratee shorthand.\n         * _.findLastIndex(users, { 'user': 'barney', 'active': true });\n         * // => 0\n         *\n         * // The `_.matchesProperty` iteratee shorthand.\n         * _.findLastIndex(users, ['active', false]);\n         * // => 2\n         *\n         * // The `_.property` iteratee shorthand.\n         * _.findLastIndex(users, 'active');\n         * // => 0\n         */\n    function findLastIndex(array, predicate, fromIndex) {\n      var length = array == null ? 0 : array.length;\n      if (!length) {\n        return -1;\n      }\n      var index = length - 1;\n      if (fromIndex !== undefined) {\n        index = toInteger(fromIndex);\n        index =\n               fromIndex < 0\n                 ? nativeMax(length + index, 0)\n                 : nativeMin(index, length - 1);\n      }\n      return baseFindIndex(array, getIteratee(predicate, 3), index, true);\n    }\n\n    /**\n         * Flattens `array` a single level deep.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Array\n         * @param {Array} array The array to flatten.\n         * @returns {Array} Returns the new flattened array.\n         * @example\n         *\n         * _.flatten([1, [2, [3, [4]], 5]]);\n         * // => [1, 2, [3, [4]], 5]\n         */\n    function flatten(array) {\n      var length = array == null ? 0 : array.length;\n      return length ? baseFlatten(array, 1) : [];\n    }\n\n    /**\n         * Recursively flattens `array`.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category Array\n         * @param {Array} array The array to flatten.\n         * @returns {Array} Returns the new flattened array.\n         * @example\n         *\n         * _.flattenDeep([1, [2, [3, [4]], 5]]);\n         * // => [1, 2, 3, 4, 5]\n         */\n    function flattenDeep(array) {\n      var length = array == null ? 0 : array.length;\n      return length ? baseFlatten(array, INFINITY) : [];\n    }\n\n    /**\n         * Recursively flatten `array` up to `depth` times.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.4.0\n         * @category Array\n         * @param {Array} array The array to flatten.\n         * @param {number} [depth=1] The maximum recursion depth.\n         * @returns {Array} Returns the new flattened array.\n         * @example\n         *\n         * var array = [1, [2, [3, [4]], 5]];\n         *\n         * _.flattenDepth(array, 1);\n         * // => [1, 2, [3, [4]], 5]\n         *\n         * _.flattenDepth(array, 2);\n         * // => [1, 2, 3, [4], 5]\n         */\n    function flattenDepth(array, depth) {\n      var length = array == null ? 0 : array.length;\n      if (!length) {\n        return [];\n      }\n      depth = depth === undefined ? 1 : toInteger(depth);\n      return baseFlatten(array, depth);\n    }\n\n    /**\n         * The inverse of `_.toPairs`; this method returns an object composed\n         * from key-value `pairs`.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Array\n         * @param {Array} pairs The key-value pairs.\n         * @returns {Object} Returns the new object.\n         * @example\n         *\n         * _.fromPairs([['a', 1], ['b', 2]]);\n         * // => { 'a': 1, 'b': 2 }\n         */\n    function fromPairs(pairs) {\n      var index = -1,\n        length = pairs == null ? 0 : pairs.length,\n        result = {};\n\n      while (++index < length) {\n        var pair = pairs[index];\n        result[pair[0]] = pair[1];\n      }\n      return result;\n    }\n\n    /**\n         * Gets the first element of `array`.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @alias first\n         * @category Array\n         * @param {Array} array The array to query.\n         * @returns {*} Returns the first element of `array`.\n         * @example\n         *\n         * _.head([1, 2, 3]);\n         * // => 1\n         *\n         * _.head([]);\n         * // => undefined\n         */\n    function head(array) {\n      return array && array.length ? array[0] : undefined;\n    }\n\n    /**\n         * Gets the index at which the first occurrence of `value` is found in `array`\n         * using [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)\n         * for equality comparisons. If `fromIndex` is negative, it's used as the\n         * offset from the end of `array`.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Array\n         * @param {Array} array The array to inspect.\n         * @param {*} value The value to search for.\n         * @param {number} [fromIndex=0] The index to search from.\n         * @returns {number} Returns the index of the matched value, else `-1`.\n         * @example\n         *\n         * _.indexOf([1, 2, 1, 2], 2);\n         * // => 1\n         *\n         * // Search from the `fromIndex`.\n         * _.indexOf([1, 2, 1, 2], 2, 2);\n         * // => 3\n         */\n    function indexOf(array, value, fromIndex) {\n      var length = array == null ? 0 : array.length;\n      if (!length) {\n        return -1;\n      }\n      var index = fromIndex == null ? 0 : toInteger(fromIndex);\n      if (index < 0) {\n        index = nativeMax(length + index, 0);\n      }\n      return baseIndexOf(array, value, index);\n    }\n\n    /**\n         * Gets all but the last element of `array`.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Array\n         * @param {Array} array The array to query.\n         * @returns {Array} Returns the slice of `array`.\n         * @example\n         *\n         * _.initial([1, 2, 3]);\n         * // => [1, 2]\n         */\n    function initial(array) {\n      var length = array == null ? 0 : array.length;\n      return length ? baseSlice(array, 0, -1) : [];\n    }\n\n    /**\n         * Creates an array of unique values that are included in all given arrays\n         * using [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)\n         * for equality comparisons. The order and references of result values are\n         * determined by the first array.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Array\n         * @param {...Array} [arrays] The arrays to inspect.\n         * @returns {Array} Returns the new array of intersecting values.\n         * @example\n         *\n         * _.intersection([2, 1], [2, 3]);\n         * // => [2]\n         */\n    var intersection = baseRest(function(arrays) {\n      var mapped = arrayMap(arrays, castArrayLikeObject);\n      return mapped.length && mapped[0] === arrays[0]\n        ? baseIntersection(mapped)\n        : [];\n    });\n\n      /**\n       * This method is like `_.intersection` except that it accepts `iteratee`\n       * which is invoked for each element of each `arrays` to generate the criterion\n       * by which they're compared. The order and references of result values are\n       * determined by the first array. The iteratee is invoked with one argument:\n       * (value).\n       *\n       * @static\n       * @memberOf _\n       * @since 4.0.0\n       * @category Array\n       * @param {...Array} [arrays] The arrays to inspect.\n       * @param {Function} [iteratee=_.identity] The iteratee invoked per element.\n       * @returns {Array} Returns the new array of intersecting values.\n       * @example\n       *\n       * _.intersectionBy([2.1, 1.2], [2.3, 3.4], Math.floor);\n       * // => [2.1]\n       *\n       * // The `_.property` iteratee shorthand.\n       * _.intersectionBy([{ 'x': 1 }], [{ 'x': 2 }, { 'x': 1 }], 'x');\n       * // => [{ 'x': 1 }]\n       */\n    var intersectionBy = baseRest(function(arrays) {\n      var iteratee = last(arrays),\n        mapped = arrayMap(arrays, castArrayLikeObject);\n\n      if (iteratee === last(mapped)) {\n        iteratee = undefined;\n      } else {\n        mapped.pop();\n      }\n      return mapped.length && mapped[0] === arrays[0]\n        ? baseIntersection(mapped, getIteratee(iteratee, 2))\n        : [];\n    });\n\n      /**\n       * This method is like `_.intersection` except that it accepts `comparator`\n       * which is invoked to compare elements of `arrays`. The order and references\n       * of result values are determined by the first array. The comparator is\n       * invoked with two arguments: (arrVal, othVal).\n       *\n       * @static\n       * @memberOf _\n       * @since 4.0.0\n       * @category Array\n       * @param {...Array} [arrays] The arrays to inspect.\n       * @param {Function} [comparator] The comparator invoked per element.\n       * @returns {Array} Returns the new array of intersecting values.\n       * @example\n       *\n       * var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }];\n       * var others = [{ 'x': 1, 'y': 1 }, { 'x': 1, 'y': 2 }];\n       *\n       * _.intersectionWith(objects, others, _.isEqual);\n       * // => [{ 'x': 1, 'y': 2 }]\n       */\n    var intersectionWith = baseRest(function(arrays) {\n      var comparator = last(arrays),\n        mapped = arrayMap(arrays, castArrayLikeObject);\n\n      comparator = typeof comparator === 'function' ? comparator : undefined;\n      if (comparator) {\n        mapped.pop();\n      }\n      return mapped.length && mapped[0] === arrays[0]\n        ? baseIntersection(mapped, undefined, comparator)\n        : [];\n    });\n\n      /**\n       * Converts all elements in `array` into a string separated by `separator`.\n       *\n       * @static\n       * @memberOf _\n       * @since 4.0.0\n       * @category Array\n       * @param {Array} array The array to convert.\n       * @param {string} [separator=','] The element separator.\n       * @returns {string} Returns the joined string.\n       * @example\n       *\n       * _.join(['a', 'b', 'c'], '~');\n       * // => 'a~b~c'\n       */\n    function join(array, separator) {\n      return array == null ? '' : nativeJoin.call(array, separator);\n    }\n\n    /**\n         * Gets the last element of `array`.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Array\n         * @param {Array} array The array to query.\n         * @returns {*} Returns the last element of `array`.\n         * @example\n         *\n         * _.last([1, 2, 3]);\n         * // => 3\n         */\n    function last(array) {\n      var length = array == null ? 0 : array.length;\n      return length ? array[length - 1] : undefined;\n    }\n\n    /**\n         * This method is like `_.indexOf` except that it iterates over elements of\n         * `array` from right to left.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Array\n         * @param {Array} array The array to inspect.\n         * @param {*} value The value to search for.\n         * @param {number} [fromIndex=array.length-1] The index to search from.\n         * @returns {number} Returns the index of the matched value, else `-1`.\n         * @example\n         *\n         * _.lastIndexOf([1, 2, 1, 2], 2);\n         * // => 3\n         *\n         * // Search from the `fromIndex`.\n         * _.lastIndexOf([1, 2, 1, 2], 2, 2);\n         * // => 1\n         */\n    function lastIndexOf(array, value, fromIndex) {\n      var length = array == null ? 0 : array.length;\n      if (!length) {\n        return -1;\n      }\n      var index = length;\n      if (fromIndex !== undefined) {\n        index = toInteger(fromIndex);\n        index =\n               index < 0\n                 ? nativeMax(length + index, 0)\n                 : nativeMin(index, length - 1);\n      }\n      return value === value\n        ? strictLastIndexOf(array, value, index)\n        : baseFindIndex(array, baseIsNaN, index, true);\n    }\n\n    /**\n         * Gets the element at index `n` of `array`. If `n` is negative, the nth\n         * element from the end is returned.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.11.0\n         * @category Array\n         * @param {Array} array The array to query.\n         * @param {number} [n=0] The index of the element to return.\n         * @returns {*} Returns the nth element of `array`.\n         * @example\n         *\n         * var array = ['a', 'b', 'c', 'd'];\n         *\n         * _.nth(array, 1);\n         * // => 'b'\n         *\n         * _.nth(array, -2);\n         * // => 'c';\n         */\n    function nth(array, n) {\n      return array && array.length ? baseNth(array, toInteger(n)) : undefined;\n    }\n\n    /**\n         * Removes all given values from `array` using\n         * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)\n         * for equality comparisons.\n         *\n         * **Note:** Unlike `_.without`, this method mutates `array`. Use `_.remove`\n         * to remove elements from an array by predicate.\n         *\n         * @static\n         * @memberOf _\n         * @since 2.0.0\n         * @category Array\n         * @param {Array} array The array to modify.\n         * @param {...*} [values] The values to remove.\n         * @returns {Array} Returns `array`.\n         * @example\n         *\n         * var array = ['a', 'b', 'c', 'a', 'b', 'c'];\n         *\n         * _.pull(array, 'a', 'c');\n         * console.log(array);\n         * // => ['b', 'b']\n         */\n    var pull = baseRest(pullAll);\n\n    /**\n         * This method is like `_.pull` except that it accepts an array of values to remove.\n         *\n         * **Note:** Unlike `_.difference`, this method mutates `array`.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Array\n         * @param {Array} array The array to modify.\n         * @param {Array} values The values to remove.\n         * @returns {Array} Returns `array`.\n         * @example\n         *\n         * var array = ['a', 'b', 'c', 'a', 'b', 'c'];\n         *\n         * _.pullAll(array, ['a', 'c']);\n         * console.log(array);\n         * // => ['b', 'b']\n         */\n    function pullAll(array, values) {\n      return array && array.length && values && values.length\n        ? basePullAll(array, values)\n        : array;\n    }\n\n    /**\n         * This method is like `_.pullAll` except that it accepts `iteratee` which is\n         * invoked for each element of `array` and `values` to generate the criterion\n         * by which they're compared. The iteratee is invoked with one argument: (value).\n         *\n         * **Note:** Unlike `_.differenceBy`, this method mutates `array`.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Array\n         * @param {Array} array The array to modify.\n         * @param {Array} values The values to remove.\n         * @param {Function} [iteratee=_.identity] The iteratee invoked per element.\n         * @returns {Array} Returns `array`.\n         * @example\n         *\n         * var array = [{ 'x': 1 }, { 'x': 2 }, { 'x': 3 }, { 'x': 1 }];\n         *\n         * _.pullAllBy(array, [{ 'x': 1 }, { 'x': 3 }], 'x');\n         * console.log(array);\n         * // => [{ 'x': 2 }]\n         */\n    function pullAllBy(array, values, iteratee) {\n      return array && array.length && values && values.length\n        ? basePullAll(array, values, getIteratee(iteratee, 2))\n        : array;\n    }\n\n    /**\n         * This method is like `_.pullAll` except that it accepts `comparator` which\n         * is invoked to compare elements of `array` to `values`. The comparator is\n         * invoked with two arguments: (arrVal, othVal).\n         *\n         * **Note:** Unlike `_.differenceWith`, this method mutates `array`.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.6.0\n         * @category Array\n         * @param {Array} array The array to modify.\n         * @param {Array} values The values to remove.\n         * @param {Function} [comparator] The comparator invoked per element.\n         * @returns {Array} Returns `array`.\n         * @example\n         *\n         * var array = [{ 'x': 1, 'y': 2 }, { 'x': 3, 'y': 4 }, { 'x': 5, 'y': 6 }];\n         *\n         * _.pullAllWith(array, [{ 'x': 3, 'y': 4 }], _.isEqual);\n         * console.log(array);\n         * // => [{ 'x': 1, 'y': 2 }, { 'x': 5, 'y': 6 }]\n         */\n    function pullAllWith(array, values, comparator) {\n      return array && array.length && values && values.length\n        ? basePullAll(array, values, undefined, comparator)\n        : array;\n    }\n\n    /**\n         * Removes elements from `array` corresponding to `indexes` and returns an\n         * array of removed elements.\n         *\n         * **Note:** Unlike `_.at`, this method mutates `array`.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category Array\n         * @param {Array} array The array to modify.\n         * @param {...(number|number[])} [indexes] The indexes of elements to remove.\n         * @returns {Array} Returns the new array of removed elements.\n         * @example\n         *\n         * var array = ['a', 'b', 'c', 'd'];\n         * var pulled = _.pullAt(array, [1, 3]);\n         *\n         * console.log(array);\n         * // => ['a', 'c']\n         *\n         * console.log(pulled);\n         * // => ['b', 'd']\n         */\n    var pullAt = flatRest(function(array, indexes) {\n      var length = array == null ? 0 : array.length,\n        result = baseAt(array, indexes);\n\n      basePullAt(\n        array,\n        arrayMap(indexes, function(index) {\n          return isIndex(index, length) ? +index : index;\n        }).sort(compareAscending)\n      );\n\n      return result;\n    });\n\n      /**\n       * Removes all elements from `array` that `predicate` returns truthy for\n       * and returns an array of the removed elements. The predicate is invoked\n       * with three arguments: (value, index, array).\n       *\n       * **Note:** Unlike `_.filter`, this method mutates `array`. Use `_.pull`\n       * to pull elements from an array by value.\n       *\n       * @static\n       * @memberOf _\n       * @since 2.0.0\n       * @category Array\n       * @param {Array} array The array to modify.\n       * @param {Function} [predicate=_.identity] The function invoked per iteration.\n       * @returns {Array} Returns the new array of removed elements.\n       * @example\n       *\n       * var array = [1, 2, 3, 4];\n       * var evens = _.remove(array, function(n) {\n       *   return n % 2 == 0;\n       * });\n       *\n       * console.log(array);\n       * // => [1, 3]\n       *\n       * console.log(evens);\n       * // => [2, 4]\n       */\n    function remove(array, predicate) {\n      var result = [];\n      if (!(array && array.length)) {\n        return result;\n      }\n      var index = -1,\n        indexes = [],\n        length = array.length;\n\n      predicate = getIteratee(predicate, 3);\n      while (++index < length) {\n        var value = array[index];\n        if (predicate(value, index, array)) {\n          result.push(value);\n          indexes.push(index);\n        }\n      }\n      basePullAt(array, indexes);\n      return result;\n    }\n\n    /**\n         * Reverses `array` so that the first element becomes the last, the second\n         * element becomes the second to last, and so on.\n         *\n         * **Note:** This method mutates `array` and is based on\n         * [`Array#reverse`](https://mdn.io/Array/reverse).\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Array\n         * @param {Array} array The array to modify.\n         * @returns {Array} Returns `array`.\n         * @example\n         *\n         * var array = [1, 2, 3];\n         *\n         * _.reverse(array);\n         * // => [3, 2, 1]\n         *\n         * console.log(array);\n         * // => [3, 2, 1]\n         */\n    function reverse(array) {\n      return array == null ? array : nativeReverse.call(array);\n    }\n\n    /**\n         * Creates a slice of `array` from `start` up to, but not including, `end`.\n         *\n         * **Note:** This method is used instead of\n         * [`Array#slice`](https://mdn.io/Array/slice) to ensure dense arrays are\n         * returned.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category Array\n         * @param {Array} array The array to slice.\n         * @param {number} [start=0] The start position.\n         * @param {number} [end=array.length] The end position.\n         * @returns {Array} Returns the slice of `array`.\n         */\n    function slice(array, start, end) {\n      var length = array == null ? 0 : array.length;\n      if (!length) {\n        return [];\n      }\n      if (end && typeof end !== 'number' && isIterateeCall(array, start, end)) {\n        start = 0;\n        end = length;\n      } else {\n        start = start == null ? 0 : toInteger(start);\n        end = end === undefined ? length : toInteger(end);\n      }\n      return baseSlice(array, start, end);\n    }\n\n    /**\n         * Uses a binary search to determine the lowest index at which `value`\n         * should be inserted into `array` in order to maintain its sort order.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Array\n         * @param {Array} array The sorted array to inspect.\n         * @param {*} value The value to evaluate.\n         * @returns {number} Returns the index at which `value` should be inserted\n         *  into `array`.\n         * @example\n         *\n         * _.sortedIndex([30, 50], 40);\n         * // => 1\n         */\n    function sortedIndex(array, value) {\n      return baseSortedIndex(array, value);\n    }\n\n    /**\n         * This method is like `_.sortedIndex` except that it accepts `iteratee`\n         * which is invoked for `value` and each element of `array` to compute their\n         * sort ranking. The iteratee is invoked with one argument: (value).\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Array\n         * @param {Array} array The sorted array to inspect.\n         * @param {*} value The value to evaluate.\n         * @param {Function} [iteratee=_.identity] The iteratee invoked per element.\n         * @returns {number} Returns the index at which `value` should be inserted\n         *  into `array`.\n         * @example\n         *\n         * var objects = [{ 'x': 4 }, { 'x': 5 }];\n         *\n         * _.sortedIndexBy(objects, { 'x': 4 }, function(o) { return o.x; });\n         * // => 0\n         *\n         * // The `_.property` iteratee shorthand.\n         * _.sortedIndexBy(objects, { 'x': 4 }, 'x');\n         * // => 0\n         */\n    function sortedIndexBy(array, value, iteratee) {\n      return baseSortedIndexBy(array, value, getIteratee(iteratee, 2));\n    }\n\n    /**\n         * This method is like `_.indexOf` except that it performs a binary\n         * search on a sorted `array`.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Array\n         * @param {Array} array The array to inspect.\n         * @param {*} value The value to search for.\n         * @returns {number} Returns the index of the matched value, else `-1`.\n         * @example\n         *\n         * _.sortedIndexOf([4, 5, 5, 5, 6], 5);\n         * // => 1\n         */\n    function sortedIndexOf(array, value) {\n      var length = array == null ? 0 : array.length;\n      if (length) {\n        var index = baseSortedIndex(array, value);\n        if (index < length && eq(array[index], value)) {\n          return index;\n        }\n      }\n      return -1;\n    }\n\n    /**\n         * This method is like `_.sortedIndex` except that it returns the highest\n         * index at which `value` should be inserted into `array` in order to\n         * maintain its sort order.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category Array\n         * @param {Array} array The sorted array to inspect.\n         * @param {*} value The value to evaluate.\n         * @returns {number} Returns the index at which `value` should be inserted\n         *  into `array`.\n         * @example\n         *\n         * _.sortedLastIndex([4, 5, 5, 5, 6], 5);\n         * // => 4\n         */\n    function sortedLastIndex(array, value) {\n      return baseSortedIndex(array, value, true);\n    }\n\n    /**\n         * This method is like `_.sortedLastIndex` except that it accepts `iteratee`\n         * which is invoked for `value` and each element of `array` to compute their\n         * sort ranking. The iteratee is invoked with one argument: (value).\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Array\n         * @param {Array} array The sorted array to inspect.\n         * @param {*} value The value to evaluate.\n         * @param {Function} [iteratee=_.identity] The iteratee invoked per element.\n         * @returns {number} Returns the index at which `value` should be inserted\n         *  into `array`.\n         * @example\n         *\n         * var objects = [{ 'x': 4 }, { 'x': 5 }];\n         *\n         * _.sortedLastIndexBy(objects, { 'x': 4 }, function(o) { return o.x; });\n         * // => 1\n         *\n         * // The `_.property` iteratee shorthand.\n         * _.sortedLastIndexBy(objects, { 'x': 4 }, 'x');\n         * // => 1\n         */\n    function sortedLastIndexBy(array, value, iteratee) {\n      return baseSortedIndexBy(array, value, getIteratee(iteratee, 2), true);\n    }\n\n    /**\n         * This method is like `_.lastIndexOf` except that it performs a binary\n         * search on a sorted `array`.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Array\n         * @param {Array} array The array to inspect.\n         * @param {*} value The value to search for.\n         * @returns {number} Returns the index of the matched value, else `-1`.\n         * @example\n         *\n         * _.sortedLastIndexOf([4, 5, 5, 5, 6], 5);\n         * // => 3\n         */\n    function sortedLastIndexOf(array, value) {\n      var length = array == null ? 0 : array.length;\n      if (length) {\n        var index = baseSortedIndex(array, value, true) - 1;\n        if (eq(array[index], value)) {\n          return index;\n        }\n      }\n      return -1;\n    }\n\n    /**\n         * This method is like `_.uniq` except that it's designed and optimized\n         * for sorted arrays.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Array\n         * @param {Array} array The array to inspect.\n         * @returns {Array} Returns the new duplicate free array.\n         * @example\n         *\n         * _.sortedUniq([1, 1, 2]);\n         * // => [1, 2]\n         */\n    function sortedUniq(array) {\n      return array && array.length ? baseSortedUniq(array) : [];\n    }\n\n    /**\n         * This method is like `_.uniqBy` except that it's designed and optimized\n         * for sorted arrays.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Array\n         * @param {Array} array The array to inspect.\n         * @param {Function} [iteratee] The iteratee invoked per element.\n         * @returns {Array} Returns the new duplicate free array.\n         * @example\n         *\n         * _.sortedUniqBy([1.1, 1.2, 2.3, 2.4], Math.floor);\n         * // => [1.1, 2.3]\n         */\n    function sortedUniqBy(array, iteratee) {\n      return array && array.length\n        ? baseSortedUniq(array, getIteratee(iteratee, 2))\n        : [];\n    }\n\n    /**\n         * Gets all but the first element of `array`.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Array\n         * @param {Array} array The array to query.\n         * @returns {Array} Returns the slice of `array`.\n         * @example\n         *\n         * _.tail([1, 2, 3]);\n         * // => [2, 3]\n         */\n    function tail(array) {\n      var length = array == null ? 0 : array.length;\n      return length ? baseSlice(array, 1, length) : [];\n    }\n\n    /**\n         * Creates a slice of `array` with `n` elements taken from the beginning.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Array\n         * @param {Array} array The array to query.\n         * @param {number} [n=1] The number of elements to take.\n         * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.\n         * @returns {Array} Returns the slice of `array`.\n         * @example\n         *\n         * _.take([1, 2, 3]);\n         * // => [1]\n         *\n         * _.take([1, 2, 3], 2);\n         * // => [1, 2]\n         *\n         * _.take([1, 2, 3], 5);\n         * // => [1, 2, 3]\n         *\n         * _.take([1, 2, 3], 0);\n         * // => []\n         */\n    function take(array, n, guard) {\n      if (!(array && array.length)) {\n        return [];\n      }\n      n = guard || n === undefined ? 1 : toInteger(n);\n      return baseSlice(array, 0, n < 0 ? 0 : n);\n    }\n\n    /**\n         * Creates a slice of `array` with `n` elements taken from the end.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category Array\n         * @param {Array} array The array to query.\n         * @param {number} [n=1] The number of elements to take.\n         * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.\n         * @returns {Array} Returns the slice of `array`.\n         * @example\n         *\n         * _.takeRight([1, 2, 3]);\n         * // => [3]\n         *\n         * _.takeRight([1, 2, 3], 2);\n         * // => [2, 3]\n         *\n         * _.takeRight([1, 2, 3], 5);\n         * // => [1, 2, 3]\n         *\n         * _.takeRight([1, 2, 3], 0);\n         * // => []\n         */\n    function takeRight(array, n, guard) {\n      var length = array == null ? 0 : array.length;\n      if (!length) {\n        return [];\n      }\n      n = guard || n === undefined ? 1 : toInteger(n);\n      n = length - n;\n      return baseSlice(array, n < 0 ? 0 : n, length);\n    }\n\n    /**\n         * Creates a slice of `array` with elements taken from the end. Elements are\n         * taken until `predicate` returns falsey. The predicate is invoked with\n         * three arguments: (value, index, array).\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category Array\n         * @param {Array} array The array to query.\n         * @param {Function} [predicate=_.identity] The function invoked per iteration.\n         * @returns {Array} Returns the slice of `array`.\n         * @example\n         *\n         * var users = [\n         *   { 'user': 'barney',  'active': true },\n         *   { 'user': 'fred',    'active': false },\n         *   { 'user': 'pebbles', 'active': false }\n         * ];\n         *\n         * _.takeRightWhile(users, function(o) { return !o.active; });\n         * // => objects for ['fred', 'pebbles']\n         *\n         * // The `_.matches` iteratee shorthand.\n         * _.takeRightWhile(users, { 'user': 'pebbles', 'active': false });\n         * // => objects for ['pebbles']\n         *\n         * // The `_.matchesProperty` iteratee shorthand.\n         * _.takeRightWhile(users, ['active', false]);\n         * // => objects for ['fred', 'pebbles']\n         *\n         * // The `_.property` iteratee shorthand.\n         * _.takeRightWhile(users, 'active');\n         * // => []\n         */\n    function takeRightWhile(array, predicate) {\n      return array && array.length\n        ? baseWhile(array, getIteratee(predicate, 3), false, true)\n        : [];\n    }\n\n    /**\n         * Creates a slice of `array` with elements taken from the beginning. Elements\n         * are taken until `predicate` returns falsey. The predicate is invoked with\n         * three arguments: (value, index, array).\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category Array\n         * @param {Array} array The array to query.\n         * @param {Function} [predicate=_.identity] The function invoked per iteration.\n         * @returns {Array} Returns the slice of `array`.\n         * @example\n         *\n         * var users = [\n         *   { 'user': 'barney',  'active': false },\n         *   { 'user': 'fred',    'active': false },\n         *   { 'user': 'pebbles', 'active': true }\n         * ];\n         *\n         * _.takeWhile(users, function(o) { return !o.active; });\n         * // => objects for ['barney', 'fred']\n         *\n         * // The `_.matches` iteratee shorthand.\n         * _.takeWhile(users, { 'user': 'barney', 'active': false });\n         * // => objects for ['barney']\n         *\n         * // The `_.matchesProperty` iteratee shorthand.\n         * _.takeWhile(users, ['active', false]);\n         * // => objects for ['barney', 'fred']\n         *\n         * // The `_.property` iteratee shorthand.\n         * _.takeWhile(users, 'active');\n         * // => []\n         */\n    function takeWhile(array, predicate) {\n      return array && array.length\n        ? baseWhile(array, getIteratee(predicate, 3))\n        : [];\n    }\n\n    /**\n         * Creates an array of unique values, in order, from all given arrays using\n         * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)\n         * for equality comparisons.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Array\n         * @param {...Array} [arrays] The arrays to inspect.\n         * @returns {Array} Returns the new array of combined values.\n         * @example\n         *\n         * _.union([2], [1, 2]);\n         * // => [2, 1]\n         */\n    var union = baseRest(function(arrays) {\n      return baseUniq(baseFlatten(arrays, 1, isArrayLikeObject, true));\n    });\n\n      /**\n       * This method is like `_.union` except that it accepts `iteratee` which is\n       * invoked for each element of each `arrays` to generate the criterion by\n       * which uniqueness is computed. Result values are chosen from the first\n       * array in which the value occurs. The iteratee is invoked with one argument:\n       * (value).\n       *\n       * @static\n       * @memberOf _\n       * @since 4.0.0\n       * @category Array\n       * @param {...Array} [arrays] The arrays to inspect.\n       * @param {Function} [iteratee=_.identity] The iteratee invoked per element.\n       * @returns {Array} Returns the new array of combined values.\n       * @example\n       *\n       * _.unionBy([2.1], [1.2, 2.3], Math.floor);\n       * // => [2.1, 1.2]\n       *\n       * // The `_.property` iteratee shorthand.\n       * _.unionBy([{ 'x': 1 }], [{ 'x': 2 }, { 'x': 1 }], 'x');\n       * // => [{ 'x': 1 }, { 'x': 2 }]\n       */\n    var unionBy = baseRest(function(arrays) {\n      var iteratee = last(arrays);\n      if (isArrayLikeObject(iteratee)) {\n        iteratee = undefined;\n      }\n      return baseUniq(\n        baseFlatten(arrays, 1, isArrayLikeObject, true),\n        getIteratee(iteratee, 2)\n      );\n    });\n\n      /**\n       * This method is like `_.union` except that it accepts `comparator` which\n       * is invoked to compare elements of `arrays`. Result values are chosen from\n       * the first array in which the value occurs. The comparator is invoked\n       * with two arguments: (arrVal, othVal).\n       *\n       * @static\n       * @memberOf _\n       * @since 4.0.0\n       * @category Array\n       * @param {...Array} [arrays] The arrays to inspect.\n       * @param {Function} [comparator] The comparator invoked per element.\n       * @returns {Array} Returns the new array of combined values.\n       * @example\n       *\n       * var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }];\n       * var others = [{ 'x': 1, 'y': 1 }, { 'x': 1, 'y': 2 }];\n       *\n       * _.unionWith(objects, others, _.isEqual);\n       * // => [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }, { 'x': 1, 'y': 1 }]\n       */\n    var unionWith = baseRest(function(arrays) {\n      var comparator = last(arrays);\n      comparator = typeof comparator === 'function' ? comparator : undefined;\n      return baseUniq(\n        baseFlatten(arrays, 1, isArrayLikeObject, true),\n        undefined,\n        comparator\n      );\n    });\n\n      /**\n       * Creates a duplicate-free version of an array, using\n       * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)\n       * for equality comparisons, in which only the first occurrence of each element\n       * is kept. The order of result values is determined by the order they occur\n       * in the array.\n       *\n       * @static\n       * @memberOf _\n       * @since 0.1.0\n       * @category Array\n       * @param {Array} array The array to inspect.\n       * @returns {Array} Returns the new duplicate free array.\n       * @example\n       *\n       * _.uniq([2, 1, 2]);\n       * // => [2, 1]\n       */\n    function uniq(array) {\n      return array && array.length ? baseUniq(array) : [];\n    }\n\n    /**\n         * This method is like `_.uniq` except that it accepts `iteratee` which is\n         * invoked for each element in `array` to generate the criterion by which\n         * uniqueness is computed. The order of result values is determined by the\n         * order they occur in the array. The iteratee is invoked with one argument:\n         * (value).\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Array\n         * @param {Array} array The array to inspect.\n         * @param {Function} [iteratee=_.identity] The iteratee invoked per element.\n         * @returns {Array} Returns the new duplicate free array.\n         * @example\n         *\n         * _.uniqBy([2.1, 1.2, 2.3], Math.floor);\n         * // => [2.1, 1.2]\n         *\n         * // The `_.property` iteratee shorthand.\n         * _.uniqBy([{ 'x': 1 }, { 'x': 2 }, { 'x': 1 }], 'x');\n         * // => [{ 'x': 1 }, { 'x': 2 }]\n         */\n    function uniqBy(array, iteratee) {\n      return array && array.length\n        ? baseUniq(array, getIteratee(iteratee, 2))\n        : [];\n    }\n\n    /**\n         * This method is like `_.uniq` except that it accepts `comparator` which\n         * is invoked to compare elements of `array`. The order of result values is\n         * determined by the order they occur in the array.The comparator is invoked\n         * with two arguments: (arrVal, othVal).\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Array\n         * @param {Array} array The array to inspect.\n         * @param {Function} [comparator] The comparator invoked per element.\n         * @returns {Array} Returns the new duplicate free array.\n         * @example\n         *\n         * var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }, { 'x': 1, 'y': 2 }];\n         *\n         * _.uniqWith(objects, _.isEqual);\n         * // => [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }]\n         */\n    function uniqWith(array, comparator) {\n      comparator = typeof comparator === 'function' ? comparator : undefined;\n      return array && array.length\n        ? baseUniq(array, undefined, comparator)\n        : [];\n    }\n\n    /**\n         * This method is like `_.zip` except that it accepts an array of grouped\n         * elements and creates an array regrouping the elements to their pre-zip\n         * configuration.\n         *\n         * @static\n         * @memberOf _\n         * @since 1.2.0\n         * @category Array\n         * @param {Array} array The array of grouped elements to process.\n         * @returns {Array} Returns the new array of regrouped elements.\n         * @example\n         *\n         * var zipped = _.zip(['a', 'b'], [1, 2], [true, false]);\n         * // => [['a', 1, true], ['b', 2, false]]\n         *\n         * _.unzip(zipped);\n         * // => [['a', 'b'], [1, 2], [true, false]]\n         */\n    function unzip(array) {\n      if (!(array && array.length)) {\n        return [];\n      }\n      var length = 0;\n      array = arrayFilter(array, function(group) {\n        if (isArrayLikeObject(group)) {\n          length = nativeMax(group.length, length);\n          return true;\n        }\n      });\n      return baseTimes(length, function(index) {\n        return arrayMap(array, baseProperty(index));\n      });\n    }\n\n    /**\n         * This method is like `_.unzip` except that it accepts `iteratee` to specify\n         * how regrouped values should be combined. The iteratee is invoked with the\n         * elements of each group: (...group).\n         *\n         * @static\n         * @memberOf _\n         * @since 3.8.0\n         * @category Array\n         * @param {Array} array The array of grouped elements to process.\n         * @param {Function} [iteratee=_.identity] The function to combine\n         *  regrouped values.\n         * @returns {Array} Returns the new array of regrouped elements.\n         * @example\n         *\n         * var zipped = _.zip([1, 2], [10, 20], [100, 200]);\n         * // => [[1, 10, 100], [2, 20, 200]]\n         *\n         * _.unzipWith(zipped, _.add);\n         * // => [3, 30, 300]\n         */\n    function unzipWith(array, iteratee) {\n      if (!(array && array.length)) {\n        return [];\n      }\n      var result = unzip(array);\n      if (iteratee == null) {\n        return result;\n      }\n      return arrayMap(result, function(group) {\n        return apply(iteratee, undefined, group);\n      });\n    }\n\n    /**\n         * Creates an array excluding all given values using\n         * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)\n         * for equality comparisons.\n         *\n         * **Note:** Unlike `_.pull`, this method returns a new array.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Array\n         * @param {Array} array The array to inspect.\n         * @param {...*} [values] The values to exclude.\n         * @returns {Array} Returns the new array of filtered values.\n         * @see _.difference, _.xor\n         * @example\n         *\n         * _.without([2, 1, 2, 3], 1, 2);\n         * // => [3]\n         */\n    var without = baseRest(function(array, values) {\n      return isArrayLikeObject(array) ? baseDifference(array, values) : [];\n    });\n\n      /**\n       * Creates an array of unique values that is the\n       * [symmetric difference](https://en.wikipedia.org/wiki/Symmetric_difference)\n       * of the given arrays. The order of result values is determined by the order\n       * they occur in the arrays.\n       *\n       * @static\n       * @memberOf _\n       * @since 2.4.0\n       * @category Array\n       * @param {...Array} [arrays] The arrays to inspect.\n       * @returns {Array} Returns the new array of filtered values.\n       * @see _.difference, _.without\n       * @example\n       *\n       * _.xor([2, 1], [2, 3]);\n       * // => [1, 3]\n       */\n    var xor = baseRest(function(arrays) {\n      return baseXor(arrayFilter(arrays, isArrayLikeObject));\n    });\n\n      /**\n       * This method is like `_.xor` except that it accepts `iteratee` which is\n       * invoked for each element of each `arrays` to generate the criterion by\n       * which by which they're compared. The order of result values is determined\n       * by the order they occur in the arrays. The iteratee is invoked with one\n       * argument: (value).\n       *\n       * @static\n       * @memberOf _\n       * @since 4.0.0\n       * @category Array\n       * @param {...Array} [arrays] The arrays to inspect.\n       * @param {Function} [iteratee=_.identity] The iteratee invoked per element.\n       * @returns {Array} Returns the new array of filtered values.\n       * @example\n       *\n       * _.xorBy([2.1, 1.2], [2.3, 3.4], Math.floor);\n       * // => [1.2, 3.4]\n       *\n       * // The `_.property` iteratee shorthand.\n       * _.xorBy([{ 'x': 1 }], [{ 'x': 2 }, { 'x': 1 }], 'x');\n       * // => [{ 'x': 2 }]\n       */\n    var xorBy = baseRest(function(arrays) {\n      var iteratee = last(arrays);\n      if (isArrayLikeObject(iteratee)) {\n        iteratee = undefined;\n      }\n      return baseXor(\n        arrayFilter(arrays, isArrayLikeObject),\n        getIteratee(iteratee, 2)\n      );\n    });\n\n      /**\n       * This method is like `_.xor` except that it accepts `comparator` which is\n       * invoked to compare elements of `arrays`. The order of result values is\n       * determined by the order they occur in the arrays. The comparator is invoked\n       * with two arguments: (arrVal, othVal).\n       *\n       * @static\n       * @memberOf _\n       * @since 4.0.0\n       * @category Array\n       * @param {...Array} [arrays] The arrays to inspect.\n       * @param {Function} [comparator] The comparator invoked per element.\n       * @returns {Array} Returns the new array of filtered values.\n       * @example\n       *\n       * var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }];\n       * var others = [{ 'x': 1, 'y': 1 }, { 'x': 1, 'y': 2 }];\n       *\n       * _.xorWith(objects, others, _.isEqual);\n       * // => [{ 'x': 2, 'y': 1 }, { 'x': 1, 'y': 1 }]\n       */\n    var xorWith = baseRest(function(arrays) {\n      var comparator = last(arrays);\n      comparator = typeof comparator === 'function' ? comparator : undefined;\n      return baseXor(\n        arrayFilter(arrays, isArrayLikeObject),\n        undefined,\n        comparator\n      );\n    });\n\n      /**\n       * Creates an array of grouped elements, the first of which contains the\n       * first elements of the given arrays, the second of which contains the\n       * second elements of the given arrays, and so on.\n       *\n       * @static\n       * @memberOf _\n       * @since 0.1.0\n       * @category Array\n       * @param {...Array} [arrays] The arrays to process.\n       * @returns {Array} Returns the new array of grouped elements.\n       * @example\n       *\n       * _.zip(['a', 'b'], [1, 2], [true, false]);\n       * // => [['a', 1, true], ['b', 2, false]]\n       */\n    var zip = baseRest(unzip);\n\n    /**\n         * This method is like `_.fromPairs` except that it accepts two arrays,\n         * one of property identifiers and one of corresponding values.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.4.0\n         * @category Array\n         * @param {Array} [props=[]] The property identifiers.\n         * @param {Array} [values=[]] The property values.\n         * @returns {Object} Returns the new object.\n         * @example\n         *\n         * _.zipObject(['a', 'b'], [1, 2]);\n         * // => { 'a': 1, 'b': 2 }\n         */\n    function zipObject(props, values) {\n      return baseZipObject(props || [], values || [], assignValue);\n    }\n\n    /**\n         * This method is like `_.zipObject` except that it supports property paths.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.1.0\n         * @category Array\n         * @param {Array} [props=[]] The property identifiers.\n         * @param {Array} [values=[]] The property values.\n         * @returns {Object} Returns the new object.\n         * @example\n         *\n         * _.zipObjectDeep(['a.b[0].c', 'a.b[1].d'], [1, 2]);\n         * // => { 'a': { 'b': [{ 'c': 1 }, { 'd': 2 }] } }\n         */\n    function zipObjectDeep(props, values) {\n      return baseZipObject(props || [], values || [], baseSet);\n    }\n\n    /**\n         * This method is like `_.zip` except that it accepts `iteratee` to specify\n         * how grouped values should be combined. The iteratee is invoked with the\n         * elements of each group: (...group).\n         *\n         * @static\n         * @memberOf _\n         * @since 3.8.0\n         * @category Array\n         * @param {...Array} [arrays] The arrays to process.\n         * @param {Function} [iteratee=_.identity] The function to combine\n         *  grouped values.\n         * @returns {Array} Returns the new array of grouped elements.\n         * @example\n         *\n         * _.zipWith([1, 2], [10, 20], [100, 200], function(a, b, c) {\n         *   return a + b + c;\n         * });\n         * // => [111, 222]\n         */\n    var zipWith = baseRest(function(arrays) {\n      var length = arrays.length,\n        iteratee = length > 1 ? arrays[length - 1] : undefined;\n\n      iteratee =\n            typeof iteratee === 'function' ? (arrays.pop(), iteratee) : undefined;\n      return unzipWith(arrays, iteratee);\n    });\n\n      /* ------------------------------------------------------------------------*/\n\n      /**\n       * Creates a `lodash` wrapper instance that wraps `value` with explicit method\n       * chain sequences enabled. The result of such sequences must be unwrapped\n       * with `_#value`.\n       *\n       * @static\n       * @memberOf _\n       * @since 1.3.0\n       * @category Seq\n       * @param {*} value The value to wrap.\n       * @returns {Object} Returns the new `lodash` wrapper instance.\n       * @example\n       *\n       * var users = [\n       *   { 'user': 'barney',  'age': 36 },\n       *   { 'user': 'fred',    'age': 40 },\n       *   { 'user': 'pebbles', 'age': 1 }\n       * ];\n       *\n       * var youngest = _\n       *   .chain(users)\n       *   .sortBy('age')\n       *   .map(function(o) {\n       *     return o.user + ' is ' + o.age;\n       *   })\n       *   .head()\n       *   .value();\n       * // => 'pebbles is 1'\n       */\n    function chain(value) {\n      var result = lodash(value);\n      result.__chain__ = true;\n      return result;\n    }\n\n    /**\n         * This method invokes `interceptor` and returns `value`. The interceptor\n         * is invoked with one argument; (value). The purpose of this method is to\n         * \"tap into\" a method chain sequence in order to modify intermediate results.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Seq\n         * @param {*} value The value to provide to `interceptor`.\n         * @param {Function} interceptor The function to invoke.\n         * @returns {*} Returns `value`.\n         * @example\n         *\n         * _([1, 2, 3])\n         *  .tap(function(array) {\n         *    // Mutate input array.\n         *    array.pop();\n         *  })\n         *  .reverse()\n         *  .value();\n         * // => [2, 1]\n         */\n    function tap(value, interceptor) {\n      interceptor(value);\n      return value;\n    }\n\n    /**\n         * This method is like `_.tap` except that it returns the result of `interceptor`.\n         * The purpose of this method is to \"pass thru\" values replacing intermediate\n         * results in a method chain sequence.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category Seq\n         * @param {*} value The value to provide to `interceptor`.\n         * @param {Function} interceptor The function to invoke.\n         * @returns {*} Returns the result of `interceptor`.\n         * @example\n         *\n         * _('  abc  ')\n         *  .chain()\n         *  .trim()\n         *  .thru(function(value) {\n         *    return [value];\n         *  })\n         *  .value();\n         * // => ['abc']\n         */\n    function thru(value, interceptor) {\n      return interceptor(value);\n    }\n\n    /**\n         * This method is the wrapper version of `_.at`.\n         *\n         * @name at\n         * @memberOf _\n         * @since 1.0.0\n         * @category Seq\n         * @param {...(string|string[])} [paths] The property paths to pick.\n         * @returns {Object} Returns the new `lodash` wrapper instance.\n         * @example\n         *\n         * var object = { 'a': [{ 'b': { 'c': 3 } }, 4] };\n         *\n         * _(object).at(['a[0].b.c', 'a[1]']).value();\n         * // => [3, 4]\n         */\n    var wrapperAt = flatRest(function(paths) {\n      var length = paths.length,\n        start = length ? paths[0] : 0,\n        value = this.__wrapped__,\n        interceptor = function(object) {\n          return baseAt(object, paths);\n        };\n\n      if (\n        length > 1 ||\n            this.__actions__.length ||\n            !(value instanceof LazyWrapper) ||\n            !isIndex(start)\n      ) {\n        return this.thru(interceptor);\n      }\n      value = value.slice(start, +start + (length ? 1 : 0));\n      value.__actions__.push({\n        func: thru,\n        args: [interceptor],\n        thisArg: undefined\n      });\n      return new LodashWrapper(value, this.__chain__).thru(function(array) {\n        if (length && !array.length) {\n          array.push(undefined);\n        }\n        return array;\n      });\n    });\n\n      /**\n       * Creates a `lodash` wrapper instance with explicit method chain sequences enabled.\n       *\n       * @name chain\n       * @memberOf _\n       * @since 0.1.0\n       * @category Seq\n       * @returns {Object} Returns the new `lodash` wrapper instance.\n       * @example\n       *\n       * var users = [\n       *   { 'user': 'barney', 'age': 36 },\n       *   { 'user': 'fred',   'age': 40 }\n       * ];\n       *\n       * // A sequence without explicit chaining.\n       * _(users).head();\n       * // => { 'user': 'barney', 'age': 36 }\n       *\n       * // A sequence with explicit chaining.\n       * _(users)\n       *   .chain()\n       *   .head()\n       *   .pick('user')\n       *   .value();\n       * // => { 'user': 'barney' }\n       */\n    function wrapperChain() {\n      return chain(this);\n    }\n\n    /**\n         * Executes the chain sequence and returns the wrapped result.\n         *\n         * @name commit\n         * @memberOf _\n         * @since 3.2.0\n         * @category Seq\n         * @returns {Object} Returns the new `lodash` wrapper instance.\n         * @example\n         *\n         * var array = [1, 2];\n         * var wrapped = _(array).push(3);\n         *\n         * console.log(array);\n         * // => [1, 2]\n         *\n         * wrapped = wrapped.commit();\n         * console.log(array);\n         * // => [1, 2, 3]\n         *\n         * wrapped.last();\n         * // => 3\n         *\n         * console.log(array);\n         * // => [1, 2, 3]\n         */\n    function wrapperCommit() {\n      return new LodashWrapper(this.value(), this.__chain__);\n    }\n\n    /**\n         * Gets the next value on a wrapped object following the\n         * [iterator protocol](https://mdn.io/iteration_protocols#iterator).\n         *\n         * @name next\n         * @memberOf _\n         * @since 4.0.0\n         * @category Seq\n         * @returns {Object} Returns the next iterator value.\n         * @example\n         *\n         * var wrapped = _([1, 2]);\n         *\n         * wrapped.next();\n         * // => { 'done': false, 'value': 1 }\n         *\n         * wrapped.next();\n         * // => { 'done': false, 'value': 2 }\n         *\n         * wrapped.next();\n         * // => { 'done': true, 'value': undefined }\n         */\n    function wrapperNext() {\n      if (this.__values__ === undefined) {\n        this.__values__ = toArray(this.value());\n      }\n      var done = this.__index__ >= this.__values__.length,\n        value = done ? undefined : this.__values__[this.__index__++];\n\n      return { done: done, value: value };\n    }\n\n    /**\n         * Enables the wrapper to be iterable.\n         *\n         * @name Symbol.iterator\n         * @memberOf _\n         * @since 4.0.0\n         * @category Seq\n         * @returns {Object} Returns the wrapper object.\n         * @example\n         *\n         * var wrapped = _([1, 2]);\n         *\n         * wrapped[Symbol.iterator]() === wrapped;\n         * // => true\n         *\n         * Array.from(wrapped);\n         * // => [1, 2]\n         */\n    function wrapperToIterator() {\n      return this;\n    }\n\n    /**\n         * Creates a clone of the chain sequence planting `value` as the wrapped value.\n         *\n         * @name plant\n         * @memberOf _\n         * @since 3.2.0\n         * @category Seq\n         * @param {*} value The value to plant.\n         * @returns {Object} Returns the new `lodash` wrapper instance.\n         * @example\n         *\n         * function square(n) {\n         *   return n * n;\n         * }\n         *\n         * var wrapped = _([1, 2]).map(square);\n         * var other = wrapped.plant([3, 4]);\n         *\n         * other.value();\n         * // => [9, 16]\n         *\n         * wrapped.value();\n         * // => [1, 4]\n         */\n    function wrapperPlant(value) {\n      var result,\n        parent = this;\n\n      while (parent instanceof baseLodash) {\n        var clone = wrapperClone(parent);\n        clone.__index__ = 0;\n        clone.__values__ = undefined;\n        if (result) {\n          previous.__wrapped__ = clone;\n        } else {\n          result = clone;\n        }\n        var previous = clone;\n        parent = parent.__wrapped__;\n      }\n      previous.__wrapped__ = value;\n      return result;\n    }\n\n    /**\n         * This method is the wrapper version of `_.reverse`.\n         *\n         * **Note:** This method mutates the wrapped array.\n         *\n         * @name reverse\n         * @memberOf _\n         * @since 0.1.0\n         * @category Seq\n         * @returns {Object} Returns the new `lodash` wrapper instance.\n         * @example\n         *\n         * var array = [1, 2, 3];\n         *\n         * _(array).reverse().value()\n         * // => [3, 2, 1]\n         *\n         * console.log(array);\n         * // => [3, 2, 1]\n         */\n    function wrapperReverse() {\n      var value = this.__wrapped__;\n      if (value instanceof LazyWrapper) {\n        var wrapped = value;\n        if (this.__actions__.length) {\n          wrapped = new LazyWrapper(this);\n        }\n        wrapped = wrapped.reverse();\n        wrapped.__actions__.push({\n          func: thru,\n          args: [reverse],\n          thisArg: undefined\n        });\n        return new LodashWrapper(wrapped, this.__chain__);\n      }\n      return this.thru(reverse);\n    }\n\n    /**\n         * Executes the chain sequence to resolve the unwrapped value.\n         *\n         * @name value\n         * @memberOf _\n         * @since 0.1.0\n         * @alias toJSON, valueOf\n         * @category Seq\n         * @returns {*} Returns the resolved unwrapped value.\n         * @example\n         *\n         * _([1, 2, 3]).value();\n         * // => [1, 2, 3]\n         */\n    function wrapperValue() {\n      return baseWrapperValue(this.__wrapped__, this.__actions__);\n    }\n\n    /* ------------------------------------------------------------------------*/\n\n    /**\n         * Creates an object composed of keys generated from the results of running\n         * each element of `collection` thru `iteratee`. The corresponding value of\n         * each key is the number of times the key was returned by `iteratee`. The\n         * iteratee is invoked with one argument: (value).\n         *\n         * @static\n         * @memberOf _\n         * @since 0.5.0\n         * @category Collection\n         * @param {Array|Object} collection The collection to iterate over.\n         * @param {Function} [iteratee=_.identity] The iteratee to transform keys.\n         * @returns {Object} Returns the composed aggregate object.\n         * @example\n         *\n         * _.countBy([6.1, 4.2, 6.3], Math.floor);\n         * // => { '4': 1, '6': 2 }\n         *\n         * // The `_.property` iteratee shorthand.\n         * _.countBy(['one', 'two', 'three'], 'length');\n         * // => { '3': 2, '5': 1 }\n         */\n    var countBy = createAggregator(function(result, value, key) {\n      if (hasOwnProperty.call(result, key)) {\n        ++result[key];\n      } else {\n        baseAssignValue(result, key, 1);\n      }\n    });\n\n      /**\n       * Checks if `predicate` returns truthy for **all** elements of `collection`.\n       * Iteration is stopped once `predicate` returns falsey. The predicate is\n       * invoked with three arguments: (value, index|key, collection).\n       *\n       * **Note:** This method returns `true` for\n       * [empty collections](https://en.wikipedia.org/wiki/Empty_set) because\n       * [everything is true](https://en.wikipedia.org/wiki/Vacuous_truth) of\n       * elements of empty collections.\n       *\n       * @static\n       * @memberOf _\n       * @since 0.1.0\n       * @category Collection\n       * @param {Array|Object} collection The collection to iterate over.\n       * @param {Function} [predicate=_.identity] The function invoked per iteration.\n       * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.\n       * @returns {boolean} Returns `true` if all elements pass the predicate check,\n       *  else `false`.\n       * @example\n       *\n       * _.every([true, 1, null, 'yes'], Boolean);\n       * // => false\n       *\n       * var users = [\n       *   { 'user': 'barney', 'age': 36, 'active': false },\n       *   { 'user': 'fred',   'age': 40, 'active': false }\n       * ];\n       *\n       * // The `_.matches` iteratee shorthand.\n       * _.every(users, { 'user': 'barney', 'active': false });\n       * // => false\n       *\n       * // The `_.matchesProperty` iteratee shorthand.\n       * _.every(users, ['active', false]);\n       * // => true\n       *\n       * // The `_.property` iteratee shorthand.\n       * _.every(users, 'active');\n       * // => false\n       */\n    function every(collection, predicate, guard) {\n      var func = isArray(collection) ? arrayEvery : baseEvery;\n      if (guard && isIterateeCall(collection, predicate, guard)) {\n        predicate = undefined;\n      }\n      return func(collection, getIteratee(predicate, 3));\n    }\n\n    /**\n         * Iterates over elements of `collection`, returning an array of all elements\n         * `predicate` returns truthy for. The predicate is invoked with three\n         * arguments: (value, index|key, collection).\n         *\n         * **Note:** Unlike `_.remove`, this method returns a new array.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Collection\n         * @param {Array|Object} collection The collection to iterate over.\n         * @param {Function} [predicate=_.identity] The function invoked per iteration.\n         * @returns {Array} Returns the new filtered array.\n         * @see _.reject\n         * @example\n         *\n         * var users = [\n         *   { 'user': 'barney', 'age': 36, 'active': true },\n         *   { 'user': 'fred',   'age': 40, 'active': false }\n         * ];\n         *\n         * _.filter(users, function(o) { return !o.active; });\n         * // => objects for ['fred']\n         *\n         * // The `_.matches` iteratee shorthand.\n         * _.filter(users, { 'age': 36, 'active': true });\n         * // => objects for ['barney']\n         *\n         * // The `_.matchesProperty` iteratee shorthand.\n         * _.filter(users, ['active', false]);\n         * // => objects for ['fred']\n         *\n         * // The `_.property` iteratee shorthand.\n         * _.filter(users, 'active');\n         * // => objects for ['barney']\n         */\n    function filter(collection, predicate) {\n      var func = isArray(collection) ? arrayFilter : baseFilter;\n      return func(collection, getIteratee(predicate, 3));\n    }\n\n    /**\n         * Iterates over elements of `collection`, returning the first element\n         * `predicate` returns truthy for. The predicate is invoked with three\n         * arguments: (value, index|key, collection).\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Collection\n         * @param {Array|Object} collection The collection to inspect.\n         * @param {Function} [predicate=_.identity] The function invoked per iteration.\n         * @param {number} [fromIndex=0] The index to search from.\n         * @returns {*} Returns the matched element, else `undefined`.\n         * @example\n         *\n         * var users = [\n         *   { 'user': 'barney',  'age': 36, 'active': true },\n         *   { 'user': 'fred',    'age': 40, 'active': false },\n         *   { 'user': 'pebbles', 'age': 1,  'active': true }\n         * ];\n         *\n         * _.find(users, function(o) { return o.age < 40; });\n         * // => object for 'barney'\n         *\n         * // The `_.matches` iteratee shorthand.\n         * _.find(users, { 'age': 1, 'active': true });\n         * // => object for 'pebbles'\n         *\n         * // The `_.matchesProperty` iteratee shorthand.\n         * _.find(users, ['active', false]);\n         * // => object for 'fred'\n         *\n         * // The `_.property` iteratee shorthand.\n         * _.find(users, 'active');\n         * // => object for 'barney'\n         */\n    var find = createFind(findIndex);\n\n    /**\n         * This method is like `_.find` except that it iterates over elements of\n         * `collection` from right to left.\n         *\n         * @static\n         * @memberOf _\n         * @since 2.0.0\n         * @category Collection\n         * @param {Array|Object} collection The collection to inspect.\n         * @param {Function} [predicate=_.identity] The function invoked per iteration.\n         * @param {number} [fromIndex=collection.length-1] The index to search from.\n         * @returns {*} Returns the matched element, else `undefined`.\n         * @example\n         *\n         * _.findLast([1, 2, 3, 4], function(n) {\n         *   return n % 2 == 1;\n         * });\n         * // => 3\n         */\n    var findLast = createFind(findLastIndex);\n\n    /**\n         * Creates a flattened array of values by running each element in `collection`\n         * thru `iteratee` and flattening the mapped results. The iteratee is invoked\n         * with three arguments: (value, index|key, collection).\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Collection\n         * @param {Array|Object} collection The collection to iterate over.\n         * @param {Function} [iteratee=_.identity] The function invoked per iteration.\n         * @returns {Array} Returns the new flattened array.\n         * @example\n         *\n         * function duplicate(n) {\n         *   return [n, n];\n         * }\n         *\n         * _.flatMap([1, 2], duplicate);\n         * // => [1, 1, 2, 2]\n         */\n    function flatMap(collection, iteratee) {\n      return baseFlatten(map(collection, iteratee), 1);\n    }\n\n    /**\n         * This method is like `_.flatMap` except that it recursively flattens the\n         * mapped results.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.7.0\n         * @category Collection\n         * @param {Array|Object} collection The collection to iterate over.\n         * @param {Function} [iteratee=_.identity] The function invoked per iteration.\n         * @returns {Array} Returns the new flattened array.\n         * @example\n         *\n         * function duplicate(n) {\n         *   return [[[n, n]]];\n         * }\n         *\n         * _.flatMapDeep([1, 2], duplicate);\n         * // => [1, 1, 2, 2]\n         */\n    function flatMapDeep(collection, iteratee) {\n      return baseFlatten(map(collection, iteratee), INFINITY);\n    }\n\n    /**\n         * This method is like `_.flatMap` except that it recursively flattens the\n         * mapped results up to `depth` times.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.7.0\n         * @category Collection\n         * @param {Array|Object} collection The collection to iterate over.\n         * @param {Function} [iteratee=_.identity] The function invoked per iteration.\n         * @param {number} [depth=1] The maximum recursion depth.\n         * @returns {Array} Returns the new flattened array.\n         * @example\n         *\n         * function duplicate(n) {\n         *   return [[[n, n]]];\n         * }\n         *\n         * _.flatMapDepth([1, 2], duplicate, 2);\n         * // => [[1, 1], [2, 2]]\n         */\n    function flatMapDepth(collection, iteratee, depth) {\n      depth = depth === undefined ? 1 : toInteger(depth);\n      return baseFlatten(map(collection, iteratee), depth);\n    }\n\n    /**\n         * Iterates over elements of `collection` and invokes `iteratee` for each element.\n         * The iteratee is invoked with three arguments: (value, index|key, collection).\n         * Iteratee functions may exit iteration early by explicitly returning `false`.\n         *\n         * **Note:** As with other \"Collections\" methods, objects with a \"length\"\n         * property are iterated like arrays. To avoid this behavior use `_.forIn`\n         * or `_.forOwn` for object iteration.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @alias each\n         * @category Collection\n         * @param {Array|Object} collection The collection to iterate over.\n         * @param {Function} [iteratee=_.identity] The function invoked per iteration.\n         * @returns {Array|Object} Returns `collection`.\n         * @see _.forEachRight\n         * @example\n         *\n         * _.forEach([1, 2], function(value) {\n         *   console.log(value);\n         * });\n         * // => Logs `1` then `2`.\n         *\n         * _.forEach({ 'a': 1, 'b': 2 }, function(value, key) {\n         *   console.log(key);\n         * });\n         * // => Logs 'a' then 'b' (iteration order is not guaranteed).\n         */\n    function forEach(collection, iteratee) {\n      var func = isArray(collection) ? arrayEach : baseEach;\n      return func(collection, getIteratee(iteratee, 3));\n    }\n\n    /**\n         * This method is like `_.forEach` except that it iterates over elements of\n         * `collection` from right to left.\n         *\n         * @static\n         * @memberOf _\n         * @since 2.0.0\n         * @alias eachRight\n         * @category Collection\n         * @param {Array|Object} collection The collection to iterate over.\n         * @param {Function} [iteratee=_.identity] The function invoked per iteration.\n         * @returns {Array|Object} Returns `collection`.\n         * @see _.forEach\n         * @example\n         *\n         * _.forEachRight([1, 2], function(value) {\n         *   console.log(value);\n         * });\n         * // => Logs `2` then `1`.\n         */\n    function forEachRight(collection, iteratee) {\n      var func = isArray(collection) ? arrayEachRight : baseEachRight;\n      return func(collection, getIteratee(iteratee, 3));\n    }\n\n    /**\n         * Creates an object composed of keys generated from the results of running\n         * each element of `collection` thru `iteratee`. The order of grouped values\n         * is determined by the order they occur in `collection`. The corresponding\n         * value of each key is an array of elements responsible for generating the\n         * key. The iteratee is invoked with one argument: (value).\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Collection\n         * @param {Array|Object} collection The collection to iterate over.\n         * @param {Function} [iteratee=_.identity] The iteratee to transform keys.\n         * @returns {Object} Returns the composed aggregate object.\n         * @example\n         *\n         * _.groupBy([6.1, 4.2, 6.3], Math.floor);\n         * // => { '4': [4.2], '6': [6.1, 6.3] }\n         *\n         * // The `_.property` iteratee shorthand.\n         * _.groupBy(['one', 'two', 'three'], 'length');\n         * // => { '3': ['one', 'two'], '5': ['three'] }\n         */\n    var groupBy = createAggregator(function(result, value, key) {\n      if (hasOwnProperty.call(result, key)) {\n        result[key].push(value);\n      } else {\n        baseAssignValue(result, key, [value]);\n      }\n    });\n\n      /**\n       * Checks if `value` is in `collection`. If `collection` is a string, it's\n       * checked for a substring of `value`, otherwise\n       * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)\n       * is used for equality comparisons. If `fromIndex` is negative, it's used as\n       * the offset from the end of `collection`.\n       *\n       * @static\n       * @memberOf _\n       * @since 0.1.0\n       * @category Collection\n       * @param {Array|Object|string} collection The collection to inspect.\n       * @param {*} value The value to search for.\n       * @param {number} [fromIndex=0] The index to search from.\n       * @param- {Object} [guard] Enables use as an iteratee for methods like `_.reduce`.\n       * @returns {boolean} Returns `true` if `value` is found, else `false`.\n       * @example\n       *\n       * _.includes([1, 2, 3], 1);\n       * // => true\n       *\n       * _.includes([1, 2, 3], 1, 2);\n       * // => false\n       *\n       * _.includes({ 'a': 1, 'b': 2 }, 1);\n       * // => true\n       *\n       * _.includes('abcd', 'bc');\n       * // => true\n       */\n    function includes(collection, value, fromIndex, guard) {\n      collection = isArrayLike(collection) ? collection : values(collection);\n      fromIndex = fromIndex && !guard ? toInteger(fromIndex) : 0;\n\n      var length = collection.length;\n      if (fromIndex < 0) {\n        fromIndex = nativeMax(length + fromIndex, 0);\n      }\n      return isString(collection)\n        ? fromIndex <= length && collection.indexOf(value, fromIndex) > -1\n        : !!length && baseIndexOf(collection, value, fromIndex) > -1;\n    }\n\n    /**\n         * Invokes the method at `path` of each element in `collection`, returning\n         * an array of the results of each invoked method. Any additional arguments\n         * are provided to each invoked method. If `path` is a function, it's invoked\n         * for, and `this` bound to, each element in `collection`.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Collection\n         * @param {Array|Object} collection The collection to iterate over.\n         * @param {Array|Function|string} path The path of the method to invoke or\n         *  the function invoked per iteration.\n         * @param {...*} [args] The arguments to invoke each method with.\n         * @returns {Array} Returns the array of results.\n         * @example\n         *\n         * _.invokeMap([[5, 1, 7], [3, 2, 1]], 'sort');\n         * // => [[1, 5, 7], [1, 2, 3]]\n         *\n         * _.invokeMap([123, 456], String.prototype.split, '');\n         * // => [['1', '2', '3'], ['4', '5', '6']]\n         */\n    var invokeMap = baseRest(function(collection, path, args) {\n      var index = -1,\n        isFunc = typeof path === 'function',\n        result = isArrayLike(collection) ? Array(collection.length) : [];\n\n      baseEach(collection, function(value) {\n        result[++index] = isFunc\n          ? apply(path, value, args)\n          : baseInvoke(value, path, args);\n      });\n      return result;\n    });\n\n      /**\n       * Creates an object composed of keys generated from the results of running\n       * each element of `collection` thru `iteratee`. The corresponding value of\n       * each key is the last element responsible for generating the key. The\n       * iteratee is invoked with one argument: (value).\n       *\n       * @static\n       * @memberOf _\n       * @since 4.0.0\n       * @category Collection\n       * @param {Array|Object} collection The collection to iterate over.\n       * @param {Function} [iteratee=_.identity] The iteratee to transform keys.\n       * @returns {Object} Returns the composed aggregate object.\n       * @example\n       *\n       * var array = [\n       *   { 'dir': 'left', 'code': 97 },\n       *   { 'dir': 'right', 'code': 100 }\n       * ];\n       *\n       * _.keyBy(array, function(o) {\n       *   return String.fromCharCode(o.code);\n       * });\n       * // => { 'a': { 'dir': 'left', 'code': 97 }, 'd': { 'dir': 'right', 'code': 100 } }\n       *\n       * _.keyBy(array, 'dir');\n       * // => { 'left': { 'dir': 'left', 'code': 97 }, 'right': { 'dir': 'right', 'code': 100 } }\n       */\n    var keyBy = createAggregator(function(result, value, key) {\n      baseAssignValue(result, key, value);\n    });\n\n      /**\n       * Creates an array of values by running each element in `collection` thru\n       * `iteratee`. The iteratee is invoked with three arguments:\n       * (value, index|key, collection).\n       *\n       * Many lodash methods are guarded to work as iteratees for methods like\n       * `_.every`, `_.filter`, `_.map`, `_.mapValues`, `_.reject`, and `_.some`.\n       *\n       * The guarded methods are:\n       * `ary`, `chunk`, `curry`, `curryRight`, `drop`, `dropRight`, `every`,\n       * `fill`, `invert`, `parseInt`, `random`, `range`, `rangeRight`, `repeat`,\n       * `sampleSize`, `slice`, `some`, `sortBy`, `split`, `take`, `takeRight`,\n       * `template`, `trim`, `trimEnd`, `trimStart`, and `words`\n       *\n       * @static\n       * @memberOf _\n       * @since 0.1.0\n       * @category Collection\n       * @param {Array|Object} collection The collection to iterate over.\n       * @param {Function} [iteratee=_.identity] The function invoked per iteration.\n       * @returns {Array} Returns the new mapped array.\n       * @example\n       *\n       * function square(n) {\n       *   return n * n;\n       * }\n       *\n       * _.map([4, 8], square);\n       * // => [16, 64]\n       *\n       * _.map({ 'a': 4, 'b': 8 }, square);\n       * // => [16, 64] (iteration order is not guaranteed)\n       *\n       * var users = [\n       *   { 'user': 'barney' },\n       *   { 'user': 'fred' }\n       * ];\n       *\n       * // The `_.property` iteratee shorthand.\n       * _.map(users, 'user');\n       * // => ['barney', 'fred']\n       */\n    function map(collection, iteratee) {\n      var func = isArray(collection) ? arrayMap : baseMap;\n      return func(collection, getIteratee(iteratee, 3));\n    }\n\n    /**\n         * This method is like `_.sortBy` except that it allows specifying the sort\n         * orders of the iteratees to sort by. If `orders` is unspecified, all values\n         * are sorted in ascending order. Otherwise, specify an order of \"desc\" for\n         * descending or \"asc\" for ascending sort order of corresponding values.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Collection\n         * @param {Array|Object} collection The collection to iterate over.\n         * @param {Array[]|Function[]|Object[]|string[]} [iteratees=[_.identity]]\n         *  The iteratees to sort by.\n         * @param {string[]} [orders] The sort orders of `iteratees`.\n         * @param- {Object} [guard] Enables use as an iteratee for methods like `_.reduce`.\n         * @returns {Array} Returns the new sorted array.\n         * @example\n         *\n         * var users = [\n         *   { 'user': 'fred',   'age': 48 },\n         *   { 'user': 'barney', 'age': 34 },\n         *   { 'user': 'fred',   'age': 40 },\n         *   { 'user': 'barney', 'age': 36 }\n         * ];\n         *\n         * // Sort by `user` in ascending order and by `age` in descending order.\n         * _.orderBy(users, ['user', 'age'], ['asc', 'desc']);\n         * // => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]\n         */\n    function orderBy(collection, iteratees, orders, guard) {\n      if (collection == null) {\n        return [];\n      }\n      if (!isArray(iteratees)) {\n        iteratees = iteratees == null ? [] : [iteratees];\n      }\n      orders = guard ? undefined : orders;\n      if (!isArray(orders)) {\n        orders = orders == null ? [] : [orders];\n      }\n      return baseOrderBy(collection, iteratees, orders);\n    }\n\n    /**\n         * Creates an array of elements split into two groups, the first of which\n         * contains elements `predicate` returns truthy for, the second of which\n         * contains elements `predicate` returns falsey for. The predicate is\n         * invoked with one argument: (value).\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category Collection\n         * @param {Array|Object} collection The collection to iterate over.\n         * @param {Function} [predicate=_.identity] The function invoked per iteration.\n         * @returns {Array} Returns the array of grouped elements.\n         * @example\n         *\n         * var users = [\n         *   { 'user': 'barney',  'age': 36, 'active': false },\n         *   { 'user': 'fred',    'age': 40, 'active': true },\n         *   { 'user': 'pebbles', 'age': 1,  'active': false }\n         * ];\n         *\n         * _.partition(users, function(o) { return o.active; });\n         * // => objects for [['fred'], ['barney', 'pebbles']]\n         *\n         * // The `_.matches` iteratee shorthand.\n         * _.partition(users, { 'age': 1, 'active': false });\n         * // => objects for [['pebbles'], ['barney', 'fred']]\n         *\n         * // The `_.matchesProperty` iteratee shorthand.\n         * _.partition(users, ['active', false]);\n         * // => objects for [['barney', 'pebbles'], ['fred']]\n         *\n         * // The `_.property` iteratee shorthand.\n         * _.partition(users, 'active');\n         * // => objects for [['fred'], ['barney', 'pebbles']]\n         */\n    var partition = createAggregator(\n      function(result, value, key) {\n        result[key ? 0 : 1].push(value);\n      },\n      function() {\n        return [[], []];\n      }\n    );\n\n      /**\n       * Reduces `collection` to a value which is the accumulated result of running\n       * each element in `collection` thru `iteratee`, where each successive\n       * invocation is supplied the return value of the previous. If `accumulator`\n       * is not given, the first element of `collection` is used as the initial\n       * value. The iteratee is invoked with four arguments:\n       * (accumulator, value, index|key, collection).\n       *\n       * Many lodash methods are guarded to work as iteratees for methods like\n       * `_.reduce`, `_.reduceRight`, and `_.transform`.\n       *\n       * The guarded methods are:\n       * `assign`, `defaults`, `defaultsDeep`, `includes`, `merge`, `orderBy`,\n       * and `sortBy`\n       *\n       * @static\n       * @memberOf _\n       * @since 0.1.0\n       * @category Collection\n       * @param {Array|Object} collection The collection to iterate over.\n       * @param {Function} [iteratee=_.identity] The function invoked per iteration.\n       * @param {*} [accumulator] The initial value.\n       * @returns {*} Returns the accumulated value.\n       * @see _.reduceRight\n       * @example\n       *\n       * _.reduce([1, 2], function(sum, n) {\n       *   return sum + n;\n       * }, 0);\n       * // => 3\n       *\n       * _.reduce({ 'a': 1, 'b': 2, 'c': 1 }, function(result, value, key) {\n       *   (result[value] || (result[value] = [])).push(key);\n       *   return result;\n       * }, {});\n       * // => { '1': ['a', 'c'], '2': ['b'] } (iteration order is not guaranteed)\n       */\n    function reduce(collection, iteratee, accumulator) {\n      var func = isArray(collection) ? arrayReduce : baseReduce,\n        initAccum = arguments.length < 3;\n\n      return func(\n        collection,\n        getIteratee(iteratee, 4),\n        accumulator,\n        initAccum,\n        baseEach\n      );\n    }\n\n    /**\n         * This method is like `_.reduce` except that it iterates over elements of\n         * `collection` from right to left.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Collection\n         * @param {Array|Object} collection The collection to iterate over.\n         * @param {Function} [iteratee=_.identity] The function invoked per iteration.\n         * @param {*} [accumulator] The initial value.\n         * @returns {*} Returns the accumulated value.\n         * @see _.reduce\n         * @example\n         *\n         * var array = [[0, 1], [2, 3], [4, 5]];\n         *\n         * _.reduceRight(array, function(flattened, other) {\n         *   return flattened.concat(other);\n         * }, []);\n         * // => [4, 5, 2, 3, 0, 1]\n         */\n    function reduceRight(collection, iteratee, accumulator) {\n      var func = isArray(collection) ? arrayReduceRight : baseReduce,\n        initAccum = arguments.length < 3;\n\n      return func(\n        collection,\n        getIteratee(iteratee, 4),\n        accumulator,\n        initAccum,\n        baseEachRight\n      );\n    }\n\n    /**\n         * The opposite of `_.filter`; this method returns the elements of `collection`\n         * that `predicate` does **not** return truthy for.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Collection\n         * @param {Array|Object} collection The collection to iterate over.\n         * @param {Function} [predicate=_.identity] The function invoked per iteration.\n         * @returns {Array} Returns the new filtered array.\n         * @see _.filter\n         * @example\n         *\n         * var users = [\n         *   { 'user': 'barney', 'age': 36, 'active': false },\n         *   { 'user': 'fred',   'age': 40, 'active': true }\n         * ];\n         *\n         * _.reject(users, function(o) { return !o.active; });\n         * // => objects for ['fred']\n         *\n         * // The `_.matches` iteratee shorthand.\n         * _.reject(users, { 'age': 40, 'active': true });\n         * // => objects for ['barney']\n         *\n         * // The `_.matchesProperty` iteratee shorthand.\n         * _.reject(users, ['active', false]);\n         * // => objects for ['fred']\n         *\n         * // The `_.property` iteratee shorthand.\n         * _.reject(users, 'active');\n         * // => objects for ['barney']\n         */\n    function reject(collection, predicate) {\n      var func = isArray(collection) ? arrayFilter : baseFilter;\n      return func(collection, negate(getIteratee(predicate, 3)));\n    }\n\n    /**\n         * Gets a random element from `collection`.\n         *\n         * @static\n         * @memberOf _\n         * @since 2.0.0\n         * @category Collection\n         * @param {Array|Object} collection The collection to sample.\n         * @returns {*} Returns the random element.\n         * @example\n         *\n         * _.sample([1, 2, 3, 4]);\n         * // => 2\n         */\n    function sample(collection) {\n      var func = isArray(collection) ? arraySample : baseSample;\n      return func(collection);\n    }\n\n    /**\n         * Gets `n` random elements at unique keys from `collection` up to the\n         * size of `collection`.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Collection\n         * @param {Array|Object} collection The collection to sample.\n         * @param {number} [n=1] The number of elements to sample.\n         * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.\n         * @returns {Array} Returns the random elements.\n         * @example\n         *\n         * _.sampleSize([1, 2, 3], 2);\n         * // => [3, 1]\n         *\n         * _.sampleSize([1, 2, 3], 4);\n         * // => [2, 3, 1]\n         */\n    function sampleSize(collection, n, guard) {\n      if (guard ? isIterateeCall(collection, n, guard) : n === undefined) {\n        n = 1;\n      } else {\n        n = toInteger(n);\n      }\n      var func = isArray(collection) ? arraySampleSize : baseSampleSize;\n      return func(collection, n);\n    }\n\n    /**\n         * Creates an array of shuffled values, using a version of the\n         * [Fisher-Yates shuffle](https://en.wikipedia.org/wiki/Fisher-Yates_shuffle).\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Collection\n         * @param {Array|Object} collection The collection to shuffle.\n         * @returns {Array} Returns the new shuffled array.\n         * @example\n         *\n         * _.shuffle([1, 2, 3, 4]);\n         * // => [4, 1, 3, 2]\n         */\n    function shuffle(collection) {\n      var func = isArray(collection) ? arrayShuffle : baseShuffle;\n      return func(collection);\n    }\n\n    /**\n         * Gets the size of `collection` by returning its length for array-like\n         * values or the number of own enumerable string keyed properties for objects.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Collection\n         * @param {Array|Object|string} collection The collection to inspect.\n         * @returns {number} Returns the collection size.\n         * @example\n         *\n         * _.size([1, 2, 3]);\n         * // => 3\n         *\n         * _.size({ 'a': 1, 'b': 2 });\n         * // => 2\n         *\n         * _.size('pebbles');\n         * // => 7\n         */\n    function size(collection) {\n      if (collection == null) {\n        return 0;\n      }\n      if (isArrayLike(collection)) {\n        return isString(collection)\n          ? stringSize(collection)\n          : collection.length;\n      }\n      var tag = getTag(collection);\n      if (tag == mapTag || tag == setTag) {\n        return collection.size;\n      }\n      return baseKeys(collection).length;\n    }\n\n    /**\n         * Checks if `predicate` returns truthy for **any** element of `collection`.\n         * Iteration is stopped once `predicate` returns truthy. The predicate is\n         * invoked with three arguments: (value, index|key, collection).\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Collection\n         * @param {Array|Object} collection The collection to iterate over.\n         * @param {Function} [predicate=_.identity] The function invoked per iteration.\n         * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.\n         * @returns {boolean} Returns `true` if any element passes the predicate check,\n         *  else `false`.\n         * @example\n         *\n         * _.some([null, 0, 'yes', false], Boolean);\n         * // => true\n         *\n         * var users = [\n         *   { 'user': 'barney', 'active': true },\n         *   { 'user': 'fred',   'active': false }\n         * ];\n         *\n         * // The `_.matches` iteratee shorthand.\n         * _.some(users, { 'user': 'barney', 'active': false });\n         * // => false\n         *\n         * // The `_.matchesProperty` iteratee shorthand.\n         * _.some(users, ['active', false]);\n         * // => true\n         *\n         * // The `_.property` iteratee shorthand.\n         * _.some(users, 'active');\n         * // => true\n         */\n    function some(collection, predicate, guard) {\n      var func = isArray(collection) ? arraySome : baseSome;\n      if (guard && isIterateeCall(collection, predicate, guard)) {\n        predicate = undefined;\n      }\n      return func(collection, getIteratee(predicate, 3));\n    }\n\n    /**\n         * Creates an array of elements, sorted in ascending order by the results of\n         * running each element in a collection thru each iteratee. This method\n         * performs a stable sort, that is, it preserves the original sort order of\n         * equal elements. The iteratees are invoked with one argument: (value).\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Collection\n         * @param {Array|Object} collection The collection to iterate over.\n         * @param {...(Function|Function[])} [iteratees=[_.identity]]\n         *  The iteratees to sort by.\n         * @returns {Array} Returns the new sorted array.\n         * @example\n         *\n         * var users = [\n         *   { 'user': 'fred',   'age': 48 },\n         *   { 'user': 'barney', 'age': 36 },\n         *   { 'user': 'fred',   'age': 40 },\n         *   { 'user': 'barney', 'age': 34 }\n         * ];\n         *\n         * _.sortBy(users, [function(o) { return o.user; }]);\n         * // => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]\n         *\n         * _.sortBy(users, ['user', 'age']);\n         * // => objects for [['barney', 34], ['barney', 36], ['fred', 40], ['fred', 48]]\n         */\n    var sortBy = baseRest(function(collection, iteratees) {\n      if (collection == null) {\n        return [];\n      }\n      var length = iteratees.length;\n      if (\n        length > 1 &&\n            isIterateeCall(collection, iteratees[0], iteratees[1])\n      ) {\n        iteratees = [];\n      } else if (\n        length > 2 &&\n            isIterateeCall(iteratees[0], iteratees[1], iteratees[2])\n      ) {\n        iteratees = [iteratees[0]];\n      }\n      return baseOrderBy(collection, baseFlatten(iteratees, 1), []);\n    });\n\n      /* ------------------------------------------------------------------------*/\n\n      /**\n       * Gets the timestamp of the number of milliseconds that have elapsed since\n       * the Unix epoch (1 January 1970 00:00:00 UTC).\n       *\n       * @static\n       * @memberOf _\n       * @since 2.4.0\n       * @category Date\n       * @returns {number} Returns the timestamp.\n       * @example\n       *\n       * _.defer(function(stamp) {\n       *   console.log(_.now() - stamp);\n       * }, _.now());\n       * // => Logs the number of milliseconds it took for the deferred invocation.\n       */\n    var now =\n         ctxNow ||\n         function() {\n           return root.Date.now();\n         };\n\n      /* ------------------------------------------------------------------------*/\n\n      /**\n       * The opposite of `_.before`; this method creates a function that invokes\n       * `func` once it's called `n` or more times.\n       *\n       * @static\n       * @memberOf _\n       * @since 0.1.0\n       * @category Function\n       * @param {number} n The number of calls before `func` is invoked.\n       * @param {Function} func The function to restrict.\n       * @returns {Function} Returns the new restricted function.\n       * @example\n       *\n       * var saves = ['profile', 'settings'];\n       *\n       * var done = _.after(saves.length, function() {\n       *   console.log('done saving!');\n       * });\n       *\n       * _.forEach(saves, function(type) {\n       *   asyncSave({ 'type': type, 'complete': done });\n       * });\n       * // => Logs 'done saving!' after the two async saves have completed.\n       */\n    function after(n, func) {\n      if (typeof func !== 'function') {\n        throw new TypeError(FUNC_ERROR_TEXT);\n      }\n      n = toInteger(n);\n      return function() {\n        if (--n < 1) {\n          return func.apply(this, arguments);\n        }\n      };\n    }\n\n    /**\n         * Creates a function that invokes `func`, with up to `n` arguments,\n         * ignoring any additional arguments.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category Function\n         * @param {Function} func The function to cap arguments for.\n         * @param {number} [n=func.length] The arity cap.\n         * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.\n         * @returns {Function} Returns the new capped function.\n         * @example\n         *\n         * _.map(['6', '8', '10'], _.ary(parseInt, 1));\n         * // => [6, 8, 10]\n         */\n    function ary(func, n, guard) {\n      n = guard ? undefined : n;\n      n = func && n == null ? func.length : n;\n      return createWrap(\n        func,\n        WRAP_ARY_FLAG,\n        undefined,\n        undefined,\n        undefined,\n        undefined,\n        n\n      );\n    }\n\n    /**\n         * Creates a function that invokes `func`, with the `this` binding and arguments\n         * of the created function, while it's called less than `n` times. Subsequent\n         * calls to the created function return the result of the last `func` invocation.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category Function\n         * @param {number} n The number of calls at which `func` is no longer invoked.\n         * @param {Function} func The function to restrict.\n         * @returns {Function} Returns the new restricted function.\n         * @example\n         *\n         * jQuery(element).on('click', _.before(5, addContactToList));\n         * // => Allows adding up to 4 contacts to the list.\n         */\n    function before(n, func) {\n      var result;\n      if (typeof func !== 'function') {\n        throw new TypeError(FUNC_ERROR_TEXT);\n      }\n      n = toInteger(n);\n      return function() {\n        if (--n > 0) {\n          result = func.apply(this, arguments);\n        }\n        if (n <= 1) {\n          func = undefined;\n        }\n        return result;\n      };\n    }\n\n    /**\n         * Creates a function that invokes `func` with the `this` binding of `thisArg`\n         * and `partials` prepended to the arguments it receives.\n         *\n         * The `_.bind.placeholder` value, which defaults to `_` in monolithic builds,\n         * may be used as a placeholder for partially applied arguments.\n         *\n         * **Note:** Unlike native `Function#bind`, this method doesn't set the \"length\"\n         * property of bound functions.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Function\n         * @param {Function} func The function to bind.\n         * @param {*} thisArg The `this` binding of `func`.\n         * @param {...*} [partials] The arguments to be partially applied.\n         * @returns {Function} Returns the new bound function.\n         * @example\n         *\n         * function greet(greeting, punctuation) {\n         *   return greeting + ' ' + this.user + punctuation;\n         * }\n         *\n         * var object = { 'user': 'fred' };\n         *\n         * var bound = _.bind(greet, object, 'hi');\n         * bound('!');\n         * // => 'hi fred!'\n         *\n         * // Bound with placeholders.\n         * var bound = _.bind(greet, object, _, '!');\n         * bound('hi');\n         * // => 'hi fred!'\n         */\n    var bind = baseRest(function(func, thisArg, partials) {\n      var bitmask = WRAP_BIND_FLAG;\n      if (partials.length) {\n        var holders = replaceHolders(partials, getHolder(bind));\n        bitmask |= WRAP_PARTIAL_FLAG;\n      }\n      return createWrap(func, bitmask, thisArg, partials, holders);\n    });\n\n      /**\n       * Creates a function that invokes the method at `object[key]` with `partials`\n       * prepended to the arguments it receives.\n       *\n       * This method differs from `_.bind` by allowing bound functions to reference\n       * methods that may be redefined or don't yet exist. See\n       * [Peter Michaux's article](http://peter.michaux.ca/articles/lazy-function-definition-pattern)\n       * for more details.\n       *\n       * The `_.bindKey.placeholder` value, which defaults to `_` in monolithic\n       * builds, may be used as a placeholder for partially applied arguments.\n       *\n       * @static\n       * @memberOf _\n       * @since 0.10.0\n       * @category Function\n       * @param {Object} object The object to invoke the method on.\n       * @param {string} key The key of the method.\n       * @param {...*} [partials] The arguments to be partially applied.\n       * @returns {Function} Returns the new bound function.\n       * @example\n       *\n       * var object = {\n       *   'user': 'fred',\n       *   'greet': function(greeting, punctuation) {\n       *     return greeting + ' ' + this.user + punctuation;\n       *   }\n       * };\n       *\n       * var bound = _.bindKey(object, 'greet', 'hi');\n       * bound('!');\n       * // => 'hi fred!'\n       *\n       * object.greet = function(greeting, punctuation) {\n       *   return greeting + 'ya ' + this.user + punctuation;\n       * };\n       *\n       * bound('!');\n       * // => 'hiya fred!'\n       *\n       * // Bound with placeholders.\n       * var bound = _.bindKey(object, 'greet', _, '!');\n       * bound('hi');\n       * // => 'hiya fred!'\n       */\n    var bindKey = baseRest(function(object, key, partials) {\n      var bitmask = WRAP_BIND_FLAG | WRAP_BIND_KEY_FLAG;\n      if (partials.length) {\n        var holders = replaceHolders(partials, getHolder(bindKey));\n        bitmask |= WRAP_PARTIAL_FLAG;\n      }\n      return createWrap(key, bitmask, object, partials, holders);\n    });\n\n      /**\n       * Creates a function that accepts arguments of `func` and either invokes\n       * `func` returning its result, if at least `arity` number of arguments have\n       * been provided, or returns a function that accepts the remaining `func`\n       * arguments, and so on. The arity of `func` may be specified if `func.length`\n       * is not sufficient.\n       *\n       * The `_.curry.placeholder` value, which defaults to `_` in monolithic builds,\n       * may be used as a placeholder for provided arguments.\n       *\n       * **Note:** This method doesn't set the \"length\" property of curried functions.\n       *\n       * @static\n       * @memberOf _\n       * @since 2.0.0\n       * @category Function\n       * @param {Function} func The function to curry.\n       * @param {number} [arity=func.length] The arity of `func`.\n       * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.\n       * @returns {Function} Returns the new curried function.\n       * @example\n       *\n       * var abc = function(a, b, c) {\n       *   return [a, b, c];\n       * };\n       *\n       * var curried = _.curry(abc);\n       *\n       * curried(1)(2)(3);\n       * // => [1, 2, 3]\n       *\n       * curried(1, 2)(3);\n       * // => [1, 2, 3]\n       *\n       * curried(1, 2, 3);\n       * // => [1, 2, 3]\n       *\n       * // Curried with placeholders.\n       * curried(1)(_, 3)(2);\n       * // => [1, 2, 3]\n       */\n    function curry(func, arity, guard) {\n      arity = guard ? undefined : arity;\n      var result = createWrap(\n        func,\n        WRAP_CURRY_FLAG,\n        undefined,\n        undefined,\n        undefined,\n        undefined,\n        undefined,\n        arity\n      );\n      result.placeholder = curry.placeholder;\n      return result;\n    }\n\n    /**\n         * This method is like `_.curry` except that arguments are applied to `func`\n         * in the manner of `_.partialRight` instead of `_.partial`.\n         *\n         * The `_.curryRight.placeholder` value, which defaults to `_` in monolithic\n         * builds, may be used as a placeholder for provided arguments.\n         *\n         * **Note:** This method doesn't set the \"length\" property of curried functions.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category Function\n         * @param {Function} func The function to curry.\n         * @param {number} [arity=func.length] The arity of `func`.\n         * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.\n         * @returns {Function} Returns the new curried function.\n         * @example\n         *\n         * var abc = function(a, b, c) {\n         *   return [a, b, c];\n         * };\n         *\n         * var curried = _.curryRight(abc);\n         *\n         * curried(3)(2)(1);\n         * // => [1, 2, 3]\n         *\n         * curried(2, 3)(1);\n         * // => [1, 2, 3]\n         *\n         * curried(1, 2, 3);\n         * // => [1, 2, 3]\n         *\n         * // Curried with placeholders.\n         * curried(3)(1, _)(2);\n         * // => [1, 2, 3]\n         */\n    function curryRight(func, arity, guard) {\n      arity = guard ? undefined : arity;\n      var result = createWrap(\n        func,\n        WRAP_CURRY_RIGHT_FLAG,\n        undefined,\n        undefined,\n        undefined,\n        undefined,\n        undefined,\n        arity\n      );\n      result.placeholder = curryRight.placeholder;\n      return result;\n    }\n\n    /**\n         * Creates a debounced function that delays invoking `func` until after `wait`\n         * milliseconds have elapsed since the last time the debounced function was\n         * invoked. The debounced function comes with a `cancel` method to cancel\n         * delayed `func` invocations and a `flush` method to immediately invoke them.\n         * Provide `options` to indicate whether `func` should be invoked on the\n         * leading and/or trailing edge of the `wait` timeout. The `func` is invoked\n         * with the last arguments provided to the debounced function. Subsequent\n         * calls to the debounced function return the result of the last `func`\n         * invocation.\n         *\n         * **Note:** If `leading` and `trailing` options are `true`, `func` is\n         * invoked on the trailing edge of the timeout only if the debounced function\n         * is invoked more than once during the `wait` timeout.\n         *\n         * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred\n         * until to the next tick, similar to `setTimeout` with a timeout of `0`.\n         *\n         * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)\n         * for details over the differences between `_.debounce` and `_.throttle`.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Function\n         * @param {Function} func The function to debounce.\n         * @param {number} [wait=0] The number of milliseconds to delay.\n         * @param {Object} [options={}] The options object.\n         * @param {boolean} [options.leading=false]\n         *  Specify invoking on the leading edge of the timeout.\n         * @param {number} [options.maxWait]\n         *  The maximum time `func` is allowed to be delayed before it's invoked.\n         * @param {boolean} [options.trailing=true]\n         *  Specify invoking on the trailing edge of the timeout.\n         * @returns {Function} Returns the new debounced function.\n         * @example\n         *\n         * // Avoid costly calculations while the window size is in flux.\n         * jQuery(window).on('resize', _.debounce(calculateLayout, 150));\n         *\n         * // Invoke `sendMail` when clicked, debouncing subsequent calls.\n         * jQuery(element).on('click', _.debounce(sendMail, 300, {\n         *   'leading': true,\n         *   'trailing': false\n         * }));\n         *\n         * // Ensure `batchLog` is invoked once after 1 second of debounced calls.\n         * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });\n         * var source = new EventSource('/stream');\n         * jQuery(source).on('message', debounced);\n         *\n         * // Cancel the trailing debounced invocation.\n         * jQuery(window).on('popstate', debounced.cancel);\n         */\n    function debounce(func, wait, options) {\n      var lastArgs,\n        lastThis,\n        maxWait,\n        result,\n        timerId,\n        lastCallTime,\n        lastInvokeTime = 0,\n        leading = false,\n        maxing = false,\n        trailing = true;\n\n      if (typeof func !== 'function') {\n        throw new TypeError(FUNC_ERROR_TEXT);\n      }\n      wait = toNumber(wait) || 0;\n      if (isObject(options)) {\n        leading = !!options.leading;\n        maxing = 'maxWait' in options;\n        maxWait = maxing\n          ? nativeMax(toNumber(options.maxWait) || 0, wait)\n          : maxWait;\n        trailing = 'trailing' in options ? !!options.trailing : trailing;\n      }\n\n      function invokeFunc(time) {\n        var args = lastArgs,\n          thisArg = lastThis;\n\n        lastArgs = lastThis = undefined;\n        lastInvokeTime = time;\n        result = func.apply(thisArg, args);\n        return result;\n      }\n\n      function leadingEdge(time) {\n        // Reset any `maxWait` timer.\n        lastInvokeTime = time;\n        // Start the timer for the trailing edge.\n        timerId = setTimeout(timerExpired, wait);\n        // Invoke the leading edge.\n        return leading ? invokeFunc(time) : result;\n      }\n\n      function remainingWait(time) {\n        var timeSinceLastCall = time - lastCallTime,\n          timeSinceLastInvoke = time - lastInvokeTime,\n          timeWaiting = wait - timeSinceLastCall;\n\n        return maxing\n          ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke)\n          : timeWaiting;\n      }\n\n      function shouldInvoke(time) {\n        var timeSinceLastCall = time - lastCallTime,\n          timeSinceLastInvoke = time - lastInvokeTime;\n\n        // Either this is the first call, activity has stopped and we're at the\n        // trailing edge, the system time has gone backwards and we're treating\n        // it as the trailing edge, or we've hit the `maxWait` limit.\n        return (\n          lastCallTime === undefined ||\n               timeSinceLastCall >= wait ||\n               timeSinceLastCall < 0 ||\n               (maxing && timeSinceLastInvoke >= maxWait)\n        );\n      }\n\n      function timerExpired() {\n        var time = now();\n        if (shouldInvoke(time)) {\n          return trailingEdge(time);\n        }\n        // Restart the timer.\n        timerId = setTimeout(timerExpired, remainingWait(time));\n      }\n\n      function trailingEdge(time) {\n        timerId = undefined;\n\n        // Only invoke if we have `lastArgs` which means `func` has been\n        // debounced at least once.\n        if (trailing && lastArgs) {\n          return invokeFunc(time);\n        }\n        lastArgs = lastThis = undefined;\n        return result;\n      }\n\n      function cancel() {\n        if (timerId !== undefined) {\n          clearTimeout(timerId);\n        }\n        lastInvokeTime = 0;\n        lastArgs = lastCallTime = lastThis = timerId = undefined;\n      }\n\n      function flush() {\n        return timerId === undefined ? result : trailingEdge(now());\n      }\n\n      function debounced() {\n        var time = now(),\n          isInvoking = shouldInvoke(time);\n\n        lastArgs = arguments;\n        lastThis = this;\n        lastCallTime = time;\n\n        if (isInvoking) {\n          if (timerId === undefined) {\n            return leadingEdge(lastCallTime);\n          }\n          if (maxing) {\n            // Handle invocations in a tight loop.\n            timerId = setTimeout(timerExpired, wait);\n            return invokeFunc(lastCallTime);\n          }\n        }\n        if (timerId === undefined) {\n          timerId = setTimeout(timerExpired, wait);\n        }\n        return result;\n      }\n      debounced.cancel = cancel;\n      debounced.flush = flush;\n      return debounced;\n    }\n\n    /**\n         * Defers invoking the `func` until the current call stack has cleared. Any\n         * additional arguments are provided to `func` when it's invoked.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Function\n         * @param {Function} func The function to defer.\n         * @param {...*} [args] The arguments to invoke `func` with.\n         * @returns {number} Returns the timer id.\n         * @example\n         *\n         * _.defer(function(text) {\n         *   console.log(text);\n         * }, 'deferred');\n         * // => Logs 'deferred' after one millisecond.\n         */\n    var defer = baseRest(function(func, args) {\n      return baseDelay(func, 1, args);\n    });\n\n      /**\n       * Invokes `func` after `wait` milliseconds. Any additional arguments are\n       * provided to `func` when it's invoked.\n       *\n       * @static\n       * @memberOf _\n       * @since 0.1.0\n       * @category Function\n       * @param {Function} func The function to delay.\n       * @param {number} wait The number of milliseconds to delay invocation.\n       * @param {...*} [args] The arguments to invoke `func` with.\n       * @returns {number} Returns the timer id.\n       * @example\n       *\n       * _.delay(function(text) {\n       *   console.log(text);\n       * }, 1000, 'later');\n       * // => Logs 'later' after one second.\n       */\n    var delay = baseRest(function(func, wait, args) {\n      return baseDelay(func, toNumber(wait) || 0, args);\n    });\n\n      /**\n       * Creates a function that invokes `func` with arguments reversed.\n       *\n       * @static\n       * @memberOf _\n       * @since 4.0.0\n       * @category Function\n       * @param {Function} func The function to flip arguments for.\n       * @returns {Function} Returns the new flipped function.\n       * @example\n       *\n       * var flipped = _.flip(function() {\n       *   return _.toArray(arguments);\n       * });\n       *\n       * flipped('a', 'b', 'c', 'd');\n       * // => ['d', 'c', 'b', 'a']\n       */\n    function flip(func) {\n      return createWrap(func, WRAP_FLIP_FLAG);\n    }\n\n    /**\n         * Creates a function that memoizes the result of `func`. If `resolver` is\n         * provided, it determines the cache key for storing the result based on the\n         * arguments provided to the memoized function. By default, the first argument\n         * provided to the memoized function is used as the map cache key. The `func`\n         * is invoked with the `this` binding of the memoized function.\n         *\n         * **Note:** The cache is exposed as the `cache` property on the memoized\n         * function. Its creation may be customized by replacing the `_.memoize.Cache`\n         * constructor with one whose instances implement the\n         * [`Map`](http://ecma-international.org/ecma-262/7.0/#sec-properties-of-the-map-prototype-object)\n         * method interface of `clear`, `delete`, `get`, `has`, and `set`.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Function\n         * @param {Function} func The function to have its output memoized.\n         * @param {Function} [resolver] The function to resolve the cache key.\n         * @returns {Function} Returns the new memoized function.\n         * @example\n         *\n         * var object = { 'a': 1, 'b': 2 };\n         * var other = { 'c': 3, 'd': 4 };\n         *\n         * var values = _.memoize(_.values);\n         * values(object);\n         * // => [1, 2]\n         *\n         * values(other);\n         * // => [3, 4]\n         *\n         * object.a = 2;\n         * values(object);\n         * // => [1, 2]\n         *\n         * // Modify the result cache.\n         * values.cache.set(object, ['a', 'b']);\n         * values(object);\n         * // => ['a', 'b']\n         *\n         * // Replace `_.memoize.Cache`.\n         * _.memoize.Cache = WeakMap;\n         */\n    function memoize(func, resolver) {\n      if (\n        typeof func !== 'function' ||\n            (resolver != null && typeof resolver !== 'function')\n      ) {\n        throw new TypeError(FUNC_ERROR_TEXT);\n      }\n      var memoized = function() {\n        var args = arguments,\n          key = resolver ? resolver.apply(this, args) : args[0],\n          cache = memoized.cache;\n\n        if (cache.has(key)) {\n          return cache.get(key);\n        }\n        var result = func.apply(this, args);\n        memoized.cache = cache.set(key, result) || cache;\n        return result;\n      };\n      memoized.cache = new (memoize.Cache || MapCache)();\n      return memoized;\n    }\n\n    // Expose `MapCache`.\n    memoize.Cache = MapCache;\n\n    /**\n         * Creates a function that negates the result of the predicate `func`. The\n         * `func` predicate is invoked with the `this` binding and arguments of the\n         * created function.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category Function\n         * @param {Function} predicate The predicate to negate.\n         * @returns {Function} Returns the new negated function.\n         * @example\n         *\n         * function isEven(n) {\n         *   return n % 2 == 0;\n         * }\n         *\n         * _.filter([1, 2, 3, 4, 5, 6], _.negate(isEven));\n         * // => [1, 3, 5]\n         */\n    function negate(predicate) {\n      if (typeof predicate !== 'function') {\n        throw new TypeError(FUNC_ERROR_TEXT);\n      }\n      return function() {\n        var args = arguments;\n        switch (args.length) {\n          case 0:\n            return !predicate.call(this);\n          case 1:\n            return !predicate.call(this, args[0]);\n          case 2:\n            return !predicate.call(this, args[0], args[1]);\n          case 3:\n            return !predicate.call(this, args[0], args[1], args[2]);\n        }\n        return !predicate.apply(this, args);\n      };\n    }\n\n    /**\n         * Creates a function that is restricted to invoking `func` once. Repeat calls\n         * to the function return the value of the first invocation. The `func` is\n         * invoked with the `this` binding and arguments of the created function.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Function\n         * @param {Function} func The function to restrict.\n         * @returns {Function} Returns the new restricted function.\n         * @example\n         *\n         * var initialize = _.once(createApplication);\n         * initialize();\n         * initialize();\n         * // => `createApplication` is invoked once\n         */\n    function once(func) {\n      return before(2, func);\n    }\n\n    /**\n         * Creates a function that invokes `func` with its arguments transformed.\n         *\n         * @static\n         * @since 4.0.0\n         * @memberOf _\n         * @category Function\n         * @param {Function} func The function to wrap.\n         * @param {...(Function|Function[])} [transforms=[_.identity]]\n         *  The argument transforms.\n         * @returns {Function} Returns the new function.\n         * @example\n         *\n         * function doubled(n) {\n         *   return n * 2;\n         * }\n         *\n         * function square(n) {\n         *   return n * n;\n         * }\n         *\n         * var func = _.overArgs(function(x, y) {\n         *   return [x, y];\n         * }, [square, doubled]);\n         *\n         * func(9, 3);\n         * // => [81, 6]\n         *\n         * func(10, 5);\n         * // => [100, 10]\n         */\n    var overArgs = castRest(function(func, transforms) {\n      transforms =\n            transforms.length == 1 && isArray(transforms[0])\n              ? arrayMap(transforms[0], baseUnary(getIteratee()))\n              : arrayMap(baseFlatten(transforms, 1), baseUnary(getIteratee()));\n\n      var funcsLength = transforms.length;\n      return baseRest(function(args) {\n        var index = -1,\n          length = nativeMin(args.length, funcsLength);\n\n        while (++index < length) {\n          args[index] = transforms[index].call(this, args[index]);\n        }\n        return apply(func, this, args);\n      });\n    });\n\n      /**\n       * Creates a function that invokes `func` with `partials` prepended to the\n       * arguments it receives. This method is like `_.bind` except it does **not**\n       * alter the `this` binding.\n       *\n       * The `_.partial.placeholder` value, which defaults to `_` in monolithic\n       * builds, may be used as a placeholder for partially applied arguments.\n       *\n       * **Note:** This method doesn't set the \"length\" property of partially\n       * applied functions.\n       *\n       * @static\n       * @memberOf _\n       * @since 0.2.0\n       * @category Function\n       * @param {Function} func The function to partially apply arguments to.\n       * @param {...*} [partials] The arguments to be partially applied.\n       * @returns {Function} Returns the new partially applied function.\n       * @example\n       *\n       * function greet(greeting, name) {\n       *   return greeting + ' ' + name;\n       * }\n       *\n       * var sayHelloTo = _.partial(greet, 'hello');\n       * sayHelloTo('fred');\n       * // => 'hello fred'\n       *\n       * // Partially applied with placeholders.\n       * var greetFred = _.partial(greet, _, 'fred');\n       * greetFred('hi');\n       * // => 'hi fred'\n       */\n    var partial = baseRest(function(func, partials) {\n      var holders = replaceHolders(partials, getHolder(partial));\n      return createWrap(func, WRAP_PARTIAL_FLAG, undefined, partials, holders);\n    });\n\n      /**\n       * This method is like `_.partial` except that partially applied arguments\n       * are appended to the arguments it receives.\n       *\n       * The `_.partialRight.placeholder` value, which defaults to `_` in monolithic\n       * builds, may be used as a placeholder for partially applied arguments.\n       *\n       * **Note:** This method doesn't set the \"length\" property of partially\n       * applied functions.\n       *\n       * @static\n       * @memberOf _\n       * @since 1.0.0\n       * @category Function\n       * @param {Function} func The function to partially apply arguments to.\n       * @param {...*} [partials] The arguments to be partially applied.\n       * @returns {Function} Returns the new partially applied function.\n       * @example\n       *\n       * function greet(greeting, name) {\n       *   return greeting + ' ' + name;\n       * }\n       *\n       * var greetFred = _.partialRight(greet, 'fred');\n       * greetFred('hi');\n       * // => 'hi fred'\n       *\n       * // Partially applied with placeholders.\n       * var sayHelloTo = _.partialRight(greet, 'hello', _);\n       * sayHelloTo('fred');\n       * // => 'hello fred'\n       */\n    var partialRight = baseRest(function(func, partials) {\n      var holders = replaceHolders(partials, getHolder(partialRight));\n      return createWrap(\n        func,\n        WRAP_PARTIAL_RIGHT_FLAG,\n        undefined,\n        partials,\n        holders\n      );\n    });\n\n      /**\n       * Creates a function that invokes `func` with arguments arranged according\n       * to the specified `indexes` where the argument value at the first index is\n       * provided as the first argument, the argument value at the second index is\n       * provided as the second argument, and so on.\n       *\n       * @static\n       * @memberOf _\n       * @since 3.0.0\n       * @category Function\n       * @param {Function} func The function to rearrange arguments for.\n       * @param {...(number|number[])} indexes The arranged argument indexes.\n       * @returns {Function} Returns the new function.\n       * @example\n       *\n       * var rearged = _.rearg(function(a, b, c) {\n       *   return [a, b, c];\n       * }, [2, 0, 1]);\n       *\n       * rearged('b', 'c', 'a')\n       * // => ['a', 'b', 'c']\n       */\n    var rearg = flatRest(function(func, indexes) {\n      return createWrap(\n        func,\n        WRAP_REARG_FLAG,\n        undefined,\n        undefined,\n        undefined,\n        indexes\n      );\n    });\n\n      /**\n       * Creates a function that invokes `func` with the `this` binding of the\n       * created function and arguments from `start` and beyond provided as\n       * an array.\n       *\n       * **Note:** This method is based on the\n       * [rest parameter](https://mdn.io/rest_parameters).\n       *\n       * @static\n       * @memberOf _\n       * @since 4.0.0\n       * @category Function\n       * @param {Function} func The function to apply a rest parameter to.\n       * @param {number} [start=func.length-1] The start position of the rest parameter.\n       * @returns {Function} Returns the new function.\n       * @example\n       *\n       * var say = _.rest(function(what, names) {\n       *   return what + ' ' + _.initial(names).join(', ') +\n       *     (_.size(names) > 1 ? ', & ' : '') + _.last(names);\n       * });\n       *\n       * say('hello', 'fred', 'barney', 'pebbles');\n       * // => 'hello fred, barney, & pebbles'\n       */\n    function rest(func, start) {\n      if (typeof func !== 'function') {\n        throw new TypeError(FUNC_ERROR_TEXT);\n      }\n      start = start === undefined ? start : toInteger(start);\n      return baseRest(func, start);\n    }\n\n    /**\n         * Creates a function that invokes `func` with the `this` binding of the\n         * create function and an array of arguments much like\n         * [`Function#apply`](http://www.ecma-international.org/ecma-262/7.0/#sec-function.prototype.apply).\n         *\n         * **Note:** This method is based on the\n         * [spread operator](https://mdn.io/spread_operator).\n         *\n         * @static\n         * @memberOf _\n         * @since 3.2.0\n         * @category Function\n         * @param {Function} func The function to spread arguments over.\n         * @param {number} [start=0] The start position of the spread.\n         * @returns {Function} Returns the new function.\n         * @example\n         *\n         * var say = _.spread(function(who, what) {\n         *   return who + ' says ' + what;\n         * });\n         *\n         * say(['fred', 'hello']);\n         * // => 'fred says hello'\n         *\n         * var numbers = Promise.all([\n         *   Promise.resolve(40),\n         *   Promise.resolve(36)\n         * ]);\n         *\n         * numbers.then(_.spread(function(x, y) {\n         *   return x + y;\n         * }));\n         * // => a Promise of 76\n         */\n    function spread(func, start) {\n      if (typeof func !== 'function') {\n        throw new TypeError(FUNC_ERROR_TEXT);\n      }\n      start = start == null ? 0 : nativeMax(toInteger(start), 0);\n      return baseRest(function(args) {\n        var array = args[start],\n          otherArgs = castSlice(args, 0, start);\n\n        if (array) {\n          arrayPush(otherArgs, array);\n        }\n        return apply(func, this, otherArgs);\n      });\n    }\n\n    /**\n         * Creates a throttled function that only invokes `func` at most once per\n         * every `wait` milliseconds. The throttled function comes with a `cancel`\n         * method to cancel delayed `func` invocations and a `flush` method to\n         * immediately invoke them. Provide `options` to indicate whether `func`\n         * should be invoked on the leading and/or trailing edge of the `wait`\n         * timeout. The `func` is invoked with the last arguments provided to the\n         * throttled function. Subsequent calls to the throttled function return the\n         * result of the last `func` invocation.\n         *\n         * **Note:** If `leading` and `trailing` options are `true`, `func` is\n         * invoked on the trailing edge of the timeout only if the throttled function\n         * is invoked more than once during the `wait` timeout.\n         *\n         * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred\n         * until to the next tick, similar to `setTimeout` with a timeout of `0`.\n         *\n         * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)\n         * for details over the differences between `_.throttle` and `_.debounce`.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Function\n         * @param {Function} func The function to throttle.\n         * @param {number} [wait=0] The number of milliseconds to throttle invocations to.\n         * @param {Object} [options={}] The options object.\n         * @param {boolean} [options.leading=true]\n         *  Specify invoking on the leading edge of the timeout.\n         * @param {boolean} [options.trailing=true]\n         *  Specify invoking on the trailing edge of the timeout.\n         * @returns {Function} Returns the new throttled function.\n         * @example\n         *\n         * // Avoid excessively updating the position while scrolling.\n         * jQuery(window).on('scroll', _.throttle(updatePosition, 100));\n         *\n         * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.\n         * var throttled = _.throttle(renewToken, 300000, { 'trailing': false });\n         * jQuery(element).on('click', throttled);\n         *\n         * // Cancel the trailing throttled invocation.\n         * jQuery(window).on('popstate', throttled.cancel);\n         */\n    function throttle(func, wait, options) {\n      var leading = true,\n        trailing = true;\n\n      if (typeof func !== 'function') {\n        throw new TypeError(FUNC_ERROR_TEXT);\n      }\n      if (isObject(options)) {\n        leading = 'leading' in options ? !!options.leading : leading;\n        trailing = 'trailing' in options ? !!options.trailing : trailing;\n      }\n      return debounce(func, wait, {\n        leading: leading,\n        maxWait: wait,\n        trailing: trailing\n      });\n    }\n\n    /**\n         * Creates a function that accepts up to one argument, ignoring any\n         * additional arguments.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Function\n         * @param {Function} func The function to cap arguments for.\n         * @returns {Function} Returns the new capped function.\n         * @example\n         *\n         * _.map(['6', '8', '10'], _.unary(parseInt));\n         * // => [6, 8, 10]\n         */\n    function unary(func) {\n      return ary(func, 1);\n    }\n\n    /**\n         * Creates a function that provides `value` to `wrapper` as its first\n         * argument. Any additional arguments provided to the function are appended\n         * to those provided to the `wrapper`. The wrapper is invoked with the `this`\n         * binding of the created function.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Function\n         * @param {*} value The value to wrap.\n         * @param {Function} [wrapper=identity] The wrapper function.\n         * @returns {Function} Returns the new function.\n         * @example\n         *\n         * var p = _.wrap(_.escape, function(func, text) {\n         *   return '<p>' + func(text) + '</p>';\n         * });\n         *\n         * p('fred, barney, & pebbles');\n         * // => '<p>fred, barney, &amp; pebbles</p>'\n         */\n    function wrap(value, wrapper) {\n      return partial(castFunction(wrapper), value);\n    }\n\n    /* ------------------------------------------------------------------------*/\n\n    /**\n         * Casts `value` as an array if it's not one.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.4.0\n         * @category Lang\n         * @param {*} value The value to inspect.\n         * @returns {Array} Returns the cast array.\n         * @example\n         *\n         * _.castArray(1);\n         * // => [1]\n         *\n         * _.castArray({ 'a': 1 });\n         * // => [{ 'a': 1 }]\n         *\n         * _.castArray('abc');\n         * // => ['abc']\n         *\n         * _.castArray(null);\n         * // => [null]\n         *\n         * _.castArray(undefined);\n         * // => [undefined]\n         *\n         * _.castArray();\n         * // => []\n         *\n         * var array = [1, 2, 3];\n         * console.log(_.castArray(array) === array);\n         * // => true\n         */\n    function castArray() {\n      if (!arguments.length) {\n        return [];\n      }\n      var value = arguments[0];\n      return isArray(value) ? value : [value];\n    }\n\n    /**\n         * Creates a shallow clone of `value`.\n         *\n         * **Note:** This method is loosely based on the\n         * [structured clone algorithm](https://mdn.io/Structured_clone_algorithm)\n         * and supports cloning arrays, array buffers, booleans, date objects, maps,\n         * numbers, `Object` objects, regexes, sets, strings, symbols, and typed\n         * arrays. The own enumerable properties of `arguments` objects are cloned\n         * as plain objects. An empty object is returned for uncloneable values such\n         * as error objects, functions, DOM nodes, and WeakMaps.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Lang\n         * @param {*} value The value to clone.\n         * @returns {*} Returns the cloned value.\n         * @see _.cloneDeep\n         * @example\n         *\n         * var objects = [{ 'a': 1 }, { 'b': 2 }];\n         *\n         * var shallow = _.clone(objects);\n         * console.log(shallow[0] === objects[0]);\n         * // => true\n         */\n    function clone(value) {\n      return baseClone(value, CLONE_SYMBOLS_FLAG);\n    }\n\n    /**\n         * This method is like `_.clone` except that it accepts `customizer` which\n         * is invoked to produce the cloned value. If `customizer` returns `undefined`,\n         * cloning is handled by the method instead. The `customizer` is invoked with\n         * up to four arguments; (value [, index|key, object, stack]).\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Lang\n         * @param {*} value The value to clone.\n         * @param {Function} [customizer] The function to customize cloning.\n         * @returns {*} Returns the cloned value.\n         * @see _.cloneDeepWith\n         * @example\n         *\n         * function customizer(value) {\n         *   if (_.isElement(value)) {\n         *     return value.cloneNode(false);\n         *   }\n         * }\n         *\n         * var el = _.cloneWith(document.body, customizer);\n         *\n         * console.log(el === document.body);\n         * // => false\n         * console.log(el.nodeName);\n         * // => 'BODY'\n         * console.log(el.childNodes.length);\n         * // => 0\n         */\n    function cloneWith(value, customizer) {\n      customizer = typeof customizer === 'function' ? customizer : undefined;\n      return baseClone(value, CLONE_SYMBOLS_FLAG, customizer);\n    }\n\n    /**\n         * This method is like `_.clone` except that it recursively clones `value`.\n         *\n         * @static\n         * @memberOf _\n         * @since 1.0.0\n         * @category Lang\n         * @param {*} value The value to recursively clone.\n         * @returns {*} Returns the deep cloned value.\n         * @see _.clone\n         * @example\n         *\n         * var objects = [{ 'a': 1 }, { 'b': 2 }];\n         *\n         * var deep = _.cloneDeep(objects);\n         * console.log(deep[0] === objects[0]);\n         * // => false\n         */\n    function cloneDeep(value) {\n      return baseClone(value, CLONE_DEEP_FLAG | CLONE_SYMBOLS_FLAG);\n    }\n\n    /**\n         * This method is like `_.cloneWith` except that it recursively clones `value`.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Lang\n         * @param {*} value The value to recursively clone.\n         * @param {Function} [customizer] The function to customize cloning.\n         * @returns {*} Returns the deep cloned value.\n         * @see _.cloneWith\n         * @example\n         *\n         * function customizer(value) {\n         *   if (_.isElement(value)) {\n         *     return value.cloneNode(true);\n         *   }\n         * }\n         *\n         * var el = _.cloneDeepWith(document.body, customizer);\n         *\n         * console.log(el === document.body);\n         * // => false\n         * console.log(el.nodeName);\n         * // => 'BODY'\n         * console.log(el.childNodes.length);\n         * // => 20\n         */\n    function cloneDeepWith(value, customizer) {\n      customizer = typeof customizer === 'function' ? customizer : undefined;\n      return baseClone(value, CLONE_DEEP_FLAG | CLONE_SYMBOLS_FLAG, customizer);\n    }\n\n    /**\n         * Checks if `object` conforms to `source` by invoking the predicate\n         * properties of `source` with the corresponding property values of `object`.\n         *\n         * **Note:** This method is equivalent to `_.conforms` when `source` is\n         * partially applied.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.14.0\n         * @category Lang\n         * @param {Object} object The object to inspect.\n         * @param {Object} source The object of property predicates to conform to.\n         * @returns {boolean} Returns `true` if `object` conforms, else `false`.\n         * @example\n         *\n         * var object = { 'a': 1, 'b': 2 };\n         *\n         * _.conformsTo(object, { 'b': function(n) { return n > 1; } });\n         * // => true\n         *\n         * _.conformsTo(object, { 'b': function(n) { return n > 2; } });\n         * // => false\n         */\n    function conformsTo(object, source) {\n      return source == null || baseConformsTo(object, source, keys(source));\n    }\n\n    /**\n         * Performs a\n         * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)\n         * comparison between two values to determine if they are equivalent.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Lang\n         * @param {*} value The value to compare.\n         * @param {*} other The other value to compare.\n         * @returns {boolean} Returns `true` if the values are equivalent, else `false`.\n         * @example\n         *\n         * var object = { 'a': 1 };\n         * var other = { 'a': 1 };\n         *\n         * _.eq(object, object);\n         * // => true\n         *\n         * _.eq(object, other);\n         * // => false\n         *\n         * _.eq('a', 'a');\n         * // => true\n         *\n         * _.eq('a', Object('a'));\n         * // => false\n         *\n         * _.eq(NaN, NaN);\n         * // => true\n         */\n    function eq(value, other) {\n      return value === other || (value !== value && other !== other);\n    }\n\n    /**\n         * Checks if `value` is greater than `other`.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.9.0\n         * @category Lang\n         * @param {*} value The value to compare.\n         * @param {*} other The other value to compare.\n         * @returns {boolean} Returns `true` if `value` is greater than `other`,\n         *  else `false`.\n         * @see _.lt\n         * @example\n         *\n         * _.gt(3, 1);\n         * // => true\n         *\n         * _.gt(3, 3);\n         * // => false\n         *\n         * _.gt(1, 3);\n         * // => false\n         */\n    var gt = createRelationalOperation(baseGt);\n\n    /**\n         * Checks if `value` is greater than or equal to `other`.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.9.0\n         * @category Lang\n         * @param {*} value The value to compare.\n         * @param {*} other The other value to compare.\n         * @returns {boolean} Returns `true` if `value` is greater than or equal to\n         *  `other`, else `false`.\n         * @see _.lte\n         * @example\n         *\n         * _.gte(3, 1);\n         * // => true\n         *\n         * _.gte(3, 3);\n         * // => true\n         *\n         * _.gte(1, 3);\n         * // => false\n         */\n    var gte = createRelationalOperation(function(value, other) {\n      return value >= other;\n    });\n\n      /**\n       * Checks if `value` is likely an `arguments` object.\n       *\n       * @static\n       * @memberOf _\n       * @since 0.1.0\n       * @category Lang\n       * @param {*} value The value to check.\n       * @returns {boolean} Returns `true` if `value` is an `arguments` object,\n       *  else `false`.\n       * @example\n       *\n       * _.isArguments(function() { return arguments; }());\n       * // => true\n       *\n       * _.isArguments([1, 2, 3]);\n       * // => false\n       */\n    var isArguments = baseIsArguments(\n      (function() {\n        return arguments;\n      })()\n    )\n      ? baseIsArguments\n      : function(value) {\n        return (\n          isObjectLike(value) &&\n               hasOwnProperty.call(value, 'callee') &&\n               !propertyIsEnumerable.call(value, 'callee')\n        );\n      };\n\n      /**\n       * Checks if `value` is classified as an `Array` object.\n       *\n       * @static\n       * @memberOf _\n       * @since 0.1.0\n       * @category Lang\n       * @param {*} value The value to check.\n       * @returns {boolean} Returns `true` if `value` is an array, else `false`.\n       * @example\n       *\n       * _.isArray([1, 2, 3]);\n       * // => true\n       *\n       * _.isArray(document.body.children);\n       * // => false\n       *\n       * _.isArray('abc');\n       * // => false\n       *\n       * _.isArray(_.noop);\n       * // => false\n       */\n    var isArray = Array.isArray;\n\n    /**\n         * Checks if `value` is classified as an `ArrayBuffer` object.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.3.0\n         * @category Lang\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is an array buffer, else `false`.\n         * @example\n         *\n         * _.isArrayBuffer(new ArrayBuffer(2));\n         * // => true\n         *\n         * _.isArrayBuffer(new Array(2));\n         * // => false\n         */\n    var isArrayBuffer = nodeIsArrayBuffer\n      ? baseUnary(nodeIsArrayBuffer)\n      : baseIsArrayBuffer;\n\n      /**\n       * Checks if `value` is array-like. A value is considered array-like if it's\n       * not a function and has a `value.length` that's an integer greater than or\n       * equal to `0` and less than or equal to `Number.MAX_SAFE_INTEGER`.\n       *\n       * @static\n       * @memberOf _\n       * @since 4.0.0\n       * @category Lang\n       * @param {*} value The value to check.\n       * @returns {boolean} Returns `true` if `value` is array-like, else `false`.\n       * @example\n       *\n       * _.isArrayLike([1, 2, 3]);\n       * // => true\n       *\n       * _.isArrayLike(document.body.children);\n       * // => true\n       *\n       * _.isArrayLike('abc');\n       * // => true\n       *\n       * _.isArrayLike(_.noop);\n       * // => false\n       */\n    function isArrayLike(value) {\n      return value != null && isLength(value.length) && !isFunction(value);\n    }\n\n    /**\n         * This method is like `_.isArrayLike` except that it also checks if `value`\n         * is an object.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Lang\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is an array-like object,\n         *  else `false`.\n         * @example\n         *\n         * _.isArrayLikeObject([1, 2, 3]);\n         * // => true\n         *\n         * _.isArrayLikeObject(document.body.children);\n         * // => true\n         *\n         * _.isArrayLikeObject('abc');\n         * // => false\n         *\n         * _.isArrayLikeObject(_.noop);\n         * // => false\n         */\n    function isArrayLikeObject(value) {\n      return isObjectLike(value) && isArrayLike(value);\n    }\n\n    /**\n         * Checks if `value` is classified as a boolean primitive or object.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Lang\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is a boolean, else `false`.\n         * @example\n         *\n         * _.isBoolean(false);\n         * // => true\n         *\n         * _.isBoolean(null);\n         * // => false\n         */\n    function isBoolean(value) {\n      return (\n        value === true ||\n            value === false ||\n            (isObjectLike(value) && baseGetTag(value) == boolTag)\n      );\n    }\n\n    /**\n         * Checks if `value` is a buffer.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.3.0\n         * @category Lang\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is a buffer, else `false`.\n         * @example\n         *\n         * _.isBuffer(new Buffer(2));\n         * // => true\n         *\n         * _.isBuffer(new Uint8Array(2));\n         * // => false\n         */\n    var isBuffer = nativeIsBuffer || stubFalse;\n\n    /**\n         * Checks if `value` is classified as a `Date` object.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Lang\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is a date object, else `false`.\n         * @example\n         *\n         * _.isDate(new Date);\n         * // => true\n         *\n         * _.isDate('Mon April 23 2012');\n         * // => false\n         */\n    var isDate = nodeIsDate ? baseUnary(nodeIsDate) : baseIsDate;\n\n    /**\n         * Checks if `value` is likely a DOM element.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Lang\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is a DOM element, else `false`.\n         * @example\n         *\n         * _.isElement(document.body);\n         * // => true\n         *\n         * _.isElement('<body>');\n         * // => false\n         */\n    function isElement(value) {\n      return (\n        isObjectLike(value) && value.nodeType === 1 && !isPlainObject(value)\n      );\n    }\n\n    /**\n         * Checks if `value` is an empty object, collection, map, or set.\n         *\n         * Objects are considered empty if they have no own enumerable string keyed\n         * properties.\n         *\n         * Array-like values such as `arguments` objects, arrays, buffers, strings, or\n         * jQuery-like collections are considered empty if they have a `length` of `0`.\n         * Similarly, maps and sets are considered empty if they have a `size` of `0`.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Lang\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is empty, else `false`.\n         * @example\n         *\n         * _.isEmpty(null);\n         * // => true\n         *\n         * _.isEmpty(true);\n         * // => true\n         *\n         * _.isEmpty(1);\n         * // => true\n         *\n         * _.isEmpty([1, 2, 3]);\n         * // => false\n         *\n         * _.isEmpty({ 'a': 1 });\n         * // => false\n         */\n    function isEmpty(value) {\n      if (value == null) {\n        return true;\n      }\n      if (\n        isArrayLike(value) &&\n            (isArray(value) ||\n               typeof value === 'string' ||\n               typeof value.splice === 'function' ||\n               isBuffer(value) ||\n               isTypedArray(value) ||\n               isArguments(value))\n      ) {\n        return !value.length;\n      }\n      var tag = getTag(value);\n      if (tag == mapTag || tag == setTag) {\n        return !value.size;\n      }\n      if (isPrototype(value)) {\n        return !baseKeys(value).length;\n      }\n      for (var key in value) {\n        if (hasOwnProperty.call(value, key)) {\n          return false;\n        }\n      }\n      return true;\n    }\n\n    /**\n         * Performs a deep comparison between two values to determine if they are\n         * equivalent.\n         *\n         * **Note:** This method supports comparing arrays, array buffers, booleans,\n         * date objects, error objects, maps, numbers, `Object` objects, regexes,\n         * sets, strings, symbols, and typed arrays. `Object` objects are compared\n         * by their own, not inherited, enumerable properties. Functions and DOM\n         * nodes are compared by strict equality, i.e. `===`.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Lang\n         * @param {*} value The value to compare.\n         * @param {*} other The other value to compare.\n         * @returns {boolean} Returns `true` if the values are equivalent, else `false`.\n         * @example\n         *\n         * var object = { 'a': 1 };\n         * var other = { 'a': 1 };\n         *\n         * _.isEqual(object, other);\n         * // => true\n         *\n         * object === other;\n         * // => false\n         */\n    function isEqual(value, other) {\n      return baseIsEqual(value, other);\n    }\n\n    /**\n         * This method is like `_.isEqual` except that it accepts `customizer` which\n         * is invoked to compare values. If `customizer` returns `undefined`, comparisons\n         * are handled by the method instead. The `customizer` is invoked with up to\n         * six arguments: (objValue, othValue [, index|key, object, other, stack]).\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Lang\n         * @param {*} value The value to compare.\n         * @param {*} other The other value to compare.\n         * @param {Function} [customizer] The function to customize comparisons.\n         * @returns {boolean} Returns `true` if the values are equivalent, else `false`.\n         * @example\n         *\n         * function isGreeting(value) {\n         *   return /^h(?:i|ello)$/.test(value);\n         * }\n         *\n         * function customizer(objValue, othValue) {\n         *   if (isGreeting(objValue) && isGreeting(othValue)) {\n         *     return true;\n         *   }\n         * }\n         *\n         * var array = ['hello', 'goodbye'];\n         * var other = ['hi', 'goodbye'];\n         *\n         * _.isEqualWith(array, other, customizer);\n         * // => true\n         */\n    function isEqualWith(value, other, customizer) {\n      customizer = typeof customizer === 'function' ? customizer : undefined;\n      var result = customizer ? customizer(value, other) : undefined;\n      return result === undefined\n        ? baseIsEqual(value, other, undefined, customizer)\n        : !!result;\n    }\n\n    /**\n         * Checks if `value` is an `Error`, `EvalError`, `RangeError`, `ReferenceError`,\n         * `SyntaxError`, `TypeError`, or `URIError` object.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category Lang\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is an error object, else `false`.\n         * @example\n         *\n         * _.isError(new Error);\n         * // => true\n         *\n         * _.isError(Error);\n         * // => false\n         */\n    function isError(value) {\n      if (!isObjectLike(value)) {\n        return false;\n      }\n      var tag = baseGetTag(value);\n      return (\n        tag == errorTag ||\n            tag == domExcTag ||\n            (typeof value.message === 'string' &&\n               typeof value.name === 'string' &&\n               !isPlainObject(value))\n      );\n    }\n\n    /**\n         * Checks if `value` is a finite primitive number.\n         *\n         * **Note:** This method is based on\n         * [`Number.isFinite`](https://mdn.io/Number/isFinite).\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Lang\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is a finite number, else `false`.\n         * @example\n         *\n         * _.isFinite(3);\n         * // => true\n         *\n         * _.isFinite(Number.MIN_VALUE);\n         * // => true\n         *\n         * _.isFinite(Infinity);\n         * // => false\n         *\n         * _.isFinite('3');\n         * // => false\n         */\n    function isFinite(value) {\n      return typeof value === 'number' && nativeIsFinite(value);\n    }\n\n    /**\n         * Checks if `value` is classified as a `Function` object.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Lang\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is a function, else `false`.\n         * @example\n         *\n         * _.isFunction(_);\n         * // => true\n         *\n         * _.isFunction(/abc/);\n         * // => false\n         */\n    function isFunction(value) {\n      if (!isObject(value)) {\n        return false;\n      }\n      // The use of `Object#toString` avoids issues with the `typeof` operator\n      // in Safari 9 which returns 'object' for typed arrays and other constructors.\n      var tag = baseGetTag(value);\n      return (\n        tag == funcTag || tag == genTag || tag == asyncTag || tag == proxyTag\n      );\n    }\n\n    /**\n         * Checks if `value` is an integer.\n         *\n         * **Note:** This method is based on\n         * [`Number.isInteger`](https://mdn.io/Number/isInteger).\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Lang\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is an integer, else `false`.\n         * @example\n         *\n         * _.isInteger(3);\n         * // => true\n         *\n         * _.isInteger(Number.MIN_VALUE);\n         * // => false\n         *\n         * _.isInteger(Infinity);\n         * // => false\n         *\n         * _.isInteger('3');\n         * // => false\n         */\n    function isInteger(value) {\n      return typeof value === 'number' && value == toInteger(value);\n    }\n\n    /**\n         * Checks if `value` is a valid array-like length.\n         *\n         * **Note:** This method is loosely based on\n         * [`ToLength`](http://ecma-international.org/ecma-262/7.0/#sec-tolength).\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Lang\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is a valid length, else `false`.\n         * @example\n         *\n         * _.isLength(3);\n         * // => true\n         *\n         * _.isLength(Number.MIN_VALUE);\n         * // => false\n         *\n         * _.isLength(Infinity);\n         * // => false\n         *\n         * _.isLength('3');\n         * // => false\n         */\n    function isLength(value) {\n      return (\n        typeof value === 'number' &&\n            value > -1 &&\n            value % 1 == 0 &&\n            value <= MAX_SAFE_INTEGER\n      );\n    }\n\n    /**\n         * Checks if `value` is the\n         * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)\n         * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Lang\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is an object, else `false`.\n         * @example\n         *\n         * _.isObject({});\n         * // => true\n         *\n         * _.isObject([1, 2, 3]);\n         * // => true\n         *\n         * _.isObject(_.noop);\n         * // => true\n         *\n         * _.isObject(null);\n         * // => false\n         */\n    function isObject(value) {\n      var type = typeof value;\n      return value != null && (type == 'object' || type == 'function');\n    }\n\n    /**\n         * Checks if `value` is object-like. A value is object-like if it's not `null`\n         * and has a `typeof` result of \"object\".\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Lang\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is object-like, else `false`.\n         * @example\n         *\n         * _.isObjectLike({});\n         * // => true\n         *\n         * _.isObjectLike([1, 2, 3]);\n         * // => true\n         *\n         * _.isObjectLike(_.noop);\n         * // => false\n         *\n         * _.isObjectLike(null);\n         * // => false\n         */\n    function isObjectLike(value) {\n      return value != null && typeof value === 'object';\n    }\n\n    /**\n         * Checks if `value` is classified as a `Map` object.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.3.0\n         * @category Lang\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is a map, else `false`.\n         * @example\n         *\n         * _.isMap(new Map);\n         * // => true\n         *\n         * _.isMap(new WeakMap);\n         * // => false\n         */\n    var isMap = nodeIsMap ? baseUnary(nodeIsMap) : baseIsMap;\n\n    /**\n         * Performs a partial deep comparison between `object` and `source` to\n         * determine if `object` contains equivalent property values.\n         *\n         * **Note:** This method is equivalent to `_.matches` when `source` is\n         * partially applied.\n         *\n         * Partial comparisons will match empty array and empty object `source`\n         * values against any array or object value, respectively. See `_.isEqual`\n         * for a list of supported value comparisons.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category Lang\n         * @param {Object} object The object to inspect.\n         * @param {Object} source The object of property values to match.\n         * @returns {boolean} Returns `true` if `object` is a match, else `false`.\n         * @example\n         *\n         * var object = { 'a': 1, 'b': 2 };\n         *\n         * _.isMatch(object, { 'b': 2 });\n         * // => true\n         *\n         * _.isMatch(object, { 'b': 1 });\n         * // => false\n         */\n    function isMatch(object, source) {\n      return (\n        object === source || baseIsMatch(object, source, getMatchData(source))\n      );\n    }\n\n    /**\n         * This method is like `_.isMatch` except that it accepts `customizer` which\n         * is invoked to compare values. If `customizer` returns `undefined`, comparisons\n         * are handled by the method instead. The `customizer` is invoked with five\n         * arguments: (objValue, srcValue, index|key, object, source).\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Lang\n         * @param {Object} object The object to inspect.\n         * @param {Object} source The object of property values to match.\n         * @param {Function} [customizer] The function to customize comparisons.\n         * @returns {boolean} Returns `true` if `object` is a match, else `false`.\n         * @example\n         *\n         * function isGreeting(value) {\n         *   return /^h(?:i|ello)$/.test(value);\n         * }\n         *\n         * function customizer(objValue, srcValue) {\n         *   if (isGreeting(objValue) && isGreeting(srcValue)) {\n         *     return true;\n         *   }\n         * }\n         *\n         * var object = { 'greeting': 'hello' };\n         * var source = { 'greeting': 'hi' };\n         *\n         * _.isMatchWith(object, source, customizer);\n         * // => true\n         */\n    function isMatchWith(object, source, customizer) {\n      customizer = typeof customizer === 'function' ? customizer : undefined;\n      return baseIsMatch(object, source, getMatchData(source), customizer);\n    }\n\n    /**\n         * Checks if `value` is `NaN`.\n         *\n         * **Note:** This method is based on\n         * [`Number.isNaN`](https://mdn.io/Number/isNaN) and is not the same as\n         * global [`isNaN`](https://mdn.io/isNaN) which returns `true` for\n         * `undefined` and other non-number values.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Lang\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is `NaN`, else `false`.\n         * @example\n         *\n         * _.isNaN(NaN);\n         * // => true\n         *\n         * _.isNaN(new Number(NaN));\n         * // => true\n         *\n         * isNaN(undefined);\n         * // => true\n         *\n         * _.isNaN(undefined);\n         * // => false\n         */\n    function isNaN(value) {\n      // An `NaN` primitive is the only value that is not equal to itself.\n      // Perform the `toStringTag` check first to avoid errors with some\n      // ActiveX objects in IE.\n      return isNumber(value) && value != +value;\n    }\n\n    /**\n         * Checks if `value` is a pristine native function.\n         *\n         * **Note:** This method can't reliably detect native functions in the presence\n         * of the core-js package because core-js circumvents this kind of detection.\n         * Despite multiple requests, the core-js maintainer has made it clear: any\n         * attempt to fix the detection will be obstructed. As a result, we're left\n         * with little choice but to throw an error. Unfortunately, this also affects\n         * packages, like [babel-polyfill](https://www.npmjs.com/package/babel-polyfill),\n         * which rely on core-js.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category Lang\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is a native function,\n         *  else `false`.\n         * @example\n         *\n         * _.isNative(Array.prototype.push);\n         * // => true\n         *\n         * _.isNative(_);\n         * // => false\n         */\n    function isNative(value) {\n      if (isMaskable(value)) {\n        throw new Error(CORE_ERROR_TEXT);\n      }\n      return baseIsNative(value);\n    }\n\n    /**\n         * Checks if `value` is `null`.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Lang\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is `null`, else `false`.\n         * @example\n         *\n         * _.isNull(null);\n         * // => true\n         *\n         * _.isNull(void 0);\n         * // => false\n         */\n    function isNull(value) {\n      return value === null;\n    }\n\n    /**\n         * Checks if `value` is `null` or `undefined`.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Lang\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is nullish, else `false`.\n         * @example\n         *\n         * _.isNil(null);\n         * // => true\n         *\n         * _.isNil(void 0);\n         * // => true\n         *\n         * _.isNil(NaN);\n         * // => false\n         */\n    function isNil(value) {\n      return value == null;\n    }\n\n    /**\n         * Checks if `value` is classified as a `Number` primitive or object.\n         *\n         * **Note:** To exclude `Infinity`, `-Infinity`, and `NaN`, which are\n         * classified as numbers, use the `_.isFinite` method.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Lang\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is a number, else `false`.\n         * @example\n         *\n         * _.isNumber(3);\n         * // => true\n         *\n         * _.isNumber(Number.MIN_VALUE);\n         * // => true\n         *\n         * _.isNumber(Infinity);\n         * // => true\n         *\n         * _.isNumber('3');\n         * // => false\n         */\n    function isNumber(value) {\n      return (\n        typeof value === 'number' ||\n            (isObjectLike(value) && baseGetTag(value) == numberTag)\n      );\n    }\n\n    /**\n         * Checks if `value` is a plain object, that is, an object created by the\n         * `Object` constructor or one with a `[[Prototype]]` of `null`.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.8.0\n         * @category Lang\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is a plain object, else `false`.\n         * @example\n         *\n         * function Foo() {\n         *   this.a = 1;\n         * }\n         *\n         * _.isPlainObject(new Foo);\n         * // => false\n         *\n         * _.isPlainObject([1, 2, 3]);\n         * // => false\n         *\n         * _.isPlainObject({ 'x': 0, 'y': 0 });\n         * // => true\n         *\n         * _.isPlainObject(Object.create(null));\n         * // => true\n         */\n    function isPlainObject(value) {\n      if (!isObjectLike(value) || baseGetTag(value) != objectTag) {\n        return false;\n      }\n      var proto = getPrototype(value);\n      if (proto === null) {\n        return true;\n      }\n      var Ctor = hasOwnProperty.call(proto, 'constructor') && proto.constructor;\n      return (\n        typeof Ctor === 'function' &&\n            Ctor instanceof Ctor &&\n            funcToString.call(Ctor) == objectCtorString\n      );\n    }\n\n    /**\n         * Checks if `value` is classified as a `RegExp` object.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.1.0\n         * @category Lang\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is a regexp, else `false`.\n         * @example\n         *\n         * _.isRegExp(/abc/);\n         * // => true\n         *\n         * _.isRegExp('/abc/');\n         * // => false\n         */\n    var isRegExp = nodeIsRegExp ? baseUnary(nodeIsRegExp) : baseIsRegExp;\n\n    /**\n         * Checks if `value` is a safe integer. An integer is safe if it's an IEEE-754\n         * double precision number which isn't the result of a rounded unsafe integer.\n         *\n         * **Note:** This method is based on\n         * [`Number.isSafeInteger`](https://mdn.io/Number/isSafeInteger).\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Lang\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is a safe integer, else `false`.\n         * @example\n         *\n         * _.isSafeInteger(3);\n         * // => true\n         *\n         * _.isSafeInteger(Number.MIN_VALUE);\n         * // => false\n         *\n         * _.isSafeInteger(Infinity);\n         * // => false\n         *\n         * _.isSafeInteger('3');\n         * // => false\n         */\n    function isSafeInteger(value) {\n      return (\n        isInteger(value) &&\n            value >= -MAX_SAFE_INTEGER &&\n            value <= MAX_SAFE_INTEGER\n      );\n    }\n\n    /**\n         * Checks if `value` is classified as a `Set` object.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.3.0\n         * @category Lang\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is a set, else `false`.\n         * @example\n         *\n         * _.isSet(new Set);\n         * // => true\n         *\n         * _.isSet(new WeakSet);\n         * // => false\n         */\n    var isSet = nodeIsSet ? baseUnary(nodeIsSet) : baseIsSet;\n\n    /**\n         * Checks if `value` is classified as a `String` primitive or object.\n         *\n         * @static\n         * @since 0.1.0\n         * @memberOf _\n         * @category Lang\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is a string, else `false`.\n         * @example\n         *\n         * _.isString('abc');\n         * // => true\n         *\n         * _.isString(1);\n         * // => false\n         */\n    function isString(value) {\n      return (\n        typeof value === 'string' ||\n            (!isArray(value) &&\n               isObjectLike(value) &&\n               baseGetTag(value) == stringTag)\n      );\n    }\n\n    /**\n         * Checks if `value` is classified as a `Symbol` primitive or object.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Lang\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.\n         * @example\n         *\n         * _.isSymbol(Symbol.iterator);\n         * // => true\n         *\n         * _.isSymbol('abc');\n         * // => false\n         */\n    function isSymbol(value) {\n      return (\n        typeof value === 'symbol' ||\n            (isObjectLike(value) && baseGetTag(value) == symbolTag)\n      );\n    }\n\n    /**\n         * Checks if `value` is classified as a typed array.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category Lang\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is a typed array, else `false`.\n         * @example\n         *\n         * _.isTypedArray(new Uint8Array);\n         * // => true\n         *\n         * _.isTypedArray([]);\n         * // => false\n         */\n    var isTypedArray = nodeIsTypedArray\n      ? baseUnary(nodeIsTypedArray)\n      : baseIsTypedArray;\n\n      /**\n       * Checks if `value` is `undefined`.\n       *\n       * @static\n       * @since 0.1.0\n       * @memberOf _\n       * @category Lang\n       * @param {*} value The value to check.\n       * @returns {boolean} Returns `true` if `value` is `undefined`, else `false`.\n       * @example\n       *\n       * _.isUndefined(void 0);\n       * // => true\n       *\n       * _.isUndefined(null);\n       * // => false\n       */\n    function isUndefined(value) {\n      return value === undefined;\n    }\n\n    /**\n         * Checks if `value` is classified as a `WeakMap` object.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.3.0\n         * @category Lang\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is a weak map, else `false`.\n         * @example\n         *\n         * _.isWeakMap(new WeakMap);\n         * // => true\n         *\n         * _.isWeakMap(new Map);\n         * // => false\n         */\n    function isWeakMap(value) {\n      return isObjectLike(value) && getTag(value) == weakMapTag;\n    }\n\n    /**\n         * Checks if `value` is classified as a `WeakSet` object.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.3.0\n         * @category Lang\n         * @param {*} value The value to check.\n         * @returns {boolean} Returns `true` if `value` is a weak set, else `false`.\n         * @example\n         *\n         * _.isWeakSet(new WeakSet);\n         * // => true\n         *\n         * _.isWeakSet(new Set);\n         * // => false\n         */\n    function isWeakSet(value) {\n      return isObjectLike(value) && baseGetTag(value) == weakSetTag;\n    }\n\n    /**\n         * Checks if `value` is less than `other`.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.9.0\n         * @category Lang\n         * @param {*} value The value to compare.\n         * @param {*} other The other value to compare.\n         * @returns {boolean} Returns `true` if `value` is less than `other`,\n         *  else `false`.\n         * @see _.gt\n         * @example\n         *\n         * _.lt(1, 3);\n         * // => true\n         *\n         * _.lt(3, 3);\n         * // => false\n         *\n         * _.lt(3, 1);\n         * // => false\n         */\n    var lt = createRelationalOperation(baseLt);\n\n    /**\n         * Checks if `value` is less than or equal to `other`.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.9.0\n         * @category Lang\n         * @param {*} value The value to compare.\n         * @param {*} other The other value to compare.\n         * @returns {boolean} Returns `true` if `value` is less than or equal to\n         *  `other`, else `false`.\n         * @see _.gte\n         * @example\n         *\n         * _.lte(1, 3);\n         * // => true\n         *\n         * _.lte(3, 3);\n         * // => true\n         *\n         * _.lte(3, 1);\n         * // => false\n         */\n    var lte = createRelationalOperation(function(value, other) {\n      return value <= other;\n    });\n\n      /**\n       * Converts `value` to an array.\n       *\n       * @static\n       * @since 0.1.0\n       * @memberOf _\n       * @category Lang\n       * @param {*} value The value to convert.\n       * @returns {Array} Returns the converted array.\n       * @example\n       *\n       * _.toArray({ 'a': 1, 'b': 2 });\n       * // => [1, 2]\n       *\n       * _.toArray('abc');\n       * // => ['a', 'b', 'c']\n       *\n       * _.toArray(1);\n       * // => []\n       *\n       * _.toArray(null);\n       * // => []\n       */\n    function toArray(value) {\n      if (!value) {\n        return [];\n      }\n      if (isArrayLike(value)) {\n        return isString(value) ? stringToArray(value) : copyArray(value);\n      }\n      if (symIterator && value[symIterator]) {\n        return iteratorToArray(value[symIterator]());\n      }\n      var tag = getTag(value),\n        func = tag == mapTag ? mapToArray : tag == setTag ? setToArray : values;\n\n      return func(value);\n    }\n\n    /**\n         * Converts `value` to a finite number.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.12.0\n         * @category Lang\n         * @param {*} value The value to convert.\n         * @returns {number} Returns the converted number.\n         * @example\n         *\n         * _.toFinite(3.2);\n         * // => 3.2\n         *\n         * _.toFinite(Number.MIN_VALUE);\n         * // => 5e-324\n         *\n         * _.toFinite(Infinity);\n         * // => 1.7976931348623157e+308\n         *\n         * _.toFinite('3.2');\n         * // => 3.2\n         */\n    function toFinite(value) {\n      if (!value) {\n        return value === 0 ? value : 0;\n      }\n      value = toNumber(value);\n      if (value === INFINITY || value === -INFINITY) {\n        var sign = value < 0 ? -1 : 1;\n        return sign * MAX_INTEGER;\n      }\n      return value === value ? value : 0;\n    }\n\n    /**\n         * Converts `value` to an integer.\n         *\n         * **Note:** This method is loosely based on\n         * [`ToInteger`](http://www.ecma-international.org/ecma-262/7.0/#sec-tointeger).\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Lang\n         * @param {*} value The value to convert.\n         * @returns {number} Returns the converted integer.\n         * @example\n         *\n         * _.toInteger(3.2);\n         * // => 3\n         *\n         * _.toInteger(Number.MIN_VALUE);\n         * // => 0\n         *\n         * _.toInteger(Infinity);\n         * // => 1.7976931348623157e+308\n         *\n         * _.toInteger('3.2');\n         * // => 3\n         */\n    function toInteger(value) {\n      var result = toFinite(value),\n        remainder = result % 1;\n\n      return result === result ? (remainder ? result - remainder : result) : 0;\n    }\n\n    /**\n         * Converts `value` to an integer suitable for use as the length of an\n         * array-like object.\n         *\n         * **Note:** This method is based on\n         * [`ToLength`](http://ecma-international.org/ecma-262/7.0/#sec-tolength).\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Lang\n         * @param {*} value The value to convert.\n         * @returns {number} Returns the converted integer.\n         * @example\n         *\n         * _.toLength(3.2);\n         * // => 3\n         *\n         * _.toLength(Number.MIN_VALUE);\n         * // => 0\n         *\n         * _.toLength(Infinity);\n         * // => 4294967295\n         *\n         * _.toLength('3.2');\n         * // => 3\n         */\n    function toLength(value) {\n      return value ? baseClamp(toInteger(value), 0, MAX_ARRAY_LENGTH) : 0;\n    }\n\n    /**\n         * Converts `value` to a number.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Lang\n         * @param {*} value The value to process.\n         * @returns {number} Returns the number.\n         * @example\n         *\n         * _.toNumber(3.2);\n         * // => 3.2\n         *\n         * _.toNumber(Number.MIN_VALUE);\n         * // => 5e-324\n         *\n         * _.toNumber(Infinity);\n         * // => Infinity\n         *\n         * _.toNumber('3.2');\n         * // => 3.2\n         */\n    function toNumber(value) {\n      if (typeof value === 'number') {\n        return value;\n      }\n      if (isSymbol(value)) {\n        return NAN;\n      }\n      if (isObject(value)) {\n        var other =\n               typeof value.valueOf === 'function' ? value.valueOf() : value;\n        value = isObject(other) ? other + '' : other;\n      }\n      if (typeof value !== 'string') {\n        return value === 0 ? value : +value;\n      }\n      value = value.replace(reTrim, '');\n      var isBinary = reIsBinary.test(value);\n      return isBinary || reIsOctal.test(value)\n        ? freeParseInt(value.slice(2), isBinary ? 2 : 8)\n        : reIsBadHex.test(value)\n          ? NAN\n          : +value;\n    }\n\n    /**\n         * Converts `value` to a plain object flattening inherited enumerable string\n         * keyed properties of `value` to own properties of the plain object.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category Lang\n         * @param {*} value The value to convert.\n         * @returns {Object} Returns the converted plain object.\n         * @example\n         *\n         * function Foo() {\n         *   this.b = 2;\n         * }\n         *\n         * Foo.prototype.c = 3;\n         *\n         * _.assign({ 'a': 1 }, new Foo);\n         * // => { 'a': 1, 'b': 2 }\n         *\n         * _.assign({ 'a': 1 }, _.toPlainObject(new Foo));\n         * // => { 'a': 1, 'b': 2, 'c': 3 }\n         */\n    function toPlainObject(value) {\n      return copyObject(value, keysIn(value));\n    }\n\n    /**\n         * Converts `value` to a safe integer. A safe integer can be compared and\n         * represented correctly.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Lang\n         * @param {*} value The value to convert.\n         * @returns {number} Returns the converted integer.\n         * @example\n         *\n         * _.toSafeInteger(3.2);\n         * // => 3\n         *\n         * _.toSafeInteger(Number.MIN_VALUE);\n         * // => 0\n         *\n         * _.toSafeInteger(Infinity);\n         * // => 9007199254740991\n         *\n         * _.toSafeInteger('3.2');\n         * // => 3\n         */\n    function toSafeInteger(value) {\n      return value\n        ? baseClamp(toInteger(value), -MAX_SAFE_INTEGER, MAX_SAFE_INTEGER)\n        : value === 0\n          ? value\n          : 0;\n    }\n\n    /**\n         * Converts `value` to a string. An empty string is returned for `null`\n         * and `undefined` values. The sign of `-0` is preserved.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Lang\n         * @param {*} value The value to convert.\n         * @returns {string} Returns the converted string.\n         * @example\n         *\n         * _.toString(null);\n         * // => ''\n         *\n         * _.toString(-0);\n         * // => '-0'\n         *\n         * _.toString([1, 2, 3]);\n         * // => '1,2,3'\n         */\n    function toString(value) {\n      return value == null ? '' : baseToString(value);\n    }\n\n    /* ------------------------------------------------------------------------*/\n\n    /**\n         * Assigns own enumerable string keyed properties of source objects to the\n         * destination object. Source objects are applied from left to right.\n         * Subsequent sources overwrite property assignments of previous sources.\n         *\n         * **Note:** This method mutates `object` and is loosely based on\n         * [`Object.assign`](https://mdn.io/Object/assign).\n         *\n         * @static\n         * @memberOf _\n         * @since 0.10.0\n         * @category Object\n         * @param {Object} object The destination object.\n         * @param {...Object} [sources] The source objects.\n         * @returns {Object} Returns `object`.\n         * @see _.assignIn\n         * @example\n         *\n         * function Foo() {\n         *   this.a = 1;\n         * }\n         *\n         * function Bar() {\n         *   this.c = 3;\n         * }\n         *\n         * Foo.prototype.b = 2;\n         * Bar.prototype.d = 4;\n         *\n         * _.assign({ 'a': 0 }, new Foo, new Bar);\n         * // => { 'a': 1, 'c': 3 }\n         */\n    var assign = createAssigner(function(object, source) {\n      if (isPrototype(source) || isArrayLike(source)) {\n        copyObject(source, keys(source), object);\n        return;\n      }\n      for (var key in source) {\n        if (hasOwnProperty.call(source, key)) {\n          assignValue(object, key, source[key]);\n        }\n      }\n    });\n\n      /**\n       * This method is like `_.assign` except that it iterates over own and\n       * inherited source properties.\n       *\n       * **Note:** This method mutates `object`.\n       *\n       * @static\n       * @memberOf _\n       * @since 4.0.0\n       * @alias extend\n       * @category Object\n       * @param {Object} object The destination object.\n       * @param {...Object} [sources] The source objects.\n       * @returns {Object} Returns `object`.\n       * @see _.assign\n       * @example\n       *\n       * function Foo() {\n       *   this.a = 1;\n       * }\n       *\n       * function Bar() {\n       *   this.c = 3;\n       * }\n       *\n       * Foo.prototype.b = 2;\n       * Bar.prototype.d = 4;\n       *\n       * _.assignIn({ 'a': 0 }, new Foo, new Bar);\n       * // => { 'a': 1, 'b': 2, 'c': 3, 'd': 4 }\n       */\n    var assignIn = createAssigner(function(object, source) {\n      copyObject(source, keysIn(source), object);\n    });\n\n      /**\n       * This method is like `_.assignIn` except that it accepts `customizer`\n       * which is invoked to produce the assigned values. If `customizer` returns\n       * `undefined`, assignment is handled by the method instead. The `customizer`\n       * is invoked with five arguments: (objValue, srcValue, key, object, source).\n       *\n       * **Note:** This method mutates `object`.\n       *\n       * @static\n       * @memberOf _\n       * @since 4.0.0\n       * @alias extendWith\n       * @category Object\n       * @param {Object} object The destination object.\n       * @param {...Object} sources The source objects.\n       * @param {Function} [customizer] The function to customize assigned values.\n       * @returns {Object} Returns `object`.\n       * @see _.assignWith\n       * @example\n       *\n       * function customizer(objValue, srcValue) {\n       *   return _.isUndefined(objValue) ? srcValue : objValue;\n       * }\n       *\n       * var defaults = _.partialRight(_.assignInWith, customizer);\n       *\n       * defaults({ 'a': 1 }, { 'b': 2 }, { 'a': 3 });\n       * // => { 'a': 1, 'b': 2 }\n       */\n    var assignInWith = createAssigner(function(\n      object,\n      source,\n      srcIndex,\n      customizer\n    ) {\n      copyObject(source, keysIn(source), object, customizer);\n    });\n\n      /**\n       * This method is like `_.assign` except that it accepts `customizer`\n       * which is invoked to produce the assigned values. If `customizer` returns\n       * `undefined`, assignment is handled by the method instead. The `customizer`\n       * is invoked with five arguments: (objValue, srcValue, key, object, source).\n       *\n       * **Note:** This method mutates `object`.\n       *\n       * @static\n       * @memberOf _\n       * @since 4.0.0\n       * @category Object\n       * @param {Object} object The destination object.\n       * @param {...Object} sources The source objects.\n       * @param {Function} [customizer] The function to customize assigned values.\n       * @returns {Object} Returns `object`.\n       * @see _.assignInWith\n       * @example\n       *\n       * function customizer(objValue, srcValue) {\n       *   return _.isUndefined(objValue) ? srcValue : objValue;\n       * }\n       *\n       * var defaults = _.partialRight(_.assignWith, customizer);\n       *\n       * defaults({ 'a': 1 }, { 'b': 2 }, { 'a': 3 });\n       * // => { 'a': 1, 'b': 2 }\n       */\n    var assignWith = createAssigner(function(\n      object,\n      source,\n      srcIndex,\n      customizer\n    ) {\n      copyObject(source, keys(source), object, customizer);\n    });\n\n      /**\n       * Creates an array of values corresponding to `paths` of `object`.\n       *\n       * @static\n       * @memberOf _\n       * @since 1.0.0\n       * @category Object\n       * @param {Object} object The object to iterate over.\n       * @param {...(string|string[])} [paths] The property paths to pick.\n       * @returns {Array} Returns the picked values.\n       * @example\n       *\n       * var object = { 'a': [{ 'b': { 'c': 3 } }, 4] };\n       *\n       * _.at(object, ['a[0].b.c', 'a[1]']);\n       * // => [3, 4]\n       */\n    var at = flatRest(baseAt);\n\n    /**\n         * Creates an object that inherits from the `prototype` object. If a\n         * `properties` object is given, its own enumerable string keyed properties\n         * are assigned to the created object.\n         *\n         * @static\n         * @memberOf _\n         * @since 2.3.0\n         * @category Object\n         * @param {Object} prototype The object to inherit from.\n         * @param {Object} [properties] The properties to assign to the object.\n         * @returns {Object} Returns the new object.\n         * @example\n         *\n         * function Shape() {\n         *   this.x = 0;\n         *   this.y = 0;\n         * }\n         *\n         * function Circle() {\n         *   Shape.call(this);\n         * }\n         *\n         * Circle.prototype = _.create(Shape.prototype, {\n         *   'constructor': Circle\n         * });\n         *\n         * var circle = new Circle;\n         * circle instanceof Circle;\n         * // => true\n         *\n         * circle instanceof Shape;\n         * // => true\n         */\n    function create(prototype, properties) {\n      var result = baseCreate(prototype);\n      return properties == null ? result : baseAssign(result, properties);\n    }\n\n    /**\n         * Assigns own and inherited enumerable string keyed properties of source\n         * objects to the destination object for all destination properties that\n         * resolve to `undefined`. Source objects are applied from left to right.\n         * Once a property is set, additional values of the same property are ignored.\n         *\n         * **Note:** This method mutates `object`.\n         *\n         * @static\n         * @since 0.1.0\n         * @memberOf _\n         * @category Object\n         * @param {Object} object The destination object.\n         * @param {...Object} [sources] The source objects.\n         * @returns {Object} Returns `object`.\n         * @see _.defaultsDeep\n         * @example\n         *\n         * _.defaults({ 'a': 1 }, { 'b': 2 }, { 'a': 3 });\n         * // => { 'a': 1, 'b': 2 }\n         */\n    var defaults = baseRest(function(object, sources) {\n      object = Object(object);\n\n      var index = -1;\n      var length = sources.length;\n      var guard = length > 2 ? sources[2] : undefined;\n\n      if (guard && isIterateeCall(sources[0], sources[1], guard)) {\n        length = 1;\n      }\n\n      while (++index < length) {\n        var source = sources[index];\n        var props = keysIn(source);\n        var propsIndex = -1;\n        var propsLength = props.length;\n\n        while (++propsIndex < propsLength) {\n          var key = props[propsIndex];\n          var value = object[key];\n\n          if (\n            value === undefined ||\n                  (eq(value, objectProto[key]) && !hasOwnProperty.call(object, key))\n          ) {\n            object[key] = source[key];\n          }\n        }\n      }\n\n      return object;\n    });\n\n      /**\n       * This method is like `_.defaults` except that it recursively assigns\n       * default properties.\n       *\n       * **Note:** This method mutates `object`.\n       *\n       * @static\n       * @memberOf _\n       * @since 3.10.0\n       * @category Object\n       * @param {Object} object The destination object.\n       * @param {...Object} [sources] The source objects.\n       * @returns {Object} Returns `object`.\n       * @see _.defaults\n       * @example\n       *\n       * _.defaultsDeep({ 'a': { 'b': 2 } }, { 'a': { 'b': 1, 'c': 3 } });\n       * // => { 'a': { 'b': 2, 'c': 3 } }\n       */\n    var defaultsDeep = baseRest(function(args) {\n      args.push(undefined, customDefaultsMerge);\n      return apply(mergeWith, undefined, args);\n    });\n\n      /**\n       * This method is like `_.find` except that it returns the key of the first\n       * element `predicate` returns truthy for instead of the element itself.\n       *\n       * @static\n       * @memberOf _\n       * @since 1.1.0\n       * @category Object\n       * @param {Object} object The object to inspect.\n       * @param {Function} [predicate=_.identity] The function invoked per iteration.\n       * @returns {string|undefined} Returns the key of the matched element,\n       *  else `undefined`.\n       * @example\n       *\n       * var users = {\n       *   'barney':  { 'age': 36, 'active': true },\n       *   'fred':    { 'age': 40, 'active': false },\n       *   'pebbles': { 'age': 1,  'active': true }\n       * };\n       *\n       * _.findKey(users, function(o) { return o.age < 40; });\n       * // => 'barney' (iteration order is not guaranteed)\n       *\n       * // The `_.matches` iteratee shorthand.\n       * _.findKey(users, { 'age': 1, 'active': true });\n       * // => 'pebbles'\n       *\n       * // The `_.matchesProperty` iteratee shorthand.\n       * _.findKey(users, ['active', false]);\n       * // => 'fred'\n       *\n       * // The `_.property` iteratee shorthand.\n       * _.findKey(users, 'active');\n       * // => 'barney'\n       */\n    function findKey(object, predicate) {\n      return baseFindKey(object, getIteratee(predicate, 3), baseForOwn);\n    }\n\n    /**\n         * This method is like `_.findKey` except that it iterates over elements of\n         * a collection in the opposite order.\n         *\n         * @static\n         * @memberOf _\n         * @since 2.0.0\n         * @category Object\n         * @param {Object} object The object to inspect.\n         * @param {Function} [predicate=_.identity] The function invoked per iteration.\n         * @returns {string|undefined} Returns the key of the matched element,\n         *  else `undefined`.\n         * @example\n         *\n         * var users = {\n         *   'barney':  { 'age': 36, 'active': true },\n         *   'fred':    { 'age': 40, 'active': false },\n         *   'pebbles': { 'age': 1,  'active': true }\n         * };\n         *\n         * _.findLastKey(users, function(o) { return o.age < 40; });\n         * // => returns 'pebbles' assuming `_.findKey` returns 'barney'\n         *\n         * // The `_.matches` iteratee shorthand.\n         * _.findLastKey(users, { 'age': 36, 'active': true });\n         * // => 'barney'\n         *\n         * // The `_.matchesProperty` iteratee shorthand.\n         * _.findLastKey(users, ['active', false]);\n         * // => 'fred'\n         *\n         * // The `_.property` iteratee shorthand.\n         * _.findLastKey(users, 'active');\n         * // => 'pebbles'\n         */\n    function findLastKey(object, predicate) {\n      return baseFindKey(object, getIteratee(predicate, 3), baseForOwnRight);\n    }\n\n    /**\n         * Iterates over own and inherited enumerable string keyed properties of an\n         * object and invokes `iteratee` for each property. The iteratee is invoked\n         * with three arguments: (value, key, object). Iteratee functions may exit\n         * iteration early by explicitly returning `false`.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.3.0\n         * @category Object\n         * @param {Object} object The object to iterate over.\n         * @param {Function} [iteratee=_.identity] The function invoked per iteration.\n         * @returns {Object} Returns `object`.\n         * @see _.forInRight\n         * @example\n         *\n         * function Foo() {\n         *   this.a = 1;\n         *   this.b = 2;\n         * }\n         *\n         * Foo.prototype.c = 3;\n         *\n         * _.forIn(new Foo, function(value, key) {\n         *   console.log(key);\n         * });\n         * // => Logs 'a', 'b', then 'c' (iteration order is not guaranteed).\n         */\n    function forIn(object, iteratee) {\n      return object == null\n        ? object\n        : baseFor(object, getIteratee(iteratee, 3), keysIn);\n    }\n\n    /**\n         * This method is like `_.forIn` except that it iterates over properties of\n         * `object` in the opposite order.\n         *\n         * @static\n         * @memberOf _\n         * @since 2.0.0\n         * @category Object\n         * @param {Object} object The object to iterate over.\n         * @param {Function} [iteratee=_.identity] The function invoked per iteration.\n         * @returns {Object} Returns `object`.\n         * @see _.forIn\n         * @example\n         *\n         * function Foo() {\n         *   this.a = 1;\n         *   this.b = 2;\n         * }\n         *\n         * Foo.prototype.c = 3;\n         *\n         * _.forInRight(new Foo, function(value, key) {\n         *   console.log(key);\n         * });\n         * // => Logs 'c', 'b', then 'a' assuming `_.forIn` logs 'a', 'b', then 'c'.\n         */\n    function forInRight(object, iteratee) {\n      return object == null\n        ? object\n        : baseForRight(object, getIteratee(iteratee, 3), keysIn);\n    }\n\n    /**\n         * Iterates over own enumerable string keyed properties of an object and\n         * invokes `iteratee` for each property. The iteratee is invoked with three\n         * arguments: (value, key, object). Iteratee functions may exit iteration\n         * early by explicitly returning `false`.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.3.0\n         * @category Object\n         * @param {Object} object The object to iterate over.\n         * @param {Function} [iteratee=_.identity] The function invoked per iteration.\n         * @returns {Object} Returns `object`.\n         * @see _.forOwnRight\n         * @example\n         *\n         * function Foo() {\n         *   this.a = 1;\n         *   this.b = 2;\n         * }\n         *\n         * Foo.prototype.c = 3;\n         *\n         * _.forOwn(new Foo, function(value, key) {\n         *   console.log(key);\n         * });\n         * // => Logs 'a' then 'b' (iteration order is not guaranteed).\n         */\n    function forOwn(object, iteratee) {\n      return object && baseForOwn(object, getIteratee(iteratee, 3));\n    }\n\n    /**\n         * This method is like `_.forOwn` except that it iterates over properties of\n         * `object` in the opposite order.\n         *\n         * @static\n         * @memberOf _\n         * @since 2.0.0\n         * @category Object\n         * @param {Object} object The object to iterate over.\n         * @param {Function} [iteratee=_.identity] The function invoked per iteration.\n         * @returns {Object} Returns `object`.\n         * @see _.forOwn\n         * @example\n         *\n         * function Foo() {\n         *   this.a = 1;\n         *   this.b = 2;\n         * }\n         *\n         * Foo.prototype.c = 3;\n         *\n         * _.forOwnRight(new Foo, function(value, key) {\n         *   console.log(key);\n         * });\n         * // => Logs 'b' then 'a' assuming `_.forOwn` logs 'a' then 'b'.\n         */\n    function forOwnRight(object, iteratee) {\n      return object && baseForOwnRight(object, getIteratee(iteratee, 3));\n    }\n\n    /**\n         * Creates an array of function property names from own enumerable properties\n         * of `object`.\n         *\n         * @static\n         * @since 0.1.0\n         * @memberOf _\n         * @category Object\n         * @param {Object} object The object to inspect.\n         * @returns {Array} Returns the function names.\n         * @see _.functionsIn\n         * @example\n         *\n         * function Foo() {\n         *   this.a = _.constant('a');\n         *   this.b = _.constant('b');\n         * }\n         *\n         * Foo.prototype.c = _.constant('c');\n         *\n         * _.functions(new Foo);\n         * // => ['a', 'b']\n         */\n    function functions(object) {\n      return object == null ? [] : baseFunctions(object, keys(object));\n    }\n\n    /**\n         * Creates an array of function property names from own and inherited\n         * enumerable properties of `object`.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Object\n         * @param {Object} object The object to inspect.\n         * @returns {Array} Returns the function names.\n         * @see _.functions\n         * @example\n         *\n         * function Foo() {\n         *   this.a = _.constant('a');\n         *   this.b = _.constant('b');\n         * }\n         *\n         * Foo.prototype.c = _.constant('c');\n         *\n         * _.functionsIn(new Foo);\n         * // => ['a', 'b', 'c']\n         */\n    function functionsIn(object) {\n      return object == null ? [] : baseFunctions(object, keysIn(object));\n    }\n\n    /**\n         * Gets the value at `path` of `object`. If the resolved value is\n         * `undefined`, the `defaultValue` is returned in its place.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.7.0\n         * @category Object\n         * @param {Object} object The object to query.\n         * @param {Array|string} path The path of the property to get.\n         * @param {*} [defaultValue] The value returned for `undefined` resolved values.\n         * @returns {*} Returns the resolved value.\n         * @example\n         *\n         * var object = { 'a': [{ 'b': { 'c': 3 } }] };\n         *\n         * _.get(object, 'a[0].b.c');\n         * // => 3\n         *\n         * _.get(object, ['a', '0', 'b', 'c']);\n         * // => 3\n         *\n         * _.get(object, 'a.b.c', 'default');\n         * // => 'default'\n         */\n    function get(object, path, defaultValue) {\n      var result = object == null ? undefined : baseGet(object, path);\n      return result === undefined ? defaultValue : result;\n    }\n\n    /**\n         * Checks if `path` is a direct property of `object`.\n         *\n         * @static\n         * @since 0.1.0\n         * @memberOf _\n         * @category Object\n         * @param {Object} object The object to query.\n         * @param {Array|string} path The path to check.\n         * @returns {boolean} Returns `true` if `path` exists, else `false`.\n         * @example\n         *\n         * var object = { 'a': { 'b': 2 } };\n         * var other = _.create({ 'a': _.create({ 'b': 2 }) });\n         *\n         * _.has(object, 'a');\n         * // => true\n         *\n         * _.has(object, 'a.b');\n         * // => true\n         *\n         * _.has(object, ['a', 'b']);\n         * // => true\n         *\n         * _.has(other, 'a');\n         * // => false\n         */\n    function has(object, path) {\n      return object != null && hasPath(object, path, baseHas);\n    }\n\n    /**\n         * Checks if `path` is a direct or inherited property of `object`.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Object\n         * @param {Object} object The object to query.\n         * @param {Array|string} path The path to check.\n         * @returns {boolean} Returns `true` if `path` exists, else `false`.\n         * @example\n         *\n         * var object = _.create({ 'a': _.create({ 'b': 2 }) });\n         *\n         * _.hasIn(object, 'a');\n         * // => true\n         *\n         * _.hasIn(object, 'a.b');\n         * // => true\n         *\n         * _.hasIn(object, ['a', 'b']);\n         * // => true\n         *\n         * _.hasIn(object, 'b');\n         * // => false\n         */\n    function hasIn(object, path) {\n      return object != null && hasPath(object, path, baseHasIn);\n    }\n\n    /**\n         * Creates an object composed of the inverted keys and values of `object`.\n         * If `object` contains duplicate values, subsequent values overwrite\n         * property assignments of previous values.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.7.0\n         * @category Object\n         * @param {Object} object The object to invert.\n         * @returns {Object} Returns the new inverted object.\n         * @example\n         *\n         * var object = { 'a': 1, 'b': 2, 'c': 1 };\n         *\n         * _.invert(object);\n         * // => { '1': 'c', '2': 'b' }\n         */\n    var invert = createInverter(function(result, value, key) {\n      if (value != null && typeof value.toString !== 'function') {\n        value = nativeObjectToString.call(value);\n      }\n\n      result[value] = key;\n    }, constant(identity));\n\n      /**\n       * This method is like `_.invert` except that the inverted object is generated\n       * from the results of running each element of `object` thru `iteratee`. The\n       * corresponding inverted value of each inverted key is an array of keys\n       * responsible for generating the inverted value. The iteratee is invoked\n       * with one argument: (value).\n       *\n       * @static\n       * @memberOf _\n       * @since 4.1.0\n       * @category Object\n       * @param {Object} object The object to invert.\n       * @param {Function} [iteratee=_.identity] The iteratee invoked per element.\n       * @returns {Object} Returns the new inverted object.\n       * @example\n       *\n       * var object = { 'a': 1, 'b': 2, 'c': 1 };\n       *\n       * _.invertBy(object);\n       * // => { '1': ['a', 'c'], '2': ['b'] }\n       *\n       * _.invertBy(object, function(value) {\n       *   return 'group' + value;\n       * });\n       * // => { 'group1': ['a', 'c'], 'group2': ['b'] }\n       */\n    var invertBy = createInverter(function(result, value, key) {\n      if (value != null && typeof value.toString !== 'function') {\n        value = nativeObjectToString.call(value);\n      }\n\n      if (hasOwnProperty.call(result, value)) {\n        result[value].push(key);\n      } else {\n        result[value] = [key];\n      }\n    }, getIteratee);\n\n      /**\n       * Invokes the method at `path` of `object`.\n       *\n       * @static\n       * @memberOf _\n       * @since 4.0.0\n       * @category Object\n       * @param {Object} object The object to query.\n       * @param {Array|string} path The path of the method to invoke.\n       * @param {...*} [args] The arguments to invoke the method with.\n       * @returns {*} Returns the result of the invoked method.\n       * @example\n       *\n       * var object = { 'a': [{ 'b': { 'c': [1, 2, 3, 4] } }] };\n       *\n       * _.invoke(object, 'a[0].b.c.slice', 1, 3);\n       * // => [2, 3]\n       */\n    var invoke = baseRest(baseInvoke);\n\n    /**\n         * Creates an array of the own enumerable property names of `object`.\n         *\n         * **Note:** Non-object values are coerced to objects. See the\n         * [ES spec](http://ecma-international.org/ecma-262/7.0/#sec-object.keys)\n         * for more details.\n         *\n         * @static\n         * @since 0.1.0\n         * @memberOf _\n         * @category Object\n         * @param {Object} object The object to query.\n         * @returns {Array} Returns the array of property names.\n         * @example\n         *\n         * function Foo() {\n         *   this.a = 1;\n         *   this.b = 2;\n         * }\n         *\n         * Foo.prototype.c = 3;\n         *\n         * _.keys(new Foo);\n         * // => ['a', 'b'] (iteration order is not guaranteed)\n         *\n         * _.keys('hi');\n         * // => ['0', '1']\n         */\n    function keys(object) {\n      return isArrayLike(object) ? arrayLikeKeys(object) : baseKeys(object);\n    }\n\n    /**\n         * Creates an array of the own and inherited enumerable property names of `object`.\n         *\n         * **Note:** Non-object values are coerced to objects.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category Object\n         * @param {Object} object The object to query.\n         * @returns {Array} Returns the array of property names.\n         * @example\n         *\n         * function Foo() {\n         *   this.a = 1;\n         *   this.b = 2;\n         * }\n         *\n         * Foo.prototype.c = 3;\n         *\n         * _.keysIn(new Foo);\n         * // => ['a', 'b', 'c'] (iteration order is not guaranteed)\n         */\n    function keysIn(object) {\n      return isArrayLike(object)\n        ? arrayLikeKeys(object, true)\n        : baseKeysIn(object);\n    }\n\n    /**\n         * The opposite of `_.mapValues`; this method creates an object with the\n         * same values as `object` and keys generated by running each own enumerable\n         * string keyed property of `object` thru `iteratee`. The iteratee is invoked\n         * with three arguments: (value, key, object).\n         *\n         * @static\n         * @memberOf _\n         * @since 3.8.0\n         * @category Object\n         * @param {Object} object The object to iterate over.\n         * @param {Function} [iteratee=_.identity] The function invoked per iteration.\n         * @returns {Object} Returns the new mapped object.\n         * @see _.mapValues\n         * @example\n         *\n         * _.mapKeys({ 'a': 1, 'b': 2 }, function(value, key) {\n         *   return key + value;\n         * });\n         * // => { 'a1': 1, 'b2': 2 }\n         */\n    function mapKeys(object, iteratee) {\n      var result = {};\n      iteratee = getIteratee(iteratee, 3);\n\n      baseForOwn(object, function(value, key, object) {\n        baseAssignValue(result, iteratee(value, key, object), value);\n      });\n      return result;\n    }\n\n    /**\n         * Creates an object with the same keys as `object` and values generated\n         * by running each own enumerable string keyed property of `object` thru\n         * `iteratee`. The iteratee is invoked with three arguments:\n         * (value, key, object).\n         *\n         * @static\n         * @memberOf _\n         * @since 2.4.0\n         * @category Object\n         * @param {Object} object The object to iterate over.\n         * @param {Function} [iteratee=_.identity] The function invoked per iteration.\n         * @returns {Object} Returns the new mapped object.\n         * @see _.mapKeys\n         * @example\n         *\n         * var users = {\n         *   'fred':    { 'user': 'fred',    'age': 40 },\n         *   'pebbles': { 'user': 'pebbles', 'age': 1 }\n         * };\n         *\n         * _.mapValues(users, function(o) { return o.age; });\n         * // => { 'fred': 40, 'pebbles': 1 } (iteration order is not guaranteed)\n         *\n         * // The `_.property` iteratee shorthand.\n         * _.mapValues(users, 'age');\n         * // => { 'fred': 40, 'pebbles': 1 } (iteration order is not guaranteed)\n         */\n    function mapValues(object, iteratee) {\n      var result = {};\n      iteratee = getIteratee(iteratee, 3);\n\n      baseForOwn(object, function(value, key, object) {\n        baseAssignValue(result, key, iteratee(value, key, object));\n      });\n      return result;\n    }\n\n    /**\n         * This method is like `_.assign` except that it recursively merges own and\n         * inherited enumerable string keyed properties of source objects into the\n         * destination object. Source properties that resolve to `undefined` are\n         * skipped if a destination value exists. Array and plain object properties\n         * are merged recursively. Other objects and value types are overridden by\n         * assignment. Source objects are applied from left to right. Subsequent\n         * sources overwrite property assignments of previous sources.\n         *\n         * **Note:** This method mutates `object`.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.5.0\n         * @category Object\n         * @param {Object} object The destination object.\n         * @param {...Object} [sources] The source objects.\n         * @returns {Object} Returns `object`.\n         * @example\n         *\n         * var object = {\n         *   'a': [{ 'b': 2 }, { 'd': 4 }]\n         * };\n         *\n         * var other = {\n         *   'a': [{ 'c': 3 }, { 'e': 5 }]\n         * };\n         *\n         * _.merge(object, other);\n         * // => { 'a': [{ 'b': 2, 'c': 3 }, { 'd': 4, 'e': 5 }] }\n         */\n    var merge = createAssigner(function(object, source, srcIndex) {\n      baseMerge(object, source, srcIndex);\n    });\n\n      /**\n       * This method is like `_.merge` except that it accepts `customizer` which\n       * is invoked to produce the merged values of the destination and source\n       * properties. If `customizer` returns `undefined`, merging is handled by the\n       * method instead. The `customizer` is invoked with six arguments:\n       * (objValue, srcValue, key, object, source, stack).\n       *\n       * **Note:** This method mutates `object`.\n       *\n       * @static\n       * @memberOf _\n       * @since 4.0.0\n       * @category Object\n       * @param {Object} object The destination object.\n       * @param {...Object} sources The source objects.\n       * @param {Function} customizer The function to customize assigned values.\n       * @returns {Object} Returns `object`.\n       * @example\n       *\n       * function customizer(objValue, srcValue) {\n       *   if (_.isArray(objValue)) {\n       *     return objValue.concat(srcValue);\n       *   }\n       * }\n       *\n       * var object = { 'a': [1], 'b': [2] };\n       * var other = { 'a': [3], 'b': [4] };\n       *\n       * _.mergeWith(object, other, customizer);\n       * // => { 'a': [1, 3], 'b': [2, 4] }\n       */\n    var mergeWith = createAssigner(function(\n      object,\n      source,\n      srcIndex,\n      customizer\n    ) {\n      baseMerge(object, source, srcIndex, customizer);\n    });\n\n      /**\n       * The opposite of `_.pick`; this method creates an object composed of the\n       * own and inherited enumerable property paths of `object` that are not omitted.\n       *\n       * **Note:** This method is considerably slower than `_.pick`.\n       *\n       * @static\n       * @since 0.1.0\n       * @memberOf _\n       * @category Object\n       * @param {Object} object The source object.\n       * @param {...(string|string[])} [paths] The property paths to omit.\n       * @returns {Object} Returns the new object.\n       * @example\n       *\n       * var object = { 'a': 1, 'b': '2', 'c': 3 };\n       *\n       * _.omit(object, ['a', 'c']);\n       * // => { 'b': '2' }\n       */\n    var omit = flatRest(function(object, paths) {\n      var result = {};\n      if (object == null) {\n        return result;\n      }\n      var isDeep = false;\n      paths = arrayMap(paths, function(path) {\n        path = castPath(path, object);\n        isDeep || (isDeep = path.length > 1);\n        return path;\n      });\n      copyObject(object, getAllKeysIn(object), result);\n      if (isDeep) {\n        result = baseClone(\n          result,\n          CLONE_DEEP_FLAG | CLONE_FLAT_FLAG | CLONE_SYMBOLS_FLAG,\n          customOmitClone\n        );\n      }\n      var length = paths.length;\n      while (length--) {\n        baseUnset(result, paths[length]);\n      }\n      return result;\n    });\n\n      /**\n       * The opposite of `_.pickBy`; this method creates an object composed of\n       * the own and inherited enumerable string keyed properties of `object` that\n       * `predicate` doesn't return truthy for. The predicate is invoked with two\n       * arguments: (value, key).\n       *\n       * @static\n       * @memberOf _\n       * @since 4.0.0\n       * @category Object\n       * @param {Object} object The source object.\n       * @param {Function} [predicate=_.identity] The function invoked per property.\n       * @returns {Object} Returns the new object.\n       * @example\n       *\n       * var object = { 'a': 1, 'b': '2', 'c': 3 };\n       *\n       * _.omitBy(object, _.isNumber);\n       * // => { 'b': '2' }\n       */\n    function omitBy(object, predicate) {\n      return pickBy(object, negate(getIteratee(predicate)));\n    }\n\n    /**\n         * Creates an object composed of the picked `object` properties.\n         *\n         * @static\n         * @since 0.1.0\n         * @memberOf _\n         * @category Object\n         * @param {Object} object The source object.\n         * @param {...(string|string[])} [paths] The property paths to pick.\n         * @returns {Object} Returns the new object.\n         * @example\n         *\n         * var object = { 'a': 1, 'b': '2', 'c': 3 };\n         *\n         * _.pick(object, ['a', 'c']);\n         * // => { 'a': 1, 'c': 3 }\n         */\n    var pick = flatRest(function(object, paths) {\n      return object == null ? {} : basePick(object, paths);\n    });\n\n      /**\n       * Creates an object composed of the `object` properties `predicate` returns\n       * truthy for. The predicate is invoked with two arguments: (value, key).\n       *\n       * @static\n       * @memberOf _\n       * @since 4.0.0\n       * @category Object\n       * @param {Object} object The source object.\n       * @param {Function} [predicate=_.identity] The function invoked per property.\n       * @returns {Object} Returns the new object.\n       * @example\n       *\n       * var object = { 'a': 1, 'b': '2', 'c': 3 };\n       *\n       * _.pickBy(object, _.isNumber);\n       * // => { 'a': 1, 'c': 3 }\n       */\n    function pickBy(object, predicate) {\n      if (object == null) {\n        return {};\n      }\n      var props = arrayMap(getAllKeysIn(object), function(prop) {\n        return [prop];\n      });\n      predicate = getIteratee(predicate);\n      return basePickBy(object, props, function(value, path) {\n        return predicate(value, path[0]);\n      });\n    }\n\n    /**\n         * This method is like `_.get` except that if the resolved value is a\n         * function it's invoked with the `this` binding of its parent object and\n         * its result is returned.\n         *\n         * @static\n         * @since 0.1.0\n         * @memberOf _\n         * @category Object\n         * @param {Object} object The object to query.\n         * @param {Array|string} path The path of the property to resolve.\n         * @param {*} [defaultValue] The value returned for `undefined` resolved values.\n         * @returns {*} Returns the resolved value.\n         * @example\n         *\n         * var object = { 'a': [{ 'b': { 'c1': 3, 'c2': _.constant(4) } }] };\n         *\n         * _.result(object, 'a[0].b.c1');\n         * // => 3\n         *\n         * _.result(object, 'a[0].b.c2');\n         * // => 4\n         *\n         * _.result(object, 'a[0].b.c3', 'default');\n         * // => 'default'\n         *\n         * _.result(object, 'a[0].b.c3', _.constant('default'));\n         * // => 'default'\n         */\n    function result(object, path, defaultValue) {\n      path = castPath(path, object);\n\n      var index = -1,\n        length = path.length;\n\n      // Ensure the loop is entered when path is empty.\n      if (!length) {\n        length = 1;\n        object = undefined;\n      }\n      while (++index < length) {\n        var value = object == null ? undefined : object[toKey(path[index])];\n        if (value === undefined) {\n          index = length;\n          value = defaultValue;\n        }\n        object = isFunction(value) ? value.call(object) : value;\n      }\n      return object;\n    }\n\n    /**\n         * Sets the value at `path` of `object`. If a portion of `path` doesn't exist,\n         * it's created. Arrays are created for missing index properties while objects\n         * are created for all other missing properties. Use `_.setWith` to customize\n         * `path` creation.\n         *\n         * **Note:** This method mutates `object`.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.7.0\n         * @category Object\n         * @param {Object} object The object to modify.\n         * @param {Array|string} path The path of the property to set.\n         * @param {*} value The value to set.\n         * @returns {Object} Returns `object`.\n         * @example\n         *\n         * var object = { 'a': [{ 'b': { 'c': 3 } }] };\n         *\n         * _.set(object, 'a[0].b.c', 4);\n         * console.log(object.a[0].b.c);\n         * // => 4\n         *\n         * _.set(object, ['x', '0', 'y', 'z'], 5);\n         * console.log(object.x[0].y.z);\n         * // => 5\n         */\n    function set(object, path, value) {\n      return object == null ? object : baseSet(object, path, value);\n    }\n\n    /**\n         * This method is like `_.set` except that it accepts `customizer` which is\n         * invoked to produce the objects of `path`.  If `customizer` returns `undefined`\n         * path creation is handled by the method instead. The `customizer` is invoked\n         * with three arguments: (nsValue, key, nsObject).\n         *\n         * **Note:** This method mutates `object`.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Object\n         * @param {Object} object The object to modify.\n         * @param {Array|string} path The path of the property to set.\n         * @param {*} value The value to set.\n         * @param {Function} [customizer] The function to customize assigned values.\n         * @returns {Object} Returns `object`.\n         * @example\n         *\n         * var object = {};\n         *\n         * _.setWith(object, '[0][1]', 'a', Object);\n         * // => { '0': { '1': 'a' } }\n         */\n    function setWith(object, path, value, customizer) {\n      customizer = typeof customizer === 'function' ? customizer : undefined;\n      return object == null ? object : baseSet(object, path, value, customizer);\n    }\n\n    /**\n         * Creates an array of own enumerable string keyed-value pairs for `object`\n         * which can be consumed by `_.fromPairs`. If `object` is a map or set, its\n         * entries are returned.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @alias entries\n         * @category Object\n         * @param {Object} object The object to query.\n         * @returns {Array} Returns the key-value pairs.\n         * @example\n         *\n         * function Foo() {\n         *   this.a = 1;\n         *   this.b = 2;\n         * }\n         *\n         * Foo.prototype.c = 3;\n         *\n         * _.toPairs(new Foo);\n         * // => [['a', 1], ['b', 2]] (iteration order is not guaranteed)\n         */\n    var toPairs = createToPairs(keys);\n\n    /**\n         * Creates an array of own and inherited enumerable string keyed-value pairs\n         * for `object` which can be consumed by `_.fromPairs`. If `object` is a map\n         * or set, its entries are returned.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @alias entriesIn\n         * @category Object\n         * @param {Object} object The object to query.\n         * @returns {Array} Returns the key-value pairs.\n         * @example\n         *\n         * function Foo() {\n         *   this.a = 1;\n         *   this.b = 2;\n         * }\n         *\n         * Foo.prototype.c = 3;\n         *\n         * _.toPairsIn(new Foo);\n         * // => [['a', 1], ['b', 2], ['c', 3]] (iteration order is not guaranteed)\n         */\n    var toPairsIn = createToPairs(keysIn);\n\n    /**\n         * An alternative to `_.reduce`; this method transforms `object` to a new\n         * `accumulator` object which is the result of running each of its own\n         * enumerable string keyed properties thru `iteratee`, with each invocation\n         * potentially mutating the `accumulator` object. If `accumulator` is not\n         * provided, a new object with the same `[[Prototype]]` will be used. The\n         * iteratee is invoked with four arguments: (accumulator, value, key, object).\n         * Iteratee functions may exit iteration early by explicitly returning `false`.\n         *\n         * @static\n         * @memberOf _\n         * @since 1.3.0\n         * @category Object\n         * @param {Object} object The object to iterate over.\n         * @param {Function} [iteratee=_.identity] The function invoked per iteration.\n         * @param {*} [accumulator] The custom accumulator value.\n         * @returns {*} Returns the accumulated value.\n         * @example\n         *\n         * _.transform([2, 3, 4], function(result, n) {\n         *   result.push(n *= n);\n         *   return n % 2 == 0;\n         * }, []);\n         * // => [4, 9]\n         *\n         * _.transform({ 'a': 1, 'b': 2, 'c': 1 }, function(result, value, key) {\n         *   (result[value] || (result[value] = [])).push(key);\n         * }, {});\n         * // => { '1': ['a', 'c'], '2': ['b'] }\n         */\n    function transform(object, iteratee, accumulator) {\n      var isArr = isArray(object),\n        isArrLike = isArr || isBuffer(object) || isTypedArray(object);\n\n      iteratee = getIteratee(iteratee, 4);\n      if (accumulator == null) {\n        var Ctor = object && object.constructor;\n        if (isArrLike) {\n          accumulator = isArr ? new Ctor() : [];\n        } else if (isObject(object)) {\n          accumulator = isFunction(Ctor)\n            ? baseCreate(getPrototype(object))\n            : {};\n        } else {\n          accumulator = {};\n        }\n      }\n      (isArrLike ? arrayEach : baseForOwn)(object, function(\n        value,\n        index,\n        object\n      ) {\n        return iteratee(accumulator, value, index, object);\n      });\n      return accumulator;\n    }\n\n    /**\n         * Removes the property at `path` of `object`.\n         *\n         * **Note:** This method mutates `object`.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Object\n         * @param {Object} object The object to modify.\n         * @param {Array|string} path The path of the property to unset.\n         * @returns {boolean} Returns `true` if the property is deleted, else `false`.\n         * @example\n         *\n         * var object = { 'a': [{ 'b': { 'c': 7 } }] };\n         * _.unset(object, 'a[0].b.c');\n         * // => true\n         *\n         * console.log(object);\n         * // => { 'a': [{ 'b': {} }] };\n         *\n         * _.unset(object, ['a', '0', 'b', 'c']);\n         * // => true\n         *\n         * console.log(object);\n         * // => { 'a': [{ 'b': {} }] };\n         */\n    function unset(object, path) {\n      return object == null ? true : baseUnset(object, path);\n    }\n\n    /**\n         * This method is like `_.set` except that accepts `updater` to produce the\n         * value to set. Use `_.updateWith` to customize `path` creation. The `updater`\n         * is invoked with one argument: (value).\n         *\n         * **Note:** This method mutates `object`.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.6.0\n         * @category Object\n         * @param {Object} object The object to modify.\n         * @param {Array|string} path The path of the property to set.\n         * @param {Function} updater The function to produce the updated value.\n         * @returns {Object} Returns `object`.\n         * @example\n         *\n         * var object = { 'a': [{ 'b': { 'c': 3 } }] };\n         *\n         * _.update(object, 'a[0].b.c', function(n) { return n * n; });\n         * console.log(object.a[0].b.c);\n         * // => 9\n         *\n         * _.update(object, 'x[0].y.z', function(n) { return n ? n + 1 : 0; });\n         * console.log(object.x[0].y.z);\n         * // => 0\n         */\n    function update(object, path, updater) {\n      return object == null\n        ? object\n        : baseUpdate(object, path, castFunction(updater));\n    }\n\n    /**\n         * This method is like `_.update` except that it accepts `customizer` which is\n         * invoked to produce the objects of `path`.  If `customizer` returns `undefined`\n         * path creation is handled by the method instead. The `customizer` is invoked\n         * with three arguments: (nsValue, key, nsObject).\n         *\n         * **Note:** This method mutates `object`.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.6.0\n         * @category Object\n         * @param {Object} object The object to modify.\n         * @param {Array|string} path The path of the property to set.\n         * @param {Function} updater The function to produce the updated value.\n         * @param {Function} [customizer] The function to customize assigned values.\n         * @returns {Object} Returns `object`.\n         * @example\n         *\n         * var object = {};\n         *\n         * _.updateWith(object, '[0][1]', _.constant('a'), Object);\n         * // => { '0': { '1': 'a' } }\n         */\n    function updateWith(object, path, updater, customizer) {\n      customizer = typeof customizer === 'function' ? customizer : undefined;\n      return object == null\n        ? object\n        : baseUpdate(object, path, castFunction(updater), customizer);\n    }\n\n    /**\n         * Creates an array of the own enumerable string keyed property values of `object`.\n         *\n         * **Note:** Non-object values are coerced to objects.\n         *\n         * @static\n         * @since 0.1.0\n         * @memberOf _\n         * @category Object\n         * @param {Object} object The object to query.\n         * @returns {Array} Returns the array of property values.\n         * @example\n         *\n         * function Foo() {\n         *   this.a = 1;\n         *   this.b = 2;\n         * }\n         *\n         * Foo.prototype.c = 3;\n         *\n         * _.values(new Foo);\n         * // => [1, 2] (iteration order is not guaranteed)\n         *\n         * _.values('hi');\n         * // => ['h', 'i']\n         */\n    function values(object) {\n      return object == null ? [] : baseValues(object, keys(object));\n    }\n\n    /**\n         * Creates an array of the own and inherited enumerable string keyed property\n         * values of `object`.\n         *\n         * **Note:** Non-object values are coerced to objects.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category Object\n         * @param {Object} object The object to query.\n         * @returns {Array} Returns the array of property values.\n         * @example\n         *\n         * function Foo() {\n         *   this.a = 1;\n         *   this.b = 2;\n         * }\n         *\n         * Foo.prototype.c = 3;\n         *\n         * _.valuesIn(new Foo);\n         * // => [1, 2, 3] (iteration order is not guaranteed)\n         */\n    function valuesIn(object) {\n      return object == null ? [] : baseValues(object, keysIn(object));\n    }\n\n    /* ------------------------------------------------------------------------*/\n\n    /**\n         * Clamps `number` within the inclusive `lower` and `upper` bounds.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Number\n         * @param {number} number The number to clamp.\n         * @param {number} [lower] The lower bound.\n         * @param {number} upper The upper bound.\n         * @returns {number} Returns the clamped number.\n         * @example\n         *\n         * _.clamp(-10, -5, 5);\n         * // => -5\n         *\n         * _.clamp(10, -5, 5);\n         * // => 5\n         */\n    function clamp(number, lower, upper) {\n      if (upper === undefined) {\n        upper = lower;\n        lower = undefined;\n      }\n      if (upper !== undefined) {\n        upper = toNumber(upper);\n        upper = upper === upper ? upper : 0;\n      }\n      if (lower !== undefined) {\n        lower = toNumber(lower);\n        lower = lower === lower ? lower : 0;\n      }\n      return baseClamp(toNumber(number), lower, upper);\n    }\n\n    /**\n         * Checks if `n` is between `start` and up to, but not including, `end`. If\n         * `end` is not specified, it's set to `start` with `start` then set to `0`.\n         * If `start` is greater than `end` the params are swapped to support\n         * negative ranges.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.3.0\n         * @category Number\n         * @param {number} number The number to check.\n         * @param {number} [start=0] The start of the range.\n         * @param {number} end The end of the range.\n         * @returns {boolean} Returns `true` if `number` is in the range, else `false`.\n         * @see _.range, _.rangeRight\n         * @example\n         *\n         * _.inRange(3, 2, 4);\n         * // => true\n         *\n         * _.inRange(4, 8);\n         * // => true\n         *\n         * _.inRange(4, 2);\n         * // => false\n         *\n         * _.inRange(2, 2);\n         * // => false\n         *\n         * _.inRange(1.2, 2);\n         * // => true\n         *\n         * _.inRange(5.2, 4);\n         * // => false\n         *\n         * _.inRange(-3, -2, -6);\n         * // => true\n         */\n    function inRange(number, start, end) {\n      start = toFinite(start);\n      if (end === undefined) {\n        end = start;\n        start = 0;\n      } else {\n        end = toFinite(end);\n      }\n      number = toNumber(number);\n      return baseInRange(number, start, end);\n    }\n\n    /**\n         * Produces a random number between the inclusive `lower` and `upper` bounds.\n         * If only one argument is provided a number between `0` and the given number\n         * is returned. If `floating` is `true`, or either `lower` or `upper` are\n         * floats, a floating-point number is returned instead of an integer.\n         *\n         * **Note:** JavaScript follows the IEEE-754 standard for resolving\n         * floating-point values which can produce unexpected results.\n         *\n         * @static\n         * @memberOf _\n         * @since 0.7.0\n         * @category Number\n         * @param {number} [lower=0] The lower bound.\n         * @param {number} [upper=1] The upper bound.\n         * @param {boolean} [floating] Specify returning a floating-point number.\n         * @returns {number} Returns the random number.\n         * @example\n         *\n         * _.random(0, 5);\n         * // => an integer between 0 and 5\n         *\n         * _.random(5);\n         * // => also an integer between 0 and 5\n         *\n         * _.random(5, true);\n         * // => a floating-point number between 0 and 5\n         *\n         * _.random(1.2, 5.2);\n         * // => a floating-point number between 1.2 and 5.2\n         */\n    function random(lower, upper, floating) {\n      if (\n        floating &&\n            typeof floating !== 'boolean' &&\n            isIterateeCall(lower, upper, floating)\n      ) {\n        upper = floating = undefined;\n      }\n      if (floating === undefined) {\n        if (typeof upper === 'boolean') {\n          floating = upper;\n          upper = undefined;\n        } else if (typeof lower === 'boolean') {\n          floating = lower;\n          lower = undefined;\n        }\n      }\n      if (lower === undefined && upper === undefined) {\n        lower = 0;\n        upper = 1;\n      } else {\n        lower = toFinite(lower);\n        if (upper === undefined) {\n          upper = lower;\n          lower = 0;\n        } else {\n          upper = toFinite(upper);\n        }\n      }\n      if (lower > upper) {\n        var temp = lower;\n        lower = upper;\n        upper = temp;\n      }\n      if (floating || lower % 1 || upper % 1) {\n        var rand = nativeRandom();\n        return nativeMin(\n          lower +\n               rand *\n               (upper -\n                  lower +\n                  freeParseFloat('1e-' + ((rand + '').length - 1))),\n          upper\n        );\n      }\n      return baseRandom(lower, upper);\n    }\n\n    /* ------------------------------------------------------------------------*/\n\n    /**\n         * Converts `string` to [camel case](https://en.wikipedia.org/wiki/CamelCase).\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category String\n         * @param {string} [string=''] The string to convert.\n         * @returns {string} Returns the camel cased string.\n         * @example\n         *\n         * _.camelCase('Foo Bar');\n         * // => 'fooBar'\n         *\n         * _.camelCase('--foo-bar--');\n         * // => 'fooBar'\n         *\n         * _.camelCase('__FOO_BAR__');\n         * // => 'fooBar'\n         */\n    var camelCase = createCompounder(function(result, word, index) {\n      word = word.toLowerCase();\n      return result + (index ? capitalize(word) : word);\n    });\n\n      /**\n       * Converts the first character of `string` to upper case and the remaining\n       * to lower case.\n       *\n       * @static\n       * @memberOf _\n       * @since 3.0.0\n       * @category String\n       * @param {string} [string=''] The string to capitalize.\n       * @returns {string} Returns the capitalized string.\n       * @example\n       *\n       * _.capitalize('FRED');\n       * // => 'Fred'\n       */\n    function capitalize(string) {\n      return upperFirst(toString(string).toLowerCase());\n    }\n\n    /**\n         * Deburrs `string` by converting\n         * [Latin-1 Supplement](https://en.wikipedia.org/wiki/Latin-1_Supplement_(Unicode_block)#Character_table)\n         * and [Latin Extended-A](https://en.wikipedia.org/wiki/Latin_Extended-A)\n         * letters to basic Latin letters and removing\n         * [combining diacritical marks](https://en.wikipedia.org/wiki/Combining_Diacritical_Marks).\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category String\n         * @param {string} [string=''] The string to deburr.\n         * @returns {string} Returns the deburred string.\n         * @example\n         *\n         * _.deburr('déjà vu');\n         * // => 'deja vu'\n         */\n    function deburr(string) {\n      string = toString(string);\n      return (\n        string && string.replace(reLatin, deburrLetter).replace(reComboMark, '')\n      );\n    }\n\n    /**\n         * Checks if `string` ends with the given target string.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category String\n         * @param {string} [string=''] The string to inspect.\n         * @param {string} [target] The string to search for.\n         * @param {number} [position=string.length] The position to search up to.\n         * @returns {boolean} Returns `true` if `string` ends with `target`,\n         *  else `false`.\n         * @example\n         *\n         * _.endsWith('abc', 'c');\n         * // => true\n         *\n         * _.endsWith('abc', 'b');\n         * // => false\n         *\n         * _.endsWith('abc', 'b', 2);\n         * // => true\n         */\n    function endsWith(string, target, position) {\n      string = toString(string);\n      target = baseToString(target);\n\n      var length = string.length;\n      position =\n            position === undefined\n              ? length\n              : baseClamp(toInteger(position), 0, length);\n\n      var end = position;\n      position -= target.length;\n      return position >= 0 && string.slice(position, end) == target;\n    }\n\n    /**\n         * Converts the characters \"&\", \"<\", \">\", '\"', and \"'\" in `string` to their\n         * corresponding HTML entities.\n         *\n         * **Note:** No other characters are escaped. To escape additional\n         * characters use a third-party library like [_he_](https://mths.be/he).\n         *\n         * Though the \">\" character is escaped for symmetry, characters like\n         * \">\" and \"/\" don't need escaping in HTML and have no special meaning\n         * unless they're part of a tag or unquoted attribute value. See\n         * [Mathias Bynens's article](https://mathiasbynens.be/notes/ambiguous-ampersands)\n         * (under \"semi-related fun fact\") for more details.\n         *\n         * When working with HTML you should always\n         * [quote attribute values](http://wonko.com/post/html-escaping) to reduce\n         * XSS vectors.\n         *\n         * @static\n         * @since 0.1.0\n         * @memberOf _\n         * @category String\n         * @param {string} [string=''] The string to escape.\n         * @returns {string} Returns the escaped string.\n         * @example\n         *\n         * _.escape('fred, barney, & pebbles');\n         * // => 'fred, barney, &amp; pebbles'\n         */\n    function escape(string) {\n      string = toString(string);\n      return string && reHasUnescapedHtml.test(string)\n        ? string.replace(reUnescapedHtml, escapeHtmlChar)\n        : string;\n    }\n\n    /**\n         * Escapes the `RegExp` special characters \"^\", \"$\", \"\\\", \".\", \"*\", \"+\",\n         * \"?\", \"(\", \")\", \"[\", \"]\", \"{\", \"}\", and \"|\" in `string`.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category String\n         * @param {string} [string=''] The string to escape.\n         * @returns {string} Returns the escaped string.\n         * @example\n         *\n         * _.escapeRegExp('[lodash](https://lodash.com/)');\n         * // => '\\[lodash\\]\\(https://lodash\\.com/\\)'\n         */\n    function escapeRegExp(string) {\n      string = toString(string);\n      return string && reHasRegExpChar.test(string)\n        ? string.replace(reRegExpChar, '\\\\$&')\n        : string;\n    }\n\n    /**\n         * Converts `string` to\n         * [kebab case](https://en.wikipedia.org/wiki/Letter_case#Special_case_styles).\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category String\n         * @param {string} [string=''] The string to convert.\n         * @returns {string} Returns the kebab cased string.\n         * @example\n         *\n         * _.kebabCase('Foo Bar');\n         * // => 'foo-bar'\n         *\n         * _.kebabCase('fooBar');\n         * // => 'foo-bar'\n         *\n         * _.kebabCase('__FOO_BAR__');\n         * // => 'foo-bar'\n         */\n    var kebabCase = createCompounder(function(result, word, index) {\n      return result + (index ? '-' : '') + word.toLowerCase();\n    });\n\n      /**\n       * Converts `string`, as space separated words, to lower case.\n       *\n       * @static\n       * @memberOf _\n       * @since 4.0.0\n       * @category String\n       * @param {string} [string=''] The string to convert.\n       * @returns {string} Returns the lower cased string.\n       * @example\n       *\n       * _.lowerCase('--Foo-Bar--');\n       * // => 'foo bar'\n       *\n       * _.lowerCase('fooBar');\n       * // => 'foo bar'\n       *\n       * _.lowerCase('__FOO_BAR__');\n       * // => 'foo bar'\n       */\n    var lowerCase = createCompounder(function(result, word, index) {\n      return result + (index ? ' ' : '') + word.toLowerCase();\n    });\n\n      /**\n       * Converts the first character of `string` to lower case.\n       *\n       * @static\n       * @memberOf _\n       * @since 4.0.0\n       * @category String\n       * @param {string} [string=''] The string to convert.\n       * @returns {string} Returns the converted string.\n       * @example\n       *\n       * _.lowerFirst('Fred');\n       * // => 'fred'\n       *\n       * _.lowerFirst('FRED');\n       * // => 'fRED'\n       */\n    var lowerFirst = createCaseFirst('toLowerCase');\n\n    /**\n         * Pads `string` on the left and right sides if it's shorter than `length`.\n         * Padding characters are truncated if they can't be evenly divided by `length`.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category String\n         * @param {string} [string=''] The string to pad.\n         * @param {number} [length=0] The padding length.\n         * @param {string} [chars=' '] The string used as padding.\n         * @returns {string} Returns the padded string.\n         * @example\n         *\n         * _.pad('abc', 8);\n         * // => '  abc   '\n         *\n         * _.pad('abc', 8, '_-');\n         * // => '_-abc_-_'\n         *\n         * _.pad('abc', 3);\n         * // => 'abc'\n         */\n    function pad(string, length, chars) {\n      string = toString(string);\n      length = toInteger(length);\n\n      var strLength = length ? stringSize(string) : 0;\n      if (!length || strLength >= length) {\n        return string;\n      }\n      var mid = (length - strLength) / 2;\n      return (\n        createPadding(nativeFloor(mid), chars) +\n            string +\n            createPadding(nativeCeil(mid), chars)\n      );\n    }\n\n    /**\n         * Pads `string` on the right side if it's shorter than `length`. Padding\n         * characters are truncated if they exceed `length`.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category String\n         * @param {string} [string=''] The string to pad.\n         * @param {number} [length=0] The padding length.\n         * @param {string} [chars=' '] The string used as padding.\n         * @returns {string} Returns the padded string.\n         * @example\n         *\n         * _.padEnd('abc', 6);\n         * // => 'abc   '\n         *\n         * _.padEnd('abc', 6, '_-');\n         * // => 'abc_-_'\n         *\n         * _.padEnd('abc', 3);\n         * // => 'abc'\n         */\n    function padEnd(string, length, chars) {\n      string = toString(string);\n      length = toInteger(length);\n\n      var strLength = length ? stringSize(string) : 0;\n      return length && strLength < length\n        ? string + createPadding(length - strLength, chars)\n        : string;\n    }\n\n    /**\n         * Pads `string` on the left side if it's shorter than `length`. Padding\n         * characters are truncated if they exceed `length`.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category String\n         * @param {string} [string=''] The string to pad.\n         * @param {number} [length=0] The padding length.\n         * @param {string} [chars=' '] The string used as padding.\n         * @returns {string} Returns the padded string.\n         * @example\n         *\n         * _.padStart('abc', 6);\n         * // => '   abc'\n         *\n         * _.padStart('abc', 6, '_-');\n         * // => '_-_abc'\n         *\n         * _.padStart('abc', 3);\n         * // => 'abc'\n         */\n    function padStart(string, length, chars) {\n      string = toString(string);\n      length = toInteger(length);\n\n      var strLength = length ? stringSize(string) : 0;\n      return length && strLength < length\n        ? createPadding(length - strLength, chars) + string\n        : string;\n    }\n\n    /**\n         * Converts `string` to an integer of the specified radix. If `radix` is\n         * `undefined` or `0`, a `radix` of `10` is used unless `value` is a\n         * hexadecimal, in which case a `radix` of `16` is used.\n         *\n         * **Note:** This method aligns with the\n         * [ES5 implementation](https://es5.github.io/#x15.1.2.2) of `parseInt`.\n         *\n         * @static\n         * @memberOf _\n         * @since 1.1.0\n         * @category String\n         * @param {string} string The string to convert.\n         * @param {number} [radix=10] The radix to interpret `value` by.\n         * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.\n         * @returns {number} Returns the converted integer.\n         * @example\n         *\n         * _.parseInt('08');\n         * // => 8\n         *\n         * _.map(['6', '08', '10'], _.parseInt);\n         * // => [6, 8, 10]\n         */\n    function parseInt(string, radix, guard) {\n      if (guard || radix == null) {\n        radix = 0;\n      } else if (radix) {\n        radix = +radix;\n      }\n      return nativeParseInt(\n        toString(string).replace(reTrimStart, ''),\n        radix || 0\n      );\n    }\n\n    /**\n         * Repeats the given string `n` times.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category String\n         * @param {string} [string=''] The string to repeat.\n         * @param {number} [n=1] The number of times to repeat the string.\n         * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.\n         * @returns {string} Returns the repeated string.\n         * @example\n         *\n         * _.repeat('*', 3);\n         * // => '***'\n         *\n         * _.repeat('abc', 2);\n         * // => 'abcabc'\n         *\n         * _.repeat('abc', 0);\n         * // => ''\n         */\n    function repeat(string, n, guard) {\n      if (guard ? isIterateeCall(string, n, guard) : n === undefined) {\n        n = 1;\n      } else {\n        n = toInteger(n);\n      }\n      return baseRepeat(toString(string), n);\n    }\n\n    /**\n         * Replaces matches for `pattern` in `string` with `replacement`.\n         *\n         * **Note:** This method is based on\n         * [`String#replace`](https://mdn.io/String/replace).\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category String\n         * @param {string} [string=''] The string to modify.\n         * @param {RegExp|string} pattern The pattern to replace.\n         * @param {Function|string} replacement The match replacement.\n         * @returns {string} Returns the modified string.\n         * @example\n         *\n         * _.replace('Hi Fred', 'Fred', 'Barney');\n         * // => 'Hi Barney'\n         */\n    function replace() {\n      var args = arguments,\n        string = toString(args[0]);\n\n      return args.length < 3 ? string : string.replace(args[1], args[2]);\n    }\n\n    /**\n         * Converts `string` to\n         * [snake case](https://en.wikipedia.org/wiki/Snake_case).\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category String\n         * @param {string} [string=''] The string to convert.\n         * @returns {string} Returns the snake cased string.\n         * @example\n         *\n         * _.snakeCase('Foo Bar');\n         * // => 'foo_bar'\n         *\n         * _.snakeCase('fooBar');\n         * // => 'foo_bar'\n         *\n         * _.snakeCase('--FOO-BAR--');\n         * // => 'foo_bar'\n         */\n    var snakeCase = createCompounder(function(result, word, index) {\n      return result + (index ? '_' : '') + word.toLowerCase();\n    });\n\n      /**\n       * Splits `string` by `separator`.\n       *\n       * **Note:** This method is based on\n       * [`String#split`](https://mdn.io/String/split).\n       *\n       * @static\n       * @memberOf _\n       * @since 4.0.0\n       * @category String\n       * @param {string} [string=''] The string to split.\n       * @param {RegExp|string} separator The separator pattern to split by.\n       * @param {number} [limit] The length to truncate results to.\n       * @returns {Array} Returns the string segments.\n       * @example\n       *\n       * _.split('a-b-c', '-', 2);\n       * // => ['a', 'b']\n       */\n    function split(string, separator, limit) {\n      if (\n        limit &&\n            typeof limit !== 'number' &&\n            isIterateeCall(string, separator, limit)\n      ) {\n        separator = limit = undefined;\n      }\n      limit = limit === undefined ? MAX_ARRAY_LENGTH : limit >>> 0;\n      if (!limit) {\n        return [];\n      }\n      string = toString(string);\n      if (\n        string &&\n            (typeof separator === 'string' ||\n               (separator != null && !isRegExp(separator)))\n      ) {\n        separator = baseToString(separator);\n        if (!separator && hasUnicode(string)) {\n          return castSlice(stringToArray(string), 0, limit);\n        }\n      }\n      return string.split(separator, limit);\n    }\n\n    /**\n         * Converts `string` to\n         * [start case](https://en.wikipedia.org/wiki/Letter_case#Stylistic_or_specialised_usage).\n         *\n         * @static\n         * @memberOf _\n         * @since 3.1.0\n         * @category String\n         * @param {string} [string=''] The string to convert.\n         * @returns {string} Returns the start cased string.\n         * @example\n         *\n         * _.startCase('--foo-bar--');\n         * // => 'Foo Bar'\n         *\n         * _.startCase('fooBar');\n         * // => 'Foo Bar'\n         *\n         * _.startCase('__FOO_BAR__');\n         * // => 'FOO BAR'\n         */\n    var startCase = createCompounder(function(result, word, index) {\n      return result + (index ? ' ' : '') + upperFirst(word);\n    });\n\n      /**\n       * Checks if `string` starts with the given target string.\n       *\n       * @static\n       * @memberOf _\n       * @since 3.0.0\n       * @category String\n       * @param {string} [string=''] The string to inspect.\n       * @param {string} [target] The string to search for.\n       * @param {number} [position=0] The position to search from.\n       * @returns {boolean} Returns `true` if `string` starts with `target`,\n       *  else `false`.\n       * @example\n       *\n       * _.startsWith('abc', 'a');\n       * // => true\n       *\n       * _.startsWith('abc', 'b');\n       * // => false\n       *\n       * _.startsWith('abc', 'b', 1);\n       * // => true\n       */\n    function startsWith(string, target, position) {\n      string = toString(string);\n      position =\n            position == null ? 0 : baseClamp(toInteger(position), 0, string.length);\n\n      target = baseToString(target);\n      return string.slice(position, position + target.length) == target;\n    }\n\n    /**\n         * Creates a compiled template function that can interpolate data properties\n         * in \"interpolate\" delimiters, HTML-escape interpolated data properties in\n         * \"escape\" delimiters, and execute JavaScript in \"evaluate\" delimiters. Data\n         * properties may be accessed as free variables in the template. If a setting\n         * object is given, it takes precedence over `_.templateSettings` values.\n         *\n         * **Note:** In the development build `_.template` utilizes\n         * [sourceURLs](http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/#toc-sourceurl)\n         * for easier debugging.\n         *\n         * For more information on precompiling templates see\n         * [lodash's custom builds documentation](https://lodash.com/custom-builds).\n         *\n         * For more information on Chrome extension sandboxes see\n         * [Chrome's extensions documentation](https://developer.chrome.com/extensions/sandboxingEval).\n         *\n         * @static\n         * @since 0.1.0\n         * @memberOf _\n         * @category String\n         * @param {string} [string=''] The template string.\n         * @param {Object} [options={}] The options object.\n         * @param {RegExp} [options.escape=_.templateSettings.escape]\n         *  The HTML \"escape\" delimiter.\n         * @param {RegExp} [options.evaluate=_.templateSettings.evaluate]\n         *  The \"evaluate\" delimiter.\n         * @param {Object} [options.imports=_.templateSettings.imports]\n         *  An object to import into the template as free variables.\n         * @param {RegExp} [options.interpolate=_.templateSettings.interpolate]\n         *  The \"interpolate\" delimiter.\n         * @param {string} [options.sourceURL='lodash.templateSources[n]']\n         *  The sourceURL of the compiled template.\n         * @param {string} [options.variable='obj']\n         *  The data object variable name.\n         * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.\n         * @returns {Function} Returns the compiled template function.\n         * @example\n         *\n         * // Use the \"interpolate\" delimiter to create a compiled template.\n         * var compiled = _.template('hello <%= user %>!');\n         * compiled({ 'user': 'fred' });\n         * // => 'hello fred!'\n         *\n         * // Use the HTML \"escape\" delimiter to escape data property values.\n         * var compiled = _.template('<b><%- value %></b>');\n         * compiled({ 'value': '<script>' });\n         * // => '<b>&lt;script&gt;</b>'\n         *\n         * // Use the \"evaluate\" delimiter to execute JavaScript and generate HTML.\n         * var compiled = _.template('<% _.forEach(users, function(user) { %><li><%- user %></li><% }); %>');\n         * compiled({ 'users': ['fred', 'barney'] });\n         * // => '<li>fred</li><li>barney</li>'\n         *\n         * // Use the internal `print` function in \"evaluate\" delimiters.\n         * var compiled = _.template('<% print(\"hello \" + user); %>!');\n         * compiled({ 'user': 'barney' });\n         * // => 'hello barney!'\n         *\n         * // Use the ES template literal delimiter as an \"interpolate\" delimiter.\n         * // Disable support by replacing the \"interpolate\" delimiter.\n         * var compiled = _.template('hello ${ user }!');\n         * compiled({ 'user': 'pebbles' });\n         * // => 'hello pebbles!'\n         *\n         * // Use backslashes to treat delimiters as plain text.\n         * var compiled = _.template('<%= \"\\\\<%- value %\\\\>\" %>');\n         * compiled({ 'value': 'ignored' });\n         * // => '<%- value %>'\n         *\n         * // Use the `imports` option to import `jQuery` as `jq`.\n         * var text = '<% jq.each(users, function(user) { %><li><%- user %></li><% }); %>';\n         * var compiled = _.template(text, { 'imports': { 'jq': jQuery } });\n         * compiled({ 'users': ['fred', 'barney'] });\n         * // => '<li>fred</li><li>barney</li>'\n         *\n         * // Use the `sourceURL` option to specify a custom sourceURL for the template.\n         * var compiled = _.template('hello <%= user %>!', { 'sourceURL': '/basic/greeting.jst' });\n         * compiled(data);\n         * // => Find the source of \"greeting.jst\" under the Sources tab or Resources panel of the web inspector.\n         *\n         * // Use the `variable` option to ensure a with-statement isn't used in the compiled template.\n         * var compiled = _.template('hi <%= data.user %>!', { 'variable': 'data' });\n         * compiled.source;\n         * // => function(data) {\n         * //   var __t, __p = '';\n         * //   __p += 'hi ' + ((__t = ( data.user )) == null ? '' : __t) + '!';\n         * //   return __p;\n         * // }\n         *\n         * // Use custom template delimiters.\n         * _.templateSettings.interpolate = /{{([\\s\\S]+?)}}/g;\n         * var compiled = _.template('hello {{ user }}!');\n         * compiled({ 'user': 'mustache' });\n         * // => 'hello mustache!'\n         *\n         * // Use the `source` property to inline compiled templates for meaningful\n         * // line numbers in error messages and stack traces.\n         * fs.writeFileSync(path.join(process.cwd(), 'jst.js'), '\\\n         *   var JST = {\\\n         *     \"main\": ' + _.template(mainText).source + '\\\n         *   };\\\n         * ');\n         */\n    function template(string, options, guard) {\n      // Based on John Resig's `tmpl` implementation\n      // (http://ejohn.org/blog/javascript-micro-templating/)\n      // and Laura Doktorova's doT.js (https://github.com/olado/doT).\n      var settings = lodash.templateSettings;\n\n      if (guard && isIterateeCall(string, options, guard)) {\n        options = undefined;\n      }\n      string = toString(string);\n      options = assignInWith({}, options, settings, customDefaultsAssignIn);\n\n      var imports = assignInWith(\n          {},\n          options.imports,\n          settings.imports,\n          customDefaultsAssignIn\n        ),\n        importsKeys = keys(imports),\n        importsValues = baseValues(imports, importsKeys);\n\n      var isEscaping,\n        isEvaluating,\n        index = 0,\n        interpolate = options.interpolate || reNoMatch,\n        source = \"__p += '\";\n\n      // Compile the regexp to match each delimiter.\n      var reDelimiters = RegExp(\n        (options.escape || reNoMatch).source +\n            '|' +\n            interpolate.source +\n            '|' +\n            (interpolate === reInterpolate ? reEsTemplate : reNoMatch).source +\n            '|' +\n            (options.evaluate || reNoMatch).source +\n            '|$',\n        'g'\n      );\n\n      // Use a sourceURL for easier debugging.\n      var sourceURL =\n            '//# sourceURL=' +\n            ('sourceURL' in options\n              ? options.sourceURL\n              : 'lodash.templateSources[' + ++templateCounter + ']') +\n            '\\n';\n\n      string.replace(reDelimiters, function(\n        match,\n        escapeValue,\n        interpolateValue,\n        esTemplateValue,\n        evaluateValue,\n        offset\n      ) {\n        interpolateValue || (interpolateValue = esTemplateValue);\n\n        // Escape characters that can't be included in string literals.\n        source += string\n          .slice(index, offset)\n          .replace(reUnescapedString, escapeStringChar);\n\n        // Replace delimiters with snippets.\n        if (escapeValue) {\n          isEscaping = true;\n          source += \"' +\\n__e(\" + escapeValue + \") +\\n'\";\n        }\n        if (evaluateValue) {\n          isEvaluating = true;\n          source += \"';\\n\" + evaluateValue + \";\\n__p += '\";\n        }\n        if (interpolateValue) {\n          source +=\n                  \"' +\\n((__t = (\" + interpolateValue + \")) == null ? '' : __t) +\\n'\";\n        }\n        index = offset + match.length;\n\n        // The JS engine embedded in Adobe products needs `match` returned in\n        // order to produce the correct `offset` value.\n        return match;\n      });\n\n      source += \"';\\n\";\n\n      // If `variable` is not specified wrap a with-statement around the generated\n      // code to add the data object to the top of the scope chain.\n      var variable = options.variable;\n      if (!variable) {\n        source = 'with (obj) {\\n' + source + '\\n}\\n';\n      }\n      // Cleanup code by stripping empty strings.\n      source = (isEvaluating\n        ? source.replace(reEmptyStringLeading, '')\n        : source\n      )\n        .replace(reEmptyStringMiddle, '$1')\n        .replace(reEmptyStringTrailing, '$1;');\n\n      // Frame code as the function body.\n      source =\n            'function(' +\n            (variable || 'obj') +\n            ') {\\n' +\n            (variable ? '' : 'obj || (obj = {});\\n') +\n            \"var __t, __p = ''\" +\n            (isEscaping ? ', __e = _.escape' : '') +\n            (isEvaluating\n              ? ', __j = Array.prototype.join;\\n' +\n               \"function print() { __p += __j.call(arguments, '') }\\n\"\n              : ';\\n') +\n            source +\n            'return __p\\n}';\n\n      var result = attempt(function() {\n        return Function(importsKeys, sourceURL + 'return ' + source).apply(\n          undefined,\n          importsValues\n        );\n      });\n\n      // Provide the compiled function's source by its `toString` method or\n      // the `source` property as a convenience for inlining compiled templates.\n      result.source = source;\n      if (isError(result)) {\n        throw result;\n      }\n      return result;\n    }\n\n    /**\n         * Converts `string`, as a whole, to lower case just like\n         * [String#toLowerCase](https://mdn.io/toLowerCase).\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category String\n         * @param {string} [string=''] The string to convert.\n         * @returns {string} Returns the lower cased string.\n         * @example\n         *\n         * _.toLower('--Foo-Bar--');\n         * // => '--foo-bar--'\n         *\n         * _.toLower('fooBar');\n         * // => 'foobar'\n         *\n         * _.toLower('__FOO_BAR__');\n         * // => '__foo_bar__'\n         */\n    function toLower(value) {\n      return toString(value).toLowerCase();\n    }\n\n    /**\n         * Converts `string`, as a whole, to upper case just like\n         * [String#toUpperCase](https://mdn.io/toUpperCase).\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category String\n         * @param {string} [string=''] The string to convert.\n         * @returns {string} Returns the upper cased string.\n         * @example\n         *\n         * _.toUpper('--foo-bar--');\n         * // => '--FOO-BAR--'\n         *\n         * _.toUpper('fooBar');\n         * // => 'FOOBAR'\n         *\n         * _.toUpper('__foo_bar__');\n         * // => '__FOO_BAR__'\n         */\n    function toUpper(value) {\n      return toString(value).toUpperCase();\n    }\n\n    /**\n         * Removes leading and trailing whitespace or specified characters from `string`.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category String\n         * @param {string} [string=''] The string to trim.\n         * @param {string} [chars=whitespace] The characters to trim.\n         * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.\n         * @returns {string} Returns the trimmed string.\n         * @example\n         *\n         * _.trim('  abc  ');\n         * // => 'abc'\n         *\n         * _.trim('-_-abc-_-', '_-');\n         * // => 'abc'\n         *\n         * _.map(['  foo  ', '  bar  '], _.trim);\n         * // => ['foo', 'bar']\n         */\n    function trim(string, chars, guard) {\n      string = toString(string);\n      if (string && (guard || chars === undefined)) {\n        return string.replace(reTrim, '');\n      }\n      if (!string || !(chars = baseToString(chars))) {\n        return string;\n      }\n      var strSymbols = stringToArray(string),\n        chrSymbols = stringToArray(chars),\n        start = charsStartIndex(strSymbols, chrSymbols),\n        end = charsEndIndex(strSymbols, chrSymbols) + 1;\n\n      return castSlice(strSymbols, start, end).join('');\n    }\n\n    /**\n         * Removes trailing whitespace or specified characters from `string`.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category String\n         * @param {string} [string=''] The string to trim.\n         * @param {string} [chars=whitespace] The characters to trim.\n         * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.\n         * @returns {string} Returns the trimmed string.\n         * @example\n         *\n         * _.trimEnd('  abc  ');\n         * // => '  abc'\n         *\n         * _.trimEnd('-_-abc-_-', '_-');\n         * // => '-_-abc'\n         */\n    function trimEnd(string, chars, guard) {\n      string = toString(string);\n      if (string && (guard || chars === undefined)) {\n        return string.replace(reTrimEnd, '');\n      }\n      if (!string || !(chars = baseToString(chars))) {\n        return string;\n      }\n      var strSymbols = stringToArray(string),\n        end = charsEndIndex(strSymbols, stringToArray(chars)) + 1;\n\n      return castSlice(strSymbols, 0, end).join('');\n    }\n\n    /**\n         * Removes leading whitespace or specified characters from `string`.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category String\n         * @param {string} [string=''] The string to trim.\n         * @param {string} [chars=whitespace] The characters to trim.\n         * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.\n         * @returns {string} Returns the trimmed string.\n         * @example\n         *\n         * _.trimStart('  abc  ');\n         * // => 'abc  '\n         *\n         * _.trimStart('-_-abc-_-', '_-');\n         * // => 'abc-_-'\n         */\n    function trimStart(string, chars, guard) {\n      string = toString(string);\n      if (string && (guard || chars === undefined)) {\n        return string.replace(reTrimStart, '');\n      }\n      if (!string || !(chars = baseToString(chars))) {\n        return string;\n      }\n      var strSymbols = stringToArray(string),\n        start = charsStartIndex(strSymbols, stringToArray(chars));\n\n      return castSlice(strSymbols, start).join('');\n    }\n\n    /**\n         * Truncates `string` if it's longer than the given maximum string length.\n         * The last characters of the truncated string are replaced with the omission\n         * string which defaults to \"...\".\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category String\n         * @param {string} [string=''] The string to truncate.\n         * @param {Object} [options={}] The options object.\n         * @param {number} [options.length=30] The maximum string length.\n         * @param {string} [options.omission='...'] The string to indicate text is omitted.\n         * @param {RegExp|string} [options.separator] The separator pattern to truncate to.\n         * @returns {string} Returns the truncated string.\n         * @example\n         *\n         * _.truncate('hi-diddly-ho there, neighborino');\n         * // => 'hi-diddly-ho there, neighbo...'\n         *\n         * _.truncate('hi-diddly-ho there, neighborino', {\n         *   'length': 24,\n         *   'separator': ' '\n         * });\n         * // => 'hi-diddly-ho there,...'\n         *\n         * _.truncate('hi-diddly-ho there, neighborino', {\n         *   'length': 24,\n         *   'separator': /,? +/\n         * });\n         * // => 'hi-diddly-ho there...'\n         *\n         * _.truncate('hi-diddly-ho there, neighborino', {\n         *   'omission': ' [...]'\n         * });\n         * // => 'hi-diddly-ho there, neig [...]'\n         */\n    function truncate(string, options) {\n      var length = DEFAULT_TRUNC_LENGTH,\n        omission = DEFAULT_TRUNC_OMISSION;\n\n      if (isObject(options)) {\n        var separator = 'separator' in options ? options.separator : separator;\n        length = 'length' in options ? toInteger(options.length) : length;\n        omission =\n               'omission' in options ? baseToString(options.omission) : omission;\n      }\n      string = toString(string);\n\n      var strLength = string.length;\n      if (hasUnicode(string)) {\n        var strSymbols = stringToArray(string);\n        strLength = strSymbols.length;\n      }\n      if (length >= strLength) {\n        return string;\n      }\n      var end = length - stringSize(omission);\n      if (end < 1) {\n        return omission;\n      }\n      var result = strSymbols\n        ? castSlice(strSymbols, 0, end).join('')\n        : string.slice(0, end);\n\n      if (separator === undefined) {\n        return result + omission;\n      }\n      if (strSymbols) {\n        end += result.length - end;\n      }\n      if (isRegExp(separator)) {\n        if (string.slice(end).search(separator)) {\n          var match,\n            substring = result;\n\n          if (!separator.global) {\n            separator = RegExp(\n              separator.source,\n              toString(reFlags.exec(separator)) + 'g'\n            );\n          }\n          separator.lastIndex = 0;\n          while ((match = separator.exec(substring))) {\n            var newEnd = match.index;\n          }\n          result = result.slice(0, newEnd === undefined ? end : newEnd);\n        }\n      } else if (string.indexOf(baseToString(separator), end) != end) {\n        var index = result.lastIndexOf(separator);\n        if (index > -1) {\n          result = result.slice(0, index);\n        }\n      }\n      return result + omission;\n    }\n\n    /**\n         * The inverse of `_.escape`; this method converts the HTML entities\n         * `&amp;`, `&lt;`, `&gt;`, `&quot;`, and `&#39;` in `string` to\n         * their corresponding characters.\n         *\n         * **Note:** No other HTML entities are unescaped. To unescape additional\n         * HTML entities use a third-party library like [_he_](https://mths.be/he).\n         *\n         * @static\n         * @memberOf _\n         * @since 0.6.0\n         * @category String\n         * @param {string} [string=''] The string to unescape.\n         * @returns {string} Returns the unescaped string.\n         * @example\n         *\n         * _.unescape('fred, barney, &amp; pebbles');\n         * // => 'fred, barney, & pebbles'\n         */\n    function unescape(string) {\n      string = toString(string);\n      return string && reHasEscapedHtml.test(string)\n        ? string.replace(reEscapedHtml, unescapeHtmlChar)\n        : string;\n    }\n\n    /**\n         * Converts `string`, as space separated words, to upper case.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category String\n         * @param {string} [string=''] The string to convert.\n         * @returns {string} Returns the upper cased string.\n         * @example\n         *\n         * _.upperCase('--foo-bar');\n         * // => 'FOO BAR'\n         *\n         * _.upperCase('fooBar');\n         * // => 'FOO BAR'\n         *\n         * _.upperCase('__foo_bar__');\n         * // => 'FOO BAR'\n         */\n    var upperCase = createCompounder(function(result, word, index) {\n      return result + (index ? ' ' : '') + word.toUpperCase();\n    });\n\n      /**\n       * Converts the first character of `string` to upper case.\n       *\n       * @static\n       * @memberOf _\n       * @since 4.0.0\n       * @category String\n       * @param {string} [string=''] The string to convert.\n       * @returns {string} Returns the converted string.\n       * @example\n       *\n       * _.upperFirst('fred');\n       * // => 'Fred'\n       *\n       * _.upperFirst('FRED');\n       * // => 'FRED'\n       */\n    var upperFirst = createCaseFirst('toUpperCase');\n\n    /**\n         * Splits `string` into an array of its words.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category String\n         * @param {string} [string=''] The string to inspect.\n         * @param {RegExp|string} [pattern] The pattern to match words.\n         * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.\n         * @returns {Array} Returns the words of `string`.\n         * @example\n         *\n         * _.words('fred, barney, & pebbles');\n         * // => ['fred', 'barney', 'pebbles']\n         *\n         * _.words('fred, barney, & pebbles', /[^, ]+/g);\n         * // => ['fred', 'barney', '&', 'pebbles']\n         */\n    function words(string, pattern, guard) {\n      string = toString(string);\n      pattern = guard ? undefined : pattern;\n\n      if (pattern === undefined) {\n        return hasUnicodeWord(string)\n          ? unicodeWords(string)\n          : asciiWords(string);\n      }\n      return string.match(pattern) || [];\n    }\n\n    /* ------------------------------------------------------------------------*/\n\n    /**\n         * Attempts to invoke `func`, returning either the result or the caught error\n         * object. Any additional arguments are provided to `func` when it's invoked.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category Util\n         * @param {Function} func The function to attempt.\n         * @param {...*} [args] The arguments to invoke `func` with.\n         * @returns {*} Returns the `func` result or error object.\n         * @example\n         *\n         * // Avoid throwing errors for invalid selectors.\n         * var elements = _.attempt(function(selector) {\n         *   return document.querySelectorAll(selector);\n         * }, '>_>');\n         *\n         * if (_.isError(elements)) {\n         *   elements = [];\n         * }\n         */\n    var attempt = baseRest(function(func, args) {\n      try {\n        return apply(func, undefined, args);\n      } catch (e) {\n        return isError(e) ? e : new Error(e);\n      }\n    });\n\n      /**\n       * Binds methods of an object to the object itself, overwriting the existing\n       * method.\n       *\n       * **Note:** This method doesn't set the \"length\" property of bound functions.\n       *\n       * @static\n       * @since 0.1.0\n       * @memberOf _\n       * @category Util\n       * @param {Object} object The object to bind and assign the bound methods to.\n       * @param {...(string|string[])} methodNames The object method names to bind.\n       * @returns {Object} Returns `object`.\n       * @example\n       *\n       * var view = {\n       *   'label': 'docs',\n       *   'click': function() {\n       *     console.log('clicked ' + this.label);\n       *   }\n       * };\n       *\n       * _.bindAll(view, ['click']);\n       * jQuery(element).on('click', view.click);\n       * // => Logs 'clicked docs' when clicked.\n       */\n    var bindAll = flatRest(function(object, methodNames) {\n      arrayEach(methodNames, function(key) {\n        key = toKey(key);\n        baseAssignValue(object, key, bind(object[key], object));\n      });\n      return object;\n    });\n\n      /**\n       * Creates a function that iterates over `pairs` and invokes the corresponding\n       * function of the first predicate to return truthy. The predicate-function\n       * pairs are invoked with the `this` binding and arguments of the created\n       * function.\n       *\n       * @static\n       * @memberOf _\n       * @since 4.0.0\n       * @category Util\n       * @param {Array} pairs The predicate-function pairs.\n       * @returns {Function} Returns the new composite function.\n       * @example\n       *\n       * var func = _.cond([\n       *   [_.matches({ 'a': 1 }),           _.constant('matches A')],\n       *   [_.conforms({ 'b': _.isNumber }), _.constant('matches B')],\n       *   [_.stubTrue,                      _.constant('no match')]\n       * ]);\n       *\n       * func({ 'a': 1, 'b': 2 });\n       * // => 'matches A'\n       *\n       * func({ 'a': 0, 'b': 1 });\n       * // => 'matches B'\n       *\n       * func({ 'a': '1', 'b': '2' });\n       * // => 'no match'\n       */\n    function cond(pairs) {\n      var length = pairs == null ? 0 : pairs.length,\n        toIteratee = getIteratee();\n\n      pairs = !length\n        ? []\n        : arrayMap(pairs, function(pair) {\n          if (typeof pair[1] !== 'function') {\n            throw new TypeError(FUNC_ERROR_TEXT);\n          }\n          return [toIteratee(pair[0]), pair[1]];\n        });\n\n      return baseRest(function(args) {\n        var index = -1;\n        while (++index < length) {\n          var pair = pairs[index];\n          if (apply(pair[0], this, args)) {\n            return apply(pair[1], this, args);\n          }\n        }\n      });\n    }\n\n    /**\n         * Creates a function that invokes the predicate properties of `source` with\n         * the corresponding property values of a given object, returning `true` if\n         * all predicates return truthy, else `false`.\n         *\n         * **Note:** The created function is equivalent to `_.conformsTo` with\n         * `source` partially applied.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Util\n         * @param {Object} source The object of property predicates to conform to.\n         * @returns {Function} Returns the new spec function.\n         * @example\n         *\n         * var objects = [\n         *   { 'a': 2, 'b': 1 },\n         *   { 'a': 1, 'b': 2 }\n         * ];\n         *\n         * _.filter(objects, _.conforms({ 'b': function(n) { return n > 1; } }));\n         * // => [{ 'a': 1, 'b': 2 }]\n         */\n    function conforms(source) {\n      return baseConforms(baseClone(source, CLONE_DEEP_FLAG));\n    }\n\n    /**\n         * Creates a function that returns `value`.\n         *\n         * @static\n         * @memberOf _\n         * @since 2.4.0\n         * @category Util\n         * @param {*} value The value to return from the new function.\n         * @returns {Function} Returns the new constant function.\n         * @example\n         *\n         * var objects = _.times(2, _.constant({ 'a': 1 }));\n         *\n         * console.log(objects);\n         * // => [{ 'a': 1 }, { 'a': 1 }]\n         *\n         * console.log(objects[0] === objects[1]);\n         * // => true\n         */\n    function constant(value) {\n      return function() {\n        return value;\n      };\n    }\n\n    /**\n         * Checks `value` to determine whether a default value should be returned in\n         * its place. The `defaultValue` is returned if `value` is `NaN`, `null`,\n         * or `undefined`.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.14.0\n         * @category Util\n         * @param {*} value The value to check.\n         * @param {*} defaultValue The default value.\n         * @returns {*} Returns the resolved value.\n         * @example\n         *\n         * _.defaultTo(1, 10);\n         * // => 1\n         *\n         * _.defaultTo(undefined, 10);\n         * // => 10\n         */\n    function defaultTo(value, defaultValue) {\n      return value == null || value !== value ? defaultValue : value;\n    }\n\n    /**\n         * Creates a function that returns the result of invoking the given functions\n         * with the `this` binding of the created function, where each successive\n         * invocation is supplied the return value of the previous.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category Util\n         * @param {...(Function|Function[])} [funcs] The functions to invoke.\n         * @returns {Function} Returns the new composite function.\n         * @see _.flowRight\n         * @example\n         *\n         * function square(n) {\n         *   return n * n;\n         * }\n         *\n         * var addSquare = _.flow([_.add, square]);\n         * addSquare(1, 2);\n         * // => 9\n         */\n    var flow = createFlow();\n\n    /**\n         * This method is like `_.flow` except that it creates a function that\n         * invokes the given functions from right to left.\n         *\n         * @static\n         * @since 3.0.0\n         * @memberOf _\n         * @category Util\n         * @param {...(Function|Function[])} [funcs] The functions to invoke.\n         * @returns {Function} Returns the new composite function.\n         * @see _.flow\n         * @example\n         *\n         * function square(n) {\n         *   return n * n;\n         * }\n         *\n         * var addSquare = _.flowRight([square, _.add]);\n         * addSquare(1, 2);\n         * // => 9\n         */\n    var flowRight = createFlow(true);\n\n    /**\n         * This method returns the first argument it receives.\n         *\n         * @static\n         * @since 0.1.0\n         * @memberOf _\n         * @category Util\n         * @param {*} value Any value.\n         * @returns {*} Returns `value`.\n         * @example\n         *\n         * var object = { 'a': 1 };\n         *\n         * console.log(_.identity(object) === object);\n         * // => true\n         */\n    function identity(value) {\n      return value;\n    }\n\n    /**\n         * Creates a function that invokes `func` with the arguments of the created\n         * function. If `func` is a property name, the created function returns the\n         * property value for a given element. If `func` is an array or object, the\n         * created function returns `true` for elements that contain the equivalent\n         * source properties, otherwise it returns `false`.\n         *\n         * @static\n         * @since 4.0.0\n         * @memberOf _\n         * @category Util\n         * @param {*} [func=_.identity] The value to convert to a callback.\n         * @returns {Function} Returns the callback.\n         * @example\n         *\n         * var users = [\n         *   { 'user': 'barney', 'age': 36, 'active': true },\n         *   { 'user': 'fred',   'age': 40, 'active': false }\n         * ];\n         *\n         * // The `_.matches` iteratee shorthand.\n         * _.filter(users, _.iteratee({ 'user': 'barney', 'active': true }));\n         * // => [{ 'user': 'barney', 'age': 36, 'active': true }]\n         *\n         * // The `_.matchesProperty` iteratee shorthand.\n         * _.filter(users, _.iteratee(['user', 'fred']));\n         * // => [{ 'user': 'fred', 'age': 40 }]\n         *\n         * // The `_.property` iteratee shorthand.\n         * _.map(users, _.iteratee('user'));\n         * // => ['barney', 'fred']\n         *\n         * // Create custom iteratee shorthands.\n         * _.iteratee = _.wrap(_.iteratee, function(iteratee, func) {\n         *   return !_.isRegExp(func) ? iteratee(func) : function(string) {\n         *     return func.test(string);\n         *   };\n         * });\n         *\n         * _.filter(['abc', 'def'], /ef/);\n         * // => ['def']\n         */\n    function iteratee(func) {\n      return baseIteratee(\n        typeof func === 'function' ? func : baseClone(func, CLONE_DEEP_FLAG)\n      );\n    }\n\n    /**\n         * Creates a function that performs a partial deep comparison between a given\n         * object and `source`, returning `true` if the given object has equivalent\n         * property values, else `false`.\n         *\n         * **Note:** The created function is equivalent to `_.isMatch` with `source`\n         * partially applied.\n         *\n         * Partial comparisons will match empty array and empty object `source`\n         * values against any array or object value, respectively. See `_.isEqual`\n         * for a list of supported value comparisons.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category Util\n         * @param {Object} source The object of property values to match.\n         * @returns {Function} Returns the new spec function.\n         * @example\n         *\n         * var objects = [\n         *   { 'a': 1, 'b': 2, 'c': 3 },\n         *   { 'a': 4, 'b': 5, 'c': 6 }\n         * ];\n         *\n         * _.filter(objects, _.matches({ 'a': 4, 'c': 6 }));\n         * // => [{ 'a': 4, 'b': 5, 'c': 6 }]\n         */\n    function matches(source) {\n      return baseMatches(baseClone(source, CLONE_DEEP_FLAG));\n    }\n\n    /**\n         * Creates a function that performs a partial deep comparison between the\n         * value at `path` of a given object to `srcValue`, returning `true` if the\n         * object value is equivalent, else `false`.\n         *\n         * **Note:** Partial comparisons will match empty array and empty object\n         * `srcValue` values against any array or object value, respectively. See\n         * `_.isEqual` for a list of supported value comparisons.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.2.0\n         * @category Util\n         * @param {Array|string} path The path of the property to get.\n         * @param {*} srcValue The value to match.\n         * @returns {Function} Returns the new spec function.\n         * @example\n         *\n         * var objects = [\n         *   { 'a': 1, 'b': 2, 'c': 3 },\n         *   { 'a': 4, 'b': 5, 'c': 6 }\n         * ];\n         *\n         * _.find(objects, _.matchesProperty('a', 4));\n         * // => { 'a': 4, 'b': 5, 'c': 6 }\n         */\n    function matchesProperty(path, srcValue) {\n      return baseMatchesProperty(path, baseClone(srcValue, CLONE_DEEP_FLAG));\n    }\n\n    /**\n         * Creates a function that invokes the method at `path` of a given object.\n         * Any additional arguments are provided to the invoked method.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.7.0\n         * @category Util\n         * @param {Array|string} path The path of the method to invoke.\n         * @param {...*} [args] The arguments to invoke the method with.\n         * @returns {Function} Returns the new invoker function.\n         * @example\n         *\n         * var objects = [\n         *   { 'a': { 'b': _.constant(2) } },\n         *   { 'a': { 'b': _.constant(1) } }\n         * ];\n         *\n         * _.map(objects, _.method('a.b'));\n         * // => [2, 1]\n         *\n         * _.map(objects, _.method(['a', 'b']));\n         * // => [2, 1]\n         */\n    var method = baseRest(function(path, args) {\n      return function(object) {\n        return baseInvoke(object, path, args);\n      };\n    });\n\n      /**\n       * The opposite of `_.method`; this method creates a function that invokes\n       * the method at a given path of `object`. Any additional arguments are\n       * provided to the invoked method.\n       *\n       * @static\n       * @memberOf _\n       * @since 3.7.0\n       * @category Util\n       * @param {Object} object The object to query.\n       * @param {...*} [args] The arguments to invoke the method with.\n       * @returns {Function} Returns the new invoker function.\n       * @example\n       *\n       * var array = _.times(3, _.constant),\n       *     object = { 'a': array, 'b': array, 'c': array };\n       *\n       * _.map(['a[2]', 'c[0]'], _.methodOf(object));\n       * // => [2, 0]\n       *\n       * _.map([['a', '2'], ['c', '0']], _.methodOf(object));\n       * // => [2, 0]\n       */\n    var methodOf = baseRest(function(object, args) {\n      return function(path) {\n        return baseInvoke(object, path, args);\n      };\n    });\n\n      /**\n       * Adds all own enumerable string keyed function properties of a source\n       * object to the destination object. If `object` is a function, then methods\n       * are added to its prototype as well.\n       *\n       * **Note:** Use `_.runInContext` to create a pristine `lodash` function to\n       * avoid conflicts caused by modifying the original.\n       *\n       * @static\n       * @since 0.1.0\n       * @memberOf _\n       * @category Util\n       * @param {Function|Object} [object=lodash] The destination object.\n       * @param {Object} source The object of functions to add.\n       * @param {Object} [options={}] The options object.\n       * @param {boolean} [options.chain=true] Specify whether mixins are chainable.\n       * @returns {Function|Object} Returns `object`.\n       * @example\n       *\n       * function vowels(string) {\n       *   return _.filter(string, function(v) {\n       *     return /[aeiou]/i.test(v);\n       *   });\n       * }\n       *\n       * _.mixin({ 'vowels': vowels });\n       * _.vowels('fred');\n       * // => ['e']\n       *\n       * _('fred').vowels().value();\n       * // => ['e']\n       *\n       * _.mixin({ 'vowels': vowels }, { 'chain': false });\n       * _('fred').vowels();\n       * // => ['e']\n       */\n    function mixin(object, source, options) {\n      var props = keys(source),\n        methodNames = baseFunctions(source, props);\n\n      if (\n        options == null &&\n            !(isObject(source) && (methodNames.length || !props.length))\n      ) {\n        options = source;\n        source = object;\n        object = this;\n        methodNames = baseFunctions(source, keys(source));\n      }\n      var chain = !(isObject(options) && 'chain' in options) || !!options.chain,\n        isFunc = isFunction(object);\n\n      arrayEach(methodNames, function(methodName) {\n        var func = source[methodName];\n        object[methodName] = func;\n        if (isFunc) {\n          object.prototype[methodName] = function() {\n            var chainAll = this.__chain__;\n            if (chain || chainAll) {\n              var result = object(this.__wrapped__),\n                actions = (result.__actions__ = copyArray(this.__actions__));\n\n              actions.push({ func: func, args: arguments, thisArg: object });\n              result.__chain__ = chainAll;\n              return result;\n            }\n            return func.apply(object, arrayPush([this.value()], arguments));\n          };\n        }\n      });\n\n      return object;\n    }\n\n    /**\n         * Reverts the `_` variable to its previous value and returns a reference to\n         * the `lodash` function.\n         *\n         * @static\n         * @since 0.1.0\n         * @memberOf _\n         * @category Util\n         * @returns {Function} Returns the `lodash` function.\n         * @example\n         *\n         * var lodash = _.noConflict();\n         */\n    function noConflict() {\n      if (root._ === this) {\n        root._ = oldDash;\n      }\n      return this;\n    }\n\n    /**\n         * This method returns `undefined`.\n         *\n         * @static\n         * @memberOf _\n         * @since 2.3.0\n         * @category Util\n         * @example\n         *\n         * _.times(2, _.noop);\n         * // => [undefined, undefined]\n         */\n    function noop() {\n      // No operation performed.\n    }\n\n    /**\n         * Creates a function that gets the argument at index `n`. If `n` is negative,\n         * the nth argument from the end is returned.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Util\n         * @param {number} [n=0] The index of the argument to return.\n         * @returns {Function} Returns the new pass-thru function.\n         * @example\n         *\n         * var func = _.nthArg(1);\n         * func('a', 'b', 'c', 'd');\n         * // => 'b'\n         *\n         * var func = _.nthArg(-2);\n         * func('a', 'b', 'c', 'd');\n         * // => 'c'\n         */\n    function nthArg(n) {\n      n = toInteger(n);\n      return baseRest(function(args) {\n        return baseNth(args, n);\n      });\n    }\n\n    /**\n         * Creates a function that invokes `iteratees` with the arguments it receives\n         * and returns their results.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Util\n         * @param {...(Function|Function[])} [iteratees=[_.identity]]\n         *  The iteratees to invoke.\n         * @returns {Function} Returns the new function.\n         * @example\n         *\n         * var func = _.over([Math.max, Math.min]);\n         *\n         * func(1, 2, 3, 4);\n         * // => [4, 1]\n         */\n    var over = createOver(arrayMap);\n\n    /**\n         * Creates a function that checks if **all** of the `predicates` return\n         * truthy when invoked with the arguments it receives.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Util\n         * @param {...(Function|Function[])} [predicates=[_.identity]]\n         *  The predicates to check.\n         * @returns {Function} Returns the new function.\n         * @example\n         *\n         * var func = _.overEvery([Boolean, isFinite]);\n         *\n         * func('1');\n         * // => true\n         *\n         * func(null);\n         * // => false\n         *\n         * func(NaN);\n         * // => false\n         */\n    var overEvery = createOver(arrayEvery);\n\n    /**\n         * Creates a function that checks if **any** of the `predicates` return\n         * truthy when invoked with the arguments it receives.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Util\n         * @param {...(Function|Function[])} [predicates=[_.identity]]\n         *  The predicates to check.\n         * @returns {Function} Returns the new function.\n         * @example\n         *\n         * var func = _.overSome([Boolean, isFinite]);\n         *\n         * func('1');\n         * // => true\n         *\n         * func(null);\n         * // => true\n         *\n         * func(NaN);\n         * // => false\n         */\n    var overSome = createOver(arraySome);\n\n    /**\n         * Creates a function that returns the value at `path` of a given object.\n         *\n         * @static\n         * @memberOf _\n         * @since 2.4.0\n         * @category Util\n         * @param {Array|string} path The path of the property to get.\n         * @returns {Function} Returns the new accessor function.\n         * @example\n         *\n         * var objects = [\n         *   { 'a': { 'b': 2 } },\n         *   { 'a': { 'b': 1 } }\n         * ];\n         *\n         * _.map(objects, _.property('a.b'));\n         * // => [2, 1]\n         *\n         * _.map(_.sortBy(objects, _.property(['a', 'b'])), 'a.b');\n         * // => [1, 2]\n         */\n    function property(path) {\n      return isKey(path) ? baseProperty(toKey(path)) : basePropertyDeep(path);\n    }\n\n    /**\n         * The opposite of `_.property`; this method creates a function that returns\n         * the value at a given path of `object`.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.0.0\n         * @category Util\n         * @param {Object} object The object to query.\n         * @returns {Function} Returns the new accessor function.\n         * @example\n         *\n         * var array = [0, 1, 2],\n         *     object = { 'a': array, 'b': array, 'c': array };\n         *\n         * _.map(['a[2]', 'c[0]'], _.propertyOf(object));\n         * // => [2, 0]\n         *\n         * _.map([['a', '2'], ['c', '0']], _.propertyOf(object));\n         * // => [2, 0]\n         */\n    function propertyOf(object) {\n      return function(path) {\n        return object == null ? undefined : baseGet(object, path);\n      };\n    }\n\n    /**\n         * Creates an array of numbers (positive and/or negative) progressing from\n         * `start` up to, but not including, `end`. A step of `-1` is used if a negative\n         * `start` is specified without an `end` or `step`. If `end` is not specified,\n         * it's set to `start` with `start` then set to `0`.\n         *\n         * **Note:** JavaScript follows the IEEE-754 standard for resolving\n         * floating-point values which can produce unexpected results.\n         *\n         * @static\n         * @since 0.1.0\n         * @memberOf _\n         * @category Util\n         * @param {number} [start=0] The start of the range.\n         * @param {number} end The end of the range.\n         * @param {number} [step=1] The value to increment or decrement by.\n         * @returns {Array} Returns the range of numbers.\n         * @see _.inRange, _.rangeRight\n         * @example\n         *\n         * _.range(4);\n         * // => [0, 1, 2, 3]\n         *\n         * _.range(-4);\n         * // => [0, -1, -2, -3]\n         *\n         * _.range(1, 5);\n         * // => [1, 2, 3, 4]\n         *\n         * _.range(0, 20, 5);\n         * // => [0, 5, 10, 15]\n         *\n         * _.range(0, -4, -1);\n         * // => [0, -1, -2, -3]\n         *\n         * _.range(1, 4, 0);\n         * // => [1, 1, 1]\n         *\n         * _.range(0);\n         * // => []\n         */\n    var range = createRange();\n\n    /**\n         * This method is like `_.range` except that it populates values in\n         * descending order.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Util\n         * @param {number} [start=0] The start of the range.\n         * @param {number} end The end of the range.\n         * @param {number} [step=1] The value to increment or decrement by.\n         * @returns {Array} Returns the range of numbers.\n         * @see _.inRange, _.range\n         * @example\n         *\n         * _.rangeRight(4);\n         * // => [3, 2, 1, 0]\n         *\n         * _.rangeRight(-4);\n         * // => [-3, -2, -1, 0]\n         *\n         * _.rangeRight(1, 5);\n         * // => [4, 3, 2, 1]\n         *\n         * _.rangeRight(0, 20, 5);\n         * // => [15, 10, 5, 0]\n         *\n         * _.rangeRight(0, -4, -1);\n         * // => [-3, -2, -1, 0]\n         *\n         * _.rangeRight(1, 4, 0);\n         * // => [1, 1, 1]\n         *\n         * _.rangeRight(0);\n         * // => []\n         */\n    var rangeRight = createRange(true);\n\n    /**\n         * This method returns a new empty array.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.13.0\n         * @category Util\n         * @returns {Array} Returns the new empty array.\n         * @example\n         *\n         * var arrays = _.times(2, _.stubArray);\n         *\n         * console.log(arrays);\n         * // => [[], []]\n         *\n         * console.log(arrays[0] === arrays[1]);\n         * // => false\n         */\n    function stubArray() {\n      return [];\n    }\n\n    /**\n         * This method returns `false`.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.13.0\n         * @category Util\n         * @returns {boolean} Returns `false`.\n         * @example\n         *\n         * _.times(2, _.stubFalse);\n         * // => [false, false]\n         */\n    function stubFalse() {\n      return false;\n    }\n\n    /**\n         * This method returns a new empty object.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.13.0\n         * @category Util\n         * @returns {Object} Returns the new empty object.\n         * @example\n         *\n         * var objects = _.times(2, _.stubObject);\n         *\n         * console.log(objects);\n         * // => [{}, {}]\n         *\n         * console.log(objects[0] === objects[1]);\n         * // => false\n         */\n    function stubObject() {\n      return {};\n    }\n\n    /**\n         * This method returns an empty string.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.13.0\n         * @category Util\n         * @returns {string} Returns the empty string.\n         * @example\n         *\n         * _.times(2, _.stubString);\n         * // => ['', '']\n         */\n    function stubString() {\n      return '';\n    }\n\n    /**\n         * This method returns `true`.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.13.0\n         * @category Util\n         * @returns {boolean} Returns `true`.\n         * @example\n         *\n         * _.times(2, _.stubTrue);\n         * // => [true, true]\n         */\n    function stubTrue() {\n      return true;\n    }\n\n    /**\n         * Invokes the iteratee `n` times, returning an array of the results of\n         * each invocation. The iteratee is invoked with one argument; (index).\n         *\n         * @static\n         * @since 0.1.0\n         * @memberOf _\n         * @category Util\n         * @param {number} n The number of times to invoke `iteratee`.\n         * @param {Function} [iteratee=_.identity] The function invoked per iteration.\n         * @returns {Array} Returns the array of results.\n         * @example\n         *\n         * _.times(3, String);\n         * // => ['0', '1', '2']\n         *\n         *  _.times(4, _.constant(0));\n         * // => [0, 0, 0, 0]\n         */\n    function times(n, iteratee) {\n      n = toInteger(n);\n      if (n < 1 || n > MAX_SAFE_INTEGER) {\n        return [];\n      }\n      var index = MAX_ARRAY_LENGTH,\n        length = nativeMin(n, MAX_ARRAY_LENGTH);\n\n      iteratee = getIteratee(iteratee);\n      n -= MAX_ARRAY_LENGTH;\n\n      var result = baseTimes(length, iteratee);\n      while (++index < n) {\n        iteratee(index);\n      }\n      return result;\n    }\n\n    /**\n         * Converts `value` to a property path array.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Util\n         * @param {*} value The value to convert.\n         * @returns {Array} Returns the new property path array.\n         * @example\n         *\n         * _.toPath('a.b.c');\n         * // => ['a', 'b', 'c']\n         *\n         * _.toPath('a[0].b.c');\n         * // => ['a', '0', 'b', 'c']\n         */\n    function toPath(value) {\n      if (isArray(value)) {\n        return arrayMap(value, toKey);\n      }\n      return isSymbol(value)\n        ? [value]\n        : copyArray(stringToPath(toString(value)));\n    }\n\n    /**\n         * Generates a unique ID. If `prefix` is given, the ID is appended to it.\n         *\n         * @static\n         * @since 0.1.0\n         * @memberOf _\n         * @category Util\n         * @param {string} [prefix=''] The value to prefix the ID with.\n         * @returns {string} Returns the unique ID.\n         * @example\n         *\n         * _.uniqueId('contact_');\n         * // => 'contact_104'\n         *\n         * _.uniqueId();\n         * // => '105'\n         */\n    function uniqueId(prefix) {\n      var id = ++idCounter;\n      return toString(prefix) + id;\n    }\n\n    /* ------------------------------------------------------------------------*/\n\n    /**\n         * Adds two numbers.\n         *\n         * @static\n         * @memberOf _\n         * @since 3.4.0\n         * @category Math\n         * @param {number} augend The first number in an addition.\n         * @param {number} addend The second number in an addition.\n         * @returns {number} Returns the total.\n         * @example\n         *\n         * _.add(6, 4);\n         * // => 10\n         */\n    var add = createMathOperation(function(augend, addend) {\n      return augend + addend;\n    }, 0);\n\n      /**\n       * Computes `number` rounded up to `precision`.\n       *\n       * @static\n       * @memberOf _\n       * @since 3.10.0\n       * @category Math\n       * @param {number} number The number to round up.\n       * @param {number} [precision=0] The precision to round up to.\n       * @returns {number} Returns the rounded up number.\n       * @example\n       *\n       * _.ceil(4.006);\n       * // => 5\n       *\n       * _.ceil(6.004, 2);\n       * // => 6.01\n       *\n       * _.ceil(6040, -2);\n       * // => 6100\n       */\n    var ceil = createRound('ceil');\n\n    /**\n         * Divide two numbers.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.7.0\n         * @category Math\n         * @param {number} dividend The first number in a division.\n         * @param {number} divisor The second number in a division.\n         * @returns {number} Returns the quotient.\n         * @example\n         *\n         * _.divide(6, 4);\n         * // => 1.5\n         */\n    var divide = createMathOperation(function(dividend, divisor) {\n      return dividend / divisor;\n    }, 1);\n\n      /**\n       * Computes `number` rounded down to `precision`.\n       *\n       * @static\n       * @memberOf _\n       * @since 3.10.0\n       * @category Math\n       * @param {number} number The number to round down.\n       * @param {number} [precision=0] The precision to round down to.\n       * @returns {number} Returns the rounded down number.\n       * @example\n       *\n       * _.floor(4.006);\n       * // => 4\n       *\n       * _.floor(0.046, 2);\n       * // => 0.04\n       *\n       * _.floor(4060, -2);\n       * // => 4000\n       */\n    var floor = createRound('floor');\n\n    /**\n         * Computes the maximum value of `array`. If `array` is empty or falsey,\n         * `undefined` is returned.\n         *\n         * @static\n         * @since 0.1.0\n         * @memberOf _\n         * @category Math\n         * @param {Array} array The array to iterate over.\n         * @returns {*} Returns the maximum value.\n         * @example\n         *\n         * _.max([4, 2, 8, 6]);\n         * // => 8\n         *\n         * _.max([]);\n         * // => undefined\n         */\n    function max(array) {\n      return array && array.length\n        ? baseExtremum(array, identity, baseGt)\n        : undefined;\n    }\n\n    /**\n         * This method is like `_.max` except that it accepts `iteratee` which is\n         * invoked for each element in `array` to generate the criterion by which\n         * the value is ranked. The iteratee is invoked with one argument: (value).\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Math\n         * @param {Array} array The array to iterate over.\n         * @param {Function} [iteratee=_.identity] The iteratee invoked per element.\n         * @returns {*} Returns the maximum value.\n         * @example\n         *\n         * var objects = [{ 'n': 1 }, { 'n': 2 }];\n         *\n         * _.maxBy(objects, function(o) { return o.n; });\n         * // => { 'n': 2 }\n         *\n         * // The `_.property` iteratee shorthand.\n         * _.maxBy(objects, 'n');\n         * // => { 'n': 2 }\n         */\n    function maxBy(array, iteratee) {\n      return array && array.length\n        ? baseExtremum(array, getIteratee(iteratee, 2), baseGt)\n        : undefined;\n    }\n\n    /**\n         * Computes the mean of the values in `array`.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Math\n         * @param {Array} array The array to iterate over.\n         * @returns {number} Returns the mean.\n         * @example\n         *\n         * _.mean([4, 2, 8, 6]);\n         * // => 5\n         */\n    function mean(array) {\n      return baseMean(array, identity);\n    }\n\n    /**\n         * This method is like `_.mean` except that it accepts `iteratee` which is\n         * invoked for each element in `array` to generate the value to be averaged.\n         * The iteratee is invoked with one argument: (value).\n         *\n         * @static\n         * @memberOf _\n         * @since 4.7.0\n         * @category Math\n         * @param {Array} array The array to iterate over.\n         * @param {Function} [iteratee=_.identity] The iteratee invoked per element.\n         * @returns {number} Returns the mean.\n         * @example\n         *\n         * var objects = [{ 'n': 4 }, { 'n': 2 }, { 'n': 8 }, { 'n': 6 }];\n         *\n         * _.meanBy(objects, function(o) { return o.n; });\n         * // => 5\n         *\n         * // The `_.property` iteratee shorthand.\n         * _.meanBy(objects, 'n');\n         * // => 5\n         */\n    function meanBy(array, iteratee) {\n      return baseMean(array, getIteratee(iteratee, 2));\n    }\n\n    /**\n         * Computes the minimum value of `array`. If `array` is empty or falsey,\n         * `undefined` is returned.\n         *\n         * @static\n         * @since 0.1.0\n         * @memberOf _\n         * @category Math\n         * @param {Array} array The array to iterate over.\n         * @returns {*} Returns the minimum value.\n         * @example\n         *\n         * _.min([4, 2, 8, 6]);\n         * // => 2\n         *\n         * _.min([]);\n         * // => undefined\n         */\n    function min(array) {\n      return array && array.length\n        ? baseExtremum(array, identity, baseLt)\n        : undefined;\n    }\n\n    /**\n         * This method is like `_.min` except that it accepts `iteratee` which is\n         * invoked for each element in `array` to generate the criterion by which\n         * the value is ranked. The iteratee is invoked with one argument: (value).\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Math\n         * @param {Array} array The array to iterate over.\n         * @param {Function} [iteratee=_.identity] The iteratee invoked per element.\n         * @returns {*} Returns the minimum value.\n         * @example\n         *\n         * var objects = [{ 'n': 1 }, { 'n': 2 }];\n         *\n         * _.minBy(objects, function(o) { return o.n; });\n         * // => { 'n': 1 }\n         *\n         * // The `_.property` iteratee shorthand.\n         * _.minBy(objects, 'n');\n         * // => { 'n': 1 }\n         */\n    function minBy(array, iteratee) {\n      return array && array.length\n        ? baseExtremum(array, getIteratee(iteratee, 2), baseLt)\n        : undefined;\n    }\n\n    /**\n         * Multiply two numbers.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.7.0\n         * @category Math\n         * @param {number} multiplier The first number in a multiplication.\n         * @param {number} multiplicand The second number in a multiplication.\n         * @returns {number} Returns the product.\n         * @example\n         *\n         * _.multiply(6, 4);\n         * // => 24\n         */\n    var multiply = createMathOperation(function(multiplier, multiplicand) {\n      return multiplier * multiplicand;\n    }, 1);\n\n      /**\n       * Computes `number` rounded to `precision`.\n       *\n       * @static\n       * @memberOf _\n       * @since 3.10.0\n       * @category Math\n       * @param {number} number The number to round.\n       * @param {number} [precision=0] The precision to round to.\n       * @returns {number} Returns the rounded number.\n       * @example\n       *\n       * _.round(4.006);\n       * // => 4\n       *\n       * _.round(4.006, 2);\n       * // => 4.01\n       *\n       * _.round(4060, -2);\n       * // => 4100\n       */\n    var round = createRound('round');\n\n    /**\n         * Subtract two numbers.\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Math\n         * @param {number} minuend The first number in a subtraction.\n         * @param {number} subtrahend The second number in a subtraction.\n         * @returns {number} Returns the difference.\n         * @example\n         *\n         * _.subtract(6, 4);\n         * // => 2\n         */\n    var subtract = createMathOperation(function(minuend, subtrahend) {\n      return minuend - subtrahend;\n    }, 0);\n\n      /**\n       * Computes the sum of the values in `array`.\n       *\n       * @static\n       * @memberOf _\n       * @since 3.4.0\n       * @category Math\n       * @param {Array} array The array to iterate over.\n       * @returns {number} Returns the sum.\n       * @example\n       *\n       * _.sum([4, 2, 8, 6]);\n       * // => 20\n       */\n    function sum(array) {\n      return array && array.length ? baseSum(array, identity) : 0;\n    }\n\n    /**\n         * This method is like `_.sum` except that it accepts `iteratee` which is\n         * invoked for each element in `array` to generate the value to be summed.\n         * The iteratee is invoked with one argument: (value).\n         *\n         * @static\n         * @memberOf _\n         * @since 4.0.0\n         * @category Math\n         * @param {Array} array The array to iterate over.\n         * @param {Function} [iteratee=_.identity] The iteratee invoked per element.\n         * @returns {number} Returns the sum.\n         * @example\n         *\n         * var objects = [{ 'n': 4 }, { 'n': 2 }, { 'n': 8 }, { 'n': 6 }];\n         *\n         * _.sumBy(objects, function(o) { return o.n; });\n         * // => 20\n         *\n         * // The `_.property` iteratee shorthand.\n         * _.sumBy(objects, 'n');\n         * // => 20\n         */\n    function sumBy(array, iteratee) {\n      return array && array.length\n        ? baseSum(array, getIteratee(iteratee, 2))\n        : 0;\n    }\n\n    /* ------------------------------------------------------------------------*/\n\n    // Add methods that return wrapped values in chain sequences.\n    lodash.after = after;\n    lodash.ary = ary;\n    lodash.assign = assign;\n    lodash.assignIn = assignIn;\n    lodash.assignInWith = assignInWith;\n    lodash.assignWith = assignWith;\n    lodash.at = at;\n    lodash.before = before;\n    lodash.bind = bind;\n    lodash.bindAll = bindAll;\n    lodash.bindKey = bindKey;\n    lodash.castArray = castArray;\n    lodash.chain = chain;\n    lodash.chunk = chunk;\n    lodash.compact = compact;\n    lodash.concat = concat;\n    lodash.cond = cond;\n    lodash.conforms = conforms;\n    lodash.constant = constant;\n    lodash.countBy = countBy;\n    lodash.create = create;\n    lodash.curry = curry;\n    lodash.curryRight = curryRight;\n    lodash.debounce = debounce;\n    lodash.defaults = defaults;\n    lodash.defaultsDeep = defaultsDeep;\n    lodash.defer = defer;\n    lodash.delay = delay;\n    lodash.difference = difference;\n    lodash.differenceBy = differenceBy;\n    lodash.differenceWith = differenceWith;\n    lodash.drop = drop;\n    lodash.dropRight = dropRight;\n    lodash.dropRightWhile = dropRightWhile;\n    lodash.dropWhile = dropWhile;\n    lodash.fill = fill;\n    lodash.filter = filter;\n    lodash.flatMap = flatMap;\n    lodash.flatMapDeep = flatMapDeep;\n    lodash.flatMapDepth = flatMapDepth;\n    lodash.flatten = flatten;\n    lodash.flattenDeep = flattenDeep;\n    lodash.flattenDepth = flattenDepth;\n    lodash.flip = flip;\n    lodash.flow = flow;\n    lodash.flowRight = flowRight;\n    lodash.fromPairs = fromPairs;\n    lodash.functions = functions;\n    lodash.functionsIn = functionsIn;\n    lodash.groupBy = groupBy;\n    lodash.initial = initial;\n    lodash.intersection = intersection;\n    lodash.intersectionBy = intersectionBy;\n    lodash.intersectionWith = intersectionWith;\n    lodash.invert = invert;\n    lodash.invertBy = invertBy;\n    lodash.invokeMap = invokeMap;\n    lodash.iteratee = iteratee;\n    lodash.keyBy = keyBy;\n    lodash.keys = keys;\n    lodash.keysIn = keysIn;\n    lodash.map = map;\n    lodash.mapKeys = mapKeys;\n    lodash.mapValues = mapValues;\n    lodash.matches = matches;\n    lodash.matchesProperty = matchesProperty;\n    lodash.memoize = memoize;\n    lodash.merge = merge;\n    lodash.mergeWith = mergeWith;\n    lodash.method = method;\n    lodash.methodOf = methodOf;\n    lodash.mixin = mixin;\n    lodash.negate = negate;\n    lodash.nthArg = nthArg;\n    lodash.omit = omit;\n    lodash.omitBy = omitBy;\n    lodash.once = once;\n    lodash.orderBy = orderBy;\n    lodash.over = over;\n    lodash.overArgs = overArgs;\n    lodash.overEvery = overEvery;\n    lodash.overSome = overSome;\n    lodash.partial = partial;\n    lodash.partialRight = partialRight;\n    lodash.partition = partition;\n    lodash.pick = pick;\n    lodash.pickBy = pickBy;\n    lodash.property = property;\n    lodash.propertyOf = propertyOf;\n    lodash.pull = pull;\n    lodash.pullAll = pullAll;\n    lodash.pullAllBy = pullAllBy;\n    lodash.pullAllWith = pullAllWith;\n    lodash.pullAt = pullAt;\n    lodash.range = range;\n    lodash.rangeRight = rangeRight;\n    lodash.rearg = rearg;\n    lodash.reject = reject;\n    lodash.remove = remove;\n    lodash.rest = rest;\n    lodash.reverse = reverse;\n    lodash.sampleSize = sampleSize;\n    lodash.set = set;\n    lodash.setWith = setWith;\n    lodash.shuffle = shuffle;\n    lodash.slice = slice;\n    lodash.sortBy = sortBy;\n    lodash.sortedUniq = sortedUniq;\n    lodash.sortedUniqBy = sortedUniqBy;\n    lodash.split = split;\n    lodash.spread = spread;\n    lodash.tail = tail;\n    lodash.take = take;\n    lodash.takeRight = takeRight;\n    lodash.takeRightWhile = takeRightWhile;\n    lodash.takeWhile = takeWhile;\n    lodash.tap = tap;\n    lodash.throttle = throttle;\n    lodash.thru = thru;\n    lodash.toArray = toArray;\n    lodash.toPairs = toPairs;\n    lodash.toPairsIn = toPairsIn;\n    lodash.toPath = toPath;\n    lodash.toPlainObject = toPlainObject;\n    lodash.transform = transform;\n    lodash.unary = unary;\n    lodash.union = union;\n    lodash.unionBy = unionBy;\n    lodash.unionWith = unionWith;\n    lodash.uniq = uniq;\n    lodash.uniqBy = uniqBy;\n    lodash.uniqWith = uniqWith;\n    lodash.unset = unset;\n    lodash.unzip = unzip;\n    lodash.unzipWith = unzipWith;\n    lodash.update = update;\n    lodash.updateWith = updateWith;\n    lodash.values = values;\n    lodash.valuesIn = valuesIn;\n    lodash.without = without;\n    lodash.words = words;\n    lodash.wrap = wrap;\n    lodash.xor = xor;\n    lodash.xorBy = xorBy;\n    lodash.xorWith = xorWith;\n    lodash.zip = zip;\n    lodash.zipObject = zipObject;\n    lodash.zipObjectDeep = zipObjectDeep;\n    lodash.zipWith = zipWith;\n\n    // Add aliases.\n    lodash.entries = toPairs;\n    lodash.entriesIn = toPairsIn;\n    lodash.extend = assignIn;\n    lodash.extendWith = assignInWith;\n\n    // Add methods to `lodash.prototype`.\n    mixin(lodash, lodash);\n\n    /* ------------------------------------------------------------------------*/\n\n    // Add methods that return unwrapped values in chain sequences.\n    lodash.add = add;\n    lodash.attempt = attempt;\n    lodash.camelCase = camelCase;\n    lodash.capitalize = capitalize;\n    lodash.ceil = ceil;\n    lodash.clamp = clamp;\n    lodash.clone = clone;\n    lodash.cloneDeep = cloneDeep;\n    lodash.cloneDeepWith = cloneDeepWith;\n    lodash.cloneWith = cloneWith;\n    lodash.conformsTo = conformsTo;\n    lodash.deburr = deburr;\n    lodash.defaultTo = defaultTo;\n    lodash.divide = divide;\n    lodash.endsWith = endsWith;\n    lodash.eq = eq;\n    lodash.escape = escape;\n    lodash.escapeRegExp = escapeRegExp;\n    lodash.every = every;\n    lodash.find = find;\n    lodash.findIndex = findIndex;\n    lodash.findKey = findKey;\n    lodash.findLast = findLast;\n    lodash.findLastIndex = findLastIndex;\n    lodash.findLastKey = findLastKey;\n    lodash.floor = floor;\n    lodash.forEach = forEach;\n    lodash.forEachRight = forEachRight;\n    lodash.forIn = forIn;\n    lodash.forInRight = forInRight;\n    lodash.forOwn = forOwn;\n    lodash.forOwnRight = forOwnRight;\n    lodash.get = get;\n    lodash.gt = gt;\n    lodash.gte = gte;\n    lodash.has = has;\n    lodash.hasIn = hasIn;\n    lodash.head = head;\n    lodash.identity = identity;\n    lodash.includes = includes;\n    lodash.indexOf = indexOf;\n    lodash.inRange = inRange;\n    lodash.invoke = invoke;\n    lodash.isArguments = isArguments;\n    lodash.isArray = isArray;\n    lodash.isArrayBuffer = isArrayBuffer;\n    lodash.isArrayLike = isArrayLike;\n    lodash.isArrayLikeObject = isArrayLikeObject;\n    lodash.isBoolean = isBoolean;\n    lodash.isBuffer = isBuffer;\n    lodash.isDate = isDate;\n    lodash.isElement = isElement;\n    lodash.isEmpty = isEmpty;\n    lodash.isEqual = isEqual;\n    lodash.isEqualWith = isEqualWith;\n    lodash.isError = isError;\n    lodash.isFinite = isFinite;\n    lodash.isFunction = isFunction;\n    lodash.isInteger = isInteger;\n    lodash.isLength = isLength;\n    lodash.isMap = isMap;\n    lodash.isMatch = isMatch;\n    lodash.isMatchWith = isMatchWith;\n    lodash.isNaN = isNaN;\n    lodash.isNative = isNative;\n    lodash.isNil = isNil;\n    lodash.isNull = isNull;\n    lodash.isNumber = isNumber;\n    lodash.isObject = isObject;\n    lodash.isObjectLike = isObjectLike;\n    lodash.isPlainObject = isPlainObject;\n    lodash.isRegExp = isRegExp;\n    lodash.isSafeInteger = isSafeInteger;\n    lodash.isSet = isSet;\n    lodash.isString = isString;\n    lodash.isSymbol = isSymbol;\n    lodash.isTypedArray = isTypedArray;\n    lodash.isUndefined = isUndefined;\n    lodash.isWeakMap = isWeakMap;\n    lodash.isWeakSet = isWeakSet;\n    lodash.join = join;\n    lodash.kebabCase = kebabCase;\n    lodash.last = last;\n    lodash.lastIndexOf = lastIndexOf;\n    lodash.lowerCase = lowerCase;\n    lodash.lowerFirst = lowerFirst;\n    lodash.lt = lt;\n    lodash.lte = lte;\n    lodash.max = max;\n    lodash.maxBy = maxBy;\n    lodash.mean = mean;\n    lodash.meanBy = meanBy;\n    lodash.min = min;\n    lodash.minBy = minBy;\n    lodash.stubArray = stubArray;\n    lodash.stubFalse = stubFalse;\n    lodash.stubObject = stubObject;\n    lodash.stubString = stubString;\n    lodash.stubTrue = stubTrue;\n    lodash.multiply = multiply;\n    lodash.nth = nth;\n    lodash.noConflict = noConflict;\n    lodash.noop = noop;\n    lodash.now = now;\n    lodash.pad = pad;\n    lodash.padEnd = padEnd;\n    lodash.padStart = padStart;\n    lodash.parseInt = parseInt;\n    lodash.random = random;\n    lodash.reduce = reduce;\n    lodash.reduceRight = reduceRight;\n    lodash.repeat = repeat;\n    lodash.replace = replace;\n    lodash.result = result;\n    lodash.round = round;\n    lodash.runInContext = runInContext;\n    lodash.sample = sample;\n    lodash.size = size;\n    lodash.snakeCase = snakeCase;\n    lodash.some = some;\n    lodash.sortedIndex = sortedIndex;\n    lodash.sortedIndexBy = sortedIndexBy;\n    lodash.sortedIndexOf = sortedIndexOf;\n    lodash.sortedLastIndex = sortedLastIndex;\n    lodash.sortedLastIndexBy = sortedLastIndexBy;\n    lodash.sortedLastIndexOf = sortedLastIndexOf;\n    lodash.startCase = startCase;\n    lodash.startsWith = startsWith;\n    lodash.subtract = subtract;\n    lodash.sum = sum;\n    lodash.sumBy = sumBy;\n    lodash.template = template;\n    lodash.times = times;\n    lodash.toFinite = toFinite;\n    lodash.toInteger = toInteger;\n    lodash.toLength = toLength;\n    lodash.toLower = toLower;\n    lodash.toNumber = toNumber;\n    lodash.toSafeInteger = toSafeInteger;\n    lodash.toString = toString;\n    lodash.toUpper = toUpper;\n    lodash.trim = trim;\n    lodash.trimEnd = trimEnd;\n    lodash.trimStart = trimStart;\n    lodash.truncate = truncate;\n    lodash.unescape = unescape;\n    lodash.uniqueId = uniqueId;\n    lodash.upperCase = upperCase;\n    lodash.upperFirst = upperFirst;\n\n    // Add aliases.\n    lodash.each = forEach;\n    lodash.eachRight = forEachRight;\n    lodash.first = head;\n\n    mixin(\n      lodash,\n      (function() {\n        var source = {};\n        baseForOwn(lodash, function(func, methodName) {\n          if (!hasOwnProperty.call(lodash.prototype, methodName)) {\n            source[methodName] = func;\n          }\n        });\n        return source;\n      })(),\n      { chain: false }\n    );\n\n    /* ------------------------------------------------------------------------*/\n\n    /**\n         * The semantic version number.\n         *\n         * @static\n         * @memberOf _\n         * @type {string}\n         */\n    lodash.VERSION = VERSION;\n\n    // Assign default placeholders.\n    arrayEach(\n      ['bind', 'bindKey', 'curry', 'curryRight', 'partial', 'partialRight'],\n      function(methodName) {\n        lodash[methodName].placeholder = lodash;\n      }\n    );\n\n    // Add `LazyWrapper` methods for `_.drop` and `_.take` variants.\n    arrayEach(['drop', 'take'], function(methodName, index) {\n      LazyWrapper.prototype[methodName] = function(n) {\n        n = n === undefined ? 1 : nativeMax(toInteger(n), 0);\n\n        var result =\n               this.__filtered__ && !index ? new LazyWrapper(this) : this.clone();\n\n        if (result.__filtered__) {\n          result.__takeCount__ = nativeMin(n, result.__takeCount__);\n        } else {\n          result.__views__.push({\n            size: nativeMin(n, MAX_ARRAY_LENGTH),\n            type: methodName + (result.__dir__ < 0 ? 'Right' : '')\n          });\n        }\n        return result;\n      };\n\n      LazyWrapper.prototype[methodName + 'Right'] = function(n) {\n        return this.reverse()\n          [methodName](n)\n          .reverse();\n      };\n    });\n\n    // Add `LazyWrapper` methods that accept an `iteratee` value.\n    arrayEach(['filter', 'map', 'takeWhile'], function(methodName, index) {\n      var type = index + 1,\n        isFilter = type == LAZY_FILTER_FLAG || type == LAZY_WHILE_FLAG;\n\n      LazyWrapper.prototype[methodName] = function(iteratee) {\n        var result = this.clone();\n        result.__iteratees__.push({\n          iteratee: getIteratee(iteratee, 3),\n          type: type\n        });\n        result.__filtered__ = result.__filtered__ || isFilter;\n        return result;\n      };\n    });\n\n    // Add `LazyWrapper` methods for `_.head` and `_.last`.\n    arrayEach(['head', 'last'], function(methodName, index) {\n      var takeName = 'take' + (index ? 'Right' : '');\n\n      LazyWrapper.prototype[methodName] = function() {\n        return this[takeName](1).value()[0];\n      };\n    });\n\n    // Add `LazyWrapper` methods for `_.initial` and `_.tail`.\n    arrayEach(['initial', 'tail'], function(methodName, index) {\n      var dropName = 'drop' + (index ? '' : 'Right');\n\n      LazyWrapper.prototype[methodName] = function() {\n        return this.__filtered__ ? new LazyWrapper(this) : this[dropName](1);\n      };\n    });\n\n    LazyWrapper.prototype.compact = function() {\n      return this.filter(identity);\n    };\n\n    LazyWrapper.prototype.find = function(predicate) {\n      return this.filter(predicate).head();\n    };\n\n    LazyWrapper.prototype.findLast = function(predicate) {\n      return this.reverse().find(predicate);\n    };\n\n    LazyWrapper.prototype.invokeMap = baseRest(function(path, args) {\n      if (typeof path === 'function') {\n        return new LazyWrapper(this);\n      }\n      return this.map(function(value) {\n        return baseInvoke(value, path, args);\n      });\n    });\n\n    LazyWrapper.prototype.reject = function(predicate) {\n      return this.filter(negate(getIteratee(predicate)));\n    };\n\n    LazyWrapper.prototype.slice = function(start, end) {\n      start = toInteger(start);\n\n      var result = this;\n      if (result.__filtered__ && (start > 0 || end < 0)) {\n        return new LazyWrapper(result);\n      }\n      if (start < 0) {\n        result = result.takeRight(-start);\n      } else if (start) {\n        result = result.drop(start);\n      }\n      if (end !== undefined) {\n        end = toInteger(end);\n        result = end < 0 ? result.dropRight(-end) : result.take(end - start);\n      }\n      return result;\n    };\n\n    LazyWrapper.prototype.takeRightWhile = function(predicate) {\n      return this.reverse()\n        .takeWhile(predicate)\n        .reverse();\n    };\n\n    LazyWrapper.prototype.toArray = function() {\n      return this.take(MAX_ARRAY_LENGTH);\n    };\n\n    // Add `LazyWrapper` methods to `lodash.prototype`.\n    baseForOwn(LazyWrapper.prototype, function(func, methodName) {\n      var checkIteratee = /^(?:filter|find|map|reject)|While$/.test(methodName),\n        isTaker = /^(?:head|last)$/.test(methodName),\n        lodashFunc =\n               lodash[\n                 isTaker\n                   ? 'take' + (methodName == 'last' ? 'Right' : '')\n                   : methodName\n               ],\n        retUnwrapped = isTaker || /^find/.test(methodName);\n\n      if (!lodashFunc) {\n        return;\n      }\n      lodash.prototype[methodName] = function() {\n        var value = this.__wrapped__,\n          args = isTaker ? [1] : arguments,\n          isLazy = value instanceof LazyWrapper,\n          iteratee = args[0],\n          useLazy = isLazy || isArray(value);\n\n        var interceptor = function(value) {\n          var result = lodashFunc.apply(lodash, arrayPush([value], args));\n          return isTaker && chainAll ? result[0] : result;\n        };\n\n        if (\n          useLazy &&\n               checkIteratee &&\n               typeof iteratee === 'function' &&\n               iteratee.length != 1\n        ) {\n          // Avoid lazy use if the iteratee has a \"length\" value other than `1`.\n          isLazy = useLazy = false;\n        }\n        var chainAll = this.__chain__,\n          isHybrid = !!this.__actions__.length,\n          isUnwrapped = retUnwrapped && !chainAll,\n          onlyLazy = isLazy && !isHybrid;\n\n        if (!retUnwrapped && useLazy) {\n          value = onlyLazy ? value : new LazyWrapper(this);\n          var result = func.apply(value, args);\n          result.__actions__.push({\n            func: thru,\n            args: [interceptor],\n            thisArg: undefined\n          });\n          return new LodashWrapper(result, chainAll);\n        }\n        if (isUnwrapped && onlyLazy) {\n          return func.apply(this, args);\n        }\n        result = this.thru(interceptor);\n        return isUnwrapped\n          ? isTaker\n            ? result.value()[0]\n            : result.value()\n          : result;\n      };\n    });\n\n    // Add `Array` methods to `lodash.prototype`.\n    arrayEach(['pop', 'push', 'shift', 'sort', 'splice', 'unshift'], function(\n      methodName\n    ) {\n      var func = arrayProto[methodName],\n        chainName = /^(?:push|sort|unshift)$/.test(methodName) ? 'tap' : 'thru',\n        retUnwrapped = /^(?:pop|shift)$/.test(methodName);\n\n      lodash.prototype[methodName] = function() {\n        var args = arguments;\n        if (retUnwrapped && !this.__chain__) {\n          var value = this.value();\n          return func.apply(isArray(value) ? value : [], args);\n        }\n        return this[chainName](function(value) {\n          return func.apply(isArray(value) ? value : [], args);\n        });\n      };\n    });\n\n    // Map minified method names to their real names.\n    baseForOwn(LazyWrapper.prototype, function(func, methodName) {\n      var lodashFunc = lodash[methodName];\n      if (lodashFunc) {\n        var key = lodashFunc.name + '',\n          names = realNames[key] || (realNames[key] = []);\n\n        names.push({ name: methodName, func: lodashFunc });\n      }\n    });\n\n    realNames[createHybrid(undefined, WRAP_BIND_KEY_FLAG).name] = [\n      {\n        name: 'wrapper',\n        func: undefined\n      }\n    ];\n\n    // Add methods to `LazyWrapper`.\n    LazyWrapper.prototype.clone = lazyClone;\n    LazyWrapper.prototype.reverse = lazyReverse;\n    LazyWrapper.prototype.value = lazyValue;\n\n    // Add chain sequence methods to the `lodash` wrapper.\n    lodash.prototype.at = wrapperAt;\n    lodash.prototype.chain = wrapperChain;\n    lodash.prototype.commit = wrapperCommit;\n    lodash.prototype.next = wrapperNext;\n    lodash.prototype.plant = wrapperPlant;\n    lodash.prototype.reverse = wrapperReverse;\n    lodash.prototype.toJSON = lodash.prototype.valueOf = lodash.prototype.value = wrapperValue;\n\n    // Add lazy aliases.\n    lodash.prototype.first = lodash.prototype.head;\n\n    if (symIterator) {\n      lodash.prototype[symIterator] = wrapperToIterator;\n    }\n    return lodash;\n  };\n\n  /* --------------------------------------------------------------------------*/\n\n  // Export lodash.\n  var _ = runInContext();\n\n  // Some AMD build optimizers, like r.js, check for condition patterns like:\n  if (\n    typeof define === 'function' &&\n      typeof define.amd === 'object' &&\n      define.amd\n  ) {\n    // Expose Lodash on the global object to prevent errors when Lodash is\n    // loaded by a script tag in the presence of an AMD loader.\n    // See http://requirejs.org/docs/errors.html#mismatch for more details.\n    // Use `_.noConflict` to remove Lodash from the global object.\n    root._ = _;\n\n    // Define as an anonymous module so, through path mapping, it can be\n    // referenced as the \"underscore\" module.\n    define(function() {\n      return _;\n    });\n  }\n  // Check for `exports` after `define` in case a build optimizer adds it.\n  else if (freeModule) {\n    // Export for Node.js.\n    (freeModule.exports = _)._ = _;\n    // Export for CommonJS support.\n    freeExports._ = _;\n  } else {\n    // Export to the global object.\n    root._ = _;\n  }\n}.call(this));\n"
  },
  {
    "path": "src/utils/menu/aria-menubar.js",
    "content": "import MenuItem from './aria-menuitem';\n\nconst Menu = function(domNode) {\n  this.domNode = domNode;\n  this.init();\n};\n\nMenu.prototype.init = function() {\n  let menuChildren = this.domNode.childNodes;\n  [].filter.call(menuChildren, child => child.nodeType === 1).forEach(child => {\n    new MenuItem(child); // eslint-disable-line\n  });\n};\nexport default Menu;\n"
  },
  {
    "path": "src/utils/menu/aria-menuitem.js",
    "content": "import Utils from '../aria-utils';\nimport SubMenu from './aria-submenu';\n\nconst MenuItem = function(domNode) {\n  this.domNode = domNode;\n  this.submenu = null;\n  this.init();\n};\n\nMenuItem.prototype.init = function() {\n  this.domNode.setAttribute('tabindex', '0');\n  let menuChild = this.domNode.querySelector('.el-menu');\n  if (menuChild) {\n    this.submenu = new SubMenu(this, menuChild);\n  }\n  this.addListeners();\n};\n\nMenuItem.prototype.addListeners = function() {\n  const keys = Utils.keys;\n  this.domNode.addEventListener('keydown', event => {\n    let prevDef = false;\n    switch (event.keyCode) {\n      case keys.down:\n        Utils.triggerEvent(event.currentTarget, 'mouseenter');\n        this.submenu && this.submenu.gotoSubIndex(0);\n        prevDef = true;\n        break;\n      case keys.up:\n        Utils.triggerEvent(event.currentTarget, 'mouseenter');\n        this.submenu && this.submenu.gotoSubIndex(this.submenu.subMenuItems.length - 1);\n        prevDef = true;\n        break;\n      case keys.tab:\n        Utils.triggerEvent(event.currentTarget, 'mouseleave');\n        break;\n      case keys.enter:\n      case keys.space:\n        prevDef = true;\n        event.currentTarget.click();\n        break;\n    }\n    if (prevDef) {\n      event.preventDefault();\n    }\n  });\n};\n\nexport default MenuItem;\n"
  },
  {
    "path": "src/utils/menu/aria-submenu.js",
    "content": "import Utils from '../aria-utils';\n\nconst SubMenu = function(parent, domNode) {\n  this.domNode = domNode;\n  this.parent = parent;\n  this.subMenuItems = [];\n  this.subIndex = 0;\n  this.init();\n};\n\nSubMenu.prototype.init = function() {\n  this.subMenuItems = this.domNode.querySelectorAll('li');\n  this.addListeners();\n};\n\nSubMenu.prototype.gotoSubIndex = function(idx) {\n  if (idx === this.subMenuItems.length) {\n    idx = 0;\n  } else if (idx < 0) {\n    idx = this.subMenuItems.length - 1;\n  }\n  this.subMenuItems[idx].focus();\n  this.subIndex = idx;\n};\n\nSubMenu.prototype.addListeners = function() {\n  const keys = Utils.keys;\n  const parentNode = this.parent.domNode;\n  Array.prototype.forEach.call(this.subMenuItems, el => {\n    el.addEventListener('keydown', event => {\n      let prevDef = false;\n      switch (event.keyCode) {\n        case keys.down:\n          this.gotoSubIndex(this.subIndex + 1);\n          prevDef = true;\n          break;\n        case keys.up:\n          this.gotoSubIndex(this.subIndex - 1);\n          prevDef = true;\n          break;\n        case keys.tab:\n          Utils.triggerEvent(parentNode, 'mouseleave');\n          break;\n        case keys.enter:\n        case keys.space:\n          prevDef = true;\n          event.currentTarget.click();\n          break;\n      }\n      if (prevDef) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n      return false;\n    });\n  });\n};\n\nexport default SubMenu;\n"
  },
  {
    "path": "src/utils/merge.js",
    "content": "export default function(target) {\n  for (let i = 1, j = arguments.length; i < j; i++) {\n    let source = arguments[i] || {};\n    for (let prop in source) {\n      if (source.hasOwnProperty(prop)) {\n        let value = source[prop];\n        if (value !== undefined) {\n          target[prop] = value;\n        }\n      }\n    }\n  }\n\n  return target;\n};\n"
  },
  {
    "path": "src/utils/popper.js",
    "content": "/**\n * @fileOverview Kickass library to create and place poppers near their reference elements.\n * @version {{version}}\n * @license\n * Copyright (c) 2016 Federico Zivolo and contributors\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\n//\n// Cross module loader\n// Supported: Node, AMD, Browser globals\n//\n;(function (root, factory) {\n    if (typeof define === 'function' && define.amd) {\n        // AMD. Register as an anonymous module.\n        define(factory);\n    } else if (typeof module === 'object' && module.exports) {\n        // Node. Does not work with strict CommonJS, but\n        // only CommonJS-like environments that support module.exports,\n        // like Node.\n        module.exports = factory();\n    } else {\n        // Browser globals (root is window)\n        root.Popper = factory();\n    }\n}(this, function () {\n\n    'use strict';\n\n    var root = window;\n\n    // default options\n    var DEFAULTS = {\n        // placement of the popper\n        placement: 'bottom',\n\n        gpuAcceleration: true,\n\n        // shift popper from its origin by the given amount of pixels (can be negative)\n        offset: 0,\n\n        // the element which will act as boundary of the popper\n        boundariesElement: 'viewport',\n\n        // amount of pixel used to define a minimum distance between the boundaries and the popper\n        boundariesPadding: 5,\n\n        // popper will try to prevent overflow following this order,\n        // by default, then, it could overflow on the left and on top of the boundariesElement\n        preventOverflowOrder: ['left', 'right', 'top', 'bottom'],\n\n        // the behavior used by flip to change the placement of the popper\n        flipBehavior: 'flip',\n\n        arrowElement: '[x-arrow]',\n\n        arrowOffset: 0,\n\n        // list of functions used to modify the offsets before they are applied to the popper\n        modifiers: [ 'shift', 'offset', 'preventOverflow', 'keepTogether', 'arrow', 'flip', 'applyStyle'],\n\n        modifiersIgnored: [],\n\n        forceAbsolute: false\n    };\n\n    /**\n     * Create a new Popper.js instance\n     * @constructor Popper\n     * @param {HTMLElement} reference - The reference element used to position the popper\n     * @param {HTMLElement|Object} popper\n     *      The HTML element used as popper, or a configuration used to generate the popper.\n     * @param {String} [popper.tagName='div'] The tag name of the generated popper.\n     * @param {Array} [popper.classNames=['popper']] Array of classes to apply to the generated popper.\n     * @param {Array} [popper.attributes] Array of attributes to apply, specify `attr:value` to assign a value to it.\n     * @param {HTMLElement|String} [popper.parent=window.document.body] The parent element, given as HTMLElement or as query string.\n     * @param {String} [popper.content=''] The content of the popper, it can be text, html, or node; if it is not text, set `contentType` to `html` or `node`.\n     * @param {String} [popper.contentType='text'] If `html`, the `content` will be parsed as HTML. If `node`, it will be appended as-is.\n     * @param {String} [popper.arrowTagName='div'] Same as `popper.tagName` but for the arrow element.\n     * @param {Array} [popper.arrowClassNames='popper__arrow'] Same as `popper.classNames` but for the arrow element.\n     * @param {String} [popper.arrowAttributes=['x-arrow']] Same as `popper.attributes` but for the arrow element.\n     * @param {Object} options\n     * @param {String} [options.placement=bottom]\n     *      Placement of the popper accepted values: `top(-start, -end), right(-start, -end), bottom(-start, -right),\n     *      left(-start, -end)`\n     *\n     * @param {HTMLElement|String} [options.arrowElement='[x-arrow]']\n     *      The DOM Node used as arrow for the popper, or a CSS selector used to get the DOM node. It must be child of\n     *      its parent Popper. Popper.js will apply to the given element the style required to align the arrow with its\n     *      reference element.\n     *      By default, it will look for a child node of the popper with the `x-arrow` attribute.\n     *\n     * @param {Boolean} [options.gpuAcceleration=true]\n     *      When this property is set to true, the popper position will be applied using CSS3 translate3d, allowing the\n     *      browser to use the GPU to accelerate the rendering.\n     *      If set to false, the popper will be placed using `top` and `left` properties, not using the GPU.\n     *\n     * @param {Number} [options.offset=0]\n     *      Amount of pixels the popper will be shifted (can be negative).\n     *\n     * @param {String|Element} [options.boundariesElement='viewport']\n     *      The element which will define the boundaries of the popper position, the popper will never be placed outside\n     *      of the defined boundaries (except if `keepTogether` is enabled)\n     *\n     * @param {Number} [options.boundariesPadding=5]\n     *      Additional padding for the boundaries\n     *\n     * @param {Array} [options.preventOverflowOrder=['left', 'right', 'top', 'bottom']]\n     *      Order used when Popper.js tries to avoid overflows from the boundaries, they will be checked in order,\n     *      this means that the last ones will never overflow\n     *\n     * @param {String|Array} [options.flipBehavior='flip']\n     *      The behavior used by the `flip` modifier to change the placement of the popper when the latter is trying to\n     *      overlap its reference element. Defining `flip` as value, the placement will be flipped on\n     *      its axis (`right - left`, `top - bottom`).\n     *      You can even pass an array of placements (eg: `['right', 'left', 'top']` ) to manually specify\n     *      how alter the placement when a flip is needed. (eg. in the above example, it would first flip from right to left,\n     *      then, if even in its new placement, the popper is overlapping its reference element, it will be moved to top)\n     *\n     * @param {Array} [options.modifiers=[ 'shift', 'offset', 'preventOverflow', 'keepTogether', 'arrow', 'flip', 'applyStyle']]\n     *      List of functions used to modify the data before they are applied to the popper, add your custom functions\n     *      to this array to edit the offsets and placement.\n     *      The function should reflect the @params and @returns of preventOverflow\n     *\n     * @param {Array} [options.modifiersIgnored=[]]\n     *      Put here any built-in modifier name you want to exclude from the modifiers list\n     *      The function should reflect the @params and @returns of preventOverflow\n     *\n     * @param {Boolean} [options.removeOnDestroy=false]\n     *      Set to true if you want to automatically remove the popper when you call the `destroy` method.\n     */\n    function Popper(reference, popper, options) {\n        this._reference = reference.jquery ? reference[0] : reference;\n        this.state = {};\n\n        // if the popper variable is a configuration object, parse it to generate an HTMLElement\n        // generate a default popper if is not defined\n        var isNotDefined = typeof popper === 'undefined' || popper === null;\n        var isConfig = popper && Object.prototype.toString.call(popper) === '[object Object]';\n        if (isNotDefined || isConfig) {\n            this._popper = this.parse(isConfig ? popper : {});\n        }\n        // otherwise, use the given HTMLElement as popper\n        else {\n            this._popper = popper.jquery ? popper[0] : popper;\n        }\n\n        // with {} we create a new object with the options inside it\n        this._options = Object.assign({}, DEFAULTS, options);\n\n        // refactoring modifiers' list\n        this._options.modifiers = this._options.modifiers.map(function(modifier){\n            // remove ignored modifiers\n            if (this._options.modifiersIgnored.indexOf(modifier) !== -1) return;\n\n            // set the x-placement attribute before everything else because it could be used to add margins to the popper\n            // margins needs to be calculated to get the correct popper offsets\n            if (modifier === 'applyStyle') {\n                this._popper.setAttribute('x-placement', this._options.placement);\n            }\n\n            // return predefined modifier identified by string or keep the custom one\n            return this.modifiers[modifier] || modifier;\n        }.bind(this));\n\n        // make sure to apply the popper position before any computation\n        this.state.position = this._getPosition(this._popper, this._reference);\n        setStyle(this._popper, { position: this.state.position, top: 0 });\n\n        // fire the first update to position the popper in the right place\n        this.update();\n\n        // setup event listeners, they will take care of update the position in specific situations\n        this._setupEventListeners();\n        return this;\n    }\n\n\n    //\n    // Methods\n    //\n    /**\n     * Destroy the popper\n     * @method\n     * @memberof Popper\n     */\n    Popper.prototype.destroy = function() {\n        this._popper.removeAttribute('x-placement');\n        this._popper.style.left = '';\n        this._popper.style.position = '';\n        this._popper.style.top = '';\n        this._popper.style[getSupportedPropertyName('transform')] = '';\n        this._removeEventListeners();\n\n        // remove the popper if user explicity asked for the deletion on destroy\n        if (this._options.removeOnDestroy) {\n            this._popper.remove();\n        }\n        return this;\n    };\n\n    /**\n     * Updates the position of the popper, computing the new offsets and applying the new style\n     * @method\n     * @memberof Popper\n     */\n    Popper.prototype.update = function() {\n        var data = { instance: this, styles: {} };\n\n        // store placement inside the data object, modifiers will be able to edit `placement` if needed\n        // and refer to _originalPlacement to know the original value\n        data.placement = this._options.placement;\n        data._originalPlacement = this._options.placement;\n\n        // compute the popper and reference offsets and put them inside data.offsets\n        data.offsets = this._getOffsets(this._popper, this._reference, data.placement);\n\n        // get boundaries\n        data.boundaries = this._getBoundaries(data, this._options.boundariesPadding, this._options.boundariesElement);\n\n        data = this.runModifiers(data, this._options.modifiers);\n\n        if (typeof this.state.updateCallback === 'function') {\n            this.state.updateCallback(data);\n        }\n    };\n\n    /**\n     * If a function is passed, it will be executed after the initialization of popper with as first argument the Popper instance.\n     * @method\n     * @memberof Popper\n     * @param {Function} callback\n     */\n    Popper.prototype.onCreate = function(callback) {\n        // the createCallbacks return as first argument the popper instance\n        callback(this);\n        return this;\n    };\n\n    /**\n     * If a function is passed, it will be executed after each update of popper with as first argument the set of coordinates and informations\n     * used to style popper and its arrow.\n     * NOTE: it doesn't get fired on the first call of the `Popper.update()` method inside the `Popper` constructor!\n     * @method\n     * @memberof Popper\n     * @param {Function} callback\n     */\n    Popper.prototype.onUpdate = function(callback) {\n        this.state.updateCallback = callback;\n        return this;\n    };\n\n    /**\n     * Helper used to generate poppers from a configuration file\n     * @method\n     * @memberof Popper\n     * @param config {Object} configuration\n     * @returns {HTMLElement} popper\n     */\n    Popper.prototype.parse = function(config) {\n        var defaultConfig = {\n            tagName: 'div',\n            classNames: [ 'popper' ],\n            attributes: [],\n            parent: root.document.body,\n            content: '',\n            contentType: 'text',\n            arrowTagName: 'div',\n            arrowClassNames: [ 'popper__arrow' ],\n            arrowAttributes: [ 'x-arrow']\n        };\n        config = Object.assign({}, defaultConfig, config);\n\n        var d = root.document;\n\n        var popper = d.createElement(config.tagName);\n        addClassNames(popper, config.classNames);\n        addAttributes(popper, config.attributes);\n        if (config.contentType === 'node') {\n            popper.appendChild(config.content.jquery ? config.content[0] : config.content);\n        }else if (config.contentType === 'html') {\n            popper.innerHTML = config.content;\n        } else {\n            popper.textContent = config.content;\n        }\n\n        if (config.arrowTagName) {\n            var arrow = d.createElement(config.arrowTagName);\n            addClassNames(arrow, config.arrowClassNames);\n            addAttributes(arrow, config.arrowAttributes);\n            popper.appendChild(arrow);\n        }\n\n        var parent = config.parent.jquery ? config.parent[0] : config.parent;\n\n        // if the given parent is a string, use it to match an element\n        // if more than one element is matched, the first one will be used as parent\n        // if no elements are matched, the script will throw an error\n        if (typeof parent === 'string') {\n            parent = d.querySelectorAll(config.parent);\n            if (parent.length > 1) {\n                console.warn('WARNING: the given `parent` query(' + config.parent + ') matched more than one element, the first one will be used');\n            }\n            if (parent.length === 0) {\n                throw 'ERROR: the given `parent` doesn\\'t exists!';\n            }\n            parent = parent[0];\n        }\n        // if the given parent is a DOM nodes list or an array of nodes with more than one element,\n        // the first one will be used as parent\n        if (parent.length > 1 && parent instanceof Element === false) {\n            console.warn('WARNING: you have passed as parent a list of elements, the first one will be used');\n            parent = parent[0];\n        }\n\n        // append the generated popper to its parent\n        parent.appendChild(popper);\n\n        return popper;\n\n        /**\n         * Adds class names to the given element\n         * @function\n         * @ignore\n         * @param {HTMLElement} target\n         * @param {Array} classes\n         */\n        function addClassNames(element, classNames) {\n            classNames.forEach(function(className) {\n                element.classList.add(className);\n            });\n        }\n\n        /**\n         * Adds attributes to the given element\n         * @function\n         * @ignore\n         * @param {HTMLElement} target\n         * @param {Array} attributes\n         * @example\n         * addAttributes(element, [ 'data-info:foobar' ]);\n         */\n        function addAttributes(element, attributes) {\n            attributes.forEach(function(attribute) {\n                element.setAttribute(attribute.split(':')[0], attribute.split(':')[1] || '');\n            });\n        }\n\n    };\n\n    /**\n     * Helper used to get the position which will be applied to the popper\n     * @method\n     * @memberof Popper\n     * @param config {HTMLElement} popper element\n     * @param reference {HTMLElement} reference element\n     * @returns {String} position\n     */\n    Popper.prototype._getPosition = function(popper, reference) {\n        var container = getOffsetParent(reference);\n\n        if (this._options.forceAbsolute) {\n            return 'absolute';\n        }\n\n        // Decide if the popper will be fixed\n        // If the reference element is inside a fixed context, the popper will be fixed as well to allow them to scroll together\n        var isParentFixed = isFixed(reference, container);\n        return isParentFixed ? 'fixed' : 'absolute';\n    };\n\n    /**\n     * Get offsets to the popper\n     * @method\n     * @memberof Popper\n     * @access private\n     * @param {Element} popper - the popper element\n     * @param {Element} reference - the reference element (the popper will be relative to this)\n     * @returns {Object} An object containing the offsets which will be applied to the popper\n     */\n    Popper.prototype._getOffsets = function(popper, reference, placement) {\n        placement = placement.split('-')[0];\n        var popperOffsets = {};\n\n        popperOffsets.position = this.state.position;\n        var isParentFixed = popperOffsets.position === 'fixed';\n\n        //\n        // Get reference element position\n        //\n        var referenceOffsets = getOffsetRectRelativeToCustomParent(reference, getOffsetParent(popper), isParentFixed);\n\n        //\n        // Get popper sizes\n        //\n        var popperRect = getOuterSizes(popper);\n\n        //\n        // Compute offsets of popper\n        //\n\n        // depending by the popper placement we have to compute its offsets slightly differently\n        if (['right', 'left'].indexOf(placement) !== -1) {\n            popperOffsets.top = referenceOffsets.top + referenceOffsets.height / 2 - popperRect.height / 2;\n            if (placement === 'left') {\n                popperOffsets.left = referenceOffsets.left - popperRect.width;\n            } else {\n                popperOffsets.left = referenceOffsets.right;\n            }\n        } else {\n            popperOffsets.left = referenceOffsets.left + referenceOffsets.width / 2 - popperRect.width / 2;\n            if (placement === 'top') {\n                popperOffsets.top = referenceOffsets.top - popperRect.height;\n            } else {\n                popperOffsets.top = referenceOffsets.bottom;\n            }\n        }\n\n        // Add width and height to our offsets object\n        popperOffsets.width   = popperRect.width;\n        popperOffsets.height  = popperRect.height;\n\n        return {\n            popper: popperOffsets,\n            reference: referenceOffsets\n        };\n    };\n\n\n    /**\n     * Setup needed event listeners used to update the popper position\n     * @method\n     * @memberof Popper\n     * @access private\n     */\n    Popper.prototype._setupEventListeners = function() {\n        // NOTE: 1 DOM access here\n        this.state.updateBound = this.update.bind(this);\n        root.addEventListener('resize', this.state.updateBound);\n        // if the boundariesElement is window we don't need to listen for the scroll event\n        if (this._options.boundariesElement !== 'window') {\n            var target = getScrollParent(this._reference);\n            // here it could be both `body` or `documentElement` thanks to Firefox, we then check both\n            if (target === root.document.body || target === root.document.documentElement) {\n                target = root;\n            }\n            target.addEventListener('scroll', this.state.updateBound);\n            this.state.scrollTarget = target;\n        }\n    };\n\n    /**\n     * Remove event listeners used to update the popper position\n     * @method\n     * @memberof Popper\n     * @access private\n     */\n    Popper.prototype._removeEventListeners = function() {\n        // NOTE: 1 DOM access here\n        root.removeEventListener('resize', this.state.updateBound);\n        if (this._options.boundariesElement !== 'window' && this.state.scrollTarget) {\n            this.state.scrollTarget.removeEventListener('scroll', this.state.updateBound);\n            this.state.scrollTarget = null;\n        }\n        this.state.updateBound = null;\n    };\n\n    /**\n     * Computed the boundaries limits and return them\n     * @method\n     * @memberof Popper\n     * @access private\n     * @param {Object} data - Object containing the property \"offsets\" generated by `_getOffsets`\n     * @param {Number} padding - Boundaries padding\n     * @param {Element} boundariesElement - Element used to define the boundaries\n     * @returns {Object} Coordinates of the boundaries\n     */\n    Popper.prototype._getBoundaries = function(data, padding, boundariesElement) {\n        // NOTE: 1 DOM access here\n        var boundaries = {};\n        var width, height;\n        if (boundariesElement === 'window') {\n            var body = root.document.body,\n                html = root.document.documentElement;\n\n            height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );\n            width = Math.max( body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth );\n\n            boundaries = {\n                top: 0,\n                right: width,\n                bottom: height,\n                left: 0\n            };\n        } else if (boundariesElement === 'viewport') {\n            var offsetParent = getOffsetParent(this._popper);\n            var scrollParent = getScrollParent(this._popper);\n            var offsetParentRect = getOffsetRect(offsetParent);\n\n            // Thanks the fucking native API, `document.body.scrollTop` & `document.documentElement.scrollTop`\n            var getScrollTopValue = function (element) {\n                return element == document.body ? Math.max(document.documentElement.scrollTop, document.body.scrollTop) : element.scrollTop;\n            }\n            var getScrollLeftValue = function (element) {\n                return element == document.body ? Math.max(document.documentElement.scrollLeft, document.body.scrollLeft) : element.scrollLeft;\n            }\n\n            // if the popper is fixed we don't have to substract scrolling from the boundaries\n            var scrollTop = data.offsets.popper.position === 'fixed' ? 0 : getScrollTopValue(scrollParent);\n            var scrollLeft = data.offsets.popper.position === 'fixed' ? 0 : getScrollLeftValue(scrollParent);\n\n            boundaries = {\n                top: 0 - (offsetParentRect.top - scrollTop),\n                right: root.document.documentElement.clientWidth - (offsetParentRect.left - scrollLeft),\n                bottom: root.document.documentElement.clientHeight - (offsetParentRect.top - scrollTop),\n                left: 0 - (offsetParentRect.left - scrollLeft)\n            };\n        } else {\n            if (getOffsetParent(this._popper) === boundariesElement) {\n                boundaries = {\n                    top: 0,\n                    left: 0,\n                    right: boundariesElement.clientWidth,\n                    bottom: boundariesElement.clientHeight\n                };\n            } else {\n                boundaries = getOffsetRect(boundariesElement);\n            }\n        }\n        boundaries.left += padding;\n        boundaries.right -= padding;\n        boundaries.top = boundaries.top + padding;\n        boundaries.bottom = boundaries.bottom - padding;\n        return boundaries;\n    };\n\n\n    /**\n     * Loop trough the list of modifiers and run them in order, each of them will then edit the data object\n     * @method\n     * @memberof Popper\n     * @access public\n     * @param {Object} data\n     * @param {Array} modifiers\n     * @param {Function} ends\n     */\n    Popper.prototype.runModifiers = function(data, modifiers, ends) {\n        var modifiersToRun = modifiers.slice();\n        if (ends !== undefined) {\n            modifiersToRun = this._options.modifiers.slice(0, getArrayKeyIndex(this._options.modifiers, ends));\n        }\n\n        modifiersToRun.forEach(function(modifier) {\n            if (isFunction(modifier)) {\n                data = modifier.call(this, data);\n            }\n        }.bind(this));\n\n        return data;\n    };\n\n    /**\n     * Helper used to know if the given modifier depends from another one.\n     * @method\n     * @memberof Popper\n     * @param {String} requesting - name of requesting modifier\n     * @param {String} requested - name of requested modifier\n     * @returns {Boolean}\n     */\n    Popper.prototype.isModifierRequired = function(requesting, requested) {\n        var index = getArrayKeyIndex(this._options.modifiers, requesting);\n        return !!this._options.modifiers.slice(0, index).filter(function(modifier) {\n            return modifier === requested;\n        }).length;\n    };\n\n    //\n    // Modifiers\n    //\n\n    /**\n     * Modifiers list\n     * @namespace Popper.modifiers\n     * @memberof Popper\n     * @type {Object}\n     */\n    Popper.prototype.modifiers = {};\n\n    /**\n     * Apply the computed styles to the popper element\n     * @method\n     * @memberof Popper.modifiers\n     * @argument {Object} data - The data object generated by `update` method\n     * @returns {Object} The same data object\n     */\n    Popper.prototype.modifiers.applyStyle = function(data) {\n        // apply the final offsets to the popper\n        // NOTE: 1 DOM access here\n        var styles = {\n            position: data.offsets.popper.position\n        };\n\n        // round top and left to avoid blurry text\n        var left = Math.round(data.offsets.popper.left);\n        var top = Math.round(data.offsets.popper.top);\n\n        // if gpuAcceleration is set to true and transform is supported, we use `translate3d` to apply the position to the popper\n        // we automatically use the supported prefixed version if needed\n        var prefixedProperty;\n        if (this._options.gpuAcceleration && (prefixedProperty = getSupportedPropertyName('transform'))) {\n            styles[prefixedProperty] = 'translate3d(' + left + 'px, ' + top + 'px, 0)';\n            styles.top = 0;\n            styles.left = 0;\n        }\n        // othwerise, we use the standard `left` and `top` properties\n        else {\n            styles.left =left;\n            styles.top = top;\n        }\n\n        // any property present in `data.styles` will be applied to the popper,\n        // in this way we can make the 3rd party modifiers add custom styles to it\n        // Be aware, modifiers could override the properties defined in the previous\n        // lines of this modifier!\n        Object.assign(styles, data.styles);\n\n        setStyle(this._popper, styles);\n\n        // set an attribute which will be useful to style the tooltip (use it to properly position its arrow)\n        // NOTE: 1 DOM access here\n        this._popper.setAttribute('x-placement', data.placement);\n\n        // if the arrow modifier is required and the arrow style has been computed, apply the arrow style\n        if (this.isModifierRequired(this.modifiers.applyStyle, this.modifiers.arrow) && data.offsets.arrow) {\n            setStyle(data.arrowElement, data.offsets.arrow);\n        }\n\n        return data;\n    };\n\n    /**\n     * Modifier used to shift the popper on the start or end of its reference element side\n     * @method\n     * @memberof Popper.modifiers\n     * @argument {Object} data - The data object generated by `update` method\n     * @returns {Object} The data object, properly modified\n     */\n    Popper.prototype.modifiers.shift = function(data) {\n        var placement = data.placement;\n        var basePlacement = placement.split('-')[0];\n        var shiftVariation = placement.split('-')[1];\n\n        // if shift shiftVariation is specified, run the modifier\n        if (shiftVariation) {\n            var reference = data.offsets.reference;\n            var popper = getPopperClientRect(data.offsets.popper);\n\n            var shiftOffsets = {\n                y: {\n                    start:  { top: reference.top },\n                    end:    { top: reference.top + reference.height - popper.height }\n                },\n                x: {\n                    start:  { left: reference.left },\n                    end:    { left: reference.left + reference.width - popper.width }\n                }\n            };\n\n            var axis = ['bottom', 'top'].indexOf(basePlacement) !== -1 ? 'x' : 'y';\n\n            data.offsets.popper = Object.assign(popper, shiftOffsets[axis][shiftVariation]);\n        }\n\n        return data;\n    };\n\n\n    /**\n     * Modifier used to make sure the popper does not overflows from it's boundaries\n     * @method\n     * @memberof Popper.modifiers\n     * @argument {Object} data - The data object generated by `update` method\n     * @returns {Object} The data object, properly modified\n     */\n    Popper.prototype.modifiers.preventOverflow = function(data) {\n        var order = this._options.preventOverflowOrder;\n        var popper = getPopperClientRect(data.offsets.popper);\n\n        var check = {\n            left: function() {\n                var left = popper.left;\n                if (popper.left < data.boundaries.left) {\n                    left = Math.max(popper.left, data.boundaries.left);\n                }\n                return { left: left };\n            },\n            right: function() {\n                var left = popper.left;\n                if (popper.right > data.boundaries.right) {\n                    left = Math.min(popper.left, data.boundaries.right - popper.width);\n                }\n                return { left: left };\n            },\n            top: function() {\n                var top = popper.top;\n                if (popper.top < data.boundaries.top) {\n                    top = Math.max(popper.top, data.boundaries.top);\n                }\n                return { top: top };\n            },\n            bottom: function() {\n                var top = popper.top;\n                if (popper.bottom > data.boundaries.bottom) {\n                    top = Math.min(popper.top, data.boundaries.bottom - popper.height);\n                }\n                return { top: top };\n            }\n        };\n\n        order.forEach(function(direction) {\n            data.offsets.popper = Object.assign(popper, check[direction]());\n        });\n\n        return data;\n    };\n\n    /**\n     * Modifier used to make sure the popper is always near its reference\n     * @method\n     * @memberof Popper.modifiers\n     * @argument {Object} data - The data object generated by _update method\n     * @returns {Object} The data object, properly modified\n     */\n    Popper.prototype.modifiers.keepTogether = function(data) {\n        var popper  = getPopperClientRect(data.offsets.popper);\n        var reference = data.offsets.reference;\n        var f = Math.floor;\n\n        if (popper.right < f(reference.left)) {\n            data.offsets.popper.left = f(reference.left) - popper.width;\n        }\n        if (popper.left > f(reference.right)) {\n            data.offsets.popper.left = f(reference.right);\n        }\n        if (popper.bottom < f(reference.top)) {\n            data.offsets.popper.top = f(reference.top) - popper.height;\n        }\n        if (popper.top > f(reference.bottom)) {\n            data.offsets.popper.top = f(reference.bottom);\n        }\n\n        return data;\n    };\n\n    /**\n     * Modifier used to flip the placement of the popper when the latter is starting overlapping its reference element.\n     * Requires the `preventOverflow` modifier before it in order to work.\n     * **NOTE:** This modifier will run all its previous modifiers everytime it tries to flip the popper!\n     * @method\n     * @memberof Popper.modifiers\n     * @argument {Object} data - The data object generated by _update method\n     * @returns {Object} The data object, properly modified\n     */\n    Popper.prototype.modifiers.flip = function(data) {\n        // check if preventOverflow is in the list of modifiers before the flip modifier.\n        // otherwise flip would not work as expected.\n        if (!this.isModifierRequired(this.modifiers.flip, this.modifiers.preventOverflow)) {\n            console.warn('WARNING: preventOverflow modifier is required by flip modifier in order to work, be sure to include it before flip!');\n            return data;\n        }\n\n        if (data.flipped && data.placement === data._originalPlacement) {\n            // seems like flip is trying to loop, probably there's not enough space on any of the flippable sides\n            return data;\n        }\n\n        var placement = data.placement.split('-')[0];\n        var placementOpposite = getOppositePlacement(placement);\n        var variation = data.placement.split('-')[1] || '';\n\n        var flipOrder = [];\n        if(this._options.flipBehavior === 'flip') {\n            flipOrder = [\n                placement,\n                placementOpposite\n            ];\n        } else {\n            flipOrder = this._options.flipBehavior;\n        }\n\n        flipOrder.forEach(function(step, index) {\n            if (placement !== step || flipOrder.length === index + 1) {\n                return;\n            }\n\n            placement = data.placement.split('-')[0];\n            placementOpposite = getOppositePlacement(placement);\n\n            var popperOffsets = getPopperClientRect(data.offsets.popper);\n\n            // this boolean is used to distinguish right and bottom from top and left\n            // they need different computations to get flipped\n            var a = ['right', 'bottom'].indexOf(placement) !== -1;\n\n            // using Math.floor because the reference offsets may contain decimals we are not going to consider here\n            if (\n                a && Math.floor(data.offsets.reference[placement]) > Math.floor(popperOffsets[placementOpposite]) ||\n                !a && Math.floor(data.offsets.reference[placement]) < Math.floor(popperOffsets[placementOpposite])\n            ) {\n                // we'll use this boolean to detect any flip loop\n                data.flipped = true;\n                data.placement = flipOrder[index + 1];\n                if (variation) {\n                    data.placement += '-' + variation;\n                }\n                data.offsets.popper = this._getOffsets(this._popper, this._reference, data.placement).popper;\n\n                data = this.runModifiers(data, this._options.modifiers, this._flip);\n            }\n        }.bind(this));\n        return data;\n    };\n\n    /**\n     * Modifier used to add an offset to the popper, useful if you more granularity positioning your popper.\n     * The offsets will shift the popper on the side of its reference element.\n     * @method\n     * @memberof Popper.modifiers\n     * @argument {Object} data - The data object generated by _update method\n     * @returns {Object} The data object, properly modified\n     */\n    Popper.prototype.modifiers.offset = function(data) {\n        var offset = this._options.offset;\n        var popper  = data.offsets.popper;\n\n        if (data.placement.indexOf('left') !== -1) {\n            popper.top -= offset;\n        }\n        else if (data.placement.indexOf('right') !== -1) {\n            popper.top += offset;\n        }\n        else if (data.placement.indexOf('top') !== -1) {\n            popper.left -= offset;\n        }\n        else if (data.placement.indexOf('bottom') !== -1) {\n            popper.left += offset;\n        }\n        return data;\n    };\n\n    /**\n     * Modifier used to move the arrows on the edge of the popper to make sure them are always between the popper and the reference element\n     * It will use the CSS outer size of the arrow element to know how many pixels of conjuction are needed\n     * @method\n     * @memberof Popper.modifiers\n     * @argument {Object} data - The data object generated by _update method\n     * @returns {Object} The data object, properly modified\n     */\n    Popper.prototype.modifiers.arrow = function(data) {\n        var arrow  = this._options.arrowElement;\n        var arrowOffset = this._options.arrowOffset;\n\n        // if the arrowElement is a string, suppose it's a CSS selector\n        if (typeof arrow === 'string') {\n            arrow = this._popper.querySelector(arrow);\n        }\n\n        // if arrow element is not found, don't run the modifier\n        if (!arrow) {\n            return data;\n        }\n\n        // the arrow element must be child of its popper\n        if (!this._popper.contains(arrow)) {\n            console.warn('WARNING: `arrowElement` must be child of its popper element!');\n            return data;\n        }\n\n        // arrow depends on keepTogether in order to work\n        if (!this.isModifierRequired(this.modifiers.arrow, this.modifiers.keepTogether)) {\n            console.warn('WARNING: keepTogether modifier is required by arrow modifier in order to work, be sure to include it before arrow!');\n            return data;\n        }\n\n        var arrowStyle  = {};\n        var placement   = data.placement.split('-')[0];\n        var popper      = getPopperClientRect(data.offsets.popper);\n        var reference   = data.offsets.reference;\n        var isVertical  = ['left', 'right'].indexOf(placement) !== -1;\n\n        var len         = isVertical ? 'height' : 'width';\n        var side        = isVertical ? 'top' : 'left';\n        var translate   = isVertical ? 'translateY' : 'translateX';\n        var altSide     = isVertical ? 'left' : 'top';\n        var opSide      = isVertical ? 'bottom' : 'right';\n        var arrowSize   = getOuterSizes(arrow)[len];\n\n        //\n        // extends keepTogether behavior making sure the popper and its reference have enough pixels in conjuction\n        //\n\n        // top/left side\n        if (reference[opSide] - arrowSize < popper[side]) {\n            data.offsets.popper[side] -= popper[side] - (reference[opSide] - arrowSize);\n        }\n        // bottom/right side\n        if (reference[side] + arrowSize > popper[opSide]) {\n            data.offsets.popper[side] += (reference[side] + arrowSize) - popper[opSide];\n        }\n\n        // compute center of the popper\n        var center = reference[side] + (arrowOffset || (reference[len] / 2) - (arrowSize / 2));\n\n        var sideValue = center - popper[side];\n\n        // prevent arrow from being placed not contiguously to its popper\n        sideValue = Math.max(Math.min(popper[len] - arrowSize - 8, sideValue), 8);\n        arrowStyle[side] = sideValue;\n        arrowStyle[altSide] = ''; // make sure to remove any old style from the arrow\n\n        data.offsets.arrow = arrowStyle;\n        data.arrowElement = arrow;\n\n        return data;\n    };\n\n\n    //\n    // Helpers\n    //\n\n    /**\n     * Get the outer sizes of the given element (offset size + margins)\n     * @function\n     * @ignore\n     * @argument {Element} element\n     * @returns {Object} object containing width and height properties\n     */\n    function getOuterSizes(element) {\n        // NOTE: 1 DOM access here\n        var _display = element.style.display, _visibility = element.style.visibility;\n        element.style.display = 'block'; element.style.visibility = 'hidden';\n        var calcWidthToForceRepaint = element.offsetWidth;\n\n        // original method\n        var styles = root.getComputedStyle(element);\n        var x = parseFloat(styles.marginTop) + parseFloat(styles.marginBottom);\n        var y = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);\n        var result = { width: element.offsetWidth + y, height: element.offsetHeight + x };\n\n        // reset element styles\n        element.style.display = _display; element.style.visibility = _visibility;\n        return result;\n    }\n\n    /**\n     * Get the opposite placement of the given one/\n     * @function\n     * @ignore\n     * @argument {String} placement\n     * @returns {String} flipped placement\n     */\n    function getOppositePlacement(placement) {\n        var hash = {left: 'right', right: 'left', bottom: 'top', top: 'bottom' };\n        return placement.replace(/left|right|bottom|top/g, function(matched){\n            return hash[matched];\n        });\n    }\n\n    /**\n     * Given the popper offsets, generate an output similar to getBoundingClientRect\n     * @function\n     * @ignore\n     * @argument {Object} popperOffsets\n     * @returns {Object} ClientRect like output\n     */\n    function getPopperClientRect(popperOffsets) {\n        var offsets = Object.assign({}, popperOffsets);\n        offsets.right = offsets.left + offsets.width;\n        offsets.bottom = offsets.top + offsets.height;\n        return offsets;\n    }\n\n    /**\n     * Given an array and the key to find, returns its index\n     * @function\n     * @ignore\n     * @argument {Array} arr\n     * @argument keyToFind\n     * @returns index or null\n     */\n    function getArrayKeyIndex(arr, keyToFind) {\n        var i = 0, key;\n        for (key in arr) {\n            if (arr[key] === keyToFind) {\n                return i;\n            }\n            i++;\n        }\n        return null;\n    }\n\n    /**\n     * Get CSS computed property of the given element\n     * @function\n     * @ignore\n     * @argument {Eement} element\n     * @argument {String} property\n     */\n    function getStyleComputedProperty(element, property) {\n        // NOTE: 1 DOM access here\n        var css = root.getComputedStyle(element, null);\n        return css[property];\n    }\n\n    /**\n     * Returns the offset parent of the given element\n     * @function\n     * @ignore\n     * @argument {Element} element\n     * @returns {Element} offset parent\n     */\n    function getOffsetParent(element) {\n        // NOTE: 1 DOM access here\n        var offsetParent = element.offsetParent;\n        return offsetParent === root.document.body || !offsetParent ? root.document.documentElement : offsetParent;\n    }\n\n    /**\n     * Returns the scrolling parent of the given element\n     * @function\n     * @ignore\n     * @argument {Element} element\n     * @returns {Element} offset parent\n     */\n    function getScrollParent(element) {\n        var parent = element.parentNode;\n\n        if (!parent) {\n            return element;\n        }\n\n        if (parent === root.document) {\n            // Firefox puts the scrollTOp value on `documentElement` instead of `body`, we then check which of them is\n            // greater than 0 and return the proper element\n            if (root.document.body.scrollTop || root.document.body.scrollLeft) {\n                return root.document.body;\n            } else {\n                return root.document.documentElement;\n            }\n        }\n\n        // Firefox want us to check `-x` and `-y` variations as well\n        if (\n            ['scroll', 'auto'].indexOf(getStyleComputedProperty(parent, 'overflow')) !== -1 ||\n            ['scroll', 'auto'].indexOf(getStyleComputedProperty(parent, 'overflow-x')) !== -1 ||\n            ['scroll', 'auto'].indexOf(getStyleComputedProperty(parent, 'overflow-y')) !== -1\n        ) {\n            // If the detected scrollParent is body, we perform an additional check on its parentNode\n            // in this way we'll get body if the browser is Chrome-ish, or documentElement otherwise\n            // fixes issue #65\n            return parent;\n        }\n        return getScrollParent(element.parentNode);\n    }\n\n    /**\n     * Check if the given element is fixed or is inside a fixed parent\n     * @function\n     * @ignore\n     * @argument {Element} element\n     * @argument {Element} customContainer\n     * @returns {Boolean} answer to \"isFixed?\"\n     */\n    function isFixed(element) {\n        if (element === root.document.body) {\n            return false;\n        }\n        if (getStyleComputedProperty(element, 'position') === 'fixed') {\n            return true;\n        }\n        return element.parentNode ? isFixed(element.parentNode) : element;\n    }\n\n    /**\n     * Set the style to the given popper\n     * @function\n     * @ignore\n     * @argument {Element} element - Element to apply the style to\n     * @argument {Object} styles - Object with a list of properties and values which will be applied to the element\n     */\n    function setStyle(element, styles) {\n        function is_numeric(n) {\n            return (n !== '' && !isNaN(parseFloat(n)) && isFinite(n));\n        }\n        Object.keys(styles).forEach(function(prop) {\n            var unit = '';\n            // add unit if the value is numeric and is one of the following\n            if (['width', 'height', 'top', 'right', 'bottom', 'left'].indexOf(prop) !== -1 && is_numeric(styles[prop])) {\n                unit = 'px';\n            }\n            element.style[prop] = styles[prop] + unit;\n        });\n    }\n\n    /**\n     * Check if the given variable is a function\n     * @function\n     * @ignore\n     * @argument {*} functionToCheck - variable to check\n     * @returns {Boolean} answer to: is a function?\n     */\n    function isFunction(functionToCheck) {\n        var getType = {};\n        return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';\n    }\n\n    /**\n     * Get the position of the given element, relative to its offset parent\n     * @function\n     * @ignore\n     * @param {Element} element\n     * @return {Object} position - Coordinates of the element and its `scrollTop`\n     */\n    function getOffsetRect(element) {\n        var elementRect = {\n            width: element.offsetWidth,\n            height: element.offsetHeight,\n            left: element.offsetLeft,\n            top: element.offsetTop\n        };\n\n        elementRect.right = elementRect.left + elementRect.width;\n        elementRect.bottom = elementRect.top + elementRect.height;\n\n        // position\n        return elementRect;\n    }\n\n    /**\n     * Get bounding client rect of given element\n     * @function\n     * @ignore\n     * @param {HTMLElement} element\n     * @return {Object} client rect\n     */\n    function getBoundingClientRect(element) {\n        var rect = element.getBoundingClientRect();\n\n        // whether the IE version is lower than 11\n        var isIE = navigator.userAgent.indexOf(\"MSIE\") != -1;\n\n        // fix ie document bounding top always 0 bug\n        var rectTop = isIE && element.tagName === 'HTML'\n            ? -element.scrollTop\n            : rect.top;\n\n        return {\n            left: rect.left,\n            top: rectTop,\n            right: rect.right,\n            bottom: rect.bottom,\n            width: rect.right - rect.left,\n            height: rect.bottom - rectTop\n        };\n    }\n\n    /**\n     * Given an element and one of its parents, return the offset\n     * @function\n     * @ignore\n     * @param {HTMLElement} element\n     * @param {HTMLElement} parent\n     * @return {Object} rect\n     */\n    function getOffsetRectRelativeToCustomParent(element, parent, fixed) {\n        var elementRect = getBoundingClientRect(element);\n        var parentRect = getBoundingClientRect(parent);\n\n        if (fixed) {\n            var scrollParent = getScrollParent(parent);\n            parentRect.top += scrollParent.scrollTop;\n            parentRect.bottom += scrollParent.scrollTop;\n            parentRect.left += scrollParent.scrollLeft;\n            parentRect.right += scrollParent.scrollLeft;\n        }\n\n        var rect = {\n            top: elementRect.top - parentRect.top ,\n            left: elementRect.left - parentRect.left ,\n            bottom: (elementRect.top - parentRect.top) + elementRect.height,\n            right: (elementRect.left - parentRect.left) + elementRect.width,\n            width: elementRect.width,\n            height: elementRect.height\n        };\n        return rect;\n    }\n\n    /**\n     * Get the prefixed supported property name\n     * @function\n     * @ignore\n     * @argument {String} property (camelCase)\n     * @returns {String} prefixed property (camelCase)\n     */\n    function getSupportedPropertyName(property) {\n        var prefixes = ['', 'ms', 'webkit', 'moz', 'o'];\n\n        for (var i = 0; i < prefixes.length; i++) {\n            var toCheck = prefixes[i] ? prefixes[i] + property.charAt(0).toUpperCase() + property.slice(1) : property;\n            if (typeof root.document.body.style[toCheck] !== 'undefined') {\n                return toCheck;\n            }\n        }\n        return null;\n    }\n\n    /**\n     * The Object.assign() method is used to copy the values of all enumerable own properties from one or more source\n     * objects to a target object. It will return the target object.\n     * This polyfill doesn't support symbol properties, since ES5 doesn't have symbols anyway\n     * Source: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign\n     * @function\n     * @ignore\n     */\n    if (!Object.assign) {\n        Object.defineProperty(Object, 'assign', {\n            enumerable: false,\n            configurable: true,\n            writable: true,\n            value: function(target) {\n                if (target === undefined || target === null) {\n                    throw new TypeError('Cannot convert first argument to object');\n                }\n\n                var to = Object(target);\n                for (var i = 1; i < arguments.length; i++) {\n                    var nextSource = arguments[i];\n                    if (nextSource === undefined || nextSource === null) {\n                        continue;\n                    }\n                    nextSource = Object(nextSource);\n\n                    var keysArray = Object.keys(nextSource);\n                    for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {\n                        var nextKey = keysArray[nextIndex];\n                        var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);\n                        if (desc !== undefined && desc.enumerable) {\n                            to[nextKey] = nextSource[nextKey];\n                        }\n                    }\n                }\n                return to;\n            }\n        });\n    }\n\n    return Popper;\n}));\n"
  },
  {
    "path": "src/utils/popup/index.js",
    "content": "import Vue from 'vue';\nimport merge from 'element-ui/src/utils/merge';\nimport PopupManager from 'element-ui/src/utils/popup/popup-manager';\nimport getScrollBarWidth from '../scrollbar-width';\nimport { getStyle, addClass, removeClass, hasClass } from '../dom';\n\nlet idSeed = 1;\n\nlet scrollBarWidth;\n\nexport default {\n  props: {\n    visible: {\n      type: Boolean,\n      default: false\n    },\n    openDelay: {},\n    closeDelay: {},\n    zIndex: {},\n    modal: {\n      type: Boolean,\n      default: false\n    },\n    modalFade: {\n      type: Boolean,\n      default: true\n    },\n    modalClass: {},\n    modalAppendToBody: {\n      type: Boolean,\n      default: false\n    },\n    lockScroll: {\n      type: Boolean,\n      default: true\n    },\n    closeOnPressEscape: {\n      type: Boolean,\n      default: false\n    },\n    closeOnClickModal: {\n      type: Boolean,\n      default: false\n    }\n  },\n\n  beforeMount() {\n    this._popupId = 'popup-' + idSeed++;\n    PopupManager.register(this._popupId, this);\n  },\n\n  beforeDestroy() {\n    PopupManager.deregister(this._popupId);\n    PopupManager.closeModal(this._popupId);\n\n    this.restoreBodyStyle();\n  },\n\n  data() {\n    return {\n      opened: false,\n      bodyPaddingRight: null,\n      computedBodyPaddingRight: 0,\n      withoutHiddenClass: true,\n      rendered: false\n    };\n  },\n\n  watch: {\n    visible(val) {\n      if (val) {\n        if (this._opening) return;\n        if (!this.rendered) {\n          this.rendered = true;\n          Vue.nextTick(() => {\n            this.open();\n          });\n        } else {\n          this.open();\n        }\n      } else {\n        this.close();\n      }\n    }\n  },\n\n  methods: {\n    open(options) {\n      if (!this.rendered) {\n        this.rendered = true;\n      }\n\n      const props = merge({}, this.$props || this, options);\n\n      if (this._closeTimer) {\n        clearTimeout(this._closeTimer);\n        this._closeTimer = null;\n      }\n      clearTimeout(this._openTimer);\n\n      const openDelay = Number(props.openDelay);\n      if (openDelay > 0) {\n        this._openTimer = setTimeout(() => {\n          this._openTimer = null;\n          this.doOpen(props);\n        }, openDelay);\n      } else {\n        this.doOpen(props);\n      }\n    },\n\n    doOpen(props) {\n      if (this.$isServer) return;\n      if (this.willOpen && !this.willOpen()) return;\n      if (this.opened) return;\n\n      this._opening = true;\n\n      const dom = this.$el;\n\n      const modal = props.modal;\n\n      const zIndex = props.zIndex;\n      if (zIndex) {\n        PopupManager.zIndex = zIndex;\n      }\n\n      if (modal) {\n        if (this._closing) {\n          PopupManager.closeModal(this._popupId);\n          this._closing = false;\n        }\n        PopupManager.openModal(this._popupId, PopupManager.nextZIndex(), this.modalAppendToBody ? undefined : dom, props.modalClass, props.modalFade);\n        if (props.lockScroll) {\n          this.withoutHiddenClass = !hasClass(document.body, 'el-popup-parent--hidden');\n          if (this.withoutHiddenClass) {\n            this.bodyPaddingRight = document.body.style.paddingRight;\n            this.computedBodyPaddingRight = parseInt(getStyle(document.body, 'paddingRight'), 10);\n          }\n          scrollBarWidth = getScrollBarWidth();\n          let bodyHasOverflow = document.documentElement.clientHeight < document.body.scrollHeight;\n          let bodyOverflowY = getStyle(document.body, 'overflowY');\n          if (scrollBarWidth > 0 && (bodyHasOverflow || bodyOverflowY === 'scroll') && this.withoutHiddenClass) {\n            document.body.style.paddingRight = this.computedBodyPaddingRight + scrollBarWidth + 'px';\n          }\n          addClass(document.body, 'el-popup-parent--hidden');\n        }\n      }\n\n      if (getComputedStyle(dom).position === 'static') {\n        dom.style.position = 'absolute';\n      }\n\n      dom.style.zIndex = PopupManager.nextZIndex();\n      this.opened = true;\n\n      this.onOpen && this.onOpen();\n\n      this.doAfterOpen();\n    },\n\n    doAfterOpen() {\n      this._opening = false;\n    },\n\n    close() {\n      if (this.willClose && !this.willClose()) return;\n\n      if (this._openTimer !== null) {\n        clearTimeout(this._openTimer);\n        this._openTimer = null;\n      }\n      clearTimeout(this._closeTimer);\n\n      const closeDelay = Number(this.closeDelay);\n\n      if (closeDelay > 0) {\n        this._closeTimer = setTimeout(() => {\n          this._closeTimer = null;\n          this.doClose();\n        }, closeDelay);\n      } else {\n        this.doClose();\n      }\n    },\n\n    doClose() {\n      this._closing = true;\n\n      this.onClose && this.onClose();\n\n      if (this.lockScroll) {\n        setTimeout(this.restoreBodyStyle, 200);\n      }\n\n      this.opened = false;\n\n      this.doAfterClose();\n    },\n\n    doAfterClose() {\n      PopupManager.closeModal(this._popupId);\n      this._closing = false;\n    },\n\n    restoreBodyStyle() {\n      if (this.modal && this.withoutHiddenClass) {\n        document.body.style.paddingRight = this.bodyPaddingRight;\n        removeClass(document.body, 'el-popup-parent--hidden');\n      }\n      this.withoutHiddenClass = true;\n    }\n  }\n};\n\nexport {\n  PopupManager\n};\n"
  },
  {
    "path": "src/utils/popup/popup-manager.js",
    "content": "import Vue from 'vue';\nimport { addClass, removeClass } from 'element-ui/src/utils/dom';\n\nlet hasModal = false;\nlet hasInitZIndex = false;\nlet zIndex;\n\nconst getModal = function() {\n  if (Vue.prototype.$isServer) return;\n  let modalDom = PopupManager.modalDom;\n  if (modalDom) {\n    hasModal = true;\n  } else {\n    hasModal = false;\n    modalDom = document.createElement('div');\n    PopupManager.modalDom = modalDom;\n\n    modalDom.addEventListener('touchmove', function(event) {\n      event.preventDefault();\n      event.stopPropagation();\n    });\n\n    modalDom.addEventListener('click', function() {\n      PopupManager.doOnModalClick && PopupManager.doOnModalClick();\n    });\n  }\n\n  return modalDom;\n};\n\nconst instances = {};\n\nconst PopupManager = {\n  modalFade: true,\n\n  getInstance: function(id) {\n    return instances[id];\n  },\n\n  register: function(id, instance) {\n    if (id && instance) {\n      instances[id] = instance;\n    }\n  },\n\n  deregister: function(id) {\n    if (id) {\n      instances[id] = null;\n      delete instances[id];\n    }\n  },\n\n  nextZIndex: function() {\n    return PopupManager.zIndex++;\n  },\n\n  modalStack: [],\n\n  doOnModalClick: function() {\n    const topItem = PopupManager.modalStack[PopupManager.modalStack.length - 1];\n    if (!topItem) return;\n\n    const instance = PopupManager.getInstance(topItem.id);\n    if (instance && instance.closeOnClickModal) {\n      instance.close();\n    }\n  },\n\n  openModal: function(id, zIndex, dom, modalClass, modalFade) {\n    if (Vue.prototype.$isServer) return;\n    if (!id || zIndex === undefined) return;\n    this.modalFade = modalFade;\n\n    const modalStack = this.modalStack;\n\n    for (let i = 0, j = modalStack.length; i < j; i++) {\n      const item = modalStack[i];\n      if (item.id === id) {\n        return;\n      }\n    }\n\n    const modalDom = getModal();\n\n    addClass(modalDom, 'v-modal');\n    if (this.modalFade && !hasModal) {\n      addClass(modalDom, 'v-modal-enter');\n    }\n    if (modalClass) {\n      let classArr = modalClass.trim().split(/\\s+/);\n      classArr.forEach(item => addClass(modalDom, item));\n    }\n    setTimeout(() => {\n      removeClass(modalDom, 'v-modal-enter');\n    }, 200);\n\n    if (dom && dom.parentNode && dom.parentNode.nodeType !== 11) {\n      dom.parentNode.appendChild(modalDom);\n    } else {\n      document.body.appendChild(modalDom);\n    }\n\n    if (zIndex) {\n      modalDom.style.zIndex = zIndex;\n    }\n    modalDom.tabIndex = 0;\n    modalDom.style.display = '';\n\n    this.modalStack.push({ id: id, zIndex: zIndex, modalClass: modalClass });\n  },\n\n  closeModal: function(id) {\n    const modalStack = this.modalStack;\n    const modalDom = getModal();\n\n    if (modalStack.length > 0) {\n      const topItem = modalStack[modalStack.length - 1];\n      if (topItem.id === id) {\n        if (topItem.modalClass) {\n          let classArr = topItem.modalClass.trim().split(/\\s+/);\n          classArr.forEach(item => removeClass(modalDom, item));\n        }\n\n        modalStack.pop();\n        if (modalStack.length > 0) {\n          modalDom.style.zIndex = modalStack[modalStack.length - 1].zIndex;\n        }\n      } else {\n        for (let i = modalStack.length - 1; i >= 0; i--) {\n          if (modalStack[i].id === id) {\n            modalStack.splice(i, 1);\n            break;\n          }\n        }\n      }\n    }\n\n    if (modalStack.length === 0) {\n      if (this.modalFade) {\n        addClass(modalDom, 'v-modal-leave');\n      }\n      setTimeout(() => {\n        if (modalStack.length === 0) {\n          if (modalDom.parentNode) modalDom.parentNode.removeChild(modalDom);\n          modalDom.style.display = 'none';\n          PopupManager.modalDom = undefined;\n        }\n        removeClass(modalDom, 'v-modal-leave');\n      }, 200);\n    }\n  }\n};\n\nObject.defineProperty(PopupManager, 'zIndex', {\n  configurable: true,\n  get() {\n    if (!hasInitZIndex) {\n      zIndex = zIndex || (Vue.prototype.$ELEMENT || {}).zIndex || 2000;\n      hasInitZIndex = true;\n    }\n    return zIndex;\n  },\n  set(value) {\n    zIndex = value;\n  }\n});\n\nconst getTopPopup = function() {\n  if (Vue.prototype.$isServer) return;\n  if (PopupManager.modalStack.length > 0) {\n    const topPopup = PopupManager.modalStack[PopupManager.modalStack.length - 1];\n    if (!topPopup) return;\n    const instance = PopupManager.getInstance(topPopup.id);\n\n    return instance;\n  }\n};\n\nif (!Vue.prototype.$isServer) {\n  // handle `esc` key when the popup is shown\n  window.addEventListener('keydown', function(event) {\n    if (event.keyCode === 27) {\n      const topPopup = getTopPopup();\n\n      if (topPopup && topPopup.closeOnPressEscape) {\n        topPopup.handleClose\n          ? topPopup.handleClose()\n          : (topPopup.handleAction ? topPopup.handleAction('cancel') : topPopup.close());\n      }\n    }\n  });\n}\n\nexport default PopupManager;\n"
  },
  {
    "path": "src/utils/resize-event.js",
    "content": "import ResizeObserver from 'resize-observer-polyfill';\nimport { debounce } from 'throttle-debounce';\n\nconst isServer = typeof window === 'undefined';\n\n/* istanbul ignore next */\nconst resizeHandler = function(entries) {\n  for (let entry of entries) {\n    const listeners = entry.target.__resizeListeners__ || [];\n    if (listeners.length) {\n      listeners.forEach(fn => {\n        fn();\n      });\n    }\n  }\n};\n\n/* istanbul ignore next */\nexport const addResizeListener = function(element, fn) {\n  if (isServer) return;\n  if (!element.__resizeListeners__) {\n    element.__resizeListeners__ = [];\n    element.__ro__ = new ResizeObserver(debounce(16, resizeHandler));\n    element.__ro__.observe(element);\n  }\n  element.__resizeListeners__.push(fn);\n};\n\n/* istanbul ignore next */\nexport const removeResizeListener = function(element, fn) {\n  if (!element || !element.__resizeListeners__) return;\n  element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);\n  if (!element.__resizeListeners__.length) {\n    element.__ro__.disconnect();\n  }\n};\n"
  },
  {
    "path": "src/utils/scroll-into-view.js",
    "content": "import Vue from 'vue';\n\nexport default function scrollIntoView(container, selected) {\n  if (Vue.prototype.$isServer) return;\n\n  if (!selected) {\n    container.scrollTop = 0;\n    return;\n  }\n\n  const offsetParents = [];\n  let pointer = selected.offsetParent;\n  while (pointer && container !== pointer && container.contains(pointer)) {\n    offsetParents.push(pointer);\n    pointer = pointer.offsetParent;\n  }\n  const top = selected.offsetTop + offsetParents.reduce((prev, curr) => (prev + curr.offsetTop), 0);\n  const bottom = top + selected.offsetHeight;\n  const viewRectTop = container.scrollTop;\n  const viewRectBottom = viewRectTop + container.clientHeight;\n\n  if (top < viewRectTop) {\n    container.scrollTop = top;\n  } else if (bottom > viewRectBottom) {\n    container.scrollTop = bottom - container.clientHeight;\n  }\n}\n"
  },
  {
    "path": "src/utils/scrollbar-width.js",
    "content": "import Vue from 'vue';\n\nlet scrollBarWidth;\n\nexport default function() {\n  if (Vue.prototype.$isServer) return 0;\n  if (scrollBarWidth !== undefined) return scrollBarWidth;\n\n  const outer = document.createElement('div');\n  outer.className = 'el-scrollbar__wrap';\n  outer.style.visibility = 'hidden';\n  outer.style.width = '100px';\n  outer.style.position = 'absolute';\n  outer.style.top = '-9999px';\n  document.body.appendChild(outer);\n\n  const widthNoScroll = outer.offsetWidth;\n  outer.style.overflow = 'scroll';\n\n  const inner = document.createElement('div');\n  inner.style.width = '100%';\n  outer.appendChild(inner);\n\n  const widthWithScroll = inner.offsetWidth;\n  outer.parentNode.removeChild(outer);\n  scrollBarWidth = widthNoScroll - widthWithScroll;\n\n  return scrollBarWidth;\n};\n"
  },
  {
    "path": "src/utils/shared.js",
    "content": "export function isDef(val) {\n  return val !== undefined && val !== null;\n}\nexport function isKorean(text) {\n  const reg = /([(\\uAC00-\\uD7AF)|(\\u3130-\\u318F)])+/gi;\n  return reg.test(text);\n}\n"
  },
  {
    "path": "src/utils/types.js",
    "content": "import Vue from 'vue';\n\nexport function isString(obj) {\n  return Object.prototype.toString.call(obj) === '[object String]';\n}\n\nexport function isObject(obj) {\n  return Object.prototype.toString.call(obj) === '[object Object]';\n}\n\nexport function isHtmlElement(node) {\n  return node && node.nodeType === Node.ELEMENT_NODE;\n}\n\n/**\n *  - Inspired:\n *    https://github.com/jashkenas/underscore/blob/master/modules/isFunction.js\n */\nlet isFunction = (functionToCheck) => {\n  var getType = {};\n  return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';\n};\n\nif (typeof /./ !== 'function' && typeof Int8Array !== 'object' && (Vue.prototype.$isServer || typeof document.childNodes !== 'function')) {\n  isFunction = function(obj) {\n    return typeof obj === 'function' || false;\n  };\n}\n\nexport {\n  isFunction\n};\n\nexport const isUndefined = (val)=> {\n  return val === void 0;\n};\n\nexport const isDefined = (val) => {\n  return val !== undefined && val !== null;\n};\n"
  },
  {
    "path": "src/utils/util.js",
    "content": "import Vue from 'vue';\nimport { isString, isObject } from 'element-ui/src/utils/types';\n\nconst hasOwnProperty = Object.prototype.hasOwnProperty;\n\nexport function noop() {};\n\nexport function hasOwn(obj, key) {\n  return hasOwnProperty.call(obj, key);\n};\n\nfunction extend(to, _from) {\n  for (let key in _from) {\n    to[key] = _from[key];\n  }\n  return to;\n};\n\nexport function toObject(arr) {\n  var res = {};\n  for (let i = 0; i < arr.length; i++) {\n    if (arr[i]) {\n      extend(res, arr[i]);\n    }\n  }\n  return res;\n};\n\nexport const getValueByPath = function(object, prop) {\n  prop = prop || '';\n  const paths = prop.split('.');\n  let current = object;\n  let result = null;\n  for (let i = 0, j = paths.length; i < j; i++) {\n    const path = paths[i];\n    if (!current) break;\n\n    if (i === j - 1) {\n      result = current[path];\n      break;\n    }\n    current = current[path];\n  }\n  return result;\n};\n\nexport function getPropByPath(obj, path, strict) {\n  let tempObj = obj;\n  path = path.replace(/\\[(\\w+)\\]/g, '.$1');\n  path = path.replace(/^\\./, '');\n\n  let keyArr = path.split('.');\n  let i = 0;\n  for (let len = keyArr.length; i < len - 1; ++i) {\n    if (!tempObj && !strict) break;\n    let key = keyArr[i];\n    if (key in tempObj) {\n      tempObj = tempObj[key];\n    } else {\n      if (strict) {\n        throw new Error('please transfer a valid prop path to form item!');\n      }\n      break;\n    }\n  }\n  return {\n    o: tempObj,\n    k: keyArr[i],\n    v: tempObj ? tempObj[keyArr[i]] : null\n  };\n};\n\nexport const generateId = function() {\n  return Math.floor(Math.random() * 10000);\n};\n\nexport const valueEquals = (a, b) => {\n  // see: https://stackoverflow.com/questions/3115982/how-to-check-if-two-arrays-are-equal-with-javascript\n  if (a === b) return true;\n  if (!(a instanceof Array)) return false;\n  if (!(b instanceof Array)) return false;\n  if (a.length !== b.length) return false;\n  for (let i = 0; i !== a.length; ++i) {\n    if (a[i] !== b[i]) return false;\n  }\n  return true;\n};\n\nexport const escapeRegexpString = (value = '') => String(value).replace(/[|\\\\{}()[\\]^$+*?.]/g, '\\\\$&');\n\n// TODO: use native Array.find, Array.findIndex when IE support is dropped\nexport const arrayFindIndex = function(arr, pred) {\n  for (let i = 0; i !== arr.length; ++i) {\n    if (pred(arr[i])) {\n      return i;\n    }\n  }\n  return -1;\n};\n\nexport const arrayFind = function(arr, pred) {\n  const idx = arrayFindIndex(arr, pred);\n  return idx !== -1 ? arr[idx] : undefined;\n};\n\n// coerce truthy value to array\nexport const coerceTruthyValueToArray = function(val) {\n  if (Array.isArray(val)) {\n    return val;\n  } else if (val) {\n    return [val];\n  } else {\n    return [];\n  }\n};\n\nexport const isIE = function() {\n  return !Vue.prototype.$isServer && !isNaN(Number(document.documentMode));\n};\n\nexport const isEdge = function() {\n  return !Vue.prototype.$isServer && navigator.userAgent.indexOf('Edge') > -1;\n};\n\nexport const isFirefox = function() {\n  return !Vue.prototype.$isServer && !!window.navigator.userAgent.match(/firefox/i);\n};\n\nexport const autoprefixer = function(style) {\n  if (typeof style !== 'object') return style;\n  const rules = ['transform', 'transition', 'animation'];\n  const prefixes = ['ms-', 'webkit-'];\n  rules.forEach(rule => {\n    const value = style[rule];\n    if (rule && value) {\n      prefixes.forEach(prefix => {\n        style[prefix + rule] = value;\n      });\n    }\n  });\n  return style;\n};\n\nexport const kebabCase = function(str) {\n  const hyphenateRE = /([^-])([A-Z])/g;\n  return str\n    .replace(hyphenateRE, '$1-$2')\n    .replace(hyphenateRE, '$1-$2')\n    .toLowerCase();\n};\n\nexport const capitalize = function(str) {\n  if (!isString(str)) return str;\n  return str.charAt(0).toUpperCase() + str.slice(1);\n};\n\nexport const looseEqual = function(a, b) {\n  const isObjectA = isObject(a);\n  const isObjectB = isObject(b);\n  if (isObjectA && isObjectB) {\n    return JSON.stringify(a) === JSON.stringify(b);\n  } else if (!isObjectA && !isObjectB) {\n    return String(a) === String(b);\n  } else {\n    return false;\n  }\n};\n\nexport const arrayEquals = function(arrayA, arrayB) {\n  arrayA = arrayA || [];\n  arrayB = arrayB || [];\n\n  if (arrayA.length !== arrayB.length) {\n    return false;\n  }\n\n  for (let i = 0; i < arrayA.length; i++) {\n    if (!looseEqual(arrayA[i], arrayB[i])) {\n      return false;\n    }\n  }\n\n  return true;\n};\n\nexport const isEqual = function(value1, value2) {\n  if (Array.isArray(value1) && Array.isArray(value2)) {\n    return arrayEquals(value1, value2);\n  }\n  return looseEqual(value1, value2);\n};\n\nexport const isEmpty = function(val) {\n  // null or undefined\n  if (val == null) return true;\n\n  if (typeof val === 'boolean') return false;\n\n  if (typeof val === 'number') return !val;\n\n  if (val instanceof Error) return val.message === '';\n\n  switch (Object.prototype.toString.call(val)) {\n    // String or Array\n    case '[object String]':\n    case '[object Array]':\n      return !val.length;\n\n    // Map or Set or File\n    case '[object File]':\n    case '[object Map]':\n    case '[object Set]': {\n      return !val.size;\n    }\n    // Plain Object\n    case '[object Object]': {\n      return !Object.keys(val).length;\n    }\n  }\n\n  return false;\n};\n\nexport function rafThrottle(fn) {\n  let locked = false;\n  return function(...args) {\n    if (locked) return;\n    locked = true;\n    window.requestAnimationFrame(_ => {\n      fn.apply(this, args);\n      locked = false;\n    });\n  };\n}\n\nexport function objToArray(obj) {\n  if (Array.isArray(obj)) {\n    return obj;\n  }\n  return isEmpty(obj) ? [] : [obj];\n}\n\nexport const isMac = function() {\n  return !Vue.prototype.$isServer && /macintosh|mac os x/i.test(navigator.userAgent);\n};\n"
  },
  {
    "path": "src/utils/vdom.js",
    "content": "import { hasOwn } from 'element-ui/src/utils/util';\n\nexport function isVNode(node) {\n  return node !== null && typeof node === 'object' && hasOwn(node, 'componentOptions');\n};\n"
  },
  {
    "path": "src/utils/vue-popper.js",
    "content": "import Vue from 'vue';\nimport {\n  PopupManager\n} from 'element-ui/src/utils/popup';\n\nconst PopperJS = Vue.prototype.$isServer ? function() {} : require('./popper');\nconst stop = e => e.stopPropagation();\n\n/**\n * @param {HTMLElement} [reference=$refs.reference] - The reference element used to position the popper.\n * @param {HTMLElement} [popper=$refs.popper] - The HTML element used as popper, or a configuration used to generate the popper.\n * @param {String} [placement=button] - Placement of the popper accepted values: top(-start, -end), right(-start, -end), bottom(-start, -end), left(-start, -end)\n * @param {Number} [offset=0] - Amount of pixels the popper will be shifted (can be negative).\n * @param {Boolean} [visible=false] Visibility of the popup element.\n * @param {Boolean} [visible-arrow=false] Visibility of the arrow, no style.\n */\nexport default {\n  props: {\n    transformOrigin: {\n      type: [Boolean, String],\n      default: true\n    },\n    placement: {\n      type: String,\n      default: 'bottom'\n    },\n    boundariesPadding: {\n      type: Number,\n      default: 5\n    },\n    reference: {},\n    popper: {},\n    offset: {\n      default: 0\n    },\n    value: Boolean,\n    visibleArrow: Boolean,\n    arrowOffset: {\n      type: Number,\n      default: 35\n    },\n    appendToBody: {\n      type: Boolean,\n      default: true\n    },\n    popperOptions: {\n      type: Object,\n      default() {\n        return {\n          gpuAcceleration: false\n        };\n      }\n    }\n  },\n\n  data() {\n    return {\n      showPopper: false,\n      currentPlacement: ''\n    };\n  },\n\n  watch: {\n    value: {\n      immediate: true,\n      handler(val) {\n        this.showPopper = val;\n        this.$emit('input', val);\n      }\n    },\n\n    showPopper(val) {\n      if (this.disabled) return;\n      val ? this.updatePopper() : this.destroyPopper();\n      this.$emit('input', val);\n    }\n  },\n\n  methods: {\n    createPopper() {\n      if (this.$isServer) return;\n      this.currentPlacement = this.currentPlacement || this.placement;\n      if (!/^(top|bottom|left|right)(-start|-end)?$/g.test(this.currentPlacement)) {\n        return;\n      }\n\n      const options = this.popperOptions;\n      const popper = this.popperElm = this.popperElm || this.popper || this.$refs.popper;\n      let reference = this.referenceElm = this.referenceElm || this.reference || this.$refs.reference;\n\n      if (!reference &&\n        this.$slots.reference &&\n        this.$slots.reference[0]) {\n        reference = this.referenceElm = this.$slots.reference[0].elm;\n      }\n\n      if (!popper || !reference) return;\n      if (this.visibleArrow) this.appendArrow(popper);\n      if (this.appendToBody) document.body.appendChild(this.popperElm);\n      if (this.popperJS && this.popperJS.destroy) {\n        this.popperJS.destroy();\n      }\n\n      options.placement = this.currentPlacement;\n      options.offset = this.offset;\n      options.arrowOffset = this.arrowOffset;\n      this.popperJS = new PopperJS(reference, popper, options);\n      this.popperJS.onCreate(_ => {\n        this.$emit('created', this);\n        this.resetTransformOrigin();\n        this.$nextTick(this.updatePopper);\n      });\n      if (typeof options.onUpdate === 'function') {\n        this.popperJS.onUpdate(options.onUpdate);\n      }\n      this.popperJS._popper.style.zIndex = PopupManager.nextZIndex();\n      this.popperElm.addEventListener('click', stop);\n    },\n\n    updatePopper() {\n      const popperJS = this.popperJS;\n      if (popperJS) {\n        popperJS.update();\n        if (popperJS._popper) {\n          popperJS._popper.style.zIndex = PopupManager.nextZIndex();\n        }\n      } else {\n        this.createPopper();\n      }\n    },\n\n    doDestroy(forceDestroy) {\n      /* istanbul ignore if */\n      if (!this.popperJS || (this.showPopper && !forceDestroy)) return;\n      this.popperJS.destroy();\n      this.popperJS = null;\n    },\n\n    destroyPopper() {\n      if (this.popperJS) {\n        this.resetTransformOrigin();\n      }\n    },\n\n    resetTransformOrigin() {\n      if (!this.transformOrigin) return;\n      let placementMap = {\n        top: 'bottom',\n        bottom: 'top',\n        left: 'right',\n        right: 'left'\n      };\n      let placement = this.popperJS._popper.getAttribute('x-placement').split('-')[0];\n      let origin = placementMap[placement];\n      this.popperJS._popper.style.transformOrigin = typeof this.transformOrigin === 'string'\n        ? this.transformOrigin\n        : ['top', 'bottom'].indexOf(placement) > -1 ? `center ${ origin }` : `${ origin } center`;\n    },\n\n    appendArrow(element) {\n      let hash;\n      if (this.appended) {\n        return;\n      }\n\n      this.appended = true;\n\n      for (let item in element.attributes) {\n        if (/^_v-/.test(element.attributes[item].name)) {\n          hash = element.attributes[item].name;\n          break;\n        }\n      }\n\n      const arrow = document.createElement('div');\n\n      if (hash) {\n        arrow.setAttribute(hash, '');\n      }\n      arrow.setAttribute('x-arrow', '');\n      arrow.className = 'popper__arrow';\n      element.appendChild(arrow);\n    }\n  },\n\n  beforeDestroy() {\n    this.doDestroy(true);\n    if (this.popperElm && this.popperElm.parentNode === document.body) {\n      this.popperElm.removeEventListener('click', stop);\n      document.body.removeChild(this.popperElm);\n    }\n  },\n\n  // call destroy in keep-alive mode\n  deactivated() {\n    this.$options.beforeDestroy[0].call(this);\n  }\n};\n"
  },
  {
    "path": "test/.eslintrc",
    "content": "{\n  \"env\": {\n    \"mocha\": true,\n    \"es6\": true\n  },\n  \"globals\": {\n    \"expect\": true,\n    \"sinon\": true\n  },\n  \"parserOptions\": {\n    \"ecmaVersion\": 2017\n  }\n}\n"
  },
  {
    "path": "test/ssr/require.test.js",
    "content": "const path = require('path');\n\ntry {\n  process.env.VUE_ENV = 'server';\n  require(path.join(process.env.PWD, './lib/index'));\n  console.log('SSR require test PASS');\n} catch (e) {\n  console.error('SSR require test error');\n  throw Error(e);\n}\n"
  },
  {
    "path": "test/unit/index.js",
    "content": "require('babel-regenerator-runtime'); // add regenerator support for async await\nrequire('packages/theme-chalk/lib/index.css');\n\n// require all test files (files that ends with .spec.js)\nconst testsContext = require.context('./specs', true, /\\.spec$/);\ntestsContext.keys().forEach(testsContext);\n\n// require all src files except main.js for coverage.\n// you can also change this to match only the subset of files that\n// you want coverage for.\nconst srcContext = require.context('../../src', true, /^\\.\\/(?!main(\\.js)?$)/);\nsrcContext.keys().forEach(srcContext);\n"
  },
  {
    "path": "test/unit/karma.conf.js",
    "content": "const webpackConfig = require('../../build/webpack.test');\n\nmodule.exports = function(config) {\n  const configuration = {\n    browsers: ['ChromeHeadless'],\n    frameworks: ['mocha', 'sinon-chai'],\n    reporters: ['spec', 'coverage'],\n    files: ['./index.js'],\n    preprocessors: {\n      './index.js': ['webpack', 'sourcemap']\n    },\n    webpack: webpackConfig,\n    webpackMiddleware: {\n      noInfo: true\n    },\n    coverageReporter: {\n      dir: './coverage',\n      reporters: [\n        { type: 'lcov', subdir: '.' },\n        { type: 'text-summary' }\n      ]\n    },\n    client: {\n      mocha: {\n        timeout: 4000\n      }\n    }\n  };\n\n  config.set(configuration);\n};\n"
  },
  {
    "path": "test/unit/mocks/uri.js",
    "content": "export const IMAGE_SUCCESS = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAFmklEQVR4Xu2ba2wUVRTH/2cWtlaooFQwKpr4CkESTQBNUAkodGeaKFGD2u6WGPyAmmAEEZmpj1VhBghE/KKGBIztDIXAByWBnQ1oQREfARNiDDHiF1+ooBiksVt295hFiqSdxx3KdmcH5uv+z+3//O65c19TwgX+0AWePy4CuFgBISCQ3J6+DFLuVQKmg2k4gK3xuvwr6+9e+Xe57YViCCRttY1ALX2S/asIPLRB1jvLCSEUAFK2egKgYf0T5a6TxdhtmxqXfl8uCBUHMHfP4rqeE0OOeyS4w5T1hsgCmLNTvaWYp299EpxoyvpX5YBQ8QpotlvvkMBfeCbHvMpUjOejCSCjPSYROrySY/B+SzYmRRJA0tZWEfCcJwBGz81yvDZN6eL5hlDxIZCyta8BTPBLjIv5sVbjyp/8dEF/ryiAlL3kJkD6TsQ0STS5vWHZPhFtEE1FAYiUf28yBaZ7OpRle4IkJ6KtGIDZexfU1hyv/QXASBGjBeYpHYrxmYg2iKZiAFIZdSGIVouaLVJx0obE8v2ielFdRQA83pkemc/lDgE0StRopF6CSVuzCGgWTb6ku7T+aHztpLUng8SIaAe9ApJ265MEflvE3P8a/t2UjTHBYsTUgwqgKauOk4p0gAhxMXunVcwfmYpxX6AYQfGgAWjqTNdL3bndRDRe0NsZGYPXWLKxIGiciH5QAJye8r4UWfE5mWbCE1ZCXy+SUFBN2QEo2+fXjKK6zSDcH9Rcr55i0vj2mUsPnmu8V1xZAZxKXhq+G6A7z9U8Mx+zFOOKc433iysbgNKYj3XnNoHoXj8T3r/z+6ZsPDiwNtyjHQE07dTGSAU8QkX4LlSY6Ndh9UfWnT1Ht2QXjeZifC8INw7UOAMfE2MgB6NdhaFo65ih/+bkxRFAMqPuIaK7xM3zu6ZszO3Vt2S1CcwobXPD8TAfoZjU6LSb7AdgWmd6yLW5nqArrm5T1mtDC+A/Y3tNWe/XqY4VkLK1fwBcItp9DGZLNqQwA2DmgiUbQ0Hgs/NyBpBRD4PoqigBKOWSGxuv2XxruscXQNJWDxJoXJQAMPCnJev9XuouQ0D9PMjcXQ1DAIx9pqJP7tupLrOAZhMhEaUKAGOjqehNYgBsdSOBHo0UAOBlU9ZfFwOQUd8honmRAsA8y1SMrWIAbHUFgRZHCUCe6LqNiWU/igHIaCoR9KgAYMZRS9GvFF4Kp7LqU2B6KzoAeKulGLOEASRtrZkAK0IAVEsxlgsDaM6ojRLRtqgAIImntTcYu4UBpLKtU8D8aRQAMJD/uSZeu2t6Oi8MILldHU8SfRMFAG67wN7cHFeCcz5svaZ4koWvosO9FGbdlI1Wt850BNCSXTSMOX4iEhVAaDAT+o5AAEriVEYrgHBmj+8FI7QVwJzLjei+fPOUN0rnG46P66FoMqMdIUK9SBWEGIDvjZIrgFRGOyR6qBlWAMzQLEU3vDrRvQJsdR+BJlZzBYh8VuM1BHYSQehCMpwVwF1mwqjrewYotBk69RK0tS0AHq7eChC7UPEYAto6As6c9VfdLED8tJkwfL9DcH8J2upqgBZWbwXgalPWD/v59wCgvQTgNb8GSr+H7x3AB0zZuF3EuyuA5oz6jET0pkgjYQPAzEstxSh1oO/jVQFzALzn20IIK0CKFa5vm7niBxHvHgsh9QEQfSDSSP8KWDSaOe54GyvS3sA0vMuUjemibbgPgWzrVInZ8RChb+N9AQSdRkXNiul4qikbn4hp4f5/g7N3vDAiXpCOEcj/IwpG0VT02Nl/9NSOshjvGMinMaJJ9OqYeYulGLODxHkml7TVZ8GYT0Q3uDfKXQxaY8n6i06aZnvJDGKaB8JMAo0IYk5UW7r5BbAtNhRz22YYf4jGlXT+vRuktSrUXgRQhZ12Xi1f8BXwL38cy1+mrtJNAAAAAElFTkSuQmCC';\n\nexport const IMAGE_FAIL = 'data:image/png;base64,fail';\n"
  },
  {
    "path": "test/unit/specs/alert.spec.js",
    "content": "import { createTest, createVue, destroyVM } from '../util';\nimport Alert from 'packages/alert';\n\ndescribe('Alert', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', () => {\n    vm = createTest(Alert, {\n      title: 'test',\n      showIcon: true\n    }, true);\n    expect(vm.$el.querySelector('.el-alert__title').textContent).to.equal('test');\n    expect(vm.$el.classList.contains('el-alert--info')).to.true;\n  });\n\n  it('type', () => {\n    vm = createTest(Alert, {\n      title: 'test',\n      type: 'success',\n      showIcon: true\n    }, true);\n    expect(vm.$el.classList.contains('el-alert--success')).to.true;\n  });\n\n  it('description', () => {\n    vm = createTest(Alert, {\n      title: 'Dorne',\n      description: 'Unbowed, Unbent, Unbroken',\n      showIcon: true\n    }, true);\n    expect(vm.$el.querySelector('.el-alert__description').textContent)\n      .to.equal('Unbowed, Unbent, Unbroken');\n  });\n\n  it('theme', () => {\n    vm = createTest(Alert, {\n      title: 'test',\n      effect: 'dark'\n    }, true);\n    expect(vm.$el.classList.contains('is-dark')).to.true;\n  });\n\n  it('title slot', () => {\n    vm = createVue(`\n      <el-alert>\n        <span slot=\"title\">foo</span>\n      </el-alert>\n    `);\n\n    expect(vm.$el.querySelector('.el-alert__title').textContent).to.equal('foo');\n  });\n\n  it('close', () => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-alert\n            title=\"test\"\n            close-text=\"close\"></el-alert>\n        </div>\n      `\n    }, true);\n    vm.$el.querySelector('.el-alert__closebtn').click();\n    expect(vm.$children[0].visible).to.false;\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/autocomplete.spec.js",
    "content": "import { createVue, triggerClick, destroyVM, triggerKeyDown } from '../util';\n\ndescribe('Autocomplete', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n  it('create', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <button class=\"btn\">a</button>\n          <el-autocomplete\n            ref=\"autocomplete\"\n            v-model=\"state\"\n            :fetch-suggestions=\"querySearch\"\n            placeholder=\"请输入内容autocomplete1\"\n          ></el-autocomplete>\n        </div>\n      `,\n      data() {\n        return {\n          restaurants: [],\n          state: ''\n        };\n      },\n      methods: {\n        querySearch(queryString, cb) {\n          var restaurants = this.restaurants;\n          var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;\n          cb(results);\n        },\n        createFilter(queryString) {\n          return (restaurant) => {\n            return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);\n          };\n        },\n        loadAll() {\n          return [\n            { 'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' },\n            { 'value': 'Hot honey 首尔炸鸡（仙霞路）', 'address': '上海市长宁区淞虹路661号' },\n            { 'value': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' },\n            { 'value': '泷千家(天山西路店)', 'address': '天山西路438号' }\n          ];\n        }\n      },\n      mounted() {\n        this.restaurants = this.loadAll();\n      }\n    }, true);\n    let elm = vm.$el;\n    let inputElm = elm.querySelector('input');\n    inputElm.focus();\n\n    expect(inputElm.getAttribute('placeholder')).to.be.equal('请输入内容autocomplete1');\n\n    setTimeout(_ => {\n      const suggestions = vm.$refs.autocomplete.$refs.suggestions.$el;\n      expect(suggestions.style.display).to.not.equal('none');\n      expect(suggestions.querySelectorAll('.el-autocomplete-suggestion__list li').length).to.be.equal(4);\n\n      triggerClick(document);\n      setTimeout(_ => {\n        expect(suggestions.style.display).to.be.equal('none');\n        done();\n      }, 500);\n    }, 500);\n  });\n  it('select', done => {\n    vm = createVue({\n      template: `\n        <el-autocomplete\n          v-model=\"state\"\n          ref=\"autocomplete\"\n          :fetch-suggestions=\"querySearch\"\n          placeholder=\"请输入内容autocomplete2\"\n        ></el-autocomplete>\n      `,\n      data() {\n        return {\n          restaurants: [],\n          state: ''\n        };\n      },\n      methods: {\n        querySearch(queryString, cb) {\n          var restaurants = this.restaurants;\n          var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;\n          cb(results);\n        },\n        createFilter(queryString) {\n          return (restaurant) => {\n            return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);\n          };\n        },\n        loadAll() {\n          return [\n            { 'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' },\n            { 'value': 'Hot honey 首尔炸鸡（仙霞路）', 'address': '上海市长宁区淞虹路661号' },\n            { 'value': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' },\n            { 'value': '泷千家(天山西路店)', 'address': '天山西路438号' }\n          ];\n        }\n      },\n      mounted() {\n        this.restaurants = this.loadAll();\n      }\n    }, true);\n    const autocomplete = vm.$refs.autocomplete;\n    const elm = vm.$el;\n    const inputElm = elm.querySelector('input');\n    const spy = sinon.spy();\n\n    autocomplete.$on('select', spy);\n    inputElm.focus();\n\n    setTimeout(_ => {\n      const suggestions = autocomplete.$refs.suggestions.$el;\n      const suggestionList = suggestions.querySelectorAll('.el-autocomplete-suggestion__list li');\n      suggestionList[1].click();\n      setTimeout(_ => {\n        expect(inputElm.value).to.be.equal('Hot honey 首尔炸鸡（仙霞路）');\n        expect(vm.state).to.be.equal('Hot honey 首尔炸鸡（仙霞路）');\n        expect(spy.withArgs().calledOnce).to.be.true;\n        expect(suggestions.style.display).to.be.equal('none');\n        done();\n      }, 500);\n    }, 500);\n  });\n  it('input', done => {\n    vm = createVue({\n      template: `\n        <el-autocomplete\n          ref=\"autocomplete\"\n          v-model=\"state\"\n          :trigger-on-focus=\"false\"\n          :fetch-suggestions=\"querySearch\"\n        ></el-autocomplete>\n      `,\n      data() {\n        return {\n          restaurants: [],\n          state: ''\n        };\n      },\n      methods: {\n        querySearch(queryString, cb) {\n          var restaurants = this.restaurants;\n          var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;\n          cb(results);\n        },\n        createFilter(queryString) {\n          return (restaurant) => {\n            return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);\n          };\n        },\n        loadAll() {\n          return [\n            { 'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' },\n            { 'value': 'Hot honey 首尔炸鸡（仙霞路）', 'address': '上海市长宁区淞虹路661号' },\n            { 'value': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' },\n            { 'value': '泷千家(天山西路店)', 'address': '天山西路438号' }\n          ];\n        }\n      },\n      mounted() {\n        this.restaurants = this.loadAll();\n      }\n    }, true);\n    const autocomplete = vm.$refs.autocomplete;\n    const input = autocomplete.$refs.input;\n    input.$emit('input', '三');\n    setTimeout(() => {\n      expect(vm.state).to.be.equal('三');\n      expect(autocomplete.suggestions[0].value).to.be.equal('三全鲜食（北新泾店）');\n      input.$emit('input', '');\n      setTimeout(() => {\n        expect(vm.state).to.be.equal('');\n        expect(autocomplete.suggestions.length).to.be.equal(0);\n        done();\n      }, 500);\n    }, 500);\n  });\n  describe('enter select', () => {\n    const createVm = (selectWhenUnmatched = false) => {\n      return createVue({\n        template: `\n          <el-autocomplete\n            ref=\"autocomplete\"\n            v-model=\"state\"\n            @select=\"handleSelect\"\n            :trigger-on-focus=\"false\"\n            :select-when-unmatched=\"selectWhenUnmatched\"\n            :fetch-suggestions=\"querySearch\"\n          ></el-autocomplete>\n        `,\n        data() {\n          return {\n            restaurants: [],\n            state: '',\n            selectWhenUnmatched: selectWhenUnmatched,\n            item: {}\n          };\n        },\n        methods: {\n          querySearch(queryString, cb) {\n            var restaurants = this.restaurants;\n            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;\n            cb(results);\n          },\n          createFilter(queryString) {\n            return (restaurant) => {\n              return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);\n            };\n          },\n          loadAll() {\n            return [\n              { 'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' },\n              { 'value': 'Hot honey 首尔炸鸡（仙霞路）', 'address': '上海市长宁区淞虹路661号' },\n              { 'value': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' },\n              { 'value': '泷千家(天山西路店)', 'address': '天山西路438号' }\n            ];\n          },\n          handleSelect(item) {\n            this.item = item;\n          }\n        },\n        mounted() {\n          this.restaurants = this.loadAll();\n        }\n      }, true);\n    };\n    it('select', done => {\n      vm = createVm();\n      const autocomplete = vm.$refs.autocomplete;\n      const input = autocomplete.$refs.input;\n      input.$el.querySelector('input').focus();\n      input.$emit('input', '三');\n      setTimeout(() => {\n        triggerKeyDown(input.$el, 40); // down\n        setTimeout(() => {\n          triggerKeyDown(input.$el, 13); // enter\n          setTimeout(() => {\n            expect(vm.item.address).to.be.equal('长宁区新渔路144号');\n            done();\n          }, 200);\n        }, 200);\n      }, 500);\n    });\n    it('select unmatched', done => {\n      vm = createVm(true);\n      const autocomplete = vm.$refs.autocomplete;\n      const input = autocomplete.$refs.input;\n      input.$emit('input', '关键字');\n      setTimeout(() => {\n        expect(autocomplete.suggestions.length).to.be.equal(0);\n        triggerKeyDown(input.$el, 13); // enter\n        setTimeout(() => {\n          expect(autocomplete.highlightedIndex).to.be.equal(-1);\n          expect(vm.item.value).to.be.equal('关键字');\n          done();\n        }, 500);\n      }, 500);\n    });\n  });\n  it('props', done => {\n    vm = createVue({\n      template: `\n        <el-autocomplete\n          v-model=\"state\"\n          ref=\"autocomplete\"\n          value-key=\"address\"\n          :fetch-suggestions=\"querySearch\"\n          placeholder=\"请输入内容autocomplete2\"\n        ></el-autocomplete>\n      `,\n      data() {\n        return {\n          restaurants: [],\n          state: ''\n        };\n      },\n      methods: {\n        querySearch(queryString, cb) {\n          var restaurants = this.restaurants;\n          var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;\n          cb(results);\n        },\n        createFilter(queryString) {\n          return (restaurant) => {\n            return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);\n          };\n        },\n        loadAll() {\n          return [\n            { 'name': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' },\n            { 'name': 'Hot honey 首尔炸鸡（仙霞路）', 'address': '上海市长宁区淞虹路661号' },\n            { 'name': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' },\n            { 'name': '泷千家(天山西路店)', 'address': '天山西路438号' }\n          ];\n        }\n      },\n      mounted() {\n        this.restaurants = this.loadAll();\n      }\n    }, true);\n    const autocomplete = vm.$refs.autocomplete;\n    const elm = vm.$el;\n    const inputElm = elm.querySelector('input');\n    const spy = sinon.spy();\n\n    autocomplete.$on('select', spy);\n    inputElm.focus();\n\n    setTimeout(_ => {\n      const suggestions = autocomplete.$refs.suggestions.$el;\n      const suggestionList = suggestions.querySelectorAll('.el-autocomplete-suggestion__list li');\n      expect(suggestionList[1].innerHTML === '上海市长宁区淞虹路661号');\n      suggestionList[1].click();\n      setTimeout(_ => {\n        expect(inputElm.value).to.be.equal('上海市长宁区淞虹路661号');\n        expect(vm.state).to.be.equal('上海市长宁区淞虹路661号');\n        expect(spy.withArgs().calledOnce).to.be.true;\n        expect(suggestions.style.display).to.be.equal('none');\n        done();\n      }, 500);\n    }, 500);\n  });\n  it('highlight', done => {\n    vm = createVue({\n      template: `\n        <el-autocomplete\n          ref=\"autocomplete\"\n          v-model=\"state\"\n          :fetch-suggestions=\"querySearch\"\n          placeholder=\"请输入内容autocomplete3\"\n        ></el-autocomplete>\n      `,\n      data() {\n        return {\n          restaurants: [],\n          state: ''\n        };\n      },\n      methods: {\n        querySearch(queryString, cb) {\n          var restaurants = this.restaurants;\n          var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;\n          cb(results);\n        },\n        createFilter(queryString) {\n          return (restaurant) => {\n            return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);\n          };\n        },\n        loadAll() {\n          return [\n            { 'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' },\n            { 'value': 'Hot honey 首尔炸鸡（仙霞路）', 'address': '上海市长宁区淞虹路661号' },\n            { 'value': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' },\n            { 'value': '泷千家(天山西路店)', 'address': '天山西路438号' },\n            { 'value': '胖仙女纸杯蛋糕（上海凌空店）', 'address': '上海市长宁区金钟路968号1幢18号楼一层商铺18-101' },\n            { 'value': '贡茶', 'address': '上海市长宁区金钟路633号' },\n            { 'value': '豪大大香鸡排超级奶爸', 'address': '上海市嘉定区曹安公路曹安路1685号' },\n            { 'value': '茶芝兰（奶茶，手抓饼）', 'address': '上海市普陀区同普路1435号' },\n            { 'value': '十二泷町', 'address': '上海市北翟路1444弄81号B幢-107' },\n            { 'value': '星移浓缩咖啡', 'address': '上海市嘉定区新郁路817号' },\n            { 'value': '阿姨奶茶/豪大大', 'address': '嘉定区曹安路1611号' },\n            { 'value': '新麦甜四季甜品炸鸡', 'address': '嘉定区曹安公路2383弄55号' },\n            { 'value': 'Monica摩托主题咖啡店', 'address': '嘉定区江桥镇曹安公路2409号1F，2383弄62号1F' },\n            { 'value': '浮生若茶（凌空soho店）', 'address': '上海长宁区金钟路968号9号楼地下一层' },\n            { 'value': 'NONO JUICE  鲜榨果汁', 'address': '上海市长宁区天山西路119号' },\n            { 'value': 'CoCo都可(北新泾店）', 'address': '上海市长宁区仙霞西路' },\n            { 'value': '快乐柠檬（神州智慧店）', 'address': '上海市长宁区天山西路567号1层R117号店铺' },\n            { 'value': 'Merci Paul cafe', 'address': '上海市普陀区光复西路丹巴路28弄6号楼819' },\n            { 'value': '猫山王（西郊百联店）', 'address': '上海市长宁区仙霞西路88号第一层G05-F01-1-306' },\n            { 'value': '枪会山', 'address': '上海市普陀区棕榈路' },\n            { 'value': '纵食', 'address': '元丰天山花园(东门) 双流路267号' },\n            { 'value': '钱记', 'address': '上海市长宁区天山西路' }\n          ];\n        }\n      },\n      mounted() {\n        this.restaurants = this.loadAll();\n      }\n    }, true);\n    const autocomplete = vm.$refs.autocomplete;\n    const inputElm = autocomplete.$el.querySelector('input');\n\n    inputElm.focus();\n\n    setTimeout(_ => {\n      autocomplete.highlight(8);\n      vm.$nextTick(_ => {\n        const suggestions = autocomplete.$refs.suggestions.$el.querySelector('.el-autocomplete-suggestion__wrap');\n        let suggestionsList = suggestions.querySelectorAll('.el-autocomplete-suggestion__list li');\n        let highlightedItem = suggestionsList[8];\n        expect(highlightedItem.classList.contains('highlighted')).to.be.true;\n        expect(suggestions.scrollTop === highlightedItem.scrollHeight).to.be.true;\n        done();\n      });\n    }, 500);\n  });\n  it('highlight out of bounds', done => {\n    vm = createVue({\n      template: `\n        <el-autocomplete\n          ref=\"autocomplete\"\n          v-model=\"state\"\n          :fetch-suggestions=\"querySearch\"\n          placeholder=\"请输入内容autocomplete3\"\n        ></el-autocomplete>\n      `,\n      data() {\n        return {\n          restaurants: [],\n          state: ''\n        };\n      },\n      methods: {\n        querySearch(queryString, cb) {\n          var restaurants = this.restaurants;\n          var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;\n          cb(results);\n        },\n        createFilter(queryString) {\n          return (restaurant) => {\n            return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);\n          };\n        },\n        loadAll() {\n          return [\n            { 'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' },\n            { 'value': 'Hot honey 首尔炸鸡（仙霞路）', 'address': '上海市长宁区淞虹路661号' },\n            { 'value': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' },\n            { 'value': '泷千家(天山西路店)', 'address': '天山西路438号' },\n            { 'value': '胖仙女纸杯蛋糕（上海凌空店）', 'address': '上海市长宁区金钟路968号1幢18号楼一层商铺18-101' },\n            { 'value': '贡茶', 'address': '上海市长宁区金钟路633号' },\n            { 'value': '豪大大香鸡排超级奶爸', 'address': '上海市嘉定区曹安公路曹安路1685号' },\n            { 'value': '茶芝兰（奶茶，手抓饼）', 'address': '上海市普陀区同普路1435号' },\n            { 'value': '十二泷町', 'address': '上海市北翟路1444弄81号B幢-107' },\n            { 'value': '星移浓缩咖啡', 'address': '上海市嘉定区新郁路817号' },\n            { 'value': '阿姨奶茶/豪大大', 'address': '嘉定区曹安路1611号' },\n            { 'value': '新麦甜四季甜品炸鸡', 'address': '嘉定区曹安公路2383弄55号' }\n          ];\n        }\n      },\n      mounted() {\n        this.restaurants = this.loadAll();\n      }\n    }, true);\n    const autocomplete = vm.$refs.autocomplete;\n    let inputElm = vm.$el.querySelector('input');\n    inputElm.focus();\n\n    setTimeout(_ => {\n      autocomplete.highlight(15);\n      vm.$nextTick(_ => {\n        const suggestions = autocomplete.$refs.suggestions.$el;\n        const suggestionsList = suggestions.querySelectorAll('.el-autocomplete-suggestion__list li');\n        let highlightedItem = suggestionsList[11];\n        expect(highlightedItem.className).to.be.equal('highlighted');\n        done();\n      });\n    }, 500);\n  });\n  it('triggerOnFocus', done => {\n    vm = createVue({\n      template: `\n        <el-autocomplete\n          ref=\"autocomplete\"\n          v-model=\"state\"\n          :fetch-suggestions=\"querySearch\"\n          :trigger-on-focus=\"false\"\n          placeholder=\"请输入内容autocomplete1\"\n        ></el-autocomplete>\n      `,\n      data() {\n        return {\n          restaurants: [],\n          state: ''\n        };\n      },\n      methods: {\n        querySearch(queryString, cb) {\n          var restaurants = this.restaurants;\n          var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;\n          cb(results);\n        },\n        createFilter(queryString) {\n          return (restaurant) => {\n            return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);\n          };\n        },\n        loadAll() {\n          return [\n            { 'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' },\n            { 'value': 'Hot honey 首尔炸鸡（仙霞路）', 'address': '上海市长宁区淞虹路661号' },\n            { 'value': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' },\n            { 'value': '泷千家(天山西路店)', 'address': '天山西路438号' }\n          ];\n        }\n      },\n      mounted() {\n        this.restaurants = this.loadAll();\n      }\n    }, true);\n    let inputElm = vm.$el.querySelector('input');\n    inputElm.focus();\n\n    setTimeout(_ => {\n      let suggestions = vm.$refs.autocomplete.$refs.suggestions.$el;\n      expect(suggestions.style.display).to.be.equal('none');\n      done();\n    }, 500);\n  });\n  it('event:focus & blur', done => {\n    vm = createVue({\n      template: `\n        <el-autocomplete\n          ref=\"input\"\n          v-model=\"state\"\n          :fetch-suggestions=\"querySearch\"\n          :trigger-on-focus=\"false\"\n          placeholder=\"请输入内容autocomplete1\"\n        ></el-autocomplete>\n      `,\n      data() {\n        return {\n          restaurants: [],\n          state: ''\n        };\n      },\n      methods: {\n        querySearch(queryString, cb) {\n          var restaurants = this.restaurants;\n          var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;\n          cb(results);\n        },\n        createFilter(queryString) {\n          return (restaurant) => {\n            return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);\n          };\n        },\n        loadAll() {\n          return [\n            { 'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' },\n            { 'value': 'Hot honey 首尔炸鸡（仙霞路）', 'address': '上海市长宁区淞虹路661号' },\n            { 'value': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' },\n            { 'value': '泷千家(天山西路店)', 'address': '天山西路438号' }\n          ];\n        }\n      },\n      mounted() {\n        this.restaurants = this.loadAll();\n      }\n    }, true);\n\n    const spyFocus = sinon.spy();\n    const spyBlur = sinon.spy();\n\n    vm.$refs.input.$on('focus', spyFocus);\n    vm.$refs.input.$on('blur', spyBlur);\n    vm.$el.querySelector('input').focus();\n    vm.$el.querySelector('input').blur();\n\n    vm.$nextTick(_ => {\n      expect(spyFocus.calledOnce).to.be.true;\n      expect(spyBlur.calledOnce).to.be.true;\n      done();\n    });\n  });\n  it('can highlight first item', done => {\n    vm = createVue({\n      template: `\n        <el-autocomplete\n          ref=\"autocomplete\"\n          v-model=\"state\"\n          :fetch-suggestions=\"querySearch\"\n          highlight-first-item\n        ></el-autocomplete>\n      `,\n      data() {\n        return {\n          restaurants: [],\n          state: ''\n        };\n      },\n      methods: {\n        querySearch(queryString, cb) {\n          const opts = [\n            { 'value': '1' },\n            { 'value': '11' },\n            { 'value': '2' },\n            { 'value': '22' }\n          ];\n          cb(\n            queryString\n              ? opts.filter(opt => opt.value.indexOf(queryString) >= 0)\n              : opts\n          );\n        }\n      }\n    }, true);\n    let elm = vm.$el;\n    let inputElm = elm.querySelector('input');\n    inputElm.focus();\n\n    const autocomplete = vm.$refs.autocomplete;\n    const input = autocomplete.$refs.input;\n    input.$emit('input', '1');\n\n    setTimeout(_ => {\n      const suggestions = vm.$refs.autocomplete.$refs.suggestions.$el;\n      const items = suggestions.querySelectorAll('.el-autocomplete-suggestion__list li');\n\n      expect(items.length).to.equal(2);\n      expect(items[0].classList.contains('highlighted')).to.be.true;\n\n      done();\n    }, 500);\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/avatar.spec.js",
    "content": "import { createTest, createVue, destroyVM, wait } from '../util';\nimport Avatar from 'packages/avatar';\nimport { IMAGE_SUCCESS, IMAGE_FAIL } from '../mocks/uri';\n\ndescribe('Avatar', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', () => {\n    vm = createTest(Avatar);\n    expect(vm.$el).to.exist;\n  });\n\n  it('size is number', () => {\n    vm = createVue({\n      template: `\n        <el-avatar :size=\"50\">\n        </el-avatar>\n      `\n    }, true);\n    const avatarElm = vm.$el;\n    expect(avatarElm.style.height).to.equal('50px');\n  });\n\n  it('size is string', () => {\n    vm = createVue({\n      template: `\n        <el-avatar size=\"small\">\n          user\n        </el-avatar>\n      `\n    }, true);\n    const avatarElm = vm.$el;\n    expect(avatarElm.classList.contains('el-avatar--small')).to.be.true;\n  });\n\n  it('shape', () => {\n    vm = createVue({\n      template: `\n        <el-avatar size=\"small\" shape=\"square\">\n          user\n        </el-avatar>\n      `\n    }, true);\n    const avatarElm = vm.$el;\n    expect(avatarElm.classList.contains('el-avatar--square')).to.be.true;\n  });\n\n  it('icon avatar', () => {\n    vm = createVue({\n      template: `\n        <el-avatar icon=\"el-icon-user-solid\">\n        </el-avatar>\n      `\n    }, true);\n    const avatarElm = vm.$el;\n    const iconELm = avatarElm.children[0];\n    expect(avatarElm.classList.contains('el-avatar--icon')).to.be.true;\n    expect(iconELm.classList.contains('el-icon-user-solid')).to.be.true;\n  });\n\n  it('image avatar', () => {\n    vm = createVue({\n      template: `\n        <el-avatar src=\"${IMAGE_SUCCESS}\"></el-avatar>\n      `\n    }, true);\n    const imgElm = vm.$el.children[0];\n    expect(imgElm.tagName.toUpperCase()).to.equal('IMG');\n    expect(imgElm.src).to.equal(IMAGE_SUCCESS);\n  });\n\n  it('image fallback', async() => {\n    vm = createVue({\n      template: `\n        <el-avatar src=\"${IMAGE_FAIL}\" @error=\"errorHandler\">\n          fallback\n        </el-avatar>\n      `,\n      methods: {\n        errorHandler() {\n          return true;\n        }\n      }\n    }, true);\n    await wait();\n    const avatarElm = vm.$el;\n    expect(avatarElm.textContent.trim()).to.equal('fallback');\n  });\n\n  it('image fit', async() => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-avatar :src=\"url\"></el-avatar>\n          <el-avatar :src=\"url\" v-for=\"fit in fits\" :fit=\"fit\" :key=\"fit\"></el-avatar>\n        </div>\n        \n      `,\n      data() {\n        return {\n          fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],\n          url: IMAGE_SUCCESS\n        };\n      }\n    }, true);\n    await wait();\n    const containerElm = vm.$el;\n    expect(containerElm.children[0].children[0].style.objectFit).to.equal('cover');\n    expect(containerElm.children[1].children[0].style.objectFit).to.equal('fill');\n    expect(containerElm.children[2].children[0].style.objectFit).to.equal('contain');\n    expect(containerElm.children[3].children[0].style.objectFit).to.equal('cover');\n    expect(containerElm.children[4].children[0].style.objectFit).to.equal('none');\n    expect(containerElm.children[5].children[0].style.objectFit).to.equal('scale-down');\n  });\n});\n\n"
  },
  {
    "path": "test/unit/specs/backtop.spec.js",
    "content": "import { createVue, destroyVM, wait } from '../util';\n\ndescribe('Backtop', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', async() => {\n    vm = createVue({\n      template: `\n        <div ref=\"scrollTarget\" class=\"test-scroll\"  style=\"height: 100px; overflow: auto\">\n          <div style=\"height: 10000px; width: 100%\">\n            <el-backtop target=\".test-scroll\">\n              <span>test_up_text</span>\n            </el-backtop>\n          </div>\n        </div>\n      `\n    }, true);\n    expect(vm.$el).to.exist;\n    expect(vm.$el.innerText).to.be.equal('');\n    vm.$refs.scrollTarget.scrollTop = 2000;\n    await wait();\n    expect(vm.$el.innerText).to.be.equal('test_up_text');\n  });\n});\n\n"
  },
  {
    "path": "test/unit/specs/badge.spec.js",
    "content": "import { createTest, createVue, destroyVM } from '../util';\nimport Badge from 'packages/badge';\n\ndescribe('Badge', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('value', () => {\n    vm = createTest(Badge, { value: 80 });\n    expect(vm.content).to.equal(80);\n  });\n\n  it('is fixed', () => {\n    vm = createVue(`\n      <el-badge>\n        <button>click</button>\n      </el-badge>\n    `);\n\n    expect(vm.$el.querySelector('.el-badge__content.is-fixed')).to.exist;\n  });\n\n  it('is dot', () => {\n    vm = createVue(`\n      <el-badge is-dot>\n        <button>click</button>\n      </el-badge>\n    `);\n\n    expect(vm.$el.querySelector('.el-badge__content.is-dot')).to.exist;\n  });\n\n  it('is dot with type', () => {\n    vm = createVue(`\n      <el-badge is-dot type=\"success\">\n        <button>click</button>\n      </el-badge>\n    `);\n\n    expect(vm.$el.querySelector('.el-badge__content.is-dot')).to.exist;\n    expect(vm.$el.querySelector('.el-badge__content.el-badge__content--success.is-dot')).to.exist;\n  });\n\n  it('max', () => {\n    vm = createTest(Badge, { max: 100, value: 200 });\n    expect(vm.content).to.equal('100+');\n    vm = createTest(Badge, { max: 100, value: 80 });\n    expect(vm.content).to.equal(80);\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/breadcrumb.spec.js",
    "content": "import { createVue, destroyVM } from '../util';\n\ndescribe('Breadcrumb', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', done => {\n    vm = createVue(`\n      <el-breadcrumb separator=\">\">\n        <el-breadcrumb-item to=\"/\">首页</el-breadcrumb-item>\n        <el-breadcrumb-item>活动管理</el-breadcrumb-item>\n        <el-breadcrumb-item>活动列表</el-breadcrumb-item>\n        <el-breadcrumb-item>活动详情</el-breadcrumb-item>\n      </el-breadcrumb>\n    `);\n    vm.$nextTick(_ => {\n      expect(vm.$el.querySelector('.el-breadcrumb__separator').innerText).to.equal('>');\n      done();\n    });\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/button.spec.js",
    "content": "import { createTest, createVue, destroyVM } from '../util';\nimport Button from 'packages/button';\n\ndescribe('Button', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', () => {\n    vm = createTest(Button, {\n      type: 'primary'\n    }, true);\n    let buttonElm = vm.$el;\n    expect(buttonElm.classList.contains('el-button--primary')).to.be.true;\n  });\n  it('icon', () => {\n    vm = createTest(Button, {\n      icon: 'el-icon-search'\n    }, true);\n    let buttonElm = vm.$el;\n    expect(buttonElm.querySelector('.el-icon-search')).to.be.ok;\n  });\n  it('nativeType', () => {\n    vm = createTest(Button, {\n      nativeType: 'submit'\n    }, true);\n    let buttonElm = vm.$el;\n    expect(buttonElm.getAttribute('type')).to.be.equal('submit');\n  });\n  it('loading', () => {\n    vm = createTest(Button, {\n      loading: true\n    }, true);\n    let buttonElm = vm.$el;\n    expect(buttonElm.classList.contains('is-loading')).to.be.true;\n    expect(buttonElm.querySelector('.el-icon-loading')).to.be.ok;\n  });\n  it('disabled', () => {\n    vm = createTest(Button, {\n      disabled: true\n    }, true);\n    let buttonElm = vm.$el;\n    expect(buttonElm.classList.contains('is-disabled')).to.be.true;\n  });\n  it('size', () => {\n    vm = createTest(Button, {\n      size: 'medium'\n    }, true);\n    let buttonElm = vm.$el;\n    expect(buttonElm.classList.contains('el-button--medium')).to.be.true;\n  });\n  it('plain', () => {\n    vm = createTest(Button, {\n      plain: true\n    }, true);\n    let buttonElm = vm.$el;\n    expect(buttonElm.classList.contains('is-plain')).to.be.true;\n  });\n  it('round', () => {\n    vm = createTest(Button, {\n      round: true\n    }, true);\n    let buttonElm = vm.$el;\n    expect(buttonElm.classList.contains('is-round')).to.be.true;\n  });\n  it('circle', () => {\n    vm = createTest(Button, {\n      circle: true\n    }, true);\n    let buttonElm = vm.$el;\n    expect(buttonElm.classList.contains('is-circle')).to.be.true;\n  });\n  it('click', done => {\n    let result;\n    vm = createVue({\n      template: `\n        <el-button @click=\"handleClick\"></el-button>\n      `,\n      methods: {\n        handleClick(evt) {\n          result = evt;\n        }\n      }\n    }, true);\n    vm.$el.click();\n\n    setTimeout(_ => {\n      expect(result).to.exist;\n      done();\n    }, 20);\n  });\n\n  it('click inside', done => {\n    let result;\n    vm = createVue({\n      template: `\n        <el-button @click=\"handleClick\"><span class=\"inner-slot\"></span></el-button>\n      `,\n      methods: {\n        handleClick(evt) {\n          result = evt;\n        }\n      }\n    }, true);\n    vm.$el.querySelector('.inner-slot').click();\n\n    setTimeout(_ => {\n      expect(result).to.exist;\n      done();\n    }, 20);\n  });\n\n  it('loading implies disabled', done => {\n    let result;\n    vm = createVue({\n      template: `\n        <el-button loading @click=\"handleClick\"><span class=\"inner-slot\"></span></el-button>\n      `,\n      methods: {\n        handleClick(evt) {\n          result = evt;\n        }\n      }\n    }, true);\n    vm.$el.querySelector('.inner-slot').click();\n\n    setTimeout(_ => {\n      expect(result).to.not.exist;\n      done();\n    }, 20);\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/calendar.spec.js",
    "content": "import { createVue, destroyVM, waitImmediate } from '../util';\n\ndescribe('Calendar', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', async() => {\n    vm = createVue({\n      template: `\n      <el-calendar v-model=\"value\"></el-calendar>\n      `,\n      data() {\n        return {\n          value: new Date('2019-04-01')\n        };\n      }\n    }, true);\n    const titleEl = vm.$el.querySelector('.el-calendar__title');\n    expect(/2019.*4/.test(titleEl.innerText)).to.be.true;\n    expect(vm.$el.querySelectorAll('thead th').length).to.equal(7);\n    const rows = vm.$el.querySelectorAll('.el-calendar-table__row');\n    expect(rows.length).to.equal(6);\n    rows[5].firstElementChild.click();\n\n    await waitImmediate();\n\n    expect(/2019.*5/.test(titleEl.innerText)).to.be.true;\n    const value = vm.value;\n    expect(value.getFullYear()).to.be.equal(2019);\n    expect(value.getMonth()).to.be.equal(4);\n    expect(vm.$el.querySelector('.is-selected span').innerText).to.be.equal('6');\n  });\n\n  it('range', () => {\n    vm = createVue({\n      template: `\n      <el-calendar :range=\"['2019-03-04', '2019-03-24']\"></el-calendar>\n      `\n    }, true);\n    const titleEl = vm.$el.querySelector('.el-calendar__title');\n    expect(/2019.*3/.test(titleEl.innerText)).to.be.true;\n    const rows = vm.$el.querySelectorAll('.el-calendar-table__row');\n    expect(rows.length).to.equal(3);\n    expect(vm.$el.querySelector('.el-calendar__button-group')).to.be.a('null');\n  });\n\n  it('range tow monthes', async() => {\n    vm = createVue({\n      template: `\n      <el-calendar :range=\"['2019-04-15', '2019-05-19']\"></el-calendar>\n      `\n    }, true);\n    const titleEl = vm.$el.querySelector('.el-calendar__title');\n    expect(/2019.*4/.test(titleEl.innerText)).to.be.true;\n    const dateTables = vm.$el.querySelectorAll('.el-calendar-table.is-range');\n    expect(dateTables.length).to.be.equal(2);\n    const rows = vm.$el.querySelectorAll('.el-calendar-table__row');\n    expect(rows.length).to.equal(5);\n    const cell = rows[rows.length - 1].firstElementChild;\n    cell.click();\n\n    await waitImmediate();\n\n    expect(/2019.*5/.test(titleEl.innerText)).to.be.true;\n    expect(cell.classList.contains('is-selected')).to.be.true;\n  });\n\n  it('firstDayOfWeek', async() => {\n    vm = createVue({\n      template: `\n      <el-calendar v-model=\"value\" :first-day-of-week=\"0\"></el-calendar>\n      `,\n      data() {\n        return {\n          value: new Date('2019-04-01')\n        };\n      }\n    }, true);\n    const head = vm.$el.querySelector('.el-calendar-table thead');\n    expect(head.firstElementChild.innerText).to.be.equal('日');\n    expect(head.lastElementChild.innerText).to.be.equal('六');\n    const firstRow = vm.$el.querySelector('.el-calendar-table__row');\n    expect(firstRow.firstElementChild.innerText).to.be.equal('31');\n    expect(firstRow.lastElementChild.innerText).to.be.equal('6');\n  });\n\n  it('firstDayOfWeek in range mode', async() => {\n    vm = createVue({\n      template: `\n      <el-calendar v-model=\"value\" :first-day-of-week=\"7\" :range=\"['2019-02-03', '2019-03-23']\"></el-calendar>\n      `,\n      data() {\n        return {\n          value: new Date('2019-03-04')\n        };\n      }\n    }, true);\n    const head = vm.$el.querySelector('.el-calendar-table thead');\n    expect(head.firstElementChild.innerText).to.be.equal('日');\n    expect(head.lastElementChild.innerText).to.be.equal('六');\n    const firstRow = vm.$el.querySelector('.el-calendar-table__row');\n    expect(firstRow.firstElementChild.innerText).to.be.equal('3');\n    expect(firstRow.lastElementChild.innerText).to.be.equal('9');\n  });\n});\n\n"
  },
  {
    "path": "test/unit/specs/card.spec.js",
    "content": "import { createVue, createTest, destroyVM } from '../util';\nimport Card from 'packages/card';\n\ndescribe('Card', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('slot:header', () => {\n    vm = createVue(`\n      <el-card>\n        <header slot=\"header\">二师兄叫我埋梗 啦啦啦</header>\n      </el-card>\n    `);\n\n    expect(vm.$el.querySelector('.el-card__header')).to.property('textContent').to.include('二师兄叫我埋梗 啦啦啦');\n  });\n\n  it('header', () => {\n    vm = createTest(Card, {\n      header: '好烦'\n    });\n\n    expect(vm.$el.querySelector('.el-card__header')).to.property('textContent').to.include('好烦');\n  });\n\n  it('bodyStyle', () => {\n    vm = createTest(Card, {\n      bodyStyle: { padding: '10px' }\n    });\n\n    expect(vm.$el.querySelector('.el-card__body').style.padding).to.equal('10px');\n  });\n\n  it('shadow', () => {\n    vm = createTest(Card, {\n      shadow: 'always'\n    });\n    expect(vm.$el.classList.contains('is-always-shadow')).to.be.true;\n  });\n\n  it('shadow', () => {\n    vm = createTest(Card, {\n      shadow: 'hover'\n    });\n    expect(vm.$el.classList.contains('is-hover-shadow')).to.be.true;\n  });\n\n  it('shadow', () => {\n    vm = createTest(Card, {\n      shadow: 'never'\n    });\n    expect(vm.$el.classList.contains('is-never-shadow')).to.be.true;\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/carousel.spec.js",
    "content": "import { createVue, destroyVM } from '../util';\n\ndescribe('Carousel', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', () => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-carousel ref=\"carousel\">\n            <el-carousel-item v-for=\"item in 3\" :key=\"item\"></el-carousel-item>\n          </el-carousel>\n        </div>\n      `\n    });\n    expect(vm.$refs.carousel.direction).to.be.equal('horizontal');\n    expect(vm.$el.querySelectorAll('.el-carousel__item').length).to.equal(3);\n  });\n\n  it('auto play', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-carousel :interval=\"50\">\n            <el-carousel-item v-for=\"item in 3\" :key=\"item\"></el-carousel-item>\n          </el-carousel>\n        </div>\n      `\n    });\n\n    setTimeout(() => {\n      const items = vm.$el.querySelectorAll('.el-carousel__item');\n      expect(items[0].classList.contains('is-active')).to.true;\n      setTimeout(() => {\n        expect(items[1].classList.contains('is-active')).to.true;\n        done();\n      }, 60);\n    }, 10);\n  });\n\n  it('initial index', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-carousel :autoplay=\"false\" :initial-index=\"1\">\n            <el-carousel-item v-for=\"item in 3\" :key=\"item\"></el-carousel-item>\n          </el-carousel>\n        </div>\n      `\n    });\n\n    setTimeout(() => {\n      expect(vm.$el.querySelectorAll('.el-carousel__item')[1].classList.contains('is-active')).to.true;\n      done();\n    }, 10);\n  });\n\n  it('reset timer', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-carousel :interval=\"20\">\n            <el-carousel-item v-for=\"item in 3\" :key=\"item\"></el-carousel-item>\n          </el-carousel>\n        </div>\n      `\n    });\n\n    setTimeout(() => {\n      const carousel = vm.$children[0];\n      const items = vm.$el.querySelectorAll('.el-carousel__item');\n      carousel.handleMouseEnter();\n      setTimeout(() => {\n        expect(items[0].classList.contains('is-active')).to.true;\n        carousel.handleMouseLeave();\n        setTimeout(() => {\n          expect(items[1].classList.contains('is-active')).to.true;\n          done();\n        }, 30);\n      }, 20);\n    }, 10);\n  });\n\n  it('change', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-carousel :interval=\"50\" @change=\"handleChange\">\n            <el-carousel-item v-for=\"item in 3\" :key=\"item\"></el-carousel-item>\n          </el-carousel>\n        </div>\n      `,\n      data() {\n        return {\n          val: -1,\n          oldVal: -1\n        };\n      },\n      methods: {\n        handleChange(val, oldVal) {\n          this.val = val;\n          this.oldVal = oldVal;\n        }\n      }\n    });\n\n    setTimeout(() => {\n      expect(vm.val).to.equal(1);\n      expect(vm.oldVal).to.equal(0);\n      done();\n    }, 60);\n  });\n\n  it('label', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-carousel>\n            <el-carousel-item v-for=\"item in 3\" :key=\"item\" :label=\"item\"></el-carousel-item>\n          </el-carousel>\n        </div>\n      `\n    });\n    setTimeout(_ => {\n      expect(vm.$el.querySelector('.el-carousel__button').innerText).to.equal('1');\n      done();\n    }, 10);\n  });\n\n  describe('manual control', () => {\n    it('hover', done => {\n      vm = createVue({\n        template: `\n        <div>\n          <el-carousel :autoplay=\"false\">\n            <el-carousel-item v-for=\"item in 3\" :key=\"item\"></el-carousel-item>\n          </el-carousel>\n        </div>\n      `\n      });\n\n      setTimeout(() => {\n        vm.$children[0].throttledIndicatorHover(1);\n        setTimeout(() => {\n          expect(vm.$el.querySelectorAll('.el-carousel__item')[1].classList.contains('is-active')).to.true;\n          done();\n        }, 10);\n      }, 10);\n    });\n\n    it('click', done => {\n      vm = createVue({\n        template: `\n        <div>\n          <el-carousel :autoplay=\"false\" trigger=\"click\" ref=\"carousel\">\n            <el-carousel-item v-for=\"item in 3\" :key=\"item\"></el-carousel-item>\n          </el-carousel>\n        </div>\n      `\n      });\n\n      setTimeout(() => {\n        const items = vm.$el.querySelectorAll('.el-carousel__item');\n        const carousel = vm.$refs.carousel;\n        vm.$el.querySelectorAll('.el-carousel__indicator')[2].click();\n        setTimeout(() => {\n          expect(items[2].classList.contains('is-active')).to.true;\n          carousel.handleButtonEnter('right');\n          vm.$el.querySelector('.el-carousel__arrow--right').click();\n          setTimeout(() => {\n            expect(items[0].classList.contains('is-active')).to.true;\n            done();\n          }, 10);\n        }, 10);\n      }, 10);\n    });\n  });\n\n  describe('methods', () => {\n    it('setActiveItem', done => {\n      vm = createVue({\n        template: `\n        <div>\n          <el-carousel :autoplay=\"false\">\n            <el-carousel-item v-for=\"item in 3\" :key=\"item\"></el-carousel-item>\n          </el-carousel>\n        </div>\n      `\n      });\n\n      setTimeout(() => {\n        vm.$children[0].setActiveItem(1);\n        setTimeout(() => {\n          expect(vm.$el.querySelectorAll('.el-carousel__item')[1].classList.contains('is-active')).to.true;\n          done();\n        }, 10);\n      }, 10);\n    });\n\n    it('slide', done => {\n      vm = createVue({\n        template: `\n        <div>\n          <el-carousel :autoplay=\"false\">\n            <el-carousel-item v-for=\"item in 3\" :key=\"item\"></el-carousel-item>\n          </el-carousel>\n        </div>\n      `\n      });\n\n      setTimeout(() => {\n        vm.$children[0].prev(1);\n        const items = vm.$el.querySelectorAll('.el-carousel__item');\n        setTimeout(() => {\n          expect(items[2].classList.contains('is-active')).to.true;\n          vm.$children[0].next(1);\n          setTimeout(() => {\n            expect(items[0].classList.contains('is-active')).to.true;\n            done();\n          }, 10);\n        }, 10);\n      }, 10);\n    });\n  });\n\n  it('card', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-carousel :autoplay=\"false\" type=\"card\">\n            <el-carousel-item v-for=\"item in 7\" :key=\"item\"></el-carousel-item>\n          </el-carousel>\n        </div>\n      `\n    });\n\n    setTimeout(() => {\n      const items = vm.$el.querySelectorAll('.el-carousel__item');\n      expect(items[0].classList.contains('is-active')).to.true;\n      expect(items[1].classList.contains('is-in-stage')).to.true;\n      expect(items[6].classList.contains('is-in-stage')).to.true;\n      items[1].click();\n      setTimeout(() => {\n        expect(items[1].classList.contains('is-active')).to.true;\n        vm.$el.querySelector('.el-carousel__arrow--left').click();\n        setTimeout(() => {\n          expect(items[0].classList.contains('is-active')).to.true;\n          items[6].click();\n          setTimeout(() => {\n            expect(items[6].classList.contains('is-active')).to.true;\n            done();\n          }, 10);\n        }, 10);\n      }, 10);\n    }, 10);\n  });\n\n  it('vertical direction', () => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-carousel ref=\"carousel\" :autoplay=\"false\" direction=\"vertical\" height=\"100px\">\n            <el-carousel-item v-for=\"item in 3\" :key=\"item\"></el-carousel-item>\n          </el-carousel>\n        </div>\n      `\n    });\n    const items = vm.$el.querySelectorAll('.el-carousel__item');\n\n    expect(vm.$refs.carousel.direction).to.be.equal('vertical');\n    expect(items[0].style.transform.indexOf('translateY') !== -1).to.be.true;\n  });\n});\n\n"
  },
  {
    "path": "test/unit/specs/cascader-panel.spec.js",
    "content": "import {\n  createTest,\n  createVue,\n  destroyVM,\n  waitImmediate,\n  wait,\n  triggerEvent\n} from '../util';\nimport CascaderPanel from 'packages/cascader-panel';\n\nconst selectedValue = ['zhejiang', 'hangzhou', 'xihu'];\n\nconst options = [{\n  value: 'zhejiang',\n  label: 'Zhejiang',\n  children: [{\n    value: 'hangzhou',\n    label: 'Hangzhou',\n    children: [{\n      value: 'xihu',\n      label: 'West Lake'\n    }, {\n      value: 'binjiang',\n      label: 'Bin Jiang'\n    }]\n  }, {\n    value: 'ningbo',\n    label: 'NingBo',\n    children: [{\n      value: 'jiangbei',\n      label: 'Jiang Bei'\n    }, {\n      value: 'jiangdong',\n      label: 'Jiang Dong',\n      disabled: true\n    }]\n  }]\n}, {\n  value: 'jiangsu',\n  label: 'Jiangsu',\n  disabled: true,\n  children: [{\n    value: 'nanjing',\n    label: 'Nanjing',\n    children: [{\n      value: 'zhonghuamen',\n      label: 'Zhong Hua Men'\n    }]\n  }]\n}];\n\nconst options2 = [{\n  id: 'zhejiang',\n  name: 'Zhejiang',\n  areas: [{\n    id: 'hangzhou',\n    name: 'Hangzhou',\n    areas: [{\n      id: 'xihu',\n      name: 'West Lake'\n    }, {\n      id: 'binjiang',\n      name: 'Bin Jiang'\n    }]\n  }, {\n    id: 'ningbo',\n    name: 'NingBo',\n    areas: [{\n      id: 'jiangbei',\n      label: 'Jiang Bei'\n    }, {\n      id: 'jiangdong',\n      name: 'Jiang Dong',\n      invalid: true\n    }]\n  }]\n}, {\n  id: 'jiangsu',\n  name: 'Jiangsu',\n  invalid: true,\n  areas: [{\n    id: 'nanjing',\n    name: 'Nanjing',\n    areas: [{\n      id: 'zhonghuamen',\n      name: 'Zhong Hua Men'\n    }]\n  }]\n}];\n\nconst options3 = [\n  {\n    value: 'shanghai',\n    label: '上海',\n    children: [\n      {\n        value: 'baoshan',\n        label: '宝山'\n      }\n    ]\n  },\n  {\n    value: 'beijing',\n    label: '北京'\n  }\n];\n\nconst getMenus = el => el.querySelectorAll('.el-cascader-menu');\nconst getOptions = (el, menuIndex) => getMenus(el)[menuIndex].querySelectorAll('.el-cascader-node');\nconst getValidOptions = (el, menuIndex) => getMenus(el)[menuIndex].querySelectorAll('.el-cascader-node[tabindex=\"-1\"]');\nconst getLabel = el => el.querySelector('.el-cascader-node__label').textContent;\n\ndescribe('CascaderPanel', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', () => {\n    vm = createTest(CascaderPanel, true);\n    expect(vm.$el).to.exist;\n  });\n\n  it('expand and check', async() => {\n    vm = createVue({\n      template: `\n        <el-cascader-panel\n          ref=\"panel\"\n          v-model=\"value\"\n          :options=\"options\"></el-cascader-panel>\n      `,\n      data() {\n        return {\n          value: [],\n          options\n        };\n      }\n    }, true);\n\n    const el = vm.$el;\n    const expandHandler = sinon.spy();\n    const changeHandler = sinon.spy();\n    vm.$refs.panel.$on('expand-change', expandHandler);\n    vm.$refs.panel.$on('change', changeHandler);\n\n    expect(getMenus(el).length).to.equal(1);\n    expect(getOptions(el, 0).length).to.equal(2);\n\n    const firstOption = getOptions(el, 0)[0];\n    expect(getLabel(firstOption)).to.equal('Zhejiang');\n    firstOption.click();\n    await waitImmediate();\n    expect(expandHandler.calledOnceWith(['zhejiang'])).to.be.true;\n    expect(getMenus(el).length).to.equal(2);\n\n    getOptions(el, 1)[0].click();\n    await waitImmediate();\n    expect(getMenus(el).length).to.equal(3);\n\n    getOptions(el, 2)[0].click();\n    await waitImmediate();\n    expect(changeHandler.calledOnceWith(selectedValue)).to.be.true;\n    expect(vm.value).to.deep.equal(selectedValue);\n  });\n\n  it('with default value', async() => {\n    vm = createVue({\n      template: `\n        <el-cascader-panel\n          ref=\"panel\"\n          v-model=\"value\"\n          :options=\"options\"></el-cascader-panel>\n      `,\n      data() {\n        return {\n          value: selectedValue,\n          options\n        };\n      }\n    }, true);\n\n    const el = vm.$el;\n\n    await waitImmediate();\n    expect(getMenus(el).length).to.equal(3);\n    expect(getOptions(el, 0)[0].className).to.includes('in-active-path');\n    expect(getOptions(el, 2)[0].className).to.includes('is-active');\n    expect(getOptions(el, 2)[0].querySelector('.el-icon-check')).to.exist;\n  });\n\n  it('disabled options', async() => {\n    vm = createVue({\n      template: `\n        <el-cascader-panel\n          ref=\"panel\"\n          :value=\"value\"\n          :options=\"options\"></el-cascader-panel>\n      `,\n      data() {\n        return {\n          value: [],\n          options\n        };\n      }\n    }, true);\n\n    const el = vm.$el;\n    const expandHandler = sinon.spy();\n    vm.$refs.panel.$on('expand-change', expandHandler);\n\n    expect(getOptions(el, 0).length).to.equal(2);\n    expect(getValidOptions(el, 0).length).to.equal(1);\n\n    const secondOption = getOptions(el, 0)[1];\n    expect(secondOption.className).to.includes('is-disabled');\n    secondOption.click();\n\n    await waitImmediate();\n    expect(expandHandler.called).to.be.false;\n    expect(getMenus(el).length).to.equal(1);\n  });\n\n  it('expand by hover', async() => {\n    vm = createVue({\n      template: `\n        <el-cascader-panel\n          :options=\"options\"\n          :props=\"props\"></el-cascader-panel>\n      `,\n      data() {\n        return {\n          options,\n          props: {\n            expandTrigger: 'hover'\n          }\n        };\n      }\n    }, true);\n\n    const el = vm.$el;\n    triggerEvent(getOptions(el, 0)[1], 'mouseenter');\n    await waitImmediate();\n    expect(getMenus(el).length).to.equal(1);\n    triggerEvent(getOptions(el, 0)[0], 'mouseenter');\n    await waitImmediate();\n    expect(getMenus(el).length).to.equal(2);\n    triggerEvent(getOptions(el, 1)[0], 'mouseenter');\n    await waitImmediate();\n    expect(getMenus(el).length).to.equal(3);\n  });\n\n  it('emit value only', async() => {\n    vm = createVue({\n      template: `\n        <el-cascader-panel\n          ref=\"panel\"\n          v-model=\"value\"\n          :options=\"options\"\n          :props=\"props\"></el-cascader-panel>\n      `,\n      data() {\n        return {\n          value: 'xihu',\n          options,\n          props: {\n            emitPath: false\n          }\n        };\n      }\n    }, true);\n\n    const el = vm.$el;\n\n    await waitImmediate();\n    expect(getMenus(el).length).to.equal(3);\n    expect(getOptions(el, 2)[0].querySelector('.el-icon-check')).to.exist;\n\n    getOptions(el, 1)[1].click();\n    await waitImmediate();\n    getOptions(el, 2)[0].click();\n    await waitImmediate();\n    expect(vm.value).to.equal('jiangbei');\n  });\n\n  it('multiple mode', async() => {\n    vm = createVue({\n      template: `\n        <el-cascader-panel\n          v-model=\"value\"\n          :options=\"options\"\n          :props=\"props\"></el-cascader-panel>\n      `,\n      data() {\n        return {\n          value: [],\n          options: options,\n          props: {\n            multiple: true\n          }\n        };\n      }\n    }, true);\n\n    const el = vm.$el;\n    const checkbox = getOptions(el, 0)[0].querySelector('.el-checkbox');\n    expect(checkbox).to.exist;\n    expect(checkbox.querySelector('.el-checkbox__input').className).to.not.includes('is-checked');\n    checkbox.querySelector('input').click();\n\n    await waitImmediate();\n    expect(checkbox.querySelector('.el-checkbox__input').className).to.includes('is-checked');\n    expect(vm.value.length).to.equal(3);\n  });\n\n  it('multiple mode with disabled default value', async() => {\n    vm = createVue({\n      template: `\n        <el-cascader-panel\n          v-model=\"value\"\n          :options=\"options\"\n          :props=\"props\"></el-cascader-panel>\n      `,\n      data() {\n        return {\n          value: [['zhejiang', 'ningbo', 'jiangdong']],\n          options: options,\n          props: {\n            multiple: true\n          }\n        };\n      }\n    }, true);\n\n    const el = vm.$el;\n    const checkbox = getOptions(el, 0)[0].querySelector('.el-checkbox');\n\n    await waitImmediate();\n    expect(checkbox).to.exist;\n    expect(checkbox.querySelector('.el-checkbox__input').className).to.includes('is-indeterminate');\n    checkbox.querySelector('input').click();\n\n    await waitImmediate();\n    expect(checkbox.querySelector('.el-checkbox__input').className).to.includes('is-checked');\n    expect(vm.value.length).to.equal(4);\n\n    getOptions(el, 1)[1].click();\n    await waitImmediate();\n    getOptions(el, 2)[1].querySelector('input').click();\n    await waitImmediate();\n    expect(vm.value.length).to.equal(4);\n  });\n\n  it('check strictly in single mode', async() => {\n    vm = createVue({\n      template: `\n        <el-cascader-panel\n          v-model=\"value\"\n          :options=\"options\"\n          :props=\"props\"></el-cascader-panel>\n      `,\n      data() {\n        return {\n          value: ['zhejiang'],\n          options: options,\n          props: {\n            checkStrictly: true\n          }\n        };\n      }\n    }, true);\n\n    const el = vm.$el;\n    const radio = getOptions(el, 0)[0].querySelector('.el-radio');\n\n    await waitImmediate();\n    expect(radio).to.exist;\n    expect(radio.className).to.includes('is-checked');\n\n    getOptions(el, 0)[0].click();\n    await waitImmediate();\n    getOptions(el, 1)[0].querySelector('input').click();\n    await waitImmediate();\n    expect(vm.value).to.deep.equal(['zhejiang', 'hangzhou']);\n    expect(getOptions(el, 0)[1].querySelector('.el-radio').className).to.includes('is-disabled');\n  });\n\n  it('check strictly in multiple mode', async() => {\n    vm = createVue({\n      template: `\n        <el-cascader-panel\n          v-model=\"value\"\n          :options=\"options\"\n          :props=\"props\"></el-cascader-panel>\n      `,\n      data() {\n        return {\n          value: [['zhejiang']],\n          options: options,\n          props: {\n            multiple: true,\n            checkStrictly: true,\n            emitPath: false\n          }\n        };\n      }\n    }, true);\n\n    const el = vm.$el;\n    const checkbox = getOptions(el, 0)[0].querySelector('.el-checkbox');\n\n    await waitImmediate();\n    expect(checkbox).to.exist;\n    expect(checkbox.className).to.includes('is-checked');\n\n    getOptions(el, 0)[0].click();\n    await waitImmediate();\n    expect(getOptions(el, 1)[0].querySelector('.el-checkbox').className).to.not.includes('is-checked');\n    getOptions(el, 1)[0].querySelector('input').click();\n    await waitImmediate();\n    expect(vm.value).to.deep.equal(['zhejiang', 'hangzhou']);\n    expect(getOptions(el, 0)[1].querySelector('.el-checkbox').className).to.includes('is-disabled');\n  });\n\n  it('custom props', async() => {\n    vm = createVue({\n      template: `\n        <el-cascader-panel\n          v-model=\"value\"\n          :options=\"options\"\n          :props=\"props\"></el-cascader-panel>\n      `,\n      data() {\n        return {\n          value: [],\n          options: options2,\n          props: {\n            value: 'id',\n            label: 'name',\n            children: 'areas',\n            disabled: 'invalid'\n          }\n        };\n      }\n    }, true);\n\n    const el = vm.$el;\n\n    expect(getMenus(el).length).to.equal(1);\n    expect(getOptions(el, 0).length).to.equal(2);\n    expect(getValidOptions(el, 0).length).to.equal(1);\n\n    const firstOption = getOptions(el, 0)[0];\n    expect(getLabel(firstOption)).to.equal('Zhejiang');\n    firstOption.click();\n    await waitImmediate();\n    expect(getMenus(el).length).to.equal(2);\n\n    getOptions(el, 1)[0].click();\n    await waitImmediate();\n    expect(getMenus(el).length).to.equal(3);\n\n    getOptions(el, 2)[0].click();\n    await waitImmediate();\n    expect(vm.value).to.deep.equal(selectedValue);\n  });\n\n  it('value key is same as label key', async() => {\n    vm = createVue({\n      template: `\n        <el-cascader-panel\n          v-model=\"value\"\n          :options=\"options\"\n          :props=\"props\"></el-cascader-panel>\n      `,\n      data() {\n        return {\n          value: [],\n          options,\n          props: {\n            label: 'value'\n          }\n        };\n      }\n    }, true);\n\n    const el = vm.$el;\n\n    expect(getMenus(el).length).to.equal(1);\n    expect(getOptions(el, 0).length).to.equal(2);\n    expect(getValidOptions(el, 0).length).to.equal(1);\n\n    const firstOption = getOptions(el, 0)[0];\n    expect(getLabel(firstOption)).to.equal('zhejiang');\n    firstOption.click();\n    await waitImmediate();\n    expect(getMenus(el).length).to.equal(2);\n\n    getOptions(el, 1)[0].click();\n    await waitImmediate();\n    expect(getMenus(el).length).to.equal(3);\n\n    getOptions(el, 2)[0].click();\n    await waitImmediate();\n    expect(vm.value).to.deep.equal(selectedValue);\n  });\n\n  it('dynamic loading', async() => {\n    vm = createVue({\n      template: `\n        <el-cascader-panel\n          v-model=\"value\"\n          :props=\"props\"></el-cascader-panel>\n      `,\n      data() {\n        let id = 0;\n        return {\n          value: [],\n          props: {\n            lazy: true,\n            lazyLoad(node, resolve) {\n              const { level } = node;\n              setTimeout(() => {\n                const nodes = Array.from({ length: level + 1 })\n                  .map(() => ({\n                    value: ++id,\n                    label: `选项${id}`,\n                    leaf: level >= 2\n                  }));\n                resolve(nodes);\n              }, 1000);\n            }\n          }\n        };\n      }\n    }, true);\n\n    const el = vm.$el;\n    await wait(1000);\n    const firstOption = getOptions(el, 0)[0];\n    firstOption.click();\n    await waitImmediate();\n    expect(firstOption.querySelector('i').className).to.includes('el-icon-loading');\n    await wait(1000);\n    expect(firstOption.querySelector('i').className).to.includes('el-icon-arrow-right');\n    expect(getMenus(el).length).to.equal(2);\n    getOptions(el, 1)[0].click();\n    await wait(1000);\n    getOptions(el, 2)[0].click();\n    await waitImmediate();\n    expect(vm.value.length).to.equal(3);\n  });\n\n  it('click leaf hidden children', async() => {\n    vm = createVue({\n      template: `\n        <el-cascader-panel\n          ref=\"panel\"\n          v-model=\"value\"\n          :options=\"options\"></el-cascader-panel>\n      `,\n      data() {\n        return {\n          value: [],\n          options: options3\n        };\n      }\n    }, true);\n\n    const el = vm.$el;\n    const elOptions = getOptions(el, 0);\n    const firstOption = elOptions[0];\n    const twoOption = elOptions[1];\n    firstOption.click();\n    await waitImmediate();\n    expect(getMenus(el).length).to.equal(2);\n    twoOption.click();\n    await waitImmediate();\n    expect(getMenus(el).length).to.equal(1);\n  });\n});\n\n"
  },
  {
    "path": "test/unit/specs/cascader.spec.js",
    "content": "import {\n  createTest,\n  createVue,\n  destroyVM,\n  waitImmediate,\n  wait,\n  triggerEvent\n} from '../util';\nimport Cascader from 'packages/cascader';\n\nconst options = [{\n  value: 'zhejiang',\n  label: 'Zhejiang',\n  children: [{\n    value: 'hangzhou',\n    label: 'Hangzhou',\n    children: [{\n      value: 'xihu',\n      label: 'West Lake'\n    }, {\n      value: 'binjiang',\n      label: 'Bin Jiang'\n    }]\n  }, {\n    value: 'ningbo',\n    label: 'NingBo',\n    children: [{\n      value: 'jiangbei',\n      label: 'Jiang Bei'\n    }, {\n      value: 'jiangdong',\n      label: 'Jiang Dong',\n      disabled: true\n    }]\n  }]\n}, {\n  value: 'jiangsu',\n  label: 'Jiangsu',\n  disabled: true,\n  children: [{\n    value: 'nanjing',\n    label: 'Nanjing',\n    children: [{\n      value: 'zhonghuamen',\n      label: 'Zhong Hua Men'\n    }]\n  }]\n}];\n\nconst getMenus = el => el.querySelectorAll('.el-cascader-menu');\nconst getOptions = (el, menuIndex) => getMenus(el)[menuIndex].querySelectorAll('.el-cascader-node');\nconst selectedValue = ['zhejiang', 'hangzhou', 'xihu'];\nconst getCloseButton = el => el.querySelectorAll('i.el-tag__close');\n\ndescribe('Cascader', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', () => {\n    vm = createTest(Cascader, true);\n    expect(vm.$el).to.exist;\n  });\n\n  it('toggle dropdown visible', async() => {\n    vm = createTest(Cascader, true);\n    expect(vm.$refs.popper.style.display).to.equal('none');\n    vm.$el.click();\n    await waitImmediate();\n    expect(vm.$refs.popper.style.display).to.includes('');\n    vm.$el.click();\n    await wait(500);\n    expect(vm.$refs.popper.style.display).to.includes('none');\n  });\n\n  it('expand and check', async() => {\n    vm = createTest({\n      template: `\n        <el-cascader\n          ref=\"cascader\"\n          v-model=\"value\"\n          :options=\"options\"></el-cascader>\n      `,\n      data() {\n        return {\n          value: [],\n          options\n        };\n      }\n    }, true);\n\n    const { body } = document;\n    const expandHandler = sinon.spy();\n    const changeHandler = sinon.spy();\n\n    vm.$refs.cascader.$on('expand-change', expandHandler);\n    vm.$refs.cascader.$on('change', changeHandler);\n\n    getOptions(body, 0)[0].click();\n    await waitImmediate();\n    expect(expandHandler.calledOnceWith(['zhejiang'])).to.be.true;\n    getOptions(body, 1)[0].click();\n    await waitImmediate();\n    const checkedOption = getOptions(body, 2)[0];\n    checkedOption.click();\n    await waitImmediate();\n    expect(changeHandler.calledOnceWith(selectedValue)).to.be.true;\n    expect(vm.value).to.deep.equal(selectedValue);\n    expect(checkedOption.querySelector('i.el-icon-check')).to.exist;\n    expect(vm.$el.querySelector('input').value).to.equal('Zhejiang / Hangzhou / West Lake');\n  });\n\n  it('disabled', async() => {\n    vm = createTest(Cascader, {\n      disabled: true\n    }, true);\n    expect(vm.$el.className).to.includes('is-disabled');\n    vm.$el.click();\n    await waitImmediate();\n    expect(vm.$refs.popper.style.display).to.includes('none');\n  });\n\n  it('with default value', async() => {\n    vm = createVue({\n      template: `\n        <el-cascader\n          v-model=\"value\"\n          :options=\"options\"></el-cascader>\n      `,\n      data() {\n        return {\n          value: selectedValue,\n          options\n        };\n      }\n    }, true);\n\n    const el = vm.$el;\n    await waitImmediate();\n    expect(getMenus(el).length).to.equal(3);\n    expect(getOptions(el, 2)[0].querySelector('i').className).to.includes('el-icon-check');\n    expect(vm.$el.querySelector('input').value).to.equal('Zhejiang / Hangzhou / West Lake');\n  });\n\n  it('async set selected value', async() => {\n    vm = createVue({\n      template: `\n        <el-cascader\n          v-model=\"value\"\n          :options=\"options\"></el-cascader>\n      `,\n      data() {\n        return {\n          value: [],\n          options\n        };\n      }\n    }, true);\n\n    const el = vm.$el;\n    vm.value = selectedValue;\n    await waitImmediate();\n    expect(getMenus(el).length).to.equal(3);\n    expect(getOptions(el, 2)[0].querySelector('i').className).to.includes('el-icon-check');\n    expect(vm.$el.querySelector('input').value).to.equal('Zhejiang / Hangzhou / West Lake');\n  });\n\n  it('default value with async options', async() => {\n    vm = createVue({\n      template: `\n        <el-cascader\n          v-model=\"value\"\n          :options=\"options\"></el-cascader>\n      `,\n      data() {\n        return {\n          value: selectedValue,\n          options: []\n        };\n      }\n    }, true);\n\n    const el = vm.$el;\n    vm.options = options;\n    await waitImmediate();\n    expect(getMenus(el).length).to.equal(3);\n    expect(getOptions(el, 2)[0].querySelector('i').className).to.includes('el-icon-check');\n    expect(vm.$el.querySelector('input').value).to.equal('Zhejiang / Hangzhou / West Lake');\n  });\n\n  it('clearable', async() => {\n    vm = createVue({\n      template: `\n        <el-cascader\n          v-model=\"value\"\n          :options=\"options\"\n          clearable></el-cascader>\n      `,\n      data() {\n        return {\n          value: selectedValue,\n          options\n        };\n      }\n    }, true);\n\n    triggerEvent(vm.$el, 'mouseenter');\n    await waitImmediate();\n    const closeBtn = vm.$el.querySelector('i.el-input__icon');\n    expect(closeBtn).to.exist;\n    closeBtn.click();\n    await waitImmediate();\n    expect(vm.value).to.deep.equal([]);\n  });\n\n  it('show last level label', async() => {\n    vm = createVue({\n      template: `\n        <el-cascader\n          v-model=\"value\"\n          :options=\"options\"\n          :show-all-levels=\"false\"></el-cascader>\n      `,\n      data() {\n        return {\n          value: selectedValue,\n          options\n        };\n      }\n    }, true);\n\n    const el = vm.$el;\n    await waitImmediate();\n    expect(getMenus(el).length).to.equal(3);\n    expect(getOptions(el, 2)[0].querySelector('i').className).to.includes('el-icon-check');\n    expect(vm.$el.querySelector('input').value).to.equal('West Lake');\n  });\n\n  it('multiple mode', async() => {\n    vm = createVue({\n      template: `\n        <el-cascader\n          v-model=\"value\"\n          :options=\"options\"\n          :disabled=\"disabled\"\n          :props=\"props\"></el-cascader>\n      `,\n      data() {\n        return {\n          value: [],\n          options,\n          disabled: false,\n          props: {\n            multiple: true\n          }\n        };\n      }\n    }, true);\n\n    getOptions(document.body, 0)[0].querySelector('.el-checkbox input').click();\n    await waitImmediate();\n    expect(vm.value.length).to.equal(3);\n    expect(getCloseButton(vm.$el).length).to.equal(3);\n\n    const tags = vm.$el.querySelectorAll('.el-tag');\n    const closeBtn = tags[0].querySelector('.el-tag__close');\n    expect(tags.length).to.equal(3);\n    expect(closeBtn).to.exist;\n    closeBtn.click();\n    await waitImmediate();\n    expect(vm.value.length).to.equal(2);\n    expect(vm.$el.querySelectorAll('.el-tag').length).to.equal(2);\n\n    vm.disabled = true;\n    await waitImmediate();\n    expect(getCloseButton(vm.$el).length).to.equal(0);\n  });\n\n  it('clearable in multiple mode', async() => {\n    vm = createVue({\n      template: `\n        <el-cascader\n          v-model=\"value\"\n          :options=\"options\"\n          :props=\"props\"\n          clearable></el-cascader>\n      `,\n      data() {\n        return {\n          value: [],\n          options,\n          props: {\n            multiple: true,\n            emitPath: false\n          }\n        };\n      }\n    }, true);\n    vm.value = ['xihu', 'binjiang', 'jiangbei', 'jiangdong'];\n    await waitImmediate();\n    expect(getOptions(document.body, 0)[0].querySelector('.el-checkbox.is-checked')).to.exist;\n    triggerEvent(vm.$el, 'mouseenter');\n    await waitImmediate();\n    const closeBtn = vm.$el.querySelector('i.el-input__icon');\n    expect(closeBtn).to.exist;\n    closeBtn.click();\n    await waitImmediate();\n    expect(vm.value.length).to.equal(1);\n  });\n\n  it('collapse tags', async() => {\n    vm = createVue({\n      template: `\n        <el-cascader\n          v-model=\"value\"\n          :options=\"options\"\n          :props=\"props\"\n          collapse-tags></el-cascader>\n      `,\n      data() {\n        return {\n          value: ['xihu', 'binjiang', 'jiangbei', 'jiangdong'],\n          options,\n          props: {\n            multiple: true,\n            emitPath: false\n          }\n        };\n      }\n    }, true);\n    await waitImmediate();\n    const tags = vm.$el.querySelectorAll('.el-tag');\n    expect(tags.length).to.equal(2);\n    expect(tags[0].querySelector('.el-tag__close')).to.exist;\n    expect(tags[1].querySelector('.el-tag__close')).to.be.null;\n    tags[0].querySelector('.el-tag__close').click();\n    expect(tags[1].textContent).to.equal('+ 3');\n    await waitImmediate();\n    expect(vm.value.length).to.equal(3);\n    vm.$el.querySelector('.el-tag .el-tag__close').click();\n    await waitImmediate();\n    vm.$el.querySelector('.el-tag .el-tag__close').click();\n    await waitImmediate();\n    expect(vm.$el.querySelector('.el-tag')).to.exist;\n    // disabled tag can not be closed\n    expect(vm.$el.querySelector('.el-tag .el-tag__close')).to.be.null;\n  });\n\n  it('filterable', async() => {\n    vm = createVue({\n      template: `\n        <el-cascader\n          v-model=\"value\"\n          :options=\"options\"\n          filterable></el-cascader>\n      `,\n      data() {\n        return {\n          value: [],\n          options\n        };\n      }\n    }, true);\n    const el = vm.$el;\n    const { body } = document;\n    const input = el.querySelector('input');\n    el.click();\n    await waitImmediate();\n    input.value = 'Zhejiang';\n    triggerEvent(input, 'input');\n    await wait(300);\n    expect(body.querySelector('.el-cascader__suggestion-list')).to.exist;\n    expect(body.querySelectorAll('.el-cascader__suggestion-item').length).to.equal(3);\n    body.querySelectorAll('.el-cascader__suggestion-item')[0].click();\n    await waitImmediate();\n    expect(vm.value).to.deep.equal(selectedValue);\n  });\n\n  it('filter method', async() => {\n    vm = createVue({\n      template: `\n        <el-cascader\n          v-model=\"value\"\n          :options=\"options\"\n          :filter-method=\"filterMethod\"\n          filterable></el-cascader>\n      `,\n      data() {\n        return {\n          value: [],\n          options\n        };\n      },\n      methods: {\n        filterMethod(node, keyword) {\n          const { text, path } = node;\n          return text.includes(keyword) || path.includes(keyword);\n        }\n      }\n    }, true);\n    const el = vm.$el;\n    const { body } = document;\n    const input = el.querySelector('input');\n    el.click();\n    await waitImmediate();\n    input.value = 'Zhejiang';\n    triggerEvent(input, 'input');\n    await wait(300);\n    expect(body.querySelectorAll('.el-cascader__suggestion-item').length).to.equal(3);\n    input.value = 'xihu';\n    triggerEvent(input, 'input');\n    await wait(300);\n    expect(body.querySelector('.el-cascader__suggestion-item').textContent).to.equal('Zhejiang / Hangzhou / West Lake');\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/checkbox.spec.js",
    "content": "import { createVue, destroyVM } from '../util';\n\ndescribe('Checkbox', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', done => {\n    vm = createVue({\n      template: `\n        <el-checkbox v-model=\"checked\">\n        </el-checkbox>\n      `,\n      data() {\n        return {\n          checked: false\n        };\n      }\n    }, true);\n    let checkboxElm = vm.$el;\n    expect(checkboxElm.classList.contains('el-checkbox')).to.be.true;\n    checkboxElm.click();\n    vm.$nextTick(_ => {\n      expect(checkboxElm.querySelector('.is-checked')).to.be.ok;\n      done();\n    });\n  });\n  it('disabled', () => {\n    vm = createVue({\n      template: `\n        <el-checkbox\n          v-model=\"checked\"\n          disabled\n        >\n        </el-checkbox>\n      `,\n      data() {\n        return {\n          checked: false\n        };\n      }\n    }, true);\n    let checkboxElm = vm.$el;\n    expect(checkboxElm.querySelector('.is-disabled')).to.be.ok;\n  });\n  it('change event', done => {\n    vm = createVue({\n      template: `\n        <el-checkbox v-model=\"checked\" @change=\"onChange\">\n        </el-checkbox>\n      `,\n      methods: {\n        onChange(val) {\n          this.data = val;\n        }\n      },\n      data() {\n        return {\n          data: '',\n          checked: false\n        };\n      }\n    }, true);\n    let checkboxElm = vm.$el;\n    checkboxElm.click();\n    setTimeout(_ => {\n      expect(vm.data).to.true;\n      vm.checked = false;\n      setTimeout(_ => {\n        expect(vm.data).to.true;\n        done();\n      }, 10);\n    }, 10);\n  });\n  it('checkbox group', done => {\n    vm = createVue({\n      template: `\n        <el-checkbox-group v-model=\"checkList\">\n          <el-checkbox label=\"a\" ref=\"a\"></el-checkbox>\n          <el-checkbox label=\"b\" ref=\"b\"></el-checkbox>\n          <el-checkbox label=\"c\" ref=\"c\"></el-checkbox>\n          <el-checkbox label=\"d\" ref=\"d\"></el-checkbox>\n        </el-checkbox-group>\n      `,\n      data() {\n        return {\n          checkList: []\n        };\n      }\n    }, true);\n    expect(vm.checkList.length === 0).to.be.true;\n    vm.$refs.a.$el.click();\n    vm.$nextTick(_ => {\n      expect(vm.checkList.indexOf('a') !== -1).to.be.true;\n      done();\n    });\n  });\n\n  it('checkbox group change event', done => {\n    vm = createVue({\n      template: `\n        <el-checkbox-group v-model=\"checkList\" @change=\"onChange\">\n          <el-checkbox label=\"a\" ref=\"a\"></el-checkbox>\n          <el-checkbox label=\"b\" ref=\"b\"></el-checkbox>\n        </el-checkbox-group>\n      `,\n      methods: {\n        onChange(val) {\n          this.data = val;\n        }\n      },\n      data() {\n        return {\n          data: '',\n          checkList: []\n        };\n      }\n    }, true);\n    vm.$refs.a.$el.click();\n    setTimeout(_ => {\n      expect(vm.data).to.deep.equal(['a']);\n      vm.checkList = ['b'];\n      done();\n    }, 10);\n  });\n\n  it('checkbox group minimum and maximum', done => {\n    vm = createVue({\n      template: `\n        <el-checkbox-group \n          v-model=\"checkList\" \n          :min=\"1\" \n          :max=\"2\"\n        >\n          <el-checkbox label=\"a\" ref=\"a\"></el-checkbox>\n          <el-checkbox label=\"b\" ref=\"b\"></el-checkbox>\n          <el-checkbox label=\"c\" ref=\"c\"></el-checkbox>\n          <el-checkbox label=\"d\" ref=\"d\"></el-checkbox>\n        </el-checkbox-group>\n      `,\n      data() {\n        return {\n          checkList: ['a'],\n          lastEvent: null\n        };\n      }\n    }, true);\n    expect(vm.checkList.length === 1).to.be.true;\n    expect(vm.$refs.a.isDisabled).to.be.true;\n    vm.$refs.a.$el.click();\n    vm.$nextTick(() => {\n      expect(vm.checkList.indexOf('a') !== -1).to.be.true;\n      vm.$refs.b.$el.click();\n      vm.$nextTick(() => {\n        expect(vm.checkList.indexOf('a') !== -1).to.be.true;\n        expect(vm.checkList.indexOf('b') !== -1).to.be.true;\n        vm.$refs.c.$el.click();\n        vm.$nextTick(() => {\n          expect(vm.checkList.indexOf('c') !== -1).to.be.false;\n          expect(vm.checkList.indexOf('d') !== -1).to.be.false;\n          expect(vm.$refs.c.isDisabled).to.be.true;\n          expect(vm.$refs.d.isDisabled).to.be.true;\n          done();\n        });\n      });\n    });\n  });\n\n  it('nested group', done => {\n    vm = createVue({\n      template: `\n        <el-checkbox-group v-model=\"checkList\">\n          <el-row>\n            <el-checkbox label=\"a\" ref=\"a\"></el-checkbox>\n            <el-checkbox label=\"b\" ref=\"b\"></el-checkbox>\n            <el-checkbox label=\"c\" ref=\"c\"></el-checkbox>\n            <el-checkbox label=\"d\" ref=\"d\"></el-checkbox>\n          </el-row>\n        </el-checkbox-group>\n      `,\n      data() {\n        return {\n          checkList: []\n        };\n      }\n    }, true);\n    expect(vm.checkList.length === 0).to.be.true;\n    vm.$refs.a.$el.click();\n    vm.$nextTick(_ => {\n      expect(vm.checkList.indexOf('a') !== -1).to.be.true;\n      done();\n    });\n  });\n\n  it('true false label', done => {\n    vm = createVue({\n      template: `\n        <el-checkbox true-label=\"a\" :false-label=\"3\" v-model=\"checked\"></el-checkbox>\n      `,\n      data() {\n        return {\n          checked: 'a'\n        };\n      }\n    }, true);\n    vm.$el.click();\n    vm.$nextTick(_ => {\n      expect(vm.checked === 3).to.be.true;\n      done();\n    });\n  });\n  it('checked', () => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-checkbox v-model=\"checked\" checked></el-checkbox>\n          <el-checkbox-group v-model=\"checklist\">\n            <el-checkbox checked label=\"a\"></el-checkbox>\n          </el-checkbox-group>\n        </div>\n      `,\n      data() {\n        return {\n          checked: false,\n          checklist: []\n        };\n      }\n    }, true);\n    expect(vm.checked).to.be.true;\n    expect(vm.checklist.indexOf('a') !== -1).to.be.true;\n  });\n\n  describe('checkbox-button', () => {\n    let vm;\n    afterEach(() => {\n      destroyVM(vm);\n    });\n\n    it('create', done => {\n      vm = createVue({\n        template: `\n          <el-checkbox-button v-model=\"checked\">\n          </el-checkbox-button>\n        `,\n        data() {\n          return {\n            checked: false\n          };\n        }\n      }, true);\n      let checkboxElm = vm.$el;\n      expect(checkboxElm.classList.contains('el-checkbox-button')).to.be.true;\n      checkboxElm.click();\n      vm.$nextTick(_ => {\n        expect(checkboxElm.classList.contains('is-checked')).to.be.ok;\n        done();\n      });\n    });\n    it('disabled', () => {\n      vm = createVue({\n        template: `\n          <el-checkbox-button\n            v-model=\"checked\"\n            disabled\n          >\n          </el-checkbox-button>\n        `,\n        data() {\n          return {\n            checked: false\n          };\n        }\n      }, true);\n      let checkboxElm = vm.$el;\n      expect(checkboxElm.classList.contains('is-disabled')).to.be.ok;\n    });\n\n    it('change event', done => {\n      vm = createVue({\n        template: `\n        <el-checkbox-button v-model=\"checked\" @change=\"onChange\">\n        </el-checkbox-button>\n      `,\n        methods: {\n          onChange(val) {\n            this.data = val;\n          }\n        },\n        data() {\n          return {\n            data: '',\n            checked: false\n          };\n        }\n      }, true);\n      let checkboxElm = vm.$el;\n      checkboxElm.click();\n      setTimeout(_ => {\n        expect(vm.data).to.true;\n        vm.checked = false;\n        setTimeout(_ => {\n          expect(vm.data).to.true;\n          done();\n        }, 10);\n      }, 10);\n    });\n\n    it('checkbox group', done => {\n      vm = createVue({\n        template: `\n          <el-checkbox-group v-model=\"checkList\">\n            <el-checkbox-button label=\"a\" ref=\"a\"></el-checkbox-button>\n            <el-checkbox-button label=\"b\" ref=\"b\"></el-checkbox-button>\n            <el-checkbox-button label=\"c\" ref=\"c\"></el-checkbox-button>\n            <el-checkbox-button label=\"d\" ref=\"d\"></el-checkbox-button>\n          </el-checkbox-group>\n        `,\n        data() {\n          return {\n            checkList: []\n          };\n        }\n      }, true);\n      expect(vm.checkList.length === 0).to.be.true;\n      vm.$refs.a.$el.click();\n      vm.$nextTick(_ => {\n        expect(vm.checkList.indexOf('a') !== -1).to.be.true;\n        vm.$refs.b.$el.click();\n        vm.$nextTick(_ => {\n          expect(vm.checkList.indexOf('a') !== -1).to.be.true;\n          expect(vm.checkList.indexOf('b') !== -1).to.be.true;\n          done();\n        });\n      });\n    });\n\n    it('checkbox-button group change event', done => {\n      vm = createVue({\n        template: `\n        <el-checkbox-group v-model=\"checkList\" @change=\"onChange\">\n          <el-checkbox-button label=\"a\" ref=\"a\"></el-checkbox-button>\n          <el-checkbox-button label=\"b\" ref=\"b\"></el-checkbox-button>\n          <el-checkbox-button label=\"c\" ref=\"c\"></el-checkbox-button>\n          <el-checkbox-button label=\"d\" ref=\"d\"></el-checkbox-button>\n        </el-checkbox-group>\n      `,\n        methods: {\n          onChange(val) {\n            this.data = val;\n          }\n        },\n        data() {\n          return {\n            data: '',\n            checkList: []\n          };\n        }\n      }, true);\n      vm.$refs.a.$el.click();\n      setTimeout(_ => {\n        expect(vm.data).to.deep.equal(['a']);\n        vm.checkList = ['b'];\n        setTimeout(_ => {\n          expect(vm.data).to.deep.equal(['a']);\n          done();\n        }, 10);\n      }, 10);\n    });\n\n    it('checkbox group props', () => {\n      vm = createVue({\n        template: `\n          <el-checkbox-group v-model=\"checkList\" size=\"large\" fill=\"#FF0000\" text-color=\"#000\">\n            <el-checkbox-button label=\"a\" ref=\"a\"></el-checkbox-button>\n            <el-checkbox-button label=\"b\" ref=\"b\"></el-checkbox-button>\n            <el-checkbox-button label=\"c\" ref=\"c\"></el-checkbox-button>\n            <el-checkbox-button label=\"d\" ref=\"d\"></el-checkbox-button>\n          </el-checkbox-group>\n        `,\n        data() {\n          return {\n            checkList: ['a', 'd']\n          };\n        }\n      }, true);\n      expect(vm.checkList.length === 2).to.be.true;\n      expect(vm.$refs.a.$el.classList.contains('is-checked')).to.be.true;\n      expect(vm.$refs.a.$el.classList.contains('el-checkbox-button--large')).to.be.true;\n      expect(vm.$refs.a.$el.querySelector('.el-checkbox-button__inner').style.backgroundColor).to.be.eql('rgb(255, 0, 0)');\n      expect(vm.$refs.a.$el.querySelector('.el-checkbox-button__inner').style.boxShadow).to.be.eql('rgb(255, 0, 0) -1px 0px 0px 0px');\n      expect(vm.$refs.a.$el.querySelector('.el-checkbox-button__inner').style.borderColor).to.be.eql('rgb(255, 0, 0)');\n      expect(vm.$refs.a.$el.querySelector('.el-checkbox-button__inner').style.color).to.be.eql('rgb(0, 0, 0)');\n      expect(vm.$refs.b.$el.classList.contains('is-checked')).to.be.false;\n      expect(vm.$refs.c.$el.classList.contains('is-checked')).to.be.false;\n      expect(vm.$refs.d.$el.classList.contains('is-checked')).to.be.true;\n    });\n\n    it('checkbox group minimum and maximum', done => {\n      vm = createVue({\n        template: `\n          <el-checkbox-group \n            v-model=\"checkList\" \n            :min=\"1\" \n            :max=\"2\"\n          >\n            <el-checkbox-button label=\"a\" ref=\"a\"></el-checkbox-button>\n            <el-checkbox-button label=\"b\" ref=\"b\"></el-checkbox-button>\n            <el-checkbox-button label=\"c\" ref=\"c\"></el-checkbox-button>\n            <el-checkbox-button label=\"d\" ref=\"d\"></el-checkbox-button>\n          </el-checkbox-group>\n        `,\n        data() {\n          return {\n            checkList: ['a'],\n            lastEvent: null\n          };\n        }\n      }, true);\n      expect(vm.checkList.length === 1).to.be.true;\n      vm.$refs.a.$el.click();\n      vm.$nextTick(() => {\n        expect(vm.checkList.indexOf('a') !== -1).to.be.true;\n        vm.$refs.b.$el.click();\n        vm.$nextTick(() => {\n          expect(vm.checkList.indexOf('a') !== -1).to.be.true;\n          expect(vm.checkList.indexOf('b') !== -1).to.be.true;\n          vm.$refs.c.$el.click();\n          vm.$nextTick(() => {\n            expect(vm.checkList.indexOf('c') !== -1).to.be.false;\n            expect(vm.checkList.indexOf('d') !== -1).to.be.false;\n            done();\n          });\n        });\n      });\n    });\n\n    it('nested group', done => {\n      vm = createVue({\n        template: `\n          <el-checkbox-group v-model=\"checkList\">\n            <el-row>\n              <el-checkbox-button label=\"a\" ref=\"a\"></el-checkbox-button>\n              <el-checkbox-button label=\"b\" ref=\"b\"></el-checkbox-button>\n              <el-checkbox-button label=\"c\" ref=\"c\"></el-checkbox-button>\n              <el-checkbox-button label=\"d\" ref=\"d\"></el-checkbox-button>\n            </el-row>\n          </el-checkbox-group>\n        `,\n        data() {\n          return {\n            checkList: []\n          };\n        }\n      }, true);\n      expect(vm.checkList.length === 0).to.be.true;\n      vm.$refs.a.$el.click();\n      vm.$nextTick(_ => {\n        expect(vm.checkList.indexOf('a') !== -1).to.be.true;\n        done();\n      });\n    });\n\n    it('true false label', done => {\n      vm = createVue({\n        template: `\n          <el-checkbox-button \n            true-label=\"a\" \n            :false-label=\"3\" \n            v-model=\"checked\"\n          ></el-checkbox-button>\n        `,\n        data() {\n          return {\n            checked: 'a'\n          };\n        }\n      }, true);\n      vm.$el.click();\n      vm.$nextTick(_ => {\n        expect(vm.checked === 3).to.be.true;\n        done();\n      });\n    });\n    it('checked', () => {\n      vm = createVue({\n        template: `\n          <div>\n            <el-checkbox-button v-model=\"checked\" checked></el-checkbox-button>\n            <el-checkbox-group v-model=\"checklist\">\n              <el-checkbox-button checked label=\"a\"></el-checkbox-button>\n            </el-checkbox-group>\n          </div>\n        `,\n        data() {\n          return {\n            checked: false,\n            checklist: []\n          };\n        }\n      }, true);\n      expect(vm.checked).to.be.true;\n      expect(vm.checklist.indexOf('a') !== -1).to.be.true;\n    });\n\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/col.spec.js",
    "content": "import { createVue, destroyVM } from '../util';\n\ndescribe('Col', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', () => {\n    vm = createVue({\n      template: `\n        <el-col :span=\"12\">\n        </el-col>\n      `\n    }, true);\n    let colElm = vm.$el;\n    expect(colElm.classList.contains('el-col')).to.be.true;\n  });\n  it('span', () => {\n    vm = createVue({\n      template: `\n        <el-col :span=\"12\">\n        </el-col>\n      `\n    }, true);\n    let colElm = vm.$el;\n    expect(colElm.classList.contains('el-col-12')).to.be.true;\n  });\n  it('pull', () => {\n    vm = createVue({\n      template: `\n        <el-col :span=\"12\" :pull=\"3\">\n        </el-col>\n      `\n    }, true);\n    let colElm = vm.$el;\n    expect(colElm.classList.contains('el-col-pull-3')).to.be.true;\n  });\n  it('push', () => {\n    vm = createVue({\n      template: `\n        <el-col :span=\"12\" :push=\"3\">\n        </el-col>\n      `\n    }, true);\n    let colElm = vm.$el;\n    expect(colElm.classList.contains('el-col-push-3')).to.be.true;\n  });\n  it('gutter', () => {\n    vm = createVue({\n      template: `\n        <el-row :gutter=\"20\">\n          <el-col :span=\"12\" ref=\"col\">\n          </el-col>\n        </el-row>\n      `\n    }, true);\n    let colElm = vm.$refs.col.$el;\n    expect(colElm.style.paddingLeft === '10px').to.be.true;\n    expect(colElm.style.paddingRight === '10px').to.be.true;\n  });\n  it('responsive', () => {\n    vm = createVue({\n      template: `\n        <el-row :gutter=\"20\">\n          <el-col ref=\"col\" :sm=\"{ span: 4, offset: 2 }\" :md=\"8\" :lg=\"{ span: 6, offset: 3 }\">\n          </el-col>\n        </el-row>\n      `\n    }, true);\n    let colElm = vm.$refs.col.$el;\n    expect(colElm.classList.contains('el-col-sm-4')).to.be.true;\n    expect(colElm.classList.contains('el-col-sm-offset-2')).to.be.true;\n    expect(colElm.classList.contains('el-col-lg-6')).to.be.true;\n    expect(colElm.classList.contains('el-col-lg-offset-3')).to.be.true;\n    expect(colElm.classList.contains('el-col-md-8')).to.be.true;\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/collapse.spec.js",
    "content": "import { createVue, destroyVM } from '../util';\n\ndescribe('Collapse', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', done => {\n    vm = createVue({\n      data() {\n        return {\n          activeNames: ['1']\n        };\n      },\n      template: `\n        <el-collapse v-model=\"activeNames\" ref=\"collapse\">\n          <el-collapse-item title=\"一致性 Consistency\" name=\"1\" ref=\"item1\">\n            <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>\n            <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>\n          </el-collapse-item>\n          <el-collapse-item title=\"反馈 Feedback\" name=\"2\">\n            <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>\n            <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>\n          </el-collapse-item>\n          <el-collapse-item title=\"效率 Efficiency\" name=\"3\" ref=\"item3\">\n            <div>简化流程：设计简洁直观的操作流程；</div>\n            <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>\n            <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>\n          </el-collapse-item>\n          <el-collapse-item title=\"可控 Controllability\" name=\"4\">\n            <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>\n            <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>\n          </el-collapse-item>\n        </el-collapse>\n      `\n    }, true);\n\n    expect(vm.$refs.item1.isActive).to.be.true;\n    vm.$refs.item3.$el.querySelector('.el-collapse-item__header').click();\n    vm.$nextTick(_ => {\n      expect(vm.$refs.item1.isActive).to.be.true;\n      expect(vm.$refs.item3.isActive).to.be.true;\n\n      vm.$refs.item1.$el.querySelector('.el-collapse-item__header').click();\n\n      vm.$nextTick(_ => {\n        expect(vm.$refs.item1.isActive).to.be.false;\n        done();\n      });\n    });\n  });\n\n  it('accordion', done => {\n    vm = createVue({\n      data() {\n        return {\n          activeNames: ['1']\n        };\n      },\n      template: `\n        <el-collapse accordion v-model=\"activeNames\" ref=\"collapse\">\n          <el-collapse-item title=\"一致性 Consistency\" name=\"1\" ref=\"item1\">\n            <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>\n            <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>\n          </el-collapse-item>\n          <el-collapse-item title=\"反馈 Feedback\" name=\"2\">\n            <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>\n            <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>\n          </el-collapse-item>\n          <el-collapse-item title=\"效率 Efficiency\" name=\"3\" ref=\"item3\">\n            <div>简化流程：设计简洁直观的操作流程；</div>\n            <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>\n            <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>\n          </el-collapse-item>\n          <el-collapse-item title=\"可控 Controllability\" name=\"4\">\n            <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>\n            <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>\n          </el-collapse-item>\n        </el-collapse>\n      `\n    }, true);\n\n    expect(vm.$refs.item1.isActive).to.be.true;\n    vm.$refs.item3.$el.querySelector('.el-collapse-item__header').click();\n    vm.$nextTick(_ => {\n      expect(vm.$refs.item1.isActive).to.be.false;\n      expect(vm.$refs.item3.isActive).to.be.true;\n      done();\n    });\n  });\n\n  it('event:change', done => {\n    vm = createVue({\n      data() {\n        return {\n          activeNames: ['1']\n        };\n      },\n      template: `\n        <el-collapse v-model=\"activeNames\" ref=\"collapse\">\n          <el-collapse-item title=\"一致性 Consistency\" name=\"1\" ref=\"item1\">\n            <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>\n            <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>\n          </el-collapse-item>\n          <el-collapse-item title=\"反馈 Feedback\" name=\"2\">\n            <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>\n            <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>\n          </el-collapse-item>\n          <el-collapse-item title=\"效率 Efficiency\" name=\"3\" ref=\"item3\">\n            <div>简化流程：设计简洁直观的操作流程；</div>\n            <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>\n            <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>\n          </el-collapse-item>\n          <el-collapse-item title=\"可控 Controllability\" name=\"4\">\n            <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>\n            <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>\n          </el-collapse-item>\n        </el-collapse>\n      `\n    }, true);\n    const spy = sinon.spy();\n    vm.$refs.collapse.$on('change', spy);\n    vm.$refs.item3.$el.querySelector('.el-collapse-item__header').click();\n    vm.$nextTick(_ => {\n      expect(spy.withArgs().calledOnce).to.be.true;\n      done();\n    });\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/color-picker.spec.js",
    "content": "import { createTest, createVue, destroyVM } from '../util';\nimport ColorPicker from 'packages/color-picker';\n\ndescribe('ColorPicker', () => {\n  let vm;\n\n  afterEach(() => {\n    vm.$destroy(true);\n    destroyVM(vm);\n    const dropdown = document.querySelector('.el-color-dropdown');\n    if (dropdown && dropdown.parentNode) dropdown.parentNode.removeChild(dropdown);\n  });\n\n  it('should work', () => {\n    vm = createTest(ColorPicker, true);\n    expect(vm.$el).to.exist;\n  });\n\n  it('should show alpha slider when show-alpha=true', (done) => {\n    const vm = createVue({\n      template: `\n        <el-color-picker v-model=\"color\" show-alpha></el-color-picker>\n      `,\n\n      data() {\n        return {\n          color: null\n        };\n      }\n    }, true);\n\n    const trigger = vm.$el.querySelector('.el-color-picker__trigger');\n    trigger.click();\n\n    setTimeout(() => {\n      const alphaSlider = document.querySelector('.el-color-alpha-slider');\n      expect(alphaSlider).to.exist;\n      done();\n    }, ANIMATION_TIME);\n  });\n\n  it('should show color picker when click trigger', (done) => {\n    vm = createTest(ColorPicker, true);\n\n    const trigger = vm.$el.querySelector('.el-color-picker__trigger');\n    trigger.click();\n\n    vm.$nextTick(() => {\n      const dropdown = document.querySelector('.el-color-dropdown');\n      expect(dropdown).to.exist;\n      done();\n    });\n  });\n\n  const ANIMATION_TIME = 300;\n\n  it('should pick a color when confirm button click', (done) => {\n    const vm = createVue({\n      template: `\n        <el-color-picker v-model=\"color\"></el-color-picker>\n      `,\n\n      data() {\n        return {\n          color: null\n        };\n      }\n    }, true);\n\n    const trigger = vm.$el.querySelector('.el-color-picker__trigger');\n    trigger.click();\n\n    setTimeout(() => {\n      const dropdown = document.querySelector('.el-color-dropdown__btn');\n      dropdown.click();\n      vm.$nextTick(() => {\n        expect(vm.color).to.equal('#FF0000');\n        done();\n      });\n    }, ANIMATION_TIME);\n  });\n\n  it('should show correct rgb value', (done) => {\n    const vm = createVue({\n      template: `\n        <el-color-picker v-model=\"color\"></el-color-picker>\n      `,\n\n      data() {\n        return {\n          color: '#20A0FF'\n        };\n      }\n    }, true);\n\n    const trigger = vm.$el.querySelector('.el-color-picker__trigger');\n    trigger.click();\n\n    setTimeout(() => {\n      const input = document.querySelector('.el-color-dropdown__value input');\n      expect(input.value.trim().toUpperCase()).to.equal('#20A0FF');\n      done();\n    }, ANIMATION_TIME);\n  });\n\n  it('should init the right color when open', (done) => {\n    const vm = createVue({\n      template: `\n        <el-color-picker v-model=\"color\"></el-color-picker>\n      `,\n\n      data() {\n        return {\n          color: '#0f0'\n        };\n      }\n    }, true);\n\n    const trigger = vm.$el.querySelector('.el-color-picker__trigger');\n    trigger.click();\n\n    setTimeout(() => {\n      const dropdown = document.querySelector('.el-color-dropdown__btn');\n      dropdown.click();\n      vm.$nextTick(() => {\n        const hueBar = document.querySelector('.el-color-hue-slider__thumb');\n        const top = parseInt(hueBar.style.top, 10);\n        expect(top > 10).to.be.true;\n        done();\n      });\n    }, ANIMATION_TIME);\n  });\n\n  it('should clear a color when clear button click', (done) => {\n    const vm = createVue({\n      template: `\n        <el-color-picker v-model=\"color\"></el-color-picker>\n      `,\n\n      data() {\n        return {\n          color: '#f00'\n        };\n      }\n    }, true);\n\n    const trigger = vm.$el.querySelector('.el-color-picker__trigger');\n    trigger.click();\n\n    setTimeout(() => {\n      const clearBtn = document.querySelector('.el-color-dropdown__link-btn');\n      clearBtn.click();\n      setTimeout(() => {\n        expect(vm.color).to.equal(null);\n        done();\n      }, 30);\n    }, ANIMATION_TIME);\n  });\n\n  it('should change hue when clicking the hue bar', (done) => {\n    const vm = createVue({\n      template: `\n        <el-color-picker v-model=\"color\"></el-color-picker>\n      `,\n\n      data() {\n        return {\n          color: '#f00'\n        };\n      }\n    }, true);\n\n    const trigger = vm.$el.querySelector('.el-color-picker__trigger');\n    trigger.click();\n\n    setTimeout(() => {\n      const hueBar = document.querySelector('.el-color-hue-slider');\n      hueBar.__vue__.handleClick({ target: null, clientX: 0, clientY: 1000 });\n      vm.$nextTick(() => {\n        const picker = vm.$children[0];\n        expect(picker.color._hue > 0).to.true;\n        done();\n      });\n    }, ANIMATION_TIME);\n  });\n\n  it('should change hue when saturation is zero', (done) => {\n    const vm = createVue({\n      template: `\n        <el-color-picker v-model=\"color\"></el-color-picker>\n      `,\n\n      data() {\n        return {\n          color: '#FFFFFF'\n        };\n      }\n    }, true);\n\n    const trigger = vm.$el.querySelector('.el-color-picker__trigger');\n    trigger.click();\n\n    setTimeout(() => {\n      const hueBar = document.querySelector('.el-color-hue-slider');\n      hueBar.__vue__.handleClick({ target: null, clientX: 0, clientY: 1000 });\n      vm.$nextTick(() => {\n        const thumb = document.querySelector('.el-color-hue-slider__thumb');\n        expect(parseInt(thumb.style.top, 10) > 0).to.true;\n        done();\n      });\n    }, ANIMATION_TIME);\n  });\n\n  it('should change alpha when clicking the alpha bar', (done) => {\n    const vm = createVue({\n      template: `\n        <el-color-picker v-model=\"color\" show-alpha></el-color-picker>\n      `,\n\n      data() {\n        return {\n          color: '#f00'\n        };\n      }\n    }, true);\n\n    const trigger = vm.$el.querySelector('.el-color-picker__trigger');\n    trigger.click();\n\n    setTimeout(() => {\n      const alphaBar = document.querySelector('.el-color-alpha-slider');\n      alphaBar.__vue__.handleClick({ target: null, clientX: 50, clientY: 0 });\n      vm.$nextTick(() => {\n        const picker = vm.$children[0];\n        expect(picker.color._alpha < 100).to.true;\n        done();\n      });\n    }, ANIMATION_TIME);\n  });\n\n  it('should change saturation and value when clicking the sv-panel', (done) => {\n    const vm = createVue({\n      template: `\n        <el-color-picker v-model=\"color\" color-format=\"hsv\"></el-color-picker>\n      `,\n\n      data() {\n        return {\n          color: 'hsv(0, 50%, 50%)'\n        };\n      }\n    }, true);\n\n    const trigger = vm.$el.querySelector('.el-color-picker__trigger');\n    trigger.click();\n\n    setTimeout(() => {\n      const svPanel = document.querySelector('.el-color-svpanel');\n      svPanel.__vue__.handleDrag({ clientX: 0, clientY: 0 });\n      vm.$nextTick(() => {\n        const picker = vm.$children[0];\n        expect(picker.color._saturation !== 50).to.true;\n        expect(picker.color._value !== 50).to.true;\n        done();\n      });\n    }, ANIMATION_TIME);\n  });\n\n  it('should change color to the selected color', done => {\n    const vm = createVue({\n      template: `\n        <el-color-picker v-model=\"color\" show-alpha :predefine=\"colors\"></el-color-picker>\n      `,\n      data() {\n        return {\n          color: 'hsva(180, 65, 20, 0.5)',\n          colors: [\n            'rgba(19, 206, 102, 0.18)',\n            'rgb(25, 159, 147)',\n            'hsv(250, 54, 98)',\n            'hsva(180, 65, 20, 0.5)',\n            'hsl(170, 32%, 87%)',\n            'hsla(45, 62%, 47%, 0.13)',\n            '#7486de',\n            '#45aa9477',\n            '#892345'\n          ]\n        };\n      }\n    }, true);\n\n    const trigger = vm.$el.querySelector('.el-color-picker__trigger');\n    trigger.click();\n\n    setTimeout(() => {\n      expect(document.querySelectorAll('.el-color-predefine__color-selector').length === 9).to.be.true;\n      const selector = document.querySelector('.el-color-predefine__color-selector:nth-child(4)');\n      selector.click();\n      vm.$nextTick(() => {\n        const picker = vm.$children[0];\n        expect(picker.color._hue === 180).to.be.true;\n        expect(picker.color._saturation === 65).to.be.true;\n        expect(picker.color._value === 20).to.be.true;\n        expect(picker.color._alpha === 50).to.be.true;\n\n        const selector2 = document.querySelector('.el-color-predefine__color-selector:nth-child(3)');\n        selector2.click();\n\n        vm.$nextTick(() => {\n          expect(picker.color._hue === 250).to.be.true;\n          expect(picker.color._saturation === 54).to.be.true;\n          expect(picker.color._value === 98).to.be.true;\n          expect(picker.color._alpha === 100).to.be.true;\n          done();\n        });\n      });\n    });\n  });\n\n  it('should change selected state of predefined color', done => {\n    const vm = createVue({\n      template: `\n        <el-color-picker v-model=\"color\" show-alpha :predefine=\"colors\"></el-color-picker>\n      `,\n      data() {\n        return {\n          color: 'hsva(180, 65, 20, 0.5)',\n          colors: [\n            'rgba(19, 206, 102, 0.18)',\n            'rgb(25, 159, 147)',\n            'hsv(250, 54, 98)',\n            'hsva(180, 65, 20, 0.5)',\n            'hsl(170, 32%, 87%)',\n            'hsla(45, 62%, 47%, 0.13)',\n            '#7486de',\n            '#45aa9477',\n            '#892345'\n          ]\n        };\n      }\n    }, true);\n\n    const trigger = vm.$el.querySelector('.el-color-picker__trigger');\n    trigger.click();\n\n    setTimeout(() => {\n      const selector = document.querySelector('.el-color-predefine__color-selector:nth-child(4)');\n      selector.click();\n      vm.$nextTick(() => {\n        expect(selector.classList.contains('selected')).to.be.true;\n\n        const hueBar = document.querySelector('.el-color-hue-slider');\n        hueBar.__vue__.handleClick({ target: null, clientX: 0, clientY: 1000 });\n\n        vm.$nextTick(() => {\n          expect(selector.classList.contains('selected')).to.be.false;\n          done();\n        });\n      });\n    });\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/container.spec.js",
    "content": "import { createTest, createVue, destroyVM } from '../util';\nimport Container from 'packages/container';\nimport Header from 'packages/header';\nimport Main from 'packages/main';\nimport Aside from 'packages/aside';\nimport Footer from 'packages/footer';\n\ndescribe('Container', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', () => {\n    vm = createTest(Container, true);\n    expect(vm.$el).to.exist;\n  });\n\n  it('vertical', () => {\n    vm = createVue({\n      template: `\n        <el-container>\n          <el-header></el-header>\n          <el-main></el-main>\n        </el-container>\n      `\n    }, true);\n    expect(vm.$children[0].$el.classList.contains('is-vertical')).to.true;\n  });\n\n  it('direction', done => {\n    vm = createVue({\n      template: `\n        <el-container :direction=\"direction\">\n          <el-header></el-header>\n          <el-main></el-main>\n        </el-container>\n      `,\n      data() {\n        return {\n          direction: 'horizontal'\n        };\n      }\n    }, true);\n    expect(vm.$children[0].$el.classList.contains('is-vertical')).not.to.true;\n    vm.direction = 'vertical';\n    vm.$nextTick(() => {\n      expect(vm.$children[0].$el.classList.contains('is-vertical')).to.true;\n      done();\n    });\n  });\n});\n\ndescribe('Header', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', () => {\n    vm = createTest(Header, true);\n    expect(vm.$el).to.exist;\n  });\n\n  it('height', () => {\n    vm = createVue({\n      template: `\n        <el-header height=\"100px\"></el-header>\n      `\n    }, true);\n    expect(vm.$children[0].$el.style.height).to.equal('100px');\n  });\n});\n\ndescribe('Aside', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', () => {\n    vm = createTest(Aside, true);\n    expect(vm.$el).to.exist;\n  });\n\n  it('width', () => {\n    vm = createVue({\n      template: `\n        <el-aside width=\"200px\"></el-aside>\n      `\n    }, true);\n    expect(vm.$children[0].$el.style.width).to.equal('200px');\n  });\n});\n\ndescribe('Main', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', () => {\n    vm = createTest(Main, true);\n    expect(vm.$el).to.exist;\n  });\n});\n\ndescribe('Footer', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', () => {\n    vm = createTest(Footer, true);\n    expect(vm.$el).to.exist;\n  });\n\n  it('height', () => {\n    vm = createVue({\n      template: `\n        <el-footer height=\"100px\"></el-footer>\n      `\n    }, true);\n    expect(vm.$children[0].$el.style.height).to.equal('100px');\n  });\n});\n\n"
  },
  {
    "path": "test/unit/specs/date-picker.spec.js",
    "content": "import {\n  createTest,\n  createVue,\n  destroyVM,\n  triggerEvent,\n  wait\n} from '../util';\nimport DatePicker from 'packages/date-picker';\n\nconst DELAY = 50;\n\nconst LEFT = 37;\nconst ENTER = 13;\nconst TAB = 9;\n\nconst keyDown = (el, keyCode) => {\n  const evt = document.createEvent('Events');\n  evt.initEvent('keydown', true, true);\n  evt.keyCode = keyCode;\n  el.dispatchEvent(evt);\n};\n\ndescribe('DatePicker', () => {\n  let vm;\n  afterEach(() => { destroyVM(vm); });\n\n  it('create', () => {\n    vm = createTest(DatePicker, {\n      readonly: true,\n      placeholder: '23333',\n      format: 'HH-mm-ss'\n    }, true);\n    const input = vm.$el.querySelector('input');\n\n    expect(input.getAttribute('placeholder')).to.equal('23333');\n    expect(input.getAttribute('readonly')).to.equal('readonly');\n  });\n\n  it('select date', done => {\n    vm = createVue({\n      template: `\n        <el-date-picker ref=\"compo\" v-model=\"value\"></el-date-picker>\n      `,\n      data() {\n        return {\n          value: ''\n        };\n      }\n    }, true);\n    const input = vm.$el.querySelector('input');\n    const date = new Date();\n\n    input.blur();\n    input.focus();\n\n    setTimeout(_ => {\n      const $el = vm.$refs.compo.picker.$el;\n      const spans = $el.querySelectorAll('.el-date-picker__header-label');\n      const arrowLeftElm = $el.querySelector('.el-date-picker__prev-btn.el-icon-arrow-left');\n      const arrowRightElm = $el.querySelector('.el-date-picker__next-btn.el-icon-arrow-right');\n\n      expect(spans[0].textContent).to.include(date.getFullYear());\n      expect(spans[1].textContent).to.include(date.getMonth() + 1);\n      $el.querySelector('.el-date-picker__prev-btn.el-icon-d-arrow-left').click();\n      let count = 20;\n      while (--count) {\n        arrowLeftElm.click();\n      }\n\n      count = 20;\n      while (--count) {\n        arrowRightElm.click();\n      }\n      setTimeout(_ => {\n        expect(spans[0].textContent).to.include(date.getFullYear() - 1);\n        expect(spans[1].textContent).to.include(date.getMonth() + 1);\n        $el.querySelector('td.available').click();\n        vm.$nextTick(_ => {\n          expect(vm.value).to.exist;\n        });\n        done();\n      }, DELAY);\n    }, DELAY);\n  });\n\n  it('clear value', done => {\n    vm = createVue({\n      template: `\n        <el-date-picker v-model=\"value\" ref=\"compo\"></el-date-picker>\n      `,\n      data() {\n        return {\n          value: ''\n        };\n      }\n    }, true);\n    const input = vm.$el.querySelector('input');\n\n    input.focus();\n    setTimeout(_ => {\n      const $el = vm.$refs.compo.picker.$el;\n      $el.querySelector('td.available').click();\n      setTimeout(_ => {\n        vm.$refs.compo.showClose = true;\n        vm.$refs.compo.handleClickIcon({ stopPropagation: () => null });\n        setTimeout(_ => {\n          expect(vm.value).to.equal(null);\n          done();\n        }, DELAY);\n      }, DELAY);\n    }, DELAY);\n  });\n\n  it('disabled clear value', done => {\n    vm = createVue({\n      template: `\n        <el-date-picker v-model=\"value\" ref=\"compo\" :clearable=\"false\"></el-date-picker>\n      `,\n      data() {\n        return {\n          value: ''\n        };\n      }\n    }, true);\n    const input = vm.$el.querySelector('input');\n\n    input.focus();\n    setTimeout(_ => {\n      const $el = vm.$refs.compo.picker.$el;\n      $el.querySelector('td.available').click();\n      vm.$nextTick(_ => {\n        vm.$el.querySelector('.el-input__icon').click();\n        setTimeout(_ => {\n          expect(vm.value).to.be.exist;\n          done();\n        }, DELAY);\n      });\n    }, DELAY);\n  });\n\n  it('reset', done => {\n    vm = createVue({\n      template: `\n        <el-date-picker ref=\"compo\" v-model=\"value\"></el-date-picker>\n      `,\n      data() {\n        return {\n          value: ''\n        };\n      }\n    }, true);\n    const input = vm.$el.querySelector('input');\n\n    input.blur();\n    input.focus();\n    setTimeout(_ => {\n      const $el = vm.$refs.compo.picker.$el;\n      $el.querySelector('.el-date-picker__next-btn.el-icon-arrow-right').click();\n      setTimeout(_ => {\n        $el.querySelector('td.available').click();\n        vm.$nextTick(_ => {\n          vm.value = '';\n          setTimeout(_ => {\n            expect(vm.$refs.compo.picker.date.getDate()).to.equal(new Date().getDate());\n            done();\n          }, DELAY);\n        });\n      }, DELAY);\n    }, DELAY);\n  });\n\n  it('focus', done => {\n    vm = createVue({\n      template: `\n        <el-date-picker ref=\"picker\"></el-date-picker>\n      `\n    }, true);\n\n    const spy = sinon.spy();\n\n    vm.$refs.picker.$on('focus', spy);\n    vm.$refs.picker.focus();\n\n    vm.$nextTick(_ => {\n      expect(spy.calledOnce).to.be.true;\n      done();\n    });\n  });\n\n  it('change event', done => {\n    let onChangeValue;\n\n    vm = createVue({\n      template: `\n        <el-date-picker\n          ref=\"compo\"\n          v-model=\"value\"\n          @change=\"handleChange\" />`,\n\n      methods: {\n        handleChange(val) {\n          onChangeValue = val;\n        }\n      },\n\n      data() {\n        return {\n          value: ''\n        };\n      }\n    }, true);\n\n    const input = vm.$el.querySelector('input');\n\n    input.blur();\n    input.focus();\n\n    setTimeout(_ => {\n      const picker = vm.$refs.compo.picker;\n\n      // programatic modification of bound value does not emit cange\n      vm.value = new Date(2000, 9, 2);\n      setTimeout(_ => {\n        expect(onChangeValue).to.not.exist;\n        // user interaction does emit change\n        picker.$el.querySelector('td.available').click();\n        setTimeout(_ => {\n          expect(onChangeValue.getTime()).to.equal(vm.value.getTime());\n          done();\n        }, DELAY);\n      }, DELAY);\n    }, DELAY);\n  });\n\n  it('change event: when clear(), without opening picker', done => {\n    vm = createVue({\n      template: `\n        <el-date-picker\n          ref=\"compo\"\n          v-model=\"value\"\n        />`,\n      data() {\n        return {\n          value: new Date()\n        };\n      }\n    }, true);\n\n    const spy = sinon.spy();\n    vm.$refs.compo.$on('change', spy);\n\n    setTimeout(_ => {\n      vm.$refs.compo.showClose = true;\n      vm.$refs.compo.handleClickIcon({ stopPropagation: () => null });\n      setTimeout(_ => {\n        expect(spy.calledOnce).to.equal(true);\n        expect(spy.calledWith(null)).to.equal(true);\n        done();\n      }, DELAY);\n    }, DELAY);\n  });\n\n  it('nuke invalid input on close', done => {\n    vm = createVue({\n      template: '<el-date-picker v-model=\"value\" value-format=\"yyyy-MM-dd\" ref=\"compo\" />',\n      data() {\n        return {\n          value: '2010-10-01'\n        };\n      }\n    }, true);\n\n    const compo = vm.$refs.compo;\n    const input = compo.$el.querySelector('input');\n    input.blur();\n    input.focus();\n\n    setTimeout(_ => {\n      compo.userInput = 'abc';\n      compo.handleChange(); // simplified test\n      compo.handleClose();\n      setTimeout(_ => {\n        expect(input.value).to.equal('2010-10-01');\n        expect(vm.value).to.equal('2010-10-01');\n        done();\n      }, DELAY);\n    }, DELAY);\n  });\n\n  it('select datetime with defaultTime', done => {\n    vm = createVue({\n      template: `\n        <el-date-picker ref=\"compo\" type=\"datetime\" v-model=\"value\" default-time=\"12:00:00\"></el-date-picker>\n      `,\n      data() {\n        return {\n          value: ''\n        };\n      }\n    }, true);\n\n    const input = vm.$el.querySelector('input');\n    input.blur();\n    input.focus();\n    setTimeout(_ => {\n      const picker = vm.$refs.compo.picker;\n      picker.$el.querySelector('td.available').click();\n      setTimeout(_ => {\n        const date = vm.$refs.compo.picker.date;\n        expect(date.getHours()).to.equal(12);\n        expect(date.getMinutes()).to.equal(0);\n        expect(date.getSeconds()).to.equal(0);\n        done();\n      }, DELAY);\n    }, DELAY);\n  });\n\n  describe('input event', () => {\n    // mimic standard <select>'s behavior\n    // emit input if and only if value changes\n    afterEach(() => { destroyVM(vm); });\n\n    it('works for type=date', done => {\n      let emitted = false;\n      vm = createVue({\n        template: `\n          <el-date-picker\n            ref=\"compo\"\n            v-model=\"value\"\n            type=\"date\"\n            @input=\"handleInput\" />`,\n\n        methods: {\n          handleInput(val) {\n            emitted = true;\n          }\n        },\n\n        data() {\n          return {\n            value: ''\n          };\n        }\n      }, true);\n\n      const input = vm.$el.querySelector('input');\n\n      input.blur();\n      input.focus();\n\n      setTimeout(_ => {\n        const picker = vm.$refs.compo.picker;\n\n        picker.$el.querySelector('td.available').click();\n        setTimeout(_ => {\n          expect(emitted).to.true;\n          emitted = false;\n\n          setTimeout(_ => {\n            input.blur();\n            input.focus();\n\n            picker.$el.querySelector('td.available').click();\n            setTimeout(_ => {\n              expect(emitted).to.false;\n              done();\n            }, DELAY);\n          }, DELAY);\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('works for type=daterange', done => {\n      let emitted = false;\n      vm = createVue({\n        template: `\n          <el-date-picker\n            ref=\"compo\"\n            v-model=\"value\"\n            type=\"daterange\"\n            @input=\"handleInput\" />`,\n\n        methods: {\n          handleInput(val) {\n            emitted = true;\n          }\n        },\n\n        data() {\n          return {\n            value: ''\n          };\n        }\n      }, true);\n\n      const input = vm.$el.querySelector('input');\n\n      input.click();\n\n      setTimeout(_ => {\n        const picker = vm.$refs.compo.picker;\n\n        picker.$el.querySelector('td.available').click();\n        setTimeout(_ => {\n          picker.$el.querySelector('td.available + td.available').click();\n          setTimeout(_ => {\n            expect(emitted).to.true;\n            emitted = false;\n\n            setTimeout(_ => {\n              input.blur();\n              input.focus();\n\n              const picker = vm.$refs.compo.picker;\n              picker.$el.querySelector('td.available').click();\n              setTimeout(_ => {\n                picker.$el.querySelector('td.available + td.available').click();\n                setTimeout(_ => {\n                  expect(emitted).to.false;\n                  done();\n                });\n              }, DELAY);\n            }, DELAY);\n          });\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('work for event focus and blur', done => {\n      vm = createVue({\n        template: `\n          <el-date-picker ref=\"picker\"/>\n        `\n      }, true);\n\n      const spyFocus = sinon.spy();\n      const spyBlur = sinon.spy();\n\n      vm.$refs.picker.$on('focus', spyFocus);\n      vm.$refs.picker.$on('blur', spyBlur);\n      vm.$el.querySelector('input').focus();\n\n      vm.$nextTick(_ => {\n        expect(spyFocus.calledOnce).to.be.true;\n        vm.$refs.picker.pickerVisible = false;\n        vm.$nextTick(_ => {\n          expect(spyBlur.calledOnce).to.be.true;\n          done();\n        });\n      });\n    });\n  });\n\n  describe('value-format', () => {\n    afterEach(() => { destroyVM(vm); });\n\n    it('emits', done => {\n      vm = createVue({\n        template: `\n          <el-date-picker\n            ref=\"compo\"\n            v-model=\"value\"\n            type=\"date\"\n            value-format=\"dd/MM yyyy\" />`,\n        data() {\n          return {\n            value: ''\n          };\n        }\n      }, true);\n\n      const spy = sinon.spy();\n      vm.$refs.compo.$on('change', spy);\n\n      vm.$refs.compo.$el.querySelector('input').focus();\n      setTimeout(_ => {\n        vm.$refs.compo.picker.$el.querySelector('.el-date-table td.available').click();\n        setTimeout(_ => {\n          const today = new Date();\n          const yyyy = today.getFullYear();\n          const MM = ('0' + (today.getMonth() + 1)).slice(-2);\n          const dd = '01'; // first available one should be first day of month\n          const expectValue = `${dd}/${MM} ${yyyy}`;\n          expect(vm.value).to.equal(expectValue);\n          expect(spy.calledOnce).to.be.true;\n          expect(spy.calledWith(expectValue)).to.be.true;\n          done();\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('with literal string', done => {\n      vm = createVue({\n        template: `\n          <el-date-picker\n            ref=\"compo\"\n            v-model=\"value\"\n            type=\"date\"\n            value-format=\"dd/MM yyyy [Element]\" />`,\n        data() {\n          return {\n            value: ''\n          };\n        }\n      }, true);\n\n      vm.$refs.compo.$el.querySelector('input').focus();\n\n      setTimeout(_ => {\n        vm.$refs.compo.picker.$el.querySelector('.el-date-table td.available').click();\n        setTimeout(_ => {\n          const today = new Date();\n          const yyyy = today.getFullYear();\n          const MM = ('0' + (today.getMonth() + 1)).slice(-2);\n          const dd = '01'; // first available one should be first day of month\n          const expectValue = `${dd}/${MM} ${yyyy} Element`;\n          expect(vm.value).to.equal(expectValue);\n          done();\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('accepts', done => {\n      vm = createVue({\n        template: `\n          <el-date-picker\n            ref=\"compo\"\n            v-model=\"value\"\n            type=\"date\"\n            format=\"yyyy-MM-dd\"\n            value-format=\"dd/MM yyyy\" />`,\n        data() {\n          return {\n            value: '01/02 2000'\n          };\n        }\n      }, true);\n      const input = vm.$refs.compo.$el.querySelector('input');\n      expect(input.value).to.equal('2000-02-01');\n      expect(vm.$refs.compo.parsedValue).to.be.an.instanceof(Date);\n      input.focus();\n      setTimeout(_ => {\n        const date = vm.$refs.compo.picker.date;\n        expect(date.getFullYear()).to.equal(2000);\n        expect(date.getMonth()).to.equal(1);\n        expect(date.getDate()).to.equal(1);\n        vm.$refs.compo.picker.$el.querySelector('.el-date-table .current').click();\n        setTimeout(_ => {\n          expect(input.value).to.equal('2000-02-01');\n          done();\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('translates format to value-format', done => {\n      vm = createVue({\n        template: `\n          <el-date-picker\n            ref=\"compo\"\n            v-model=\"value\"\n            type=\"date\"\n            format=\"yyyy-MM-dd\"\n            value-format=\"dd/MM yyyy\" />`,\n        data() {\n          return {\n            value: ''\n          };\n        }\n      }, true);\n      const input = vm.$refs.compo.$el.querySelector('input');\n      input.focus();\n      setTimeout(_ => {\n        input.value = '2000-10-01';\n        triggerEvent(input, 'input');\n        keyDown(input, ENTER);\n        setTimeout(_ => {\n          expect(vm.value).to.equal('01/10 2000');\n          done();\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('translates format to value-format with literal string', done => {\n      vm = createVue({\n        template: `\n          <el-date-picker\n            ref=\"compo\"\n            v-model=\"value\"\n            type=\"date\"\n            format=\"[Element] yyyy-MM-dd\"\n            value-format=\"dd/MM yyyy [UI]\" />`,\n        data() {\n          return {\n            value: ''\n          };\n        }\n      }, true);\n      const input = vm.$refs.compo.$el.querySelector('input');\n      input.focus();\n      setTimeout(_ => {\n        input.value = 'Element 2000-10-01';\n        triggerEvent(input, 'input');\n        keyDown(input, ENTER);\n        setTimeout(_ => {\n          expect(vm.value).to.equal('01/10 2000 UI');\n          done();\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('works for daterange', done => {\n      vm = createVue({\n        template: `\n          <el-date-picker\n            ref=\"compo\"\n            v-model=\"value\"\n            type=\"daterange\"\n            format=\"yyyy-MM-dd\"\n            value-format=\"dd/MM yyyy\" />`,\n        data() {\n          return {\n            value: ''\n          };\n        }\n      }, true);\n      const inputs = vm.$refs.compo.$el.querySelectorAll('input');\n      inputs[0].focus();\n      setTimeout(_ => {\n        inputs[0].value = '2000-10-01';\n        triggerEvent(inputs[0], 'input');\n        keyDown(inputs[0], TAB);\n        setTimeout(_ => {\n          inputs[1].focus();\n          inputs[1].value = '2000-10-02';\n          triggerEvent(inputs[1], 'input');\n          keyDown(inputs[0], ENTER);\n          setTimeout(_ => {\n            expect(vm.value).to.eql(['01/10 2000', '02/10 2000']);\n            done();\n          }, DELAY);\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('is timestamp', done => {\n      vm = createVue({\n        template: `\n          <el-date-picker\n            ref=\"compo\"\n            v-model=\"value\"\n            type=\"date\"\n            format=\"yyyy-MM-dd\"\n            value-format=\"timestamp\" />`,\n        data() {\n          return {\n            value: Date.now()\n          };\n        }\n      }, true);\n      const input = vm.$refs.compo.$el.querySelector('input');\n      input.focus();\n      setTimeout(_ => {\n        // check timestamp is parsed internally\n        expect(vm.$refs.compo.parsedValue.getTime()).to.equal(vm.value);\n        input.value = '2000-10-01';\n        triggerEvent(input, 'input');\n        keyDown(input, ENTER);\n        setTimeout(_ => {\n          expect(vm.value).to.equal(new Date(2000, 9, 1).getTime());\n          done();\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('works for daterange, is timestamp', done => {\n      vm = createVue({\n        template: `\n          <el-date-picker\n            ref=\"compo\"\n            v-model=\"value\"\n            type=\"daterange\"\n            format=\"yyyy-MM-dd\"\n            value-format=\"timestamp\" />`,\n        data() {\n          return {\n            value: [Date.now(), Date.now() + 86400 * 1000]\n          };\n        }\n      }, true);\n      const inputs = vm.$refs.compo.$el.querySelectorAll('input');\n      inputs[0].focus();\n      setTimeout(_ => {\n        // check timestamp is parsed internally\n        expect(vm.$refs.compo.parsedValue[0].getTime()).to.equal(vm.value[0]);\n        expect(vm.$refs.compo.parsedValue[1].getTime()).to.equal(vm.value[1]);\n        inputs[0].value = '2000-10-01';\n        triggerEvent(inputs[0], 'input');\n        keyDown(inputs[0], TAB);\n        setTimeout(_ => {\n          inputs[1].focus();\n          inputs[1].value = '2000-10-02';\n          triggerEvent(inputs[1], 'input');\n          keyDown(inputs[0], ENTER);\n          setTimeout(_ => {\n            expect(vm.value).to.eql([\n              new Date(2000, 9, 1).getTime(),\n              new Date(2000, 9, 2).getTime()\n            ]);\n            done();\n          }, DELAY);\n        }, DELAY);\n      }, DELAY);\n    });\n  });\n\n  describe('default value', () => {\n    afterEach(() => { destroyVM(vm); });\n\n    it('it works', done => {\n      let defaultValue = '2000-01-01';\n      let expectValue = new Date(2000, 0, 1);\n\n      vm = createVue({\n        template: `<el-date-picker v-model=\"value\" ref=\"compo\" default-value=\"${defaultValue}\" />`,\n        data() {\n          return {\n            value: ''\n          };\n        }\n      }, true);\n\n      vm.$el.querySelector('input').focus();\n      setTimeout(_ => {\n        const $el = vm.$refs.compo.picker.$el;\n        expect($el.querySelector('.el-month-table td.default')).to.exist;\n        expect($el.querySelector('.el-year-table td.default')).to.exist;\n        const defaultEls = $el.querySelectorAll('.el-date-table td.default');\n        expect(defaultEls.length).to.equal(1);\n        defaultEls[0].click();\n        setTimeout(_ => {\n          expect(vm.value).to.eql(expectValue);\n          done();\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('is reactive, works with clear', done => {\n      let defaultValue = '2000-01-01';\n      let expectValue = new Date(2000, 0, 1);\n\n      vm = createVue({\n        template: '<el-date-picker v-model=\"value\" ref=\"compo\" :default-value=\"defaultValue\" />',\n        data() {\n          return {\n            value: new Date(),\n            defaultValue: null\n          };\n        }\n      }, true);\n\n      const input = vm.$el.querySelector('input');\n      input.focus();\n      setTimeout(_ => {\n        let $el = vm.$refs.compo.picker.$el;\n        expect($el.querySelector('.el-date-table td.current')).to.exist;\n        vm.defaultValue = defaultValue;\n        triggerEvent(vm.$refs.compo.$el, 'mouseenter');\n        setTimeout(_ => {\n          vm.$el.querySelector('.el-icon-circle-close').click();\n          setTimeout(_ => {\n            input.focus();\n            setTimeout(() => {\n              $el = vm.$refs.compo.picker.$el;\n              expect($el.querySelector('.el-date-table td.current')).to.not.exist;\n              expect($el.querySelector('.el-date-table td.default')).to.exist;\n              $el.querySelector('.el-date-table td.default').click();\n              setTimeout(() => {\n                expect(vm.value).to.eql(expectValue);\n                done();\n              }, DELAY);\n            }, DELAY);\n          }, DELAY);\n        }, DELAY);\n      }, DELAY);\n    });\n\n  });\n\n  describe('keydown', () => {\n    let input, datePicker;\n\n    beforeEach(done => {\n      vm = createVue({\n        template: '<el-date-picker ref=\"compo\" v-model=\"value\"></el-date-picker>',\n        data() {\n          return {\n            value: ''\n          };\n        }\n      }, true);\n      datePicker = vm.$refs.compo;\n      input = vm.$el.querySelector('input');\n      input.blur();\n      input.focus();\n      setTimeout(done, DELAY);\n    });\n\n    afterEach(() => destroyVM(vm));\n\n    it('tab', done => {\n      keyDown(input, TAB);\n      setTimeout(_ => {\n        expect(datePicker.pickerVisible).to.false;\n        done();\n      }, DELAY);\n    });\n\n    it('enter', done => {\n      input.value = '2000-10-1';\n      triggerEvent(input, 'input');\n      vm.$nextTick(_ => {\n        keyDown(input, ENTER);\n        setTimeout(_ => {\n          expect(datePicker.pickerVisible).to.false;\n          expect(datePicker.picker.date.getFullYear()).to.equal(2000);\n          expect(datePicker.picker.date.getMonth()).to.equal(9);\n          expect(datePicker.picker.date.getDate()).to.equal(1);\n          done();\n        }, DELAY);\n      });\n    });\n\n    it('arrow keys during typing does not navigate', done => {\n      const inputText = '2000-10-1';\n      input.value = inputText;\n      triggerEvent(input, 'input');\n      keyDown(input, LEFT);\n      vm.$nextTick(_ => {\n        expect(input.value).to.equal(inputText);\n        done();\n      });\n    });\n\n    it('arrow keys navigates', done => {\n      const date = new Date(2000, 9, 1);\n      const prevDate = new Date(2000, 9, 0);\n      vm.value = date;\n      vm.$nextTick(_ => {\n        keyDown(input, LEFT);\n        setTimeout(_ => {\n          expect(datePicker.pickerVisible).to.true;\n          expect(datePicker.picker.date.getFullYear()).to.equal(prevDate.getFullYear());\n          expect(datePicker.picker.date.getMonth()).to.equal(prevDate.getMonth());\n          expect(datePicker.picker.date.getDate()).to.equal(prevDate.getDate());\n          done();\n        }, DELAY);\n      });\n    });\n  });\n\n  describe('can be cleared using keyboard', () => {\n    afterEach(() => { destroyVM(vm); });\n\n    it('works for type=date, when blur', done => {\n      vm = createVue({\n        template: `\n          <el-date-picker ref=\"compo\" v-model=\"value\" format=\"yyyy-MM-dd\" type=\"date\" />\n        `,\n        data() {\n          return {\n            value: new Date()\n          };\n        }\n      }, true);\n\n      const input = vm.$el.querySelector('input');\n\n      input.blur();\n      input.focus();\n\n      setTimeout(_ => {\n        // NOTE: simplified test\n        vm.$refs.compo.userInput = '';\n        vm.$refs.compo.handleChange();\n        setTimeout(_ => {\n          expect(vm.value).to.equal(null);\n          done();\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('works for type=date, when keydown.enter', done => {\n      vm = createVue({\n        template: `\n          <el-date-picker ref=\"compo\" v-model=\"value\" format=\"yyyy-MM-dd\" type=\"date\" />\n        `,\n        data() {\n          return {\n            value: new Date()\n          };\n        }\n      }, true);\n\n      const input = vm.$el.querySelector('input');\n\n      input.blur();\n      input.focus();\n\n      setTimeout(_ => {\n        // NOTE: simplified test\n        vm.$refs.compo.userInput = '';\n        keyDown(input, ENTER);\n        setTimeout(_ => {\n          expect(vm.value).to.equal(null);\n          done();\n        }, DELAY);\n      }, DELAY);\n    });\n\n    // TODO: implement the same feature for range panels\n  });\n\n  describe('navigation', () => {\n    afterEach(() => { destroyVM(vm); });\n\n    const clickAndWait = (el) => {\n      el.click();\n      return wait();\n    };\n\n    let prevMonth, prevYear, nextMonth, nextYear, getYearLabel, getMonthLabel;\n\n    const initNavigationTest = async(value) => {\n      vm = createVue({\n        template: '<el-date-picker v-model=\"value\" ref=\"compo\" />',\n        data() {\n          return {\n            value\n          };\n        }\n      }, true);\n      vm.$refs.compo.$el.querySelector('input').focus();\n      await wait();\n      const $el = vm.$refs.compo.picker.$el;\n      prevMonth = $el.querySelector('button.el-icon-arrow-left');\n      prevYear = $el.querySelector('button.el-icon-d-arrow-left');\n      nextMonth = $el.querySelector('button.el-icon-arrow-right');\n      nextYear = $el.querySelector('button.el-icon-d-arrow-right');\n      getYearLabel = () => $el.querySelectorAll('.el-date-picker__header-label')[0].textContent;\n      getMonthLabel = () => $el.querySelectorAll('.el-date-picker__header-label')[1].textContent;\n    };\n\n    it('month, year', async() => {\n      await initNavigationTest(new Date(2000, 0, 1));\n      expect(getYearLabel()).to.include('2000');\n      expect(getMonthLabel()).to.include('1');\n\n      await clickAndWait(prevMonth);\n      expect(getYearLabel()).to.include('1999');\n      expect(getMonthLabel()).to.include('12');\n\n      await clickAndWait(prevYear);\n      expect(getYearLabel()).to.include('1998');\n      expect(getMonthLabel()).to.include('12');\n\n      await clickAndWait(nextMonth);\n      expect(getYearLabel()).to.include('1999');\n      expect(getMonthLabel()).to.include('1');\n\n      await clickAndWait(nextYear);\n      expect(getYearLabel()).to.include('2000');\n      expect(getMonthLabel()).to.include('1');\n    });\n\n    it('month with fewer dates', async() => {\n      // July has 31 days, June has 30\n      await initNavigationTest(new Date(2000, 6, 31));\n      await clickAndWait(prevMonth);\n      expect(getYearLabel()).to.include('2000');\n      expect(getMonthLabel()).to.include('6');\n    });\n\n    it('year with fewer Feburary dates', async() => {\n      // Feburary 2008 has 29 days, Feburary 2007 has 28\n      await initNavigationTest(new Date(2008, 1, 29));\n      await clickAndWait(prevYear);\n      expect(getYearLabel()).to.include('2007');\n      expect(getMonthLabel()).to.include('2');\n    });\n\n    it('month label with fewer dates', async() => {\n      await initNavigationTest(new Date(2000, 6, 31));\n      const $el = vm.$refs.compo.picker.$el;\n      const monthLabel = $el.querySelectorAll('.el-date-picker__header-label')[1];\n      await clickAndWait(monthLabel);\n      const juneLabel = $el.querySelectorAll('.el-month-table td a')[5];\n      await clickAndWait(juneLabel);\n      expect(getYearLabel()).to.include('2000');\n      expect(getMonthLabel()).to.include('6');\n    });\n  });\n\n  it('type:month', done => {\n    vm = createTest(DatePicker, {\n      type: 'month'\n    }, true);\n    const input = vm.$el.querySelector('input');\n\n    input.blur();\n    input.focus();\n\n    setTimeout(_ => {\n      expect(vm.picker.$el.querySelector('.el-month-table').style.display).to.be.empty;\n      expect(vm.picker.$el.querySelector('.el-year-table').style.display).to.be.equal('none');\n      vm.picker.$el.querySelector('.el-month-table a.cell').click();\n      expect(vm.pickerVisible).to.false;\n      done();\n    }, DELAY);\n  });\n\n  it('type:year', done => {\n    vm = createTest(DatePicker, {\n      type: 'year'\n    }, true);\n    const input = vm.$el.querySelector('input');\n\n    input.blur();\n    input.focus();\n\n    setTimeout(_ => {\n      expect(vm.picker.$el.querySelector('.el-year-table').style.display).to.empty;\n      expect(vm.picker.$el.querySelector('.el-month-table').style.display).to.be.equal('none');\n\n      const leftBtn = vm.picker.$el.querySelector('.el-icon-d-arrow-left');\n      const rightBtn = vm.picker.$el.querySelector('.el-icon-d-arrow-right');\n      let count = 20;\n\n      while (--count) {\n        leftBtn.click();\n      }\n      count = 18;\n      while (--count) {\n        rightBtn.click();\n      }\n\n      vm.picker.$el.querySelector('.el-year-table a.cell').click();\n      expect(vm.pickerVisible).to.false;\n      done();\n    }, DELAY);\n  });\n\n  describe('type:datetime', () => {\n    let vm;\n\n    afterEach(() => destroyVM(vm));\n\n    it('create', done => {\n      vm = createVue({\n        template: '<el-date-picker type=\"datetime\" v-model=\"value\" ref=\"compo\" />',\n        data() {\n          return {\n            value: ''\n          };\n        }\n      }, true);\n      const input = vm.$refs.compo.$el.querySelector('input');\n\n      input.blur();\n      input.focus();\n\n      setTimeout(_ => {\n        expect(vm.$refs.compo.picker.$el.querySelector('.el-time-panel')).to.ok;\n        done();\n      }, DELAY);\n    });\n\n    it('both picker show correct formated value (extract date-format and time-format from format property)', done => {\n      vm = createVue({\n        template: '<el-date-picker type=\"datetime\" v-model=\"value\" :format=\"format\" :pickerOptions=\"pickerOptions\" ref=\"compo\" />',\n        data() {\n          return {\n            value: new Date(2018, 2, 5, 10, 15, 24),\n            format: 'yyyy/MM/dd hh:mm A',\n            pickerOptions: null\n          };\n        }\n      }, true);\n\n      const input = vm.$refs.compo.$el.querySelector('input');\n      input.blur();\n      input.focus();\n      setTimeout(_ => {\n        const datePanel = vm.$refs.compo.picker;\n        const dateInput = datePanel.$el.querySelector('.el-date-picker__time-header > span:nth-child(1) input');\n        const timeInput = datePanel.$el.querySelector('.el-date-picker__time-header > span:nth-child(2) input');\n        timeInput.focus();\n        setTimeout(_ => {\n          // both input shows correct value\n          expect(dateInput.value).to.equal('2018/03/05');\n          expect(timeInput.value).to.equal('10:15 AM');\n\n          // change main format\n          vm.format = 'd-M-yy hh a';\n          setTimeout(_ => {\n            expect(dateInput.value).to.equal('5-3-18');\n            expect(timeInput.value).to.equal('10 am');\n\n            // change undocumented pickerOptions.format won't change picker format\n            vm.pickerOptions = { format: 'yyyy-MM-dd HH:mm:ss'};\n            setTimeout(_ => {\n              expect(dateInput.value).to.equal('5-3-18');\n              expect(timeInput.value).to.equal('10 am');\n              done();\n            }, DELAY);\n          }, DELAY);\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('both picker show correct value', done => {\n      vm = createVue({\n        template: '<el-date-picker type=\"datetime\" v-model=\"value\" ref=\"compo\" />',\n        data() {\n          return {\n            value: new Date(2000, 9, 1, 10, 0, 1)\n          };\n        }\n      }, true);\n\n      const input = vm.$refs.compo.$el.querySelector('input');\n      input.blur();\n      input.focus();\n      setTimeout(_ => {\n        const datePanel = vm.$refs.compo.picker;\n        const dateInput = datePanel.$el.querySelector('.el-date-picker__time-header > span:nth-child(1) input');\n        const timeInput = datePanel.$el.querySelector('.el-date-picker__time-header > span:nth-child(2) input');\n        timeInput.focus();\n        setTimeout(_ => {\n          const timePanel = datePanel.$refs.timepicker;\n          // both input shows correct value\n          expect(dateInput.value).to.equal('2000-10-01');\n          expect(timeInput.value).to.equal('10:00:01');\n          // time spinner highlight is correct\n          const [hours, minutes, seconds] = timePanel.$el.querySelectorAll('.el-time-spinner ul li.active');\n          expect(hours.textContent).to.include('10');\n          expect(minutes.textContent).to.include('00');\n          expect(seconds.textContent).to.include('01');\n          // sets value updates displayed value\n          vm.value = new Date(2001, 10, 2, 11, 1, 2);\n          setTimeout(_ => {\n            expect(dateInput.value).to.equal('2001-11-02');\n            expect(timeInput.value).to.equal('11:01:02');\n            const [hours, minutes, seconds] = timePanel.$el.querySelectorAll('.el-time-spinner ul li.active');\n            expect(hours.textContent).to.include('11');\n            expect(minutes.textContent).to.include('01');\n            expect(seconds.textContent).to.include('02');\n            expect(datePanel.visible).to.true;\n            expect(timePanel.visible).to.true;\n            done();\n          }, DELAY);\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('click now button', done => {\n      vm = createTest(DatePicker, {\n        type: 'datetime'\n      }, true);\n      const input = vm.$el.querySelector('input');\n\n      input.blur();\n      input.focus();\n\n      setTimeout(_ => {\n        const date = new Date(1999, 10, 10, 10, 10);\n\n        vm.picker.$el.querySelector('.el-picker-panel__link-btn').click();\n        setTimeout(_ => {\n          expect(vm.picker.date > date).to.true;\n          done();\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('click timepicker', done => {\n      vm = createTest(DatePicker, {\n        type: 'datetime'\n      }, true);\n      const input = vm.$el.querySelector('input');\n\n      input.blur();\n      input.focus();\n\n      setTimeout(_ => {\n        const input = vm.picker.$el.querySelectorAll('.el-date-picker__editor-wrap input')[1];\n        triggerEvent(input, 'focus');\n\n        setTimeout(_ => {\n          const timePanel = vm.picker.$el.querySelector('.el-time-panel');\n          expect(window.getComputedStyle(timePanel)).to.not.equal('none');\n          done();\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('input timepicker', done => {\n      vm = createTest(DatePicker, {\n        type: 'datetime'\n      }, true);\n      const input = vm.$el.querySelector('input');\n\n      input.blur();\n      input.focus();\n\n      setTimeout(_ => {\n        const input = vm.picker.$el.querySelectorAll('.el-date-picker__editor-wrap input')[1];\n\n        input.value = '20:30:33';\n        triggerEvent(input, 'change', true);\n        setTimeout(_ => {\n          expect(vm.picker.date.getHours()).to.equal(20);\n          expect(vm.picker.date.getMinutes()).to.equal(30);\n          expect(vm.picker.date.getSeconds()).to.equal(33);\n          done();\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('input date', done => {\n      vm = createTest(DatePicker, {\n        type: 'datetime'\n      }, true);\n      const input = vm.$el.querySelector('input');\n\n      input.blur();\n      input.focus();\n\n      setTimeout(_ => {\n        const input = vm.picker.$el.querySelector('.el-date-picker__editor-wrap input');\n\n        input.value = '2017-2-2';\n        triggerEvent(input, 'change', true);\n        setTimeout(_ => {\n          expect(vm.picker.date.getFullYear()).to.equal(2017);\n          expect(vm.picker.date.getMonth()).to.equal(1);\n          expect(vm.picker.date.getDate()).to.equal(2);\n          done();\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('select time', done => {\n      vm = createTest(DatePicker, {\n        type: 'datetime'\n      }, true);\n      const input = vm.$el.querySelector('input');\n\n      input.blur();\n      input.focus();\n\n      setTimeout(_ => {\n        const input = vm.picker.$el.querySelectorAll('.el-date-picker__editor-wrap input')[1];\n        input.blur();\n        input.focus();\n        input.blur();\n\n        setTimeout(_ => {\n          const button = vm.picker.$el.querySelector('.el-time-panel .confirm');\n          button.click();\n\n          setTimeout(_ => {\n            expect(input.value).to.exist;\n            done();\n          }, DELAY);\n        }, DELAY);\n      }, DELAY);\n    });\n\n    describe('change event', () => {\n      afterEach(() => destroyVM(vm));\n\n      it('pick date, emits on confirm', done => {\n        vm = createVue({\n          template: '<el-date-picker type=\"datetime\" v-model=\"value\" ref=\"compo\" />',\n          data() {\n            return {\n              value: ''\n            };\n          }\n        }, true);\n\n        const spy = sinon.spy();\n        vm.$refs.compo.$on('change', spy);\n\n        const input = vm.$refs.compo.$el.querySelector('input');\n        input.blur();\n        input.focus();\n\n        setTimeout(_ => {\n          vm.$refs.compo.picker.$el.querySelector('td.available').click();\n          setTimeout(_ => {\n            expect(spy.called).to.equal(false);\n            vm.$refs.compo.picker.$el.querySelector('.el-picker-panel__footer .el-button--default').click();\n            setTimeout(_ => {\n              expect(vm.value).is.a('date');\n              expect(spy.calledOnce).to.equal(true);\n              done();\n            }, DELAY);\n          }, DELAY);\n        }, DELAY);\n      });\n\n      it('input date, enter, emits on confirm', done => {\n        vm = createVue({\n          template: '<el-date-picker type=\"datetime\" v-model=\"value\" ref=\"compo\" />',\n          data() {\n            return {\n              value: ''\n            };\n          }\n        }, true);\n\n        const spy = sinon.spy();\n        vm.$refs.compo.$on('change', spy);\n\n        const input = vm.$refs.compo.$el.querySelector('input');\n        input.blur();\n        input.focus();\n\n        setTimeout(_ => {\n          const picker = vm.$refs.compo.picker;\n          // simplified change\n          picker.handleVisibleDateChange('2000-01-02');\n          setTimeout(_ => {\n            expect(picker.$el.querySelector('td.current').innerText.trim()).to.equal('2');\n            expect(spy.called).to.equal(false);\n            // keyDown does not work, event listener attached to document.body\n            picker.handleKeydown({ keyCode: ENTER, stopPropagation() {}, preventDefault() {} });\n            setTimeout(_ => {\n              expect(vm.value).is.a('date');\n              expect(spy.calledOnce).to.equal(true);\n              done();\n            }, DELAY);\n          }, DELAY);\n        }, DELAY);\n      });\n    });\n\n    describe('cancel time', () => {\n      afterEach(() => destroyVM(vm));\n\n      it('cancel to empty', done => {\n        vm = createVue({\n          template: '<el-date-picker type=\"datetime\" v-model=\"value\" ref=\"compo\" />',\n          data() {\n            return {\n              value: ''\n            };\n          }\n        }, true);\n\n        const input = vm.$refs.compo.$el.querySelector('input');\n        input.blur();\n        input.focus();\n\n        setTimeout(_ => {\n          const timeInput = vm.$refs.compo.picker.$el.querySelector('.el-date-picker__time-header > span:nth-child(2) input');\n          timeInput.focus();\n          setTimeout(_ => {\n            const cancel = vm.$refs.compo.picker.$refs.timepicker.$el.querySelector('button.cancel');\n            cancel.click();\n            setTimeout(_ => {\n              expect(vm.value).to.equal('');\n              expect(vm.$refs.compo.pickerVisible).to.true;\n              done();\n            }, DELAY);\n          }, DELAY);\n        }, DELAY);\n      });\n\n      it('cancel to old value', done => {\n        vm = createVue({\n          template: '<el-date-picker type=\"datetime\" v-model=\"value\" ref=\"compo\" />',\n          data() {\n            return {\n              value: new Date(2000, 9, 1, 10, 0, 0)\n            };\n          }\n        }, true);\n\n        const input = vm.$refs.compo.$el.querySelector('input');\n        input.blur();\n        input.focus();\n\n        const oldValue = vm.value.toISOString();\n\n        setTimeout(_ => {\n          const timeInput = vm.$refs.compo.picker.$el.querySelector('.el-date-picker__time-header > span:nth-child(2) input');\n          timeInput.focus();\n          setTimeout(_ => {\n            const nextTime = vm.$refs.compo.picker.$refs.timepicker.$el.querySelector('.active + *');\n            nextTime.click();\n            setTimeout(_ => {\n              const cancel = vm.$refs.compo.picker.$refs.timepicker.$el.querySelector('button.cancel');\n              cancel.click();\n              setTimeout(_ => {\n                expect(vm.value.toISOString()).to.equal(oldValue);\n                expect(vm.$refs.compo.pickerVisible).to.true;\n                done();\n              }, DELAY);\n            }, DELAY);\n          }, DELAY);\n        }, DELAY);\n      });\n    });\n\n    it('now button: can not choose disabled date', done => {\n      vm = createVue({\n        template: '<el-date-picker type=\"datetime\" v-model=\"value\" ref=\"compo\" :pickerOptions=\"pickerOptions\" />',\n        data() {\n          return {\n            value: '',\n            pickerOptions: {\n              disabledDate() { return true; }\n            }\n          };\n        }\n      }, true);\n      vm.$refs.compo.$el.querySelector('input').focus();\n      setTimeout(_ => {\n        // click now button\n        vm.$refs.compo.picker.$el.querySelector('.el-picker-panel__footer .el-button--text').click();\n        setTimeout(_ => {\n          expect(vm.value).to.equal('');\n          done();\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('select time honors picked date', done => {\n      vm = createVue({\n        template: '<el-date-picker type=\"datetime\" v-model=\"value\" ref=\"compo\" />',\n        data() {\n          return {\n            value: new Date(2000, 9, 1, 12, 0, 0) // 2010-10-01 12:00:00\n          };\n        }\n      }, true);\n      vm.$refs.compo.$el.querySelector('input').focus();\n      setTimeout(_ => {\n        // changed month / year should not effect picked time\n        vm.$refs.compo.picker.$el.querySelector('.el-date-picker__header .el-icon-arrow-right').click();\n        setTimeout(_ => {\n          vm.$refs.compo.picker.$el.querySelector('.el-date-picker__header .el-icon-d-arrow-right').click();\n          setTimeout(_ => {\n            // simulate time selection\n            // handleTimePick takes Date object, but it's non-time fields are ignored\n            vm.$refs.compo.picker.handleTimePick(new Date(2001, 10, 10, 13, 14, 15), false, false);\n            setTimeout(_ => {\n              expect(vm.value.getFullYear()).to.equal(2000);\n              expect(vm.value.getMonth()).to.equal(9);\n              expect(vm.value.getDate()).to.equal(1);\n              expect(vm.value.getHours()).to.equal(13);\n              expect(vm.value.getMinutes()).to.equal(14);\n              expect(vm.value.getSeconds()).to.equal(15);\n              done();\n            }, DELAY);\n          }, DELAY);\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('confirm button honors picked date', done => {\n      vm = createVue({\n        template: '<el-date-picker type=\"datetime\" v-model=\"value\" ref=\"compo\" />',\n        data() {\n          return {\n            value: new Date(2000, 9, 1, 12, 0, 0) // 2010-10-01 12:00:00\n          };\n        }\n      }, true);\n      vm.$refs.compo.$el.querySelector('input').focus();\n      setTimeout(_ => {\n        // changed month / year should not effect picked time\n        vm.$refs.compo.picker.$el.querySelector('.el-date-picker__header .el-icon-arrow-right').click();\n        setTimeout(_ => {\n          vm.$refs.compo.picker.$el.querySelector('.el-date-picker__header .el-icon-d-arrow-right').click();\n          setTimeout(_ => {\n            // click confirm button\n            vm.$refs.compo.picker.$el.querySelector('.el-picker-panel__footer .el-button--default').click();\n            setTimeout(_ => {\n              expect(vm.value.getFullYear()).to.equal(2000);\n              expect(vm.value.getMonth()).to.equal(9);\n              expect(vm.value.getDate()).to.equal(1);\n              expect(vm.value.getHours()).to.equal(12);\n              expect(vm.value.getMinutes()).to.equal(0);\n              expect(vm.value.getSeconds()).to.equal(0);\n              done();\n            }, DELAY);\n          }, DELAY);\n        }, DELAY);\n      }, DELAY);\n    });\n  });\n\n  describe('type:week', () => {\n    let vm;\n\n    beforeEach(done => {\n      vm = createTest(DatePicker, {\n        type: 'week'\n      }, true);\n      const input = vm.$el.querySelector('input');\n\n      input.blur();\n      input.focus();\n      setTimeout(done, DELAY);\n    });\n\n    afterEach(() => destroyVM(vm));\n\n    it('create', () => {\n      expect(vm.picker.$el.querySelector('.is-week-mode')).to.be.ok;\n    });\n\n    it('click cell', done => {\n      vm.picker.$el.querySelector('.el-date-table__row .available').click();\n      setTimeout(_ => {\n        expect(vm.picker.week).to.exist;\n        done();\n      }, DELAY);\n    });\n\n    it('click year label', () => {\n      vm.picker.$el.querySelector('.el-date-picker__header-label').click();\n      expect(vm.picker.currentView).to.equal('year');\n    });\n\n    it('click month label', () => {\n      vm.picker.$el.querySelectorAll('.el-date-picker__header-label')[1].click();\n      expect(vm.picker.currentView).to.equal('month');\n    });\n\n    it('select month', done => {\n      vm.picker.$el.querySelectorAll('.el-date-picker__header-label')[1].click();\n\n      setTimeout(_ => {\n        vm.picker.$el.querySelector('.el-month-table .cell').click();\n\n        setTimeout(_ => {\n          expect(vm.picker.$el.querySelector('.el-date-table.is-week-mode').style.display).to.equal('');\n          done();\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('highlight correctly', done => {\n      vm = createVue({\n        template: '<el-date-picker type=\"week\" v-model=\"value\" ref=\"compo\" />',\n        data() {\n          return {\n            value: null\n          };\n        }\n      }, true);\n\n      const input = vm.$el.querySelector('input');\n      input.blur();\n      input.focus();\n\n      setTimeout(() => {\n        const pickerEl = vm.$refs.compo.picker.$el;\n        const numberOfHighlightRows = () => pickerEl.querySelectorAll('.el-date-table__row.current').length;\n        expect(numberOfHighlightRows()).to.equal(0);\n        setTimeout(() => {\n          pickerEl.querySelector('.el-date-table__row ~ .el-date-table__row td.available').click();\n          setTimeout(() => {\n            expect(vm.value).to.exist;\n            input.blur();\n            input.focus();\n            setTimeout(() => {\n              expect(numberOfHighlightRows()).to.equal(1);\n              // test: next month should not have highlight\n              pickerEl.querySelector('.el-icon-arrow-right').click();\n              setTimeout(() => {\n                expect(numberOfHighlightRows()).to.equal(0);\n                // test: next year should not have highlight\n                pickerEl.querySelector('.el-icon-arrow-left').click(); // go back one month\n                pickerEl.querySelector('.el-icon-d-arrow-right').click();\n                setTimeout(() => {\n                  expect(numberOfHighlightRows()).to.equal(0);\n                  done();\n                }, DELAY);\n              }, DELAY);\n            }, DELAY);\n          }, DELAY);\n        }, DELAY);\n      }, DELAY);\n    });\n  });\n\n  describe('type:dates', () => {\n    let vm;\n\n    beforeEach(done => {\n      vm = createVue({\n        template: '<el-date-picker type=\"dates\" value-format=\"timestamp\" v-model=\"value\" ref=\"compo\" />',\n        data() {\n          return {\n            value: []\n          };\n        }\n      }, true);\n      const input = vm.$el.querySelector('input');\n\n      input.blur();\n      input.focus();\n      setTimeout(done, DELAY);\n    });\n\n    afterEach(() => destroyVM(vm));\n\n    it('click cell', done => {\n      const td = vm.$refs.compo.picker.$el.querySelector('.el-date-table__row .available');\n      td.click();\n      setTimeout(_ => {\n        expect(vm.$refs.compo.value).to.be.an('array');\n        expect(vm.$refs.compo.value.length).to.equal(1);\n        expect(vm.$refs.compo.value[0]).to.be.a('number');\n        expect(vm.value.length).to.equal(1);\n        done();\n      }, DELAY);\n    });\n\n    it('restore value when cancel', done => {\n      const td = vm.$refs.compo.picker.$el.querySelector('.el-date-table__row .available');\n      td.click();\n      setTimeout(_ => {\n        vm.$refs.compo.handleClose();\n        setTimeout(() => {\n          expect(vm.value.length).to.equal(0);\n          done();\n        }, DELAY);\n      }, DELAY);\n    });\n  });\n\n  describe('type:daterange', () => {\n    afterEach(() => destroyVM(vm));\n\n    it('works', done => {\n      vm = createVue({\n        template: '<el-date-picker type=\"daterange\" v-model=\"value\" ref=\"compo\" />',\n        data() {\n          return {\n            value: ''\n          };\n        }\n      }, true);\n\n      const rangePicker = vm.$refs.compo;\n      const inputs = rangePicker.$el.querySelectorAll('input');\n      inputs[0].focus();\n\n      setTimeout(_ => {\n        const panels = rangePicker.picker.$el.querySelectorAll('.el-date-range-picker__content');\n        expect(Array.prototype.slice.call(panels)).to.length(2);\n        panels[0].querySelector('td.available').click();\n        setTimeout(_ => {\n          panels[1].querySelector('td.available').click();\n          setTimeout(_ => {\n            inputs[0].focus();\n            setTimeout(_ => {\n              // correct highlight\n              const startDate = rangePicker.picker.$el.querySelectorAll('.start-date');\n              const endDate = rangePicker.picker.$el.querySelectorAll('.end-date');\n              const inRangeDate = rangePicker.picker.$el.querySelectorAll('.in-range');\n              expect(startDate.length).to.equal(1);\n              expect(endDate.length).to.equal(1);\n              expect(inRangeDate.length).to.above(0);\n              // value is array\n              expect(vm.value).to.be.an.instanceof(Array);\n              // input text is something like date string\n              expect(inputs[0].value.length).to.equal(10);\n              expect(inputs[1].value.length).to.equal(10);\n              done();\n            }, DELAY);\n          }, DELAY);\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('works: reverse selection', done => {\n      vm = createVue({\n        template: '<el-date-picker type=\"daterange\" v-model=\"value\" ref=\"compo\" />',\n        data() {\n          return {\n            value: ''\n          };\n        }\n      }, true);\n\n      const rangePicker = vm.$refs.compo;\n      const inputs = rangePicker.$el.querySelectorAll('input');\n      inputs[0].focus();\n\n      setTimeout(_ => {\n        const panels = rangePicker.picker.$el.querySelectorAll('.el-date-range-picker__content');\n        expect(Array.prototype.slice.call(panels)).to.length(2);\n        panels[1].querySelector('td.available').click();\n        setTimeout(_ => {\n          panels[0].querySelector('td.available').click();\n          setTimeout(_ => {\n            inputs[0].focus();\n            setTimeout(_ => {\n              // correct highlight\n              const startDate = rangePicker.picker.$el.querySelectorAll('.start-date');\n              const endDate = rangePicker.picker.$el.querySelectorAll('.end-date');\n              const inRangeDate = rangePicker.picker.$el.querySelectorAll('.in-range');\n              expect(startDate.length).to.equal(1);\n              expect(endDate.length).to.equal(1);\n              expect(inRangeDate.length).to.above(0);\n              // value is array\n              expect(vm.value).to.be.an.instanceof(Array);\n              // input text is something like date string\n              expect(inputs[0].value.length).to.equal(10);\n              expect(inputs[1].value.length).to.equal(10);\n              // result array is properly ordered\n              expect(vm.value[0].getTime() < vm.value[1].getTime()).to.be.true;\n              done();\n            }, DELAY);\n          }, DELAY);\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('type:daterange unlink:true', done => {\n      vm = createVue({\n        template: '<el-date-picker type=\"daterange\" unlink-panels v-model=\"value\" ref=\"compo\" />',\n        data() {\n          return {\n            value: [new Date(2000, 9, 1), new Date(2000, 9, 2)]\n          };\n        }\n      }, true);\n\n      const rangePicker = vm.$refs.compo;\n      const inputs = rangePicker.$el.querySelectorAll('input');\n      setTimeout(_ => {\n        inputs[0].focus();\n        setTimeout(_ => {\n          const panels = rangePicker.picker.$el.querySelectorAll('.el-date-range-picker__content');\n          const left = panels[0].querySelector('.el-date-range-picker__header');\n          const right = panels[1].querySelector('.is-right .el-date-range-picker__header');\n          const leftText = left.textContent.match(/\\d+/g).map(i => Number(i));\n          const rightText = right.textContent.match(/\\d+/g).map(i => Number(i));\n          expect(rightText[1] - leftText[1]).to.equal(1); // one month\n          done();\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('unlink panels', done => {\n      vm = createTest(DatePicker, {\n        type: 'daterange',\n        unlinkPanels: true\n      }, true);\n      const input = vm.$el.querySelector('input');\n\n      input.click();\n\n      setTimeout(_ => {\n        const panels = vm.picker.$el.querySelectorAll('.el-date-range-picker__content');\n\n        expect(Array.prototype.slice.call(panels)).to.length(2);\n\n        panels[1].querySelector('.el-icon-d-arrow-right').click();\n        panels[1].querySelector('.el-icon-arrow-right').click();\n\n        setTimeout(_ => {\n          const left = panels[0].querySelector('.el-date-range-picker__header');\n          const right = panels[1].querySelector('.is-right .el-date-range-picker__header');\n          const leftText = left.textContent.match(/\\d+/g).map(i => Number(i));\n          const rightText = right.textContent.match(/\\d+/g).map(i => Number(i));\n\n          expect((rightText[1] <= 2 ? rightText[0] - 1 : rightText[0]) - leftText[0]).to.equal(1);\n          expect((rightText[1] <= 2 ? rightText[1] + 12 : rightText[1]) - leftText[1]).to.equal(2);\n\n          done();\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('daylight saving time highlight', done => {\n      // Run test with environment variable TZ=Australia/Sydney\n      // The following test uses Australian Eastern Daylight Time (AEDT)\n      // AEST -> AEDT shift happened on 2016-10-02 02:00:00\n      vm = createVue({\n        template: '<el-date-picker type=\"daterange\" v-model=\"value\" ref=\"compo\" />',\n        data() {\n          return {\n            value: [new Date(2016, 9, 1), new Date(2016, 9, 3)]\n          };\n        }\n      }, true);\n\n      const rangePicker = vm.$refs.compo;\n      const inputs = rangePicker.$el.querySelectorAll('input');\n      inputs[0].focus();\n\n      setTimeout(_ => {\n        const startDate = rangePicker.picker.$el.querySelectorAll('.start-date');\n        const endDate = rangePicker.picker.$el.querySelectorAll('.end-date');\n        expect(startDate.length).to.equal(1);\n        expect(endDate.length).to.equal(1);\n        done();\n      }, DELAY);\n    });\n\n    it('clear value', done => {\n      vm = createVue({\n        template: '<el-date-picker type=\"daterange\" v-model=\"value\" ref=\"compo\" />',\n        data() {\n          return {\n            value: [new Date(2000, 9, 1), new Date(2000, 9, 2)]\n          };\n        }\n      }, true);\n\n      vm.$el.querySelector('input').focus();\n\n      setTimeout(_ => {\n        vm.$refs.compo.showClose = true;\n        vm.$refs.compo.handleClickIcon({ stopPropagation: () => null });\n        setTimeout(_ => {\n          expect(vm.value).to.equal(null);\n          done();\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('change event', done => {\n      vm = createVue({\n        template: `\n          <el-date-picker\n            ref=\"compo\"\n            v-model=\"value\"\n            type=\"daterange\" />`,\n        data() {\n          return {\n            value: ''\n          };\n        }\n      }, true);\n\n      const spy = sinon.spy();\n      vm.$refs.compo.$on('change', spy);\n\n      const input = vm.$el.querySelector('input');\n\n      input.blur();\n      input.focus();\n\n      setTimeout(_ => {\n        const picker = vm.$refs.compo.picker;\n        setTimeout(_ => {\n          picker.$el.querySelector('td.available').click();\n          setTimeout(_ => {\n            picker.$el.querySelector('td.available ~ td.available').click();\n            setTimeout(_ => {\n              expect(spy.calledOnce).to.equal(true);\n              // change event is not emitted if used does not change value\n              // datarange also requires proper array equality check\n              input.blur();\n              input.focus();\n              setTimeout(_ => {\n                const startCell = picker.$el.querySelector('td.start-date');\n                const endCell = picker.$el.querySelector('td.end-date');\n                startCell.click();\n                setTimeout(_ => {\n                  endCell.click();\n                  setTimeout(_ => {\n                    expect(spy.calledOnce).to.equal(true);\n                    done();\n                  }, DELAY);\n                }, DELAY);\n              }, DELAY);\n            }, DELAY);\n          }, DELAY);\n        }, DELAY);\n      }, DELAY);\n    });\n\n    describe('default value', () => {\n      it('single', done => {\n        let defaultValue = '2000-10-01';\n        let expectValue = [new Date(2000, 9, 1), new Date(2000, 9, 2)];\n\n        vm = createVue({\n          template: '<el-date-picker type=\"daterange\" v-model=\"value\" ref=\"compo\" :default-value=\"defaultValue\" />',\n          data() {\n            return {\n              value: '',\n              defaultValue\n            };\n          }\n        }, true);\n\n        vm.$el.querySelector('input').focus();\n        setTimeout(_ => {\n          const $el = vm.$refs.compo.picker.$el;\n          const defaultEls = $el.querySelectorAll('.el-date-table td.default');\n          expect(defaultEls.length).to.equal(1);\n          defaultEls[0].click();\n          setTimeout(_ => {\n            $el.querySelector('.el-date-table td.default + td').click();\n            setTimeout(_ => {\n              expect(vm.value).to.eql(expectValue);\n              done();\n            }, DELAY);\n          }, DELAY);\n        }, DELAY);\n      });\n\n      it('array', done => {\n        let defaultValue = ['2000-01-01', '2000-02-01'];\n        let expectValue = [new Date(2000, 0, 1), new Date(2000, 1, 1)];\n\n        vm = createVue({\n          template: '<el-date-picker type=\"daterange\" v-model=\"value\" ref=\"compo\" :default-value=\"defaultValue\" />',\n          data() {\n            return {\n              value: '',\n              defaultValue\n            };\n          }\n        }, true);\n\n        vm.$el.querySelector('input').focus();\n        setTimeout(_ => {\n          const defaultEls = vm.$refs.compo.picker.$el.querySelectorAll('.el-date-table td.default');\n          expect(defaultEls.length).to.equal(2);\n          defaultEls[0].click();\n          setTimeout(_ => {\n            defaultEls[1].click();\n            setTimeout(_ => {\n              expect(vm.value).to.eql(expectValue);\n              done();\n            }, DELAY);\n          }, DELAY);\n        }, DELAY);\n      });\n    });\n  });\n\n  describe('type:datetimerange', () => {\n    let vm;\n    beforeEach(done => {\n      vm = createTest(DatePicker, {\n        type: 'datetimerange',\n        value: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)]\n      }, true);\n\n      vm.$el.click();\n\n      setTimeout(done, DELAY);\n    });\n\n    afterEach(() => destroyVM(vm));\n\n    it('create', () => {\n      expect(Array.prototype.slice.call(vm.picker.$el.querySelectorAll('.el-time-panel'))).to.length(2);\n    });\n\n    it('select daterange', done => {\n      const pickers = vm.picker.$el.querySelectorAll('.el-date-range-picker__content');\n      const leftCell = pickers[0].querySelector('td.available');\n      const rightCell = pickers[1].querySelector('td.available');\n\n      triggerEvent(leftCell, 'mousemove', true);\n      triggerEvent(leftCell, 'click', true);\n      setTimeout(_ => {\n        triggerEvent(rightCell, 'mousemove', true);\n        triggerEvent(rightCell, 'click', true);\n\n        setTimeout(_ => {\n          const {\n            minDate,\n            maxDate\n          } = vm.picker;\n          const minMonth = minDate.getMonth();\n          const maxMonth = maxDate.getMonth();\n\n          expect([1, -11]).to.include(maxMonth - minMonth); // one month\n          done();\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('select daterange with defaultTime min', done => {\n      destroyVM(vm); // nuke beforeEach's vm before creating our own\n      vm = createVue({\n        template: `\n          <el-date-picker ref=\"compo\" type=\"datetimerange\" v-model=\"value\" :default-time=\"defaultTime\"></el-date-picker>\n        `,\n        data() {\n          return {\n            value: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],\n            defaultTime: ['11:59:59']\n          };\n        }\n      }, true).$refs.compo;\n\n      setTimeout(_ => {\n        vm.$el.click();\n\n        setTimeout(_ => {\n          const pickers = vm.picker.$el.querySelectorAll('.el-date-range-picker__content');\n          const leftCell = pickers[0].querySelector('td.available');\n          const rightCell = pickers[1].querySelector('td.available');\n\n          const {\n            minDate,\n            maxDate\n          } = vm.picker;\n          expect(minDate.getHours()).to.be.equal(10);\n          expect(minDate.getMinutes()).to.be.equal(10);\n          expect(minDate.getSeconds()).to.be.equal(0);\n          expect(maxDate.getHours()).to.be.equal(10);\n          expect(maxDate.getMinutes()).to.be.equal(10);\n          expect(maxDate.getSeconds()).to.be.equal(0);\n\n          triggerEvent(leftCell, 'mousemove', true);\n          setTimeout(_ => {\n            triggerEvent(leftCell, 'click', true);\n            setTimeout(_ => {\n              triggerEvent(rightCell, 'mousemove', true);\n              setTimeout(_ => {\n                expect(rightCell.classList.contains('in-range')).to.be.true;\n\n                triggerEvent(rightCell, 'click', true);\n                setTimeout(_ => {\n                  const {\n                    minDate,\n                    maxDate\n                  } = vm.picker;\n                  expect(minDate.getHours()).to.be.equal(11);\n                  expect(minDate.getMinutes()).to.be.equal(59);\n                  expect(minDate.getSeconds()).to.be.equal(59);\n                  expect(maxDate.getHours()).to.be.equal(0);\n                  expect(maxDate.getMinutes()).to.be.equal(0);\n                  expect(maxDate.getSeconds()).to.be.equal(0);\n                  done();\n                }, DELAY);\n              }, DELAY);\n            }, DELAY);\n          }, DELAY);\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('both picker show correct formated value (extract date-format and time-format from format property)', done => {\n      destroyVM(vm); // nuke beforeEach's vm before creating our own\n      vm = createVue({\n        template: `\n          <el-date-picker ref=\"compo\" type=\"datetimerange\" v-model=\"value\" :format=\"format\"></el-date-picker>\n        `,\n        data() {\n          return {\n            value: [new Date(2018, 8, 5, 10, 20, 30), new Date(2018, 8, 15, 15, 35, 45)],\n            format: 'yyyy/MM/dd hh:mm A'\n          };\n        }\n      }, true);\n\n      setTimeout(_ => {\n        const compo = vm.$refs.compo;\n        compo.$el.click();\n        setTimeout(_ => {\n          const pickers = compo.picker.$el.querySelectorAll('.el-date-range-picker__time-header .el-date-range-picker__editors-wrap');\n          const left = {\n            dateInput: pickers[0].querySelector('.el-date-range-picker__time-picker-wrap:nth-child(1) input'),\n            timeInput: pickers[0].querySelector('.el-date-range-picker__time-picker-wrap:nth-child(2) input')\n          };\n          const right = {\n            dateInput: pickers[1].querySelector('.el-date-range-picker__time-picker-wrap:nth-child(1) input'),\n            timeInput: pickers[1].querySelector('.el-date-range-picker__time-picker-wrap:nth-child(2) input')\n          };\n          left.timeInput.focus();\n          right.timeInput.focus();\n\n          // all inputs shows correct value\n          expect(left.dateInput.value).to.equal('2018/09/05');\n          expect(left.timeInput.value).to.equal('10:20 AM');\n          expect(right.dateInput.value).to.equal('2018/09/15');\n          expect(right.timeInput.value).to.equal('03:35 PM');\n\n          vm.format = 'd-M-yy HH:mm:ss';\n          setTimeout(_ => {\n            expect(left.dateInput.value).to.equal('5-9-18');\n            expect(left.timeInput.value).to.equal('10:20:30');\n            expect(right.dateInput.value).to.equal('15-9-18');\n            expect(right.timeInput.value).to.equal('15:35:45');\n\n            done();\n          }, DELAY);\n\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('select daterange with defaultTime min & max', done => {\n      destroyVM(vm); // nuke beforeEach's vm before creating our own\n      vm = createVue({\n        template: `\n          <el-date-picker ref=\"compo\" type=\"datetimerange\" v-model=\"value\" :default-time=\"defaultTime\"></el-date-picker>\n        `,\n        data() {\n          return {\n            value: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],\n            defaultTime: ['11:59:59', '18:00:00']\n          };\n        }\n      }, true).$refs.compo;\n\n      setTimeout(_ => {\n        vm.$el.click();\n\n        setTimeout(_ => {\n          const pickers = vm.picker.$el.querySelectorAll('.el-date-range-picker__content');\n          const leftCell = pickers[0].querySelector('td.available');\n          const rightCell = pickers[1].querySelector('td.available');\n\n          const {\n            minDate,\n            maxDate\n          } = vm.picker;\n          expect(minDate.getHours()).to.be.equal(10);\n          expect(minDate.getMinutes()).to.be.equal(10);\n          expect(minDate.getSeconds()).to.be.equal(0);\n          expect(maxDate.getHours()).to.be.equal(10);\n          expect(maxDate.getMinutes()).to.be.equal(10);\n          expect(maxDate.getSeconds()).to.be.equal(0);\n\n          triggerEvent(leftCell, 'mousemove', true);\n          setTimeout(_ => {\n            triggerEvent(leftCell, 'click', true);\n            setTimeout(_ => {\n              triggerEvent(rightCell, 'mousemove', true);\n              setTimeout(_ => {\n                expect(rightCell.classList.contains('in-range')).to.be.true;\n                triggerEvent(rightCell, 'click', true);\n                setTimeout(_ => {\n                  const {\n                    minDate,\n                    maxDate\n                  } = vm.picker;\n                  expect(minDate.getHours()).to.be.equal(11);\n                  expect(minDate.getMinutes()).to.be.equal(59);\n                  expect(minDate.getSeconds()).to.be.equal(59);\n                  expect(maxDate.getHours()).to.be.equal(18);\n                  expect(maxDate.getMinutes()).to.be.equal(0);\n                  expect(maxDate.getSeconds()).to.be.equal(0);\n                  done();\n                }, DELAY);\n              }, DELAY);\n            }, DELAY);\n          }, DELAY);\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('prev/next month button', done => {\n      const leftBtn = vm.picker.$el.querySelector('.is-left .el-icon-arrow-left');\n      const rightBtn = vm.picker.$el.querySelector('.is-right .el-icon-arrow-right');\n      const left = vm.picker.$el.querySelector('.is-left .el-date-range-picker__header');\n      const right = vm.picker.$el.querySelector('.is-right .el-date-range-picker__header');\n      const leftText = left.textContent.match(/\\d+/g);\n      const rightText = right.textContent.match(/\\d+/g);\n      let count = 20;\n      while (--count) {\n        leftBtn.click();\n      }\n      count = 18;\n      while (--count) {\n        rightBtn.click();\n      }\n\n      setTimeout(_ => {\n        const newLeft = left.textContent.match(/\\d+/g);\n        const newRight = right.textContent.match(/\\d+/g);\n        expect(leftText[1] - newLeft[1]).to.equal(2);\n        expect(leftText[0] - newLeft[0]).to.equal(0);\n        expect([-10, 2]).to.include(rightText[1] - newRight[1]);\n        expect([0, 1]).to.include(rightText[0] - newRight[0]);\n        done();\n      }, DELAY);\n    });\n\n    it('prev/next year button', done => {\n      const leftBtn = vm.picker.$el.querySelector('.is-left .el-icon-d-arrow-left');\n      const rightBtn = vm.picker.$el.querySelector('.is-right .el-icon-d-arrow-right');\n      const left = vm.picker.$el.querySelector('.is-left .el-date-range-picker__header');\n      const right = vm.picker.$el.querySelector('.is-right .el-date-range-picker__header');\n      const leftText = left.textContent.match(/\\d+/g);\n      const rightText = right.textContent.match(/\\d+/g);\n\n      let count = 20;\n      while (--count) {\n        leftBtn.click();\n      }\n      count = 18;\n      while (--count) {\n        rightBtn.click();\n      }\n\n      setTimeout(_ => {\n        const newLeft = left.textContent.match(/\\d+/g);\n        const newRight = right.textContent.match(/\\d+/g);\n\n        expect(leftText[1] - newLeft[1]).to.equal(0);\n        expect(leftText[0] - newLeft[0]).to.equal(2);\n        expect(rightText[1] - newRight[1]).to.equal(0);\n        expect(rightText[0] - newRight[0]).to.equal(2);\n        done();\n      }, DELAY);\n    });\n\n    it('input date', done => {\n      const input = vm.picker.$el.querySelector('.el-date-range-picker__editors-wrap input');\n      const pickers = vm.picker.$el.querySelectorAll('.el-date-range-picker__content');\n      const leftCell = pickers[0].querySelector('td.available');\n      const rightCell = pickers[1].querySelector('td.available');\n\n      triggerEvent(leftCell, 'mousemove', true);\n      triggerEvent(leftCell, 'click', true);\n      setTimeout(_ => {\n        triggerEvent(rightCell, 'mousemove', true);\n        triggerEvent(rightCell, 'click', true);\n\n        setTimeout(_ => {\n          triggerEvent(input, 'input');\n          input.value = '1989-6-4';\n          triggerEvent(input, 'change', true);\n\n          setTimeout(_ => {\n            const minDate = vm.picker.minDate;\n            expect(minDate.getFullYear()).to.equal(1989);\n            expect(minDate.getMonth()).to.equal(5);\n            expect(minDate.getDate()).to.equal(4);\n            done();\n          }, DELAY);\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('input date when minDate > maxDate', done => {\n      const input = vm.picker.$el.querySelector('.el-date-range-picker__editors-wrap input');\n      const input2 = vm.picker.$el.querySelectorAll('.el-date-range-picker__editors-wrap input')[2];\n      const pickers = vm.picker.$el.querySelectorAll('.el-date-range-picker__content');\n      const leftCell = pickers[0].querySelector('td.available');\n      const rightCell = pickers[1].querySelector('td.available');\n\n      triggerEvent(leftCell, 'mousemove', true);\n      triggerEvent(leftCell, 'click', true);\n      setTimeout(_ => {\n        triggerEvent(rightCell, 'mousemove', true);\n        triggerEvent(rightCell, 'click', true);\n\n        setTimeout(_ => {\n          input2.value = '1988-6-4';\n          triggerEvent(input2, 'input');\n          triggerEvent(input2, 'change');\n\n          setTimeout(_ => {\n            input.value = '1989-6-4';\n            triggerEvent(input, 'input');\n            triggerEvent(input, 'change', true);\n            setTimeout(_ => {\n              expect(vm.picker.maxDate >= vm.picker.minDate).to.true;\n              done();\n            }, DELAY);\n          }, DELAY);\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('select time', done => {\n      const input = vm.picker.$el.querySelectorAll('.el-date-range-picker__editors-wrap input')[1];\n      input.blur();\n      input.focus();\n      input.blur();\n\n      setTimeout(_ => {\n        const button = vm.picker.$el.querySelector('.el-date-range-picker__time-picker-wrap .el-time-panel .confirm');\n        button.click();\n\n        setTimeout(_ => {\n          expect(input.value).to.exist;\n          done();\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('confirm honors disabledDate', done => {\n      destroyVM(vm); // nuke beforeEach's vm before creating our own\n\n      vm = createVue({\n        template: '<el-date-picker type=\"datetimerange\" value-format=\"yyyy-MM-dd HH:mm:ss\" v-model=\"value\" :picker-options=\"pickerOptions\" ref=\"compo\" />',\n        data() {\n          return {\n            pickerOptions: {\n              disabledDate(date) {\n                return date.getTime() < new Date(2000, 9, 1); // 2000-10-01\n              }\n            },\n            value: ['2000-10-02 00:00:00', '2000-10-03 00:00:00']\n          };\n        }\n      }, true);\n      const input = vm.$el.querySelector('input');\n\n      input.blur();\n      input.focus();\n      setTimeout(_ => {\n        // simulate user input of invalid date\n        vm.$refs.compo.picker.handleDateChange('2000-09-01', 'min');\n        setTimeout(_ => {\n          expect(vm.$refs.compo.picker.btnDisabled).to.equal(true); // invalid input disables button\n          vm.$refs.compo.picker.handleConfirm();\n          setTimeout(_ => {\n            expect(vm.$refs.compo.pickerVisible).to.equal(true); // can not confirm, picker remains open\n            // simulate click outside to close picker\n            vm.$refs.compo.handleClose();\n            setTimeout(_ => {\n              expect(vm.value).to.eql(['2000-10-02 00:00:00', '2000-10-03 00:00:00']);\n              done();\n            }, DELAY);\n          }, DELAY);\n        }, DELAY);\n      }, DELAY);\n    });\n  });\n\n  describe('type:monthrange', () => {\n    afterEach(() => destroyVM(vm));\n\n    it('works', done => {\n      vm = createVue({\n        template: '<el-date-picker type=\"monthrange\" v-model=\"value\" ref=\"compo\" />',\n        data() {\n          return {\n            value: ''\n          };\n        }\n      }, true);\n\n      const rangePicker = vm.$refs.compo;\n      const inputs = rangePicker.$el.querySelectorAll('input');\n      inputs[0].focus();\n\n      setTimeout(_ => {\n        const panels = rangePicker.picker.$el.querySelectorAll('.el-date-range-picker__content');\n        expect(Array.prototype.slice.call(panels)).to.length(2);\n        panels[0].querySelector('td:not(.disabled)').click();\n        setTimeout(_ => {\n          panels[1].querySelector('td:not(.disabled)').click();\n          setTimeout(_ => {\n            inputs[0].focus();\n            setTimeout(_ => {\n              // correct highlight\n              const startDate = rangePicker.picker.$el.querySelectorAll('.start-date');\n              const endDate = rangePicker.picker.$el.querySelectorAll('.end-date');\n              const inRangeDate = rangePicker.picker.$el.querySelectorAll('.in-range');\n              expect(startDate.length).to.equal(1);\n              expect(endDate.length).to.equal(1);\n              expect(inRangeDate.length).to.above(0);\n              // value is array\n              expect(vm.value).to.be.an.instanceof(Array);\n              // input text is something like date string\n              expect(inputs[0].value.length).to.equal(7);\n              expect(inputs[1].value.length).to.equal(7);\n              done();\n            }, DELAY);\n          }, DELAY);\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('works: reverse selection', done => {\n      vm = createVue({\n        template: '<el-date-picker type=\"monthrange\" v-model=\"value\" ref=\"compo\" />',\n        data() {\n          return {\n            value: ''\n          };\n        }\n      }, true);\n\n      const rangePicker = vm.$refs.compo;\n      const inputs = rangePicker.$el.querySelectorAll('input');\n      inputs[0].focus();\n\n      setTimeout(_ => {\n        const panels = rangePicker.picker.$el.querySelectorAll('.el-date-range-picker__content');\n        expect(Array.prototype.slice.call(panels)).to.length(2);\n        panels[1].querySelector('td:not(.disabled)').click();\n        setTimeout(_ => {\n          panels[0].querySelector('td:not(.disabled)').click();\n          setTimeout(_ => {\n            inputs[0].focus();\n            setTimeout(_ => {\n              // correct highlight\n              const startDate = rangePicker.picker.$el.querySelectorAll('.start-date');\n              const endDate = rangePicker.picker.$el.querySelectorAll('.end-date');\n              const inRangeDate = rangePicker.picker.$el.querySelectorAll('.in-range');\n              expect(startDate.length).to.equal(1);\n              expect(endDate.length).to.equal(1);\n              expect(inRangeDate.length).to.above(0);\n              // value is array\n              expect(vm.value).to.be.an.instanceof(Array);\n              // input text is something like date string\n              expect(inputs[0].value.length).to.equal(7);\n              expect(inputs[1].value.length).to.equal(7);\n              // result array is properly ordered\n              expect(vm.value[0].getTime() < vm.value[1].getTime()).to.be.true;\n              done();\n            }, DELAY);\n          }, DELAY);\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('type:monthrange unlink:true', done => {\n      vm = createVue({\n        template: '<el-date-picker type=\"monthrange\" unlink-panels v-model=\"value\" ref=\"compo\" />',\n        data() {\n          return {\n            value: [new Date(2000, 9), new Date(2000, 10)]\n          };\n        }\n      }, true);\n\n      const rangePicker = vm.$refs.compo;\n      const inputs = rangePicker.$el.querySelectorAll('input');\n      setTimeout(_ => {\n        inputs[0].focus();\n        setTimeout(_ => {\n          const panels = rangePicker.picker.$el.querySelectorAll('.el-date-range-picker__content');\n          const left = panels[0].querySelector('.el-date-range-picker__header');\n          const right = panels[1].querySelector('.is-right .el-date-range-picker__header');\n          const leftText = left.textContent.match(/\\d+/g).map(i => Number(i));\n          const rightText = right.textContent.match(/\\d+/g).map(i => Number(i));\n          expect(rightText[0] - leftText[0]).to.equal(1); // one year\n          done();\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('unlink panels', done => {\n      vm = createTest(DatePicker, {\n        type: 'monthrange',\n        unlinkPanels: true\n      }, true);\n      const input = vm.$el.querySelector('input');\n      input.click();\n\n      setTimeout(_ => {\n        const panels = vm.picker.$el.querySelectorAll('.el-date-range-picker__content');\n        expect(Array.prototype.slice.call(panels)).to.length(2);\n\n        panels[1].querySelector('.el-icon-d-arrow-right').click();\n\n        setTimeout(_ => {\n          const left = panels[0].querySelector('.el-date-range-picker__header');\n          const right = panels[1].querySelector('.is-right .el-date-range-picker__header');\n          const leftText = left.textContent.match(/\\d+/g).map(i => Number(i));\n          const rightText = right.textContent.match(/\\d+/g).map(i => Number(i));\n\n          expect(rightText[0] - leftText[0]).to.equal(2);\n\n          done();\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('daylight saving time highlight', done => {\n      // Run test with environment variable TZ=Australia/Sydney\n      // The following test uses Australian Eastern Daylight Time (AEDT)\n      // AEST -> AEDT shift happened on 2016-10-02 02:00:00\n      vm = createVue({\n        template: '<el-date-picker type=\"monthrange\" v-model=\"value\" ref=\"compo\" />',\n        data() {\n          return {\n            value: [new Date(2016, 6), new Date(2016, 12)]\n          };\n        }\n      }, true);\n\n      const rangePicker = vm.$refs.compo;\n      const inputs = rangePicker.$el.querySelectorAll('input');\n      inputs[0].focus();\n\n      setTimeout(_ => {\n        const startDate = rangePicker.picker.$el.querySelectorAll('.start-date');\n        const endDate = rangePicker.picker.$el.querySelectorAll('.end-date');\n        expect(startDate.length).to.equal(1);\n        expect(endDate.length).to.equal(1);\n        done();\n      }, DELAY);\n    });\n\n    it('clear value', done => {\n      vm = createVue({\n        template: '<el-date-picker type=\"monthrange\" v-model=\"value\" ref=\"compo\" />',\n        data() {\n          return {\n            value: [new Date(2000, 9), new Date(2000, 10)]\n          };\n        }\n      }, true);\n\n      vm.$el.querySelector('input').focus();\n\n      setTimeout(_ => {\n        vm.$refs.compo.showClose = true;\n        vm.$refs.compo.handleClickIcon({ stopPropagation: () => null });\n        setTimeout(_ => {\n          expect(vm.value).to.equal(null);\n          done();\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('change event', done => {\n      vm = createVue({\n        template: `\n          <el-date-picker\n            ref=\"compo\"\n            v-model=\"value\"\n            type=\"monthrange\" />`,\n        data() {\n          return {\n            value: ''\n          };\n        }\n      }, true);\n\n      const spy = sinon.spy();\n      vm.$refs.compo.$on('change', spy);\n\n      const input = vm.$el.querySelector('input');\n\n      input.blur();\n      input.focus();\n\n      setTimeout(_ => {\n        const picker = vm.$refs.compo.picker;\n        setTimeout(_ => {\n          picker.$el.querySelector('td:not(.disabled)').click();\n          setTimeout(_ => {\n            picker.$el.querySelector('td:not(.disabled) ~ td:not(.disabled)').click();\n            setTimeout(_ => {\n              expect(spy.calledOnce).to.equal(true);\n              // change event is not emitted if used does not change value\n              // datarange also requires proper array equality check\n              input.blur();\n              input.focus();\n              setTimeout(_ => {\n                const startCell = picker.$el.querySelector('td.start-date');\n                const endCell = picker.$el.querySelector('td.end-date');\n                startCell.click();\n                setTimeout(_ => {\n                  endCell.click();\n                  setTimeout(_ => {\n                    expect(spy.calledOnce).to.equal(true);\n                    done();\n                  }, DELAY);\n                }, DELAY);\n              }, DELAY);\n            }, DELAY);\n          }, DELAY);\n        }, DELAY);\n      }, DELAY);\n    });\n\n    describe('default value', () => {\n      afterEach(() => destroyVM(vm));\n\n      it('single', done => {\n        let defaultValue = '2000-10';\n        let expectValue = [new Date(2000, 9), new Date(2000, 10)];\n\n        vm = createVue({\n          template: '<el-date-picker type=\"monthrange\" v-model=\"value\" ref=\"compo\" :default-value=\"defaultValue\" />',\n          data() {\n            return {\n              value: '',\n              defaultValue\n            };\n          }\n        }, true);\n\n        vm.$el.querySelector('input').focus();\n        setTimeout(_ => {\n          const $el = vm.$refs.compo.picker.$el;\n          const defaultEls = $el.querySelectorAll('.el-month-table td.default');\n          expect(defaultEls.length).to.equal(1);\n          defaultEls[0].click();\n          setTimeout(_ => {\n            $el.querySelector('.el-month-table td.default + td').click();\n            setTimeout(_ => {\n              expect(vm.value).to.eql(expectValue);\n              done();\n            }, DELAY);\n          }, DELAY);\n        }, DELAY);\n      });\n\n      it('array', done => {\n        let defaultValue = ['2000-01', '2000-03'];\n        let expectValue = [new Date(2000, 0), new Date(2000, 2)];\n\n        vm = createVue({\n          template: '<el-date-picker type=\"monthrange\" v-model=\"value\" ref=\"compo\" :default-value=\"defaultValue\" />',\n          data() {\n            return {\n              value: '',\n              defaultValue\n            };\n          }\n        }, true);\n\n        vm.$el.querySelector('input').focus();\n        setTimeout(_ => {\n          const defaultEls = vm.$refs.compo.picker.$el.querySelectorAll('.el-month-table td.default');\n          expect(defaultEls.length).to.equal(2);\n          defaultEls[0].click();\n          setTimeout(_ => {\n            defaultEls[1].click();\n            setTimeout(_ => {\n              expect(vm.value).to.eql(expectValue);\n              done();\n            }, DELAY);\n          }, DELAY);\n        }, DELAY);\n      });\n    });\n  });\n\n  const currentMonth = new Date(new Date().getTime());\n  currentMonth.setDate(1);\n  const chineseWeek = ['一', '二', '三', '四', '五', '六', '日'];\n\n  const testWeek = (i) => it('picker-options:firstDayOfWeek ' + i, done => {\n    vm = createTest(DatePicker, {\n      pickerOptions: {\n        firstDayOfWeek: i\n      }\n    }, true);\n\n    const input = vm.$el.querySelector('input');\n\n    input.blur();\n    input.focus();\n\n    setTimeout(_ => {\n      const firstWeek = vm.picker.$el.querySelector('tr th');\n      expect(firstWeek.innerText).to.equal(chineseWeek[i - 1]);\n      done();\n    });\n  });\n  for (var i = 1; i <= 7; i++) {\n    testWeek(i);\n  }\n\n  it('picker-options:shortcuts', done => {\n    let test;\n    vm = createTest(DatePicker, {\n      pickerOptions: {\n        shortcuts: [{\n          text: '今天',\n          onClick(picker) {\n            test = true;\n            picker.$emit('pick', new Date());\n          }\n        }]\n      }\n    }, true);\n    const input = vm.$el.querySelector('input');\n\n    input.blur();\n    input.focus();\n\n    setTimeout(_ => {\n      const shortcut = vm.picker.$el.querySelector('.el-picker-panel__shortcut');\n\n      expect(shortcut.textContent).to.be.equal('今天');\n      expect(vm.picker.$el.querySelector('.el-picker-panel__sidebar')).to.be.ok;\n\n      shortcut.click();\n      setTimeout(_ => {\n        expect(test).to.true;\n        done();\n      }, DELAY);\n    }, DELAY);\n  });\n\n  describe('picker-options:selectableRange', () => {\n    let vm;\n    afterEach(() => destroyVM(vm));\n    it('selectableRange', done => {\n      vm = createVue({\n        template: `\n        <el-date-picker v-model=\"value\" type=\"datetime\" :picker-options=\"pickerOptions\" ref=\"compo\"></el-date-picker>\n        `,\n        data() {\n          return {\n            value: new Date(2019, 0, 1, 18, 50),\n            pickerOptions: {\n              selectableRange: ['17:30:00 - 18:30:00', '18:50:00 - 20:30:00', '21:00:00 - 22:00:00']\n            }\n          };\n        }\n      }, true);\n      const input = vm.$el.querySelector('input');\n      input.blur();\n      input.focus();\n      setTimeout(() => {\n        const $el = vm.$refs.compo.picker.$el;\n        const input1 = $el.querySelectorAll('.el-date-picker__editor-wrap input')[1];\n        input1.blur();\n        input1.focus();\n        setTimeout(_ => {\n          const list = $el.querySelectorAll('.el-time-spinner__list');\n          const hoursEl = list[0];\n          const disabledHours = [].slice\n            .call(hoursEl.querySelectorAll('.disabled'))\n            .map(node => Number(node.textContent));\n          expect(disabledHours[disabledHours.length - 2]).to.equal(16);\n          expect(disabledHours[disabledHours.length - 1]).to.equal(23);\n          const minutesEl = list[1];\n          const disabledMinutes = [].slice\n            .call(minutesEl.querySelectorAll('.disabled'))\n            .map(node => Number(node.textContent));\n          expect(disabledMinutes.length).to.equal(19);\n          done();\n        }, DELAY);\n      }, DELAY);\n    });\n\n  });\n\n  describe('picker-options:disabledDate', () => {\n    let vm;\n    beforeEach(done => {\n      vm = createTest(DatePicker, {\n        value: new Date(),\n        pickerOptions: {\n          disabledDate(time) {\n            return time.getTime() < Date.now() - 8.64e7;\n          }\n        }\n      }, true);\n      const input = vm.$el.querySelector('input');\n\n      input.blur();\n      input.focus();\n\n      setTimeout(done, DELAY);\n    });\n    afterEach(() => destroyVM(vm));\n\n    it('create', () => {\n      expect(vm.picker.$el.querySelector('.disabled')).to.be.ok;\n    });\n\n    it('set value', done => {\n      const date = new Date(3000, 10, 10, 10, 10, 10);\n      vm.picker.value = date;\n\n      setTimeout(_ => {\n        expect(vm.picker.date.getTime() === date.getTime()).to.true;\n        done();\n      }, DELAY);\n    });\n  });\n\n  describe('picker-options:firstDayOfWeek issue-14523', () => {\n    let vm;\n    beforeEach(done => {\n      vm = createTest(DatePicker, {\n        value: new Date(),\n        pickerOptions: {\n          firstDayOfWeek: 3\n        }\n      }, true);\n      const input = vm.$el.querySelector('input');\n\n      input.blur();\n      input.focus();\n\n      setTimeout(done, DELAY);\n    });\n\n    afterEach(() => destroyVM(vm));\n\n    it('set value equal to 2019-01-01', done => {\n      const date = new Date('2019-01-01');\n      vm.picker.value = date;\n\n      setTimeout(_ => {\n        const currentElement = vm.picker.$el.querySelector('tr:nth-child(2) td:nth-child(7) span');\n        const lastPrevMonthElement = vm.picker.$el.querySelector('tr:nth-child(2) td:nth-child(6) span');\n        expect(currentElement.innerText.trim()).to.equal('1');\n        expect(lastPrevMonthElement.innerText.trim()).to.equal('31');\n        done();\n      }, DELAY);\n    });\n\n    it('set value equal to 2018-01-01', done => {\n      const date = new Date('2018-01-01');\n      vm.picker.value = date;\n\n      setTimeout(_ => {\n        const currentElement = vm.picker.$el.querySelector('tr:nth-child(2) td:nth-child(6) span');\n        const lastPrevMonthElement = vm.picker.$el.querySelector('tr:nth-child(2) td:nth-child(5) span');\n        expect(currentElement.innerText.trim()).to.equal('1');\n        expect(lastPrevMonthElement.innerText.trim()).to.equal('31');\n        done();\n      }, DELAY);\n    });\n  });\n  describe('picker-options:className', () => {\n    it('set custom class name', async() => {\n      vm = createVue({\n        template: '<el-date-picker type=\"datetime\" v-model=\"value\" ref=\"compo\" :pickerOptions=\"pickerOptions\" />',\n        data() {\n          return {\n            value: '',\n            pickerOptions: {\n              cellClassName() { return 'test-class'; }\n            }\n          };\n        }\n      }, true);\n      vm.$refs.compo.$el.querySelector('input').focus();\n      await wait();\n      expect(\n        (vm.$refs.compo.picker.$el.querySelector('.el-date-table__row td').className)\n          .indexOf('test-class') > -1\n      ).to.be.true;\n    });\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/descriptions.spec.js",
    "content": "import { destroyVM, createVue, waitImmediate } from '../util';\n\ndescribe('Descriptions', () => {\n  let vm;\n\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('render test', () => {\n    vm = createVue(\n      {\n        template: `\n          <el-descriptions title=\"title\" extra=\"extra\">\n            <el-descriptions-item v-for=\"item in 4\" :key=\"item\"></el-descriptions-item>\n          </el-descriptions>\n        `\n      },\n      true\n    );\n    const el = vm.$el;\n    expect(el.querySelector('.el-descriptions__title').textContent).to.equal('title');\n    expect(el.querySelector('.el-descriptions__extra').textContent).to.equal('extra');\n    expect(el.querySelectorAll('.el-descriptions-item__label').length).to.equal(4);\n  });\n\n  it('should render border props', () => {\n    vm = createVue(\n      {\n        template: `\n          <el-descriptions border>\n            <el-descriptions-item v-for=\"item in 3\" :label=\"item\" :key=\"item\">{{ item }}</el-descriptions-item>\n          </el-descriptions>\n        `\n      },\n      true\n    );\n    const el = vm.$el;\n    expect(Array.from(el.querySelector('table').classList)).to.contain('is-bordered');\n  });\n\n  it('should render class props', () => {\n    vm = createVue(\n      {\n        template: `\n          <el-descriptions border label-class-name=\"label-class-name\" content-class-name=\"content-class-name\">\n            <el-descriptions-item v-for=\"item in 3\" :label=\"item\" :key=\"item\">{{ item }}</el-descriptions-item>\n          </el-descriptions>\n        `\n      },\n      true);\n\n    expect(Array.from(vm.$el.querySelector('.el-descriptions-item__label').classList)).to.contain('label-class-name');\n    expect(Array.from(vm.$el.querySelector('.el-descriptions-item__content').classList)).to.contain('content-class-name');\n  });\n\n  it('should render column props', async() => {\n    vm = createVue({\n      template: `\n      <el-descriptions :column=\"5\" :border=\"border\">\n        <el-descriptions-item v-for=\"item in 10\" :label=\"item\" :key=\"item\">{{ item }}</el-descriptions-item>\n      </el-descriptions>\n    `,\n      data() {\n        return {\n          border: false\n        };\n      }\n    }, true);\n\n    expect(vm.$el.querySelector('tr').children.length).to.equal(5);\n    vm.border = true;\n    await waitImmediate();\n    expect(vm.$el.querySelector('tr').children.length).to.equal(10);\n  });\n\n  it('should render direction props', async() => {\n    vm = createVue({\n\n      template: `\n      <el-descriptions :column=\"5\" :direction=\"direction\" border>\n        <el-descriptions-item v-for=\"item in 10\" :label=\"item\" :key=\"item\">{{ item }}</el-descriptions-item>\n      </el-descriptions>\n    `,\n      data() {\n        return {\n          direction: 'horizontal'\n        };\n      }\n    }, true);\n\n    expect(vm.$el.querySelector('tr').children.length).to.equal(10);\n    expect(vm.$el.querySelectorAll('tr')[0].children[0].innerHTML).to.equal(vm.$el.querySelectorAll('tr')[0].children[1].innerHTML);\n    vm.direction = 'vertical';\n    await waitImmediate();\n    expect(vm.$el.querySelector('tr').children.length).to.equal(5);\n    expect(vm.$el.querySelectorAll('tr')[0].children[0].innerHTML).to.equal(vm.$el.querySelectorAll('tr')[1].children[0].innerHTML);\n  });\n\n  it('should render title slots', async() => {\n    vm = createVue({\n      template: `\n      <el-descriptions>\n        <template slot=\"title\">title</template>\n        <el-descriptions-item v-for=\"item in 10\" :label=\"item\" :key=\"item\">{{ item }}</el-descriptions-item>\n      </el-descriptions>\n    `\n    }, true);\n\n    expect(vm.$el.querySelector('.el-descriptions__title').innerText).to.equal('title');\n  });\n\n  it('should render span props', async() => {\n    vm = createVue({\n      template: `\n        <el-descriptions :column=\"3\">\n          <el-descriptions-item label=\"1\">1</el-descriptions-item>\n          <el-descriptions-item label=\"2\" :span=\"2\">2</el-descriptions-item>\n          <el-descriptions-item label=\"3\">3</el-descriptions-item>\n        </el-descriptions>\n      `\n    }, true);\n\n    expect(vm.$el.querySelectorAll('td')[1].getAttribute('colSpan')).to.equal('2');\n  });\n\n  it('re-rendered when slots is updated', async() => {\n    const CHANGE_VALUE = 'company';\n    vm = createVue({\n      template: `\n        <div>\n          <el-descriptions v-for=\"(remark,index) in remarks\" :key=\"index\" :title=\"remark\">\n            <el-descriptions-item label=\"remark\">\n              <el-tag size=\"small\">{{remark}}</el-tag>\n            </el-descriptions-item>\n          </el-descriptions>\n          <button @click=\"onClick\">click</button>\n        </div>\n      `,\n      data() {\n        return {\n          remarks: ['school', 'hospital']\n        };\n      },\n      methods: {\n        onClick() {\n          this.$set(this.remarks, 0, CHANGE_VALUE);\n        }\n      }\n    }, true);\n    vm.$el.querySelector('button').click();\n    await waitImmediate();\n    expect(vm.$el.querySelector('.el-tag').innerText).to.equal(CHANGE_VALUE);\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/dialog.spec.js",
    "content": "import { createVue, destroyVM, waitImmediate } from '../util';\n\ndescribe('Dialog', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-dialog :title=\"title\" :visible=\"visible\"></el-dialog>\n        </div>\n      `,\n\n      data() {\n        return {\n          title: 'dialog test',\n          visible: true\n        };\n      }\n    }, true);\n    const dialog = vm.$children[0];\n    setTimeout(() => {\n      expect(document.querySelector('.v-modal')).to.exist;\n      expect(vm.$el.querySelector('.el-dialog__title').textContent).to.equal('dialog test');\n      expect(dialog.$el.style.display).to.not.equal('none');\n      done();\n    }, 10);\n  });\n\n  it('render correct content', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-dialog :title=\"title\" :visible=\"visible\">\n            <span>这是一段信息</span>\n            <span slot=\"footer\" class=\"dialog-footer\">\n              <el-button @click.native=\"dialogVisible = false\">取消</el-button>\n              <el-button type=\"primary\" @click.native=\"dialogVisible = false\">确定</el-button>\n            </span>\n          </el-dialog>\n        </div>\n      `,\n\n      data() {\n        return {\n          title: 'dialog test',\n          visible: true\n        };\n      }\n    }, true);\n    setTimeout(() => {\n      const footerBtns = vm.$el.querySelectorAll('.el-dialog__footer .el-button');\n      expect(vm.$el.querySelector('.el-dialog__body span').textContent).to.equal('这是一段信息');\n      expect(footerBtns.length).to.equal(2);\n      expect(footerBtns[0].querySelector('span').textContent).to.equal('取消');\n      expect(footerBtns[1].querySelector('span').textContent).to.equal('确定');\n      done();\n    }, 100);\n  });\n\n  it('append to body', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-dialog :title=\"title\" append-to-body :visible=\"visible\"></el-dialog>\n        </div>\n      `,\n\n      data() {\n        return {\n          title: 'dialog test',\n          visible: true\n        };\n      }\n    }, true);\n    const dialog = vm.$children[0];\n    setTimeout(() => {\n      expect(dialog.$el.parentNode).to.equal(document.body);\n      done();\n    }, 10);\n  });\n\n  it('open and close', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-dialog :title=\"title\" :visible.sync=\"visible\">\n            <span>这是一段信息</span>\n          </el-dialog>\n        </div>\n      `,\n\n      data() {\n        return {\n          title: 'dialog test',\n          visible: false\n        };\n      }\n    }, true);\n    const dialogEl = vm.$children[0].$el;\n    expect(getComputedStyle(dialogEl).display).to.equal('none');\n    vm.visible = true;\n    setTimeout(() => {\n      expect(getComputedStyle(dialogEl).display).to.not.equal('none');\n      vm.visible = false;\n      setTimeout(() => {\n        expect(getComputedStyle(dialogEl).display).to.equal('none');\n        done();\n      }, 400);\n    }, 50);\n  });\n\n  describe('props', () => {\n    const getDialogVm = (props, options) => {\n      return createVue(Object.assign({\n        template: `\n          <div>\n            <el-dialog ${ props } :title=\"title\" :visible=\"visible\">\n              <span>这是一段信息</span>\n            </el-dialog>\n          </div>\n        `,\n\n        data() {\n          return {\n            title: 'dialog test',\n            visible: true\n          };\n        }\n      }, options), true);\n    };\n\n    it('fullscreen', () => {\n      vm = getDialogVm('fullscreen width=\"40%\"');\n      const dialogEl = vm.$el.querySelector('.el-dialog');\n      expect(dialogEl.classList.contains('is-fullscreen')).to.true;\n      expect(dialogEl.style.width).to.be.empty;\n    });\n\n    it('top', () => {\n      vm = getDialogVm('top=\"100px\"');\n      expect(vm.$el.querySelector('.el-dialog').style.marginTop).to.equal('100px');\n    });\n\n    it('custom-class', () => {\n      vm = getDialogVm('custom-class=\"my-dialog\"');\n      expect(vm.$el.querySelector('.el-dialog').classList.contains('my-dialog')).to.true;\n    });\n  });\n\n  it('events', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-dialog\n            @open=\"handleOpen\"\n            @opened=\"handleOpened\"\n            @close=\"handleClose\"\n            @closed=\"handleClosed\"\n            :title=\"title\"\n            :visible.sync=\"visible\">\n            <span>这是一段信息</span>\n          </el-dialog>\n        </div>\n      `,\n\n      methods: {\n        handleOpen() {\n          this.state = 'open';\n        },\n\n        handleOpened() {\n          this.animationState = 'opened';\n        },\n\n        handleClose() {\n          this.state = 'close';\n        },\n\n        handleClosed() {\n          this.animationState = 'closed';\n        }\n      },\n\n      data() {\n        return {\n          state: '',\n          animationState: '',\n          title: 'dialog test',\n          visible: false\n        };\n      }\n    }, true);\n    vm.visible = true;\n    setTimeout(() => {\n      expect(vm.state).to.equal('open');\n      expect(vm.animationState).to.equal('opened');\n      vm.visible = false;\n      setTimeout(() => {\n        expect(vm.state).to.equal('close');\n        expect(vm.animationState).to.equal('closed');\n        done();\n      }, 400);\n    }, 400);\n  });\n  it('click dialog to close', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-dialog :title=\"title\" :visible.sync=\"visible\">\n            <span>这是一段信息</span>\n          </el-dialog>\n        </div>\n      `,\n\n      data() {\n        return {\n          title: 'dialog test',\n          visible: true\n        };\n      }\n    }, true);\n    const dialog = vm.$children[0];\n    setTimeout(() => {\n      dialog.$el.click();\n      setTimeout(() => {\n        expect(vm.visible).to.be.false;\n        done();\n      }, 400);\n    }, 50);\n  });\n  it('click header btn', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-dialog :title=\"title\" :visible.sync=\"visible\">\n            <span>这是一段信息</span>\n          </el-dialog>\n        </div>\n      `,\n\n      data() {\n        return {\n          title: 'dialog test',\n          visible: true\n        };\n      }\n    }, true);\n    const dialog = vm.$children[0];\n    setTimeout(() => {\n      dialog.$el.querySelector('.el-dialog__headerbtn').click();\n      setTimeout(() => {\n        expect(vm.visible).to.be.false;\n        done();\n      }, 500);\n    }, 50);\n  });\n  it('before close', done => {\n    const spy = sinon.spy();\n    vm = createVue({\n      template: `\n        <div>\n          <el-dialog :title=\"title\" :visible=\"visible\" :before-close=\"beforeClose\"></el-dialog>\n        </div>\n      `,\n\n      data() {\n        return {\n          title: 'dialog test',\n          visible: true\n        };\n      },\n      methods: {\n        beforeClose(done) {\n          spy();\n          done();\n        }\n      }\n    }, true);\n    const dialog = vm.$children[0];\n    setTimeout(() => {\n      dialog.$el.click();\n      setTimeout(() => {\n        expect(spy.called).to.be.true;\n        done();\n      }, 500);\n    }, 10);\n  });\n\n  it('destroyOnClose', async() => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-dialog :title=\"title\" :visible.sync=\"visible\" destroy-on-close>\n            <input />\n          </el-dialog>\n        </div>\n      `,\n\n      data() {\n        return {\n          title: 'dialog test',\n          visible: true\n        };\n      }\n    }, true);\n    const dialog = vm.$children[0];\n    await waitImmediate();\n    dialog.$el.querySelector('input').value = '123';\n    dialog.$el.click();\n    await waitImmediate();\n    vm.visible = true;\n    await waitImmediate();\n    expect(dialog.$el.querySelector('input').value).to.be.equal('');\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/divider.spec.js",
    "content": "import { createVue, destroyVM } from '../util';\n\ndescribe('Divider', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('content', () => {\n    vm = createVue({\n      template: `\n          <el-divider>我是一条完美分割线！</el-divider>\n      `\n    });\n\n    expect(vm.$el).to.property('textContent').to.include('我是一条完美分割线！');\n  });\n\n  it('direction', () => {\n    vm = createVue({\n      template: `\n          <el-divider direction=\"vertical\">我是一条完美分割线！</el-divider>\n      `\n    });\n\n    expect(vm.$el.className).to.include('el-divider--vertical');\n  });\n\n  it('apply class to divider', () => {\n    vm = createVue({\n      template: `\n        <el-divider direction=\"vertical\" class=\"my-divider\">我是一条完美分割线！</el-divider>\n      `\n    });\n    expect(vm.$el.className).to.include('my-divider');\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/drawer.spec.js",
    "content": "import { createVue, destroyVM, waitImmediate, wait } from '../util';\n\nconst title = '我是测试 title';\nconst content = 'content';\n\ndescribe('Drawer', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', async() => {\n    vm = createVue(\n      {\n        template: `\n        <el-drawer :title='title' :visible='visible'></el-drawer>\n      `,\n        data() {\n          return {\n            title,\n            visible: true\n          };\n        }\n      },\n      true\n    );\n    const drawer = vm.$children[0];\n    await waitImmediate();\n    expect(document.querySelector('.v-modal')).to.exist;\n    expect(vm.$el.querySelector('.el-drawer__header').textContent).to.equal(\n      title\n    );\n    expect(drawer.$el.style.display).to.not.equal('none');\n  });\n\n  it('render correct content', async() => {\n    vm = createVue(\n      {\n        template: `\n          <el-drawer :title='title' :visible='visible'>\n            <span>这是一段信息</span>\n            <el-button @click.native='dialogVisible = false'>取消</el-button>\n            <el-button type='primary' @click.native='dialogVisible = false'>确定</el-button>\n          </el-drawer>\n      `,\n\n        data() {\n          return {\n            title: 'drawer test',\n            visible: true\n          };\n        }\n      },\n      true\n    );\n    await waitImmediate();\n    expect(vm.$el.querySelector('.el-drawer__body span').textContent).to.equal(\n      '这是一段信息'\n    );\n    const footerBtns = vm.$el.querySelectorAll('.el-button');\n    expect(footerBtns.length).to.equal(2);\n    expect(footerBtns[0].querySelector('span').textContent).to.equal('取消');\n    expect(footerBtns[1].querySelector('span').textContent).to.equal('确定');\n  });\n\n  it('should append to body, when append-to-body flag is true', async() => {\n    vm = createVue(\n      {\n        template: `\n        <el-drawer :title='title' :visible='visible' :append-to-body='true'>\n           <span> content </span>\n        </el-drawer>\n      `,\n        data() {\n          return {\n            title,\n            visible: true\n          };\n        }\n      },\n      true\n    );\n    await waitImmediate();\n    expect(vm.$el.parentNode).to.equal(document.body);\n  });\n\n  it('should open and close drawer properly', async() => {\n    vm = createVue({\n      template: `\n        <el-drawer :title='title' :visible='visible' ref='drawer'>\n           <span>${content}</span>\n        </el-drawer>\n      `,\n      data() {\n        return {\n          title,\n          visible: false\n        };\n      }\n    });\n    let drawer = vm.$children[0].$el;\n    expect(drawer.style.display).to.equal('none');\n    vm.visible = true;\n    await waitImmediate();\n    expect(drawer.style.display).not.to.equal('none');\n    vm.visible = false;\n    await wait(400);\n    expect(drawer.style.display).to.equal('none');\n  });\n\n  it('should destroy every child after drawer was closed when destroy-on-close flag is true', async() => {\n    vm = createVue({\n      template: `\n        <el-drawer :title='title' :visible='visible' :append-to-body='true' :destroy-on-close='true' ref='drawer'>\n           <span>${content}</span>\n        </el-drawer>\n      `,\n      data() {\n        return {\n          title,\n          visible: true\n        };\n      }\n    });\n\n    await waitImmediate();\n    expect(vm.$el.querySelector('.el-drawer__body span').textContent).to.equal(\n      content\n    );\n    vm.$refs.drawer.closeDrawer();\n    await wait(400);\n    expect(vm.$el.querySelector('.el-drawer__body')).not.to.exist;\n  });\n\n  it('should destroy every child by visible change when destroy-on-close flag is true', async() => {\n    vm = createVue({\n      template: `\n        <el-drawer :title='title' :visible='visible' :append-to-body='true' :destroy-on-close='true' ref='drawer'>\n           <span>${content}</span>\n        </el-drawer>\n      `,\n      data() {\n        return {\n          title,\n          visible: true\n        };\n      }\n    });\n\n    await waitImmediate();\n    expect(vm.$el.querySelector('.el-drawer__body span').textContent).to.equal(\n      content\n    );\n    vm.visible = false;\n    await wait(400);\n    expect(vm.$el.querySelector('.el-drawer__body')).not.to.exist;\n  });\n\n  it('should close dialog by clicking the close button', async() => {\n    vm = createVue({\n      template: `\n        <el-drawer :title='title' :visible.sync='visible' :append-to-body='true' :destroy-on-close='true' ref='drawer'>\n           <span>${content}</span>\n        </el-drawer>\n      `,\n      data() {\n        return {\n          title,\n          visible: true\n        };\n      }\n    });\n\n    await waitImmediate();\n    vm.$children[0].$el.querySelector('.el-drawer__close-btn').click();\n    expect(vm.visible).to.equal(false);\n  });\n\n  it('should invoke before-close', async() => {\n    const beforeClose = sinon.spy();\n    vm = createVue({\n      template: `\n        <el-drawer\n                :before-close='beforeClose'\n                :title='title'\n                :visible.sync='visible'\n                :append-to-body='true'\n                :destroy-on-close='true'\n                ref='drawer'\n               >\n           <span>${content}</span>\n        </el-drawer>\n      `,\n      data() {\n        return {\n          title,\n          visible: true,\n          beforeClose\n        };\n      }\n    });\n\n    await waitImmediate();\n    vm.$refs.drawer.closeDrawer();\n    await waitImmediate();\n    expect(beforeClose.called).to.be.true;\n  });\n\n  it('should not show close button when show-close flag is false', async() => {\n    vm = createVue({\n      template: `\n        <el-drawer :title='title' :visible='visible' ref='drawer' :show-close='false'>\n           <span>${content}</span>\n        </el-drawer>\n      `,\n      data() {\n        return {\n          title,\n          visible: false\n        };\n      }\n    });\n    expect(vm.$el.querySelector('.el-drawer__close-btn')).not.to.exist;\n  });\n\n  it('should have custom classes when custom classes were given', async() => {\n    const classes = 'some-custom-class';\n    vm = createVue({\n      template: `\n        <el-drawer :title='title' :visible='visible' ref='drawer' custom-class='${classes}'>\n           <span>${content}</span>\n        </el-drawer>\n      `,\n      data() {\n        return {\n          title,\n          visible: false\n        };\n      }\n    });\n\n    expect(vm.$el.querySelector(`.${classes}`)).to.exist;\n  });\n\n  it('should not render header when withHeader attribute is false', () => {\n    vm = createVue({\n      template: `\n        <el-drawer :title='title' :visible='visible' ref='drawer' :with-header='false'>\n           <span>${content}</span>\n        </el-drawer>\n      `,\n      data() {\n        return {\n          title,\n          visible: true\n        };\n      }\n    });\n\n    expect(vm.$el.querySelector('.el-drawer__header')).to.not.exist;\n  });\n\n  describe('directions', () => {\n    const renderer = direction => {\n      return createVue({\n        template: `\n         <el-drawer :title='title' :visible='visible' direction='${direction}'>\n            <span>${content}</span>\n         </el-drawer>\n        `,\n        data: {\n          visible: true,\n          title\n        }\n      });\n    };\n    it('should render from left to right', async() => {\n      vm = renderer('ltr');\n      await waitImmediate();\n      expect(vm.$el.querySelector('.ltr')).to.exist;\n    });\n\n    it('should render from right to left', async() => {\n      vm = renderer('rtl');\n      await waitImmediate();\n      expect(vm.$el.querySelector('.rtl')).to.exist;\n    });\n\n    it('should render from top to bottom', async() => {\n      vm = renderer('ttb');\n      await waitImmediate();\n      expect(vm.$el.querySelector('.ttb')).to.exist;\n    });\n\n    it('should render from bottom to top', async() => {\n      vm = renderer('btt');\n      await waitImmediate();\n      expect(vm.$el.querySelector('.btt')).to.exist;\n    });\n  });\n\n  it('events', async() => {\n    const open = sinon.spy();\n    const opened = sinon.spy();\n    const close = sinon.spy();\n    const closed = sinon.spy();\n\n    vm = createVue({\n      template: `\n        <el-drawer \n            :title='title'\n            :visible='visible'\n            ref=\"drawer\"\n            @open=\"open\"\n            @opened=\"opened\"\n            @close=\"close\"\n            @closed=\"closed\">\n          <span>${content}</span>\n         </el-drawer>\n      `,\n      data() {\n        return {\n          content,\n          visible: false,\n          title\n        };\n      },\n      methods: {\n        close,\n        closed,\n        open,\n        opened\n      }\n    });\n    vm.visible = true;\n    await wait(400);\n    expect(open.called).to.be.true;\n    expect(opened.called).to.be.true;\n    expect(close.called).to.be.false;\n    expect(closed.called).to.be.false;\n    vm.visible = false;\n    await wait(500);\n    expect(close.called).to.be.true;\n    expect(closed.called).to.be.true;\n  });\n\n  describe('size', () => {\n    const renderer = (size, isVertical) =>\n      createVue({\n        template: `\n         <el-drawer :title='title' :visible='visible' direction='${isVertical ? 'ltr' : 'ttb'}' size='${size}'>\n            <span>${content}</span>\n         </el-drawer>\n      `,\n        data: {\n          visible: true,\n          title\n        }\n      });\n\n    it('should effect height when drawer is vertical', async() => {\n      const size = '50%';\n      vm = renderer(size, true);\n\n      expect(vm.$el.querySelector('.el-drawer').style.width).to.equal('50%');\n    });\n\n    it('should effect width when drawer is horizontal', async() => {\n      const size = '50%';\n      vm = renderer(size, false);\n      expect(vm.$el.querySelector('.el-drawer').style.height).to.equal('50%');\n    });\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/dropdown.spec.js",
    "content": "import { createVue, triggerEvent, destroyVM, triggerKeyDown } from '../util';\n\ndescribe('Dropdown', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', done => {\n    vm = createVue({\n      template: `\n        <el-dropdown ref=\"dropdown\">\n          <span class=\"el-dropdown-link\">\n            下拉菜单<i class=\"el-icon-caret-bottom el-icon-right\"></i>\n          </span>\n          <el-dropdown-menu slot=\"dropdown\" class=\"dropdown-test-creat\">\n            <el-dropdown-item>黄金糕</el-dropdown-item>\n            <el-dropdown-item>狮子头</el-dropdown-item>\n            <el-dropdown-item>螺蛳粉</el-dropdown-item>\n            <el-dropdown-item>双皮奶</el-dropdown-item>\n            <el-dropdown-item>蚵仔煎</el-dropdown-item>\n          </el-dropdown-menu>\n        </el-dropdown>\n      `\n    }, true);\n    let dropdown = vm.$refs.dropdown;\n    let dropdownElm = dropdown.$el;\n    let triggerElm = dropdownElm.children[0];\n\n    triggerEvent(triggerElm, 'mouseenter');\n    setTimeout(_ => {\n      expect(dropdown.visible).to.be.true;\n\n      triggerEvent(triggerElm, 'mouseleave');\n      setTimeout(_ => {\n        expect(dropdown.visible).to.not.true;\n        done();\n      }, 300);\n    }, 400);\n  });\n  it('menu click', done => {\n    const myCommandObject = { name: 'CommandC' };\n    vm = createVue({\n      template: `\n        <el-dropdown ref=\"dropdown\">\n          <span class=\"el-dropdown-link\">\n            下拉菜单<i class=\"el-icon-caret-bottom el-icon-right\"></i>\n          </span>\n          <el-dropdown-menu slot=\"dropdown\">\n            <el-dropdown-item command=\"a\">黄金糕</el-dropdown-item>\n            <el-dropdown-item command=\"b\">狮子头</el-dropdown-item>\n            <el-dropdown-item ref=\"commandC\" :command=\"myCommandObject\">螺蛳粉</el-dropdown-item>\n            <el-dropdown-item command=\"d\">双皮奶</el-dropdown-item>\n            <el-dropdown-item command=\"e\">蚵仔煎</el-dropdown-item>\n          </el-dropdown-menu>\n        </el-dropdown>\n      `,\n      data() {\n        return {\n          myCommandObject\n        };\n      }\n    }, true);\n    let dropdown = vm.$refs.dropdown;\n    let dropdownElm = dropdown.$el;\n    let triggerElm = dropdownElm.children[0];\n    let callback = sinon.spy();\n\n    dropdown.$on('command', callback);\n\n    triggerEvent(triggerElm, 'mouseenter');\n    setTimeout(_ => {\n      vm.$refs.commandC.$el.click();\n      setTimeout(_ => {\n        expect(dropdown.visible).to.not.true;\n        expect(callback.calledWith(myCommandObject)).to.be.true;\n        done();\n      }, 300);\n    }, 300);\n  });\n  it('trigger', done => {\n    vm = createVue({\n      template: `\n        <el-dropdown trigger=\"click\" ref=\"dropdown\">\n          <span class=\"el-dropdown-link\">\n            下拉菜单trigger click<i class=\"el-icon-caret-bottom el-icon-right\"></i>\n          </span>\n          <el-dropdown-menu slot=\"dropdown\">\n            <el-dropdown-item>黄金糕</el-dropdown-item>\n            <el-dropdown-item @click.native=\"handleClick\">狮子头</el-dropdown-item>\n            <el-dropdown-item>螺蛳粉</el-dropdown-item>\n            <el-dropdown-item>双皮奶</el-dropdown-item>\n            <el-dropdown-item>蚵仔煎</el-dropdown-item>\n          </el-dropdown-menu>\n        </el-dropdown>\n      `\n    }, true);\n    let dropdownElm = vm.$el;\n    let dropdown = vm.$refs.dropdown;\n    let triggerElm = dropdownElm.children[0];\n\n    triggerEvent(triggerElm, 'mouseenter');\n    dropdown.$nextTick(_ => {\n      expect(dropdown.visible).to.not.true;\n      triggerElm.click();\n      setTimeout(_ => {\n        expect(dropdown.visible).to.be.true;\n        done();\n      }, 300);\n    });\n  });\n  it('split button', done => {\n    vm = createVue({\n      template: `\n        <el-dropdown split-button type=\"primary\" ref=\"dropdown\">\n          更多菜单\n          <el-dropdown-menu slot=\"dropdown\" class=\"dropdown-test-split-button\">\n            <el-dropdown-item>黄金糕</el-dropdown-item>\n            <el-dropdown-item>狮子头</el-dropdown-item>\n            <el-dropdown-item>螺蛳粉</el-dropdown-item>\n            <el-dropdown-item>双皮奶</el-dropdown-item>\n            <el-dropdown-item>蚵仔煎</el-dropdown-item>\n          </el-dropdown-menu>\n        </el-dropdown>\n      `\n    }, true);\n\n    let dropdown = vm.$refs.dropdown;\n    let dropdownElm = dropdown.$el;\n    let triggerElm = dropdownElm.querySelector('.el-dropdown__caret-button');\n    var callback = sinon.spy();\n\n    dropdown.$on('click', callback);\n    dropdownElm.querySelector('.el-button').click();\n\n    setTimeout(_ => {\n      expect(callback.called).to.be.true;\n    }, 300);\n\n    triggerEvent(triggerElm, 'mouseenter');\n    setTimeout(_ => {\n      expect(dropdown.visible).to.be.true;\n\n      triggerEvent(triggerElm, 'mouseleave');\n      setTimeout(_ => {\n        expect(dropdown.visible).to.not.true;\n        done();\n      }, 300);\n    }, 300);\n  });\n  it('hide on click', done => {\n    vm = createVue({\n      template: `\n        <el-dropdown ref=\"dropdown\" :hide-on-click=\"false\">\n          <span class=\"el-dropdown-link\">\n            下拉菜单<i class=\"el-icon-caret-bottom el-icon-right\"></i>\n          </span>\n          <el-dropdown-menu slot=\"dropdown\">\n            <el-dropdown-item command=\"a\">黄金糕</el-dropdown-item>\n            <el-dropdown-item command=\"b\">狮子头</el-dropdown-item>\n            <el-dropdown-item ref=\"commandC\" command=\"c\">螺蛳粉</el-dropdown-item>\n            <el-dropdown-item command=\"d\">双皮奶</el-dropdown-item>\n            <el-dropdown-item command=\"e\">蚵仔煎</el-dropdown-item>\n          </el-dropdown-menu>\n        </el-dropdown>\n      `\n    }, true);\n    let dropdown = vm.$refs.dropdown;\n    let dropdownElm = dropdown.$el;\n    let triggerElm = dropdownElm.children[0];\n    let callback = sinon.spy();\n\n    dropdown.$on('command', callback);\n\n    triggerEvent(triggerElm, 'mouseenter');\n    setTimeout(_ => {\n      vm.$refs.commandC.$el.click();\n      setTimeout(_ => {\n        expect(dropdown.visible).to.true;\n        expect(callback.calledWith('c')).to.be.true;\n        done();\n      }, 300);\n    }, 300);\n  });\n  it('triggerElm keydown', done => {\n    vm = createVue({\n      template: `\n        <el-dropdown ref=\"dropdown\">\n          <span class=\"el-dropdown-link\">\n            下拉菜单<i class=\"el-icon-caret-bottom el-icon-right\"></i>\n          </span>\n          <el-dropdown-menu slot=\"dropdown\" class=\"dropdown-test-creat\">\n            <el-dropdown-item>黄金糕</el-dropdown-item>\n            <el-dropdown-item>狮子头</el-dropdown-item>\n            <el-dropdown-item>螺蛳粉</el-dropdown-item>\n            <el-dropdown-item>双皮奶</el-dropdown-item>\n            <el-dropdown-item>蚵仔煎</el-dropdown-item>\n          </el-dropdown-menu>\n        </el-dropdown>\n      `\n    }, true);\n    let dropdown = vm.$refs.dropdown;\n    let dropdownElm = dropdown.$el;\n    let triggerElm = dropdownElm.children[0];\n    triggerKeyDown(triggerElm, 13); // enter\n    setTimeout(() => {\n      expect(dropdown.visible).to.be.true;\n      triggerKeyDown(triggerElm, 27); // esc\n      setTimeout(() => {\n        expect(dropdown.visible).to.be.false;\n        done();\n      }, 300);\n    }, 400);\n  });\n  it('dropdown menu keydown', done => {\n    vm = createVue({\n      template: `\n        <el-dropdown ref=\"dropdown\">\n          <span class=\"el-dropdown-link\">\n            下拉菜单<i class=\"el-icon-caret-bottom el-icon-right\"></i>\n          </span>\n          <el-dropdown-menu slot=\"dropdown\" class=\"dropdown-test-creat\">\n            <el-dropdown-item command=\"a\">黄金糕</el-dropdown-item>\n            <el-dropdown-item command=\"b\">狮子头</el-dropdown-item>\n            <el-dropdown-item command=\"c\">螺蛳粉</el-dropdown-item>\n            <el-dropdown-item command=\"d\">双皮奶</el-dropdown-item>\n            <el-dropdown-item command=\"e\">蚵仔煎</el-dropdown-item>\n          </el-dropdown-menu>\n        </el-dropdown>\n      `\n    }, true);\n    let dropdown = vm.$refs.dropdown;\n    let dropdownElm = dropdown.$el;\n    let triggerElm = dropdownElm.children[0];\n    let dropdownMenu = dropdown.dropdownElm;\n\n    triggerEvent(triggerElm, 'mouseenter');\n\n    setTimeout(() => {\n      expect(dropdown.visible).to.be.true;\n      triggerKeyDown(dropdownMenu, 40); // down\n      setTimeout(() => {\n        triggerKeyDown(dropdownMenu, 13); // enter\n        setTimeout(() => {\n          expect(dropdown.visible).to.be.false;\n          done();\n        }, 100);\n      }, 100);\n    }, 300);\n  });\n  it('updatePopper', done => {\n    vm = createVue({\n      template: `\n        <el-dropdown ref=\"dropdown\">\n          <span class=\"el-dropdown-link\">\n            下拉菜单<i class=\"el-icon-caret-bottom el-icon-right\"></i>\n          </span>\n          <el-dropdown-menu slot=\"dropdown\" class=\"dropdown-test-creat\">\n            <el-dropdown-item>黄金糕</el-dropdown-item>\n            <el-dropdown-item>狮子头</el-dropdown-item>\n            <el-dropdown-item>螺蛳粉</el-dropdown-item>\n            <el-dropdown-item>双皮奶</el-dropdown-item>\n            <el-dropdown-item>蚵仔煎</el-dropdown-item>\n          </el-dropdown-menu>\n        </el-dropdown>\n      `\n    }, true);\n    let dropdown = vm.$refs.dropdown;\n    let dropdownElm = dropdown.$el;\n    let triggerElm = dropdownElm.children[0];\n\n    triggerEvent(triggerElm, 'mouseenter');\n    setTimeout(() => {\n      const zIndex1 = document.querySelector('.el-dropdown-menu').style.zIndex;\n      dropdown.broadcast('ElDropdownMenu', 'updatePopper');\n      setTimeout(() => {\n        const zIndex2 = document.querySelector('.el-dropdown-menu').style.zIndex;\n        expect(zIndex2 > zIndex1).to.be.true;\n        done();\n      }, 100);\n    }, 300);\n  });\n  it('dropdown disabled', done => {\n    vm = createVue({\n      template: `\n        <el-dropdown ref=\"dropdown\" disabled>\n          <span class=\"el-dropdown-link\">\n            下拉菜单<i class=\"el-icon-caret-bottom el-icon-right\"></i>\n          </span>\n          <el-dropdown-menu slot=\"dropdown\" class=\"dropdown-test-creat\">\n            <el-dropdown-item>黄金糕</el-dropdown-item>\n            <el-dropdown-item>狮子头</el-dropdown-item>\n            <el-dropdown-item>螺蛳粉</el-dropdown-item>\n            <el-dropdown-item>双皮奶</el-dropdown-item>\n            <el-dropdown-item>蚵仔煎</el-dropdown-item>\n          </el-dropdown-menu>\n        </el-dropdown>\n      `\n    }, true);\n    let dropdown = vm.$refs.dropdown;\n    let dropdownElm = dropdown.$el;\n    let triggerElm = dropdownElm.children[0];\n\n    triggerEvent(triggerElm, 'mouseenter');\n    setTimeout(() => {\n      expect(dropdownElm.querySelectorAll('.el-dropdown-link[disabled]').length).equal(1);\n      expect(dropdown.visible).to.be.false;\n      done();\n    }, 10);\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/empty.spec.js",
    "content": "import { createVue, createTest, destroyVM, waitImmediate } from '../util';\nimport Empty from 'packages/empty';\n\nconst AXIOM = 'Rem is the best girl';\n\ndescribe('Empty', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n  it('render test', () => {\n    vm = createVue({\n      template: '<el-empty>{{ AXIOM }}</el-empty>',\n      data() {\n        return {\n          AXIOM\n        };\n      }\n    }, true);\n    expect(vm.$el.querySelector('.el-empty__image')).to.exist;\n    expect(vm.$el.querySelector('.el-empty__description')).to.exist;\n    expect(vm.$el.querySelector('.el-empty__bottom')).to.exist;\n  });\n\n  it('should render image props', () => {\n    vm = createTest(Empty, {\n      image: AXIOM\n    }, true);\n    expect(vm.$el.querySelector('.el-empty__image img')).to.exist;\n  });\n\n  it('should render imageSize props', async() => {\n    vm = createVue({\n      template: '<el-empty :image-size=\"imageSize\"></el-empty>',\n      data() {\n        return {\n          imageSize: 500\n        };\n      }\n    }, true);\n    expect(vm.$el.querySelector('.el-empty__image').getAttribute('style')).to.contain('width: 500px');\n    vm.imageSize = 200;\n    await waitImmediate();\n    expect(vm.$el.querySelector('.el-empty__image').getAttribute('style')).to.contain('width: 200px');\n  });\n\n  it('should render description props', () => {\n    vm = createTest(Empty, {\n      description: AXIOM\n    }, true);\n    expect(vm.$el.querySelector('.el-empty__description').innerText).to.equal(AXIOM);\n  });\n\n  it('should render image slots', () => {\n    vm = createVue({\n      template: '<el-empty><template slot=\"image\">{{AXIOM}}</template></el-empty>',\n      data() {\n        return {\n          AXIOM\n        };\n      }\n    }, true);\n    expect(vm.$el.querySelector('.el-empty__image').innerText).to.equal(AXIOM);\n  });\n\n  it('should render description slots', () => {\n    vm = createVue({\n      template: '<el-empty><template slot=\"description\">{{AXIOM}}</template></el-empty>',\n      data() {\n        return {\n          AXIOM\n        };\n      }\n    }, true);\n    expect(vm.$el.querySelector('.el-empty__description').innerText).to.equal(AXIOM);\n  });\n\n  it('should render default slots', () => {\n    vm = createVue({\n      template: '<el-empty>{{AXIOM}}</el-empty>',\n      data() {\n        return {\n          AXIOM\n        };\n      }\n    }, true);\n    expect(vm.$el.querySelector('.el-empty__bottom').innerText).to.equal(AXIOM);\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/form.spec.js",
    "content": "import { createVue, destroyVM, waitImmediate } from '../util';\n\nconst DELAY = 50;\n\ndescribe('Form', () => {\n  let vm;\n  let hasPromise = true;\n  before(() => {\n    if (!window.Promise) {\n      hasPromise = false;\n      window.Promise = require('es6-promise').Promise;\n    }\n  });\n\n  after(() => {\n    if (!hasPromise) {\n      window.Promise = undefined;\n    }\n  });\n\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('label width', done => {\n    vm = createVue({\n      template: `\n        <el-form ref=\"form\" :model=\"form\" label-width=\"80px\">\n          <el-form-item label=\"活动名称\">\n            <el-input v-model=\"form.name\"></el-input>\n          </el-form-item>\n        </el-form>\n      `,\n      data() {\n        return {\n          form: {\n            name: ''\n          }\n        };\n      }\n    }, true);\n    expect(vm.$el.querySelector('.el-form-item__label').style.width).to.equal('80px');\n    expect(vm.$el.querySelector('.el-form-item__content').style.marginLeft).to.equal('80px');\n    done();\n  });\n  it('auto label width', async() => {\n    vm = createVue({\n      template: `\n        <el-form ref=\"form\" :model=\"form\" label-width=\"auto\">\n          <el-form-item label=\"活动名称\">\n            <el-input v-model=\"form.name\"></el-input>\n          </el-form-item>\n          <el-form-item label=\"活动备注信息\" v-if=\"display\">\n            <el-input v-model=\"form.name\"></el-input>\n          </el-form-item>\n        </el-form>\n      `,\n      data() {\n        return {\n          display: true,\n          form: {\n            name: '',\n            intro: ''\n          }\n        };\n      }\n    }, true);\n\n    await waitImmediate();\n\n    const formItems = vm.$el.querySelectorAll('.el-form-item__content');\n    const marginLeft = parseInt(formItems[0].style.marginLeft, 10);\n    const marginLeft1 = parseInt(formItems[1].style.marginLeft, 10);\n    expect(marginLeft === marginLeft1).to.be.true;\n\n    vm.display = false;\n    await waitImmediate();\n\n    const formItem = vm.$el.querySelector('.el-form-item__content');\n    const newMarginLeft = parseInt(formItem.style.marginLeft, 10);\n    expect(newMarginLeft < marginLeft).to.be.true;\n  });\n  it('inline form', done => {\n    vm = createVue({\n      template: `\n        <el-form ref=\"form\" :model=\"form\" inline>\n          <el-form-item>\n            <el-input v-model=\"form.name\"></el-input>\n          </el-form-item>\n          <el-form-item>\n            <el-input v-model=\"form.address\"></el-input>\n          </el-form-item>\n        </el-form>\n      `,\n      data() {\n        return {\n          form: {\n            name: '',\n            address: ''\n          }\n        };\n      }\n    }, true);\n    expect(vm.$el.classList.contains('el-form--inline')).to.be.true;\n    done();\n  });\n  it('label position', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-form :model=\"form\" label-position=\"top\" ref=\"labelTop\">\n            <el-form-item>\n              <el-input v-model=\"form.name\"></el-input>\n            </el-form-item>\n            <el-form-item>\n              <el-input v-model=\"form.address\"></el-input>\n            </el-form-item>\n          </el-form>\n          <el-form :model=\"form\" label-position=\"left\" ref=\"labelLeft\">\n            <el-form-item>\n              <el-input v-model=\"form.name\"></el-input>\n            </el-form-item>\n            <el-form-item>\n              <el-input v-model=\"form.address\"></el-input>\n            </el-form-item>\n          </el-form>\n        </div>\n      `,\n      data() {\n        return {\n          form: {\n            name: '',\n            address: ''\n          }\n        };\n      }\n    }, true);\n    expect(vm.$refs.labelTop.$el.classList.contains('el-form--label-top')).to.be.true;\n    expect(vm.$refs.labelLeft.$el.classList.contains('el-form--label-left')).to.be.true;\n    done();\n  });\n  it('label size', () => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-form :model=\"form\" size=\"mini\" ref=\"labelMini\">\n            <el-form-item>\n              <el-input v-model=\"form.name\"></el-input>\n            </el-form-item>\n          </el-form>\n        </div>\n      `,\n      data() {\n        return {\n          form: {\n            name: ''\n          }\n        };\n      }\n    }, true);\n    expect(vm.$refs.labelMini.$el.children[0].classList.contains('el-form-item--mini')).to.be.true;\n  });\n  it('show message', done => {\n    vm = createVue({\n      template: `\n        <el-form :model=\"form\" ref=\"form\">\n          <el-form-item label=\"活动名称\" prop=\"name\" :show-message=\"false\"\n            :rules=\"{\n              required: true,\n              message: '请输入活动名称',\n              trigger: 'change',\n              min: 3,\n              max: 6\n            }\"\n          >\n            <el-input v-model=\"form.name\"></el-input>\n          </el-form-item>\n        </el-form>\n      `,\n      data() {\n        return {\n          form: {\n            name: ''\n          }\n        };\n      }\n    }, true);\n    vm.$refs.form.validate(valid => {\n      expect(valid).to.not.true;\n      vm.$refs.form.$nextTick(_ => {\n        expect(vm.$el.querySelector('.el-form-item__error')).to.not.exist;\n        done();\n      });\n    });\n  });\n  it('reset field', done => {\n    vm = createVue({\n      template: `\n        <el-form ref=\"form\" :model=\"form\" :rules=\"rules\">\n          <el-form-item label=\"活动名称\" prop=\"name\">\n            <el-input v-model=\"form.name\" ref=\"fieldName\"></el-input>\n          </el-form-item>\n          <el-form-item label=\"活动地址\" prop=\"address\">\n            <el-input v-model=\"form.address\" ref=\"fieldAddr\"></el-input>\n          </el-form-item>\n          <el-form-item label=\"活动性质\" prop=\"type\">\n            <el-checkbox-group v-model=\"form.type\">\n              <el-checkbox label=\"美食/餐厅线上活动\" name=\"type\"></el-checkbox>\n              <el-checkbox label=\"地推活动\" name=\"type\"></el-checkbox>\n              <el-checkbox label=\"线下主题活动\" name=\"type\"></el-checkbox>\n              <el-checkbox label=\"单纯品牌曝光\" name=\"type\"></el-checkbox>\n            </el-checkbox-group>\n          </el-form-item>\n        </el-form>\n      `,\n      data() {\n        return {\n          form: {\n            name: '',\n            address: '',\n            type: []\n          },\n          rules: {\n            name: [\n              { required: true, message: '请输入活动名称', trigger: 'blur' }\n            ],\n            address: [\n              { required: true, message: '请选择活动区域', trigger: 'change' }\n            ],\n            type: [\n              { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }\n            ]\n          }\n        };\n      },\n      methods: {\n        setValue() {\n          this.form.name = 'jack';\n          this.form.address = 'aaaa';\n          this.form.type.push('地推活动');\n        }\n      }\n    }, true);\n    vm.setValue();\n    vm.$refs.form.resetFields();\n    vm.$refs.form.$nextTick(_ => {\n      expect(vm.form.name).to.equal('');\n      expect(vm.form.address).to.equal('');\n      expect(vm.form.type.length).to.equal(0);\n      done();\n    });\n  });\n  it('clear validate', done => {\n    vm = createVue({\n      template: `\n        <el-form ref=\"form\" :model=\"form\" :rules=\"rules\">\n          <el-form-item label=\"活动名称\" prop=\"name\">\n            <el-input v-model=\"form.name\"></el-input>\n          </el-form-item>\n          <el-form-item label=\"活动地址\" prop=\"address\">\n            <el-input v-model=\"form.address\"></el-input>\n          </el-form-item>\n          <el-form-item label=\"活动性质\" prop=\"type\">\n            <el-checkbox-group v-model=\"form.type\">\n              <el-checkbox label=\"美食/餐厅线上活动\" name=\"type\"></el-checkbox>\n              <el-checkbox label=\"地推活动\" name=\"type\"></el-checkbox>\n              <el-checkbox label=\"线下主题活动\" name=\"type\"></el-checkbox>\n              <el-checkbox label=\"单纯品牌曝光\" name=\"type\"></el-checkbox>\n            </el-checkbox-group>\n          </el-form-item>\n        </el-form>\n      `,\n      data() {\n        return {\n          form: {\n            name: '',\n            address: '',\n            type: []\n          },\n          rules: {\n            name: [\n              { required: true, message: '请输入活动名称', trigger: 'blur' }\n            ],\n            address: [\n              { required: true, message: '请选择活动区域', trigger: 'change' }\n            ],\n            type: [\n              { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }\n            ]\n          }\n        };\n      }\n    }, true);\n    const form = vm.$refs.form;\n    const nameField = form.fields.filter(field => field.prop === 'name')[0];\n    const addressField = form.fields.filter(field => field.prop === 'address')[0];\n    form.validate();\n    vm.$nextTick(() => {\n      expect(nameField.validateMessage).to.equal('请输入活动名称');\n      form.clearValidate(['name']);\n      vm.$nextTick(() => {\n        expect(nameField.validateMessage).to.equal('');\n        form.clearValidate();\n        vm.$nextTick(() => {\n          expect(addressField.validateMessage).to.equal('');\n          done();\n        });\n      });\n    });\n  });\n  it('form item nest', done => {\n    vm = createVue({\n      template: `\n        <el-form ref=\"form\" :model=\"form\" :rules=\"rules\">\n          <el-form-item label=\"活动时间\" required>\n            <el-col :span=\"11\">\n              <el-form-item prop=\"date1\">\n                <el-date-picker type=\"date\" placeholder=\"选择日期\" v-model=\"form.date1\" style=\"width: 100%;\"></el-date-picker>\n              </el-form-item>\n            </el-col>\n            <el-col class=\"line\" :span=\"2\">-</el-col>\n            <el-col :span=\"11\">\n              <el-form-item prop=\"date2\">\n                <el-time-picker placeholder=\"选择时间\" v-model=\"form.date2\" style=\"width: 100%;\"></el-time-picker>\n              </el-form-item>\n            </el-col>\n          </el-form-item>\n        </el-form>\n      `,\n      data() {\n        return {\n          form: {\n            date1: '',\n            date2: ''\n          },\n          rules: {\n            date1: [\n              { type: 'date', required: true, message: '请选择日期', trigger: 'change' }\n            ]\n          }\n        };\n      },\n      methods: {\n        setValue() {\n          this.name = 'jack';\n          this.address = 'aaaa';\n        }\n      }\n    }, true);\n    vm.$refs.form.validate(valid => {\n      expect(valid).to.not.true;\n      done();\n    });\n  });\n  describe('validate', () => {\n    it('input', done => {\n      vm = createVue({\n        template: `\n          <el-form :model=\"form\" :rules=\"rules\" ref=\"form\">\n            <el-form-item label=\"活动名称\" prop=\"name\" ref=\"field\">\n              <el-input v-model=\"form.name\"></el-input>\n            </el-form-item>\n          </el-form>\n        `,\n        data() {\n          return {\n            form: {\n              name: ''\n            },\n            rules: {\n              name: [\n                { required: true, message: '请输入活动名称', trigger: 'change', min: 3, max: 6 }\n              ]\n            }\n          };\n        },\n        methods: {\n          setValue(value) {\n            this.form.name = value;\n          }\n        }\n      }, true);\n      vm.$refs.form.validate(valid => {\n        let field = vm.$refs.field;\n        expect(valid).to.not.true;\n        vm.$refs.form.$nextTick(_ => {\n          expect(field.validateMessage).to.equal('请输入活动名称');\n          vm.setValue('aaaaa');\n\n          vm.$refs.form.$nextTick(_ => {\n            expect(field.validateMessage).to.equal('');\n            vm.setValue('aa');\n\n            vm.$refs.form.$nextTick(_ => {\n              expect(field.validateMessage).to.equal('请输入活动名称');\n              done();\n            });\n          });\n        });\n      });\n    });\n    it('textarea', done => {\n      vm = createVue({\n        template: `\n          <el-form :model=\"form\" :rules=\"rules\" ref=\"form\">\n            <el-form-item label=\"活动名称\" prop=\"name\" ref=\"field\">\n              <el-input type=\"textarea\" v-model=\"form.name\"></el-input>\n            </el-form-item>\n          </el-form>\n        `,\n        data() {\n          return {\n            form: {\n              name: ''\n            },\n            rules: {\n              name: [\n                { required: true, message: '请输入活动名称', trigger: 'change', min: 3, max: 6 }\n              ]\n            }\n          };\n        },\n        methods: {\n          setValue(value) {\n            this.form.name = value;\n          }\n        }\n      }, true);\n      vm.$refs.form.validate(valid => {\n        let field = vm.$refs.field;\n        expect(valid).to.not.true;\n        vm.$refs.form.$nextTick(_ => {\n          expect(field.validateMessage).to.equal('请输入活动名称');\n          vm.setValue('aaaaa');\n\n          vm.$refs.form.$nextTick(_ => {\n            expect(field.validateMessage).to.equal('');\n            vm.setValue('aa');\n\n            vm.$refs.form.$nextTick(_ => {\n              expect(field.validateMessage).to.equal('请输入活动名称');\n              done();\n            });\n          });\n        });\n      });\n    });\n    it('selector', done => {\n      vm = createVue({\n        template: `\n          <el-form :model=\"form\" :rules=\"rules\" ref=\"form\">\n            <el-form-item label=\"记住密码\" prop=\"region\" ref=\"field\">\n              <el-select v-model=\"form.region\" placeholder=\"请选择活动区域\">\n                <el-option label=\"区域一\" value=\"shanghai\"></el-option>\n                <el-option label=\"区域二\" ref=\"opt\" value=\"beijing\"></el-option>\n              </el-select>\n            </el-form-item>\n          </el-form>\n        `,\n        data() {\n          return {\n            form: {\n              region: ''\n            },\n            rules: {\n              region: [\n                {required: true, message: '请选择活动区域', trigger: 'change' }\n              ]\n            }\n          };\n        }\n      }, true);\n      vm.$refs.form.validate(valid => {\n        let field = vm.$refs.field;\n        expect(valid).to.false;\n        setTimeout(_ => {\n          expect(field.validateMessage).to.equal('请选择活动区域');\n          // programatic modification triggers change validation\n          vm.form.region = 'shanghai';\n          setTimeout(_ => {\n            expect(field.validateMessage).to.equal('');\n            vm.form.region = '';\n            setTimeout(_ => {\n              expect(field.validateMessage).to.equal('请选择活动区域');\n              // user modification of bound value triggers change validation\n              vm.$refs.opt.$el.click();\n              setTimeout(_ => {\n                expect(field.validateMessage).to.equal('');\n                done();\n              }, 100);\n            }, 100);\n          }, 100);\n        }, 100);\n      });\n    });\n    it('datepicker', done => {\n      vm = createVue({\n        template: `\n          <el-form :model=\"form\" :rules=\"rules\" ref=\"form\">\n            <el-form-item label=\"记住密码\" prop=\"date\" ref=\"field\">\n              <el-date-picker type=\"date\" ref=\"picker\" placeholder=\"选择日期\" v-model=\"form.date\" style=\"width: 100%;\"></el-date-picker>\n            </el-form-item>\n          </el-form>\n        `,\n        data() {\n          return {\n            form: {\n              date: ''\n            },\n            rules: {\n              date: [\n                {type: 'date', required: true, message: '请选择日期', trigger: 'change' }\n              ]\n            }\n          };\n        }\n      }, true);\n      vm.$refs.form.validate(valid => {\n        let field = vm.$refs.field;\n        expect(valid).to.not.true;\n        setTimeout(_ => {\n          expect(field.validateMessage).to.equal('请选择日期');\n          // programatic modification triggers change validation\n          vm.form.date = new Date();\n          setTimeout(_ => {\n            expect(field.validateMessage).to.equal('');\n            vm.form.date = '';\n            // user modification triggers change\n            const input = vm.$refs.picker.$el.querySelector('input');\n            input.blur();\n            input.focus();\n            setTimeout(_ => {\n              const keyDown = (el, keyCode) => {\n                const evt = document.createEvent('Events');\n                evt.initEvent('keydown', true, true);\n                evt.keyCode = keyCode;\n                el.dispatchEvent(evt);\n              };\n              keyDown(input, 37);\n              setTimeout(_ => {\n                keyDown(input, 13);\n                setTimeout(_ => {\n                  expect(field.validateMessage).to.equal('');\n                  done();\n                }, DELAY);\n              }, DELAY);\n            }, DELAY);\n          }, DELAY);\n        }, DELAY);\n      });\n    });\n    it('timepicker', done => {\n      vm = createVue({\n        template: `\n          <el-form :model=\"form\" :rules=\"rules\" ref=\"form\">\n            <el-form-item label=\"记住密码\" prop=\"date\" ref=\"field\">\n              <el-time-picker ref=\"picker\" placeholder=\"选择时间\" v-model=\"form.date\" style=\"width: 100%;\"></el-time-picker>\n            </el-form-item>\n          </el-form>\n        `,\n        data() {\n          return {\n            form: {\n              date: ''\n            },\n            rules: {\n              date: [\n                {type: 'date', required: true, message: '请选择时间', trigger: 'change' }\n              ]\n            }\n          };\n        }\n      }, true);\n      vm.$refs.form.validate(valid => {\n        let field = vm.$refs.field;\n        expect(valid).to.not.true;\n        setTimeout(_ => {\n          expect(field.validateMessage).to.equal('请选择时间');\n          // programatic modification does not trigger change\n          vm.value = new Date();\n          setTimeout(_ => {\n            expect(field.validateMessage).to.equal('请选择时间');\n            vm.value = '';\n            // user modification triggers change\n            const input = vm.$refs.picker.$el.querySelector('input');\n            input.blur();\n            input.focus();\n            setTimeout(_ => {\n              vm.$refs.picker.picker.$el.querySelector('.confirm').click();\n              setTimeout(_ => {\n                expect(field.validateMessage).to.equal('');\n                done();\n              }, DELAY);\n            }, DELAY);\n          }, DELAY);\n        }, DELAY);\n      });\n    });\n    it('checkbox', done => {\n      vm = createVue({\n        template: `\n          <el-form :model=\"form\" :rules=\"rules\" ref=\"form\">\n            <el-form-item label=\"是否接受协议\" prop=\"accept\" ref=\"field\">\n              <el-checkbox v-model=\"form.accept\">\n                <span>接受协议</span>\n              </el-checkbox>\n            </el-form-item>\n          </el-form>\n        `,\n        data() {\n          return {\n            form: {\n              accept: true\n            },\n            rules: {\n              accept: [\n                {\n                  validator: (rule, value, callback) => {\n                    value ? callback() : callback(new Error('您需要接受用户协议'));\n                  },\n                  trigger: 'change'\n                }\n              ]\n            }\n          };\n        },\n        methods: {\n          setValue(value) {\n            this.form.accept = value;\n          }\n        }\n      }, true);\n      vm.form.accept = false;\n      vm.$nextTick(_ => {\n        expect(vm.$refs.field.validateMessage).to.equal('您需要接受用户协议');\n      });\n      vm.$refs.form.validate(valid => {\n        let field = vm.$refs.field;\n        expect(valid).to.not.true;\n        expect(field.validateMessage).to.equal('您需要接受用户协议');\n        vm.$refs.form.$nextTick(_ => {\n          vm.setValue(true);\n\n          vm.$refs.form.$nextTick(_ => {\n            expect(field.validateMessage).to.equal('');\n            done();\n          });\n        });\n      });\n    });\n    it('checkbox group', done => {\n      vm = createVue({\n        template: `\n          <el-form :model=\"form\" :rules=\"rules\" ref=\"form\">\n            <el-form-item label=\"活动名称\" prop=\"type\" ref=\"field\">\n              <el-checkbox-group v-model=\"form.type\">\n                <el-checkbox label=\"美食/餐厅线上活动\" name=\"type\"></el-checkbox>\n                <el-checkbox label=\"地推活动\" name=\"type\"></el-checkbox>\n                <el-checkbox label=\"线下主题活动\" name=\"type\"></el-checkbox>\n                <el-checkbox label=\"单纯品牌曝光\" name=\"type\"></el-checkbox>\n              </el-checkbox-group>\n            </el-form-item>\n          </el-form>\n        `,\n        data() {\n          return {\n            form: {\n              type: []\n            },\n            rules: {\n              type: [\n                { type: 'array', required: true, message: '请选择活动类型', trigger: 'change' }\n              ]\n            }\n          };\n        },\n        methods: {\n          setValue(value) {\n            this.form.type = value;\n          }\n        }\n      }, true);\n      vm.$refs.form.validate(valid => {\n        let field = vm.$refs.field;\n        expect(valid).to.not.true;\n        vm.$refs.form.$nextTick(_ => {\n          expect(field.validateMessage).to.equal('请选择活动类型');\n          vm.setValue(['地推活动']);\n\n          vm.$refs.form.$nextTick(_ => {\n            expect(field.validateMessage).to.equal('');\n            done();\n          });\n        });\n      });\n    });\n    it('radio group', done => {\n      vm = createVue({\n        template: `\n          <el-form :model=\"form\" :rules=\"rules\" ref=\"form\">\n            <el-form-item label=\"活动名称\" prop=\"type\" ref=\"field\">\n              <el-radio-group v-model=\"form.type\">\n                <el-radio label=\"线上品牌商赞助\"></el-radio>\n                <el-radio label=\"线下场地免费\"></el-radio>\n              </el-radio-group>\n            </el-form-item>\n          </el-form>\n        `,\n        data() {\n          return {\n            form: {\n              type: ''\n            },\n            rules: {\n              type: [\n                { required: true, message: '请选择活动类型', trigger: 'change' }\n              ]\n            }\n          };\n        },\n        methods: {\n          setValue(value) {\n            this.form.type = value;\n          }\n        }\n      }, true);\n      vm.$refs.form.validate(valid => {\n        let field = vm.$refs.field;\n        expect(valid).to.not.true;\n        vm.$refs.form.$nextTick(_ => {\n          expect(field.validateMessage).to.equal('请选择活动类型');\n          vm.setValue('线下场地免费');\n\n          vm.$refs.form.$nextTick(_ => {\n            expect(field.validateMessage).to.equal('');\n            done();\n          });\n        });\n      });\n    });\n    it('validate field', done => {\n      vm = createVue({\n        template: `\n          <el-form :model=\"form\" :rules=\"rules\" ref=\"form\">\n            <el-form-item label=\"活动名称\" prop=\"name\" ref=\"field\">\n              <el-input v-model=\"form.name\"></el-input>\n            </el-form-item>\n          </el-form>\n        `,\n        data() {\n          return {\n            form: {\n              name: ''\n            },\n            rules: {\n              name: [\n                { required: true, message: '请输入活动名称', trigger: 'change', min: 3, max: 6 }\n              ]\n            }\n          };\n        },\n        methods: {\n          setValue(value) {\n            this.form.name = value;\n          }\n        }\n      }, true);\n      vm.$refs.form.validateField('name', valid => {\n        expect(valid).to.not.true;\n        done();\n      });\n    });\n    it('custom validate', done => {\n      var checkName = (rule, value, callback) => {\n        if (value.length < 5) {\n          callback(new Error('长度至少为5'));\n        } else {\n          callback();\n        }\n      };\n      vm = createVue({\n        template: `\n          <el-form :model=\"form\" :rules=\"rules\" ref=\"form\">\n            <el-form-item label=\"活动名称\" prop=\"name\" ref=\"field\">\n              <el-input v-model=\"form.name\"></el-input>\n            </el-form-item>\n          </el-form>\n        `,\n        data() {\n          return {\n            form: {\n              name: ''\n            },\n            rules: {\n              name: [\n                { validator: checkName, trigger: 'change' }\n              ]\n            }\n          };\n        },\n        methods: {\n          setValue(value) {\n            this.form.name = value;\n          }\n        }\n      }, true);\n      vm.$refs.form.validate(valid => {\n        let field = vm.$refs.field;\n        expect(valid).to.not.true;\n        vm.$refs.form.$nextTick(_ => {\n          expect(field.validateMessage).to.equal('长度至少为5');\n          vm.setValue('aaaaaa');\n\n          vm.$refs.form.$nextTick(_ => {\n            expect(field.validateMessage).to.equal('');\n            done();\n          });\n        });\n      });\n    });\n    it('error', done => {\n      vm = createVue({\n        template: `\n          <el-form :model=\"form\" :rules=\"rules\" ref=\"form\">\n            <el-form-item label=\"活动名称\" prop=\"name\" :error=\"error\" ref=\"field\">\n              <el-input v-model=\"form.name\"></el-input>\n            </el-form-item>\n          </el-form>\n        `,\n        data() {\n          return {\n            error: 'dsad',\n            form: {\n              name: 'sada'\n            },\n            rules: {\n              name: [\n                { required: true, message: '请输入活动名称', trigger: 'change', min: 3, max: 6 }\n              ]\n            }\n          };\n        },\n        methods: {\n          setValue(value) {\n            this.form.name = value;\n          }\n        }\n      }, true);\n      vm.$refs.form.validate(valid => {\n        let field = vm.$refs.field;\n        expect(valid).to.true;\n        vm.error = '输入不合法';\n\n        vm.$refs.field.$nextTick(_ => {\n          expect(field.validateState).to.equal('error');\n          expect(field.validateMessage).to.equal('输入不合法');\n          done();\n        });\n      });\n    });\n    it('invalid fields', done => {\n      var checkName = (rule, value, callback) => {\n        if (value.length < 5) {\n          callback(new Error('长度至少为5'));\n        } else {\n          callback();\n        }\n      };\n      vm = createVue({\n        template: `\n          <el-form :model=\"form\" :rules=\"rules\" ref=\"form\">\n            <el-form-item label=\"活动名称\" prop=\"name\" ref=\"field\">\n              <el-input v-model=\"form.name\"></el-input>\n            </el-form-item>\n          </el-form>\n        `,\n        data() {\n          return {\n            form: {\n              name: ''\n            },\n            rules: {\n              name: [\n                { validator: checkName, trigger: 'change' }\n              ]\n            }\n          };\n        }\n      }, true);\n      vm.$refs.form.validate((valid, invalidFields) => {\n        expect(invalidFields.name.length).to.equal(1);\n        done();\n      });\n    });\n    it('validate return promise', done => {\n      var checkName = (rule, value, callback) => {\n        if (value.length < 5) {\n          callback(new Error('长度至少为5'));\n        } else {\n          callback();\n        }\n      };\n      vm = createVue({\n        template: `\n          <el-form :model=\"form\" :rules=\"rules\" ref=\"form\">\n            <el-form-item label=\"活动名称\" prop=\"name\" ref=\"field\">\n              <el-input v-model=\"form.name\"></el-input>\n            </el-form-item>\n          </el-form>\n        `,\n        data() {\n          return {\n            form: {\n              name: ''\n            },\n            rules: {\n              name: [\n                { validator: checkName, trigger: 'change' }\n              ]\n            }\n          };\n        }\n      }, true);\n      vm.$refs.form.validate().catch(invalidFields => {\n        expect(invalidFields.name[0].message).to.be.equal('长度至少为5');\n        done();\n      });\n    });\n  });\n  it('validate event', done => {\n    vm = createVue({\n      template: `\n          <el-form :model=\"form\" :rules=\"rules\" ref=\"form\" @validate=\"onValidate\">\n            <el-form-item label=\"活动名称\" prop=\"name\" ref=\"name\">\n              <el-input v-model=\"form.name\"></el-input>\n            </el-form-item>\n            <el-form-item label=\"活动地点\" prop=\"addr\" ref=\"addr\">\n              <el-input v-model=\"form.addr\"></el-input>\n            </el-form-item>\n          </el-form>\n        `,\n      data() {\n        return {\n          form: {\n            name: '',\n            addr: ''\n          },\n          valid: {\n            name: null,\n            addr: null\n          },\n          error: {\n            name: null,\n            addr: null\n          },\n          rules: {\n            name: [\n              { required: true, message: '请输入活动名称', trigger: 'change', min: 3, max: 6 }\n            ],\n            addr: [\n              { required: true, message: '请输入活动名称', trigger: 'change' }\n            ]\n          }\n        };\n      },\n      methods: {\n        onValidate(prop, valid, msg) {\n          this.valid[prop] = valid;\n          this.error[prop] = msg;\n        },\n        setValue(prop, value) {\n          this.form[prop] = value;\n        }\n      }\n    }, true);\n    vm.setValue('name', '1');\n    setTimeout(() => {\n      expect(vm.valid.name).to.equal(false);\n      expect(vm.error.name).to.equal('请输入活动名称');\n      vm.setValue('addr', '1');\n      setTimeout(() => {\n        expect(vm.valid.addr).to.equal(true);\n        expect(vm.error.addr).to.equal(null);\n        vm.setValue('name', '111');\n        setTimeout(() => {\n          expect(vm.valid.name).to.equal(true);\n          expect(vm.error.name).to.equal(null);\n          done();\n        }, DELAY);\n      }, DELAY);\n    }, DELAY);\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/image.spec.js",
    "content": "import { createTest, createVue, destroyVM, wait } from '../util';\nimport Image from 'packages/image';\nimport { IMAGE_SUCCESS, IMAGE_FAIL } from '../mocks/uri';\n\nconst src = IMAGE_SUCCESS;\n\ndescribe('Image', () => {\n  let vm;\n\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', async() => {\n    vm = createTest(Image, {\n      src,\n      fit: 'fill'\n    }, true);\n    const placeholder = vm.$el.querySelector('.el-image__placeholder');\n    const error = vm.$el.querySelector('.el-image__error');\n    let img = vm.$el.querySelector('.el-image__inner');\n    expect(placeholder).to.exist;\n    expect(error).to.be.null;\n    expect(img).to.be.null;\n\n    await wait();\n    img = vm.$el.querySelector('.el-image__inner');\n    expect(img.style.objectFit).to.equal('fill');\n  });\n\n  it('load failed', async() => {\n    vm = createTest(Image, {\n      src: IMAGE_FAIL\n    }, true);\n    await wait();\n    const error = vm.$el.querySelector('.el-image__error');\n    expect(error).to.be.exist;\n  });\n\n  it('lazy load', async() => {\n    vm = createVue({\n      template: `\n        <div ref=\"wrapper\" style=\"height: 200px; overflow: auto;\">\n          <el-image\n            v-for=\"item in 2\"\n            :key=\"item\"\n            :src=\"src\"\n            ref=\"image\"\n            style=\"display: block; height: 200px;\"\n            lazy></el-image>\n        </div>\n      `,\n      data() {\n        return {\n          src\n        };\n      }\n    }, true);\n    const { image, wrapper } = vm.$refs;\n    const [image1, image2] = image;\n\n    await wait();\n    expect(image1.loading).to.be.false;\n    expect(image2.loading).to.be.true;\n    wrapper.scrollTop = 10;\n\n    await wait();\n    expect(image2.loading).to.be.false;\n  });\n\n  it('$attrs', async() => {\n    vm = createVue({\n      template: `\n        <el-image\n          alt=\"$attrs test\"\n          referrerpolicy=\"origin\"\n          :src=\"src\"></el-image>\n      `,\n      data() {\n        return {\n          src\n        };\n      }\n    }, true);\n\n    await wait();\n    const $img = vm.$el.querySelector('.el-image__inner');\n    expect($img.getAttribute('alt')).to.be.equal('$attrs test');\n    expect($img.getAttribute('referrerpolicy')).to.be.equal('origin');\n  });\n\n  it('pass event listeners', async() => {\n    let result;\n    vm = createVue({\n      template: `\n        <el-image @click=\"handleClick\" :src=\"src\"></el-image>\n      `,\n      data() {\n        return {\n          src\n        };\n      },\n      methods: {\n        handleClick(e) {\n          result = e;\n        }\n      }\n    }, true);\n    await wait();\n    vm.$el.querySelector('.el-image__inner').click();\n    await wait();\n    expect(result).to.exist;\n  });\n\n  it('big image preview', async() => {\n    vm = createVue({\n      template: `\n        <el-image :src=\"src\" :preview-src-list=\"srcList\"></el-image>\n      `,\n      data() {\n        return {\n          src: src,\n          srcList: [src]\n        };\n      }\n    }, true);\n    await wait();\n    vm.$el.querySelector('.el-image__inner').click();\n    await wait();\n\n    expect(document.querySelector('.el-image-viewer__wrapper')).to.exist;\n    document.querySelector('.el-image-viewer__close').click();\n    await wait(1000);\n    expect(document.querySelector('.el-image-viewer__wrapper')).to.not.exist;\n  });\n});\n\n"
  },
  {
    "path": "test/unit/specs/infiniteScroll.spec.js",
    "content": "import { createVue, wait, destroyVM } from '../util';\n\ndescribe('InfiniteScroll', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', async() => {\n    vm = createVue({\n      template: `\n      <ul ref=\"scrollTarget\" v-infinite-scroll=\"load\" style=\"height: 300px;overflow: auto;\">\n        <li v-for=\"i in count\" style=\"display: flex;height: 50px;\">{{ i }}</li>\n      </ul>\n      `,\n      data() {\n        return {\n          count: 0\n        };\n      },\n      methods: {\n        load() {\n          this.count += 2;\n        }\n      }\n    }, true);\n    vm.$refs.scrollTarget.scrollTop = 2000;\n    await wait();\n    expect(vm.$el.innerText.indexOf('2') > -1).to.be.true;\n  });\n\n  it('invisible element not trigger', async() => {\n    vm = createVue({\n      template: `\n      <div v-show=\"false\">\n        <ul ref=\"scrollTarget\" v-infinite-scroll=\"load\" style=\"height: 300px;overflow: auto;\">\n          <li v-for=\"i in count\" style=\"display: flex;height: 50px;\">{{ i }}</li>\n        </ul>\n      </div>\n      `,\n      data() {\n        return {\n          count: 0\n        };\n      },\n      methods: {\n        load() {\n          this.count += 2;\n        }\n      }\n    }, true);\n    vm.$refs.scrollTarget.scrollTop = 2000;\n    await wait();\n    expect(vm.$el.innerText.indexOf('2') > -1).to.be.false;\n  });\n\n});\n\n"
  },
  {
    "path": "test/unit/specs/input-number.spec.js",
    "content": "import {createVue, triggerEvent, triggerClick, destroyVM, waitImmediate} from '../util';\n\nconst DELAY = 1;\n\ndescribe('InputNumber', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n  it('create', () => {\n    vm = createVue({\n      template: `\n        <el-input-number v-model=\"value\">\n        </el-input-number>\n      `,\n      data() {\n        return {\n          value: 1\n        };\n      }\n    }, true);\n    let input = vm.$el.querySelector('input');\n\n    expect(vm.value).to.be.equal(1);\n    expect(input.value).to.be.equal('1');\n  });\n  it('decrease', done => {\n    vm = createVue({\n      template: `\n        <el-input-number v-model=\"value\" ref=\"input\">\n        </el-input-number>\n      `,\n      data() {\n        return {\n          value: 5\n        };\n      }\n    }, true);\n\n    let input = vm.$el.querySelector('input');\n    let btnDecrease = vm.$el.querySelector('.el-input-number__decrease');\n\n    triggerEvent(btnDecrease, 'mousedown');\n    triggerClick(document, 'mouseup');\n\n    vm.$nextTick(_ => {\n      expect(vm.value).to.be.equal(4);\n      expect(input.value).to.be.equal('4');\n      done();\n    });\n  });\n  it('increase', done => {\n    vm = createVue({\n      template: `\n        <el-input-number v-model=\"value\">\n        </el-input-number>\n      `,\n      data() {\n        return {\n          value: 1.5\n        };\n      }\n    }, true);\n\n    let input = vm.$el.querySelector('input');\n    let btnIncrease = vm.$el.querySelector('.el-input-number__increase');\n\n    triggerEvent(btnIncrease, 'mousedown');\n    triggerClick(document, 'mouseup');\n\n    vm.$nextTick(_ => {\n      expect(vm.value).to.be.equal(2.5);\n      expect(input.value).to.be.equal('2.5');\n      done();\n    });\n  });\n  it('disabled', done => {\n    vm = createVue({\n      template: `\n        <el-input-number v-model=\"value\" disabled>\n        </el-input-number>\n      `,\n      data() {\n        return {\n          value: 2\n        };\n      }\n    }, true);\n\n    let input = vm.$el.querySelector('input');\n    let btnDecrease = vm.$el.querySelector('.el-input-number__decrease');\n    let btnIncrease = vm.$el.querySelector('.el-input-number__increase');\n\n    triggerEvent(btnDecrease, 'mousedown');\n    triggerClick(document, 'mouseup');\n\n    vm.$nextTick(_ => {\n      expect(vm.value).to.be.equal(2);\n      expect(input.value).to.be.equal('2');\n\n      triggerEvent(btnIncrease, 'mousedown');\n      triggerClick(document, 'mouseup');\n\n      vm.$nextTick(_ => {\n        expect(vm.value).to.be.equal(2);\n        expect(input.value).to.be.equal('2');\n        done();\n      });\n    });\n  });\n  it('step', done => {\n    vm = createVue({\n      template: `\n        <el-input-number v-model=\"value\" :step=\"3.2\">\n        </el-input-number>\n      `,\n      data() {\n        return {\n          value: 5\n        };\n      }\n    }, true);\n\n    let input = vm.$el.querySelector('input');\n    let btnIncrease = vm.$el.querySelector('.el-input-number__increase');\n    let btnDecrease = vm.$el.querySelector('.el-input-number__decrease');\n\n    triggerEvent(btnIncrease, 'mousedown');\n    triggerClick(document, 'mouseup');\n\n    vm.$nextTick(_ => {\n      expect(vm.value).to.be.equal(8.2);\n      expect(input.value).to.be.equal('8.2');\n\n      triggerEvent(btnDecrease, 'mousedown');\n      triggerClick(document, 'mouseup');\n\n      vm.$nextTick(_ => {\n        expect(vm.value).to.be.equal(5);\n        expect(input.value).to.be.equal('5');\n        done();\n      });\n    });\n  });\n  it('step strictly', async() => {\n    vm = createVue({\n      template: `\n        <el-input-number v-model=\"value\" :step=\"1.2\" step-strictly>\n        </el-input-number>\n      `,\n      data() {\n        return {\n          value: 5\n        };\n      }\n    }, true);\n\n    let input = vm.$el.querySelector('input');\n    await waitImmediate();\n    expect(vm.value).to.be.equal(4.8);\n    expect(input.value).to.be.equal('4.8');\n    vm.value = '8';\n\n    await waitImmediate();\n    expect(vm.value).to.be.equal(8.4);\n    expect(input.value).to.be.equal('8.4');\n  });\n  it('min', done => {\n    vm = createVue({\n      template: `\n        <el-input-number v-model=\"value\" :min=\"6\">\n        </el-input-number>\n      `,\n      data() {\n        return {\n          value: 6\n        };\n      }\n    }, true);\n    const vm2 = createVue({\n      template: `\n        <el-input-number v-model=\"value\" :min=\"6\">\n        </el-input-number>\n      `,\n      data() {\n        return {\n          value: 3\n        };\n      }\n    }, true);\n\n    expect(vm2.value === 6);\n    expect(vm2.$el.querySelector('input').value).to.be.equal('6');\n\n    let input = vm.$el.querySelector('input');\n    let btnDecrease = vm.$el.querySelector('.el-input-number__decrease');\n\n    triggerEvent(btnDecrease, 'mousedown');\n    triggerClick(document, 'mouseup');\n\n    vm.$nextTick(_ => {\n      expect(vm.value).to.be.equal(6);\n      expect(input.value).to.be.equal('6');\n      done();\n    });\n  });\n  it('max', done => {\n    vm = createVue({\n      template: `\n        <el-input-number v-model=\"value\" :max=\"8\">\n        </el-input-number>\n      `,\n      data() {\n        return {\n          value: 8\n        };\n      }\n    }, true);\n    const vm2 = createVue({\n      template: `\n        <el-input-number v-model=\"value\" :max=\"8\">\n        </el-input-number>\n      `,\n      data() {\n        return {\n          value: 100\n        };\n      }\n    }, true);\n\n    expect(vm2.value === 8);\n    expect(vm2.$el.querySelector('input').value).to.be.equal('8');\n\n    let input = vm.$el.querySelector('input');\n    let btnIncrease = vm.$el.querySelector('.el-input-number__increase');\n\n    triggerEvent(btnIncrease, 'mousedown');\n    triggerClick(document, 'mouseup');\n\n    vm.$nextTick(_ => {\n      expect(vm.value).to.be.equal(8);\n      expect(input.value).to.be.equal('8');\n      done();\n    });\n  });\n  describe('precision', () => {\n    it('precision is 2', () => {\n      vm = createVue({\n        template: `\n          <el-input-number v-model=\"value\" :max=\"8\" :precision=\"2\">\n          </el-input-number>\n        `,\n        data() {\n          return {\n            value: 6.999\n          };\n        }\n      }, true);\n      expect(vm.value === 7);\n      expect(vm.$el.querySelector('input').value).to.be.equal('7.00');\n    });\n\n    it('precision greater than the precision of step', done => {\n      vm = createVue({\n        template: `\n          <el-input-number v-model=\"value\" :max=\"8\" :precision=\"0\" :step=\"0.1\">\n          </el-input-number>\n        `,\n        data() {\n          return {\n            value: 6.999\n          };\n        }\n      }, true);\n      const input = vm.$el.querySelector('input');\n      const btnIncrease = vm.$el.querySelector('.el-input-number__increase');\n\n      expect(vm.value === 7);\n      expect(input.value).to.be.equal('7');\n\n      triggerEvent(btnIncrease, 'mousedown');\n      triggerClick(document, 'mouseup');\n\n      vm.$nextTick(_ => {\n        expect(vm.value).to.be.equal(7);\n        expect(input.value).to.be.equal('7');\n        done();\n      });\n    });\n  });\n  it('controls', () => {\n    vm = createVue({\n      template: `\n        <el-input-number :controls=\"false\" v-model=\"value\" :max=\"8\">\n        </el-input-number>\n      `,\n      data() {\n        return {\n          value: 8\n        };\n      }\n    }, true);\n\n    expect(vm.$el.querySelector('.el-input-number__decrease')).to.not.exist;\n    expect(vm.$el.querySelector('.el-input-number__increase')).to.not.exist;\n  });\n  it('invalid value reset', done => {\n    vm = createVue({\n      template: `\n        <el-input-number v-model=\"value\" :min=\"5\" :max=\"10\" ref=\"inputNumber\">\n        </el-input-number>\n      `,\n      data() {\n        return {\n          value: 5\n        };\n      }\n    }, true);\n    const inputNumber = vm.$refs.inputNumber;\n    vm.value = 100;\n    vm.$nextTick(_ => {\n      expect(inputNumber.currentValue).to.be.equal(10);\n      vm.value = 4;\n\n      vm.$nextTick(_ => {\n        expect(inputNumber.currentValue).to.be.equal(5);\n        vm.value = 'dsajkhd';\n\n        vm.$nextTick(_ => {\n          expect(inputNumber.currentValue).to.be.equal(5);\n          done();\n        });\n      });\n    });\n  });\n  describe('event:change', () => {\n    let spy;\n\n    beforeEach(() => {\n      vm = createVue({\n        template: `\n          <el-input-number v-model=\"value\" ref=\"compo\" :min='2' :max='3' :step='1'>\n          </el-input-number>\n        `,\n        data() {\n          return {\n            value: 2\n          };\n        }\n      }, true);\n      spy = sinon.spy();\n      vm.$refs.compo.$on('change', spy);\n    });\n\n    it('emit on input', done => {\n      vm.$refs.compo.handleInputChange('3');\n      setTimeout(_ => {\n        expect(spy.calledOnce).to.be.true;\n        expect(spy.args[0][0]).to.equal(3);\n        done();\n      }, DELAY);\n    });\n\n    it('emit on button', done => {\n      const btnIncrease = vm.$el.querySelector('.el-input-number__increase');\n      triggerEvent(btnIncrease, 'mousedown');\n      triggerClick(document, 'mouseup');\n      setTimeout(_ => {\n        expect(spy.calledOnce).to.be.true;\n        expect(spy.args[0][0]).to.equal(3);\n        done();\n      }, DELAY);\n    });\n\n    it('does not emit on programatic change', done => {\n      vm.value = 3;\n      setTimeout(_ => {\n        expect(spy.notCalled).to.be.true;\n        done();\n      }, DELAY);\n    });\n  });\n  it('event:focus & blur', done => {\n    vm = createVue({\n      template: `\n        <el-input-number ref=\"input\">\n        </el-input-number>\n      `\n    }, true);\n\n    const spyFocus = sinon.spy();\n    const spyBlur = sinon.spy();\n\n    vm.$refs.input.$on('focus', spyFocus);\n    vm.$refs.input.$on('blur', spyBlur);\n    vm.$el.querySelector('input').focus();\n    vm.$el.querySelector('input').blur();\n\n    vm.$nextTick(_ => {\n      expect(spyFocus.calledOnce).to.be.true;\n      expect(spyBlur.calledOnce).to.be.true;\n      done();\n    });\n  });\n  it('focus', done => {\n    vm = createVue({\n      template: `\n        <el-input-number ref=\"input\"></el-input-number>\n      `\n    }, true);\n\n    const spy = sinon.spy();\n\n    vm.$refs.input.$on('focus', spy);\n    vm.$refs.input.focus();\n\n    vm.$nextTick(_ => {\n      expect(spy.calledOnce).to.be.true;\n      done();\n    });\n  });\n\n  describe('InputNumber Methods', () => {\n    it('method:select', done => {\n      const testContent = '123';\n\n      vm = createVue({\n        template: `\n          <el-input-number\n            ref=\"inputNumComp\"\n            :value=\"${testContent}\"\n          />\n        `\n      }, true);\n\n      expect(vm.$refs.inputNumComp.$refs.input.$refs.input.selectionStart)\n        .to.equal(testContent.length);\n      expect(vm.$refs.inputNumComp.$refs.input.$refs.input.selectionEnd)\n        .to.equal(testContent.length);\n\n      vm.$refs.inputNumComp.select();\n\n      vm.$nextTick(_ => {\n        expect(vm.$refs.inputNumComp.$refs.input.$refs.input.selectionStart)\n          .to.equal(0);\n        expect(vm.$refs.inputNumComp.$refs.input.$refs.input.selectionEnd)\n          .to.equal(testContent.length);\n\n        done();\n      });\n    });\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/input.spec.js",
    "content": "import { createVue, destroyVM, triggerEvent, wait, waitImmediate } from '../util';\n\ndescribe('Input', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', async() => {\n    vm = createVue({\n      template: `\n        <el-input\n          :minlength=\"3\"\n          :maxlength=\"5\"\n          placeholder=\"请输入内容\"\n          @focus=\"handleFocus\"\n          :value=\"input\">\n        </el-input>\n      `,\n      data() {\n        return {\n          input: 'input',\n          inputFocus: false\n        };\n      },\n      methods: {\n        handleFocus() {\n          this.inputFocus = true;\n        }\n      }\n    }, true);\n    let inputElm = vm.$el.querySelector('input');\n    inputElm.focus();\n    expect(vm.inputFocus).to.be.true;\n    expect(inputElm.getAttribute('placeholder')).to.equal('请输入内容');\n    expect(inputElm.value).to.equal('input');\n    expect(inputElm.getAttribute('minlength')).to.equal('3');\n    expect(inputElm.getAttribute('maxlength')).to.equal('5');\n\n    vm.input = 'text';\n    await waitImmediate();\n    expect(inputElm.value).to.equal('text');\n  });\n\n  it('default to empty', () => {\n    vm = createVue({\n      template: '<el-input/>'\n    }, true);\n    let inputElm = vm.$el.querySelector('input');\n    expect(inputElm.value).to.equal('');\n  });\n\n  it('disabled', () => {\n    vm = createVue({\n      template: `\n        <el-input disabled>\n        </el-input>\n      `\n    }, true);\n    expect(vm.$el.querySelector('input').getAttribute('disabled')).to.ok;\n  });\n\n  it('suffixIcon', () => {\n    vm = createVue({\n      template: `\n        <el-input suffix-icon=\"time\"></el-input>\n      `\n    }, true);\n    var icon = vm.$el.querySelector('.el-input__icon');\n    expect(icon).to.be.exist;\n  });\n\n  it('prefixIcon', () => {\n    vm = createVue({\n      template: `\n        <el-input prefix-icon=\"time\"></el-input>\n      `\n    }, true);\n    var icon = vm.$el.querySelector('.el-input__icon');\n    expect(icon).to.be.exist;\n  });\n\n  it('size', () => {\n    vm = createVue({\n      template: `\n        <el-input size=\"large\">\n        </el-input>\n      `\n    }, true);\n\n    expect(vm.$el.classList.contains('el-input--large')).to.true;\n  });\n\n  it('type', () => {\n    vm = createVue({\n      template: `\n        <el-input type=\"textarea\">\n        </el-input>\n      `\n    }, true);\n\n    expect(vm.$el.classList.contains('el-textarea')).to.true;\n  });\n\n  it('rows', () => {\n    vm = createVue({\n      template: `\n        <el-input type=\"textarea\" :rows=\"3\">\n        </el-input>\n      `\n    }, true);\n    expect(vm.$el.querySelector('.el-textarea__inner').getAttribute('rows')).to.be.equal('3');\n  });\n\n  // Github issue #2836\n  it('resize', async() => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-input type=\"textarea\" :resize=\"resize\"></el-input>\n        </div>\n      `,\n      data: {\n        resize: 'none'\n      }\n    }, true);\n    await waitImmediate();\n    expect(vm.$el.querySelector('.el-textarea__inner').style.resize).to.be.equal(vm.resize);\n    vm.resize = 'horizontal';\n    await waitImmediate();\n    expect(vm.$el.querySelector('.el-textarea__inner').style.resize).to.be.equal(vm.resize);\n  });\n\n  it('autosize', async() => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-input\n            ref=\"limitSize\"\n            type=\"textarea\"\n            :autosize=\"{minRows: 3, maxRows: 5}\"\n            v-model=\"textareaValue\"\n          >\n          </el-input>\n          <el-input\n            ref=\"limitlessSize\"\n            type=\"textarea\"\n            autosize\n            v-model=\"textareaValue\"\n          >\n          </el-input>\n        </div>\n      `,\n      data() {\n        return {\n          textareaValue: 'sda\\ndasd\\nddasdsda\\ndasd\\nddasdsda\\ndasd\\nddasdsda\\ndasd\\nddasd'\n        };\n      }\n    }, true);\n\n    var limitSizeInput = vm.$refs.limitSize;\n    var limitlessSizeInput = vm.$refs.limitlessSize;\n    expect(limitSizeInput.textareaStyle.height).to.be.equal('117px');\n    expect(limitlessSizeInput.textareaStyle.height).to.be.equal('201px');\n\n    vm.textareaValue = '';\n\n    await wait();\n    expect(limitSizeInput.textareaStyle.height).to.be.equal('75px');\n    expect(limitlessSizeInput.textareaStyle.height).to.be.equal('33px');\n  });\n\n  it('focus', async() => {\n    vm = createVue({\n      template: `\n        <el-input ref=\"input\">\n        </el-input>\n      `\n    }, true);\n\n    const spy = sinon.spy();\n\n    vm.$refs.input.$on('focus', spy);\n    vm.$refs.input.focus();\n\n    await waitImmediate();\n    expect(spy.calledOnce).to.be.true;\n  });\n\n  it('Input contains Select and append slot', async() => {\n    vm = createVue({\n      template: `\n      <el-input v-model=\"value\" clearable class=\"input-with-select\" ref=\"input\">\n        <el-select v-model=\"select\" slot=\"prepend\" placeholder=\"请选择\">\n          <el-option label=\"餐厅名\" value=\"1\"></el-option>\n          <el-option label=\"订单号\" value=\"2\"></el-option>\n          <el-option label=\"用户电话\" value=\"3\"></el-option>\n        </el-select>\n        <el-button slot=\"append\" icon=\"el-icon-search\"></el-button>\n      </el-input>\n      `,\n      data() {\n        return {\n          value: '1234',\n          select: '1'\n        };\n      }\n    }, true);\n    vm.$refs.input.hovering = true;\n\n    await wait();\n    const suffixEl = document.querySelector('.input-with-select > .el-input__suffix');\n    expect(suffixEl).to.not.be.null;\n    expect(suffixEl.style.transform).to.not.be.empty;\n  });\n\n  it('validateEvent', async() => {\n    const spy = sinon.spy();\n    vm = createVue({\n      template: `\n        <el-form :model=\"model\" :rules=\"rules\">\n          <el-form-item prop=\"input\">\n            <el-input v-model=\"model.input\" :validate-event=\"false\">\n            </el-input>\n          </el-form-item>\n        </el-form>\n      `,\n      data() {\n        const validator = (rule, value, callback) => {\n          spy();\n          callback();\n        };\n        return {\n          model: {\n            input: ''\n          },\n          rules: {\n            input: [\n              { validator }\n            ]\n          }\n        };\n      }\n    }, true);\n\n    vm.model.input = '123';\n    await waitImmediate();\n    expect(spy.called).to.be.false;\n  });\n\n  describe('Input Events', () => {\n    it('event:focus & blur', async() => {\n      vm = createVue({\n        template: `\n          <el-input\n            ref=\"input\"\n            placeholder=\"请输入内容\"\n            value=\"input\">\n          </el-input>\n        `\n      }, true);\n\n      const spyFocus = sinon.spy();\n      const spyBlur = sinon.spy();\n\n      vm.$refs.input.$on('focus', spyFocus);\n      vm.$refs.input.$on('blur', spyBlur);\n      vm.$el.querySelector('input').focus();\n      vm.$el.querySelector('input').blur();\n\n      await waitImmediate();\n      expect(spyFocus.calledOnce).to.be.true;\n      expect(spyBlur.calledOnce).to.be.true;\n    });\n    it('event:change', async() => {\n      // NOTE: should be same as native's change behavior\n      vm = createVue({\n        template: `\n          <el-input\n            ref=\"input\"\n            placeholder=\"请输入内容\"\n            :value=\"input\">\n          </el-input>\n        `,\n        data() {\n          return {\n            input: 'a'\n          };\n        }\n      }, true);\n\n      const inputElm = vm.$el.querySelector('input');\n      const simulateEvent = (text, event) => {\n        inputElm.value = text;\n        inputElm.dispatchEvent(new Event(event));\n      };\n\n      const spy = sinon.spy();\n      vm.$refs.input.$on('change', spy);\n\n      // simplified test, component should emit change when native does\n      simulateEvent('1', 'input');\n      simulateEvent('2', 'change');\n      await waitImmediate();\n      expect(spy.calledWith('2')).to.be.true;\n      expect(spy.calledOnce).to.be.true;\n    });\n    it('event:clear', async() => {\n      vm = createVue({\n        template: `\n          <el-input\n            ref=\"input\"\n            placeholder=\"请输入内容\"\n            clearable\n            :value=\"input\">\n          </el-input>\n        `,\n        data() {\n          return {\n            input: 'a'\n          };\n        }\n      }, true);\n\n      const spyClear = sinon.spy();\n      const inputElm = vm.$el.querySelector('input');\n\n      // focus to show clear button\n      inputElm.focus();\n      vm.$refs.input.$on('clear', spyClear);\n      await waitImmediate();\n      vm.$el.querySelector('.el-input__clear').click();\n      await waitImmediate();\n      expect(spyClear.calledOnce).to.be.true;\n    });\n    it('event:input', async() => {\n      vm = createVue({\n        template: `\n          <el-input\n            ref=\"input\"\n            placeholder=\"请输入内容\"\n            clearable\n            :value=\"input\">\n          </el-input>\n        `,\n        data() {\n          return {\n            input: 'a'\n          };\n        }\n      }, true);\n      const spy = sinon.spy();\n      vm.$refs.input.$on('input', spy);\n      const nativeInput = vm.$refs.input.$el.querySelector('input');\n      nativeInput.value = '1';\n      triggerEvent(nativeInput, 'compositionstart');\n      triggerEvent(nativeInput, 'input');\n      await waitImmediate();\n      nativeInput.value = '2';\n      triggerEvent(nativeInput, 'compositionupdate');\n      triggerEvent(nativeInput, 'input');\n      await waitImmediate();\n      triggerEvent(nativeInput, 'compositionend');\n      await waitImmediate();\n      // input event does not fire during composition\n      expect(spy.calledOnce).to.be.true;\n      // native input value is controlled\n      expect(vm.input).to.equal('a');\n      expect(nativeInput.value).to.equal('a');\n\n    });\n  });\n\n  describe('Input Methods', () => {\n    it('method:select', async() => {\n      const testContent = 'test';\n\n      vm = createVue({\n        template: `\n          <el-input\n            ref=\"inputComp\"\n            value=\"${testContent}\"\n          />\n        `\n      }, true);\n\n      expect(vm.$refs.inputComp.$refs.input.selectionStart).to.equal(testContent.length);\n      expect(vm.$refs.inputComp.$refs.input.selectionEnd).to.equal(testContent.length);\n\n      vm.$refs.inputComp.select();\n\n      await waitImmediate();\n      expect(vm.$refs.inputComp.$refs.input.selectionStart).to.equal(0);\n      expect(vm.$refs.inputComp.$refs.input.selectionEnd).to.equal(testContent.length);\n    });\n  });\n\n  it('sets value on textarea / input type change', async() => {\n    vm = createVue({\n      template: `\n        <el-input :type=\"type\" v-model=\"val\" />\n      `,\n      data() {\n        return {\n          type: 'text',\n          val: '123'\n        };\n      }\n    }, true);\n\n    expect(vm.$el.querySelector('input').value).to.equal('123');\n    vm.type = 'textarea';\n    await waitImmediate();\n    expect(vm.$el.querySelector('textarea').value).to.equal('123');\n    vm.type = 'password';\n    await waitImmediate();\n    expect(vm.$el.querySelector('input').value).to.equal('123');\n  });\n\n  it('limit input and show word count', async() => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-input\n            class=\"test-text\"\n            type=\"text\"\n            v-model=\"input1\"\n            maxlength=\"10\"\n            :show-word-limit=\"show\">\n          </el-input>\n          <el-input\n            class=\"test-textarea\"\n            type=\"textarea\"\n            v-model=\"input2\"\n            maxlength=\"10\"\n            show-word-limit>\n          </el-input>\n          <el-input\n            class=\"test-password\"\n            type=\"password\"\n            v-model=\"input3\"\n            maxlength=\"10\"\n            show-word-limit>\n          </el-input>\n          <el-input\n            class=\"test-initial-exceed\"\n            type=\"text\"\n            v-model=\"input4\"\n            maxlength=\"2\"\n            show-word-limit>\n          </el-input>\n        </div>\n      `,\n      data() {\n        return {\n          input1: '',\n          input2: '',\n          input3: '',\n          input4: 'exceed',\n          show: false\n        };\n      }\n    }, true);\n\n    const inputElm1 = vm.$el.querySelector('.test-text');\n    const inputElm2 = vm.$el.querySelector('.test-textarea');\n    const inputElm3 = vm.$el.querySelector('.test-password');\n    const inputElm4 = vm.$el.querySelector('.test-initial-exceed');\n\n    expect(inputElm1.querySelectorAll('.el-input__count').length).to.equal(0);\n    expect(inputElm2.querySelectorAll('.el-input__count').length).to.equal(1);\n    expect(inputElm3.querySelectorAll('.el-input__count').length).to.equal(0);\n    expect(inputElm4.classList.contains('is-exceed')).to.true;\n\n    vm.show = true;\n    await waitImmediate();\n    expect(inputElm1.querySelectorAll('.el-input__count').length).to.equal(1);\n\n    vm.input4 = '1';\n    await waitImmediate();\n    expect(inputElm4.classList.contains('is-exceed')).to.false;\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/link.spec.js",
    "content": "import { createTest, createVue, destroyVM, wait } from '../util';\nimport Link from 'packages/link';\n\ndescribe('Link', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', () => {\n    vm = createTest(Link, {\n      type: 'primary'\n    }, true);\n    let linkElm = vm.$el;\n    expect(linkElm.classList.contains('el-link--primary')).to.be.true;\n  });\n  it('icon', () => {\n    vm = createTest(Link, {\n      icon: 'el-icon-search'\n    }, true);\n    let linkElm = vm.$el;\n    expect(linkElm.querySelector('.el-icon-search')).to.be.ok;\n  });\n  it('href', () => {\n    vm = createTest(Link, {\n      href: 'https://element.eleme.io/'\n    }, true);\n    let linkElm = vm.$el;\n    expect(linkElm.getAttribute('href')).to.be.equal('https://element.eleme.io/');\n  });\n  it('target', () => {\n    vm = createVue(`\n    <el-link href=\"https://element.eleme.io\" target=\"_blank\">\n      default\n    </el-link>\n    `);\n    let linkElm = vm.$el;\n    expect(linkElm.getAttribute('target')).to.be.equal('_blank');\n  });\n  it('disabled', () => {\n    vm = createTest(Link, {\n      disabled: true\n    }, true);\n    let linkElm = vm.$el;\n    expect(linkElm.classList.contains('is-disabled')).to.be.true;\n  });\n\n  it('click', async() => {\n    let result;\n    vm = createVue({\n      template: `\n        <el-link @click=\"handleClick\"></el-link>\n      `,\n      methods: {\n        handleClick(evt) {\n          result = evt;\n        }\n      }\n    }, true);\n    vm.$el.click();\n    await wait();\n    expect(result).to.exist;\n  });\n\n});\n\n"
  },
  {
    "path": "test/unit/specs/loading.spec.js",
    "content": "import { getStyle } from '../../../src/utils/dom';\nimport { createVue, destroyVM } from '../util';\nimport Vue from 'vue';\nimport LoadingRaw from 'packages/loading';\nconst Loading = LoadingRaw.service;\n\ndescribe('Loading', () => {\n  let vm, loadingInstance, loadingInstance2;\n  afterEach(() => {\n    destroyVM(vm);\n    if (loadingInstance) {\n      loadingInstance.close();\n      loadingInstance.$el &&\n      loadingInstance.$el.parentNode &&\n      loadingInstance.$el.parentNode.removeChild(loadingInstance.$el);\n    }\n    if (loadingInstance2) {\n      loadingInstance2.close();\n      loadingInstance2.$el &&\n      loadingInstance2.$el.parentNode &&\n      loadingInstance2.$el.parentNode.removeChild(loadingInstance2.$el);\n    }\n  });\n\n  describe('as a directive', () => {\n    it('create', done => {\n      vm = createVue({\n        template: `\n        <div v-loading=\"loading\"></div>\n      `,\n\n        data() {\n          return {\n            loading: true\n          };\n        }\n      });\n      Vue.nextTick(() => {\n        const mask = vm.$el.querySelector('.el-loading-mask');\n        expect(mask).to.exist;\n        vm.loading = false;\n        setTimeout(() => {\n          expect(mask.style.display).to.equal('none');\n          done();\n        }, 100);\n      });\n    });\n\n    it('unbind', done => {\n      const vm1 = createVue({\n        template: `\n        <div v-if=\"show\" v-loading=\"loading\"></div>\n      `,\n\n        data() {\n          return {\n            show: true,\n            loading: true\n          };\n        }\n      });\n      const vm2 = createVue({\n        template: `\n        <div v-if=\"show\" v-loading.body=\"loading\"></div>\n      `,\n\n        data() {\n          return {\n            show: true,\n            loading: true\n          };\n        }\n      });\n      Vue.nextTick(() => {\n        vm1.loading = false;\n        vm2.loading = false;\n        Vue.nextTick(() => {\n          vm1.show = false;\n          vm2.show = false;\n          Vue.nextTick(() => {\n            expect(document.querySelector('.el-loading-mask')).to.not.exist;\n            done();\n          });\n        });\n      });\n    });\n\n    it('body', done => {\n      vm = createVue({\n        template: `\n        <div v-loading.body=\"loading\"></div>\n      `,\n\n        data() {\n          return {\n            loading: true\n          };\n        }\n      }, true);\n      Vue.nextTick(() => {\n        const mask = document.querySelector('.el-loading-mask');\n        expect(mask.parentNode === document.body).to.true;\n        vm.loading = false;\n        document.body.removeChild(mask);\n        document.body.removeChild(vm.$el);\n        done();\n      });\n    });\n\n    it('fullscreen', done => {\n      vm = createVue({\n        template: `\n        <div v-loading.fullscreen=\"loading\"></div>\n      `,\n\n        data() {\n          return {\n            loading: true\n          };\n        }\n      }, true);\n      Vue.nextTick(() => {\n        const mask = document.querySelector('.el-loading-mask');\n        expect(mask.parentNode === document.body).to.true;\n        expect(mask.classList.contains('is-fullscreen')).to.true;\n        vm.loading = false;\n        document.body.removeChild(mask);\n        document.body.removeChild(vm.$el);\n        done();\n      });\n    });\n\n    it('lock', done => {\n      vm = createVue({\n        template: `\n        <div v-loading.fullscreen.lock=\"loading\"></div>\n      `,\n\n        data() {\n          return {\n            loading: true\n          };\n        }\n      }, true);\n      Vue.nextTick(() => {\n        expect(getStyle(document.body, 'overflow')).to.equal('hidden');\n        vm.loading = false;\n        document.body.removeChild(document.querySelector('.el-loading-mask'));\n        document.body.removeChild(vm.$el);\n        done();\n      });\n    });\n\n    it('text', done => {\n      vm = createVue({\n        template: `\n        <div v-loading=\"loading\" element-loading-text=\"拼命加载中\"></div>\n      `,\n\n        data() {\n          return {\n            loading: true\n          };\n        }\n      }, true);\n      Vue.nextTick(() => {\n        const mask = document.querySelector('.el-loading-mask');\n        const text = mask.querySelector('.el-loading-text');\n        expect(text).to.exist;\n        expect(text.textContent).to.equal('拼命加载中');\n        done();\n      });\n    });\n\n    it('customClass', done => {\n      vm = createVue({\n        template: `\n        <div v-loading=\"loading\" element-loading-custom-class=\"loading-custom-class\"></div>\n      `,\n\n        data() {\n          return {\n            loading: true\n          };\n        }\n      }, true);\n      Vue.nextTick(() => {\n        const mask = document.querySelector('.el-loading-mask');\n        expect(mask.classList.contains('loading-custom-class')).to.true;\n        done();\n      });\n    });\n  });\n\n  describe('as a service', () => {\n    it('create', () => {\n      loadingInstance = Loading();\n      expect(document.querySelector('.el-loading-mask')).to.exist;\n    });\n\n    it('close', () => {\n      loadingInstance = Loading();\n      loadingInstance.close();\n      expect(loadingInstance.visible).to.false;\n    });\n\n    it('target', done => {\n      vm = createVue({\n        template: `\n        <div class=\"loading-container\"></div>\n      `\n      }, true);\n      loadingInstance = Loading({ target: '.loading-container' });\n      let mask = document.querySelector('.el-loading-mask');\n      let container = document.querySelector('.loading-container');\n      expect(mask).to.exist;\n      expect(mask.parentNode).to.equal(container);\n      loadingInstance.close();\n      setTimeout(() => {\n        expect(getStyle(container, 'position')).to.equal('relative');\n        done();\n      }, 200);\n    });\n\n    it('body', () => {\n      vm = createVue({\n        template: `\n        <div class=\"loading-container\"></div>\n      `\n      }, true);\n      loadingInstance = Loading({\n        target: '.loading-container',\n        body: true\n      });\n      let mask = document.querySelector('.el-loading-mask');\n      expect(mask).to.exist;\n      expect(mask.parentNode).to.equal(document.body);\n    });\n\n    it('fullscreen', () => {\n      loadingInstance = Loading({ fullScreen: true });\n      const mask = document.querySelector('.el-loading-mask');\n      expect(mask.parentNode).to.equal(document.body);\n      expect(mask.classList.contains('is-fullscreen')).to.true;\n    });\n\n    it('fullscreen singleton', done => {\n      loadingInstance = Loading({ fullScreen: true });\n      setTimeout(() => {\n        loadingInstance2 = Loading({ fullScreen: true });\n        setTimeout(() => {\n          let masks = document.querySelectorAll('.el-loading-mask');\n          expect(masks.length).to.equal(1);\n          loadingInstance2.close();\n          setTimeout(() => {\n            masks = document.querySelectorAll('.el-loading-mask');\n            expect(masks.length).to.equal(0);\n            done();\n          }, 350);\n        }, 50);\n      }, 50);\n    });\n\n    it('lock', () => {\n      loadingInstance = Loading({ lock: true });\n      expect(getStyle(document.body, 'overflow')).to.equal('hidden');\n    });\n\n    it('text', () => {\n      loadingInstance = Loading({ text: 'Loading...' });\n      const text = document.querySelector('.el-loading-text');\n      expect(text).to.exist;\n      expect(text.textContent).to.equal('Loading...');\n    });\n\n    it('customClass', () => {\n      loadingInstance = Loading({ customClass: 'el-loading-custom-class' });\n      const customClass = document.querySelector('.el-loading-custom-class');\n      expect(customClass).to.exist;\n    });\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/menu.spec.js",
    "content": "import { createVue, triggerEvent, destroyVM } from '../util';\n\ndescribe('Menu', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', done => {\n    vm = createVue({\n      template: `\n        <el-menu>\n          <el-menu-item index=\"1\" ref=\"item1\">处理中心</el-menu-item>\n          <el-menu-item index=\"2\" ref=\"item2\">订单管理</el-menu-item>\n        </el-menu>\n      `\n    }, true);\n    var item1 = vm.$refs.item1;\n    var item2 = vm.$refs.item2;\n    item1.$el.click();\n    setTimeout(_ => {\n      expect(item1.$el.classList.contains('is-active')).to.be.true;\n      item2.$el.click();\n      setTimeout(_ => {\n        expect(item2.$el.classList.contains('is-active')).to.be.true;\n        done();\n      }, 20);\n    }, 20);\n  });\n  it('background-color', done => {\n    vm = createVue({\n      template: `\n        <el-menu default-active=\"2\"\n          background-color=\"#f00\"\n          text-color=\"#000\"\n          active-text-color=\"#0f0\">\n          <el-menu-item index=\"1\" ref=\"item1\">处理中心</el-menu-item>\n          <el-menu-item index=\"2\" ref=\"item2\">订单管理</el-menu-item>\n        </el-menu>\n      `\n    }, true);\n    expect(vm.$el.style.backgroundColor).to.equal('rgb(255, 0, 0)');\n    expect(vm.$refs.item1.$el.style.backgroundColor).to.equal('rgb(255, 0, 0)');\n    expect(vm.$refs.item1.$el.style.color).to.equal('rgb(0, 0, 0)');\n    expect(vm.$refs.item2.$el.style.color).to.equal('rgb(0, 255, 0)');\n    triggerEvent(vm.$refs.item1.$el, 'mouseenter');\n    setTimeout(_ => {\n      expect(vm.$refs.item1.$el.style.backgroundColor).to.equal('rgb(204, 0, 0)');\n      done();\n    }, 20);\n  });\n  it('menu-item click', done => {\n    vm = createVue({\n      template: `\n        <el-menu>\n          <el-menu-item @click=\"onMenuItemClick\" index=\"1\" ref=\"item1\">处理中心</el-menu-item>\n          <el-menu-item index=\"2\" ref=\"item2\">订单管理</el-menu-item>\n        </el-menu>\n      `,\n      methods: {\n        onMenuItemClick(el) {\n          expect(el).to.be.equal(vm.$refs.item1);\n          this.clicksCount = this.clicksCount + 1;\n        }\n      },\n      data() {\n        return {\n          clicksCount: 0\n        };\n      }\n    }, true);\n    var item1 = vm.$refs.item1;\n    item1.$el.click();\n\n    setTimeout(_ => {\n      expect(vm.clicksCount).to.be.equal(1);\n      done();\n    }, 20);\n\n  });\n  it('menu-item disabled', done => {\n    vm = createVue({\n      template: `\n        <el-menu default-active=\"2\">\n          <el-menu-item index=\"1\" ref=\"item1\" disabled>处理中心</el-menu-item>\n          <el-menu-item index=\"2\" ref=\"item2\">订单管理</el-menu-item>\n        </el-menu>\n      `\n    }, true);\n    expect(vm.$refs.item2.$el.classList.contains('is-active')).to.be.true;\n    vm.$refs.item1.$el.click();\n    setTimeout(_ => {\n      expect(vm.$refs.item1.$el.classList.contains('is-active')).to.be.false;\n      done();\n    }, 20);\n  });\n  describe('default active', () => {\n    it('normal active', done => {\n      vm = createVue({\n        template: `\n          <el-menu default-active=\"2\">\n            <el-menu-item index=\"1\" ref=\"item1\">处理中心</el-menu-item>\n            <el-menu-item index=\"2\" ref=\"item2\">订单管理</el-menu-item>\n          </el-menu>\n        `\n      }, true);\n      expect(vm.$refs.item2.$el.classList.contains('is-active')).to.be.true;\n      vm.$refs.item1.$el.click();\n      setTimeout(_ => {\n        expect(vm.$refs.item1.$el.classList.contains('is-active')).to.be.true;\n        done();\n      }, 20);\n    });\n    it('dynamic active', done => {\n      vm = createVue({\n        template: `\n          <el-menu :default-active=\"active\">\n            <el-menu-item index=\"1\" ref=\"item1\">active watch处理中心</el-menu-item>\n            <el-menu-item index=\"2\" ref=\"item2\">active watch订单管理</el-menu-item>\n          </el-menu>\n        `,\n        data() {\n          return {\n            active: '2'\n          };\n        }\n      }, true);\n      setTimeout(_ => {\n        vm.active = '1';\n        setTimeout(_ => {\n          expect(vm.$refs.item1.$el.classList.contains('is-active')).to.be.true;\n          done();\n        }, 20);\n      }, 100);\n    });\n    it('vertical submenu item active', done => {\n      vm = createVue({\n        template: `\n          <div>\n            <el-menu default-active=\"2-2\">\n              <el-menu-item index=\"1\" ref=\"item1\">处理中心</el-menu-item>\n              <el-submenu index=\"2\" ref=\"submenu\">\n                <template slot=\"title\">我的工作台</template>\n                <el-menu-item index=\"2-1\">选项1</el-menu-item>\n                <el-menu-item index=\"2-2\" ref=\"submenuItem2\">选项2</el-menu-item>\n                <el-menu-item index=\"2-3\">选项3</el-menu-item>\n              </el-submenu>\n              <el-menu-item index=\"3\">订单管理</el-menu-item>\n            </el-menu>\n          </div>\n        `\n      }, true);\n      expect(vm.$refs.submenuItem2.$el.classList.contains('is-active')).to.be.true;\n\n      setTimeout(_ => {\n        expect(vm.$refs.submenu.$el.classList.contains('is-opened')).to.be.true;\n        expect(vm.$refs.submenu.$el.classList.contains('is-active')).to.be.true;\n        done();\n      }, 20);\n    });\n    it('horizontal submenu item active', done => {\n      vm = createVue({\n        template: `\n          <div>\n            <el-menu default-active=\"2-2\">\n              <el-menu-item index=\"1\" ref=\"item1\">处理中心</el-menu-item>\n              <el-submenu index=\"2\" ref=\"submenu\">\n                <template slot=\"title\">我的工作台</template>\n                <el-menu-item index=\"2-1\">选项1</el-menu-item>\n                <el-menu-item index=\"2-2\" ref=\"submenuItem2\">选项2</el-menu-item>\n                <el-menu-item index=\"2-3\">选项3</el-menu-item>\n              </el-submenu>\n              <el-menu-item index=\"3\">订单管理</el-menu-item>\n            </el-menu>\n          </div>\n        `\n      }, true);\n      expect(vm.$refs.submenuItem2.$el.classList.contains('is-active')).to.be.true;\n\n      setTimeout(_ => {\n        expect(vm.$refs.submenu.$el.classList.contains('is-opened')).to.be.true;\n        expect(vm.$refs.submenu.$el.classList.contains('is-active')).to.be.true;\n        done();\n      }, 20);\n    });\n  });\n  describe('submenu', function() {\n    it('toggle', done => {\n      vm = createVue({\n        template: `\n          <el-menu>\n            <el-menu-item index=\"1\" ref=\"item1\">处理中心</el-menu-item>\n            <el-submenu index=\"2\" ref=\"submenu\">\n              <template slot=\"title\">我的工作台</template>\n              <el-menu-item index=\"2-1\">选项1</el-menu-item>\n              <el-menu-item index=\"2-2\" ref=\"submenuItem2\">选项2</el-menu-item>\n              <el-menu-item index=\"2-3\">选项3</el-menu-item>\n            </el-submenu>\n            <el-menu-item index=\"3\">订单管理</el-menu-item>\n          </el-menu>\n        `,\n        data() {\n          return {\n          };\n        }\n      }, true);\n      var submenuItem2 = vm.$refs.submenuItem2;\n      var submenu = vm.$refs.submenu;\n      submenu.$el.querySelector('.el-submenu__title').click();\n      setTimeout(_ => {\n        expect(submenu.$el.classList.contains('is-opened')).to.be.true;\n        submenuItem2.$el.click();\n        setTimeout(_ => {\n          expect(submenuItem2.$el.classList.contains('is-active')).to.be.true;\n          submenu.$el.querySelector('.el-submenu__title').click();\n          setTimeout(_ => {\n            expect(submenu.$el.classList.contains('is-opened')).to.not.true;\n            done();\n          }, 20);\n        }, 20);\n      }, 20);\n    });\n    it('default opened', done => {\n      vm = createVue({\n        template: `\n          <el-menu :default-openeds=\"defaultOpeneds\">\n            <el-menu-item index=\"1\">default opened处理中心</el-menu-item>\n            <el-submenu index=\"2\" ref=\"submenu1\">\n              <template slot=\"title\">default opened我的工作台</template>\n              <el-menu-item index=\"2-1\">选项1</el-menu-item>\n              <el-menu-item index=\"2-2\" ref=\"submenu1Item2\">选项2</el-menu-item>\n              <el-menu-item index=\"2-3\">选项3</el-menu-item>\n            </el-submenu>\n            <el-submenu index=\"3\" ref=\"submenu2\">\n              <template slot=\"title\">default opened订单管理</template>\n              <el-menu-item index=\"3-1\">选项1</el-menu-item>\n              <el-menu-item index=\"3-2\" ref=\"submenu2Item2\">选项2</el-menu-item>\n              <el-menu-item index=\"3-3\">选项3</el-menu-item>\n            </el-submenu>\n          </el-menu>\n        `,\n        data() {\n          return {\n            defaultOpeneds: ['2', '3']\n          };\n        }\n      }, true);\n      expect(vm.$refs.submenu1.$el.classList.contains('is-opened')).to.be.true;\n      expect(vm.$refs.submenu2.$el.classList.contains('is-opened')).to.be.true;\n      vm.defaultOpeneds = ['2'];\n      setTimeout(_ => {\n        expect(vm.$refs.submenu1.$el.classList.contains('is-opened')).to.be.true;\n        expect(vm.$refs.submenu2.$el.classList.contains('is-opened')).to.not.true;\n        done();\n      }, 20);\n    });\n    it('disabled', done => {\n      vm = createVue({\n        template: `\n          <el-menu>\n            <el-menu-item index=\"1\" ref=\"item1\">处理中心</el-menu-item>\n            <el-submenu index=\"2\" ref=\"submenu\" disabled>\n              <template slot=\"title\">我的工作台</template>\n              <el-menu-item index=\"2-1\">选项1</el-menu-item>\n              <el-menu-item index=\"2-2\" ref=\"submenuItem2\">选项2</el-menu-item>\n              <el-menu-item index=\"2-3\">选项3</el-menu-item>\n            </el-submenu>\n            <el-menu-item index=\"3\">订单管理</el-menu-item>\n          </el-menu>\n        `\n      }, true);\n      var submenu = vm.$refs.submenu;\n      submenu.$el.querySelector('.el-submenu__title').click();\n      setTimeout(_ => {\n        expect(submenu.$el.classList.contains('is-opened')).to.be.false;\n        done();\n      }, 20);\n    });\n  });\n  it('unique-opened', done => {\n    vm = createVue({\n      template: `\n        <el-menu unique-opened default-active=\"2-2\">\n          <el-menu-item index=\"1\">处理中心</el-menu-item>\n          <el-submenu index=\"2\" ref=\"submenu1\">\n            <template slot=\"title\">我的工作台</template>\n            <el-menu-item index=\"2-1\">选项1</el-menu-item>\n            <el-menu-item index=\"2-2\" ref=\"submenu1Item2\">选项2</el-menu-item>\n            <el-menu-item index=\"2-3\">选项3</el-menu-item>\n          </el-submenu>\n          <el-submenu index=\"3\" ref=\"submenu2\">\n            <template slot=\"title\">订单管理</template>\n            <el-menu-item index=\"3-1\">选项1</el-menu-item>\n            <el-menu-item index=\"3-2\" ref=\"submenu2Item2\">选项2</el-menu-item>\n            <el-menu-item index=\"3-3\">选项3</el-menu-item>\n          </el-submenu>\n        </el-menu>\n      `,\n      data() {\n        return {\n        };\n      }\n    }, true);\n    vm.$refs.submenu2.$el.querySelector('.el-submenu__title').click();\n    setTimeout(_ => {\n      expect(vm.$refs.submenu1.$el.classList.contains('is-opened')).to.not.true;\n      done();\n    }, 20);\n  });\n  it('horizontal mode', done => {\n    vm = createVue({\n      template: `\n        <el-menu mode=\"horizontal\">\n          <el-menu-item index=\"1\">处理中心</el-menu-item>\n          <el-submenu index=\"2\" ref=\"submenu\">\n            <template slot=\"title\">我的工作台</template>\n            <el-menu-item index=\"2-1\">选项1</el-menu-item>\n            <el-menu-item index=\"2-2\" ref=\"submenuItem2\">选项2</el-menu-item>\n            <el-menu-item index=\"2-3\">选项3</el-menu-item>\n          </el-submenu>\n          <el-menu-item index=\"3\">订单管理</el-menu-item>\n        </el-menu>\n      `,\n      data() {\n        return {\n        };\n      }\n    }, true);\n    expect(vm.$el.classList.contains('el-menu--horizontal')).to.be.true;\n    var submenu = vm.$refs.submenu;\n    triggerEvent(submenu.$el, 'mouseenter');\n    setTimeout(_ => {\n      expect(document.body.querySelector('.el-menu--popup').parentElement.style.display).to.not.ok;\n      done();\n    }, 500);\n  });\n  it('menu trigger click', done => {\n    vm = createVue({\n      template: `\n        <el-menu mode=\"horizontal\" menu-trigger=\"click\">\n          <el-menu-item index=\"1\">处理中心</el-menu-item>\n          <el-submenu index=\"2\" ref=\"submenu\">\n            <template slot=\"title\">我的工作台</template>\n            <el-menu-item index=\"2-1\">选项1</el-menu-item>\n            <el-menu-item index=\"2-2\" ref=\"submenuItem2\">选项2</el-menu-item>\n            <el-menu-item index=\"2-3\">选项3</el-menu-item>\n          </el-submenu>\n          <el-menu-item index=\"3\">订单管理</el-menu-item>\n        </el-menu>\n      `,\n      data() {\n        return {\n        };\n      }\n    }, true);\n    expect(vm.$el.classList.contains('el-menu--horizontal')).to.be.true;\n    var submenu = vm.$refs.submenu;\n    var triggerElm = submenu.$el.querySelector('.el-submenu__title');\n\n    triggerEvent(submenu.$el, 'mouseenter');\n    triggerElm.click();\n\n    setTimeout(_ => {\n      expect(document.body.querySelector('.el-menu--popup').parentElement.style.display).to.not.ok;\n      triggerElm.click();\n      setTimeout(_ => {\n        expect(document.body.querySelector('.el-menu--popup').parentElement.style.display).to.be.equal('none');\n        done();\n      }, 1000);\n    }, 500);\n  });\n  it('menu group', () => {\n    vm = createVue({\n      template: `\n        <el-menu mode=\"vertical\" default-active=\"1\">\n          <el-menu-item-group title=\"分组一\" ref=\"group1\">\n            <el-menu-item index=\"1\"><i class=\"el-icon-message\"></i>导航一</el-menu-item>\n            <el-menu-item index=\"2\"><i class=\"el-icon-message\"></i>导航二</el-menu-item>\n          </el-menu-item-group>\n          <el-submenu index=\"5\">\n            <template slot=\"title\">导航五</template>\n            <el-menu-item-group title=\"分组二\">\n              <el-menu-item index=\"5-1\">选项1</el-menu-item>\n              <el-menu-item index=\"5-2\">选项2</el-menu-item>\n            </el-menu-item-group>\n          </el-submenu>\n        </el-menu>\n      `\n    }, true);\n    expect(vm.$refs.group1.$el.querySelector('.el-menu-item-group__title').innerText).to.be.equal('分组一');\n  });\n  it('dynamic menus, issue 9092', done => {\n    vm = createVue({\n      template: `\n          <el-menu :default-active=\"active\">\n            <el-menu-item\n              v-for=\"menu in menus\"\n              :index=\"menu.name\"\n              :key=\"menu.name\">\n              {{menu.description}}\n            </el-menu-item>\n          </el-menu>\n        `,\n      data() {\n        return {\n          active: '',\n          menus: []\n        };\n      }\n    }, true);\n    setTimeout(_ => {\n      vm.active = '2';\n      vm.menus = [\n        {name: '1', description: 'happy'},\n        {name: '2', description: 'new'},\n        {name: '3', description: 'year'}\n      ];\n      setTimeout(_ => {\n        expect(vm.$el.querySelector('.el-menu-item.is-active').innerText).to.equal('new');\n        done();\n      }, 20);\n    }, 100);\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/message-box.spec.js",
    "content": "import MessageBox from 'packages/message-box';\n\ndescribe('MessageBox', () => {\n  let hasPromise = true;\n  before(() => {\n    if (!window.Promise) {\n      hasPromise = false;\n      window.Promise = require('es6-promise').Promise;\n    }\n  });\n\n  after(() => {\n    if (!hasPromise) {\n      window.Promise = undefined;\n    }\n  });\n\n  afterEach(() => {\n    const el = document.querySelector('.el-message-box__wrapper');\n    if (!el) return;\n    if (el.parentNode) {\n      el.parentNode.removeChild(el);\n    }\n    MessageBox.close();\n  });\n\n  it('create and close', done => {\n    MessageBox({\n      type: 'success',\n      title: '消息',\n      message: '这是一段内容'\n    });\n    setTimeout(() => {\n      const msgbox = document.querySelector('.el-message-box__wrapper');\n      expect(msgbox.__vue__.$parent.visible).to.true;\n      expect(msgbox.querySelector('.el-message-box__title span').textContent).to.equal('消息');\n      expect(msgbox.querySelector('.el-message-box__message')\n        .querySelector('p').textContent).to.equal('这是一段内容');\n      MessageBox.close();\n      expect(msgbox.__vue__.$parent.visible).to.false;\n      done();\n    }, 300);\n  });\n\n  it('invoke with strings', done => {\n    MessageBox('消息', '这是一段内容', 'success');\n    setTimeout(() => {\n      expect(document.querySelector('.el-message-box__wrapper')).to.exist;\n      done();\n    }, 300);\n  });\n\n  it('custom icon', done => {\n    MessageBox({\n      type: 'warning',\n      iconClass: 'el-icon-question',\n      message: '这是一段内容'\n    });\n    setTimeout(() => {\n      const icon = document.querySelector('.el-message-box__status');\n      expect(icon.classList.contains('el-icon-question')).to.true;\n      done();\n    }, 300);\n  });\n\n  it('html string', done => {\n    MessageBox({\n      title: 'html string',\n      dangerouslyUseHTMLString: true,\n      message: '<strong>html string</strong>'\n    });\n    setTimeout(() => {\n      const message = document.querySelector('.el-message-box__message strong');\n      expect(message.textContent).to.equal('html string');\n      done();\n    }, 300);\n  });\n\n  it('distinguish cancel and close', done => {\n    let msgAction = '';\n    MessageBox({\n      title: '消息',\n      message: '这是一段内容',\n      distinguishCancelAndClose: true\n    }, action => {\n      msgAction = action;\n    });\n    setTimeout(() => {\n      document.querySelector('.el-message-box__close').click();\n      setTimeout(() => {\n        expect(msgAction).to.equal('close');\n        done();\n      }, 10);\n    }, 10);\n  });\n\n  it('alert', done => {\n    MessageBox.alert('这是一段内容', {\n      title: '标题名称',\n      type: 'warning'\n    });\n    setTimeout(() => {\n      document.querySelector('.v-modal').click();\n      expect(document.querySelector('.el-message-box__wrapper')\n        .__vue__.$parent.visible).to.true;\n      expect(document.querySelector('.el-message-box__wrapper')\n        .__vue__.$parent.type).to.equal('warning');\n      done();\n    }, 300);\n  });\n\n  it('confirm', done => {\n    MessageBox.confirm('这是一段内容', {\n      title: '标题名称',\n      type: 'warning'\n    });\n    setTimeout(() => {\n      document.querySelector('.el-message-box__wrapper')\n        .querySelector('.el-button--primary').click();\n      expect(document.querySelector('.el-message-box__wrapper')\n        .__vue__.$parent.visible).to.false;\n      done();\n    }, 200);\n  });\n\n  it('prompt', done => {\n    MessageBox.prompt('这是一段内容', {\n      title: '标题名称',\n      inputPattern: /test/,\n      inputErrorMessage: 'validation failed'\n    });\n    setTimeout(() => {\n      const messageBox = document.querySelector('.el-message-box__wrapper').__vue__.$parent;\n      expect(messageBox.$el.querySelector('.el-message-box__input')).to.exist;\n      const haveFocus = messageBox.$el.querySelector('input').isSameNode(document.activeElement);\n      expect(haveFocus).to.true;\n      messageBox.inputValue = 'no';\n      setTimeout(() => {\n        expect(messageBox.$el.querySelector('.el-message-box__errormsg')\n          .textContent).to.equal('validation failed');\n        done();\n      }, 100);\n    }, 700);\n  });\n\n  it('prompt: focus on textarea', done => {\n    MessageBox.prompt('这是一段内容', {\n      inputType: 'textarea',\n      title: '标题名称'\n    });\n    setTimeout(() => {\n      const messageBox = document.querySelector('.el-message-box__wrapper').__vue__.$parent;\n      const haveFocus = messageBox.$el.querySelector('textarea').isSameNode(document.activeElement);\n      expect(haveFocus).to.true;\n      done();\n    }, 700);\n  });\n\n  describe('custom validator', () => {\n    it('returns a string', done => {\n      const validator = value => {\n        if (value !== 'test') return 'wrong';\n        return true;\n      };\n      MessageBox.prompt('这是一段内容', {\n        title: '标题名称',\n        inputValidator: validator\n      });\n      setTimeout(() => {\n        const messageBox = document.querySelector('.el-message-box__wrapper').__vue__.$parent;\n        messageBox.inputValue = 'no';\n        setTimeout(() => {\n          expect(document.querySelector('.el-message-box__errormsg')\n            .textContent).to.equal('wrong');\n          messageBox.inputValue = 'test';\n          setTimeout(() => {\n            expect(document.querySelector('.el-message-box__errormsg')\n              .textContent).to.equal('');\n            done();\n          }, 100);\n        }, 100);\n      }, 200);\n    });\n\n    it('returns false', done => {\n      const validator = value => false;\n      MessageBox.prompt('这是一段内容', {\n        title: '标题名称',\n        inputValidator: validator\n      });\n      setTimeout(() => {\n        const messageBox = document.querySelector('.el-message-box__wrapper').__vue__.$parent;\n        messageBox.inputValue = 'no';\n        setTimeout(() => {\n          expect(document.querySelector('.el-message-box__errormsg')\n            .textContent).to.equal('输入的数据不合法!');\n          done();\n        }, 100);\n      }, 200);\n    });\n  });\n\n  it('callback', done => {\n    let msgAction = '';\n    MessageBox({\n      title: '消息',\n      message: '这是一段内容'\n    }, action => {\n      msgAction = action;\n    });\n    setTimeout(() => {\n      document.querySelector('.el-message-box__close').click();\n      setTimeout(() => {\n        expect(msgAction).to.equal('cancel');\n        done();\n      }, 10);\n    }, 10);\n  });\n\n  it('beforeClose', done => {\n    let msgAction = '';\n    MessageBox({\n      title: '消息',\n      message: '这是一段内容',\n      beforeClose: (action, instance) => {\n        instance.close();\n      }\n    }, action => {\n      msgAction = action;\n    });\n    setTimeout(() => {\n      document.querySelector('.el-message-box__wrapper .el-button--primary').click();\n      setTimeout(() => {\n        expect(msgAction).to.equal('confirm');\n        done();\n      }, 10);\n    }, 10);\n  });\n\n  describe('promise', () => {\n    it('resolve', done => {\n      MessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示')\n        .then(action => {\n          expect(action).to.equal('confirm');\n          done();\n        });\n      setTimeout(() => {\n        document.querySelector('.el-message-box__wrapper .el-button--primary').click();\n      }, 50);\n    });\n\n    it('reject', done => {\n      MessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示')\n        .catch(action => {\n          expect(action).to.equal('cancel');\n          done();\n        });\n      setTimeout(() => {\n        document.querySelector('.el-message-box__wrapper .el-button').click();\n      }, 50);\n    });\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/message.spec.js",
    "content": "import { triggerEvent } from '../util';\nimport Message from 'packages/message';\n\ndescribe('Message', () => {\n  afterEach(() => {\n    const el = document.querySelector('.el-message');\n    if (!el) return;\n    if (el.parentNode) {\n      el.parentNode.removeChild(el);\n    }\n    if (el.__vue__) {\n      el.__vue__.$destroy();\n    }\n  });\n\n  it('automatically close', done => {\n    Message({\n      message: '灰风',\n      duration: 500\n    });\n    const message = document.querySelector('.el-message__content');\n    expect(document.querySelector('.el-message')).to.exist;\n    expect(message.textContent).to.equal('灰风');\n    setTimeout(() => {\n      expect(document.querySelector('.el-message')).to.not.exist;\n      done();\n    }, 1000);\n  });\n\n  it('manually close', done => {\n    Message({\n      message: '夏天',\n      showClose: true\n    });\n    setTimeout(() => {\n      document.querySelector('.el-message__closeBtn').click();\n      setTimeout(() => {\n        expect(document.querySelector('.el-message')).to.not.exist;\n        done();\n      }, 500);\n    }, 500);\n  });\n\n  it('custom icon', done => {\n    Message({\n      message: '夏天',\n      iconClass: 'el-icon-close'\n    });\n    setTimeout(() => {\n      const icon = document.querySelector('.el-message i');\n      expect(icon.classList.contains('el-icon-close')).to.true;\n      done();\n    }, 500);\n  });\n\n  it('html string', () => {\n    Message({\n      message: '<strong>夏天</strong>',\n      dangerouslyUseHTMLString: true\n    });\n    const message = document.querySelector('.el-message strong');\n    expect(message.textContent).to.equal('夏天');\n  });\n\n  it('close all', done => {\n    Message({\n      message: '夏天',\n      duration: 0\n    });\n    Message({\n      message: '淑女',\n      duration: 0\n    });\n    setTimeout(() => {\n      Message.closeAll();\n      setTimeout(() => {\n        expect(document.querySelector('.el-message')).to.not.exist;\n        done();\n      }, 500);\n    }, 500);\n  });\n\n  it('create', () => {\n    Message('娜梅莉亚');\n    expect(document.querySelector('.el-message')).to.exist;\n  });\n\n  it('invoke with type', () => {\n    Message.success('毛毛狗');\n    expect(document.querySelector('.el-message').__vue__.type).to.equal('success');\n  });\n\n  it('center', () => {\n    Message({\n      message: '夏天',\n      center: true,\n      duration: 0\n    });\n    expect(document.querySelector('.el-message').classList.contains('is-center')).to.true;\n  });\n\n  it('reset timer', done => {\n    Message({\n      message: '白灵',\n      duration: 1000\n    });\n    setTimeout(() => {\n      triggerEvent(document.querySelector('.el-message'), 'mouseenter');\n      setTimeout(() => {\n        expect(document.querySelector('.el-message')).to.exist;\n        done();\n      }, 700);\n    }, 500);\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/mixin.vue-popup.spec.js",
    "content": "import VuePopup from 'element-ui/src/utils/popup';\nimport { createTest, destroyVM } from '../util';\n\nconst Popup = Object.assign({}, VuePopup, {\n  render(h) {\n    return h('div');\n  },\n  created() {\n    this.rendered = true;\n  }\n});\n\ndescribe('Mixin:vue-popup', () => {\n  let vm;\n  before(() => {\n    const modals = document.querySelectorAll('.v-modal');\n    [].forEach.call(modals, modal => {\n      modal &&\n      modal.parentNode &&\n      modal.parentNode.removeChild(modal);\n    });\n  });\n  afterEach(() => {\n    vm.close && vm.close();\n    destroyVM(vm);\n    const modal = document.querySelector('.v-modal');\n    modal &&\n    modal.parentNode &&\n    modal.parentNode.removeChild(modal);\n  });\n\n  it('show modal', () => {\n    vm = createTest(Popup);\n    vm.open();\n    expect(document.querySelector('.v-modal')).to.not.exist;\n    vm.close();\n    destroyVM(vm);\n    vm = createTest(Popup, { modal: true });\n    vm.open();\n    expect(document.querySelector('.v-modal')).to.exist;\n  });\n\n  it('custom modal class', () => {\n    vm = createTest(Popup, { modal: true, modalClass: 'custom-class' });\n    vm.open();\n    expect(document.querySelector('.v-modal').classList.contains('custom-class')).to.true;\n  });\n\n  it('lock scroll', done => {\n    vm = createTest(Popup, { modal: true });\n    vm.open();\n    expect(document.body.classList.contains('el-popup-parent--hidden')).to.be.true;\n    vm.close();\n    destroyVM(vm);\n    setTimeout(() => {\n      vm = createTest(Popup, { modal: true, lockScroll: false });\n      vm.open();\n      expect(document.body.classList.contains('el-popup-parent--hidden')).to.be.false;\n      done();\n    }, 200);\n  });\n\n  it('z-index should increase', () => {\n    vm = createTest(Popup, { modal: true });\n    vm.open();\n    const zIndex1 = document.querySelector('.v-modal').style.zIndex;\n    vm.close();\n    destroyVM(vm);\n    vm = createTest(Popup, { modal: true });\n    vm.open();\n    const zIndex2 = document.querySelector('.v-modal').style.zIndex;\n    expect(zIndex2 > zIndex1).to.true;\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/notification.spec.js",
    "content": "import Vue from 'vue';\nimport { triggerEvent } from '../util';\nimport Notification from 'packages/notification';\n\ndescribe('Notification', () => {\n  afterEach(() => {\n    const el = document.querySelector('.el-notification');\n    if (!el) return;\n    if (el.parentNode) {\n      el.parentNode.removeChild(el);\n    }\n    if (el.__vue__) {\n      el.__vue__.$destroy();\n    }\n  });\n\n  it('automatically close', done => {\n    Notification({\n      message: '玻璃蜡烛',\n      duration: 500\n    });\n    expect(document.querySelector('.el-notification')).to.exist;\n    setTimeout(() => {\n      expect(document.querySelector('.el-notification')).to.not.exist;\n      done();\n    }, 1000);\n  });\n\n  it('manually close', done => {\n    Notification({\n      message: '苍白母马'\n    });\n    setTimeout(() => {\n      document.querySelector('.el-notification__closeBtn').click();\n      setTimeout(() => {\n        expect(document.querySelector('.el-notification')).to.not.exist;\n        done();\n      }, 500);\n    }, 500);\n  });\n\n  it('create', () => {\n    Notification({\n      title: '狮子',\n      message: '狮鹫',\n      duration: 0\n    });\n    const group = document.querySelector('.el-notification__group');\n    const title = group.querySelector('.el-notification__title');\n    const message = group.querySelector('.el-notification__content p');\n    expect(document.querySelector('.el-notification')).to.exist;\n    expect(title.textContent).to.equal('狮子');\n    expect(message.textContent).to.equal('狮鹫');\n  });\n\n  it('html string as message', () => {\n    Notification({\n      title: '狮子',\n      message: '<strong>狮鹫</strong>',\n      dangerouslyUseHTMLString: true,\n      duration: 0\n    });\n    const message = document.querySelector('.el-notification__content strong');\n    expect(message.textContent).to.equal('狮鹫');\n  });\n\n  it('create by vnode', () => {\n    const fakeVM = new Vue();\n    const h = fakeVM.$createElement;\n\n    Notification({\n      message: h('p', { style: { color: 'red' } }, '大美兴，川普王')\n    });\n    const group = document.querySelector('.el-notification__group');\n    const message = group.querySelector('.el-notification__content');\n\n    expect(message.innerHTML).to.equal('<p style=\"color: red;\">大美兴，川普王</p>');\n  });\n\n  it('alias by vnode', () => {\n    const fakeVM = new Vue();\n    const h = fakeVM.$createElement;\n\n    Notification.error(h('p', { style: { color: 'green' } }, '+1s'));\n    const group = document.querySelector('.el-notification__group');\n    const message = group.querySelector('.el-notification__content');\n\n    expect(message.innerHTML).to.equal('<p style=\"color: green;\">+1s</p>');\n  });\n\n  it('invoke with type', () => {\n    Notification.success('太阳之子');\n    expect(document.querySelector('.el-notification').__vue__.type).to.equal('success');\n  });\n\n  it('reset timer', done => {\n    Notification({\n      message: '芳香总管',\n      duration: 1000\n    });\n    setTimeout(() => {\n      triggerEvent(document.querySelector('.el-notification'), 'mouseenter');\n      setTimeout(() => {\n        triggerEvent(document.querySelector('.el-notification'), 'mouseleave');\n        expect(document.querySelector('.el-notification')).to.exist;\n        done();\n      }, 700);\n    }, 500);\n  });\n\n  it('no close button', done => {\n    Notification({\n      message: 'Hello',\n      showClose: false\n    });\n    setTimeout(() => {\n      expect(document.querySelector('.el-notification__closeBtn')).to.not.exist;\n      done();\n    }, 500);\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/page-header.spec.js",
    "content": "import { createVue, destroyVM, waitImmediate } from '../util';\nimport PageHeader from 'packages/page-header';\n\ndescribe('PageHeader', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('render well and trigger back event', async() => {\n    vm = createVue(PageHeader, {\n      content: 'content'\n    });\n    expect(vm.$el).to.exist;\n    const spy = sinon.spy();\n    vm.$on('back', spy);\n    vm.$el.querySelector('.el-page-header__left').click();\n\n    await waitImmediate();\n\n    expect(spy.calledOnce).to.be.true;\n  });\n});\n\n"
  },
  {
    "path": "test/unit/specs/pagination.spec.js",
    "content": "import { createTest, createVue, triggerEvent, destroyVM } from '../util';\nimport Pagination from 'packages/pagination';\n\ndescribe('Pagination', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n  it('create', () => {\n    vm = createTest(Pagination);\n    const elm = vm.$el;\n    // prev\n    expect(elm.querySelector('button.btn-prev')).to.exist;\n    // pager\n    expect(elm.querySelector('ul.el-pager')).to.exist;\n    // next\n    expect(elm.querySelector('button.btn-next')).to.exist;\n    // jumper\n    expect(elm.querySelector('.el-pagination__jump')).to.exist;\n    // ->\n    expect(elm.querySelector('.el-pagination__rightwrapper')).to.exist;\n  });\n\n  it('set layout', () => {\n    vm = createTest(Pagination, {\n      layout: 'prev, pager, next'\n    });\n    const elm = vm.$el;\n    // prev\n    expect(elm.querySelector('button.btn-prev')).to.exist;\n    // pager\n    expect(elm.querySelector('ul.el-pager')).to.exist;\n    // next\n    expect(elm.querySelector('button.btn-next')).to.exist;\n    // not found jumper\n    expect(elm.querySelector('.el-pagination__jump')).to.not.exist;\n    // not found ->\n    expect(elm.querySelector('.el-pagination__rightwrapper')).to.not.exist;\n    // not found total\n    expect(elm.querySelector('.el-pagination__total')).to.not.exist;\n  });\n\n  it('layout: all in right, need clear float', () => {\n    vm = createTest(Pagination, {\n      layout: '->, prev, pager, next',\n      total: 100\n    }, true);\n    const elm = vm.$el;\n    let right_div = elm.querySelector('.el-pagination__rightwrapper');\n    expect(elm.clientHeight > 0 && right_div.clientHeight > 0).to.equal(true);\n    // elm 将来 padding 可能会变化, 所以使用 >= 来判定\n    expect(elm.clientHeight >= right_div.clientHeight).to.equal(true);\n  });\n\n  it('custom slot', () => {\n    vm = createVue({\n      template: `\n        <el-pagination\n          layout=\"slot, prev, pager, next\"\n          :page-size=\"25\"\n          :total=\"100\">\n          <span class=\"slot-test\">slot test</span>\n        </el-pagination>\n      `\n    });\n    expect(vm.$el.querySelector('.slot-test')).to.exist;\n  });\n\n  it('small', () => {\n    vm = createTest(Pagination, {\n      small: true\n    });\n    expect(vm.$el.classList.contains('el-pagination--small')).to.true;\n  });\n\n  it('pageSize', () => {\n    vm = createTest(Pagination, {\n      pageSize: 25,\n      total: 100\n    });\n\n    expect(vm.$el.querySelectorAll('li.number')).to.length(4);\n  });\n\n  it('pageSize: NaN', () => {\n    vm = createTest(Pagination, {\n      pageSize: NaN,\n      total: 100\n    });\n\n    const pagers = vm.$el.querySelectorAll('li.number');\n    expect(pagers).to.length(7);\n  });\n\n  it('pageCount', () => {\n    const vm = createTest(Pagination, {\n      pageSize: 25,\n      pageCount: 4\n    });\n\n    expect(vm.$el.querySelectorAll('li.number')).to.length(4);\n  });\n\n  it('pagerCount', () => {\n    const vm = createTest(Pagination, {\n      pageSize: 25,\n      total: 1000,\n      pagerCount: 21\n    });\n\n    expect(vm.$el.querySelectorAll('li.number')).to.length(21);\n  });\n\n  it('will work without total & page-count', (done) => {\n    const vm = createTest(Pagination, {\n      pageSize: 25,\n      currentPage: 2\n    });\n\n    vm.$el.querySelector('.btn-prev').click();\n\n    setTimeout(() => {\n      vm.internalCurrentPage.should.be.equal(1);\n\n      vm.$el.querySelector('.btn-prev').click();\n      vm.internalCurrentPage.should.be.equal(1);\n\n      done();\n    }, 20);\n  });\n\n  it('currentPage', () => {\n    vm = createTest(Pagination, {\n      pageSize: 20,\n      total: 200,\n      currentPage: 3\n    });\n\n    expect(vm.$el.querySelector('li.number.active')).to.have.property('textContent').to.equal('3');\n  });\n\n  it('currentPage: NaN', () => {\n    vm = createTest(Pagination, {\n      pageSize: 20,\n      total: 200,\n      currentPage: NaN\n    });\n\n    expect(vm.$el.querySelector('li.number.active')).to.have.property('textContent').to.equal('1');\n    expect(vm.$el.querySelectorAll('li.number')).to.length(7);\n  });\n\n  it('set currentPage & total', (done) => {\n    vm = createVue({\n      template: `\n        <el-pagination\n          @current-change=\"handleChange\"\n          :current-page=\"currentPage\"\n          :page-size=\"10\"\n          :total=\"100\" />\n      `,\n\n      methods: {\n        handleChange(val) {\n          this.currentPage = val;\n          this.page = val;\n        },\n        resetTotal() {\n          this.total = 30;\n          this.currentPage = 1;\n        }\n      },\n\n      data() {\n        return {\n          currentPage: 10\n        };\n      }\n    }, true);\n\n    expect(vm.$el.querySelector('li.number.active')).to.have.property('textContent').to.equal('10');\n    vm.resetTotal();\n    setTimeout(() => {\n      expect(vm.$el.querySelector('li.number.active')).to.have.property('textContent').to.equal('1');\n      done();\n    }, 50);\n  });\n\n  it('pageSizes', () => {\n    vm = createTest(Pagination, {\n      pageSizes: [10, 15, 35, 50],\n      pageSize: 35,\n      total: 1000,\n      layout: 'sizes, prev, pager, next'\n    });\n\n    expect(vm.$el.querySelector('.el-select-dropdown__item.selected')).to.property('textContent').include('35');\n    expect([].slice.call(vm.$el.querySelectorAll('.el-select-dropdown__item'))\n      .map(node => parseInt(node.textContent, 10)))\n      .to.deep.equal([10, 15, 35, 50]);\n  });\n\n  it('pageSizes:not found pageSize', () => {\n    vm = createTest(Pagination, {\n      pageSizes: [10, 15, 35, 50],\n      pageSize: 24,\n      total: 1000,\n      layout: 'sizes, prev, pager, next'\n    });\n\n    expect(vm.$el.querySelector('.el-select-dropdown__item.selected')).to.property('textContent').include('10');\n  });\n\n  it('layout is empty', () => {\n    vm = createTest(Pagination, {\n      layout: ''\n    });\n\n    expect(vm.$el.textContent).to.empty;\n  });\n\n  it('jumper: change value', (done) => {\n    vm = createVue({\n      template: `\n        <el-pagination\n          @current-change=\"handleChange\"\n          :page-size=\"10\"\n          layout=\"pager, jumper\"\n          :total=\"100\" />\n      `,\n\n      methods: {\n        handleChange(val) {\n          this.page = val;\n        }\n      },\n\n      data() {\n        return {\n          page: 1,\n          inputer: null\n        };\n      },\n\n      mounted() {\n        this.inputer = this.$children[0].$children[1].$children[0];\n      }\n    }, true);\n    const input = vm.inputer;\n    const changeValue = (value) => {\n      input.$emit('input', value);\n      input.$emit('change', value);\n    };\n\n    changeValue(1);\n    setTimeout(() => {\n      expect(input.value).to.equal(1);\n      // 多次输入不在min-max区间内的数字\n      changeValue(0);\n      setTimeout(() => {\n        expect(input.value).to.equal(1);\n        changeValue(0);\n        setTimeout(() => {\n          expect(input.value).to.equal(1);\n          changeValue(1000);\n          setTimeout(() => {\n            expect(input.value).to.equal(10);\n            changeValue(1000);\n            setTimeout(() => {\n              expect(input.value).to.equal(10);\n              done();\n            }, 50);\n          }, 50);\n        }, 50);\n      }, 50);\n    }, 50);\n  });\n\n  it('event:current-change', (done) => {\n    vm = createVue({\n      template: `\n        <el-pagination\n          :total=\"1000\"\n          @current-change=\"change = true\" />\n      `,\n\n      data() {\n        return { change: false };\n      }\n    });\n    const next = vm.$el.querySelector('button.btn-next');\n    const prev = vm.$el.querySelector('button.btn-prev');\n\n    expect(vm.change).to.false;\n    // click 9\n    let count = 9;\n    while (--count) {\n      next.click();\n    }\n\n    prev.click();\n    setTimeout(() => {\n      expect(vm.change).to.true;\n      done();\n    }, 50);\n  });\n\n  it('event:current-change after current page is manually updated', (done) => {\n    vm = createVue({\n      template: `\n        <el-pagination\n          :total=\"15\"\n          :current-page.sync=\"currentPage\"\n          @current-change=\"emitCount++\" />\n      `,\n\n      data() {\n        return {\n          emitCount: 0,\n          currentPage: 1\n        };\n      }\n    });\n    const next = vm.$el.querySelector('button.btn-next');\n    next.click();\n    setTimeout(() => {\n      expect(vm.emitCount).to.equal(1);\n      vm.currentPage = 1;\n      setTimeout(() => {\n        expect(vm.emitCount).to.equal(1);\n        next.click();\n        setTimeout(() => {\n          expect(vm.emitCount).to.equal(2);\n          done();\n        }, 50);\n      }, 50);\n    }, 50);\n  });\n\n  it('event:size-change', done => {\n    vm = createVue({\n      template: `\n        <el-pagination\n          :total=\"100\"\n          layout=\"sizes, prev, pager, next\"\n          @size-change=\"trigger = true\"\n          :pageSize=\"10\" />\n      `,\n\n      data() {\n        return { trigger: false };\n      }\n    }, true);\n\n    expect(vm.trigger).to.false;\n\n    setTimeout(_ => {\n      vm.$el.querySelectorAll('li.el-select-dropdown__item')[1].click();\n      setTimeout(_ => {\n        expect(vm.trigger).to.true;\n        done();\n      }, 50);\n    }, 50);\n  });\n\n  it('event: prev and next click', done => {\n    vm = createVue({\n      template: `\n        <el-pagination\n          :total=\"100\"\n          layout=\"sizes, prev, pager, next\"\n          @prev-click=\"trigger = true\"\n          @next-click=\"trigger = true\"\n          :pageSize=\"10\" />\n      `,\n\n      data() {\n        return { trigger: false };\n      }\n    }, true);\n    const prev = vm.$el.querySelector('.btn-prev');\n    const next = vm.$el.querySelector('.btn-next');\n    prev.click();\n    setTimeout(_ => {\n      expect(vm.trigger).to.false;\n      next.click();\n      setTimeout(_ => {\n        expect(vm.trigger).to.true;\n        done();\n      }, 50);\n    }, 50);\n  });\n\n  it('pageSize > total', () => {\n    vm = createVue({\n      template: `\n        <el-pagination\n          @current-change=\"handleChange\"\n          :page-size=\"1000\"\n          :total=\"0\" />\n      `,\n\n      methods: {\n        handleChange(val) {\n          this.page = val;\n        }\n      },\n\n      data() {\n        return { page: 1 };\n      }\n    });\n    const input = vm.$el.querySelector('.el-pagination__jump input');\n\n    input.value = 2;\n    triggerEvent(input, 'change');\n    expect(vm.page).to.equal(1);\n\n    input.value = '我好帅';\n    triggerEvent(input, 'change');\n    expect(vm.page).to.equal(1);\n  });\n\n  it('hideOnSinglePage', () => {\n    vm = createVue({\n      template: `\n        <el-pagination\n          hide-on-single-page\n          :total=\"1\" />\n      `\n    });\n    expect(vm.$el.nodeType).to.be.equal(window.Node.COMMENT_NODE);\n  });\n\n  describe('click pager', () => {\n    it('click ul', () => {\n      vm = createTest(Pagination, {\n        total: 1000\n      }, true);\n\n      vm.$el.querySelector('.el-pager').click();\n      expect(vm.internalCurrentPage).to.equal(1);\n    });\n\n    it('click li', () => {\n      vm = createTest(Pagination, {\n        total: 1000\n      }, true);\n\n      vm.$el.querySelectorAll('.el-pager li.number')[1].click();\n      expect(vm.internalCurrentPage).to.equal(2);\n    });\n\n    it('click next icon-more', () => {\n      vm = createTest(Pagination, {\n        total: 1000\n      }, true);\n\n      vm.$el.querySelector('.el-pager .more').click();\n      expect(vm.internalCurrentPage).to.equal(6);\n    });\n\n    it('click prev icon-more', done => {\n      vm = createTest(Pagination, {\n        total: 1000\n      }, true);\n\n      vm.$el.querySelector('.btn-quicknext.more').click();\n      setTimeout(_ => {\n        expect(vm.$el.querySelector('.btn-quickprev.more')).to.exist;\n        vm.$el.querySelector('.btn-quickprev.more').click();\n        expect(vm.internalCurrentPage).to.equal(1);\n        done();\n      }, 50);\n    });\n\n    it('click last page', done => {\n      vm = createTest(Pagination, {\n        total: 1000\n      }, true);\n      const nodes = vm.$el.querySelectorAll('li.number');\n\n      nodes[nodes.length - 1].click();\n      setTimeout(_ => {\n        expect(vm.$el.querySelector('.btn-quickprev.more')).to.exist;\n        expect(vm.$el.querySelector('.btn-quicknext.more')).to.not.exist;\n        done();\n      }, 50);\n    });\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/popconfirm.spec.js",
    "content": "import { createVue, destroyVM } from '../util';\n\ndescribe('Popconfirm', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  describe('trigger', () => {\n    const createVM = () => {\n      return createVue(`\n        <div>\n          <el-popconfirm\n            ref=\"popover\"\n            title=\"content\">\n            <button slot=\"reference\">trigger</button>\n          </el-popconfirm>\n        </div>\n      `, true);\n    };\n    it('click', () => {\n      vm = createVM();\n      vm.$el.querySelector('button').click();\n      document.body.click();\n      expect(document.body.querySelector('.el-popconfirm__action').style.display).to.equal('');\n    });\n  });\n\n});\n"
  },
  {
    "path": "test/unit/specs/popover.spec.js",
    "content": "import { createVue, triggerEvent, createTest, destroyVM, wait } from '../util';\nimport Popover from 'packages/popover';\n\ndescribe('Popover', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  describe('trigger', () => {\n    const createVM = (trigger) => {\n      return createVue(`\n        <div>\n          <el-popover\n            ref=\"popover\"\n            trigger=\"${trigger}\"\n            content=\"content\">\n            <button slot=\"reference\">trigger ${trigger}</button>\n          </el-popover>\n        </div>\n      `, true);\n    };\n\n    it('click', () => {\n      vm = createVM('click');\n      const compo = vm.$refs.popover;\n\n      vm.$el.querySelector('button').click();\n      expect(compo.showPopper).to.true;\n      document.body.click();\n      expect(compo.showPopper).to.false;\n    });\n\n    it('hover', done => {\n      vm = createVM('hover');\n      const compo = vm.$refs.popover;\n      const button = vm.$el.querySelector('button');\n\n      triggerEvent(button, 'mouseenter');\n      expect(compo.showPopper).to.true;\n      triggerEvent(button, 'mouseleave');\n      setTimeout(_ => {\n        expect(compo.showPopper).to.false;\n        done();\n      }, 250); // 代码里是 200ms\n    });\n\n    it('manual', done => {\n      vm = createVM('manual');\n      const compo = vm.$refs.popover;\n      const button = vm.$el.querySelector('button');\n\n      triggerEvent(button, 'mouseenter');\n      expect(compo.showPopper).to.false;\n      triggerEvent(button, 'mouseleave');\n      setTimeout(_ => {\n        expect(compo.showPopper).to.false;\n        done();\n      }, 250); // 代码里是 200ms\n    });\n\n    it('focus input in children node', () => {\n      vm = createVue(`\n        <div>\n          <el-popover\n            ref=\"popover\"\n            trigger=\"focus\"\n            content=\"content\">\n            <div slot=\"reference\">\n              <input type=\"text\" value=\"trigger focus\" />\n            </div>\n          </el-popover>\n        </div>\n      `, true);\n      const compo = vm.$refs.popover;\n      const input = vm.$el.querySelector('input');\n\n      input.focus();\n      expect(compo.showPopper).to.true;\n      input.blur();\n      expect(compo.showPopper).to.false;\n    });\n\n    it('focus textarea in children node', () => {\n      vm = createVue(`\n        <div>\n          <el-popover\n            ref=\"popover\"\n            trigger=\"focus\"\n            content=\"content\">\n            <div slot=\"reference\">\n              <textarea></textarea>\n            </div>\n          </el-popover>\n        </div>\n      `, true);\n      const compo = vm.$refs.popover;\n      const textarea = vm.$el.querySelector('textarea');\n\n      textarea.focus();\n      expect(compo.showPopper).to.true;\n      textarea.blur();\n      expect(compo.showPopper).to.false;\n    });\n\n    it('focus input', () => {\n      vm = createVue(`\n        <div>\n          <el-popover\n            ref=\"popover\"\n            trigger=\"focus\"\n            content=\"content\">\n            <input type=\"text\" slot=\"reference\" value=\"trigger focus\" />\n          </el-popover>\n        </div>\n      `, true);\n      const compo = vm.$refs.popover;\n      const input = vm.$el.querySelector('input');\n\n      input.focus();\n      expect(compo.showPopper).to.true;\n      input.blur();\n      expect(compo.showPopper).to.false;\n    });\n\n    it('focus button', () => {\n      vm = createVM('focus');\n      const compo = vm.$refs.popover;\n      const button = vm.$el.querySelector('button');\n\n      triggerEvent(button, 'mousedown');\n      expect(compo.showPopper).to.true;\n      triggerEvent(button, 'mouseup');\n      expect(compo.showPopper).to.false;\n    });\n  });\n\n  describe('create by directive', () => {\n    const vm = createVue({\n      template: `\n        <div>\n          <el-popover\n            ref=\"popover1\"\n            trigger=\"click\"\n            content=\"content\">\n          </el-popover>\n          <button v-popover:popover1>create by directive</button>\n        </div>\n      `,\n\n      directives: {\n        Popover: Popover.directive\n      }\n    }, true);\n    const compo = vm.$refs.popover1;\n\n    it('render', () => {\n      expect(vm.$el.querySelector('.el-popover')).to.have.deep.property('textContent').include('content');\n    });\n\n    it('triggering click', done => {\n      vm.$el.querySelector('button').click();\n      expect(compo.popperElm).to.not.exist;\n      vm.$nextTick(_ => {\n        const popperElm = compo.popperElm;\n        expect(getComputedStyle(popperElm).display).to.not.equal('none');\n        done();\n      });\n    });\n\n    it('click outside', () => {\n      document.body.click();\n      expect(compo.showPopper).to.false;\n    });\n  });\n\n  describe('create by slot', () => {\n    const vm = createVue(`\n      <div>\n        <el-popover\n          ref=\"popover\"\n          trigger=\"click\"\n          content=\"content\">\n          <button slot=\"reference\">create by slot</button>\n        </el-popover>\n      </div>\n    `, true);\n    const compo = vm.$refs.popover;\n\n    it('render', () => {\n      expect(vm.$el.querySelector('.el-popover')).to.have.deep.property('textContent').include('content');\n    });\n\n    it('triggering click', done => {\n      vm.$el.querySelector('button').click();\n      expect(compo.popperElm).to.not.exist;\n      vm.$nextTick(_ => {\n        const popperElm = compo.popperElm;\n        expect(getComputedStyle(popperElm).display).to.not.equal('none');\n        done();\n      });\n    });\n\n    it('click outside', () => {\n      document.body.click();\n      expect(compo.showPopper).to.false;\n    });\n  });\n\n  it('show/hide events', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-popover\n            ref=\"popover\"\n            trigger=\"click\"\n            @show=\"handleShow\"\n            @hide=\"handleHide\"\n            content=\"content\">\n            <button slot=\"reference\">trigger</button>\n          </el-popover>\n        </div>\n      `,\n\n      methods: {\n        handleShow() {\n          this.trigger = true;\n        },\n        handleHide() {\n          this.trigger = false;\n        }\n      },\n\n      data() {\n        return {\n          trigger: false\n        };\n      }\n    }, true);\n\n    vm.$el.querySelector('button').click();\n    setTimeout(_ => {\n      expect(vm.trigger).to.true;\n      document.body.click();\n      setTimeout(_ => {\n        expect(vm.trigger).to.false;\n        done();\n      }, 50);\n    }, 50);\n  });\n\n  describe('open/close delays', () => {\n    it('100ms open / instant close', async() => {\n      vm = createVue(`\n        <div>\n          <el-popover\n            ref=\"popover\"\n            content=\"content\"\n            trigger=\"hover\"\n            :open-delay=\"100\"\n            :close-delay=\"0\">\n            <button slot=\"reference\">reference</button>\n          </el-popover>\n        </div>\n      `, true);\n      const compo = vm.$refs.popover;\n      const button = vm.$el.querySelector('button');\n\n      triggerEvent(button, 'mouseenter');\n      expect(compo.showPopper).to.false;\n      await wait(150);\n      expect(compo.showPopper).to.true;\n      triggerEvent(button, 'mouseleave');\n      expect(compo.showPopper).to.false;\n    });\n\n    it('instant open / 100ms close', async() => {\n      vm = createVue(`\n        <div>\n          <el-popover\n            ref=\"popover\"\n            content=\"content\"\n            trigger=\"hover\"\n            :open-delay=\"0\"\n            :close-delay=\"100\">\n            <button slot=\"reference\">reference</button>\n          </el-popover>\n        </div>\n      `, true);\n      const compo = vm.$refs.popover;\n      const button = vm.$el.querySelector('button');\n\n      triggerEvent(button, 'mouseenter');\n      expect(compo.showPopper).to.true;\n      triggerEvent(button, 'mouseleave');\n      expect(compo.showPopper).to.true;\n      await wait(150);\n      expect(compo.showPopper).to.false;\n    });\n  });\n\n  it('destroy event', () => {\n    vm = createTest(Popover, {\n      reference: document.createElement('div'),\n      popper: document.createElement('div')\n    });\n    expect(() => vm.$destroy(true)).not.throw();\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/progress.spec.js",
    "content": "import { createVue, destroyVM, waitImmediate } from '../util';\n\ndescribe('Progress', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', () => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-progress ref=\"percent0\" :percentage=\"0\"></el-progress>\n          <el-progress ref=\"percent50\" :percentage=\"50\"></el-progress>\n          <el-progress ref=\"percent100\" :percentage=\"100\"></el-progress>\n        </div>\n      `\n    }, true);\n    expect(vm.$refs.percent0.$el.querySelector('.el-progress__text').innerText).to.be.equal('0%');\n    expect(vm.$refs.percent0.$el.querySelector('.el-progress-bar__inner').style.width).to.be.equal('0%');\n\n    expect(vm.$refs.percent50.$el.querySelector('.el-progress__text').innerText).to.be.equal('50%');\n    expect(vm.$refs.percent50.$el.querySelector('.el-progress-bar__inner').style.width).to.be.equal('50%');\n\n    expect(vm.$refs.percent100.$el.querySelector('.el-progress__text').innerText).to.be.equal('100%');\n    expect(vm.$refs.percent100.$el.querySelector('.el-progress-bar__inner').style.width).to.be.equal('100%');\n  });\n  it('status', () => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-progress ref=\"lineSuccess\" :percentage=\"100\" status=\"success\"></el-progress>\n          <el-progress ref=\"lineException\" :percentage=\"0\" status=\"exception\"></el-progress>\n          <el-progress type=\"circle\" ref=\"circleSuccess\" :percentage=\"100\" status=\"success\"></el-progress>\n          <el-progress type=\"circle\" ref=\"circleException\" :percentage=\"0\" status=\"exception\"></el-progress>\n        </div>\n      `\n    }, true);\n    expect(vm.$refs.lineSuccess.$el.classList.contains('is-success')).to.be.true;\n    expect(vm.$refs.lineSuccess.$el.querySelector('.el-progress__text .el-icon-circle-check')).to.be.exist;\n    expect(vm.$refs.lineException.$el.classList.contains('is-exception')).to.be.true;\n    expect(vm.$refs.lineException.$el.querySelector('.el-progress__text .el-icon-circle-close')).to.be.exist;\n\n    expect(vm.$refs.circleSuccess.$el.classList.contains('is-success')).to.be.true;\n    expect(vm.$refs.circleSuccess.$el.querySelector('.el-progress__text .el-icon-check')).to.be.exist;\n    expect(vm.$refs.circleException.$el.classList.contains('is-exception')).to.be.true;\n    expect(vm.$refs.circleException.$el.querySelector('.el-progress__text .el-icon-close')).to.be.exist;\n  });\n  it('text inside', () => {\n    vm = createVue({\n      template: `\n        <el-progress :percentage=\"50\" text-inside></el-progress>\n      `\n    }, true);\n    expect(vm.$el.classList.contains('el-progress--text-inside')).to.be.true;\n  });\n  it('stroke width', () => {\n    vm = createVue({\n      template: `\n        <el-progress :percentage=\"50\" :stroke-width=\"8\"></el-progress>\n      `\n    }, true);\n    expect(vm.$el.querySelector('.el-progress-bar__outer').style.height).to.be.equal('8px');\n  });\n  it('show text', () => {\n    vm = createVue({\n      template: `\n        <el-progress :percentage=\"50\" :show-text=\"false\"></el-progress>\n      `\n    }, true);\n    expect(vm.$el.querySelector('.el-progress__text')).to.not.exist;\n  });\n  it('circle', () => {\n    vm = createVue({\n      template: `\n        <el-progress type=\"circle\" :percentage=\"50\"></el-progress>\n      `\n    }, true);\n    expect(vm.$el.classList.contains('el-progress--circle')).to.be.true;\n  });\n  it('dashboard', () => {\n    vm = createVue({\n      template: `\n        <el-progress type=\"dashboard\" :percentage=\"50\"></el-progress>\n      `\n    }, true);\n    expect(vm.$el.classList.contains('el-progress--dashboard')).to.be.true;\n  });\n  it('width', () => {\n    vm = createVue({\n      template: `\n        <el-progress type=\"circle\" :percentage=\"50\" :width=\"120\"></el-progress>\n      `\n    }, true);\n    expect(vm.$el.querySelector('.el-progress-circle').style.height).to.be.equal('120px');\n    expect(vm.$el.querySelector('.el-progress-circle').style.width).to.be.equal('120px');\n  });\n  it('should work with stroke-width', () => {\n    vm = createVue({\n      template: `\n        <el-progress :text-inside=\"true\" :stroke-width=\"36\" :percentage=\"0\"></el-progress>\n      `\n    }, true);\n    expect(vm.$el.querySelector('.el-progress-bar__innerText').offsetTop).to.be.equal(12);\n  });\n  it('color', () => {\n    vm = createVue({\n      template: `\n      <el-progress :percentage=\"50\" color=\"rgb(0, 0, 0)\"></el-progress>\n      `\n    }, true);\n    expect(vm.$el.querySelector('.el-progress-bar__inner').style.backgroundColor).to.equal('rgb(0, 0, 0)');\n  });\n  it('color is function', async() => {\n    vm = createVue({\n      template: `\n      <el-progress :percentage=\"percentage\" :color=\"customColor\"></el-progress>\n      `,\n      data() {\n        return {\n          percentage: 50\n        };\n      },\n      methods: {\n        customColor(percentage) {\n          if (percentage > 50) {\n            return '#13ce66';\n          } else {\n            return '#20a0ff';\n          }\n        },\n        increase() {\n          this.percentage = 60;\n        }\n      }\n    }, true);\n\n    expect(vm.$el.querySelector('.el-progress-bar__inner').style.backgroundColor).to.equal('rgb(32, 160, 255)');\n    vm.increase();\n\n    await waitImmediate();\n    expect(vm.$el.querySelector('.el-progress-bar__inner').style.backgroundColor).to.equal('rgb(19, 206, 102)');\n  });\n\n  it('color is array', async() => {\n    vm = createVue({\n      template: `\n      <el-progress :percentage=\"percentage\" :color=\"colors\"></el-progress>\n      `,\n      data() {\n        return {\n          percentage: 50,\n          colors: [\n            {color: '#f56c6c', percentage: 20},\n            {color: '#e6a23c', percentage: 40},\n            {color: '#20a0ff', percentage: 60},\n            {color: '#13ce66', percentage: 80},\n            {color: '#6f7ad3', percentage: 100}\n          ]\n        };\n      },\n      methods: {\n        increase() {\n          this.percentage = 70;\n        }\n      }\n    }, true);\n\n    // #20a0ff\n    expect(vm.$el.querySelector('.el-progress-bar__inner').style.backgroundColor).to.equal('rgb(32, 160, 255)');\n\n    vm.increase();\n    await waitImmediate();\n    // #13ce66\n    expect(vm.$el.querySelector('.el-progress-bar__inner').style.backgroundColor).to.equal('rgb(19, 206, 102)');\n  });\n\n  it('format content', () => {\n    vm = createVue({\n      template: `\n      <el-progress :percentage=\"50\" :format=\"format\"></el-progress>\n      `,\n      methods: {\n        format(percentage) {\n          return `占比${percentage}%`;\n        }\n      }\n    }, true);\n    expect(vm.$el.querySelector('.el-progress__text').innerHTML).to.equal('占比50%');\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/radio.spec.js",
    "content": "import { createVue, destroyVM, triggerKeyDown } from '../util';\n\ndescribe('Radio', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', done => {\n    vm = createVue({\n      template: `\n        <el-radio v-model=\"radio\" label=\"a\">\n        </el-radio>\n      `,\n      data() {\n        return {\n          radio: ''\n        };\n      }\n    }, true);\n    let radioElm = vm.$el;\n    expect(radioElm.classList.contains('el-radio')).to.be.true;\n    radioElm.click();\n    setTimeout(_ => {\n      expect(radioElm.querySelector('.is-checked')).to.be.ok;\n      done();\n    }, 10);\n  });\n  it('disabled', done => {\n    vm = createVue({\n      template: `\n        <el-radio\n          v-model=\"radio\"\n          label=\"3\"\n          disabled\n        >\n        </el-radio>\n      `,\n      data() {\n        return {\n          radio: ''\n        };\n      }\n    }, true);\n    let radioElm = vm.$el;\n    radioElm.click();\n    setTimeout(_ => {\n      expect(vm.radio === '').to.be.true;\n      expect(radioElm.querySelector('.is-disabled')).to.be.ok;\n      done();\n    }, 10);\n  });\n  it('border', () => {\n    vm = createVue({\n      template: `\n        <el-radio\n          v-model=\"radio\"\n          label=\"3\"\n          border\n        >\n        </el-radio>\n      `,\n      data() {\n        return {\n          radio: ''\n        };\n      }\n    }, true);\n    let radioElm = vm.$el;\n    expect(radioElm.classList.contains('is-bordered')).to.be.true;\n  });\n  it('change event', done => {\n    vm = createVue({\n      template: `\n        <el-radio\n          v-model=\"radio\"\n          label=\"3\"\n          @change=\"handleChange\"\n        >\n        </el-radio>\n      `,\n      data() {\n        return {\n          radio: '',\n          data: ''\n        };\n      },\n      methods: {\n        handleChange(val) {\n          this.data = val;\n        }\n      }\n    }, true);\n    let radioElm = vm.$el;\n    radioElm.click();\n    setTimeout(_ => {\n      expect(vm.data).to.equal('3');\n      done();\n    }, 10);\n  });\n  it('change event only triggers on user input', done => {\n    vm = createVue({\n      template: `\n        <el-radio\n          v-model=\"radio\"\n          label=\"3\"\n          @change=\"handleChange\"\n        >\n        </el-radio>\n      `,\n      data() {\n        return {\n          radio: '',\n          data: ''\n        };\n      },\n      methods: {\n        handleChange(val) {\n          this.data = val;\n        }\n      }\n    }, true);\n    vm.radio = '3';\n    setTimeout(_ => {\n      expect(vm.data).to.equal('');\n      done();\n    }, 10);\n  });\n  describe('Radio group', () => {\n    it('create', done => {\n      vm = createVue({\n        template: `\n          <el-radio-group v-model=\"radio\">\n            <el-radio :label=\"3\" ref=\"radio1\">备选项</el-radio>\n            <el-radio :label=\"6\" ref=\"radio2\">备选项</el-radio>\n            <el-radio :label=\"9\">备选项</el-radio>\n          </el-radio-group>\n        `,\n        data() {\n          return {\n            radio: 3\n          };\n        }\n      }, true);\n      setTimeout(_ => {\n        expect(vm.$refs.radio1.$el.querySelector('.is-checked')).to.be.ok;\n        let radioElm = vm.$refs.radio2.$el;\n        radioElm.click();\n        setTimeout(_ => {\n          expect(radioElm.querySelector('.is-checked')).to.be.ok;\n          expect(vm.radio === 6).to.be.true;\n          done();\n        }, 10);\n      }, 50);\n    });\n    it('disabled', done => {\n      vm = createVue({\n        template: `\n          <el-radio-group v-model=\"radio\" disabled>\n            <el-radio :label=\"3\" ref=\"radio1\">备选项</el-radio>\n            <el-radio :label=\"6\" ref=\"radio2\">备选项</el-radio>\n            <el-radio :label=\"9\">备选项</el-radio>\n          </el-radio-group>\n        `,\n        data() {\n          return {\n            radio: 3\n          };\n        }\n      }, true);\n      let radio2 = vm.$refs.radio2;\n      expect(vm.$el.querySelectorAll('label.is-disabled').length).to.be.equal(3);\n      expect(vm.$refs.radio1.$el.querySelector('.is-checked')).to.be.exist;\n      radio2.$el.click();\n      setTimeout(_ => {\n        expect(vm.radio === 3).to.be.true;\n        expect(vm.$refs.radio1.$el.querySelector('.is-checked')).to.be.exist;\n        done();\n      }, 10);\n    });\n    it('change event', done => {\n      vm = createVue({\n        template: `\n          <el-radio-group v-model=\"radio\" @change=\"onChange\">\n            <el-radio :label=\"3\">备选项</el-radio>\n            <el-radio :label=\"6\" ref=\"radio2\">备选项</el-radio>\n            <el-radio :label=\"9\">备选项</el-radio>\n          </el-radio-group>\n        `,\n        methods: {\n          onChange(val) {\n            this.data = val;\n          }\n        },\n        data() {\n          return {\n            radio: 3,\n            data: 0\n          };\n        }\n      }, true);\n      let radio2 = vm.$refs.radio2;\n      radio2.$el.click();\n      setTimeout(_ => {\n        expect(vm.data).to.equal(6);\n        done();\n      }, 10);\n    });\n    it('change event only triggers on user input', done => {\n      vm = createVue({\n        template: `\n          <el-radio-group v-model=\"radio\" @change=\"onChange\">\n            <el-radio :label=\"3\">备选项</el-radio>\n            <el-radio :label=\"6\">备选项</el-radio>\n            <el-radio :label=\"9\">备选项</el-radio>\n          </el-radio-group>\n        `,\n        methods: {\n          onChange(val) {\n            this.data = val;\n          }\n        },\n        data() {\n          return {\n            radio: 3,\n            data: 0\n          };\n        }\n      }, true);\n      vm.radio = 6;\n      setTimeout(_ => {\n        expect(vm.data).to.equal(0);\n        done();\n      }, 10);\n    });\n    it('disabled when children is radio button', done => {\n      vm = createVue({\n        template: `\n          <el-radio-group v-model=\"radio\" disabled>\n            <el-radio-button :label=\"3\" ref=\"radio1\">备选项</el-radio-button>\n            <el-radio-button :label=\"6\" ref=\"radio2\">备选项</el-radio-button>\n            <el-radio-button :label=\"9\">备选项</el-radio-button>\n          </el-radio-group>\n        `,\n        data() {\n          return {\n            radio: 3\n          };\n        }\n      }, true);\n      let radio2 = vm.$refs.radio2;\n      expect(vm.$el.querySelectorAll('.is-disabled').length).to.be.equal(3);\n      expect(vm.$refs.radio1.$el.classList.contains('is-active')).to.be.true;\n      radio2.$el.click();\n      setTimeout(_ => {\n        expect(vm.radio === 3).to.be.true;\n        expect(vm.$refs.radio1.$el.classList.contains('is-active')).to.be.true;\n        done();\n      }, 10);\n    });\n    it('keyboard event', done => {\n      vm = createVue({\n        template: `\n          <el-radio-group v-model=\"radio\">\n            <el-radio-button ref=\"radio1\" :label=\"3\">备选项</el-radio-button>\n            <el-radio-button ref=\"radio2\" :label=\"6\">备选项</el-radio-button>\n            <el-radio-button ref=\"radio3\" :label=\"9\">备选项</el-radio-button>\n          </el-radio-group>\n        `,\n        data() {\n          return {\n            radio: 6\n          };\n        }\n      }, true);\n\n      expect(vm.radio).to.be.equal(6);\n      vm.$nextTick(() => {\n        triggerKeyDown(vm.$refs.radio2.$el, 37);\n        expect(vm.radio).to.be.equal(3);\n\n        triggerKeyDown(vm.$refs.radio1.$el, 37);\n        expect(vm.radio).to.be.equal(9);\n\n        vm.$nextTick(() => {\n          triggerKeyDown(vm.$refs.radio3.$el, 39);\n          expect(vm.radio).to.be.equal(3);\n\n          triggerKeyDown(vm.$refs.radio1.$el, 39);\n          expect(vm.radio).to.be.equal(6);\n\n          vm.$nextTick(() => {\n            triggerKeyDown(vm.$refs.radio1.$el, 13);\n            expect(vm.radio).to.be.equal(6);\n\n            done();\n          });\n        });\n      });\n    });\n    describe('Radio Button', () => {\n      it('create', done => {\n        vm = createVue({\n          template: `\n            <el-radio-group v-model=\"radio\">\n              <el-radio-button :label=\"3\" ref=\"radio1\">备选项</el-radio-button>\n              <el-radio-button :label=\"6\" ref=\"radio2\">备选项</el-radio-button>\n              <el-radio-button :label=\"9\">备选项</el-radio-button>\n            </el-radio-group>\n          `,\n          data() {\n            return {\n              radio: 3\n            };\n          }\n        }, true);\n        expect(vm.$refs.radio1.$el.classList.contains('is-active')).to.be.true;\n        let radio = vm.$refs.radio2;\n        radio.$el.click();\n        setTimeout(_ => {\n          expect(radio.$el.classList.contains('is-active')).to.be.true;\n          expect(vm.radio === 6).to.be.true;\n          done();\n        }, 10);\n      });\n      it('custom color', done => {\n        vm = createVue({\n          template: `\n            <el-radio-group v-model=\"radio\" fill=\"#000\" text-color=\"#ff0\">\n              <el-radio-button :label=\"3\" ref=\"radio1\">备选项</el-radio-button>\n              <el-radio-button :label=\"6\" ref=\"radio2\">备选项</el-radio-button>\n              <el-radio-button :label=\"9\">备选项</el-radio-button>\n            </el-radio-group>\n          `,\n          data() {\n            return {\n              radio: 3\n            };\n          }\n        }, true);\n        setTimeout(_ => {\n          expect(vm.$refs.radio1.activeStyle.backgroundColor).to.equal('#000');\n          expect(vm.$refs.radio1.activeStyle.borderColor).to.equal('#000');\n          expect(vm.$refs.radio1.activeStyle.color).to.equal('#ff0');\n          done();\n        }, 10);\n      });\n      it('change event', done => {\n        vm = createVue({\n          template: `\n            <el-radio-group v-model=\"radio\" @change=\"onChange\">\n              <el-radio-button :label=\"3\">备选项</el-radio-button>\n              <el-radio-button :label=\"6\" ref=\"radio2\">备选项</el-radio-button>\n              <el-radio-button :label=\"9\">备选项</el-radio-button>\n            </el-radio-group>\n          `,\n          methods: {\n            onChange(val) {\n              this.data = val;\n            }\n          },\n          data() {\n            return {\n              data: 0,\n              radio: 3\n            };\n          }\n        }, true);\n        let radio = vm.$refs.radio2;\n        radio.$el.click();\n        setTimeout(_ => {\n          expect(vm.data).to.equal(6);\n          done();\n        }, 10);\n      });\n      it('change event only triggers on user input', done => {\n        vm = createVue({\n          template: `\n            <el-radio-group v-model=\"radio\" @change=\"onChange\">\n              <el-radio-button :label=\"3\">备选项</el-radio-button>\n              <el-radio-button :label=\"6\" ref=\"radio2\">备选项</el-radio-button>\n              <el-radio-button :label=\"9\">备选项</el-radio-button>\n            </el-radio-group>\n          `,\n          methods: {\n            onChange(val) {\n              this.data = val;\n            }\n          },\n          data() {\n            return {\n              data: 0,\n              radio: 3\n            };\n          }\n        }, true);\n        vm.radio = 6;\n        setTimeout(_ => {\n          expect(vm.data).to.equal(0);\n          done();\n        }, 10);\n      });\n      it('size', done => {\n        vm = createVue({\n          template: `\n            <el-radio-group v-model=\"radio\" size=\"large\">\n              <el-radio-button :label=\"3\" ref=\"radio1\">备选项</el-radio-button>\n              <el-radio-button :label=\"6\" ref=\"radio2\">备选项</el-radio-button>\n              <el-radio-button :label=\"9\">备选项</el-radio-button>\n            </el-radio-group>\n          `,\n          data() {\n            return {\n              radio: 3\n            };\n          }\n        }, true);\n        setTimeout(_ => {\n          expect(vm.$el.querySelectorAll('.el-radio-button--large').length).to.be.equal(3);\n          done();\n        }, 10);\n      });\n    });\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/rate.spec.js",
    "content": "import { createTest, createVue, destroyVM } from '../util';\nimport Rate from 'packages/rate';\nimport Vue from 'vue';\n\ndescribe('Rate', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', () => {\n    vm = createTest(Rate, { max: 10 }, true);\n    const stars = vm.$el.querySelectorAll('.el-rate__item');\n    expect(stars.length).to.equal(10);\n  });\n\n  it('with texts', () => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-rate\n            v-model=\"value\"\n            show-text\n            :texts=\"['1', '2', '3', '4', '5']\"></el-rate>\n        </div>\n      `,\n\n      data() {\n        return {\n          value: 4\n        };\n      }\n    }, true);\n    const text = vm.$el.querySelector('.el-rate__text');\n    expect(text.textContent).to.equal('4');\n  });\n\n  it('value change', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-rate v-model=\"value\"></el-rate>\n        </div>\n      `,\n\n      data() {\n        return {\n          value: 0\n        };\n      }\n    }, true);\n    const rate = vm.$children[0];\n    expect(rate.value).to.equal(0);\n    vm.value = 3;\n    Vue.nextTick(() => {\n      expect(rate.value).to.equal(3);\n      done();\n    });\n  });\n\n  it('click', () => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-rate v-model=\"value\"></el-rate>\n        </div>\n      `,\n\n      data() {\n        return {\n          value: 0\n        };\n      }\n    }, true);\n    const thirdStar = vm.$el.querySelectorAll('.el-rate__item')[2];\n    thirdStar.click();\n    expect(vm.value).to.equal(3);\n  });\n\n  it('colors', () => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-rate v-model=\"value\" :colors=\"['#99A9BF', '#F7BA2A', '#FF9900']\"></el-rate>\n        </div>\n      `,\n\n      data() {\n        return {\n          value: 4\n        };\n      }\n    }, true);\n    const thirdIcon = vm.$el.querySelectorAll('.el-rate__item')[2].querySelector('.el-rate__icon');\n    expect(thirdIcon.style.color).to.equal('rgb(255, 153, 0)');\n  });\n\n  it('colors are updated after prop is changed', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-rate v-model=\"value\" :colors=\"colors\"></el-rate>\n        </div>\n      `,\n\n      computed: {\n        colors() {\n          if (this.muted) {\n            return ['#999', '#999', '#999'];\n          } else {\n            return ['#99A9BF', '#F7BA2A', '#FF9900'];\n          }\n        }\n      },\n      data() {\n        return {\n          value: 4,\n          muted: false\n        };\n      }\n    }, true);\n    setTimeout(() => {\n      vm.muted = true;\n      vm.$nextTick(() => {\n        const thirdIcon = vm.$el.querySelectorAll('.el-rate__item')[2].querySelector('.el-rate__icon');\n        expect(thirdIcon.style.color).to.equal('rgb(153, 153, 153)');\n        done();\n      });\n    }, 10);\n  });\n\n  it('threshold', () => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-rate v-model=\"value\" :low-threshold=\"3\"></el-rate>\n        </div>\n      `,\n\n      data() {\n        return {\n          value: 3\n        };\n      }\n    }, true);\n    const thirdIcon = vm.$el.querySelectorAll('.el-rate__item')[2].querySelector('.el-rate__icon');\n    expect(thirdIcon.style.color).to.equal('rgb(247, 186, 42)');\n  });\n\n  it('disabled', () => {\n    const vm1 = createVue({\n      template: `\n        <div>\n          <el-rate v-model=\"value\" disabled show-text></el-rate>\n        </div>\n      `,\n\n      data() {\n        return {\n          value: 3.7\n        };\n      }\n    }, true);\n    const vm2 = createVue({\n      template: `\n        <div>\n          <el-rate v-model=\"value\" disabled show-text></el-rate>\n        </div>\n      `,\n\n      data() {\n        return {\n          value: 3.4\n        };\n      }\n    }, true);\n    const firstStar = vm1.$el.querySelectorAll('.el-rate__item')[0];\n    firstStar.click();\n    vm1.$children[0].resetCurrentValue();\n    expect(vm1.value).to.equal(3.7);\n\n    const fourthStar = vm2.$el.querySelectorAll('.el-rate__item')[3];\n    const halfStar = fourthStar.querySelector('.el-rate__decimal');\n    expect(halfStar.style.width).to.equal('40%');\n  });\n\n  it('allow half', () => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-rate v-model=\"value\" allow-half></el-rate>\n        </div>\n      `,\n\n      data() {\n        return {\n          value: 0\n        };\n      }\n    }, true);\n    const rate = vm.$children[0];\n    const secondStar = vm.$el.querySelectorAll('.el-rate__item')[1];\n    rate.setCurrentValue(1, { target: secondStar, offsetX: 2 });\n    secondStar.click();\n    rate.resetCurrentValue();\n    expect(vm.value).to.equal(0.5);\n  });\n\n  it('custom icon classes by passing object', () => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-rate\n            v-model=\"value\"\n            :icon-classes=\"{ 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }\"></el-rate>\n        </div>\n      `,\n\n      data() {\n        return {\n          value: 4\n        };\n      }\n    }, true);\n    const thirdIcon = vm.$el.querySelectorAll('.el-rate__item')[3].querySelector('.el-rate__icon');\n    expect(thirdIcon.className).to.include('icon-rate-face-3');\n  });\n\n});\n"
  },
  {
    "path": "test/unit/specs/result.spec.js",
    "content": "import { createVue, destroyVM, waitImmediate } from '../util';\n\nconst AXIOM = 'Rem is the best girl';\n\ndescribe('Result', () => {\n\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('render test', () => {\n    vm = createVue({\n      template: '<el-result />'\n    }, true);\n    expect(vm.$el.querySelector('.el-result__icon')).to.exist;\n    expect(Array.from(vm.$el.classList)).to.contain('el-result');\n  });\n\n  it('should render title props', () => {\n    vm = createVue({\n      template: '<el-result :title=\"title\"/>',\n      data() {\n        return {\n          title: AXIOM\n        };\n      }\n    }, true);\n    expect(vm.$el.querySelector('.el-result__title').innerText).to.be.equal(AXIOM);\n  });\n\n  it('should render sub-title props', () => {\n    vm = createVue({\n      template: '<el-result :sub-title=\"subTitle\"/>',\n      data() {\n        return {\n          subTitle: AXIOM\n        };\n      }\n    }, true);\n    expect(vm.$el.querySelector('.el-result__subtitle').innerText).to.be.equal(AXIOM);\n  });\n\n  it('should render icon props', async() => {\n    vm = createVue({\n      template: '<el-result :icon=\"icon\"/>',\n      data() {\n        return {\n          icon: 'success'\n        };\n      }\n    }, true);\n    expect(vm.$el.querySelector('.el-result__icon svg')).to.exist;\n    expect(Array.from(vm.$el.querySelector('.el-result__icon svg').classList)).to.contain('icon-success');\n    vm.icon = 'error';\n    await waitImmediate();\n    expect(vm.$el.querySelector('.el-result__icon svg')).to.exist;\n    expect(Array.from(vm.$el.querySelector('.el-result__icon svg').classList)).to.contain('icon-error');\n    vm.icon = 'warning';\n    await waitImmediate();\n    expect(vm.$el.querySelector('.el-result__icon svg')).to.exist;\n    expect(Array.from(vm.$el.querySelector('.el-result__icon svg').classList)).to.contain('icon-warning');\n    vm.icon = 'info';\n    await waitImmediate();\n    expect(vm.$el.querySelector('.el-result__icon svg')).to.exist;\n    expect(Array.from(vm.$el.querySelector('.el-result__icon svg').classList)).to.contain('icon-info');\n  });\n\n  it('should render icon slots', () => {\n    vm = createVue({\n      template: '<el-result><template slot=\"icon\">{{icon}}</template></el-result>',\n      data() {\n        return {\n          icon: AXIOM\n        };\n      }\n    }, true);\n    expect(vm.$el.querySelector('.el-result__icon')).to.exist;\n    expect(vm.$el.querySelector('.el-result__icon').innerText).to.be.equal(AXIOM);\n  });\n\n  it('should render title slots', () => {\n    vm = createVue({\n      template: '<el-result><template slot=\"title\">{{title}}</template></el-result>',\n      data() {\n        return {\n          title: AXIOM\n        };\n      }\n    }, true);\n    expect(vm.$el.querySelector('.el-result__title')).to.exist;\n    expect(vm.$el.querySelector('.el-result__title').innerText).to.be.equal(AXIOM);\n  });\n\n  it('should render sub-title slots', () => {\n    vm = createVue({\n      template: '<el-result><template slot=\"subTitle\">{{subTitle}}</template></el-result>',\n      data() {\n        return {\n          subTitle: AXIOM\n        };\n      }\n    }, true);\n    expect(vm.$el.querySelector('.el-result__subtitle')).to.exist;\n    expect(vm.$el.querySelector('.el-result__subtitle').innerText).to.be.equal(AXIOM);\n  });\n\n  it('should render extra slots', () => {\n    vm = createVue({\n      template: '<el-result><template slot=\"extra\">{{extra}}</template></el-result>',\n      data() {\n        return {\n          extra: AXIOM\n        };\n      }\n    }, true);\n    expect(vm.$el.querySelector('.el-result__extra')).to.exist;\n    expect(vm.$el.querySelector('.el-result__extra').innerText).to.be.equal(AXIOM);\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/row.spec.js",
    "content": "import { createTest, destroyVM } from '../util';\nimport Row from 'packages/row';\n\ndescribe('Row', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', () => {\n    vm = createTest(Row, true);\n    let rowElm = vm.$el;\n    expect(rowElm.classList.contains('el-row')).to.be.true;\n  });\n  it('gutter', () => {\n    vm = createTest(Row, {\n      gutter: 20\n    }, true);\n    let rowElm = vm.$el;\n    expect(rowElm.style.marginLeft).to.be.equal('-10px');\n    expect(rowElm.style.marginRight).to.be.equal('-10px');\n  });\n  it('type', () => {\n    vm = createTest(Row, {\n      type: 'flex'\n    }, true);\n    let rowElm = vm.$el;\n    expect(rowElm.classList.contains('el-row--flex')).to.be.true;\n  });\n  it('justify', () => {\n    vm = createTest(Row, {\n      justify: 'end'\n    }, true);\n    let rowElm = vm.$el;\n    expect(rowElm.classList.contains('is-justify-end')).to.be.true;\n  });\n  it('align', () => {\n    vm = createTest(Row, {\n      align: 'bottom'\n    }, true);\n    let rowElm = vm.$el;\n    expect(rowElm.classList.contains('is-align-bottom')).to.be.true;\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/select.spec.js",
    "content": "import { createTest, createVue, triggerEvent, destroyVM, waitImmediate } from '../util';\nimport Select from 'packages/select';\n\ndescribe('Select', () => {\n  const getSelectVm = (configs = {}, options) => {\n    ['multiple', 'clearable', 'filterable', 'allowCreate', 'remote', 'collapseTags', 'automaticDropdown'].forEach(config => {\n      configs[config] = configs[config] || false;\n    });\n    configs.multipleLimit = configs.multipleLimit || 0;\n    if (!options) {\n      options = [{\n        value: '选项1',\n        label: '黄金糕',\n        disabled: false\n      }, {\n        value: '选项2',\n        label: '双皮奶',\n        disabled: false\n      }, {\n        value: '选项3',\n        label: '蚵仔煎',\n        disabled: false\n      }, {\n        value: '选项4',\n        label: '龙须面',\n        disabled: false\n      }, {\n        value: '选项5',\n        label: '北京烤鸭',\n        disabled: false\n      }];\n    }\n    const vm = createVue({\n      template: `\n        <div>\n          <el-select\n            ref=\"select\"\n            v-model=\"value\"\n            :multiple=\"multiple\"\n            :multiple-limit=\"multipleLimit\"\n            :popper-class=\"popperClass\"\n            :clearable=\"clearable\"\n            :filterable=\"filterable\"\n            :collapse-tags=\"collapseTags\"\n            :allow-create=\"allowCreate\"\n            :filterMethod=\"filterMethod\"\n            :remote=\"remote\"\n            :loading=\"loading\"\n            :remoteMethod=\"remoteMethod\"\n            :automatic-dropdown=\"automaticDropdown\">\n            <el-option\n              v-for=\"item in options\"\n              :label=\"item.label\"\n              :key=\"item.value\"\n              :disabled=\"item.disabled\"\n              :value=\"item.value\">\n            </el-option>\n          </el-select>\n        </div>\n      `,\n\n      data() {\n        return {\n          options,\n          multiple: configs.multiple,\n          multipleLimit: configs.multipleLimit,\n          clearable: configs.clearable,\n          filterable: configs.filterable,\n          collapseTags: configs.collapseTags,\n          allowCreate: configs.allowCreate,\n          popperClass: configs.popperClass,\n          automaticDropdown: configs.automaticDropdown,\n          loading: false,\n          filterMethod: configs.filterMethod && configs.filterMethod(this),\n          remote: configs.remote,\n          remoteMethod: configs.remoteMethod && configs.remoteMethod(this),\n          value: configs.multiple ? [] : ''\n        };\n      }\n    }, true);\n    return vm;\n  };\n\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', () => {\n    vm = createTest(Select, true);\n    expect(vm.$el.className).to.equal('el-select');\n    expect(vm.$el.querySelector('.el-input__inner').placeholder).to.equal('请选择');\n    vm.toggleMenu();\n    expect(vm.visible).to.true;\n  });\n\n  it('options rendered correctly', () => {\n    vm = getSelectVm();\n    const options = vm.$el.querySelectorAll('.el-select-dropdown__item');\n    const result = [].every.call(options, (option, index) => {\n      let text = option.querySelector('span').textContent;\n      return text === vm.options[index].label;\n    });\n    expect(result).to.true;\n  });\n\n  it('custom dropdown class', () => {\n    vm = getSelectVm({ popperClass: 'custom-dropdown' });\n    const dropdown = vm.$el.querySelector('.el-select-dropdown');\n    expect(dropdown.classList.contains('custom-dropdown')).to.true;\n  });\n\n  it('default value', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-select v-model=\"value\">\n            <el-option\n              v-for=\"item in options\"\n              :label=\"item.label\"\n              :key=\"item.value\"\n              :value=\"item.value\">\n            </el-option>\n          </el-select>\n        </div>\n      `,\n\n      data() {\n        return {\n          options: [{\n            value: '选项1',\n            label: '黄金糕'\n          }, {\n            value: '选项2',\n            label: '双皮奶'\n          }],\n          value: '选项2'\n        };\n      }\n    }, true);\n    setTimeout(() => {\n      expect(vm.$el.querySelector('.el-input__inner').value).to.equal('双皮奶');\n      done();\n    }, 100);\n  });\n\n  it('single select', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-select v-model=\"value\" @change=\"handleChange\">\n            <el-option\n              v-for=\"item in options\"\n              :label=\"item.label\"\n              :key=\"item.value\"\n              :value=\"item.value\">\n              <p>{{item.label}} {{item.value}}</p>\n            </el-option>\n          </el-select>\n        </div>\n      `,\n\n      data() {\n        return {\n          options: [{\n            value: '选项1',\n            label: '黄金糕'\n          }, {\n            value: '选项2',\n            label: '双皮奶'\n          }, {\n            value: '选项3',\n            label: '蚵仔煎'\n          }, {\n            value: '选项4',\n            label: '龙须面'\n          }, {\n            value: '选项5',\n            label: '北京烤鸭'\n          }],\n          value: '',\n          count: 0\n        };\n      },\n\n      methods: {\n        handleChange() {\n          this.count++;\n        }\n      }\n    }, true);\n    const options = vm.$el.querySelectorAll('.el-select-dropdown__item');\n    expect(vm.value).to.equal('');\n    triggerEvent(options[2], 'mouseenter');\n    options[2].click();\n    setTimeout(() => {\n      expect(vm.value).to.equal('选项3');\n      expect(vm.count).to.equal(1);\n      triggerEvent(options[2], 'mouseenter');\n      options[4].click();\n      setTimeout(() => {\n        expect(vm.value).to.equal('选项5');\n        expect(vm.count).to.equal(2);\n        done();\n      }, 100);\n    }, 100);\n  });\n\n  it('disabled option', done => {\n    vm = getSelectVm();\n    vm.options[1].disabled = true;\n    setTimeout(() => {\n      const options = vm.$el.querySelectorAll('.el-select-dropdown__item');\n      expect(options[1].classList.contains('is-disabled')).to.true;\n      options[1].click();\n      setTimeout(() => {\n        expect(vm.value).to.equal('');\n        done();\n      }, 100);\n    }, 100);\n  });\n\n  it('disabled select', () => {\n    vm = createTest(Select, { disabled: true }, true);\n    expect(vm.$el.querySelector('.el-input').classList.contains('is-disabled')).to.true;\n  });\n\n  it('visible event', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-select v-model=\"value\" @visible-change=\"handleVisibleChange\">\n            <el-option\n              v-for=\"item in options\"\n              :label=\"item.label\"\n              :key=\"item.value\"\n              :value=\"item.value\">\n            </el-option>\n          </el-select>\n        </div>\n      `,\n\n      data() {\n        return {\n          options: [],\n          value: '',\n          visible: ''\n        };\n      },\n\n      methods: {\n        handleVisibleChange(val) {\n          this.visible = val;\n        }\n      }\n    }, true);\n    vm.$children[0].visible = true;\n    setTimeout(() => {\n      expect(vm.visible).to.true;\n      done();\n    }, 50);\n  });\n\n  it('keyboard operations', done => {\n    vm = getSelectVm();\n    const select = vm.$children[0];\n    let i = 8;\n    while (i--) {\n      select.navigateOptions('next');\n    }\n    select.navigateOptions('prev');\n    setTimeout(() => {\n      expect(select.hoverIndex).to.equal(0);\n      select.selectOption();\n      setTimeout(() => {\n        expect(select.value).to.equal('选项1');\n        done();\n      }, 100);\n    }, 100);\n  });\n\n  it('clearable', done => {\n    vm = getSelectVm({ clearable: true });\n    const select = vm.$children[0];\n    vm.value = '选项1';\n    select.inputHovering = true;\n    setTimeout(() => {\n      const iconClear = vm.$el.querySelector('.el-input__icon.el-icon-circle-close');\n      expect(iconClear).to.exist;\n      iconClear.click();\n      expect(vm.value).to.equal('');\n      done();\n    }, 100);\n  });\n\n  it('object typed value', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-select v-model=\"value\" value-key=\"id\">\n            <el-option\n              v-for=\"item in options\"\n              :label=\"item.label\"\n              :key=\"item.id\"\n              :value=\"item\">\n            </el-option>\n          </el-select>\n        </div>\n      `,\n\n      data() {\n        return {\n          options: [{\n            id: 1,\n            label: 'label1'\n          }, {\n            id: 2,\n            label: 'label2'\n          }],\n          value: {\n            id: 1,\n            label: 'label1'\n          }\n        };\n      }\n    }, true);\n    setTimeout(() => {\n      expect(vm.$el.querySelector('.el-input__inner').value).to.equal('label1');\n      expect(vm.$el.querySelector('.el-select-dropdown__item').classList.contains('selected'));\n      done();\n    }, 100);\n  });\n\n  it('prefixed icon', () => {\n    vm = createTest({\n      template: `\n        <div>\n          <el-select v-model=\"value\">\n            <el-option\n              v-for=\"item in options\"\n              :label=\"item.label\"\n              :key=\"item.value\"\n              :value=\"item.value\">\n            </el-option>\n            <i slot=\"prefix\" class=\"el-input__icon el-icon-search\"></i>\n          </el-select>\n        </div>\n      `,\n\n      data() {\n        return {\n          options: [],\n          value: ''\n        };\n      }\n    });\n    expect(vm.$el.querySelector('.el-input__icon').classList.contains('el-icon-search')).to.be.true;\n  });\n\n  it('custom el-option template', () => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-select v-model=\"value\">\n            <el-option\n              v-for=\"item in options\"\n              :label=\"item.label\"\n              :key=\"item.value\"\n              :value=\"item.value\">\n              <p>{{item.label}} {{item.value}}</p>\n            </el-option>\n          </el-select>\n        </div>\n      `,\n\n      data() {\n        return {\n          options: [{\n            value: 'value',\n            label: 'label'\n          }],\n          value: ''\n        };\n      }\n    }, true);\n    expect(vm.$el.querySelector('.el-select-dropdown__item p').textContent).to.equal('label value');\n  });\n\n  it('option group', () => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-select v-model=\"value\">\n            <el-option-group\n              v-for=\"group in options\"\n              :key=\"group.label\"\n              :disabled=\"group.disabled\"\n              :label=\"group.label\">\n              <el-option\n                v-for=\"item in group.options\"\n                :label=\"item.label\"\n                :key=\"item.value\"\n                :value=\"item.value\">\n              </el-option>\n            </el-option-group>\n          </el-select>\n        </div>\n      `,\n\n      data() {\n        return {\n          options: [{\n            label: '热门城市',\n            options: [{\n              value: 'Shanghai',\n              label: '上海'\n            }, {\n              value: 'Beijing',\n              label: '北京'\n            }]\n          }, {\n            label: '城市名',\n            disabled: true,\n            options: [{\n              value: 'Chengdu',\n              label: '成都'\n            }, {\n              value: 'Shenzhen',\n              label: '深圳'\n            }, {\n              value: 'Guangzhou',\n              label: '广州'\n            }, {\n              value: 'Dalian',\n              label: '大连'\n            }]\n          }],\n          value: ''\n        };\n      }\n    }, true);\n    const groups = vm.$el.querySelectorAll('.el-select-group__wrap');\n    const options = groups[1].querySelectorAll('.el-select-dropdown__item');\n    expect(groups.length).to.equal(2);\n    expect(options.length).to.equal(4);\n    expect(options[0].querySelector('span').textContent).to.equal('成都');\n  });\n\n  it('filterable', done => {\n    vm = getSelectVm({ filterable: true });\n    const select = vm.$children[0];\n    setTimeout(() => {\n      select.selectedLabel = '面';\n      select.onInputChange();\n      select.visible = true;\n      setTimeout(() => {\n        expect(select.filteredOptionsCount).to.equal(1);\n        done();\n      }, 10);\n    }, 10);\n  });\n\n  it('filterable with custom filter-method', done => {\n    const filterMethod = vm => {\n      return query => {\n        vm.options = vm.options.filter(option => option.label.indexOf(query) === -1);\n      };\n    };\n    vm = getSelectVm({ filterable: true, filterMethod });\n    const select = vm.$children[0];\n    select.$el.click();\n    setTimeout(() => {\n      select.selectedLabel = '面';\n      select.onInputChange();\n      setTimeout(() => {\n        expect(select.filteredOptionsCount).to.equal(4);\n        done();\n      }, 10);\n    }, 10);\n  });\n\n  it('default-first-option', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-select\n            v-model=\"value\"\n            default-first-option\n            filterable\n          >\n            <el-option\n              v-for=\"item in options\"\n              :label=\"item\"\n              :key=\"item\"\n              :value=\"item\"\n            />\n          </el-select>\n        </div>\n      `,\n      data() {\n        return {\n          options: ['1', '2', '3', '4', '5'],\n          value: ''\n        };\n      }\n    }, true);\n\n    const select = vm.$children[0];\n    setTimeout(() => {\n      select.$el.click();\n      select.query = '3';\n      select.handleQueryChange('3');\n      select.selectOption();\n      setTimeout(() => {\n        expect(select.value).to.equal('3');\n        done();\n      }, 10);\n    }, 10);\n  });\n\n  it('allow create', done => {\n    vm = getSelectVm({ filterable: true, allowCreate: true });\n    const select = vm.$children[0];\n    select.$el.querySelector('input').focus();\n    setTimeout(() => {\n      select.selectedLabel = 'new';\n      select.onInputChange();\n      setTimeout(() => {\n        const options = document.querySelectorAll('.el-select-dropdown__item span');\n        const target = [].filter.call(options, option => option.innerText === 'new');\n        target[0].click();\n        setTimeout(() => {\n          expect(select.value.indexOf('new') > -1).to.true;\n          done();\n        }, 10);\n      }, 10);\n    }, 10);\n  });\n\n  it('multiple select', done => {\n    vm = getSelectVm({ multiple: true });\n    const options = vm.$el.querySelectorAll('.el-select-dropdown__item');\n    vm.value = ['选项1'];\n    setTimeout(() => {\n      options[1].click();\n      setTimeout(() => {\n        options[3].click();\n        setTimeout(() => {\n          expect(vm.value.indexOf('选项2') > -1 && vm.value.indexOf('选项4') > -1).to.true;\n          const tagCloseIcons = vm.$el.querySelectorAll('.el-tag__close');\n          tagCloseIcons[0].click();\n          setTimeout(() => {\n            expect(vm.value.indexOf('选项1')).to.equal(-1);\n            done();\n          }, 100);\n        }, 100);\n      }, 100);\n    }, 100);\n  });\n\n  it('multiple remove-tag', done => {\n    sinon.stub(window.console, 'log');\n    vm = createVue({\n      template: `\n        <div>\n          <el-select v-model=\"value\" multiple @remove-tag=\"handleRemoveTag\">\n            <el-option\n              v-for=\"item in options\"\n              :label=\"item.label\"\n              :key=\"item.value\"\n              :value=\"item.value\">\n              <p>{{item.label}} {{item.value}}</p>\n            </el-option>\n          </el-select>\n        </div>\n      `,\n\n      data() {\n        return {\n          options: [{\n            value: '选项1',\n            label: '黄金糕'\n          }, {\n            value: '选项2',\n            label: '双皮奶'\n          }, {\n            value: '选项3',\n            label: '蚵仔煎'\n          }, {\n            value: '选项4',\n            label: '龙须面'\n          }, {\n            value: '选项5',\n            label: '北京烤鸭'\n          }],\n          value: ['选项1', '选项3']\n        };\n      },\n\n      methods: {\n        handleRemoveTag() {\n          console.log('remove tag');\n        }\n      }\n    }, true);\n    expect(vm.value.length).to.equal(2);\n    setTimeout(() => {\n      const tagCloseIcons = vm.$el.querySelectorAll('.el-tag__close');\n      tagCloseIcons[1].click();\n      setTimeout(() => {\n        expect(vm.value.length).to.equal(1);\n        expect(window.console.log.callCount).to.equal(1);\n        tagCloseIcons[0].click();\n        setTimeout(() => {\n          expect(vm.value.length).to.equal(0);\n          expect(window.console.log.callCount).to.equal(2);\n          window.console.log.restore();\n          done();\n        }, 50);\n      }, 50);\n    }, 50);\n  });\n\n  it('multiple limit', done => {\n    vm = getSelectVm({ multiple: true, multipleLimit: 1 });\n    const options = vm.$el.querySelectorAll('.el-select-dropdown__item');\n    options[1].click();\n    setTimeout(() => {\n      expect(vm.value.indexOf('选项2') > -1).to.true;\n      options[3].click();\n      setTimeout(() => {\n        expect(vm.value.indexOf('选项4')).to.equal(-1);\n        done();\n      }, 50);\n    }, 50);\n  });\n\n  it('multiple remote search', done => {\n    const remoteMethod = vm => {\n      return query => {\n        vm.loading = true;\n        setTimeout(() => {\n          vm.options = vm.options.filter(option => {\n            return option.label.indexOf(query) > -1;\n          });\n          vm.loading = false;\n        }, 200);\n      };\n    };\n    vm = getSelectVm({\n      multiple: true,\n      remote: true,\n      filterable: true,\n      remoteMethod\n    });\n    const select = vm.$children[0];\n    select.handleQueryChange('');\n    vm.$nextTick(() => {\n      select.handleQueryChange('面');\n      setTimeout(() => {\n        expect(select.filteredOptionsCount).to.equal(1);\n        select.options[0].$el.click();\n        vm.$nextTick(() => {\n          expect(vm.value[0]).to.equal('选项4');\n          select.deletePrevTag({ target: select.$refs.input });\n          select.deletePrevTag({ target: select.$refs.input });\n          select.resetInputState({ keyCode: 1 });\n          vm.$nextTick(() => {\n            expect(vm.value.length).to.equal(0);\n            done();\n          });\n        });\n      }, 250);\n    });\n  });\n\n  it('event:focus & blur', done => {\n    vm = createVue({\n      template: `\n        <el-select ref=\"select\"></el-select>\n      `\n    }, true);\n\n    const spyFocus = sinon.spy();\n    const spyBlur = sinon.spy();\n\n    vm.$refs.select.$on('focus', spyFocus);\n    vm.$refs.select.$on('blur', spyBlur);\n    vm.$el.querySelector('input').focus();\n    vm.$el.querySelector('input').blur();\n\n    setTimeout(_ => {\n      expect(spyFocus.calledOnce).to.be.true;\n      expect(spyBlur.calledOnce).to.be.true;\n      done();\n    }, 250);\n  });\n\n  it('should return focus to input inside select after option select', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-select v-model=\"value\" ref=\"select\">\n            <el-option label=\"1\" :value=\"1\" />\n          </el-select>\n        </div>\n      `,\n      data() {\n        return {\n          value: ''\n        };\n      }\n    }, true);\n\n    const spyInputFocus = sinon.spy();\n    const spySelectFocus = sinon.spy();\n\n    vm.$refs.select.$on('focus', spySelectFocus);\n    vm.$refs.select.$refs.reference.$on('focus', spyInputFocus);\n\n    const option = vm.$el.querySelectorAll('.el-select-dropdown__item')[0];\n    triggerEvent(option, 'mouseenter');\n    option.click();\n\n    vm.$nextTick(_ => {\n      expect(spyInputFocus.calledOnce).to.be.true;\n      expect(spySelectFocus.calledOnce).not.to.be.true;\n      done();\n    });\n  });\n\n  it('should not open popper when automatic-dropdown not set', done => {\n    vm = getSelectVm();\n\n    vm.$refs.select.$refs.reference.$refs.input.focus();\n\n    vm.$nextTick(_ => {\n      expect(vm.$refs.select.visible).to.be.false;\n      done();\n    });\n  });\n\n  it('should open popper when automatic-dropdown is set', done => {\n    vm = getSelectVm({ automaticDropdown: true });\n\n    vm.$refs.select.$refs.reference.$refs.input.focus();\n\n    vm.$nextTick(_ => {\n      expect(vm.$refs.select.visible).to.be.true;\n      done();\n    });\n  });\n\n  it('focus', done => {\n    vm = createVue({\n      template: `\n        <el-select ref=\"select\"></el-select>\n      `\n    }, true);\n    const spy = sinon.spy();\n\n    vm.$refs.select.$on('focus', spy);\n    vm.$refs.select.focus();\n\n    vm.$nextTick(_ => {\n      expect(spy.calledOnce).to.be.true;\n      done();\n    });\n  });\n\n  it('only emit change on user input', done => {\n    let callCount = 0;\n    vm = createVue({\n      template: `\n        <div>\n          <el-select v-model=\"value\" @change=\"change\" ref=\"select\">\n            <el-option label=\"1\" :value=\"1\" />\n            <el-option label=\"2\" :value=\"2\" />\n            <el-option label=\"3\" :value=\"3\" />\n          </el-select>\n        </div>\n      `,\n      data() {\n        return {\n          value: 1,\n          change: () => ++callCount\n        };\n      }\n    });\n\n    vm.value = 2;\n    setTimeout(() => {\n      expect(callCount).to.equal(0);\n      const options = vm.$el.querySelectorAll('.el-select-dropdown__item');\n      triggerEvent(options[2], 'mouseenter');\n      options[2].click();\n      setTimeout(() => {\n        expect(callCount).to.equal(1);\n        done();\n      }, 10);\n    }, 10);\n  });\n\n  it('render slot `empty`', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-select v-model=\"value\">\n            <div class=\"empty-slot\" slot=\"empty\">EmptySlot</div>\n          </el-select>\n        </div>\n      `,\n      data() {\n        return {\n          value: 1\n        };\n      }\n    });\n\n    expect(vm.$el.querySelector('.empty-slot').innerText).to.be.equal('EmptySlot');\n    done();\n  });\n\n  it('should set placeholder to label of selected option when filterable is true and multiple is false', async() => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-select ref=\"select\" v-model=\"value\" filterable>\n            <el-option label=\"test\" value=\"test\" />\n          </el-select>\n        </div>\n      `,\n      data() {\n        return {\n          value: 'test'\n        };\n      }\n    });\n    vm.$refs.select.$el.click();\n    await waitImmediate();\n    expect(vm.$refs.select.visible).to.be.equal(true);\n    expect(vm.$el.querySelector('.el-input__inner').placeholder).to.be.equal('test');\n    expect(vm.value).to.be.equal('test');\n  });\n\n  it('default value is null or undefined', async() => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-select v-model=\"value\">\n            <el-option\n              v-for=\"item in options\"\n              :label=\"item.label\"\n              :key=\"item.value\"\n              :value=\"item.value\">\n            </el-option>\n          </el-select>\n        </div>\n      `,\n\n      data() {\n        return {\n          options: [{\n            value: '选项1',\n            label: '黄金糕'\n          }, {\n            value: '选项2',\n            label: '双皮奶'\n          }],\n          value: undefined\n        };\n      }\n    }, true);\n\n    vm.value = null;\n    await waitImmediate();\n    expect(vm.$el.querySelector('.el-input__inner').value).to.equal('');\n    vm.value = '选项1';\n    await waitImmediate();\n    expect(vm.$el.querySelector('.el-input__inner').value).to.equal('黄金糕');\n  });\n\n  describe('resetInputHeight', () => {\n    const getSelectComponentVm = (configs) => {\n      vm = getSelectVm(configs || {});\n      return vm.$refs.select;\n    };\n\n    it('should reset height if collapse-tags option is disabled', () => {\n      const select = getSelectComponentVm();\n      sinon.stub(select, '$nextTick');\n      select.resetInputHeight();\n      expect(select.$nextTick.callCount).to.equal(1);\n    });\n\n    it('should not reset height if collapse-tags option is enabled', () => {\n      const select = getSelectComponentVm({ collapseTags: true });\n      sinon.stub(select, '$nextTick');\n      select.resetInputHeight();\n      expect(select.$nextTick.callCount).to.equal(0);\n    });\n\n    it('should reset height if both collapse-tags and filterable are enabled', () => {\n      const select = getSelectComponentVm({ collapseTags: true, filterable: true });\n      sinon.stub(select, '$nextTick');\n      select.resetInputHeight();\n      expect(select.$nextTick.callCount).to.equal(1);\n    });\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/skeleton.spec.js",
    "content": "import Skeleton from 'packages/skeleton';\nimport { createTest, destroyVM, createVue, waitImmediate, wait} from '../util';\n\nconst content = 'content';\n\ndescribe('Skeleton.vue', () => {\n  let vm;\n\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('render test', () => {\n    vm = createTest(Skeleton, true);\n    const el = vm.$el;\n    expect(el.querySelectorAll('.el-skeleton__p').length).to.equal(4);\n    expect(Array.from(el.children[0].classList)).to.contain('el-skeleton');\n\n  });\n\n  it('should render with animation', () => {\n    vm = createTest(Skeleton, {\n      animated: true\n    }, true);\n\n    const el = vm.$el;\n\n    expect(Array.from(el.children[0].classList)).to.contain('is-animated');\n  });\n\n  it('should render x times', async() => {\n    vm = createVue(\n      {\n        template: `\n        <el-skeleton :count=\"count\"></el-skeleton>\n      `,\n        data() {\n          return {\n            count: 1\n          };\n        }\n      },\n      true\n    );\n\n    const wrapper = vm.$el;\n    expect(wrapper.querySelectorAll('.el-skeleton__p').length).to.equal(4);\n\n    vm.count = 2;\n\n    await waitImmediate();\n    expect(wrapper.querySelectorAll('.el-skeleton__p').length).to.equal(8);\n  });\n\n  it('should render x rows', () => {\n    vm = createTest(Skeleton, {\n      rows: 5\n    }, true);\n\n    expect(vm.$el.querySelectorAll('.el-skeleton__p').length).to.equal(5);\n  });\n\n  it('should render default slots', () => {\n    vm = createVue(\n      {\n        template: `\n        <el-skeleton :loading=\"loading\">{{content}}</el-skeleton>\n      `,\n        data() {\n          return {\n            loading: false,\n            content\n          };\n        }\n      }, true);\n    expect(vm.$el.textContent).to.be.equal(content);\n  });\n\n  it('should render template slots', () => {\n    vm = createVue(\n      {\n        template: `\n        <el-skeleton :loading=\"loading\"><template slot=\"template\">{{content}}</template></el-skeleton>\n      `,\n        data() {\n          return {\n            loading: true,\n            content\n          };\n        }\n      }, true);\n    expect(vm.$el.querySelector('.el-skeleton').textContent).to.be.equal(content);\n  });\n\n  it('should throttle rendering', async() => {\n    vm = createTest(Skeleton, {\n      throttle: 500\n    }, true);\n\n    expect((vm).uiLoading).to.be.equal(false);\n    await wait(600);\n\n    expect(vm.uiLoading).to.be.equal(true);\n  });\n\n});\n"
  },
  {
    "path": "test/unit/specs/slider.spec.js",
    "content": "import { createTest, createVue, triggerEvent, destroyVM, waitImmediate } from '../util';\nimport Slider from 'packages/slider';\n\ndescribe('Slider', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', () => {\n    vm = createTest(Slider);\n    expect(vm.value).to.equal(0);\n  });\n\n  it('should not exceed min and max', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-slider v-model=\"value\" :min=\"50\">\n          </el-slider>\n        </div>\n      `,\n\n      data() {\n        return {\n          value: 50\n        };\n      }\n    }, true);\n    setTimeout(() => {\n      vm.value = 40;\n      vm.$nextTick(() => {\n        expect(vm.value).to.equal(50);\n        vm.value = 120;\n        vm.$nextTick(() => {\n          expect(vm.value).to.equal(100);\n          done();\n        });\n      });\n    }, 10);\n  });\n\n  it('show tooltip', () => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-slider v-model=\"value\">\n          </el-slider>\n        </div>\n      `,\n\n      data() {\n        return {\n          value: 0\n        };\n      }\n    }, true);\n    const slider = vm.$children[0].$children[0];\n    slider.handleMouseEnter();\n    expect(slider.$refs.tooltip.showPopper).to.true;\n    slider.handleMouseLeave();\n    expect(slider.$refs.tooltip.showPopper).to.false;\n  });\n\n  it('hide tooltip', () => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-slider v-model=\"value\" :show-tooltip=\"false\">\n          </el-slider>\n        </div>\n      `,\n\n      data() {\n        return {\n          value: 0\n        };\n      }\n    }, true);\n    const slider = vm.$children[0].$children[0];\n    expect(slider.$refs.tooltip.disabled).to.true;\n  });\n\n  it('format tooltip', async() => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-slider ref=\"slider\" v-model=\"value\" :format-tooltip=\"formatTooltip\">\n          </el-slider>\n        </div>\n      `,\n\n      data() {\n        return {\n          value: 0\n        };\n      },\n      methods: {\n        formatTooltip(val) {\n          return '$' + val;\n        }\n      }\n    }, true);\n    const sliderButton = vm.$refs.slider.$children[0];\n    await waitImmediate();\n    expect(sliderButton.formatValue).to.equal('$0');\n  });\n\n  it('drag', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-slider v-model=\"value\" :vertical=\"vertical\"></el-slider>\n        </div>\n      `,\n\n      data() {\n        return {\n          vertical: false,\n          value: 0\n        };\n      }\n    }, true);\n    const slider = vm.$children[0].$children[0];\n    slider.onButtonDown({ clientX: 0, preventDefault() {} });\n    slider.onDragging({ clientX: 100 });\n    slider.onDragEnd();\n    setTimeout(() => {\n      expect(vm.value > 0).to.true;\n      vm.vertical = true;\n      vm.value = 0;\n      vm.$nextTick(() => {\n        expect(vm.value === 0).to.true;\n        slider.onButtonDown({ clientY: 0, preventDefault() {} });\n        slider.onDragging({ clientY: -100 });\n        slider.onDragEnd();\n        setTimeout(() => {\n          expect(vm.value > 0).to.true;\n          done();\n        }, 10);\n      });\n    }, 10);\n  });\n\n  it('accessibility', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-slider v-model=\"value\"></el-slider>\n        </div>\n      `,\n\n      data() {\n        return {\n          value: 0.1\n        };\n      }\n    }, true);\n    const slider = vm.$children[0].$children[0];\n    slider.onRightKeyDown();\n    setTimeout(() => {\n      expect(vm.value).to.equal(1);\n      slider.onLeftKeyDown();\n      setTimeout(() => {\n        expect(vm.value).to.equal(0);\n        done();\n      }, 10);\n    }, 10);\n  });\n\n  it('step', done => {\n    vm = createVue({\n      template: `\n        <div style=\"width: 200px;\">\n          <el-slider v-model=\"value\" :min=\"0\" :max=\"1\" :step=\"0.1\"></el-slider>\n        </div>\n      `,\n\n      data() {\n        return {\n          value: 0\n        };\n      }\n    }, true);\n    const slider = vm.$children[0].$children[0];\n    slider.onButtonDown({ clientX: 0, preventDefault() {} });\n    slider.onDragging({ clientX: 100 });\n    slider.onDragEnd();\n    setTimeout(() => {\n      expect(vm.value > 0.4 && vm.value < 0.6).to.true;\n      done();\n    }, 10);\n  });\n\n  it('click', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-slider v-model=\"value\"></el-slider>\n        </div>\n      `,\n\n      data() {\n        return {\n          value: 0\n        };\n      }\n    }, true);\n    const slider = vm.$children[0];\n    setTimeout(() => {\n      slider.onSliderClick({ clientX: 100 });\n      setTimeout(() => {\n        expect(vm.value > 0).to.true;\n        done();\n      }, 10);\n    }, 10);\n  });\n\n  it('change event', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-slider v-model=\"value\" @change=\"onChange\">\n          </el-slider>\n        </div>\n      `,\n\n      data() {\n        return {\n          data: 0,\n          value: 0\n        };\n      },\n      methods: {\n        onChange(val) {\n          this.data = val;\n        }\n      }\n    }, true);\n    const slider = vm.$children[0];\n    vm.value = 10;\n    setTimeout(() => {\n      expect(vm.data).to.equal(0);\n      slider.onSliderClick({ clientX: 100 });\n      setTimeout(() => {\n        expect(vm.data > 0).to.true;\n        done();\n      }, 10);\n    }, 10);\n  });\n\n  it('disabled', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-slider v-model=\"value\" disabled></el-slider>\n        </div>\n      `,\n\n      data() {\n        return {\n          value: 0\n        };\n      }\n    }, true);\n    const slider = vm.$children[0].$children[0];\n    slider.onButtonDown({ clientX: 0 });\n    slider.onDragging({ clientX: 100 });\n    slider.onDragEnd();\n    setTimeout(() => {\n      expect(vm.value).to.equal(0);\n      done();\n    }, 10);\n  });\n\n  it('show input', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-slider v-model=\"value\" show-input></el-slider>\n        </div>\n      `,\n\n      data() {\n        return {\n          value: 0\n        };\n      }\n    }, true);\n    setTimeout(() => {\n      triggerEvent(vm.$el.querySelector('.el-input-number'), 'keyup');\n      const inputNumber = vm.$el.querySelector('.el-input-number').__vue__;\n      inputNumber.setCurrentValue(40);\n      setTimeout(() => {\n        expect(vm.value).to.equal(40);\n        done();\n      }, 10);\n    }, 10);\n  });\n\n  it('show stops', () => {\n    vm = createTest(Slider, {\n      showStops: true,\n      step: 10\n    }, true);\n    const stops = vm.$el.querySelectorAll('.el-slider__stop');\n    expect(stops.length).to.equal(9);\n  });\n\n  it('vertical mode', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-slider vertical v-model=\"value\" height=\"200px\"></el-slider>\n        </div>\n      `,\n\n      data() {\n        return {\n          value: 0\n        };\n      }\n    }, true);\n    const slider = vm.$children[0];\n    setTimeout(() => {\n      slider.onSliderClick({ clientY: 100 });\n      setTimeout(() => {\n        expect(vm.value > 0).to.true;\n        done();\n      }, 10);\n    }, 10);\n  });\n\n  describe('range', () => {\n    it('basic ranged slider', () => {\n      vm = createVue({\n        template: `\n        <div>\n          <el-slider v-model=\"value\" range></el-slider>\n        </div>\n      `,\n\n        data() {\n          return {\n            value: [10, 20]\n          };\n        }\n      }, true);\n      const buttons = vm.$children[0].$children;\n      expect(buttons.length).to.equal(2);\n    });\n\n    it('should not exceed min and max', done => {\n      vm = createVue({\n        template: `\n        <div>\n          <el-slider v-model=\"value\" range :min=\"50\">\n          </el-slider>\n        </div>\n      `,\n\n        data() {\n          return {\n            value: [50, 60]\n          };\n        }\n      }, true);\n      setTimeout(() => {\n        vm.value = [40, 60];\n        setTimeout(() => {\n          expect(vm.value).to.deep.equal([50, 60]);\n          vm.value = [50, 120];\n          setTimeout(() => {\n            expect(vm.value).to.deep.equal([50, 100]);\n            done();\n          }, 10);\n        }, 10);\n      }, 10);\n    });\n\n    it('click', done => {\n      vm = createVue({\n        template: `\n        <div style=\"width: 200px;\">\n          <el-slider range v-model=\"value\"></el-slider>\n        </div>\n      `,\n\n        data() {\n          return {\n            value: [0, 100]\n          };\n        }\n      }, true);\n      const slider = vm.$children[0];\n      setTimeout(() => {\n        slider.onSliderClick({ clientX: 100 });\n        setTimeout(() => {\n          expect(vm.value[0] > 0).to.true;\n          expect(vm.value[1]).to.equal(100);\n          done();\n        }, 10);\n      }, 10);\n    });\n\n    it('responsive to dynamic min and max', done => {\n      vm = createVue({\n        template: `\n        <div>\n          <el-slider v-model=\"value\" range :min=\"min\" :max=\"max\">\n          </el-slider>\n        </div>\n      `,\n\n        data() {\n          return {\n            min: 0,\n            max: 100,\n            value: [50, 80]\n          };\n        }\n      }, true);\n      setTimeout(() => {\n        vm.min = 60;\n        setTimeout(() => {\n          expect(vm.value).to.deep.equal([60, 80]);\n          vm.min = 30;\n          vm.max = 40;\n          setTimeout(() => {\n            expect(vm.value).to.deep.equal([40, 40]);\n            done();\n          }, 10);\n        }, 10);\n      }, 10);\n    });\n\n    it('show stops', done => {\n      vm = createVue({\n        template: `\n        <div>\n          <el-slider\n            v-model=\"value\"\n            range\n            :step=\"10\"\n            show-stops></el-slider>\n        </div>\n      `,\n\n        data() {\n          return {\n            value: [30, 60]\n          };\n        }\n      }, true);\n      setTimeout(() => {\n        const stops = vm.$el.querySelectorAll('.el-slider__stop');\n        expect(stops.length).to.equal(5);\n        done();\n      }, 10);\n    });\n\n    it('marks', async() => {\n      vm = createVue({\n        template: `\n        <div>\n          <el-slider\n            v-model=\"value\"\n            range\n            :step=\"10\"\n            :marks=\"marks\"\n            :min=\"20\"\n            show-stops></el-slider>\n        </div>\n      `,\n\n        data() {\n          return {\n            value: [30, 60],\n            marks: {\n              0: '0°C',\n              8: '8°C',\n              37: '37°C',\n              50: {\n                style: {\n                  color: '#f50'\n                },\n                label: <strong>50°C</strong>\n              }\n            }\n          };\n        }\n      }, true);\n\n      waitImmediate();\n      const stops = vm.$el.querySelectorAll('.el-slider__marks-stop.el-slider__stop');\n      const marks = vm.$el.querySelectorAll('.el-slider__marks .el-slider__marks-text');\n      expect(marks.length).to.equal(2);\n      expect(stops.length).to.equal(2);\n    });\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/statistic.spec.js",
    "content": "import { createTest, destroyVM } from '../util';\nimport Statistic from 'packages/statistic';\n\ndescribe('Statistic', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', () => {\n    vm = createTest(Statistic, true);\n    expect(vm.$el).to.exist;\n  });\n});\n\n"
  },
  {
    "path": "test/unit/specs/steps.spec.js",
    "content": "import { createVue, destroyVM, waitImmediate } from '../util';\n\ndescribe('Steps', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', () => {\n    vm = createVue(`\n      <el-steps>\n        <el-step title=\"step1\"></el-step>\n        <el-step title=\"step2\"></el-step>\n        <el-step title=\"step3\"></el-step>\n      </el-steps>\n    `);\n\n    expect(vm.$el.querySelectorAll('.el-step')).to.length(3);\n  });\n\n  it('space', async() => {\n    vm = createVue(`\n      <el-steps>\n        <el-step title=\"step1\"></el-step>\n        <el-step title=\"step2\"></el-step>\n        <el-step title=\"step3\"></el-step>\n      </el-steps>\n    `, true);\n\n    const vm2 = createVue(`\n      <el-steps :space=\"100\">\n        <el-step title=\"step1\"></el-step>\n        <el-step title=\"step2\"></el-step>\n        <el-step title=\"step3\"></el-step>\n        <el-step title=\"step4\"></el-step>\n      </el-steps>\n    `, true);\n\n    await waitImmediate();\n    const stepElm = vm.$el.querySelector('.el-step');\n    const stepElm2 = vm2.$el.querySelector('.el-step');\n    expect(getComputedStyle(stepElm).flexBasis).to.equal('50%');\n    expect(getComputedStyle(stepElm2).flexBasis).to.equal('100px');\n  });\n\n  it('processStatus', done => {\n    vm = createVue(`\n      <el-steps :active=\"1\" process-status=\"error\">\n        <el-step title=\"step1\"></el-step>\n        <el-step title=\"step2\"></el-step>\n        <el-step title=\"step3\"></el-step>\n      </el-steps>\n    `);\n\n    vm.$nextTick(_ => {\n      expect(vm.$el.querySelectorAll('.el-step__head.is-error')).to.length(1);\n      done();\n    });\n  });\n\n  it('update processStatus', done => {\n    vm = createVue({\n      template: `\n        <el-steps :active=\"1\" :process-status=\"processStatus\">\n          <el-step title=\"abc\"></el-step>\n          <el-step title=\"abc2\"></el-step>\n        </el-steps>\n      `,\n      data() {\n        return { processStatus: 'error' };\n      }\n    });\n\n    vm.$nextTick(_ => {\n      expect(vm.$el.querySelectorAll('.el-step__head.is-error')).to.length(1);\n      vm.processStatus = 'process';\n      vm.$nextTick(_ => {\n        expect(vm.$el.querySelectorAll('.el-step__head.is-process')).to.length(1);\n        done();\n      });\n    });\n  });\n\n  it('finishStatus', done => {\n    vm = createVue(`\n      <el-steps :active=\"1\" finish-status=\"error\">\n        <el-step title=\"abc\"></el-step>\n        <el-step title=\"abc2\"></el-step>\n      </el-steps>\n    `);\n\n    vm.$nextTick(_ => {\n      expect(vm.$el.querySelectorAll('.el-step__head.is-error')).to.length(1);\n      done();\n    });\n  });\n\n  it('active', done => {\n    vm = createVue({\n      template: `\n        <el-steps :active=\"active\" finish-status=\"error\">\n          <el-step title=\"abc\"></el-step>\n          <el-step title=\"abc2\"></el-step>\n        </el-steps>\n      `,\n\n      data() {\n        return { active: 0 };\n      }\n    });\n\n    vm.$nextTick(_ => {\n      expect(vm.$el.querySelectorAll('.el-step__head.is-error')).to.length(0);\n      vm.active = 2;\n      vm.$nextTick(_ => {\n        expect(vm.$el.querySelectorAll('.el-step__head.is-error')).to.length(2);\n        done();\n      });\n    });\n  });\n\n  it('create vertical', () => {\n    vm = createVue(`\n      <el-steps direction=\"vertical\">\n        <el-step title=\"aaa\"></el-step>\n        <el-step title=\"bbb\"></el-step>\n      </el-steps>\n    `);\n\n    expect(vm.$el.querySelector('.is-vertical')).to.exist;\n  });\n\n  it('vertical:height', async() => {\n    vm = createVue(`\n      <el-steps direction=\"vertical\" :space=\"200\">\n        <el-step title=\"aaa\"></el-step>\n        <el-step title=\"bbb\"></el-step>\n      </el-steps>\n    `, true);\n\n    await waitImmediate();\n    const stepElm = vm.$el.querySelector('.el-step');\n    expect(getComputedStyle(stepElm).flexBasis).to.equal('200px');\n  });\n\n  it('step:status=error', done => {\n    vm = createVue(`\n      <el-steps :active=\"2\" process-status=\"process\" finish-status=\"success\" direction=\"horizontal\">\n        <el-step title=\"step1\"></el-step>\n        <el-step title=\"step2\" status=\"error\"></el-step>\n        <el-step title=\"step3\"></el-step>\n      </el-steps>\n    `);\n\n    vm.$nextTick(_ => {\n      const errorLine = vm.$el.querySelector('.el-step:nth-child(2) .el-step__line-inner');\n      expect(errorLine.getBoundingClientRect().width).to.equal(0);\n      const nextStep = vm.$el.querySelector('.el-step:nth-child(3) .el-step__head');\n      expect(nextStep.classList.contains('is-wait')).to.equal(true);\n      done();\n    });\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/switch.spec.js",
    "content": "import { createTest, createVue, destroyVM } from '../util';\nimport Switch from 'packages/switch';\nimport Vue from 'vue';\n\ndescribe('Switch', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', () => {\n    vm = createTest(Switch, {\n      activeText: 'on',\n      inactiveText: 'off',\n      activeColor: '#0f0',\n      inactiveColor: '#f00',\n      width: 100\n    });\n\n    const core = vm.$el.querySelector('.el-switch__core');\n    expect(core.style.backgroundColor).to.equal('rgb(255, 0, 0)');\n    expect(core.style.width).to.equal('100px');\n    expect(vm.$el.querySelector('.el-switch__label--left').querySelector('span').textContent).to.equal('off');\n  });\n\n  it('switch with icons', () => {\n    vm = createTest(Switch, {\n      activeIconClass: 'el-icon-check',\n      inactiveIconClass: 'el-icon-close'\n    });\n\n    const icon = vm.$el.querySelector('.el-switch__label--left').querySelector('i');\n    expect(icon.classList.contains('el-icon-close')).to.true;\n  });\n\n  it('value correctly update', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-switch\n            v-model=\"value\"\n            activeColor=\"#0f0\"\n            inactiveColor=\"#f00\">\n          </el-switch>\n        </div>\n      `,\n\n      data() {\n        return {\n          value: true\n        };\n      }\n    }, true);\n\n    const core = vm.$el.querySelector('.el-switch__core');\n    expect(core.style.backgroundColor).to.equal('rgb(0, 255, 0)');\n    core.click();\n    setTimeout(() => {\n      expect(core.style.backgroundColor).to.equal('rgb(255, 0, 0)');\n      expect(vm.value).to.equal(false);\n      core.click();\n      setTimeout(() => {\n        expect(vm.value).to.equal(true);\n        done();\n      }, 10);\n    }, 10);\n  });\n\n  it('change event', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-switch\n            v-model=\"value\"\n            @change=\"handleChange\">  \n          </el-switch>\n        </div>\n      `,\n      mounted() {\n        setTimeout(() => {\n          this.value = false;\n        }, 10);\n      },\n      methods: {\n        handleChange(val) {\n          this.target = val;\n        }\n      },\n      data() {\n        return {\n          target: 1,\n          value: true\n        };\n      }\n    }, true);\n\n    setTimeout(() => {\n      const core = vm.$el.querySelector('.el-switch__core');\n      expect(vm.target).to.equal(1);\n      core.click();\n      setTimeout(() => {\n        expect(vm.target).to.equal(true);\n        done();\n      }, 10);\n    }, 50);\n  });\n\n  it('disabled switch should not respond to user click', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-switch disabled v-model=\"value\"></el-switch>\n        </div>\n      `,\n\n      data() {\n        return {\n          value: true\n        };\n      }\n    }, true);\n\n    vm.$el.querySelector('.el-switch__core').click();\n    Vue.nextTick(() => {\n      expect(vm.value).to.true;\n      done();\n    });\n  });\n\n  it('expand switch value', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-switch v-model=\"value\" :active-value=\"onValue\" :inactive-value=\"offValue\"></el-switch>\n        </div>\n      `,\n      data() {\n        return {\n          value: '100',\n          onValue: '100',\n          offValue: '0'\n        };\n      }\n    }, true);\n\n    const core = vm.$el.querySelector('.el-switch__core');\n    core.click();\n    setTimeout(() => {\n      expect(vm.value).to.equal('0');\n      core.click();\n      setTimeout(() => {\n        expect(vm.value).to.equal('100');\n        done();\n      }, 10);\n    }, 10);\n  });\n\n  it('value is the single source of truth', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-switch :value=\"true\"></el-switch>\n        </div>\n      `\n    }, true);\n\n    const component = vm.$children[0];\n    const input = vm.$el.querySelector('input');\n    const core = vm.$el.querySelector('.el-switch__core');\n    core.click();\n    setTimeout(() => {\n      expect(component.checked).to.equal(true);\n      expect(component.$el.classList.contains('is-checked')).to.equal(true);\n      expect(input.checked).to.equal(true);\n      core.click();\n      setTimeout(() => {\n        expect(component.checked).to.equal(true);\n        expect(component.$el.classList.contains('is-checked')).to.equal(true);\n        expect(input.checked).to.equal(true);\n        done();\n      }, 10);\n    }, 10);\n  });\n\n  it('sets checkbox value', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-switch v-model=\"value\"></el-switch>\n        </div>\n      `,\n      data() {\n        return {\n          value: false\n        };\n      }\n    }, true);\n\n    vm.value = true;\n    setTimeout(() => {\n      expect(vm.$el.querySelector('input').checked).to.equal(true);\n      vm.value = false;\n      setTimeout(() => {\n        expect(vm.$el.querySelector('input').checked).to.equal(false);\n        done();\n      }, 10);\n    }, 10);\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/table.spec.js",
    "content": "import { createVue, triggerEvent, destroyVM, waitImmediate, wait } from '../util';\n\nconst DELAY = 10;\nconst testDataArr = [];\nconst toArray = function(obj) {\n  return [].slice.call(obj);\n};\n\nconst getTestData = function() {\n  return [\n    { id: 1, name: 'Toy Story', release: '1995-11-22', director: 'John Lasseter', runtime: 80 },\n    { id: 2, name: 'A Bug\\'s Life', release: '1998-11-25', director: 'John Lasseter', runtime: 95 },\n    { id: 3, name: 'Toy Story 2', release: '1999-11-24', director: 'John Lasseter', runtime: 92 },\n    { id: 4, name: 'Monsters, Inc.', release: '2001-11-2', director: 'Peter Docter', runtime: 92 },\n    { id: 5, name: 'Finding Nemo', release: '2003-5-30', director: 'Andrew Stanton', runtime: 100 }\n  ];\n};\n\ngetTestData().forEach(cur => {\n  Object.keys(cur).forEach(prop => {\n    testDataArr.push(cur[prop].toString());\n  });\n});\n\ndescribe('Table', () => {\n  describe('rendering data is correct', () => {\n    const vm = createVue({\n      template: `\n        <el-table :data=\"testData\">\n          <el-table-column prop=\"id\" />\n          <el-table-column prop=\"name\" label=\"片名\" />\n          <el-table-column prop=\"release\" label=\"发行日期\" />\n          <el-table-column prop=\"director\" label=\"导演\" />\n          <el-table-column prop=\"runtime\" label=\"时长（分）\" />\n        </el-table>\n      `,\n\n      created() {\n        this.testData = getTestData();\n      }\n    });\n\n    it('head', done => {\n      setTimeout(_ => {\n        const ths = toArray(vm.$el.querySelectorAll('thead th'));\n\n        expect(ths.map(node => node.textContent).filter(o => o))\n          .to.eql(['片名', '发行日期', '导演', '时长（分）']);\n        done();\n      }, DELAY);\n    });\n\n    it('row length', () => {\n      expect(vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr')).to.length(getTestData().length);\n    });\n\n    it('row data', () => {\n      const cells = toArray(vm.$el.querySelectorAll('td .cell'))\n        .map(node => node.textContent);\n\n      expect(cells).to.eql(testDataArr);\n      destroyVM(vm);\n    });\n  });\n\n  describe('attributes', () => {\n    const createTable = function(props, opts) {\n      return createVue(Object.assign({\n        template: `\n          <el-table :data=\"testData\" ${props}>\n            <el-table-column prop=\"name\" label=\"片名\" />\n            <el-table-column prop=\"release\" label=\"发行日期\" />\n            <el-table-column prop=\"director\" label=\"导演\" />\n            <el-table-column prop=\"runtime\" label=\"时长（分）\" />\n          </el-table>\n        `,\n\n        created() {\n          this.testData = getTestData();\n        }\n      }, opts));\n    };\n\n    it('height', done => {\n      const vm = createTable('height=\"134\"');\n      setTimeout(_ => {\n        expect(vm.$el.style.height).to.equal('134px');\n        destroyVM(vm);\n        done();\n      }, DELAY);\n    });\n\n    it('height as string', done => {\n      const vm = createTable('height=\"100px\"');\n      setTimeout(_ => {\n        expect(vm.$el.style.height).to.equal('100px');\n        destroyVM(vm);\n        done();\n      }, DELAY);\n    });\n\n    it('maxHeight', done => {\n      const vm = createTable('max-height=\"134\"');\n      setTimeout(_ => {\n        expect(vm.$el.style.maxHeight).to.equal('134px');\n        destroyVM(vm);\n        done();\n      }, DELAY);\n    });\n\n    it('stripe', done => {\n      const vm = createTable('stripe');\n      setTimeout(_ => {\n        expect(vm.$el.classList.contains('el-table--striped')).to.true;\n        destroyVM(vm);\n        done();\n      }, DELAY);\n    });\n\n    it('border', done => {\n      const vm = createTable('border');\n      setTimeout(_ => {\n        expect(vm.$el.classList.contains('el-table--border')).to.true;\n        destroyVM(vm);\n        done();\n      }, DELAY);\n    });\n\n    it('fit', done => {\n      const vm = createTable(':fit=\"false\"');\n      setTimeout(_ => {\n        expect(vm.$el.classList.contains('el-table--fit')).to.false;\n        destroyVM(vm);\n        done();\n      }, DELAY);\n    });\n\n    it('show-header', done => {\n      const vm = createTable(':show-header=\"false\"');\n      setTimeout(_ => {\n        expect(vm.$el.querySelectorAll('.el-table__header-wrapper').length).to.equal(0);\n        destroyVM(vm);\n        done();\n      }, DELAY);\n    });\n\n    it('tableRowClassName', done => {\n      const vm = createTable(':row-class-name=\"tableRowClassName\"', {\n        methods: {\n          tableRowClassName({row, rowIndex}) {\n            if (rowIndex === 1) {\n              return 'info-row';\n            } else if (rowIndex === 3) {\n              return 'positive-row';\n            }\n\n            return '';\n          }\n        }\n      });\n\n      setTimeout(_ => {\n        expect(vm.$el.querySelectorAll('.info-row')).to.length(1);\n        expect(vm.$el.querySelectorAll('.positive-row')).to.length(1);\n        destroyVM(vm);\n        done();\n      }, DELAY);\n    });\n\n    it('tableRowStyle[Object]', done => {\n      const vm = createTable(':row-style=\"{ height: \\'60px\\' }\"', {});\n\n      setTimeout(_ => {\n        expect(vm.$el.querySelector('.el-table__body tr').style.height).to.equal('60px');\n        destroyVM(vm);\n        done();\n      }, DELAY);\n    });\n\n    it('tableRowStyle[Function]', done => {\n      const vm = createTable(':row-style=\"tableRowStyle\"', {\n        methods: {\n          tableRowStyle({row, rowIndex}) {\n            if (rowIndex === 1) {\n              return { height: '60px', display: 'none' };\n            }\n\n            return null;\n          }\n        }\n      });\n\n      setTimeout(_ => {\n        let child1 = vm.$el.querySelector('.el-table__body tr:nth-child(1)');\n        let child2 = vm.$el.querySelector('.el-table__body tr:nth-child(2)');\n        expect(child1.style.height).to.equal('');\n        expect(child1.style.display).to.equal('');\n        expect(child2.style.height).to.equal('60px');\n        expect(child2.style.display).to.equal('none');\n        destroyVM(vm);\n        done();\n      }, DELAY);\n    });\n\n    it('current-row-key', done => {\n      const vm = createVue({\n        template: `\n        <el-table :data=\"testData\" row-key=\"id\" highlight-current-row :current-row-key=\"currentRowKey\">\n          <el-table-column prop=\"name\" label=\"片名\" />\n          <el-table-column prop=\"release\" label=\"发行日期\" />\n          <el-table-column prop=\"director\" label=\"导演\" />\n          <el-table-column prop=\"runtime\" label=\"时长（分）\" />\n        </el-table>\n      `,\n\n        created() {\n          this.testData = getTestData();\n        },\n\n        data() {\n          return { currentRowKey: null };\n        }\n      }, true);\n      setTimeout(_ => {\n        vm.currentRowKey = 1;\n        const tr = vm.$el.querySelector('.el-table__body-wrapper tbody tr');\n        setTimeout(_ => {\n          expect(tr.classList.contains('current-row')).to.be.true;\n          vm.currentRowKey = 2;\n\n          const rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr');\n          setTimeout(_ => {\n            expect(tr.classList.contains('current-row')).to.be.false;\n            expect(rows[1].classList.contains('current-row')).to.be.true;\n            destroyVM(vm);\n            done();\n          }, DELAY);\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('select-on-indeterminate', done => {\n      const vm = createVue({\n        template: `\n          <el-table :data=\"testData\" @selection-change=\"change\" :select-on-indeterminate=\"false\" ref=\"table\">\n            <el-table-column type=\"selection\" />\n            <el-table-column prop=\"name\" label=\"name\" />\n            <el-table-column prop=\"release\" label=\"release\" />\n            <el-table-column prop=\"director\" label=\"director\" />\n            <el-table-column prop=\"runtime\" label=\"runtime\" />\n          </el-table>\n        `,\n\n        created() {\n          this.testData = getTestData();\n        },\n\n        mounted() {\n          this.$refs.table.toggleRowSelection(this.testData[0]);\n        },\n\n        data() {\n          return { selected: [] };\n        },\n\n        methods: {\n          change(val) {\n            this.selected = val;\n          }\n        }\n      }, true);\n\n      setTimeout(_ => {\n        vm.$el.querySelector('.el-checkbox').click();\n        setTimeout(_ => {\n          expect(vm.selected).to.length(0);\n          destroyVM(vm);\n          done();\n        }, DELAY);\n      }, DELAY);\n    });\n  });\n\n  describe('filter', () => {\n    let vm;\n\n    beforeEach(done => {\n      vm = createVue({\n        template: `\n          <el-table ref=\"table\" :data=\"testData\" @filter-change=\"handleFilterChange\">\n            <el-table-column prop=\"name\" label=\"片名\" />\n            <el-table-column prop=\"release\" label=\"发行日期\" />\n            <el-table-column\n              prop=\"director\"\n              column-key=\"director\"\n              :filters=\"[\n                { text: 'John Lasseter', value: 'John Lasseter' },\n                { text: 'Peter Docter', value: 'Peter Docter' },\n                { text: 'Andrew Stanton', value: 'Andrew Stanton' }\n              ]\"\n              :filter-method=\"filterMethod\"\n              label=\"导演\" />\n            <el-table-column prop=\"runtime\" label=\"时长（分）\" />\n          </el-table>\n        `,\n\n        created() {\n          this.testData = getTestData();\n        },\n\n        methods: {\n          filterMethod(value, row) {\n            return value === row.director;\n          },\n          handleFilterChange(filters) {\n            this.filters = filters;\n          }\n        }\n      }, true);\n\n      setTimeout(done, DELAY);\n    });\n\n    afterEach(() => destroyVM(vm));\n\n    it('render', () => {\n      expect(vm.$el.querySelector('.el-table__column-filter-trigger')).to.exist;\n    });\n\n    it('click dropdown', done => {\n      const btn = vm.$el.querySelector('.el-table__column-filter-trigger');\n      triggerEvent(btn, 'click', true, false);\n      setTimeout(_ => {\n        const filter = document.body.querySelector('.el-table-filter');\n        expect(filter).to.exist;\n        document.body.removeChild(filter);\n        done();\n      }, 100);\n    });\n\n    it('click filter', done => {\n      const btn = vm.$el.querySelector('.el-table__column-filter-trigger');\n\n      triggerEvent(btn, 'click', true, false);\n      setTimeout(_ => {\n        const filter = document.body.querySelector('.el-table-filter');\n\n        // John Lasseter\n        triggerEvent(filter.querySelector('.el-checkbox'), 'click', true, false);\n        // confrim button\n        setTimeout(_ => {\n          triggerEvent(filter.querySelector('.el-table-filter__bottom button'), 'click', true, false);\n          setTimeout(_ => {\n            expect(vm.filters['director']).to.be.eql(['John Lasseter']);\n            expect(vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr')).to.length(3);\n            document.body.removeChild(filter);\n            done();\n          }, DELAY);\n        }, 100);\n      }, 100);\n    });\n\n    it('click reset', done => {\n      const btn = vm.$el.querySelector('.el-table__column-filter-trigger');\n\n      triggerEvent(btn, 'click', true, false);\n      setTimeout(_ => {\n        const filter = document.body.querySelector('.el-table-filter');\n\n        // John Lasseter\n        triggerEvent(filter.querySelector('.el-checkbox'), 'click', true, false);\n        setTimeout(_ => {\n          // reset button\n          triggerEvent(filter.querySelectorAll('.el-table-filter__bottom button')[1], 'click', true, false);\n          setTimeout(_ => {\n            expect(vm.filters['director']).to.be.eql([]);\n            expect(filter.querySelector('.el-table-filter__bottom button').classList.contains('is-disabled')).to.true;\n            document.body.removeChild(filter);\n            destroyVM(vm);\n            done();\n          }, DELAY);\n        }, 100);\n      }, 100);\n    });\n  });\n\n  describe('events', () => {\n    const createTable = function(prop = '', opts) {\n      return createVue({\n        template: `\n          <el-table :data=\"testData\" @${prop}=\"handleEvent\">\n            <el-table-column type=\"selection\" />\n            <el-table-column prop=\"name\" />\n            <el-table-column prop=\"release\" />\n            <el-table-column prop=\"director\" />\n            <el-table-column prop=\"runtime\"/>\n          </el-table>\n        `,\n\n        methods: {\n          handleEvent(...args) {\n            this.result = args;\n          }\n        },\n\n        created() {\n          this.testData = getTestData();\n        },\n\n        data() {\n          return { result: '', testData: this.testData };\n        }\n      }, true);\n    };\n\n    it('select', done => {\n      const vm = createTable('select');\n\n      setTimeout(_ => {\n        vm.$el.querySelectorAll('.el-checkbox')[1].click();\n        expect(vm.result).to.length(2);\n        expect(vm.result[1]).to.have.property('name').to.equal(getTestData()[0].name);\n        destroyVM(vm);\n        done();\n      }, DELAY);\n    });\n\n    it('select-all', done => {\n      const vm = createTable('select-all');\n\n      setTimeout(_ => {\n        vm.$el.querySelector('.el-checkbox').click();\n        setTimeout(_ => {\n          expect(vm.result).to.length(1);\n          expect(vm.result[0]).to.length(getTestData().length);\n          destroyVM(vm);\n          done();\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('selection-change', done => {\n      const vm = createTable('selection-change');\n      setTimeout(_ => {\n        vm.$el.querySelectorAll('.el-checkbox')[1].click();\n        expect(vm.result).to.length(1);\n        destroyVM(vm);\n        done();\n      }, DELAY);\n    });\n\n    it('cell-mouse-enter', done => {\n      const vm = createTable('cell-mouse-enter');\n\n      setTimeout(_ => {\n        const cell = vm.$el.querySelectorAll('.el-table__body .cell')[2]; // first row\n        triggerEvent(cell.parentNode, 'mouseenter');\n        expect(vm.result).to.length(4); // row, column, cell, event\n        expect(vm.result[0]).to.have.property('name').to.equal(getTestData()[0].name);\n        destroyVM(vm);\n        done();\n      }, DELAY);\n    });\n\n    it('cell-mouse-leave', done => {\n      const vm = createTable('cell-mouse-leave');\n\n      setTimeout(_ => {\n        const cell = vm.$el.querySelectorAll('.el-table__body .cell')[7]; // second row\n        const cell2 = vm.$el.querySelectorAll('.el-table__body .cell')[2]; // first row\n\n        triggerEvent(cell2.parentNode, 'mouseenter');\n        triggerEvent(cell.parentNode, 'mouseleave');\n        expect(vm.result).to.length(4); // row, column, cell, event\n        expect(vm.result[0]).to.have.property('name').to.equal(getTestData()[0].name);\n        destroyVM(vm);\n        done();\n      }, DELAY);\n    });\n\n    it('cell-click', done => {\n      const vm = createTable('cell-click');\n\n      setTimeout(_ => {\n        const cell = vm.$el.querySelectorAll('.el-table__body .cell')[2]; // first row\n\n        cell.parentNode.click();\n        expect(vm.result).to.length(4); // row, column, cell, event\n        expect(vm.result[0]).to.have.property('name').to.equal(getTestData()[0].name);\n        destroyVM(vm);\n        done();\n      }, DELAY);\n    });\n\n    it('row-click', done => {\n      const vm = createTable('row-click');\n\n      setTimeout(_ => {\n        const cell = vm.$el.querySelectorAll('.el-table__body .cell')[2]; // first row\n\n        triggerEvent(cell.parentNode.parentNode, 'click');\n        expect(vm.result).to.length(3); // row, event, column\n        expect(vm.result[0]).to.have.property('name').to.equal(getTestData()[0].name);\n        destroyVM(vm);\n        done();\n      }, DELAY);\n    });\n\n    it('row-dblclick', done => {\n      const vm = createTable('row-dblclick');\n\n      setTimeout(_ => {\n        const cell = vm.$el.querySelectorAll('.el-table__body .cell')[2]; // first row\n\n        triggerEvent(cell.parentNode.parentNode, 'dblclick');\n        expect(vm.result).to.length(3); // row, event, column\n        expect(vm.result[0]).to.have.property('name').to.equal(getTestData()[0].name);\n        destroyVM(vm);\n        done();\n      }, DELAY);\n    });\n\n    it('current-change', done => {\n      const vm = createTable('current-change');\n\n      setTimeout(_ => {\n        const cell = vm.$el.querySelectorAll('.el-table__body .cell')[2]; // first row\n\n        triggerEvent(cell.parentNode.parentNode, 'click');\n        expect(vm.result).to.length(2); // currentRow, oldCurrentRow\n        expect(vm.result[0]).to.have.property('name').to.equal(getTestData()[0].name);\n        expect(vm.result[1]).to.equal(null);\n\n        // clear data => current-change should fire again.\n        const oldRow = vm.result[0];\n        vm.testData = [];\n\n        setTimeout(() => {\n          expect(vm.result).to.length(2); // currentRow, oldCurrentRow\n          expect(vm.result[0]).to.equal(null);\n          expect(vm.result[1]).to.equal(oldRow);\n\n          destroyVM(vm);\n          done();\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('header-click', done => {\n      const vm = createTable('header-click');\n\n      setTimeout(_ => {\n        const cell = vm.$el.querySelectorAll('.el-table__header th')[1]; // header[prop='name']\n\n        triggerEvent(cell, 'click');\n        expect(vm.result).to.length(2); // column, event\n        expect(vm.result[0]).to.have.property('property').to.equal('name');\n        destroyVM(vm);\n        done();\n      }, DELAY);\n    });\n\n    it('sort-change', async() => {\n      const vm = createVue({\n        template: `\n          <el-table ref=\"table\" :data=\"testData\" :default-sort = \"{prop: 'runtime', order: 'ascending'}\">\n            <el-table-column prop=\"name\" />\n            <el-table-column prop=\"release\" />\n            <el-table-column prop=\"director\" />\n            <el-table-column prop=\"runtime\" sortable/>\n          </el-table>\n        `,\n\n        data() {\n          return { testData: getTestData() };\n        }\n      });\n\n      const spy = sinon.spy();\n      vm.$refs.table.$on('sort-change', spy);\n      await waitImmediate();\n      expect(spy.notCalled).to.be.true;// not emit when mounted\n\n      const elm = vm.$el.querySelector('.caret-wrapper');\n      elm.click();\n      await waitImmediate();\n      expect(spy.calledOnce).to.be.true;\n      destroyVM(vm);\n    });\n  });\n\n  describe('column attributes', () => {\n    const createTable = function(props1, props2, props3, props4, opts, tableProps) {\n      return createVue(Object.assign({\n        template: `\n          <el-table :data=\"testData\" ${tableProps || ''}>\n            <el-table-column prop=\"name\" ${props1 || ''} />\n            <el-table-column prop=\"release\" ${props2 || ''} />\n            <el-table-column prop=\"director\" ${props3 || ''} />\n            <el-table-column prop=\"runtime\" ${props4 || ''} />\n          </el-table>\n        `,\n\n        created() {\n          this.testData = getTestData();\n        }\n      }, opts));\n    };\n\n    it('label', done => {\n      const vm = createTable('label=\"啊哈哈哈\"', 'label=\"啊啦啦啦\"');\n      setTimeout(_ => {\n        const ths = toArray(vm.$el.querySelectorAll('thead th'))\n          .map(node => node.textContent).filter(o => o);\n\n        expect(ths).to.eql(['啊哈哈哈', '啊啦啦啦']);\n        destroyVM(vm);\n        done();\n      }, DELAY);\n    });\n\n    it('width', done => {\n      const vm = createTable('width=\"123px\"', ':width=\"102\"', 'width=\"39\"');\n      setTimeout(_ => {\n        const ths = toArray(vm.$el.querySelectorAll('.el-table__header-wrapper col'))\n          .map(node => node.width).filter(o => o);\n\n        expect(ths).to.include('123').include('102').include('39');\n        destroyVM(vm);\n        done();\n      }, DELAY);\n    });\n\n    it('fixed', done => {\n      const vm = createTable(\n        'fixed label=\"test1\"',\n        'fixed=\"right\" label=\"test2\"',\n        'fixed=\"left\" label=\"test3\"');\n      setTimeout(_ => {\n        expect(toArray(vm.$el.querySelectorAll('.el-table__fixed th:not(.is-hidden)'))\n          .map(node => node.textContent))\n          .to.eql(['test1', 'test3']);\n\n        expect(toArray(vm.$el.querySelectorAll('.el-table__fixed-right th:not(.is-hidden)'))\n          .map(node => node.textContent))\n          .to.eql(['test2']);\n        expect(vm.$el.querySelector('.el-table__body-wrapper').style.height).to.equal('');\n        destroyVM(vm);\n        done();\n      }, DELAY);\n    });\n\n    it('resizable', done => {\n      const vm = createTable(\n        'resizable',\n        ':resizable=\"false\"',\n        '',\n        '',\n        {},\n        'border');\n\n      setTimeout(_ => {\n        const firstCol = vm.$el.querySelector('thead th');\n        triggerEvent(firstCol, 'mousemove');\n        triggerEvent(firstCol, 'mousedown');\n        destroyVM(vm);\n        done();\n      }, DELAY);\n    });\n\n    it('formatter', done => {\n      const vm = createTable(\n        ':formatter=\"renderCell\"', '', '', '', {\n          methods: {\n            renderCell(row, column) {\n              return `[${row.name}]`;\n            }\n          }\n        });\n\n      setTimeout(_ => {\n        const cells = toArray(vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr td:first-child'));\n        expect(cells.map(n => n.textContent)).to.eql(getTestData().map(o => `[${o.name}]`));\n        destroyVM(vm);\n        done();\n      }, DELAY);\n    });\n\n    it('show-overflow-tooltip', done => {\n      const vm = createTable('show-overflow-tooltip');\n      setTimeout(_ => {\n        expect(vm.$el.querySelectorAll('.el-tooltip')).to.length(5);\n        destroyVM(vm);\n        done();\n      }, DELAY);\n    });\n\n    it('show-tooltip-when-overflow', done => { // old version prop name\n      const vm = createTable('show-tooltip-when-overflow');\n      setTimeout(_ => {\n        expect(vm.$el.querySelectorAll('.el-tooltip')).to.length(5);\n        destroyVM(vm);\n        done();\n      }, DELAY);\n    });\n\n    it('render-header', done => {\n      const vm = createVue({\n        template: `\n          <el-table :data=\"testData\">\n            <el-table-column prop=\"name\" label=\"name\">\n              <template slot=\"header\" slot-scope=\"{ column, $index }\">\n              {{ $index }}:{{column.label}}\n              </template>\n            </el-table-column>\n            <el-table-column prop=\"release\"/>\n            <el-table-column prop=\"director\"/>\n            <el-table-column prop=\"runtime\"/>\n          </el-table>\n        `,\n\n        created() {\n          this.testData = getTestData();\n        }\n      });\n\n      setTimeout(_ => {\n        const headerCell = vm.$el.querySelector('.el-table__header-wrapper thead tr th:first-child .cell');\n        expect(headerCell.textContent.trim()).to.equal('0:name');\n        destroyVM(vm);\n        done();\n      }, DELAY);\n    });\n\n    it('align', done => {\n      const vm = createTable('align=\"left\"', 'align=\"right\"', 'align=\"center\"');\n      setTimeout(_ => {\n        var len = getTestData().length + 1;\n        expect(vm.$el.querySelectorAll('.is-left')).to.length(len);\n        expect(vm.$el.querySelectorAll('.is-right')).to.length(len);\n        expect(vm.$el.querySelectorAll('.is-center')).to.length(len);\n        destroyVM(vm);\n        done();\n      }, DELAY);\n    });\n\n    it('class-name', done => {\n      const vm = createTable('class-name=\"column-1\"', 'class-name=\"column-2 column-class-a\"', 'class-name=\"column-class-a\"');\n      setTimeout(_ => {\n        var len = getTestData().length + 1;\n        expect(vm.$el.querySelectorAll('.column-1')).to.length(len);\n        expect(vm.$el.querySelectorAll('.column-2')).to.length(len);\n        expect(vm.$el.querySelectorAll('.column-class-a')).to.length(len * 2);\n        destroyVM(vm);\n        done();\n      }, DELAY);\n    });\n\n    it('selectable', done => {\n      const vm = createVue({\n        template: `\n          <el-table :data=\"testData\" @selection-change=\"change\">\n            <el-table-column type=\"selection\" :selectable=\"filterSelect\" />\n            <el-table-column prop=\"name\" label=\"name\" />\n            <el-table-column prop=\"release\" label=\"release\" />\n            <el-table-column prop=\"director\" label=\"director\" />\n            <el-table-column prop=\"runtime\" label=\"runtime\" />\n          </el-table>\n        `,\n\n        created() {\n          this.testData = getTestData();\n        },\n\n        data() {\n          return { selected: [] };\n        },\n\n        methods: {\n          change(rows) {\n            this.selected = rows;\n          },\n\n          filterSelect(row, index) {\n            return index > 2;\n          }\n        }\n      }, true);\n\n      setTimeout(_ => {\n        vm.$el.querySelector('.el-checkbox').click();\n        setTimeout(_ => {\n          expect(vm.selected).to.length(2);\n          destroyVM(vm);\n          done();\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('selectable === false & check selectAll status', done => {\n      const vm = createVue({\n        template: `\n          <el-table :data=\"testData\" @selection-change=\"change\">\n            <el-table-column type=\"selection\" :selectable=\"filterSelect\" />\n            <el-table-column prop=\"name\" label=\"name\" />\n            <el-table-column prop=\"release\" label=\"release\" />\n            <el-table-column prop=\"director\" label=\"director\" />\n            <el-table-column prop=\"runtime\" label=\"runtime\" />\n          </el-table>\n        `,\n\n        created() {\n        },\n\n        data() {\n          return { selected: [], testData: null };\n        },\n\n        methods: {\n          change(rows) {\n            this.selected = rows;\n          },\n\n          filterSelect(row, index) {\n            return false;\n          }\n        }\n      }, true);\n\n      vm.testData = getTestData();\n\n      setTimeout(_ => {\n        expect(vm.$el.querySelector('.el-checkbox').__vue__.checked).to.be.false;\n        setTimeout(_ => {\n          expect(vm.selected).to.length(0);\n          destroyVM(vm);\n          done();\n        }, DELAY);\n      }, DELAY);\n    });\n\n    it('emit selection-change after row has been removed', done => {\n      const vm = createVue({\n        template: `\n          <el-table :data=\"testData\" @selection-change=\"change\">\n            <el-table-column type=\"selection\" />\n            <el-table-column prop=\"name\" label=\"name\" />\n            <el-table-column prop=\"release\" label=\"release\" />\n            <el-table-column prop=\"director\" label=\"director\" />\n            <el-table-column prop=\"runtime\" label=\"runtime\" />\n          </el-table>\n        `,\n\n        created() {\n          this.testData = getTestData();\n        },\n\n        data() {\n          return { selected: [], testData: null };\n        },\n\n        methods: {\n          change(rows) {\n            this.selected = rows;\n          },\n\n          filterSelect(row, index) {\n            return index > 2;\n          }\n        }\n      }, true);\n\n      setTimeout(_ => {\n        vm.$el.querySelector('.el-checkbox').click();\n        setTimeout(_ => {\n          expect(vm.selected).to.length(5);\n          vm.testData.splice(0, 1);\n          setTimeout(_ => {\n            expect(vm.selected).to.length(4);\n            destroyVM(vm);\n            done();\n          });\n        }, DELAY);\n      }, DELAY);\n    });\n\n    describe('type', () => {\n      const createTable = function(type) {\n        return createVue({\n          template: `\n            <el-table :data=\"testData\" @selection-change=\"change\">\n              <el-table-column type=\"${type}\" />\n              <el-table-column prop=\"name\" label=\"name\" />\n              <el-table-column prop=\"release\" label=\"release\" />\n              <el-table-column prop=\"director\" label=\"director\" />\n              <el-table-column prop=\"runtime\" label=\"runtime\" />\n            </el-table>\n          `,\n\n          created() {\n            this.testData = getTestData();\n          },\n\n          data() {\n            return { selected: [] };\n          },\n\n          methods: {\n            change(rows) {\n              this.selected = rows;\n            }\n          }\n        }, true);\n      };\n\n      describe('= selection', () => {\n        const vm = createTable('selection');\n\n        it('render', done => {\n          setTimeout(_ => {\n            expect(vm.$el.querySelectorAll('.el-checkbox')).to.length(getTestData().length + 1);\n            done();\n          }, DELAY);\n        });\n\n        it('select all', done => {\n          vm.$el.querySelector('.el-checkbox').click();\n\n          setTimeout(_ => {\n            expect(vm.selected).to.length(getTestData().length);\n            done();\n          }, DELAY);\n        });\n\n        it('cancel all', done => {\n          vm.$el.querySelector('.el-checkbox').click();\n\n          setTimeout(_ => {\n            expect(vm.selected).to.length(0);\n            destroyVM(vm);\n            done();\n          }, DELAY);\n        });\n\n        it('select one', done => {\n          const vm2 = createTable('selection');\n\n          setTimeout(_ => {\n            vm2.$el.querySelectorAll('.el-checkbox')[1].click();\n\n            setTimeout(_ => {\n              expect(vm2.selected).to.length(1);\n              expect(vm2.selected[0].name).to.equal(getTestData()[0].name);\n              destroyVM(vm2);\n              done();\n            }, DELAY);\n          }, DELAY);\n        });\n      });\n\n      describe('= index', () => {\n        const vm = createTable('index');\n\n        it('render', done => {\n          setTimeout(_ => {\n            expect(toArray(vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr td:first-child'))\n              .map(node => node.textContent)).to.eql(['1', '2', '3', '4', '5']);\n            destroyVM(vm);\n            done();\n          }, DELAY);\n        });\n      });\n\n      describe('= expand', () => {\n        const createInstance = function(extra) {\n          extra = extra || '';\n          return createVue({\n            template: `\n            <el-table row-key=\"id\" :data=\"testData\" @expand-change=\"handleExpand\" ${extra}>\n              <el-table-column type=\"expand\">\n                <template slot-scope=\"props\">\n                  <div>{{props.row.name}}</div>\n                </template>\n              </el-table-column>\n              <el-table-column prop=\"release\" label=\"release\" />\n              <el-table-column prop=\"director\" label=\"director\" />\n              <el-table-column prop=\"runtime\" label=\"runtime\" />\n            </el-table>\n          `,\n\n            data() {\n              return { expandCount: 0, expandRowKeys: [], testData: getTestData() };\n            },\n\n            methods: {\n              handleExpand() {\n                this.expandCount++;\n              },\n              refreshData() {\n                this.testData = getTestData();\n              }\n            }\n          }, true);\n        };\n\n        it('works', done => {\n          const vm = createInstance();\n          setTimeout(_ => {\n            expect(vm.$el.querySelectorAll('td.el-table__expand-column').length).to.equal(5);\n            destroyVM(vm);\n            done();\n          }, DELAY);\n        });\n\n        it('should expand when click icon', done => {\n          const vm = createInstance();\n          setTimeout(_ => {\n            vm.$el.querySelector('td.el-table__expand-column .el-table__expand-icon').click();\n            setTimeout(_ => {\n              expect(vm.$el.querySelectorAll('.el-table__expanded-cell').length).to.equal(1);\n              expect(vm.expandCount).to.equal(1);\n              vm.$el.querySelector('td.el-table__expand-column .el-table__expand-icon').click();\n              setTimeout(_ => {\n                expect(vm.$el.querySelectorAll('.el-table__expanded-cell').length).to.equal(0);\n                expect(vm.expandCount).to.equal(2);\n                destroyVM(vm);\n                done();\n              }, DELAY);\n            }, DELAY);\n          }, DELAY);\n        });\n\n        it('should set expanded rows using expandRowKeys', done => {\n          const vm = createInstance(':expand-row-keys=\"expandRowKeys\"');\n          setTimeout(_ => {\n            vm.expandRowKeys = [1, 3];\n            setTimeout(_ => {\n              expect(vm.$el.querySelectorAll('.el-table__expanded-cell').length).to.equal(2);\n              vm.expandRowKeys = [2];\n              setTimeout(_ => {\n                expect(vm.$el.querySelectorAll('.el-table__expanded-cell').length).to.equal(1);\n                destroyVM(vm);\n                done();\n              }, DELAY);\n            }, DELAY);\n          }, DELAY);\n        });\n\n        it('should default-expand-all when default-expand-all is true', done => {\n          const vm = createInstance('default-expand-all');\n          setTimeout(_ => {\n            expect(vm.$el.querySelectorAll('.el-table__expanded-cell').length).to.equal(5);\n            destroyVM(vm);\n            done();\n          }, DELAY);\n        });\n\n        it('should unexpand after refresh data and click', function(done) {\n          const vm = createInstance();\n          setTimeout(_ => {\n            vm.$el.querySelector('td.el-table__expand-column .el-table__expand-icon').click();\n            setTimeout(_ => {\n              expect(vm.$el.querySelectorAll('.el-table__expanded-cell').length).to.equal(1);\n              expect(vm.expandCount).to.equal(1);\n              vm.refreshData();\n              setTimeout(_ => { // wait until refreshed\n                expect(vm.$el.querySelectorAll('.el-table__expanded-cell').length).to.equal(1);\n                vm.$el.querySelector('td.el-table__expand-column .el-table__expand-icon').click();\n                setTimeout(_ => {\n                  // should unexpand\n                  expect(vm.$el.querySelectorAll('.el-table__expanded-cell').length).to.equal(0);\n                  expect(vm.expandCount).to.equal(2);\n                  destroyVM(vm);\n                  done();\n                }, DELAY);\n              }, DELAY);\n            }, DELAY);\n          }, DELAY);\n        });\n      });\n    });\n\n    describe('sortable', () => {\n\n      it('render', done => {\n        const vm = createTable('', '', '', 'sortable');\n        setTimeout(_ => {\n          expect(vm.$el.querySelectorAll('.caret-wrapper')).to.length(1);\n          destroyVM(vm);\n          done();\n        }, DELAY);\n      });\n\n      it('sortable orders', done => {\n        const vm = createTable('', '', '', 'sortable :sort-orders=\"[\\'descending\\', \\'ascending\\']\"', {});\n\n        setTimeout(_ => {\n          const elm = vm.$el.querySelector('.caret-wrapper');\n          elm.click();\n\n          setTimeout(_ => {\n            const lastCells = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr td:last-child');\n            expect(toArray(lastCells).map(node => node.textContent)).to.eql(['100', '95', '92', '92', '80']);\n            destroyVM(vm);\n            done();\n          }, DELAY);\n        }, DELAY);\n      });\n\n      it('sortable method', done => {\n        const vm = createTable(\n          'sortable :sort-method=\"sortMethod\"', '', '', '', {\n            methods: {\n              sortMethod(a, b) {\n                // sort method should return number\n                if (a.runtime < b.runtime) {\n                  return 1;\n                }\n                if (a.runtime > b.runtime) {\n                  return -1;\n                }\n                return 0;\n              }\n            }\n          });\n\n        setTimeout(_ => {\n          const elm = vm.$el.querySelector('.caret-wrapper');\n          elm.click();\n\n          setTimeout(_ => {\n            const lastCells = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr td:last-child');\n            expect(toArray(lastCells).map(node => node.textContent)).to.eql(['100', '95', '92', '92', '80']);\n            destroyVM(vm);\n            done();\n          }, DELAY);\n        }, DELAY);\n      });\n\n      it('sortable by method', done => {\n        const vm = createTable(\n          'sortable :sort-by=\"sortBy\"', '', '', '', {\n            methods: {\n              sortBy(a) {\n                return -a.runtime;\n              }\n            }\n          });\n\n        setTimeout(_ => {\n          const elm = vm.$el.querySelector('.caret-wrapper');\n          elm.click();\n\n          setTimeout(_ => {\n            const lastCells = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr td:last-child');\n            expect(toArray(lastCells).map(node => node.textContent)).to.eql(['100', '95', '92', '92', '80']);\n            destroyVM(vm);\n            done();\n          }, DELAY);\n        }, DELAY);\n      });\n\n      it('sortable by property', done => {\n        const vm = createTable(\n          'sortable sort-by=\"runtime\"', '', '', '', {});\n\n        setTimeout(_ => {\n          const elm = vm.$el.querySelector('.caret-wrapper');\n          elm.click();\n\n          setTimeout(_ => {\n            const lastCells = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr td:last-child');\n            expect(toArray(lastCells).map(node => node.textContent)).to.eql(['80', '92', '92', '95', '100']);\n            destroyVM(vm);\n            done();\n          }, DELAY);\n        }, DELAY);\n      });\n    });\n\n    describe('click sortable column', () => {\n      const vm = createTable('', '', '', 'sortable');\n\n      it('ascending', done => {\n        const elm = vm.$el.querySelector('.caret-wrapper');\n\n        elm.click();\n        setTimeout(_ => {\n          const lastCells = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr td:last-child');\n          expect(toArray(lastCells).map(node => node.textContent))\n            .to.eql(['80', '92', '92', '95', '100']);\n          done();\n        }, DELAY);\n      });\n\n      it('descending', done => {\n        const elm = vm.$el.querySelector('.caret-wrapper');\n\n        elm.click();\n        setTimeout(_ => {\n          const lastCells = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr td:last-child');\n          expect(toArray(lastCells).map(node => node.textContent))\n            .to.eql(['100', '95', '92', '92', '80']);\n          destroyVM(vm);\n          done();\n        }, DELAY);\n      });\n    });\n  });\n\n  describe('summary row', () => {\n    it('should render', done => {\n      const vm = createVue({\n        template: `\n          <el-table :data=\"testData\" show-summary>\n            <el-table-column prop=\"name\" />\n            <el-table-column prop=\"release\"/>\n            <el-table-column prop=\"director\"/>\n            <el-table-column prop=\"runtime\"/>\n          </el-table>\n        `,\n\n        created() {\n          this.testData = getTestData();\n        }\n      }, true);\n\n      setTimeout(_ => {\n        const footer = vm.$el.querySelector('.el-table__footer');\n        expect(footer).to.exist;\n        const cells = toArray(footer.querySelectorAll('.cell'));\n        expect(cells[cells.length - 1].innerText).to.equal('459');\n        destroyVM(vm);\n        done();\n      }, DELAY);\n    });\n\n    it('custom sum text', done => {\n      const vm = createVue({\n        template: `\n          <el-table :data=\"testData\" show-summary sum-text=\"Time\">\n            <el-table-column prop=\"name\" />\n            <el-table-column prop=\"release\"/>\n            <el-table-column prop=\"director\"/>\n            <el-table-column prop=\"runtime\"/>\n          </el-table>\n        `,\n\n        created() {\n          this.testData = getTestData();\n        }\n      }, true);\n\n      setTimeout(_ => {\n        const cells = toArray(vm.$el.querySelectorAll('.el-table__footer .cell'));\n        expect(cells[0].innerText).to.equal('Time');\n        destroyVM(vm);\n        done();\n      }, DELAY);\n    });\n\n    it('custom summary method', done => {\n      const vm = createVue({\n        template: `\n          <el-table :data=\"testData\" show-summary :summary-method=\"getSummary\">\n            <el-table-column prop=\"name\" />\n            <el-table-column prop=\"release\"/>\n            <el-table-column prop=\"director\"/>\n            <el-table-column prop=\"runtime\"/>\n          </el-table>\n        `,\n\n        created() {\n          this.testData = getTestData();\n        },\n\n        methods: {\n          getSummary(param) {\n            const { columns, data } = param;\n            const result = [];\n            columns.forEach(column => {\n              const prop = column.property;\n              if (prop === 'release') {\n                const dates = data.map(item => item[prop]);\n                const releaseYears = dates.map(date => Number(date.slice(0, 4)));\n                result.push(releaseYears.reduce((prev, curr) => {\n                  return prev + curr;\n                }));\n              } else {\n                result.push('');\n              }\n            });\n            return result;\n          }\n        }\n      }, true);\n\n      setTimeout(_ => {\n        const cells = toArray(vm.$el.querySelectorAll('.el-table__footer .cell'));\n        expect(cells[1].innerText).to.equal('9996');\n        destroyVM(vm);\n        done();\n      }, DELAY);\n    });\n  });\n\n  describe('multi level column', () => {\n    it('should works', done => {\n      const vm = createVue({\n        template: `\n          <el-table :data=\"testData\">\n            <el-table-column prop=\"name\" />\n            <el-table-column label=\"group\">\n              <el-table-column prop=\"release\"/>\n              <el-table-column prop=\"director\"/>\n            </el-table-column>\n            <el-table-column prop=\"runtime\"/>\n          </el-table>\n        `,\n\n        created() {\n          this.testData = null;\n        }\n      }, true);\n\n      setTimeout(_ => {\n        const trs = vm.$el.querySelectorAll('.el-table__header tr');\n        expect(trs.length).equal(2);\n        const firstRowHeader = trs[0].querySelectorAll('th .cell').length;\n        const secondRowHeader = trs[1].querySelectorAll('th .cell').length;\n        expect(firstRowHeader).to.equal(3);\n        expect(secondRowHeader).to.equal(2);\n\n        expect(trs[0].querySelector('th:first-child').getAttribute('rowspan')).to.equal('2');\n        expect(trs[0].querySelector('th:nth-child(2)').getAttribute('colspan')).to.equal('2');\n        destroyVM(vm);\n        done();\n      }, DELAY);\n    });\n\n    it('should works', done => {\n      const vm = createVue({\n        template: `\n          <el-table :data=\"testData\">\n            <el-table-column prop=\"name\" />\n            <el-table-column label=\"group\">\n              <el-table-column label=\"group's group\">\n                <el-table-column prop=\"release\" />\n                <el-table-column prop=\"runtime\"/>\n              </el-table-column>\n              <el-table-column prop=\"director\" />\n            </el-table-column>\n            <el-table-column prop=\"runtime\"/>\n          </el-table>\n        `,\n\n        created() {\n          this.testData = null;\n        }\n      }, true);\n\n      setTimeout(_ => {\n        const trs = vm.$el.querySelectorAll('.el-table__header tr');\n        expect(trs.length).equal(3);\n        const firstRowHeader = trs[0].querySelectorAll('th .cell').length;\n        const secondRowHeader = trs[1].querySelectorAll('th .cell').length;\n        const thirdRowHeader = trs[2].querySelectorAll('th .cell').length;\n        expect(firstRowHeader).to.equal(3);\n        expect(secondRowHeader).to.equal(2);\n        expect(thirdRowHeader).to.equal(2);\n\n        expect(trs[0].querySelector('th:first-child').getAttribute('rowspan')).to.equal('3');\n        expect(trs[0].querySelector('th:nth-child(2)').getAttribute('colspan')).to.equal('3');\n        expect(trs[1].querySelector('th:first-child').getAttribute('colspan')).to.equal('2');\n        expect(trs[1].querySelector('th:nth-child(2)').getAttribute('rowspan')).to.equal('2');\n\n        destroyVM(vm);\n        done();\n      }, DELAY);\n    });\n\n    it('should work in one column', done => {\n      const vm = createVue({\n        template: `\n          <el-table :data=\"testData\">\n            <el-table-column label=\"group\">\n              <el-table-column prop=\"release\"/>\n            </el-table-column>\n          </el-table>\n        `,\n\n        created() {\n          this.testData = null;\n        }\n      }, true);\n\n      setTimeout(_ => {\n        const trs = vm.$el.querySelectorAll('.el-table__header tr');\n        expect(trs.length).equal(2);\n        const firstRowLength = trs[0].querySelectorAll('th .cell').length;\n        const secondRowLength = trs[1].querySelectorAll('th .cell').length;\n        expect(firstRowLength).to.equal(1);\n        expect(secondRowLength).to.equal(1);\n\n        expect(trs[0].querySelector('th:first-child').getAttribute('rowspan')).to.equal('1');\n        expect(trs[0].querySelector('th:first-child').getAttribute('colspan')).to.equal('1');\n        destroyVM(vm);\n        done();\n      }, DELAY);\n    });\n  });\n\n  describe('dynamic column attribtes', () => {\n    const DELAY = 50;\n\n    it('label', (done) => {\n      const vm = createVue({\n        template: `\n          <el-table :data=\"testData\">\n            <el-table-column prop=\"name\" :label=\"label\"/>\n            <el-table-column prop=\"release\" />\n            <el-table-column prop=\"director\" />\n            <el-table-column prop=\"runtime\" />\n          </el-table>\n        `,\n\n        data() {\n          return {\n            label: 'name'\n          };\n        },\n\n        created() {\n          this.testData = getTestData();\n        }\n      }, true);\n\n      setTimeout(() => {\n        expect(vm.$el.querySelector('.el-table__header th .cell').textContent).to.equal('name');\n        vm.label = 'NAME';\n        vm.$nextTick(() => {\n          expect(vm.$el.querySelector('.el-table__header th .cell').textContent).to.equal('NAME');\n          destroyVM(vm);\n          done();\n        });\n      }, DELAY);\n    });\n\n    it('align', (done) => {\n      const vm = createVue({\n        template: `\n          <el-table :data=\"testData\">\n            <el-table-column prop=\"name\" :align=\"align\"/>\n          </el-table>\n        `,\n\n        data() {\n          return {\n            align: 'left'\n          };\n        },\n\n        created() {\n          this.testData = getTestData();\n        }\n      }, true);\n\n      setTimeout(() => {\n        expect(vm.$el.querySelectorAll('.el-table__body td.is-right').length === 0).to.be.true;\n        vm.align = 'right';\n        vm.$nextTick(() => {\n          expect(vm.$el.querySelectorAll('.el-table__body td.is-right').length > 0).to.be.true;\n          destroyVM(vm);\n          done();\n        });\n      }, DELAY);\n    });\n\n    it('header-align', (done) => {\n      const vm = createVue({\n        template: `\n           <el-table :data=\"testData\">\n            <el-table-column prop=\"name\" :align=\"align\" :header-align=\"headerAlign\"/>\n          </el-table>\n        `,\n\n        data() {\n          return {\n            align: 'left',\n            headerAlign: null\n          };\n        },\n\n        created() {\n          this.testData = getTestData();\n        }\n      }, true);\n\n      vm.$nextTick(() => {\n        expect(vm.$el.querySelectorAll('.el-table__header th.is-left').length).to.above(0);\n        expect(vm.$el.querySelectorAll('.el-table__header th.is-center').length).to.equal(0);\n        expect(vm.$el.querySelectorAll('.el-table__header th.is-right').length).to.equal(0);\n        vm.align = 'right';\n        vm.$nextTick(() => {\n          expect(vm.$el.querySelectorAll('.el-table__header th.is-left').length).to.equal(0);\n          expect(vm.$el.querySelectorAll('.el-table__header th.is-center').length).to.equal(0);\n          expect(vm.$el.querySelectorAll('.el-table__header th.is-right').length).to.above(0);\n          vm.headerAlign = 'center';\n          vm.$nextTick(() => {\n            expect(vm.$el.querySelectorAll('.el-table__header th.is-left').length).to.equal(0);\n            expect(vm.$el.querySelectorAll('.el-table__header th.is-center').length).to.above(0);\n            expect(vm.$el.querySelectorAll('.el-table__header th.is-right').length).to.equal(0);\n            vm.headerAlign = null;\n            vm.$nextTick(() => {\n              expect(vm.$el.querySelectorAll('.el-table__header th.is-left').length).to.equal(0);\n              expect(vm.$el.querySelectorAll('.el-table__header th.is-center').length).to.equal(0);\n              expect(vm.$el.querySelectorAll('.el-table__header th.is-right').length).to.above(0);\n              destroyVM(vm);\n              done();\n            });\n          });\n        });\n      });\n    });\n\n    it('width', (done) => {\n      const vm = createVue({\n        template: `\n          <el-table :data=\"testData\" :fit=\"false\">\n            <el-table-column prop=\"name\" :width=\"width\"/>\n          </el-table>\n        `,\n\n        data() {\n          return {\n            width: 100\n          };\n        },\n\n        created() {\n          this.testData = getTestData();\n        }\n      }, true);\n\n      setTimeout(() => {\n        expect(vm.$el.querySelector('.el-table__body col').getAttribute('width')).to.equal('100');\n        vm.width = 200;\n        setTimeout(() => {\n          expect(vm.$el.querySelector('.el-table__body col').getAttribute('width')).to.equal('200');\n          destroyVM(vm);\n          done();\n        }, 100);\n      }, DELAY);\n    });\n\n    it('min-width', (done) => {\n      const vm = createVue({\n        template: `\n          <el-table :data=\"testData\" :fit=\"false\">\n            <el-table-column prop=\"name\" :min-width=\"width\"/>\n          </el-table>\n        `,\n\n        data() {\n          return {\n            width: 100\n          };\n        },\n\n        created() {\n          this.testData = getTestData();\n        }\n      }, true);\n\n      setTimeout(() => {\n        expect(vm.$el.querySelector('.el-table__body col').getAttribute('width')).to.equal('100');\n        vm.width = 200;\n        setTimeout(() => {\n          expect(vm.$el.querySelector('.el-table__body col').getAttribute('width')).to.equal('200');\n          destroyVM(vm);\n          done();\n        }, 100);\n      }, DELAY);\n    });\n\n    it('fixed', (done) => {\n      const vm = createVue({\n        template: `\n          <el-table :data=\"testData\">\n            <el-table-column :fixed=\"fixed\" />\n            <el-table-column prop=\"release\" />\n            <el-table-column prop=\"director\" />\n            <el-table-column prop=\"runtime\" />\n          </el-table>\n        `,\n\n        data() {\n          return {\n            fixed: false\n          };\n        },\n\n        created() {\n          this.testData = getTestData();\n        }\n      }, true);\n\n      setTimeout(() => {\n        expect(!vm.$el.querySelector('.el-table__fixed')).to.be.true;\n        vm.fixed = true;\n        setTimeout(() => {\n          expect(!!vm.$el.querySelector('.el-table__fixed')).to.be.true;\n          destroyVM(vm);\n          done();\n        }, 100);\n      }, DELAY);\n    });\n\n    it('prop', (done) => {\n      const vm = createVue({\n        template: `\n          <el-table :data=\"testData\">\n            <el-table-column :prop=\"prop\" />\n            <el-table-column prop=\"release\" />\n            <el-table-column prop=\"director\" />\n            <el-table-column prop=\"runtime\" />\n          </el-table>\n        `,\n\n        data() {\n          return {\n            prop: 'name'\n          };\n        },\n\n        created() {\n          this.testData = getTestData();\n        }\n      }, true);\n\n      setTimeout(() => {\n        let firstColumnContent = vm.$el.querySelector('.el-table__body td .cell').textContent;\n        let secondColumnContent = vm.$el.querySelector('.el-table__body td:nth-child(2) .cell').textContent;\n        expect(firstColumnContent !== secondColumnContent).to.be.true;\n        vm.prop = 'release';\n        setTimeout(() => {\n          firstColumnContent = vm.$el.querySelector('.el-table__body td .cell').textContent;\n          secondColumnContent = vm.$el.querySelector('.el-table__body td:nth-child(2) .cell').textContent;\n          expect(firstColumnContent === secondColumnContent).to.be.true;\n          destroyVM(vm);\n          done();\n        }, 100);\n      }, DELAY);\n    });\n  });\n\n  describe('methods', () => {\n    const createTable = function(prop = '', opts) {\n      return createVue({\n        template: `\n          <el-table ref=\"table\" :data=\"testData\" @${prop}=\"handleEvent\">\n            <el-table-column type=\"selection\" />\n            <el-table-column prop=\"name\" />\n            <el-table-column prop=\"release\" />\n            <el-table-column prop=\"director\" />\n            <el-table-column prop=\"runtime\"/>\n          </el-table>\n        `,\n\n        methods: {\n          handleEvent(selection) {\n            this.fireCount++;\n            this.selection = selection;\n          }\n        },\n\n        created() {\n          this.testData = getTestData();\n        },\n\n        data() {\n          return { selection: null, testData: this.testData, fireCount: 0 };\n        }\n      }, true);\n    };\n\n    it('toggleRowSelection', () => {\n      const vm = createTable('selection-change');\n      vm.$refs.table.toggleRowSelection(vm.testData[0]);\n      expect(vm.selection).to.length(1);\n      expect(vm.fireCount).to.equal(1);\n\n      // test use second parameter\n      vm.$refs.table.toggleRowSelection(vm.testData[0], true);\n      expect(vm.fireCount).to.equal(1);\n\n      vm.$refs.table.toggleRowSelection(vm.testData[0], false);\n      expect(vm.fireCount).to.equal(2);\n      expect(vm.selection).to.length(0);\n\n      destroyVM(vm);\n    });\n\n    it('toggleAllSelection', done => {\n      const vm = createTable('selection-change');\n      vm.$refs.table.toggleAllSelection();\n      setTimeout(() => {\n        expect(vm.selection).to.length(5);\n\n        vm.$refs.table.toggleAllSelection();\n        setTimeout(() => {\n          expect(vm.selection).to.length(0);\n          destroyVM(vm);\n          done();\n        }, 50);\n      }, 50);\n    });\n\n    it('toggleAllSelection debounce', async() => {\n      const spy = sinon.spy();\n      const vm = createVue({\n        template: `\n        <div>\n          <el-table ref=\"table\" :data=\"testData\" @selection-change=\"change\">\n            <el-table-column type=\"selection\" />\n            <el-table-column prop=\"name\" />\n          </el-table>\n          <el-table ref=\"table1\" :data=\"testData1\" @selection-change=\"change\">\n            <el-table-column type=\"selection\" />\n            <el-table-column prop=\"name\" />\n          </el-table>\n        </div>\n        `,\n\n        data() {\n          return {\n            testData: getTestData(),\n            testData1: getTestData()\n          };\n        },\n\n        methods: {\n          change(selection) {\n            spy(selection);\n          }\n        },\n\n        mounted() {\n          this.$refs.table.toggleAllSelection();\n          this.$refs.table1.toggleAllSelection();\n        }\n      }, true);\n\n      await wait(50);\n      expect(spy.callCount).to.be.equal(2);\n      expect(spy.args[0][0].length).to.be.equal(5);\n      expect(spy.args[1][0].length).to.be.equal(5);\n      destroyVM(vm);\n    });\n\n    it('clearSelection', () => {\n      const vm = createTable('selection-change');\n      vm.$refs.table.toggleRowSelection(vm.testData[0]);\n      expect(vm.selection).to.length(1);\n      expect(vm.fireCount).to.equal(1);\n\n      // clear selection\n      vm.$refs.table.clearSelection();\n      expect(vm.fireCount).to.equal(2);\n      expect(vm.selection).to.length(0);\n\n      vm.$refs.table.clearSelection();\n      expect(vm.fireCount).to.equal(2);\n\n      destroyVM(vm);\n    });\n\n    it('sort', done => {\n      const vm = createVue({\n        template: `\n          <el-table ref=\"table\" :data=\"testData\" :default-sort = \"{prop: 'runtime', order: 'ascending'}\">\n            <el-table-column prop=\"name\" />\n            <el-table-column prop=\"release\" />\n            <el-table-column prop=\"director\" />\n            <el-table-column prop=\"runtime\"/>\n          </el-table>\n        `,\n\n        created() {\n          this.testData = getTestData();\n        },\n\n        data() {\n          return { testData: this.testData };\n        }\n      });\n\n      setTimeout(() => {\n        const lastCells = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr td:last-child');\n        expect(toArray(lastCells).map(node => node.textContent))\n          .to.eql(['80', '92', '92', '95', '100']);\n\n        vm.$nextTick(() => {\n          vm.testData = vm.testData.map(data => Object.assign(data, { runtime: -data.runtime }));\n          vm.$refs.table.sort('runtime', 'ascending');\n          vm.$nextTick(() => {\n            expect(toArray(lastCells).map(node => node.textContent))\n              .to.eql(['-100', '-95', '-92', '-92', '-80']);\n            destroyVM(vm);\n            done();\n          });\n        });\n      }, DELAY);\n    });\n\n    it('sort correct change icon', async() => {\n      function assertSortIconCount($el, msg, count = 1) {\n        const sortIconCount = $el.querySelectorAll('th.ascending, th.descending').length;\n        expect(sortIconCount).to.equal(count, msg);\n      }\n\n      const vm = createVue({\n        template: `\n          <el-table ref=\"table\" :data=\"testData\" >\n            <el-table-column prop=\"name\" sortable />\n            <el-table-column prop=\"release\" sortable />\n            <el-table-column prop=\"director\" sortable />\n            <el-table-column prop=\"runtime\" sortable />\n          </el-table>\n        `,\n        data() {\n          return { testData: getTestData() };\n        }\n      });\n      await waitImmediate();\n      assertSortIconCount(vm.$el, 'sorting icon is not empty after mount', 0);\n      // manual click first column header\n      const elm = vm.$el.querySelector('.caret-wrapper');\n      elm.click();\n      await waitImmediate();\n      assertSortIconCount(vm.$el, 'sorting icon is not one after click header');\n      vm.$refs.table.sort('director', 'descending');\n      await waitImmediate();\n      assertSortIconCount(vm.$el, 'sorting icon is not one after call sort');\n      vm.$refs.table.sort('director', 'ascending');\n      await waitImmediate();\n      assertSortIconCount(vm.$el, 'sorting icon is not one after sort same column');\n      destroyVM(vm);\n    });\n\n    it('setCurrentRow', async() => {\n      const vm = createVue({\n        template: `\n        <div>\n          <el-table ref=\"table\" :data=\"testData\" highlight-current-row>\n            <el-table-column prop=\"name\" sortable />\n            <el-table-column prop=\"release\" sortable />\n            <el-table-column prop=\"director\" sortable />\n            <el-table-column prop=\"runtime\" sortable />\n          </el-table>\n          <button class=\"clear\" @click=\"clear\">clear</button>\n        </div>\n        `,\n        data() {\n          return { testData: getTestData() };\n        },\n        methods: {\n          clear() {\n            this.$refs.table.setCurrentRow();\n          }\n        }\n      });\n\n      vm.$refs.table.setCurrentRow(vm.testData[1]);\n      await waitImmediate();\n      const secondRow = vm.$el.querySelectorAll('.el-table__row')[1];\n      expect(secondRow.classList.contains('current-row')).to.true;\n\n      vm.$el.querySelector('.clear').click();\n      await waitImmediate();\n      expect(secondRow.classList.contains('current-row')).to.false;\n\n      destroyVM(vm);\n    });\n  });\n\n  it('hover', async() => {\n    const vm = createVue({\n      template: `\n        <el-table :data=\"testData\">\n          <el-table-column prop=\"name\" label=\"片名\" fixed />\n          <el-table-column prop=\"release\" label=\"发行日期\" />\n          <el-table-column prop=\"director\" label=\"导演\" />\n          <el-table-column prop=\"runtime\" label=\"时长（分）\" />\n        </el-table>\n      `,\n      data() {\n        return {\n          testData: getTestData()\n        };\n      }\n    }, true);\n    await waitImmediate();\n    const tr = vm.$el.querySelector('.el-table__body-wrapper tbody tr');\n    triggerEvent(tr, 'mouseenter', true, false);\n\n    await wait(50);\n    expect(tr.classList.contains('hover-row')).to.true;\n    triggerEvent(tr, 'mouseleave', true, false);\n\n    await wait(50);\n    expect(tr.classList.contains('hover-row')).to.false;\n    destroyVM(vm);\n  });\n\n  it('highlight-current-row', done => {\n    const vm = createVue({\n      template: `\n        <el-table :data=\"testData\" highlight-current-row>\n          <el-table-column prop=\"name\" label=\"片名\" />\n          <el-table-column prop=\"release\" label=\"发行日期\" />\n          <el-table-column prop=\"director\" label=\"导演\" />\n          <el-table-column prop=\"runtime\" label=\"时长（分）\" sortable />\n        </el-table>\n      `,\n\n      created() {\n        this.testData = getTestData();\n      }\n    }, true);\n    setTimeout(_ => {\n      const tr = vm.$el.querySelector('.el-table__body-wrapper tbody tr');\n      triggerEvent(tr, 'click', true, false);\n      setTimeout(_ => {\n        expect(tr.classList.contains('current-row')).to.be.true;\n        const rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr');\n\n        triggerEvent(rows[1], 'click', true, false);\n        setTimeout(_ => {\n          expect(tr.classList.contains('current-row')).to.be.false;\n          expect(rows[1].classList.contains('current-row')).to.be.true;\n\n          const ths = vm.$el.querySelectorAll('.el-table__header-wrapper thead th');\n          triggerEvent(ths[3], 'click', true, false);\n\n          setTimeout(_ => {\n            const rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr');\n\n            expect(rows[1].classList.contains('current-row')).to.be.false;\n            expect(rows[3].classList.contains('current-row')).to.be.true;\n            destroyVM(vm);\n            done();\n          }, DELAY);\n        }, DELAY);\n      }, DELAY);\n    }, DELAY);\n  });\n\n  it('keep highlight row when data change', done => {\n    const vm = createVue({\n      template: `\n        <el-table :data=\"testData\" highlight-current-row row-key=\"release\">\n          <el-table-column prop=\"name\" label=\"片名\" />\n          <el-table-column prop=\"release\" label=\"发行日期\" />\n          <el-table-column prop=\"director\" label=\"导演\" />\n          <el-table-column prop=\"runtime\" label=\"时长（分）\" sortable />\n        </el-table>\n      `,\n      data() {\n        return {\n          testData: getTestData()\n        };\n      }\n    }, true);\n    setTimeout(() => {\n      let rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr');\n      triggerEvent(rows[2], 'click', true, false);\n      setTimeout(() => {\n        expect(rows[2].classList.contains('current-row')).to.be.true;\n        const data = getTestData();\n        data.splice(0, 0, {\n          id: 8,\n          name: 'Monsters, Inc.',\n          release: '2018-02-01',\n          director: 'Peter Docter',\n          runtime: 92\n        });\n        data[2].name = 'Modified Name';\n        vm.testData = data;\n\n        setTimeout(() => {\n          rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr');\n          expect(rows[3].classList.contains('current-row')).to.be.true;\n          destroyVM(vm);\n          done();\n        }, DELAY);\n      }, DELAY);\n    }, DELAY);\n  });\n\n  it('keep highlight row after sort', done => {\n    const vm = createVue({\n      template: `\n        <el-table :data=\"testData\" row-key=\"release\" highlight-current-row >\n          <el-table-column prop=\"name\" label=\"片名\" />\n          <el-table-column prop=\"release\" label=\"发行日期\" />\n          <el-table-column prop=\"director\" label=\"导演\" />\n          <el-table-column prop=\"runtime\" label=\"时长（分）\" sortable />\n        </el-table>\n      `,\n      data() {\n        return {\n          testData: getTestData()\n        };\n      }\n    }, true);\n    setTimeout(() => {\n      let rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr');\n      triggerEvent(rows[1], 'click', true, false);\n      setTimeout(() => {\n        expect(rows[1].classList.contains('current-row')).to.be.true;\n        const cells = vm.$el.querySelectorAll('.el-table__header-wrapper thead th > .cell');\n        triggerEvent(cells[3], 'click', true, false);\n\n        setTimeout(() => {\n          rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr');\n          expect(rows[3].classList.contains('current-row')).to.be.true;\n          destroyVM(vm);\n          done();\n        }, DELAY);\n      }, DELAY);\n    }, DELAY);\n  });\n\n  it('table append is visible in viewport if height is 100%', async() => {\n    const vm = createVue({\n      template: `\n      <el-table :data=\"[]\" height=\"100%\">\n        <el-table-column prop=\"name\" label=\"片名\" />\n        <el-table-column prop=\"release\" label=\"发行日期\" />\n        <el-table-column prop=\"director\" label=\"导演\" />\n        <el-table-column prop=\"runtime\" label=\"时长（分）\" />\n        <template slot=\"append\">\n          <div class=\"append-content\" style=\"height: 48px;\">\n            append 区域始终出现在视图内\n          </div>\n        </template>\n      </el-table>\n      `\n    }, true);\n    await waitImmediate();\n    const emptyBlockEl = vm.$el.querySelector('.el-table__empty-block');\n    expect(emptyBlockEl.style.height).to.be.equal('calc(100% - 48px)');\n    destroyVM(vm);\n  });\n\n  describe('tree', () => {\n    let vm;\n    afterEach(() => destroyVM(vm));\n    it('render tree structual data', async() => {\n      vm = createVue({\n        template: `\n          <el-table :data=\"testData\" row-key=\"release\">\n            <el-table-column prop=\"name\" label=\"片名\" />\n            <el-table-column prop=\"release\" label=\"发行日期\" />\n            <el-table-column prop=\"director\" label=\"导演\" />\n            <el-table-column prop=\"runtime\" label=\"时长（分）\" />\n          </el-table>\n        `,\n        data() {\n          const testData = getTestData();\n          testData[1].children = [\n            {\n              name: 'A Bug\\'s Life copy 1', release: '1998-11-25-1', director: 'John Lasseter', runtime: 95\n            },\n            {\n              name: 'A Bug\\'s Life copy 2', release: '1998-11-25-2', director: 'John Lasseter', runtime: 95\n            }\n          ];\n          return {\n            testData: testData\n          };\n        }\n      }, true);\n      await waitImmediate();\n\n      const rows = vm.$el.querySelectorAll('.el-table__row');\n      expect(rows.length).to.equal(7);\n      const childRows = vm.$el.querySelectorAll('.el-table__row--level-1');\n      expect(childRows.length).to.equal(2);\n      childRows.forEach(item => {\n        expect(item.style.display).to.equal('none');\n      });\n      vm.$el.querySelector('.el-table__expand-icon').click();\n\n      await waitImmediate();\n      childRows.forEach(item => {\n        expect(item.style.display).to.equal('');\n      });\n    });\n\n    it('load substree row data', async() => {\n      vm = createVue({\n        template: `\n          <el-table :data=\"testData\" row-key=\"release\" lazy :load=\"load\">\n            <el-table-column prop=\"name\" label=\"片名\" />\n            <el-table-column prop=\"release\" label=\"发行日期\" />\n            <el-table-column prop=\"director\" label=\"导演\" />\n            <el-table-column prop=\"runtime\" label=\"时长（分）\" />\n          </el-table>\n        `,\n        data() {\n          const testData = getTestData();\n          testData[testData.length - 1].children = [\n            {\n              name: 'A Bug\\'s Life copy 1', release: '2008-1-25-1', director: 'John Lasseter', runtime: 95\n            }\n          ];\n          testData[1].hasChildren = true;\n          return {\n            testData: testData\n          };\n        },\n        methods: {\n          load(row, treeNode, resolve) {\n            resolve([\n              {\n                name: 'A Bug\\'s Life copy 1', release: '1998-11-25-1', director: 'John Lasseter', runtime: 95\n              },\n              {\n                name: 'A Bug\\'s Life copy 2', release: '1998-11-25-2', director: 'John Lasseter', runtime: 95\n              }\n            ]);\n          }\n        }\n      }, true);\n      await waitImmediate();\n\n      const expandIcon = vm.$el.querySelector('.el-table__expand-icon');\n      expandIcon.click();\n\n      await waitImmediate();\n\n      expect(expandIcon.classList.contains('el-table__expand-icon--expanded')).to.be.true;\n      expect(vm.$el.querySelectorAll('.el-table__row').length).to.equal(8);\n    });\n\n    it('tree-props & default-expand-all & expand-change', async() => {\n      const spy = sinon.spy();\n      vm = createVue({\n        template: `\n          <el-table\n            :data=\"testData\" lazy default-expand-all row-key=\"release\" :tree-props=\"{children: 'childrenTest', hasChildren: 'hasChildrenTest'}\"\n            :load=\"load\" @expand-change=\"change\">\n            <el-table-column prop=\"name\" label=\"片名\" />\n            <el-table-column prop=\"release\" label=\"发行日期\" />\n            <el-table-column prop=\"director\" label=\"导演\" />\n            <el-table-column prop=\"runtime\" label=\"时长（分）\" />\n          </el-table>\n        `,\n        data() {\n          const testData = getTestData();\n          testData[testData.length - 1].childrenTest = [\n            {\n              name: 'A Bug\\'s Life copy 1', release: '2008-1-25-1', director: 'John Lasseter', runtime: 95\n            }\n          ];\n          testData[1].hasChildrenTest = true;\n          return {\n            testData: testData\n          };\n        },\n        methods: {\n          load(row, treeNode, resolve) {\n            resolve([\n              {\n                name: 'A Bug\\'s Life copy 1', release: '1998-11-25-1', director: 'John Lasseter', runtime: 95\n              },\n              {\n                name: 'A Bug\\'s Life copy 2', release: '1998-11-25-2', director: 'John Lasseter', runtime: 95\n              }\n            ]);\n          },\n          change: spy\n        }\n      }, true);\n      await waitImmediate();\n      const childRows = vm.$el.querySelectorAll('.el-table__row--level-1');\n      childRows.forEach(item => {\n        expect(item.style.display).to.equal('');\n      });\n      const expandIcon = vm.$el.querySelector('.el-table__expand-icon');\n      expandIcon.click();\n\n      await waitImmediate();\n\n      expect(expandIcon.classList.contains('el-table__expand-icon--expanded')).to.be.true;\n      expect(vm.$el.querySelectorAll('.el-table__row').length).to.equal(8);\n      expect(spy.args[0][0]).to.be.an('object');\n      expect(spy.args[0][1]).to.be.true;\n    });\n\n    it('expand-row-keys & toggleRowExpansion', async() => {\n      vm = createVue({\n        template: `\n          <el-table :data=\"testData\" row-key=\"release\" lazy :load=\"load\" :expand-row-keys=\"['2003-5-30']\" ref=\"table\">\n            <el-table-column prop=\"name\" label=\"片名\" />\n            <el-table-column prop=\"release\" label=\"发行日期\" />\n            <el-table-column prop=\"director\" label=\"导演\" />\n            <el-table-column prop=\"runtime\" label=\"时长（分）\" />\n          </el-table>\n        `,\n        data() {\n          const testData = getTestData();\n          testData[testData.length - 1].children = [\n            {\n              name: 'A Bug\\'s Life copy 1', release: '2003-5-30-1', director: 'John Lasseter', runtime: 95,\n              hasChildren: true\n            }\n          ];\n          return {\n            testData: testData\n          };\n        },\n        methods: {\n          load(row, treeNode, resolve) {\n            resolve([\n              {\n                name: 'A Bug\\'s Life copy 1', release: '2003-5-30-2', director: 'John Lasseter', runtime: 95\n              }\n            ]);\n          },\n          closeExpandRow() {\n            const testData = this.testData;\n            const row = testData[testData.length - 1].children[0];\n            this.$refs.table.toggleRowExpansion(row);\n          }\n        }\n      }, true);\n      await waitImmediate();\n      const childRows = vm.$el.querySelectorAll('.el-table__row--level-1');\n      childRows.forEach(item => {\n        expect(item.style.display).to.equal('');\n      });\n      const expandIcon = childRows[0].querySelector('.el-table__expand-icon');\n      expandIcon.click();\n\n      await waitImmediate();\n\n      expect(expandIcon.classList.contains('el-table__expand-icon--expanded')).to.be.true;\n      vm.closeExpandRow();\n\n      await waitImmediate();\n      expect(expandIcon.classList.contains('el-table__expand-icon--expanded')).to.be.false;\n    });\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/tabs.spec.js",
    "content": "import { createVue, destroyVM, triggerKeyDown } from '../util';\n\ndescribe('Tabs', () => {\n  let vm;\n  let hasPromise = true;\n  before(() => {\n    if (!window.Promise) {\n      hasPromise = false;\n      window.Promise = require('es6-promise').Promise;\n    }\n  });\n\n  after(() => {\n    if (!hasPromise) {\n      window.Promise = undefined;\n    }\n  });\n\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', done => {\n    vm = createVue({\n      template: `\n        <el-tabs ref=\"tabs\">\n          <el-tab-pane label=\"用户管理\">A</el-tab-pane>\n          <el-tab-pane label=\"配置管理\">B</el-tab-pane>\n          <el-tab-pane label=\"角色管理\" ref=\"pane-click\">C</el-tab-pane>\n          <el-tab-pane label=\"定时任务补偿\">D</el-tab-pane>\n        </el-tabs>\n      `\n    }, true);\n\n    let paneList = vm.$el.querySelector('.el-tabs__content').children;\n    let spy = sinon.spy();\n\n    vm.$refs.tabs.$on('tab-click', spy);\n\n    setTimeout(_ => {\n      const tabList = vm.$refs.tabs.$refs.nav.$refs.tabs;\n      expect(tabList[0].classList.contains('is-active')).to.be.true;\n      expect(paneList[0].style.display).to.not.ok;\n\n      tabList[2].click();\n      vm.$nextTick(_ => {\n        expect(spy.withArgs(vm.$refs['pane-click']).calledOnce).to.true;\n        expect(tabList[2].classList.contains('is-active')).to.be.true;\n        expect(paneList[2].style.display).to.not.ok;\n        done();\n      });\n    }, 100);\n  });\n  it('active-name', done => {\n    vm = createVue({\n      template: `\n        <el-tabs ref=\"tabs\" :active-name=\"activeName\" @click=\"handleClick\">\n          <el-tab-pane name=\"tab-A\" label=\"用户管理\">A</el-tab-pane>\n          <el-tab-pane name=\"tab-B\" label=\"配置管理\">B</el-tab-pane>\n          <el-tab-pane name=\"tab-C\" label=\"角色管理\">C</el-tab-pane>\n          <el-tab-pane name=\"tab-D\" label=\"定时任务补偿\">D</el-tab-pane>\n        </el-tabs>\n      `,\n      data() {\n        return {\n          activeName: 'tab-B'\n        };\n      },\n      methods: {\n        handleClick(tab) {\n          this.activeName = tab.name;\n        }\n      }\n    }, true);\n    setTimeout(_ => {\n      const paneList = vm.$el.querySelector('.el-tabs__content').children;\n      const tabList = vm.$refs.tabs.$refs.nav.$refs.tabs;\n\n      expect(tabList[1].classList.contains('is-active')).to.be.true;\n      expect(paneList[1].style.display).to.not.ok;\n\n      tabList[3].click();\n      vm.$nextTick(_ => {\n        expect(tabList[3].classList.contains('is-active')).to.be.true;\n        expect(paneList[3].style.display).to.not.ok;\n        expect(vm.activeName === 'tab-D');\n        done();\n      });\n    }, 100);\n  });\n  it('card', () => {\n    vm = createVue({\n      template: `\n        <el-tabs type=\"card\">\n          <el-tab-pane label=\"用户管理\">A</el-tab-pane>\n          <el-tab-pane label=\"配置管理\">B</el-tab-pane>\n          <el-tab-pane label=\"角色管理\">C</el-tab-pane>\n          <el-tab-pane label=\"定时任务补偿\">D</el-tab-pane>\n        </el-tabs>\n      `\n    }, true);\n\n    expect(vm.$el.classList.contains('el-tabs--card')).to.be.true;\n  });\n  it('border card', () => {\n    vm = createVue({\n      template: `\n        <el-tabs type=\"border-card\">\n          <el-tab-pane label=\"用户管理\">A</el-tab-pane>\n          <el-tab-pane label=\"配置管理\">B</el-tab-pane>\n          <el-tab-pane label=\"角色管理\">C</el-tab-pane>\n          <el-tab-pane label=\"定时任务补偿\">D</el-tab-pane>\n        </el-tabs>\n      `\n    }, true);\n\n    expect(vm.$el.classList.contains('el-tabs--border-card')).to.be.true;\n  });\n  it('dynamic', (done) => {\n    vm = createVue({\n      template: `\n        <el-tabs type=\"card\" ref=\"tabs\">\n          <el-tab-pane :label=\"tab.label\" :name=\"tab.name\" v-for=\"tab in tabs\" :key=\"tab.name\">Test Content</el-tab-pane>\n        </el-tabs>\n      `,\n      data() {\n        return {\n          tabs: [{\n            label: 'tab1',\n            name: 'tab1'\n          }, {\n            label: 'tab2',\n            name: 'tab2'\n          }, {\n            label: 'tab3',\n            name: 'tab3'\n          }, {\n            label: 'tab4',\n            name: 'tab4'\n          }]\n        };\n      }\n    }, true);\n\n    setTimeout(() => {\n      expect(vm.$el.querySelectorAll('.el-tab-pane').length).to.equal(4);\n      vm.tabs.push({\n        label: 'tab5',\n        name: 'tab5'\n      });\n      setTimeout(() => {\n        expect(vm.$el.querySelectorAll('.el-tab-pane').length).to.equal(5);\n        done();\n      });\n    }, 100);\n  });\n  it('editable', done => {\n    vm = createVue({\n      template: `\n        <el-tabs ref=\"tabs\" v-model=\"editableTabsValue\" type=\"card\" editable @edit=\"handleTabsEdit\">\n          <el-tab-pane\n            v-for=\"(item, index) in editableTabs\"\n            :key=\"item.name\"\n            :label=\"item.title\"\n            :name=\"item.name\"\n          >\n            {{item.content}}\n          </el-tab-pane>\n        </el-tabs>\n      `,\n      data() {\n        return {\n          editableTabsValue: '2',\n          editableTabs: [{\n            title: 'Tab 1',\n            name: '1',\n            content: 'Tab 1 content'\n          }, {\n            title: 'Tab 2',\n            name: '2',\n            content: 'Tab 2 content'\n          }, {\n            title: 'Tab 3',\n            name: '3',\n            content: 'Tab 3 content'\n          }],\n          tabIndex: 3\n        };\n      },\n      methods: {\n        handleTabsEdit(targetName, action) {\n          if (action === 'add') {\n            let newTabName = ++this.tabIndex + '';\n            this.editableTabs.push({\n              title: 'New Tab',\n              name: newTabName,\n              content: 'New Tab content'\n            });\n            this.editableTabsValue = newTabName;\n          }\n          if (action === 'remove') {\n            let tabs = this.editableTabs;\n            let activeName = this.editableTabsValue;\n            if (activeName === targetName) {\n              tabs.forEach((tab, index) => {\n                if (tab.name === targetName) {\n                  let nextTab = tabs[index + 1] || tabs[index - 1];\n                  if (nextTab) {\n                    activeName = nextTab.name;\n                  }\n                }\n              });\n            }\n            this.editableTabsValue = activeName;\n            this.editableTabs = tabs.filter(tab => tab.name !== targetName);\n          }\n        }\n      }\n    }, true);\n\n    setTimeout(_ => {\n      const tabList = vm.$refs.tabs.$refs.nav.$refs.tabs;\n      const paneList = vm.$el.querySelector('.el-tabs__content').children;\n\n      tabList[1].querySelector('.el-icon-close').click();\n      setTimeout(_ => {\n        expect(tabList.length).to.be.equal(2);\n        expect(paneList.length).to.be.equal(2);\n        expect(tabList[1].classList.contains('is-active')).to.be.true;\n\n        vm.$refs.tabs.$el.querySelector('.el-tabs__new-tab').click();\n        setTimeout(_ => {\n          expect(tabList.length).to.be.equal(3);\n          expect(paneList.length).to.be.equal(3);\n          expect(tabList[2].classList.contains('is-active')).to.be.true;\n          done();\n        }, 100);\n      }, 100);\n    }, 100);\n  });\n  it('addable & closable', done => {\n    vm = createVue({\n      template: `\n        <el-tabs\n          ref=\"tabs\"\n          v-model=\"editableTabsValue\"\n          type=\"card\"\n          addable\n          closable\n          @tab-add=\"addTab\"\n          @tab-remove=\"removeTab\"\n        >\n          <el-tab-pane\n            v-for=\"(item, index) in editableTabs\"\n            :label=\"item.title\"\n            :key=\"item.name\"\n            :name=\"item.name\"\n          >\n            {{item.content}}\n          </el-tab-pane>\n        </el-tabs>\n      `,\n      data() {\n        return {\n          editableTabsValue: '2',\n          editableTabs: [{\n            title: 'Tab 1',\n            name: '1',\n            content: 'Tab 1 content'\n          }, {\n            title: 'Tab 2',\n            name: '2',\n            content: 'Tab 2 content'\n          }],\n          tabIndex: 2\n        };\n      },\n      methods: {\n        addTab(targetName) {\n          let newTabName = ++this.tabIndex + '';\n          this.editableTabs.push({\n            title: 'New Tab',\n            name: newTabName,\n            content: 'New Tab content'\n          });\n          this.editableTabsValue = newTabName;\n        },\n        removeTab(targetName) {\n          let tabs = this.editableTabs;\n          let activeName = this.editableTabsValue;\n          if (activeName === targetName) {\n            tabs.forEach((tab, index) => {\n              if (tab.name === targetName) {\n                let nextTab = tabs[index + 1] || tabs[index - 1];\n                if (nextTab) {\n                  activeName = nextTab.name;\n                }\n              }\n            });\n          }\n          this.editableTabsValue = activeName;\n          this.editableTabs = tabs.filter(tab => tab.name !== targetName);\n        }\n      }\n    }, true);\n\n    setTimeout(_ => {\n      const tabList = vm.$refs.tabs.$refs.nav.$refs.tabs;\n      const paneList = vm.$el.querySelector('.el-tabs__content').children;\n\n      vm.$refs.tabs.$el.querySelector('.el-tabs__new-tab').click();\n\n      setTimeout(_ => {\n        expect(tabList.length).to.be.equal(3);\n        expect(paneList.length).to.be.equal(3);\n        expect(tabList[2].classList.contains('is-active')).to.be.true;\n\n        tabList[2].querySelector('.el-icon-close').click();\n        setTimeout(_ => {\n          expect(tabList.length).to.be.equal(2);\n          expect(paneList.length).to.be.equal(2);\n          expect(tabList[1].classList.contains('is-active')).to.be.true;\n          done();\n        }, 100);\n      }, 100);\n    }, 100);\n  });\n  it('closable in tab-pane', (done) => {\n    vm = createVue({\n      template: `\n        <el-tabs type=\"card\" ref=\"tabs\">\n          <el-tab-pane label=\"用户管理\" closable>A</el-tab-pane>\n          <el-tab-pane label=\"配置管理\">B</el-tab-pane>\n          <el-tab-pane label=\"角色管理\" closable>C</el-tab-pane>\n          <el-tab-pane label=\"定时任务补偿\">D</el-tab-pane>\n        </el-tabs>\n      `\n    }, true);\n\n    setTimeout(() => {\n      expect(vm.$el.querySelectorAll('.el-icon-close').length).to.equal(2);\n      done();\n    }, 100);\n  });\n  it('disabled', done => {\n    vm = createVue({\n      template: `\n        <el-tabs type=\"card\" ref=\"tabs\">\n          <el-tab-pane label=\"用户管理\">A</el-tab-pane>\n          <el-tab-pane disabled label=\"配置管理\" ref=\"disabled\">B</el-tab-pane>\n          <el-tab-pane label=\"角色管理\">C</el-tab-pane>\n          <el-tab-pane label=\"定时任务补偿\">D</el-tab-pane>\n        </el-tabs>\n      `\n    }, true);\n\n    vm.$nextTick(_ => {\n      const tabList = vm.$refs.tabs.$refs.nav.$refs.tabs;\n\n      tabList[1].click();\n      vm.$nextTick(_ => {\n        expect(tabList[1].classList.contains('is-active')).to.not.true;\n        done();\n      });\n    });\n  });\n  it('tab-position', done => {\n    vm = createVue({\n      template: `\n        <el-tabs ref=\"tabs\" tab-position=\"left\">\n          <el-tab-pane label=\"用户管理\">A</el-tab-pane>\n          <el-tab-pane label=\"配置管理\">B</el-tab-pane>\n          <el-tab-pane label=\"角色管理\" ref=\"pane-click\">C</el-tab-pane>\n          <el-tab-pane label=\"定时任务补偿\">D</el-tab-pane>\n        </el-tabs>\n      `\n    }, true);\n\n    let paneList = vm.$el.querySelector('.el-tabs__content').children;\n    let spy = sinon.spy();\n\n    vm.$refs.tabs.$on('tab-click', spy);\n\n    setTimeout(_ => {\n      const tabList = vm.$refs.tabs.$refs.nav.$refs.tabs;\n      expect(tabList[0].classList.contains('is-active')).to.be.true;\n      expect(paneList[0].style.display).to.not.ok;\n\n      tabList[2].click();\n      vm.$nextTick(_ => {\n        expect(spy.withArgs(vm.$refs['pane-click']).calledOnce).to.true;\n        expect(tabList[2].classList.contains('is-active')).to.be.true;\n        expect(paneList[2].style.display).to.not.ok;\n        done();\n      });\n    }, 100);\n  });\n  it('stretch', done => {\n    vm = createVue({\n      template: `\n        <el-tabs ref=\"tabs\" stretch :tab-position=\"tabPosition\">\n          <el-tab-pane label=\"用户管理\">A</el-tab-pane>\n          <el-tab-pane label=\"配置管理\">B</el-tab-pane>\n          <el-tab-pane label=\"角色管理\" ref=\"pane-click\">C</el-tab-pane>\n          <el-tab-pane label=\"定时任务补偿\">D</el-tab-pane>\n        </el-tabs>\n      `,\n      data() {\n        return {\n          tabPosition: 'bottom'\n        };\n      }\n    }, true);\n\n    setTimeout(_ => {\n      expect(vm.$el.querySelector('[role=tablist]').classList.contains('is-stretch')).to.be.true;\n\n      vm.tabPosition = 'left';\n\n      vm.$nextTick(_ => {\n        expect(vm.$el.querySelector('[role=tablist]').classList.contains('is-stretch')).not.to.be.true;\n        done();\n      });\n    }, 100);\n  });\n  it('horizonal-scrollable', done => {\n    vm = createVue({\n      template: `\n        <el-tabs ref=\"tabs\" style=\"width: 200px;\">\n          <el-tab-pane label=\"用户管理\">A</el-tab-pane>\n          <el-tab-pane label=\"配置管理\">B</el-tab-pane>\n          <el-tab-pane label=\"用户管理\">A</el-tab-pane>\n          <el-tab-pane label=\"配置管理\">B</el-tab-pane>\n          <el-tab-pane label=\"用户管理\">A</el-tab-pane>\n          <el-tab-pane label=\"配置管理\">B</el-tab-pane>\n          <el-tab-pane label=\"定时任务补偿\">D</el-tab-pane>\n        </el-tabs>\n      `\n    }, true);\n\n    setTimeout(_ => {\n      const btnPrev = vm.$el.querySelector('.el-tabs__nav-prev');\n      btnPrev.click();\n      vm.$nextTick(_ => {\n        const tabNav = vm.$el.querySelector('.el-tabs__nav-wrap');\n        expect(tabNav.__vue__.navOffset).to.be.equal(0);\n\n        const btnNext = vm.$el.querySelector('.el-tabs__nav-next');\n        btnNext.click();\n\n        vm.$nextTick(_ => {\n          expect(tabNav.__vue__.navOffset).to.not.be.equal(0);\n\n          btnPrev.click();\n\n          vm.$nextTick(_ => {\n            expect(tabNav.__vue__.navOffset).to.be.equal(0);\n            done();\n          });\n        });\n      });\n    }, 100);\n  });\n  it('vertical-scrollable', done => {\n    vm = createVue({\n      template: `\n        <el-tabs ref=\"tabs\" tab-position=\"left\" style=\"height: 200px;\">\n          <el-tab-pane label=\"用户管理\">A</el-tab-pane>\n          <el-tab-pane label=\"配置管理\">B</el-tab-pane>\n          <el-tab-pane label=\"用户管理\">A</el-tab-pane>\n          <el-tab-pane label=\"配置管理\">B</el-tab-pane>\n          <el-tab-pane label=\"用户管理\">A</el-tab-pane>\n          <el-tab-pane label=\"配置管理\">B</el-tab-pane>\n          <el-tab-pane label=\"定时任务补偿\">D</el-tab-pane>\n        </el-tabs>\n      `\n    }, true);\n\n    setTimeout(_ => {\n      const btnPrev = vm.$el.querySelector('.el-tabs__nav-prev');\n      btnPrev.click();\n      vm.$nextTick(_ => {\n        const tabNav = vm.$el.querySelector('.el-tabs__nav-wrap');\n        expect(tabNav.__vue__.navOffset).to.be.equal(0);\n\n        const btnNext = vm.$el.querySelector('.el-tabs__nav-next');\n        btnNext.click();\n\n        vm.$nextTick(_ => {\n          expect(tabNav.__vue__.navOffset).to.not.be.equal(0);\n\n          btnPrev.click();\n\n          vm.$nextTick(_ => {\n            expect(tabNav.__vue__.navOffset).to.be.equal(0);\n            done();\n          });\n        });\n      });\n    }, 100);\n  });\n  it('should work with lazy', done => {\n    vm = createVue({\n      template: `\n        <el-tabs ref=\"tabs\">\n          <el-tab-pane label=\"用户管理\" name=\"A\">A</el-tab-pane>\n          <el-tab-pane label=\"配置管理\" name=\"B\">B</el-tab-pane>\n          <el-tab-pane label=\"角色管理\" name=\"C\">C</el-tab-pane>\n          <el-tab-pane label=\"定时任务补偿\" lazy name=\"D\">D</el-tab-pane>\n        </el-tabs>\n      `\n    }, true);\n\n    expect(vm.$el.querySelector('.el-tabs__content').children.length).to.be.equal(3);\n    expect(vm.$el.querySelector('.el-tabs__content > #pane-D')).to.be.equal(null);\n\n    setTimeout(_ => {\n      vm.$el.querySelector('.el-tabs__nav > #tab-D').click();\n      vm.$nextTick(() => {\n        expect(vm.$el.querySelector('.el-tabs__content').children.length).to.be.equal(4);\n        expect(vm.$el.querySelector('.el-tabs__content > #pane-D')).not.to.be.equal(null);\n\n        vm.$el.querySelector('.el-tabs__nav > #tab-A').click();\n        vm.$nextTick(() => {\n          expect(vm.$el.querySelector('.el-tabs__content').children.length).to.be.equal(4);\n          expect(vm.$el.querySelector('.el-tabs__content > #pane-D')).not.to.be.equal(null);\n          done();\n        });\n      });\n    }, 100);\n  });\n  it('before leave', done => {\n    vm = createVue({\n      template: `\n        <el-tabs ref=\"tabs\" v-model=\"activeName\" :before-leave=\"beforeLeave\">\n          <el-tab-pane name=\"tab-A\" label=\"用户管理\">A</el-tab-pane>\n          <el-tab-pane name=\"tab-B\" label=\"配置管理\">B</el-tab-pane>\n          <el-tab-pane name=\"tab-C\" label=\"角色管理\">C</el-tab-pane>\n          <el-tab-pane name=\"tab-D\" label=\"定时任务补偿\">D</el-tab-pane>\n        </el-tabs>\n      `,\n      data() {\n        return {\n          activeName: 'tab-B'\n        };\n      },\n      methods: {\n        beforeLeave() {\n          return new window.Promise((resolve, reject) => {\n            reject();\n          });\n        }\n      }\n    }, true);\n    setTimeout(_ => {\n      const paneList = vm.$el.querySelector('.el-tabs__content').children;\n      const tabList = vm.$refs.tabs.$refs.nav.$refs.tabs;\n\n      expect(tabList[1].classList.contains('is-active')).to.be.true;\n      expect(paneList[1].style.display).to.not.ok;\n\n      tabList[3].click();\n      vm.$nextTick(_ => {\n        setTimeout(() => {\n          expect(tabList[1].classList.contains('is-active')).to.be.true;\n          expect(paneList[1].style.display).to.not.ok;\n          expect(vm.activeName === 'tab-B');\n          done();\n        }, 200);\n      });\n    }, 100);\n  });\n  it('keyboard event', done => {\n    vm = createVue({\n      template: `\n        <el-tabs v-model=\"activeName\">\n          <el-tab-pane label=\"用户管理\" name=\"first\">A</el-tab-pane>\n          <el-tab-pane label=\"配置管理\" name=\"second\">B</el-tab-pane>\n          <el-tab-pane label=\"角色管理\" name=\"third\">C</el-tab-pane>\n          <el-tab-pane label=\"定时任务补偿\" name=\"fourth\">D</el-tab-pane>\n        </el-tabs>\n      `,\n      data() {\n        return {\n          activeName: 'second'\n        };\n      }\n    }, true);\n\n    expect(vm.activeName).to.be.equal('second');\n    vm.$nextTick(() => {\n      triggerKeyDown(vm.$el.querySelector('#tab-second'), 39);\n      expect(vm.activeName).to.be.equal('third');\n\n      triggerKeyDown(vm.$el.querySelector('#tab-third'), 39);\n      expect(vm.activeName).to.be.equal('fourth');\n\n      triggerKeyDown(vm.$el.querySelector('#tab-fourth'), 39);\n      expect(vm.activeName).to.be.equal('first');\n\n      triggerKeyDown(vm.$el.querySelector('#tab-first'), 37);\n      expect(vm.activeName).to.be.equal('fourth');\n\n      triggerKeyDown(vm.$el.querySelector('#tab-fourth'), 37);\n      expect(vm.activeName).to.be.equal('third');\n      done();\n    });\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/tag.spec.js",
    "content": "import { createTest, createVue, destroyVM } from '../util';\nimport Tag from 'packages/tag';\n\ndescribe('Tag', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', () => {\n    vm = createVue({\n      template: `\n      <el-tag></el-tag>\n      `\n    }, true);\n    expect(vm.$el.classList.contains('el-tag')).to.be.true;\n    expect(vm.$el.classList.contains('el-tag__close')).to.be.false;\n    expect(vm.$el.classList.contains('is-hit')).to.be.false;\n    expect(vm.$el.classList.contains('md-fade-center')).to.be.false;\n  });\n\n  it('text', () => {\n    vm = createVue({\n      template: `\n      <el-tag>标签</el-tag>\n      `\n    }, true);\n    expect(vm.$el.textContent.length).to.be.at.least(2);\n  });\n\n  it('type', () => {\n    vm = createVue({\n      template: `\n      <el-tag type=\"primary\"></el-tag>\n      `\n    }, true);\n    expect(vm.$el.classList.contains('el-tag--primary')).to.be.true;\n  });\n\n  it('hit', () => {\n    vm = createVue({\n      template: `\n      <el-tag hit></el-tag>\n      `\n    }, true);\n    expect(vm.$el.classList.contains('is-hit')).to.be.true;\n  });\n\n  it('closable', done => {\n    vm = createVue({\n      template: `\n      <el-tag closable @close=\"handleClose\">关闭标签</el-tag>\n      `,\n      data() {\n        return {\n          isClose: false\n        };\n      },\n      methods: {\n        handleClose() {\n          this.isClose = true;\n        }\n      }\n    }, true);\n    var closeBtn = vm.$el.querySelector('.el-tag .el-tag__close');\n    expect(closeBtn).to.exist;\n    closeBtn.click();\n    vm.$nextTick(_ => {\n      expect(vm.isClose).to.true;\n      done();\n    });\n  });\n\n  it('closeTransition', () => {\n    vm = createVue({\n      template: `\n      <el-tag closable closeTransition></el-tag>\n      `\n    }, true);\n    expect(vm.$el.classList.contains('md-fade-center')).to.be.false;\n  });\n\n  it('color', () => {\n    vm = createVue({\n      template: `\n      <el-tag ref=\"tag\" color=\"rgb(0, 0, 0)\"></el-tag>\n      `\n    }, true);\n    expect(vm.$el.style.backgroundColor).to.equal('rgb(0, 0, 0)');\n  });\n\n  it('click', done => {\n    vm = createVue({\n      template: `\n      <el-tag ref=\"tag\" @click=\"handleClick\">点击标签</el-tag>\n      `,\n      data() {\n        return {\n          clicksCount: 0\n        };\n      },\n      methods: {\n        handleClick() {\n          this.clicksCount = this.clicksCount + 1;\n        }\n      }\n    }, true);\n\n    let tag = vm.$refs.tag;\n    tag.$el.click();\n\n    setTimeout(_ => {\n      expect(vm.clicksCount).to.be.equal(1);\n      done();\n    }, 20);\n  });\n\n  it('theme', () => {\n    vm = createTest(Tag, { effect: 'dark' }, true);\n    const el = vm.$el;\n    expect(el.className).to.includes('el-tag--dark');\n    expect(el.className).to.not.includes('el-tag--light');\n    expect(el.className).to.not.includes('el-tag--plain');\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/time-picker.spec.js",
    "content": "import { createTest, destroyVM, createVue } from '../util';\nimport TimePicker from 'packages/time-picker';\n\nconst DELAY = 100;\n\ndescribe('TimePicker', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', () => {\n    vm = createTest(TimePicker, {\n      placeholder: 'test',\n      readonly: true\n    });\n    expect(vm.$el.querySelector('input').getAttribute('placeholder')).to.equal('test');\n    expect(vm.$el.querySelector('input').getAttribute('readonly')).to.ok;\n  });\n\n  it('format', () => {\n    vm = createTest(TimePicker, {\n      format: 'HH-mm-ss',\n      value: new Date(2016, 9, 10, 18, 40)\n    });\n    expect(vm.$el.querySelector('input').value).to.equal('18-40-00');\n  });\n\n  it('set AM/PM format', done => {\n    vm = createTest(TimePicker, {\n      format: 'hh:mm:ss A',\n      value: new Date(2016, 9, 10, 18, 40)\n    }, true);\n\n    const input = vm.$el.querySelector('input');\n\n    expect(vm.$el.querySelector('input').value).to.equal('06:40:00 PM');\n\n    input.blur();\n    input.focus();\n\n    setTimeout(_ => {\n      const list = vm.picker.$el.querySelectorAll('.el-time-spinner__list');\n      const hoursEl = list[0];\n      expect(hoursEl.querySelectorAll('.el-time-spinner__item')[0].textContent).to.equal('12 AM');\n      expect(hoursEl.querySelectorAll('.el-time-spinner__item')[1].textContent).to.equal('01 AM');\n      expect(hoursEl.querySelectorAll('.el-time-spinner__item')[12].textContent).to.equal('12 PM');\n      expect(hoursEl.querySelectorAll('.el-time-spinner__item')[15].textContent).to.equal('03 PM');\n      done();\n    }, DELAY);\n  });\n\n  it('default value', done => {\n    vm = createTest(TimePicker, {\n      value: new Date(2016, 9, 10, 18, 40)\n    }, true);\n\n    const input = vm.$el.querySelector('input');\n\n    input.blur();\n    input.focus();\n    input.blur();\n\n    setTimeout(_ => {\n      const times = vm.picker.$el.querySelectorAll('.active');\n\n      expect(times[0].textContent).to.equal('18');\n      expect(times[1].textContent).to.equal('40');\n      expect(times[2].textContent).to.equal('00');\n      done();\n    }, DELAY);\n  });\n\n  it('select time', done => {\n    vm = createVue({\n      template: '<el-time-picker ref=\"compo\" v-model=\"value\"></el-time-picker>',\n      data() {\n        return {\n          value: ''\n        };\n      }\n    }, true);\n    const timePicker = vm.$refs.compo;\n    const input = timePicker.$el.querySelector('input');\n\n    input.blur();\n    input.focus();\n\n    setTimeout(_ => {\n      const list = timePicker.picker.$el.querySelectorAll('.el-time-spinner__list');\n\n      const hoursEl = list[0];\n      const minutesEl = list[1];\n      const secondsEl = list[2];\n      const hourEl = hoursEl.querySelectorAll('.el-time-spinner__item')[4];\n      const minuteEl = minutesEl.querySelectorAll('.el-time-spinner__item')[36];\n      const secondEl = secondsEl.querySelectorAll('.el-time-spinner__item')[20];\n\n      // click hour, minute, second one at a time.\n      hourEl.click();\n      vm.$nextTick(_ => {\n        minuteEl.click();\n        vm.$nextTick(_ => {\n          secondEl.click();\n          setTimeout(_ => {\n            const date = timePicker.picker.date;\n            expect(hourEl.classList.contains('active')).to.true;\n            expect(minuteEl.classList.contains('active')).to.true;\n            expect(secondEl.classList.contains('active')).to.true;\n            expect(date.getHours()).to.equal(4);\n            expect(date.getMinutes()).to.equal(36);\n            expect(date.getSeconds()).to.equal(20);\n            done();\n          }, DELAY);\n        });\n      });\n    }, DELAY);\n  });\n\n  it('click cancel button', done => {\n    vm = createVue({\n      template: '<el-time-picker ref=\"compo\" v-model=\"value\"></el-time-picker>',\n      data() {\n        return {\n          value: ''\n        };\n      }\n    }, true);\n    const timePicker = vm.$refs.compo;\n    const input = timePicker.$el.querySelector('input');\n\n    input.blur();\n    input.focus();\n\n    setTimeout(_ => {\n      timePicker.picker.$el.querySelector('.el-time-panel__btn.cancel').click();\n\n      setTimeout(_ => {\n        expect(vm.value).to.equal('');\n        done();\n      }, DELAY);\n    }, DELAY);\n  });\n\n  it('click confirm button', done => {\n    vm = createVue({\n      template: '<el-time-picker ref=\"compo\" v-model=\"value\"></el-time-picker>',\n      data() {\n        return {\n          value: ''\n        };\n      }\n    }, true);\n    const timePicker = vm.$refs.compo;\n    const input = timePicker.$el.querySelector('input');\n\n    input.blur();\n    input.focus();\n\n    setTimeout(_ => {\n      timePicker.picker.$el.querySelector('.el-time-panel__btn.confirm').click();\n\n      setTimeout(_ => {\n        expect(vm.value.toISOString()).to.exist;\n        done();\n      }, DELAY);\n    }, DELAY);\n  });\n\n  it('set format', done => {\n    vm = createTest(TimePicker, {\n      pickerOptions: {\n        format: 'HH:mm'\n      }\n    }, true);\n    const input = vm.$el.querySelector('input');\n    input.blur();\n    input.focus();\n\n    setTimeout(_ => {\n      expect(vm.picker.$el.querySelectorAll('.el-time-spinner__wrapper')[2].style.display).to.equal('none');\n      done();\n    }, 20);\n  });\n\n  it('set format to empty', done => {\n    vm = createTest(TimePicker, {\n      pickerOptions: {\n        format: ''\n      }\n    }, true);\n    const input = vm.$el.querySelector('input');\n    input.blur();\n    input.focus();\n\n    setTimeout(_ => {\n      expect(vm.picker.$el.querySelectorAll('.el-time-spinner__wrapper')[2].style.display).to.equal('none');\n      done();\n    }, DELAY);\n  });\n\n  it('selectableRange', done => {\n    vm = createTest(TimePicker, {\n      pickerOptions: {\n        selectableRange: ['17:30:00 - 18:30:00', '18:50:00 - 20:30:00', '21:00:00 - 22:00:00']\n      }\n    }, true);\n    const input = vm.$el.querySelector('input');\n\n    input.blur();\n    input.focus();\n\n    setTimeout(_ => {\n      const list = vm.picker.$el.querySelectorAll('.el-time-spinner__list');\n      const hoursEl = list[0];\n      const disabledHours = [].slice\n        .call(hoursEl.querySelectorAll('.disabled'))\n        .map(node => Number(node.textContent));\n\n      hoursEl.querySelectorAll('.disabled')[0].click();\n      expect(disabledHours).to.not.include.members([17, 18, 19, 20, 21, 22]);\n\n      const minutesEl = list[1];\n      hoursEl.querySelectorAll('.el-time-spinner__item')[18].click();\n      setTimeout(_ => {\n        const disabledMinutes = [].slice\n          .call(minutesEl.querySelectorAll('.disabled'))\n          .map(node => Number(node.textContent));\n        expect(disabledMinutes.every(t => t > 30 && t < 50)).to.equal(true);\n        expect(disabledMinutes.length).to.equal(19);\n        done();\n      }, DELAY);\n    }, DELAY);\n  });\n\n  it('event focus and blur', done => {\n    vm = createVue({\n      template: `\n        <el-date-picker\n          type=\"date\"\n          placeholder=\"选择日期\"\n          ref=\"picker\">\n        </el-date-picker>\n      `\n    }, true);\n\n    const spyFocus = sinon.spy();\n    const spyBlur = sinon.spy();\n\n    vm.$refs.picker.$on('focus', spyFocus);\n    vm.$refs.picker.$on('blur', spyBlur);\n    vm.$el.querySelector('input').focus();\n\n    vm.$nextTick(_ => {\n      expect(spyFocus.calledOnce).to.be.true;\n      vm.$refs.picker.pickerVisible = false;\n      vm.$nextTick(_ => {\n        expect(spyBlur.calledOnce).to.be.true;\n        done();\n      });\n    });\n  });\n\n  it('focus', done => {\n    vm = createVue({\n      template: `\n        <el-date-picker\n          type=\"date\"\n          placeholder=\"选择日期\"\n          ref=\"picker\">\n        </el-date-picker>\n      `\n    }, true);\n\n    const spy = sinon.spy();\n\n    vm.$refs.picker.$on('focus', spy);\n    vm.$refs.picker.focus();\n\n    vm.$nextTick(_ => {\n      expect(spy.calledOnce).to.be.true;\n      done();\n    });\n  });\n\n});\n\ndescribe('TimePicker(range)', () => {\n  let vm;\n\n  afterEach(() => destroyVM(vm));\n\n  it('create', done => {\n    vm = createTest(TimePicker, {\n      isRange: true,\n      value: [new Date(2016, 9, 10, 18, 40), new Date(2016, 9, 10, 19, 40)]\n    }, true);\n\n    vm.$el.querySelector('input').click();\n\n    setTimeout(_ => {\n      expect(vm.picker.$el.querySelectorAll('.el-time-range-picker__cell')).to.length(2);\n      expect(vm.picker.minDate.getTime()).to.equal(new Date(2016, 9, 10, 18, 40).getTime());\n      expect(vm.picker.maxDate.getTime()).to.equal(new Date(2016, 9, 10, 19, 40).getTime());\n      done();\n    }, DELAY);\n  });\n\n  it('default value', done => {\n    const defaultValue = [new Date(2000, 9, 1, 10, 0, 0), new Date(2000, 9, 1, 11, 0, 0)];\n    vm = createVue({\n      template: '<el-time-picker ref=\"compo\" is-range v-model=\"value\" :default-value=\"defaultValue\"></el-time-picker>',\n      data() {\n        return {\n          value: '',\n          defaultValue\n        };\n      }\n    }, true);\n\n    const timePicker = vm.$refs.compo;\n    timePicker.$el.querySelector('input').click();\n\n    setTimeout(_ => {\n      expect(timePicker.picker.minDate.getTime()).to.equal(defaultValue[0].getTime());\n      expect(timePicker.picker.maxDate.getTime()).to.equal(defaultValue[1].getTime());\n      done();\n    }, DELAY);\n  });\n\n  it('cancel button', done => {\n    vm = createVue({\n      template: '<el-time-picker ref=\"compo\" is-range v-model=\"value\"></el-time-picker>',\n      data() {\n        return {\n          value: ''\n        };\n      }\n    }, true);\n\n    const timePicker = vm.$refs.compo;\n    timePicker.$el.querySelector('input').click();\n    setTimeout(_ => {\n      timePicker.picker.$el.querySelector('.cancel').click();\n      setTimeout(_ => {\n        expect(timePicker.picker.visible).to.false;\n        expect(vm.value).to.equal('');\n        done();\n      }, DELAY);\n    }, DELAY);\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/time-select.spec.js",
    "content": "import { createTest, createVue, destroyVM } from '../util';\nimport TimeSelect from 'packages/time-select';\nimport Vue from 'vue';\n\ndescribe('TimeSelect', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('should render correct contents', done => {\n    vm = createTest(TimeSelect, {\n      pickerOptions: {\n        start: '08:30',\n        step: '00:15',\n        end: '18:30'\n      },\n      placeholder: 'test'\n    }, true);\n    const input = vm.$el.querySelector('input');\n\n    input.focus();\n    input.blur();\n\n    Vue.nextTick(_ => {\n      expect(vm.picker.start).to.equal('08:30');\n      expect(vm.picker.end).to.equal('18:30');\n      expect(vm.picker.step).to.equal('00:15');\n      expect(vm.$el.querySelector('input').getAttribute('placeholder')).to.equal('test');\n      done();\n    });\n  });\n\n  it('select time', done => {\n    vm = createVue({\n      template: `\n        <div>\n          <el-time-select ref=\"compo\" v-model=\"value\">\n          </el-time-select>\n        </div>\n      `,\n\n      data() {\n        return {\n          value: ''\n        };\n      }\n    }, true);\n    const input = vm.$el.querySelector('input');\n\n    input.focus();\n    input.blur();\n\n    Vue.nextTick(_ => {\n      const items = vm.$refs.compo.picker.$el.querySelectorAll('.time-select-item');\n      const target = items[4];\n      const time = target.textContent;\n\n      target.click();\n      Vue.nextTick(_ => {\n        expect(vm.value).to.equal(time);\n        done();\n      });\n    });\n  });\n\n  it('set default value', done => {\n    vm = createTest(TimeSelect, {\n      value: '14:30'\n    }, true);\n    const input = vm.$el.querySelector('input');\n\n    input.focus();\n    input.blur();\n\n    setTimeout(_ => {\n      expect(input.value).to.equal('14:30');\n      expect(vm.picker.$el.querySelector('.selected')).to.be.ok;\n      expect(vm.picker.$el.querySelector('.selected').textContent).to.equal('14:30');\n      done();\n    }, 50);\n  });\n\n  it('set minTime', done => {\n    vm = createVue(`\n      <el-time-select\n        ref=\"picker\"\n        :picker-options=\"{\n          minTime: '14:30'\n        }\">\n      </el-time-select>\n    `, true);\n    const input = vm.$el.querySelector('input');\n    const picker = vm.$refs.picker;\n\n    input.focus();\n    input.blur();\n\n    setTimeout(_ => {\n      const elms = picker.picker.$el.querySelectorAll('.disabled');\n      const elm = elms[elms.length - 1];\n\n      expect(elm.textContent).to.equal('14:30');\n      done();\n    }, 50);\n  });\n\n  it('minTime < value', done => {\n    vm = createVue({\n      template: `\n        <el-time-select\n          ref=\"picker\"\n          v-model=\"value\"\n          :picker-options=\"{\n            minTime: '14:30'\n          }\">\n        </el-time-select>\n      `,\n      data() {\n        return { value: '09:30' };\n      }\n    }, true);\n    const input = vm.$el.querySelector('input');\n    const picker = vm.$refs.picker;\n\n    input.focus();\n    input.blur();\n\n    setTimeout(_ => {\n      vm.value = '10:30';\n\n      setTimeout(_ => {\n        expect(picker.picker.value).to.equal('10:30');\n        done();\n      }, 50);\n    }, 50);\n  });\n\n  it('set maxTime', done => {\n    vm = createVue(`\n      <el-time-select\n        ref=\"picker\"\n        :picker-options=\"{\n          maxTime: '14:30',\n          step: '00:30'\n        }\">\n      </el-time-select>\n    `, true);\n    const input = vm.$el.querySelector('input');\n    const picker = vm.$refs.picker;\n\n    input.focus();\n    input.blur();\n\n    setTimeout(_ => {\n      const elm = picker.picker.$el.querySelector('.disabled');\n\n      expect(elm.textContent).to.equal('14:30');\n      done();\n    }, 50);\n  });\n\n  it('maxTime > value', done => {\n    vm = createVue({\n      template: `\n        <el-time-select\n          ref=\"picker\"\n          v-model=\"value\"\n          :picker-options=\"{\n            maxTime: '14:30'\n          }\">\n        </el-time-select>\n      `,\n      data() {\n        return { value: '09:30' };\n      }\n    }, true);\n    const input = vm.$el.querySelector('input');\n    const picker = vm.$refs.picker;\n\n    input.focus();\n    input.blur();\n\n    setTimeout(_ => {\n      vm.value = '10:30';\n\n      setTimeout(_ => {\n        expect(picker.picker.value).to.equal('10:30');\n        done();\n      }, 50);\n    }, 50);\n  });\n\n  it('event focus and blur', done => {\n    vm = createVue({\n      template: `\n        <el-time-select\n          ref=\"picker\"\n          :picker-options=\"{\n            start: '08:30',\n            step: '00:15',\n            end: '18:30'\n          }\"\n          placeholder=\"选择时间\">\n        </el-time-select>\n      `\n    }, true);\n\n    const spyFocus = sinon.spy();\n    const spyBlur = sinon.spy();\n\n    vm.$refs.picker.$on('focus', spyFocus);\n    vm.$refs.picker.$on('blur', spyBlur);\n    vm.$el.querySelector('input').focus();\n\n    vm.$nextTick(_ => {\n      expect(spyFocus.calledOnce).to.be.true;\n      vm.$refs.picker.pickerVisible = false;\n      vm.$nextTick(_ => {\n        expect(spyBlur.calledOnce).to.be.true;\n        done();\n      });\n    });\n  });\n\n  it('focus', done => {\n    vm = createVue({\n      template: `\n        <el-time-select ref=\"picker\"></el-time-select>\n      `\n    }, true);\n\n    const spy = sinon.spy();\n\n    vm.$refs.picker.$on('focus', spy);\n    vm.$refs.picker.focus();\n\n    vm.$nextTick(_ => {\n      expect(spy.calledOnce).to.be.true;\n      done();\n    });\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/timeline.spec.js",
    "content": "import { createVue, destroyVM } from '../util';\n\ndescribe('Timeline', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', () => {\n    vm = createVue({\n      template: `\n        <el-timeline>\n          <el-timeline-item\n            v-for=\"(activity, index) in activities\"\n            :key=\"index\"\n            :timestamp=\"activity.timestamp\">\n            {{activity.content}}\n          </el-timeline-item>\n        </el-timeline>\n      `,\n      data() {\n        return {\n          activities: [{\n            content: '创建成功',\n            timestamp: '2018-04-11'\n          }, {\n            content: '通过审核',\n            timestamp: '2018-04-13'\n          }, {\n            content: '活动按期开始',\n            timestamp: '2018-04-15'\n          }]\n        };\n      }\n    }, true);\n    let contentElms = vm.$el.querySelectorAll('.el-timeline-item__content');\n    contentElms.forEach((elm, index) => {\n      expect(elm.innerText).to.equal(vm.activities[index].content);\n    });\n    let timestampElms = vm.$el.querySelectorAll('.el-timeline-item__timestamp');\n    timestampElms.forEach((elm, index) => {\n      expect(elm.innerText).to.equal(vm.activities[index].timestamp);\n    });\n  });\n\n  it('reverse', done => {\n    vm = createVue({\n      template: `\n        <el-timeline :reverse=\"reverse\">\n          <el-timeline-item\n            v-for=\"(activity, index) in activities\"\n            :key=\"index\"\n            :timestamp=\"activity.timestamp\">\n            {{activity.content}}\n          </el-timeline-item>\n        </el-timeline>\n      `,\n\n      data() {\n        return {\n          reverse: true,\n          activities: [{\n            content: '创建成功',\n            timestamp: '2018-04-11'\n          }, {\n            content: '通过审核',\n            timestamp: '2018-04-13'\n          }, {\n            content: '活动按期开始',\n            timestamp: '2018-04-15'\n          }]\n        };\n      }\n    }, true);\n\n    const contentElms = vm.$el.querySelectorAll('.el-timeline-item__content');\n    contentElms.forEach((elm, index) => {\n      expect(elm.innerText).to.equal(vm.activities[vm.activities.length - index - 1].content);\n    });\n\n    vm.reverse = false;\n    vm.$nextTick(() => {\n      const contentElms = vm.$el.querySelectorAll('.el-timeline-item__content');\n      contentElms.forEach((elm, index) => {\n        expect(elm.innerText).to.equal(vm.activities[index].content);\n      });\n      done();\n    });\n  });\n\n  it('placement', () => {\n    vm = createVue({\n      template: `\n        <el-timeline>\n          <el-timeline-item\n            v-for=\"(activity, index) in activities\"\n            :key=\"index\"\n            :timestamp=\"activity.timestamp\"\n            :placement=\"activity.placement\">\n            {{activity.content}}\n          </el-timeline-item>\n        </el-timeline>\n      `,\n\n      data() {\n        return {\n          activities: [{\n            content: '创建成功',\n            timestamp: '2018-04-11',\n            placement: 'top'\n          }, {\n            content: '通过审核',\n            timestamp: '2018-04-13'\n          }, {\n            content: '活动按期开始',\n            timestamp: '2018-04-15'\n          }]\n        };\n      }\n    }, true);\n\n    const timestampElm = vm.$el.querySelectorAll('.el-timeline-item__timestamp')[0];\n    expect(timestampElm.classList.contains('is-top')).to.true;\n  });\n\n  it('hide-timestamp', () => {\n    vm = createVue({\n      template: `\n        <el-timeline>\n          <el-timeline-item\n            v-for=\"(activity, index) in activities\"\n            :key=\"index\"\n            :timestamp=\"activity.timestamp\"\n            :hide-timestamp=\"activity.hideTimestamp\">\n            {{activity.content}}\n          </el-timeline-item>\n        </el-timeline>\n      `,\n\n      data() {\n        return {\n          activities: [{\n            content: '创建成功',\n            timestamp: '2018-04-11',\n            hideTimestamp: true\n          }, {\n            content: '通过审核',\n            timestamp: '2018-04-13'\n          }, {\n            content: '活动按期开始',\n            timestamp: '2018-04-15'\n          }]\n        };\n      }\n    }, true);\n\n    const timestampElms = vm.$el.querySelectorAll('.el-timeline-item__timestamp');\n    expect(timestampElms.length).to.equal(2);\n  });\n\n  it('color', () => {\n    vm = createVue({\n      template: `\n        <el-timeline>\n          <el-timeline-item\n            timestamp=\"2018-04-11\"\n            color=\"#f00\">\n            创建成功\n          </el-timeline-item>\n        </el-timeline>\n      `\n    }, true);\n\n    const nodeElm = vm.$el.querySelector('.el-timeline-item__node');\n    expect(nodeElm.style.backgroundColor).to.equal('rgb(255, 0, 0)');\n  });\n\n  it('type', () => {\n    vm = createVue({\n      template: `\n        <el-timeline>\n          <el-timeline-item\n            timestamp=\"2018-04-11\"\n            type=\"primary\">\n            创建成功\n          </el-timeline-item>\n        </el-timeline>\n      `\n    }, true);\n\n    const nodeElm = vm.$el.querySelector('.el-timeline-item__node');\n    expect(nodeElm.classList.contains('el-timeline-item__node--primary')).to.true;\n  });\n\n  it('size', () => {\n    vm = createVue({\n      template: `\n        <el-timeline>\n          <el-timeline-item\n            timestamp=\"2018-04-11\"\n            type=\"large\">\n            创建成功\n          </el-timeline-item>\n        </el-timeline>\n      `\n    }, true);\n\n    const nodeElm = vm.$el.querySelector('.el-timeline-item__node');\n    expect(nodeElm.classList.contains('el-timeline-item__node--large')).to.true;\n  });\n\n  it('icon', () => {\n    vm = createVue({\n      template: `\n        <el-timeline>\n          <el-timeline-item\n            timestamp=\"2018-04-11\"\n            icon=\"el-icon-more\">\n            创建成功\n          </el-timeline-item>\n        </el-timeline>\n      `\n    }, true);\n\n    const nodeElm = vm.$el.querySelector('.el-timeline-item__icon');\n    expect(nodeElm.classList.contains('el-icon-more')).to.true;\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/tooltip.spec.js",
    "content": "import { createVue, triggerEvent, destroyVM } from '../util';\n\ndescribe('Tooltip', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', done => {\n    vm = createVue(`\n      <el-tooltip ref=\"tooltip\" content=\"提示文字\">\n        <button>click</button>\n      </el-tooltip>`);\n\n    vm.$nextTick(_ => {\n      expect(vm.$refs.tooltip.popperVM.$el).to.have.property('textContent', '提示文字');\n      done();\n    });\n  });\n\n  it('custom popper class', done => {\n    vm = createVue(`\n      <el-tooltip ref=\"tooltip\" content=\"提示文字\" popper-class=\"custom-popper\">\n        <button>click</button>\n      </el-tooltip>`);\n    vm.$nextTick(_ => {\n      expect(vm.$refs.tooltip.popperVM.$el.classList.contains('custom-popper')).to.true;\n      done();\n    });\n  });\n\n  describe('manual', () => {\n    const vm = createVue({\n      template: `\n        <el-tooltip ref=\"tooltip\" manual content=\"abc\" v-model=\"show\">\n          <button>click</button>\n        </el-tooltip>\n      `,\n\n      data() {\n        return { show: false };\n      }\n    }, true);\n    const tooltip = vm.$refs.tooltip;\n\n    it('showPopper is false', () => {\n      triggerEvent(tooltip.$el, 'mouseenter');\n      expect(tooltip.showPopper).to.false;\n    });\n    it('show', done => {\n      vm.show = true;\n      vm.$nextTick(_ => {\n        expect(tooltip.showPopper).to.true;\n        done();\n      });\n    });\n    it('still show when trigger mouseleave', () => {\n      triggerEvent(tooltip.$el, 'mouseleave');\n      expect(tooltip.showPopper).to.true;\n    });\n    it('hidden', done => {\n      vm.show = false;\n      vm.$nextTick(_ => {\n        expect(tooltip.showPopper).to.false;\n        done();\n      });\n    });\n  });\n\n  describe('hover', () => {\n    const vm = createVue(`\n      <el-tooltip ref=\"tooltip\" content=\"提示文字\">\n        <button>click</button>\n      </el-tooltip>\n    `);\n    const tooltip = vm.$refs.tooltip;\n\n    triggerEvent(tooltip.$el, 'mouseenter');\n    it('popperElm is exist', () => expect(tooltip.popperElm).to.exist);\n    it('showPopper is true', () => expect(tooltip.showPopper).to.true);\n    it('close popper', done => {\n      triggerEvent(tooltip.$el, 'mouseleave');\n      setTimeout(() => {\n        expect(tooltip.showPopper).to.false;\n        done();\n      }, 300);\n    });\n  });\n\n  it('light mode', done => {\n    vm = createVue(`\n      <el-tooltip ref=\"tooltip\" content=\"abc\" effect=\"light\">\n        <button>abc</button>\n      </el-tooltip>\n    `);\n    vm.$nextTick(_ => {\n      expect(vm.$refs.tooltip.popperVM.$el.classList.contains('is-light')).to.exist;\n      done();\n    });\n  });\n  it('hide after', done => {\n    vm = createVue(`\n      <el-tooltip ref=\"tooltip\" content=\"提示文字\" :hide-after=\"300\">\n        <button>click</button>\n      </el-tooltip>`);\n    const tooltip = vm.$refs.tooltip;\n    vm.$nextTick(_ => {\n      triggerEvent(tooltip.$el, 'mouseenter');\n      setTimeout(() => {\n        expect(tooltip.showPopper).to.be.true;\n        setTimeout(() => {\n          expect(tooltip.showPopper).to.be.false;\n          done();\n        }, 300);\n      }, 100);\n    });\n  });\n  it('remove focus', done => {\n    vm = createVue(`\n    <el-tooltip ref=\"tooltip\" content=\"提示文字\" :hide-after=\"300\">\n      <button>click</button>\n    </el-tooltip>`);\n    const tooltip = vm.$refs.tooltip;\n    vm.$nextTick(_ => {\n      triggerEvent(tooltip.$el, 'mouseenter');\n      setTimeout(() => {\n        tooltip.focusing = true;\n        tooltip.$el.click();\n        setTimeout(() => {\n          expect(tooltip.showPopper).to.be.false;\n          done();\n        }, 300);\n      }, 100);\n    });\n  });\n  it('reference element focus', done => {\n    vm = createVue(`\n    <el-tooltip ref=\"tooltip\" content=\"提示文字\">\n      <button>click</button>\n    </el-tooltip>`);\n    const tooltip = vm.$refs.tooltip;\n    vm.$nextTick(_ => {\n      triggerEvent(tooltip.$el, 'focus');\n      setTimeout(() => {\n        expect(tooltip.showPopper).to.be.true;\n        expect(tooltip.focusing).to.be.true;\n        triggerEvent(tooltip.$el, 'blur');\n        setTimeout(() => {\n          expect(tooltip.showPopper).to.be.false;\n          expect(tooltip.focusing).to.be.false;\n          done();\n        }, 300);\n      }, 100);\n    });\n  });\n  it('custom tabindex', () => {\n    vm = createVue(`\n      <el-tooltip ref=\"tooltip\" content=\"提示文字\" :tabindex=\"-1\">\n        <button>click</button>\n      </el-tooltip>\n    `, true);\n    expect(vm.$el.getAttribute('tabindex')).to.be.equal('-1');\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/transfer.spec.js",
    "content": "import { createTest, createVue, destroyVM } from '../util';\nimport Transfer from 'packages/transfer';\n\ndescribe('Transfer', () => {\n  let vm;\n  const getTestData = () => {\n    const data = [];\n    for (let i = 1; i <= 15; i++) {\n      data.push({\n        key: i,\n        label: `备选项 ${ i }`,\n        disabled: i % 4 === 0\n      });\n    }\n    return data;\n  };\n  const createTransfer = (props, opts) => {\n    return createVue(Object.assign({\n      template: `\n        <el-transfer :data=\"testData\" ref=\"transfer\" ${props}>\n        </el-transfer>\n      `,\n\n      created() {\n        this.testData = getTestData();\n      }\n    }, opts));\n  };\n\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  it('create', () => {\n    vm = createTest(Transfer, true);\n    expect(vm.$el).to.exist;\n  });\n\n  it('default target list', () => {\n    vm = createTransfer('v-model=\"value\"', {\n      data() {\n        return {\n          value: [1, 4]\n        };\n      }\n    });\n    expect(vm.$refs.transfer.sourceData.length).to.equal(13);\n  });\n\n  it('filterable', done => {\n    vm = createTransfer('v-model=\"value\" filterable :filter-method=\"method\"', {\n      data() {\n        return {\n          value: [],\n          method(query, option) {\n            return option.key === Number(query);\n          }\n        };\n      }\n    });\n    const transfer = vm.$refs.transfer;\n    const leftList = transfer.$el.querySelector('.el-transfer-panel').__vue__;\n    leftList.query = '1';\n    setTimeout(_ => {\n      expect(leftList.filteredData.length).to.equal(1);\n      done();\n    }, 50);\n  });\n\n  it('transfer', done => {\n    vm = createTransfer('v-model=\"value\" :left-default-checked=\"[2, 3]\" :right-default-checked=\"[1]\"', {\n      data() {\n        return {\n          value: [1, 4]\n        };\n      }\n    });\n    const transfer = vm.$refs.transfer;\n\n    setTimeout(_ => {\n      transfer.addToLeft();\n      setTimeout(_ => {\n        expect(transfer.sourceData.length).to.equal(14);\n        transfer.addToRight();\n        setTimeout(_ => {\n          expect(transfer.sourceData.length).to.equal(12);\n          done();\n        }, 50);\n      }, 50);\n    }, 50);\n  });\n\n  it('customize', () => {\n    vm = createTransfer('v-model=\"value\" :titles=\"titles\" :render-content=\"renderFunc\" :format=\"format\"', {\n      data() {\n        return {\n          value: [2],\n          titles: ['表1', '表2'],\n          format: { noChecked: 'no', hasChecked: 'has' },\n          renderFunc(h, option) {\n            return <span>{ option.key } - { option.label }</span>;\n          }\n        };\n      }\n    });\n    const transfer = vm.$refs.transfer.$el;\n    const label = transfer.querySelector('.el-transfer-panel__header .el-checkbox__label');\n    expect(label.innerText.indexOf('表1') > -1).to.true;\n    expect(transfer.querySelector('.el-transfer-panel__list .el-checkbox__label span').innerText).to.equal('1 - 备选项 1');\n    expect(label.querySelector('span').innerText).to.equal('no');\n  });\n\n  it('check', () => {\n    vm = createTransfer('v-model=\"value\"', {\n      data() {\n        return {\n          value: []\n        };\n      }\n    });\n    const leftList = vm.$refs.transfer.$el.querySelector('.el-transfer-panel').__vue__;\n    leftList.handleAllCheckedChange({ target: { checked: true } });\n    expect(leftList.checked.length).to.equal(12);\n  });\n\n  describe('target order', () => {\n    it('original(default)', done => {\n      vm = createTransfer('v-model=\"value\" :left-default-checked=\"[2, 3]\"', {\n        data() {\n          return {\n            value: [1, 4]\n          };\n        }\n      });\n      const transfer = vm.$refs.transfer;\n      setTimeout(() => {\n        transfer.addToRight();\n        setTimeout(() => {\n          const targetItems = [].slice.call(vm.$el.querySelectorAll('.el-transfer__buttons + .el-transfer-panel .el-transfer-panel__body .el-checkbox__label span'));\n          expect(targetItems.map(item => item.innerText)).to.deep.equal(['备选项 1', '备选项 2', '备选项 3', '备选项 4']);\n          done();\n        }, 50);\n      }, 50);\n    });\n\n    it('push', done => {\n      vm = createTransfer('v-model=\"value\" :left-default-checked=\"[2, 3]\" target-order=\"push\"', {\n        data() {\n          return {\n            value: [1, 4]\n          };\n        }\n      });\n      const transfer = vm.$refs.transfer;\n      setTimeout(() => {\n        transfer.addToRight();\n        setTimeout(() => {\n          const targetItems = [].slice.call(vm.$el.querySelectorAll('.el-transfer__buttons + .el-transfer-panel .el-transfer-panel__body .el-checkbox__label span'));\n          expect(targetItems.map(item => item.innerText)).to.deep.equal(['备选项 1', '备选项 4', '备选项 2', '备选项 3']);\n          done();\n        }, 50);\n      }, 50);\n    });\n\n    it('unshift', done => {\n      vm = createTransfer('v-model=\"value\" :left-default-checked=\"[2, 3]\" target-order=\"unshift\"', {\n        data() {\n          return {\n            value: [1, 4]\n          };\n        }\n      });\n      const transfer = vm.$refs.transfer;\n      setTimeout(() => {\n        transfer.addToRight();\n        setTimeout(() => {\n          const targetItems = [].slice.call(vm.$el.querySelectorAll('.el-transfer__buttons + .el-transfer-panel .el-transfer-panel__body .el-checkbox__label span'));\n          expect(targetItems.map(item => item.innerText)).to.deep.equal(['备选项 2', '备选项 3', '备选项 1', '备选项 4']);\n          done();\n        }, 50);\n      }, 50);\n    });\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/tree.spec.js",
    "content": "import { createVue, destroyVM, waitImmediate, wait } from '../util';\n\nconst DELAY = 10;\n\ndescribe('Tree', () => {\n  let vm;\n  afterEach(() => {\n    destroyVM(vm);\n  });\n\n  const getTreeVm = (props, options) => {\n    return createVue(Object.assign({\n      template: `\n        <el-tree ref=\"tree\" :data=\"data\" ${ props }></el-tree>\n        `,\n\n      data() {\n        return {\n          defaultExpandedKeys: [],\n          defaultCheckedKeys: [],\n          clickedNode: null,\n          count: 1,\n          data: [{\n            id: 1,\n            label: '一级 1',\n            children: [{\n              id: 11,\n              label: '二级 1-1',\n              children: [{\n                id: 111,\n                label: '三级 1-1'\n              }]\n            }]\n          }, {\n            id: 2,\n            label: '一级 2',\n            children: [{\n              id: 21,\n              label: '二级 2-1'\n            }, {\n              id: 22,\n              label: '二级 2-2'\n            }]\n          }, {\n            id: 3,\n            label: '一级 3',\n            children: [{\n              id: 31,\n              label: '二级 3-1'\n            }, {\n              id: 32,\n              label: '二级 3-2'\n            }]\n          }],\n          defaultProps: {\n            children: 'children',\n            label: 'label'\n          }\n        };\n      }\n    }, options), true);\n  };\n\n  const getDisableTreeVm = (props, options) => {\n    return createVue(Object.assign({\n      template: `\n        <el-tree ref=\"tree\" :data=\"data\" ${ props }></el-tree>\n        `,\n\n      data() {\n        return {\n          defaultExpandedKeys: [],\n          defaultCheckedKeys: [],\n          clickedNode: null,\n          count: 1,\n          data: [{\n            id: 1,\n            label: '一级 1',\n            children: [{\n              id: 11,\n              label: '二级 1-1',\n              children: [{\n                id: 111,\n                label: '三级 1-1',\n                disabled: true\n              }]\n            }]\n          }, {\n            id: 2,\n            label: '一级 2',\n            children: [{\n              id: 21,\n              label: '二级 2-1'\n            }, {\n              id: 22,\n              label: '二级 2-2'\n            }]\n          }, {\n            id: 3,\n            label: '一级 3',\n            children: [{\n              id: 31,\n              label: '二级 3-1'\n            }, {\n              id: 32,\n              label: '二级 3-2'\n            }]\n          }],\n          defaultProps: {\n            children: 'children',\n            label: 'label',\n            disabled: 'disabled'\n          }\n        };\n      }\n    }, options), true);\n  };\n\n  const ALL_NODE_COUNT = 9;\n\n  it('create', () => {\n    vm = getTreeVm(':props=\"defaultProps\" default-expand-all');\n    expect(document.querySelector('.el-tree')).to.exist;\n    expect(document.querySelectorAll('.el-tree > .el-tree-node').length).to.equal(3);\n    expect(document.querySelectorAll('.el-tree .el-tree-node').length).to.equal(ALL_NODE_COUNT);\n    vm.data[1].children = [{ label: '二级 2-1' }];\n    const tree = vm.$children[0];\n    expect(tree.children).to.deep.equal(vm.data);\n  });\n\n  it('click node', done => {\n    vm = getTreeVm(':props=\"defaultProps\" @node-click=\"handleNodeClick\"', {\n      methods: {\n        handleNodeClick(data) {\n          this.clickedNode = data;\n        }\n      }\n    });\n    const firstNode = vm.$el.querySelector('.el-tree-node__content');\n    firstNode.click();\n    expect(vm.clickedNode.label).to.equal('一级 1');\n    setTimeout(() => {\n      expect(vm.$el.querySelector('.el-tree-node').classList.contains('is-expanded')).to.true;\n      firstNode.click();\n      setTimeout(() => {\n        expect(vm.$el.querySelector('.el-tree-node').classList.contains('is-expanded')).to.false;\n        done();\n      }, DELAY);\n    }, DELAY);\n  });\n\n  it('current change', done => {\n    vm = getTreeVm(':props=\"defaultProps\" @current-change=\"handleCurrentChange\"', {\n      methods: {\n        handleCurrentChange(data) {\n          this.currentNode = data;\n        }\n      }\n    });\n    const firstNode = vm.$el.querySelector('.el-tree-node__content');\n    firstNode.click();\n    expect(vm.currentNode.label).to.equal('一级 1');\n    done();\n  });\n\n  it('emptyText', (done) => {\n    vm = getTreeVm(':props=\"defaultProps\"');\n    vm.data = [];\n    vm.$nextTick(() => {\n      expect(vm.$el.querySelectorAll('.el-tree__empty-block').length).to.equal(1);\n      done();\n    });\n  });\n\n  it('highlight current', done => {\n    vm = getTreeVm(':props=\"defaultProps\" highlight-current');\n    const firstNode = document.querySelector('.el-tree-node');\n    firstNode.click();\n    vm.$nextTick(() => {\n      expect(firstNode.className.indexOf('is-current')).to.not.equal(-1);\n      done();\n    });\n  });\n\n  it('expandOnNodeClick', done => {\n    vm = getTreeVm(':props=\"defaultProps\" :expand-on-click-node=\"false\"');\n    const firstNode = document.querySelector('.el-tree-node');\n    firstNode.click();\n    vm.$nextTick(() => {\n      expect(firstNode.className.indexOf('is-expanded')).to.equal(-1);\n      done();\n    });\n  });\n\n  it('checkOnNodeClick', done => {\n    vm = getTreeVm(':props=\"defaultProps\" show-checkbox check-on-click-node');\n    const firstNode = document.querySelector('.el-tree-node');\n    firstNode.click();\n    vm.$nextTick(() => {\n      expect(firstNode.querySelector('input').checked).to.true;\n      done();\n    });\n  });\n\n  it('current-node-key', () => {\n    vm = getTreeVm(':props=\"defaultProps\" default-expand-all highlight-current node-key=\"id\" :current-node-key=\"11\"');\n    const currentNodeLabel = document.querySelector('.is-current .el-tree-node__label').textContent;\n\n    expect(currentNodeLabel).to.be.equal('二级 1-1');\n  });\n\n  it('defaultExpandAll', () => {\n    vm = getTreeVm(':props=\"defaultProps\" default-expand-all');\n    expect(vm.$el.querySelectorAll('.el-tree-node.is-expanded').length).to.equal(ALL_NODE_COUNT);\n  });\n\n  it('defaultExpandedKeys', () => {\n    vm = getTreeVm(':props=\"defaultProps\" :default-expanded-keys=\"defaultExpandedKeys\" node-key=\"id\"', {\n      created() {\n        this.defaultExpandedKeys = [1, 3];\n      }\n    });\n    expect(vm.$el.querySelectorAll('.el-tree-node.is-expanded').length).to.equal(2);\n  });\n\n  it('defaultExpandedKeys set', (done) => {\n    vm = getTreeVm(':props=\"defaultProps\" :default-expanded-keys=\"defaultExpandedKeys\" node-key=\"id\"', {\n      created() {\n        this.defaultExpandedKeys = [1, 3];\n      }\n    });\n    expect(vm.$el.querySelectorAll('.el-tree-node.is-expanded').length).to.equal(2);\n    vm.defaultExpandedKeys = [2];\n    vm.data = JSON.parse(JSON.stringify(vm.data));\n    setTimeout(() => {\n      expect(vm.$el.querySelectorAll('.el-tree-node.is-expanded').length).to.equal(1);\n      done();\n    }, 50);\n  });\n\n  it('filter-node-method', (done) => {\n    vm = getTreeVm(':props=\"defaultProps\" :filter-node-method=\"filterNode\"', {\n      methods: {\n        filterNode(value, data) {\n          if (!value) return true;\n          return data.label.indexOf(value) !== -1;\n        }\n      }\n    });\n\n    const tree = vm.$refs.tree;\n    tree.filter('2-1');\n\n    setTimeout(() => {\n      expect(tree.$el.querySelectorAll('.el-tree-node.is-hidden').length).to.equal(3);\n      done();\n    }, 100);\n  });\n\n  it('autoExpandParent = true', () => {\n    vm = getTreeVm(':props=\"defaultProps\" :default-expanded-keys=\"defaultExpandedKeys\" node-key=\"id\"', {\n      created() {\n        this.defaultExpandedKeys = [111];\n      }\n    });\n    expect(vm.$el.querySelectorAll('.el-tree-node.is-expanded').length).to.equal(3);\n  });\n\n  it('autoExpandParent = false', (done) => {\n    vm = getTreeVm(':props=\"defaultProps\" :default-expanded-keys=\"defaultExpandedKeys\" node-key=\"id\" :auto-expand-parent=\"false\"', {\n      created() {\n        this.defaultExpandedKeys = [11];\n      }\n    });\n    expect(vm.$el.querySelectorAll('.el-tree-node.is-expanded').length).to.equal(0);\n    const firstNode = document.querySelector('.el-tree-node__content');\n    firstNode.querySelector('.el-tree-node__expand-icon').click();\n    setTimeout(() => {\n      expect(document.querySelectorAll('.el-tree-node.is-expanded').length).to.equal(2);\n      done();\n    }, 100);\n  });\n\n  it('defaultCheckedKeys & check-strictly = false', () => {\n    vm = getTreeVm(':props=\"defaultProps\" default-expand-all show-checkbox :default-checked-keys=\"defaultCheckedKeys\" node-key=\"id\"', {\n      created() {\n        this.defaultCheckedKeys = [1];\n      }\n    });\n    expect(vm.$el.querySelectorAll('.el-checkbox .is-checked').length).to.equal(3);\n  });\n\n  it('defaultCheckedKeys & check-strictly', () => {\n    vm = getTreeVm(':props=\"defaultProps\" default-expand-all show-checkbox :default-checked-keys=\"defaultCheckedKeys\" node-key=\"id\" check-strictly', {\n      created() {\n        this.defaultCheckedKeys = [1];\n      }\n    });\n    expect(vm.$el.querySelectorAll('.el-checkbox .is-checked').length).to.equal(1);\n  });\n\n  it('show checkbox', done => {\n    vm = getTreeVm(':props=\"defaultProps\" show-checkbox');\n    const tree = vm.$children[0];\n    const secondNode = document.querySelectorAll('.el-tree-node__content')[1];\n    const nodeCheckbox = secondNode.querySelector('.el-checkbox');\n    expect(nodeCheckbox).to.be.exist;\n    nodeCheckbox.click();\n    setTimeout(() => {\n      expect(tree.getCheckedNodes().length).to.equal(3);\n      expect(tree.getCheckedNodes(true).length).to.equal(2);\n      secondNode.querySelector('.el-tree-node__expand-icon').click();\n      setTimeout(() => {\n        const firstLeaf = secondNode.nextElementSibling.querySelector('.el-tree-node__content');\n        const leafCheckbox = firstLeaf.querySelector('.el-checkbox');\n        leafCheckbox.click();\n        setTimeout(() => {\n          expect(tree.getCheckedNodes().length).to.equal(1);\n          done();\n        }, 10);\n      }, 10);\n    }, 10);\n  });\n\n  it('check', done => {\n    const spy = sinon.spy();\n    vm = getTreeVm(':props=\"defaultProps\" show-checkbox @check=\"handleCheck\"', {\n      methods: {\n        handleCheck: spy\n      }\n    });\n    const secondNode = document.querySelectorAll('.el-tree-node__content')[1];\n    const nodeCheckbox = secondNode.querySelector('.el-checkbox');\n    expect(nodeCheckbox).to.be.exist;\n    nodeCheckbox.click();\n    setTimeout(() => {\n      expect(spy.calledOnce).to.be.true;\n      const [data, args] = spy.args[0];\n      expect(data.id).to.equal(2);\n      expect(args.checkedNodes.length).to.equal(3);\n      done();\n    }, 10);\n  });\n\n  it('setCheckedNodes', (done) => {\n    vm = getTreeVm(':props=\"defaultProps\" show-checkbox node-key=\"id\"');\n    const tree = vm.$children[0];\n    const secondNode = document.querySelectorAll('.el-tree-node__content')[1];\n    const nodeCheckbox = secondNode.querySelector('.el-checkbox');\n    nodeCheckbox.click();\n    setTimeout(() => {\n      expect(tree.getCheckedNodes().length).to.equal(3);\n      expect(tree.getCheckedNodes(true).length).to.equal(2);\n      setTimeout(() => {\n        tree.setCheckedNodes([]);\n        expect(tree.getCheckedNodes().length).to.equal(0);\n        done();\n      }, 10);\n    }, 10);\n  });\n\n  it('setCheckedKeys', async() => {\n    vm = getTreeVm(':props=\"defaultProps\" show-checkbox node-key=\"id\"');\n    const tree = vm.$children[0];\n    tree.setCheckedKeys([111]);\n    await waitImmediate();\n    expect(tree.getCheckedNodes().length).to.equal(3);\n    expect(tree.getCheckedKeys().length).to.equal(3);\n\n    tree.setCheckedKeys([1]);\n    await waitImmediate();\n    expect(tree.getCheckedNodes().length).to.equal(3);\n    expect(tree.getCheckedKeys().length).to.equal(3);\n\n    tree.setCheckedKeys([2]);\n    await waitImmediate();\n    expect(tree.getCheckedNodes().length).to.equal(3);\n    expect(tree.getCheckedKeys().length).to.equal(3);\n\n    tree.setCheckedKeys([21]);\n    await waitImmediate();\n    expect(tree.getCheckedNodes().length).to.equal(1);\n    expect(tree.getCheckedKeys().length).to.equal(1);\n  });\n\n  it('setCheckedKeys with checkStrictly', async() => {\n    vm = getTreeVm(':props=\"defaultProps\" checkStrictly show-checkbox node-key=\"id\"');\n    const tree = vm.$children[0];\n    tree.setCheckedKeys([111]);\n    expect(tree.getCheckedNodes().length).to.equal(1);\n    expect(tree.getCheckedKeys().length).to.equal(1);\n\n    tree.setCheckedKeys([1]);\n    await waitImmediate();\n    expect(tree.getCheckedNodes().length).to.equal(1);\n    expect(tree.getCheckedKeys().length).to.equal(1);\n\n    tree.setCheckedKeys([2]);\n    await waitImmediate();\n    expect(tree.getCheckedNodes().length).to.equal(1);\n    expect(tree.getCheckedKeys().length).to.equal(1);\n\n    tree.setCheckedKeys([21, 22]);\n    await waitImmediate();\n    expect(tree.getCheckedNodes().length).to.equal(2);\n    expect(tree.getCheckedKeys().length).to.equal(2);\n  });\n\n  it('method setChecked', () => {\n    vm = getTreeVm(':props=\"defaultProps\" show-checkbox node-key=\"id\"');\n    const tree = vm.$children[0];\n    tree.setChecked(111, true, true);\n    expect(tree.getCheckedNodes().length).to.equal(3);\n    expect(tree.getCheckedKeys().length).to.equal(3);\n\n    tree.setChecked(vm.data[0], false, true);\n    expect(tree.getCheckedNodes().length).to.equal(0);\n    expect(tree.getCheckedKeys().length).to.equal(0);\n  });\n\n  it('setCheckedKeys with leafOnly=false', async() => {\n    vm = getTreeVm(':props=\"defaultProps\" show-checkbox node-key=\"id\"');\n    const tree = vm.$children[0];\n    tree.setCheckedKeys([1, 11, 111, 2], false);\n    await waitImmediate();\n    expect(tree.getCheckedNodes().length).to.equal(6);\n    expect(tree.getCheckedKeys().length).to.equal(6);\n  });\n\n  it('setCheckedKeys with leafOnly=true', async() => {\n    vm = getTreeVm(':props=\"defaultProps\" show-checkbox node-key=\"id\"');\n    const tree = vm.$children[0];\n    tree.setCheckedKeys([2], true);\n    await waitImmediate();\n    expect(tree.getCheckedNodes().length).to.equal(2);\n    expect(tree.getCheckedKeys().length).to.equal(2);\n  });\n\n  it('setCurrentKey', (done) => {\n    vm = getTreeVm(':props=\"defaultProps\" show-checkbox node-key=\"id\"');\n    const tree = vm.$children[0];\n    tree.setCurrentKey(111);\n    vm.$nextTick(() => {\n      expect(tree.store.currentNode.data.id).to.equal(111);\n      // cancel highlight\n      tree.setCurrentKey(null);\n      vm.$nextTick(() => {\n        expect(tree.store.currentNode).to.equal(null);\n        done();\n      });\n    });\n  });\n\n  it('setCurrentNode', (done) => {\n    vm = getTreeVm(':props=\"defaultProps\" show-checkbox node-key=\"id\"');\n    const tree = vm.$children[0];\n    tree.setCurrentNode({\n      id: 111,\n      label: '三级 1-1'\n    });\n    vm.$nextTick(() => {\n      expect(tree.store.currentNode.data.id).to.equal(111);\n      done();\n    });\n  });\n\n  it('getCurrentKey', (done) => {\n    vm = getTreeVm(':props=\"defaultProps\" show-checkbox node-key=\"id\"');\n    const tree = vm.$children[0];\n    tree.setCurrentKey(111);\n    vm.$nextTick(() => {\n      expect(tree.getCurrentKey()).to.equal(111);\n      done();\n    });\n  });\n\n  it('getCurrentNode', (done) => {\n    vm = getTreeVm(':props=\"defaultProps\" show-checkbox node-key=\"id\"');\n    const tree = vm.$children[0];\n    tree.setCurrentKey(111);\n    vm.$nextTick(() => {\n      expect(tree.getCurrentNode().id).to.equal(111);\n      done();\n    });\n  });\n\n  it('getNode', () => {\n    vm = getTreeVm(':props=\"defaultProps\" node-key=\"id\"');\n    const tree = vm.$children[0];\n    const node = tree.getNode(111);\n    expect(node.data.id).to.equal(111);\n  });\n\n  it('remove', (done) => {\n    vm = getTreeVm(':props=\"defaultProps\" node-key=\"id\"');\n    const tree = vm.$children[0];\n    tree.setCurrentKey(1);\n    expect(tree.getCurrentNode().id).to.equal(1);\n    tree.remove(1);\n    vm.$nextTick(() => {\n      expect(vm.data[0].id).to.equal(2);\n      expect(tree.getNode(1)).to.equal(null);\n      expect(tree.getCurrentNode()).to.equal(null);\n      done();\n    });\n  });\n\n  it('append', () => {\n    vm = getTreeVm(':props=\"defaultProps\" node-key=\"id\"');\n    const tree = vm.$children[0];\n    const nodeData = { id: 88, label: '88' };\n    tree.append(nodeData, tree.getNode(1));\n\n    expect(vm.data[0].children.length).to.equal(2);\n    expect(tree.getNode(88).data).to.equal(nodeData);\n  });\n\n  it('insertBefore', () => {\n    vm = getTreeVm(':props=\"defaultProps\" node-key=\"id\"');\n    const tree = vm.$children[0];\n    const nodeData = { id: 88, label: '88' };\n    tree.insertBefore(nodeData, tree.getNode(11));\n    expect(vm.data[0].children.length).to.equal(2);\n    expect(vm.data[0].children[0]).to.equal(nodeData);\n    expect(tree.getNode(88).data).to.equal(nodeData);\n  });\n\n  it('insertAfter', () => {\n    vm = getTreeVm(':props=\"defaultProps\" node-key=\"id\"');\n    const tree = vm.$children[0];\n    const nodeData = { id: 88, label: '88' };\n    tree.insertAfter(nodeData, tree.getNode(11));\n    expect(vm.data[0].children.length).to.equal(2);\n    expect(vm.data[0].children[1]).to.equal(nodeData);\n    expect(tree.getNode(88).data).to.equal(nodeData);\n  });\n\n  it('set disabled checkbox', done => {\n    vm = getDisableTreeVm(':props=\"defaultProps\" show-checkbox node-key=\"id\" default-expand-all');\n    const node = document.querySelectorAll('.el-tree-node__content')[2];\n    const nodeCheckbox = node.querySelector('.el-checkbox input');\n    vm.$nextTick(() => {\n      expect(nodeCheckbox.disabled).to.equal(true);\n      done();\n    });\n  });\n\n  it('check strictly', (done) => {\n    vm = getTreeVm(':props=\"defaultProps\" show-checkbox check-strictly default-expand-all');\n    const tree = vm.$children[0];\n    const secondNode = document.querySelectorAll('.el-tree-node__content')[3];\n    const nodeCheckbox = secondNode.querySelector('.el-checkbox');\n    nodeCheckbox.click();\n    expect(tree.getCheckedNodes().length).to.equal(1);\n    expect(tree.getCheckedNodes(true).length).to.equal(0);\n    const firstLeaf = secondNode.nextElementSibling.querySelector('.el-tree-node__content');\n    const leafCheckbox = firstLeaf.querySelector('.el-checkbox');\n    vm.$nextTick(() => {\n      leafCheckbox.click();\n      expect(tree.getCheckedNodes().length).to.equal(2);\n      done();\n    });\n  });\n\n  it('render content', () => {\n    vm = getTreeVm(':props=\"defaultProps\" :render-content=\"renderContent\"', {\n      methods: {\n        renderContent(h, node) {\n          return (\n            <span class=\"custom-content\">\n              <el-button>{ node.node.label }</el-button>\n            </span>\n          );\n        }\n      }\n    });\n    const firstNode = document.querySelector('.el-tree-node__content');\n    expect(firstNode.querySelector('.custom-content')).to.exist;\n    const button = firstNode.querySelector('.custom-content .el-button');\n    expect(button).to.exist;\n    expect(button.querySelector('span').textContent).to.equal('一级 1');\n  });\n\n  it('scoped slot', () => {\n    vm = createVue({\n      template: `\n        <el-tree ref=\"tree\" :data=\"data\">\n          <div slot-scope=\"scope\" class=\"custom-tree-template\">\n            <span>{{ scope.node.label }}</span>\n            <el-button></el-button>\n          </div>\n        </el-tree>\n        `,\n\n      data() {\n        return {\n          data: [{\n            id: 1,\n            label: '一级 1',\n            children: [{\n              id: 11,\n              label: '二级 1-1',\n              children: [{\n                id: 111,\n                label: '三级 1-1'\n              }]\n            }]\n          }, {\n            id: 2,\n            label: '一级 2',\n            children: [{\n              id: 21,\n              label: '二级 2-1'\n            }, {\n              id: 22,\n              label: '二级 2-2'\n            }]\n          }, {\n            id: 3,\n            label: '一级 3',\n            children: [{\n              id: 31,\n              label: '二级 3-1'\n            }, {\n              id: 32,\n              label: '二级 3-2'\n            }]\n          }]\n        };\n      }\n    }, true);\n    const firstNode = document.querySelector('.custom-tree-template');\n    expect(firstNode).to.exist;\n    const span = firstNode.querySelector('span');\n    const button = firstNode.querySelector('.el-button');\n    expect(span).to.exist;\n    expect(span.innerText).to.equal('一级 1');\n    expect(button).to.exist;\n  });\n\n  it('load node', done => {\n    vm = getTreeVm(':props=\"defaultProps\" lazy :load=\"loadNode\" show-checkbox', {\n      methods: {\n        loadNode(node, resolve) {\n          if (node.level === 0) {\n            return resolve([{ label: 'region1' }, { label: 'region2' }]);\n          }\n          if (node.level > 4) return resolve([]);\n          setTimeout(() => {\n            resolve([{\n              label: 'zone' + this.count++\n            }, {\n              label: 'zone' + this.count++\n            }]);\n          }, 50);\n        }\n      }\n    });\n    const nodes = document.querySelectorAll('.el-tree-node__content');\n    expect(nodes.length).to.equal(2);\n    nodes[0].click();\n    setTimeout(() => {\n      expect(document.querySelectorAll('.el-tree-node__content').length).to.equal(4);\n      done();\n    }, 100);\n  });\n\n  it('lazy defaultChecked', done => {\n    vm = getTreeVm(':props=\"defaultProps\" node-key=\"id\" lazy :load=\"loadNode\" show-checkbox', {\n      methods: {\n        loadNode(node, resolve) {\n          if (node.level === 0) {\n            return resolve([{ label: 'region1', id: this.count++ }, { label: 'region2', id: this.count++ }]);\n          }\n          if (node.level > 4) return resolve([]);\n          setTimeout(() => {\n            resolve([{\n              label: 'zone' + this.count,\n              id: this.count++\n            }, {\n              label: 'zone' + this.count,\n              id: this.count++\n            }]);\n          }, 50);\n        }\n      }\n    });\n    const tree = vm.$children[0];\n    const firstNode = document.querySelector('.el-tree-node__content');\n    const initStatus = firstNode.querySelector('.is-indeterminate');\n    expect(initStatus).to.equal(null);\n    tree.store.setCheckedKeys([3]);\n    firstNode.querySelector('.el-tree-node__expand-icon').click();\n    setTimeout(() => {\n      const clickStatus = firstNode.querySelector('.is-indeterminate');\n      expect(clickStatus).to.not.equal(null);\n      const child = document.querySelectorAll('.el-tree-node__content')[1];\n      expect(child.querySelector('input').checked).to.equal(true);\n      done();\n    }, 300);\n  });\n\n  it('lazy expandOnChecked', done => {\n    vm = getTreeVm(':props=\"defaultProps\" node-key=\"id\" lazy :load=\"loadNode\" show-checkbox check-descendants', {\n      methods: {\n        loadNode(node, resolve) {\n          if (node.level === 0) {\n            return resolve([{ label: 'region1', id: this.count++ }, { label: 'region2', id: this.count++ }]);\n          }\n          if (node.level > 2) return resolve([]);\n          setTimeout(() => {\n            resolve([{\n              label: 'zone' + this.count,\n              id: this.count++\n            }, {\n              label: 'zone' + this.count,\n              id: this.count++\n            }]);\n          }, 10);\n        }\n      }\n    });\n    const tree = vm.$children[0];\n    tree.store.setCheckedKeys([1]);\n    setTimeout(() => {\n      const checkedKeys = tree.getCheckedKeys();\n      expect(checkedKeys.length).to.equal(7);\n      done();\n    }, 400);\n  });\n\n  it('lazy without expandOnChecked', done => {\n    vm = getTreeVm(':props=\"defaultProps\" node-key=\"id\" lazy :load=\"loadNode\" show-checkbox', {\n      methods: {\n        loadNode(node, resolve) {\n          if (node.level === 0) {\n            return resolve([{ label: 'region1', id: this.count++ }, { label: 'region2', id: this.count++ }]);\n          }\n          if (node.level > 4) return resolve([]);\n          setTimeout(() => {\n            resolve([{\n              label: 'zone' + this.count,\n              id: this.count++\n            }, {\n              label: 'zone' + this.count,\n              id: this.count++\n            }]);\n          }, 50);\n        }\n      }\n    });\n    const tree = vm.$children[0];\n    tree.store.setCheckedKeys([1]);\n    setTimeout(() => {\n      const nodes = document.querySelectorAll('.el-tree-node__content');\n      expect(nodes[0].querySelector('input').checked).to.equal(true);\n      expect(nodes.length).to.equal(2);\n      done();\n    }, 300);\n  });\n\n  it('accordion', done => {\n    vm = getTreeVm(':props=\"defaultProps\" accordion');\n    const firstNode = vm.$el.querySelector('.el-tree-node__content');\n    const secondNode = vm.$el.querySelector('.el-tree-node:nth-child(2) .el-tree-node__content');\n    firstNode.click();\n    setTimeout(() => {\n      expect(vm.$el.querySelector('.el-tree-node').classList.contains('is-expanded')).to.true;\n      secondNode.click();\n      setTimeout(() => {\n        expect(vm.$el.querySelector('.el-tree-node').classList.contains('is-expanded')).to.false;\n        done();\n      }, DELAY);\n    }, DELAY);\n  });\n\n  it('handleNodeOpen & handleNodeClose', (done) => {\n    vm = getTreeVm(':props=\"defaultProps\" lazy :load=\"loadNode\" @node-expand=\"handleNodeOpen\" @node-collapse=\"handleNodeClose\"', {\n      methods: {\n        loadNode(node, resolve) {\n          if (node.level === 0) {\n            return resolve([{label: 'region1'}, {label: 'region2'}]);\n          }\n          if (node.level > 4) return resolve([]);\n          setTimeout(() => {\n            resolve([{\n              label: 'zone' + this.count++\n            }, {\n              label: 'zone' + this.count++\n            }]);\n          }, 50);\n        },\n        handleNodeOpen(data, node, vm) {\n          this.currentNode = data;\n          this.nodeExpended = true;\n        },\n        handleNodeClose(data, node, vm) {\n          this.currentNode = data;\n          this.nodeExpended = false;\n        }\n      }\n    });\n    const firstNode = document.querySelector('.el-tree-node__content');\n    expect(firstNode.nextElementSibling).to.not.exist;\n    firstNode.click();\n    setTimeout(() => {\n      expect(vm.nodeExpended).to.equal(true);\n      expect(vm.currentNode.label).to.equal('region1');\n      firstNode.click();\n      setTimeout(() => {\n        expect(vm.nodeExpended).to.equal(false);\n        expect(vm.currentNode.label).to.equal('region1');\n        done();\n      }, 100);\n    }, 100);\n  });\n\n  it('updateKeyChildren', (done) => {\n    vm = getTreeVm(':props=\"defaultProps\" show-checkbox node-key=\"id\" default-expand-all');\n    const tree = vm.$children[0];\n    tree.updateKeyChildren(1, [{\n      id: 111,\n      label: '三级 1-1'\n    }]);\n    const node = document.querySelectorAll('.el-tree-node__content')[2];\n    const label = node.querySelector('.el-tree-node__label');\n    vm.$nextTick(() => {\n      expect(tree.store.nodesMap['11']).to.equal(undefined);\n      expect(tree.store.nodesMap['1'].childNodes[0].data.id).to.equal(111);\n      expect(label.textContent).to.equal('三级 1-1');\n      done();\n    });\n  });\n\n  it('update multi tree data', async() => {\n    const vm = createVue({\n      template: `\n        <div>\n          <el-tree ref=\"tree1\" :data=\"data\" node-key=\"id\" :props=\"defaultProps\"></el-tree>\n          <el-tree ref=\"tree2\" :data=\"data\" node-key=\"id\" :props=\"defaultProps\"></el-tree>\n        </div>\n        `,\n\n      data() {\n        return {\n          data: [{\n            id: 1,\n            label: '一级 1',\n            children: [{\n              id: 11,\n              label: '二级 1-1',\n              children: [{\n                id: 111,\n                label: '三级 1-1'\n              }]\n            }]\n          }, {\n            id: 2,\n            label: '一级 2',\n            children: [{\n              id: 21,\n              label: '二级 2-1'\n            }, {\n              id: 22,\n              label: '二级 2-2'\n            }]\n          }, {\n            id: 3,\n            label: '一级 3',\n            children: [{\n              id: 31,\n              label: '二级 3-1'\n            }, {\n              id: 32,\n              label: '二级 3-2'\n            }]\n          }],\n          defaultProps: {\n            children: 'children',\n            label: 'label'\n          }\n        };\n      }\n    }, true);\n    const nodeData = { label: '新增 1', id: 4 };\n    vm.data.push(nodeData);\n    await wait();\n    const tree1 = vm.$refs.tree1;\n    expect(tree1.getNode(4).data).to.equal(nodeData);\n    const tree2 = vm.$refs.tree2;\n    expect(tree2.getNode(4).data).to.equal(nodeData);\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/upload.spec.js",
    "content": "import { createVue, destroyVM } from '../util.js';\nimport ajax from 'packages/upload/src/ajax';\n\nconst noop = () => {};\nconst option = {\n  onSuccess: noop,\n  onProgress: noop,\n  data: { a: 'abc', b: 'bcd' },\n  filename: 'file.png',\n  file: new File([JSON.stringify('foo')], {type: 'image/png'}),\n  action: '/upload',\n  headers: { region: 'shanghai' }\n};\nlet requests, xhr;\ndescribe('ajax', () => {\n  beforeEach(() => {\n    xhr = sinon.useFakeXMLHttpRequest();\n    requests = [];\n    xhr.onCreate = req => requests.push(req);\n    option.onError = noop;\n    option.onSuccess = noop;\n  });\n  afterEach(() => {\n    xhr.restore();\n  });\n  it('request success', done => {\n    option.onError = done;\n    option.onSuccess = ret => {\n      expect(ret).to.eql({ success: true });\n      done();\n    };\n    ajax(option);\n    requests[0].respond(200, {}, '{\"success\": true}');\n  });\n  it('request width header', done => {\n    ajax(option);\n    expect(requests[0].requestHeaders).to.eql({\n      region: 'shanghai'\n    });\n    done();\n  });\n  it('40x code should be error', done => {\n    option.onError = e => {\n      expect(e.toString()).to.contain('Not found');\n      done();\n    };\n\n    option.onSuccess = () => done('404 should throw error');\n    ajax(option);\n    requests[0].respond(404, {}, 'Not found');\n  });\n  it('2xx code should be success', done => {\n    option.onError = done;\n    option.onSuccess = ret => {\n      expect(ret).to.equal('');\n      done();\n    };\n    ajax(option);\n    requests[0].respond(204, {});\n  });\n});\ndescribe('Upload', () => {\n  let requests;\n  let xhr;\n\n  beforeEach(() => {\n    xhr = sinon.useFakeXMLHttpRequest();\n    requests = [];\n    xhr.onCreate = req => requests.push(req);\n  });\n\n  afterEach(() => {\n    xhr.restore();\n  });\n\n  describe('ajax upload', () => {\n\n    let uploader;\n    let handlers = {};\n\n    const props = {\n      props: {\n        action: '/upload',\n        onSuccess(res, file, fileList) {\n          if (handlers.onSuccess) {\n            handlers.onSuccess(res, file, fileList);\n          }\n        },\n        onError(err, file, fileList) {\n          if (handlers.onError) {\n            handlers.onError(err, file, fileList);\n          }\n        },\n        onPreview(file) {\n          if (handlers.onPreview) {\n            handlers.onPreview(file);\n          }\n        },\n        limit: 2,\n        onExceed(files, fileList) {\n          if (handlers.onExceed) {\n            handlers.onExceed(files, fileList);\n          }\n        },\n        beforeUpload(file) {\n          if (handlers.beforeUpload) {\n            return handlers.beforeUpload(file);\n          } else {\n            return true;\n          }\n        },\n        beforeRemove(file, fileList) {\n          if (handlers.beforeRemove) {\n            return handlers.beforeRemove(file);\n          } else {\n            return true;\n          }\n        }\n      }\n    };\n\n    beforeEach(() => {\n      uploader = createVue({\n        render(h) {\n          return (\n            <el-upload {...props} ref=\"upload\">\n              <el-button size=\"small\" type=\"primary\">点击上传</el-button>\n            </el-upload>\n          );\n        }\n      }, true).$refs.upload;\n    });\n\n    afterEach(() => {\n      destroyVM(uploader);\n      handlers = {};\n    });\n\n    it('upload success', done => {\n      const file = new Blob([JSON.stringify({}, null, 2)], {\n        type: 'application/json'\n      });\n      file.name = 'success.png';\n      const files = [file];\n\n      handlers.onSuccess = (res, file, fileList) => {\n        expect(file.name).to.equal('success.png');\n        expect(fileList.length).to.equal(1);\n        expect(res).to.equal('success.png');\n        done();\n      };\n\n      uploader.$refs['upload-inner'].handleChange({ target: { files }});\n\n      setTimeout(() => {\n        requests[0].respond(200, {}, `${files[0].name}`);\n      }, 100);\n    });\n\n    it('upload fail', done => {\n      const file = new Blob([JSON.stringify({}, null, 2)], {\n        type: 'application/json'\n      });\n      file.name = 'fail.png';\n      const files = [file];\n\n      handlers.onError = (err, file, fileList) => {\n        expect(err instanceof Error).to.equal(true);\n        expect(file.name).to.equal('fail.png');\n        done();\n      };\n\n      uploader.$refs['upload-inner'].handleChange({ target: { files }});\n\n      setTimeout(() => {\n        requests[0].respond(400, {}, 'error 400');\n      }, 100);\n    });\n    it('preview file', done => {\n      const file = new Blob([JSON.stringify({}, null, 2)], {\n        type: 'application/json'\n      });\n      file.name = 'success.png';\n      const files = [file];\n\n      handlers.onPreview = (file) => {\n        expect(file.response).to.equal('success.png');\n        done();\n      };\n\n      handlers.onSuccess = (res, file, fileList) => {\n        uploader.$nextTick(_ => {\n          uploader.$el.querySelector('.el-upload-list .is-success a').click();\n        });\n      };\n\n      uploader.$refs['upload-inner'].handleChange({ target: { files }});\n\n      setTimeout(() => {\n        requests[0].respond(200, {}, `${files[0].name}`);\n      }, 100);\n    });\n    it('file remove', done => {\n      const file = new Blob([JSON.stringify({}, null, 2)], {\n        type: 'application/json'\n      });\n      file.name = 'success.png';\n      const files = [file];\n\n      handlers.onSuccess = (res, file, fileList) => {\n        uploader.$el.querySelector('.el-upload-list .el-icon-close').click();\n        uploader.$nextTick(_ => {\n          expect(uploader.fileList.length).to.equal(0);\n          done();\n        });\n      };\n\n      uploader.$refs['upload-inner'].handleChange({ target: { files }});\n\n      setTimeout(() => {\n        requests[0].respond(200, {}, `${files[0].name}`);\n      }, 100);\n    });\n    it('clear files', done => {\n      const file = new Blob([JSON.stringify({}, null, 2)], {\n        type: 'application/json'\n      });\n      file.name = 'success.png';\n      const files = [file];\n\n      handlers.onSuccess = (res, file, fileList) => {\n        uploader.clearFiles();\n        uploader.$nextTick(_ => {\n          expect(uploader.fileList.length).to.equal(0);\n          done();\n        });\n      };\n\n      uploader.$refs['upload-inner'].handleChange({ target: { files }});\n\n      setTimeout(() => {\n        requests[0].respond(200, {}, `${files[0].name}`);\n      }, 100);\n    });\n    it('beforeUpload return promise', done => {\n      const spy = sinon.spy();\n      const file = new Blob([JSON.stringify({}, null, 2)], {\n        type: 'application/json'\n      });\n      const files = [file];\n      handlers.onSuccess = () => {\n        expect(spy.calledOnce).to.equal(true);\n        done();\n      };\n      handlers.beforeUpload = (file) => {\n        return new window.Promise((resolve) => {\n          spy();\n          resolve(file);\n        });\n      };\n      uploader.$refs['upload-inner'].handleChange({ target: { files }});\n      setTimeout(() => {\n        requests[0].respond(200, {}, `${files[0].name}`);\n      }, 100);\n    });\n    it('beforeRemove return rejected promise', done => {\n      const spy = sinon.spy();\n      handlers.beforeRemove = (file) => {\n        return new window.Promise((resolve, reject) => {\n          spy();\n          reject();\n        });\n      };\n      const file = new Blob([JSON.stringify({}, null, 2)], {\n        type: 'application/json'\n      });\n      file.name = 'success.png';\n      const files = [file];\n\n      handlers.onSuccess = (res, file, fileList) => {\n        uploader.$el.querySelector('.el-upload-list .el-icon-close').click();\n        setTimeout(() => {\n          expect(spy.calledOnce).to.equal(true);\n          expect(uploader.uploadFiles.length).to.equal(1);\n          done();\n        }, 200);\n      };\n      uploader.$refs['upload-inner'].handleChange({ target: { files }});\n      setTimeout(() => {\n        requests[0].respond(200, {}, `${files[0].name}`);\n      }, 100);\n    });\n    it('limit files', done => {\n      const files = [{\n        name: 'exceed2.png',\n        type: 'xml'\n      }, {\n        name: 'exceed3.png',\n        type: 'xml'\n      }];\n\n      uploader.uploadFiles = [{\n        name: 'exceed1.png',\n        type: 'xml'\n      }];\n\n      handlers.onExceed = (files, fileList) => {\n        uploader.$nextTick(_ => {\n          expect(uploader.uploadFiles.length).to.equal(1);\n          done();\n        });\n      };\n\n      uploader.$nextTick(_ => uploader.$refs['upload-inner'].handleChange({ target: { files }}));\n    });\n  });\n});\n"
  },
  {
    "path": "test/unit/specs/util.clickoutside.spec.js",
    "content": "import Clickoutside from 'element-ui/src/utils/clickoutside';\nconst ctx = '@@clickoutsideContext';\n\nimport { triggerEvent, triggerClick } from '../util';\n\ndescribe('Utils:Clickoutside', () => {\n  it('create', () => {\n    let count = 0;\n    const el = document.createElement('div');\n    const vnode = {\n      context: {\n        handleClick: () => ++count\n      }\n    };\n    const binding = {\n      expression: 'handleClick'\n    };\n\n    Clickoutside.bind(el, binding, vnode);\n    expect(el[ctx]).to.exist;\n  });\n\n  it('cotext not exist', () => {\n    const el = document.createElement('div');\n    const vnode = {};\n    const binding = {\n      expression: 'handleClick'\n    };\n\n    Clickoutside.bind(el, binding, vnode);\n    expect(el[ctx]).to.exist;\n  });\n\n  it('binding expression', () => {\n    const el = document.createElement('div');\n    let count = 0;\n    const vnode = {\n      context: {\n        handleClick: () => ++count\n      }\n    };\n    const binding = {\n      expression: 'handleClick'\n    };\n\n    Clickoutside.bind(el, binding, vnode);\n    triggerClick(document);\n    expect(count).to.equal(1);\n  });\n\n  it('click inside', () => {\n    const el = document.createElement('div');\n    const insideElm = document.createElement('div');\n    let count = 0;\n    const vnode = {\n      context: {\n        handleClick: () => ++count\n      }\n    };\n    const binding = {\n      expression: 'handleClick'\n    };\n\n    el.appendChild(insideElm);\n    Clickoutside.bind(el, binding, vnode);\n    triggerClick(insideElm);\n    expect(count).to.equal(0);\n    triggerClick(document);\n    expect(count).to.equal(1);\n  });\n\n  it('tigger event in popperElm', () => {\n    const el = document.createElement('div');\n    const insideElm = document.createElement('div');\n    let count = 0;\n    const vnode = {\n      context: {\n        handleClick: () => ++count,\n        popperElm: document.createElement('div')\n      }\n    };\n    const binding = {\n      expression: 'handleClick'\n    };\n\n    vnode.context.popperElm.appendChild(insideElm);\n    Clickoutside.bind(el, binding, vnode);\n    triggerClick(insideElm);\n    expect(count).to.equal(0);\n    triggerClick(document);\n    expect(count).to.equal(1);\n  });\n\n  it('binding value', () => {\n    const el = document.createElement('div');\n    let count = 0;\n    const vnode = {\n      context: {}\n    };\n    const binding = {\n      value: () => ++count\n    };\n\n    Clickoutside.bind(el, binding, vnode);\n    expect(count).to.equal(0);\n    triggerClick(document);\n    expect(count).to.equal(1);\n  });\n\n  it('update', () => {\n    let count = 0;\n    const el = document.createElement('div');\n    const vnode = {\n      context: {\n        abc: () => ++count,\n        ddd: () => ++count\n      }\n    };\n    const binding = {\n      expression: 'abc'\n    };\n\n    const newBinding = {\n      expression: 'ddd'\n    };\n\n    Clickoutside.bind(el, binding, vnode);\n    expect(el[ctx].methodName).to.equal('abc');\n    Clickoutside.update(el, newBinding);\n    expect(el[ctx].methodName).to.equal('ddd');\n  });\n\n  it('unbind', () => {\n    const el = document.createElement('div');\n    let count = 0;\n    const vnode = {\n      context: {}\n    };\n    const binding = {\n      value: () => ++count\n    };\n\n    Clickoutside.bind(el, binding, vnode);\n    triggerClick(document);\n    Clickoutside.unbind(el);\n    triggerClick(document);\n    expect(count).to.equal(1);\n  });\n\n  it('stays open on drag click', () => {\n    const el = document.createElement('div');\n    const insideElm = document.createElement('div');\n    let count = 0;\n    const vnode = {\n      context: {\n        handleClick: () => ++count\n      }\n    };\n    const binding = {\n      expression: 'handleClick'\n    };\n\n    el.appendChild(insideElm);\n    Clickoutside.bind(el, binding, vnode);\n    triggerEvent(insideElm, 'mousedown');\n    triggerEvent(document, 'mouseup');\n    expect(count).to.equal(1);\n  });\n});\n\n"
  },
  {
    "path": "test/unit/specs/util.vue-popper.spec.js",
    "content": "import VuePopper from 'element-ui/src/utils/vue-popper';\nimport { createTest } from '../util';\n\nconst Popper = Object.assign({}, VuePopper, {\n  render(h) {\n    return h('div');\n  },\n\n  created() {\n    this.popperElm = document.createElement('div');\n    this.referenceElm = document.createElement('div');\n  }\n});\n\nconst CleanPopper = Object.assign({}, VuePopper, {\n  render(h) {\n    return h('div');\n  }\n});\n\ndescribe('Utils:VuePopper', () => {\n  it('set popper not reference', () => {\n    const vm = createTest(CleanPopper, {\n      popper: document.createElement('div')\n    });\n    vm.createPopper();\n    expect(vm.popperElm).to.exist;\n    expect(vm.referenceElm).to.not.exist;\n    expect(vm.popperJS).to.not.exist;\n  });\n\n  it('set reference not popper', () => {\n    const vm = createTest(CleanPopper, {\n      reference: document.createElement('div')\n    });\n    vm.createPopper();\n    expect(vm.referenceElm).to.exist;\n    expect(vm.popperElm).to.not.exist;\n    expect(vm.popperJS).to.not.exist;\n  });\n\n  it('set reference by slot', () => {\n    const vm = createTest(CleanPopper);\n    vm.$slots['reference'] = [{\n      elm: document.createElement('div')\n    }];\n    vm.createPopper();\n    expect(vm.referenceElm).to.exist;\n    expect(vm.popperElm).to.not.exist;\n    expect(vm.popperJS).to.not.exist;\n  });\n\n  it('createPopper', () => {\n    const vm = createTest(Popper, { placement: 'top' });\n    vm.createPopper();\n    expect(vm.popperJS._popper.getAttribute('x-placement')).to.equal('top');\n  });\n\n  it('destroy popper when calling createPopper twice', () => {\n    const vm = createTest(Popper);\n    vm.createPopper();\n    const popperJS = vm.popperJS;\n\n    expect(vm.popperJS).to.exist;\n    expect(vm.popperJS).to.equal(popperJS);\n    vm.createPopper();\n    expect(vm.popperJS).to.not.equal(popperJS);\n  });\n\n  it('updatePopper', () => {\n    const vm = createTest(Popper);\n    vm.updatePopper();\n    const popperJS = vm.popperJS;\n\n    expect(vm.popperJS).to.exist;\n    vm.updatePopper();\n    expect(vm.popperJS).to.equal(popperJS);\n  });\n\n  it('doDestroy', () => {\n    const vm = createTest(Popper, { placement: 'top' });\n    vm.createPopper();\n    expect(vm.popperJS._popper.getAttribute('x-placement')).to.equal('top');\n    vm.doDestroy();\n    expect(vm.popperJS).to.not.exist;\n  });\n\n  it('destroyPopper', () => {\n    const vm = createTest(Popper);\n    const vm2 = createTest(Popper);\n\n    vm.createPopper();\n    expect(() => vm.destroyPopper()).to.not.throw();\n    expect(() => vm2.destroyPopper()).to.not.throw();\n  });\n\n  it('placement', () => {\n    const vm = createTest(Popper, { placement: 'bottom-start' });\n    const vm2 = createTest(Popper, { placement: 'bottom-abc' });\n\n    vm.createPopper();\n    vm2.createPopper();\n    expect(vm.popperJS._popper.getAttribute('x-placement')).to.equal('bottom-start');\n    expect(vm2.popperJS).to.not.exist;\n  });\n\n  it('display arrow', () => {\n    const vm = createTest(Popper, {\n      visibleArrow: true\n    });\n\n    vm.createPopper();\n    expect(vm.popperJS._popper.querySelector('div[x-arrow]')).to.exist;\n  });\n\n  it('update showPopper', done => {\n    const vm = createTest(Popper);\n    expect(vm.popperJS).to.not.exist;\n    vm.showPopper = true;\n    setTimeout(_ => {\n      expect(vm.popperJS).to.exist;\n      vm.showPopper = false;\n      setTimeout(_ => {\n        expect(vm.popperJS).to.exist;\n      }, 50);\n      done();\n    }, 50);\n  });\n\n  it('resetTransformOrigin', () => {\n    const vm = createTest(Popper, {\n      placement: 'left'\n    });\n    vm.createPopper();\n    expect(vm.popperJS._popper.style.transformOrigin).to.include('right center');\n  });\n\n  it('appendArrow', () => {\n    const vm = createTest(Popper, {\n      visibleArrow: true\n    });\n    expect(vm.appended).to.be.undefined;\n    vm.createPopper();\n    expect(vm.appended).to.true;\n    vm.appendArrow();\n    expect(vm.popperJS._popper.querySelector('[x-arrow]')).to.exist;\n    expect(vm.appended).to.true;\n  });\n\n  it('appendArrow: add scoped', () => {\n    const popper = document.createElement('div');\n    popper.setAttribute('_v-110', true);\n    const vm = createTest(CleanPopper, {\n      reference: document.createElement('div'),\n      visibleArrow: true,\n      popper\n    });\n    expect(vm.appended).to.be.undefined;\n    vm.createPopper();\n    expect(vm.popperJS._popper.querySelector('[x-arrow][_v-110]')).to.exist;\n  });\n\n  it('appendToBody set false', () => {\n    const vm = createTest(Popper, {\n      appendToBody: false\n    });\n    vm.createPopper();\n    expect(document.body.contains(vm.popperElm)).to.false;\n  });\n\n  it('destroy', () => {\n    const vm = createTest(Popper, true);\n\n    vm.createPopper();\n    expect(document.body.contains(vm.popperElm)).to.true;\n    vm.$destroy();\n    expect(document.body.contains(vm.popperElm)).to.false;\n  });\n});\n"
  },
  {
    "path": "test/unit/util.js",
    "content": "import Vue from 'vue';\nimport Element from 'main/index.js';\n\nVue.use(Element);\n\nlet id = 0;\n\nconst createElm = function() {\n  const elm = document.createElement('div');\n\n  elm.id = 'app' + ++id;\n  document.body.appendChild(elm);\n\n  return elm;\n};\n\n/**\n * 回收 vm\n * @param  {Object} vm\n */\nexport const destroyVM = function(vm) {\n  vm.$destroy && vm.$destroy();\n  vm.$el &&\n  vm.$el.parentNode &&\n  vm.$el.parentNode.removeChild(vm.$el);\n};\n\n/**\n * 创建一个 Vue 的实例对象\n * @param  {Object|String}  Compo   组件配置，可直接传 template\n * @param  {Boolean=false} mounted 是否添加到 DOM 上\n * @return {Object} vm\n */\nexport const createVue = function(Compo, mounted = false) {\n  if (Object.prototype.toString.call(Compo) === '[object String]') {\n    Compo = { template: Compo };\n  }\n  return new Vue(Compo).$mount(mounted === false ? null : createElm());\n};\n\n/**\n * 创建一个测试组件实例\n * @link http://vuejs.org/guide/unit-testing.html#Writing-Testable-Components\n * @param  {Object}  Compo          - 组件对象\n * @param  {Object}  propsData      - props 数据\n * @param  {Boolean=false} mounted  - 是否添加到 DOM 上\n * @return {Object} vm\n */\nexport const createTest = function(Compo, propsData = {}, mounted = false) {\n  if (propsData === true || propsData === false) {\n    mounted = propsData;\n    propsData = {};\n  }\n  const elm = createElm();\n  const Ctor = Vue.extend(Compo);\n  return new Ctor({ propsData }).$mount(mounted === false ? null : elm);\n};\n\n/**\n * 触发一个事件\n * mouseenter, mouseleave, mouseover, keyup, change, click 等\n * @param  {Element} elm\n * @param  {String} name\n * @param  {*} opts\n */\nexport const triggerEvent = function(elm, name, ...opts) {\n  let eventName;\n\n  if (/^mouse|click/.test(name)) {\n    eventName = 'MouseEvents';\n  } else if (/^key/.test(name)) {\n    eventName = 'KeyboardEvent';\n  } else {\n    eventName = 'HTMLEvents';\n  }\n  const evt = document.createEvent(eventName);\n\n  evt.initEvent(name, ...opts);\n  elm.dispatchEvent\n    ? elm.dispatchEvent(evt)\n    : elm.fireEvent('on' + name, evt);\n\n  return elm;\n};\n\n/**\n * 触发 “mouseup” 和 “mousedown” 事件\n * @param {Element} elm\n * @param {*} opts\n */\nexport const triggerClick = function(elm, ...opts) {\n  triggerEvent(elm, 'mousedown', ...opts);\n  triggerEvent(elm, 'mouseup', ...opts);\n\n  return elm;\n};\n\n/**\n * 触发 keydown 事件\n * @param {Element} elm\n * @param {keyCode} int\n */\nexport const triggerKeyDown = function(el, keyCode) {\n  const evt = document.createEvent('Events');\n  evt.initEvent('keydown', true, true);\n  evt.keyCode = keyCode;\n  el.dispatchEvent(evt);\n};\n\n/**\n * 等待 ms 毫秒，返回 Promise\n * @param {Number} ms\n */\nexport const wait = function(ms = 50) {\n  return new Promise(resolve => setTimeout(() => resolve(), ms));\n};\n\n/**\n * 等待一个 Tick，代替 Vue.nextTick，返回 Promise\n */\nexport const waitImmediate = () => wait(0);\n"
  },
  {
    "path": "types/alert.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\nexport type AlertType = 'success' | 'warning' | 'info' | 'error'\nexport type AlertEffect = 'dark' | 'light'\n\n/** Alert Component */\nexport declare class ElAlert extends ElementUIComponent {\n  /** Title */\n  title: string\n\n  /** Component type */\n  type: AlertType\n\n  /** Descriptive text. Can also be passed with the default slot */\n  description: string\n\n  /** If closable or not */\n  closable: boolean\n\n  /** whether to center the text */\n  center: boolean\n\n  /** Customized close button text */\n  closeText: string\n\n  /** If a type icon is displayed */\n  showIcon: boolean\n\n  /** Choose effect */\n  effect: AlertEffect\n}\n"
  },
  {
    "path": "types/aside.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\n/** Aside Component */\nexport declare class ElAside extends ElementUIComponent {\n  /** Width of the side section */\n  width: string\n}\n"
  },
  {
    "path": "types/autocomplete.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\nexport type SuggestionPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'\n\nexport interface FetchSuggestionsCallback {\n  /**\n   * Callback function used in fetch-suggestions function\n   *\n   * @param data Suggestions to use\n   */\n  (data: any[]): void\n}\n\nexport interface FetchSuggestions {\n  /**\n   * The function passed into the fetch-suggestions property\n   *\n   * @param queryString Current value of the text input\n   * @param callback Callback function used to indicate that suggestions have completely fetched\n   */\n  (queryString: string, callback: FetchSuggestionsCallback): void\n}\n\n/** Autocomplete Component */\nexport declare class ElAutocomplete extends ElementUIComponent {\n  /** The placeholder of Autocomplete */\n  placeholder: string\n\n  /** Whether to show clear button */\n  clearable: boolean\n\n  /** Whether Autocomplete is disabled */\n  disabled: boolean\n\n  /** Binding value */\n  value: string\n\n  /** Debounce delay when typing */\n  debounce: number\n\n  /** Placement of the popup menu */\n  placement: SuggestionPlacement\n\n  /** Name for the inner native input */\n  name: string\n\n  /** Key name of the input suggestion object for display */\n  valueKey: string\n\n  /** Whether to emit select event on enter when there is no autocomplete match */\n  selectWhenUnmatched: boolean\n\n  /** A method to fetch input suggestions. When suggestions are ready, invoke callback(data:[]) to return them to Autocomplete */\n  fetchSuggestions: FetchSuggestions\n\n  /** Custom class name for autocomplete's dropdown */\n  popperClass: string\n\n  /** Whether show suggestions when input focus */\n  triggerOnFocus: boolean\n\n  /** Prefix icon class */\n  prefixIcon: string\n\n  /** Suffix icon class */\n  suffixIcon: string\n\n  /** Whether to hide the loading icon in remote search */\n  hideLoading: boolean\n\n  /** Whether to append the dropdown to body */\n  popperAppendToBody: boolean\n\n  /**\n   * Focus the Input component\n   */\n  focus (): void\n}\n"
  },
  {
    "path": "types/avatar.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\n/** Avatar Component */\nexport declare class ElAvatar extends ElementUIComponent {\n  icon: string;\n\n  size: string | number;\n\n  shape: string;\n\n  src: string;\n\n  error: () => false;\n\n  srcSet: string;\n\n  alt: string;\n\n  fit: string;\n}\n"
  },
  {
    "path": "types/backtop.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\n/** Backtop Component */\nexport declare class ElBacktop extends ElementUIComponent {\n  /** Backtop target */\n  target: string\n  \n  /** Backtop visibility height */\n  visibilityHeight: string | number\n\n  /** Backtop right position */\n  right: string | number\n\n  /** Backtop bottom position */\n  bottom: string | number\n}\n"
  },
  {
    "path": "types/badge.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\n/** Badge Component */\nexport declare class ElBadge extends ElementUIComponent {\n  /** Display value */\n  value: string | number\n\n  /** Maximum value, shows '{max}+' when exceeded. Only works if `value` is a number */\n  max: number\n\n  /** If a little dot is displayed */\n  isDot: boolean\n\n  /** Hidden badge */\n  hidden: boolean\n}\n"
  },
  {
    "path": "types/breadcrumb-item.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\n/** Breadcrumb Item Component */\nexport declare class ElBreadcrumbItem extends ElementUIComponent {\n  /** Target route of the link, same as to of vue-router */\n  to: string | object\n\n  /** If true, the navigation will not leave a history record */\n  replace: boolean\n}\n"
  },
  {
    "path": "types/breadcrumb.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\n/** Displays the location of the current page, making it easier to browser back */\nexport declare class ElBreadcrumb extends ElementUIComponent {\n  /** Separator character */\n  separator: string\n\n  /** Class name of the icon separator */\n  separatorClass: string\n}\n"
  },
  {
    "path": "types/button-group.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\n/** Button Group Component */\nexport declare class ElButtonGroup extends ElementUIComponent {}\n"
  },
  {
    "path": "types/button.d.ts",
    "content": "import { ElementUIComponent, ElementUIComponentSize } from './component'\n\n/** Button type */\nexport type ButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'\n\n/** Same as native button's type */\nexport type ButtonNativeType = 'button' | 'submit' | 'reset' | 'menu'\n\n/** Button Component */\nexport declare class ElButton extends ElementUIComponent {\n  /** Button size */\n  size: ElementUIComponentSize\n\n  /** Button type */\n  type: ButtonType\n\n  /** Determine whether it's a plain button */\n  plain: boolean\n\n  /** Determine whether it's a round button */\n  round: boolean\n\n  /** Determine whether it's loading */\n  loading: boolean\n\n  /** Disable the button */\n  disabled: boolean\n\n  /** Button icon, accepts an icon name of Element icon component */\n  icon: string\n\n  /** Same as native button's autofocus */\n  autofocus: boolean\n\n  /** Same as native button's type */\n  nativeType: ButtonNativeType\n}\n"
  },
  {
    "path": "types/calendar.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\nexport type DateType = Date | String | Number\n\n/** Calendar Component */\nexport declare class ElCalendar extends ElementUIComponent {\n  /** Binding value */\n  value: DateType\n\n  /** Specify the display range of the calendar */\n  range: DateType[]\n\n  /** First day of week */\n  firstDayOfWeek: number\n}\n"
  },
  {
    "path": "types/card.d.ts",
    "content": "import { VNode, VNodeDirective } from 'vue'\nimport { ElementUIComponent } from './component'\n\nexport interface CardSlots {\n  /** Content of the card */\n  default: VNode[],\n\n  /** Title of the card */\n  header: VNode[]\n\n  [key: string]: VNode[]\n}\n\n/** Integrate information in a card container */\nexport declare class ElCard extends ElementUIComponent {\n  /** Title of the card */\n  header: string\n\n  /** CSS style of body */\n  bodyStyle: object\n\n  /** When to show card shadows */\n  shadow: string\n\n  $slots: CardSlots\n}\n"
  },
  {
    "path": "types/carousel-item.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\n/** Carousel Item Component */\nexport declare class ElCarouselItem extends ElementUIComponent {\n  /** Name of the item, can be used in setActiveItem */\n  name: string\n\n  /** Text content for the corresponding indicator */\n  label: string\n}\n"
  },
  {
    "path": "types/carousel.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\nexport type CarouselIndicatorTrigger = 'hover' | 'click'\nexport type CarouselIndicatorPosition = 'outside' | 'none'\nexport type CarouselArrowVisibility = 'always' | 'hover' | 'never'\nexport type CarouselType = 'card'\nexport type CarouselDirection = 'horizontal' | 'vertical'\n\n/** Loop a series of images or texts in a limited space */\nexport declare class ElCarousel extends ElementUIComponent {\n  /** Height of the carousel */\n  height: number\n\n  /** Index of the initially active slide (starting from 0) */\n  initialIndex: number\n\n  /** How indicators are triggered */\n  trigger: CarouselIndicatorTrigger\n\n  /** Whether automatically loop the slides */\n  autoplay: boolean\n\n  /** Interval of the auto loop, in milliseconds */\n  interval: number\n\n  /** Position of the indicators */\n  indicatorPosition: CarouselIndicatorPosition\n\n  /** When arrows are shown */\n  arrow: CarouselArrowVisibility\n\n  /** Type of the Carousel */\n  type: CarouselType\n\n  /** Display direction */\n  direction: CarouselDirection\n\n  /**\n   * Manually switch slide by index\n   *\n   * @param index Index of the slide to be switched to (starting from 0)\n   */\n  setActiveItem (index: number): void\n\n  /**\n   * Manually switch slide by carousel item's name\n   *\n   * @param name The name of the corresponding `el-carousel-item`\n   */\n  setActiveItem (name: string): void\n\n  /** Switch to the previous slide */\n  prev (): void\n\n  /** Switch to the next slide */\n  next (): void\n}\n"
  },
  {
    "path": "types/cascader-panel.d.ts",
    "content": "import { VNode, CreateElement } from 'vue';\nimport { ElementUIComponent } from './component'\n\n/** Trigger mode of expanding current item */\nexport type ExpandTrigger = 'click' | 'hover'\n\n/** Cascader Option */\nexport interface CascaderOption {\n  label: string,\n  value: any,\n  children?: CascaderOption[],\n  disabled?: boolean,\n  leaf?: boolean\n}\n\n/** Cascader Props */\nexport interface CascaderProps<V, D> {\n  expandTrigger?: ExpandTrigger,\n  multiple?: boolean,\n  checkStrictly?: boolean,\n  emitPath?: boolean,\n  lazy?: boolean,\n  lazyLoad?: (node: CascaderNode<V, D>, resolve: Resolve<D>) => void,\n  value?: string,\n  label?: string,\n  children?: string,\n  disabled?: string\n  leaf?: string\n}\n\n/** Cascader Node */\nexport interface CascaderNode<V, D> {\n  uid: number,\n  data: D,\n  value: V,\n  label: string,\n  level: number,\n  isDisabled: boolean,\n  isLeaf: boolean,\n  parent: CascaderNode<V, D> | null,\n  children: CascaderNode<V, D>[]\n  config: CascaderProps<V, D>\n}\n\ntype Resolve<D> = (dataList?: D[]) => void\n\nexport interface CascaderPanelSlots {\n  /** Custom label content */\n  default: VNode[]\n\n  [key: string]: VNode[]\n}\n\n/** CascaderPanel Component */\nexport declare class ElCascaderPanel<V = any, D = CascaderOption> extends ElementUIComponent {\n  /** Selected value */\n  value: V | V[]\n\n  /** Data of the options */\n  options: D[]\n\n  /** Configuration options */\n  props: CascaderProps<V, D>\n\n  /** Whether to add border */\n  border: boolean\n\n  /** Render function of custom label content */\n  renderLabel: (h: CreateElement, context: { node: CascaderNode<V, D>; data: D }) => VNode\n\n  $slots: CascaderPanelSlots\n}\n"
  },
  {
    "path": "types/cascader.d.ts",
    "content": "import { VNode } from 'vue';\nimport { ElementUIComponent, ElementUIComponentSize } from './component'\nimport { CascaderOption, CascaderProps, CascaderNode } from './cascader-panel';\n\nexport { CascaderOption, CascaderProps, CascaderNode };\n\nexport interface CascaderSlots {\n  /** Custom label content */\n  default: VNode[],\n\n  /** Empty content when no option matches */\n  empty: VNode[]\n\n  [key: string]: VNode[]\n}\n\n/** Cascader Component */\nexport declare class ElCascader<V = any, D = CascaderOption> extends ElementUIComponent {\n  /** Data of the options */\n  options: CascaderOption[]\n\n  /** Configuration options */\n  props: CascaderProps<V, D>\n\n  /** Selected value */\n  value: V | V[]\n\n  /** Size of Input */\n  size: ElementUIComponentSize\n\n  /** Input placeholder */\n  placeholder: string\n\n  /** Whether Cascader is disabled */\n  disabled: boolean\n\n  /** Whether selected value can be cleared */\n  clearable: boolean\n\n  /** Whether to display all levels of the selected value in the input */\n  showAllLevels: boolean\n\n  /** Whether to collapse selected tags in multiple selection mode */\n  collapseTags: boolean\n\n  /** Separator of option labels */\n  separator: string\n\n  /** Whether the options can be searched */\n  filterable: boolean\n\n  /** filter method to match options according to input keyword */\n  filterMethod: (node: CascaderNode<V, D>, keyword: string) => boolean\n\n  /** Debounce delay when typing filter keyword, in millisecond */\n  debounce: number\n\n  /** Custom class name for Cascader's dropdown */\n  popperClass: string\n\n  /** Hook function before filtering with the value to be filtered as its parameter */\n  beforeFilter: (value: string) => boolean | Promise<any>\n\n  $slots: CascaderSlots\n}\n"
  },
  {
    "path": "types/checkbox-button.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\n/** Checkbox Button Component */\nexport declare class ElCheckboxButton extends ElementUIComponent {\n  /** Value of the checkbox when used inside a checkbox-group */\n  label: string | number | boolean\n\n  /** Value of the checkbox if it's checked */\n  trueLabel: string | number\n\n  /** Value of the checkbox if it's not checked */\n  falseLabel: string | number\n\n  /** Native 'name' attribute */\n  name: string\n\n  /** If the checkbox is disabled */\n  disabled: boolean\n\n  /** If the checkbox is checked */\n  checked: boolean\n}\n"
  },
  {
    "path": "types/checkbox-group.d.ts",
    "content": "import { ElementUIComponent, ElementUIComponentSize } from './component'\n\n/** Checkbox Group Component */\nexport declare class ElCheckboxGroup extends ElementUIComponent {\n  /** Size of checkbox buttons or bordered checkboxes */\n  size: ElementUIComponentSize\n\n  /** Whether the nesting checkboxes are disabled */\n  disabled: boolean\n\n  /** Minimum number of checkbox checked */\n  min: number\n\n  /** Maximum number of checkbox checked */\n  max: number\n\n  /** Font color when button is active */\n  textColor: string\n\n  /** Border and background color when button is active */\n  fill: string\n}\n"
  },
  {
    "path": "types/checkbox.d.ts",
    "content": "import { ElementUIComponent, ElementUIComponentSize } from './component'\n\n/** Checkbox Component */\nexport declare class ElCheckbox extends ElementUIComponent {\n  /** The form input value */\n  value: string | string[]\n\n  /** Value of the checkbox when used inside a checkbox-group */\n  label: string | number | boolean\n\n  /** Value of the checkbox if it's checked */\n  trueLabel: string | number\n\n  /** Value of the checkbox if it's not checked */\n  falseLabel: string | number\n\n  /** Native 'name' attribute */\n  name: string\n\n  /** Whether to add a border around Checkbox */\n  border: boolean\n\n  /** Size of the Checkbox, only works when border is true */\n  size: ElementUIComponentSize\n\n  /** If the checkbox is disabled */\n  disabled: boolean\n\n  /** If the checkbox is checked */\n  checked: boolean\n\n  /** Same as indeterminate in native checkbox */\n  indeterminate: boolean\n}\n"
  },
  {
    "path": "types/col.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\n/** Responsive column props */\nexport interface ResponsiveColumnProperties {\n  /** Number of column the grid spans */\n  span: number,\n\n  /** Number of spacing on the left side of the grid */\n  offset: number\n}\n\n/** Responsive column property */\nexport type ResponsiveColumn = number | ResponsiveColumnProperties\n\n/** Colunm Layout Component */\nexport declare class ElCol extends ElementUIComponent {\n  /** Number of column the grid spans */\n  span: number\n\n  /** Number of spacing on the left side of the grid */\n  offset: number\n\n  /** Number of columns that grid moves to the right */\n  push: number\n\n  /** Number of columns that grid moves to the left */\n  pull: number\n\n  /** <768px Responsive columns or column props object */\n  xs: ResponsiveColumn\n\n  /** ≥768px Responsive columns or column props object */\n  sm: ResponsiveColumn\n\n  /** ≥992px Responsive columns or column props object */\n  md: ResponsiveColumn\n\n  /** ≥1200px Responsive columns or column props object */\n  lg: ResponsiveColumn\n\n  /** ≥1920px Responsive columns or column props object */\n  xl: ResponsiveColumn\n\n  /** custom element tag */\n  tag: string\n}\n"
  },
  {
    "path": "types/collapse-item.d.ts",
    "content": "import { VNode } from 'vue'\nimport { ElementUIComponent } from './component'\n\nexport interface CollapseItemSlots {\n  /** Content of the collapse item */\n  default: VNode[],\n\n  /** Title of the collapse item */\n  title: VNode[]\n\n  [key: string]: VNode[]\n}\n\n/** Collapse Item Component */\nexport declare class ElCollapseItem extends ElementUIComponent {\n  /** Unique identification of the panel */\n  name: string | number\n\n  /** Title of the panel */\n  title: string\n\n  $slots: CollapseItemSlots\n\n  /** Disable the collapse item */\n  disabled: boolean\n}\n"
  },
  {
    "path": "types/collapse.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\n/** Use Collapse to store contents. */\nexport declare class ElCollapse extends ElementUIComponent {\n  /** Whether to activate accordion mode */\n  accordion: boolean\n\n  /** Currently active panel */\n  value: string | number | string[] | number[]\n}\n"
  },
  {
    "path": "types/color-picker.d.ts",
    "content": "import { ElementUIComponent, ElementUIComponentSize } from './component'\n\nexport type ColorFormat = 'hsl' | 'hsv' | 'hex' | 'rgb'\n\n/** ColorPicker Component */\nexport declare class ElColorPicker extends ElementUIComponent {\n  /** Whether to display the alpha slider */\n  showAlpha: boolean\n\n  /** Whether to disable the ColorPicker */\n  disabled: boolean\n\n  /** Size of ColorPicker */\n  size: ElementUIComponentSize\n\n  /** Whether to display the alpha slider */\n  popperClass: string\n\n  /** Custom class name for ColorPicker's dropdown */\n  colorFormat: ColorFormat\n}\n"
  },
  {
    "path": "types/component.d.ts",
    "content": "import Vue from 'vue'\n\n/** ElementUI component common definition */\nexport declare class ElementUIComponent extends Vue {\n  /** Install component into Vue */\n  static install (vue: typeof Vue): void\n}\n\n/** Component size definition for button, input, etc */\nexport type ElementUIComponentSize = 'large' | 'medium' | 'small' | 'mini'\n\n/** Horizontal alignment */\nexport type ElementUIHorizontalAlignment = 'left' | 'center' | 'right'\n"
  },
  {
    "path": "types/container.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\n/** Container Component */\nexport declare class ElContainer extends ElementUIComponent {\n  /** Layout direction for child elements */\n  direction: 'horizontal' | 'vertical'\n}\n"
  },
  {
    "path": "types/date-picker.d.ts",
    "content": "import { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component'\n\nexport type DatePickerType = 'year' | 'month' | 'date' | 'datetime' | 'week' | 'datetimerange' | 'daterange' | 'dates'\nexport type FirstDayOfWeek = 1 | 2 | 3 | 4 | 5 | 6 | 7\n\nexport interface DisabledDateChecker {\n  /**\n   * Determine if `date` will be disabled in the picker\n   *\n   * @param date The date to check\n   * @returns if `date` will be disabled in the picker\n   */\n  (date: Date): boolean\n}\n\n// Picked date range\nexport interface DateRange {\n  minDate: Date,\n  maxDate: Date\n}\n\nexport interface PickEventHandler {\n  /**\n   * Callback function that triggers when picks a date range\n   *\n   * @param dateRange The selected date range\n   */\n  (dateRange: DateRange): void\n}\n\nexport interface ShortcutClickEventHandler {\n  /**\n   * Callback function that triggers when clicking on a shortcut.\n   * You can change the picker value by emitting the pick event.\n   * Example: `vm.$emit('pick', new Date())`\n   */\n  (vm: ElDatePicker): void\n}\n\n/** Shortcut options */\nexport interface Shortcut {\n  /** Title of the shortcut */\n  text: string,\n\n  /** Callback function that triggers when picks a date range */\n  onClick?: ShortcutClickEventHandler\n}\n\n/** Options of el-date-picker */\nexport interface DatePickerOptions {\n  /** An object array to set shortcut options */\n  shortcuts?: Shortcut[]\n\n  /** A function determining if a date is disabled. */\n  disabledDate?: DisabledDateChecker\n\n  /** First day of week */\n  firstDayOfWeek?: FirstDayOfWeek\n\n  /** A callback that triggers when the seleted date is changed. Only for daterange and datetimerange. */\n  onPick?: PickEventHandler\n}\n\n/** DatePicker Component */\nexport declare class ElDatePicker extends ElementUIComponent {\n  /** The value of the date picker */\n  value: Date | string | Date[] | string[]\n\n  /** Whether DatePicker is read only */\n  readonly: boolean\n\n  /** Whether DatePicker is disabled */\n  disabled: boolean\n\n  /** Size of Input */\n  size: ElementUIComponentSize\n\n  /** Whether the input is editable */\n  editable: boolean\n\n  /** Whether to show clear button */\n  clearable: boolean\n\n  /** Placeholder */\n  placeholder: string\n\n  /** Placeholder for the start date in range mode */\n  startPlaceholder: string\n\n  /** Placeholder for the end date in range mode */\n  endPlaceholder: string\n\n  /** Type of the picker */\n  type: DatePickerType\n\n  /** Format of the picker */\n  format: string\n\n  /** Alignment */\n  align: ElementUIHorizontalAlignment\n\n  /** Custom class name for DatePicker's dropdown */\n  popperClass: string\n\n  /** Additional options, check the table below */\n  pickerOptions: DatePickerOptions\n\n  /** Range separator */\n  rangeSeparator: string\n\n  /** Default date of the calendar */\n  defaultValue: Date | number | string\n\n  /** Format of binding value. If not specified, the binding value will be a Date object */\n  valueFormat: string\n\n  /** name for the inner native input */\n  name: string\n\n  /**\n   * Focus the Input component\n   */\n  focus (): void\n}\n"
  },
  {
    "path": "types/descriptions-item.d.ts",
    "content": "import { ElementUIComponent } from './component'\nimport { VNode } from 'vue'\n\ninterface ElDescriptionsItemSlots {\n  /* label slot: custom label */\n  label: VNode[]\n\n  /* default slot: custom content */\n  default: VNode[]\n\n  [key: string]: VNode[]\n}\n\n/** description item. **/\nexport declare class ElDescriptionsItem extends ElementUIComponent {\n\n  /* label text */\n  label: string\n\n  /*  the number of columns included */\n  span: number \n\n  /* custom label class name */\n  labelClassName: string\n\n  /* custom content class name */\n  contentClassName: string\n\n  /* custom label style */\n  labelStyle: object\n\n  /* custom content style */\n  contentStyle: object\n\n  $slots: ElDescriptionsItemSlots\n\n}\n"
  },
  {
    "path": "types/descriptions.d.ts",
    "content": "import { ElementUIComponent } from './component'\nimport { VNode } from 'vue'\n\ninterface ElDescriptionsSlots {\n  /* title slot: custom title, display on the top left */\n  title: VNode[]\n\n  /* title slot: custom extra area, display on the top right */\n  extra: VNode[]\n\n  [key: string]: VNode[]\n}\n\n/** Display multiple fields in list form. **/\nexport declare class ElDescriptions extends ElementUIComponent {\n\n  /* with or without border */\n  border: boolean\n  \n  /* numbers of Descriptions Item in one line */\n  column: number\n\n  /* direction of list */\n  direction: 'vertical' | 'horizontal'\n\n  /* size of list */\n  size: 'medium' | 'small' | 'mini'\n\n  /* title text, display on the top left */\n  title: string\n\n  /* extra text, display on the top right */\n  extra: string\n\n  /* change default props colon value of Descriptions Item */\n  colon: boolean\n\n  /* custom label class name */\n  labelClassName: string\n\n  /* custom content class name */\n  contentClassName: string\n\n  /* custom label style */\n  labelStyle: object\n\n  /* custom content style */\n  contentStyle: object\n\n  $slots: ElDescriptionsSlots\n\n}\n"
  },
  {
    "path": "types/dialog.d.ts",
    "content": "import { VNode } from 'vue'\nimport { ElementUIComponent } from './component'\n\nexport interface DialogSlots {\n  /** Content of the Dialog */\n  default: VNode[],\n\n  /** Content of the Dialog title */\n  title: VNode[],\n\n  /** Content of the Dialog footer */\n  footer: VNode[],\n\n  [key: string]: VNode[]\n}\n\n/** Informs users while preserving the current page state */\nexport declare class ElDialog extends ElementUIComponent {\n  /** Title of Dialog */\n  title: string\n\n  /** Width of Dialog */\n  width: string\n\n  /** Whether the Dialog takes up full screen */\n  fullscreen: boolean\n\n  /** Value for margin-top of Dialog CSS */\n  top: string\n\n  /** Whether a mask is displayed */\n  modal: boolean\n\n  /** Whether to append modal to body element. If false, the modal will be appended to Dialog's parent element */\n  modalAppendToBody: boolean\n\n  /** Whether scroll of body is disabled while Dialog is displayed */\n  lockScroll: boolean\n\n  /** Custom class names for Dialog */\n  customClass: string\n\n  /** Whether the Dialog can be closed by clicking the mask */\n  closeOnClickModal: boolean\n\n  /** Whether the Dialog can be closed by pressing ESC */\n  closeOnPressEscape: boolean\n\n  /** Whether to show a close button */\n  showClose: boolean\n\n  /** Callback before Dialog closes, and it will prevent Dialog from closing */\n  beforeClose: (done: Function) => void\n\n  /** Whether to align the header and footer in center */\n  center: boolean\n\n  /** Whether to destroy elements in Dialog when closed */\n  destroyOnClose: boolean\n\n  $slots: DialogSlots\n}\n"
  },
  {
    "path": "types/divider.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\nexport type ContentPosition = 'left' | 'center' | 'right'\n\n/** Divider Component */\nexport declare class ElDivider extends ElementUIComponent {\n  /** enable vertical divider */\n  vertical: boolean\n\n  /** customize the content on the divider line */\n  posiiton: ContentPosition\n}\n"
  },
  {
    "path": "types/drawer.d.ts",
    "content": "import { ElementUIComponent } from './component'\nimport { VNode } from 'vue'\n\ntype hide = (shouldCancel: boolean) => void\ndeclare enum Direction {\n    LTR = 'ltr', // left to right\n    RTL = 'rtl', // right to left\n    TTB = 'ttb', // top to bottom\n    BTT = 'btt' // bottom to top\n}\n\ninterface DrawerSlots {\n    /* Main Content Slots */\n    default: VNode[];\n\n    /* Title Slots */\n    title: VNode[];\n\n    [key: string]: VNode[]\n}\n/** Drawer Component */\nexport declare class ElDrawer extends ElementUIComponent {\n    /* Equivalent to `Dialog`'s append to body attribute, when applying nested drawer, make sure this one is set to true */\n    appendToBody: boolean\n\n    /* Hook method called before close drawer, the first parameter is a function which should determine if the drawer should be closed */\n    beforeClose: (done: hide) => void\n\n    /** Whether the Drawer can be closed by pressing ESC */\n    closeOnPressEscape: boolean\n\n    /** Custom class names for Dialog */\n    customClass: string\n\n    /* Determine whether the wrapped children should be destroyed, if true, children's destroyed life cycle method will be called all local state will be destroyed */\n    destroyOnClose: boolean\n\n    /* Equivalent to `Dialog`'s modal attribute, determines whether the dark shadowing background should show */\n    modal: boolean\n\n    /* Equivalent to `Dialog`'s modal-append-to-body attribute, determines whether the shadowing background should be inserted direct to DocumentBody element */\n    modalAppendToBody: boolean\n\n    /* Attributes that controls the drawer's direction of display*/\n    position: Direction\n\n    /* Whether the close button should be rendered to control the drawer's visible state */\n    showClose: boolean\n\n    /* The size of the drawer component, supporting number with unit of pixel, string by percentage e.g. 30% */\n    size: number | string\n\n    /* The Drawer's title, also can be replaced by named slot `title` */\n    title: string\n\n    /* Whether the drawer component should show, also can be decorated by `.sync` */\n    visible: boolean\n\n    /* Flag attribute whi */\n    wrapperClosable: boolean\n\n    $slots: DrawerSlots\n}\n"
  },
  {
    "path": "types/dropdown-item.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\n/** Toggleable menu for displaying lists of links and actions. */\nexport declare class ElDropdownItem extends ElementUIComponent {\n  /** A command to be dispatched to Dropdown's command callback */\n  command: string | number | object\n\n  /** Whether the item is disabled */\n  disabled: boolean\n\n  /** Whether a divider is displayed */\n  divided: boolean\n\n  /** Icon to show on left side of text */\n  icon: string\n}\n"
  },
  {
    "path": "types/dropdown-menu.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\n/** Dropdown Menu Component */\nexport declare class ElDropdownMenu extends ElementUIComponent {}\n"
  },
  {
    "path": "types/dropdown.d.ts",
    "content": "import { ElementUIComponent, ElementUIComponentSize } from './component'\nimport { ButtonType } from './button'\n\nexport type DropdownMenuAlignment = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'\nexport type DropdownMenuTrigger = 'hover' | 'click'\n\n/** Toggleable menu for displaying lists of links and actions */\nexport declare class ElDropdown extends ElementUIComponent {\n  /** Menu button type. only works when split-button is true */\n  type: ButtonType\n\n  /** Whether a button group is displayed */\n  splitButton: boolean\n\n  /** menu size, also works on the split button */\n  size: ElementUIComponentSize\n\n  /** Placement of the menu */\n  placement: DropdownMenuAlignment\n\n  /** How to trigger */\n  trigger: DropdownMenuTrigger\n\n  /** Whether to hide menu after clicking menu-item */\n  hideOnClick: boolean\n\n  /** Delay time before show a dropdown */\n  showTimeout: number\n\n  /** Delay time before hide a dropdown */\n  hideTimeout: number\n\n  /** Dropdown tabindex */\n  tabindex: number\n\n  /** Whether Dropdown is disabled */\n  disabled: boolean\n}\n"
  },
  {
    "path": "types/element-ui.d.ts",
    "content": "import Vue, { PluginObject } from 'vue'\r\nimport { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component'\r\n\r\nimport { ElAlert } from './alert'\r\nimport { ElAside } from './aside'\r\nimport { ElAutocomplete } from './autocomplete'\r\nimport { ElBadge } from './badge'\r\nimport { ElBreadcrumb } from './breadcrumb'\r\nimport { ElBreadcrumbItem } from './breadcrumb-item'\r\nimport { ElButton } from './button'\r\nimport { ElButtonGroup } from './button-group'\r\nimport { ElCard } from './card'\r\nimport { ElCarousel } from './carousel'\r\nimport { ElCarouselItem } from './carousel-item'\r\nimport { ElCascader } from './cascader'\r\nimport { ElCheckbox } from './checkbox'\r\nimport { ElCheckboxButton } from './checkbox-button'\r\nimport { ElCheckboxGroup } from './checkbox-group'\r\nimport { ElCol } from './col'\r\nimport { ElCollapse } from './collapse'\r\nimport { ElCollapseItem } from './collapse-item'\r\nimport { ElColorPicker } from './color-picker'\r\nimport { ElContainer } from './container'\r\nimport { ElDatePicker } from './date-picker'\r\nimport { ElDialog } from './dialog'\r\nimport { ElDropdown } from './dropdown'\r\nimport { ElDropdownItem } from './dropdown-item'\r\nimport { ElDropdownMenu } from './dropdown-menu'\r\nimport { ElFooter } from './footer'\r\nimport { ElForm } from './form'\r\nimport { ElFormItem } from './form-item'\r\nimport { ElHeader } from './header'\r\nimport { ElInput } from './input'\r\nimport { ElInputNumber } from './input-number'\r\nimport { ElLoading } from './loading'\r\nimport { ElMain } from './main'\r\nimport { ElMenu } from './menu'\r\nimport { ElMenuItem } from './menu-item'\r\nimport { ElMenuItemGroup } from './menu-item-group'\r\nimport { ElMessage } from './message'\r\nimport { ElMessageBox } from './message-box'\r\nimport { ElNotification } from './notification'\r\nimport { ElOption } from './option'\r\nimport { ElOptionGroup } from './option-group'\r\nimport { ElPagination } from './pagination'\r\nimport { ElPopover } from './popover'\r\nimport { ElProgress } from './progress'\r\nimport { ElRate } from './rate'\r\nimport { ElRadio } from './radio'\r\nimport { ElRadioButton } from './radio-button'\r\nimport { ElRadioGroup } from './radio-group'\r\nimport { ElRow } from './row'\r\nimport { ElSelect } from './select'\r\nimport { ElSlider } from './slider'\r\nimport { ElStep } from './step'\r\nimport { ElSteps } from './steps'\r\nimport { ElSubmenu } from './submenu'\r\nimport { ElSwitch } from './switch'\r\nimport { ElTable } from './table'\r\nimport { ElTableColumn } from './table-column'\r\nimport { ElTag } from './tag'\r\nimport { ElTabs } from './tabs'\r\nimport { ElTabPane } from './tab-pane'\r\nimport { ElTimeline } from './timeline'\r\nimport { ElTimelineItem } from './timeline-item'\r\nimport { ElTimePicker } from './time-picker'\r\nimport { ElTimeSelect } from './time-select'\r\nimport { ElTooltip } from './tooltip'\r\nimport { ElTransfer } from './transfer'\r\nimport { ElTree, TreeData } from './tree'\r\nimport { ElUpload } from './upload'\r\nimport { ElLink } from './link'\r\nimport { ElDivider } from './divider'\r\nimport { ElIcon } from './icon'\r\nimport { ElCalendar } from './calendar'\r\nimport { ElImage } from './image'\r\nimport { ElBacktop } from './backtop'\r\nimport { ElInfiniteScroll } from './infinite-scroll'\r\nimport { ElPageHeader } from './page-header'\r\nimport { ElAvatar } from './avatar'\r\nimport { ElDrawer } from './drawer'\r\nimport { ElPopconfirm } from './popconfirm'\r\nimport { ElSkeleton } from './skeleton'\r\nimport { ElSkeletonItem } from './skeleton-item'\r\nimport { ElCascaderPanel } from './cascader-panel'\r\nimport { ElEmpty } from './empty'\r\nimport { ElSpinner } from './spinner'\r\nimport { ElDescriptions } from './descriptions'\r\nimport { ElDescriptionsItem } from './descriptions-item'\r\nimport { ElResult } from './result'\r\nimport { ElStatistic } from './statistic'\r\n\r\nexport interface InstallationOptions {\r\n  locale: any,\r\n  i18n: any,\r\n  size: string\r\n}\r\n\r\n/** The version of element-ui */\r\nexport const version: string\r\n\r\n/**\r\n * Install all element-ui components into Vue.\r\n * Please do not invoke this method directly.\r\n * Call `Vue.use(ElementUI)` to install.\r\n */\r\nexport function install (vue: typeof Vue, options: InstallationOptions): void\r\n\r\n/** ElementUI component common definition */\r\nexport type Component = ElementUIComponent\r\n\r\n/** Component size definition for button, input, etc */\r\nexport type ComponentSize = ElementUIComponentSize\r\n\r\n/** Horizontal alignment */\r\nexport type HorizontalAlignment = ElementUIHorizontalAlignment\r\n\r\n/** Show animation while loading data */\r\nexport const Loading: ElLoading\r\n\r\n/** 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. */\r\nexport const Message: ElMessage\r\n\r\n/** A set of modal boxes simulating system message box, mainly for message prompt, success tips, error messages and query information */\r\nexport const MessageBox: ElMessageBox\r\n\r\n/** Displays a global notification message at the upper right corner of the page */\r\nexport const Notification: ElNotification\r\n\r\n// TS cannot merge imported class with namespace, so declare subclasses instead\r\n\r\n/** Alert Component */\r\nexport class Alert extends ElAlert {}\r\n\r\n/** Aside Component */\r\nexport class Aside extends ElAside {}\r\n\r\n/** Autocomplete Component */\r\nexport class Autocomplete extends ElAutocomplete {}\r\n\r\n/** Bagde Component */\r\nexport class Badge extends ElBadge {}\r\n\r\n/** Breadcrumb Component */\r\nexport class Breadcrumb extends ElBreadcrumb {}\r\n\r\n/** Breadcrumb Item Component */\r\nexport class BreadcrumbItem extends ElBreadcrumbItem {}\r\n\r\n/** Button Component */\r\nexport class Button extends ElButton {}\r\n\r\n/** Button Group Component */\r\nexport class ButtonGroup extends ElButtonGroup {}\r\n\r\n/** Card Component */\r\nexport class Card extends ElCard {}\r\n\r\n/** Cascader Component */\r\nexport class Cascader extends ElCascader {}\r\n\r\n/** Carousel Component */\r\nexport class Carousel extends ElCarousel {}\r\n\r\n/** Carousel Item Component */\r\nexport class CarouselItem extends ElCarouselItem {}\r\n\r\n/** Checkbox Component */\r\nexport class Checkbox extends ElCheckbox {}\r\n\r\n/** Checkbox Button Component */\r\nexport class CheckboxButton extends ElCheckboxButton {}\r\n\r\n/** Checkbox Group Component */\r\nexport class CheckboxGroup extends ElCheckboxGroup {}\r\n\r\n/** Colunm Layout Component */\r\nexport class Col extends ElCol {}\r\n\r\n/** Collapse Component */\r\nexport class Collapse extends ElCollapse {}\r\n\r\n/** Collapse Item Component */\r\nexport class CollapseItem extends ElCollapseItem {}\r\n\r\n/** Color Picker Component */\r\nexport class ColorPicker extends ElColorPicker {}\r\n\r\n/** Container Component */\r\nexport class Container extends ElContainer {}\r\n\r\n/** Date Picker Component */\r\nexport class DatePicker extends ElDatePicker {}\r\n\r\n/** Dialog Component */\r\nexport class Dialog extends ElDialog {}\r\n\r\n/** Dropdown Component */\r\nexport class Dropdown extends ElDropdown {}\r\n\r\n/** Dropdown Item Component */\r\nexport class DropdownItem extends ElDropdownItem {}\r\n\r\n/** Dropdown Menu Component */\r\nexport class DropdownMenu extends ElDropdownMenu {}\r\n\r\n/** Footer Component */\r\nexport class Footer extends ElFooter {}\r\n\r\n/** Form Component */\r\nexport class Form extends ElForm {}\r\n\r\n/** Form Item Component */\r\nexport class FormItem extends ElFormItem {}\r\n\r\n/** Header Component */\r\nexport class Header extends ElHeader {}\r\n\r\n/** Input Component */\r\nexport class Input extends ElInput {}\r\n\r\n/** Input Number Component */\r\nexport class InputNumber extends ElInputNumber {}\r\n\r\n/** Main Component */\r\nexport class Main extends ElMain {}\r\n\r\n/** Menu that provides navigation for your website */\r\nexport class Menu extends ElMenu {}\r\n\r\n/** Menu Item Component */\r\nexport class MenuItem extends ElMenuItem {}\r\n\r\n/** Menu Item Group Component */\r\nexport class MenuItemGroup extends ElMenuItemGroup {}\r\n\r\n/** Dropdown Select Option Component */\r\nexport class Option extends ElOption {}\r\n\r\n/** Dropdown Select Option Group Component */\r\nexport class OptionGroup extends ElOptionGroup {}\r\n\r\n/** Pagination Component */\r\nexport class Pagination extends ElPagination {}\r\n\r\n/** Popover Component */\r\nexport class Popover extends ElPopover {}\r\n\r\n/** Progress Component */\r\nexport class Progress extends ElProgress {}\r\n\r\n/** Rate Component */\r\nexport class Rate extends ElRate {}\r\n\r\n/** Radio Component */\r\nexport class Radio extends ElRadio {}\r\n\r\n/** Radio Button Component */\r\nexport class RadioButton extends ElRadioButton {}\r\n\r\n/** Radio Group Component */\r\nexport class RadioGroup extends ElRadioGroup {}\r\n\r\n/** Row Layout Component */\r\nexport class Row extends ElRow {}\r\n\r\n/** Dropdown Select Component */\r\nexport class Select extends ElSelect {}\r\n\r\n/** Slider Component */\r\nexport class Slider extends ElSlider {}\r\n\r\n/** Step Component */\r\nexport class Step extends ElStep {}\r\n\r\n/** Steps Component */\r\nexport class Steps extends ElSteps {}\r\n\r\n/** Submenu Component */\r\nexport class Submenu extends ElSubmenu {}\r\n\r\n/** Switch Component */\r\nexport class Switch extends ElSwitch {}\r\n\r\n/** Table Component */\r\nexport class Table extends ElTable {}\r\n\r\n/** Table Column Component */\r\nexport class TableColumn extends ElTableColumn {}\r\n\r\n/** Tabs Component */\r\nexport class Tabs extends ElTabs {}\r\n\r\n/** Tab Pane Component */\r\nexport class TabPane extends ElTabPane {}\r\n\r\n/** Tag Component */\r\nexport class Tag extends ElTag {}\r\n\r\n/** Timeline Component */\r\nexport class Timeline extends ElTimeline {}\r\n\r\n/** Timeline Item Component */\r\nexport class TimelineItem extends ElTimelineItem {}\r\n\r\n/** TimePicker Component */\r\nexport class TimePicker extends ElTimePicker {}\r\n\r\n/** TimeSelect Component */\r\nexport class TimeSelect extends ElTimeSelect {}\r\n\r\n/** Tooltip Component */\r\nexport class Tooltip extends ElTooltip {}\r\n\r\n/** Transfer Component */\r\nexport class Transfer extends ElTransfer {}\r\n\r\n/** Tree Component */\r\nexport class Tree<K = any, D = TreeData> extends ElTree<K, D> {}\r\n\r\n/** Upload Component */\r\nexport class Upload extends ElUpload {}\r\n\r\n/** Divider Component */\r\nexport class Divider extends ElDivider {}\r\n\r\n/** Link Component */\r\nexport class Link extends ElLink {}\r\n\r\n/** Image Component */\r\nexport class Image extends ElImage {}\r\n\r\n/** Icon Component */\r\nexport class Icon extends ElIcon {}\r\n\r\n/** Calendar Component */\r\nexport class Calendar extends ElCalendar {}\r\n\r\n/** Backtop Component */\r\nexport class Backtop extends ElBacktop {}\r\n\r\n/** InfiniteScroll Directive */\r\nexport const InfiniteScroll: PluginObject<ElInfiniteScroll>;\r\n\r\n/** PageHeader Component */\r\nexport class PageHeader extends ElPageHeader {}\r\n\r\n/** Avatar Component */\r\nexport class Avatar extends ElAvatar {}\r\n\r\n/** Drawer Component */\r\nexport class Drawer extends ElDrawer {}\r\n\r\n/** Popconfirm Component */\r\nexport class Popconfirm extends ElPopconfirm {}\r\n\r\n/** Skeleton Component */\r\nexport class Skeleton extends ElSkeleton {}\r\n\r\n/** Skeleton Item Component */\r\nexport class SkeletonItem extends ElSkeletonItem {}\r\n\r\n/** CascaderPanel Component */\r\nexport class CascaderPanel extends ElCascaderPanel {}\r\n\r\n/** Empty Component */\r\nexport class Empty extends ElEmpty {}\r\n\r\n/** Spinner Component */\r\nexport class Spinner extends ElSpinner {}\r\n\r\n/** Description Component */\r\nexport class Descriptions extends ElDescriptions {}\r\n\r\n/** Description Item Component */\r\nexport class DescriptionsItem extends ElDescriptionsItem {}\r\n\r\n/** Result Component */\r\nexport class Result extends ElResult {}\r\n\r\n/** Statistic Component */\r\nexport class Statistic extends ElStatistic {}"
  },
  {
    "path": "types/empty.d.ts",
    "content": "import { ElementUIComponent } from './component'\nimport { VNode } from 'vue'\n\ninterface ELEmptySlots {\n  /* default slot:  \bCustom bottom content */\n  default: VNode[]\n\n  /* image slot: Custom image */\n  image: VNode[]\n\n  /* description slot: Custom description */\n  description: VNode[]\n\n\n  [key: string]: VNode[]\n}\n\n/** Placeholder hints for empty states. */\nexport declare class ElEmpty extends ElementUIComponent {\n  /* image URL */\n  image: string\n  \t\n  /* image size (width) */\n  imageSize: number\n  \n  /* description */\n  description: string\n\n  $slots: ELEmptySlots\n\n}\n"
  },
  {
    "path": "types/footer.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\n/** Footer Component */\nexport declare class ElFooter extends ElementUIComponent {\n  /** Height of the footer */\n  height: string\n}\n"
  },
  {
    "path": "types/form-item.d.ts",
    "content": "import { ElementUIComponent, ElementUIComponentSize } from './component'\n\n/** FormItem Component */\nexport declare class ElFormItem extends ElementUIComponent {\n  /** A key of `model` of the enclosing `el-form` component */\n  prop: string\n\n  /** Label */\n  label: string\n\n  /** Width of label, e.g. '50px' */\n  labelWidth: string\n\n  /** Whether the field is required or not, will be determined by validation rules if omitted */\n  required: boolean\n\n  /** Validation rules of form */\n  rules: object\n\n  /** Field error message, set its value and the field will validate error and show this message immediately */\n  error: string\n\n  /** Whether to show the error message */\n  showMessage: boolean\n\n  /** Whether to display the error message inline with the form item */\n  inlineMessage: boolean\n\n  /** Controls the size of components in this form */\n  size: ElementUIComponentSize\n\n  /** Reset current field and remove validation result */\n  resetField (): void\n\n  /** Remove validation status of the field */\n  clearValidate (): void\n}\n"
  },
  {
    "path": "types/form.d.ts",
    "content": "import { ElementUIComponent, ElementUIComponentSize } from './component'\n\nexport type FormItemLabelPosition = 'left' | 'right' | 'top'\n\nexport interface ValidateCallback {\n  /**\n   * The callback to tell the validation result\n   *\n   * @param isValid Whether the form is valid\n   * @param invalidFields fields that fail validation\n   */\n  (isValid: boolean, invalidFields: object): void\n}\n\nexport interface ValidateFieldCallback {\n  /**\n   * The callback to tell the field validation result\n   *\n   * @param errorMessage The error message. It will be empty if there is no error\n   */\n  (errorMessage: string): void\n}\n\n/** Form Component */\nexport declare class ElForm extends ElementUIComponent {\n  /** Data of form component */\n  model: object\n\n  /** Validation rules of form */\n  rules: object\n\n  /** Whether the form is inline */\n  inline: boolean\n\n  /** Whether the form is disabled */\n  disabled: boolean\n\n  /** Position of label */\n  labelPosition: FormItemLabelPosition\n\n  /** Width of label, and all form items will inherit from Form */\n  labelWidth: string\n\n  /** Suffix of the label */\n  labelSuffix: string\n\n  /** Whether to show the error message */\n  showMessage: boolean\n\n  /** Whether to display the error message inline with the form item */\n  inlineMessage: boolean\n\n  /** Whether to display an icon indicating the validation result */\n  statusIcon: boolean\n\n  /** Whether to trigger validation when the `rules` prop is changed */\n  validateOnRuleChange: boolean\n\n  /** Controls the size of components in this form */\n  size: ElementUIComponentSize\n\n  /**\n   * Validate the whole form\n   *\n   * @param callback A callback to tell the validation result\n   */\n  validate (callback: ValidateCallback): void\n  validate (): Promise<boolean>\n  /**\n   * Validate certain form items\n   *\n   * @param props The property of `model` or array of prop which is going to validate\n   * @param callback A callback to tell the field validation result\n   */\n  validateField (props: string | string[], callback?: ValidateFieldCallback): void\n\n  /** reset all the fields and remove validation result */\n  resetFields (): void\n\n  /** clear validation message for certain fields */\n  clearValidate (props?: string | string[]): void\n}\n"
  },
  {
    "path": "types/header.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\n/** Header Component */\nexport declare class ElHeader extends ElementUIComponent {\n  /** Height of the header */\n  height: string\n}\n"
  },
  {
    "path": "types/icon.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\n/** Icon Component */\nexport declare class ElIcon extends ElementUIComponent {\n  /** Icon name */\n  name: string  \n}\n"
  },
  {
    "path": "types/image.d.ts",
    "content": "import { VNode } from 'vue'\nimport { ElementUIComponent } from './component'\n\nexport type ObjectFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'\n\nexport interface ImageSlots {\n  /** Placeholder content when image hasn't loaded yet */\n  placeholder: VNode[]\n\n  /** Error content when error occurs to image load */\n  error: VNode[]\n\n  [key: string]: VNode[]\n}\n\n/** Image Component */\nexport declare class ElImage extends ElementUIComponent {\n  /** Image source */\n  src: string\n\n  /** Indicate how the image should be resized to fit its container, same as native 'object-fit' */\n  fit: ObjectFit\n\n  /** Whether to use lazy load */\n  lazy: boolean\n\n  /** Scroll container that to add scroll listener when using lazy load */\n  scrollContainer: string | HTMLElement\n\n  /** Native 'alt' attribute */\n  alt: string\n\n  /** Native 'referrerPolicy' attribute */\n  referrerPolicy: string\n\n  $slots: ImageSlots\n\n  previewSrcList: string[]\n\n  zIndex: number\n\n  initialIndex: number\n}\n"
  },
  {
    "path": "types/index.d.ts",
    "content": "export * from './element-ui'\n\nimport * as ElementUI from './element-ui'\nexport default ElementUI\n"
  },
  {
    "path": "types/infinite-scroll.d.ts",
    "content": "import { VNodeDirective } from 'vue'\n\nexport interface ElInfiniteScroll extends VNodeDirective {\n  name: 'infinite-scroll',\n  value: Function\n}"
  },
  {
    "path": "types/input-number.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\nexport type InputNumberSize = 'large' | 'small'\n\n/** InputNumber Component */\nexport declare class ElInputNumber extends ElementUIComponent {\n  /** Binding value */\n  value: number\n\n  /** The minimum allowed value */\n  min: number\n\n  /** The maximum allowed value */\n  max: number\n\n  /** Incremental step */\n  step: number\n\n  /** Size of the component */\n  size: InputNumberSize\n\n  /** Whether the component is disabled */\n  disabled: boolean\n\n  /** Whether to enable the control buttons */\n  controls: boolean\n\n  /** Debounce delay when typing, in milliseconds */\n  debounce: number\n\n  /** Position of the control buttons */\n  controlsPosition: string\n\n  /** Same as name in native input */\n  name: string\n\n  /** Precision of input value */\n  precision: number\n\n  /** whether input value can only be multiple of step */\n  stepStrictly: boolean\n\n  /**\n   * Focus the Input component\n   */\n  focus (): void\n}\n"
  },
  {
    "path": "types/input.d.ts",
    "content": "import { ElementUIComponent, ElementUIComponentSize } from './component'\n\n/** The resizability of el-input component */\nexport type Resizability = 'none' | 'both' | 'horizontal' | 'vertical'\nexport type InputType = 'text' | 'textarea'\n\n/** Controls how el-input component automatically sets size */\nexport interface AutoSize {\n  /** Minimum rows to show */\n  minRows: number,\n\n  /** Maximum rows to show */\n  maxRows: number\n}\n\n/** Input Component */\nexport declare class ElInput extends ElementUIComponent {\n  /** Type of input */\n  type: InputType\n\n  /** Binding value */\n  value: string | number\n\n  /** Maximum Input text length */\n  maxlength: number\n\n  /** Minimum Input text length */\n  minlength: number\n\n  /** Placeholder of Input */\n  placeholder: string\n\n  /** Whether Input is disabled */\n  disabled: boolean\n\n  /** Size of Input, works when type is not 'textarea' */\n  size: ElementUIComponentSize\n\n  /** Prefix icon class */\n  prefixIcon: string\n\n  /** Suffix icon class */\n  suffixIcon: string\n\n  /** Number of rows of textarea, only works when type is 'textarea' */\n  rows: number\n\n  /** Whether textarea has an adaptive height, only works when type is 'textarea' */\n  autosize: boolean | AutoSize\n\n  /** @Deprecated in next major version */\n  autoComplete: string\n\n  /** Same as autocomplete in native input */\n  autocomplete: string\n\n  /** Same as name in native input */\n  name: string\n\n  /** Same as readonly in native input */\n  readonly: boolean\n\n  /** Same as max in native input */\n  max: any\n\n  /** Same as min in native input */\n  min: any\n\n  /** Same as step in native input */\n  step: any\n\n  /** Control the resizability */\n  resize: Resizability\n\n  /** Same as autofocus in native input */\n  autofocus: boolean\n\n  /** Same as form in native input */\n  form: string\n\n  /** Whether to trigger form validatio */\n  validateEvent: boolean\n\n  /** Whether the input is clearable */\n  clearable: boolean\n\n  /** Whether to show password */\n  showPassword: boolean\n\n  /** Whether to show wordCount when setting maxLength */\n  showWordLimit: boolean\n\n  /**\n   * Focus the Input component\n   */\n  focus (): void\n\n  /**\n   * Blur the Input component\n   */\n  blur (): void\n\n  /**\n   * Select the text in input element\n   */\n  select (): void\n}\n"
  },
  {
    "path": "types/link.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\n/** Button type */\nexport type LinkType = 'primary' | 'success' | 'warning' | 'danger' | 'info' \n\n/** Link Component */\nexport declare class ElLink extends ElementUIComponent {\n  /** Link type */\n  type: LinkType\n  \n  /** Disable the link */\n  disabled: boolean\n\n  /** Link underline */\n  underline: boolean\n\n  /** Link icon, accepts an icon name of Element icon component */\n  icon: string\n\n  /** Link href */\n  href: string\n\n  /** Link target */\n  target: string\n}\n"
  },
  {
    "path": "types/loading.d.ts",
    "content": "import Vue, { VNodeDirective, PluginObject } from 'vue'\n\n/** Options used in Loading service */\nexport interface LoadingServiceOptions {\n  /** 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 */\n  target?: HTMLElement | string\n\n  /** Whether to make the mask append to the body element */\n  body?: boolean\n\n  /** Whether to show the loading mask in fullscreen */\n  fullscreen?: boolean\n\n  /** Whether to disable scrolling on body */\n  lock?: boolean\n\n  /** Loading text that displays under the spinner */\n  text?: string\n\n  /** Class name of the custom spinner */\n  spinner?: string\n\n  /** Background color of the mask */\n  background?: string\n\n  /** Custom class name for Loading */\n  customClass?: string\n}\n\n/** Loading Component */\nexport declare class ElLoadingComponent extends Vue {\n  /** Close the Loading instance */\n  close (): void\n}\n\n/** Loading directive definition */\nexport interface ElLoadingDirective extends VNodeDirective {\n  name: 'loading',\n  value: boolean,\n  modifiers: {\n    body: boolean,\n    fullscreen: boolean\n  }\n}\n\n/** Show animation while loading data */\nexport interface ElLoading {\n  /** Install Loading directive into Vue */\n  install (vue: typeof Vue): void\n\n  /** If you do not have a specific DOM node to attach the Loading directive, or if you simply prefer not to use Loading as a directive, you can call this service with some configs to open a Loading instance. */\n  service (options: LoadingServiceOptions): ElLoadingComponent\n\n  directive: PluginObject<never>\n}\n\ndeclare module 'vue/types/vue' {\n  interface Vue {\n    /** If you do not have a specific DOM node to attach the Loading directive, or if you simply prefer not to use Loading as a directive, you can call this service with some configs to open a Loading instance. */\n    $loading (options: LoadingServiceOptions): ElLoadingComponent\n  }\n}\n"
  },
  {
    "path": "types/main.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\n/** Main Component */\nexport declare class ElMain extends ElementUIComponent {}\n"
  },
  {
    "path": "types/menu-item-group.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\n/** Menu Item Group Component */\nexport declare class ElMenuItemGroup extends ElementUIComponent {\n  /** Group title */\n  title: string\n}\n"
  },
  {
    "path": "types/menu-item.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\n/** Menu Item Component */\nexport declare class ElMenuItem extends ElementUIComponent {\n  /** Unique identification */\n  index: string\n\n  /** Vue Router object */\n  route: object\n}\n"
  },
  {
    "path": "types/menu.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\nexport type MenuDisplayMode = 'horizontal' | 'vertical'\nexport type MenuTheme = 'light' | 'dark'\n\n/** Menu that provides navigation for your website */\nexport declare class ElMenu extends ElementUIComponent {\n  /** Menu display mode */\n  mode: MenuDisplayMode\n\n  /** Whether the menu is collapsed (available only in vertical mode) */\n  collapse: boolean\n\n  /** Background color of Menu (hex format) */\n  backgroundColor: string\n\n  /** Text color of Menu (hex format) */\n  textColor: string\n\n  /** Text color of currently active menu item (hex format) */\n  activeTextColor: string\n\n  /** Index of currently active menu */\n  defaultActive: string\n\n  /** Array that contains keys of currently active sub-menus */\n  defaultOpeneds: string[]\n\n  /** Whether only one sub-menu can be active */\n  uniqueOpened: boolean\n\n  /** How sub-menus are triggered, only works when mode is 'horizontal' */\n  menuTrigger: string\n\n  /** Whether vue-router mode is activated. If true, index will be used as 'path' to activate the route action */\n  router: boolean\n\n  /** Whether the menu collapse transition is active */\n  collapseTransition: boolean\n  \n  /** Open the specified sub-menu */\n  open (index: string): void\n\n  /** Close the specified sub-menu */\n  close (index: string): void\n}\n"
  },
  {
    "path": "types/message-box.d.ts",
    "content": "import Vue, { VNode } from 'vue'\nimport { MessageType } from './message'\n\nexport type MessageBoxCloseAction = 'confirm' | 'cancel' | 'close'\nexport type MessageBoxData = MessageBoxInputData | MessageBoxCloseAction\n\nexport interface MessageBoxInputData {\n  value: string,\n  action: MessageBoxCloseAction\n}\n\nexport interface MessageBoxInputValidator {\n  (value: string): boolean | string\n}\n\nexport declare class ElMessageBoxComponent extends Vue {\n  title: string\n  message: string\n  type: MessageType\n  iconClass: string\n  customClass: string\n  showInput: boolean\n  showClose: boolean\n  inputValue: string\n  inputPlaceholder: string\n  inputType: string\n  inputPattern: RegExp\n  inputValidator: MessageBoxInputValidator\n  inputErrorMessage: string\n  showConfirmButton: boolean\n  showCancelButton: boolean\n  action: MessageBoxCloseAction\n  dangerouslyUseHTMLString: boolean\n  confirmButtonText: string\n  cancelButtonText: string\n  confirmButtonLoading: boolean\n  cancelButtonLoading: boolean\n  confirmButtonClass: string\n  confirmButtonDisabled: boolean\n  cancelButtonClass: string\n  editorErrorMessage: string\n}\n\n/** Options used in MessageBox */\nexport interface ElMessageBoxOptions {\n  /** Title of the MessageBox */\n  title?: string\n\n  /** Content of the MessageBox */\n  message?: string | VNode\n\n  /** Message type, used for icon display */\n  type?: MessageType\n\n  /** Custom icon's class */\n  iconClass?: string\n\n  /** Custom class name for MessageBox */\n  customClass?: string\n\n  /** MessageBox closing callback if you don't prefer Promise */\n  callback?: (action: MessageBoxCloseAction, instance: ElMessageBoxComponent) => void\n\n  /** Callback before MessageBox closes, and it will prevent MessageBox from closing */\n  beforeClose?: (action: MessageBoxCloseAction, instance: ElMessageBoxComponent, done: (() => void)) => void\n\n  /** Whether to lock body scroll when MessageBox prompts */\n  lockScroll?: boolean\n\n  /** Whether to show a cancel button */\n  showCancelButton?: boolean\n\n  /** Whether to show a confirm button */\n  showConfirmButton?: boolean\n\n  /** Whether to show a close button */\n  showClose?: boolean\n\n  /** Text content of cancel button */\n  cancelButtonText?: string\n\n  /** Text content of confirm button */\n  confirmButtonText?: string\n\n  /** Custom class name of cancel button */\n  cancelButtonClass?: string\n\n  /** Custom class name of confirm button */\n  confirmButtonClass?: string\n\n  /** Whether to align the content in center */\n  center?: boolean\n\n  /** Whether message is treated as HTML string */\n  dangerouslyUseHTMLString?: boolean\n\n  /** Whether to use round button */\n  roundButton?: boolean\n\n  /** Whether MessageBox can be closed by clicking the mask */\n  closeOnClickModal?: boolean\n\n  /** Whether MessageBox can be closed by pressing the ESC */\n  closeOnPressEscape?: boolean\n\n  /** Whether to close MessageBox when hash changes */\n  closeOnHashChange?: boolean\n\n  /** Whether to show an input */\n  showInput?: boolean\n\n  /** Placeholder of input */\n  inputPlaceholder?: string\n\n  /** Initial value of input */\n  inputValue?: string\n\n  /** Regexp for the input */\n  inputPattern?: RegExp\n\n  /** Input Type: text, textArea, password or number */\n  inputType?: string\n\n  /** Validation function for the input. Should returns a boolean or string. If a string is returned, it will be assigned to inputErrorMessage */\n  inputValidator?: MessageBoxInputValidator\n\n  /** Error message when validation fails */\n  inputErrorMessage?: string\n\n  /** Whether to distinguish canceling and closing */\n  distinguishCancelAndClose?: boolean\n}\n\nexport interface ElMessageBoxShortcutMethod {\n  (message: string, title: string, options?: ElMessageBoxOptions): Promise<MessageBoxData>\n  (message: string, options?: ElMessageBoxOptions): Promise<MessageBoxData>\n}\n\nexport interface ElMessageBox {\n  /** Show a message box */\n  (message: string, title?: string, type?: string): Promise<MessageBoxData>\n\n  /** Show a message box */\n  (options: ElMessageBoxOptions): Promise<MessageBoxData>\n\n  /** Show an alert message box */\n  alert: ElMessageBoxShortcutMethod\n\n  /** Show a confirm message box */\n  confirm: ElMessageBoxShortcutMethod\n\n  /** Show a prompt message box */\n  prompt: ElMessageBoxShortcutMethod\n\n  /** Set default options of message boxes */\n  setDefaults (defaults: ElMessageBoxOptions): void\n\n  /** Close current message box */\n  close (): void\n}\n\ndeclare module 'vue/types/vue' {\n  interface Vue {\n    /** Show a message box */\n    $msgbox: ElMessageBox\n\n    /** Show an alert message box */\n    $alert: ElMessageBoxShortcutMethod\n\n    /** Show a confirm message box */\n    $confirm: ElMessageBoxShortcutMethod\n\n    /** Show a prompt message box */\n    $prompt: ElMessageBoxShortcutMethod\n  }\n}\n"
  },
  {
    "path": "types/message.d.ts",
    "content": "import Vue, {VNode} from 'vue'\n\nexport type MessageType = 'success' | 'warning' | 'info' | 'error'\n\n/** Message Component */\nexport declare class ElMessageComponent extends Vue {\n  /** Close the Loading instance */\n  close (): void\n}\n\nexport interface CloseEventHandler {\n  /**\n   * Triggers when a message is being closed\n   *\n   * @param instance The message component that is being closed\n   */\n  (instance: ElMessageComponent): void\n}\n\n/** Options used in Message */\nexport interface ElMessageOptions {\n  /** Message text */\n  message: string | VNode\n\n  /** Message type */\n  type?: MessageType\n\n  /** Custom icon's class, overrides type */\n  iconClass?: string\n\n  /** Custom class name for Message */\n  customClass?: string\n\n  /** Display duration, millisecond. If set to 0, it will not turn off automatically */\n  duration?: number\n\n  /** Whether to show a close button */\n  showClose?: boolean\n\n  /** Whether to center the text */\n  center?: boolean\n\n  /** Whether message is treated as HTML string */\n  dangerouslyUseHTMLString?: boolean\n\n  /** Callback function when closed with the message instance as the parameter */\n  onClose?: CloseEventHandler\n  \n  /** Set the distance to the top of viewport. Default is 20 px. */\n  offset?: number\n}\n\nexport interface ElMessage {\n  /** Show an info message */\n  (text: string): ElMessageComponent\n\n  /** Show message */\n  (options: ElMessageOptions): ElMessageComponent\n\n  /** Show a success message */\n  success (text: string): ElMessageComponent\n  \n  /** Show a success message with options */\n  success (options: ElMessageOptions): ElMessageComponent\n\n  /** Show a warning message */\n  warning (text: string): ElMessageComponent\n  \n  /** Show a warning message with options */\n  warning (options: ElMessageOptions): ElMessageComponent\n\n  /** Show an info message */\n  info (text: string): ElMessageComponent\n  \n  /** Show an info message with options */\n  info (options: ElMessageOptions): ElMessageComponent\n\n  /** Show an error message */\n  error (text: string): ElMessageComponent\n  \n  /** Show an error message with options */\n  error (options: ElMessageOptions): ElMessageComponent\n}\n\ndeclare module 'vue/types/vue' {\n  interface Vue {\n  /** 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. */\n    $message: ElMessage\n  }\n}\n"
  },
  {
    "path": "types/notification.d.ts",
    "content": "import Vue, { VNode } from 'vue'\nimport { MessageType } from './message'\n\nexport type NotificationPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'\n\n/** Notification Component */\nexport declare class ElNotificationComponent extends Vue {\n  /** Close the Notification instance */\n  close (): void\n}\n\nexport interface ElNotificationOptions {\n  /** Title */\n  title: string\n\n  /** Description text */\n  message: string | VNode\n\n  /** Notification type */\n  type?: MessageType\n\n  /** Custom icon's class. It will be overridden by type */\n  iconClass?: string\n\n  /** Custom class name for Notification */\n  customClass?: string\n\n  /** Duration before close. It will not automatically close if set 0 */\n  duration?: number\n\n  /** Whether to show a close button */\n  showClose?: boolean\n\n  /** Whether message is treated as HTML string */\n  dangerouslyUseHTMLString?: boolean\n\n  /** Callback function when closed */\n  onClose?: () => void\n\n  /** Callback function when notification clicked */\n  onClick?: () => void\n\n  /** Offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset */\n  offset?: number\n\n  /** custom position */\n  position?: NotificationPosition\n}\n\nexport interface ElNotification {\n  /** Show a notification */\n  (options: ElNotificationOptions): ElNotificationComponent\n\n  /** Show a success notification */\n  success (message: string | VNode): ElNotificationComponent\n\n  /** Show a success notification */\n  success (options: ElNotificationOptions): ElNotificationComponent\n\n  /** Show a warning notification */\n  warning (message: string | VNode): ElNotificationComponent\n\n  /** Show a warning notification */\n  warning (options: ElNotificationOptions): ElNotificationComponent\n\n  /** Show an info notification */\n  info (message: string | VNode): ElNotificationComponent\n\n  /** Show an info notification */\n  info (options: ElNotificationOptions): ElNotificationComponent\n\n  /** Show an error notification */\n  error (message: string | VNode): ElNotificationComponent\n\n  /** Show an error notification */\n  error (options: ElNotificationOptions): ElNotificationComponent\n}\n\ndeclare module 'vue/types/vue' {\n  interface Vue {\n    /** Displays a global notification message at the upper right corner of the page */\n    $notify: ElNotification\n  }\n}\n"
  },
  {
    "path": "types/option-group.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\n/** Dropdown Select Option Group Component */\nexport declare class ElOptionGroup extends ElementUIComponent {\n  /** Name of the group */\n  label: string\n\n  /** Whether to disable all options in this group */\n  disabled: boolean\n}\n"
  },
  {
    "path": "types/option.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\n/** Dropdown Select Option Component */\nexport declare class ElOption extends ElementUIComponent {\n  /** Value of option */\n  value: any\n\n  /** Label of option, same as value if omitted */\n  label: string\n\n  /** Whether option is disabled */\n  disabled: boolean\n}\n"
  },
  {
    "path": "types/page-header.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\n/** PageHeader Component */\nexport declare class ElPageHeader extends ElementUIComponent {\n  /** title */\n  title: String\n\n  /** content */\n  content: String\n}\n"
  },
  {
    "path": "types/pagination.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\n/** Pagination Component */\nexport declare class ElPagination extends ElementUIComponent {\n  /** Whether to use small pagination */\n  small: boolean\n\n  /** Item count of each page */\n  pageSize: number\n\n  /** Total item count */\n  total: number\n\n  /** Total page count. Set either total or page-count and pages will be displayed; if you need page-sizes, total is required */\n  pageCount: number\n\n  /** Number of pagers */\n  pagerCount: number\n\n  /** Current page number */\n  currentPage: number\n\n  /**\n   * Layout of Pagination. Elements separated with a comma.\n   * Accepted values: `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot`\n   */\n  layout: string\n\n  /** Options of item count per page */\n  pageSizes: number[]\n\n  /** Custom class name for the page size Select's dropdown */\n  popperClass: string\n\n  /** Text for the prev button */\n  prevText: string\n\n  /** Text for the prev button */\n  nextText: string\n\n  /** Whether to hide when thers's only one page */ \n  hideOnSinglePage: boolean\n}\n"
  },
  {
    "path": "types/popconfirm.d.ts",
    "content": "import { ElementUIComponent } from './component'\nimport { ElPopover } from './popover'\n\n/** Popconfirm Component */\nexport declare class ElPopconfirm extends ElPopover {\n  /** Popconfirm title */\n  title: string\n\n  /** Popconfirm ok text */\n  confirmButtonText: string\n  \n  /** Popconfirm cancel text */\n  cancelButtonText: string\n\n  /** Popconfirm ok type */\n  confirmButtonType: string\n\n  /** Popconfirm cancal type */\n  cancelButtonType: string\n\n  /** Popconfirm icon */\n  icon: string\n\n  /** Popconfirm icon color */\n  iconColor: string\n\n  /** Popconfirm hide icon */\n  hideIcon: boolean\n}\n"
  },
  {
    "path": "types/popover.d.ts",
    "content": "import { VNode, VNodeDirective } from 'vue'\nimport { ElementUIComponent } from './component'\n\nexport type PopoverTrigger = 'click' | 'focus' | 'hover' | 'manual'\nexport type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'\n\nexport interface PopoverSlots {\n  /** Content of popover */\n  default: VNode[],\n\n  /** HTML element that triggers popover */\n  reference: VNode[]\n\n  [key: string]: VNode[]\n}\n\n/** Popover directive definition */\nexport interface ElPopoverDirective extends VNodeDirective {\n  name: 'popover',\n  arg: string\n}\n\n/** Popover Component */\nexport declare class ElPopover extends ElementUIComponent {\n  /** How the popover is triggered */\n  trigger: PopoverTrigger\n\n  /** Popover title */\n  title: string\n\n  /** Popover content, can be replaced with a default slot */\n  content: string\n\n  /** Popover width */\n  width: string | number\n\n  /** Popover placement */\n  placement: PopoverPlacement\n\n  /** Whether Popover is disabled */\n  disabled: boolean\n\n  /** Whether popover is visible */\n  value: boolean\n\n  /** Popover offset */\n  offset: number\n\n  /** Popover transition animation */\n  transition: string\n\n  /** Whether a tooltip arrow is displayed or not. For more info, please refer to Vue-popper */\n  visibleArrow: boolean\n\n  /** Parameters for popper.js */\n  popperOptions: object\n\n  /** Custom class name for popover */\n  popperClass: string\n\n  /** Delay before appearing when trigger is hover, in milliseconds */\n  openDelay: number\n\n  /** Delay before disappearing when trigger is hover, in milliseconds */\n  closeDelay: number\n\n  /** Popover tabindex */\n  tabindex: number\n\n  $slots: PopoverSlots\n}\n"
  },
  {
    "path": "types/progress.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\nexport type ProgressType = 'line' | 'circle'\nexport type ProgressStatus = 'success' | 'exception'\n\n/** Progress Component */\nexport declare class ElProgress extends ElementUIComponent {\n  /** Percentage, required */\n  percentage: number\n\n  /** The type of progress bar */\n  type: ProgressType\n\n  /** The width of progress bar */\n  strokeWidth: number\n\n  /** Circle progress bar stroke line cap */\n  strokeLinecap: string\n\n  /** Whether to place the percentage inside progress bar, only works when type is 'line' */\n  textInside: boolean\n\n  /** The current status of progress bar */\n  status: ProgressStatus\n\n  /** Background color of progress bar. Overrides `status` prop */\n  color: string | Function | Array<string | { color: string, percentage: number }>\n\n  /** The canvas width of circle progress bar */\n  width: number\n\n  /** Whether to show percentage */\n  showText: boolean\n\n  /** Template function of the content\t*/\n  format(percentage: number): string\n}\n"
  },
  {
    "path": "types/radio-button.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\n/** Radio Button Component */\nexport declare class ElRadioButton extends ElementUIComponent {\n  /** The form input value */\n  value: string\n\n  /** The value of radio */\n  label: string | number\n\n  /** Whether radio is disabled */\n  disabled: boolean\n\n  /** Native 'name' attribute */\n  name: string\n}\n"
  },
  {
    "path": "types/radio-group.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\nexport type RadioGroupSize = 'large' | 'small'\n\n/** Radio Group Component */\nexport declare class ElRadioGroup extends ElementUIComponent {\n  /** The size of radio buttons */\n  size: RadioGroupSize\n\n  /** Border and background color when button is active */\n  fill: string\n\n  /** Whether the nesting radios are disabled */\n  disabled: boolean\n\n  /** Font color when button is active */\n  textColor: string\n}\n"
  },
  {
    "path": "types/radio.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\n/** Radio Component */\nexport declare class ElRadio extends ElementUIComponent {\n  /** The form input value */\n  value: string\n\n  /** The value of radio */\n  label: string | number | boolean\n\n  /** Whether radio is disabled */\n  disabled: boolean\n\n  /** Whether to add a border around Radio */\n  border: boolean\n\n  /** Native 'name' attribute */\n  name: string\n}\n"
  },
  {
    "path": "types/rate.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\ninterface Option {\n  value: string,\n  excluded?: boolean\n}\n\ninterface Options {\n  [threshold: number]: string | Option\n}\n\nexport type RateColors = Options\nexport type RateIconClasses = Options\n\n/** Rate Component */\nexport declare class ElRate extends ElementUIComponent {\n  /** Max rating score */\n  max: number\n\n  /** Whether Rate is read-only */\n  disabled: boolean\n\n  /** Whether picking half start is allowed */\n  allowHalf: boolean\n\n  /** Threshold value between low and medium level. The value itself will be included in low level */\n  lowThreshold: number\n\n  /** Threshold value between medium and high level. The value itself will be included in high level */\n  highThreshold: number\n\n  /** 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 */\n  colors: string[] | RateColors\n\n  /** Color of unselected icons */\n  voidColor: string\n\n  /** Color of unselected read-only icons */\n  disabledVoidColor: string\n\n  /** Class names of 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 class name */\n  iconClasses: string[] | RateIconClasses\n\n  /** Class name of unselected icons */\n  voidIconClass: string\n\n  /** Class name of unselected read-only icons */\n  disabledVoidIconClass: string\n\n  /** Whether to display texts */\n  showText: boolean\n\n  /** Whether to display current score. show-score and show-text cannot be true at the same time */\n  showScore: boolean\n\n  /** Color of texts */\n  textColor: string\n\n  /** Text array */\n  texts: string[]\n\n  /** Text template when the component is read-only */\n  scoreTemplate: string\n}\n"
  },
  {
    "path": "types/result.d.ts",
    "content": "import { ElementUIComponent } from './component'\nimport { VNode } from 'vue'\n\ninterface ElResultSlots {\n  /* title slot: custom title */\n  title: VNode[]\n\n  /* icon slot: custom icon */\n  icon: VNode[]\n\n  /* subTitle slot: custom sub title */\n  subTitle: VNode[]\n\n  /* extra slot: custom extra area, display on the top right */\n  extra: VNode[]\n\n  [key: string]: VNode[]\n}\n\n/** Used to give feedback on the result of user's operation or access exception. **/\nexport declare class ElResult extends ElementUIComponent {\n\n  /* title */\n  title: string\n\n  /* sub title */\n  subTitle: string\n\n  /* icon type */\n  icon: 'success' | 'warning' | 'info' | 'error'\n\n  $slots: ElResultSlots\n}\n"
  },
  {
    "path": "types/row.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\n/** Horizontal alignment of flex layout */\nexport type HorizontalAlignment = 'start' | 'end' | 'center' | 'space-around' | 'space-between'\n\n/** vertical alignment of flex layout */\nexport type VertialAlignment = 'top' | 'middle' | 'bottom'\n\n/** Row Layout Component */\nexport declare class ElRow extends ElementUIComponent {\n  /** Grid spacing */\n  gutter: number\n\n  /** Layout mode. You can use flex. Works in modern browsers */\n  type: string\n\n  /** Horizontal alignment of flex layout */\n  justify: HorizontalAlignment\n\n  /** Vertical alignment of flex layout */\n  align: VertialAlignment\n\n  /** Custom element tag */\n  tag: string\n}\n"
  },
  {
    "path": "types/select.d.ts",
    "content": "import { ElementUIComponent, ElementUIComponentSize } from './component'\n\nexport interface QueryChangeHandler {\n  /**\n   * @param queryString Current value of the text input\n   */\n  (queryString: string): void\n}\n\n/** Dropdown Select Component */\nexport declare class ElSelect extends ElementUIComponent {\n  /** The form input value */\n  value: any\n\n  /** Whether multiple-select is activated */\n  multiple: boolean\n\n  /** Whether Select is disabled */\n  disabled: boolean\n\n  /** Unique identity key name for value, required when value is an object */\n  valueKey: string\n\n  /** Size of Input */\n  size: ElementUIComponentSize\n\n  /** Whether single select can be cleared */\n  clearable: boolean\n\n  /** Maximum number of options user can select when multiple is true. No limit when set to 0 */\n  multipleLimit: number\n\n  /** @Deprecated in next major version */\n  autoComplete: string\n\n  /** Same as autocomplete in native input */\n  autocomplete: string\n\n  /** The name attribute of select input */\n  name: string\n\n  /** Placeholder */\n  placeholder: string\n\n  /** Whether Select is filterable */\n  filterable: boolean\n\n  /** Whether creating new items is allowed. To use this, filterable must be true */\n  allowCreate: boolean\n\n  /** Custom filter method */\n  filterMethod: QueryChangeHandler\n\n  /** Whether options are loaded from server */\n  remote: boolean\n\n  /** Custom remote search method */\n  remoteMethod: QueryChangeHandler\n\n  /** Whether Select is loading data from server */\n  loading: boolean\n\n  /** Displayed text while loading data from server */\n  loadingText: string\n\n  /** Displayed text when no data matches the filtering query */\n  noMatchText: string\n\n  /** Displayed text when there is no options */\n  noDataText: string\n\n  /** Custom class name for Select's dropdown */\n  popperClass: string\n\n  /** Select first matching option on enter key. Use with filterable or remote */\n  defaultFirstOption: boolean\n\n  /** Whether to append the popper menu to body */\n  popperAppendToBody: boolean\n\n  /**\n   * Focus the Input component\n   */\n  focus (): void\n\n  /**\n   * Blur the Input component, and hide the dropdown\n   */\n  blur (): void\n}\n"
  },
  {
    "path": "types/skeleton-item.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\n/** Skeleton Item Component */\nexport declare class ElSkeletonItem extends ElementUIComponent {\n  /** The current rendering skeleton type; default: text */ \n  variant: 'p' | 'text' |  'h1' | 'h3' |  'text' | 'caption' | 'button' | 'image' | 'circle' | 'rect'\n}\n"
  },
  {
    "path": "types/skeleton.d.ts",
    "content": "import { ElementUIComponent } from './component'\nimport { VNode } from 'vue'\n\ninterface ElSkeletonSlots {\n  /* default slot:  \bReal rendering DOM */\n  default: VNode[]\n\n  /* template slot: Custom rendering skeleton template */\n  template: VNode[]\n\n  [key: string]: VNode[]\n}\n\n/** When loading data, and you need a rich experience for visual and interactions for your end users */\nexport declare class ElSkeleton extends ElementUIComponent {\n  /** whether showing the animation; default: false */\n  animated: boolean\n\n  /** how many fake items to render to the DOM; default: 1 */\n  count: number\n\n  /** whether showing the skeleton; default true */\n  loading: boolean\n\n  /** numbers of the row, only useful when no template slot were given; default: 4 */\n  rows: boolean\n\n  /** Rendering delay in millseconds; default: 0 */\n  throttle: number\n\n  $slots: ElSkeletonSlots\n\n}\n"
  },
  {
    "path": "types/slider.d.ts",
    "content": "import { VNode } from 'vue';\nimport { ElementUIComponent } from './component'\n\nexport interface SliderTooltipFormat {\n  /**\n   * Format the displayed value of Slider\n   *\n   * @param value Value of the Slider\n   * @returns formatted value\n   */\n  (value: number): string\n}\n\n/** Slider Component */\nexport declare class ElSlider extends ElementUIComponent {\n  /** Current value of the slider */\n  value: number | number[]\n\n  /** Minimum value */\n  min: number\n\n  /** Maximum value */\n  max: number\n\n  /** Whether Slider is disabled */\n  disabled: boolean\n\n  /** Step size */\n  step: number\n\n  /** Whether to display an input box, works when range is false */\n  showInput: boolean\n\n  /** Format of displayed tooltip value */\n  formatTooltip: SliderTooltipFormat\n\n  /** Whether to display control buttons when show-input is true */\n  showInputControls: boolean\n\n  /** Size of the input box */\n  inputSize: string\n\n  /** Whether to display breakpoints */\n  showStops: boolean\n\n  /** Whether to display tooltip value */\n  showTooltip: boolean\n\n  /** Whether to select a range */\n  range: boolean\n\n  /** Vertical mode */\n  vertical: boolean\n\n  /** Slider height, required in vertical mode */\n  height: boolean\n\n  /** Debounce delay when typing, in milliseconds, works when show-input is true */\n  debounce: number\n\n  /** Custom class name for the tooltip */\n  tooltipClass: string\n\n  /** Custom marks */\n  marks: {\n    [key: number]: string | { style: object; label: string | VNode }\n  }\n}\n"
  },
  {
    "path": "types/spinner.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\n/** Spinner Component */\nexport declare class ElSpinner extends ElementUIComponent {\n  /** The type of spinner */\n  type: string\n  \t\n  /** The radius of spinner */\n  radius: number\n  \n  /** The width of spinner */\n  strokeWidth: number\n\n  /** The color of spinner */\n  strokeColor: string\n}\n"
  },
  {
    "path": "types/statistic.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\n/** Statistic Component */\nexport declare class ElStatistic extends ElementUIComponent {\n    /** Set the decimal point */\n    decimalSeparator: string\n\n    /** Sets the thousandth identifier */\n    groupSeparator: string\n\n    /** numerical precision */\n    precision: number\n\n    /** Numerical content */\n    value: string | number\n\n    /** Title of numerical value */\n    title: string | number\n\n    /** Whether to enable the countdown function */\n    timeIndices: boolean\n\n    /** Sets the style of the value */\n    valueStyle: object\n\n    /** Numeric content formatting countdown display */\n    format: string\n\n    /** Set the ratio */\n    rate: number\n\n    /** Set the suffix of the value */\n    suffix: string\n\n    /** Set the prefix of the value */\n    prefix: string\n}\n"
  },
  {
    "path": "types/step.d.ts",
    "content": "import { VNode } from 'vue'\nimport { ElementUIComponent } from './component'\n\nexport type StepStatus = 'wait' | 'process' | 'finish' | 'error' | 'success'\n\nexport interface StepRenderSlots {\n  /** Custom icon */\n  icon: VNode[],\n\n  /** Step title */\n  title: VNode[],\n\n  /** Step description */\n  description: VNode[],\n\n  [key: string]: VNode[]\n}\n\n/** Step Component */\nexport declare class ElStep extends ElementUIComponent {\n  /** Step title */\n  title: string\n\n  /** Step description */\n  description: string\n\n  /** Step icon */\n  icon: string\n\n  /** Current status. It will be automatically set by Steps if not configured. */\n  status: StepStatus\n\n  readonly $slots: StepRenderSlots\n}\n"
  },
  {
    "path": "types/steps.d.ts",
    "content": "import { ElementUIComponent } from './component'\nimport { StepStatus } from './step'\n\nexport type StepsDirection = 'vertical' | 'horizontal'\n\n/** 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. */\nexport declare class ElSteps extends ElementUIComponent {\n  /** The spacing of each step, will be responsive if omitted. Support percentage. */\n  space: number | string\n\n  /** Display direction */\n  direction: StepsDirection\n\n  /** Current activation step */\n  active: number\n\n  /** Status of current step */\n  processStatus: StepStatus\n\n  /** Status of end step */\n  finishStatus: StepStatus\n\n  /** Whether step description is centered */\n  alignCenter: boolean\n\n  /** Whether to apply simple theme */\n  simple: boolean\n}\n"
  },
  {
    "path": "types/submenu.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\n/** Submenu Component */\nexport declare class ElSubmenu extends ElementUIComponent {\n  /** Unique identification */\n  index: string | null\n\n  /** Delay time before showing a sub-menu */\n  showTimeout: number\n\n  /** Delay time before hiding a sub-menu */\n  hideTimeout: number\n\n  /** Custom class name for the popup menu */\n  popperClass: string\n\n  /** Whether the sub-menu is disabled */\n  disabled: boolean\n\n  /** Whether to append the popper menu to body */\n  popperAppendToBody: boolean\n}\n"
  },
  {
    "path": "types/switch.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\n/** Switch Component */\nexport declare class ElSwitch extends ElementUIComponent {\n  /** Whether Switch is on */\n  value: boolean\n\n  /** Whether Switch is disabled */\n  disabled: boolean\n\n  /** Width of Switch */\n  width: number\n\n  /** Class name of the icon displayed when in on state, overrides on-text */\n  activeIconClass: string\n\n  /** Class name of the icon displayed when in off state, overrides off-text */\n  inactiveIconClass: string\n\n  /** Text displayed when in on state */\n  activeText: string\n\n  /** Text displayed when in off state */\n  inactiveText: string\n\n  /** Background color when in on state */\n  activeColor: string\n\n  /** Background color when in off state */\n  inactiveColor: string\n\n  /** Switch value when in on state */\n  activeValue: string | boolean | number\n\n  /** Switch value when in off state */\n  inactiveValue: string | boolean | number\n\n  /** Input name of Switch */\n  name: string\n\n  /** Whether to trigger form validation */\n  validateEvent: boolean\n}\n"
  },
  {
    "path": "types/tab-pane.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\n/** Tab Pane Component */\nexport declare class ElTabPane extends ElementUIComponent {\n  /** Title of the tab */\n  label: string\n\n  /** Whether Tab is disabled */\n  disabled: boolean\n\n  /** Identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane */\n  name: string\n\n  /** Whether Tab is closable */\n  closable: boolean\n\n  /** Whether Tab is lazily rendered */\n  lazy: boolean\n}\n"
  },
  {
    "path": "types/table-column.d.ts",
    "content": "import { CreateElement, VNode } from 'vue'\nimport { ElementUIComponent, ElementUIHorizontalAlignment } from './component'\nimport { PopoverPlacement } from './popover'\n\nexport type TableColumnType = 'default' | 'selection' | 'index' | 'expand'\nexport type TableColumnFixedType = 'left' | 'right'\nexport type SortOrders = 'ascending' | 'descending' | null\n\nexport type TableColumn = {\n  /** Label of the column */\n  label: string,\n\n  /** Property name of the source data */\n  property: string,\n\n  /** Type of the column */\n  type: string,\n\n  /** Whether column is fixed at left/right */\n  fixed: boolean | string\n}\n\n/** Data used in renderHeader function */\nexport interface RenderHeaderData {\n  /** The column that is current rendering */\n  column: any,\n\n  /** The index of the rendering column */\n  $index: number\n}\n\n/** Filter Object */\nexport interface TableColumnFilter {\n  /** The text to show in the filter's panel */\n  text: string,\n\n  /** The value of the filter */\n  value: any\n}\n\n/** TableColumn Component */\nexport declare class ElTableColumn extends ElementUIComponent {\n  /** Type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1). If set to `expand`, the column will display expand icon. */\n  type: TableColumnType\n\n  /** Column label */\n  label: string\n\n  /** Column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered */\n  columnKey: string\n\n  /** Field name. You can also use its alias: property */\n  prop: string\n\n  /** Column width */\n  width: string\n\n  /** Column minimum width. Columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion */\n  minWidth: string\n\n  /** Whether column is fixed at left/right. Will be fixed at left if `true` */\n  fixed: boolean | TableColumnFixedType\n\n  /** Render function for table header of this column */\n  renderHeader: (h: CreateElement, data: RenderHeaderData) => VNode | string\n\n  /** Whether column can be sorted */\n  sortable: boolean | 'custom'\n\n  /** Sorting method. Works when `sortable` is `true` */\n  sortMethod: (a: any, b: any) => number\n\n  /** The order of the sorting strategies used when sorting the data. Works when `sortable` is `true`. */\n  sortOrders: SortOrders[]\n\n  /** Whether column width can be resized. Works when border of `el-table` is `true` */\n  resizable: boolean\n\n  /** Function that formats content */\n  formatter: (row: object, column: TableColumn) => any\n\n  /** Whether to hide extra content and show them in a tooltip when hovering on the cell */\n  showOverflowTooltip: boolean\n\n  /** Alignment */\n  align: ElementUIHorizontalAlignment\n\n  /** Alignment of the table header. If omitted, the value of the `align` attribute will be applied */\n  headerAlign: ElementUIHorizontalAlignment\n\n  /** Class name of cells in the column */\n  className: string\n\n  /** Class name of the label of this column */\n  labelClassName: string\n\n  /** Function that determines if a certain row can be selected, works when `type` is `'selection'` */\n  selectable: (row: object, index: number) => boolean\n\n  /** Whether to reserve selection after data refreshing, works when `type` is `'selection'` */\n  reserveSelection: boolean\n\n  /** An array of data filtering options */\n  filters: TableColumnFilter[]\n\n  /** Placement for the filter dropdown */\n  filterPlacement: PopoverPlacement\n\n  /** Whether data filtering supports multiple options */\n  filterMultiple: Boolean\n\n  /** Data filtering method. If `filter-multiple` is on, this method will be called multiple times for each row, and a row will display if one of the calls returns `true` */\n  filterMethod: (value: any, row: object) => boolean\n\n  /** Filter value for selected data, might be useful when table header is rendered with `render-header` */\n  filteredValue: TableColumnFilter[]\n}\n"
  },
  {
    "path": "types/table.d.ts",
    "content": "import { ElementUIComponent } from './component'\nimport { TooltipEffect } from './tooltip'\n\nexport type SortOrder = 'ascending' | 'descending'\n\n/** Options to set the default sort column and order */\nexport interface DefaultSortOptions {\n  /** Default sort column */\n  prop: string,\n\n  /** Default sort order */\n  order: SortOrder\n}\n\nexport interface SummaryMethodParams {\n  columns: object[],\n  data: object\n}\n\nexport interface rowCallbackParams {\n  row: object,\n  rowIndex: number\n}\n\nexport interface cellCallbackParams {\n  row: object,\n  rowIndex: number,\n  column: object,\n  columnIndex: number\n}\n\nexport interface treeNode {\n  rowKey: string | number,\n  isLeaf: boolean,\n  level: number,\n  expanded: boolean,\n  loaded: boolean\n}\n\n/** Table Component */\nexport declare class ElTable extends ElementUIComponent {\n  /** Table data */\n  data: object[]\n\n  /** Table's height. By default it has an auto height. If its value is a number, the height is measured in pixels; if its value is a string, the height is affected by external styles */\n  height: string | number\n\n  /** Table's max-height. The height of the table starts from auto until it reaches the maxHeight limit. The maxHeight is measured in pixels, same as height */\n  maxHeight: string | number\n\n  /** Whether table is striped */\n  stripe: boolean\n\n  /** Whether table has vertical border */\n  border: boolean\n\n  /** Whether width of column automatically fits its container */\n  fit: boolean\n\n  /** Whether table header is visible */\n  showHeader: boolean\n\n  /** Whether current row is highlighted */\n  highlightCurrentRow: boolean\n\n  /** Whether selection row is highlighted */\n  highlightSelectionRow: boolean\n\n  /** Key of current row, a set only prop */\n  currentRowKey: string | number\n\n  /** Whether to lazy load tree structure data, used with load attribute */\n  lazy: boolean\n\n  /** Horizontal indentation of nodes in adjacent levels in pixels */\n  indent: number\n\n  /** Function that returns custom class names for a row, or a string assigning class names for every row */\n  rowClassName: string | ((param: rowCallbackParams) => string)\n\n  /** Function that returns custom style for a row, or an object assigning custom style for every row */\n  rowStyle: object | ((param: rowCallbackParams) => object)\n\n  /** Function that returns custom class names for a cell, or a string assigning class names for every cell */\n  cellClassName: string | ((param: cellCallbackParams) => string)\n\n  /** Function that returns custom style for a cell, or an object assigning custom style for every cell */\n  cellStyle: object | ((param: cellCallbackParams) => object)\n\n  /** Function that returns custom class names for a row in table header, or a string assigning class names for every row in table header */\n  headerRowClassName: string | ((param: rowCallbackParams) => string)\n\n  /** Function that returns custom style for a row in table header, or an object assigning custom style for every row in table header */\n  headerRowStyle: object | ((param: rowCallbackParams) => object)\n\n  /** Function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header */\n  headerCellClassName: string | ((param: cellCallbackParams) => string)\n\n  /** Function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header */\n  headerCellStyle: object | ((param: cellCallbackParams) => object)\n\n  /** Key of row data, used for optimizing rendering. Required if reserve-selection is on */\n  rowKey: (row: object) => any\n\n  /** Displayed text when data is empty. You can customize this area with `slot=\"empty\"` */\n  emptyText: String\n\n  /** Whether expand all rows by default. Only works when the table has a column `type=\"expand\"` */\n  defaultExpandAll: Boolean\n\n  /** Set expanded rows by this prop. Prop's value is the keys of expand rows, you should set row-key before using this prop */\n  expandRowKeys: any[]\n\n  /** Set the default sort column and order */\n  defaultSort: DefaultSortOptions\n\n  /** Tooltip effect property */\n  tooltipEffect: TooltipEffect\n\n  /** Whether to display a summary row */\n  showSummary: boolean\n\n  /** Displayed text for the first column of summary row */\n  sumText: string\n\n  /** Custom summary method */\n  summaryMethod: (param: SummaryMethodParams) => any[]\n\n  /** Controls the behavior of master checkbox in multi-select tables when only some rows are selected */\n  selectOnIndeterminate: boolean\n\n  /** Clear selection. Might be useful when `reserve-selection` is on */\n  clearSelection (): void\n\n  /**\n   * Toggle or set if a certain row is selected\n   *\n   * @param row The row that is going to set its selected state\n   * @param selected Whether the row is selected. The selected state will be toggled if not set\n   */\n  toggleRowSelection (row: object, selected?: boolean): void\n\n  /**\n   * Toggle or set all rows\n   */\n  toggleAllSelection (): void\n\n  /**\n   * Set a certain row as selected\n   *\n   * @param row The row that is going to set as selected\n   */\n  setCurrentRow (row?: object): void\n  \n  /**\n   * Toggle or set if a certain row is expanded\n   *\n   * @param row The row that is going to set its expanded state\n   * @param expanded Whether the row is expanded. The expanded state will be toggled if not set\n   */\n  toggleRowExpansion (row: object, expanded?: boolean): void\n\n  /** Clear sort status, reset the table to unsorted  */\n  clearSort (): void\n\n  /** Clear filter, reset the table to unfiltered  */\n  clearFilter (): void\n\n  /** Relayout the table, maybe needed when change the table or it's ancestors visibility */\n  doLayout (): void\n\n  /** Sort Table manually */\n  sort (prop: string, order: string): void\n\n  /** method for lazy load subtree data */\n  load (row: object, treeNode: treeNode, resolve: Function): void\n}\n"
  },
  {
    "path": "types/tabs.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\nexport type TabType = 'card' | 'border-card'\nexport type TabPosition = 'top' | 'right' | 'bottom' | 'left'\n\n/** Divide data collections which are related yet belong to different types */\nexport declare class ElTabs extends ElementUIComponent {\n  /** Type of Tab */\n  type: TabType\n\n  /** Whether Tab is closable */\n  closable: boolean\n\n  /** Whether Tab is addable */\n  addable: boolean\n\n  /** Whether Tab is addable and closable */\n  editable: boolean\n\n  /** Name of the selected tab */\n  value: string\n\n  /** Position of tabs */\n  tabPosition: TabPosition\n\n  /** Whether width of tab automatically fits its container */\n  stretch: Boolean\n\n  /** Hook function before switching tab. If false or a Promise is returned and then is rejected, switching will be prevented */\n  beforeLeave: (activeName: string, oldActiveName: string) => boolean | Promise<any>\n}\n"
  },
  {
    "path": "types/tag.d.ts",
    "content": "import { ElementUIComponent, ElementUIComponentSize } from './component'\n\nexport type TagType = 'primary' | 'gray' | 'success' | 'warning' | 'danger'\nexport type TagTheme = 'dark' | 'light' | 'plain'\n\n/** Tag Component */\nexport declare class ElTag extends ElementUIComponent {\n  /** Tag type */\n  type: TagType\n\n  /** Whether Tab can be removed */\n  closable: boolean\n\n  /** Whether the removal animation is disabled */\n  disableTransitions: boolean\n\n  /** Whether Tag has a highlighted border */\n  hit: boolean\n\n  /** Background color of the tag */\n  color: string\n\n  /** Tag size */\n  size: ElementUIComponentSize\n\n  /** Tag theme */\n  effect: TagTheme\n}\n"
  },
  {
    "path": "types/time-picker.d.ts",
    "content": "import { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component'\n\nexport interface TimePickerOptions {\n  /**\n   * Available time range.\n   * e.g. `'18:30:00 - 20:30:00'`\n   * or `['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']`\n   */\n  selectableRange?: string | string[],\n\n  /** Format  of the picker */\n  format?: string\n}\n\n/** TimePicker Component */\nexport declare class ElTimePicker extends ElementUIComponent {\n  /** Whether DatePicker is read only */\n  readonly: boolean\n\n  /** Whether DatePicker is disabled */\n  disabled: boolean\n\n  /** Whether the input is editable */\n  editable: boolean\n\n  /** Whether to show clear button */\n  clearable: boolean\n\n  /** Size of Input */\n  size: ElementUIComponentSize\n\n  /** Placeholder */\n  placeholder: string\n\n  /** Placeholder for the start time in range mode */\n  startPlaceholder: string\n\n  /** Placeholder for the end time in range mode */\n  endPlaceholder: string\n\n  /** Whether to pick a time range */\n  isRange: boolean\n\n  /** Value of the picker */\n  value: string | Date\n\n  /** Alignment */\n  align: ElementUIHorizontalAlignment\n\n  /** Custom class name for TimePicker's dropdown */\n  popperClass: string\n\n  /** Additional options, check the table below */\n  pickerOptions: TimePickerOptions\n\n  /** Range separator */\n  rangeSeparator: string\n\n  /**\n   * Focus the Input component\n   */\n  focus (): void\n}\n"
  },
  {
    "path": "types/time-select.d.ts",
    "content": "import { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component'\n\nexport interface TimeSelectOptions {\n  /** Start time */\n  start?: string,\n\n  /** End time */\n  end?: string,\n\n  /** Time step */\n  step?: string,\n\n  /** Minimum time, any time before this time will be disabled */\n  minTime?: string,\n\n  /** Maximum time, any time after this time will be disabled */\n  maxTime?: string\n}\n\n/** TimeSelect Component */\nexport declare class ElTimeSelect extends ElementUIComponent {\n  /** Whether DatePicker is read only */\n  readonly: boolean\n\n  /** Whether DatePicker is disabled */\n  disabled: boolean\n\n  /** Whether the input is editable */\n  editable: boolean\n\n  /** Whether to show clear button */\n  clearable: boolean\n\n  /** Size of Input */\n  size: ElementUIComponentSize\n\n  /** Placeholder */\n  placeholder: string\n\n  /** Value of the picker */\n  value: string | Date\n\n  /** Alignment */\n  align: ElementUIHorizontalAlignment\n\n  /** Custom class name for TimePicker's dropdown */\n  popperClass: string\n\n  /** Additional options, check the table below */\n  pickerOptions: TimeSelectOptions\n\n  /**\n   * Focus the Input component\n   */\n  focus (): void\n}\n"
  },
  {
    "path": "types/timeline-item.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\nexport type TimelineItemPlacement = 'top' | 'bottom'\nexport type TimelineItemType = 'primary' | 'success' | 'warning' | 'danger' | 'info'\nexport type TimelineItemSize = 'normal' | 'large'\n\n/** TimelineItem Component */\nexport declare class ElTimelineItem extends ElementUIComponent {\n  timestamp: string\n\n  hideTimestamp: boolean\n\n  placement: TimelineItemPlacement\n\n  type: TimelineItemType\n\n  size: TimelineItemSize\n\n  icon: string\n}\n"
  },
  {
    "path": "types/timeline.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\n/** Timeline Component */\nexport declare class ElTimeline extends ElementUIComponent {\n  reverse: boolean\n}\n"
  },
  {
    "path": "types/tooltip.d.ts",
    "content": "import { ElementUIComponent } from './component'\nimport { PopoverPlacement } from './popover'\n\nexport type TooltipEffect = 'dark' | 'light'\n\n/** Tooltip Component */\nexport declare class ElTooltip extends ElementUIComponent {\n  /** Tooltip theme */\n  effect: TooltipEffect\n\n  /** Display content, can be overridden by slot#content */\n  content: String\n\n  /** Position of Tooltip */\n  placement: PopoverPlacement\n\n  /** Visibility of Tooltip */\n  value: boolean\n\n  /** Whether Tooltip is disabled */\n  disabled: boolean\n\n  /** Offset of the Tooltip */\n  offset: number\n\n  /** Animation name */\n  transition: string\n\n  /** Whether an arrow is displayed. For more information, check Vue-popper page */\n  visibleArrow: boolean\n\n  /** Popper.js parameters */\n  popperOptions: object\n\n  /** Delay of appearance, in millisecond */\n  openDelay: number\n\n  /** Whether to control Tooltip manually. mouseenter and mouseleave won't have effects if set to true */\n  manual: boolean\n\n  /** Custom class name for Tooltip's popper */\n  popperClass: string\n\n  /** Whether the mouse can enter the tooltip\t */\n  enterable: string\n\n  /** Timeout in milliseconds to hide tooltip */\n  hideAfter: string\n\n  /** Tooltip tabindex */\n  tabindex: number\n}\n"
  },
  {
    "path": "types/transfer.d.ts",
    "content": "import { CreateElement, VNode } from 'vue'\nimport { ElementUIComponent } from './component'\n\nexport type TransferPanelPosition = 'left' | 'right'\n\nexport interface TransferData {\n  key: any,\n  label: string,\n  disabled: boolean\n}\n\nexport interface TransferFormat {\n  noChecked: string,\n  hasChecked: string,\n}\n\nexport interface TransferProps {\n  key: string,\n  label: string,\n  disabled: string\n}\n\nexport interface TransferRenderContent {\n  /**\n   * Render function for a specific option\n   *\n   * @param h The render function\n   * @param option The option data object\n   */\n  (h: CreateElement, option: TransferData): VNode\n}\n\n/** Transfer Component */\nexport declare class ElTransfer extends ElementUIComponent {\n  /** Data source */\n  data: TransferData[]\n\n  /** Whether Transfer is filterable */\n  filterable: boolean\n\n  /** Placeholder for the filter input */\n  filterPlaceholder: string\n\n  /** Custom filter method */\n  filterMethod: (query: string, item: TransferData) => boolean\n\n  /** Order strategy for elements in the target list */\n  targetOrder: string\n\n  /** Custom list titles */\n  titles: string[]\n\n  /** Custom button texts */\n  buttonTexts: string[]\n\n  /** Custom render function for data items */\n  renderContent: TransferRenderContent\n\n  /** Texts for checking status in list header */\n  format: TransferFormat\n\n  /** Prop aliases for data source */\n  props: TransferProps\n\n  /** Key array of initially checked data items of the left list */\n  leftDefaultChecked: any[]\n\n  /** Key array of initially checked data items of the right list */\n  rightDefaultChecked: any[]\n\n  /** Clear the query text in specified panel */\n  clearQuery (which: TransferPanelPosition): void\n}\n"
  },
  {
    "path": "types/tree.d.ts",
    "content": "import { CreateElement, VNode } from 'vue';\nimport { ElementUIComponent } from './component';\n\nexport interface TreeData {\n  id?: any;\n  label?: string;\n  disabled?: boolean;\n  isLeaf?: boolean;\n  children?: TreeData[];\n}\n\nexport interface TreeProps {\n  label: string;\n  disabled: string;\n  isLeaf: string;\n  children: string;\n}\n\nexport interface TreeNode<K, D> {\n  checked: boolean;\n  childNodes: TreeNode<K, D>[];\n  data: D;\n  expanded: boolean;\n  id: number;\n  indeterminate: boolean;\n  isLeaf: boolean;\n  level: number;\n  loaded: boolean;\n  loading: boolean;\n  parent: TreeNode<K, D> | null;\n  store: any;\n  visible: boolean;\n  disabled: boolean;\n  icon: string;\n  key: K;\n  label: string;\n  nextSibling: TreeNode<K, D> | null;\n  previousSibling: TreeNode<K, D> | null;\n  isCurrent: boolean;\n}\n\n/** incomplete, you can convert to any to use other properties */\nexport interface TreeStore<K, D> {\n  _getAllNodes: () => TreeNode<K, D>[];\n}\n\n/** Tree Component */\nexport declare class ElTree<K, D extends TreeData> extends ElementUIComponent {\n  /** TreeStore */\n  store: TreeStore<K, D>;\n\n  /** Tree data */\n  data: D[];\n\n  /** Text displayed when data is void */\n  emptyText: string;\n\n  /** Unique identity key name for nodes, its value should be unique across the whole tree */\n  nodeKey: string;\n\n  /** Configuration options, see the following table */\n  props: TreeProps;\n\n  /** Method for loading subtree data */\n  load: (data: D, resolve: Function) => void;\n\n  /**\n   * Render function for a specific node\n   *\n   * @param h The render function\n   */\n  renderContent: (h: CreateElement, context: { node: TreeNode<K, D>; data: D; store: TreeStore<K, D> }) => VNode;\n\n  /** Whether current node is highlighted */\n  highlightCurrent: boolean;\n\n  /** Whether to expand all nodes by default */\n  defaultExpandAll: boolean;\n\n  /** 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. */\n  expandOnClickNode: boolean;\n\n  /** 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. */\n  checkOnClickNode: boolean;\n\n  /** Whether to expand father node when a child node is expanded */\n  autoExpandParent: boolean;\n\n  /** Array of keys of initially expanded nodes */\n  defaultExpandedKeys: K[];\n\n  /** Whether node is selectable */\n  showCheckbox: boolean;\n\n  /** Whether checked state of a node not affects its father and child nodes when show-checkbox is true */\n  checkStrictly: boolean;\n\n  /** Array of keys of initially checked nodes */\n  defaultCheckedKeys: K[];\n\n  /**\n   * This function will be executed on each node when use filter method. If return false, tree node will be hidden.\n   *\n   * @param value The query string\n   * @param data The original data object\n   * @param node Tree node\n   */\n  filterNodeMethod: (value: string, data: D, node: TreeNode<K, D>) => boolean;\n\n  /** Whether only one node among the same level can be expanded at one time */\n  accordion: boolean;\n\n  /** Horizontal indentation of nodes in adjacent levels in pixels */\n  indent: number;\n\n  /** Whether enable tree nodes drag and drop */\n  draggable: boolean;\n\n  /**\n   * Function to be executed before dragging a node\n   *\n   * @param node The node to be dragged\n   */\n  allowDrag: (node: TreeNode<K, D>) => boolean;\n\n  /**\n   * Function to be executed before the dragging node is dropped\n   *\n   * @param draggingNode The dragging node\n   * @param dropNode The target node\n   * @param type Drop type\n   */\n  allowDrop: (draggingNode: TreeNode<K, D>, dropNode: TreeNode<K, D>, type: 'prev' | 'inner' | 'next') => boolean;\n\n  /**\n   * Filter all tree nodes. Filtered nodes will be hidden\n   *\n   * @param value The value to be used as first parameter for `filter-node-method`\n   */\n  filter(value: any): void;\n\n  /**\n   * Update the children of the node which specified by the key\n   *\n   * @param key the key of the node which children will be updated\n   * @param data the children data\n   */\n  updateKeyChildren(key: K, data: D[]): void;\n\n  /**\n   * If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of nodes\n   *\n   * @param leafOnly If the `leafOnly` is `true`, it only returns the currently selected array of sub-nodes\n   * @param includeHalfChecked If the `includeHalfChecked` is `true`, the return value contains halfchecked nodes\n   */\n  getCheckedNodes(leafOnly?: boolean, includeHalfChecked?: boolean): D[];\n\n  /**\n   * Set certain nodes to be checked. Only works when `node-key` is assigned\n   *\n   * @param nodes An array of nodes to be checked\n   * @param leafOnly If the parameter is true, it only returns the currently selected array of sub-nodes\n   */\n  setCheckedNodes(data: D[], leafOnly?: boolean): void;\n\n  /**\n   * If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of nodes' keys\n   *\n   * @param leafOnly If the `leafOnly` is `true`, it only returns the currently selected array of sub-nodes\n   */\n  getCheckedKeys(leafOnly?: boolean): K[];\n\n  /**\n   * Set certain nodes to be checked. Only works when `node-key` is assigned\n   *\n   * @param keys An array of node's keys to be checked\n   * @param leafOnly If the parameter is true, it only returns the currently selected array of sub-nodes\n   */\n  setCheckedKeys(keys: K[], leafOnly?: boolean): void;\n\n  /**\n   * Set node to be checked or not. Only works when `node-key` is assigned\n   *\n   * @param data Node's key or data to be checked\n   * @param checked Indicating the node checked or not\n   * @param deep Indicating whether to checked state deeply or not\n   */\n  setChecked(data: D | K, checked: boolean, deep: boolean): void;\n\n  /**\n   * If the node can be selected (`show-checkbox` is `true`), it returns the currently half selected array of nodes\n   */\n  getHalfCheckedNodes(): D[];\n\n  /**\n   * If the node can be selected (`show-checkbox` is `true`), it returns the currently half selected array of nodes' keys\n   */\n  getHalfCheckedKeys(): K[];\n\n  /**\n   * Return the highlight node's key (null if no node is highlighted)\n   */\n  getCurrentKey(): K;\n\n  /**\n   * Set highlighted node by key, only works when node-key is assigned\n   *\n   * @param key The node's key to be highlighted\n   */\n  setCurrentKey(key: K): void;\n\n  /**\n   * Return the highlight node data (null if no node is highlighted)\n   * @todo the name of methods should be getCurrentNodeData\n   */\n  getCurrentNode(): D;\n\n  /**\n   * Set highlighted node, only works when node-key is assigned\n   *\n   * @param node The node to be highlighted\n   */\n  setCurrentNode(data: D): void;\n\n  /**\n   * Get node by node key or node data\n   *\n   * @param by node key or node data\n   */\n  getNode(by: D | K): TreeNode<K, D>;\n\n  /**\n   * Remove node by key or node data or node instance\n   *\n   * @param by key or node data or node instance\n   */\n  remove(by: D | K): void;\n\n  /**\n   * Append a child node to specified node\n   *\n   * @param childData the data of appended node\n   * @param parent key or node data or node instance of the parent node\n   */\n  append(childData: D, parent: D | K): void;\n\n  /**\n   * insert a node before specified node\n   *\n   * @param data the data of inserted node\n   * @param ref key or node data or node instance of the reference node\n   */\n  insertBefore(data: D, ref: D | K): void;\n\n  /**\n   * insert a node after specified node\n   *\n   * @param data the data of inserted node\n   * @param ref key or node data or node instance of the reference node\n   */\n  insertAfter(data: D, ref: D | K): void;\n\n  /** Custom tree node icon */\n  iconClass?: string;\n\n}\n"
  },
  {
    "path": "types/upload.d.ts",
    "content": "import { ElementUIComponent } from './component'\n\nexport type ListType = 'text' | 'picture' | 'picture-card'\nexport type FileUploadStatus = 'ready' | 'uploading' | 'success' | 'fail'\n\nexport interface FileListItem {\n  name: string,\n  url: string,\n  status?: FileUploadStatus\n}\n\nexport interface ElUploadInternalRawFile extends File {\n  uid: number\n}\n\nexport interface ElUploadInternalFileDetail {\n  status: FileUploadStatus,\n  name: string,\n  size: number,\n  percentage: number,\n  uid: number,\n  raw: ElUploadInternalRawFile,\n  url?: string\n}\n\nexport interface ElUploadProgressEvent extends ProgressEvent {\n  percent: number\n}\n\nexport interface HttpRequestOptions {\n  headers: object,\n  withCredentials: boolean,\n  file: File,\n  data: object,\n  filename: string,\n  action: string,\n  onProgress: (e: ElUploadProgressEvent) => void,\n  onSuccess: (response: any) => void,\n  onError: (err: ErrorEvent) => void\n}\n\n/** Upload Component */\nexport declare class ElUpload extends ElementUIComponent {\n  /** Request URL (required) */\n  action: string\n\n  /** Request headers */\n  headers: object\n\n  /** Whether uploading multiple files is permitted */\n  multiple: boolean\n\n  /** Additions options of request */\n  data: object\n\n  /** Key name for uploaded file */\n  name: string\n\n  /** Whether cookies are sent */\n  withCredentials: boolean\n\n  /** Whether to show the uploaded file list */\n  showFileList: boolean\n\n  /** Whether to activate drag and drop mode */\n  drag: boolean\n\n  /** Accepted file types, will not work when thumbnail-mode is true */\n  accept: string\n\n  /** Hook function when clicking the uploaded files */\n  onPreview: (file: ElUploadInternalFileDetail) => void\n\n  /** Hook function when files are removed */\n  onRemove: (file: ElUploadInternalFileDetail, fileList: ElUploadInternalFileDetail[]) => void\n\n  /** Hook function when uploaded successfully */\n  onSuccess: (response: any, file: ElUploadInternalFileDetail, fileList: ElUploadInternalFileDetail[]) => void\n\n  /** Hook function when some errors occurs */\n  onError: (err: ErrorEvent, file: ElUploadInternalFileDetail, fileList: ElUploadInternalFileDetail[]) => void\n\n  /** Hook function when some progress occurs */\n  onProgress: (event: ElUploadProgressEvent, file: ElUploadInternalFileDetail, fileList: ElUploadInternalFileDetail[]) => void\n\n  /** Hook function when file status change */\n  onChange: (file: ElUploadInternalFileDetail, fileList: ElUploadInternalFileDetail[]) => void\n\n  /** Hook function before uploading with the file to be uploaded as its parameter. If false or a Promise is returned, uploading will be aborted */\n  beforeUpload: (file: ElUploadInternalRawFile) => boolean | Promise<File | Blob | boolean>\n\n  /** Whether thumbnail is displayed */\n  thumbnailMode: boolean\n\n  /** Default uploaded files */\n  fileList: FileListItem[]\n\n  /** Type of fileList */\n  listType: ListType\n\n  /** Whether to auto upload file */\n  autoUpload: boolean\n\n  /** Override default xhr behavior, allowing you to implement your own upload-file's request */\n  httpRequest: (options: HttpRequestOptions) => void\n\n  /** Whether to disable upload */\n  disabled: boolean\n\n  /** Maximum number of uploads allowed */\n  limit: number\n\n  /** Hook function when limit is exceeded */\n  onExceed: (file: ElUploadInternalFileDetail, fileList: ElUploadInternalFileDetail[]) => void\n\n  /** Clear the upload file list */\n  clearFiles (): void;\n\n  /** Abort specified file */\n  abort (file: ElUploadInternalFileDetail): void\n\n  /** Upload the file list manually */\n  submit ():void;\n}\n"
  },
  {
    "path": "web-types.json",
    "content": "{\n  \"framework\": \"vue\",\n  \"name\": \"element-ui\",\n  \"version\": \"2.15.9\",\n  \"description-markup\": \"markdown\",\n  \"contributions\": {\n    \"html\": {\n      \"vue-components\": [\n        {\n          \"name\": \"ElAlert\",\n          \"description\": \"Displays important alert messages.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/alert\",\n          \"props\": [\n            {\n              \"name\": \"type\",\n              \"description\": \"Component type\",\n              \"type\": \"AlertType\",\n              \"default\": \"'info'\"\n            },\n            {\n              \"name\": \"effect\",\n              \"description\": \"Choose theme\",\n              \"type\": \"AlertEffect\",\n              \"default\": \"'light'\"\n            },\n            {\n              \"name\": \"closable\",\n              \"description\": \"If closable or not\",\n              \"type\": \"boolean\",\n              \"default\": \"true\"\n            },\n            {\n              \"name\": \"description\",\n              \"description\": \"Descriptive text. Can also be passed with the default slot\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"title\",\n              \"description\": \"Title\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"showIcon\",\n              \"description\": \"If a type icon is displayed\",\n              \"type\": \"boolean\",\n              \"default\": \"false\"\n            },\n            {\n              \"name\": \"center\",\n              \"description\": \"whether to center the text\",\n              \"type\": \"boolean\",\n              \"default\": \"false\"\n            },\n            {\n              \"name\": \"closeText\",\n              \"description\": \"Customized close button text\",\n              \"type\": \"string\"\n            }\n          ],\n          \"slots\": [\n            {\n              \"name\": \"default\",\n              \"description\": \"description\"\n            },\n            {\n              \"name\": \"title\",\n              \"description\": \"content of the Alert title\"\n            }\n          ],\n          \"js\": {\n            \"events\": [\n              {\n                \"name\": \"close\",\n                \"description\": \"fires when alert is closed\"\n              }\n            ]\n          }\n        },\n        {\n          \"name\": \"ElAside\",\n          \"description\": \"Container for side sections (usually a side nav).\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/container\",\n          \"props\": [\n            {\n              \"name\": \"width\",\n              \"description\": \"Width of the side section\",\n              \"type\": \"string\",\n              \"default\": \"300px\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElAutocomplete\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/input#autocomplete-attributes\",\n          \"props\": [\n            {\n              \"name\": \"focus\",\n              \"description\": \"Focus the Input component\",\n              \"type\": \"function(): void\"\n            },\n            {\n              \"name\": \"selectWhenUnmatched\",\n              \"description\": \"Whether to emit select event on enter when there is no autocomplete match\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"debounce\",\n              \"description\": \"Debounce delay when typing\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"popperClass\",\n              \"description\": \"Custom class name for autocomplete's dropdown\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"name\",\n              \"description\": \"Name for the inner native input\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"triggerOnFocus\",\n              \"description\": \"Whether show suggestions when input focus\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"placement\",\n              \"description\": \"Placement of the popup menu\",\n              \"type\": \"SuggestionPlacement\"\n            },\n            {\n              \"name\": \"prefixIcon\",\n              \"description\": \"Prefix icon class\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"suffixIcon\",\n              \"description\": \"Suffix icon class\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"fetchSuggestions\",\n              \"description\": \"A method to fetch input suggestions. When suggestions are ready, invoke callback(data:[]) to return them to Autocomplete\",\n              \"type\": \"FetchSuggestions\"\n            },\n            {\n              \"name\": \"disabled\",\n              \"description\": \"Whether Autocomplete is disabled\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"placeholder\",\n              \"description\": \"The placeholder of Autocomplete\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"valueKey\",\n              \"description\": \"Key name of the input suggestion object for display\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"value\",\n              \"description\": \"Binding value\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"clearable\",\n              \"description\": \"Whether to show clear button\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"popperAppendToBody\",\n              \"description\": \"Whether to append the dropdown to body\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"hideLoading\",\n              \"description\": \"Whether to hide the loading icon in remote search\",\n              \"type\": \"boolean\"\n            }\n          ],\n          \"slots\": [\n            {\n              \"name\": \"default\",\n              \"description\": \"Custom content for input suggestions.\",\n              \"type\": \"{ item: any }\"\n            },\n            {\n              \"name\": \"prefix\",\n              \"description\": \"Content as Input prefix\"\n            },\n            {\n              \"name\": \"suffix\",\n              \"description\": \"Content as Input suffix\"\n            },\n            {\n              \"name\": \"prepend\",\n              \"description\": \"Content to prepend before Input\"\n            },\n            {\n              \"name\": \"append\",\n              \"description\": \"Content to append after Input\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElAvatar\",\n          \"description\": \"Avatars can be used to represent people or objects. It supports images, Icons, or characters.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/avatar\",\n          \"props\": [\n            {\n              \"name\": \"fit\",\n              \"type\": \"'fill' | 'contain' | 'cover' | 'none' | 'scale-down'\",\n              \"description\": \"Set how the image fit its container for an image avatar\",\n              \"default\": \"'cover'\"\n            },\n            {\n              \"name\": \"shape\",\n              \"type\": \"'circle' | 'square'\",\n              \"description\": \"Avatar shape\",\n              \"default\": \"'circle'\"\n            },\n            {\n              \"name\": \"alt\",\n              \"type\": \"string\",\n              \"description\": \"This attribute defines an alternative text description of the image\"\n            },\n            {\n              \"name\": \"size\",\n              \"type\": \"'large'|'medium'|'small'|number\",\n              \"description\": \"Avatar size\",\n              \"default\": \"'large'\"\n            },\n            {\n              \"name\": \"icon\",\n              \"type\": \"string\",\n              \"description\": \"Representation type to Icon, more info on Icon Component\"\n            },\n            {\n              \"name\": \"src\",\n              \"type\": \"string\",\n              \"description\": \"The address of the image for an image avatar\"\n            },\n            {\n              \"name\": \"srcSet\",\n              \"type\": \"string\",\n              \"description\": \"A list of one or more strings separated by commas indicating a set of possible image sources for the user agent to use\"\n            }\n          ],\n          \"js\": {\n            \"events\": [\n              {\n                \"name\": \"error\",\n                \"description\": \"handler when img load error, return false to prevent default fallback behavior\"\n              }\n            ]\n          }\n        },\n        {\n          \"name\": \"ElBacktop\",\n          \"description\": \"A button to back to top\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/backtop\",\n          \"props\": [\n            {\n              \"name\": \"bottom\",\n              \"description\": \"Backtop bottom position\",\n              \"type\": \"string|number\"\n            },\n            {\n              \"name\": \"visibilityHeight\",\n              \"description\": \"Backtop visibility height\",\n              \"type\": \"string|number\",\n              \"default\": \"200\"\n            },\n            {\n              \"name\": \"right\",\n              \"description\": \"Backtop right position\",\n              \"type\": \"string|number\",\n              \"default\": \"40\"\n            },\n            {\n              \"name\": \"target\",\n              \"description\": \"Backtop target\",\n              \"type\": \"string\",\n              \"default\": \"40\"\n            }\n          ],\n          \"js\": {\n            \"events\": [\n              {\n                \"name\": \"click\",\n                \"description\": \"Triggers when click\"\n              }\n            ]\n          }\n        },\n        {\n          \"name\": \"ElBadge\",\n          \"description\": \"A number or status mark on buttons and icons.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/badge\",\n          \"props\": [\n            {\n              \"name\": \"isDot\",\n              \"description\": \"If a little dot is displayed\",\n              \"type\": \"boolean\",\n              \"default\": \"false\"\n            },\n            {\n              \"name\": \"hidden\",\n              \"description\": \"Hidden badge\",\n              \"type\": \"boolean\",\n              \"default\": \"false\"\n            },\n            {\n              \"name\": \"value\",\n              \"description\": \"Display value\",\n              \"type\": \"string|number\"\n            },\n            {\n              \"name\": \"max\",\n              \"description\": \"Maximum value, shows '{max}+' when exceeded. Only works if `value` is a `Number`\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"type\",\n              \"description\": \"button type\",\n              \"type\": \"'primary' | 'success' | 'warning' | 'danger' | 'info'\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElBreadcrumb\",\n          \"description\": \"Displays the location of the current page, making it easier to browser back.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/breadcrumb\",\n          \"props\": [\n            {\n              \"name\": \"separatorClass\",\n              \"description\": \"Class name of the icon separator\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"separator\",\n              \"description\": \"Separator character\",\n              \"type\": \"string\",\n              \"default\": \"'/'\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElBreadcrumbItem\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/breadcrumb\",\n          \"props\": [\n            {\n              \"name\": \"replace\",\n              \"description\": \"If `true`, the navigation will not leave a history record\",\n              \"type\": \"boolean\",\n              \"default\": \"false\"\n            },\n            {\n              \"name\": \"to\",\n              \"description\": \"Target route of the link, same as `to` of `vue-router`\",\n              \"type\": \"string|object\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElButton\",\n          \"description\": \"Commonly used button.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/button\",\n          \"props\": [\n            {\n              \"name\": \"type\",\n              \"description\": \"Button type\",\n              \"type\": \"'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'\"\n            },\n            {\n              \"name\": \"plain\",\n              \"description\": \"Determine whether it's a plain button\",\n              \"type\": \"boolean\",\n              \"default\": \"false\"\n            },\n            {\n              \"name\": \"loading\",\n              \"description\": \"Determine whether it's loading\",\n              \"type\": \"boolean\",\n              \"default\": \"false\"\n            },\n            {\n              \"name\": \"size\",\n              \"description\": \"Button size\",\n              \"type\": \"'medium' | 'small' | 'mini'\"\n            },\n            {\n              \"name\": \"icon\",\n              \"description\": \"icon class name\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"disabled\",\n              \"description\": \"Disable the button\",\n              \"type\": \"boolean\",\n              \"default\": \"false\"\n            },\n            {\n              \"name\": \"autofocus\",\n              \"description\": \"Same as native button's `autofocus`\",\n              \"type\": \"boolean\",\n              \"default\": \"false\"\n            },\n            {\n              \"name\": \"round\",\n              \"description\": \"Determine whether it's a round button\",\n              \"type\": \"boolean\",\n              \"default\": \"false\"\n            },\n            {\n              \"name\": \"circle\",\n              \"description\": \"Determine whether it's a circle button\",\n              \"type\": \"boolean\",\n              \"default\": \"false\"\n            },\n            {\n              \"name\": \"nativeType\",\n              \"description\": \"Same as native button's `type`\",\n              \"type\": \"'button' | 'submit' | 'reset'\",\n              \"default\": \"'button'\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElButtonGroup\",\n          \"description\": \"Displayed as a button group, can be used to group a series of similar operations.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/button\"\n        },\n        {\n          \"name\": \"ElCalendar\",\n          \"description\": \"Display date.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/calendar\",\n          \"props\": [\n            {\n              \"name\": \"range\",\n              \"description\": \"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.\",\n              \"type\": \"(Date | string | number)[]\"\n            },\n            {\n              \"name\": \"value\",\n              \"description\": \"Binding value\",\n              \"type\": \"Date | string | number\"\n            },\n            {\n              \"name\": \"firstDayOfWeek\",\n              \"description\": \"First day of week\",\n              \"type\": \"number\",\n              \"default\": \"1\"\n            }\n          ],\n          \"slots\": [\n            {\n              \"name\": \"dateCell\",\n              \"type\": \"{date: Date, data: {type: 'prev-month' | 'current-month' | 'next-month', isSelected: boolean, day: string}}\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElCard\",\n          \"description\": \"Integrate information in a card container.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/card\",\n          \"props\": [\n            {\n              \"name\": \"shadow\",\n              \"description\": \"When to show card shadows\",\n              \"type\": \"'always'| 'hover' | 'never'\",\n              \"default\": \"'always'\"\n            },\n            {\n              \"name\": \"bodyStyle\",\n              \"description\": \"CSS style of body\",\n              \"type\": \"object\",\n              \"default\": \"{ padding: '20px' }\"\n            },\n            {\n              \"name\": \"header\",\n              \"description\": \"Title of the card\",\n              \"type\": \"string\"\n            }\n          ],\n          \"slots\": [\n            {\n              \"name\": \"default\",\n              \"description\": \"Content of the card\"\n            },\n            {\n              \"name\": \"header\",\n              \"description\": \"Title of the card\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElCarousel\",\n          \"description\": \"Loop a series of images or texts in a limited space\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/carousel\",\n          \"props\": [\n            {\n              \"name\": \"arrow\",\n              \"description\": \"When arrows are shown\",\n              \"type\": \"'always'|'hover'|'never'\",\n              \"default\": \"'hover'\"\n            },\n            {\n              \"name\": \"type\",\n              \"description\": \"Type of the Carousel\",\n              \"type\": \"'card'\"\n            },\n            {\n              \"name\": \"height\",\n              \"description\": \"Height of the carousel\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"autoplay\",\n              \"description\": \"Whether automatically loop the slides\",\n              \"type\": \"boolean\",\n              \"default\": \"true\"\n            },\n            {\n              \"name\": \"initialIndex\",\n              \"description\": \"Index of the initially active slide (starting from 0)\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"indicatorPosition\",\n              \"description\": \"Position of the indicators\",\n              \"type\": \"'outside' | 'none'\"\n            },\n            {\n              \"name\": \"interval\",\n              \"description\": \"Interval of the auto loop, in milliseconds\",\n              \"type\": \"number\",\n              \"default\": \"3000\"\n            },\n            {\n              \"name\": \"direction\",\n              \"description\": \"Display direction\",\n              \"type\": \"'horizontal' | 'vertical'\",\n              \"default\": \"'horizontal'\"\n            },\n            {\n              \"name\": \"trigger\",\n              \"description\": \"How indicators are triggered\",\n              \"type\": \"'hover' | 'click'\",\n              \"default\": \"'hover'\"\n            },\n            {\n              \"name\": \"loop\",\n              \"description\": \"display the items in loop\",\n              \"type\": \"boolean\",\n              \"default\": \"true\"\n            }\n          ],\n          \"js\": {\n            \"events\": [\n              {\n                \"name\": \"change\",\n                \"description\": \"triggers when the active slide switches\",\n                \"doc-url\": \"https://element.eleme.io/#/en-US/component/carousel#carousel-events\"\n              }\n            ]\n          }\n        },\n        {\n          \"name\": \"ElCarouselItem\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/carousel#carousel-item-attributes\",\n          \"props\": [\n            {\n              \"name\": \"name\",\n              \"description\": \"Name of the item, can be used in `setActiveItem`\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"label\",\n              \"description\": \"Text content for the corresponding indicator\",\n              \"type\": \"string\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElCascader\",\n          \"description\": \"If the options have a clear hierarchical structure, Cascader can be used to view and select them.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/cascader\",\n          \"props\": [\n            {\n              \"name\": \"debounce\",\n              \"description\": \"Debounce delay when typing filter keyword, in millisecond\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"options\",\n              \"description\": \"Data of the options\",\n              \"type\": \"CascaderOption[]\"\n            },\n            {\n              \"name\": \"filterable\",\n              \"description\": \"Whether the options can be searched\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"separator\",\n              \"description\": \"Separator of option labels\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"props\",\n              \"description\": \"Configuration options\",\n              \"type\": \"CascaderProps<any, CascaderOption>\"\n            },\n            {\n              \"name\": \"size\",\n              \"description\": \"Size of Input\",\n              \"type\": \"ElementUIComponentSize\"\n            },\n            {\n              \"name\": \"popperClass\",\n              \"description\": \"Custom class name for Cascader's dropdown\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"showAllLevels\",\n              \"description\": \"Whether to display all levels of the selected value in the input\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"collapseTags\",\n              \"description\": \"Whether to collapse selected tags in multiple selection mode\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"disabled\",\n              \"description\": \"Whether Cascader is disabled\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"placeholder\",\n              \"description\": \"Input placeholder\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"value\",\n              \"description\": \"Selected value\",\n              \"type\": \"any\"\n            },\n            {\n              \"name\": \"clearable\",\n              \"description\": \"Whether selected value can be cleared\",\n              \"type\": \"boolean\"\n            }\n          ],\n          \"slots\": [\n            {\n              \"name\": \"default\",\n              \"description\": \"Custom label content\"\n            },\n            {\n              \"name\": \"empty\",\n              \"description\": \"Empty content when no option matches\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElCascaderPanel\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/cascader#cascaderpanel-attributes\",\n          \"props\": [\n            {\n              \"name\": \"options\",\n              \"description\": \"Data of the options\",\n              \"type\": \"CascaderOption[]\"\n            },\n            {\n              \"name\": \"border\",\n              \"description\": \"Whether to add border\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"props\",\n              \"description\": \"Configuration options\",\n              \"type\": \"CascaderProps<any, CascaderOption>\"\n            },\n            {\n              \"name\": \"value\",\n              \"description\": \"Selected value\",\n              \"type\": \"any\"\n            }\n          ],\n          \"slots\": [\n            {\n              \"name\": \"default\",\n              \"description\": \"Custom label content\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElCheckbox\",\n          \"description\": \"A group of options for multiple choices.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/checkbox\",\n          \"props\": [\n            {\n              \"name\": \"indeterminate\",\n              \"description\": \"Same as indeterminate in native checkbox\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"checked\",\n              \"description\": \"If the checkbox is checked\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"border\",\n              \"description\": \"Whether to add a border around Checkbox\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"trueLabel\",\n              \"description\": \"Value of the checkbox if it's checked\",\n              \"type\": \"string|number\"\n            },\n            {\n              \"name\": \"size\",\n              \"description\": \"Size of the Checkbox, only works when border is true\",\n              \"type\": \"ElementUIComponentSize\"\n            },\n            {\n              \"name\": \"name\",\n              \"description\": \"Native 'name' attribute\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"falseLabel\",\n              \"description\": \"Value of the checkbox if it's not checked\",\n              \"type\": \"string|number\"\n            },\n            {\n              \"name\": \"disabled\",\n              \"description\": \"If the checkbox is disabled\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"value\",\n              \"description\": \"The form input value\",\n              \"type\": \"string|string[]\"\n            },\n            {\n              \"name\": \"label\",\n              \"description\": \"Value of the checkbox when used inside a checkbox-group\",\n              \"type\": \"string|number|boolean\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElCheckboxButton\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/checkbox#checkbox-group-attributes\",\n          \"props\": [\n            {\n              \"name\": \"checked\",\n              \"description\": \"If the checkbox is checked\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"trueLabel\",\n              \"description\": \"Value of the checkbox if it's checked\",\n              \"type\": \"string|number\"\n            },\n            {\n              \"name\": \"name\",\n              \"description\": \"Native 'name' attribute\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"falseLabel\",\n              \"description\": \"Value of the checkbox if it's not checked\",\n              \"type\": \"string|number\"\n            },\n            {\n              \"name\": \"disabled\",\n              \"description\": \"If the checkbox is disabled\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"label\",\n              \"description\": \"Value of the checkbox when used inside a checkbox-group\",\n              \"type\": \"string|number|boolean\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElCheckboxGroup\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/checkbox#checkbox-group-attributes\",\n          \"props\": [\n            {\n              \"name\": \"fill\",\n              \"description\": \"Border and background color when button is active\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"textColor\",\n              \"description\": \"Font color when button is active\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"size\",\n              \"description\": \"Size of checkbox buttons or bordered checkboxes\",\n              \"type\": \"ElementUIComponentSize\"\n            },\n            {\n              \"name\": \"min\",\n              \"description\": \"Minimum number of checkbox checked\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"disabled\",\n              \"description\": \"Whether the nesting checkboxes are disabled\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"max\",\n              \"description\": \"Maximum number of checkbox checked\",\n              \"type\": \"number\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElCol\",\n          \"props\": [\n            {\n              \"name\": \"md\",\n              \"description\": \"≥992px Responsive columns or column props object\",\n              \"type\": \"ResponsiveColumn\"\n            },\n            {\n              \"name\": \"tag\",\n              \"description\": \"custom element tag\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"offset\",\n              \"description\": \"Number of spacing on the left side of the grid\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"push\",\n              \"description\": \"Number of columns that grid moves to the right\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"sm\",\n              \"description\": \"≥768px Responsive columns or column props object\",\n              \"type\": \"ResponsiveColumn\"\n            },\n            {\n              \"name\": \"pull\",\n              \"description\": \"Number of columns that grid moves to the left\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"xl\",\n              \"description\": \"≥1920px Responsive columns or column props object\",\n              \"type\": \"ResponsiveColumn\"\n            },\n            {\n              \"name\": \"xs\",\n              \"description\": \"&lt;768px Responsive columns or column props object\",\n              \"type\": \"ResponsiveColumn\"\n            },\n            {\n              \"name\": \"lg\",\n              \"description\": \"≥1200px Responsive columns or column props object\",\n              \"type\": \"ResponsiveColumn\"\n            },\n            {\n              \"name\": \"span\",\n              \"description\": \"Number of column the grid spans\",\n              \"type\": \"number\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElCollapse\",\n          \"description\": \"Use Collapse to store contents.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/collapse\",\n          \"props\": [\n            {\n              \"name\": \"accordion\",\n              \"description\": \"Whether to activate accordion mode\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"value\",\n              \"description\": \"Currently active panel\",\n              \"type\": \"string|number|string[]|number[]\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElCollapseItem\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/collapse#collapse-item-attributes\",\n          \"props\": [\n            {\n              \"name\": \"name\",\n              \"description\": \"Unique identification of the panel\",\n              \"type\": \"string|number\"\n            },\n            {\n              \"name\": \"title\",\n              \"description\": \"Title of the panel\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"disabled\",\n              \"description\": \"Disable the collapse item\",\n              \"type\": \"boolean\"\n            }\n          ],\n          \"slots\": [\n            {\n              \"name\": \"default\",\n              \"description\": \"Content of the collapse item\"\n            },\n            {\n              \"name\": \"title\",\n              \"description\": \"Title of the collapse item\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElColorPicker\",\n          \"description\": \"ColorPicker is a color selector supporting multiple color formats.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/color-picker\",\n          \"props\": [\n            {\n              \"name\": \"showAlpha\",\n              \"description\": \"Whether to display the alpha slider\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"colorFormat\",\n              \"description\": \"Custom class name for ColorPicker's dropdown\",\n              \"type\": \"ColorFormat\"\n            },\n            {\n              \"name\": \"size\",\n              \"description\": \"Size of ColorPicker\",\n              \"type\": \"ElementUIComponentSize\"\n            },\n            {\n              \"name\": \"popperClass\",\n              \"description\": \"Whether to display the alpha slider\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"disabled\",\n              \"description\": \"Whether to disable the ColorPicker\",\n              \"type\": \"boolean\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElComponent\",\n          \"props\": []\n        },\n        {\n          \"name\": \"ElContainer\",\n          \"description\": \"Wrapper container. When nested with a `<el-header>` or `<el-footer>`, all its child elements will be vertically arranged. Otherwise horizontally.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/container\",\n          \"props\": [\n            {\n              \"name\": \"direction\",\n              \"description\": \"Layout direction for child elements\",\n              \"type\": \"\\\"horizontal\\\"|\\\"vertical\\\"\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElDatePicker\",\n          \"description\": \"Use Date Picker for date input.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/date-picker\",\n          \"props\": [\n            {\n              \"name\": \"defaultValue\",\n              \"description\": \"Default date of the calendar\",\n              \"type\": \"Date|number|string\"\n            },\n            {\n              \"name\": \"type\",\n              \"description\": \"Type of the picker\",\n              \"type\": \"DatePickerType\"\n            },\n            {\n              \"name\": \"align\",\n              \"description\": \"Alignment\",\n              \"type\": \"ElementUIHorizontalAlignment\"\n            },\n            {\n              \"name\": \"readonly\",\n              \"description\": \"Whether DatePicker is read only\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"format\",\n              \"description\": \"Format of the picker\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"size\",\n              \"description\": \"Size of Input\",\n              \"type\": \"ElementUIComponentSize\"\n            },\n            {\n              \"name\": \"popperClass\",\n              \"description\": \"Custom class name for DatePicker's dropdown\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"name\",\n              \"description\": \"name for the inner native input\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"startPlaceholder\",\n              \"description\": \"Placeholder for the start date in range mode\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"disabled\",\n              \"description\": \"Whether DatePicker is disabled\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"placeholder\",\n              \"description\": \"Placeholder\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"endPlaceholder\",\n              \"description\": \"Placeholder for the end date in range mode\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"value\",\n              \"description\": \"The value of the date picker\",\n              \"type\": \"Date|string|Date[]|string[]\"\n            },\n            {\n              \"name\": \"rangeSeparator\",\n              \"description\": \"Range separator\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"clearable\",\n              \"description\": \"Whether to show clear button\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"editable\",\n              \"description\": \"Whether the input is editable\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"pickerOptions\",\n              \"description\": \"Additional options, check the table below\",\n              \"type\": \"DatePickerOptions\"\n            },\n            {\n              \"name\": \"valueFormat\",\n              \"description\": \"Format of binding value. If not specified, the binding value will be a Date object\",\n              \"type\": \"string\"\n            }\n          ],\n          \"slots\": [\n            {\n              \"name\": \"range-separator\",\n              \"description\": \"Custom range separator content\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElDescriptions\",\n          \"description\": \"Display multiple fields in list form.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/descriptions\",\n          \"props\": [\n            {\n              \"name\": \"labelStyle\",\n              \"description\": \"custom label style\",\n              \"type\": \"object\"\n            },\n            {\n              \"name\": \"contentClassName\",\n              \"description\": \"custom content class name\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"border\",\n              \"description\": \"with or without border\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"size\",\n              \"description\": \"size of list\",\n              \"type\": \"\\\"medium\\\"|\\\"small\\\"|\\\"mini\\\"\"\n            },\n            {\n              \"name\": \"labelClassName\",\n              \"description\": \"custom label class name\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"title\",\n              \"description\": \"title text, display on the top left\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"contentStyle\",\n              \"description\": \"custom content style\",\n              \"type\": \"object\"\n            },\n            {\n              \"name\": \"extra\",\n              \"description\": \"extra text, display on the top right\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"direction\",\n              \"description\": \"direction of list\",\n              \"type\": \"\\\"vertical\\\"|\\\"horizontal\\\"\"\n            },\n            {\n              \"name\": \"column\",\n              \"description\": \"numbers of Descriptions Item in one line\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"colon\",\n              \"description\": \"change default props colon value of Descriptions Item\",\n              \"type\": \"boolean\"\n            }\n          ],\n          \"slots\": [\n            {\n              \"name\": \"extra\",\n              \"description\": \"title slot: custom extra area, display on the top right\"\n            },\n            {\n              \"name\": \"title\",\n              \"description\": \"title slot: custom title, display on the top left\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElDescriptionsItem\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/descriptions#descriptions-item-attributes\",\n          \"props\": [\n            {\n              \"name\": \"labelStyle\",\n              \"description\": \"custom label style\",\n              \"type\": \"object\"\n            },\n            {\n              \"name\": \"contentClassName\",\n              \"description\": \"custom content class name\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"labelClassName\",\n              \"description\": \"custom label class name\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"contentStyle\",\n              \"description\": \"custom content style\",\n              \"type\": \"object\"\n            },\n            {\n              \"name\": \"label\",\n              \"description\": \"label text\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"span\",\n              \"description\": \"the number of columns included\",\n              \"type\": \"number\"\n            }\n          ],\n          \"slots\": [\n            {\n              \"name\": \"default\",\n              \"description\": \"default slot: custom content\"\n            },\n            {\n              \"name\": \"label\",\n              \"description\": \"label slot: custom label\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElDialog\",\n          \"description\": \"Informs users while preserving the current page state.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/dialog\",\n          \"props\": [\n            {\n              \"name\": \"closeOnPressEscape\",\n              \"description\": \"Whether the Dialog can be closed by pressing ESC\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"showClose\",\n              \"description\": \"Whether to show a close button\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"closeOnClickModal\",\n              \"description\": \"Whether the Dialog can be closed by clicking the mask\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"lockScroll\",\n              \"description\": \"Whether scroll of body is disabled while Dialog is displayed\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"modal\",\n              \"description\": \"Whether a mask is displayed\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"fullscreen\",\n              \"description\": \"Whether the Dialog takes up full screen\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"destroyOnClose\",\n              \"description\": \"Whether to destroy elements in Dialog when closed\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"title\",\n              \"description\": \"Title of Dialog\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"top\",\n              \"description\": \"Value for margin-top of Dialog CSS\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"modalAppendToBody\",\n              \"description\": \"Whether to append modal to body element. If false, the modal will be appended to Dialog's parent element\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"center\",\n              \"description\": \"Whether to align the header and footer in center\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"width\",\n              \"description\": \"Width of Dialog\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"customClass\",\n              \"description\": \"Custom class names for Dialog\",\n              \"type\": \"string\"\n            }\n          ],\n          \"slots\": [\n            {\n              \"name\": \"default\",\n              \"description\": \"Content of the Dialog\"\n            },\n            {\n              \"name\": \"footer\",\n              \"description\": \"Content of the Dialog footer\"\n            },\n            {\n              \"name\": \"title\",\n              \"description\": \"Content of the Dialog title\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElDivider\",\n          \"description\": \"The dividing line that separates the content.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/divider\",\n          \"props\": [\n            {\n              \"name\": \"vertical\",\n              \"description\": \"enable vertical divider\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"posiiton\",\n              \"description\": \"customize the content on the divider line\",\n              \"type\": \"ContentPosition\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElDrawer\",\n          \"description\": \"Sometimes, `Dialog` does not always satisfy our requirements, let's say you have a massive form, or you need space to display something like `terms & conditions`, `Drawer` has almost identical API with `Dialog`, but it introduces different user experience.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/drawer\",\n          \"props\": [\n            {\n              \"name\": \"closeOnPressEscape\",\n              \"description\": \"Whether the Drawer can be closed by pressing ESC\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"showClose\",\n              \"description\": \"Whether the close button should be rendered to control the drawer's visible state\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"wrapperClosable\",\n              \"description\": \"Flag attribute whi\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"modal\",\n              \"description\": \"Equivalent to `Dialog`'s modal attribute, determines whether the dark shadowing background should show\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"visible\",\n              \"description\": \"Whether the drawer component should show, also can be decorated by `.sync`\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"size\",\n              \"description\": \"The size of the drawer component, supporting number with unit of pixel, string by percentage e.g. 30%\",\n              \"type\": \"number|string\"\n            },\n            {\n              \"name\": \"appendToBody\",\n              \"description\": \"Equivalent to `Dialog`'s append to body attribute, when applying nested drawer, make sure this one is set to true\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"position\",\n              \"description\": \"Attributes that controls the drawer's direction of display\",\n              \"type\": \"Direction\"\n            },\n            {\n              \"name\": \"destroyOnClose\",\n              \"description\": \"Determine whether the wrapped children should be destroyed, if true, children's destroyed life cycle method will be called all local state will be destroyed\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"title\",\n              \"description\": \"The Drawer's title, also can be replaced by named slot `title`\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"modalAppendToBody\",\n              \"description\": \"Equivalent to `Dialog`'s modal-append-to-body attribute, determines whether the shadowing background should be inserted direct to DocumentBody element\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"customClass\",\n              \"description\": \"Custom class names for Dialog\",\n              \"type\": \"string\"\n            }\n          ],\n          \"slots\": [\n            {\n              \"name\": \"default\",\n              \"description\": \"Main Content Slots\"\n            },\n            {\n              \"name\": \"title\",\n              \"description\": \"Title Slots\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElDropdown\",\n          \"description\": \"Toggleable menu for displaying lists of links and actions.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/dropdown\",\n          \"props\": [\n            {\n              \"name\": \"type\",\n              \"description\": \"Menu button type. only works when split-button is true\",\n              \"type\": \"ButtonType\"\n            },\n            {\n              \"name\": \"tabindex\",\n              \"description\": \"Dropdown tabindex\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"size\",\n              \"description\": \"menu size, also works on the split button\",\n              \"type\": \"ElementUIComponentSize\"\n            },\n            {\n              \"name\": \"placement\",\n              \"description\": \"Placement of the menu\",\n              \"type\": \"DropdownMenuAlignment\"\n            },\n            {\n              \"name\": \"hideTimeout\",\n              \"description\": \"Delay time before hide a dropdown\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"disabled\",\n              \"description\": \"Whether Dropdown is disabled\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"splitButton\",\n              \"description\": \"Whether a button group is displayed\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"trigger\",\n              \"description\": \"How to trigger\",\n              \"type\": \"DropdownMenuTrigger\"\n            },\n            {\n              \"name\": \"showTimeout\",\n              \"description\": \"Delay time before show a dropdown\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"hideOnClick\",\n              \"description\": \"Whether to hide menu after clicking menu-item\",\n              \"type\": \"boolean\"\n            }\n          ],\n          \"slots\": [\n            {\n              \"name\": \"default\",\n              \"description\": \"Content of Dropdown. Notice: Must be a valid html dom element (ex. `<span>`, `<button>` etc.) or `el-component`, to attach the trigger listener\"\n            },\n            {\n              \"name\": \"dropdown\",\n              \"description\": \"Content of the Dropdown Menu, usually a `<el-dropdown-menu>` element\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElDropdownItem\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/dropdown#dropdown-menu-item-attributes\",\n          \"props\": [\n            {\n              \"name\": \"divided\",\n              \"description\": \"Whether a divider is displayed\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"icon\",\n              \"description\": \"Icon to show on left side of text\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"disabled\",\n              \"description\": \"Whether the item is disabled\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"command\",\n              \"description\": \"A command to be dispatched to Dropdown's command callback\",\n              \"type\": \"string|number|object\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElDropdownMenu\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/dropdown\",\n          \"props\": []\n        },\n        {\n          \"name\": \"ElEmpty\",\n          \"description\": \"Placeholder hints for empty states.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/empty\",\n          \"props\": [\n            {\n              \"name\": \"image\",\n              \"description\": \"image URL\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"description\",\n              \"description\": \"description\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"imageSize\",\n              \"description\": \"image size (width)\",\n              \"type\": \"number\"\n            }\n          ],\n          \"slots\": [\n            {\n              \"name\": \"image\",\n              \"description\": \"image slot: Custom image\"\n            },\n            {\n              \"name\": \"default\",\n              \"description\": \"default slot:  \\bCustom bottom content\"\n            },\n            {\n              \"name\": \"description\",\n              \"description\": \"description slot: Custom description\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElFooter\",\n          \"description\": \"Container for footers.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/container\",\n          \"props\": [\n            {\n              \"name\": \"height\",\n              \"description\": \"Height of the footer\",\n              \"type\": \"string\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElForm\",\n          \"description\": \"Form consists of `input`, `radio`, `select`, `checkbox` and so on. With form, you can collect, verify and submit data.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/form\",\n          \"props\": [\n            {\n              \"name\": \"rules\",\n              \"description\": \"Validation rules of form\",\n              \"type\": \"object\"\n            },\n            {\n              \"name\": \"labelWidth\",\n              \"description\": \"Width of label, and all form items will inherit from Form\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"model\",\n              \"description\": \"Data of form component\",\n              \"type\": \"object\"\n            },\n            {\n              \"name\": \"inlineMessage\",\n              \"description\": \"Whether to display the error message inline with the form item\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"size\",\n              \"description\": \"Controls the size of components in this form\",\n              \"type\": \"ElementUIComponentSize\"\n            },\n            {\n              \"name\": \"showMessage\",\n              \"description\": \"Whether to show the error message\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"statusIcon\",\n              \"description\": \"Whether to display an icon indicating the validation result\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"labelPosition\",\n              \"description\": \"Position of label\",\n              \"type\": \"FormItemLabelPosition\"\n            },\n            {\n              \"name\": \"labelSuffix\",\n              \"description\": \"Suffix of the label\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"disabled\",\n              \"description\": \"Whether the form is disabled\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"validate\",\n              \"description\": \"Validate the whole form\",\n              \"type\": \"{(ValidateCallback): void, (): Promise<boolean>}\"\n            },\n            {\n              \"name\": \"validateOnRuleChange\",\n              \"description\": \"Whether to trigger validation when the `rules` prop is changed\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"inline\",\n              \"description\": \"Whether the form is inline\",\n              \"type\": \"boolean\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElFormItem\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/form#form-item-attributes\",\n          \"props\": [\n            {\n              \"name\": \"labelWidth\",\n              \"description\": \"Width of label, e.g. '50px'\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"rules\",\n              \"description\": \"Validation rules of form\",\n              \"type\": \"object\"\n            },\n            {\n              \"name\": \"required\",\n              \"description\": \"Whether the field is required or not, will be determined by validation rules if omitted\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"inlineMessage\",\n              \"description\": \"Whether to display the error message inline with the form item\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"size\",\n              \"description\": \"Controls the size of components in this form\",\n              \"type\": \"ElementUIComponentSize\"\n            },\n            {\n              \"name\": \"showMessage\",\n              \"description\": \"Whether to show the error message\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"error\",\n              \"description\": \"Field error message, set its value and the field will validate error and show this message immediately\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"prop\",\n              \"description\": \"A key of `model` of the enclosing `el-form` component\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"label\",\n              \"description\": \"Label\",\n              \"type\": \"string\"\n            }\n          ],\n          \"slots\": [\n            {\n              \"name\": \"default\",\n              \"description\": \"Content of Form Item\"\n            },\n            {\n              \"name\": \"label\",\n              \"description\": \"Content of label\"\n            },\n            {\n              \"name\": \"error\",\n              \"description\": \"Custom content to display validation message.\",\n              \"type\": \"{error: string}\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElHeader\",\n          \"description\": \"Container for headers.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/container\",\n          \"props\": [\n            {\n              \"name\": \"height\",\n              \"description\": \"Height of the header\",\n              \"type\": \"string\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElIcon\",\n          \"description\": \"Element provides a set of common icons.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/icon\",\n          \"props\": [\n            {\n              \"name\": \"name\",\n              \"description\": \"Icon name\",\n              \"doc-url\": \"https://element.eleme.io/#/en-US/component/icon#icons\",\n              \"type\": \"string\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElImage\",\n          \"description\": \"Besides the native features of img, support lazy load, custom placeholder and load failure, etc.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/image\",\n          \"props\": [\n            {\n              \"name\": \"fit\",\n              \"description\": \"Indicate how the image should be resized to fit its container, same as native 'object-fit'\",\n              \"type\": \"ObjectFit\"\n            },\n            {\n              \"name\": \"zIndex\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"alt\",\n              \"description\": \"Native 'alt' attribute\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"scrollContainer\",\n              \"description\": \"Scroll container that to add scroll listener when using lazy load\",\n              \"type\": \"string|HTMLElement\"\n            },\n            {\n              \"name\": \"lazy\",\n              \"description\": \"Whether to use lazy load\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"previewSrcList\",\n              \"type\": \"string[]\"\n            },\n            {\n              \"name\": \"referrerPolicy\",\n              \"description\": \"Native 'referrerPolicy' attribute\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"src\",\n              \"description\": \"Image source\",\n              \"type\": \"string\"\n            }\n          ],\n          \"slots\": [\n            {\n              \"name\": \"placeholder\",\n              \"description\": \"Placeholder content when image hasn't loaded yet\"\n            },\n            {\n              \"name\": \"error\",\n              \"description\": \"Error content when error occurs to image load\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElInput\",\n          \"description\": \"Input data using mouse or keyboard.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/input\",\n          \"props\": [\n            {\n              \"name\": \"type\",\n              \"description\": \"Type of input\",\n              \"type\": \"InputType\"\n            },\n            {\n              \"name\": \"readonly\",\n              \"description\": \"Same as readonly in native input\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"showWordLimit\",\n              \"description\": \"Whether to show wordCount when setting maxLength\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"maxlength\",\n              \"description\": \"Maximum Input text length\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"validateEvent\",\n              \"description\": \"Whether to trigger form validatio\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"size\",\n              \"description\": \"Size of Input, works when type is not 'textarea'\",\n              \"type\": \"ElementUIComponentSize\"\n            },\n            {\n              \"name\": \"name\",\n              \"description\": \"Same as name in native input\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"prefixIcon\",\n              \"description\": \"Prefix icon class\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"minlength\",\n              \"description\": \"Minimum Input text length\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"suffixIcon\",\n              \"description\": \"Suffix icon class\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"min\",\n              \"description\": \"Same as min in native input\",\n              \"type\": \"any\"\n            },\n            {\n              \"name\": \"disabled\",\n              \"description\": \"Whether Input is disabled\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"placeholder\",\n              \"description\": \"Placeholder of Input\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"value\",\n              \"description\": \"Binding value\",\n              \"type\": \"string|number\"\n            },\n            {\n              \"name\": \"autoComplete\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"clearable\",\n              \"description\": \"Whether the input is clearable\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"autocomplete\",\n              \"description\": \"Same as autocomplete in native input\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"max\",\n              \"description\": \"Same as max in native input\",\n              \"type\": \"any\"\n            },\n            {\n              \"name\": \"rows\",\n              \"description\": \"Number of rows of textarea, only works when type is 'textarea'\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"autofocus\",\n              \"description\": \"Same as autofocus in native input\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"form\",\n              \"description\": \"Same as form in native input\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"resize\",\n              \"description\": \"Control the resizability\",\n              \"type\": \"Resizability\"\n            },\n            {\n              \"name\": \"showPassword\",\n              \"description\": \"Whether to show password\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"step\",\n              \"description\": \"Same as step in native input\",\n              \"type\": \"any\"\n            },\n            {\n              \"name\": \"autosize\",\n              \"description\": \"Whether textarea has an adaptive height, only works when type is 'textarea'\",\n              \"type\": \"boolean|AutoSize\"\n            }\n          ],\n          \"slots\": [\n            {\n              \"name\": \"prefix\",\n              \"description\": \"Content as Input prefix, only works when `type` is 'text'\"\n            },\n            {\n              \"name\": \"suffix\",\n              \"description\": \"Content as Input suffix, only works when `type` is 'text'\"\n            },\n            {\n              \"name\": \"prepend\",\n              \"description\": \"Content to prepend before Input, only works when `type` is 'text'\"\n            },\n            {\n              \"name\": \"append\",\n              \"description\": \"Content to append after Input, only works when `type` is 'text'\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElInputNumber\",\n          \"description\": \"Input numerical values with a customizable range.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/input-number\",\n          \"props\": [\n            {\n              \"name\": \"controls\",\n              \"description\": \"Whether to enable the control buttons\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"precision\",\n              \"description\": \"Precision of input value\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"debounce\",\n              \"description\": \"Debounce delay when typing, in milliseconds\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"stepStrictly\",\n              \"description\": \"whether input value can only be multiple of step\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"size\",\n              \"description\": \"Size of the component\",\n              \"type\": \"InputNumberSize\"\n            },\n            {\n              \"name\": \"name\",\n              \"description\": \"Same as name in native input\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"min\",\n              \"description\": \"The minimum allowed value\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"disabled\",\n              \"description\": \"Whether the component is disabled\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"controlsPosition\",\n              \"description\": \"Position of the control buttons\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"value\",\n              \"description\": \"Binding value\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"max\",\n              \"description\": \"The maximum allowed value\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"step\",\n              \"description\": \"Incremental step\",\n              \"type\": \"number\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElLink\",\n          \"description\": \"Text hyperlink\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/link\",\n          \"props\": [\n            {\n              \"name\": \"underline\",\n              \"description\": \"Link underline\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"type\",\n              \"description\": \"Link type\",\n              \"type\": \"LinkType\"\n            },\n            {\n              \"name\": \"href\",\n              \"description\": \"Link href\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"icon\",\n              \"description\": \"Link icon, accepts an icon name of Element icon component\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"disabled\",\n              \"description\": \"Disable the link\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"target\",\n              \"description\": \"Link target\",\n              \"type\": \"string\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElMain\",\n          \"description\": \"Container for main sections.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/container\",\n          \"props\": []\n        },\n        {\n          \"name\": \"ElMenu\",\n          \"description\": \"Menu that provides navigation for your website.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/menu\",\n          \"props\": [\n            {\n              \"name\": \"defaultOpeneds\",\n              \"description\": \"Array that contains keys of currently active sub-menus\",\n              \"type\": \"string[]\"\n            },\n            {\n              \"name\": \"mode\",\n              \"description\": \"Menu display mode\",\n              \"type\": \"MenuDisplayMode\"\n            },\n            {\n              \"name\": \"router\",\n              \"description\": \"Whether vue-router mode is activated. If true, index will be used as 'path' to activate the route action\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"uniqueOpened\",\n              \"description\": \"Whether only one sub-menu can be active\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"textColor\",\n              \"description\": \"Text color of Menu (hex format)\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"defaultActive\",\n              \"description\": \"Index of currently active menu\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"activeTextColor\",\n              \"description\": \"Text color of currently active menu item (hex format)\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"backgroundColor\",\n              \"description\": \"Background color of Menu (hex format)\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"menuTrigger\",\n              \"description\": \"How sub-menus are triggered, only works when mode is 'horizontal'\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"collapse\",\n              \"description\": \"Whether the menu is collapsed (available only in vertical mode)\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"collapseTransition\",\n              \"description\": \"Whether the menu collapse transition is active\",\n              \"type\": \"boolean\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElMenuItem\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/menu#menu-item-attribute\",\n          \"props\": [\n            {\n              \"name\": \"index\",\n              \"description\": \"Unique identification\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"route\",\n              \"description\": \"Vue Router object\",\n              \"type\": \"object\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElMenuItemGroup\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/menu#menu-item-attribute\",\n          \"props\": [\n            {\n              \"name\": \"title\",\n              \"description\": \"Group title\",\n              \"type\": \"string\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElOption\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/select#option-attributes\",\n          \"props\": [\n            {\n              \"name\": \"disabled\",\n              \"description\": \"Whether option is disabled\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"value\",\n              \"description\": \"Value of option\",\n              \"type\": \"any\"\n            },\n            {\n              \"name\": \"label\",\n              \"description\": \"Label of option, same as value if omitted\",\n              \"type\": \"string\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElOptionGroup\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/select#option-group-attributes\",\n          \"props\": [\n            {\n              \"name\": \"disabled\",\n              \"description\": \"Whether to disable all options in this group\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"label\",\n              \"description\": \"Name of the group\",\n              \"type\": \"string\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElPageHeader\",\n          \"description\": \"If path of the page is simple, it is recommended to use PageHeader instead of the Breadcrumb.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/page-header\",\n          \"props\": [\n            {\n              \"name\": \"title\",\n              \"description\": \"title\",\n              \"type\": \"String\"\n            },\n            {\n              \"name\": \"content\",\n              \"description\": \"content\",\n              \"type\": \"String\"\n            }\n          ],\n          \"slots\": [\n            {\n              \"name\": \"title\",\n              \"description\": \"Title content\"\n            },\n            {\n              \"name\": \"content\",\n              \"description\": \"Content\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElPagination\",\n          \"description\": \"If you have too much data to display in one page, use pagination.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/pagination\",\n          \"props\": [\n            {\n              \"name\": \"small\",\n              \"description\": \"Whether to use small pagination\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"pageSize\",\n              \"description\": \"Item count of each page\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"prevText\",\n              \"description\": \"Text for the prev button\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"nextText\",\n              \"description\": \"Text for the prev button\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"popperClass\",\n              \"description\": \"Custom class name for the page size Select's dropdown\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"pageSizes\",\n              \"description\": \"Options of item count per page\",\n              \"type\": \"number[]\"\n            },\n            {\n              \"name\": \"total\",\n              \"description\": \"Total item count\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"pageCount\",\n              \"description\": \"Total page count. Set either total or page-count and pages will be displayed; if you need page-sizes, total is required\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"pagerCount\",\n              \"description\": \"Number of pagers\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"hideOnSinglePage\",\n              \"description\": \"Whether to hide when thers's only one page\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"layout\",\n              \"description\": \"Layout of Pagination. Elements separated with a comma.\\nAccepted values: `sizes`, `prev`, `pager`, `next`, `jumper`, `-&gt;`, `total`, `slot`\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"currentPage\",\n              \"description\": \"Current page number\",\n              \"type\": \"number\"\n            }\n          ],\n          \"slots\": [\n            {\n              \"name\": \"default\",\n              \"description\": \"Custom content. To use this, you need to declare `slot` in `layout`\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElPopconfirm\",\n          \"description\": \"A simple confirmation dialog of an element click action.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/popconfirm\",\n          \"props\": [\n            {\n              \"name\": \"visibleArrow\",\n              \"description\": \"Whether a tooltip arrow is displayed or not. For more info, please refer to Vue-popper\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"offset\",\n              \"description\": \"Popover offset\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"tabindex\",\n              \"description\": \"Popover tabindex\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"popperClass\",\n              \"description\": \"Custom class name for popover\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"placement\",\n              \"description\": \"Popover placement\",\n              \"type\": \"PopoverPlacement\"\n            },\n            {\n              \"name\": \"icon\",\n              \"description\": \"Popconfirm icon\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"title\",\n              \"description\": \"Popconfirm title\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"content\",\n              \"description\": \"Popover content, can be replaced with a default slot\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"disabled\",\n              \"description\": \"Whether Popover is disabled\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"popperOptions\",\n              \"description\": \"Parameters for popper.js\",\n              \"type\": \"object\"\n            },\n            {\n              \"name\": \"value\",\n              \"description\": \"Whether popover is visible\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"confirmButtonText\",\n              \"description\": \"Popconfirm ok text\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"cancelButtonText\",\n              \"description\": \"Popconfirm cancel text\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"cancelButtonType\",\n              \"description\": \"Popconfirm cancal type\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"hideIcon\",\n              \"description\": \"Popconfirm hide icon\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"trigger\",\n              \"description\": \"How the popover is triggered\",\n              \"type\": \"PopoverTrigger\"\n            },\n            {\n              \"name\": \"confirmButtonType\",\n              \"description\": \"Popconfirm ok type\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"transition\",\n              \"description\": \"Popover transition animation\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"closeDelay\",\n              \"description\": \"Delay before disappearing when trigger is hover, in milliseconds\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"openDelay\",\n              \"description\": \"Delay before appearing when trigger is hover, in milliseconds\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"iconColor\",\n              \"description\": \"Popconfirm icon color\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"width\",\n              \"description\": \"Popover width\",\n              \"type\": \"string|number\"\n            }\n          ],\n          \"slots\": [\n            {\n              \"name\": \"reference\",\n              \"description\": \"HTML element that triggers popover\"\n            },\n            {\n              \"name\": \"default\",\n              \"description\": \"Content of popover\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElPopover\",\n          \"description\": \"Similar to Tooltip, Popover is also built with `Vue-popper`\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/popover\",\n          \"props\": [\n            {\n              \"name\": \"visibleArrow\",\n              \"description\": \"Whether a tooltip arrow is displayed or not. For more info, please refer to Vue-popper\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"offset\",\n              \"description\": \"Popover offset\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"tabindex\",\n              \"description\": \"Popover tabindex\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"popperClass\",\n              \"description\": \"Custom class name for popover\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"placement\",\n              \"description\": \"Popover placement\",\n              \"type\": \"PopoverPlacement\"\n            },\n            {\n              \"name\": \"title\",\n              \"description\": \"Popover title\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"content\",\n              \"description\": \"Popover content, can be replaced with a default slot\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"disabled\",\n              \"description\": \"Whether Popover is disabled\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"popperOptions\",\n              \"description\": \"Parameters for popper.js\",\n              \"type\": \"object\"\n            },\n            {\n              \"name\": \"value\",\n              \"description\": \"Whether popover is visible\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"trigger\",\n              \"description\": \"How the popover is triggered\",\n              \"type\": \"PopoverTrigger\"\n            },\n            {\n              \"name\": \"transition\",\n              \"description\": \"Popover transition animation\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"closeDelay\",\n              \"description\": \"Delay before disappearing when trigger is hover, in milliseconds\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"openDelay\",\n              \"description\": \"Delay before appearing when trigger is hover, in milliseconds\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"width\",\n              \"description\": \"Popover width\",\n              \"type\": \"string|number\"\n            }\n          ],\n          \"slots\": [\n            {\n              \"name\": \"reference\",\n              \"description\": \"HTML element that triggers popover\"\n            },\n            {\n              \"name\": \"default\",\n              \"description\": \"Content of popover\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElProgress\",\n          \"description\": \"Progress is used to show the progress of current operation, and inform the user the current status.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/progress\",\n          \"props\": [\n            {\n              \"name\": \"showText\",\n              \"description\": \"Whether to show percentage\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"type\",\n              \"description\": \"The type of progress bar\",\n              \"type\": \"ProgressType\"\n            },\n            {\n              \"name\": \"percentage\",\n              \"description\": \"Percentage, required\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"strokeLinecap\",\n              \"description\": \"Circle progress bar stroke line cap\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"status\",\n              \"description\": \"The current status of progress bar\",\n              \"type\": \"ProgressStatus\"\n            },\n            {\n              \"name\": \"strokeWidth\",\n              \"description\": \"The width of progress bar\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"color\",\n              \"description\": \"Background color of progress bar. Overrides `status` prop\",\n              \"type\": \"string|Function|Array<string|{color: string, percentage: number}>\"\n            },\n            {\n              \"name\": \"textInside\",\n              \"description\": \"Whether to place the percentage inside progress bar, only works when type is 'line'\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"width\",\n              \"description\": \"The canvas width of circle progress bar\",\n              \"type\": \"number\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElRadio\",\n          \"description\": \"Single selection among multiple options.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/radio\",\n          \"props\": [\n            {\n              \"name\": \"border\",\n              \"description\": \"Whether to add a border around Radio\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"name\",\n              \"description\": \"Native 'name' attribute\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"disabled\",\n              \"description\": \"Whether radio is disabled\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"value\",\n              \"description\": \"The form input value\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"label\",\n              \"description\": \"The value of radio\",\n              \"type\": \"string|number|boolean\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElRadioButton\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/radio#radio-group-attributes\",\n          \"props\": [\n            {\n              \"name\": \"name\",\n              \"description\": \"Native 'name' attribute\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"disabled\",\n              \"description\": \"Whether radio is disabled\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"value\",\n              \"description\": \"The form input value\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"label\",\n              \"description\": \"The value of radio\",\n              \"type\": \"string|number\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElRadioGroup\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/radio#radio-group-attributes\",\n          \"props\": [\n            {\n              \"name\": \"fill\",\n              \"description\": \"Border and background color when button is active\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"textColor\",\n              \"description\": \"Font color when button is active\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"size\",\n              \"description\": \"The size of radio buttons\",\n              \"type\": \"RadioGroupSize\"\n            },\n            {\n              \"name\": \"disabled\",\n              \"description\": \"Whether the nesting radios are disabled\",\n              \"type\": \"boolean\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElRate\",\n          \"description\": \"Used for rating\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/rate\",\n          \"props\": [\n            {\n              \"name\": \"showText\",\n              \"description\": \"Whether to display texts\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"voidColor\",\n              \"description\": \"Color of unselected icons\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"voidIconClass\",\n              \"description\": \"Class name of unselected icons\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"highThreshold\",\n              \"description\": \"Threshold value between medium and high level. The value itself will be included in high level\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"textColor\",\n              \"description\": \"Color of texts\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"scoreTemplate\",\n              \"description\": \"Text template when the component is read-only\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"allowHalf\",\n              \"description\": \"Whether picking half start is allowed\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"showScore\",\n              \"description\": \"Whether to display current score. show-score and show-text cannot be true at the same time\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"colors\",\n              \"description\": \"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\",\n              \"type\": \"string[]|RateColors\"\n            },\n            {\n              \"name\": \"iconClasses\",\n              \"description\": \"Class names of 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 class name\",\n              \"type\": \"string[]|RateIconClasses\"\n            },\n            {\n              \"name\": \"disabled\",\n              \"description\": \"Whether Rate is read-only\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"max\",\n              \"description\": \"Max rating score\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"lowThreshold\",\n              \"description\": \"Threshold value between low and medium level. The value itself will be included in low level\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"disabledVoidIconClass\",\n              \"description\": \"Class name of unselected read-only icons\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"texts\",\n              \"description\": \"Text array\",\n              \"type\": \"string[]\"\n            },\n            {\n              \"name\": \"disabledVoidColor\",\n              \"description\": \"Color of unselected read-only icons\",\n              \"type\": \"string\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElResult\",\n          \"description\": \"Used to give feedback on the result of user's operation or access exception.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/result\",\n          \"props\": [\n            {\n              \"name\": \"subTitle\",\n              \"description\": \"sub title\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"icon\",\n              \"description\": \"icon type\",\n              \"type\": \"\\\"success\\\"|\\\"warning\\\"|\\\"info\\\"|\\\"error\\\"\"\n            },\n            {\n              \"name\": \"title\",\n              \"description\": \"title\",\n              \"type\": \"string\"\n            }\n          ],\n          \"slots\": [\n            {\n              \"name\": \"subTitle\",\n              \"description\": \"subTitle slot: custom sub title\"\n            },\n            {\n              \"name\": \"extra\",\n              \"description\": \"extra slot: custom extra area, display on the top right\"\n            },\n            {\n              \"name\": \"icon\",\n              \"description\": \"icon slot: custom icon\"\n            },\n            {\n              \"name\": \"title\",\n              \"description\": \"title slot: custom title\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElRow\",\n          \"props\": [\n            {\n              \"name\": \"type\",\n              \"description\": \"Layout mode. You can use flex. Works in modern browsers\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"align\",\n              \"description\": \"Vertical alignment of flex layout\",\n              \"type\": \"VertialAlignment\"\n            },\n            {\n              \"name\": \"justify\",\n              \"description\": \"Horizontal alignment of flex layout\",\n              \"type\": \"HorizontalAlignment\"\n            },\n            {\n              \"name\": \"tag\",\n              \"description\": \"Custom element tag\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"gutter\",\n              \"description\": \"Grid spacing\",\n              \"type\": \"number\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElSelect\",\n          \"description\": \"When there are plenty of options, use a drop-down menu to display and select desired ones.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/select\",\n          \"props\": [\n            {\n              \"name\": \"remoteMethod\",\n              \"description\": \"Custom remote search method\",\n              \"type\": \"QueryChangeHandler\"\n            },\n            {\n              \"name\": \"remote\",\n              \"description\": \"Whether options are loaded from server\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"filterable\",\n              \"description\": \"Whether Select is filterable\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"loadingText\",\n              \"description\": \"Displayed text while loading data from server\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"multipleLimit\",\n              \"description\": \"Maximum number of options user can select when multiple is true. No limit when set to 0\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"loading\",\n              \"description\": \"Whether Select is loading data from server\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"size\",\n              \"description\": \"Size of Input\",\n              \"type\": \"ElementUIComponentSize\"\n            },\n            {\n              \"name\": \"popperClass\",\n              \"description\": \"Custom class name for Select's dropdown\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"name\",\n              \"description\": \"The name attribute of select input\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"allowCreate\",\n              \"description\": \"Whether creating new items is allowed. To use this, filterable must be true\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"disabled\",\n              \"description\": \"Whether Select is disabled\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"placeholder\",\n              \"description\": \"Placeholder\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"valueKey\",\n              \"description\": \"Unique identity key name for value, required when value is an object\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"value\",\n              \"description\": \"The form input value\",\n              \"type\": \"any\"\n            },\n            {\n              \"name\": \"autoComplete\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"clearable\",\n              \"description\": \"Whether single select can be cleared\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"filterMethod\",\n              \"description\": \"Custom filter method\",\n              \"type\": \"QueryChangeHandler\"\n            },\n            {\n              \"name\": \"autocomplete\",\n              \"description\": \"Same as autocomplete in native input\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"multiple\",\n              \"description\": \"Whether multiple-select is activated\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"noDataText\",\n              \"description\": \"Displayed text when there is no options\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"popperAppendToBody\",\n              \"description\": \"Whether to append the popper menu to body\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"defaultFirstOption\",\n              \"description\": \"Select first matching option on enter key. Use with filterable or remote\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"noMatchText\",\n              \"description\": \"Displayed text when no data matches the filtering query\",\n              \"type\": \"string\"\n            }\n          ],\n          \"slots\": [\n            {\n              \"name\": \"default\",\n              \"description\": \"Option component list\"\n            },\n            {\n              \"name\": \"prefix\",\n              \"description\": \"Content as Select prefix\"\n            },\n            {\n              \"name\": \"empty\",\n              \"description\": \"Content when there is no options\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElSkeleton\",\n          \"description\": \"When loading data, and you need a rich experience for visual and interactions for your end users, you can choose `skeleton`.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/skeleton\",\n          \"props\": [\n            {\n              \"name\": \"count\",\n              \"description\": \"how many fake items to render to the DOM; default: 1\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"loading\",\n              \"description\": \"whether showing the skeleton; default true\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"animated\",\n              \"description\": \"whether showing the animation; default: false\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"throttle\",\n              \"description\": \"Rendering delay in millseconds; default: 0\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"rows\",\n              \"description\": \"numbers of the row, only useful when no template slot were given; default: 4\",\n              \"type\": \"boolean\"\n            }\n          ],\n          \"slots\": [\n            {\n              \"name\": \"template\",\n              \"description\": \"template slot: Custom rendering skeleton template\"\n            },\n            {\n              \"name\": \"default\",\n              \"description\": \"default slot:  \\bReal rendering DOM\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElSkeletonItem\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/skeleton#skeleton-item-attributes\",\n          \"props\": [\n            {\n              \"name\": \"variant\",\n              \"description\": \"The current rendering skeleton type; default: text\",\n              \"type\": \"\\\"p\\\"|\\\"text\\\"|\\\"h1\\\"|\\\"h3\\\"|\\\"caption\\\"|\\\"button\\\"|\\\"image\\\"|\\\"circle\\\"|\\\"rect\\\"\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElSlider\",\n          \"description\": \"Drag the slider within a fixed range.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/slider\",\n          \"props\": [\n            {\n              \"name\": \"showInputControls\",\n              \"description\": \"Whether to display control buttons when show-input is true\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"debounce\",\n              \"description\": \"Debounce delay when typing, in milliseconds, works when show-input is true\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"showInput\",\n              \"description\": \"Whether to display an input box, works when range is false\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"formatTooltip\",\n              \"description\": \"Format of displayed tooltip value\",\n              \"type\": \"SliderTooltipFormat\"\n            },\n            {\n              \"name\": \"height\",\n              \"description\": \"Slider height, required in vertical mode\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"range\",\n              \"description\": \"Whether to select a range\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"vertical\",\n              \"description\": \"Vertical mode\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"showStops\",\n              \"description\": \"Whether to display breakpoints\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"min\",\n              \"description\": \"Minimum value\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"inputSize\",\n              \"description\": \"Size of the input box\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"disabled\",\n              \"description\": \"Whether Slider is disabled\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"value\",\n              \"description\": \"Current value of the slider\",\n              \"type\": \"number|number[]\"\n            },\n            {\n              \"name\": \"tooltipClass\",\n              \"description\": \"Custom class name for the tooltip\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"max\",\n              \"description\": \"Maximum value\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"showTooltip\",\n              \"description\": \"Whether to display tooltip value\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"marks\",\n              \"description\": \"Custom marks\",\n              \"type\": \"{[p: number]: string|{style: object, label: string|VNode}}\"\n            },\n            {\n              \"name\": \"step\",\n              \"description\": \"Step size\",\n              \"type\": \"number\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElSpinner\",\n          \"props\": [\n            {\n              \"name\": \"type\",\n              \"description\": \"The type of spinner\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"radius\",\n              \"description\": \"The radius of spinner\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"strokeColor\",\n              \"description\": \"The color of spinner\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"strokeWidth\",\n              \"description\": \"The width of spinner\",\n              \"type\": \"number\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElStep\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/steps#step-attributes\",\n          \"props\": [\n            {\n              \"name\": \"status\",\n              \"description\": \"Current status. It will be automatically set by Steps if not configured.\",\n              \"type\": \"StepStatus\"\n            },\n            {\n              \"name\": \"icon\",\n              \"description\": \"Step icon\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"description\",\n              \"description\": \"Step description\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"title\",\n              \"description\": \"Step title\",\n              \"type\": \"string\"\n            }\n          ],\n          \"slots\": [\n            {\n              \"name\": \"icon\",\n              \"description\": \"Custom icon\"\n            },\n            {\n              \"name\": \"description\",\n              \"description\": \"Step description\"\n            },\n            {\n              \"name\": \"title\",\n              \"description\": \"Step title\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElSteps\",\n          \"description\": \"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.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/steps\",\n          \"props\": [\n            {\n              \"name\": \"processStatus\",\n              \"description\": \"Status of current step\",\n              \"type\": \"StepStatus\"\n            },\n            {\n              \"name\": \"simple\",\n              \"description\": \"Whether to apply simple theme\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"space\",\n              \"description\": \"The spacing of each step, will be responsive if omitted. Support percentage.\",\n              \"type\": \"number|string\"\n            },\n            {\n              \"name\": \"active\",\n              \"description\": \"Current activation step\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"direction\",\n              \"description\": \"Display direction\",\n              \"type\": \"StepsDirection\"\n            },\n            {\n              \"name\": \"alignCenter\",\n              \"description\": \"Whether step description is centered\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"finishStatus\",\n              \"description\": \"Status of end step\",\n              \"type\": \"StepStatus\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElSubmenu\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/menu#submenu-attribute\",\n          \"props\": [\n            {\n              \"name\": \"index\",\n              \"description\": \"Unique identification\",\n              \"type\": \"string|null\"\n            },\n            {\n              \"name\": \"popperClass\",\n              \"description\": \"Custom class name for the popup menu\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"hideTimeout\",\n              \"description\": \"Delay time before hiding a sub-menu\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"disabled\",\n              \"description\": \"Whether the sub-menu is disabled\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"popperAppendToBody\",\n              \"description\": \"Whether to append the popper menu to body\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"showTimeout\",\n              \"description\": \"Delay time before showing a sub-menu\",\n              \"type\": \"number\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElSwitch\",\n          \"description\": \"Switch is used for switching between two opposing states.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/switch\",\n          \"props\": [\n            {\n              \"name\": \"activeText\",\n              \"description\": \"Text displayed when in on state\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"activeIconClass\",\n              \"description\": \"Class name of the icon displayed when in on state, overrides on-text\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"inactiveValue\",\n              \"description\": \"Switch value when in off state\",\n              \"type\": \"string|boolean|number\"\n            },\n            {\n              \"name\": \"validateEvent\",\n              \"description\": \"Whether to trigger form validation\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"inactiveIconClass\",\n              \"description\": \"Class name of the icon displayed when in off state, overrides off-text\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"activeColor\",\n              \"description\": \"Background color when in on state\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"name\",\n              \"description\": \"Input name of Switch\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"activeValue\",\n              \"description\": \"Switch value when in on state\",\n              \"type\": \"string|boolean|number\"\n            },\n            {\n              \"name\": \"inactiveText\",\n              \"description\": \"Text displayed when in off state\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"disabled\",\n              \"description\": \"Whether Switch is disabled\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"value\",\n              \"description\": \"Whether Switch is on\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"inactiveColor\",\n              \"description\": \"Background color when in off state\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"width\",\n              \"description\": \"Width of Switch\",\n              \"type\": \"number\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElTabPane\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/tabs#tab-pane-attributes\",\n          \"props\": [\n            {\n              \"name\": \"name\",\n              \"description\": \"Identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"closable\",\n              \"description\": \"Whether Tab is closable\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"lazy\",\n              \"description\": \"Whether Tab is lazily rendered\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"disabled\",\n              \"description\": \"Whether Tab is disabled\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"label\",\n              \"description\": \"Title of the tab\",\n              \"type\": \"string\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElTable\",\n          \"description\": \"Display multiple data with similar format. You can sort, filter, compare your data in a table.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/table\",\n          \"props\": [\n            {\n              \"name\": \"showSummary\",\n              \"description\": \"Whether to display a summary row\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"data\",\n              \"description\": \"Table data\",\n              \"type\": \"object[]\"\n            },\n            {\n              \"name\": \"rowStyle\",\n              \"description\": \"Function that returns custom style for a row, or an object assigning custom style for every row\",\n              \"type\": \"object|(function(rowCallbackParams): object)\"\n            },\n            {\n              \"name\": \"defaultSort\",\n              \"description\": \"Set the default sort column and order\",\n              \"type\": \"DefaultSortOptions\"\n            },\n            {\n              \"name\": \"fit\",\n              \"description\": \"Whether width of column automatically fits its container\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"headerRowStyle\",\n              \"description\": \"Function that returns custom style for a row in table header, or an object assigning custom style for every row in table header\",\n              \"type\": \"object|(function(rowCallbackParams): object)\"\n            },\n            {\n              \"name\": \"stripe\",\n              \"description\": \"Whether table is striped\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"defaultExpandAll\",\n              \"description\": \"Whether expand all rows by default. Only works when the table has a column `type=\\\"expand\\\"`\",\n              \"type\": \"Boolean\"\n            },\n            {\n              \"name\": \"height\",\n              \"description\": \"Table's height. By default it has an auto height. If its value is a number, the height is measured in pixels; if its value is a string, the height is affected by external styles\",\n              \"type\": \"string|number\"\n            },\n            {\n              \"name\": \"border\",\n              \"description\": \"Whether table has vertical border\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"sumText\",\n              \"description\": \"Displayed text for the first column of summary row\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"selectOnIndeterminate\",\n              \"description\": \"Controls the behavior of master checkbox in multi-select tables when only some rows are selected\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"rowClassName\",\n              \"description\": \"Function that returns custom class names for a row, or a string assigning class names for every row\",\n              \"type\": \"string|(function(rowCallbackParams): string)\"\n            },\n            {\n              \"name\": \"headerRowClassName\",\n              \"description\": \"Function that returns custom class names for a row in table header, or a string assigning class names for every row in table header\",\n              \"type\": \"string|(function(rowCallbackParams): string)\"\n            },\n            {\n              \"name\": \"currentRowKey\",\n              \"description\": \"Key of current row, a set only prop\",\n              \"type\": \"string|number\"\n            },\n            {\n              \"name\": \"indent\",\n              \"description\": \"Horizontal indentation of nodes in adjacent levels in pixels\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"lazy\",\n              \"description\": \"Whether to lazy load tree structure data, used with load attribute\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"emptyText\",\n              \"description\": \"Displayed text when data is empty. You can customize this area with `slot=\\\"empty\\\"`\",\n              \"type\": \"String\"\n            },\n            {\n              \"name\": \"maxHeight\",\n              \"description\": \"Table's max-height. The height of the table starts from auto until it reaches the maxHeight limit. The maxHeight is measured in pixels, same as height\",\n              \"type\": \"string|number\"\n            },\n            {\n              \"name\": \"tooltipEffect\",\n              \"description\": \"Tooltip effect property\",\n              \"type\": \"TooltipEffect\"\n            },\n            {\n              \"name\": \"showHeader\",\n              \"description\": \"Whether table header is visible\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"highlightCurrentRow\",\n              \"description\": \"Whether current row is highlighted\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"cellStyle\",\n              \"description\": \"Function that returns custom style for a cell, or an object assigning custom style for every cell\",\n              \"type\": \"object|(function(cellCallbackParams): object)\"\n            },\n            {\n              \"name\": \"headerCellClassName\",\n              \"description\": \"Function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header\",\n              \"type\": \"string|(function(cellCallbackParams): string)\"\n            },\n            {\n              \"name\": \"headerCellStyle\",\n              \"description\": \"Function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header\",\n              \"type\": \"object|(function(cellCallbackParams): object)\"\n            },\n            {\n              \"name\": \"cellClassName\",\n              \"description\": \"Function that returns custom class names for a cell, or a string assigning class names for every cell\",\n              \"type\": \"string|(function(cellCallbackParams): string)\"\n            },\n            {\n              \"name\": \"expandRowKeys\",\n              \"description\": \"Set expanded rows by this prop. Prop's value is the keys of expand rows, you should set row-key before using this prop\",\n              \"type\": \"any[]\"\n            }\n          ],\n          \"slots\": [\n            {\n              \"name\": \"append\",\n              \"description\": \"Contents to be inserted after the last row. You may need this slot if you want to implement infinite scroll for the table. This slot will be displayed above the summary row if there is one.\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElTableColumn\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/table#table-column-attributes\",\n          \"props\": [\n            {\n              \"name\": \"type\",\n              \"description\": \"Type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1). If set to `expand`, the column will display expand icon.\",\n              \"type\": \"TableColumnType\"\n            },\n            {\n              \"name\": \"align\",\n              \"description\": \"Alignment\",\n              \"type\": \"ElementUIHorizontalAlignment\"\n            },\n            {\n              \"name\": \"headerAlign\",\n              \"description\": \"Alignment of the table header. If omitted, the value of the `align` attribute will be applied\",\n              \"type\": \"ElementUIHorizontalAlignment\"\n            },\n            {\n              \"name\": \"sortOrders\",\n              \"description\": \"The order of the sorting strategies used when sorting the data. Works when `sortable` is `true`.\",\n              \"type\": \"SortOrders[]\"\n            },\n            {\n              \"name\": \"filterPlacement\",\n              \"description\": \"Placement for the filter dropdown\",\n              \"type\": \"PopoverPlacement\"\n            },\n            {\n              \"name\": \"reserveSelection\",\n              \"description\": \"Whether to reserve selection after data refreshing, works when `type` is `'selection'`\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"fixed\",\n              \"description\": \"Whether column is fixed at left/right. Will be fixed at left if `true`\",\n              \"type\": \"boolean|TableColumnFixedType\"\n            },\n            {\n              \"name\": \"columnKey\",\n              \"description\": \"Column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"labelClassName\",\n              \"description\": \"Class name of the label of this column\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"className\",\n              \"description\": \"Class name of cells in the column\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"prop\",\n              \"description\": \"Field name. You can also use its alias: property\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"showOverflowTooltip\",\n              \"description\": \"Whether to hide extra content and show them in a tooltip when hovering on the cell\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"filterMultiple\",\n              \"description\": \"Whether data filtering supports multiple options\",\n              \"type\": \"Boolean\"\n            },\n            {\n              \"name\": \"resizable\",\n              \"description\": \"Whether column width can be resized. Works when border of `el-table` is `true`\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"filteredValue\",\n              \"description\": \"Filter value for selected data, might be useful when table header is rendered with `render-header`\",\n              \"type\": \"TableColumnFilter[]\"\n            },\n            {\n              \"name\": \"minWidth\",\n              \"description\": \"Column minimum width. Columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"label\",\n              \"description\": \"Column label\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"sortable\",\n              \"description\": \"Whether column can be sorted\",\n              \"type\": \"boolean|\\\"custom\\\"\"\n            },\n            {\n              \"name\": \"filters\",\n              \"description\": \"An array of data filtering options\",\n              \"type\": \"TableColumnFilter[]\"\n            },\n            {\n              \"name\": \"width\",\n              \"description\": \"Column width\",\n              \"type\": \"string\"\n            }\n          ],\n          \"slots\": [\n            {\n              \"name\": \"default\",\n              \"description\": \"Custom content for table columns.\",\n              \"type\": \"{ row: any, column: any, $index: any }\"\n            },\n            {\n              \"name\": \"header\",\n              \"description\": \"Custom content for table header.\",\n              \"type\": \"{ column: any, $index: any }\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElTabs\",\n          \"description\": \"Divide data collections which are related yet belong to different types.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/tabs\",\n          \"props\": [\n            {\n              \"name\": \"type\",\n              \"description\": \"Type of Tab\",\n              \"type\": \"TabType\"\n            },\n            {\n              \"name\": \"closable\",\n              \"description\": \"Whether Tab is closable\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"tabPosition\",\n              \"description\": \"Position of tabs\",\n              \"type\": \"TabPosition\"\n            },\n            {\n              \"name\": \"stretch\",\n              \"description\": \"Whether width of tab automatically fits its container\",\n              \"type\": \"Boolean\"\n            },\n            {\n              \"name\": \"value\",\n              \"description\": \"Name of the selected tab\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"editable\",\n              \"description\": \"Whether Tab is addable and closable\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"addable\",\n              \"description\": \"Whether Tab is addable\",\n              \"type\": \"boolean\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElTag\",\n          \"description\": \"Used for marking and selection.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/tag\",\n          \"props\": [\n            {\n              \"name\": \"disableTransitions\",\n              \"description\": \"Whether the removal animation is disabled\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"type\",\n              \"description\": \"Tag type\",\n              \"type\": \"TagType\"\n            },\n            {\n              \"name\": \"hit\",\n              \"description\": \"Whether Tag has a highlighted border\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"size\",\n              \"description\": \"Tag size\",\n              \"type\": \"ElementUIComponentSize\"\n            },\n            {\n              \"name\": \"effect\",\n              \"description\": \"Tag theme\",\n              \"type\": \"TagTheme\"\n            },\n            {\n              \"name\": \"color\",\n              \"description\": \"Background color of the tag\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"closable\",\n              \"description\": \"Whether Tab can be removed\",\n              \"type\": \"boolean\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElTimePicker\",\n          \"description\": \"Use Time Picker for time input.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/time-picker\",\n          \"props\": [\n            {\n              \"name\": \"align\",\n              \"description\": \"Alignment\",\n              \"type\": \"ElementUIHorizontalAlignment\"\n            },\n            {\n              \"name\": \"readonly\",\n              \"description\": \"Whether DatePicker is read only\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"size\",\n              \"description\": \"Size of Input\",\n              \"type\": \"ElementUIComponentSize\"\n            },\n            {\n              \"name\": \"popperClass\",\n              \"description\": \"Custom class name for TimePicker's dropdown\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"startPlaceholder\",\n              \"description\": \"Placeholder for the start time in range mode\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"disabled\",\n              \"description\": \"Whether DatePicker is disabled\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"placeholder\",\n              \"description\": \"Placeholder\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"endPlaceholder\",\n              \"description\": \"Placeholder for the end time in range mode\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"value\",\n              \"description\": \"Value of the picker\",\n              \"type\": \"string|Date\"\n            },\n            {\n              \"name\": \"rangeSeparator\",\n              \"description\": \"Range separator\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"clearable\",\n              \"description\": \"Whether to show clear button\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"editable\",\n              \"description\": \"Whether the input is editable\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"pickerOptions\",\n              \"description\": \"Additional options, check the table below\",\n              \"type\": \"TimePickerOptions\"\n            },\n            {\n              \"name\": \"isRange\",\n              \"description\": \"Whether to pick a time range\",\n              \"type\": \"boolean\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElTimeSelect\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/time-picker#time-select-options\",\n          \"props\": [\n            {\n              \"name\": \"align\",\n              \"description\": \"Alignment\",\n              \"type\": \"ElementUIHorizontalAlignment\"\n            },\n            {\n              \"name\": \"readonly\",\n              \"description\": \"Whether DatePicker is read only\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"size\",\n              \"description\": \"Size of Input\",\n              \"type\": \"ElementUIComponentSize\"\n            },\n            {\n              \"name\": \"popperClass\",\n              \"description\": \"Custom class name for TimePicker's dropdown\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"disabled\",\n              \"description\": \"Whether DatePicker is disabled\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"placeholder\",\n              \"description\": \"Placeholder\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"value\",\n              \"description\": \"Value of the picker\",\n              \"type\": \"string|Date\"\n            },\n            {\n              \"name\": \"clearable\",\n              \"description\": \"Whether to show clear button\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"editable\",\n              \"description\": \"Whether the input is editable\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"pickerOptions\",\n              \"description\": \"Additional options, check the table below\",\n              \"type\": \"TimeSelectOptions\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElTimeline\",\n          \"description\": \"Visually display timeline.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/timeline\",\n          \"props\": [\n            {\n              \"name\": \"reverse\",\n              \"type\": \"boolean\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElTimelineItem\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/timeline#timeline-item-attributes\",\n          \"props\": [\n            {\n              \"name\": \"type\",\n              \"type\": \"TimelineItemType\"\n            },\n            {\n              \"name\": \"size\",\n              \"type\": \"TimelineItemSize\"\n            },\n            {\n              \"name\": \"placement\",\n              \"type\": \"TimelineItemPlacement\"\n            },\n            {\n              \"name\": \"icon\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"hideTimestamp\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"timestamp\",\n              \"type\": \"string\"\n            }\n          ],\n          \"slots\": [\n            {\n              \"name\": \"default\",\n              \"description\": \"Custom content for timeline item\"\n            },\n            {\n              \"name\": \"dot\",\n              \"description\": \"Custom defined node\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElTooltip\",\n          \"description\": \"Display prompt information for mouse hover.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/tooltip\",\n          \"props\": [\n            {\n              \"name\": \"visibleArrow\",\n              \"description\": \"Whether an arrow is displayed. For more information, check Vue-popper page\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"hideAfter\",\n              \"description\": \"Timeout in milliseconds to hide tooltip\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"offset\",\n              \"description\": \"Offset of the Tooltip\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"tabindex\",\n              \"description\": \"Tooltip tabindex\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"effect\",\n              \"description\": \"Tooltip theme\",\n              \"type\": \"TooltipEffect\"\n            },\n            {\n              \"name\": \"popperClass\",\n              \"description\": \"Custom class name for Tooltip's popper\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"placement\",\n              \"description\": \"Position of Tooltip\",\n              \"type\": \"PopoverPlacement\"\n            },\n            {\n              \"name\": \"manual\",\n              \"description\": \"Whether to control Tooltip manually. mouseenter and mouseleave won't have effects if set to true\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"content\",\n              \"description\": \"Display content, can be overridden by slot#content\",\n              \"type\": \"String\"\n            },\n            {\n              \"name\": \"enterable\",\n              \"description\": \"Whether the mouse can enter the tooltip\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"disabled\",\n              \"description\": \"Whether Tooltip is disabled\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"popperOptions\",\n              \"description\": \"Popper.js parameters\",\n              \"type\": \"object\"\n            },\n            {\n              \"name\": \"value\",\n              \"description\": \"Visibility of Tooltip\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"transition\",\n              \"description\": \"Animation name\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"openDelay\",\n              \"description\": \"Delay of appearance, in millisecond\",\n              \"type\": \"number\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElTransfer\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/transfer\",\n          \"props\": [\n            {\n              \"name\": \"data\",\n              \"description\": \"Data source\",\n              \"type\": \"TransferData[]\"\n            },\n            {\n              \"name\": \"leftDefaultChecked\",\n              \"description\": \"Key array of initially checked data items of the left list\",\n              \"type\": \"any[]\"\n            },\n            {\n              \"name\": \"renderContent\",\n              \"description\": \"Custom render function for data items\",\n              \"type\": \"TransferRenderContent\"\n            },\n            {\n              \"name\": \"filterable\",\n              \"description\": \"Whether Transfer is filterable\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"format\",\n              \"description\": \"Texts for checking status in list header\",\n              \"type\": \"TransferFormat\"\n            },\n            {\n              \"name\": \"filterPlaceholder\",\n              \"description\": \"Placeholder for the filter input\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"buttonTexts\",\n              \"description\": \"Custom button texts\",\n              \"type\": \"string[]\"\n            },\n            {\n              \"name\": \"props\",\n              \"description\": \"Prop aliases for data source\",\n              \"type\": \"TransferProps\"\n            },\n            {\n              \"name\": \"rightDefaultChecked\",\n              \"description\": \"Key array of initially checked data items of the right list\",\n              \"type\": \"any[]\"\n            },\n            {\n              \"name\": \"targetOrder\",\n              \"description\": \"Order strategy for elements in the target list\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"titles\",\n              \"description\": \"Custom list titles\",\n              \"type\": \"string[]\"\n            }\n          ],\n          \"slots\": [\n            {\n              \"name\": \"default\",\n              \"description\": \"Custom content for data items.\",\n              \"type\": \"{ option: any }\"\n            },\n            {\n              \"name\": \"left-footer\",\n              \"description\": \"Content of left list footer\"\n            },\n            {\n              \"name\": \"right-footer\",\n              \"description\": \"Content of right list footer\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElTree\",\n          \"description\": \"Display a set of data with hierarchies.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/tree\",\n          \"props\": [\n            {\n              \"name\": \"data\",\n              \"description\": \"Tree data\",\n              \"type\": \"TreeData[]\"\n            },\n            {\n              \"name\": \"checkOnClickNode\",\n              \"description\": \"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.\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"defaultExpandAll\",\n              \"description\": \"Whether to expand all nodes by default\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"highlightCurrent\",\n              \"description\": \"Whether current node is highlighted\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"expandOnClickNode\",\n              \"description\": \"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.\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"accordion\",\n              \"description\": \"Whether only one node among the same level can be expanded at one time\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"props\",\n              \"description\": \"Configuration options, see the following table\",\n              \"type\": \"TreeProps\"\n            },\n            {\n              \"name\": \"showCheckbox\",\n              \"description\": \"Whether node is selectable\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"defaultExpandedKeys\",\n              \"description\": \"Array of keys of initially expanded nodes\",\n              \"type\": \"any[]\"\n            },\n            {\n              \"name\": \"indent\",\n              \"description\": \"Horizontal indentation of nodes in adjacent levels in pixels\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"emptyText\",\n              \"description\": \"Text displayed when data is void\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"draggable\",\n              \"description\": \"Whether enable tree nodes drag and drop\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"defaultCheckedKeys\",\n              \"description\": \"Array of keys of initially checked nodes\",\n              \"type\": \"any[]\"\n            },\n            {\n              \"name\": \"checkStrictly\",\n              \"description\": \"Whether checked state of a node not affects its father and child nodes when show-checkbox is true\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"store\",\n              \"description\": \"TreeStore\",\n              \"type\": \"TreeStore<any, TreeData>\"\n            },\n            {\n              \"name\": \"iconClass\",\n              \"description\": \"Custom tree node icon\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"autoExpandParent\",\n              \"description\": \"Whether to expand father node when a child node is expanded\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"nodeKey\",\n              \"description\": \"Unique identity key name for nodes, its value should be unique across the whole tree\",\n              \"type\": \"string\"\n            }\n          ],\n          \"slots\": [\n            {\n              \"name\": \"default\",\n              \"description\": \"Custom content for tree nodes.\",\n              \"type\": \"{ node: any, data: any }\"\n            }\n          ]\n        },\n        {\n          \"name\": \"ElUpload\",\n          \"description\": \"Upload files by clicking or drag-and-drop\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/upload\",\n          \"props\": [\n            {\n              \"name\": \"data\",\n              \"description\": \"Additions options of request\",\n              \"type\": \"object\"\n            },\n            {\n              \"name\": \"showFileList\",\n              \"description\": \"Whether to show the uploaded file list\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"limit\",\n              \"description\": \"Maximum number of uploads allowed\",\n              \"type\": \"number\"\n            },\n            {\n              \"name\": \"action\",\n              \"description\": \"Request URL (required)\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"drag\",\n              \"description\": \"Whether to activate drag and drop mode\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"fileList\",\n              \"description\": \"Default uploaded files\",\n              \"type\": \"FileListItem[]\"\n            },\n            {\n              \"name\": \"accept\",\n              \"description\": \"Accepted file types, will not work when thumbnail-mode is true\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"name\",\n              \"description\": \"Key name for uploaded file\",\n              \"type\": \"string\"\n            },\n            {\n              \"name\": \"listType\",\n              \"description\": \"Type of fileList\",\n              \"type\": \"ListType\"\n            },\n            {\n              \"name\": \"autoUpload\",\n              \"description\": \"Whether to auto upload file\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"disabled\",\n              \"description\": \"Whether to disable upload\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"headers\",\n              \"description\": \"Request headers\",\n              \"type\": \"object\"\n            },\n            {\n              \"name\": \"thumbnailMode\",\n              \"description\": \"Whether thumbnail is displayed\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"multiple\",\n              \"description\": \"Whether uploading multiple files is permitted\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"withCredentials\",\n              \"description\": \"Whether cookies are sent\",\n              \"type\": \"boolean\"\n            }\n          ],\n          \"slots\": [\n            {\n              \"name\": \"trigger\",\n              \"description\": \"Content which triggers file dialog\"\n            },\n            {\n              \"name\": \"tip\",\n              \"description\": \"Content of tips\"\n            }\n          ]\n        }\n      ],\n      \"vue-directives\": [\n        {\n          \"name\": \"loading\",\n          \"description\": \"Displays animation in a container (such as a table) while loading data.\\n\\nElement 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.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/loading\",\n          \"attribute-value\": {\n            \"type\": \"boolean\",\n            \"required\": true\n          },\n          \"modifiers\": [\n            {\n              \"name\": \"body\",\n              \"description\": \"Make the mask append to the body element\",\n              \"type\": \"boolean\"\n            },\n            {\n              \"name\": \"fullscreen\",\n              \"type\": \"boolean\"\n            }\n          ]\n        },\n        {\n          \"name\": \"infinite-scroll\",\n          \"description\": \"Add `v-infinite-scroll` to the list to automatically execute loading method when scrolling to the bottom.\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/infiniteScroll\",\n          \"attribute-value\": {\n            \"type\": \"Function\",\n            \"required\": true\n          }\n        },\n        {\n          \"name\": \"popover\",\n          \"doc-url\": \"https://element.eleme.io/#/en-US/component/popover\",\n          \"description\": \"Use the `v-popover` directive and set it to Popover's ref to trigger element.\"\n        }\n      ]\n    }\n  }\n}\n"
  }
]