From b0f4fc5f2384819e087a22b2da94ebfc326709fa Mon Sep 17 00:00:00 2001 From: jeremywu <15975785+JeremyWuuuuu@users.noreply.github.com> Date: Tue, 24 Aug 2021 13:36:48 +0800 Subject: [PATCH] refactor: update package path and bundle folder (#3016) --- .eslintignore | 1 + .github/workflows/publish-npm.yml | 11 +- .gitignore | 1 + .markdownlint.json | 3 + .../src/infiniteScroll.scss => .npmrc | 0 build/bincomp.js | 43 -- build/{build-helper.js => build-helper.ts} | 43 +- build/build-indices.js | 70 -- build/build-locale.js | 39 -- build/build-util.js | 50 -- build/build.component.js | 84 --- build/build.comps.js | 16 - build/build.entry.js | 5 - build/build.js | 81 --- build/common.js | 3 - build/components.ts | 177 +++++ build/constants.ts | 2 + build/full-bundle.ts | 120 ++++ build/gen-dts.js | 165 ----- build/gen-dts.ts | 132 ++++ build/gen-entry-dts.ts | 67 ++ build/gen-type.js | 68 -- build/{gen-version.js => gen-version.ts} | 11 +- build/get-deps.ts | 12 + build/getCpus.js | 4 - build/getCpus.ts | 4 + build/getPkgs.js | 4 - build/getPkgs.ts | 4 + build/gulp-rewriter.ts | 16 + build/gulpfile.ts | 58 ++ build/paths.ts | 26 + build/rollup.config.bundle.js | 48 -- build/{rollup.config.js => rollup.config.ts} | 2 +- build/rollup.plugin.entry.ts | 23 + build/size-reporter.ts | 77 +++ build/update-version.ts | 50 ++ build/webpack.config.js | 2 +- build/worker.js | 132 ++++ package.json | 37 +- packages/affix/package.json | 12 - packages/alert/package.json | 12 - packages/aside/index.ts | 12 - packages/aside/package.json | 12 - packages/autocomplete/package.json | 12 - packages/avatar/package.json | 15 - packages/backtop/package.json | 12 - packages/badge/package.json | 13 - packages/breadcrumb-item/index.ts | 11 - packages/breadcrumb-item/package.json | 12 - packages/breadcrumb/index.ts | 11 - packages/breadcrumb/package.json | 12 - packages/button-group/index.ts | 11 - packages/button-group/package.json | 12 - packages/button/index.ts | 11 - packages/button/package.json | 12 - packages/calendar/package.json | 12 - packages/card/package.json | 12 - packages/carousel-item/index.ts | 11 - packages/carousel-item/package.json | 12 - packages/carousel/index.ts | 11 - packages/carousel/package.json | 12 - packages/cascader-panel/package.json | 12 - packages/cascader/package.json | 12 - packages/check-tag/package.json | 12 - packages/checkbox-button/index.ts | 11 - packages/checkbox-button/package.json | 12 - packages/checkbox-group/index.ts | 11 - packages/checkbox-group/package.json | 12 - packages/checkbox/index.ts | 11 - packages/checkbox/package.json | 12 - packages/col/package.json | 12 - packages/collapse-item/index.ts | 11 - packages/collapse-item/package.json | 12 - packages/collapse-transition/index.ts | 11 - packages/collapse-transition/package.json | 12 - packages/collapse/index.ts | 11 - packages/collapse/package.json | 16 - packages/color-picker/package.json | 12 - .../affix/__tests__/affix.spec.ts | 2 +- packages/{ => components}/affix/index.ts | 9 +- packages/{ => components}/affix/src/index.vue | 4 +- packages/components/affix/style/css.ts | 2 + packages/components/affix/style/index.ts | 2 + .../alert/__tests__/alert.spec.ts | 0 packages/{ => components}/alert/index.ts | 8 +- packages/{ => components}/alert/src/index.vue | 4 +- packages/components/alert/style/css.ts | 2 + packages/components/alert/style/index.ts | 2 + packages/components/aside/style/css.ts | 2 + packages/components/aside/style/index.ts | 2 + .../__tests__/autocomplete.spec.ts | 0 .../{ => components}/autocomplete/index.ts | 3 +- .../autocomplete/src/index.vue | 8 +- packages/components/autocomplete/style/css.ts | 5 + .../components/autocomplete/style/index.ts | 5 + .../avatar/__tests__/avatar.spec.ts | 5 +- packages/{ => components}/avatar/index.ts | 3 +- .../{ => components}/avatar/src/index.vue | 5 +- packages/components/avatar/style/css.ts | 2 + packages/components/avatar/style/index.ts | 2 + .../backtop/__tests__/backtop.spec.ts | 0 packages/{ => components}/backtop/index.ts | 6 +- .../{ => components}/backtop/src/index.vue | 0 packages/components/backtop/style/css.ts | 2 + packages/components/backtop/style/index.ts | 2 + .../badge/__tests__/badge.spec.ts | 0 packages/{ => components}/badge/index.ts | 6 +- packages/{ => components}/badge/src/index.vue | 0 packages/components/badge/style/css.ts | 2 + packages/components/badge/style/index.ts | 2 + packages/components/base/style/css.ts | 1 + packages/components/base/style/index.ts | 1 + .../components/breadcrumb-item/style/css.ts | 2 + .../components/breadcrumb-item/style/index.ts | 2 + .../breadcrumb/__tests__/breadcrumb.spec.ts | 0 packages/components/breadcrumb/index.ts | 20 + .../breadcrumb/src/breadcrumb.ts | 0 .../{ => components}/breadcrumb/src/index.vue | 0 .../{ => components}/breadcrumb/src/item.vue | 2 +- packages/components/breadcrumb/style/css.ts | 2 + packages/components/breadcrumb/style/index.ts | 2 + packages/components/button-group/style/css.ts | 2 + .../components/button-group/style/index.ts | 2 + .../button/__tests__/button.spec.ts | 0 packages/components/button/index.ts | 19 + .../button/src/button-group.vue | 0 .../{ => components}/button/src/button.vue | 22 +- packages/components/button/style/css.ts | 2 + packages/components/button/style/index.ts | 2 + .../calendar/__tests__/calendar.spec.ts | 0 packages/{ => components}/calendar/index.ts | 3 +- .../calendar/src/date-table.vue | 2 +- .../{ => components}/calendar/src/index.vue | 13 +- packages/components/calendar/style/css.ts | 4 + packages/components/calendar/style/index.ts | 4 + .../card/__tests__/card.spec.ts | 0 packages/{ => components}/card/index.ts | 3 +- packages/{ => components}/card/src/index.vue | 0 packages/components/card/style/css.ts | 2 + packages/components/card/style/index.ts | 2 + .../components/carousel-item/style/css.ts | 2 + .../components/carousel-item/style/index.ts | 2 + .../carousel/__tests__/carousel.spec.ts | 2 +- packages/components/carousel/index.ts | 20 + .../{ => components}/carousel/src/carousel.ts | 0 .../{ => components}/carousel/src/item.vue | 6 +- .../{ => components}/carousel/src/main.vue | 3 +- packages/components/carousel/style/css.ts | 2 + packages/components/carousel/style/index.ts | 2 + .../__tests__/cascader-panel.spec.ts | 0 .../{ => components}/cascader-panel/index.ts | 3 +- .../cascader-panel/src/config.ts | 10 +- .../cascader-panel/src/index.vue | 17 +- .../cascader-panel/src/menu.vue | 9 +- .../cascader-panel/src/node-content.ts | 15 + .../cascader-panel/src/node.ts | 48 +- .../cascader-panel/src/node.vue | 22 +- .../cascader-panel/src/store.ts | 5 +- .../cascader-panel/src/types.ts | 3 +- .../cascader-panel/src/utils.ts | 5 +- .../components/cascader-panel/style/css.ts | 5 + .../components/cascader-panel/style/index.ts | 5 + .../cascader/__tests__/cascader.spec.ts | 0 packages/{ => components}/cascader/index.ts | 4 +- .../{ => components}/cascader/src/index.vue | 25 +- packages/components/cascader/style/css.ts | 6 + packages/components/cascader/style/index.ts | 6 + .../check-tag/__tests__/check-tag.spec.ts | 0 packages/{ => components}/check-tag/index.ts | 3 +- .../{ => components}/check-tag/src/index.vue | 0 packages/components/check-tag/style/css.ts | 2 + packages/components/check-tag/style/index.ts | 2 + .../components/checkbox-button/style/css.ts | 2 + .../components/checkbox-button/style/index.ts | 2 + .../components/checkbox-group/style/css.ts | 2 + .../components/checkbox-group/style/index.ts | 2 + .../checkbox/__tests__/checkbox.spec.ts | 0 packages/components/checkbox/index.ts | 25 + .../checkbox/src/checkbox-button.vue | 27 +- .../checkbox/src/checkbox-group.vue | 1 + .../checkbox/src/checkbox.type.ts | 15 - .../checkbox/src/checkbox.vue | 4 +- .../checkbox/src/useCheckbox.ts | 49 +- packages/components/checkbox/style/css.ts | 2 + packages/components/checkbox/style/index.ts | 2 + .../col/__tests__/layout.spec.ts | 4 +- packages/{ => components}/col/index.ts | 7 +- packages/{ => components}/col/src/col.ts | 0 packages/components/col/style/css.ts | 2 + packages/components/col/style/index.ts | 2 + .../components/collapse-item/style/css.ts | 2 + .../components/collapse-item/style/index.ts | 2 + .../components/collapse-transition/index.ts | 12 + .../src/collapse-transition.vue} | 0 .../collapse-transition/style/css.ts | 2 + .../collapse-transition/style/index.ts | 2 + .../collapse/__tests__/collapse.spec.ts | 0 packages/components/collapse/index.ts | 19 + .../collapse/src/collapse-item.vue | 2 +- .../{ => components}/collapse/src/collapse.ts | 0 .../collapse/src/collapse.vue | 0 packages/components/collapse/style/css.ts | 2 + packages/components/collapse/style/index.ts | 2 + .../__tests__/color-picker.spec.ts | 2 +- .../{ => components}/color-picker/index.ts | 8 +- .../color-picker/src/color.ts | 0 .../src/components/alpha-slider.vue | 5 +- .../src/components/hue-slider.vue | 8 +- .../color-picker/src/components/predefine.vue | 8 +- .../color-picker/src/components/sv-panel.vue | 3 +- .../color-picker/src/draggable.ts | 0 .../color-picker/src/index.vue | 39 +- .../components/color-picker/src/useOption.ts | 13 + packages/components/color-picker/style/css.ts | 4 + .../components/color-picker/style/index.ts | 4 + .../__tests__/config-provider.spec.ts | 0 .../config-provider/config-provider.ts | 0 packages/components/config-provider/index.ts | 11 + .../components/config-provider/style/css.ts | 2 + .../components/config-provider/style/index.ts | 2 + .../container/__tests__/container.spec.ts | 3 +- packages/components/container/index.ts | 35 + packages/components/container/src/aside.vue | 29 + .../container/src/container.vue | 4 +- packages/components/container/src/footer.vue | 29 + packages/components/container/src/header.vue | 29 + .../{ => components}/container/src/main.vue | 0 packages/components/container/style/css.ts | 2 + packages/components/container/style/index.ts | 2 + .../date-picker/__tests__/date-picker.spec.ts | 6 +- .../__tests__/date-time-picker.spec.ts | 2 +- .../{ => components}/date-picker/index.ts | 8 +- .../src/date-picker-com/basic-date-table.vue | 16 +- .../src/date-picker-com/basic-month-table.vue | 18 +- .../src/date-picker-com/basic-year-table.vue | 16 +- .../src/date-picker-com/panel-date-pick.vue | 19 +- .../src/date-picker-com/panel-date-range.vue | 14 +- .../src/date-picker-com/panel-month-range.vue | 10 +- .../date-picker/src/date-picker.ts | 15 +- .../date-picker/src/date-picker.type.ts | 2 - packages/components/date-picker/style/css.ts | 6 + .../components/date-picker/style/index.ts | 6 + .../components/descriptions-item/style/css.ts | 2 + .../descriptions-item/style/index.ts | 2 + .../__tests__/descriptions.spec.ts | 0 packages/components/descriptions/index.ts | 21 + .../descriptions/src/description-item.ts | 0 .../descriptions/src/descriptions-cell.ts | 0 .../descriptions/src/descriptions-row.vue | 0 .../descriptions/src/descriptions.type.ts | 21 + .../descriptions/src/index.vue | 3 +- .../descriptions/src/token.ts | 2 +- packages/components/descriptions/style/css.ts | 3 + .../components/descriptions/style/index.ts | 3 + .../dialog/__tests__/dialog.spec.ts | 0 packages/{ => components}/dialog/index.ts | 10 +- .../{ => components}/dialog/src/index.vue | 96 +-- .../{ => components}/dialog/src/useDialog.ts | 99 ++- packages/components/dialog/style/css.ts | 3 + packages/components/dialog/style/index.ts | 3 + .../divider/__tests__/divider.spec.ts | 0 packages/{ => components}/divider/index.ts | 8 +- .../{ => components}/divider/src/index.vue | 5 - packages/components/divider/style/css.ts | 2 + packages/components/divider/style/index.ts | 2 + .../drawer/__tests__/drawer.spec.ts | 0 packages/{ => components}/drawer/index.ts | 8 +- .../{ => components}/drawer/src/index.vue | 59 +- packages/components/drawer/style/css.ts | 3 + packages/components/drawer/style/index.ts | 3 + .../components/dropdown-item/style/css.ts | 2 + .../components/dropdown-item/style/index.ts | 2 + .../components/dropdown-menu/style/css.ts | 2 + .../components/dropdown-menu/style/index.ts | 2 + .../dropdown/__tests__/dropdown.spec.tsx | 2 +- packages/components/dropdown/index.ts | 26 + .../dropdown/src/dropdown-item.vue | 0 .../dropdown/src/dropdown-menu.vue | 0 .../{ => components}/dropdown/src/dropdown.ts | 4 +- .../dropdown/src/dropdown.vue | 13 +- .../dropdown/src/useDropdown.ts | 3 +- packages/components/dropdown/style/css.ts | 4 + packages/components/dropdown/style/index.ts | 4 + .../empty/__tests__/empty.spec.ts | 0 packages/{ => components}/empty/index.ts | 6 +- .../{ => components}/empty/src/img-empty.vue | 0 packages/{ => components}/empty/src/index.vue | 2 +- packages/components/empty/style/css.ts | 2 + packages/components/empty/style/index.ts | 2 + packages/components/footer/style/css.ts | 2 + packages/components/footer/style/index.ts | 2 + packages/components/form-item/style/css.ts | 2 + packages/components/form-item/style/index.ts | 2 + .../form/__tests__/form.spec.ts | 8 +- packages/components/form/index.ts | 20 + .../{ => components}/form/src/form-item.vue | 26 +- .../{ => components}/form/src/form.type.ts | 0 packages/{ => components}/form/src/form.vue | 11 +- .../{ => components}/form/src/label-wrap.ts | 19 +- packages/components/form/style/css.ts | 2 + packages/components/form/style/index.ts | 2 + packages/components/head/style/css.ts | 2 + packages/components/head/style/index.ts | 2 + .../icon/__tests__/icon.spec.ts | 0 packages/{ => components}/icon/index.ts | 8 +- packages/{ => components}/icon/src/index.vue | 0 packages/components/icon/style/css.ts | 2 + packages/components/icon/style/index.ts | 2 + .../__tests__/image-viewer.spec.ts | 0 .../{ => components}/image-viewer/index.ts | 8 +- .../image-viewer/src/index.vue | 10 +- packages/components/image-viewer/style/css.ts | 2 + .../components/image-viewer/style/index.ts | 2 + .../image/__tests__/image.spec.ts | 2 +- packages/{ => components}/image/index.ts | 8 +- packages/{ => components}/image/src/index.vue | 14 +- packages/components/image/style/css.ts | 3 + packages/components/image/style/index.ts | 3 + packages/components/index.ts | 72 ++ .../__tests__/infinite-scroll.spec.ts | 0 packages/components/infinite-scroll/index.ts | 13 + .../infinite-scroll/src/index.ts | 5 +- .../components/infinite-scroll/style/css.ts | 2 + .../components/infinite-scroll/style/index.ts | 2 + .../__tests__/input-number.spec.ts | 0 .../{ => components}/input-number/index.ts | 8 +- .../input-number/src/index.vue | 15 +- packages/components/input-number/style/css.ts | 3 + .../components/input-number/style/index.ts | 3 + .../input/__tests__/input.spec.ts | 0 packages/{ => components}/input/index.ts | 8 +- .../input/src/calcTextareaHeight.ts | 6 +- packages/{ => components}/input/src/index.vue | 5 +- packages/components/input/style/css.ts | 2 + packages/components/input/style/index.ts | 2 + .../link/__tests__/link.spec.ts | 0 packages/{ => components}/link/index.ts | 8 +- packages/{ => components}/link/src/index.vue | 0 packages/components/link/style/css.ts | 2 + packages/components/link/style/index.ts | 2 + .../loading/__tests__/loading.spec.ts | 2 +- packages/components/loading/index.ts | 25 + .../loading/src/createLoadingComponent.ts | 18 +- .../{ => components}/loading/src/directive.ts | 16 +- .../{ => components}/loading/src/index.ts | 9 +- .../loading/src/loading.type.ts | 0 packages/components/loading/style/css.ts | 2 + packages/components/loading/style/index.ts | 2 + packages/components/main/style/css.ts | 2 + packages/components/main/style/index.ts | 2 + .../menu/__tests__/menu.spec.ts | 0 packages/components/menu/index.ts | 33 + .../menu/src/menu-collapse-transition.vue | 22 +- packages/{ => components}/menu/src/menu.ts | 4 +- packages/{ => components}/menu/src/menu.vue | 16 +- .../{ => components}/menu/src/menuItem.vue | 2 +- .../menu/src/menuItemGroup.vue | 3 +- .../{ => components}/menu/src/submenu.vue | 4 +- packages/{ => components}/menu/src/useMenu.ts | 6 +- .../{ => components}/menu/src/useMenuColor.ts | 1 + packages/components/menu/style/css.ts | 3 + packages/components/menu/style/index.ts | 3 + .../message-box/__tests__/message-box.spec.ts | 0 .../{ => components}/message-box/index.ts | 9 +- .../message-box/src/index.vue | 19 +- .../message-box/src/message-box.type.ts | 5 +- .../message-box/src/messageBox.ts | 6 +- packages/components/message-box/style/css.ts | 5 + .../components/message-box/style/index.ts | 5 + .../message/__tests__/message-manager.spec.ts | 0 .../message/__tests__/message.spec.ts | 2 +- packages/components/message/index.ts | 16 + .../{ => components}/message/src/index.vue | 9 +- .../{ => components}/message/src/message.ts | 0 .../{ => components}/message/src/types.ts | 0 packages/components/message/style/css.ts | 2 + packages/components/message/style/index.ts | 2 + .../__tests__/notification.spec.ts | 9 +- .../notification/__tests__/notify.spec.ts | 5 +- packages/components/notification/index.ts | 15 + .../notification/src/index.vue | 5 +- .../notification/src/notification.type.ts | 1 - .../notification/src/notify.ts | 2 +- packages/components/notification/style/css.ts | 2 + .../components/notification/style/index.ts | 2 + packages/components/option-group/style/css.ts | 2 + .../components/option-group/style/index.ts | 2 + packages/components/option/style/css.ts | 2 + packages/components/option/style/index.ts | 2 + .../overlay/__tests__/overlay.spec.ts | 0 packages/{ => components}/overlay/index.ts | 0 .../{ => components}/overlay/src/index.vue | 0 packages/components/overlay/style/css.ts | 2 + packages/components/overlay/style/index.ts | 2 + packages/components/package.json | 25 + .../page-header/__tests__/page-header.spec.ts | 0 .../{ => components}/page-header/index.ts | 9 +- .../page-header/src/index.vue | 2 +- packages/components/page-header/style/css.ts | 2 + .../components/page-header/style/index.ts | 2 + .../pagination/__tests__/pagination.spec.ts | 2 +- packages/components/pagination/index.ts | 15 + .../{ => components}/pagination/src/index.ts | 13 +- .../pagination/src/jumper.vue | 4 +- .../{ => components}/pagination/src/next.vue | 0 .../{ => components}/pagination/src/pager.vue | 0 .../pagination/src/pagination.ts | 4 +- .../{ => components}/pagination/src/prev.vue | 0 .../{ => components}/pagination/src/sizes.vue | 12 +- .../{ => components}/pagination/src/total.vue | 0 .../pagination/src/usePagination.ts | 2 +- packages/components/pagination/style/css.ts | 3 + packages/components/pagination/style/index.ts | 3 + .../popconfirm/__test__/popconfirm.spec.ts | 1 + packages/{ => components}/popconfirm/index.ts | 8 +- .../{ => components}/popconfirm/src/index.vue | 4 +- packages/components/popconfirm/style/css.ts | 3 + packages/components/popconfirm/style/index.ts | 3 + .../popover/__tests__/directive.spec.ts | 4 +- .../popover/__tests__/popover.spec.ts | 6 +- packages/components/popover/index.ts | 29 + .../{ => components}/popover/src/directive.ts | 3 +- .../{ => components}/popover/src/index.vue | 27 +- .../popover/src/usePopover.ts | 7 +- packages/components/popover/style/css.ts | 3 + packages/components/popover/style/index.ts | 3 + .../popper/__tests__/popper.spec.ts | 0 packages/{ => components}/popper/index.ts | 13 +- .../{ => components}/popper/src/index.vue | 5 +- .../popper/src/renderers/arrow.ts | 0 .../popper/src/renderers/index.ts | 0 .../popper/src/renderers/popper.ts | 0 .../popper/src/renderers/trigger.ts | 2 +- .../popper/src/use-popper/build-modifiers.ts | 0 .../popper/src/use-popper/defaults.ts | 7 +- .../popper/src/use-popper/index.ts | 9 +- .../popper/src/use-popper/popper-options.ts | 0 packages/components/popper/style/css.ts | 2 + packages/components/popper/style/index.ts | 2 + .../progress/__tests__/progress.spec.ts | 0 packages/{ => components}/progress/index.ts | 8 +- .../{ => components}/progress/src/index.vue | 8 +- packages/components/progress/style/css.ts | 2 + packages/components/progress/style/index.ts | 2 + .../radio/__tests__/radio.spec.ts | 2 +- packages/components/radio/index.ts | 28 + .../radio/src/radio-button.vue | 0 .../radio/src/radio-group.vue | 5 +- packages/{ => components}/radio/src/radio.vue | 1 + packages/{ => components}/radio/src/token.ts | 1 + .../{ => components}/radio/src/useRadio.ts | 8 +- packages/components/radio/style/css.ts | 2 + packages/components/radio/style/index.ts | 2 + .../rate/__tests__/rate.spec.ts | 0 packages/{ => components}/rate/index.ts | 8 +- packages/{ => components}/rate/src/index.vue | 6 +- packages/components/rate/style/css.ts | 2 + packages/components/rate/style/index.ts | 2 + .../result/__tests__/result.spec.ts | 0 packages/{ => components}/result/index.ts | 8 +- .../result/src/icon-error.vue | 0 .../{ => components}/result/src/icon-info.vue | 0 .../result/src/icon-success.vue | 0 .../result/src/icon-warning.vue | 0 .../{ => components}/result/src/index.vue | 2 + packages/components/result/style/css.ts | 2 + packages/components/result/style/index.ts | 2 + packages/components/row/index.ts | 14 + packages/{col => components/row}/src/row.ts | 0 packages/components/row/style/css.ts | 2 + packages/components/row/style/index.ts | 2 + .../scrollbar/__tests__/scrollbar.spec.ts | 0 packages/{ => components}/scrollbar/index.ts | 10 +- .../{ => components}/scrollbar/src/bar.vue | 5 +- .../{ => components}/scrollbar/src/index.vue | 7 +- .../{ => components}/scrollbar/src/util.ts | 0 packages/components/scrollbar/style/css.ts | 2 + packages/components/scrollbar/style/index.ts | 2 + .../select-v2/__tests__/select.spec.ts | 6 +- packages/{ => components}/select-v2/index.ts | 7 +- .../select-v2/src/defaults.ts | 1 + .../select-v2/src/group-item.vue | 0 .../select-v2/src/option-item.vue | 0 .../select-v2/src/select-dropdown.vue | 8 +- .../select-v2/src/select.types.ts | 0 .../{ => components}/select-v2/src/select.vue | 13 +- .../{ => components}/select-v2/src/token.ts | 13 +- .../select-v2/src/useSelect.ts | 10 +- .../{ => components}/select-v2/src/util.ts | 1 + packages/components/select-v2/style/css.ts | 9 + packages/components/select-v2/style/index.ts | 9 + .../select/__tests__/select.spec.ts | 4 +- packages/components/select/index.ts | 27 + .../select/src/option-group.vue | 0 .../{ => components}/select/src/option.vue | 0 .../select/src/select-dropdown.vue | 0 .../{ => components}/select/src/select.vue | 18 +- packages/{ => components}/select/src/token.ts | 0 .../{ => components}/select/src/useOption.ts | 0 .../{ => components}/select/src/useSelect.ts | 4 +- packages/components/select/style/css.ts | 9 + packages/components/select/style/index.ts | 9 + .../components/skeleton-item/style/css.ts | 2 + .../components/skeleton-item/style/index.ts | 2 + .../skeleton}/__tests__/skeleton-item.spec.ts | 2 +- .../skeleton/__tests__/skeleton.spec.ts | 0 packages/components/skeleton/index.ts | 22 + .../skeleton/src/image-placeholder.vue} | 0 .../{ => components}/skeleton/src/index.vue | 2 +- .../skeleton/src/item.vue} | 5 +- .../skeleton/src/types.ts} | 0 packages/components/skeleton/style/css.ts | 3 + packages/components/skeleton/style/index.ts | 3 + .../slider/__tests__/slider.spec.ts | 2 +- packages/{ => components}/slider/index.ts | 10 +- .../{ => components}/slider/src/button.vue | 4 +- .../{ => components}/slider/src/index.vue | 5 +- .../{ => components}/slider/src/marker.vue | 4 +- .../slider/src/slider.type.ts | 3 +- .../{ => components}/slider/src/useMarks.ts | 2 +- .../{ => components}/slider/src/useSlide.ts | 9 +- .../slider/src/useSliderButton.ts | 8 +- .../{ => components}/slider/src/useStops.ts | 6 +- packages/components/slider/style/css.ts | 4 + packages/components/slider/style/index.ts | 4 + .../space/__tests__/space.spec.ts | 2 +- packages/{ => components}/space/index.ts | 7 +- packages/{ => components}/space/src/index.ts | 0 packages/{ => components}/space/src/item.vue | 0 .../{ => components}/space/src/useSpace.ts | 1 + packages/components/space/style/css.ts | 2 + packages/components/space/style/index.ts | 2 + .../steps/__tests__/steps.spec.ts | 2 +- packages/components/steps/index.ts | 20 + packages/{ => components}/steps/src/index.vue | 1 + packages/{ => components}/steps/src/item.vue | 18 +- packages/components/steps/style/css.ts | 2 + packages/components/steps/style/index.ts | 2 + .../switch/__tests__/switch.spec.ts | 8 +- packages/{ => components}/switch/index.ts | 8 +- .../{ => components}/switch/src/index.vue | 4 +- packages/components/switch/style/css.ts | 2 + packages/components/switch/style/index.ts | 2 + packages/components/tab-pane/style/css.ts | 2 + packages/components/tab-pane/style/index.ts | 2 + packages/components/table-column/style/css.ts | 4 + .../components/table-column/style/index.ts | 4 + .../table/__tests__/table-column.spec.ts | 2 +- .../table/__tests__/table-test-common.ts | 0 .../table/__tests__/table.spec.ts | 6 +- packages/components/table/index.ts | 20 + packages/{ => components}/table/src/config.ts | 11 +- .../table/src/filter-panel.vue | 26 +- .../{ => components}/table/src/h-helper.ts | 3 +- .../table/src/layout-observer.ts | 5 +- .../table/src/store/current.ts | 8 +- .../table/src/store/expand.ts | 8 +- .../table/src/store/helper.ts | 10 +- .../{ => components}/table/src/store/index.ts | 8 +- .../{ => components}/table/src/store/tree.ts | 5 +- .../table/src/store/watcher.ts | 10 +- .../table/src/table-body/defaults.ts | 6 +- .../table/src/table-body/events-helper.ts | 7 +- .../table/src/table-body/index.ts | 9 +- .../table/src/table-body/render-helper.ts | 9 +- .../table/src/table-body/styles-helper.ts | 7 +- .../table/src/table-column/defaults.ts | 8 +- .../table/src/table-column/index.ts | 5 +- .../table/src/table-column/render-helper.ts | 5 +- .../table/src/table-column/watcher-helper.ts | 6 +- .../table/src/table-footer/index.ts | 5 +- .../table/src/table-footer/mapState-helper.ts | 3 +- .../table/src/table-footer/style-helper.ts | 7 +- .../table/src/table-header/event-helper.ts | 7 +- .../table/src/table-header/index.ts | 15 +- .../table/src/table-header/style.helper.ts | 7 +- .../table/src/table-header/utils-helper.ts | 7 +- .../table/src/table-layout.ts | 12 +- packages/{ => components}/table/src/table.vue | 15 +- .../table/src/table/defaults.ts | 8 +- .../table/src/table/style-helper.ts | 11 +- .../table/src/table/utils-helper.ts | 2 +- .../{ => components}/table/src/tableColumn.ts | 0 packages/{ => components}/table/src/util.ts | 10 +- packages/components/table/style/css.ts | 5 + packages/components/table/style/index.ts | 5 + .../tabs/__tests__/tabs.spec.ts | 4 +- packages/components/tabs/index.ts | 20 + .../{ => components}/tabs/src/tab-bar.vue | 16 +- .../{ => components}/tabs/src/tab-nav.vue | 199 ++++-- .../{ => components}/tabs/src/tab-pane.vue | 6 +- .../tabs.vue => components/tabs/src/tabs.ts} | 204 +++--- packages/components/tabs/src/token.ts | 49 ++ packages/components/tabs/style/css.ts | 2 + packages/components/tabs/style/index.ts | 2 + .../tag/__tests__/tag.spec.ts | 0 packages/{ => components}/tag/index.ts | 8 +- packages/{ => components}/tag/src/index.vue | 1 + packages/components/tag/style/css.ts | 2 + packages/components/tag/style/index.ts | 2 + .../time-picker/__tests__/time-picker.spec.ts | 6 +- .../{ => components}/time-picker/index.ts | 8 +- .../time-picker/src/common/constant.ts | 0 .../time-picker/src/common/date-utils.ts | 4 +- .../time-picker/src/common/picker.vue | 22 +- .../time-picker/src/common/props.ts | 5 +- .../time-picker-com/basic-time-spinner.vue | 8 +- .../src/time-picker-com/panel-time-pick.vue | 6 +- .../src/time-picker-com/panel-time-range.vue | 10 +- .../src/time-picker-com/useTimePicker.ts | 3 +- .../time-picker/src/time-picker.ts | 4 +- packages/components/time-picker/style/css.ts | 5 + .../components/time-picker/style/index.ts | 5 + .../time-select/__tests__/time-select.spec.ts | 8 +- .../{ => components}/time-select/index.ts | 8 +- .../time-select/src/time-select.vue | 5 +- packages/components/time-select/style/css.ts | 7 + .../components/time-select/style/index.ts | 7 + .../components/timeline-item/style/css.ts | 2 + .../components/timeline-item/style/index.ts | 2 + .../timeline/__tests__/timeline.spec.ts | 2 +- packages/components/timeline/index.ts | 20 + .../{ => components}/timeline/src/index.vue | 2 +- .../{ => components}/timeline/src/item.vue | 0 packages/components/timeline/style/css.ts | 2 + packages/components/timeline/style/index.ts | 2 + .../tooltip/__tests__/tooltip.spec.ts | 0 packages/components/tooltip/index.ts | 13 + .../{ => components}/tooltip/src/index.ts | 7 +- packages/components/tooltip/style/css.ts | 3 + packages/components/tooltip/style/index.ts | 3 + .../transfer/__tests__/transfer.spec.ts | 0 packages/{ => components}/transfer/index.ts | 10 +- .../{ => components}/transfer/src/index.vue | 11 +- .../transfer/src/transfer-panel.vue | 28 +- .../{ => components}/transfer/src/transfer.ts | 6 + .../{ => components}/transfer/src/useCheck.ts | 30 +- .../transfer/src/useCheckedChange.ts | 0 .../transfer/src/useComputedData.ts | 3 +- .../{ => components}/transfer/src/useMove.ts | 8 +- packages/components/transfer/style/css.ts | 6 + packages/components/transfer/style/index.ts | 6 + .../tree/__tests__/tree.spec.ts | 0 packages/{ => components}/tree/index.ts | 8 +- .../{ => components}/tree/src/model/node.ts | 4 +- .../tree/src/model/tree-store.ts | 3 +- .../tree/src/model/useDragNode.ts | 2 +- .../tree/src/model/useKeydown.ts | 5 +- .../src/model/useNodeExpandEventBroadcast.ts | 0 .../{ => components}/tree/src/model/util.ts | 2 +- .../tree/src/tree-node-content.vue | 6 +- .../{ => components}/tree/src/tree-node.vue | 11 +- .../{ => components}/tree/src/tree.type.ts | 3 +- packages/{ => components}/tree/src/tree.vue | 11 +- packages/components/tree/style/css.ts | 3 + packages/components/tree/style/index.ts | 3 + .../upload/__tests__/upload-dragger.spec.ts | 2 +- .../upload/__tests__/upload-list.spec.ts | 2 +- .../upload/__tests__/upload.spec.ts | 4 +- packages/{ => components}/upload/index.ts | 8 +- packages/{ => components}/upload/src/ajax.ts | 0 .../{ => components}/upload/src/index.vue | 7 +- .../upload/src/upload-dragger.vue | 0 .../upload/src/upload-list.vue | 2 +- .../upload/src/upload.type.ts | 0 .../{ => components}/upload/src/upload.vue | 3 +- .../upload/src/useHandlers.ts | 0 packages/components/upload/style/css.ts | 3 + packages/components/upload/style/index.ts | 3 + .../__tests__/dynamic-size-grid.spec.ts | 0 .../__tests__/dynamic-size-list.spec.ts | 0 .../__tests__/fixed-size-grid.spec.ts | 0 .../__tests__/fixed-size-list.spec.ts | 0 .../virtual-list/__tests__/scrollbar.spec.ts | 0 .../{ => components}/virtual-list/index.ts | 1 + .../virtual-list/setup-mock.ts | 0 .../virtual-list/src/builders/buildGrid.ts | 0 .../virtual-list/src/builders/buildList.ts | 0 .../src/components/dynamic-size-grid.ts | 0 .../src/components/dynamic-size-list.ts | 0 .../src/components/fixed-size-grid.ts | 0 .../src/components/fixed-size-list.ts | 0 .../virtual-list/src/components/scrollbar.ts | 4 +- .../virtual-list/src/defaults.ts | 0 .../virtual-list/src/hooks/useWheel.ts | 0 .../virtual-list/src/types.ts | 0 .../virtual-list/src/utils.ts | 3 +- packages/components/virtual-list/style/css.ts | 3 + .../components/virtual-list/style/index.ts | 3 + packages/config-provider/index.ts | 4 - packages/config-provider/package.json | 12 - packages/container/index.ts | 11 - packages/container/package.json | 12 - packages/container/src/aside.vue | 18 - packages/container/src/footer.vue | 18 - packages/container/src/header.vue | 18 - packages/date-picker/package.json | 12 - packages/descriptions-item/index.ts | 11 - packages/descriptions-item/package.json | 12 - packages/descriptions/index.ts | 11 - packages/descriptions/package.json | 12 - .../descriptions/src/descriptions.type.ts | 26 - packages/dialog/package.json | 12 - packages/dialog/src/dialog.ts | 14 - packages/directives/click-outside/index.ts | 9 +- packages/directives/gulpfile.ts | 57 ++ packages/directives/mousewheel/index.ts | 1 + packages/directives/package.json | 30 +- packages/directives/repeat-click/index.ts | 1 + packages/directives/tsconfig.json | 11 + packages/divider/package.json | 12 - packages/drawer/package.json | 12 - packages/dropdown-item/index.ts | 11 - packages/dropdown-item/package.json | 12 - packages/dropdown-menu/index.ts | 11 - packages/dropdown-menu/package.json | 12 - packages/dropdown/index.ts | 11 - packages/dropdown/package.json | 12 - packages/element-plus/component.ts | 131 ++++ packages/element-plus/components.ts | 89 --- packages/element-plus/composables.ts | 1 - packages/element-plus/defaults.ts | 8 + packages/element-plus/index.ts | 71 +- packages/element-plus/make-installer.ts | 42 ++ packages/element-plus/package.json | 116 +--- packages/element-plus/plugin.ts | 15 + packages/element-plus/plugins.ts | 6 - packages/empty/package.json | 12 - packages/footer/index.ts | 12 - packages/footer/package.json | 12 - packages/form-item/index.ts | 11 - packages/form-item/package.json | 12 - packages/form/index.ts | 14 - packages/form/package.json | 15 - packages/header/index.ts | 11 - packages/header/package.json | 12 - packages/hooks/__tests__/use-locale.spec.ts | 17 - packages/hooks/gulpfile.ts | 57 ++ packages/hooks/package.json | 33 +- packages/hooks/tsconfig.json | 11 + packages/hooks/use-focus/index.ts | 2 +- packages/hooks/use-locale/index.ts | 57 +- packages/hooks/use-migrating/index.ts | 4 +- packages/hooks/use-popper/index.ts | 14 +- packages/hooks/use-throttle-render/index.ts | 2 + packages/hooks/use-timeout/index.ts | 6 +- packages/icon/package.json | 12 - packages/image-viewer/package.json | 12 - packages/image/package.json | 12 - packages/infinite-scroll/index.ts | 10 - packages/infinite-scroll/package.json | 12 - packages/input-number/package.json | 12 - packages/input/package.json | 12 - packages/link/package.json | 12 - packages/loading/index.ts | 12 - packages/loading/package.json | 12 - packages/locale/gulpfile.ts | 72 ++ packages/locale/package.json | 29 +- packages/locale/tsconfig.json | 9 + packages/main/index.ts | 12 - packages/main/package.json | 12 - packages/menu-item-group/index.ts | 12 - packages/menu-item-group/package.json | 12 - packages/menu-item/index.ts | 12 - packages/menu-item/package.json | 12 - packages/menu/index.ts | 12 - packages/menu/package.json | 12 - packages/message-box/package.json | 12 - packages/message/index.ts | 10 - packages/message/package.json | 12 - packages/notification/index.ts | 10 - packages/notification/package.json | 12 - packages/option-group/index.ts | 11 - packages/option-group/package.json | 12 - packages/option/index.ts | 10 - packages/option/package.json | 12 - packages/overlay/package.json | 12 - packages/page-header/package.json | 12 - packages/pagination/index.ts | 10 - packages/pagination/package.json | 12 - packages/popconfirm/package.json | 12 - packages/popover/index.ts | 14 - packages/popover/package.json | 12 - packages/popper/package.json | 13 - packages/progress/package.json | 12 - packages/radio-button/index.ts | 11 - packages/radio-button/package.json | 12 - packages/radio-group/index.ts | 11 - packages/radio-group/package.json | 12 - packages/radio/index.ts | 11 - packages/radio/package.json | 12 - packages/rate/package.json | 12 - packages/result/package.json | 12 - packages/row/index.ts | 10 - packages/row/package.json | 12 - packages/scrollbar/package.json | 12 - packages/select-v2/package.json | 12 - packages/select-v2/src/useOption.ts | 111 --- packages/select/index.ts | 13 - packages/select/package.json | 12 - packages/skeleton-item/index.ts | 11 - packages/skeleton-item/package.json | 12 - packages/skeleton/index.ts | 11 - packages/skeleton/package.json | 12 - packages/slider/package.json | 12 - packages/space/package.json | 12 - packages/step/index.ts | 11 - packages/step/package.json | 12 - packages/steps/index.ts | 11 - packages/steps/package.json | 12 - packages/submenu/index.ts | 11 - packages/submenu/package.json | 12 - packages/switch/package.json | 12 - packages/tab-pane/index.ts | 11 - packages/tab-pane/package.json | 12 - packages/table-column/index.ts | 10 - packages/table-column/package.json | 12 - packages/table/index.ts | 11 - packages/table/package.json | 12 - packages/tabs/index.ts | 11 - packages/tabs/package.json | 12 - packages/tag/package.json | 12 - packages/test-utils/composite-click.ts | 1 + packages/test-utils/index.ts | 6 + packages/test-utils/make-scroll.ts | 2 +- packages/test-utils/package.json | 6 +- packages/theme-chalk/gulpfile.ts | 25 +- packages/theme-chalk/package.json | 26 +- packages/theme-chalk/src/autocomplete.scss | 3 - packages/theme-chalk/src/calendar.scss | 2 - packages/theme-chalk/src/cascader-panel.scss | 3 - packages/theme-chalk/src/cascader.scss | 5 - packages/theme-chalk/src/color-picker.scss | 2 - packages/theme-chalk/src/date-picker.scss | 5 +- packages/theme-chalk/src/descriptions.scss | 2 +- packages/theme-chalk/src/dialog.scss | 1 - packages/theme-chalk/src/drawer.scss | 1 - packages/theme-chalk/src/dropdown.scss | 2 - packages/theme-chalk/src/image.scss | 1 - packages/theme-chalk/src/index.scss | 167 ++--- packages/theme-chalk/src/input-number.scss | 1 - packages/theme-chalk/src/menu.scss | 1 - packages/theme-chalk/src/message-box.scss | 3 - packages/theme-chalk/src/pagination.scss | 1 - packages/theme-chalk/src/popconfirm.scss | 1 - packages/theme-chalk/src/popover.scss | 1 - .../theme-chalk/src/select-dropdown-v2.scss | 1 - packages/theme-chalk/src/select-dropdown.scss | 1 - packages/theme-chalk/src/select-v2.scss | 6 - packages/theme-chalk/src/select.scss | 6 - packages/theme-chalk/src/skeleton.scss | 1 - packages/theme-chalk/src/slider.scss | 3 - packages/theme-chalk/src/table-column.scss | 2 - packages/theme-chalk/src/table.scss | 3 - packages/theme-chalk/src/time-picker.scss | 3 - packages/theme-chalk/src/time-select.scss | 5 - packages/theme-chalk/src/tooltip.scss | 1 - packages/theme-chalk/src/transfer.scss | 5 +- packages/theme-chalk/src/tree.scss | 1 - packages/theme-chalk/src/upload.scss | 2 +- packages/theme-chalk/src/virtual-list.scss | 1 - packages/time-picker/package.json | 12 - packages/time-select/package.json | 12 - packages/timeline-item/index.ts | 11 - packages/timeline-item/package.json | 12 - packages/timeline/index.ts | 11 - packages/timeline/package.json | 12 - .../{form/src/token.ts => tokens/form.ts} | 8 +- packages/tokens/gulpfile.ts | 57 ++ packages/tokens/index.ts | 1 + packages/tokens/package.json | 34 + packages/tokens/tsconfig.json | 11 + packages/tooltip/index.ts | 11 - packages/tooltip/package.json | 12 - packages/transfer/package.json | 12 - packages/transition/index.ts | 9 - packages/transition/package.json | 15 - packages/tree/package.json | 12 - packages/upload/package.json | 12 - packages/utils/config.ts | 3 +- packages/utils/dom.ts | 2 +- packages/utils/gulpfile.ts | 48 ++ packages/utils/menu/menu-bar.ts | 3 +- packages/utils/package.json | 25 +- packages/utils/resize-event.ts | 2 + packages/utils/tsconfig.json | 11 + packages/utils/types.ts | 14 + packages/utils/util.ts | 12 +- packages/utils/vnode.ts | 2 +- packages/virtual-list/package.json | 12 - scripts/gc.sh | 2 +- scripts/monorepo.sh | 47 ++ tsconfig.dts.json | 23 + tsconfig.json | 37 +- typings/vue-shim.d.ts | 21 +- website/assets/styles/common.scss | 65 +- website/components/heading.vue | 45 ++ website/components/img.vue | 10 + website/components/link.vue | 118 ++++ website/demo-styles/index.scss | 2 +- website/docs/en-US/i18n.md | 322 ++------- website/docs/en-US/icon.md | 44 +- website/docs/en-US/installation.md | 85 ++- website/docs/en-US/quickstart.md | 506 ++++---------- website/docs/es/i18n.md | 326 ++------- website/docs/es/installation.md | 90 ++- website/docs/es/quickstart.md | 519 +++++--------- website/docs/fr-FR/i18n.md | 404 +++-------- website/docs/fr-FR/installation.md | 82 ++- website/docs/fr-FR/quickstart.md | 511 +++++--------- website/docs/jp/i18n.md | 328 ++------- website/docs/jp/installation.md | 78 ++- website/docs/jp/quickstart.md | 492 ++++--------- website/docs/zh-CN/config-provider.md | 98 ++- website/docs/zh-CN/custom-theme.md | 12 +- website/docs/zh-CN/i18n.md | 302 ++------ website/docs/zh-CN/installation.md | 75 +- website/docs/zh-CN/quickstart.md | 493 ++++--------- website/entry.js | 7 + website/md-loader/config.js | 44 +- website/md-loader/index.js | 8 +- website/md-loader/rules.js | 51 ++ website/pages/changelog.vue | 7 +- website/pages/component.vue | 15 +- yarn.lock | 654 +++++++++++++++++- 925 files changed, 7262 insertions(+), 7809 deletions(-) create mode 100644 .eslintignore create mode 100644 .markdownlint.json rename packages/theme-chalk/src/infiniteScroll.scss => .npmrc (100%) delete mode 100644 build/bincomp.js rename build/{build-helper.js => build-helper.ts} (59%) delete mode 100644 build/build-indices.js delete mode 100644 build/build-locale.js delete mode 100644 build/build-util.js delete mode 100644 build/build.component.js delete mode 100644 build/build.comps.js delete mode 100644 build/build.entry.js delete mode 100644 build/build.js delete mode 100644 build/common.js create mode 100644 build/components.ts create mode 100644 build/constants.ts create mode 100644 build/full-bundle.ts delete mode 100644 build/gen-dts.js create mode 100644 build/gen-dts.ts create mode 100644 build/gen-entry-dts.ts delete mode 100644 build/gen-type.js rename build/{gen-version.js => gen-version.ts} (60%) create mode 100644 build/get-deps.ts delete mode 100644 build/getCpus.js create mode 100644 build/getCpus.ts delete mode 100644 build/getPkgs.js create mode 100644 build/getPkgs.ts create mode 100644 build/gulp-rewriter.ts create mode 100644 build/gulpfile.ts create mode 100644 build/paths.ts delete mode 100644 build/rollup.config.bundle.js rename build/{rollup.config.js => rollup.config.ts} (98%) create mode 100644 build/rollup.plugin.entry.ts create mode 100644 build/size-reporter.ts create mode 100644 build/update-version.ts create mode 100644 build/worker.js delete mode 100644 packages/affix/package.json delete mode 100644 packages/alert/package.json delete mode 100644 packages/aside/index.ts delete mode 100644 packages/aside/package.json delete mode 100644 packages/autocomplete/package.json delete mode 100644 packages/avatar/package.json delete mode 100644 packages/backtop/package.json delete mode 100644 packages/badge/package.json delete mode 100644 packages/breadcrumb-item/index.ts delete mode 100644 packages/breadcrumb-item/package.json delete mode 100644 packages/breadcrumb/index.ts delete mode 100644 packages/breadcrumb/package.json delete mode 100644 packages/button-group/index.ts delete mode 100644 packages/button-group/package.json delete mode 100644 packages/button/index.ts delete mode 100644 packages/button/package.json delete mode 100644 packages/calendar/package.json delete mode 100644 packages/card/package.json delete mode 100644 packages/carousel-item/index.ts delete mode 100644 packages/carousel-item/package.json delete mode 100644 packages/carousel/index.ts delete mode 100644 packages/carousel/package.json delete mode 100644 packages/cascader-panel/package.json delete mode 100644 packages/cascader/package.json delete mode 100644 packages/check-tag/package.json delete mode 100644 packages/checkbox-button/index.ts delete mode 100644 packages/checkbox-button/package.json delete mode 100644 packages/checkbox-group/index.ts delete mode 100644 packages/checkbox-group/package.json delete mode 100644 packages/checkbox/index.ts delete mode 100644 packages/checkbox/package.json delete mode 100644 packages/col/package.json delete mode 100644 packages/collapse-item/index.ts delete mode 100644 packages/collapse-item/package.json delete mode 100644 packages/collapse-transition/index.ts delete mode 100644 packages/collapse-transition/package.json delete mode 100644 packages/collapse/index.ts delete mode 100644 packages/collapse/package.json delete mode 100644 packages/color-picker/package.json rename packages/{ => components}/affix/__tests__/affix.spec.ts (100%) rename packages/{ => components}/affix/index.ts (63%) rename packages/{ => components}/affix/src/index.vue (98%) create mode 100644 packages/components/affix/style/css.ts create mode 100644 packages/components/affix/style/index.ts rename packages/{ => components}/alert/__tests__/alert.spec.ts (100%) rename packages/{ => components}/alert/index.ts (63%) rename packages/{ => components}/alert/src/index.vue (96%) create mode 100644 packages/components/alert/style/css.ts create mode 100644 packages/components/alert/style/index.ts create mode 100644 packages/components/aside/style/css.ts create mode 100644 packages/components/aside/style/index.ts rename packages/{ => components}/autocomplete/__tests__/autocomplete.spec.ts (100%) rename packages/{ => components}/autocomplete/index.ts (68%) rename packages/{ => components}/autocomplete/src/index.vue (98%) create mode 100644 packages/components/autocomplete/style/css.ts create mode 100644 packages/components/autocomplete/style/index.ts rename packages/{ => components}/avatar/__tests__/avatar.spec.ts (99%) rename packages/{ => components}/avatar/index.ts (72%) rename packages/{ => components}/avatar/src/index.vue (93%) create mode 100644 packages/components/avatar/style/css.ts create mode 100644 packages/components/avatar/style/index.ts rename packages/{ => components}/backtop/__tests__/backtop.spec.ts (100%) rename packages/{ => components}/backtop/index.ts (71%) rename packages/{ => components}/backtop/src/index.vue (100%) create mode 100644 packages/components/backtop/style/css.ts create mode 100644 packages/components/backtop/style/index.ts rename packages/{ => components}/badge/__tests__/badge.spec.ts (100%) rename packages/{ => components}/badge/index.ts (72%) rename packages/{ => components}/badge/src/index.vue (100%) create mode 100644 packages/components/badge/style/css.ts create mode 100644 packages/components/badge/style/index.ts create mode 100644 packages/components/base/style/css.ts create mode 100644 packages/components/base/style/index.ts create mode 100644 packages/components/breadcrumb-item/style/css.ts create mode 100644 packages/components/breadcrumb-item/style/index.ts rename packages/{ => components}/breadcrumb/__tests__/breadcrumb.spec.ts (100%) create mode 100644 packages/components/breadcrumb/index.ts rename packages/{ => components}/breadcrumb/src/breadcrumb.ts (100%) rename packages/{ => components}/breadcrumb/src/index.vue (100%) rename packages/{ => components}/breadcrumb/src/item.vue (100%) create mode 100644 packages/components/breadcrumb/style/css.ts create mode 100644 packages/components/breadcrumb/style/index.ts create mode 100644 packages/components/button-group/style/css.ts create mode 100644 packages/components/button-group/style/index.ts rename packages/{ => components}/button/__tests__/button.spec.ts (100%) create mode 100644 packages/components/button/index.ts rename packages/{ => components}/button/src/button-group.vue (100%) rename packages/{ => components}/button/src/button.vue (87%) create mode 100644 packages/components/button/style/css.ts create mode 100644 packages/components/button/style/index.ts rename packages/{ => components}/calendar/__tests__/calendar.spec.ts (100%) rename packages/{ => components}/calendar/index.ts (71%) rename packages/{ => components}/calendar/src/date-table.vue (98%) rename packages/{ => components}/calendar/src/index.vue (97%) create mode 100644 packages/components/calendar/style/css.ts create mode 100644 packages/components/calendar/style/index.ts rename packages/{ => components}/card/__tests__/card.spec.ts (100%) rename packages/{ => components}/card/index.ts (73%) rename packages/{ => components}/card/src/index.vue (100%) create mode 100644 packages/components/card/style/css.ts create mode 100644 packages/components/card/style/index.ts create mode 100644 packages/components/carousel-item/style/css.ts create mode 100644 packages/components/carousel-item/style/index.ts rename packages/{ => components}/carousel/__tests__/carousel.spec.ts (99%) create mode 100644 packages/components/carousel/index.ts rename packages/{ => components}/carousel/src/carousel.ts (100%) rename packages/{ => components}/carousel/src/item.vue (96%) rename packages/{ => components}/carousel/src/main.vue (99%) create mode 100644 packages/components/carousel/style/css.ts create mode 100644 packages/components/carousel/style/index.ts rename packages/{ => components}/cascader-panel/__tests__/cascader-panel.spec.ts (100%) rename packages/{ => components}/cascader-panel/index.ts (72%) rename packages/{ => components}/cascader-panel/src/config.ts (87%) rename packages/{ => components}/cascader-panel/src/index.vue (97%) rename packages/{ => components}/cascader-panel/src/menu.vue (94%) create mode 100644 packages/components/cascader-panel/src/node-content.ts rename packages/{ => components}/cascader-panel/src/node.ts (78%) rename packages/{ => components}/cascader-panel/src/node.vue (89%) rename packages/{ => components}/cascader-panel/src/store.ts (96%) rename packages/{ => components}/cascader-panel/src/types.ts (97%) rename packages/{ => components}/cascader-panel/src/utils.ts (92%) create mode 100644 packages/components/cascader-panel/style/css.ts create mode 100644 packages/components/cascader-panel/style/index.ts rename packages/{ => components}/cascader/__tests__/cascader.spec.ts (100%) rename packages/{ => components}/cascader/index.ts (70%) rename packages/{ => components}/cascader/src/index.vue (97%) create mode 100644 packages/components/cascader/style/css.ts create mode 100644 packages/components/cascader/style/index.ts rename packages/{ => components}/check-tag/__tests__/check-tag.spec.ts (100%) rename packages/{ => components}/check-tag/index.ts (71%) rename packages/{ => components}/check-tag/src/index.vue (100%) create mode 100644 packages/components/check-tag/style/css.ts create mode 100644 packages/components/check-tag/style/index.ts create mode 100644 packages/components/checkbox-button/style/css.ts create mode 100644 packages/components/checkbox-button/style/index.ts create mode 100644 packages/components/checkbox-group/style/css.ts create mode 100644 packages/components/checkbox-group/style/index.ts rename packages/{ => components}/checkbox/__tests__/checkbox.spec.ts (100%) create mode 100644 packages/components/checkbox/index.ts rename packages/{ => components}/checkbox/src/checkbox-button.vue (78%) rename packages/{ => components}/checkbox/src/checkbox-group.vue (96%) rename packages/{ => components}/checkbox/src/checkbox.type.ts (58%) rename packages/{ => components}/checkbox/src/checkbox.vue (96%) rename packages/{ => components}/checkbox/src/useCheckbox.ts (79%) create mode 100644 packages/components/checkbox/style/css.ts create mode 100644 packages/components/checkbox/style/index.ts rename packages/{ => components}/col/__tests__/layout.spec.ts (98%) rename packages/{ => components}/col/index.ts (52%) rename packages/{ => components}/col/src/col.ts (100%) create mode 100644 packages/components/col/style/css.ts create mode 100644 packages/components/col/style/index.ts create mode 100644 packages/components/collapse-item/style/css.ts create mode 100644 packages/components/collapse-item/style/index.ts create mode 100644 packages/components/collapse-transition/index.ts rename packages/{transition/collapse-transition/index.vue => components/collapse-transition/src/collapse-transition.vue} (100%) create mode 100644 packages/components/collapse-transition/style/css.ts create mode 100644 packages/components/collapse-transition/style/index.ts rename packages/{ => components}/collapse/__tests__/collapse.spec.ts (100%) create mode 100644 packages/components/collapse/index.ts rename packages/{ => components}/collapse/src/collapse-item.vue (97%) rename packages/{ => components}/collapse/src/collapse.ts (100%) rename packages/{ => components}/collapse/src/collapse.vue (100%) create mode 100644 packages/components/collapse/style/css.ts create mode 100644 packages/components/collapse/style/index.ts rename packages/{ => components}/color-picker/__tests__/color-picker.spec.ts (99%) rename packages/{ => components}/color-picker/index.ts (61%) rename packages/{ => components}/color-picker/src/color.ts (100%) rename packages/{ => components}/color-picker/src/components/alpha-slider.vue (98%) rename packages/{ => components}/color-picker/src/components/hue-slider.vue (96%) rename packages/{ => components}/color-picker/src/components/predefine.vue (88%) rename packages/{ => components}/color-picker/src/components/sv-panel.vue (99%) rename packages/{ => components}/color-picker/src/draggable.ts (100%) rename packages/{ => components}/color-picker/src/index.vue (95%) create mode 100644 packages/components/color-picker/src/useOption.ts create mode 100644 packages/components/color-picker/style/css.ts create mode 100644 packages/components/color-picker/style/index.ts rename packages/{ => components}/config-provider/__tests__/config-provider.spec.ts (100%) rename packages/{ => components}/config-provider/config-provider.ts (100%) create mode 100644 packages/components/config-provider/index.ts create mode 100644 packages/components/config-provider/style/css.ts create mode 100644 packages/components/config-provider/style/index.ts rename packages/{ => components}/container/__tests__/container.spec.ts (99%) create mode 100644 packages/components/container/index.ts create mode 100644 packages/components/container/src/aside.vue rename packages/{ => components}/container/src/container.vue (90%) create mode 100644 packages/components/container/src/footer.vue create mode 100644 packages/components/container/src/header.vue rename packages/{ => components}/container/src/main.vue (100%) create mode 100644 packages/components/container/style/css.ts create mode 100644 packages/components/container/style/index.ts rename packages/{ => components}/date-picker/__tests__/date-picker.spec.ts (99%) rename packages/{ => components}/date-picker/__tests__/date-time-picker.spec.ts (100%) rename packages/{ => components}/date-picker/index.ts (51%) rename packages/{ => components}/date-picker/src/date-picker-com/basic-date-table.vue (99%) rename packages/{ => components}/date-picker/src/date-picker-com/basic-month-table.vue (96%) rename packages/{ => components}/date-picker/src/date-picker-com/basic-year-table.vue (93%) rename packages/{ => components}/date-picker/src/date-picker-com/panel-date-pick.vue (97%) rename packages/{ => components}/date-picker/src/date-picker-com/panel-date-range.vue (98%) rename packages/{ => components}/date-picker/src/date-picker-com/panel-month-range.vue (98%) rename packages/{ => components}/date-picker/src/date-picker.ts (92%) rename packages/{ => components}/date-picker/src/date-picker.type.ts (98%) create mode 100644 packages/components/date-picker/style/css.ts create mode 100644 packages/components/date-picker/style/index.ts create mode 100644 packages/components/descriptions-item/style/css.ts create mode 100644 packages/components/descriptions-item/style/index.ts rename packages/{ => components}/descriptions/__tests__/descriptions.spec.ts (100%) create mode 100644 packages/components/descriptions/index.ts rename packages/{ => components}/descriptions/src/description-item.ts (100%) rename packages/{ => components}/descriptions/src/descriptions-cell.ts (100%) rename packages/{ => components}/descriptions/src/descriptions-row.vue (100%) create mode 100644 packages/components/descriptions/src/descriptions.type.ts rename packages/{ => components}/descriptions/src/index.vue (98%) rename packages/{ => components}/descriptions/src/token.ts (50%) create mode 100644 packages/components/descriptions/style/css.ts create mode 100644 packages/components/descriptions/style/index.ts rename packages/{ => components}/dialog/__tests__/dialog.spec.ts (100%) rename packages/{ => components}/dialog/index.ts (55%) rename packages/{ => components}/dialog/src/index.vue (56%) rename packages/{ => components}/dialog/src/useDialog.ts (70%) create mode 100644 packages/components/dialog/style/css.ts create mode 100644 packages/components/dialog/style/index.ts rename packages/{ => components}/divider/__tests__/divider.spec.ts (100%) rename packages/{ => components}/divider/index.ts (62%) rename packages/{ => components}/divider/src/index.vue (91%) create mode 100644 packages/components/divider/style/css.ts create mode 100644 packages/components/divider/style/index.ts rename packages/{ => components}/drawer/__tests__/drawer.spec.ts (100%) rename packages/{ => components}/drawer/index.ts (63%) rename packages/{ => components}/drawer/src/index.vue (71%) create mode 100644 packages/components/drawer/style/css.ts create mode 100644 packages/components/drawer/style/index.ts create mode 100644 packages/components/dropdown-item/style/css.ts create mode 100644 packages/components/dropdown-item/style/index.ts create mode 100644 packages/components/dropdown-menu/style/css.ts create mode 100644 packages/components/dropdown-menu/style/index.ts rename packages/{ => components}/dropdown/__tests__/dropdown.spec.tsx (100%) create mode 100644 packages/components/dropdown/index.ts rename packages/{ => components}/dropdown/src/dropdown-item.vue (100%) rename packages/{ => components}/dropdown/src/dropdown-menu.vue (100%) rename packages/{ => components}/dropdown/src/dropdown.ts (85%) rename packages/{ => components}/dropdown/src/dropdown.vue (95%) rename packages/{ => components}/dropdown/src/useDropdown.ts (98%) create mode 100644 packages/components/dropdown/style/css.ts create mode 100644 packages/components/dropdown/style/index.ts rename packages/{ => components}/empty/__tests__/empty.spec.ts (100%) rename packages/{ => components}/empty/index.ts (63%) rename packages/{ => components}/empty/src/img-empty.vue (100%) rename packages/{ => components}/empty/src/index.vue (100%) create mode 100644 packages/components/empty/style/css.ts create mode 100644 packages/components/empty/style/index.ts create mode 100644 packages/components/footer/style/css.ts create mode 100644 packages/components/footer/style/index.ts create mode 100644 packages/components/form-item/style/css.ts create mode 100644 packages/components/form-item/style/index.ts rename packages/{ => components}/form/__tests__/form.spec.ts (99%) create mode 100644 packages/components/form/index.ts rename packages/{ => components}/form/src/form-item.vue (95%) rename packages/{ => components}/form/src/form.type.ts (100%) rename packages/{ => components}/form/src/form.vue (96%) rename packages/{ => components}/form/src/label-wrap.ts (90%) create mode 100644 packages/components/form/style/css.ts create mode 100644 packages/components/form/style/index.ts create mode 100644 packages/components/head/style/css.ts create mode 100644 packages/components/head/style/index.ts rename packages/{ => components}/icon/__tests__/icon.spec.ts (100%) rename packages/{ => components}/icon/index.ts (63%) rename packages/{ => components}/icon/src/index.vue (100%) create mode 100644 packages/components/icon/style/css.ts create mode 100644 packages/components/icon/style/index.ts rename packages/{ => components}/image-viewer/__tests__/image-viewer.spec.ts (100%) rename packages/{ => components}/image-viewer/index.ts (61%) rename packages/{ => components}/image-viewer/src/index.vue (99%) create mode 100644 packages/components/image-viewer/style/css.ts create mode 100644 packages/components/image-viewer/style/index.ts rename packages/{ => components}/image/__tests__/image.spec.ts (97%) rename packages/{ => components}/image/index.ts (63%) rename packages/{ => components}/image/src/index.vue (95%) create mode 100644 packages/components/image/style/css.ts create mode 100644 packages/components/image/style/index.ts create mode 100644 packages/components/index.ts rename packages/{ => components}/infinite-scroll/__tests__/infinite-scroll.spec.ts (100%) create mode 100644 packages/components/infinite-scroll/index.ts rename packages/{ => components}/infinite-scroll/src/index.ts (99%) create mode 100644 packages/components/infinite-scroll/style/css.ts create mode 100644 packages/components/infinite-scroll/style/index.ts rename packages/{ => components}/input-number/__tests__/input-number.spec.ts (100%) rename packages/{ => components}/input-number/index.ts (61%) rename packages/{ => components}/input-number/src/index.vue (96%) create mode 100644 packages/components/input-number/style/css.ts create mode 100644 packages/components/input-number/style/index.ts rename packages/{ => components}/input/__tests__/input.spec.ts (100%) rename packages/{ => components}/input/index.ts (63%) rename packages/{ => components}/input/src/calcTextareaHeight.ts (95%) rename packages/{ => components}/input/src/index.vue (99%) create mode 100644 packages/components/input/style/css.ts create mode 100644 packages/components/input/style/index.ts rename packages/{ => components}/link/__tests__/link.spec.ts (100%) rename packages/{ => components}/link/index.ts (63%) rename packages/{ => components}/link/src/index.vue (100%) create mode 100644 packages/components/link/style/css.ts create mode 100644 packages/components/link/style/index.ts rename packages/{ => components}/loading/__tests__/loading.spec.ts (100%) create mode 100644 packages/components/loading/index.ts rename packages/{ => components}/loading/src/createLoadingComponent.ts (93%) rename packages/{ => components}/loading/src/directive.ts (76%) rename packages/{ => components}/loading/src/index.ts (97%) rename packages/{ => components}/loading/src/loading.type.ts (100%) create mode 100644 packages/components/loading/style/css.ts create mode 100644 packages/components/loading/style/index.ts create mode 100644 packages/components/main/style/css.ts create mode 100644 packages/components/main/style/index.ts rename packages/{ => components}/menu/__tests__/menu.spec.ts (100%) create mode 100644 packages/components/menu/index.ts rename packages/{ => components}/menu/src/menu-collapse-transition.vue (71%) rename packages/{ => components}/menu/src/menu.ts (96%) rename packages/{ => components}/menu/src/menu.vue (95%) rename packages/{ => components}/menu/src/menuItem.vue (98%) rename packages/{ => components}/menu/src/menuItemGroup.vue (95%) rename packages/{ => components}/menu/src/submenu.vue (99%) rename packages/{ => components}/menu/src/useMenu.ts (89%) rename packages/{ => components}/menu/src/useMenuColor.ts (99%) create mode 100644 packages/components/menu/style/css.ts create mode 100644 packages/components/menu/style/index.ts rename packages/{ => components}/message-box/__tests__/message-box.spec.ts (100%) rename packages/{ => components}/message-box/index.ts (65%) rename packages/{ => components}/message-box/src/index.vue (96%) rename packages/{ => components}/message-box/src/message-box.type.ts (97%) rename packages/{ => components}/message-box/src/messageBox.ts (98%) create mode 100644 packages/components/message-box/style/css.ts create mode 100644 packages/components/message-box/style/index.ts rename packages/{ => components}/message/__tests__/message-manager.spec.ts (100%) rename packages/{ => components}/message/__tests__/message.spec.ts (100%) create mode 100644 packages/components/message/index.ts rename packages/{ => components}/message/src/index.vue (92%) rename packages/{ => components}/message/src/message.ts (100%) rename packages/{ => components}/message/src/types.ts (100%) create mode 100644 packages/components/message/style/css.ts create mode 100644 packages/components/message/style/index.ts rename packages/{ => components}/notification/__tests__/notification.spec.ts (99%) rename packages/{ => components}/notification/__tests__/notify.spec.ts (98%) create mode 100644 packages/components/notification/index.ts rename packages/{ => components}/notification/src/index.vue (97%) rename packages/{ => components}/notification/src/notification.type.ts (99%) rename packages/{ => components}/notification/src/notify.ts (100%) create mode 100644 packages/components/notification/style/css.ts create mode 100644 packages/components/notification/style/index.ts create mode 100644 packages/components/option-group/style/css.ts create mode 100644 packages/components/option-group/style/index.ts create mode 100644 packages/components/option/style/css.ts create mode 100644 packages/components/option/style/index.ts rename packages/{ => components}/overlay/__tests__/overlay.spec.ts (100%) rename packages/{ => components}/overlay/index.ts (100%) rename packages/{ => components}/overlay/src/index.vue (100%) create mode 100644 packages/components/overlay/style/css.ts create mode 100644 packages/components/overlay/style/index.ts create mode 100644 packages/components/package.json rename packages/{ => components}/page-header/__tests__/page-header.spec.ts (100%) rename packages/{ => components}/page-header/index.ts (61%) rename packages/{ => components}/page-header/src/index.vue (97%) create mode 100644 packages/components/page-header/style/css.ts create mode 100644 packages/components/page-header/style/index.ts rename packages/{ => components}/pagination/__tests__/pagination.spec.ts (100%) create mode 100644 packages/components/pagination/index.ts rename packages/{ => components}/pagination/src/index.ts (97%) rename packages/{ => components}/pagination/src/jumper.vue (92%) rename packages/{ => components}/pagination/src/next.vue (100%) rename packages/{ => components}/pagination/src/pager.vue (100%) rename packages/{ => components}/pagination/src/pagination.ts (87%) rename packages/{ => components}/pagination/src/prev.vue (100%) rename packages/{ => components}/pagination/src/sizes.vue (89%) rename packages/{ => components}/pagination/src/total.vue (100%) rename packages/{ => components}/pagination/src/usePagination.ts (85%) create mode 100644 packages/components/pagination/style/css.ts create mode 100644 packages/components/pagination/style/index.ts rename packages/{ => components}/popconfirm/__test__/popconfirm.spec.ts (99%) rename packages/{ => components}/popconfirm/index.ts (61%) rename packages/{ => components}/popconfirm/src/index.vue (95%) create mode 100644 packages/components/popconfirm/style/css.ts create mode 100644 packages/components/popconfirm/style/index.ts rename packages/{ => components}/popover/__tests__/directive.spec.ts (100%) rename packages/{ => components}/popover/__tests__/popover.spec.ts (97%) create mode 100644 packages/components/popover/index.ts rename packages/{ => components}/popover/src/directive.ts (99%) rename packages/{ => components}/popover/src/index.vue (87%) rename packages/{ => components}/popover/src/usePopover.ts (85%) create mode 100644 packages/components/popover/style/css.ts create mode 100644 packages/components/popover/style/index.ts rename packages/{ => components}/popper/__tests__/popper.spec.ts (100%) rename packages/{ => components}/popper/index.ts (55%) rename packages/{ => components}/popper/src/index.vue (99%) rename packages/{ => components}/popper/src/renderers/arrow.ts (100%) rename packages/{ => components}/popper/src/renderers/index.ts (100%) rename packages/{ => components}/popper/src/renderers/popper.ts (100%) rename packages/{ => components}/popper/src/renderers/trigger.ts (100%) rename packages/{ => components}/popper/src/use-popper/build-modifiers.ts (100%) rename packages/{ => components}/popper/src/use-popper/defaults.ts (95%) rename packages/{ => components}/popper/src/use-popper/index.ts (97%) rename packages/{ => components}/popper/src/use-popper/popper-options.ts (100%) create mode 100644 packages/components/popper/style/css.ts create mode 100644 packages/components/popper/style/index.ts rename packages/{ => components}/progress/__tests__/progress.spec.ts (100%) rename packages/{ => components}/progress/index.ts (62%) rename packages/{ => components}/progress/src/index.vue (96%) create mode 100644 packages/components/progress/style/css.ts create mode 100644 packages/components/progress/style/index.ts rename packages/{ => components}/radio/__tests__/radio.spec.ts (100%) create mode 100644 packages/components/radio/index.ts rename packages/{ => components}/radio/src/radio-button.vue (100%) rename packages/{ => components}/radio/src/radio-group.vue (94%) rename packages/{ => components}/radio/src/radio.vue (98%) rename packages/{ => components}/radio/src/token.ts (87%) rename packages/{ => components}/radio/src/useRadio.ts (89%) create mode 100644 packages/components/radio/style/css.ts create mode 100644 packages/components/radio/style/index.ts rename packages/{ => components}/rate/__tests__/rate.spec.ts (100%) rename packages/{ => components}/rate/index.ts (63%) rename packages/{ => components}/rate/src/index.vue (98%) create mode 100644 packages/components/rate/style/css.ts create mode 100644 packages/components/rate/style/index.ts rename packages/{ => components}/result/__tests__/result.spec.ts (100%) rename packages/{ => components}/result/index.ts (63%) rename packages/{ => components}/result/src/icon-error.vue (100%) rename packages/{ => components}/result/src/icon-info.vue (100%) rename packages/{ => components}/result/src/icon-success.vue (100%) rename packages/{ => components}/result/src/icon-warning.vue (100%) rename packages/{ => components}/result/src/index.vue (96%) create mode 100644 packages/components/result/style/css.ts create mode 100644 packages/components/result/style/index.ts create mode 100644 packages/components/row/index.ts rename packages/{col => components/row}/src/row.ts (100%) create mode 100644 packages/components/row/style/css.ts create mode 100644 packages/components/row/style/index.ts rename packages/{ => components}/scrollbar/__tests__/scrollbar.spec.ts (100%) rename packages/{ => components}/scrollbar/index.ts (57%) rename packages/{ => components}/scrollbar/src/bar.vue (97%) rename packages/{ => components}/scrollbar/src/index.vue (99%) rename packages/{ => components}/scrollbar/src/util.ts (100%) create mode 100644 packages/components/scrollbar/style/css.ts create mode 100644 packages/components/scrollbar/style/index.ts rename packages/{ => components}/select-v2/__tests__/select.spec.ts (99%) rename packages/{ => components}/select-v2/index.ts (59%) rename packages/{ => components}/select-v2/src/defaults.ts (96%) rename packages/{ => components}/select-v2/src/group-item.vue (100%) rename packages/{ => components}/select-v2/src/option-item.vue (100%) rename packages/{ => components}/select-v2/src/select-dropdown.vue (95%) rename packages/{ => components}/select-v2/src/select.types.ts (100%) rename packages/{ => components}/select-v2/src/select.vue (97%) rename packages/{ => components}/select-v2/src/token.ts (59%) rename packages/{ => components}/select-v2/src/useSelect.ts (99%) rename packages/{ => components}/select-v2/src/util.ts (99%) create mode 100644 packages/components/select-v2/style/css.ts create mode 100644 packages/components/select-v2/style/index.ts rename packages/{ => components}/select/__tests__/select.spec.ts (100%) create mode 100644 packages/components/select/index.ts rename packages/{ => components}/select/src/option-group.vue (100%) rename packages/{ => components}/select/src/option.vue (100%) rename packages/{ => components}/select/src/select-dropdown.vue (100%) rename packages/{ => components}/select/src/select.vue (97%) rename packages/{ => components}/select/src/token.ts (100%) rename packages/{ => components}/select/src/useOption.ts (100%) rename packages/{ => components}/select/src/useSelect.ts (99%) create mode 100644 packages/components/select/style/css.ts create mode 100644 packages/components/select/style/index.ts create mode 100644 packages/components/skeleton-item/style/css.ts create mode 100644 packages/components/skeleton-item/style/index.ts rename packages/{skeleton-item => components/skeleton}/__tests__/skeleton-item.spec.ts (91%) rename packages/{ => components}/skeleton/__tests__/skeleton.spec.ts (100%) create mode 100644 packages/components/skeleton/index.ts rename packages/{skeleton-item/src/img-placeholder.vue => components/skeleton/src/image-placeholder.vue} (100%) rename packages/{ => components}/skeleton/src/index.vue (96%) rename packages/{skeleton-item/src/index.vue => components/skeleton/src/item.vue} (83%) rename packages/{skeleton-item/src/constants.ts => components/skeleton/src/types.ts} (100%) create mode 100644 packages/components/skeleton/style/css.ts create mode 100644 packages/components/skeleton/style/index.ts rename packages/{ => components}/slider/__tests__/slider.spec.ts (100%) rename packages/{ => components}/slider/index.ts (56%) rename packages/{ => components}/slider/src/button.vue (97%) rename packages/{ => components}/slider/src/index.vue (98%) rename packages/{ => components}/slider/src/marker.vue (85%) rename packages/{ => components}/slider/src/slider.type.ts (97%) rename packages/{ => components}/slider/src/useMarks.ts (89%) rename packages/{ => components}/slider/src/useSlide.ts (93%) rename packages/{ => components}/slider/src/useSliderButton.ts (96%) rename packages/{ => components}/slider/src/useStops.ts (89%) create mode 100644 packages/components/slider/style/css.ts create mode 100644 packages/components/slider/style/index.ts rename packages/{ => components}/space/__tests__/space.spec.ts (100%) rename packages/{ => components}/space/index.ts (51%) rename packages/{ => components}/space/src/index.ts (100%) rename packages/{ => components}/space/src/item.vue (100%) rename packages/{ => components}/space/src/useSpace.ts (98%) create mode 100644 packages/components/space/style/css.ts create mode 100644 packages/components/space/style/index.ts rename packages/{ => components}/steps/__tests__/steps.spec.ts (100%) create mode 100644 packages/components/steps/index.ts rename packages/{ => components}/steps/src/index.vue (99%) rename packages/{ => components}/steps/src/item.vue (96%) create mode 100644 packages/components/steps/style/css.ts create mode 100644 packages/components/steps/style/index.ts rename packages/{ => components}/switch/__tests__/switch.spec.ts (98%) rename packages/{ => components}/switch/index.ts (63%) rename packages/{ => components}/switch/src/index.vue (98%) create mode 100644 packages/components/switch/style/css.ts create mode 100644 packages/components/switch/style/index.ts create mode 100644 packages/components/tab-pane/style/css.ts create mode 100644 packages/components/tab-pane/style/index.ts create mode 100644 packages/components/table-column/style/css.ts create mode 100644 packages/components/table-column/style/index.ts rename packages/{ => components}/table/__tests__/table-column.spec.ts (100%) rename packages/{ => components}/table/__tests__/table-test-common.ts (100%) rename packages/{ => components}/table/__tests__/table.spec.ts (99%) create mode 100644 packages/components/table/index.ts rename packages/{ => components}/table/src/config.ts (95%) rename packages/{ => components}/table/src/filter-panel.vue (91%) rename packages/{ => components}/table/src/h-helper.ts (85%) rename packages/{ => components}/table/src/layout-observer.ts (95%) rename packages/{ => components}/table/src/store/current.ts (92%) rename packages/{ => components}/table/src/store/expand.ts (92%) rename packages/{ => components}/table/src/store/helper.ts (92%) rename packages/{ => components}/table/src/store/index.ts (96%) rename packages/{ => components}/table/src/store/tree.ts (98%) rename packages/{ => components}/table/src/store/watcher.ts (98%) rename packages/{ => components}/table/src/table-body/defaults.ts (83%) rename packages/{ => components}/table/src/table-body/events-helper.ts (95%) rename packages/{ => components}/table/src/table-body/index.ts (95%) rename packages/{ => components}/table/src/table-body/render-helper.ts (97%) rename packages/{ => components}/table/src/table-body/styles-helper.ts (96%) rename packages/{ => components}/table/src/table-column/defaults.ts (94%) rename packages/{ => components}/table/src/table-column/index.ts (97%) rename packages/{ => components}/table/src/table-column/render-helper.ts (97%) rename packages/{ => components}/table/src/table-column/watcher-helper.ts (96%) rename packages/{ => components}/table/src/table-footer/index.ts (95%) rename packages/{ => components}/table/src/table-footer/mapState-helper.ts (94%) rename packages/{ => components}/table/src/table-footer/style-helper.ts (92%) rename packages/{ => components}/table/src/table-header/event-helper.ts (97%) rename packages/{ => components}/table/src/table-header/index.ts (97%) rename packages/{ => components}/table/src/table-header/style.helper.ts (95%) rename packages/{ => components}/table/src/table-header/utils-helper.ts (93%) rename packages/{ => components}/table/src/table-layout.ts (97%) rename packages/{ => components}/table/src/table.vue (98%) rename packages/{ => components}/table/src/table/defaults.ts (95%) rename packages/{ => components}/table/src/table/style-helper.ts (98%) rename packages/{ => components}/table/src/table/utils-helper.ts (96%) rename packages/{ => components}/table/src/tableColumn.ts (100%) rename packages/{ => components}/table/src/util.ts (97%) create mode 100644 packages/components/table/style/css.ts create mode 100644 packages/components/table/style/index.ts rename packages/{ => components}/tabs/__tests__/tabs.spec.ts (99%) create mode 100644 packages/components/tabs/index.ts rename packages/{ => components}/tabs/src/tab-bar.vue (84%) rename packages/{ => components}/tabs/src/tab-nav.vue (67%) rename packages/{ => components}/tabs/src/tab-pane.vue (93%) rename packages/{tabs/src/tabs.vue => components/tabs/src/tabs.ts} (59%) create mode 100644 packages/components/tabs/src/token.ts create mode 100644 packages/components/tabs/style/css.ts create mode 100644 packages/components/tabs/style/index.ts rename packages/{ => components}/tag/__tests__/tag.spec.ts (100%) rename packages/{ => components}/tag/index.ts (64%) rename packages/{ => components}/tag/src/index.vue (97%) create mode 100644 packages/components/tag/style/css.ts create mode 100644 packages/components/tag/style/index.ts rename packages/{ => components}/time-picker/__tests__/time-picker.spec.ts (100%) rename packages/{ => components}/time-picker/index.ts (71%) rename packages/{ => components}/time-picker/src/common/constant.ts (100%) rename packages/{ => components}/time-picker/src/common/date-utils.ts (72%) rename packages/{ => components}/time-picker/src/common/picker.vue (96%) rename packages/{ => components}/time-picker/src/common/props.ts (94%) rename packages/{ => components}/time-picker/src/time-picker-com/basic-time-spinner.vue (98%) rename packages/{ => components}/time-picker/src/time-picker-com/panel-time-pick.vue (98%) rename packages/{ => components}/time-picker/src/time-picker-com/panel-time-range.vue (98%) rename packages/{ => components}/time-picker/src/time-picker-com/useTimePicker.ts (98%) rename packages/{ => components}/time-picker/src/time-picker.ts (94%) create mode 100644 packages/components/time-picker/style/css.ts create mode 100644 packages/components/time-picker/style/index.ts rename packages/{ => components}/time-select/__tests__/time-select.spec.ts (98%) rename packages/{ => components}/time-select/index.ts (62%) rename packages/{ => components}/time-select/src/time-select.vue (97%) create mode 100644 packages/components/time-select/style/css.ts create mode 100644 packages/components/time-select/style/index.ts create mode 100644 packages/components/timeline-item/style/css.ts create mode 100644 packages/components/timeline-item/style/index.ts rename packages/{ => components}/timeline/__tests__/timeline.spec.ts (100%) create mode 100644 packages/components/timeline/index.ts rename packages/{ => components}/timeline/src/index.vue (97%) rename packages/{ => components}/timeline/src/item.vue (100%) create mode 100644 packages/components/timeline/style/css.ts create mode 100644 packages/components/timeline/style/index.ts rename packages/{ => components}/tooltip/__tests__/tooltip.spec.ts (100%) create mode 100644 packages/components/tooltip/index.ts rename packages/{ => components}/tooltip/src/index.ts (93%) create mode 100644 packages/components/tooltip/style/css.ts create mode 100644 packages/components/tooltip/style/index.ts rename packages/{ => components}/transfer/__tests__/transfer.spec.ts (100%) rename packages/{ => components}/transfer/index.ts (57%) rename packages/{ => components}/transfer/src/index.vue (96%) rename packages/{ => components}/transfer/src/transfer-panel.vue (85%) rename packages/{ => components}/transfer/src/transfer.ts (93%) rename packages/{ => components}/transfer/src/useCheck.ts (84%) rename packages/{ => components}/transfer/src/useCheckedChange.ts (100%) rename packages/{ => components}/transfer/src/useComputedData.ts (94%) rename packages/{ => components}/transfer/src/useMove.ts (84%) create mode 100644 packages/components/transfer/style/css.ts create mode 100644 packages/components/transfer/style/index.ts rename packages/{ => components}/tree/__tests__/tree.spec.ts (100%) rename packages/{ => components}/tree/index.ts (63%) rename packages/{ => components}/tree/src/model/node.ts (99%) rename packages/{ => components}/tree/src/model/tree-store.ts (99%) rename packages/{ => components}/tree/src/model/useDragNode.ts (100%) rename packages/{ => components}/tree/src/model/useKeydown.ts (95%) rename packages/{ => components}/tree/src/model/useNodeExpandEventBroadcast.ts (100%) rename packages/{ => components}/tree/src/model/util.ts (88%) rename packages/{ => components}/tree/src/tree-node-content.vue (82%) rename packages/{ => components}/tree/src/tree-node.vue (95%) rename packages/{ => components}/tree/src/tree.type.ts (96%) rename packages/{ => components}/tree/src/tree.vue (97%) create mode 100644 packages/components/tree/style/css.ts create mode 100644 packages/components/tree/style/index.ts rename packages/{ => components}/upload/__tests__/upload-dragger.spec.ts (96%) rename packages/{ => components}/upload/__tests__/upload-list.spec.ts (96%) rename packages/{ => components}/upload/__tests__/upload.spec.ts (97%) rename packages/{ => components}/upload/index.ts (63%) rename packages/{ => components}/upload/src/ajax.ts (100%) rename packages/{ => components}/upload/src/index.vue (97%) rename packages/{ => components}/upload/src/upload-dragger.vue (100%) rename packages/{ => components}/upload/src/upload-list.vue (98%) rename packages/{ => components}/upload/src/upload.type.ts (100%) rename packages/{ => components}/upload/src/upload.vue (99%) rename packages/{ => components}/upload/src/useHandlers.ts (100%) create mode 100644 packages/components/upload/style/css.ts create mode 100644 packages/components/upload/style/index.ts rename packages/{ => components}/virtual-list/__tests__/dynamic-size-grid.spec.ts (100%) rename packages/{ => components}/virtual-list/__tests__/dynamic-size-list.spec.ts (100%) rename packages/{ => components}/virtual-list/__tests__/fixed-size-grid.spec.ts (100%) rename packages/{ => components}/virtual-list/__tests__/fixed-size-list.spec.ts (100%) rename packages/{ => components}/virtual-list/__tests__/scrollbar.spec.ts (100%) rename packages/{ => components}/virtual-list/index.ts (91%) rename packages/{ => components}/virtual-list/setup-mock.ts (100%) rename packages/{ => components}/virtual-list/src/builders/buildGrid.ts (100%) rename packages/{ => components}/virtual-list/src/builders/buildList.ts (100%) rename packages/{ => components}/virtual-list/src/components/dynamic-size-grid.ts (100%) rename packages/{ => components}/virtual-list/src/components/dynamic-size-list.ts (100%) rename packages/{ => components}/virtual-list/src/components/fixed-size-grid.ts (100%) rename packages/{ => components}/virtual-list/src/components/fixed-size-list.ts (100%) rename packages/{ => components}/virtual-list/src/components/scrollbar.ts (99%) rename packages/{ => components}/virtual-list/src/defaults.ts (100%) rename packages/{ => components}/virtual-list/src/hooks/useWheel.ts (100%) rename packages/{ => components}/virtual-list/src/types.ts (100%) rename packages/{ => components}/virtual-list/src/utils.ts (99%) create mode 100644 packages/components/virtual-list/style/css.ts create mode 100644 packages/components/virtual-list/style/index.ts delete mode 100644 packages/config-provider/index.ts delete mode 100644 packages/config-provider/package.json delete mode 100644 packages/container/index.ts delete mode 100644 packages/container/package.json delete mode 100644 packages/container/src/aside.vue delete mode 100644 packages/container/src/footer.vue delete mode 100644 packages/container/src/header.vue delete mode 100644 packages/date-picker/package.json delete mode 100644 packages/descriptions-item/index.ts delete mode 100644 packages/descriptions-item/package.json delete mode 100644 packages/descriptions/index.ts delete mode 100644 packages/descriptions/package.json delete mode 100644 packages/descriptions/src/descriptions.type.ts delete mode 100644 packages/dialog/package.json delete mode 100644 packages/dialog/src/dialog.ts create mode 100644 packages/directives/gulpfile.ts create mode 100644 packages/directives/tsconfig.json delete mode 100644 packages/divider/package.json delete mode 100644 packages/drawer/package.json delete mode 100644 packages/dropdown-item/index.ts delete mode 100644 packages/dropdown-item/package.json delete mode 100644 packages/dropdown-menu/index.ts delete mode 100644 packages/dropdown-menu/package.json delete mode 100644 packages/dropdown/index.ts delete mode 100644 packages/dropdown/package.json create mode 100644 packages/element-plus/component.ts delete mode 100644 packages/element-plus/components.ts delete mode 100644 packages/element-plus/composables.ts create mode 100644 packages/element-plus/defaults.ts create mode 100644 packages/element-plus/make-installer.ts create mode 100644 packages/element-plus/plugin.ts delete mode 100644 packages/element-plus/plugins.ts delete mode 100644 packages/empty/package.json delete mode 100644 packages/footer/index.ts delete mode 100644 packages/footer/package.json delete mode 100644 packages/form-item/index.ts delete mode 100644 packages/form-item/package.json delete mode 100644 packages/form/index.ts delete mode 100644 packages/form/package.json delete mode 100644 packages/header/index.ts delete mode 100644 packages/header/package.json create mode 100644 packages/hooks/gulpfile.ts create mode 100644 packages/hooks/tsconfig.json delete mode 100644 packages/icon/package.json delete mode 100644 packages/image-viewer/package.json delete mode 100644 packages/image/package.json delete mode 100644 packages/infinite-scroll/index.ts delete mode 100644 packages/infinite-scroll/package.json delete mode 100644 packages/input-number/package.json delete mode 100644 packages/input/package.json delete mode 100644 packages/link/package.json delete mode 100644 packages/loading/index.ts delete mode 100644 packages/loading/package.json create mode 100644 packages/locale/gulpfile.ts create mode 100644 packages/locale/tsconfig.json delete mode 100644 packages/main/index.ts delete mode 100644 packages/main/package.json delete mode 100644 packages/menu-item-group/index.ts delete mode 100644 packages/menu-item-group/package.json delete mode 100644 packages/menu-item/index.ts delete mode 100644 packages/menu-item/package.json delete mode 100644 packages/menu/index.ts delete mode 100644 packages/menu/package.json delete mode 100644 packages/message-box/package.json delete mode 100644 packages/message/index.ts delete mode 100644 packages/message/package.json delete mode 100644 packages/notification/index.ts delete mode 100644 packages/notification/package.json delete mode 100644 packages/option-group/index.ts delete mode 100644 packages/option-group/package.json delete mode 100644 packages/option/index.ts delete mode 100644 packages/option/package.json delete mode 100644 packages/overlay/package.json delete mode 100644 packages/page-header/package.json delete mode 100644 packages/pagination/index.ts delete mode 100644 packages/pagination/package.json delete mode 100644 packages/popconfirm/package.json delete mode 100644 packages/popover/index.ts delete mode 100644 packages/popover/package.json delete mode 100644 packages/popper/package.json delete mode 100644 packages/progress/package.json delete mode 100644 packages/radio-button/index.ts delete mode 100644 packages/radio-button/package.json delete mode 100644 packages/radio-group/index.ts delete mode 100644 packages/radio-group/package.json delete mode 100644 packages/radio/index.ts delete mode 100644 packages/radio/package.json delete mode 100644 packages/rate/package.json delete mode 100644 packages/result/package.json delete mode 100644 packages/row/index.ts delete mode 100644 packages/row/package.json delete mode 100644 packages/scrollbar/package.json delete mode 100644 packages/select-v2/package.json delete mode 100644 packages/select-v2/src/useOption.ts delete mode 100644 packages/select/index.ts delete mode 100644 packages/select/package.json delete mode 100644 packages/skeleton-item/index.ts delete mode 100644 packages/skeleton-item/package.json delete mode 100644 packages/skeleton/index.ts delete mode 100644 packages/skeleton/package.json delete mode 100644 packages/slider/package.json delete mode 100644 packages/space/package.json delete mode 100644 packages/step/index.ts delete mode 100644 packages/step/package.json delete mode 100644 packages/steps/index.ts delete mode 100644 packages/steps/package.json delete mode 100644 packages/submenu/index.ts delete mode 100644 packages/submenu/package.json delete mode 100644 packages/switch/package.json delete mode 100644 packages/tab-pane/index.ts delete mode 100644 packages/tab-pane/package.json delete mode 100644 packages/table-column/index.ts delete mode 100644 packages/table-column/package.json delete mode 100644 packages/table/index.ts delete mode 100644 packages/table/package.json delete mode 100644 packages/tabs/index.ts delete mode 100644 packages/tabs/package.json delete mode 100644 packages/tag/package.json delete mode 100644 packages/time-picker/package.json delete mode 100644 packages/time-select/package.json delete mode 100644 packages/timeline-item/index.ts delete mode 100644 packages/timeline-item/package.json delete mode 100644 packages/timeline/index.ts delete mode 100644 packages/timeline/package.json rename packages/{form/src/token.ts => tokens/form.ts} (87%) create mode 100644 packages/tokens/gulpfile.ts create mode 100644 packages/tokens/index.ts create mode 100644 packages/tokens/package.json create mode 100644 packages/tokens/tsconfig.json delete mode 100644 packages/tooltip/index.ts delete mode 100644 packages/tooltip/package.json delete mode 100644 packages/transfer/package.json delete mode 100644 packages/transition/index.ts delete mode 100644 packages/transition/package.json delete mode 100644 packages/tree/package.json delete mode 100644 packages/upload/package.json create mode 100644 packages/utils/gulpfile.ts create mode 100644 packages/utils/tsconfig.json delete mode 100644 packages/virtual-list/package.json create mode 100644 scripts/monorepo.sh create mode 100644 tsconfig.dts.json create mode 100644 website/components/heading.vue create mode 100644 website/components/img.vue create mode 100644 website/components/link.vue create mode 100644 website/md-loader/rules.js diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000000000..1d45a776ed029 --- /dev/null +++ b/.eslintignore @@ -0,0 +1 @@ +**/lib/* \ No newline at end of file diff --git a/.github/workflows/publish-npm.yml b/.github/workflows/publish-npm.yml index 8d565bea29ffe..f6881380a49be 100644 --- a/.github/workflows/publish-npm.yml +++ b/.github/workflows/publish-npm.yml @@ -31,15 +31,12 @@ jobs: registry-url: https://registry.npmjs.com/ - name: Get version run: echo "TAG_VERSION=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV - - name: build - run: yarn fast-build - env: - TAG_VERSION: ${{env.TAG_VERSION}} - - name: generate npm token + run: echo "GIT_HEAD=${GITHUB_SHA}" >> GITHUB_ENV + - name: build&publish run: echo "//registry.npmjs.com/:_authToken=${{ secrets.NPM_PUBLISH_TOKEN }}" > ./.npmrc - - name: Publish npm - run: sh ./scripts/publish.sh + run: sh ./scripts/monorepo.sh env: NODE_AUTH_TOKEN: ${{secrets.NPM_PUBLISH_TOKEN}} TAG_VERSION: ${{env.TAG_VERSION}} + GIT_HEAD: ${{env.GIT_HEAD}} REGISTRY: https://registry.npmjs.com/ diff --git a/.gitignore b/.gitignore index 84deb12fe0bca..e87a17d5d5292 100644 --- a/.gitignore +++ b/.gitignore @@ -14,3 +14,4 @@ lib website/play/index.vue packages/element-plus/version.ts /es/ +es diff --git a/.markdownlint.json b/.markdownlint.json new file mode 100644 index 0000000000000..79aa8d7f67c07 --- /dev/null +++ b/.markdownlint.json @@ -0,0 +1,3 @@ +{ + "MD033": false +} diff --git a/packages/theme-chalk/src/infiniteScroll.scss b/.npmrc similarity index 100% rename from packages/theme-chalk/src/infiniteScroll.scss rename to .npmrc diff --git a/build/bincomp.js b/build/bincomp.js deleted file mode 100644 index 7f08b2db1cd89..0000000000000 --- a/build/bincomp.js +++ /dev/null @@ -1,43 +0,0 @@ -/* eslint-disable @typescript-eslint/no-var-requires */ -const cp = require('child_process') -const { getPackagesSync } = require('@lerna/project') -const ora = require('ora') -const chalk = require('chalk') - -const spinner = ora(`${chalk.blue('Building...')}`).start() -const pkgs = getPackagesSync() - .map(pkg => pkg.name) - .filter(name => - name.includes('@element-plus') && - !name.includes('transition') && - !name.includes('utils'), - ) -const STEP = 4 -const START = 0 -const buildChild = (start, end) => { - let s = start - let e = end - const c1 = cp.spawn('node', ['./build/build.component.js', s, e]) - c1.stdout.on('data', function (data) { - spinner.info(`${chalk.blue(data)}`) - }) - - c1.stderr.on('data', function (data) { - spinner.warn(`${chalk.red(data)}`) - }) - - c1.on('close', function (code) { - s += STEP - e += STEP - if (s > pkgs.length) { - spinner.succeed(`${chalk.green('Build done. Exit code ' + code)}`) - return - } - buildChild(s, e) - }) -} - -/** - * @link https://github.com/ezolenko/rollup-plugin-typescript2/issues/177 - */ -buildChild(START, STEP) diff --git a/build/build-helper.js b/build/build-helper.ts similarity index 59% rename from build/build-helper.js rename to build/build-helper.ts index 94222c0f3aae9..39415a19516f3 100644 --- a/build/build-helper.js +++ b/build/build-helper.ts @@ -1,16 +1,28 @@ /* eslint-disable @typescript-eslint/no-var-requires */ -const helper = require('components-helper') -const { name, version } = require('../package.json') -const icon = require('../website/icon.json') +import helper from 'components-helper' +import path from 'path' +import { epRoot } from './paths' + +const { name, version } = require(path.resolve( + epRoot, + './package.json', +)) + +import icon from '../website/icon.json' const icons = icon.map(item => 'el-icon-' + item).join('/') const tagVer = process.env.TAG_VERSION -const _version = tagVer ? tagVer.startsWith('v') ? tagVer.slice(1) : tagVer : version +const _version = tagVer + ? tagVer.startsWith('v') + ? tagVer.slice(1) + : tagVer + : version helper({ name, version: _version, - entry: 'website/docs/en-US/!(custom-theme|datetime-picker|i18n|installation|message-box|message|migration-from-2.x|notification|quickstart|transition|typography).md', - outDir: 'lib', + entry: + 'website/docs/en-US/!(custom-theme|datetime-picker|i18n|installation|message-box|message|migration-from-2.x|notification|quickstart|transition|typography).md', + outDir: 'dist/element-plus', reComponentName, reDocUrl, reAttribute, @@ -18,22 +30,31 @@ helper({ propsName: 'Attribute', propsOptions: 'Accepted Values', eventsName: 'Event Name', - tableRegExp: '#+\\s+(.*\\s*Attributes|.*\\s*Events|.*\\s*Slots|.*\\s*Directives)\\s*\\n+(\\|?.+\\|.+)\\n\\|?\\s*:?-+:?\\s*\\|.+((\\n\\|?.+\\|.+)+)', + tableRegExp: + '#+\\s+(.*\\s*Attributes|.*\\s*Events|.*\\s*Slots|.*\\s*Directives)\\s*\\n+(\\|?.+\\|.+)\\n\\|?\\s*:?-+:?\\s*\\|.+((\\n\\|?.+\\|.+)+)', }) function reComponentName(title) { - return 'el-' + title.replace(/\B([A-Z])/g, '-$1').replace(/[ ]+/g, '-').toLowerCase() + return ( + 'el-' + + title + .replace(/\B([A-Z])/g, '-$1') + .replace(/[ ]+/g, '-') + .toLowerCase() + ) } function reDocUrl(fileName, header) { const docs = 'https://element-plus.org/#/en-US/component/' - const _header = header ? header.replace(/[ ]+/g, '-').toLowerCase() : undefined + const _header = header + ? header.replace(/[ ]+/g, '-').toLowerCase() + : undefined return docs + fileName + (_header ? '#' + _header : '') } function reAttribute(value, key, item) { const _value = value.match(/^\*\*(.*)\*\*$/) - const str = _value ? _value[1]: value + const str = _value ? _value[1] : value if (key === 'Accepted Values' && /icon/i.test(item[0])) { return icons @@ -41,7 +62,7 @@ function reAttribute(value, key, item) { return 'default' } else if (str === '' || /^(-|—)$/.test(str)) { return undefined - } else if (key === 'Attribute' && /v-model:(.+)/.test(str)){ + } else if (key === 'Attribute' && /v-model:(.+)/.test(str)) { const _str = str.match(/v-model:(.+)/) return _str ? _str[1] : undefined } else if (key === 'Attribute' && /v-model/.test(str)) { diff --git a/build/build-indices.js b/build/build-indices.js deleted file mode 100644 index f55e708ad7925..0000000000000 --- a/build/build-indices.js +++ /dev/null @@ -1,70 +0,0 @@ -/* eslint-disable @typescript-eslint/no-var-requires */ -'use strict' - -const fs = require('fs') -const algoliasearch = require('algoliasearch') -const slugify = require('transliteration').slugify -const algoliaKey = process.env.ALGOLIA_KEY - -const client = algoliasearch('7DCTSU0WBW', algoliaKey) -const langs = { - 'zh-CN': 'element-zh', - 'en-US': 'element-en', - 'es': 'element-es', - 'fr-FR': 'element-fr', - 'jp': 'element-jp', -} - -const fg = require('fast-glob') - -;['zh-CN', 'en-US', 'es', 'fr-FR', 'jp'].forEach(lang => { - const indexName = langs[lang] - const index = client.initIndex(indexName) - index.clearObjects().then(() => { - const files = fg.sync(`website/docs/${lang}/*.md`) - let indices = [] - files.forEach(file => { - const regExp = new RegExp(`website\/docs\/${lang}\/(.*).md`) - const pathContent = file.match(regExp) - const path = pathContent[1] - const index = path.lastIndexOf('/') - const names = index !== -1 ? path.split('/') : [] - const component = names.length ? names[names.length - 1] : path - const content = fs.readFileSync(file, 'utf8') - const matches = content - .replace(/:::[\s\S]*?:::/g, '') - .replace(/```[\s\S]*?```/g, '') - .match(/#{2,4}[^#]*/g) - .map(match => - match - .replace(/\n+/g, '\n') - .split('\n') - .filter(part => !!part), - ) - .map(match => { - const length = match.length - if (length > 2) { - const desc = match.slice(1, length).join('') - return [match[0], desc] - } - return match - }) - let i = 0 - indices = indices.concat( - matches.map(match => { - const title = match[0].replace(/#{2,4}/, '').trim() - const index = { component, title } - index.anchor = slugify(title) - index.content = (match[1] || title).replace(/<[^>]+>/g, '') - index.path = path - index.sort = i++ - return index - }), - ) - }) - - index.saveObjects(indices, { - autoGenerateObjectIDIfNotExist: true, - }) - }) -}) diff --git a/build/build-locale.js b/build/build-locale.js deleted file mode 100644 index db8e5f9f3f31c..0000000000000 --- a/build/build-locale.js +++ /dev/null @@ -1,39 +0,0 @@ -/* eslint-disable */ -const fs = require('fs') -const save = require('file-save') -const { resolve, basename } = require('path') -const localePath = resolve(__dirname, '../packages/locale/lang') -const fileList = fs.readdirSync(localePath) - -const transform = function(filename, name, cb) { - require('@babel/core').transformFile(resolve(localePath, filename), { - plugins: [ - '@babel/plugin-transform-modules-umd', - ], - moduleId: name, - }, cb) -} - -fileList - .filter(function(file) { - return /\.ts$/.test(file) - }) - .forEach(function(file) { - const name = basename(file, '.ts') - - transform(file, name, function(err, result) { - if (err) { - console.error(err) - } else { - const code = result.code - const transformedCode = code - .replace('define(\"', 'define(\"element/locale/') - .replace( - /global\.(\S*) = mod.exports/, - 'global.ElementPlus.lang = global.ElementPlus.lang || {};\n global.ElementPlus.lang.$1 = mod.exports.default' - ) - - save(resolve(__dirname, '../lib/umd/locale', `${name}.js`)).write(transformedCode) - } - }) - }) diff --git a/build/build-util.js b/build/build-util.js deleted file mode 100644 index f9295083658e6..0000000000000 --- a/build/build-util.js +++ /dev/null @@ -1,50 +0,0 @@ -/* eslint-disable */ -const pkg = require('../package.json') -const path = require('path') -const { nodeResolve } = require('@rollup/plugin-node-resolve') -const rollup = require('rollup') -const typescript = require('rollup-plugin-typescript2') - -const root = path.resolve(__dirname, '..'); -const file = process.argv[2]; -const defaultOpts = { - input: path.resolve(root, file), - plugins: [ - nodeResolve(), - typescript({ - tsconfigOverride: { - compilerOptions: { - declaration: false, - }, - 'exclude': [ - 'node_modules', - '__tests__', - ], - }, - abortOnError: false, - }), - ], - external() { - return true - }, -} - -const run = async (name) => { - const esm = { - format: 'es', - file: `es/${name}`, - }; - const cjs = { - format: 'cjs', - file: `lib/${name}`, - exports: 'named', - } - - const bundle = await rollup.rollup(defaultOpts); - await Promise.all([bundle.write(esm), bundle.write(cjs)]); - console.log(name, 'build finished'); -} - -let normalizedName = file.slice(11); // remove ./packages - -run(`${normalizedName.split('.').shift()}.js`); diff --git a/build/build.component.js b/build/build.component.js deleted file mode 100644 index 1b863957034d0..0000000000000 --- a/build/build.component.js +++ /dev/null @@ -1,84 +0,0 @@ -/* eslint-disable */ -const pkg = require('../package.json') -const path = require('path') -const { getPackages } = require('@lerna/project') -const css = require('rollup-plugin-css-only') -const { nodeResolve } = require('@rollup/plugin-node-resolve') -const vue = require('rollup-plugin-vue') -const rollup = require('rollup') -const typescript = require('rollup-plugin-typescript2') -const { noElPrefixFile } = require('./common') - -const deps = Object.keys(pkg.dependencies) - -const runBuild = async () => { - let index = 0 - const pkgs = await getPackages() - const inputs = pkgs - .map(pkg => pkg.name) - .filter(name => - name.includes('@element-plus') && - !name.includes('utils'), - ).slice(process.argv[2], process.argv[3]) - - build(inputs[index]) - - async function build(name) { - if (!name) return - const inputOptions = { - input: path.resolve(__dirname, `../packages/${name.split('@element-plus/')[1]}/index.ts`), - plugins: [ - nodeResolve(), - css(), - vue({ - target: 'browser', - css: false, - }), - typescript({ - tsconfigOverride: { - compilerOptions: { - declaration: false, - }, - 'exclude': [ - 'node_modules', - '__tests__', - ], - }, - abortOnError: false, - }), - ], - external(id) { - return /^vue/.test(id) - || /^@element-plus/.test(id) - || deps.some(k => new RegExp('^' + k).test(id)) - }, - } - const getOutFile = () => { - const compName = name.split('@element-plus/')[1] - if (noElPrefixFile.test(name)) { - return `lib/${compName}/index.js` - } - return `lib/el-${compName}/index.js` - } - const outOptions = { - format: 'es', - file: getOutFile(), - paths(id) { - if (/^@element-plus/.test(id)) { - if (noElPrefixFile.test(id)) return id.replace('@element-plus', '..') - return id.replace('@element-plus/', '../el-') - } - }, - } - - const bundle = await rollup.rollup(inputOptions) - console.log(name, 'done') - await bundle.write(outOptions) - index++ - if (index < inputs.length) { - await build(inputs[index]) - } - } -} - -runBuild() diff --git a/build/build.comps.js b/build/build.comps.js deleted file mode 100644 index 89783840cf38c..0000000000000 --- a/build/build.comps.js +++ /dev/null @@ -1,16 +0,0 @@ -/* eslint-disable */ - -// name came from the terminal as `./packages/*` notation, so when resolve the name, we'd like -// to add a `..` to do so. because the current file is under `build/`, `packages/` is at the -// same level as `build/`, -const run = require('./build'); -const compPath = process.argv[2] -if (!compPath) { - console.error('Usage: node build.js [component]') - process.exit(1) -} - -const outPutPrefix = ['hooks', 'directives'].some((p) => compPath.includes(p)) ? '' : 'el-'; -const compName = compPath.split('/').pop() - -run(`${outPutPrefix}${compName}/index.js`, compPath) diff --git a/build/build.entry.js b/build/build.entry.js deleted file mode 100644 index 7519fe7aeaf7a..0000000000000 --- a/build/build.entry.js +++ /dev/null @@ -1,5 +0,0 @@ -/* eslint-disable */ - -const run = require('./build'); - -run('index.js', './packages/element-plus', true) diff --git a/build/build.js b/build/build.js deleted file mode 100644 index 91778af442601..0000000000000 --- a/build/build.js +++ /dev/null @@ -1,81 +0,0 @@ -/* eslint-disable */ -const pkg = require('../package.json') -const path = require('path') -const css = require('rollup-plugin-css-only') -const { nodeResolve } = require('@rollup/plugin-node-resolve') -const vue = require('rollup-plugin-vue') -const rollup = require('rollup') -const typescript = require('rollup-plugin-typescript2') -const { noElPrefixFile } = require('./common'); - -const deps = Object.keys(pkg.dependencies) - -const root = path.resolve(__dirname, '..'); - -const defaultOpts = { - plugins: [ - nodeResolve(), - css(), - vue({ - target: 'browser', - css: false, - }), - typescript({ - tsconfigOverride: { - compilerOptions: { - declaration: false, - }, - 'exclude': [ - 'node_modules', - '__tests__', - ], - }, - abortOnError: false, - }), - ], - external(id) { - return /^vue/.test(id) - || /^@element-plus/.test(id) - || deps.some(k => new RegExp('^' + k).test(id)) - }, -} - -const isPkg = (id) => { - return id.startsWith('@element-plus') -} - -const isExcluded = (id) => { - return noElPrefixFile.test(id) -} - -const replacePrefix = (prefix, target) => { - return prefix + target.slice(14) // @element-plus/.length = 14 -} - -const run = async (name, input, isRoot = false) => { - const inputPath = `${path.resolve(root, input)}/index.ts` - defaultOpts.input = inputPath - - const getPaths = (id) => { - if (isPkg(id)) { - if (isExcluded(id)) return replacePrefix(isRoot ? './' : '../', id) - return replacePrefix(isRoot ? './el-' : '../el-', id) - } - } - const esm = { - format: 'es', - file: `es/${name}`, - paths: getPaths, - }; - const cjs = { - format: 'cjs', - file: `lib/${name}`, - paths: getPaths, - exports: 'named', - }; - const bundle = await rollup.rollup(defaultOpts); - await Promise.all([bundle.write(esm), bundle.write(cjs)]) - console.log(name, 'build finished'); -} - -module.exports = run; diff --git a/build/common.js b/build/common.js deleted file mode 100644 index 331107c4d2819..0000000000000 --- a/build/common.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - noElPrefixFile: /(utils|directives|hooks|locale)/, -} diff --git a/build/components.ts b/build/components.ts new file mode 100644 index 0000000000000..648c6478f2cc0 --- /dev/null +++ b/build/components.ts @@ -0,0 +1,177 @@ +/* eslint-disable */ +import fs from 'fs' +import path from 'path' +import rollup from 'rollup' +import vue from 'rollup-plugin-vue' +import css from 'rollup-plugin-css-only' +import filesize from 'rollup-plugin-filesize' +import { nodeResolve } from '@rollup/plugin-node-resolve' +import esbuild from 'rollup-plugin-esbuild' +import chalk from 'chalk' + +import { compRoot, buildOutput } from './paths' +import getDeps from './get-deps' +import genDefs from './gen-dts' +import reporter from './size-reporter' + +const outputDir = path.resolve(buildOutput, './element-plus') +const pathToPkgJson = path.resolve(compRoot, './package.json') + +async function getComponents() { + const raw = await fs.promises.readdir(compRoot) + // filter out package.json since under packages/components we only got this file + // + return raw + .filter(f => f !== 'package.json' && f !== 'index.ts') + .map(f => ({ path: path.resolve(compRoot, f), name: f })) +} + +const plugins = [ + css(), + vue({ + target: 'browser', + // css: false, + }), + nodeResolve(), + esbuild(), +] +const EP_PREFIX = '@element-plus' +const VUE_REGEX = 'vue' +const VUE_MONO = '@vue' +const externals = getDeps(pathToPkgJson) + +const excludes = ['icons'] + +const pathsRewriter = id => { + if (id.startsWith(`${EP_PREFIX}/components`)) return id.replace(`${EP_PREFIX}/components`, '..') + if (id.startsWith(EP_PREFIX) && excludes.every(e => !id.endsWith(e))) return id.replace(EP_PREFIX, '../..') + return id +} + + ; (async () => { + // run type diagnoses first + yellow('Start building types for individual components') + await genDefs(compRoot) + green('Typing generated successfully') + + yellow('Start building individual components') + await buildComponents() + green('Components built successfully') + + yellow('Start building entry file') + await buildEntry() + green('Entry built successfully') + })().then(() => { + console.log('Individual component build finished') + process.exit(0) + }).catch((e) => { + console.error(e.message) + process.exit(1) + }) + +async function buildComponents() { + const componentPaths = await getComponents() + + const builds = componentPaths.map(async ({ + path: p, + name: componentName, + }) => { + const entry = path.resolve(p, './index.ts') + if (!fs.existsSync(entry)) return + + const external = (id) => { + return id.startsWith(VUE_REGEX) + || id.startsWith(VUE_MONO) + || id.startsWith(EP_PREFIX) + || externals.some(i => id.startsWith(i)) + } + const esm = { + format: 'es', + file: `${outputDir}/es/components/${componentName}/index.js`, + plugins: [ + filesize({ + reporter, + }) + ], + paths: pathsRewriter, + } + + const cjs = { + format: 'es', + file: `${outputDir}/lib/components/${componentName}/index.js`, + plugins: [ + filesize({ + reporter, + }) + ], + paths: pathsRewriter, + } + const rollupConfig = { + input: entry, + plugins, + external, + } + const bundle = await rollup.rollup(rollupConfig) + await bundle.write(esm as any) + await bundle.write(cjs as any) + + }) + try { + await Promise.all( + builds + ) + } catch (e) { + logAndShutdown(e) + } +} + +async function buildEntry() { + const entry = path.resolve(compRoot, 'index.ts') + const config = { + input: entry, + plugins, + external: _ => true, + } + + try { + const bundle = await rollup.rollup(config) + await bundle.write({ + format: 'es', + file: `${outputDir}/es/components/index.js`, + plugins: [ + filesize({ + reporter, + }) + ] + }) + + await bundle.write({ + format: 'cjs', + file: `${outputDir}/lib/components/index.js`, + plugins: [ + filesize({ + reporter, + }) + ], + }) + } catch (e) { + logAndShutdown(e) + } +} + +function yellow(str) { + console.log(chalk.cyan(str)) +} + +function green(str) { + console.log(chalk.green(str)) +} + +function red(str) { + console.error(chalk.red(str)) +} + +function logAndShutdown(e) { + red(e.message) + process.exit(1) +} diff --git a/build/constants.ts b/build/constants.ts new file mode 100644 index 0000000000000..d68f4ccdf238e --- /dev/null +++ b/build/constants.ts @@ -0,0 +1,2 @@ +export const EP_PREFIX = '@element-plus' +export const excludes = ['icons'] diff --git a/build/full-bundle.ts b/build/full-bundle.ts new file mode 100644 index 0000000000000..afaeb22a0d13f --- /dev/null +++ b/build/full-bundle.ts @@ -0,0 +1,120 @@ +import { nodeResolve } from '@rollup/plugin-node-resolve' +import rollup from 'rollup' +import chalk from 'chalk' +import path from 'path' +import fs from 'fs' +import commonjs from '@rollup/plugin-commonjs' +import vue from 'rollup-plugin-vue' +import esbuild from 'rollup-plugin-esbuild' +import genDts from './gen-entry-dts' +import RollupResolveEntryPlugin from './rollup.plugin.entry' +import { epRoot, buildOutput } from './paths' +import { EP_PREFIX, excludes } from './constants' + +;(async () => { + + const config = { + input: path.resolve(epRoot, './index.ts'), + plugins: [ + nodeResolve(), + vue({ + target: 'browser', + // css: false, + exposeFilename: false, + }), + commonjs(), + esbuild({ + minify: false, + }), + ], + external(id) { + return /^vue/.test(id) + }, + } + + console.log(chalk.cyan('Start generating full bundle')) + + const umd = { + format: 'umd', + file: path.resolve(buildOutput, 'element-plus/dist/index.js'), + exports: 'named', + name: 'ElementPlus', + } + + const umdMinified = { + ...umd, + file: path.resolve(buildOutput, 'element-plus/dist/index.full.js'), + } + + console.log(chalk.bold(chalk.yellow('Building bundle'))) + + // Full bundle generation + const bundle = await rollup.rollup({ + ...config, + plugins: [...config.plugins, RollupResolveEntryPlugin()], + }) + + console.log(chalk.yellow('Generating index.js')) + + await bundle.write(umd as any) + + console.log(chalk.green('index.js generated')) + + console.log(chalk.yellow('Generating index.full.js')) + + await bundle.write(umdMinified as any) + + console.log(chalk.green('index.full.js generated')) + + console.log(chalk.yellow('Generating entry files without dependencies')) + + // Entry bundle generation + + const entryFiles = await fs.promises.readdir(epRoot, { withFileTypes: true }) + + const entryPoints = entryFiles.filter(f => f.isFile()).filter(f => { + return f.name !== 'package.json' && f.name !== 'README.md' + }).map(f => path.resolve(epRoot, f.name)) + + const entryBundle = await rollup.rollup({ + ...config, + input: entryPoints, + // eslint-disable-next-line @typescript-eslint/no-unused-vars + external: _ => true, + }) + + const rewriter = id => { + if (id.startsWith(`${EP_PREFIX}/components`)) return id.replace(`${EP_PREFIX}/components`, './components') + if (id.startsWith(EP_PREFIX) && excludes.every(e => !id.endsWith(e))) return id.replace(EP_PREFIX, '.') + } + + console.log(chalk.yellow('Generating cjs entry')) + + await entryBundle.write({ + format: 'cjs', + dir: path.resolve(buildOutput, 'element-plus/lib'), + exports: 'named', + paths: rewriter, + }) + + console.log(chalk.green('cjs entry generated')) + + console.log(chalk.yellow('Generating esm entry')) + + await entryBundle.write({ + format: 'esm', + dir: path.resolve(buildOutput, 'element-plus/es'), + paths: rewriter, + }) + + console.log(chalk.green('esm entry generated')) + + console.log(chalk.bold(chalk.green('Full bundle generated'))) + + console.log(chalk.yellow('Generate entry file definitions')) + + await genDts() + + console.log(chalk.green('Entry file definitions generated')) + +})() diff --git a/build/gen-dts.js b/build/gen-dts.js deleted file mode 100644 index 7c10ad58b3695..0000000000000 --- a/build/gen-dts.js +++ /dev/null @@ -1,165 +0,0 @@ -/* eslint-disable @typescript-eslint/no-var-requires */ -const path = require('path') -const fs = require('fs') -const { Project } = require('ts-morph') -const vueCompiler = require('@vue/compiler-sfc') -const klawSync = require('klaw-sync') -const ora = require('ora') - -const TSCONFIG_PATH = path.resolve(__dirname, '../tsconfig.json') -const DEMO_RE = /\/demo\/\w+\.vue$/ -const TEST_RE = /__test__|__tests__/ -const excludedFiles = [ - 'mock', - 'package.json', - 'spec', - 'test', - 'tests', - 'css', - '.DS_Store', -] -const exclude = path => !excludedFiles.some(f => path.includes(f)) - -/** - * fork = require( https://github.com/egoist/vue-dts-gen/blob/main/src/index.ts - */ -const genVueTypes = async () => { - const project = new Project({ - compilerOptions: { - allowJs: true, - declaration: true, - emitDeclarationOnly: true, - noEmitOnError: false, - outDir: path.resolve(__dirname, '../dist'), - baseUrl: path.resolve(__dirname, '../'), - paths: { - '@element-plus/*': ['packages/*'], - }, - }, - tsConfigFilePath: TSCONFIG_PATH, - skipAddingFilesFromTsConfig: true, - }) - - const sourceFiles = [] - - const filePaths = klawSync(path.resolve(__dirname, '../packages'), { - nodir: true, - }) - .map(item => item.path) - .filter(path => !DEMO_RE.test(path)) - .filter(path => !TEST_RE.test(path)) - .filter(exclude) - - await Promise.all( - filePaths.map(async file => { - if (file.endsWith('.vue')) { - const content = await fs.promises.readFile(file, 'utf-8') - const sfc = vueCompiler.parse(content) - const { script, scriptSetup } = sfc.descriptor - if (script || scriptSetup) { - let content = '' - let isTS = false - if (script && script.content) { - content += script.content - if (script.lang === 'ts') isTS = true - } - if (scriptSetup) { - const compiled = vueCompiler.compileScript(sfc.descriptor, { - id: 'xxx', - }) - content += compiled.content - if (scriptSetup.lang === 'ts') isTS = true - } - const sourceFile = project.createSourceFile( - path.relative(process.cwd(), file) + (isTS ? '.ts' : '.js'), - content, - ) - sourceFiles.push(sourceFile) - } - } else if (file.endsWith('.ts')) { - const sourceFile = project.addSourceFileAtPath(file) - sourceFiles.push(sourceFile) - } - }), - ) - - // const diagnostics = project.getPreEmitDiagnostics() - - // TODO: print all diagnoses status and fix them one by one. - // console.log(project.formatDiagnosticsWithColorAndContext(diagnostics)) - - await project.emit({ - emitOnlyDtsFiles: true, - }) - - const ROOT_PATH = path.resolve(__dirname, '../packages') - const excludes = ['utils', 'directives', 'hooks', 'locale'] - const ElementPlusSign = '@element-plus/' - for (const sourceFile of sourceFiles) { - const sourceFilePathName = sourceFile.getFilePath() - - if (sourceFilePathName.includes('packages/element-plus')) { - sourceFile.getExportDeclarations().map(modifySpecifier) - } - - sourceFile.getImportDeclarations().map(modifySpecifier) - - function modifySpecifier(d) { - const specifier = d.getModuleSpecifierValue() - - if (specifier && specifier.includes(ElementPlusSign)) { - const importItem = specifier.slice(ElementPlusSign.length) - let replacer - if (excludes.some(e => importItem.startsWith(e))) { - replacer = '' - } else { - replacer = 'el-' - } - const originalPath = path.resolve( - ROOT_PATH, - `./${replacer}${importItem}`, - ) - const sourceFilePath = sourceFile.getFilePath() - - const sourceDir = sourceFilePath.includes('packages/element-plus') - ? path.dirname(path.resolve(sourceFilePath, '../')) - : path.dirname(sourceFilePath) - const replaceTo = path.relative(sourceDir, originalPath) - // This is a delicated judgment which might fail when edge case occurs - d.setModuleSpecifier( - replaceTo.startsWith('.') ? replaceTo : `./${replaceTo}`, - ) - } - } - // console.log(sourceFile.getFilePath()) - - const emitOutput = sourceFile.getEmitOutput() - for (const outputFile of emitOutput.getOutputFiles()) { - const filepath = outputFile.getFilePath() - - await fs.promises.mkdir(path.dirname(filepath), { - recursive: true, - }) - - await fs.promises.writeFile(filepath, outputFile.getText(), 'utf8') - } - } -} - -// const cwd = process.cwd() - -// function getRelativePath(_path) { -// console.log(_path) -// const relativePath = path.relative( -// cwd, -// path.resolve(__dirname, '../packages'), -// ) -// // console.log(path.relative(_path, relativePath)) -// return path.relative(_path, relativePath) -// } - -const spinner = ora('Generate types...\n').start() - -genVueTypes() - .then(() => spinner.succeed('Success !\n')) - .catch(e => spinner.fail(`${e} !\n`)) diff --git a/build/gen-dts.ts b/build/gen-dts.ts new file mode 100644 index 0000000000000..bce6f63bcee09 --- /dev/null +++ b/build/gen-dts.ts @@ -0,0 +1,132 @@ +import path from 'path' +import fs from 'fs' +import { Project } from 'ts-morph' +import vueCompiler from '@vue/compiler-sfc' +import klawSync from 'klaw-sync' +import chalk from 'chalk' + +const TSCONFIG_PATH = path.resolve(__dirname, '../tsconfig.json') +const DEMO_RE = /\/demo\/\w+\.vue$/ +const TEST_RE = /__test__|__tests__/ +const excludedFiles = [ + 'mock', + 'package.json', + 'spec', + 'test', + 'tests', + 'css', + '.DS_Store', +] +const exclude = (path: string) => !excludedFiles.some(f => path.includes(f)) + +/** + * fork = require( https://github.com/egoist/vue-dts-gen/blob/main/src/index.ts + */ +const genVueTypes = async (root, outDir = path.resolve(__dirname, '../dist/types')) => { + const project = new Project({ + compilerOptions: { + allowJs: true, + declaration: true, + emitDeclarationOnly: true, + noEmitOnError: true, + outDir, + baseUrl: path.resolve(__dirname, '../'), + paths: { + '@element-plus/*': ['packages/*'], + }, + skipLibCheck: true, + }, + tsConfigFilePath: TSCONFIG_PATH, + skipAddingFilesFromTsConfig: true, + }) + + const sourceFiles = [] + + const filePaths = klawSync(root, { + nodir: true, + }) + .map(item => item.path) + .filter(path => !DEMO_RE.test(path)) + .filter(path => !TEST_RE.test(path)) + .filter(exclude) + + await Promise.all( + filePaths.map(async file => { + if (file.endsWith('.vue')) { + const content = await fs.promises.readFile(file, 'utf-8') + const sfc = vueCompiler.parse(content) + const { script, scriptSetup } = sfc.descriptor + if (script || scriptSetup) { + let content = '' + let isTS = false + if (script && script.content) { + content += script.content + if (script.lang === 'ts') isTS = true + } + if (scriptSetup) { + const compiled = vueCompiler.compileScript(sfc.descriptor, { + id: 'xxx', + }) + content += compiled.content + if (scriptSetup.lang === 'ts') isTS = true + } + const sourceFile = project.createSourceFile( + path.relative(process.cwd(), file) + (isTS ? '.ts' : '.js'), + content, + ) + sourceFiles.push(sourceFile) + } + } else if (file.endsWith('.ts')) { + const sourceFile = project.addSourceFileAtPath(file) + sourceFiles.push(sourceFile) + } + }), + ) + + const diagnostics = project.getPreEmitDiagnostics() + + console.log(project.formatDiagnosticsWithColorAndContext(diagnostics)) + + await project.emit({ + emitOnlyDtsFiles: true, + }) + + for (const sourceFile of sourceFiles) { + console.log( + chalk.yellow( + 'Generating definition for file: ' + + chalk.bold( + sourceFile.getBaseName(), + ), + ), + ) + + const emitOutput = sourceFile.getEmitOutput() + for (const outputFile of emitOutput.getOutputFiles()) { + const filepath = outputFile.getFilePath() + + await fs.promises.mkdir(path.dirname(filepath), { + recursive: true, + }) + + await fs.promises.writeFile(filepath, + outputFile + .getText() + .replaceAll('@element-plus/components', 'element-plus/es') + .replaceAll('@element-plus/theme-chalk', 'element-plus/theme-chalk') + .replaceAll('@element-plus', 'element-plus/es'), + 'utf8') + console.log( + chalk.green( + 'Definition for file: ' + + chalk.bold( + sourceFile.getBaseName(), + ) + + ' generated', + ), + ) + } + } +} + +export default genVueTypes diff --git a/build/gen-entry-dts.ts b/build/gen-entry-dts.ts new file mode 100644 index 0000000000000..b6e28d16d59ae --- /dev/null +++ b/build/gen-entry-dts.ts @@ -0,0 +1,67 @@ +import path from 'path' +import fs from 'fs' +import chalk from 'chalk' +import glob from 'fast-glob' +import { Project } from 'ts-morph' +import { epRoot, buildOutput } from './paths' +const TSCONFIG_PATH = path.resolve(__dirname, '../tsconfig.dts.json') + +const gen = async () => { + const files = await glob(epRoot + '/*.ts') + const project = new Project({ + compilerOptions: { + allowJs: true, + declaration: true, + emitDeclarationOnly: true, + noEmitOnError: false, + outDir: path.resolve(buildOutput, 'entry/types'), + skipLibCheck: true, + esModuleInterop: true, + target: 99, // ESNext + downlevelIteration: true, + // types: ["./typings", "esnext", "dom"], + }, + skipFileDependencyResolution: true, + tsConfigFilePath: TSCONFIG_PATH, + skipAddingFilesFromTsConfig: true, + }) + const sourceFiles = [] + files.map(f => { + const sourceFile = project.addSourceFileAtPath(f) + sourceFiles.push(sourceFile) + }) + + for (const sourceFile of sourceFiles) { + + console.log(chalk.yellow( + `Emitting file: ${chalk.bold(sourceFile.getFilePath())}`, + )) + await sourceFile.emit() + const emitOutput = sourceFile.getEmitOutput() + for (const outputFile of emitOutput.getOutputFiles()) { + const filepath = outputFile.getFilePath() + + await fs.promises.mkdir(path.dirname(filepath), { + recursive: true, + }) + await fs.promises.writeFile(filepath, + outputFile + .getText() + .replaceAll('@element-plus', '.'), + // .replaceAll('@element-plus/theme-chalk', 'element-plus/theme-chalk'), + 'utf8') + console.log( + chalk.green( + 'Definition for file: ' + + chalk.bold( + sourceFile.getBaseName(), + ) + + ' generated', + ), + ) + } + } + +} + +export default gen diff --git a/build/gen-type.js b/build/gen-type.js deleted file mode 100644 index 7599c02a5ca9a..0000000000000 --- a/build/gen-type.js +++ /dev/null @@ -1,68 +0,0 @@ -/* eslint-disable @typescript-eslint/no-var-requires */ -const fs = require('fs') -const path = require('path') -const { noElPrefixFile } = require('./common') - -const outsideImport = /import .* from '..\/(.*?)\/src\/.*/ - -// global.d.ts -fs.copyFileSync( - path.resolve(__dirname, '../typings/vue-shim.d.ts'), - path.resolve(__dirname, '../lib/element-plus.d.ts'), -) -// index.d.ts -const newIndexPath = path.resolve(__dirname, '../lib/index.d.ts') -fs.copyFileSync(path.resolve(__dirname, '../lib/element-plus/index.d.ts'), newIndexPath) -const index = fs.readFileSync(newIndexPath) -const newIndex = index.toString().replace(/@element-plus\//g, './el-').replace('el-utils', 'utils').replace('el-locale', 'locale') -fs.writeFileSync(newIndexPath, newIndex) - -// remove ep -fs.rmdirSync(path.resolve(__dirname, '../lib/element-plus'), { recursive: true }) - -// remove test-utils -fs.rmdirSync(path.resolve(__dirname, '../lib/test-utils'), { recursive: true }) - -// component -const libDirPath = path.resolve(__dirname, '../lib') -fs.readdirSync(libDirPath).forEach(comp => { - if (!noElPrefixFile.test(comp)) { - if (fs.lstatSync(path.resolve(libDirPath, comp)).isDirectory()) { - // rename - const newCompName = `el-${comp}` - fs.renameSync(path.resolve(libDirPath, comp), - path.resolve(libDirPath, newCompName)) - // re-import - const imp = fs.readFileSync(path.resolve(__dirname, '../lib', newCompName, 'index.d.ts')).toString() - if (outsideImport.test(imp) || imp.includes('@element-plus/')) { - const newImp = imp.replace(outsideImport, (i, c) => { - return i.replace(`../${c}`, `../el-${c}`) - }).replace(/@element-plus\//g, '../el-').replace('el-utils', 'utils').replace('el-locale', 'locale') - fs.writeFileSync(path.resolve(__dirname, '../lib', newCompName, 'index.d.ts'), newImp) - } - } - } -}) - -// after components dir renamed -fs.readdirSync(libDirPath).forEach(comp => { - // check src/*.d.ts exist - const srcPath = path.resolve(libDirPath, comp, './src') - if (fs.existsSync(srcPath)) { - if (fs.lstatSync(srcPath).isDirectory()) { - fs.readdir(srcPath, 'utf-8', (err, data) => { - if (err) return - // replace all @element-plus in src/*.d.ts - data.forEach(f => { - if (!fs.lstatSync(path.resolve(srcPath, f)).isDirectory()) { - const imp = fs.readFileSync(path.resolve(srcPath, f)).toString() - if (imp.includes('@element-plus/')) { - const newImp = imp.replace(/@element-plus\//g, '../../el-').replace('el-utils', 'utils').replace('el-locale', 'locale') - fs.writeFileSync(path.resolve(srcPath, f), newImp) - } - } - }) - }) - } - } -}) diff --git a/build/gen-version.js b/build/gen-version.ts similarity index 60% rename from build/gen-version.js rename to build/gen-version.ts index a51e663f5b751..080e8d2be8d66 100644 --- a/build/gen-version.js +++ b/build/gen-version.ts @@ -1,12 +1,15 @@ -/* eslint-disable @typescript-eslint/no-var-requires */ -const fs = require('fs') -const path = require('path') +import fs from 'fs' +import path from 'path' +import pkg from '../packages/element-plus/package.json' // need to be checked const tagVer = process.env.TAG_VERSION +let version = '' + if (tagVer) { version = tagVer.startsWith('v') ? tagVer.slice(1) : tagVer } else { - version = require('../package.json').version + version = pkg.version } + fs.writeFileSync( path.resolve(__dirname, '../packages/element-plus/version.ts'), `export const version = '${version}' diff --git a/build/get-deps.ts b/build/get-deps.ts new file mode 100644 index 0000000000000..610c8baacd73c --- /dev/null +++ b/build/get-deps.ts @@ -0,0 +1,12 @@ +/* eslint-disable */ +/** + * + * @param {PathLike} path path to dependencies + * @returns {Array} + */ +export default path => { + const pkgJson = require(path) + + const { dependencies } = pkgJson + return Object.keys(dependencies) +} diff --git a/build/getCpus.js b/build/getCpus.js deleted file mode 100644 index c1677e095752e..0000000000000 --- a/build/getCpus.js +++ /dev/null @@ -1,4 +0,0 @@ -/* eslint-disable */ -const os = require('os') - -console.log(os.cpus().length) diff --git a/build/getCpus.ts b/build/getCpus.ts new file mode 100644 index 0000000000000..171b18e9504b0 --- /dev/null +++ b/build/getCpus.ts @@ -0,0 +1,4 @@ +/* eslint-disable */ +import os from 'os' + +export default os.cpus().length diff --git a/build/getPkgs.js b/build/getPkgs.js deleted file mode 100644 index 95325246494a6..0000000000000 --- a/build/getPkgs.js +++ /dev/null @@ -1,4 +0,0 @@ -/* eslint-disable */ -const { getPackagesSync } = require('@lerna/project'); - -module.exports = getPackagesSync(); diff --git a/build/getPkgs.ts b/build/getPkgs.ts new file mode 100644 index 0000000000000..36931ccc51088 --- /dev/null +++ b/build/getPkgs.ts @@ -0,0 +1,4 @@ +/* eslint-disable */ +import { getPackagesSync } from '@lerna/project'; + +export default getPackagesSync(); diff --git a/build/gulp-rewriter.ts b/build/gulp-rewriter.ts new file mode 100644 index 0000000000000..20de9f3b203c3 --- /dev/null +++ b/build/gulp-rewriter.ts @@ -0,0 +1,16 @@ +import through2 from 'through2' + +const rewriter = (rewriteTo = '../..') => { + return through2.obj(function(file, _, cb) { + const compIdentifier = '@element-plus' + + file.contents = Buffer.from( + file.contents + .toString() + .replaceAll(compIdentifier, rewriteTo), + ) + cb(null, file) + }) +} + +export default rewriter diff --git a/build/gulpfile.ts b/build/gulpfile.ts new file mode 100644 index 0000000000000..0ae381c3e9660 --- /dev/null +++ b/build/gulpfile.ts @@ -0,0 +1,58 @@ +import gulp from 'gulp' +import ts from 'gulp-typescript' +import path from 'path' +import through2 from 'through2' + +const output = path.resolve(__dirname, '../dist/styles') + +const tsProject = ts.createProject('tsconfig.json', { + declaration: true, + target: 'ESNEXT', + skipLibCheck: true, + module: 'commonjs', +}) + +const rewriter = () => { + return through2.obj(function(file, _, cb) { + const compIdentifier = '@element-plus/components' + const compReplacer = '../../../components' + const themeIdentifier = '@element-plus/theme-chalk' + const themeReplacer = '../../../../theme-chalk' + file.contents = Buffer.from( + file.contents + .toString() + .replaceAll(compIdentifier, compReplacer) + .replaceAll(themeIdentifier, themeReplacer), + ) + cb(null, file) + }) +} + +const inputs = '../packages/components/**/style/*.ts' + +function compileEsm() { + return gulp + .src(inputs) + .pipe(rewriter()) + .pipe(tsProject()) + .pipe(gulp.dest(path.resolve(output, 'lib'))) +} + +function compileCjs() { + return gulp + .src(inputs) + .pipe(rewriter()) + .pipe( + ts.createProject('tsconfig.json', { + declaration: true, + target: 'ESNEXT', + skipLibCheck: true, + module: 'ESNEXT', + })(), + ) + .pipe(gulp.dest(path.resolve(output, 'es'))) +} + +export const build = gulp.series(compileEsm, compileCjs) + +export default build diff --git a/build/paths.ts b/build/paths.ts new file mode 100644 index 0000000000000..d9572fbbc5cc2 --- /dev/null +++ b/build/paths.ts @@ -0,0 +1,26 @@ +import path from 'path' + +const projRoot = path.resolve(__dirname, '../') +const pkgRoot = path.resolve(projRoot, './packages') +const compRoot = path.resolve(pkgRoot, './components') +const themeRoot = path.resolve(pkgRoot, './theme-chalk') +const hookRoot = path.resolve(pkgRoot, './hooks') +const localeRoot = path.resolve(pkgRoot, './locale') +const directiveRoot = path.resolve(pkgRoot, './directives') +const epRoot = path.resolve(pkgRoot, './element-plus') +const utilRoot = path.resolve(pkgRoot, './utils') +const buildOutput = path.resolve(projRoot, './dist') + + +export { + projRoot, + pkgRoot, + compRoot, + themeRoot, + hookRoot, + directiveRoot, + localeRoot, + epRoot, + utilRoot, + buildOutput, +} diff --git a/build/rollup.config.bundle.js b/build/rollup.config.bundle.js deleted file mode 100644 index 51a657aa9c125..0000000000000 --- a/build/rollup.config.bundle.js +++ /dev/null @@ -1,48 +0,0 @@ -// import vue from 'rollup-plugin-vue' -import { nodeResolve } from '@rollup/plugin-node-resolve' -import path from 'path' -// import commonjs from '@rollup/plugin-commonjs' -import { terser } from 'rollup-plugin-terser' -import typescript from 'rollup-plugin-typescript2' -import pkg from '../package.json' - -const deps = Object.keys(pkg.dependencies) -// eslint-disable-next-line @typescript-eslint/no-var-requires -const vue = require('rollup-plugin-vue') - -export default [ - { - input: path.resolve(__dirname, '../packages/element-plus/index.ts'), - output: { - format: 'es', - file: 'lib/index.esm.js', - }, - plugins: [ - terser(), - nodeResolve(), - // commonjs(), - vue({ - target: 'browser', - css: false, - exposeFilename: false, - }), - typescript({ - tsconfigOverride: { - 'include': [ - 'packages/**/*', - 'typings/vue-shim.d.ts', - ], - 'exclude': [ - 'node_modules', - 'packages/**/__tests__/*', - ], - }, - abortOnError: false, - }), - ], - external(id) { - return /^vue/.test(id) - || deps.some(k => new RegExp('^' + k).test(id)) - }, - }, -] diff --git a/build/rollup.config.js b/build/rollup.config.ts similarity index 98% rename from build/rollup.config.js rename to build/rollup.config.ts index bd08a2be599c7..8193d9b060cc2 100644 --- a/build/rollup.config.js +++ b/build/rollup.config.ts @@ -49,7 +49,7 @@ export default inputs.map(name => ({ css(), vue({ target: 'browser', - css: false, + // css: false, }), nodeResolve(), esbuild(), diff --git a/build/rollup.plugin.entry.ts b/build/rollup.plugin.entry.ts new file mode 100644 index 0000000000000..eeb3358b8cd53 --- /dev/null +++ b/build/rollup.plugin.entry.ts @@ -0,0 +1,23 @@ +import path from 'path' +import type { Plugin } from 'rollup' + +export default function entryPlugin(): Plugin { + return { + name: 'element-plus-entry-plugin', + transform(code, id) { + if (id.includes('packages')) { + return { + code: code.replace( + /@element-plus\//g, + `${path.relative( + path.dirname(id), + path.resolve(__dirname, '../packages'), + )}/`, + ), + map: null, + } + } + return { code, map: null } + }, + } +} diff --git a/build/size-reporter.ts b/build/size-reporter.ts new file mode 100644 index 0000000000000..83682d272c472 --- /dev/null +++ b/build/size-reporter.ts @@ -0,0 +1,77 @@ +import chalk from 'chalk' + + +export default async function reporter(opt, outputOptions, info) { + const values = [ + // ...(outputOptions.file || outputOptions.dest + // ? [ + // `${title('Destination: ')}${value( + // outputOptions.file || outputOptions.dest, + // )}`, + // ] + // : + info.fileName + ? [`${outputOptions.file.split('packages/').pop()}`] + : [], + // ) + // ...(info.bundleSizeBefore + // ? [ + // `${value(info.bundleSize)} (was ${value( + // info.bundleSizeBefore, + // )}${info.lastVersion + // ? ` in version ${info.lastVersion}` + // : ' in last build' + // })`, + // ] + // : + [`${info.bundleSize}`], + // ), + ...(info.minSize + ? + // info.minSizeBefore + // ? [ + // `${title('Minified Size: ')} ${value(info.minSize)} (was ${value( + // info.minSizeBefore, + // )}${info.lastVersion + // ? ` in version ${info.lastVersion}` + // : ' in last build' + // })`, + // ] + // : + [`${info.minSize}`] + : []), + // ...(info.gzipSize + // ? info.gzipSizeBefore + // ? [ + // `${title('Gzipped Size: ')} ${value(info.gzipSize)} (was ${value( + // info.gzipSizeBefore, + // )}${info.lastVersion + // ? ` in version ${info.lastVersion}` + // : ' in last build' + // })`, + // ] + // : [`${title('Gzipped Size: ')} ${value(info.gzipSize)}`] + // : []), + // ...(info.brotliSize + // ? info.brotliSizeBefore + // ? [ + // `${title('Brotli size: ')}${value(info.brotliSize)} (was ${value( + // info.brotliSizeBefore, + // )}${info.lastVersion + // ? ` in version ${info.lastVersion}` + // : ' in last build' + // })`, + // ] + // : [`${title('Brotli size: ')}${value(info.brotliSize)}`] + // : []), + ] + + return `${ + chalk.cyan(chalk.bold(values[0])) + }: bundle size ${ + chalk.yellow(values[1]) + } -> minified ${ + chalk.green(values[2]) + }` +} + diff --git a/build/update-version.ts b/build/update-version.ts new file mode 100644 index 0000000000000..0833e59b8c0e5 --- /dev/null +++ b/build/update-version.ts @@ -0,0 +1,50 @@ +import chalk from 'chalk' +import path from 'path' +import fs from 'fs' +import { epRoot } from './paths' + +const tagVersion = process.env.TAG_VERSION +const gitHead = process.env.GIT_HEAD +if (!tagVersion || !gitHead) { + console.log( + chalk.red( + 'No tag version or git head were found, make sure that you set the environment variable $TAG_VERSION \n', + ), + ) + process.exit(1) +} + +console.log(chalk.cyan('Start updating version')) + +console.log(chalk.cyan([ + 'NOTICE:', + `$TAG_VERSION: ${tagVersion}`, + `$GIT_HEAD: ${gitHead}`, +].join('\n'))) + +; (async () => { + console.log(chalk.yellow(`Updating package.json for element-plus`)) + + const pkgJson = path.resolve(epRoot, './package.json') + // eslint-disable-next-line @typescript-eslint/no-var-requires + const json = require(pkgJson) + + json.version = tagVersion + json.gitHead = gitHead + + if (!(process.argv.includes('-d') || process.argv.includes('--dry-run'))) { + try { + await fs.promises.writeFile(pkgJson, JSON.stringify(json, null, 2), { + encoding: 'utf-8', + }) + } catch (e) { + process.exit(1) + } + } else { + console.log(json) + } + + console.log(chalk.green(`Version updated to ${tagVersion}`)) + + console.log(chalk.green(`Git head updated to ${gitHead}`)) +})() diff --git a/build/webpack.config.js b/build/webpack.config.js index f448544dd1d4e..03fafe755dcd7 100644 --- a/build/webpack.config.js +++ b/build/webpack.config.js @@ -38,7 +38,7 @@ const config = { mode: 'production', entry, output: { - path: path.resolve(__dirname, '../lib'), + path: path.resolve(__dirname, '../dist/element-plus/dist'), publicPath: '/', filename: isFullMode ? 'index.full.js' : 'index.js', libraryTarget: 'umd', diff --git a/build/worker.js b/build/worker.js new file mode 100644 index 0000000000000..b250089c00b82 --- /dev/null +++ b/build/worker.js @@ -0,0 +1,132 @@ +/* eslint-disable @typescript-eslint/no-var-requires */ +const fs = require('fs') +const path = require('path') +const { parentPort, workerData } = require('worker_threads') +const { Project } = require('ts-morph') +const chalk = require('chalk') +const vueCompiler = require('@vue/compiler-sfc') + + +const TSCONFIG_PATH = path.resolve(process.cwd(), 'tsconfig.dts.json') + + ; (async () => { + const { filePaths, workerId, outDir } = workerData + let messagePort + parentPort.once('message', async ({ port }) => { + messagePort = port + + messagePort.postMessage({ + type: 'log', + message: chalk.yellow(`Worker: ${chalk.bold(workerData.workerId)} started`), + }) + + const project = new Project({ + compilerOptions: { + outDir, + }, + tsConfigFilePath: TSCONFIG_PATH, + skipAddingFilesFromTsConfig: true, + }) + + const sourceFiles = [] + + await Promise.all(filePaths.map(async file => { + if (file.endsWith('.vue')) { + const content = await fs.promises.readFile(file, 'utf-8') + const sfc = vueCompiler.parse(content) + const { script, scriptSetup } = sfc.descriptor + if (script || scriptSetup) { + let content = '' + let isTS = false + if (script && script.content) { + content += script.content + if (script.lang === 'ts') isTS = true + } + if (scriptSetup) { + const compiled = vueCompiler.compileScript(sfc.descriptor, { + id: 'xxx', + }) + content += compiled.content + if (scriptSetup.lang === 'ts') isTS = true + } + const sourceFile = project.createSourceFile( + path.relative(process.cwd(), file) + (isTS ? '.ts' : '.js'), + content, + ) + sourceFiles.push(sourceFile) + } + } else if (file.endsWith('.ts')) { + const sourceFile = project.addSourceFileAtPath(file) + sourceFiles.push(sourceFile) + } + })) + + const diagnostics = project.getPreEmitDiagnostics() + await project.emit({ + emitOnlyDtsFiles: true, + }) + + messagePort.postMessage({ + type: 'log', + message: project.formatDiagnosticsWithColorAndContext(diagnostics), + }) + + for (const sourceFile of sourceFiles) { + + messagePort.postMessage({ + type: 'log', + message: chalk.yellow( + 'Generating definition for file: ' + + chalk.bold( + sourceFile.getFilePath(), + ), + ), + }) + + // console.log(sourceFile.getStructure()) + const ElementPlusSign = '@element-plus/' + + sourceFile.getImportDeclarations(dec => dec.getModuleSpecifierValue().startsWith(ElementPlusSign)).map(modifySpecifier) + + function modifySpecifier(d) { + + const replaceTo = 'element-plus/es/' + d.getModuleSpecifierValue().slice(ElementPlusSign.length) + d.setModuleSpecifier( + replaceTo, + ) + } + + // console.log(sourceFile.getFilePath()) + + const emitOutput = sourceFile.getEmitOutput({ + emitOnlyDtsFiles: true, + }) + for (const outputFile of emitOutput.getOutputFiles()) { + // console.log(outputFile) + const filepath = outputFile.getFilePath() + + await fs.promises.mkdir(path.dirname(filepath), { + recursive: true, + }) + + await fs.promises.writeFile(filepath, outputFile.getText(), 'utf8') + messagePort.postMessage({ + type: 'log', + message: chalk.green( + 'Definition for file: ' + + chalk.bold( + sourceFile.getBaseName(), + ) + + ' generated', + ), + }) + } + + messagePort.postMessage({ type: 'fulfill', message: workerId }) + } + + + + }) + // parentPort.emit +})() diff --git a/package.json b/package.json index 1ef812c5fc1dd..b9d1509dbcbaf 100644 --- a/package.json +++ b/package.json @@ -1,27 +1,30 @@ { - "name": "element-plus", "private": true, - "version": "0.0.0-development", "scripts": { "cz": "npx git-cz", "test": "jest", "gen": "bash ./scripts/gc.sh", "bootstrap": "yarn --frozen-lockfile && npx lerna bootstrap && yarn gen:version", - "gen:version": "node build/gen-version.js", + "gen:version": "esno build/gen-version.ts", "build": "yarn bootstrap && yarn clean:lib && yarn build:esm-bundle && yarn build:lib && yarn build:lib-full && yarn build:esm && yarn build:utils && yarn build:locale && yarn build:locale-umd && yarn build:theme && yarn build:helper", "clean:lib": "rimraf lib && rimraf es && rimraf dist", "build:lib": "cross-env LIBMODE=core webpack --config ./build/webpack.config.js", "build:lib-full": "cross-env LIBMODE=full webpack --config ./build/webpack.config.js", "build:esm-bundle": "rollup --config ./build/rollup.config.bundle.js && yarn build:type", - "build:type": "node build/gen-dts.js", - "build:esm": "node ./build/bincomp.js", - "build:components": "rollup --config ./build/rollup.config.js", - "build:utils": "cross-env BABEL_ENV=utils babel packages/utils --extensions .ts --out-dir lib/utils", - "build:locale": "cross-env BABEL_ENV=utils babel packages/locale --extensions .ts --out-dir lib/locale", - "build:locale-umd": "node ./build/build-locale.js", - "build:theme": "cd packages/theme-chalk && yarn clean && yarn build", - "build:helper": "node build/build-helper.js", + "build:locale-umd": "esno ./build/build-locale.ts", + "build:helper": "esno build/build-helper.ts", "build:indices": "node build/build-indices.js", + "update:version": "esno build/update-version.ts", + "build:comps": "rimraf dist/components && esno build/components.ts", + "build:style": "gulp --cwd ./build", + "build:prod": "sh scripts/monorepo.sh", + "build:directives": "cd packages/directives && yarn clean && yarn build", + "build:hooks": "cd packages/hooks && yarn clean && yarn build", + "build:locale": "cd packages/locale && yarn clean && yarn build", + "build:theme": "cd packages/theme-chalk && yarn clean && yarn build", + "build:utils": "cd packages/utils && yarn clean && yarn build", + "build:tokens": "cd packages/tokens && yarn clean && yarn build", + "build:full-bundle": "esno build/full-bundle.ts", "format": "yarn format:scss", "format:scss": "prettier --write **/*.scss", "lint": "eslint ./packages --ext .vue,.js,.ts", @@ -44,10 +47,12 @@ "@babel/preset-typescript": "^7.10.4", "@commitlint/cli": "^9.1.2", "@commitlint/config-conventional": "^9.1.2", + "@rollup/plugin-alias": "^3.1.5", "@rollup/plugin-commonjs": "^15.1.0", "@rollup/plugin-node-resolve": "^9.0.0", "@rollup/plugin-typescript": "^6.0.0", "@types/jest": "^26.0.10", + "@types/klaw-sync": "^6.0.1", "@types/lodash": "^4.14.161", "@typescript-eslint/eslint-plugin": "^3.10.1", "@typescript-eslint/parser": "^3.10.1", @@ -70,8 +75,12 @@ "esbuild": "^0.12.5", "eslint": "^7.7.0", "eslint-plugin-vue": "^7.0.0-beta.0", + "esno": "^0.9.1", + "fast-glob": "^3.2.7", "file-loader": "^6.0.0", "file-save": "^0.2.0", + "gulp": "^4.0.2", + "gulp-typescript": "^6.0.0-alpha.1", "highlight.js": "^10.4.1", "html-webpack-plugin": "^4.3.0", "husky": "^4.2.5", @@ -91,6 +100,7 @@ "rollup": "^2.28.2", "rollup-plugin-css-only": "^2.1.0", "rollup-plugin-esbuild": "^4.2.3", + "rollup-plugin-filesize": "^9.1.1", "rollup-plugin-terser": "^7.0.2", "rollup-plugin-typescript2": "^0.27.3", "rollup-plugin-vue": "^6.0.0", @@ -98,11 +108,12 @@ "sass-loader": "10.1.1", "style-loader": "^1.2.1", "throttle-debounce": "2.3.0", + "through2": "^4.0.2", "transliteration": "^2.1.11", "ts-loader": "^8.0.3", "ts-morph": "^11.0.3", - "ts-node": "^10.1.0", - "typescript": "^4.0.2", + "ts-node": "^10.2.0", + "typescript": "^4.3.5", "url-loader": "^4.1.0", "vue": "3.1.1", "vue-jest": "5.0.0-alpha.5", diff --git a/packages/affix/package.json b/packages/affix/package.json deleted file mode 100644 index 6dd008e6212cd..0000000000000 --- a/packages/affix/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/affix", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/alert/package.json b/packages/alert/package.json deleted file mode 100644 index 2398143a1179f..0000000000000 --- a/packages/alert/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/alert", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/aside/index.ts b/packages/aside/index.ts deleted file mode 100644 index 9124fee9fa322..0000000000000 --- a/packages/aside/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import Aside from '../container/src/aside.vue' - -Aside.install = (app: App): void => { - app.component(Aside.name, Aside) -} - -const _Aside: SFCWithInstall = Aside - -export default _Aside - diff --git a/packages/aside/package.json b/packages/aside/package.json deleted file mode 100644 index d75e7f40be65e..0000000000000 --- a/packages/aside/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/aside", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/autocomplete/package.json b/packages/autocomplete/package.json deleted file mode 100644 index fa0d6e5942968..0000000000000 --- a/packages/autocomplete/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/autocomplete", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/avatar/package.json b/packages/avatar/package.json deleted file mode 100644 index 66a49c28cdf39..0000000000000 --- a/packages/avatar/package.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "name": "@element-plus/avatar", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - }, - "dependencies": { - "@element-plus/utils": "^0.0.0" - } -} diff --git a/packages/backtop/package.json b/packages/backtop/package.json deleted file mode 100644 index 7753fa4b08680..0000000000000 --- a/packages/backtop/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/backtop", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/badge/package.json b/packages/badge/package.json deleted file mode 100644 index 78f64c69df8fa..0000000000000 --- a/packages/badge/package.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "name": "@element-plus/badge", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@element-plus/button": "^0.0.0", - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/breadcrumb-item/index.ts b/packages/breadcrumb-item/index.ts deleted file mode 100644 index f11deac86feab..0000000000000 --- a/packages/breadcrumb-item/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import BreadcrumbItem from '../breadcrumb/src/item.vue' - -BreadcrumbItem.install = (app: App): void => { - app.component(BreadcrumbItem.name, BreadcrumbItem) -} - -const _BreadcrumbItem: SFCWithInstall = BreadcrumbItem - -export default _BreadcrumbItem diff --git a/packages/breadcrumb-item/package.json b/packages/breadcrumb-item/package.json deleted file mode 100644 index 88bee24a19a95..0000000000000 --- a/packages/breadcrumb-item/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/breadcrumb-item", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/breadcrumb/index.ts b/packages/breadcrumb/index.ts deleted file mode 100644 index 2ffc902d0d455..0000000000000 --- a/packages/breadcrumb/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import Breadcrumb from './src/index.vue' - -Breadcrumb.install = (app: App): void => { - app.component(Breadcrumb.name, Breadcrumb) -} - -const _Breadcrumb: SFCWithInstall = Breadcrumb - -export default _Breadcrumb diff --git a/packages/breadcrumb/package.json b/packages/breadcrumb/package.json deleted file mode 100644 index 03fd8170378f1..0000000000000 --- a/packages/breadcrumb/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/breadcrumb", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/button-group/index.ts b/packages/button-group/index.ts deleted file mode 100644 index 61411cf2d513c..0000000000000 --- a/packages/button-group/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import ButtonGroup from '../button/src/button-group.vue' - -ButtonGroup.install = (app: App): void => { - app.component(ButtonGroup.name, ButtonGroup) -} - -const _ButtonGroup: SFCWithInstall = ButtonGroup - -export default _ButtonGroup diff --git a/packages/button-group/package.json b/packages/button-group/package.json deleted file mode 100644 index 3d8cdd44e3af7..0000000000000 --- a/packages/button-group/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/button-group", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/button/index.ts b/packages/button/index.ts deleted file mode 100644 index 7f4ff99ca4a65..0000000000000 --- a/packages/button/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import Button from './src/button.vue' - -Button.install = (app: App): void => { - app.component(Button.name, Button) -} - -const _Button: SFCWithInstall = Button - -export default _Button diff --git a/packages/button/package.json b/packages/button/package.json deleted file mode 100644 index 2dfd06b3e3aba..0000000000000 --- a/packages/button/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/button", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/calendar/package.json b/packages/calendar/package.json deleted file mode 100644 index e513af5d2f508..0000000000000 --- a/packages/calendar/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/calendar", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/card/package.json b/packages/card/package.json deleted file mode 100644 index 49edc00f8184b..0000000000000 --- a/packages/card/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/card", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/carousel-item/index.ts b/packages/carousel-item/index.ts deleted file mode 100644 index 9fd930cec42a6..0000000000000 --- a/packages/carousel-item/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import CarouselItem from '../carousel/src/item.vue' - -CarouselItem.install = (app: App): void => { - app.component(CarouselItem.name, CarouselItem) -} - -const _CarouselItem: SFCWithInstall = CarouselItem - -export default _CarouselItem diff --git a/packages/carousel-item/package.json b/packages/carousel-item/package.json deleted file mode 100644 index aa6a6aa2da02c..0000000000000 --- a/packages/carousel-item/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/carousel-item", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/carousel/index.ts b/packages/carousel/index.ts deleted file mode 100644 index c19151179c58e..0000000000000 --- a/packages/carousel/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import Carousel from './src/main.vue' - -Carousel.install = (app: App): void => { - app.component(Carousel.name, Carousel) -} - -const _Carousel: SFCWithInstall = Carousel - -export default _Carousel diff --git a/packages/carousel/package.json b/packages/carousel/package.json deleted file mode 100644 index 733db51cd5001..0000000000000 --- a/packages/carousel/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/carousel", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.0" - } -} diff --git a/packages/cascader-panel/package.json b/packages/cascader-panel/package.json deleted file mode 100644 index cc0919f60c9e9..0000000000000 --- a/packages/cascader-panel/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/cascader-panel", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/cascader/package.json b/packages/cascader/package.json deleted file mode 100644 index 6ecf122e8f601..0000000000000 --- a/packages/cascader/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/cascader", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/check-tag/package.json b/packages/check-tag/package.json deleted file mode 100644 index 09eb2490afc6a..0000000000000 --- a/packages/check-tag/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/check-tag", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/checkbox-button/index.ts b/packages/checkbox-button/index.ts deleted file mode 100644 index 2451d3df8eac9..0000000000000 --- a/packages/checkbox-button/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import CheckboxButton from '../checkbox/src/checkbox-button.vue' - -CheckboxButton.install = (app: App): void => { - app.component(CheckboxButton.name, CheckboxButton) -} - -const _CheckboxButton: SFCWithInstall = CheckboxButton - -export default _CheckboxButton diff --git a/packages/checkbox-button/package.json b/packages/checkbox-button/package.json deleted file mode 100644 index d9467b3ae0709..0000000000000 --- a/packages/checkbox-button/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/checkbox-button", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/checkbox-group/index.ts b/packages/checkbox-group/index.ts deleted file mode 100644 index 32455c28aeebe..0000000000000 --- a/packages/checkbox-group/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import CheckboxGroup from '../checkbox/src/checkbox-group.vue' - -CheckboxGroup.install = (app: App): void => { - app.component(CheckboxGroup.name, CheckboxGroup) -} - -const _CheckboxGroup: SFCWithInstall = CheckboxGroup - -export default _CheckboxGroup diff --git a/packages/checkbox-group/package.json b/packages/checkbox-group/package.json deleted file mode 100644 index 729ab949bdcf8..0000000000000 --- a/packages/checkbox-group/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/checkbox-group", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/checkbox/index.ts b/packages/checkbox/index.ts deleted file mode 100644 index 8aea36ea42fb3..0000000000000 --- a/packages/checkbox/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import Checkbox from './src/checkbox.vue' - -Checkbox.install = (app: App): void => { - app.component(Checkbox.name, Checkbox) -} - -const _Checkbox: SFCWithInstall = Checkbox - -export default _Checkbox diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json deleted file mode 100644 index 6aa4b0eee9a1c..0000000000000 --- a/packages/checkbox/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/checkbox", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/col/package.json b/packages/col/package.json deleted file mode 100644 index b6598bc872fd3..0000000000000 --- a/packages/col/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/col", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/collapse-item/index.ts b/packages/collapse-item/index.ts deleted file mode 100644 index b3cce500646ae..0000000000000 --- a/packages/collapse-item/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import CollapseItem from '../collapse/src/collapse-item.vue' - -CollapseItem.install = (app: App): void => { - app.component(CollapseItem.name, CollapseItem) -} - -const _CollapseItem: SFCWithInstall = CollapseItem - -export default _CollapseItem diff --git a/packages/collapse-item/package.json b/packages/collapse-item/package.json deleted file mode 100644 index fed21a8955393..0000000000000 --- a/packages/collapse-item/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/collapse-item", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/collapse-transition/index.ts b/packages/collapse-transition/index.ts deleted file mode 100644 index c15dbc7efdf44..0000000000000 --- a/packages/collapse-transition/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import CollapseTransition from '../transition/collapse-transition/index.vue' - -CollapseTransition.install = (app: App): void => { - app.component(CollapseTransition.name, CollapseTransition) -} - -const _CollapseTransition: SFCWithInstall = CollapseTransition - -export default _CollapseTransition diff --git a/packages/collapse-transition/package.json b/packages/collapse-transition/package.json deleted file mode 100644 index 3227f8b8aa25c..0000000000000 --- a/packages/collapse-transition/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/collapse-transition", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/collapse/index.ts b/packages/collapse/index.ts deleted file mode 100644 index 8afeacdcb0762..0000000000000 --- a/packages/collapse/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import Collapse from './src/collapse.vue' - -Collapse.install = (app: App): void => { - app.component(Collapse.name, Collapse) -} - -const _Collapse: SFCWithInstall = Collapse - -export default _Collapse diff --git a/packages/collapse/package.json b/packages/collapse/package.json deleted file mode 100644 index 93cfaac8b8047..0000000000000 --- a/packages/collapse/package.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "name": "@element-plus/collapse", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "dependencies": { - "mitt": "^2.1.0", - "@element-plus/utils": "^0.0.0" - }, - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/color-picker/package.json b/packages/color-picker/package.json deleted file mode 100644 index bc4bce881ee63..0000000000000 --- a/packages/color-picker/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/color-picker", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.0" - } -} diff --git a/packages/affix/__tests__/affix.spec.ts b/packages/components/affix/__tests__/affix.spec.ts similarity index 100% rename from packages/affix/__tests__/affix.spec.ts rename to packages/components/affix/__tests__/affix.spec.ts index acc92ac0a80f6..230b67d57a2ca 100644 --- a/packages/affix/__tests__/affix.spec.ts +++ b/packages/components/affix/__tests__/affix.spec.ts @@ -1,6 +1,6 @@ import { mount } from '@vue/test-utils' -import Affix from '../src/index.vue' import { defineGetter, makeScroll } from '@element-plus/test-utils' +import Affix from '../src/index.vue' let clientHeightRestore = null diff --git a/packages/affix/index.ts b/packages/components/affix/index.ts similarity index 63% rename from packages/affix/index.ts rename to packages/components/affix/index.ts index b3a8f07506354..56b0bd3b4fded 100644 --- a/packages/affix/index.ts +++ b/packages/components/affix/index.ts @@ -1,11 +1,14 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' import Affix from './src/index.vue' +import type { App } from 'vue' +import type { SFCWithInstall } from '@element-plus/utils/types' + Affix.install = (app: App): void => { + app.component(Affix.name, Affix) } -const _Affix: SFCWithInstall = Affix +const _Affix = Affix as SFCWithInstall export default _Affix +export const ElAffix = _Affix diff --git a/packages/affix/src/index.vue b/packages/components/affix/src/index.vue similarity index 98% rename from packages/affix/src/index.vue rename to packages/components/affix/src/index.vue index 4d0245b0fb504..1132bda2f282e 100644 --- a/packages/affix/src/index.vue +++ b/packages/components/affix/src/index.vue @@ -6,10 +6,12 @@ diff --git a/packages/container/src/container.vue b/packages/components/container/src/container.vue similarity index 90% rename from packages/container/src/container.vue rename to packages/components/container/src/container.vue index 1ad1c7f785cc7..0a63f55822dab 100644 --- a/packages/container/src/container.vue +++ b/packages/components/container/src/container.vue @@ -4,7 +4,9 @@ diff --git a/packages/components/container/src/header.vue b/packages/components/container/src/header.vue new file mode 100644 index 0000000000000..63f508ebf6f30 --- /dev/null +++ b/packages/components/container/src/header.vue @@ -0,0 +1,29 @@ + + diff --git a/packages/container/src/main.vue b/packages/components/container/src/main.vue similarity index 100% rename from packages/container/src/main.vue rename to packages/components/container/src/main.vue diff --git a/packages/components/container/style/css.ts b/packages/components/container/style/css.ts new file mode 100644 index 0000000000000..29d859ddd06a0 --- /dev/null +++ b/packages/components/container/style/css.ts @@ -0,0 +1,2 @@ +import '@element-plus/components/base/style/css' +import '@element-plus/theme-chalk/el-container.css' diff --git a/packages/components/container/style/index.ts b/packages/components/container/style/index.ts new file mode 100644 index 0000000000000..a121426cef38a --- /dev/null +++ b/packages/components/container/style/index.ts @@ -0,0 +1,2 @@ +import '@element-plus/components/base/style' +import '@element-plus/theme-chalk/src/container.scss' diff --git a/packages/date-picker/__tests__/date-picker.spec.ts b/packages/components/date-picker/__tests__/date-picker.spec.ts similarity index 99% rename from packages/date-picker/__tests__/date-picker.spec.ts rename to packages/components/date-picker/__tests__/date-picker.spec.ts index 286c04be23f4b..f1e316f4028df 100644 --- a/packages/date-picker/__tests__/date-picker.spec.ts +++ b/packages/components/date-picker/__tests__/date-picker.spec.ts @@ -1,5 +1,6 @@ -import ConfigProvider from '@element-plus/config-provider' -import { CommonPicker } from '@element-plus/time-picker' +import ConfigProvider from '@element-plus/components/config-provider' +import { CommonPicker } from '@element-plus/components/time-picker' +import Input from '@element-plus/components/input' import { mount } from '@vue/test-utils' import zhCn from '@element-plus/locale/lang/zh-cn' import enUs from '@element-plus/locale/lang/en' @@ -7,7 +8,6 @@ import dayjs from 'dayjs' import 'dayjs/locale/zh-cn' import { nextTick } from 'vue' import DatePicker from '../src/date-picker' -import Input from '@element-plus/input' const _mount = (template: string, data = () => ({}), otherObj?) => mount({ components: { diff --git a/packages/date-picker/__tests__/date-time-picker.spec.ts b/packages/components/date-picker/__tests__/date-time-picker.spec.ts similarity index 100% rename from packages/date-picker/__tests__/date-time-picker.spec.ts rename to packages/components/date-picker/__tests__/date-time-picker.spec.ts index 40c4a3e8f041e..f55ce33afee72 100644 --- a/packages/date-picker/__tests__/date-time-picker.spec.ts +++ b/packages/components/date-picker/__tests__/date-time-picker.spec.ts @@ -1,6 +1,6 @@ +import dayjs from 'dayjs' import { triggerEvent } from '@element-plus/test-utils' import { mount } from '@vue/test-utils' -import dayjs from 'dayjs' import { nextTick } from 'vue' import DatePicker from '../src/date-picker' diff --git a/packages/date-picker/index.ts b/packages/components/date-picker/index.ts similarity index 51% rename from packages/date-picker/index.ts rename to packages/components/date-picker/index.ts index b5ee38080d899..92643bb3094b4 100644 --- a/packages/date-picker/index.ts +++ b/packages/components/date-picker/index.ts @@ -1,11 +1,13 @@ import DatePicker from './src/date-picker' + +import type { App } from 'vue' import type { SFCWithInstall } from '@element-plus/utils/types' -const _DatePicker: SFCWithInstall = DatePicker as SFCWithInstall +const _DatePicker = DatePicker as SFCWithInstall -_DatePicker.install = app => { +_DatePicker.install = (app: App) => { app.component(_DatePicker.name, _DatePicker) } - export default _DatePicker +export const ElDatePicker = _DatePicker diff --git a/packages/date-picker/src/date-picker-com/basic-date-table.vue b/packages/components/date-picker/src/date-picker-com/basic-date-table.vue similarity index 99% rename from packages/date-picker/src/date-picker-com/basic-date-table.vue rename to packages/components/date-picker/src/date-picker-com/basic-date-table.vue index 22a0f2ad0dd67..7a940bb108dba 100644 --- a/packages/date-picker/src/date-picker-com/basic-date-table.vue +++ b/packages/components/date-picker/src/date-picker-com/basic-date-table.vue @@ -35,19 +35,19 @@ diff --git a/packages/components/tabs/src/token.ts b/packages/components/tabs/src/token.ts new file mode 100644 index 0000000000000..7cfebcaf3253a --- /dev/null +++ b/packages/components/tabs/src/token.ts @@ -0,0 +1,49 @@ +import type { + ComponentInternalInstance, + ComputedRef, + Ref, +} from 'vue' + +export type BeforeLeave = ( + newTabName: string, + oldTabName: string, +) => void | Promise | boolean + +export type ITabType = 'card' | 'border-card' | '' +export type ITabPosition = 'top' | 'right' | 'bottom' | 'left' +export type UpdatePaneStateCallback = (pane: Pane) => void + +export interface IElTabsProps { + type: ITabType + activeName: string + closable: boolean + addable: boolean + modelValue: string + editable: boolean + tabPosition: ITabPosition + beforeLeave: BeforeLeave + stretch: boolean +} + +export interface RootTabs { + props: IElTabsProps + currentName: Ref +} + +export interface IElPaneProps { + label: string + name: string + closable: boolean + disabled: boolean + lazy: boolean +} + +export interface Pane { + uid: number + instance: ComponentInternalInstance + props: IElPaneProps + paneName: ComputedRef + active: ComputedRef + index: Ref + isClosable: ComputedRef +} diff --git a/packages/components/tabs/style/css.ts b/packages/components/tabs/style/css.ts new file mode 100644 index 0000000000000..68a600eae568a --- /dev/null +++ b/packages/components/tabs/style/css.ts @@ -0,0 +1,2 @@ +import '@element-plus/components/base/style/css' +import '@element-plus/theme-chalk/el-tabs.css' diff --git a/packages/components/tabs/style/index.ts b/packages/components/tabs/style/index.ts new file mode 100644 index 0000000000000..690fab6223c45 --- /dev/null +++ b/packages/components/tabs/style/index.ts @@ -0,0 +1,2 @@ +import '@element-plus/components/base/style' +import '@element-plus/theme-chalk/src/tabs.scss' diff --git a/packages/tag/__tests__/tag.spec.ts b/packages/components/tag/__tests__/tag.spec.ts similarity index 100% rename from packages/tag/__tests__/tag.spec.ts rename to packages/components/tag/__tests__/tag.spec.ts diff --git a/packages/tag/index.ts b/packages/components/tag/index.ts similarity index 64% rename from packages/tag/index.ts rename to packages/components/tag/index.ts index f17958ed1e62a..35133ac6df057 100644 --- a/packages/tag/index.ts +++ b/packages/components/tag/index.ts @@ -1,11 +1,13 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' import Tag from './src/index.vue' +import type { App } from 'vue' +import type { SFCWithInstall } from '@element-plus/utils/types' + Tag.install = (app: App): void => { app.component(Tag.name, Tag) } -const _Tag: SFCWithInstall = Tag +const _Tag = Tag as SFCWithInstall export default _Tag +export const ElTag = _Tag diff --git a/packages/tag/src/index.vue b/packages/components/tag/src/index.vue similarity index 97% rename from packages/tag/src/index.vue rename to packages/components/tag/src/index.vue index ab79714408464..ab0df88331b98 100644 --- a/packages/tag/src/index.vue +++ b/packages/components/tag/src/index.vue @@ -34,6 +34,7 @@ import { useGlobalConfig } from '@element-plus/utils/util' import { isValidComponentSize } from '@element-plus/utils/validators' import type { PropType } from 'vue' +import type { ComponentSize } from '@element-plus/utils/types' export default defineComponent({ name: 'ElTag', diff --git a/packages/components/tag/style/css.ts b/packages/components/tag/style/css.ts new file mode 100644 index 0000000000000..09648fccdf49c --- /dev/null +++ b/packages/components/tag/style/css.ts @@ -0,0 +1,2 @@ +import '@element-plus/components/base/style/css' +import '@element-plus/theme-chalk/el-tag.css' diff --git a/packages/components/tag/style/index.ts b/packages/components/tag/style/index.ts new file mode 100644 index 0000000000000..724f10c69a3cb --- /dev/null +++ b/packages/components/tag/style/index.ts @@ -0,0 +1,2 @@ +import '@element-plus/components/base/style' +import '@element-plus/theme-chalk/src/tag.scss' diff --git a/packages/time-picker/__tests__/time-picker.spec.ts b/packages/components/time-picker/__tests__/time-picker.spec.ts similarity index 100% rename from packages/time-picker/__tests__/time-picker.spec.ts rename to packages/components/time-picker/__tests__/time-picker.spec.ts index f0067716b15c5..5c5e34efe9945 100644 --- a/packages/time-picker/__tests__/time-picker.spec.ts +++ b/packages/components/time-picker/__tests__/time-picker.spec.ts @@ -1,9 +1,9 @@ -import { mount } from '@vue/test-utils' import { nextTick } from 'vue' +import dayjs from 'dayjs' +import { mount } from '@vue/test-utils' +import { triggerEvent } from '@element-plus/test-utils' import TimePicker from '../src/time-picker' import Picker from '../src/common/picker.vue' -import { triggerEvent } from '@element-plus/test-utils' -import dayjs from 'dayjs' const _mount = (template: string, data, otherObj?) => mount({ components: { diff --git a/packages/time-picker/index.ts b/packages/components/time-picker/index.ts similarity index 71% rename from packages/time-picker/index.ts rename to packages/components/time-picker/index.ts index 656880b67af0c..c50ad3478e132 100644 --- a/packages/time-picker/index.ts +++ b/packages/components/time-picker/index.ts @@ -1,16 +1,20 @@ import TimePicker from './src/time-picker' import CommonPicker from './src/common/picker.vue' import TimePickPanel from './src/time-picker-com/panel-time-pick.vue' + +import type { App } from 'vue' import type { SFCWithInstall } from '@element-plus/utils/types' + export * from './src/common/date-utils' export * from './src/common/constant' export * from './src/common/props' -const _TimePicker: SFCWithInstall = TimePicker as SFCWithInstall +const _TimePicker = TimePicker as SFCWithInstall -_TimePicker.install = app => { +_TimePicker.install = (app: App) => { app.component(_TimePicker.name, _TimePicker) } export { CommonPicker, TimePickPanel } export default _TimePicker +export const ElTimePicker = _TimePicker diff --git a/packages/time-picker/src/common/constant.ts b/packages/components/time-picker/src/common/constant.ts similarity index 100% rename from packages/time-picker/src/common/constant.ts rename to packages/components/time-picker/src/common/constant.ts diff --git a/packages/time-picker/src/common/date-utils.ts b/packages/components/time-picker/src/common/date-utils.ts similarity index 72% rename from packages/time-picker/src/common/date-utils.ts rename to packages/components/time-picker/src/common/date-utils.ts index f7d69188b8918..c8faa509b19af 100644 --- a/packages/time-picker/src/common/date-utils.ts +++ b/packages/components/time-picker/src/common/date-utils.ts @@ -2,14 +2,14 @@ export const rangeArr = n => { return Array.from(Array(n).keys()) } -export const extractDateFormat = format => { +export const extractDateFormat = (format: string) => { return format .replace(/\W?m{1,2}|\W?ZZ/g, '') .replace(/\W?h{1,2}|\W?s{1,3}|\W?a/gi, '') .trim() } -export const extractTimeFormat = format => { +export const extractTimeFormat = (format: string) => { return format .replace(/\W?D{1,2}|\W?Do|\W?d{1,4}|\W?M{1,4}|\W?Y{2,4}/g, '') .trim() diff --git a/packages/time-picker/src/common/picker.vue b/packages/components/time-picker/src/common/picker.vue similarity index 96% rename from packages/time-picker/src/common/picker.vue rename to packages/components/time-picker/src/common/picker.vue index ac49d6b2d3f5a..ea936a4172565 100644 --- a/packages/time-picker/src/common/picker.vue +++ b/packages/components/time-picker/src/common/picker.vue @@ -132,17 +132,19 @@ import { watch, provide, } from 'vue' -import dayjs, { Dayjs } from 'dayjs' +import dayjs from 'dayjs' import isEqual from 'lodash/isEqual' import { useLocaleInject } from '@element-plus/hooks' import { ClickOutside } from '@element-plus/directives' -import ElInput from '@element-plus/input' -import ElPopper from '@element-plus/popper' +import { elFormKey, elFormItemKey } from '@element-plus/tokens' +import ElInput from '@element-plus/components/input' +import ElPopper from '@element-plus/components/popper' import { EVENT_CODE } from '@element-plus/utils/aria' import { useGlobalConfig, isEmpty } from '@element-plus/utils/util' -import { elFormKey, elFormItemKey } from '@element-plus/form' -import { defaultProps } from './props' -import type { ElFormContext, ElFormItemContext } from '@element-plus/form' +import { timePickerDefaultProps } from './props' + +import type { Dayjs } from 'dayjs' +import type { ElFormContext, ElFormItemContext } from '@element-plus/tokens' import type { Options } from '@popperjs/core' interface PickerOptions { @@ -157,7 +159,7 @@ interface PickerOptions { } // Date object and string -const dateEquals = function(a, b) { +const dateEquals = function(a: Date | any, b: Date | any) { const aIsDate = a instanceof Date const bIsDate = b instanceof Date if (aIsDate && bIsDate) { @@ -169,14 +171,14 @@ const dateEquals = function(a, b) { return false } -const valueEquals = function(a, b) { +const valueEquals = function(a: Array | any, b: Array | any) { const aIsArray = a instanceof Array const bIsArray = b instanceof Array if (aIsArray && bIsArray) { if (a.length !== b.length) { return false } - return a.every((item, index) => dateEquals(item, b[index])) + return (a as Array).every((item, index) => dateEquals(item, b[index])) } if (!aIsArray && !bIsArray) { return dateEquals(a, b) @@ -202,7 +204,7 @@ export default defineComponent({ ElPopper, }, directives: { clickoutside: ClickOutside }, - props: defaultProps, + props: timePickerDefaultProps, emits: ['update:modelValue', 'change', 'focus', 'blur', 'calendar-change'], setup(props, ctx) { const ELEMENT = useGlobalConfig() diff --git a/packages/time-picker/src/common/props.ts b/packages/components/time-picker/src/common/props.ts similarity index 94% rename from packages/time-picker/src/common/props.ts rename to packages/components/time-picker/src/common/props.ts index 0d06faf8b3a69..dc7110a6d793a 100644 --- a/packages/time-picker/src/common/props.ts +++ b/packages/components/time-picker/src/common/props.ts @@ -1,7 +1,10 @@ import { isValidComponentSize } from '@element-plus/utils/validators' + import type { PropType } from 'vue' import type { Options } from '@popperjs/core' -export const defaultProps = { +import type { ComponentSize } from '@element-plus/utils/types' + +export const timePickerDefaultProps = { name: { type: [Array, String], default: '', diff --git a/packages/time-picker/src/time-picker-com/basic-time-spinner.vue b/packages/components/time-picker/src/time-picker-com/basic-time-spinner.vue similarity index 98% rename from packages/time-picker/src/time-picker-com/basic-time-spinner.vue rename to packages/components/time-picker/src/time-picker-com/basic-time-spinner.vue index c90bc8c1513ef..8e59920642515 100644 --- a/packages/time-picker/src/time-picker-com/basic-time-spinner.vue +++ b/packages/components/time-picker/src/time-picker-com/basic-time-spinner.vue @@ -61,15 +61,15 @@ import { onMounted, Ref, watch, - PropType, } from 'vue' -import { Dayjs } from 'dayjs' import debounce from 'lodash/debounce' import { RepeatClick } from '@element-plus/directives' -import ElScrollbar from '@element-plus/scrollbar' +import ElScrollbar from '@element-plus/components/scrollbar' import { getTimeLists } from './useTimePicker' -export type Nullable = null | T +import type { PropType } from 'vue' +import type { Dayjs } from 'dayjs' +import type { Nullable } from '@element-plus/utils/types' export default defineComponent({ diff --git a/packages/time-picker/src/time-picker-com/panel-time-pick.vue b/packages/components/time-picker/src/time-picker-com/panel-time-pick.vue similarity index 98% rename from packages/time-picker/src/time-picker-com/panel-time-pick.vue rename to packages/components/time-picker/src/time-picker-com/panel-time-pick.vue index 9669e464c69bd..41fe0e51d2eae 100644 --- a/packages/time-picker/src/time-picker-com/panel-time-pick.vue +++ b/packages/components/time-picker/src/time-picker-com/panel-time-pick.vue @@ -43,14 +43,16 @@ import { ref, computed, inject, - PropType, } from 'vue' +import dayjs from 'dayjs' import { EVENT_CODE } from '@element-plus/utils/aria' import { useLocaleInject } from '@element-plus/hooks' import TimeSpinner from './basic-time-spinner.vue' -import dayjs, { Dayjs } from 'dayjs' import { getAvailableArrs, useOldValue } from './useTimePicker' +import type { PropType } from 'vue' +import type { Dayjs } from 'dayjs' + export default defineComponent({ components: { TimeSpinner, diff --git a/packages/time-picker/src/time-picker-com/panel-time-range.vue b/packages/components/time-picker/src/time-picker-com/panel-time-range.vue similarity index 98% rename from packages/time-picker/src/time-picker-com/panel-time-range.vue rename to packages/components/time-picker/src/time-picker-com/panel-time-range.vue index 3a3de921b0915..0d1a8b56a636a 100644 --- a/packages/time-picker/src/time-picker-com/panel-time-range.vue +++ b/packages/components/time-picker/src/time-picker-com/panel-time-range.vue @@ -71,17 +71,19 @@ import { defineComponent, ref, computed, - PropType, inject, } from 'vue' -import dayjs, { Dayjs } from 'dayjs' +import dayjs from 'dayjs' import union from 'lodash/union' import { useLocaleInject } from '@element-plus/hooks' import { EVENT_CODE } from '@element-plus/utils/aria' import TimeSpinner from './basic-time-spinner.vue' import { getAvailableArrs, useOldValue } from './useTimePicker' -const makeSelectRange = (start, end) => { +import type { PropType } from 'vue' +import type { Dayjs } from 'dayjs' + +const makeSelectRange = (start: number, end: number) => { const result = [] for (let i = start; i <= end; i++) { result.push(i) @@ -176,7 +178,7 @@ export default defineComponent({ } } - const handleKeydown = event => { + const handleKeydown = (event: KeyboardEvent) => { const code = event.code if (code === EVENT_CODE.left || code === EVENT_CODE.right) { diff --git a/packages/time-picker/src/time-picker-com/useTimePicker.ts b/packages/components/time-picker/src/time-picker-com/useTimePicker.ts similarity index 98% rename from packages/time-picker/src/time-picker-com/useTimePicker.ts rename to packages/components/time-picker/src/time-picker-com/useTimePicker.ts index a142a80dab8cf..78d8787d4c40c 100644 --- a/packages/time-picker/src/time-picker-com/useTimePicker.ts +++ b/packages/components/time-picker/src/time-picker-com/useTimePicker.ts @@ -1,5 +1,6 @@ import { ref, watch } from 'vue' -import { Dayjs } from 'dayjs' + +import type { Dayjs } from 'dayjs' const makeList = (total, method, methodFunc) => { const arr = [] diff --git a/packages/time-picker/src/time-picker.ts b/packages/components/time-picker/src/time-picker.ts similarity index 94% rename from packages/time-picker/src/time-picker.ts rename to packages/components/time-picker/src/time-picker.ts index c7bef7cde68c3..4370ba22d821a 100644 --- a/packages/time-picker/src/time-picker.ts +++ b/packages/components/time-picker/src/time-picker.ts @@ -5,14 +5,14 @@ import { DEFAULT_FORMATS_TIME } from './common/constant' import Picker from './common/picker.vue' import TimePickPanel from './time-picker-com/panel-time-pick.vue' import TimeRangePanel from './time-picker-com/panel-time-range.vue' -import { defaultProps } from './common/props' +import { timePickerDefaultProps } from './common/props' dayjs.extend(customParseFormat) export default defineComponent({ name: 'ElTimePicker', install: null, props: { - ...defaultProps, + ...timePickerDefaultProps, isRange: { type: Boolean, default: false, diff --git a/packages/components/time-picker/style/css.ts b/packages/components/time-picker/style/css.ts new file mode 100644 index 0000000000000..1518ee24f0a77 --- /dev/null +++ b/packages/components/time-picker/style/css.ts @@ -0,0 +1,5 @@ +import '@element-plus/components/base/style/css' +import '@element-plus/theme-chalk/el-time-picker.css' +import '@element-plus/components/input/style/css' +import '@element-plus/components/scrollbar/style/css' +import '@element-plus/components/popper/style/css' diff --git a/packages/components/time-picker/style/index.ts b/packages/components/time-picker/style/index.ts new file mode 100644 index 0000000000000..fbd350576a785 --- /dev/null +++ b/packages/components/time-picker/style/index.ts @@ -0,0 +1,5 @@ +import '@element-plus/components/base/style' +import '@element-plus/theme-chalk/src/time-picker.scss' +import '@element-plus/components/input/style/index' +import '@element-plus/components/scrollbar/style/index' +import '@element-plus/components/popper/style/index' diff --git a/packages/time-select/__tests__/time-select.spec.ts b/packages/components/time-select/__tests__/time-select.spec.ts similarity index 98% rename from packages/time-select/__tests__/time-select.spec.ts rename to packages/components/time-select/__tests__/time-select.spec.ts index 0cd43555898d4..1c5e05c0e6fa4 100644 --- a/packages/time-select/__tests__/time-select.spec.ts +++ b/packages/components/time-select/__tests__/time-select.spec.ts @@ -1,8 +1,10 @@ -import { mount } from '@vue/test-utils' import { nextTick } from 'vue' -import Option from '@element-plus/option' -import TimeSelect from '../src/time-select.vue' +import { mount } from '@vue/test-utils' +import Select from '@element-plus/components/select' import { sleep } from '@element-plus/test-utils' +import TimeSelect from '../src/time-select.vue' + +const { Option } = Select const _mount = (template: string, data, otherObj?) => mount( diff --git a/packages/time-select/index.ts b/packages/components/time-select/index.ts similarity index 62% rename from packages/time-select/index.ts rename to packages/components/time-select/index.ts index 8d3023fc23619..c94e5c0146ad0 100644 --- a/packages/time-select/index.ts +++ b/packages/components/time-select/index.ts @@ -1,11 +1,13 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' import TimeSelect from './src/time-select.vue' +import type { App } from 'vue' +import type { SFCWithInstall } from '@element-plus/utils/types' + TimeSelect.install = (app: App): void => { app.component(TimeSelect.name, TimeSelect) } -const _TimeSelect: SFCWithInstall = TimeSelect +const _TimeSelect = TimeSelect as SFCWithInstall export default _TimeSelect +export const ElTimeSelect = _TimeSelect diff --git a/packages/time-select/src/time-select.vue b/packages/components/time-select/src/time-select.vue similarity index 97% rename from packages/time-select/src/time-select.vue rename to packages/components/time-select/src/time-select.vue index 072a3295ad415..d9e4850c97325 100644 --- a/packages/time-select/src/time-select.vue +++ b/packages/components/time-select/src/time-select.vue @@ -29,8 +29,9 @@ diff --git a/packages/container/src/footer.vue b/packages/container/src/footer.vue deleted file mode 100644 index 97cb50ac02c72..0000000000000 --- a/packages/container/src/footer.vue +++ /dev/null @@ -1,18 +0,0 @@ - - diff --git a/packages/container/src/header.vue b/packages/container/src/header.vue deleted file mode 100644 index 3b3c24a4edc43..0000000000000 --- a/packages/container/src/header.vue +++ /dev/null @@ -1,18 +0,0 @@ - - diff --git a/packages/date-picker/package.json b/packages/date-picker/package.json deleted file mode 100644 index 5785d9b7551a0..0000000000000 --- a/packages/date-picker/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/date-picker", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/descriptions-item/index.ts b/packages/descriptions-item/index.ts deleted file mode 100644 index 7a4a3bb794edd..0000000000000 --- a/packages/descriptions-item/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import DescriptionsItem from '../descriptions/src/description-item' - -DescriptionsItem.install = (app: App): void => { - app.component(DescriptionsItem.name, DescriptionsItem) -} - -const _DescriptionsItem: SFCWithInstall = DescriptionsItem - -export default _DescriptionsItem diff --git a/packages/descriptions-item/package.json b/packages/descriptions-item/package.json deleted file mode 100644 index c3929ffd92d7f..0000000000000 --- a/packages/descriptions-item/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/descriptions-item", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/descriptions/index.ts b/packages/descriptions/index.ts deleted file mode 100644 index 9cc1178329fe3..0000000000000 --- a/packages/descriptions/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import Descriptions from './src/index.vue' - -Descriptions.install = (app: App): void => { - app.component(Descriptions.name, Descriptions) -} - -const _Descriptions: SFCWithInstall = Descriptions - -export default _Descriptions diff --git a/packages/descriptions/package.json b/packages/descriptions/package.json deleted file mode 100644 index 2090cea2be7b9..0000000000000 --- a/packages/descriptions/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/descriptions", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/descriptions/src/descriptions.type.ts b/packages/descriptions/src/descriptions.type.ts deleted file mode 100644 index 48cc16019801d..0000000000000 --- a/packages/descriptions/src/descriptions.type.ts +++ /dev/null @@ -1,26 +0,0 @@ -import type { PropType } from 'vue' - -interface IDescriptionsInject { - border: boolean - column: number - direction: PropType<'horizontal' | 'vertical'> - size: PropType - title: string - extra: string -} - -interface IDescriptionsItemInject { - label: string - span: number - width: string | number - minWidth: string | number - align: string - labelAlign: string - className: string - labelClassName: string -} - -export { - IDescriptionsInject, - IDescriptionsItemInject, -} diff --git a/packages/dialog/package.json b/packages/dialog/package.json deleted file mode 100644 index 66cd03f4d1f87..0000000000000 --- a/packages/dialog/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/dialog", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.0" - } -} diff --git a/packages/dialog/src/dialog.ts b/packages/dialog/src/dialog.ts deleted file mode 100644 index ba3678f88a351..0000000000000 --- a/packages/dialog/src/dialog.ts +++ /dev/null @@ -1,14 +0,0 @@ -export interface UseDialogProps { - beforeClose?: (close: (shouldCancel: boolean) => void) => void - closeOnClickModal: boolean - closeOnPressEscape: boolean - closeDelay: number - destroyOnClose: boolean - fullscreen?: boolean - lockScroll: boolean - modelValue: boolean - openDelay: number - top?: string - width?: string - zIndex?: number -} diff --git a/packages/directives/click-outside/index.ts b/packages/directives/click-outside/index.ts index 8fdfdcfb495dd..332915bb910fc 100644 --- a/packages/directives/click-outside/index.ts +++ b/packages/directives/click-outside/index.ts @@ -1,11 +1,14 @@ import { on } from '@element-plus/utils/dom' import isServer from '@element-plus/utils/isServer' -import type { ComponentPublicInstance, DirectiveBinding, ObjectDirective } from 'vue' -type Nullable = null | T +import type { + ComponentPublicInstance, + DirectiveBinding, + ObjectDirective, +} from 'vue' +import type { Nullable } from '@element-plus/utils/types' type DocumentHandler = (mouseup: T, mousedown: T) => void; - type FlushList = Map< HTMLElement, { diff --git a/packages/directives/gulpfile.ts b/packages/directives/gulpfile.ts new file mode 100644 index 0000000000000..997441b2a0d0a --- /dev/null +++ b/packages/directives/gulpfile.ts @@ -0,0 +1,57 @@ +import gulp from 'gulp' +import ts from 'gulp-typescript' +import path from 'path' +import { buildOutput } from '../../build/paths' +import rewriter from '../../build/gulp-rewriter' + +export const esm = './es' +export const cjs = './lib' +const tsProject = ts.createProject('tsconfig.json') + +const inputs = [ + './**/*.ts', + '!./node_modules', + '!./__tests__/*.ts', + '!./gulpfile.ts', +] + +function compileEsm() { + return gulp + .src(inputs) + .pipe(tsProject()) + .pipe(rewriter()) + .pipe(gulp.dest(esm)) +} + +function compileCjs() { + return gulp + .src(inputs) + .pipe( + ts.createProject('tsconfig.json', { + module: 'commonjs', + })(), + ) + .pipe(rewriter()) + .pipe(gulp.dest(cjs)) +} + +const distBundle = path.resolve(buildOutput, './element-plus') + +/** + * copy from packages/theme-chalk/lib to dist/theme-chalk + */ +function copyEsm() { + return gulp + .src(esm + '/**') + .pipe(gulp.dest(path.resolve(distBundle, 'es/directives'))) +} + +function copyCjs() { + return gulp + .src(cjs + '/**') + .pipe(gulp.dest(path.resolve(distBundle, 'lib/directives'))) +} + +export const build = gulp.series(compileEsm, compileCjs, copyEsm, copyCjs) + +export default build diff --git a/packages/directives/mousewheel/index.ts b/packages/directives/mousewheel/index.ts index 1bc601b4e0a87..06ff44ffb51e5 100644 --- a/packages/directives/mousewheel/index.ts +++ b/packages/directives/mousewheel/index.ts @@ -1,4 +1,5 @@ import normalizeWheel from 'normalize-wheel' + import type { ObjectDirective } from 'vue' const isFirefox = diff --git a/packages/directives/package.json b/packages/directives/package.json index a3efba98277a9..ebb6827af383c 100644 --- a/packages/directives/package.json +++ b/packages/directives/package.json @@ -1,12 +1,32 @@ { "name": "@element-plus/directives", - "version": "0.0.0", - "main": "dist/index.js", + "description": "Element Plus directives", + "version": "0.0.5", + "main": "index.js", + "module": "index.js", + "unpkg": "index.js", + "jsdelivr": "index.js", "license": "MIT", "peerDependencies": { "vue": "3.1.1" }, + "scripts": { + "clean": "rm -rf lib", + "build": "gulp build" + }, + "dependencies": { + "@element-plus/utils": "^0.0.5", + "normalize-wheel": "^1.0.1" + }, "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} + "@vue/test-utils": "^2.0.0-beta.3", + "@element-plus/test-utils": "^0.0.5", + "chalk": "^4.1.2", + "gulp": "^4.0.2", + "gulp-typescript": "^6.0.0-alpha.1", + "sass": "^1.37.0", + "ts-node": "^10.1.0", + "typescript": "^4.3.5" + }, + "gitHead": "c69724230befa8fede0e6b9c37fb0b7e39fd7cdd" +} \ No newline at end of file diff --git a/packages/directives/repeat-click/index.ts b/packages/directives/repeat-click/index.ts index 1a36d0582f5e3..c85779c35c436 100644 --- a/packages/directives/repeat-click/index.ts +++ b/packages/directives/repeat-click/index.ts @@ -1,6 +1,7 @@ import { on, once } from '@element-plus/utils/dom' import type { ObjectDirective } from 'vue' + export default { beforeMount(el, binding) { let interval = null diff --git a/packages/directives/tsconfig.json b/packages/directives/tsconfig.json new file mode 100644 index 0000000000000..003fd496ff4a0 --- /dev/null +++ b/packages/directives/tsconfig.json @@ -0,0 +1,11 @@ +{ + "compilerOptions": { + "esModuleInterop": true, + "rootDir": ".", + "declaration": true, + "lib": ["ES2020", "DOM"], + "skipLibCheck": true, + "target": "es6", + "moduleResolution": "node" + }, +} diff --git a/packages/divider/package.json b/packages/divider/package.json deleted file mode 100644 index 013eb83b9ca72..0000000000000 --- a/packages/divider/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/divider", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/drawer/package.json b/packages/drawer/package.json deleted file mode 100644 index 259d70c1e5d38..0000000000000 --- a/packages/drawer/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/drawer", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.0" - } -} diff --git a/packages/dropdown-item/index.ts b/packages/dropdown-item/index.ts deleted file mode 100644 index 5f7937c030e23..0000000000000 --- a/packages/dropdown-item/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import DropdownItem from '../dropdown/src/dropdown-item.vue' - -DropdownItem.install = (app: App): void => { - app.component(DropdownItem.name, DropdownItem) -} - -const _DropdownItem: SFCWithInstall = DropdownItem - -export default _DropdownItem diff --git a/packages/dropdown-item/package.json b/packages/dropdown-item/package.json deleted file mode 100644 index 2e0ac4a3b1657..0000000000000 --- a/packages/dropdown-item/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/dropdown-item", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/dropdown-menu/index.ts b/packages/dropdown-menu/index.ts deleted file mode 100644 index 39471b849b73a..0000000000000 --- a/packages/dropdown-menu/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import DropdownMenu from '../dropdown/src/dropdown-menu.vue' - -DropdownMenu.install = (app: App): void => { - app.component(DropdownMenu.name, DropdownMenu) -} - -const _DropdownMenu: SFCWithInstall = DropdownMenu - -export default _DropdownMenu diff --git a/packages/dropdown-menu/package.json b/packages/dropdown-menu/package.json deleted file mode 100644 index b59b9f7a3389a..0000000000000 --- a/packages/dropdown-menu/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/dropdown-menu", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/dropdown/index.ts b/packages/dropdown/index.ts deleted file mode 100644 index 1b21587a8d698..0000000000000 --- a/packages/dropdown/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import Dropdown from './src/dropdown.vue' - -Dropdown.install = (app: App): void => { - app.component(Dropdown.name, Dropdown) -} - -const _Dropdown: SFCWithInstall = Dropdown - -export default _Dropdown diff --git a/packages/dropdown/package.json b/packages/dropdown/package.json deleted file mode 100644 index 3f365526f029a..0000000000000 --- a/packages/dropdown/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/dropdown", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/element-plus/component.ts b/packages/element-plus/component.ts new file mode 100644 index 0000000000000..686c4470fd862 --- /dev/null +++ b/packages/element-plus/component.ts @@ -0,0 +1,131 @@ +import { ElAffix } from '@element-plus/components/affix' +import { ElAlert } from '@element-plus/components/alert' +import { ElAutocomplete } from '@element-plus/components/autocomplete' +import { ElAvatar } from '@element-plus/components/avatar' +import { ElBacktop } from '@element-plus/components/backtop' +import { ElBadge } from '@element-plus/components/badge' +import { ElBreadcrumb } from '@element-plus/components/breadcrumb' +import { ElButton } from '@element-plus/components/button' +import { ElCalendar } from '@element-plus/components/calendar' +import { ElCard } from '@element-plus/components/card' +import { ElCarousel } from '@element-plus/components/carousel' +import { ElCascader } from '@element-plus/components/cascader' +import { ElCascaderPanel } from '@element-plus/components/cascader-panel' +import { ElCheckTag } from '@element-plus/components/check-tag' +import { ElCheckbox } from '@element-plus/components/checkbox' +import { ElCol } from '@element-plus/components/col' +import { ElCollapse } from '@element-plus/components/collapse' +import { ElCollapseTransition } from '@element-plus/components/collapse-transition' +import { ElColorPicker } from '@element-plus/components/color-picker' +import { ElConfigProvider } from '@element-plus/components/config-provider' +import { ElContainer } from '@element-plus/components/container' +import { ElDatePicker } from '@element-plus/components/date-picker' +import { ElDescriptions } from '@element-plus/components/descriptions' +import { ElDialog } from '@element-plus/components/dialog' +import { ElDivider } from '@element-plus/components/divider' +import { ElDrawer } from '@element-plus/components/drawer' +import { ElDropdown } from '@element-plus/components/dropdown' +import { ElEmpty } from '@element-plus/components/empty' +import { ElForm } from '@element-plus/components/form' +import { ElIcon } from '@element-plus/components/icon' +import { ElImage } from '@element-plus/components/image' +import { ElImageViewer } from '@element-plus/components/image-viewer' +import { ElInput } from '@element-plus/components/input' +import { ElInputNumber } from '@element-plus/components/input-number' +import { ElLink } from '@element-plus/components/link' +import { ElMenu } from '@element-plus/components/menu' +import { ElPageHeader } from '@element-plus/components/page-header' +import { ElPagination } from '@element-plus/components/pagination' +import { ElPopconfirm } from '@element-plus/components/popconfirm' +import { ElPopover } from '@element-plus/components/popover' +import { ElPopper } from '@element-plus/components/popper' +import { ElProgress } from '@element-plus/components/progress' +import { ElRadio } from '@element-plus/components/radio' +import { ElRate } from '@element-plus/components/rate' +import { ElResult } from '@element-plus/components/result' +import { ElRow } from '@element-plus/components/row' +import { ElScrollbar } from '@element-plus/components/scrollbar' +import { ElSelect } from '@element-plus/components/select' +import { ElSelectV2 } from '@element-plus/components/select-v2' +import { ElSkeleton } from '@element-plus/components/skeleton' +import { ElSlider } from '@element-plus/components/slider' +import { ElSpace } from '@element-plus/components/space' +import { ElSteps } from '@element-plus/components/steps' +import { ElSwitch } from '@element-plus/components/switch' +import { ElTable } from '@element-plus/components/table' +import { ElTabs } from '@element-plus/components/tabs' +import { ElTag } from '@element-plus/components/tag' +import { ElTimePicker } from '@element-plus/components/time-picker' +import { ElTimeSelect } from '@element-plus/components/time-select' +import { ElTimeline } from '@element-plus/components/timeline' +import { ElTooltip } from '@element-plus/components/tooltip' +import { ElTransfer } from '@element-plus/components/transfer' +import { ElTree } from '@element-plus/components/tree' +import { ElUpload } from '@element-plus/components/upload' + +export default [ + ElAffix, + ElAlert, + ElAutocomplete, + ElAvatar, + ElBacktop, + ElBadge, + ElBreadcrumb, + ElButton, + ElCalendar, + ElCard, + ElCarousel, + ElCascader, + ElCascaderPanel, + ElCheckTag, + ElCheckbox, + ElCol, + ElCollapse, + ElCollapseTransition, + ElColorPicker, + ElConfigProvider, + ElContainer, + ElDatePicker, + ElDescriptions, + ElDialog, + ElDivider, + ElDrawer, + ElDropdown, + ElEmpty, + ElForm, + ElIcon, + ElImage, + ElImageViewer, + ElInput, + ElInputNumber, + ElLink, + ElMenu, + ElPageHeader, + ElPagination, + ElPopconfirm, + ElPopover, + ElPopper, + ElProgress, + ElRadio, + ElRate, + ElResult, + ElRow, + ElScrollbar, + ElSelect, + ElSelectV2, + ElSkeleton, + ElSlider, + ElSpace, + ElSteps, + ElSwitch, + ElTable, + ElTabs, + ElTag, + ElTimePicker, + ElTimeSelect, + ElTimeline, + ElTooltip, + ElTransfer, + ElTree, + ElUpload, +] diff --git a/packages/element-plus/components.ts b/packages/element-plus/components.ts deleted file mode 100644 index 8d63d78a9ef49..0000000000000 --- a/packages/element-plus/components.ts +++ /dev/null @@ -1,89 +0,0 @@ -export { default as ElAffix } from '@element-plus/affix' -export { default as ElAlert } from '@element-plus/alert' -export { default as ElAside } from '@element-plus/aside' -export { default as ElAutocomplete } from '@element-plus/autocomplete' -export { default as ElAvatar } from '@element-plus/avatar' -export { default as ElBacktop } from '@element-plus/backtop' -export { default as ElBadge } from '@element-plus/badge' -export { default as ElBreadcrumb } from '@element-plus/breadcrumb' -export { default as ElBreadcrumbItem } from '@element-plus/breadcrumb-item' -export { default as ElButton } from '@element-plus/button' -export { default as ElButtonGroup } from '@element-plus/button-group' -export { default as ElCalendar } from '@element-plus/calendar' -export { default as ElCard } from '@element-plus/card' -export { default as ElCarousel } from '@element-plus/carousel' -export { default as ElCarouselItem } from '@element-plus/carousel-item' -export { default as ElCascader } from '@element-plus/cascader' -export { default as ElCascaderPanel } from '@element-plus/cascader-panel' -export { default as ElCheckbox } from '@element-plus/checkbox' -export { default as ElCheckboxButton } from '@element-plus/checkbox-button' -export { default as ElCheckboxGroup } from '@element-plus/checkbox-group' -export { default as ElCol } from '@element-plus/col' -export { default as ElCollapse } from '@element-plus/collapse' -export { default as ElCollapseItem } from '@element-plus/collapse-item' -export { default as ElCollapseTransition } from '@element-plus/collapse-transition' -export { default as ElColorPicker } from '@element-plus/color-picker' -export { default as ElContainer } from '@element-plus/container' -export { default as ElConfigProvider } from '@element-plus/config-provider' -export { default as ElDatePicker } from '@element-plus/date-picker' -export { default as ElDialog } from '@element-plus/dialog' -export { default as ElDivider } from '@element-plus/divider' -export { default as ElDrawer } from '@element-plus/drawer' -export { default as ElDropdown } from '@element-plus/dropdown' -export { default as ElDropdownItem } from '@element-plus/dropdown-item' -export { default as ElDropdownMenu } from '@element-plus/dropdown-menu' -export { default as ElEmpty } from '@element-plus/empty' -export { default as ElFooter } from '@element-plus/footer' -export { default as ElForm } from '@element-plus/form' -export { default as ElFormItem } from '@element-plus/form-item' -export { default as ElHeader } from '@element-plus/header' -export { default as ElIcon } from '@element-plus/icon' -export { default as ElImage } from '@element-plus/image' -export { default as ElImageViewer } from '@element-plus/image-viewer' -export { default as ElInput } from '@element-plus/input' -export { default as ElInputNumber } from '@element-plus/input-number' -export { default as ElLink } from '@element-plus/link' -export { default as ElMain } from '@element-plus/main' -export { default as ElMenu } from '@element-plus/menu' -export { default as ElMenuItem } from '@element-plus/menu-item' -export { default as ElMenuItemGroup } from '@element-plus/menu-item-group' -export { default as ElOption } from '@element-plus/option' -export { default as ElOptionGroup } from '@element-plus/option-group' -export { default as ElPageHeader } from '@element-plus/page-header' -export { default as ElPagination } from '@element-plus/pagination' -export { default as ElPopconfirm } from '@element-plus/popconfirm' -export { default as ElPopper } from '@element-plus/popper' -export { default as ElProgress } from '@element-plus/progress' -export { default as ElRadio } from '@element-plus/radio' -export { default as ElRadioButton } from '@element-plus/radio-button' -export { default as ElRadioGroup } from '@element-plus/radio-group' -export { default as ElRate } from '@element-plus/rate' -export { default as ElRow } from '@element-plus/row' -export { default as ElScrollbar } from '@element-plus/scrollbar' -export { default as ElSelect } from '@element-plus/select' -export { default as ElSlider } from '@element-plus/slider' -export { default as ElStep } from '@element-plus/step' -export { default as ElSteps } from '@element-plus/steps' -export { default as ElSubmenu } from '@element-plus/submenu' -export { default as ElSwitch } from '@element-plus/switch' -export { default as ElTabPane } from '@element-plus/tab-pane' -export { default as ElTable } from '@element-plus/table' -export { default as ElTableColumn } from '@element-plus/table-column' -export { default as ElTabs } from '@element-plus/tabs' -export { default as ElTag } from '@element-plus/tag' -export { default as ElTimePicker } from '@element-plus/time-picker' -export { default as ElTimeSelect } from '@element-plus/time-select' -export { default as ElTimeline } from '@element-plus/timeline' -export { default as ElTimelineItem } from '@element-plus/timeline-item' -export { default as ElTooltip } from '@element-plus/tooltip' -export { default as ElTransfer } from '@element-plus/transfer' -export { default as ElTree } from '@element-plus/tree' -export { default as ElUpload } from '@element-plus/upload' -export { default as ElSpace } from '@element-plus/space' -export { default as ElSkeleton } from '@element-plus/skeleton' -export { default as ElSkeletonItem } from '@element-plus/skeleton-item' -export { default as ElCheckTag } from '@element-plus/check-tag' -export { default as ElDescriptions } from '@element-plus/descriptions' -export { default as ElDescriptionsItem } from '@element-plus/descriptions-item' -export { default as ElResult } from '@element-plus/result' -export { default as ElSelectV2 } from '@element-plus/select-v2' diff --git a/packages/element-plus/composables.ts b/packages/element-plus/composables.ts deleted file mode 100644 index 59d941acca3b9..0000000000000 --- a/packages/element-plus/composables.ts +++ /dev/null @@ -1 +0,0 @@ -export * from '@element-plus/hooks' diff --git a/packages/element-plus/defaults.ts b/packages/element-plus/defaults.ts new file mode 100644 index 0000000000000..6beb142f46ca7 --- /dev/null +++ b/packages/element-plus/defaults.ts @@ -0,0 +1,8 @@ +import makeInstaller from './make-installer' +import Components from './component' +import Plugins from './plugin' + +export default makeInstaller([ + ...Components, + ...Plugins, +]) diff --git a/packages/element-plus/index.ts b/packages/element-plus/index.ts index 22ae1f475dc2a..dc0a4c0784233 100644 --- a/packages/element-plus/index.ts +++ b/packages/element-plus/index.ts @@ -1,66 +1,7 @@ +export * from '@element-plus/components' +export * from '@element-plus/directives' +export * from '@element-plus/hooks' +export * from '@element-plus/tokens' -import { setLocale } from '@element-plus/locale' -import { setConfig } from '@element-plus/utils/config' -import isServer from '@element-plus/utils/isServer' -// if you encountered problems alike "Can't resolve './version'" -// please run `yarn bootstrap` first -import * as components from './components' -import * as plugins from './plugins' -import { version as version_ } from './version' -import dayjs from 'dayjs' - -import type { App } from 'vue' -import type { InstallOptions } from '@element-plus/utils/config' - -export * from './components' -export * from './plugins' -export * from './composables' - -type DWindow = Window & typeof globalThis & { - dayjs?: typeof dayjs -} - -// expose Day.js to window to make full bundle i18n work -if (!isServer) { - const _window: DWindow = window - - if (!_window.dayjs) { - _window.dayjs = dayjs - } -} - -const version = version_ // version_ to fix tsc issue - -const defaultInstallOpt: InstallOptions = { - size: '' as ComponentSize, - zIndex: 2000, -} - -const install = (app: App, opt: InstallOptions): void => { - const option = Object.assign(defaultInstallOpt, opt) - - app.config.globalProperties.$ELEMENT = option - setConfig(option) - - Object.keys(components).forEach(c => { - app.use(components[c]) - }) - - Object.keys(plugins).forEach(plugin => { - app.use(plugins[plugin]) - }) -} - -const locale = setLocale - -export { - version, - install, - locale, -} - -export default { - version, - install, - locale, -} +export { default as makeInstaller } from './make-installer' +export { default } from './defaults' diff --git a/packages/element-plus/make-installer.ts b/packages/element-plus/make-installer.ts new file mode 100644 index 0000000000000..93894e4efa01a --- /dev/null +++ b/packages/element-plus/make-installer.ts @@ -0,0 +1,42 @@ +import { setConfig } from '@element-plus/utils/config' +import { LocaleInjectionKey, localeProviderMaker } from '@element-plus/hooks' +import { version } from './version' + +import type { App, Plugin } from 'vue' +import type { ComponentSize } from '@element-plus/utils/types' +import type { InstallOptions } from '@element-plus/utils/config' + +const makeInstaller = (components: Plugin[] = []) => { + const apps: App[] = [] + + const install = (app: App, opts: InstallOptions) => { + const defaultInstallOpt: InstallOptions = { + size: '' as ComponentSize, + zIndex: 2000, + } + + const option = Object.assign(defaultInstallOpt, opts) + if (apps.includes(app)) return + apps.push(app) + + components.forEach(c => { + app.use(c) + }) + + if (option.locale) { + const localeProvides = localeProviderMaker(opts.locale) + app.provide(LocaleInjectionKey, localeProvides) + } + + app.config.globalProperties.$ELEMENT = option + // app.provide() ? is this better? I think its not that flexible but worth implement + setConfig(option) + } + + return { + version, + install, + } +} + +export default makeInstaller diff --git a/packages/element-plus/package.json b/packages/element-plus/package.json index b34f877a4c89f..7c75e6a146ec4 100644 --- a/packages/element-plus/package.json +++ b/packages/element-plus/package.json @@ -1,11 +1,16 @@ { "name": "element-plus", - "version": "0.0.1", + "version": "0.0.0-dev.1", "description": "> TODO: description", "author": "Herrington Darkholme <2883231+HerringtonDarkholme@users.noreply.github.com>", "homepage": "https://github.com/element-plus/element-plus#readme", - "license": "ISC", - "main": "dist/index.js", + "license": "MIT", + "main": "lib/index.js", + "module": "es/index.js", + "style": "dist/index.css", + "unpkg": "dist/index.full.js", + "jsdevlivr": "dist/index.full.js", + "sideEffects": false, "repository": { "type": "git", "url": "git+https://github.com/element-plus/element-plus.git" @@ -14,87 +19,26 @@ "url": "https://github.com/element-plus/element-plus/issues" }, "dependencies": { - "@element-plus/alert": "^0.0.0", - "@element-plus/aside": "^0.0.0", - "@element-plus/autocomplete": "^0.0.0", - "@element-plus/avatar": "^0.0.0", - "@element-plus/backtop": "^0.0.0", - "@element-plus/badge": "^0.0.0", - "@element-plus/breadcrumb": "^0.0.0", - "@element-plus/breadcrumb-item": "^0.0.0", - "@element-plus/button": "^0.0.0", - "@element-plus/button-group": "^0.0.0", - "@element-plus/calendar": "^0.0.0", - "@element-plus/card": "^0.0.0", - "@element-plus/carousel": "^0.0.0", - "@element-plus/carousel-item": "^0.0.0", - "@element-plus/cascader": "^0.0.0", - "@element-plus/cascader-panel": "^0.0.0", - "@element-plus/checkbox": "^0.0.0", - "@element-plus/checkbox-button": "^0.0.0", - "@element-plus/checkbox-group": "^0.0.0", - "@element-plus/col": "^0.0.0", - "@element-plus/collapse": "^0.0.0", - "@element-plus/collapse-item": "^0.0.0", - "@element-plus/collapse-transition": "^0.0.0", - "@element-plus/color-picker": "^0.0.0", - "@element-plus/container": "^0.0.0", - "@element-plus/date-picker": "^0.0.0", - "@element-plus/dialog": "^0.0.0", - "@element-plus/divider": "^0.0.0", - "@element-plus/drawer": "^0.0.0", - "@element-plus/dropdown": "^0.0.0", - "@element-plus/dropdown-item": "^0.0.0", - "@element-plus/dropdown-menu": "^0.0.0", - "@element-plus/footer": "^0.0.0", - "@element-plus/form": "^0.0.0", - "@element-plus/form-item": "^0.0.0", - "@element-plus/header": "^0.0.0", - "@element-plus/icon": "^0.0.0", - "@element-plus/image": "^0.0.0", - "@element-plus/infinite-scroll": "^0.0.0", - "@element-plus/input": "^0.0.0", - "@element-plus/input-number": "^0.0.0", - "@element-plus/link": "^0.0.0", - "@element-plus/loading": "^0.0.0", - "@element-plus/main": "^0.0.0", - "@element-plus/menu": "^0.0.0", - "@element-plus/menu-item": "^0.0.0", - "@element-plus/menu-item-group": "^0.0.0", - "@element-plus/message": "^0.0.0", - "@element-plus/message-box": "^0.0.0", - "@element-plus/notification": "^0.0.0", - "@element-plus/option": "^0.0.0", - "@element-plus/option-group": "^0.0.0", - "@element-plus/page-header": "^0.0.0", - "@element-plus/pagination": "^0.0.0", - "@element-plus/popconfirm": "^0.0.0", - "@element-plus/popover": "^0.0.0", - "@element-plus/progress": "^0.0.0", - "@element-plus/radio": "^0.0.0", - "@element-plus/radio-button": "^0.0.0", - "@element-plus/radio-group": "^0.0.0", - "@element-plus/rate": "^0.0.0", - "@element-plus/row": "^0.0.0", - "@element-plus/scrollbar": "^0.0.0", - "@element-plus/select": "^0.0.0", - "@element-plus/slider": "^0.0.0", - "@element-plus/step": "^0.0.0", - "@element-plus/steps": "^0.0.0", - "@element-plus/submenu": "^0.0.0", - "@element-plus/switch": "^0.0.0", - "@element-plus/tab-pane": "^0.0.0", - "@element-plus/table": "^0.0.0", - "@element-plus/table-column": "^0.0.0", - "@element-plus/tabs": "^0.0.0", - "@element-plus/tag": "^0.0.0", - "@element-plus/time-picker": "^0.0.0", - "@element-plus/time-select": "^0.0.0", - "@element-plus/timeline": "^0.0.0", - "@element-plus/timeline-item": "^0.0.0", - "@element-plus/tooltip": "^0.0.0", - "@element-plus/transfer": "^0.0.0", - "@element-plus/tree": "^0.0.0", - "@element-plus/upload": "^0.0.0" - } + "@element-plus/icons": "^0.0.11", + "@popperjs/core": "^2.4.4", + "async-validator": "^3.4.0", + "dayjs": "1.x", + "lodash": "^4.17.20", + "mitt": "^2.1.0", + "normalize-wheel": "^1.0.1", + "resize-observer-polyfill": "^1.5.1" + }, + "devDependencies": { + "@element-plus/test-utils": "^0.0.5" + }, + "vetur": { + "tags": "tags.json", + "attributes": "attributes.json" + }, + "web-types": "web-types.json", + "browserslist": [ + "> 1%", + "last 2 versions", + "not ie <= 8" + ] } diff --git a/packages/element-plus/plugin.ts b/packages/element-plus/plugin.ts new file mode 100644 index 0000000000000..070b06c51ecd2 --- /dev/null +++ b/packages/element-plus/plugin.ts @@ -0,0 +1,15 @@ +import { ElInfiniteScroll } from '@element-plus/components/infinite-scroll' +import { ElLoading } from '@element-plus/components/loading' +import { ElMessage } from '@element-plus/components/message' +import { ElMessageBox } from '@element-plus/components/message-box' +import { ElNotification } from '@element-plus/components/notification' +import { ElPopoverDirective } from '@element-plus/components/popover' + +export default [ + ElInfiniteScroll, + ElLoading, + ElMessage, + ElMessageBox, + ElNotification, + ElPopoverDirective, +] diff --git a/packages/element-plus/plugins.ts b/packages/element-plus/plugins.ts deleted file mode 100644 index 30dd2b7d0261c..0000000000000 --- a/packages/element-plus/plugins.ts +++ /dev/null @@ -1,6 +0,0 @@ -export { default as ElInfiniteScroll } from '@element-plus/infinite-scroll' -export { default as ElLoading } from '@element-plus/loading' -export { default as ElMessage } from '@element-plus/message' -export { default as ElMessageBox } from '@element-plus/message-box' -export { default as ElNotification } from '@element-plus/notification' -export { default as ElPopover } from '@element-plus/popover' diff --git a/packages/empty/package.json b/packages/empty/package.json deleted file mode 100644 index ec08391758e20..0000000000000 --- a/packages/empty/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/empty", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/footer/index.ts b/packages/footer/index.ts deleted file mode 100644 index 0b94da9d701b7..0000000000000 --- a/packages/footer/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import Footer from '../container/src/footer.vue' - -Footer.install = (app: App): void => { - app.component(Footer.name, Footer) -} - -const _Footer: SFCWithInstall = Footer - -export default _Footer - diff --git a/packages/footer/package.json b/packages/footer/package.json deleted file mode 100644 index 6573cda875075..0000000000000 --- a/packages/footer/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/footer", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/form-item/index.ts b/packages/form-item/index.ts deleted file mode 100644 index a372feb87e121..0000000000000 --- a/packages/form-item/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import FormItem from '../form/src/form-item.vue' - -FormItem.install = (app: App): void => { - app.component(FormItem.name, FormItem) -} - -const _FormItem: SFCWithInstall = FormItem - -export default _FormItem diff --git a/packages/form-item/package.json b/packages/form-item/package.json deleted file mode 100644 index 8961ea02c3b35..0000000000000 --- a/packages/form-item/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/form-item", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/form/index.ts b/packages/form/index.ts deleted file mode 100644 index bf22266bb83f2..0000000000000 --- a/packages/form/index.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import Form from './src/form.vue' - -Form.install = (app: App): void => { - app.component(Form.name, Form) -} - -const _Form: SFCWithInstall = Form - -export default _Form - - -export * from './src/token' diff --git a/packages/form/package.json b/packages/form/package.json deleted file mode 100644 index 817406cb7299f..0000000000000 --- a/packages/form/package.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "name": "@element-plus/form", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.0" - }, - "dependencies": { - "async-validator": "^3.4.0" - } -} diff --git a/packages/header/index.ts b/packages/header/index.ts deleted file mode 100644 index 32585a8cc3c54..0000000000000 --- a/packages/header/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import Header from '../container/src/header.vue' - -Header.install = (app: App): void => { - app.component(Header.name, Header) -} -const _Header: SFCWithInstall = Header - -export default _Header - diff --git a/packages/header/package.json b/packages/header/package.json deleted file mode 100644 index aef46a91939aa..0000000000000 --- a/packages/header/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/header", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/hooks/__tests__/use-locale.spec.ts b/packages/hooks/__tests__/use-locale.spec.ts index 39947a4c20a2b..5340b6daead17 100644 --- a/packages/hooks/__tests__/use-locale.spec.ts +++ b/packages/hooks/__tests__/use-locale.spec.ts @@ -60,21 +60,4 @@ describe('use-locale', () => { English.el.popconfirm.confirmButtonText, ) }) - - it('should be able to use external translator', async () => { - await nextTick() - expect(wrapper.find('.locale-manifest').text()).toBe( - Chinese.el.popconfirm.confirmButtonText, - ) - - const translator = jest.fn().mockImplementation(k => k) - await wrapper.setProps({ - i18n: translator, - }) - - expect(wrapper.find('.locale-manifest').text()).toBe( - 'el.popconfirm.confirmButtonText', - ) - expect(translator).toHaveBeenCalled() - }) }) diff --git a/packages/hooks/gulpfile.ts b/packages/hooks/gulpfile.ts new file mode 100644 index 0000000000000..d379d0468f131 --- /dev/null +++ b/packages/hooks/gulpfile.ts @@ -0,0 +1,57 @@ +import gulp from 'gulp' +import ts from 'gulp-typescript' +import path from 'path' +import { buildOutput } from '../../build/paths' +import rewriter from '../../build/gulp-rewriter' + +export const esm = './es' +export const cjs = './lib' +const tsProject = ts.createProject('tsconfig.json') + +const inputs = [ + './**/*.ts', + '!./node_modules', + '!./gulpfile.ts', + '!./__tests__/*.ts', +] + +function compileEsm() { + return gulp + .src(inputs) + .pipe(tsProject()) + .pipe(rewriter()) + .pipe(gulp.dest(esm)) +} + +function compileCjs() { + return gulp + .src(inputs) + .pipe( + ts.createProject('tsconfig.json', { + module: 'commonjs', + })(), + ) + .pipe(rewriter()) + .pipe(gulp.dest(cjs)) +} + +const distBundle = path.resolve(buildOutput, './element-plus') + +/** + * copy from packages/hooks/lib to dist/hooks + */ +function copyEsm() { + return gulp + .src(cjs + '/**') + .pipe(gulp.dest(path.resolve(distBundle, 'lib/hooks'))) +} + +function copyCjs() { + return gulp + .src(esm + '/**') + .pipe(gulp.dest(path.resolve(distBundle, 'es/hooks'))) +} + +export const build = gulp.series(compileEsm, compileCjs, copyEsm, copyCjs) + +export default build diff --git a/packages/hooks/package.json b/packages/hooks/package.json index 602ba7fb47216..3db473c76f9bd 100644 --- a/packages/hooks/package.json +++ b/packages/hooks/package.json @@ -1,12 +1,35 @@ { "name": "@element-plus/hooks", - "version": "0.0.0", - "main": "dist/index.js", + "description": "Element Plus composables", + "version": "0.0.5", + "main": "index.js", + "module": "index.js", + "unpkg": "index.js", + "jsdelivr": "index.js", + "types": "index.d.ts", "license": "MIT", "peerDependencies": { "vue": "3.1.1" }, + "scripts": { + "clean": "rm -rf lib", + "build": "gulp build" + }, + "dependencies": { + "@element-plus/directives": "^0.0.5", + "@element-plus/utils": "^0.0.5", + "@element-plus/locale": "^0.0.5", + "@popperjs/core": "^2.4.4" + }, "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} + "@element-plus/test-utils": "^0.0.5", + "@vue/test-utils": "^2.0.0-beta.3", + "chalk": "^4.1.2", + "gulp": "^4.0.2", + "gulp-typescript": "^6.0.0-alpha.1", + "sass": "^1.37.0", + "ts-node": "^10.1.0", + "typescript": "^4.3.5" + }, + "gitHead": "c69724230befa8fede0e6b9c37fb0b7e39fd7cdd" +} \ No newline at end of file diff --git a/packages/hooks/tsconfig.json b/packages/hooks/tsconfig.json new file mode 100644 index 0000000000000..003fd496ff4a0 --- /dev/null +++ b/packages/hooks/tsconfig.json @@ -0,0 +1,11 @@ +{ + "compilerOptions": { + "esModuleInterop": true, + "rootDir": ".", + "declaration": true, + "lib": ["ES2020", "DOM"], + "skipLibCheck": true, + "target": "es6", + "moduleResolution": "node" + }, +} diff --git a/packages/hooks/use-focus/index.ts b/packages/hooks/use-focus/index.ts index 2ac2660ebd51f..a045e4efb2a05 100644 --- a/packages/hooks/use-focus/index.ts +++ b/packages/hooks/use-focus/index.ts @@ -1,4 +1,4 @@ -import { Ref } from 'vue' +import type { Ref } from 'vue' export default (el: Ref) => { return { diff --git a/packages/hooks/use-locale/index.ts b/packages/hooks/use-locale/index.ts index 5d69b86ff1aa6..4aeed711847ce 100644 --- a/packages/hooks/use-locale/index.ts +++ b/packages/hooks/use-locale/index.ts @@ -14,9 +14,6 @@ export const useLocaleProps = { locale: { type: Object as PropType, }, - i18n: { - type: Function as PropType, - }, } type Translator = (...args: any[]) => string @@ -34,11 +31,22 @@ export const LocaleInjectionKey = 'ElLocaleInjection' as unknown as InjectionKey // refer to: https://github.com/element-plus/element-plus/issues/2610#issuecomment-887965266 let localeObjCache: LocaleContext +function translate(path, option, current) { + const paths = path.split('.') + let value + for (let i = 0, j = paths.length; i < j; i++) { + const property = paths[i] + value = current[property] + if (i === j - 1) return template(value, option) + if (!value) return '' + current = value + } +} + export const useLocale = () => { const vm = getCurrentInstance() const props = vm.props as { locale: Language - i18n: Translator } const locale = computed(() => props.locale || English) @@ -46,20 +54,11 @@ export const useLocale = () => { const _translator = (...args: any[]) => { const [path, option] = args - let value - const array = path.split('.') - let current = locale.value - for (let i = 0, j = array.length; i < j; i++) { - const property = array[i] - value = current[property] - if (i === j - 1) return template(value, option) - if (!value) return '' - current = value - } + return translate(path, option, locale.value) } const t = (...args: any[]) => { - return props.i18n?.(...args) || _translator(...args) + return _translator(...args) } const provides = { @@ -89,6 +88,23 @@ function template(str: string, option) { }) } +export const localeProviderMaker = ({ + locale, +}: { + locale?: Language +}) => { + const lang = ref((locale || English).name) + const localeRef = ref(locale || English) + return { + lang, + locale: localeRef, + t: (...args: any[]) => { + const [path, option] = args + return translate(path, option, localeRef.value) + }, + } +} + export const useLocaleInject = () => { return inject(LocaleInjectionKey, localeObjCache || { @@ -96,16 +112,7 @@ export const useLocaleInject = () => { locale: ref(English), t: (...args) => { const [path, option] = args - let value - const array = path.split('.') - let current = English - for (let i = 0, j = array.length; i < j; i++) { - const property = array[i] - value = current[property] - if (i === j - 1) return template(value, option) - if (!value) return '' - current = value - } + return translate(path, option, English) }, }) } diff --git a/packages/hooks/use-migrating/index.ts b/packages/hooks/use-migrating/index.ts index 5d2d1a177c61b..1cf270de1d33f 100644 --- a/packages/hooks/use-migrating/index.ts +++ b/packages/hooks/use-migrating/index.ts @@ -1,5 +1,5 @@ -import { kebabCase } from '@element-plus/utils/util' import { onMounted, getCurrentInstance } from 'vue' +import { kebabCase } from '@element-plus/utils/util' const useMigrating = function () { onMounted(() => { @@ -14,7 +14,7 @@ const useMigrating = function () { propName = kebabCase(propName) // compatible with camel case if (props[propName]) { console.warn( - `[Element Migrating][${this.$options.name}][Attribute]: ${props[propName]}`, + `[Element Migrating][${instance.proxy.$options.name}][Attribute]: ${props[propName]}`, ) } } diff --git a/packages/hooks/use-popper/index.ts b/packages/hooks/use-popper/index.ts index 7d2b3a93d86ec..5f94cda6b3be3 100644 --- a/packages/hooks/use-popper/index.ts +++ b/packages/hooks/use-popper/index.ts @@ -43,12 +43,12 @@ import type { Instance as PopperInstance, StrictModifiers, } from '@popperjs/core' -import type { RefElement } from '@element-plus/utils/types' +import type { RefElement, Nullable } from '@element-plus/utils/types' import type { Trigger } from './use-target-events' -export type Effect = 'light' | 'dark' +export type PopperEffect = 'light' | 'dark' export type Offset = [number, number] | number -export type Nullable = null | T + type ElementType = ComponentPublicInstance | HTMLElement @@ -93,7 +93,7 @@ export const usePopperProps = { default: false, }, effect: { - type: String as PropType, + type: String as PropType, default: DARK_EFFECT, }, enterable: { @@ -134,10 +134,10 @@ export const usePopperProps = { }, } -export const usePopper = () => { +export const usePopperHook = () => { const vm = getCurrentInstance() - const props = vm.props as ExtractPropTypes + const props: ExtractPropTypes = vm.props as any const { slots } = vm const arrowRef = ref(null) @@ -285,7 +285,7 @@ export const usePopper = () => { function popupRenderer() { const mouseUpAndDown = props.stopPopperMouseEvent ? stop : NOOP return h( - Transition, + Transition as any, { name: props.transition, onAfterEnter, diff --git a/packages/hooks/use-throttle-render/index.ts b/packages/hooks/use-throttle-render/index.ts index 7cab4ffebf5ac..8592132b992b8 100644 --- a/packages/hooks/use-throttle-render/index.ts +++ b/packages/hooks/use-throttle-render/index.ts @@ -1,5 +1,7 @@ import { onMounted, ref, watch } from 'vue' + import type { Ref } from 'vue' +import type { TimeoutHandle } from '@element-plus/utils/types' export default function( loading: Ref, diff --git a/packages/hooks/use-timeout/index.ts b/packages/hooks/use-timeout/index.ts index 680b3add403f6..beebc2791df7f 100644 --- a/packages/hooks/use-timeout/index.ts +++ b/packages/hooks/use-timeout/index.ts @@ -1,7 +1,9 @@ import { onBeforeUnmount } from 'vue' +import type { TimeoutHandle } from '@element-plus/utils/types' + export default function () { - let timeoutHandle: ReturnType + let timeoutHandle: TimeoutHandle onBeforeUnmount(() => { clearTimeout(timeoutHandle) @@ -10,7 +12,7 @@ export default function () { return { registerTimeout: (fn: (...args: any[]) => unknown, delay: number) => { clearTimeout(timeoutHandle) - timeoutHandle = setTimeout(fn, delay) + timeoutHandle = setTimeout(fn, delay) as any as TimeoutHandle }, cancelTimeout: () => { diff --git a/packages/icon/package.json b/packages/icon/package.json deleted file mode 100644 index 479e391d751b1..0000000000000 --- a/packages/icon/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/icon", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/image-viewer/package.json b/packages/image-viewer/package.json deleted file mode 100644 index 3661234ddaf89..0000000000000 --- a/packages/image-viewer/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/image-viewer", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/image/package.json b/packages/image/package.json deleted file mode 100644 index 119945a92e5f8..0000000000000 --- a/packages/image/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/image", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/infinite-scroll/index.ts b/packages/infinite-scroll/index.ts deleted file mode 100644 index 237ab82c79612..0000000000000 --- a/packages/infinite-scroll/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -import InfiniteScroll from './src/index' -import type { SFCWithInstall } from '@element-plus/utils/types' - -const _InfiniteScroll: SFCWithInstall = InfiniteScroll as SFCWithInstall - -_InfiniteScroll.install = app => { - app.directive('InfiniteScroll', _InfiniteScroll) -} - -export default _InfiniteScroll diff --git a/packages/infinite-scroll/package.json b/packages/infinite-scroll/package.json deleted file mode 100644 index 3ae762c542e3f..0000000000000 --- a/packages/infinite-scroll/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/infinite-scroll", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.0" - } -} diff --git a/packages/input-number/package.json b/packages/input-number/package.json deleted file mode 100644 index bb60cc835c7fb..0000000000000 --- a/packages/input-number/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/input-number", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/input/package.json b/packages/input/package.json deleted file mode 100644 index df189cd3a1563..0000000000000 --- a/packages/input/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/input", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.0" - } -} diff --git a/packages/link/package.json b/packages/link/package.json deleted file mode 100644 index 26819e9a740a8..0000000000000 --- a/packages/link/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/link", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/loading/index.ts b/packages/loading/index.ts deleted file mode 100644 index 8499a66ed4118..0000000000000 --- a/packages/loading/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { App } from 'vue' -import Loading from './src/index' -import vLoading from './src/directive' - -export default { - install(app: App) { - app.directive('loading', vLoading) - app.config.globalProperties.$loading = Loading - }, - directive: vLoading, - service: Loading, -} diff --git a/packages/loading/package.json b/packages/loading/package.json deleted file mode 100644 index 1cf443726fda4..0000000000000 --- a/packages/loading/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/loading", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/locale/gulpfile.ts b/packages/locale/gulpfile.ts new file mode 100644 index 0000000000000..fd4b9783ce9d5 --- /dev/null +++ b/packages/locale/gulpfile.ts @@ -0,0 +1,72 @@ +import gulp from 'gulp' +import ts from 'gulp-typescript' +import path from 'path' +import { buildOutput } from '../../build/paths' + +export const esm = './es' +export const cjs = './lib' +const inputs = './lang/*.ts' + +function compileLangEsm() { + return gulp + .src(inputs) + .pipe(ts.createProject('tsconfig.json')()) + .pipe(gulp.dest(path.resolve(esm, 'lang'))) +} + +function compileLangCjs() { + return gulp + .src(inputs) + .pipe( + ts.createProject('tsconfig.json', { + module: 'commonjs', + })(), + ) + .pipe(gulp.dest(path.resolve(cjs, 'lang'))) +} + +function compileEntryEsm() { + return gulp + .src('./index.ts') + .pipe(ts.createProject('tsconfig.json')()) + .pipe(gulp.dest(esm)) +} + +function compileEntryCjs() { + return gulp + .src('./index.ts') + .pipe( + ts.createProject('tsconfig.json', { + module: 'commonjs', + })(), + ) + .pipe(gulp.dest(cjs)) +} + +const distBundle = path.resolve(buildOutput, './element-plus') + +/** + * copy from packages/theme-chalk/lib to dist/theme-chalk + */ +function copyEsm() { + return gulp + .src(cjs + '/**/*') + .pipe(gulp.dest(path.resolve(distBundle, './lib/locale'))) +} + +function copyCjs() { + return gulp + .src(esm + '/**/*') + .pipe(gulp.dest(path.resolve(distBundle, './es/locale'))) +} + +export const build = gulp.series( + compileEntryEsm, + compileEntryCjs, + compileLangEsm, + compileLangCjs, + copyEsm, + copyCjs, +) + +export default build diff --git a/packages/locale/package.json b/packages/locale/package.json index df1153731ab46..4e5f7714a3e7f 100644 --- a/packages/locale/package.json +++ b/packages/locale/package.json @@ -1,12 +1,33 @@ { "name": "@element-plus/locale", - "version": "0.0.0", - "main": "dist/index.js", + "description": "Element Plus locale", + "version": "0.0.5", + "main": "index.js", + "module": "index.js", + "unpkg": "index.js", + "jsdelivr": "index.js", + "types": "index.d.ts", "license": "MIT", + "scripts": { + "clean": "rm -rf lib es", + "build": "gulp build" + }, "peerDependencies": { "vue": "3.1.1" }, + "dependencies": { + "dayjs": "1.x" + }, "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } + "@element-plus/test-utils": "^0.0.5", + "@types/gulp": "^4.0.9", + "@vue/test-utils": "^2.0.0-beta.3", + "chalk": "^4.1.2", + "gulp": "^4.0.2", + "gulp-typescript": "^6.0.0-alpha.1", + "sass": "^1.37.0", + "ts-node": "^10.1.0", + "typescript": "^4.3.5" + }, + "gitHead": "c69724230befa8fede0e6b9c37fb0b7e39fd7cdd" } diff --git a/packages/locale/tsconfig.json b/packages/locale/tsconfig.json new file mode 100644 index 0000000000000..58abdafa7c4e2 --- /dev/null +++ b/packages/locale/tsconfig.json @@ -0,0 +1,9 @@ +{ + "compilerOptions": { + "esModuleInterop": true, + "rootDir": ".", + "declaration": true, + "target": "ES6", + "moduleResolution": "node" + } +} diff --git a/packages/main/index.ts b/packages/main/index.ts deleted file mode 100644 index cb21f4db1a9a8..0000000000000 --- a/packages/main/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import Main from '../container/src/main.vue' - -Main.install = (app: App): void => { - app.component(Main.name, Main) -} - -const _Main: SFCWithInstall = Main - -export default _Main - diff --git a/packages/main/package.json b/packages/main/package.json deleted file mode 100644 index 37c8a2f03ef14..0000000000000 --- a/packages/main/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/main", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/menu-item-group/index.ts b/packages/menu-item-group/index.ts deleted file mode 100644 index a2a56f421c55c..0000000000000 --- a/packages/menu-item-group/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import MenuItemGroup from '../menu/src/menuItemGroup.vue' - -MenuItemGroup.install = (app: App): void => { - app.component(MenuItemGroup.name, MenuItemGroup) -} - -const _MenuItemGroup: SFCWithInstall = MenuItemGroup - -export default _MenuItemGroup - diff --git a/packages/menu-item-group/package.json b/packages/menu-item-group/package.json deleted file mode 100644 index d14649d0d5c92..0000000000000 --- a/packages/menu-item-group/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/menu-item-group", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/menu-item/index.ts b/packages/menu-item/index.ts deleted file mode 100644 index f218711077180..0000000000000 --- a/packages/menu-item/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import MenuItem from '../menu/src/menuItem.vue' - -MenuItem.install = (app: App): void => { - app.component(MenuItem.name, MenuItem) -} - -const _MenuItem: SFCWithInstall = MenuItem - -export default _MenuItem - diff --git a/packages/menu-item/package.json b/packages/menu-item/package.json deleted file mode 100644 index 5be602102fff9..0000000000000 --- a/packages/menu-item/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/menu-item", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/menu/index.ts b/packages/menu/index.ts deleted file mode 100644 index ac2ac2ed09917..0000000000000 --- a/packages/menu/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import Menu from './src/menu.vue' - -Menu.install = (app: App): void => { - app.component(Menu.name, Menu) -} - -const _Menu: SFCWithInstall = Menu - -export default _Menu - diff --git a/packages/menu/package.json b/packages/menu/package.json deleted file mode 100644 index a6b0f85a93c48..0000000000000 --- a/packages/menu/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/menu", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/message-box/package.json b/packages/message-box/package.json deleted file mode 100644 index c80342f0aa2ef..0000000000000 --- a/packages/message-box/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/message-box", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.0" - } -} diff --git a/packages/message/index.ts b/packages/message/index.ts deleted file mode 100644 index 09ac8f3cc522c..0000000000000 --- a/packages/message/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -import Message from './src/message' -import type { SFCWithInstall } from '@element-plus/utils/types' - -const _Message: SFCWithInstall = Message as SFCWithInstall - -_Message.install = app => { - app.config.globalProperties.$message = _Message -} - -export default _Message diff --git a/packages/message/package.json b/packages/message/package.json deleted file mode 100644 index b8a5c76d36e3e..0000000000000 --- a/packages/message/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/message", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/notification/index.ts b/packages/notification/index.ts deleted file mode 100644 index 433ef0d322621..0000000000000 --- a/packages/notification/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -import Notify from './src/notify' -import type { SFCWithInstall } from '@element-plus/utils/types' - -const _Notify: SFCWithInstall = Notify as SFCWithInstall - -_Notify.install = app => { - app.config.globalProperties.$notify = _Notify -} - -export default _Notify diff --git a/packages/notification/package.json b/packages/notification/package.json deleted file mode 100644 index a51cc05074623..0000000000000 --- a/packages/notification/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/notification", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/option-group/index.ts b/packages/option-group/index.ts deleted file mode 100644 index 4cf41c441e3f6..0000000000000 --- a/packages/option-group/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import OptionGroup from '../select/src/option-group.vue' - -OptionGroup.install = (app: App): void => { - app.component(OptionGroup.name, OptionGroup) -} - -const _OptionGroup: SFCWithInstall = OptionGroup - -export default _OptionGroup diff --git a/packages/option-group/package.json b/packages/option-group/package.json deleted file mode 100644 index eb378406561cf..0000000000000 --- a/packages/option-group/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/option-group", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/option/index.ts b/packages/option/index.ts deleted file mode 100644 index a52b197c91fef..0000000000000 --- a/packages/option/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Option } from '@element-plus/select' -import type { SFCWithInstall } from '@element-plus/utils/types' - -const _Option: SFCWithInstall = Option as SFCWithInstall - -_Option.install = app => { - app.component(_Option.name, _Option) -} - -export default _Option diff --git a/packages/option/package.json b/packages/option/package.json deleted file mode 100644 index a6a7d4aa08e24..0000000000000 --- a/packages/option/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/option", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/overlay/package.json b/packages/overlay/package.json deleted file mode 100644 index faa6646d9e4e1..0000000000000 --- a/packages/overlay/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/overlay", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.0" - } -} diff --git a/packages/page-header/package.json b/packages/page-header/package.json deleted file mode 100644 index 3be7aceed96bb..0000000000000 --- a/packages/page-header/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/page-header", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/pagination/index.ts b/packages/pagination/index.ts deleted file mode 100644 index 077f9b99b3218..0000000000000 --- a/packages/pagination/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -import Pagination from './src/index' -import type { SFCWithInstall } from '@element-plus/utils/types' - -const _Pagination: SFCWithInstall = Pagination as SFCWithInstall - -_Pagination.install = app => { - app.component(_Pagination.name, _Pagination) -} - -export default _Pagination diff --git a/packages/pagination/package.json b/packages/pagination/package.json deleted file mode 100644 index 8b47cac886ee8..0000000000000 --- a/packages/pagination/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/pagination", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.0" - } -} diff --git a/packages/popconfirm/package.json b/packages/popconfirm/package.json deleted file mode 100644 index b08843187129c..0000000000000 --- a/packages/popconfirm/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/popconfirm", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/popover/index.ts b/packages/popover/index.ts deleted file mode 100644 index 4f4afac575cde..0000000000000 --- a/packages/popover/index.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import Popover from './src/index.vue' -import PopoverDirective, { VPopover } from './src/directive' - -Popover.install = (app: App): void => { - app.component(Popover.name, Popover) - app.directive(VPopover, PopoverDirective) -} -Popover.directive = PopoverDirective - -const _Popover: SFCWithInstall = Popover - -export default _Popover diff --git a/packages/popover/package.json b/packages/popover/package.json deleted file mode 100644 index 6eeb9a70c6465..0000000000000 --- a/packages/popover/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/popover", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/popper/package.json b/packages/popper/package.json deleted file mode 100644 index 9e43d8f2405ec..0000000000000 --- a/packages/popper/package.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "name": "@element-plus/popper", - "description": "This is a internal util repo for components like tooltip and others", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/progress/package.json b/packages/progress/package.json deleted file mode 100644 index 560c1f9ef6c48..0000000000000 --- a/packages/progress/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/progress", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/radio-button/index.ts b/packages/radio-button/index.ts deleted file mode 100644 index c5f0c65495ab9..0000000000000 --- a/packages/radio-button/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import RadioButton from '../radio/src/radio-button.vue' - -RadioButton.install = (app: App): void => { - app.component(RadioButton.name, RadioButton) -} - -const _RadioButton: SFCWithInstall = RadioButton - -export default _RadioButton diff --git a/packages/radio-button/package.json b/packages/radio-button/package.json deleted file mode 100644 index dab8eabf7fff0..0000000000000 --- a/packages/radio-button/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/radio-button", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/radio-group/index.ts b/packages/radio-group/index.ts deleted file mode 100644 index 5849ea41ecf30..0000000000000 --- a/packages/radio-group/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import RadioGroup from '../radio/src/radio-group.vue' - -RadioGroup.install = (app: App): void => { - app.component(RadioGroup.name, RadioGroup) -} - -const _RadioGroup: SFCWithInstall = RadioGroup - -export default _RadioGroup diff --git a/packages/radio-group/package.json b/packages/radio-group/package.json deleted file mode 100644 index 841c330ceee48..0000000000000 --- a/packages/radio-group/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/radio-group", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/radio/index.ts b/packages/radio/index.ts deleted file mode 100644 index f2d7abfcb93ff..0000000000000 --- a/packages/radio/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import Radio from './src/radio.vue' - -Radio.install = (app: App): void => { - app.component(Radio.name, Radio) -} - -const _Radio: SFCWithInstall = Radio - -export default _Radio diff --git a/packages/radio/package.json b/packages/radio/package.json deleted file mode 100644 index cd49801f9f4a3..0000000000000 --- a/packages/radio/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/radio", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/rate/package.json b/packages/rate/package.json deleted file mode 100644 index 51cd489c000de..0000000000000 --- a/packages/rate/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/rate", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/result/package.json b/packages/result/package.json deleted file mode 100644 index f028c0fb8cfff..0000000000000 --- a/packages/result/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/result", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/row/index.ts b/packages/row/index.ts deleted file mode 100644 index dea73a0f1997c..0000000000000 --- a/packages/row/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -import Row from '../col/src/row' -import type { SFCWithInstall } from '@element-plus/utils/types' - -const _Row: SFCWithInstall = Row as SFCWithInstall - -_Row.install = app => { - app.component(_Row.name, _Row) -} - -export default _Row diff --git a/packages/row/package.json b/packages/row/package.json deleted file mode 100644 index f39f0f9752d27..0000000000000 --- a/packages/row/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/row", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/scrollbar/package.json b/packages/scrollbar/package.json deleted file mode 100644 index 67b489feae05b..0000000000000 --- a/packages/scrollbar/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/scrollbar", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/select-v2/package.json b/packages/select-v2/package.json deleted file mode 100644 index c73c20258f9d5..0000000000000 --- a/packages/select-v2/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/select-v2", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/select-v2/src/useOption.ts b/packages/select-v2/src/useOption.ts deleted file mode 100644 index 7b01996af6a2d..0000000000000 --- a/packages/select-v2/src/useOption.ts +++ /dev/null @@ -1,111 +0,0 @@ -import { - inject, - computed, - getCurrentInstance, - watch, -} from 'vue' -import { getValueByPath, escapeRegexpString } from '@element-plus/utils/util' -import { - selectKey, selectGroupKey, - selectEvents, -} from './token' - -export function useOption(props, states) { - // inject - const select = inject(selectKey) - const selectGroup = inject(selectGroupKey, { disabled: false }) - - // computed - const isObject = computed(() => { - return Object.prototype.toString.call(props.value).toLowerCase() === '[object object]' - }) - - const itemSelected = computed(() => { - if (!select.props.multiple) { - return isEqual(props.value, select.props.modelValue) - } else { - return contains(select.props.modelValue as unknown[], props.value) - } - }) - - const limitReached = computed(() => { - if (select.props.multiple) { - const modelValue = (select.props.modelValue || []) as unknown[] - return !itemSelected.value && - modelValue.length >= select.props.multipleLimit && - select.props.multipleLimit > 0 - } else { - return false - } - }) - - const currentLabel = computed(() => { - return props.label || (isObject.value ? '' : props.value) - }) - - const currentValue = computed(() => { - return props.value || props.label || '' - }) - - const isDisabled = computed(() => { - return props.disabled || states.groupDisabled || limitReached.value - }) - - const instance = getCurrentInstance() - - const contains = (arr = [], target) => { - if (!isObject.value) { - return arr && arr.indexOf(target) > -1 - } else { - const valueKey = select.props.valueKey - return arr && arr.some(item => { - return getValueByPath(item, valueKey) === getValueByPath(target, valueKey) - }) - } - } - - - const hoverItem = () => { - if (!props.disabled && !selectGroup.disabled) { - select.hoverIndex = select.optionsArray.indexOf(instance) - } - } - - const queryChange = (query: string) => { - const regexp = new RegExp(escapeRegexpString(query), 'i') - states.visible = regexp.test(currentLabel.value) || props.created - if (!states.visible) { - select.filteredOptionsCount-- - } - } - - watch(() => currentLabel.value, () => { - if (!props.created && !select.props.remote) select.setSelected() - }) - - watch(() => props.value, (val, oldVal) => { - const { remote, valueKey } = select.props - if (!props.created && !remote) { - if (valueKey && typeof val === 'object' && typeof oldVal === 'object' && val[valueKey] === oldVal[valueKey]) { - return - } - select.setSelected() - } - }) - - watch(() => selectGroup.disabled, () => { - states.groupDisabled = selectGroup.disabled - }, { immediate: true }) - - // Emitter - select.selectEmitter.on(selectEvents.queryChange, queryChange) - - return { - select, - currentLabel, - currentValue, - itemSelected, - isDisabled, - hoverItem, - } -} diff --git a/packages/select/index.ts b/packages/select/index.ts deleted file mode 100644 index 09bb423a7fef2..0000000000000 --- a/packages/select/index.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import Select from './src/select.vue' -import Option from './src/option.vue' - -Select.install = (app: App): void => { - app.component(Select.name, Select) -} - -const _Select: SFCWithInstall = Select - -export { Option } -export default _Select diff --git a/packages/select/package.json b/packages/select/package.json deleted file mode 100644 index 040d72746f331..0000000000000 --- a/packages/select/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/select", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/skeleton-item/index.ts b/packages/skeleton-item/index.ts deleted file mode 100644 index 56640b6b29c94..0000000000000 --- a/packages/skeleton-item/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { App } from 'vue' -import SkeletonItem from './src/index.vue' -import type { SFCWithInstall } from '@element-plus/utils/types' - -SkeletonItem.install = (app: App): void => { - app.component(SkeletonItem.name, SkeletonItem) -} - -const _SkeletonItem: SFCWithInstall = SkeletonItem - -export default _SkeletonItem diff --git a/packages/skeleton-item/package.json b/packages/skeleton-item/package.json deleted file mode 100644 index 60fde6f99a98c..0000000000000 --- a/packages/skeleton-item/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/skeleton-item", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/skeleton/index.ts b/packages/skeleton/index.ts deleted file mode 100644 index ea529247566b3..0000000000000 --- a/packages/skeleton/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { App } from 'vue' -import Skeleton from './src/index.vue' -import type { SFCWithInstall } from '@element-plus/utils/types' - -Skeleton.install = (app: App): void => { - app.component(Skeleton.name, Skeleton) -} - -const _Skeleton: SFCWithInstall = Skeleton - -export default _Skeleton diff --git a/packages/skeleton/package.json b/packages/skeleton/package.json deleted file mode 100644 index 5e7900c3c4b30..0000000000000 --- a/packages/skeleton/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/skeleton", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/slider/package.json b/packages/slider/package.json deleted file mode 100644 index 1690098f6ac00..0000000000000 --- a/packages/slider/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/slider", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.0" - } -} diff --git a/packages/space/package.json b/packages/space/package.json deleted file mode 100644 index 8c9d19e5900d8..0000000000000 --- a/packages/space/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/space", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/step/index.ts b/packages/step/index.ts deleted file mode 100644 index d3b2c0e8e6ed6..0000000000000 --- a/packages/step/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import Step from '../steps/src/item.vue' - -Step.install = (app: App): void => { - app.component(Step.name, Step) -} - -const _Step: SFCWithInstall = Step - -export default _Step diff --git a/packages/step/package.json b/packages/step/package.json deleted file mode 100644 index b0e6c057006b5..0000000000000 --- a/packages/step/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/step", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/steps/index.ts b/packages/steps/index.ts deleted file mode 100644 index b62481c5752f0..0000000000000 --- a/packages/steps/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import Steps from './src/index.vue' - -Steps.install = (app: App): void => { - app.component(Steps.name, Steps) -} - -const _Steps: SFCWithInstall = Steps - -export default _Steps diff --git a/packages/steps/package.json b/packages/steps/package.json deleted file mode 100644 index 593fbe99de2f5..0000000000000 --- a/packages/steps/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/steps", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/submenu/index.ts b/packages/submenu/index.ts deleted file mode 100644 index 1088a70adbed6..0000000000000 --- a/packages/submenu/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import Submenu from '../menu/src/submenu.vue' - -Submenu.install = (app: App): void => { - app.component(Submenu.name, Submenu) -} - -const _Submenu: SFCWithInstall = Submenu - -export default _Submenu diff --git a/packages/submenu/package.json b/packages/submenu/package.json deleted file mode 100644 index 0e665b8be9a0a..0000000000000 --- a/packages/submenu/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/submenu", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/switch/package.json b/packages/switch/package.json deleted file mode 100644 index d5f9ff3ebb087..0000000000000 --- a/packages/switch/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/switch", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/tab-pane/index.ts b/packages/tab-pane/index.ts deleted file mode 100644 index fa502395edef8..0000000000000 --- a/packages/tab-pane/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import TabPane from '../tabs/src/tab-pane.vue' - -TabPane.install = (app: App): void => { - app.component(TabPane.name, TabPane) -} - -const _TabPane: SFCWithInstall = TabPane - -export default _TabPane diff --git a/packages/tab-pane/package.json b/packages/tab-pane/package.json deleted file mode 100644 index 4e61f347edc58..0000000000000 --- a/packages/tab-pane/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/tab-pane", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/table-column/index.ts b/packages/table-column/index.ts deleted file mode 100644 index 2f7dcefacc675..0000000000000 --- a/packages/table-column/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -import TableColumn from '../table/src/tableColumn' -import type { SFCWithInstall } from '@element-plus/utils/types' - -const _TableColumn: SFCWithInstall = TableColumn as SFCWithInstall - -_TableColumn.install = app => { - app.component(_TableColumn.name, _TableColumn) -} - -export default _TableColumn diff --git a/packages/table-column/package.json b/packages/table-column/package.json deleted file mode 100644 index 7866ea1fb8f65..0000000000000 --- a/packages/table-column/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/table-column", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/table/index.ts b/packages/table/index.ts deleted file mode 100644 index d493e84e90986..0000000000000 --- a/packages/table/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import Table from './src/table.vue' - -Table.install = (app: App): void => { - app.component(Table.name, Table) -} - -const _Table: SFCWithInstall = Table - -export default _Table diff --git a/packages/table/package.json b/packages/table/package.json deleted file mode 100644 index d48b2df3c2e32..0000000000000 --- a/packages/table/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/table", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/tabs/index.ts b/packages/tabs/index.ts deleted file mode 100644 index b529387d23be0..0000000000000 --- a/packages/tabs/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import Tabs from './src/tabs.vue' - -Tabs.install = (app: App): void => { - app.component(Tabs.name, Tabs) -} - -const _Tabs: SFCWithInstall = Tabs - -export default _Tabs diff --git a/packages/tabs/package.json b/packages/tabs/package.json deleted file mode 100644 index bffad4562efe9..0000000000000 --- a/packages/tabs/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/tabs", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/tag/package.json b/packages/tag/package.json deleted file mode 100644 index f970c7ae159c8..0000000000000 --- a/packages/tag/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/tag", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } - } diff --git a/packages/test-utils/composite-click.ts b/packages/test-utils/composite-click.ts index 1b07534cddfb0..41bf80399a61e 100644 --- a/packages/test-utils/composite-click.ts +++ b/packages/test-utils/composite-click.ts @@ -1,5 +1,6 @@ import { nextTick } from 'vue' import triggerEvent from './trigger-event' + import type { DOMWrapper, VueWrapper } from '@vue/test-utils' diff --git a/packages/test-utils/index.ts b/packages/test-utils/index.ts index ae5bb73847768..800c5b83d1eb6 100644 --- a/packages/test-utils/index.ts +++ b/packages/test-utils/index.ts @@ -5,3 +5,9 @@ export { default as makeScroll } from './make-scroll' export { default as sleep } from './sleep' export { default as tick } from './tick' export { default as triggerEvent } from './trigger-event' +export { default as stylePlugin } from './style-plugin' +export { + default as triggerCompositeClick, + triggerNativeCompositeClick, +} from './composite-click' +export { default as makeMount } from './make-mount' diff --git a/packages/test-utils/make-scroll.ts b/packages/test-utils/make-scroll.ts index 9603bf4ba8bef..a9aef46cfd896 100644 --- a/packages/test-utils/make-scroll.ts +++ b/packages/test-utils/make-scroll.ts @@ -1,4 +1,4 @@ -import { sleep } from '@element-plus/test-utils' +import sleep from './sleep' const makeScroll = async (dom: Element, name: 'scrollTop' | 'scrollLeft', offset: number) => { const eventTarget = dom === document.documentElement ? window : dom diff --git a/packages/test-utils/package.json b/packages/test-utils/package.json index b30dafa9d964b..e9bc8988be9c0 100644 --- a/packages/test-utils/package.json +++ b/packages/test-utils/package.json @@ -1,10 +1,12 @@ { "name": "@element-plus/test-utils", - "version": "0.0.0", + "private": true, + "version": "0.0.5", "main": "dist/index.js", "license": "MIT", "dependencies": { "vue": "3.1.1", - "@vue/test-utils": "^2.0.0-beta.3" + "@vue/test-utils": "^2.0.0-beta.3", + "lodash": "^4.17.20" } } diff --git a/packages/theme-chalk/gulpfile.ts b/packages/theme-chalk/gulpfile.ts index 2db47fa309f5c..c3165a6e098ec 100644 --- a/packages/theme-chalk/gulpfile.ts +++ b/packages/theme-chalk/gulpfile.ts @@ -5,6 +5,7 @@ import dartSass from 'sass' import autoprefixer from 'gulp-autoprefixer' import cleanCSS from 'gulp-clean-css' import rename from 'gulp-rename' +import { buildOutput } from '../../build/paths' import path from 'path' @@ -50,15 +51,29 @@ function copyFont() { return gulp.src('./src/fonts/**').pipe(gulp.dest(`${distFolder}/fonts`)) } +const distBundle = path.resolve(buildOutput, './element-plus/theme-chalk') + /** - * copy to packages/lib/theme-chalk + * copy from packages/theme-chalk/lib to dist/theme-chalk */ function copyToLib() { - return gulp - .src(distFolder + '/**') - .pipe(gulp.dest(path.resolve(__dirname, '../../lib/theme-chalk'))) + return gulp.src(distFolder + '/**').pipe(gulp.dest(distBundle)) +} + +/** + * copy source file to packages + */ + +function copySourceToLib() { + return gulp.src('./src/**').pipe(gulp.dest(path.resolve(distBundle, './src'))) } -export const build = gulp.series(compile, copyFont, copyToLib) + +export const build = gulp.series( + compile, + copyFont, + copyToLib, + copySourceToLib, +) export default build diff --git a/packages/theme-chalk/package.json b/packages/theme-chalk/package.json index d52524d5e951e..f43642020c6ea 100644 --- a/packages/theme-chalk/package.json +++ b/packages/theme-chalk/package.json @@ -1,14 +1,11 @@ { - "name": "element-theme-chalk", - "private": "true", - "version": "0.0.0", + "name": "@element-plus/theme-chalk", + "version": "0.0.5", "description": "Element component chalk theme.", - "main": "lib/index.css", - "style": "lib/index.css", - "files": [ - "lib", - "src" - ], + "main": "index.css", + "unpkg": "index.css", + "jsdelivr": "index.css", + "style": "index.css", "scripts": { "clean": "rm -rf lib", "build": "gulp build" @@ -18,8 +15,10 @@ "url": "git+https://github.com/element-plus/element-plus.git" }, "keywords": [ - "element", - "theme" + "vue-components", + "element-plus", + "theme-chalk", + "theme-light" ], "author": "yi.shyang@ele.me", "license": "MIT", @@ -44,5 +43,6 @@ "ts-node": "^10.1.0", "typescript": "^4.3.5" }, - "dependencies": {} -} + "dependencies": {}, + "gitHead": "c69724230befa8fede0e6b9c37fb0b7e39fd7cdd" +} \ No newline at end of file diff --git a/packages/theme-chalk/src/autocomplete.scss b/packages/theme-chalk/src/autocomplete.scss index 25f224c025a53..7181069b97c18 100644 --- a/packages/theme-chalk/src/autocomplete.scss +++ b/packages/theme-chalk/src/autocomplete.scss @@ -3,9 +3,6 @@ @import 'mixins/mixins'; @import 'mixins/utils'; @import 'common/var'; -@import './input.scss'; -@import './scrollbar.scss'; -@import './popper'; @include b(autocomplete) { position: relative; diff --git a/packages/theme-chalk/src/calendar.scss b/packages/theme-chalk/src/calendar.scss index f0ea936a12957..ae6cf8c06b9ad 100644 --- a/packages/theme-chalk/src/calendar.scss +++ b/packages/theme-chalk/src/calendar.scss @@ -1,8 +1,6 @@ @import 'mixins/mixins'; @import 'mixins/var'; @import 'common/var'; -@import 'button'; -@import 'button-group'; @include b(calendar) { @include set-component-css-var('calendar', $--calendar); diff --git a/packages/theme-chalk/src/cascader-panel.scss b/packages/theme-chalk/src/cascader-panel.scss index 6b23e82485002..717dcce50b016 100644 --- a/packages/theme-chalk/src/cascader-panel.scss +++ b/packages/theme-chalk/src/cascader-panel.scss @@ -1,9 +1,6 @@ @import 'mixins/mixins'; @import 'mixins/var'; @import 'common/var'; -@import './checkbox'; -@import './radio'; -@import './scrollbar'; @include b(cascader-panel) { @include set-component-css-var('cascader', $--cascader); diff --git a/packages/theme-chalk/src/cascader.scss b/packages/theme-chalk/src/cascader.scss index e796fce83cac5..da8dec12583af 100644 --- a/packages/theme-chalk/src/cascader.scss +++ b/packages/theme-chalk/src/cascader.scss @@ -3,11 +3,6 @@ @import 'mixins/mixins'; @import 'mixins/var'; @import 'common/var'; -@import './input'; -@import './popper'; -@import './tag'; - -@import './cascader-panel'; @include b(cascader) { @include set-component-css-var('cascader', $--cascader); diff --git a/packages/theme-chalk/src/color-picker.scss b/packages/theme-chalk/src/color-picker.scss index c5f3821ecc748..9d86f47640cd2 100644 --- a/packages/theme-chalk/src/color-picker.scss +++ b/packages/theme-chalk/src/color-picker.scss @@ -2,8 +2,6 @@ @import 'mixins/mixins'; @import 'common/var'; -@import './input.scss'; -@import './button.scss'; @include b(color-predefine) { display: flex; diff --git a/packages/theme-chalk/src/date-picker.scss b/packages/theme-chalk/src/date-picker.scss index b1185bbea69cc..7a6ad08a06e21 100644 --- a/packages/theme-chalk/src/date-picker.scss +++ b/packages/theme-chalk/src/date-picker.scss @@ -7,7 +7,4 @@ @import './date-picker/date-range-picker.scss'; @import './date-picker/time-range-picker.scss'; @import './date-picker/time-picker.scss'; -@import './input.scss'; -@import './scrollbar.scss'; -@import './popper'; -@import './button.scss'; + diff --git a/packages/theme-chalk/src/descriptions.scss b/packages/theme-chalk/src/descriptions.scss index 91bd8a58a6630..5425179d74b99 100644 --- a/packages/theme-chalk/src/descriptions.scss +++ b/packages/theme-chalk/src/descriptions.scss @@ -1,7 +1,7 @@ @import 'mixins/mixins'; @import 'mixins/var'; @import 'common/var'; -@import 'descriptions-item'; + @include b(descriptions) { @include set-component-css-var('descriptions', $--descriptions); diff --git a/packages/theme-chalk/src/dialog.scss b/packages/theme-chalk/src/dialog.scss index b4f7e4bae8d51..49077424bbfdb 100644 --- a/packages/theme-chalk/src/dialog.scss +++ b/packages/theme-chalk/src/dialog.scss @@ -5,7 +5,6 @@ @import 'mixins/var'; @import 'common/var'; @import 'common/popup'; -@import './overlay.scss'; @include b(dialog) { @include set-component-css-var('dialog', $--dialog); diff --git a/packages/theme-chalk/src/drawer.scss b/packages/theme-chalk/src/drawer.scss index 1a7e96a18e18c..61d8e2a56f14a 100644 --- a/packages/theme-chalk/src/drawer.scss +++ b/packages/theme-chalk/src/drawer.scss @@ -1,7 +1,6 @@ @import 'mixins/mixins'; @import 'mixins/var'; @import 'common/var'; -@import './overlay.scss'; @keyframes #{$namespace}-drawer-fade-in { 0% { diff --git a/packages/theme-chalk/src/dropdown.scss b/packages/theme-chalk/src/dropdown.scss index 04ada48101959..0216203dc99f6 100644 --- a/packages/theme-chalk/src/dropdown.scss +++ b/packages/theme-chalk/src/dropdown.scss @@ -3,8 +3,6 @@ @import 'mixins/mixins'; @import 'mixins/var'; @import 'common/var'; -@import 'button'; -@import 'popper'; @include b(dropdown) { @include set-component-css-var('dropdown', $--dropdown); diff --git a/packages/theme-chalk/src/image.scss b/packages/theme-chalk/src/image.scss index 0b40211834d37..1e45bda6a8279 100644 --- a/packages/theme-chalk/src/image.scss +++ b/packages/theme-chalk/src/image.scss @@ -1,6 +1,5 @@ @import 'mixins/mixins'; @import 'common/var'; -@import './image-viewer.scss'; %size { width: 100%; diff --git a/packages/theme-chalk/src/index.scss b/packages/theme-chalk/src/index.scss index 5b4d869112c77..2fb1d995c74c3 100644 --- a/packages/theme-chalk/src/index.scss +++ b/packages/theme-chalk/src/index.scss @@ -1,94 +1,101 @@ @import './base.scss'; -@import './pagination.scss'; -@import './dialog.scss'; -@import './autocomplete.scss'; -@import './dropdown.scss'; -@import './dropdown-menu.scss'; -@import './dropdown-item.scss'; -@import './menu.scss'; -@import './submenu.scss'; -@import './menu-item.scss'; -@import './menu-item-group.scss'; -@import './input.scss'; -@import './input-number.scss'; -@import './radio.scss'; -@import './radio-group.scss'; -@import './radio-button.scss'; -@import './checkbox.scss'; -@import './checkbox-button.scss'; -@import './checkbox-group.scss'; -@import './switch.scss'; -@import './select.scss'; -@import './select-v2.scss'; -@import './button.scss'; -@import './button-group.scss'; -@import './table.scss'; -@import './table-column.scss'; -@import './date-picker.scss'; -@import './time-select.scss'; -@import './time-picker.scss'; -@import './popover.scss'; -@import './tooltip.scss'; -@import './message-box.scss'; -@import './breadcrumb.scss'; -@import './breadcrumb-item.scss'; -@import './form.scss'; -@import './form-item.scss'; -@import './tabs.scss'; -@import './tab-pane.scss'; -@import './tag.scss'; -@import './tree.scss'; +// component styles +@import './affix.scss'; @import './alert.scss'; -@import './notification.scss'; -@import './slider.scss'; -@import './loading.scss'; -@import './row.scss'; -@import './col.scss'; -@import './upload.scss'; -@import './progress.scss'; -@import './spinner.scss'; -@import './message.scss'; +@import './aside.scss'; +@import './autocomplete.scss'; +@import './avatar.scss'; +@import './backtop.scss'; @import './badge.scss'; +@import './breadcrumb-item.scss'; +@import './breadcrumb.scss'; +@import './button-group.scss'; +@import './button.scss'; +@import './calendar.scss'; @import './card.scss'; -@import './rate.scss'; -@import './steps.scss'; -@import './step.scss'; -@import './carousel.scss'; -@import './scrollbar.scss'; @import './carousel-item.scss'; -@import './collapse.scss'; -@import './collapse-item.scss'; +@import './carousel.scss'; +@import './cascader-panel.scss'; @import './cascader.scss'; +@import './check-tag.scss'; +@import './checkbox-button.scss'; +@import './checkbox-group.scss'; +@import './checkbox.scss'; +@import './col.scss'; +@import './collapse-item.scss'; +@import './collapse.scss'; @import './color-picker.scss'; -@import './transfer.scss'; +@import './config-provider.scss'; @import './container.scss'; -@import './header.scss'; -@import './aside.scss'; -@import './main.scss'; -@import './footer.scss'; -@import './timeline.scss'; -@import './timeline-item.scss'; -@import './link.scss'; +@import './date-picker.scss'; +@import './descriptions'; +@import './descriptions-item'; +@import './dialog.scss'; @import './divider.scss'; -@import './image.scss'; +@import './drawer.scss'; +@import './dropdown-item.scss'; +@import './dropdown-menu.scss'; +@import './dropdown.scss'; +@import './empty.scss'; +@import './footer.scss'; +@import './form-item.scss'; +@import './form.scss'; +@import './header.scss'; @import './image-viewer.scss'; -@import './calendar.scss'; -@import './backtop.scss'; +@import './image.scss'; @import './infinite-scroll.scss'; +@import './input-number.scss'; +@import './input.scss'; +@import './link.scss'; +@import './loading.scss'; +@import './main.scss'; +@import './menu-item-group.scss'; +@import './menu-item.scss'; +@import './menu.scss'; +@import './message-box.scss'; +@import './message.scss'; +@import './notification.scss'; +@import './overlay.scss'; @import './page-header.scss'; -@import './cascader-panel.scss'; -@import './avatar.scss'; -@import './drawer.scss'; +@import './pagination.scss'; @import './popconfirm.scss'; -@import './overlay.scss'; -@import './virtual-list.scss'; -@import './space.scss'; -@import './skeleton.scss'; -@import './skeleton-item.scss'; -@import './empty.scss'; -@import './affix.scss'; -@import './check-tag.scss'; -@import './descriptions'; -@import './descriptions-item'; +@import './popover.scss'; +@import './progress.scss'; +@import './radio-button.scss'; +@import './radio-group.scss'; +@import './radio.scss'; +@import './rate.scss'; @import './result.scss'; -@import './config-provider.scss'; +@import './row.scss'; +@import './scrollbar.scss'; +@import './select-v2.scss'; +@import './select.scss'; +@import './skeleton-item.scss'; +@import './skeleton.scss'; +@import './slider.scss'; +@import './space.scss'; +@import './spinner.scss'; +@import './step.scss'; +@import './steps.scss'; +@import './submenu.scss'; +@import './switch.scss'; +@import './tab-pane.scss'; +@import './table-column.scss'; +@import './table.scss'; +@import './tabs.scss'; +@import './tag.scss'; +@import './time-picker.scss'; +@import './time-select.scss'; +@import './timeline-item.scss'; +@import './timeline.scss'; +@import './tooltip.scss'; +@import './transfer.scss'; +@import './tree.scss'; +@import './upload.scss'; +@import './virtual-list.scss'; +@import './popper.scss'; +@import './select-dropdown-v2.scss'; +@import './select-dropdown.scss'; +@import './option.scss'; +@import './option-group.scss'; +@import './option-item.scss'; diff --git a/packages/theme-chalk/src/input-number.scss b/packages/theme-chalk/src/input-number.scss index d9173f7ae19a4..29bc4276f7852 100644 --- a/packages/theme-chalk/src/input-number.scss +++ b/packages/theme-chalk/src/input-number.scss @@ -3,7 +3,6 @@ @import 'mixins/mixins'; @import 'common/var'; -@import 'input'; @include b(input-number) { position: relative; diff --git a/packages/theme-chalk/src/menu.scss b/packages/theme-chalk/src/menu.scss index 5083c0f24e3ed..25e023f7100f3 100644 --- a/packages/theme-chalk/src/menu.scss +++ b/packages/theme-chalk/src/menu.scss @@ -3,7 +3,6 @@ @import 'mixins/utils'; @import 'common/var'; @import 'common/transition'; -@import 'tooltip'; @mixin menu-item { height: 56px; diff --git a/packages/theme-chalk/src/message-box.scss b/packages/theme-chalk/src/message-box.scss index 240083c758644..fff0e93dc93d6 100644 --- a/packages/theme-chalk/src/message-box.scss +++ b/packages/theme-chalk/src/message-box.scss @@ -4,9 +4,6 @@ @import 'mixins/var'; @import 'common/var'; @import 'common/popup'; -@import 'button'; -@import 'input'; -@import 'overlay'; @include b(message-box) { @include set-component-css-var('messagebox', $--messagebox); diff --git a/packages/theme-chalk/src/pagination.scss b/packages/theme-chalk/src/pagination.scss index 5fd7f72979db9..1216f704a4fdf 100644 --- a/packages/theme-chalk/src/pagination.scss +++ b/packages/theme-chalk/src/pagination.scss @@ -4,7 +4,6 @@ @import 'mixins/utils'; @import 'mixins/var'; @import 'common/var'; -@import 'select'; @include b(pagination) { @include set-component-css-var('pagination', $--pagination); diff --git a/packages/theme-chalk/src/popconfirm.scss b/packages/theme-chalk/src/popconfirm.scss index db8fd478a4c84..e99c2f1880b5e 100644 --- a/packages/theme-chalk/src/popconfirm.scss +++ b/packages/theme-chalk/src/popconfirm.scss @@ -1,6 +1,5 @@ @import 'mixins/mixins'; @import 'common/var'; -@import 'popover'; @include b(popconfirm) { @include e(main) { diff --git a/packages/theme-chalk/src/popover.scss b/packages/theme-chalk/src/popover.scss index 1d3a93802f652..33ecaa6a53a6e 100644 --- a/packages/theme-chalk/src/popover.scss +++ b/packages/theme-chalk/src/popover.scss @@ -1,7 +1,6 @@ @import 'mixins/mixins'; @import 'mixins/var'; @import 'common/var'; -@import 'popper'; @include b(popover) { @include set-component-css-var('popover', $--popover); diff --git a/packages/theme-chalk/src/select-dropdown-v2.scss b/packages/theme-chalk/src/select-dropdown-v2.scss index 0a77d3bcc1128..d9de3f65d5d85 100644 --- a/packages/theme-chalk/src/select-dropdown-v2.scss +++ b/packages/theme-chalk/src/select-dropdown-v2.scss @@ -2,7 +2,6 @@ @import 'mixins/mixins'; @import 'common/var'; -@import './popper'; @include b(select-dropdown) { z-index: calc(var(--el-index-top) + 1); diff --git a/packages/theme-chalk/src/select-dropdown.scss b/packages/theme-chalk/src/select-dropdown.scss index 3b10a6b4ec2b4..f96337757ce7a 100644 --- a/packages/theme-chalk/src/select-dropdown.scss +++ b/packages/theme-chalk/src/select-dropdown.scss @@ -2,7 +2,6 @@ @import 'mixins/mixins'; @import 'common/var'; -@import './popper'; @include b(select-dropdown) { z-index: calc(var(--el-index-top) + 1); diff --git a/packages/theme-chalk/src/select-v2.scss b/packages/theme-chalk/src/select-v2.scss index b2d5ff829adb1..de65701ae9ff1 100644 --- a/packages/theme-chalk/src/select-v2.scss +++ b/packages/theme-chalk/src/select-v2.scss @@ -3,12 +3,6 @@ @import 'mixins/mixins'; @import 'mixins/utils'; @import 'common/var'; -@import 'select-dropdown-v2'; -@import 'input'; -@import 'tag'; -@import 'option-item'; -@import 'option-group'; -@import 'scrollbar'; $--input-inline-start: 7px !default; diff --git a/packages/theme-chalk/src/select.scss b/packages/theme-chalk/src/select.scss index 75bc20c44ab52..14ab5518ed88a 100644 --- a/packages/theme-chalk/src/select.scss +++ b/packages/theme-chalk/src/select.scss @@ -4,12 +4,6 @@ @import 'mixins/utils'; @import 'mixins/var'; @import 'common/var'; -@import 'select-dropdown'; -@import 'input'; -@import 'tag'; -@import 'option'; -@import 'option-group'; -@import 'scrollbar'; @include b(select) { @include set-component-css-var('select', $--select); diff --git a/packages/theme-chalk/src/skeleton.scss b/packages/theme-chalk/src/skeleton.scss index 018458b8617ff..bbe852d65a251 100644 --- a/packages/theme-chalk/src/skeleton.scss +++ b/packages/theme-chalk/src/skeleton.scss @@ -1,7 +1,6 @@ @import 'mixins/mixins'; @import 'mixins/var'; @import 'common/var'; -@import './skeleton-item.scss'; @include b(skeleton) { @include set-component-css-var('skeleton', $--skeleton); diff --git a/packages/theme-chalk/src/slider.scss b/packages/theme-chalk/src/slider.scss index 55ae92e182afe..88522d1e3a00d 100644 --- a/packages/theme-chalk/src/slider.scss +++ b/packages/theme-chalk/src/slider.scss @@ -3,9 +3,6 @@ @import 'mixins/mixins'; @import 'mixins/utils'; @import 'mixins/var'; -@import 'input-number'; -@import 'tooltip'; -@import 'common/var'; @include b(slider) { @include set-component-css-var('slider', $--slider); diff --git a/packages/theme-chalk/src/table-column.scss b/packages/theme-chalk/src/table-column.scss index 4a857266aa966..2ec85f7fef9a3 100644 --- a/packages/theme-chalk/src/table-column.scss +++ b/packages/theme-chalk/src/table-column.scss @@ -1,8 +1,6 @@ @use "sass:map"; @import 'mixins/mixins'; -@import 'checkbox'; -@import 'tag'; @import 'common/var'; @include b(table-column) { diff --git a/packages/theme-chalk/src/table.scss b/packages/theme-chalk/src/table.scss index 64a8b4dad681e..68e536800046a 100644 --- a/packages/theme-chalk/src/table.scss +++ b/packages/theme-chalk/src/table.scss @@ -1,8 +1,5 @@ @import 'mixins/mixins'; @import 'mixins/var'; -@import 'checkbox'; -@import 'tag'; -@import 'tooltip'; @import 'common/var'; @include b(table) { diff --git a/packages/theme-chalk/src/time-picker.scss b/packages/theme-chalk/src/time-picker.scss index 9ecba053da445..140cf67a5ba7e 100644 --- a/packages/theme-chalk/src/time-picker.scss +++ b/packages/theme-chalk/src/time-picker.scss @@ -3,6 +3,3 @@ @import './date-picker/time-spinner.scss'; @import './date-picker/time-picker.scss'; @import './date-picker/time-range-picker.scss'; -@import './input.scss'; -@import './scrollbar.scss'; -@import './popper'; diff --git a/packages/theme-chalk/src/time-select.scss b/packages/theme-chalk/src/time-select.scss index 6b3bc08a53a2f..d0287828ac82d 100644 --- a/packages/theme-chalk/src/time-select.scss +++ b/packages/theme-chalk/src/time-select.scss @@ -1,11 +1,6 @@ @import 'common/var'; @import './date-picker/picker.scss'; @import './date-picker/date-picker.scss'; -@import './scrollbar.scss'; -@import './popper'; -@import './input.scss'; -@import './select.scss'; -@import './option.scss'; .time-select { margin: 5px 0; diff --git a/packages/theme-chalk/src/tooltip.scss b/packages/theme-chalk/src/tooltip.scss index 015a7e567a031..f188d5e100794 100644 --- a/packages/theme-chalk/src/tooltip.scss +++ b/packages/theme-chalk/src/tooltip.scss @@ -3,7 +3,6 @@ @import 'mixins/mixins'; @import 'mixins/var'; @import 'common/var'; -@import 'popper'; $positions: top, bottom, left, right; diff --git a/packages/theme-chalk/src/transfer.scss b/packages/theme-chalk/src/transfer.scss index 1a028ad5021e4..688edcc6c4c2e 100644 --- a/packages/theme-chalk/src/transfer.scss +++ b/packages/theme-chalk/src/transfer.scss @@ -3,11 +3,8 @@ @import 'mixins/mixins'; @import 'mixins/utils'; +@import 'mixins/var'; @import 'common/var'; -@import 'input'; -@import 'button'; -@import 'checkbox'; -@import 'checkbox-group'; @include b(transfer) { @include set-component-css-var('transfer', $--transfer); diff --git a/packages/theme-chalk/src/tree.scss b/packages/theme-chalk/src/tree.scss index 6ce1bc9f9bd1f..a11d3badcbcfa 100644 --- a/packages/theme-chalk/src/tree.scss +++ b/packages/theme-chalk/src/tree.scss @@ -2,7 +2,6 @@ @import 'mixins/var'; @import 'common/var'; @import 'common/transition'; -@import 'checkbox'; @include b(tree) { @include set-component-css-var('tree', $--tree); diff --git a/packages/theme-chalk/src/upload.scss b/packages/theme-chalk/src/upload.scss index e610b017a6c23..9a3d94228e13b 100644 --- a/packages/theme-chalk/src/upload.scss +++ b/packages/theme-chalk/src/upload.scss @@ -1,5 +1,5 @@ @import 'mixins/mixins'; -@import 'progress'; +@import 'mixins/utils'; @import 'common/var'; @include b(upload) { diff --git a/packages/theme-chalk/src/virtual-list.scss b/packages/theme-chalk/src/virtual-list.scss index f9ac184ad9691..8247cf962abb9 100644 --- a/packages/theme-chalk/src/virtual-list.scss +++ b/packages/theme-chalk/src/virtual-list.scss @@ -1,6 +1,5 @@ @import 'mixins/mixins'; @import 'common/var'; -@import './scrollbar.scss'; @include b(vl) { @include e(wrapper) { diff --git a/packages/time-picker/package.json b/packages/time-picker/package.json deleted file mode 100644 index 9d508e9a34dc1..0000000000000 --- a/packages/time-picker/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/time-picker", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.0" - } -} diff --git a/packages/time-select/package.json b/packages/time-select/package.json deleted file mode 100644 index 5d956f0139e51..0000000000000 --- a/packages/time-select/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/time-select", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/timeline-item/index.ts b/packages/timeline-item/index.ts deleted file mode 100644 index 1680c0fc0a6a3..0000000000000 --- a/packages/timeline-item/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import TimelineItem from '../timeline/src/item.vue' - -TimelineItem.install = (app: App): void => { - app.component(TimelineItem.name, TimelineItem) -} - -const _TimelineItem: SFCWithInstall = TimelineItem - -export default _TimelineItem diff --git a/packages/timeline-item/package.json b/packages/timeline-item/package.json deleted file mode 100644 index f747858d727c3..0000000000000 --- a/packages/timeline-item/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/timeline-item", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/timeline/index.ts b/packages/timeline/index.ts deleted file mode 100644 index fcb3ffdbf80b0..0000000000000 --- a/packages/timeline/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { App } from 'vue' -import type { SFCWithInstall } from '@element-plus/utils/types' -import Timeline from './src/index.vue' - -Timeline.install = (app: App): void => { - app.component(Timeline.name, Timeline) -} - -const _Timeline: SFCWithInstall = Timeline - -export default _Timeline diff --git a/packages/timeline/package.json b/packages/timeline/package.json deleted file mode 100644 index f9135502cd105..0000000000000 --- a/packages/timeline/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/timeline", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/form/src/token.ts b/packages/tokens/form.ts similarity index 87% rename from packages/form/src/token.ts rename to packages/tokens/form.ts index 857be369a23a8..9f0f6a0ce3f0e 100644 --- a/packages/form/src/token.ts +++ b/packages/tokens/form.ts @@ -1,8 +1,9 @@ import type { InjectionKey } from 'vue' -import type { Emitter } from 'mitt' import type { FieldErrorList, } from 'async-validator' +import type { Emitter } from 'mitt' +import type { ComponentSize } from '@element-plus/utils/types' export interface ElFormContext { registerLabelWidth(width: number, oldWidth: number): void @@ -12,11 +13,12 @@ export interface ElFormContext { emit: (evt: string, ...args: any[]) => void labelSuffix: string inline?: boolean + inlineMessage?: boolean model?: Record size?: string showMessage?: boolean labelPosition?: string - labelWidth?: string + labelWidth?: string | number rules?: Record statusIcon?: boolean hideRequiredAsterisk?: boolean @@ -24,7 +26,7 @@ export interface ElFormContext { } export interface ValidateFieldCallback { - (isValid?: boolean, invalidFields?: FieldErrorList): void + (isValid?: string, invalidFields?: FieldErrorList): void } export interface ElFormItemContext { diff --git a/packages/tokens/gulpfile.ts b/packages/tokens/gulpfile.ts new file mode 100644 index 0000000000000..cd0e1f0bbc687 --- /dev/null +++ b/packages/tokens/gulpfile.ts @@ -0,0 +1,57 @@ +import gulp from 'gulp' +import ts from 'gulp-typescript' +import path from 'path' +import { buildOutput } from '../../build/paths' +import rewriter from '../../build/gulp-rewriter' + +export const esm = './es' +export const cjs = './lib' +const tsProject = ts.createProject('tsconfig.json') + +const inputs = [ + './*.ts', + '!./node_modules', + '!./gulpfile.ts', + '!./__tests__/*.ts', +] + +function compileEsm() { + return gulp + .src(inputs) + .pipe(tsProject()) + .pipe(rewriter('..')) + .pipe(gulp.dest(esm)) +} + +function compileCjs() { + return gulp + .src(inputs) + .pipe( + ts.createProject('tsconfig.json', { + module: 'commonjs', + })(), + ) + .pipe(rewriter('..')) + .pipe(gulp.dest(cjs)) +} + +const distBundle = path.resolve(buildOutput, './element-plus') + +/** + * copy from packages/hooks/lib to dist/hooks + */ +function copyEsm() { + return gulp + .src(esm + '/**') + .pipe(gulp.dest(path.resolve(distBundle, './es/tokens'))) +} + +function copyCjs() { + return gulp + .src(cjs + '/**') + .pipe(gulp.dest(path.resolve(distBundle, './lib/tokens'))) +} + +export const build = gulp.series(compileEsm, compileCjs, copyEsm, copyCjs) + +export default build diff --git a/packages/tokens/index.ts b/packages/tokens/index.ts new file mode 100644 index 0000000000000..54151771d5fa9 --- /dev/null +++ b/packages/tokens/index.ts @@ -0,0 +1 @@ +export * from './form' diff --git a/packages/tokens/package.json b/packages/tokens/package.json new file mode 100644 index 0000000000000..46653d91bec47 --- /dev/null +++ b/packages/tokens/package.json @@ -0,0 +1,34 @@ +{ + "name": "@element-plus/tokens", + "version": "0.0.5", + "license": "MIT", + "peerDependencies": { + "vue": "3.1.1" + }, + "scripts": { + "clean": "rm -rf lib", + "build": "gulp build" + }, + "main": "index.js", + "module": "index.js", + "types": "index.d.js", + "unpkg": "index.js", + "jsdelivr": "index.js", + "dependencies": { + "lodash": "^4.17.20", + "normalize-wheel": "^1.0.1", + "resize-observer-polyfill": "^1.5.1", + "async-validator": "^3.4.0", + "mitt": "^2.1.0" + }, + "devDependencies": { + "@vue/test-utils": "^2.0.0-beta.3", + "chalk": "^4.1.2", + "gulp": "^4.0.2", + "gulp-typescript": "^6.0.0-alpha.1", + "sass": "^1.37.0", + "ts-node": "^10.1.0", + "typescript": "^4.3.5" + }, + "gitHead": "c69724230befa8fede0e6b9c37fb0b7e39fd7cdd" +} \ No newline at end of file diff --git a/packages/tokens/tsconfig.json b/packages/tokens/tsconfig.json new file mode 100644 index 0000000000000..003fd496ff4a0 --- /dev/null +++ b/packages/tokens/tsconfig.json @@ -0,0 +1,11 @@ +{ + "compilerOptions": { + "esModuleInterop": true, + "rootDir": ".", + "declaration": true, + "lib": ["ES2020", "DOM"], + "skipLibCheck": true, + "target": "es6", + "moduleResolution": "node" + }, +} diff --git a/packages/tooltip/index.ts b/packages/tooltip/index.ts deleted file mode 100644 index 42c82ad878317..0000000000000 --- a/packages/tooltip/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { App } from 'vue' -import Tooltip from './src/index' -import { SFCWithInstall } from '@element-plus/utils/types' - -Tooltip.install = (app: App): void => { - app.component(Tooltip.name, Tooltip) -} - -const _Tooltip: SFCWithInstall = Tooltip as SFCWithInstall - -export default _Tooltip diff --git a/packages/tooltip/package.json b/packages/tooltip/package.json deleted file mode 100644 index e44fbc925744e..0000000000000 --- a/packages/tooltip/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/tooltip", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/transfer/package.json b/packages/transfer/package.json deleted file mode 100644 index 09c80e596da81..0000000000000 --- a/packages/transfer/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/transfer", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.0" - } -} diff --git a/packages/transition/index.ts b/packages/transition/index.ts deleted file mode 100644 index 6a3ca9087ad44..0000000000000 --- a/packages/transition/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { App } from 'vue' -import ElCollapseTransition from './collapse-transition/index.vue' - -export default (app: App): void => { - app.component(ElCollapseTransition.name, ElCollapseTransition) -} - - -export { ElCollapseTransition } diff --git a/packages/transition/package.json b/packages/transition/package.json deleted file mode 100644 index bd610259a979d..0000000000000 --- a/packages/transition/package.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "name": "@element-plus/transition", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "dependencies": { - "@element-plus/utils": "^0.0.0" - }, - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/tree/package.json b/packages/tree/package.json deleted file mode 100644 index f99f178dc0deb..0000000000000 --- a/packages/tree/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/tree", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.0" - } -} diff --git a/packages/upload/package.json b/packages/upload/package.json deleted file mode 100644 index 72c49c03f3279..0000000000000 --- a/packages/upload/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/upload", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/packages/utils/config.ts b/packages/utils/config.ts index f7cfc363a3431..a7ec44881d3a3 100644 --- a/packages/utils/config.ts +++ b/packages/utils/config.ts @@ -1,9 +1,10 @@ +import type { ComponentSize } from './types' + export interface InstallOptions { size: ComponentSize zIndex: number locale?: any - i18n?: (...args: any[]) => string } let $ELEMENT = { } as InstallOptions diff --git a/packages/utils/dom.ts b/packages/utils/dom.ts index c687728ef44e9..110b05122672d 100644 --- a/packages/utils/dom.ts +++ b/packages/utils/dom.ts @@ -1,7 +1,7 @@ import isServer from './isServer' import { camelize, isObject } from './util' -export type Nullable = null | T +import type { Nullable } from './types' /* istanbul ignore next */ const trim = function(s: string) { diff --git a/packages/utils/gulpfile.ts b/packages/utils/gulpfile.ts new file mode 100644 index 0000000000000..69cf1bafda70b --- /dev/null +++ b/packages/utils/gulpfile.ts @@ -0,0 +1,48 @@ +import gulp from 'gulp' +import ts from 'gulp-typescript' +import path from 'path' +import { buildOutput } from '../../build/paths' + +export const esm = './es' +export const cjs = './lib' + +const inputs = ['./**/*.ts', '!gulpfile.ts', '!./node_modules', '!./tests/*.ts'] + +function compileEsm() { + return gulp + .src(inputs) + .pipe(ts.createProject('tsconfig.json')()) + .pipe(gulp.dest(esm)) +} + +function compileCjs() { + return gulp + .src(inputs) + .pipe( + ts.createProject('tsconfig.json', { + module: 'commonjs', + })(), + ) + .pipe(gulp.dest(cjs)) +} + +const distBundle = path.resolve(buildOutput, './element-plus') + +/** + * copy from packages/theme-chalk/lib to dist/theme-chalk + */ +function copyEsm() { + return gulp + .src(cjs + '/**') + .pipe(gulp.dest(path.resolve(distBundle, './lib/utils'))) +} + +function copyCjs() { + return gulp + .src(esm + '/**') + .pipe(gulp.dest(path.resolve(distBundle, './es/utils'))) +} + +export const build = gulp.series(compileEsm, compileCjs, copyEsm, copyCjs) + +export default build diff --git a/packages/utils/menu/menu-bar.ts b/packages/utils/menu/menu-bar.ts index 1a6a3c31d6077..48c3cc8fcaa8c 100644 --- a/packages/utils/menu/menu-bar.ts +++ b/packages/utils/menu/menu-bar.ts @@ -1,5 +1,6 @@ import MenuItem from './menu-item' -import { RendererNode } from 'vue' + +import type { RendererNode } from 'vue' class Menu { constructor(public domNode: RendererNode) { diff --git a/packages/utils/package.json b/packages/utils/package.json index 323a95234234b..497da7985cf93 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -1,14 +1,27 @@ { "name": "@element-plus/utils", - "version": "0.0.0", + "version": "0.0.5", "license": "MIT", - "dependencies": { - "resize-observer-polyfill": "^1.5.1" - }, "peerDependencies": { "vue": "3.1.1" }, + "scripts": { + "clean": "rm -rf lib es", + "build": "gulp build" + }, + "dependencies": { + "lodash": "^4.17.20", + "normalize-wheel": "^1.0.1", + "resize-observer-polyfill": "^1.5.1" + }, "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } + "@vue/test-utils": "^2.0.0-beta.3", + "chalk": "^4.1.2", + "gulp": "^4.0.2", + "gulp-typescript": "^6.0.0-alpha.1", + "sass": "^1.37.0", + "ts-node": "^10.1.0", + "typescript": "^4.3.5" + }, + "gitHead": "c69724230befa8fede0e6b9c37fb0b7e39fd7cdd" } diff --git a/packages/utils/resize-event.ts b/packages/utils/resize-event.ts index 7bfb4fa6c0e9f..cf2996774d7e8 100644 --- a/packages/utils/resize-event.ts +++ b/packages/utils/resize-event.ts @@ -1,6 +1,8 @@ import ResizeObserver from 'resize-observer-polyfill' import isServer from './isServer' +import type { CustomizedHTMLElement } from './types' + export type ResizableElement = CustomizedHTMLElement<{ __resizeListeners__: Array<(...args: unknown[]) => unknown> __ro__: ResizeObserver diff --git a/packages/utils/tsconfig.json b/packages/utils/tsconfig.json new file mode 100644 index 0000000000000..003fd496ff4a0 --- /dev/null +++ b/packages/utils/tsconfig.json @@ -0,0 +1,11 @@ +{ + "compilerOptions": { + "esModuleInterop": true, + "rootDir": ".", + "declaration": true, + "lib": ["ES2020", "DOM"], + "skipLibCheck": true, + "target": "es6", + "moduleResolution": "node" + }, +} diff --git a/packages/utils/types.ts b/packages/utils/types.ts index c66ca8c8063a8..99ffd5c1face3 100644 --- a/packages/utils/types.ts +++ b/packages/utils/types.ts @@ -22,3 +22,17 @@ export type PartialReturnType unknown> = Parti export type SFCWithInstall = T & Plugin export type RefElement = HTMLElement | null + +export type Nullable = T | null; + +export type CustomizedHTMLElement = HTMLElement & T + +export type Indexable = { + [key: string]: T +} + +export type Hash = Indexable + +export type TimeoutHandle = ReturnType + +export type ComponentSize = 'large' | 'medium' | 'small' | 'mini' diff --git a/packages/utils/util.ts b/packages/utils/util.ts index 0db86b8f2d83b..b6983dbc1e06e 100644 --- a/packages/utils/util.ts +++ b/packages/utils/util.ts @@ -4,10 +4,8 @@ import isEqualWith from 'lodash/isEqualWith' import isServer from './isServer' import { warn } from './error' -import type { ComponentPublicInstance, Ref } from 'vue' -import type { AnyFunction } from './types' - -export type Nullable = null | T +import type { ComponentPublicInstance, CSSProperties, Ref } from 'vue' +import type { AnyFunction, TimeoutHandle, Hash, Nullable } from './types' // type polyfill for compat isIE method declare global { @@ -18,8 +16,6 @@ declare global { export const SCOPE = 'Util' -export type PartialCSSStyleDeclaration = Partial> - export function toObject(arr: Array): Record { const res = {} for (let i = 0; i < arr.length; i++) { @@ -104,8 +100,8 @@ export const isFirefox = function (): boolean { } export const autoprefixer = function ( - style: PartialCSSStyleDeclaration, -): PartialCSSStyleDeclaration { + style: CSSProperties, +): CSSProperties { const rules = ['transform', 'transition', 'animation'] const prefixes = ['ms-', 'webkit-'] rules.forEach(rule => { diff --git a/packages/utils/vnode.ts b/packages/utils/vnode.ts index 57ad89fd62cb6..04c068dd690f7 100644 --- a/packages/utils/vnode.ts +++ b/packages/utils/vnode.ts @@ -103,7 +103,7 @@ export const getNormalizedProps = (node: VNode) => { return } const raw = node.props || {} - const type = node.type?.props || {} + const type = (node.type as any).props || {} const props = {} Object.keys(type).forEach(key => { diff --git a/packages/virtual-list/package.json b/packages/virtual-list/package.json deleted file mode 100644 index 876dc177b9d11..0000000000000 --- a/packages/virtual-list/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@element-plus/virtual-list", - "version": "0.0.0", - "main": "dist/index.js", - "license": "MIT", - "peerDependencies": { - "vue": "3.1.1" - }, - "devDependencies": { - "@vue/test-utils": "^2.0.0-beta.3" - } -} diff --git a/scripts/gc.sh b/scripts/gc.sh index c13e3713be717..3d8c6e8c6992a 100755 --- a/scripts/gc.sh +++ b/scripts/gc.sh @@ -63,7 +63,7 @@ EOF cat > $DIRNAME/package.json < & { - install(app: App): void - } + import { DefineComponent } from 'vue' + const component: DefineComponent<{}, {}, any> export default component } - -declare type Nullable = T | null; - -declare type CustomizedHTMLElement = HTMLElement & T - -declare type Indexable = { - [key: string]: T -} - -declare type Hash = Indexable - -declare type TimeoutHandle = ReturnType - -declare type ComponentSize = 'large' | 'medium' | 'small' | 'mini' diff --git a/website/assets/styles/common.scss b/website/assets/styles/common.scss index 285b2a5054c7a..ee32cf66033d9 100644 --- a/website/assets/styles/common.scss +++ b/website/assets/styles/common.scss @@ -95,20 +95,34 @@ textarea { .page-container { padding-top: 55px; + h1 { + margin-top: 8px; + margin-bottom: 20px; + color: rgba(0, 0, 0, .85); + font-weight: 500; + font-size: 30px; + } + + h2, h3, h4, h5, h6 { + margin: 1.6em 0 .6em; + font-weight: 500; + color: rgba(0, 0, 0, .85); + } + h2 { - font-size: 28px; + font-size: 24px; + line-height: 36px; color: #1f2d3d; - margin: 0; } + h3 { - font-size: 22px; + font-size: 18px; } + h2, h3, h4, h5 { - font-weight: normal; - color: #1f2f3d; &:hover a { opacity: 0.4; @@ -128,7 +142,7 @@ textarea { p { font-size: 14px; - color: #5e6d82; + color: #303133; line-height: 1.5em; } @@ -182,3 +196,42 @@ textarea { padding: 0 12px; } } + +.element-doc { + .example-code { + position: relative; + + .lang-mark { + position: absolute; + bottom: .5rem; + color: #909399; + font-family: inherit; + font-size: .7rem; + font-weight: 700; + right: 1rem; + text-transform: uppercase; + user-select: none; + } + } + + blockquote { + margin: 1em 0; + padding-left: .8em; + color: #909399; + font-size: 90%; + border-left: 4px solid #f0f0f0; + + p { + color: inherit; + margin: 0; + } + } + + .element-plus__link { + + .el-icon { + vertical-align: text-top; + line-height: 1.5em; + } + } +} diff --git a/website/components/heading.vue b/website/components/heading.vue new file mode 100644 index 0000000000000..02e3aea634998 --- /dev/null +++ b/website/components/heading.vue @@ -0,0 +1,45 @@ + + + diff --git a/website/components/img.vue b/website/components/img.vue new file mode 100644 index 0000000000000..3871322ca02cb --- /dev/null +++ b/website/components/img.vue @@ -0,0 +1,10 @@ + + + diff --git a/website/components/link.vue b/website/components/link.vue new file mode 100644 index 0000000000000..f426f5f6c8dab --- /dev/null +++ b/website/components/link.vue @@ -0,0 +1,118 @@ + diff --git a/website/demo-styles/index.scss b/website/demo-styles/index.scss index ceabbd0250f95..402d34c161c6c 100644 --- a/website/demo-styles/index.scss +++ b/website/demo-styles/index.scss @@ -1,4 +1,4 @@ -@import 'element-theme-chalk/src/mixins/config.scss'; +@import '@element-plus/theme-chalk/src/mixins/config.scss'; @import './affix.scss'; @import './alert.scss'; diff --git a/website/docs/en-US/i18n.md b/website/docs/en-US/i18n.md index ea44b36664906..cb312677e1a3b 100644 --- a/website/docs/en-US/i18n.md +++ b/website/docs/en-US/i18n.md @@ -1,298 +1,55 @@ -## Internationalization +# Internationalization -The default locale of Element Plus is English. If you want to use another language, you'll need to do some i18n configuration. In your entry file: +ElementPlus components are using English **by default**, if you wish you use other +languages, you can get you answer by keep reading. -:::warning -We have made breaking changes after **1.0.2-beta.59(included)**, please keep reading for more information，this documentation **does not apply to version before 1.0.2-beta.58(included)** -::: +## Global configuration -### 1.0.2-beta.59(included)： +ElementPlus provides global configurations -After `1.0.2-beta.59(included)`, we reorganized the code, making sure i18n functionalities can be applied seamlessly for both full bundle & on demand usage. +```typescript +import ElementPlus from 'element-plus' +import zhCn from 'element-plus/es/locale/lang/zh-cn' -#### 1. Via ConfigProvider +app.use(ElementPlus, { + locale: zhCn, +}) +``` + +## ConfigProvider -If your project is still using `Options API`, then we suggest you to use it this way, to reduce the mind burden. If you are using `Composition API` throughout your project, we still suggest you to use it this way since this allows you to write less code. +ElementPlus also provides a Vue component [ConfigProvider](/#/zh-CN/component/config-provider) +for globally configuring locale and other settings. ```html ``` -#### Useful links： -- [Supported languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) - -- [ConfigProvider Documentation](#/en-US/component/config-provider) - -#### 2. Via Composable hook -Using this way is basically implementing a [ConfigProvider](https://element-plus.org/#/en-US/component/config-provider) on your own to inject configurations. - -```ts -import { useLocale, useLocaleProps } from 'element-plus' -// Locale Wrapper entry -const Provider = defineComponent({ - props: { - // If you want language switching feature, you need to add these props - // into your Provider - ...useLocaleProps, - }, - setup() { - // No parameters needed, but the props above is required - // ` { locale?: Language, i18n?: (...args: any[]) => string }` - useLocale() - } -}) - - -createApp( - { - // ... - template: ` - - - - ` - } -) - -``` - -### Set Day.js locale - -Element Plus use date time locale (month name, first day of the week ...) from [Day.js](https://day.js.org/) directlly. And will set the global Day.js locale automaticatlly after the locale file is loaded. - -```typescript -import locale from 'element-plus/lib/locale/lang/fr' -import 'dayjs/locale/fr' - -// will auto set Day.js locale to 'fr' -app.use(ElementPlus, { locale }) -``` - -However, you can use another Day.js locale if needed. - -```typescript -import 'dayjs/locale/es' -dayjs.locale('es') -``` - -The English locale is imported by default, even if you're using another locale. But with `NormalModuleReplacementPlugin` provided by webpack you can replace default locale: +Full documentation refer to: [ConfigProvider](/#/zh-CN/component/config-provider) -webpack.config.js - -```typescript -{ - plugins: [ - new webpack.NormalModuleReplacementPlugin( - /element-plus[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]en/, - 'element-plus/lib/locale/lang/fr', - ), - ] -} -``` - -### Compatible `vue-i18n@9.x` - -If you need to check out [VueI18n documentation](https://vue-i18n-next.intlify.dev/guide/#html), please click this link to check it out. - -```typescript -import { createApp } from 'vue' -import { createI18n } from 'vue-i18n' -import ElementPlus from 'element-plus' -import enLocale from 'element-plus/lib/locale/lang/en' -import zhLocale from 'element-plus/lib/locale/lang/zh-cn' -import App from './App.vue' - -const messages = { - [enLocale.name]: { - // el property is critical, set this in order for ElementPlus translate strings correctly. - el: enLocale.el, - // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`, - // Because that makes the ElementPlus internal translation invalid. - message: { - hello: 'hello world', - }, - }, - [zhLocale.name]: { - el: zhLocale.el, - // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`, - // Because that makes the ElementPlus internal translation invalid. - message: { - hello: '你好，世界', - }, - }, - testLocale: { - el: {}, - // No message translations, it will fallback to en lang, the definition of fallbackLocale is below 👇 - }, -} - -const i18n = createI18n({ - locale: zhLocale.name, - fallbackLocale: enLocale.name, - messages, -}) - -const app = createApp(App) - -app.use(ElementPlus, { - i18n: i18n.global.t, -}) - -// Remember to use this plugin. -app.use(i18n) -``` - -### Compatible with other i18n plugins - -Element Plus may not be compatible with i18n plugins other than vue-i18n, but you can customize how Element Plus processes i18n. - -:::tip -Once you set this method, the internal translation function will be invalid, only the customized translation method will be used, be sure that your custom translation method can translate format like `el.scope.subName`, other wise the internal translation string will be raw string. -::: - -```typescript -import Vue from 'vue' -import ElementPlus from 'element-plus' -import enLocale from 'element-plus/lib/locale/lang/en' -import zhLocale from 'element-plus/lib/locale/lang/zh-cn' - -// The is the signature of i18n method. -type i18n = (...args: any[]) => string -Vue.use(Element, { - i18n: function(path, options) { - // ... - }, - // others. -}) -``` - -### Custom i18n in on-demand components - -If you need to know how to lazy loading translation strings, please check this out[Lazy loading](https://vue-i18n-next.intlify.dev/guide/advanced/lazy.html) - -```typescript -import { createApp } from 'vue' -import { createI18n } from 'vue-i18n' -import ElementPlus from 'element-plus' -import enLocale from 'element-plus/lib/locale/lang/en' -import zhLocale from 'element-plus/lib/locale/lang/zh-cn' -import ElementLocale from 'element-plus/lib/locale' -import App from './App.vue' - -const messages = { - [enLocale.name]: { - // el property is critical, set this in order for ElementPlus translate strings correctly. - el: enLocale.el, - // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`, - // Because that makes the ElementPlus internal translation invalid. - message: { - hello: 'hello world', - }, - }, - [zhLocale.name]: { - el: zhLocale.el, - // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`, - // Because that makes the ElementPlus internal translation invalid. - message: { - hello: '你好，世界', - }, - }, - testLocale: { - el: {}, - // No message translations, it will fallback to en lang, the definition of fallbackLocale is below 👇 - }, -} - -const i18n = createI18n({ - locale: zhLocale.name, - fallbackLocale: enLocale.name, - messages, -}) - -ElementLocale.i18n(i18n.global.t) - -const app = createApp(App) -app.use(i18n) -``` - -### Import via CDN - -```html - - - - - - -``` - -Compatible with `vue-i18n` - -```html - - - - - - - -``` - -Currently Element Plus ships with the following languages: +[Supported Language List](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang)
  • Simplified Chinese (zh-cn)
    • @@ -348,4 +105,31 @@ Currently Element Plus ships with the following languages:
  • Esperanto (eo)
-If your target language is not included, you are more than welcome to contribute: just add another language config [here](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) and create a pull request. +If you need any other languages, [PR](https://github.com/element-plus/element-plus/pulls) +is always welcomed, you only need to add a language file at +[here](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang). + +## FAQs + +### If I want to replace the default language pack to reduce the size, how do I do? + +When the default language of your app is not **English**, you will be going to need +to import another language file, which will increase the bundle size since you have +both **English** and **Your desired language** bundled, +you can use the plugin [NormalModuleReplacementPlugin](https://webpack.js.org/plugins/normal-module-replacement-plugin/#root) +provided by [webpack](https://webpack.js.org) to replace the default language file, +so that you will only get **1** language file bundled. +Add the code below into your `webpack.config.js` to get it work. + +> webpack.config.js + +```typescript +{ + plugins: [ + new webpack.NormalModuleReplacementPlugin( + /element-plus[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]en/, + 'element-plus/lib/locale/lang/zh-cn', + ), + ] +} +``` diff --git a/website/docs/en-US/icon.md b/website/docs/en-US/icon.md index 230c75d822801..5586264c62725 100644 --- a/website/docs/en-US/icon.md +++ b/website/docs/en-US/icon.md @@ -1,4 +1,4 @@ -## Icon +# Icon Element Plus provides a set of common icons. @@ -6,24 +6,32 @@ Element Plus provides a set of common icons. Element Plus team is replacing all **Font Icon** in the previously built components to **SVG Icon**, please keep you eyes on [ChangeLog](/#/en-US/component/changelog), for getting latest updates, **Font Icon** will be deprecated after the first stable release. ::: -### SvgIcon Usage +## SvgIcon Usage + - If you want to **use directly** like the example, you need to [globally register](https://v3.vuejs.org/guide/component-registration.html#global-registration) the components before using it. - If you want to see all available SVG icons please check [@element-plus/icons](https://unpkg.com/browse/@element-plus/icons@latest/lib/) and the source [Github/ElementPlus/icons](https://github.com/element-plus/element-plus-icons) out or [SVG icons](/#/en-US/component/icon#svg-tu-biao-ji-he) -### Installation +## Installation + The current icon is only targeted to [Vue3](https://v3.vuejs.org). -#### Using yarn -```shell -$ yarn add @element-plus/icons -``` -#### Using npm +## Using packaging manager + ```shell +$ yarn add @element-plus/icons +# or $ npm install @element-plus/icons ``` -#### Simple usage +## Simple usage + +:::warning + +Because HTML standard has already defined a tag named [menu](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu), +so you need to use an alias in order to render the icon, if you register `Menu` directly it will not work. +::: + ```html @@ -38,16 +46,17 @@ import { Edit } from '@element-plus/icons' export default defineComponent({ components: { - // Full name - [Edit.name]: Edit, // or Shorthanded, Edit, }, }) ``` -#### Combined with `el-icon` + +## Combined with el-icon + :::demo `el-icon` provides extra attributes for raw SVG icon, for more detail, please read to the end. + ```html

with extra class is-loading, your icon is able to rotate 360 deg in 2 seconds, you can also override this @@ -73,11 +82,13 @@ export default defineComponent({ ``` + ::: -#### Using SVG icon directly +## Using SVG icon directly :::demo + ```html

@@ -88,13 +99,15 @@ export default defineComponent({
``` + ::: ### SVG Icons collection + :::tip This collection is updated after ElementPlus@1.0.2-beta.66(included), you can only use `el-icon` to wrap it after ElementPlus@1.0.2-beta.66(included), or directly use it without version constrains -**You can use SVG icon in any version as long as you install it** +**You can use SVG icon in any version** as long as you install it **You can click the icon to copy it** ::: @@ -126,6 +139,7 @@ Just assign the class name to `el-icon-iconName`. Search ``` + ::: ### Font Icons @@ -139,8 +153,8 @@ Just assign the class name to `el-icon-iconName`. - ### SVG Icon Attributes + | Attribute | Description | Type | Acceptable Value | Default | |---------- |-------- |---------- |------------- |-------- | | color | SVG tag's fill attribute | Pick\ | - | inherit from color | diff --git a/website/docs/en-US/installation.md b/website/docs/en-US/installation.md index f46594316e3ed..56af5c10ab82b 100644 --- a/website/docs/en-US/installation.md +++ b/website/docs/en-US/installation.md @@ -1,35 +1,90 @@ -## Installation +# Installing ElementPlus -### npm +## Environment -Installing with npm is recommended and it works seamlessly with [webpack](https://webpack.js.org/). +- Modern browser + +| ![IE](https://cdn.jsdelivr.net/npm/@browser-logos/edge/edge_32x32.png) | ![Firefox](https://cdn.jsdelivr.net/npm/@browser-logos/firefox/firefox_32x32.png) | ![Chrome](https://cdn.jsdelivr.net/npm/@browser-logos/chrome/chrome_32x32.png) | ![Safari](https://cdn.jsdelivr.net/npm/@browser-logos/safari/safari_32x32.png) | +| --- | --- | --- | --- | +| Edge | last 2 versions | last 2 versions | last 2 versions | + +> Since Vue3 no longer supports IE11, ElementPlus does not support IE11 and previous +versions. + +## Current latest version + +ElementPlus is currently in a rapid development iteration: + +[![ElementPlus version badge](https://img.shields.io/npm/v/element-plus.svg?style=flat-square)](https://www.npmjs.org/package/element-plus) + +## Install via npm or yarn + +**We recommend using the package manager to install ElementPlus**, +so that you can utilize bundlers like [vite](https://vitejs.dev) and +[webpack](https://webpack.js.org/). ```shell -npm install element-plus --save +$ npm install element-plus --save ``` -### CDN +```shell +$ yarn add element-plus +``` + +If your network environment is not good, it is recommended to use a mirror registry + +## Browser direct introducing + +Directly import ElementPlus through browser HTML tags, and use `ElementPlus` globally + +Introduce `ElementPlus` in full through **CDN**. According to different **CDN** +providers, there are different introduction methods. Here we use +[unpkg](https://unpkg.com) and[jsdelivr](https://jsdelivr.com) For example, +You can also use other **CDN** providers. + +## Use unpkg + +```html + + + + + + + + +``` -Get the latest version from [unpkg.com/element-plus](https://unpkg.com/element-plus/) , and import JavaScript and CSS file in your page. +## Use jsDelivr ```html - - - - + + + + + + + + ``` :::tip -We recommend our users to lock Element Plus's version when using CDN. Please refer to [unpkg.com](https://unpkg.com) for more information. +We recommend using **CDN** to introduce `ElementPlus` users to lock the version +on the link address, so as not to be affected by incompatible updates when `ElementPlus` +is upgraded in the future. Please check [unpkg.com](https://unpkg.com) for +the method to lock the version. ::: -### Hello world +## Hello world -If you are using CDN, a hello-world page is easy with Element Plus. [Online Demo](https://codepen.io/iamkun/pen/YzWMaVr) +With **CDN**, we can easily use `ElementPlus` to +write a Hello world page. [Online Demo](https://codepen.io/iamkun/pen/YzWMaVr) - -If you are using npm and wish to apply webpack, please continue to the next page: [Quick Start](/#/en-US/component/quickstart). +If you are installing via npm / yarn and want to use it with +a packaging tool, please read the +next section: [Quick Start](/#/en-US/component/quickstart). diff --git a/website/docs/en-US/quickstart.md b/website/docs/en-US/quickstart.md index 0342438d77e6c..e85f3a8967b91 100644 --- a/website/docs/en-US/quickstart.md +++ b/website/docs/en-US/quickstart.md @@ -1,431 +1,207 @@ -## Quick start +# Quick start -This part walks you through the process of using Element Plus in a webpack project. +This section describes how to use ElementPlus in your project. -### Use vue-cli@4.5 +## Using components -We provide an [Element Plus plugin](https://github.com/element-plus/vue-cli-plugin-element-plus) for vue-cli@4.5, which you can use to quickly build an Element-based project. +### Full import -### Use Starter Kit +> main.ts -We provide a general [project template](https://github.com/element-plus/element-plus-starter) for you, and also a Vite [template](https://github.com/element-plus/element-plus-vite-starter). For Laravel users, we have a [template](https://github.com/element-plus/element-plus-in-laravel-starter) here. You can download and use them directly. - -If you prefer not to use them, please read the following. - -### Import Element Plus - -You can import ElementPlus entirely, or just import what you need. Let's start with fully import. - -#### Fully import - -In main.js: - -```javascript +```typescript +// main.ts import { createApp } from 'vue' -import ElementPlus from 'element-plus'; -import 'element-plus/lib/theme-chalk/index.css'; -import App from './App.vue'; +import ElementPlus from 'element-plus' +import 'element-plus/dist/index.css' +import App from './App.vue' const app = createApp(App) + app.use(ElementPlus) app.mount('#app') ``` -The above imports Element Plus entirely. Note that CSS file needs to be imported separately. - -#### On demand - -**Vue CLI** +### Import on demand -With the help of [babel-plugin-import](https://github.com/ant-design/babel-plugin-import), we can import components we actually need, making the project smaller than otherwise. +`ElementPlus` provides out of box [Tree Shaking](https://webpack.js.org/guides/tree-shaking/) +functionalities based on ES Module. -Firstly，install babel-plugin-import: +> App.vue -```bash -$ npm install babel-plugin-import -D -``` - -or if you use `Yarn` as package manager +```html + + ``` +### Import stylesheets -Then edit babel.config.js: - -- import `.scss` style +It is **strongly recommended** that you import the **bundled stylesheet file**, even +though this could increase the final output bundle size, but it requires no +packaging plugins for bundling, you can use +[CDN](https://www.cloudflare.com/learning/cdn/what-is-a-cdn/) to load your stylesheet +which would be much more faster than hosting the file on your own server. -:::warning -Please make sure that `sass` and `sass-loader` dependencies have been installed and import `element-plus/packages/theme-chalk/src/base.scss` in the entry file. -::: +Import via JavaScript -```js -module.exports = { - plugins: [ - [ - "import", - { - libraryName: 'element-plus', - customStyleName: (name) => { - name = name.slice(3) - return `element-plus/packages/theme-chalk/src/${name}.scss`; - }, - }, - ], - ], -}; +```typescript +import 'element-plus/dist/index.css' ``` -- import `.css` style +Import via HTML `head` tag. -```js -module.exports = { - plugins: [ - [ - "import", - { - libraryName: 'element-plus', - customStyleName: (name) => { - return `element-plus/lib/theme-chalk/${name}.css`; - }, - }, - ], - ], -}; +```html + + + + ``` -**Vite** +If you also want the style to be imported on demand, you need to use co-responding +plugins based on your bundler, read more: [FAQs](/#/en-US/component/quickstart#faqs) -Firstly，install [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import): - -```bash -$ npm install vite-plugin-style-import -D -``` +## Starter templates -or if you use Yarn as package manager +### Using vue-cli@4.5 -```bash -$ yarn add vite-plugin-style-import -D -``` +We prepared a plugin [Element Plus VueCLI plugin](https://github.com/element-plus/vue-cli-plugin-element-plus), +for new version [vue-cli](https://cli.vuejs.org/), you can setup a project based +on ElementPlus easily. -Then edit vite.config.js: +### Using Starter Kit -- import `.scss` style - -:::warning -Please make sure that the `sass` dependency have been installed and import `element-plus/packages/theme-chalk/src/base.scss` in the entry file. -::: +We provide a general [Project Template](https://github.com/element-plus/element-plus-starter), +also a [Vite Template](https://github.com/element-plus/element-plus-vite-starter). +For Laravel users we have a [Laravel Template](https://github.com/element-plus/element-plus-in-laravel-starter). -```js -import { defineConfig } from 'vite' -import vue from '@vitejs/plugin-vue' -import styleImport from 'vite-plugin-style-import' +## Global configuration -export default defineConfig({ - plugins: [ - vue(), - styleImport({ - libs: [{ - libraryName: 'element-plus', - esModule: true, - ensureStyleFile: true, - resolveStyle: (name) => { - name = name.slice(3) - return `element-plus/packages/theme-chalk/src/${name}.scss`; - }, - resolveComponent: (name) => { - return `element-plus/lib/${name}`; - }, - }] - }) - ] -}) -``` +When registering ElementPlus, you can pass a global config object with `size` and +`zIndex` to set the default `size` for form components, and `zIndex` for +popup components, the default value for `zIndex` is **2000** -- import `.css` style +Full import: ```js -import { defineConfig } from 'vite' -import vue from '@vitejs/plugin-vue' -import styleImport from 'vite-plugin-style-import' +import { createApp } from 'vue' +import ElementPlus from 'element-plus'; +import App from './App.vue'; -export default defineConfig({ - plugins: [ - vue(), - styleImport({ - libs: [ - { - libraryName: 'element-plus', - esModule: true, - ensureStyleFile: true, - resolveStyle: (name) => { - return `element-plus/lib/theme-chalk/${name}.css`; - }, - resolveComponent: (name) => { - return `element-plus/lib/${name}`; - }, - } - ] - }) - ] -}) +const app = createApp(App) +app.use(ElementPlus, { size: 'small', zIndex: 3000 }); ``` -Next, if you need Button and Select, edit main.js: +On demand: -```javascript +```js import { createApp } from 'vue' -import { ElButton, ElSelect } from 'element-plus'; +import { ElButton } from 'element-plus'; import App from './App.vue'; -// If you want to use the .scss style file, you need to import the base.scss file -// import 'element-plus/packages/theme-chalk/src/base.scss' const app = createApp(App) -app.component(ElButton.name, ElButton); -app.component(ElSelect.name, ElSelect); - -/* or - * app.use(ElButton) - * app.use(ElSelect) - */ - -app.mount('#app') +app.config.globalProperties.$ELEMENT = option +app.use(ElButton); ``` -Full example (Component list [reference](https://github.com/element-plus/element-plus/tree/dev/packages)) +## Using Nuxt.js -```javascript -import { createApp } from 'vue' -import App from './App.vue'; -// If you want to use the .scss style file, you need to import the base.scss file -// import 'element-plus/packages/theme-chalk/src/base.scss' - -import { - ElAlert, - ElAside, - ElAutocomplete, - ElAvatar, - ElBacktop, - ElBadge, - ElBreadcrumb, - ElBreadcrumbItem, - ElButton, - ElButtonGroup, - ElCalendar, - ElCard, - ElCarousel, - ElCarouselItem, - ElCascader, - ElCascaderPanel, - ElCheckbox, - ElCheckboxButton, - ElCheckboxGroup, - ElCol, - ElCollapse, - ElCollapseItem, - ElCollapseTransition, - ElColorPicker, - ElContainer, - ElDatePicker, - ElDialog, - ElDivider, - ElDrawer, - ElDropdown, - ElDropdownItem, - ElDropdownMenu, - ElFooter, - ElForm, - ElFormItem, - ElHeader, - ElIcon, - ElImage, - ElInput, - ElInputNumber, - ElLink, - ElMain, - ElMenu, - ElMenuItem, - ElMenuItemGroup, - ElOption, - ElOptionGroup, - ElPageHeader, - ElPagination, - ElPopconfirm, - ElPopover, - ElPopper, - ElProgress, - ElRadio, - ElRadioButton, - ElRadioGroup, - ElRate, - ElRow, - ElScrollbar, - ElSelect, - ElSlider, - ElStep, - ElSteps, - ElSubmenu, - ElSwitch, - ElTabPane, - ElTable, - ElTableColumn, - ElTabs, - ElTag, - ElTimePicker, - ElTimeSelect, - ElTimeline, - ElTimelineItem, - ElTooltip, - ElTransfer, - ElTree, - ElUpload, - ElInfiniteScroll, - ElLoading, - ElMessage, - ElMessageBox, - ElNotification, -} from 'element-plus'; - -const components = [ - ElAlert, - ElAside, - ElAutocomplete, - ElAvatar, - ElBacktop, - ElBadge, - ElBreadcrumb, - ElBreadcrumbItem, - ElButton, - ElButtonGroup, - ElCalendar, - ElCard, - ElCarousel, - ElCarouselItem, - ElCascader, - ElCascaderPanel, - ElCheckbox, - ElCheckboxButton, - ElCheckboxGroup, - ElCol, - ElCollapse, - ElCollapseItem, - ElCollapseTransition, - ElColorPicker, - ElContainer, - ElDatePicker, - ElDialog, - ElDivider, - ElDrawer, - ElDropdown, - ElDropdownItem, - ElDropdownMenu, - ElFooter, - ElForm, - ElFormItem, - ElHeader, - ElIcon, - ElImage, - ElInput, - ElInputNumber, - ElLink, - ElMain, - ElMenu, - ElMenuItem, - ElMenuItemGroup, - ElOption, - ElOptionGroup, - ElPageHeader, - ElPagination, - ElPopconfirm, - ElPopover, - ElPopper, - ElProgress, - ElRadio, - ElRadioButton, - ElRadioGroup, - ElRate, - ElRow, - ElScrollbar, - ElSelect, - ElSlider, - ElStep, - ElSteps, - ElSubmenu, - ElSwitch, - ElTabPane, - ElTable, - ElTableColumn, - ElTabs, - ElTag, - ElTimePicker, - ElTimeSelect, - ElTimeline, - ElTimelineItem, - ElTooltip, - ElTransfer, - ElTree, - ElUpload, -] - -const plugins = [ - ElInfiniteScroll, - ElLoading, - ElMessage, - ElMessageBox, - ElNotification, -] +We can also use [Nuxt.js](https://nuxtjs.org)： -const app = createApp(App) +
+ +
-components.forEach(component => { - app.component(component.name, component) -}) +## Let's get started -plugins.forEach(plugin => { - app.use(plugin) -}) -``` +You can bootstrap your project from now on, for each components usage, please +refer to individual component documentation. -### Global config +## FAQs -When 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: +### I'd like to import both components and style at the same time -Fully import Element： +You can achieve that based on the bundler you are currently using, with +ElementPlus supported plugins. -```js -import { createApp } from 'vue' -import ElementPlus from 'element-plus'; -import App from './App.vue'; +#### Using vite -const app = createApp(App) -app.use(ElementPlus, { size: 'small', zIndex: 3000 }); +If you are using [vite](https://vitejs.dev) as your bundler, then you need to install +`vite-plugin-element-plus` in order to get it work. + +```shell +yarn add vite-plugin-element-plus -D +# or +npm install vite-plugin-element-plus -D ``` -Partial import Element： +Then you need to add the code below into your `vite.config.[t]js` file. -```js -import { createApp } from 'vue' -import { ElButton } from 'element-plus'; -import App from './App.vue'; -// If you want to use the .scss style file, you need to import the base.scss file -// import 'element-plus/packages/theme-chalk/src/base.scss' +```typescript +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import VitePluginElementPlus from 'vite-plugin-element-plus' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue(), + VitePluginElementPlus({ + // if you need to use the *.scss source file, you need to uncomment this comment + // useSource: true + }), + ], +}) -const app = createApp(App) -app.config.globalProperties.$ELEMENT = option -app.use(ElButton); ``` -With 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. +For all public API, you can refer to [vite-plugin-element-plus](https://github.com/element-plus/vite-plugin-element-plus) -### Start coding +#### Using webpack -Now you have implemented Vue and Element Plus to your project, and it's time to write your code. Please refer to each component's documentation to learn how to use them. +If you are using webpack as your bundler, then you need to install +[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) in +order to get it work. -### Use Nuxt.js +```shell +yarn add babel-plugin-import -D +# or +npm install babel-plugin-import -D +``` -We can also start a project using [Nuxt.js](https://nuxtjs.org/): +Then you need to add the code below into your `babel.config.js` file. -
- -
+> babel.config.js + +```javascript +module.exports = { + plugins: [ + // ...others + [ + "import", + { + libraryName: 'element-plus', + customStyleName: (name) => { + name = name.slice(3) + // this imports the [name].css file into the project. + return `element-plus/es/${name}/style/css` + // if you wish to import the *.scss source file, please uncomment this + // return `element-plus/es/${name}/style`; + }, + }, + ], + ], +}; +``` diff --git a/website/docs/es/i18n.md b/website/docs/es/i18n.md index 413693b1ddd84..cb312677e1a3b 100644 --- a/website/docs/es/i18n.md +++ b/website/docs/es/i18n.md @@ -1,304 +1,55 @@ -## Internacionalización +# Internationalization -El idioma predeterminado de Element Plus es el inglés. Si se desea utilizar otro idioma, será necesario realizar alguna configuración de i18n. En su fichero de entrada: +ElementPlus components are using English **by default**, if you wish you use other +languages, you can get you answer by keep reading. -The default locale of Element Plus is English. If you want to use another language, you'll need to do some i18n configuration. In your entry file: +## Global configuration -:::warning -We have made breaking changes after **1.0.2-beta.59(included)**, please keep reading for more information，this documentation **does not apply to version before 1.0.2-beta.58(included)** -::: +ElementPlus provides global configurations -### 1.0.2-beta.59(included)： +```typescript +import ElementPlus from 'element-plus' +import zhCn from 'element-plus/es/locale/lang/zh-cn' -After `1.0.2-beta.59(included)`, we reorganized the code, making sure i18n functionalities can be applied seamlessly for both full bundle & on demand usage. +app.use(ElementPlus, { + locale: zhCn, +}) +``` -#### 1. Via ConfigProvider +## ConfigProvider -If your project is still using `Options API`, then we suggest you to use it this way, to reduce the mind burden. If you are using `Composition API` throughout your project, we still suggest you to use it this way since this allows you to write less code. +ElementPlus also provides a Vue component [ConfigProvider](/#/zh-CN/component/config-provider) +for globally configuring locale and other settings. ```html ``` -#### Useful links： -- [Supported languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) - -- [ConfigProvider Documentation](#/es/component/config-provider) - -#### 2. Via Composable hook -Using this way is basically implementing a [ConfigProvider](https://element-plus.org/#/en-US/component/config-provider) on your own to inject configurations. - -```ts -import { useLocale, useLocaleProps } from 'element-plus' -// Locale Wrapper entry -const Provider = defineComponent({ - props: { - // If you want language switching feature, you need to add these props - // into your Provider - ...useLocaleProps, - }, - setup() { - // No parameters needed, but the props above is required - // ` { locale?: Language, i18n?: (...args: any[]) => string }` - useLocale() - } -}) - - -createApp( - { - // ... - template: ` - - - - ` - } -) - -``` - -### Set Day.js locale - -Element Plus use date time locale (month name, first day of the week ...) from [Day.js](https://day.js.org/) directlly. And will set the global Day.js locale automaticatlly after the locale file is loaded. - -```typescript -import locale from 'element-plus/lib/locale/lang/es' -import 'dayjs/locale/es' - -// will auto set Day.js locale to 'es' -app.use(ElementPlus, { locale }) -``` - -However, you can use another Day.js locale if needed. - -```typescript -import 'dayjs/locale/fr' -dayjs.locale('fr') -``` - -El paquete de idioma inglés se importa por defecto, incluso si se esta usando otro idioma. Pero con `NormalModuleReplacementPlugin` proporcionado por el webpack puede reemplazar la localización predeterminada: - -webpack.config.js - -```typescript -{ - plugins: [ - new webpack.NormalModuleReplacementPlugin( - /element-plus[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]en/, - 'element-plus/lib/locale/lang/es', - ), - ] -} -``` - -### Compatible con `vue-i18n@9.x` -Need translation - -If you need to check out [VueI18n documentation](https://vue-i18n-next.intlify.dev/guide/#html), please click this link to check it out. - -```typescript -import { createApp } from 'vue' -import { createI18n } from 'vue-i18n' -import ElementPlus from 'element-plus' -import enLocale from 'element-plus/lib/locale/lang/en' -import zhLocale from 'element-plus/lib/locale/lang/zh-cn' -import App from './App.vue' - -const messages = { - [enLocale.name]: { - // el property is critical, set this in order for ElementPlus translate strings correctly. - el: enLocale.el, - // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`, - // Because that makes the ElementPlus internal translation invalid. - message: { - hello: 'hello world', - }, - }, - [zhLocale.name]: { - el: zhLocale.el, - // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`, - // Because that makes the ElementPlus internal translation invalid. - message: { - hello: '你好，世界', - }, - }, - testLocale: { - el: {}, - // No message translations, it will fallback to en lang, the definition of fallbackLocale is below 👇 - }, -} - -const i18n = createI18n({ - locale: zhLocale.name, - fallbackLocale: enLocale.name, - messages, -}) - -const app = createApp(App) - -app.use(ElementPlus, { - i18n: i18n.global.t, -}) - -// Remember to use this plugin. -app.use(i18n) -``` - -### Compatible con otros plugins i18n -Es posible que Element Plus no sea compatible con otros plugins i18n que no sean vue-i18n, pero puede personalizar la forma en que Element Plus procesa i18n. - -Need translation - -:::tip -Once you set this method, the internal translation function will be invalid, only the customized translation method will be used, be sure that your custom translation method can translate format like `el.scope.subName`, other wise the internal translation string will be raw string. -::: - -```typescript -import Vue from 'vue' -import ElementPlus from 'element-plus' -import enLocale from 'element-plus/lib/locale/lang/en' -import zhLocale from 'element-plus/lib/locale/lang/zh-cn' - -// The is the signature of i18n method. -type i18n = (...args: any[]) => string -Vue.use(Element, { - i18n: function(path, options) { - // ... - }, - // others. -}) -``` -### Personalización de i18n en componentes bajo petición - -Need translation - -If you need to know how to lazy loading translation strings, please check this out[Lazy loading](https://vue-i18n-next.intlify.dev/guide/advanced/lazy.html) - -```typescript -import { createApp } from 'vue' -import { createI18n } from 'vue-i18n' -import ElementPlus from 'element-plus' -import enLocale from 'element-plus/lib/locale/lang/en' -import zhLocale from 'element-plus/lib/locale/lang/zh-cn' -import ElementLocale from 'element-plus/lib/locale' -import App from './App.vue' - -const messages = { - [enLocale.name]: { - // el property is critical, set this in order for ElementPlus translate strings correctly. - el: enLocale.el, - // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`, - // Because that makes the ElementPlus internal translation invalid. - message: { - hello: 'hello world', - }, - }, - [zhLocale.name]: { - el: zhLocale.el, - // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`, - // Because that makes the ElementPlus internal translation invalid. - message: { - hello: '你好，世界', - }, - }, - testLocale: { - el: {}, - // No message translations, it will fallback to en lang, the definition of fallbackLocale is below 👇 - }, -} - -const i18n = createI18n({ - locale: zhLocale.name, - fallbackLocale: enLocale.name, - messages, -}) - -ElementLocale.i18n(i18n.global.t) - -const app = createApp(App) -app.use(i18n) -``` - -### Importar via CDN - -```html - - - - - - -``` - -Compatible con `vue-i18n` - -```html - - - - - +Full documentation refer to: [ConfigProvider](/#/zh-CN/component/config-provider) - -``` - -Actualmente Element Plus está disponible en los siguientes idiomas: +[Supported Language List](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang)
  • Simplified Chinese (zh-cn)
    • @@ -354,4 +105,31 @@ Actualmente Element Plus está disponible en los siguientes idiomas:
  • Esperanto (eo)
-Si su idioma de destino no está incluido, puede contribuir: simplemente añada [aqui](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) otra configuración de idioma y cree un pull request. +If you need any other languages, [PR](https://github.com/element-plus/element-plus/pulls) +is always welcomed, you only need to add a language file at +[here](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang). + +## FAQs + +### If I want to replace the default language pack to reduce the size, how do I do? + +When the default language of your app is not **English**, you will be going to need +to import another language file, which will increase the bundle size since you have +both **English** and **Your desired language** bundled, +you can use the plugin [NormalModuleReplacementPlugin](https://webpack.js.org/plugins/normal-module-replacement-plugin/#root) +provided by [webpack](https://webpack.js.org) to replace the default language file, +so that you will only get **1** language file bundled. +Add the code below into your `webpack.config.js` to get it work. + +> webpack.config.js + +```typescript +{ + plugins: [ + new webpack.NormalModuleReplacementPlugin( + /element-plus[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]en/, + 'element-plus/lib/locale/lang/zh-cn', + ), + ] +} +``` diff --git a/website/docs/es/installation.md b/website/docs/es/installation.md index 2efc0f7b79fcb..30fc051fd68ba 100644 --- a/website/docs/es/installation.md +++ b/website/docs/es/installation.md @@ -1,34 +1,92 @@ -## Instalación +# Installing ElementPlus -### npm +## Medio ambiente -Instalar mediante npm es la forma recomendada ya que se integra fácilmente con [webpack](https://webpack.js.org/). +- Navegador moderno + +| ![IE](https://cdn.jsdelivr.net/npm/@browser-logos/edge/edge_32x32.png) | ![Firefox](https://cdn.jsdelivr.net/npm/@browser-logos/firefox/firefox_32x32.png) | ![Chrome](https://cdn.jsdelivr.net/npm/@browser-logos/chrome/chrome_32x32.png) | ![Safari](https://cdn.jsdelivr.net/npm/@browser-logos/safari/safari_32x32.png) | +| --- | --- | --- | --- | +| Edge | last 2 versions | last 2 versions | last 2 versions | + +> Dado que Vue3 ya no es compatible con IE11, ElementPlus no es compatible con +IE11 y versiones anteriores anteriores. + +## Última versión actual + +ElementPlus se encuentra actualmente en una iteración de desarrollo rápido: + +[![ElementPlus version badge](https://img.shields.io/npm/v/element-plus.svg?style=flat-square)](https://www.npmjs.org/package/element-plus) + +## Instalación mediante npm o yarn + +**Recomendamos utilizar el gestor de paquetes para instalar ElementPlus**, +para poder utilizar bundlers como [vite](https://vitejs.dev) y +[webpack](https://webpack.js.org/). ```shell -npm install element-plus --save +$ npm install element-plus --save ``` -### CDN +```shell +$ yarn add element-plus +``` + +Si su entorno de red no es bueno, se recomienda utilizar un registro espejo + +## Introducción directa del navegador + +Importar directamente ElementPlus a través de las etiquetas HTML del navegador, y utilizar `ElementPlus` de forma global + +Introducir `ElementPlus` en su totalidad a través de **CDN**. Según los diferentes proveedores de **CDN** +hay diferentes métodos de introducción. Aquí utilizamos +[unpkg](https://unpkg.com) y [jsdelivr](https://jsdelivr.com) Por ejemplo, +También puede utilizar otros proveedores de **CDN**. + +## Utilice unpkg + +```html + + + + + + + + +``` -Obtenga la última versión desde [unpkg.com/element-plus](https://unpkg.com/element-plus/) , e importe el JavaScript y los archivos CSS en su página. +## Utilice jsDelivr ```html - - - - + + + + + + + + ``` -##Tip -Recomendamos a nuestros usuarios congelar la versión de Element Plus cuando usas un CDN. Por favor, refiérase a [unpkg.com](https://unpkg.com) para más información. +:::tip +Recomendamos utilizar **CDN** para introducir a los usuarios de `ElementPlus` +para bloquear la versión +en la dirección del enlace, para no verse afectados por actualizaciones +incompatibles cuando `ElementPlus` +se actualice en el futuro. Por favor, consulte [unpkg.com](https://unpkg.com) para +el método para bloquear la versión. +::: -### Hello world +## Hello world -Si esta usando un CDN, una página con Hello-World es fácil con Element Plus. [Online Demo](https://codepen.io/iamkun/pen/YzWMaVr) +Con **CDN**, podemos utilizar fácilmente `ElementPlus` para +escribir una página de Hola Mundo. [Online Demo](https://codepen.io/iamkun/pen/YzWMaVr) - -Si esta usando npm y desea combinarlo con webpack, por favor continué a la siguiente página: [Quick Start](/#/es/component/quickstart) +Si usted está instalando a través de npm / yarn y desea utilizarlo con +una herramienta de empaquetado, por favor lea la +siguiente sección: [Inicio rápido](/#/es/component/quickstart). diff --git a/website/docs/es/quickstart.md b/website/docs/es/quickstart.md index 074679d9e49da..83692dd3ae777 100644 --- a/website/docs/es/quickstart.md +++ b/website/docs/es/quickstart.md @@ -1,427 +1,222 @@ -## Inicio rápido +# Inicio rápido -Esta sección te guía en el proceso de usar Element Plus con webpack en un proyecto. +Esta sección describe cómo utilizar ElementPlus en su proyecto. -### Use vue-cli@4.5 - -Proporcionamos un [plugin de Element](https://github.com/element-plus/vue-cli-plugin-element-plus) para vue-cli@4.5, que puede utilizar para construir rápidamente un proyecto basado en Element. - -### Usa la plantilla de Kit de inicio - -Proveemos una plantilla general [project template](https://github.com/element-plus/element-plus-starter), and also a Vite [template](https://github.com/element-plus/element-plus-vite-starter). Para los usuarios de Laravel, también tenemos [template](https://github.com/element-plus/element-plus-in-laravel-starter). Puedes descargarlas y agregarlas directamente también. - -Si prefiere no utilizarlas, lee las siguientes secciones de este documento. +## Uso de componentes -### Importando Element Plus +### Introducción completa de todos los componentes -Puede importar Element Plus completamente o solamente importar lo que necesite. Comencemos importando todo. +> main.ts -#### Importando todo - -En main.js: - -```javascript +```typescript import { createApp } from 'vue' -import ElementPlus from 'element-plus'; -import 'element-plus/lib/theme-chalk/index.css'; -import App from './App.vue'; +import ElementPlus from 'element-plus' +import 'element-plus/dist/index.css' +import App from './App.vue' const app = createApp(App) + app.use(ElementPlus) app.mount('#app') ``` -El código anterior importa Element Plus completamente. Nótese que el archivo CSS necesita ser incluido por separado. - -#### En demanda - -**Vue CLI** - -Con la ayuda de [babel-plugin-import](https://github.com/ant-design/babel-plugin-import), podemos importar los componentes que necesitamos, haciendo nuestro proyecto más pequeño que de la otra manera. - -Primero, instale babel-plugin-import: - -```bash -npm install babel-plugin-import -D +### Introducción de componentes a la carta + +El código JS en `ElementPlus` soporta +[tree shaking](https://webpack.js.org/guides/tree-shaking/) basado en módulos ES +por defecto. + +> App.vue + +```html + + ``` -Luego edite babel.config.js: +### Introducción de estilos -- import `.scss` style +**Recomendamos encarecidamente traer los archivos de estilo completos directamente**, +aunque pueda parecer que esto aumenta el tamaño de toda la aplicación, al hacerlo +se evita la introducción de plugins de herramientas de empaquetado adicionales +(una carga menor) y también se puede utilizar el +[CDN](https://www.cloudflare.com/learning/cdn/what-is-a-cdn/) +para cargar los archivos de estilo, haciendo así que su aplicación cargue más rápido. -:::warning -Please make sure that `sass` and `sass-loader` dependencies have been installed and import `element-plus/packages/theme-chalk/src/base.scss` in the entry file. -::: +Introducido por medio de JS -```js -module.exports = { - plugins: [ - [ - "import", - { - libraryName: 'element-plus', - customStyleName: (name) => { - name = name.slice(3) - return `element-plus/packages/theme-chalk/src/${name}.scss`; - }, - }, - ], - ], -}; +```typescript +import 'element-plus/dist/index.css' ``` -- import `.css` style - -```js -module.exports = { - plugins: [ - [ - "import", - { - libraryName: 'element-plus', - customStyleName: (name) => { - return `element-plus/lib/theme-chalk/${name}.css`; - }, - }, - ], - ], -}; -``` - -**Vite** - -Firstly，install [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import): +Introducido a través de las cabeceras HTML -```bash -$ npm install vite-plugin-style-import -D +```html + + + + ``` -or if you use `Yarn` as package manager +Si quiere que los estilos se introduzcan también a la carta, puede utilizar el +complemento que proporciona la herramienta correspondiente para referenciarlos. +Ver [FAQ](/#/es/component/quickstart#faqs) -```bash -$ yarn add vite-plugin-style-import -D -``` +## Plantilla de proyecto de construcción rápida -Then edit vite.config.js: +### Use vue-cli@4.5 -- import `.scss` style +Hemos preparado los correspondientes plugins vue-cli para la nueva versión de +[Element Plus plugins](https://github.com/element-plus/vue-cli-plugin-element-plus) +que puede utilizar para construir rápidamente un proyecto basado en +Proyecto Element Plus. +### Use Starter Kit -:::warning -Please make sure that the `sass` dependency have been installed and import `element-plus/packages/theme-chalk/src/base.scss` in the entry file. -::: +Proporcionamos [plantillas de proyecto](https://github.com/element-plus/element-plus-starter) +genéricas que puede utilizar directamente, además de proporcionar +Vite [plantilla](https://github.com/element-plus/element-plus-vite-starter). Para +Los usuarios de Laravel, también tenemos una +[plantilla correspondiente](https://github.com/element-plus/element-plus-in-laravel-starter) +que también puede descargar y utilizar directamente. -```js -import { defineConfig } from 'vite' -import vue from '@vitejs/plugin-vue' -import styleImport from 'vite-plugin-style-import' +## Configuración global -export default defineConfig({ - plugins: [ - vue(), - styleImport({ - libs: [{ - libraryName: 'element-plus', - esModule: true, - ensureStyleFile: true, - resolveStyle: (name) => { - name = name.slice(3) - return `element-plus/packages/theme-chalk/src/${name}.scss`; - }, - resolveComponent: (name) => { - return `element-plus/lib/${name}`; - }, - }] - }) - ] -}) -``` +Al introducir Element Plus, se puede pasar un objeto de configuración global. +Este objeto soporta actualmente los campos `size` y `zIndex`. "tamaño +se utiliza para cambiar el tamaño por defecto del componente y `zIndex` establece +el índice z inicial de la caja emergente (valor por defecto: 2000). El Elemento Plus +se presenta a la demanda de la siguiente manera. -- import `.css` style +Presentación completa de ElementPlus. ```js -import { defineConfig } from 'vite' -import vue from '@vitejs/plugin-vue' -import styleImport from 'vite-plugin-style-import' +import { createApp } from 'vue' +import ElementPlus from 'element-plus'; +import App from './App.vue'; -export default defineConfig({ - plugins: [ - vue(), - styleImport({ - libs: [ - { - libraryName: 'element-plus', - esModule: true, - ensureStyleFile: true, - resolveStyle: (name) => { - return `element-plus/lib/theme-chalk/${name}.css`; - }, - resolveComponent: (name) => { - return `element-plus/lib/${name}`; - }, - } - ] - }) - ] -}) +const app = createApp(App) +app.use(ElementPlus, { size: 'small', zIndex: 3000 }); ``` -Luego, si necesita Button y Select, edite main.js: +Presentación de Element on demand. -```javascript +```js import { createApp } from 'vue' -import { ElButton, ElSelect } from 'element-plus'; +import { ElButton } from 'element-plus'; import App from './App.vue'; -// If you want to use the .scss style file, you need to import the base.scss file // import 'element-plus/packages/theme-chalk/src/base.scss' const app = createApp(App) -app.component(ElButton.name, ElButton); -app.component(ElSelect.name, ElSelect); - -/* or - * app.use(ElButton) - * app.use(ElSelect) - */ - -app.mount('#app') +app.config.globalProperties.$ELEMENT = option +app.use(ElButton); ``` -Ejemplo completo (Referencia completa de componentes [reference](https://github.com/element-plus/element-plus/tree/dev/packages)) +Con la configuración anterior, todos los componentes del proyecto con la propiedad +`size` tendrán un tamaño por defecto de `pequeño` y el índice z inicial de la +caja emergente será de 3000. -```javascript -import { createApp } from 'vue' -import App from './App.vue'; -// If you want to use the .scss style file, you need to import the base.scss file -// import 'element-plus/packages/theme-chalk/src/base.scss' +## Cómo empezar -import { - ElAlert, - ElAside, - ElAutocomplete, - ElAvatar, - ElBacktop, - ElBadge, - ElBreadcrumb, - ElBreadcrumbItem, - ElButton, - ElButtonGroup, - ElCalendar, - ElCard, - ElCarousel, - ElCarouselItem, - ElCascader, - ElCascaderPanel, - ElCheckbox, - ElCheckboxButton, - ElCheckboxGroup, - ElCol, - ElCollapse, - ElCollapseItem, - ElCollapseTransition, - ElColorPicker, - ElContainer, - ElDatePicker, - ElDialog, - ElDivider, - ElDrawer, - ElDropdown, - ElDropdownItem, - ElDropdownMenu, - ElFooter, - ElForm, - ElFormItem, - ElHeader, - ElIcon, - ElImage, - ElInput, - ElInputNumber, - ElLink, - ElMain, - ElMenu, - ElMenuItem, - ElMenuItemGroup, - ElOption, - ElOptionGroup, - ElPageHeader, - ElPagination, - ElPopconfirm, - ElPopover, - ElPopper, - ElProgress, - ElRadio, - ElRadioButton, - ElRadioGroup, - ElRate, - ElRow, - ElScrollbar, - ElSelect, - ElSlider, - ElStep, - ElSteps, - ElSubmenu, - ElSwitch, - ElTabPane, - ElTable, - ElTableColumn, - ElTabs, - ElTag, - ElTimePicker, - ElTimeSelect, - ElTimeline, - ElTimelineItem, - ElTooltip, - ElTransfer, - ElTree, - ElUpload, - ElInfiniteScroll, - ElLoading, - ElMessage, - ElMessageBox, - ElNotification, -} from 'element-plus'; - -const components = [ - ElAlert, - ElAside, - ElAutocomplete, - ElAvatar, - ElBacktop, - ElBadge, - ElBreadcrumb, - ElBreadcrumbItem, - ElButton, - ElButtonGroup, - ElCalendar, - ElCard, - ElCarousel, - ElCarouselItem, - ElCascader, - ElCascaderPanel, - ElCheckbox, - ElCheckboxButton, - ElCheckboxGroup, - ElCol, - ElCollapse, - ElCollapseItem, - ElCollapseTransition, - ElColorPicker, - ElContainer, - ElDatePicker, - ElDialog, - ElDivider, - ElDrawer, - ElDropdown, - ElDropdownItem, - ElDropdownMenu, - ElFooter, - ElForm, - ElFormItem, - ElHeader, - ElIcon, - ElImage, - ElInput, - ElInputNumber, - ElLink, - ElMain, - ElMenu, - ElMenuItem, - ElMenuItemGroup, - ElOption, - ElOptionGroup, - ElPageHeader, - ElPagination, - ElPopconfirm, - ElPopover, - ElPopper, - ElProgress, - ElRadio, - ElRadioButton, - ElRadioGroup, - ElRate, - ElRow, - ElScrollbar, - ElSelect, - ElSlider, - ElStep, - ElSteps, - ElSubmenu, - ElSwitch, - ElTabPane, - ElTable, - ElTableColumn, - ElTabs, - ElTag, - ElTimePicker, - ElTimeSelect, - ElTimeline, - ElTimelineItem, - ElTooltip, - ElTransfer, - ElTree, - ElUpload, -] - -const plugins = [ - ElInfiniteScroll, - ElLoading, - ElMessage, - ElMessageBox, - ElNotification, -] +Ahora que se ha configurado un entorno de desarrollo basado en Vue y Element Plus, +es el momento de escribir el código. Consulte la documentación de cada componente +para saber cómo utilizarlos。 -const app = createApp(App) +### Use Nuxt.js -components.forEach(component => { - app.component(component.name, component) -}) +También podemos utilizar [Nuxt.js](https://nuxtjs.org)： -plugins.forEach(plugin => { - app.use(plugin) -}) -``` +
+ +
-### Configuración global +## FAQs -Cuando 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. +### Quiero introducir tanto componentes como estilos a la carta, ¿qué debo hacer? -La propiedad `zIndex` indica el z-index inicial (por defecto: 2000) para los modal: +Puede conseguirlo en función del bundler que esté utilizando actualmente, con +Plugins compatibles con ElementPlus. -Importando Element Plus completamente： +#### Carga de estilos a la carta con vite -```js -import { createApp } from 'vue' -import ElementPlus from 'element-plus'; -import App from './App.vue'; +Si utiliza [vite](https://vitejs.dev) como herramienta de compilación, deberá instalar +primero `vite-plugin-element-plus` para cargar los estilos bajo demanda. -const app = createApp(App) -app.use(ElementPlus, { size: 'small', zIndex: 3000 }); +```shell +yarn add vite-plugin-element-plus -D +# o +npm install vite-plugin-element-plus -D ``` -Importando Element Plus parcialmente： +A continuación, añada el siguiente código al archivo `vite.config.js`: -```js -import { createApp } from 'vue' -import { ElButton } from 'element-plus'; -import App from './App.vue'; -// If you want to use the .scss style file, you need to import the base.scss file -// import 'element-plus/packages/theme-chalk/src/base.scss' +```typescript +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import VitePluginElementPlus from 'vite-plugin-element-plus' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue(), + VitePluginElementPlus({ + // Si necesita utilizar el archivo fuente [nombre del componente].scss, + // deberá descomentar el mismo a continuación. + // Para todas las APIs puede consultar la documentación en https://github.com/element-plus/vite-plugin-element-plus + // para los comentarios de la documentación + // useSource: true + }), + ], +}) -const app = createApp(App) -app.config.globalProperties.$ELEMENT = option -app.use(ElButton); ``` -Con 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. +#### Carga de estilos bajo demanda con webpack -### Empiece ya! +Si estás usando webpack como herramienta de empaquetado, entonces necesitas instalar +primero `babel-plugin-import` para cargar los estilos bajo demanda -Ahora ha incorporado Vue y Element Plus 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. +```shell +yarn add babel-plugin-import -D +# o +npm install babel-plugin-import -D +``` -### Use Nuxt.js +A continuación, debe añadir el siguiente código a su archivo `babel.config.js`. -También podemos comenzar un proyecto usando [Nuxt.js](nuxtjs.org): +> babel.config.js -
- -
+```javascript +module.exports = { + plugins: [ + // ...others + [ + "import", + { + libraryName: 'element-plus', + customStyleName: (name) => { + name = name.slice(3) + // Si necesita el archivo [nombre].css, debe devolver la siguiente línea + return `element-plus/es/${name}/style/css` + // Si necesitas el archivo [nombre].scss, entonces necesitas comentar + // la línea de código anterior y descomentar la siguiente línea de código + // return `element-plus/es/${name}/style`; + }, + }, + ], + ], +}; +``` diff --git a/website/docs/fr-FR/i18n.md b/website/docs/fr-FR/i18n.md index 4467bfc52b368..cb312677e1a3b 100644 --- a/website/docs/fr-FR/i18n.md +++ b/website/docs/fr-FR/i18n.md @@ -1,357 +1,135 @@ -## Internationalisation +# Internationalization -La langue par défaut d'Element Plus est le Anglais. Si vous souhaitez utiliser une autre langue, il vous faudra la configurer. Par exemple, dans votre fichier d'entrée: +ElementPlus components are using English **by default**, if you wish you use other +languages, you can get you answer by keep reading. -The default locale of Element Plus is English. If you want to use another language, you'll need to do some i18n configuration. In your entry file: +## Global configuration -:::warning -We have made breaking changes after **1.0.2-beta.59(included)**, please keep reading for more information，this documentation **does not apply to version before 1.0.2-beta.58(included)** -::: +ElementPlus provides global configurations -### 1.0.2-beta.59(included)： +```typescript +import ElementPlus from 'element-plus' +import zhCn from 'element-plus/es/locale/lang/zh-cn' -After `1.0.2-beta.59(included)`, we reorganized the code, making sure i18n functionalities can be applied seamlessly for both full bundle & on demand usage. +app.use(ElementPlus, { + locale: zhCn, +}) +``` -#### 1. Via ConfigProvider +## ConfigProvider -If your project is still using `Options API`, then we suggest you to use it this way, to reduce the mind burden. If you are using `Composition API` throughout your project, we still suggest you to use it this way since this allows you to write less code. +ElementPlus also provides a Vue component [ConfigProvider](/#/zh-CN/component/config-provider) +for globally configuring locale and other settings. ```html ``` -#### Useful links： -- [Supported languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) - -- [ConfigProvider Documentation](#/fr/component/config-provider) - - -#### 2. Via Composable hook -Using this way is basically implementing a [ConfigProvider](https://element-plus.org/#/en-US/component/config-provider) on your own to inject configurations. - -```ts -import { useLocale, useLocaleProps } from 'element-plus' -// Locale Wrapper entry -const Provider = defineComponent({ - props: { - // If you want language switching feature, you need to add these props - // into your Provider - ...useLocaleProps, - }, - setup() { - // No parameters needed, but the props above is required - // ` { locale?: Language, i18n?: (...args: any[]) => string }` - useLocale() - } -}) +Full documentation refer to: [ConfigProvider](/#/zh-CN/component/config-provider) +[Supported Language List](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) -createApp( - { - // ... - template: ` - - - - ` - } -) - -``` - -### Set Day.js locale - -Element Plus use date time locale (month name, first day of the week ...) from [Day.js](https://day.js.org/) directlly. And will set the global Day.js locale automaticatlly after the locale file is loaded. - -```typescript -import locale from 'element-plus/lib/locale/lang/fr' -import 'dayjs/locale/fr' +
    +
  • Simplified Chinese (zh-cn)
    • +
  • English (en)
    • +
  • German (de)
    • +
  • Portuguese (pt)
    • +
  • Spanish (es)
    • +
  • Danish (da)
    • +
  • French (fr)
    • +
  • Norwegian (nb-NO)
    • +
  • Traditional Chinese (zh-tw)
    • +
  • Italian (it)
    • +
  • Korean (ko)
    • +
  • Japanese (ja)
    • +
  • Dutch (nl)
    • +
  • Vietnamese (vi)
    • +
  • Russian (ru)
    • +
  • Turkish (tr)
    • +
  • Brazilian Portuguese (pt-br)
    • +
  • Farsi (fa)
    • +
  • Thai (th)
    • +
  • Indonesian (id)
    • +
  • Bulgarian (bg)
    • +
  • Polish (pl)
    • +
  • Finnish (fi)
    • +
  • Swedish (sv)
    • +
  • Greek (el)
    • +
  • Slovak (sk)
    • +
  • Catalunya (ca)
    • +
  • Czech (cs)
    • +
  • Ukrainian (uk)
    • +
  • Turkmen (tk)
    • +
  • Tamil (ta)
    • +
  • Latvian (lv)
    • +
  • Afrikaans (af)
    • +
  • Estonian (et)
    • +
  • Slovenian (sl)
    • +
  • Arabic (ar)
    • +
  • Hebrew (he)
    • +
  • Lithuanian (lt)
    • +
  • Mongolian (mn)
    • +
  • Kazakh (kk)
    • +
  • Hungarian (hu)
    • +
  • Romanian (ro)
    • +
  • Kurdish (ku)
    • +
  • Uighur (ug-cn)
    • +
  • Khmer (km)
    • +
  • Serbian (sr)
    • +
  • Basque (eu)
    • +
  • Kyrgyz (ky)
    • +
  • Armenian (hy-am)
    • +
  • Croatian (hr)
    • +
  • Esperanto (eo)
    • +
-// will auto set Day.js locale to 'fr' -app.use(ElementPlus, { locale }) -``` +If you need any other languages, [PR](https://github.com/element-plus/element-plus/pulls) +is always welcomed, you only need to add a language file at +[here](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang). -However, you can use another Day.js locale if needed. +## FAQs -```typescript -import 'dayjs/locale/es' -dayjs.locale('es') -``` +### If I want to replace the default language pack to reduce the size, how do I do? -La pack de la langue Anglais 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: +When the default language of your app is not **English**, you will be going to need +to import another language file, which will increase the bundle size since you have +both **English** and **Your desired language** bundled, +you can use the plugin [NormalModuleReplacementPlugin](https://webpack.js.org/plugins/normal-module-replacement-plugin/#root) +provided by [webpack](https://webpack.js.org) to replace the default language file, +so that you will only get **1** language file bundled. +Add the code below into your `webpack.config.js` to get it work. -webpack.config.js +> webpack.config.js ```typescript { plugins: [ new webpack.NormalModuleReplacementPlugin( /element-plus[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]en/, - 'element-plus/lib/locale/lang/fr', + 'element-plus/lib/locale/lang/zh-cn', ), ] } ``` - -### Compatible avec `vue-i18n@9.x` - -Element Plus est compatible avec [vue-i18n@9.x](https://vue-i18n-next.intlify.dev/guide/#html), ce qui rend le changement de langue encore plus simple. - -```typescript -import { createApp } from 'vue' -import { createI18n } from 'vue-i18n' -import ElementPlus from 'element-plus' -import enLocale from 'element-plus/lib/locale/lang/en' -import zhLocale from 'element-plus/lib/locale/lang/zh-cn' -import App from './App.vue' - -const messages = { - [enLocale.name]: { - // el property is critical, set this in order for ElementPlus translate strings correctly. - el: enLocale.el, - // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`, - // Because that makes the ElementPlus internal translation invalid. - message: { - hello: 'hello world', - }, - }, - [zhLocale.name]: { - el: zhLocale.el, - // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`, - // Because that makes the ElementPlus internal translation invalid. - message: { - hello: '你好，世界', - }, - }, - testLocale: { - el: {}, - // No message translations, it will fallback to en lang, the definition of fallbackLocale is below 👇 - }, -} - -const i18n = createI18n({ - locale: zhLocale.name, - fallbackLocale: enLocale.name, - messages, -}) - -const app = createApp(App) - -app.use(ElementPlus, { - i18n: i18n.global.t, -}) - -// Remember to use this plugin. -app.use(i18n) -``` - -### Compatible avec d'autres plugins i18n - -Element Plus n'est pas forcément compatible avec d'autres plugins i18n que vue-i18n, mais vous pouvez configurer le fonctionnement i18n. - -:::tip -Once you set this method, the internal translation function will be invalid, only the customized translation method will be used, be sure that your custom translation method can translate format like `el.scope.subName`, other wise the internal translation string will be raw string. -::: - -```typescript -import Vue from 'vue' -import ElementPlus from 'element-plus' -import enLocale from 'element-plus/lib/locale/lang/en' -import zhLocale from 'element-plus/lib/locale/lang/zh-cn' - -// The is the signature of i18n method. -type i18n = (...args: any[]) => string -Vue.use(Element, { - i18n: function(path, options) { - // ... - }, - // others. -}) -``` - -### i18n personnalisée dans les composants à la demande - -Need translation - -If you need to know how to lazy loading translation strings, please check this out[Lazy loading](https://vue-i18n-next.intlify.dev/guide/advanced/lazy.html) - -```typescript -import { createApp } from 'vue' -import { createI18n } from 'vue-i18n' -import ElementPlus from 'element-plus' -import enLocale from 'element-plus/lib/locale/lang/en' -import zhLocale from 'element-plus/lib/locale/lang/zh-cn' -import ElementLocale from 'element-plus/lib/locale' -import App from './App.vue' - -const messages = { - [enLocale.name]: { - // el property is critical, set this in order for ElementPlus translate strings correctly. - el: enLocale.el, - // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`, - // Because that makes the ElementPlus internal translation invalid. - message: { - hello: 'hello world', - }, - }, - [zhLocale.name]: { - el: zhLocale.el, - // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`, - // Because that makes the ElementPlus internal translation invalid. - message: { - hello: '你好，世界', - }, - }, - testLocale: { - el: {}, - // No message translations, it will fallback to en lang, the definition of fallbackLocale is below 👇 - }, -} - -const i18n = createI18n({ - locale: zhLocale.name, - fallbackLocale: enLocale.name, - messages, -}) - -ElementLocale.i18n(i18n.global.t) - -const app = createApp(App) -app.use(i18n) -``` - -### Import via un CDN - -```html - - - - - - -``` - -Compatible avec `vue-i18n` - -```html - - - - - - - -``` - -Actuellement, Element Plus supporte les langues suivantes: - -
    -
  • Chinois simplifié (zh-cn)
    • -
  • Anglais (en)
    • -
  • Allemand (de)
    • -
  • Portugais (pt)
    • -
  • Espagnol (es)
    • -
  • Danois (da)
    • -
  • Français (fr)
    • -
  • Norvégien (nb-no)
    • -
  • Chinois traditionnel (zh-tw)
    • -
  • Italien (it)
    • -
  • Coréen (ko)
    • -
  • Japonais (ja)
    • -
  • Néerlandais (nl)
    • -
  • Vietnamien (vi)
    • -
  • Russe (ru)
    • -
  • Turque (tr)
    • -
  • Portugais brésilien (pt-br)
    • -
  • Farsi (fa)
    • -
  • Thaï (th)
    • -
  • Indonésien (id)
    • -
  • Bulgare (bg)
    • -
  • Polonais (pl)
    • -
  • Finnois (fi)
    • -
  • Suédois (sv)
    • -
  • Grec (el)
    • -
  • Slovaque (sk)
    • -
  • Catalan (ca)
    • -
  • Tchèque (cs)
    • -
  • Ukrainien (uk)
    • -
  • Turkmène (tk)
    • -
  • Tamoul (ta)
    • -
  • Letton (lv)
    • -
  • Afrikaans (af)
    • -
  • Estonien (et)
    • -
  • Slovène (sl)
    • -
  • Arabe (ar)
    • -
  • Hébreu (he)
    • -
  • Lituanien (lt)
    • -
  • Mongol (mn)
    • -
  • Kazakh (kk)
    • -
  • Hongrois (hu)
    • -
  • Roumain (ro)
    • -
  • Kurde (ku)
    • -
  • Ouïghour (ug-cn)
    • -
  • Khmer (km)
    • -
  • Serbe (sr)
    • -
  • Basque (eu)
    • -
  • Kirghize (ky)
    • -
  • Arménien (hy-am)
    • -
  • Croate (hr)
    • -
  • Espéranto (eo)
    • -
- -Si 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/element-plus/element-plus/tree/dev/packages/locale/lang) et créez une pull request. diff --git a/website/docs/fr-FR/installation.md b/website/docs/fr-FR/installation.md index ea54bcf5203dd..b2d43504b333e 100644 --- a/website/docs/fr-FR/installation.md +++ b/website/docs/fr-FR/installation.md @@ -1,35 +1,89 @@ -## Installation +# Installation de ElementPlus -### NPM +## Soutien à l'environnement -Installer Element Plus via npm est recommandé, il fonctionne parfaitement avec [webpack](https://webpack.js.org/). +- Navigateurs modernes + +| ![IE](https://cdn.jsdelivr.net/npm/@browser-logos/edge/edge_32x32.png) | ![Firefox](https://cdn.jsdelivr.net/npm/@browser-logos/firefox/firefox_32x32.png) | ![Chrome](https://cdn.jsdelivr.net/npm/@browser-logos/chrome/chrome_32x32.png) | ![Safari](https://cdn.jsdelivr.net/npm/@browser-logos/safari/safari_32x32.png) | +| --- | --- | --- | --- | +| Edge | last 2 versions | last 2 versions | last 2 versions | + +> Comme IE11 n'est plus pris en charge par Vue3, ElementPlus ne prend pas non plus +en charge IE11 et les versions antérieures. + +## Version actuelle + +ElementPlus est actuellement en itération de développement rapide. + +[![ElementPlus version badge](https://img.shields.io/npm/v/element-plus.svg?style=flat-square)](https://www.npmjs.org/package/element-plus) + +## Installation via npm ou yarn + +**Nous recommandons d'utiliser la méthode d'installation du gestionnaire +de paquets**, qui fonctionne mieux avec[vite](https://vitejs.dev), [webpack](https://webpack.js.org/). +outils d'emballage. ```shell -npm install element-plus --save +$ npm install element-plus --save ``` -### CDN +```shell +$ yarn add element-plus +``` + +Si votre environnement réseau est médiocre, la mise en miroir est recommandée. + +## Introduction directe du navigateur + +ElementPlus est introduit directement par les balises HTML du navigateur, et `ElementPlus` peut être utilisé de manière globale. + +Introduction complète de `ElementPlus` par le biais de **CDN**, qui varie selon le fournisseur **CDN**, ici nous utilisons +[unpkg](https://unpkg.com) et [jsdelivr](https://jsdelivr.com), par exemple. +Vous pouvez également utiliser d'autres fournisseurs **CDN**. + +## Utiliser unpkg + +```html + + + + + + + + +``` -Obtenez la dernière version via [unpkg.com/element-plus](https://unpkg.com/element-plus/), et importez le JavaScript et le CSS dans votre page. +## Utiliser jsDelivr ```html - - - - + + + + + + + + ``` :::tip -Il est recommandé de fixer la version d'Element Plus lors de l'utilisation du CDN. Référez-vous à [unpkg.com](https://unpkg.com) pour plus d'informations. +Nous recommandons aux utilisateurs qui ont introduit `ElementPlus` en utilisant +**CDN** de verrouiller la version à l'adresse liée pour éviter d'être affectés +par des mises à jour non compatibles lors de la mise à niveau de `ElementPlus` +dans le futur. Pour verrouiller la version, veuillez consulter +[unpkg.com](https://unpkg.com). ::: -### Hello world +## Hello world -Si vous utilisez un CDN, une page hello-world peut être obtenue facilement avec Element Plus ([démo en ligne](https://codepen.io/iamkun/pen/YzWMaVr)). +Avec l'approche **CDN**, nous pouvons facilement écrire une page Hello world en +utilisant `ElementPlus`.[Démonstration en ligne](https://codepen.io/iamkun/pen/YzWMaVr) -Si vous utilisez npm et souhaitez ajouter webpack, continuez sur la page suivante: [Démarrer](/#/fr-FR/component/quickstart). +Si vous installez via npm / yarn et souhaitez l'utiliser avec l'outil de conditionnement, + veuillez lire la section suivante : [Démarrage](/#/fr-FR/component/quickstart)。 diff --git a/website/docs/fr-FR/quickstart.md b/website/docs/fr-FR/quickstart.md index 20d528ee52ffa..ee83565decb6a 100644 --- a/website/docs/fr-FR/quickstart.md +++ b/website/docs/fr-FR/quickstart.md @@ -1,423 +1,220 @@ -## Démarrer +# Démarrage rapide -Cette page vous guidera tout le long de l'installation d'Element Plus au sein d'un projet webpack. +Cette section décrit comment utiliser ElementPlus dans votre projet. -### Use vue-cli@4.5 +## Utilisation des composants -Nous fournissons un [plugin Element](https://github.com/element-plus/vue-cli-plugin-element-plus) pour vue-cli@4.5, que vous pouvez utiliser pour créer rapidement un projet basé sur Element. +### Introduction complète de tous les composants -### Utiliser le Starter Kit +> main.ts -Nous fournissons un [template de projet](https://github.com/element-plus/element-plus-starter) pour débuter rapidement, and also a Vite [template](https://github.com/element-plus/element-plus-vite-starter). Pour les utilisateurs Laravel, il est aussi possible d'utiliser ce [template](https://github.com/element-plus/element-plus-in-laravel-starter). VOus pouvez les télécharger directement. - -Si vous préférer vous passer de template, voyez la section suivante. - -### Importer Element Plus - -Element Plus peut être importé entièrement ou à la demande. Commençons par l'import total. - -#### Import total - -Dans main.js: - -```javascript +```typescript import { createApp } from 'vue' -import ElementPlus from 'element-plus'; -import 'element-plus/lib/theme-chalk/index.css'; -import App from './App.vue'; +import ElementPlus from 'element-plus' +import 'element-plus/dist/index.css' +import App from './App.vue' const app = createApp(App) + app.use(ElementPlus) app.mount('#app') ``` -L'exemple ci-dessus importe Element Plus entièrement. Notez que les fichiers CSS doivent être importés séparément. +### Introduction de composants à la demande -#### À la demande + Le code JS d'ElementPlus supporte par défaut le [tree shaking](https://webpack.js.org/guides/tree-shaking/) + basé sur les modules ES. -**Vue CLI** -Grâce au [babel-plugin-import](https://github.com/ant-design/babel-plugin-import), nous pouvons importer uniquement les composants désirés, rendant ainsi le projet plus léger. +> App.vue -Tout d'abord, installez babel-plugin-import: +```html + + ``` -Puis éditez babel.config.js: +### Introduction du style -- import `.scss` style +Nous **recommandons fortement d'apporter les fichiers de style complets directement**, +bien que cela puisse sembler augmenter la taille de l'application entière, cela +évite d'introduiredes plugins d'outils de packaging supplémentaires (moins de charge) +et vous pouvez également utiliser le [CDN](https://www.cloudflare.com/learning/cdn/what-is-a-cdn/) +pour charger les fichiers de style, ce qui accélère le chargement de votre application. -:::warning -Please make sure that `sass` and `sass-loader` dependencies have been installed and import `element-plus/packages/theme-chalk/src/base.scss` in the entry file. -::: +Introduction par le biais de JS -```js -module.exports = { - plugins: [ - [ - "import", - { - libraryName: 'element-plus', - customStyleName: (name) => { - name = name.slice(3) - return `element-plus/packages/theme-chalk/src/${name}.scss`; - }, - }, - ], - ], -}; +```typescript +import 'element-plus/dist/index.css' ``` -- import `.css` style +Introduit par les en-têtes HTML -```js -module.exports = { - plugins: [ - [ - "import", - { - libraryName: 'element-plus', - customStyleName: (name) => { - return `element-plus/lib/theme-chalk/${name}.css`; - }, - }, - ], - ], -}; +```html + + + + ``` - -**Vite** - -Firstly，install [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import): -```bash -$ npm install vite-plugin-style-import -D -``` +Si vous souhaitez que les styles soient également introduits à la demande, vous +pouvez y faire référence en utilisant le plug-in fourni par l'outilcorrespondant. +Voir [FAQ](/#/fr-FR/component/quickstart#faqs) -or if you use `Yarn` as package manager +## Modèle de projet de construction rapide -```bash -$ yarn add vite-plugin-style-import -D -``` +### Utilisez vue-cli@4.5 -Then edit vite.config.js: -- import `.scss` style +Nous avons préparé les plugins vue-cli correspondants pour la nouvelle version de +[Element Plus plugins](https://github.com/element-plus/vue-cli-plugin-element-plus) +que vous pouvez utiliser pour créer rapidement un projet basé sur les éléments suivants +Projet Element Plus. -:::warning -Please make sure that the `sass` dependency have been installed and import `element-plus/packages/theme-chalk/src/base.scss` in the entry file. -::: +### Utilisation du kit de démarrage -```js -import { defineConfig } from 'vite' -import vue from '@vitejs/plugin-vue' -import styleImport from 'vite-plugin-style-import' +Nous fournissons des [modèles de projet génériques ](https://github.com/element-plus/element-plus-starter) +que vous pouvez utiliser directement, et nous fournissons également les éléments +suivants vite [modèle](https://github.com/element-plus/element-plus-vite-starter). +Pour +Utilisateurs de Laravel, +nous disposons également d'un [modèle correspondant](https://github.com/element-plus/element-plus-in-laravel-starter) +que vous pouvez également télécharger et utiliser directement. -export default defineConfig({ - plugins: [ - vue(), - styleImport({ - libs: [{ - libraryName: 'element-plus', - esModule: true, - ensureStyleFile: true, - resolveStyle: (name) => { - name = name.slice(3) - return `element-plus/packages/theme-chalk/src/${name}.scss`; - }, - resolveComponent: (name) => { - return `element-plus/lib/${name}`; - }, - }] - }) - ] -}) -``` +## Configuration globale + +Lors de l'introduction d'Element Plus, un objet de configuration globale peut être +transmis. Cet objet supporte actuellement les champs `size` et `zIndex`. `size` +permet de modifier la taille par défaut du composant et `zIndex` définit le +z-index initial de la boîte pop-up (valeur par défaut : 2000). L'élément Plus est +présenté sur demande comme suit. -- import `.css` style +Présentation complète d'ElementPlus. ```js -import { defineConfig } from 'vite' -import vue from '@vitejs/plugin-vue' -import styleImport from 'vite-plugin-style-import' +import { createApp } from 'vue' +import ElementPlus from 'element-plus'; +import App from './App.vue'; -export default defineConfig({ - plugins: [ - vue(), - styleImport({ - libs: [ - { - libraryName: 'element-plus', - esModule: true, - ensureStyleFile: true, - resolveStyle: (name) => { - return `element-plus/lib/theme-chalk/${name}.css`; - }, - resolveComponent: (name) => { - return `element-plus/lib/${name}`; - }, - } - ] - }) - ] -}) +const app = createApp(App) +app.use(ElementPlus, { size: 'small', zIndex: 3000 }); ``` -Ensuite, si vous n'avez besoin que de Button et Select, éditez main.js comme suit: +Présentation d'ElementPlus à la demande. -```javascript +```js import { createApp } from 'vue' -import { ElButton, ElSelect } from 'element-plus'; +import { ElButton } from 'element-plus'; import App from './App.vue'; -// If you want to use the .scss style file, you need to import the base.scss file -// import 'element-plus/packages/theme-chalk/src/base.scss' const app = createApp(App) -app.component(ElButton.name, ElButton); -app.component(ElSelect.name, ElSelect); - -/* or - * app.use(ElButton) - * app.use(ElSelect) - */ - -app.mount('#app') +app.config.globalProperties.$ELEMENT = option +app.use(ElButton); ``` -Exemple complet (liste complète des composants dans [reference](https://github.com/element-plus/element-plus/tree/dev/packages)): +Avec les paramètres ci-dessus, tous les composants du projet ayant la propriété +`size` auront une taille par défaut de 'small' et l'index z initial de la boîte +pop-up sera de 3000. -```javascript -import { createApp } from 'vue' -import App from './App.vue'; -// If you want to use the .scss style file, you need to import the base.scss file -// import 'element-plus/packages/theme-chalk/src/base.scss' - -import { - ElAlert, - ElAside, - ElAutocomplete, - ElAvatar, - ElBacktop, - ElBadge, - ElBreadcrumb, - ElBreadcrumbItem, - ElButton, - ElButtonGroup, - ElCalendar, - ElCard, - ElCarousel, - ElCarouselItem, - ElCascader, - ElCascaderPanel, - ElCheckbox, - ElCheckboxButton, - ElCheckboxGroup, - ElCol, - ElCollapse, - ElCollapseItem, - ElCollapseTransition, - ElColorPicker, - ElContainer, - ElDatePicker, - ElDialog, - ElDivider, - ElDrawer, - ElDropdown, - ElDropdownItem, - ElDropdownMenu, - ElFooter, - ElForm, - ElFormItem, - ElHeader, - ElIcon, - ElImage, - ElInput, - ElInputNumber, - ElLink, - ElMain, - ElMenu, - ElMenuItem, - ElMenuItemGroup, - ElOption, - ElOptionGroup, - ElPageHeader, - ElPagination, - ElPopconfirm, - ElPopover, - ElPopper, - ElProgress, - ElRadio, - ElRadioButton, - ElRadioGroup, - ElRate, - ElRow, - ElScrollbar, - ElSelect, - ElSlider, - ElStep, - ElSteps, - ElSubmenu, - ElSwitch, - ElTabPane, - ElTable, - ElTableColumn, - ElTabs, - ElTag, - ElTimePicker, - ElTimeSelect, - ElTimeline, - ElTimelineItem, - ElTooltip, - ElTransfer, - ElTree, - ElUpload, - ElInfiniteScroll, - ElLoading, - ElMessage, - ElMessageBox, - ElNotification, -} from 'element-plus'; - -const components = [ - ElAlert, - ElAside, - ElAutocomplete, - ElAvatar, - ElBacktop, - ElBadge, - ElBreadcrumb, - ElBreadcrumbItem, - ElButton, - ElButtonGroup, - ElCalendar, - ElCard, - ElCarousel, - ElCarouselItem, - ElCascader, - ElCascaderPanel, - ElCheckbox, - ElCheckboxButton, - ElCheckboxGroup, - ElCol, - ElCollapse, - ElCollapseItem, - ElCollapseTransition, - ElColorPicker, - ElContainer, - ElDatePicker, - ElDialog, - ElDivider, - ElDrawer, - ElDropdown, - ElDropdownItem, - ElDropdownMenu, - ElFooter, - ElForm, - ElFormItem, - ElHeader, - ElIcon, - ElImage, - ElInput, - ElInputNumber, - ElLink, - ElMain, - ElMenu, - ElMenuItem, - ElMenuItemGroup, - ElOption, - ElOptionGroup, - ElPageHeader, - ElPagination, - ElPopconfirm, - ElPopover, - ElPopper, - ElProgress, - ElRadio, - ElRadioButton, - ElRadioGroup, - ElRate, - ElRow, - ElScrollbar, - ElSelect, - ElSlider, - ElStep, - ElSteps, - ElSubmenu, - ElSwitch, - ElTabPane, - ElTable, - ElTableColumn, - ElTabs, - ElTag, - ElTimePicker, - ElTimeSelect, - ElTimeline, - ElTimelineItem, - ElTooltip, - ElTransfer, - ElTree, - ElUpload, -] - -const plugins = [ - ElInfiniteScroll, - ElLoading, - ElMessage, - ElMessageBox, - ElNotification, -] +## Utilisation de Nuxt.js -const app = createApp(App) +Nous pouvons également utiliser [Nuxt.js](https://nuxtjs.org) pour. -components.forEach(component => { - app.component(component.name, component) -}) +
+ +
-plugins.forEach(plugin => { - app.use(plugin) -}) -``` +## Démarrage -### Configuration globale +Maintenant qu'un environnement de développement basé sur Vue et Element Plus a +été mis en place, il est temps d'écrire du code. Consultez la documentation de +chaque composant pour savoir comment les utiliser. -Lors 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: +## Questions fréquemment posées -Import total d'Element： +### Je veux introduire des composants et des styles à la demande en même temps. -```js -import { createApp } from 'vue' -import ElementPlus from 'element-plus'; -import App from './App.vue'; +#### Chargement des styles à la demande en utilisant vite -const app = createApp(App) -app.use(ElementPlus, { size: 'small', zIndex: 3000 }); +Si vous utilisez [vite](https://vitejs.dev) comme outil de compilation, vous devrez +d'abord installer `vite-plugin-element-plus` pour charger les styles à la demande. + +```shell +yarn add vite-plugin-element-plus -D +# ou +npm install vite-plugin-element-plus -D ``` -Import partiel d'Element： +Ensuite, ajoutez le code suivant au fichier `vite.config.js` : -```js -import { createApp } from 'vue' -import { ElButton } from 'element-plus'; -import App from './App.vue'; -// If you want to use the .scss style file, you need to import the base.scss file -// import 'element-plus/packages/theme-chalk/src/base.scss' +```typescript +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import VitePluginElementPlus from 'vite-plugin-element-plus' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue(), + VitePluginElementPlus({ + // Si vous devez utiliser le fichier source [nom du composant].scss, vous + // devez le décommenter ci-dessous. + // Pour toutes les API, vous pouvez consulter la documentation à l'adresse + // https://github.com/element-plus/vite-plugin-element-plus. + // pour les commentaires de la documentation + // useSource: true + }), + ], +}) -const app = createApp(App) -app.config.globalProperties.$ELEMENT = option -app.use(ElButton); ``` -Avec 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. +#### Chargement des styles à la demande avec webpack -### Commencer à développer +Si vous utilisez webpack comme outil de compilation, vous devez d'abord +installer `babel-plugin-import` pour charger les styles à la demande. -Maintenant que vous avez ajouté Vue et Element Plus à votre projet, vous pouvez commencer à coder. Référez-vous à la documentation de chaque composant pour savoir comment les utiliser. +```shell +yarn add babel-plugin-import -D +# ou +npm install babel-plugin-import -D +``` -### Utiliser Nuxt.js +Ensuite, vous devez ajouter le code suivant à votre fichier `babel.config.js`. -Vous pouvez également commencer un projet avec [Nuxt.js](https://nuxtjs.org/): +> babel.config.js -
- -
+```javascript +module.exports = { + plugins: [ + // ...others + [ + "import", + { + libraryName: 'element-plus', + customStyleName: (name) => { + name = name.slice(3) + // Si vous avez besoin du fichier [nom].css, vous devez renvoyer la ligne + // suivante + return `element-plus/es/${name}/style/css` + // Si vous avez besoin du fichier [nom].scss, vous devez commenter la + // ligne de code précédente et décommenter la ligne de code suivante. + // return `element-plus/es/${name}/style`; + }, + }, + ], + ], +}; +``` diff --git a/website/docs/jp/i18n.md b/website/docs/jp/i18n.md index 9d12de332deeb..cb312677e1a3b 100644 --- a/website/docs/jp/i18n.md +++ b/website/docs/jp/i18n.md @@ -1,304 +1,55 @@ -## 国際化 +# Internationalization -Element Plus のデフォルト言語は英語です。他の言語を使用したい場合は、i18n の設定を行う必要があります。 +ElementPlus components are using English **by default**, if you wish you use other +languages, you can get you answer by keep reading. -:::warning -We have made breaking changes after **1.0.2-beta.59(included)**, please keep reading for more information，this documentation **does not apply to version before 1.0.2-beta.58(included)** -::: +## Global configuration -### 1.0.2-beta.59(included)： +ElementPlus provides global configurations -After `1.0.2-beta.59(included)`, we reorganized the code, making sure i18n functionalities can be applied seamlessly for both full bundle & on demand usage. +```typescript +import ElementPlus from 'element-plus' +import zhCn from 'element-plus/es/locale/lang/zh-cn' + +app.use(ElementPlus, { + locale: zhCn, +}) +``` -#### 1. Via ConfigProvider +## ConfigProvider -If your project is still using `Options API`, then we suggest you to use it this way, to reduce the mind burden. If you are using `Composition API` throughout your project, we still suggest you to use it this way since this allows you to write less code. +ElementPlus also provides a Vue component [ConfigProvider](/#/zh-CN/component/config-provider) +for globally configuring locale and other settings. ```html ``` -#### Useful links： -- [Supported languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) - -- [ConfigProvider Documentation](#/jp/component/config-provider) - -#### 2. Via Composable hook -Using this way is basically implementing a [ConfigProvider](https://element-plus.org/#/en-US/component/config-provider) on your own to inject configurations. - -```ts -import { useLocale, useLocaleProps } from 'element-plus' -// Locale Wrapper entry -const Provider = defineComponent({ - props: { - // If you want language switching feature, you need to add these props - // into your Provider - ...useLocaleProps, - }, - setup() { - // No parameters needed, but the props above is required - // ` { locale?: Language, i18n?: (...args: any[]) => string }` - useLocale() - } -}) - - -createApp( - { - // ... - template: ` - - - - ` - } -) - -``` - -### Set Day.js locale - -Element Plus use date time locale (month name, first day of the week ...) from [Day.js](https://day.js.org/) directlly. And will set the global Day.js locale automaticatlly after the locale file is loaded. - -```typescript -import locale from 'element-plus/lib/locale/lang/ja' -import 'dayjs/locale/ja' - -// will auto set Day.js locale to 'ja' -app.use(ElementPlus, { locale }) -``` - -However, you can use another Day.js locale if needed. - -```typescript -import 'dayjs/locale/fr' -dayjs.locale('fr') -``` - -たとえ、別の言語を使っていても、英語パックはデフォルトでインポートされます。 しかしながら、webpack で提供されている `NormalModuleReplacementPlugin` を使えばデフォルト locale を差し替えることが出来ます: - -webpack.config.js - -```typescript -{ - plugins: [ - new webpack.NormalModuleReplacementPlugin( - /element-plus[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]en/, - 'element-plus/lib/locale/lang/ja', - ), - ] -} -``` - -### `vue-i18n@9.x` との互換性 - -Element [vue-i18n@9.x](https://vue-i18n-next.intlify.dev/guide/#html) は互換性があり、 多言語切り替えをより簡単に出来ます。 - -Need translation - -If you need to check out [VueI18n documentation](https://vue-i18n-next.intlify.dev/guide/#html), please click this link to check it out. - -```typescript -import { createApp } from 'vue' -import { createI18n } from 'vue-i18n' -import ElementPlus from 'element-plus' -import enLocale from 'element-plus/lib/locale/lang/en' -import zhLocale from 'element-plus/lib/locale/lang/zh-cn' -import App from './App.vue' - -const messages = { - [enLocale.name]: { - // el property is critical, set this in order for ElementPlus translate strings correctly. - el: enLocale.el, - // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`, - // Because that makes the ElementPlus internal translation invalid. - message: { - hello: 'hello world', - }, - }, - [zhLocale.name]: { - el: zhLocale.el, - // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`, - // Because that makes the ElementPlus internal translation invalid. - message: { - hello: '你好，世界', - }, - }, - testLocale: { - el: {}, - // No message translations, it will fallback to en lang, the definition of fallbackLocale is below 👇 - }, -} - -const i18n = createI18n({ - locale: zhLocale.name, - fallbackLocale: enLocale.name, - messages, -}) - -const app = createApp(App) - -app.use(ElementPlus, { - i18n: i18n.global.t, -}) - -// Remember to use this plugin. -app.use(i18n) -``` - -### 他の i18n プラグインとの互換性 - -Element は vue-i18n 以外の i18n プラグインとは互換性がないかもしれませんが、Element がどのように i18n を処理するかをカスタマイズすることができます。 - -Need translation - -:::tip -Once you set this method, the internal translation function will be invalid, only the customized translation method will be used, be sure that your custom translation method can translate format like `el.scope.subName`, other wise the internal translation string will be raw string. -::: - -```typescript -import Vue from 'vue' -import ElementPlus from 'element-plus' -import enLocale from 'element-plus/lib/locale/lang/en' -import zhLocale from 'element-plus/lib/locale/lang/zh-cn' - -// The is the signature of i18n method. -type i18n = (...args: any[]) => string -Vue.use(Element, { - i18n: function(path, options) { - // ... - }, - // others. -}) -``` - -### オンデマンドコンポーネントのカスタム i18n - -If you need to know how to lazy loading translation strings, please check this out[Lazy loading](https://vue-i18n-next.intlify.dev/guide/advanced/lazy.html) - -```typescript -import { createApp } from 'vue' -import { createI18n } from 'vue-i18n' -import ElementPlus from 'element-plus' -import enLocale from 'element-plus/lib/locale/lang/en' -import zhLocale from 'element-plus/lib/locale/lang/zh-cn' -import ElementLocale from 'element-plus/lib/locale' -import App from './App.vue' - -const messages = { - [enLocale.name]: { - // el property is critical, set this in order for ElementPlus translate strings correctly. - el: enLocale.el, - // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`, - // Because that makes the ElementPlus internal translation invalid. - message: { - hello: 'hello world', - }, - }, - [zhLocale.name]: { - el: zhLocale.el, - // Define your own dictionary with your own namespace, but DO NOT use the namespace `el`, - // Because that makes the ElementPlus internal translation invalid. - message: { - hello: '你好，世界', - }, - }, - testLocale: { - el: {}, - // No message translations, it will fallback to en lang, the definition of fallbackLocale is below 👇 - }, -} - -const i18n = createI18n({ - locale: zhLocale.name, - fallbackLocale: enLocale.name, - messages, -}) - -ElementLocale.i18n(i18n.global.t) - -const app = createApp(App) -app.use(i18n) -``` - -### CDN を経由してインポート - -```html - - - - - -``` - -`vue-i18n` との互換性 - -```html - - - - - - - -``` +Full documentation refer to: [ConfigProvider](/#/zh-CN/component/config-provider) -現在、Element Plus は以下の言語をフォローしています。: +[Supported Language List](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang)
  • Simplified Chinese (zh-cn)
    • @@ -354,4 +105,31 @@ app.use(i18n)
  • Esperanto (eo)
-もしあなたのターゲット言語が含まれていない場合、貢献することは大歓迎です: 別の言語の設定を追加して [ここで](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang)、プルリクエストを作成してください。 +If you need any other languages, [PR](https://github.com/element-plus/element-plus/pulls) +is always welcomed, you only need to add a language file at +[here](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang). + +## FAQs + +### If I want to replace the default language pack to reduce the size, how do I do? + +When the default language of your app is not **English**, you will be going to need +to import another language file, which will increase the bundle size since you have +both **English** and **Your desired language** bundled, +you can use the plugin [NormalModuleReplacementPlugin](https://webpack.js.org/plugins/normal-module-replacement-plugin/#root) +provided by [webpack](https://webpack.js.org) to replace the default language file, +so that you will only get **1** language file bundled. +Add the code below into your `webpack.config.js` to get it work. + +> webpack.config.js + +```typescript +{ + plugins: [ + new webpack.NormalModuleReplacementPlugin( + /element-plus[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]en/, + 'element-plus/lib/locale/lang/zh-cn', + ), + ] +} +``` diff --git a/website/docs/jp/installation.md b/website/docs/jp/installation.md index 8f8f745f1dbb6..9736030a34a15 100644 --- a/website/docs/jp/installation.md +++ b/website/docs/jp/installation.md @@ -1,33 +1,83 @@ -## インストール +# インストール -### npm -npmでインストールが推奨されており、[webpack](https://webpack.js.org/) でシームレスに動作します。 +## 環境対応 + +- モダンブラウザ + +| ![IE](https://cdn.jsdelivr.net/npm/@browser-logos/edge/edge_32x32.png) | ![Firefox](https://cdn.jsdelivr.net/npm/@browser-logos/firefox/firefox_32x32.png) | ![Chrome](https://cdn.jsdelivr.net/npm/@browser-logos/chrome/chrome_32x32.png) | ![Safari](https://cdn.jsdelivr.net/npm/@browser-logos/safari/safari_32x32.png) | +| --- | --- | --- | --- | +| Edge | last 2 versions | last 2 versions | last 2 versions | + +> IE11はVue3でサポートされていないため、ElementPlusもIE11以前のバージョンをサポートしていません。 + +## 現在のバージョン + +ElementPlusは現在、急速に開発が進められています。 + +[![ElementPlus version badge](https://img.shields.io/npm/v/element-plus.svg?style=flat-square)](https://www.npmjs.org/package/element-plus) + +## npmまたはyarnによるインストール + +**パッケージマネージャー方式でのインストールを推奨します**。 +[vite](https://vitejs.dev)、[webpack](https://webpack.js.org/)との相性が良いパッケージマネージャー方式でのインストールをお勧めします。 +パッケージングツールです。 ```shell -npm install element-plus --save +$ npm install element-plus --save ``` -### CDN +```shell +$ yarn add element-plus +``` -[unpkg.com/element-plus](https://unpkg.com/element-plus/) から最新版を手に入れ、ページに JavascriptとCSSファイルをインポートすれば動作します。 +ネットワーク環境が悪い場合は、ミラーリポジトリの利用をお勧めします + +## ダイレクトブラウザ導入 + +ElementPlusは、ブラウザのHTMLタグによって直接導入され、`ElementPlus`はグローバルに使用することができます。 + +**CDN**による`ElementPlus`の本格的な導入は、**CDN**の提供者によって異なりますが、ここでは[unpkg](https://unpkg.com)と[jsdelivr](https://jsdelivr.com)を例に挙げます。 +また、他の**CDN**プロバイダーを利用することもできます。 + +## unpkgの使用 ```html - - - - + + + + + + + + +``` + +## jsDelivrの使用 + +```html + + + + + + + + ``` :::tip -[推奨]CDNを使うときはElementのバージョンを固定することを推奨します。詳しくは[unpkg.com](https://unpkg.com)を御覧ください。 +**CDN**を使用して`ElementPlus`を導入したユーザーは、今後の`ElementPlus`のアップグレードが互換性のないアップデートの影響を受けないように、リンク先のアドレスでバージョンをロックすることを推奨します。 +バージョンをロックするには、以下を参照してください。 +[unpkg.com](https://unpkg.com)。 ::: -### Hello world -CDNを使う場合、Elementでハローワールドを表示するのは簡単です。 [Online Demo](https://codepen.io/iamkun/pen/YzWMaVr) +## Hello world + +CDN**のアプローチでは、`ElementPlus`を使ってHello worldページを簡単に書くことができます。[オンラインデモ](https://codepen.io/iamkun/pen/YzWMaVr) -npmを使っていてwebpackを適用したい場合は、次のページに進んでください。: [Quick Start](/#/jp/component/quickstart). +npm / yarn経由でインストールし、パッケージングツールで使用したい場合は、次のセクションをお読みください：【クイックスタート】。(/#/jp/component/quickstart)。 diff --git a/website/docs/jp/quickstart.md b/website/docs/jp/quickstart.md index bc772319ab1be..e4bceb0752205 100644 --- a/website/docs/jp/quickstart.md +++ b/website/docs/jp/quickstart.md @@ -1,424 +1,200 @@ -## クイックスタート +# すぐに始められる -このパートでは、webpackプロジェクトでElement Plusを用いた開発プロセスを説明します。 +ここでは、プロジェクトでElementPlusを使用する方法について説明します。 -### vue-cli@4.5を使う +## コンポーネントの使用 -私達はvue-cli@4.5のために [Element Plus plugin](https://github.com/element-plus/vue-cli-plugin-element-plus) 提供しており, 簡単に Element Plusベースのプロジェクトを構築出来ます。 +### すべてのコンポーネントの完全導入 -### スターターキットを使う +> main.ts -私達は一般的なツール[project template](https://github.com/element-plus/element-plus-starter) があります。 直接ダウンロードして使うことが出来ます。 - -これらのツールを使いたくない場合は、以下の記事を御覧ください。 - -### Element Plusをインポートする - -Element Plusを完全にインポートすることも、必要なものだけをインポートすることもできます。完全なインポートから始めましょう。 - -#### 完全にインポートした場合 - -main.js: - -```javascript +```typescript import { createApp } from 'vue' -import ElementPlus from 'element-plus'; -import 'element-plus/lib/theme-chalk/index.css'; -import App from './App.vue'; +import ElementPlus from 'element-plus' +import 'element-plus/dist/index.css' +import App from './App.vue' const app = createApp(App) + app.use(ElementPlus) app.mount('#app') ``` -上記のコードは完全にElement Plusをインポートします。CSSファイルは個別にインポートする必要があることを注意してください。 +### オンデマンドでコンポーネントを導入 -#### オンデマンド +`ElementPlus`的なJS代弁者认为支持基于ESモジュール的[树揺](https://webpack.js.org/guides/tree-shaking/)。 -**Vue CLI** +> App.vue -[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) を用いて、 必要な分のコンポーネントをインポートし、プロジェクトをより小さくすることが出来ます。 +```html + + ``` -つぎに babel.config.js を編集します: +### スタイルの紹介 -- import `.scss` style +スタイルの導入は、**完全なスタイルファイルを直接導入することを強くお勧めします**。アプリケーション全体のサイズが大きくなるように見えるかもしれませんが、 +これによりパッケージングツールのプラグインを追加で導入する必要がなくなります（負担が少なくなります）。また、 +[CDN](https://www.cloudflare.com/learning/cdn/what-is-)を使用することもできます。 a-cdn/) +を使ってスタイルファイルを読み込むことで、アプリケーションの読み込みが速くなります。 -:::warning -Please make sure that `sass` and `sass-loader` dependencies have been installed and import `element-plus/packages/theme-chalk/src/base.scss` in the entry file. -::: +JSの方法で紹介されました -```js -module.exports = { - plugins: [ - [ - "import", - { - libraryName: 'element-plus', - customStyleName: (name) => { - name = name.slice(3) - return `element-plus/packages/theme-chalk/src/${name}.scss`; - }, - }, - ], - ], -}; +```typescript +import 'element-plus/dist/index.css' ``` -- import `.css` style +HTMLヘッダで紹介 -```js -module.exports = { - plugins: [ - [ - "import", - { - libraryName: 'element-plus', - customStyleName: (name) => { - return `element-plus/lib/theme-chalk/${name}.css`; - }, - }, - ], - ], -}; +```html + + + + ``` -**Vite** - -Firstly，install [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import): +スタイルもオンデマンドで導入したい場合は、対応するツールが提供するプラグインを使って参照することができます。 [よくあるご質問](/#/zh-cn/component/quickstart#yokuarugo-zhi-wen)をご覧ください。 -```bash -$ npm install vite-plugin-style-import -D -``` +## クイックビルドプロジェクトテンプレート -or if you use `Yarn` as package manager +### vue-cli@4.5 をご利用ください。 -```bash -$ yarn add vite-plugin-style-import -D -``` +の新バージョンに対応したvue-cliプラグインを用意しました。 +をベースにしたプロジェクトを素早く構築するために使用できる[Element Plus plugins](https://github.com/element-plus/vue-cli-plugin-element-plus)を提供します。 +Element Plusプロジェクト。 -Then edit vite.config.js: +### スターターキットの使い方 -- import `.scss` style +そのまま使える汎用的な[プロジェクトテンプレート](https://github.com/element-plus/element-plus-starter)を提供し、さらには +Vite[テンプレート](https://github.com/element-plus/element-plus-vite-starter)を使用しています。 +のために +Laravelをお使いの方は、対応する[テンプレート](https://github.com/element-plus/element-plus-in-laravel-starter)も用意していますので、そのままダウンロードしてお使いいただけます。 -:::warning -Please make sure that the `sass` dependency have been installed and import `element-plus/packages/theme-chalk/src/base.scss` in the entry file. -::: +## グローバルコンフィギュレーション -```js -import { defineConfig } from 'vite' -import vue from '@vitejs/plugin-vue' -import styleImport from 'vite-plugin-style-import' +Element Plusを導入する際に、グローバルコンフィギュレーションオブジェクトを渡すことができます。 このオブジェクトは現在、`size` と `zIndex` +フィールドをサポートしています。 サイズ +は、コンポーネントのデフォルトサイズを変更するために使用され、`zIndex`は、ポップアップボックスの初期z-indexを設定します（デフォルト値：2000）。 +要求に応じて「エレメント・プラス」を以下のように導入します。 -export default defineConfig({ - plugins: [ - vue(), - styleImport({ - libs: [{ - libraryName: 'element-plus', - esModule: true, - ensureStyleFile: true, - resolveStyle: (name) => { - name = name.slice(3) - return `element-plus/packages/theme-chalk/src/${name}.scss`; - }, - resolveComponent: (name) => { - return `element-plus/lib/${name}`; - }, - }] - }) - ] -}) -``` - -- import `.css` style +ElementPlusを完全紹介。 ```js -import { defineConfig } from 'vite' -import vue from '@vitejs/plugin-vue' -import styleImport from 'vite-plugin-style-import' +import { createApp } from 'vue' +import ElementPlus from 'element-plus'; +import App from './App.vue'; -export default defineConfig({ - plugins: [ - vue(), - styleImport({ - libs: [ - { - libraryName: 'element-plus', - esModule: true, - ensureStyleFile: true, - resolveStyle: (name) => { - return `element-plus/lib/theme-chalk/${name}.css`; - }, - resolveComponent: (name) => { - return `element-plus/lib/${name}`; - }, - } - ] - }) - ] -}) +const app = createApp(App) +app.use(ElementPlus, { size: 'small', zIndex: 3000 }); ``` -次に、ボタンとセレクトが必要な場合、main.jsを編集します: +ElementPlusのオンデマンド導入。 -```javascript +```js import { createApp } from 'vue' -import { ElButton, ElSelect } from 'element-plus'; +import { ElButton } from 'element-plus'; import App from './App.vue'; -// If you want to use the .scss style file, you need to import the base.scss file -// import 'element-plus/packages/theme-chalk/src/base.scss' const app = createApp(App) -app.component(ElButton.name, ElButton); -app.component(ElSelect.name, ElSelect); - -/* or - * app.use(ElButton) - * app.use(ElSelect) - */ - -app.mount('#app') +app.config.globalProperties.$ELEMENT = option +app.use(ElButton); ``` -全ての例 (コンポーネントリストのリファレンスは [reference](https://github.com/element-plus/element-plus/tree/dev/packages) を御覧ください) +上記の設定により、プロジェクト内で`size`プロパティを持つすべてのコンポーネントのデフォルトサイズは「small」となり、ポップアップボックスの初期z-indexは3000となります。 -```javascript -import { createApp } from 'vue' -import App from './App.vue'; -// If you want to use the .scss style file, you need to import the base.scss file -// import 'element-plus/packages/theme-chalk/src/base.scss' - -import { - ElAlert, - ElAside, - ElAutocomplete, - ElAvatar, - ElBacktop, - ElBadge, - ElBreadcrumb, - ElBreadcrumbItem, - ElButton, - ElButtonGroup, - ElCalendar, - ElCard, - ElCarousel, - ElCarouselItem, - ElCascader, - ElCascaderPanel, - ElCheckbox, - ElCheckboxButton, - ElCheckboxGroup, - ElCol, - ElCollapse, - ElCollapseItem, - ElCollapseTransition, - ElColorPicker, - ElContainer, - ElDatePicker, - ElDialog, - ElDivider, - ElDrawer, - ElDropdown, - ElDropdownItem, - ElDropdownMenu, - ElFooter, - ElForm, - ElFormItem, - ElHeader, - ElIcon, - ElImage, - ElInput, - ElInputNumber, - ElLink, - ElMain, - ElMenu, - ElMenuItem, - ElMenuItemGroup, - ElOption, - ElOptionGroup, - ElPageHeader, - ElPagination, - ElPopconfirm, - ElPopover, - ElPopper, - ElProgress, - ElRadio, - ElRadioButton, - ElRadioGroup, - ElRate, - ElRow, - ElScrollbar, - ElSelect, - ElSlider, - ElStep, - ElSteps, - ElSubmenu, - ElSwitch, - ElTabPane, - ElTable, - ElTableColumn, - ElTabs, - ElTag, - ElTimePicker, - ElTimeSelect, - ElTimeline, - ElTimelineItem, - ElTooltip, - ElTransfer, - ElTree, - ElUpload, - ElInfiniteScroll, - ElLoading, - ElMessage, - ElMessageBox, - ElNotification, -} from 'element-plus'; - -const components = [ - ElAlert, - ElAside, - ElAutocomplete, - ElAvatar, - ElBacktop, - ElBadge, - ElBreadcrumb, - ElBreadcrumbItem, - ElButton, - ElButtonGroup, - ElCalendar, - ElCard, - ElCarousel, - ElCarouselItem, - ElCascader, - ElCascaderPanel, - ElCheckbox, - ElCheckboxButton, - ElCheckboxGroup, - ElCol, - ElCollapse, - ElCollapseItem, - ElCollapseTransition, - ElColorPicker, - ElContainer, - ElDatePicker, - ElDialog, - ElDivider, - ElDrawer, - ElDropdown, - ElDropdownItem, - ElDropdownMenu, - ElFooter, - ElForm, - ElFormItem, - ElHeader, - ElIcon, - ElImage, - ElInput, - ElInputNumber, - ElLink, - ElMain, - ElMenu, - ElMenuItem, - ElMenuItemGroup, - ElOption, - ElOptionGroup, - ElPageHeader, - ElPagination, - ElPopconfirm, - ElPopover, - ElPopper, - ElProgress, - ElRadio, - ElRadioButton, - ElRadioGroup, - ElRate, - ElRow, - ElScrollbar, - ElSelect, - ElSlider, - ElStep, - ElSteps, - ElSubmenu, - ElSwitch, - ElTabPane, - ElTable, - ElTableColumn, - ElTabs, - ElTag, - ElTimePicker, - ElTimeSelect, - ElTimeline, - ElTimelineItem, - ElTooltip, - ElTransfer, - ElTree, - ElUpload, -] - -const plugins = [ - ElInfiniteScroll, - ElLoading, - ElMessage, - ElMessageBox, - ElNotification, -] +## Nuxt.jsを使う -const app = createApp(App) +また、[Nuxt.js](https://nuxtjs.org)を使って -components.forEach(component => { - app.component(component.name, component) -}) +
+ +
-plugins.forEach(plugin => { - app.use(plugin) -}) -``` +## スタートアップ -### グローバルコンフィグ +VueとElement Plusをベースにした開発環境が整ったところで、いよいよコードを書いてみましょう。 各コンポーネントの使用方法については、各コンポーネントのドキュメントを参照してください。 -Elenentをインポートする際、グローバルコンフィグオブジェクトを定義出来ます。現時点では2つのプロパティ: `size` と `zIndex` があります。 プロパティ `size` はすべてのコンポーネントのデフォルトサイズ、プロパティ `zIndex` はモーダルボックスの初期の z-index (デフォルト: 2000) を設定します。 +## よくあるご質問 -Element Plusを完全にインポート： +### コンポーネントとスタイルを同時にオンデマンドで導入したいのですが、どのようにすればよいでしょうか？ -```js -import { createApp } from 'vue' -import ElementPlus from 'element-plus'; -import App from './App.vue'; +#### viteでオンデマンドのローディングスタイル -const app = createApp(App) -app.use(ElementPlus, { size: 'small', zIndex: 3000 }); +ビルドパッケージングツールとして[vite](https://vitejs.dev)を使用している場合は、オンデマンドでスタイルを読み込むために、まず `vite-plugin-element-plus` +をインストールする必要があります。 + +```shell +yarn add vite-plugin-element-plus -D +# または +npm install vite-plugin-element-plus -D ``` -Element Plusを部分的にインポート： +次に、`vite.config.js`ファイルに以下のコードを追加します。 -```js -import { createApp } from 'vue' -import { ElButton } from 'element-plus'; -import App from './App.vue'; -// If you want to use the .scss style file, you need to import the base.scss file -// import 'element-plus/packages/theme-chalk/src/base.scss' +```typescript +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import VitePluginElementPlus from 'vite-plugin-element-plus' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue(), + VitePluginElementPlus({ + // コンポーネント名].scssのソースファイルを使用する必要がある場合は、以下のようにコメントアウトを解除する必要があります。 + // useSource: true + // すべてのAPIについては、https://github.com/element-plus/vite-plugin-element-plus のドキュメントノートを参照してください。 + }), + ], +}) -const app = createApp(App) -app.config.globalProperties.$ELEMENT = option -app.use(ElButton); ``` -上記の設定では、size属性を持つすべてのコンポーネントのデフォルトのサイズは `small`、モーダルボックスのデフォルト値 `z-index` は3000となります。 +#### webpackによるオンデマンドでのスタイルの読み込み -### コーディングを始めましょう +ビルドパッケージングツールとしてwebpackを使用している場合は、必要に応じてスタイルを読み込むために、まず`babel-plugin-import`をインストールする必要があります。 -プロジェクトに Vue と Element Plus を実装したので、いよいよコードを書く時が来ました。使用方法については、各コンポーネントのドキュメントを参照してください。 +```shell +yarn add babel-plugin-import -D +# または +npm install babel-plugin-import -D +``` -### Nuxt.jsを使う +次に、以下のコードを `babel.config.js` ファイルに追加してください。 -[Nuxt.js](https://nuxtjs.org/) を使ってプロジェクトを立ち上げることも出来ます: +> babel.config.js -
- -
+```javascript +module.exports = { + plugins: [ + // ...others + [ + "import", + { + libraryName: 'element-plus', + customStyleName: (name) => { + name = name.slice(3) + // [name].cssファイルが必要な場合は、次の行を返す必要があります。 + return `element-plus/es/${name}/style/css` + // [name].scssファイルが必要な場合は、前の行のコードをコメントアウトし、次の行のコードをアンコメントする必要があります。 + // return `element-plus/es/${name}/style`; + }, + }, + ], + ], +}; +``` diff --git a/website/docs/zh-CN/config-provider.md b/website/docs/zh-CN/config-provider.md index 1d0ba04e3fe51..a73aee2a4714b 100644 --- a/website/docs/zh-CN/config-provider.md +++ b/website/docs/zh-CN/config-provider.md @@ -1,55 +1,92 @@ -## Config Provider +# Config Provider -Config Provider 被用来提供全局的配置选项，让你的配置能够在全局都能够被访问到。 +Config Provider 被用来提供全局的配置选项，让你的配置能够在全局都能够被访问到，Config Provider 使用了 [Vue 的 provide/inject 特性](https://v3.vuejs.org/guide/composition-api-provide-inject.html#reactivity) -### 国际化相关配置 +```html + + + +``` -通过 Config Provider 来配置国际化相关的服务，能让你的应用完成语言切换和获取。 +## 代码演示 -:::demo 通过两个属性来提供国际化相关的语言配置 +:::demo ```html
- +
+ +
+
+ +
切换语言
- ``` @@ -61,4 +98,3 @@ Config Provider 被用来提供全局的配置选项，让你的配置能够在 | 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------ | -------------------------------------------------------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------------- | ------- | | locale | 翻译文本对象 | Object\ | [languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) | English | -| i18n | 外部的翻译方法，当该方法被提供时，会优先使用该方法进行翻译的操作，若返回空值便会落回到自带翻译方法 | Function\<(...args: []) =\> string\> | - | - | diff --git a/website/docs/zh-CN/custom-theme.md b/website/docs/zh-CN/custom-theme.md index e7ea6049dc92e..c35cc1d5fd1d3 100644 --- a/website/docs/zh-CN/custom-theme.md +++ b/website/docs/zh-CN/custom-theme.md @@ -38,7 +38,7 @@ app.use(ElementPlus) 如果你的项目没有使用 SCSS，那么可以使用命令行主题工具进行深层次的主题定制： -#### 安装工具 +#### **安装工具** 首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动，这里以全局安装做演示。 @@ -56,7 +56,7 @@ npm i element-theme-chalk -D npm i https://github.com/ElementUI/theme-chalk -D ``` -#### 初始化变量文件 +#### **初始化变量文件** 主题生成工具安装成功后，如果全局安装可以在命令行里通过 `et` 调用工具，如果安装在当前目录下，需要通过 `node_modules/.bin/et` 访问到命令。执行 `-i` 初始化变量文件。默认输出到 `element-variables.scss`，当然你可以传参数指定文件输出目录。 @@ -88,7 +88,7 @@ $--color-info: #909399 !default; ... ``` -#### 修改变量 +#### **修改变量** 直接编辑 `element-variables.scss` 文件，例如修改主题色为红色。 @@ -96,7 +96,7 @@ $--color-info: #909399 !default; $--color-primary: red; ``` -#### 编译主题 +#### **编译主题** 保存文件后，到命令行里执行 `et` 编译主题，如果你想启用 `watch` 模式，实时编译主题，增加 `-w` 参数；如果你在初始化时指定了自定义变量文件，则需要增加 `-c` 参数，并带上你的变量文件名。默认情况下编译的主题目录是放在 `./theme` 下，你可以通过 `-o` 参数指定打包目录。 @@ -109,7 +109,7 @@ et ### 使用自定义主题 -#### 引入自定义主题 +#### **引入自定义主题** 和引入默认主题一样，在代码里直接引用「在线主题编辑器」或「命令行工具」生成的主题的 `theme/index.css` 文件即可。 @@ -121,7 +121,7 @@ import ElementPlus from 'element-plus' createApp(App).use(ElementPlus) ``` -#### 搭配插件按需引入组件主题 +#### **搭配插件按需引入组件主题** 如果是搭配 `babel-plugin-component` 一起使用，只需要修改 `.babelrc` 的配置，指定 `styleLibraryName` 路径为自定义主题相对于 `.babelrc` 的路径，注意要加 `~`。 diff --git a/website/docs/zh-CN/i18n.md b/website/docs/zh-CN/i18n.md index 1688228eec122..030e509d60b0d 100644 --- a/website/docs/zh-CN/i18n.md +++ b/website/docs/zh-CN/i18n.md @@ -1,35 +1,42 @@ -## 国际化 +# 国际化 -Element Plus 组件内部默认使用英语，若希望使用其他语言，则需要进行多语言设置。以中文为例，在 main.js 中 +ElementPlus 组件内部**默认**使用英语，若希望使用其他语言，可以参考下面的方案。 -:::warning -我们在 **1.0.2-beta.59（包含59）** 之后的国际化按需引入有破坏性变动，请往下查看，该变动**不适用于 1.0.2-beta.58 之前的版本** -::: +## 全局配置 -### 1.0.2-beta.59（包含59）之后的更新： +ElementPlus 提供了全局配置国际化的设置。 -在 `1.0.2-beta.59（包含59）` 之后，我们重新组织了代码，让国际化功能能够被正常的使用(不论是全引入还是按需引入），一共有两种方式在项目中使用。 +```typescript +import ElementPlus from 'element-plus' +import zhCn from 'element-plus/es/locale/lang/zh-cn' + +app.use(ElementPlus, { + locale: zhCn, +}) +``` -#### 1. 通过 ConfigProvider 的方式来使用，详细的使用方法请查阅 ConfigProvider 的文档 -如果你的项目中还在使用 `options API`, 那么你应该使用此方法，我们更加建议用户使用该方法，因为这样会减少使用的负担，但如果你在项目中深度使用 `Composition API`，那么你可以使用第二种方法来为整个应用提供语言支持。 +## ConfigProvider + +ElementPlus 还提供了一个 Vue 组件 [ConfigProvider](/#/zh-CN/component/config-provider) 用于全局配置国际化的设置。 ```html ``` -#### 有用的链接： -- [支持的语言列表](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) - -- [ConfigProvider 文档](#/zh-CN/component/config-provider) - -#### 2. 通过 Composable 的 Hook 使用 -该方法基本就是通过你自己写一个 [ConfigProvider](https://element-plus.org/#/zh-CN/component/config-provider) 的方式，来注入所有配置 - -```ts -import { useLocale, useLocaleProps } from 'element-plus' -// Locale Wrapper 入口 -const Provider = defineComponent({ - props: { - // 如果你需要你的应用可以相应式的更新语言，那么这里的 props 必须包含下面这个 props - ...useLocaleProps, - }, - setup() { - // 不需要任何参数，但是需要你的这个组件可以接受 - // ` { locale?: Language, i18n?: (...args: any[]) => string }` 作为参数 - useLocale() - } -}) - - -createApp( - { - // ... - template: ` - - - - ` - } -) - -``` - -### 设置 Day.js 国际化 - -Element Plus 直接使用了 [Day.js](https://day.js.org/) 项目的时间日期国际化设置，如月份名称、每周第一天是周几等。并且会自动全局设置已经导入的 Day.js 国际化配置。 - -```typescript -import locale from 'element-plus/lib/locale/lang/zh-cn' -import 'dayjs/locale/zh-cn' - -// 将自动设置 Day.js 的国际化设置为 'zh-cn' -app.use(ElementPlus, { locale }) -``` - -当然，如果有需要，你也可以手动设置成其他 Day.js 国际化配置 - -```typescript -import 'dayjs/locale/fr' -dayjs.locale('fr') -``` - -如果使用其它语言，默认情况下英文语言包依旧是被引入的，可以使用 webpack 的 NormalModuleReplacementPlugin 替换默认语言包。 - -**webpack.config.js** - -```typescript -{ - plugins: [ - new webpack.NormalModuleReplacementPlugin( - /element-plus[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]en/, - 'element-plus/lib/locale/lang/zh-cn', - ), - ] -} -``` - -### 兼容 `vue-i18n@9.x` - -如果需要查看 [VueI18n的文档](https://vue-i18n-next.intlify.dev/guide/#html), 请点击这个链接去查看 - -```typescript -import { createApp } from 'vue' -import { createI18n } from 'vue-i18n' -import ElementPlus from 'element-plus' -import enLocale from 'element-plus/lib/locale/lang/en' -import zhLocale from 'element-plus/lib/locale/lang/zh-cn' -import App from './App.vue' - -const messages = { - [enLocale.name]: { - // el 这个属性很关键，一定要保证有这个属性， - el: enLocale.el, - // 定义你自己的字典，但是请不要和 `el` 重复，这样会导致 ElementPlus 内部组件的翻译失效. - message: { - hello: 'hello world', - }, - }, - [zhLocale.name]: { - el: zhLocale.el, - // 定义你自己的字典，但是请不要和 `el` 重复，这样会导致 ElementPlus 内部组件的翻译失效. - message: { - hello: '你好，世界', - }, - }, - testLocale: { - el: {}, - // 没有定义 message 字段，会 fallback 回到 en 去, fallbackLocale 的定义在下方 👇 - }, -} - -const i18n = createI18n({ - locale: zhLocale.name, - fallbackLocale: enLocale.name, - messages, -}) - -const app = createApp(App) - -app.use(ElementPlus, { - i18n: i18n.global.t, -}) - -// 要记得使用这个插件. -app.use(i18n) -``` - -### 兼容其他 i18n 插件 - -如果不使用 `vue-i18n@9.x`，而是用其他的 i18n 插件，Element Plus 将无法兼容，但是可以自定义 Element Plus 的 i18n 的处理方法。 - -:::tip -一旦设置了这个方法，ElementPlus 内置的翻译功能就会失效，会使用用户定义的翻译功能，所以一定要确保翻译方法能够正确的翻译  `el.scope.subName` 的格式，如果自定义的方法无法翻译 `el.select.noData` 的格式，将会使组件的文本失效. -::: - -```typescript -import Vue from 'vue' -import ElementPlus from 'element-plus' -import enLocale from 'element-plus/lib/locale/lang/en' -import zhLocale from 'element-plus/lib/locale/lang/zh-cn' - -// 这是 i18n 函数的函数签名. -type i18n = (...args: any[]) => string -Vue.use(Element, { - i18n: function(path, options) { - // ... - }, - // others. -}) -``` - -### 按需加载里定制 i18n - -如果你需要按需加载翻译文件，请查看[按需加载](https://vue-i18n-next.intlify.dev/guide/advanced/lazy.html) - -```typescript -import { createApp } from 'vue' -import { createI18n } from 'vue-i18n' -import ElementPlus from 'element-plus' -import enLocale from 'element-plus/lib/locale/lang/en' -import zhLocale from 'element-plus/lib/locale/lang/zh-cn' -import ElementLocale from 'element-plus/lib/locale' -import App from './App.vue' - -const messages = { - [enLocale.name]: { - // el 这个属性很关键，一定要保证有这个属性， - el: enLocale.el, - // 定义你自己的字典，但是请不要和 `el` 重复，这样会导致 ElementPlus 内部组件的翻译失效. - message: { - hello: 'hello world', - }, - }, - [zhLocale.name]: { - el: zhLocale.el, - // 定义你自己的字典，但是请不要和 `el` 重复，这样会导致 ElementPlus 内部组件的翻译失效. - message: { - hello: '你好，世界', - }, - }, - testLocale: { - el: {}, - // 没有定义 message 字段，会 fallback 回到 en 去, fallbackLocale 的定义在下方 👇 - }, -} - -const i18n = createI18n({ - locale: zhLocale.name, - fallbackLocale: enLocale.name, - messages, -}) - -ElementLocale.i18n(i18n.global.t) - -const app = createApp(App) -app.use(i18n) -``` - -### 通过 CDN 的方式加载语言文件 - -```html - - - - - - -``` - -搭配 `vue-i18n` 使用 - -```html - - - - - +详细配置见：[ConfigProvider](/#/zh-CN/component/config-provider) - -``` - -目前 Element Plus 内置了以下语言： +[支持的语言列表](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang)
  • 简体中文（zh-cn）
    • @@ -340,4 +103,23 @@ app.use(i18n)
  • 世界语 (eo)
-如果你需要使用其他的语言，欢迎贡献 PR：只需在 [这里](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) 添加一个语言配置文件即可。 +如果你需要使用其他的语言，欢迎贡献 [PR](https://github.com/element-plus/element-plus/pulls) 只需在[这里](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) 添加一个语言配置文件即可。 + +## 常见问题 + +### 如果我想要替换默认语言包来减小打包体积，应该怎么做？ + +当你的应用默认不是使用**英语**的时候，你需要额外引入一个新的语言，这样会使得没有用到的语言文件被打包，会增加最终产物的文件大小，如果你非常在意最终产物文件的大小，你可以使用 [webpack](https://webpack.js.org) 提供的 [NormalModuleReplacementPlugin](https://webpack.js.org/plugins/normal-module-replacement-plugin/#root) 插件替换默认语言包。你可以把以下代码添加进 `webpack.config.js` 文件中来应用这个插件。 + +> webpack.config.js + +```typescript +{ + plugins: [ + new webpack.NormalModuleReplacementPlugin( + /element-plus[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]en/, + 'element-plus/lib/locale/lang/zh-cn', + ), + ] +} +``` diff --git a/website/docs/zh-CN/installation.md b/website/docs/zh-CN/installation.md index 65c0235430b37..97cee2d51aa0c 100644 --- a/website/docs/zh-CN/installation.md +++ b/website/docs/zh-CN/installation.md @@ -1,35 +1,82 @@ -## 安装 +# 安装 ElementPlus -### npm 安装 +## 环境支持 -推荐使用 npm 的方式安装，它能更好地和 [webpack](https://webpack.js.org/) 打包工具配合使用。 +- 现代浏览器 + +| ![IE](https://cdn.jsdelivr.net/npm/@browser-logos/edge/edge_32x32.png) | ![Firefox](https://cdn.jsdelivr.net/npm/@browser-logos/firefox/firefox_32x32.png) | ![Chrome](https://cdn.jsdelivr.net/npm/@browser-logos/chrome/chrome_32x32.png) | ![Safari](https://cdn.jsdelivr.net/npm/@browser-logos/safari/safari_32x32.png) | +| --- | --- | --- | --- | +| Edge | last 2 versions | last 2 versions | last 2 versions | + +> 由于 Vue3 不再支持 IE11，故而 ElementPlus 也不支持 IE11 及之前版本。 + +## 当前最新版本 + +ElementPlus 目前还处于快速开发迭代中： + +[![ElementPlus version badge](https://img.shields.io/npm/v/element-plus.svg?style=flat-square)](https://www.npmjs.org/package/element-plus) + +## 通过 npm 或者 yarn 安装 + +**我们推荐使用包管理器的方式安装**，它能更好地和 [vite](https://vitejs.dev), [webpack](https://webpack.js.org/) +打包工具配合使用。 ```shell -npm install element-plus --save +$ npm install element-plus --save ``` -### CDN +```shell +$ yarn add element-plus +``` + +如果你的网络环境不佳，推荐使用 [cnpm](https://github.com/cnpm/cnpm) 或使用 [阿里巴巴镜像](https://registry.npm.taobao.org) + +## 浏览器直接引入 + +通过浏览器 HTML 标签的方式直接引入 ElementPlus, 在全局可以使用 `ElementPlus` + +通过 **CDN** 的方式全量引入 `ElementPlus`，根据不同的 **CDN** 提供商有不同的引入方式，我们在这里以 +[unpkg](https://unpkg.com) 和[jsdelivr](https://jsdelivr.com) 举例， +你也可以使用其它的 **CDN** 供应商。 + +## 使用 unpkg + +```html + + + + + + + + +``` -目前可以通过 [unpkg.com/element-plus](https://unpkg.com/element-plus/) 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。 +## 使用 jsDelivr ```html - - - - + + + + + + + + ``` :::tip -我们建议使用 CDN 引入 Element Plus 的用户在链接地址上锁定版本，以免将来 Element Plus 升级时受到非兼容性更新的影响。锁定版本的方法请查看 [unpkg.com](https://unpkg.com)。 +我们建议使用 **CDN** 引入 `ElementPlus` 的用户在链接地址上锁定版本，以免将来 `ElementPlus` 升级时受到非兼容性更新的影响。锁定版本的方法请查看 +[unpkg.com](https://unpkg.com)。 ::: -### Hello world +## Hello world -通过 CDN 的方式我们可以很容易地使用 Element Plus 写出一个 Hello world 页面。[在线演示](https://codepen.io/iamkun/pen/YzWMaVr) +通过 **CDN** 的方式我们可以很容易地使用 `ElementPlus` 写出一个 Hello world 页面。[在线演示](https://codepen.io/iamkun/pen/YzWMaVr) -如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：[快速上手](/#/zh-CN/component/quickstart)。 +如果是通过 npm / yarn 安装，并希望配合打包工具使用，请阅读下一节：[快速上手](/#/zh-CN/component/quickstart)。 diff --git a/website/docs/zh-CN/quickstart.md b/website/docs/zh-CN/quickstart.md index 42bb5ec9789d9..b0740ce226865 100644 --- a/website/docs/zh-CN/quickstart.md +++ b/website/docs/zh-CN/quickstart.md @@ -1,430 +1,195 @@ -## 快速上手 +# 快速上手 -本节将介绍如何在项目中使用 Element。 +本节将介绍如何在项目中使用 ElementPlus。 -### 使用 vue-cli@4.5 - -我们为新版的 vue-cli 准备了相应的 [Element Plus 插件](https://github.com/element-plus/vue-cli-plugin-element-plus)，你可以用它们快速地搭建一个基于 Element Plus 的项目。 - -### 使用 Starter Kit - -我们提供了通用的[项目模板](https://github.com/element-plus/element-plus-starter)，你可以直接使用，另外我们还提供了 Vite [模板](https://github.com/element-plus/element-plus-vite-starter)。对于 Laravel 用户，我们也准备了相应的[模板](https://github.com/element-plus/element-plus-in-laravel-starter)，同样可以直接下载使用。 +## 使用组件 -如果不希望使用我们提供的模板，请继续阅读。 +### 完整引入所有组件 -### 引入 Element Plus +> main.ts -你可以引入整个 Element Plus，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。 - -#### 完整引入 - -在 main.js 中写入以下内容： - -```javascript +```typescript import { createApp } from 'vue' -import ElementPlus from 'element-plus'; -import 'element-plus/lib/theme-chalk/index.css'; -import App from './App.vue'; +import ElementPlus from 'element-plus' +import 'element-plus/dist/index.css' +import App from './App.vue' const app = createApp(App) + app.use(ElementPlus) app.mount('#app') ``` -以上代码便完成了 Element Plus 的引入。需要注意的是，样式文件需要单独引入。 - -#### 按需引入 +### 按需引入组件 -**Vue CLI** - -借助 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)，我们可以只引入需要的组件，以达到减小项目体积的目的。 +`ElementPlus`的 JS 代码默认支持基于 ES modules 的 [摇树 tree shaking](https://webpack.js.org/guides/tree-shaking/)。 -首先，安装 babel-plugin-import: +> App.vue -```bash -$ npm install babel-plugin-import -D -``` - -或者 +```html + + ``` -然后，将 babel.config.js 修改为： +### 样式的引入 -- 引入 `.scss` 样式 +我们**强烈建议直接引入全部的样式文件**，虽然这看起来会增大整个应用的体积，但这样做可以避免引入额外的打包工具插件（减少负担），你还可以通过 [CDN](https://www.cloudflare.com/learning/cdn/what-is-a-cdn/) +的方式来加载样式文件，从而使得你的应用加载更快。 -:::warning -请确保已经安装了 `sass` 和 `sass-loader` 依赖并将 `element-plus/packages/theme-chalk/src/base.scss` 文件在入口文件中引入 -::: +通过 JS 的方式引入 -```js -module.exports = { - plugins: [ - [ - "import", - { - libraryName: 'element-plus', - customStyleName: (name) => { - name = name.slice(3) - return `element-plus/packages/theme-chalk/src/${name}.scss`; - }, - }, - ], - ], -}; +```typescript +import 'element-plus/dist/index.css' ``` -- 引入 `.css` 样式 +通过 HTML 的头文件引入 -```js -module.exports = { - plugins: [ - [ - "import", - { - libraryName: 'element-plus', - customStyleName: (name) => { - return `element-plus/lib/theme-chalk/${name}.css`; - }, - }, - ], - ], -}; +```html + + + + ``` - -**Vite** - -首先，安装 [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import): -```bash -$ npm install vite-plugin-style-import -D -``` +如果你想让样式也按需引入，你可以使用对应工具提供的插件来引用。请看[常见问题](/#/zh-CN/component/quickstart#chang-jian-wen-ti) -或者 +## 快捷搭建项目模板 -```bash -$ yarn add vite-plugin-style-import -D -``` +### 使用 vue-cli@4.5 -然后，将 vite.config.js 修改为： +我们为新版的 vue-cli 准备了相应的 +[Element Plus 插件](https://github.com/element-plus/vue-cli-plugin-element-plus)你可以用它们快速地搭建一个基于 +Element Plus 的项目。 -- 引入 `.scss` 样式 +### 使用 Starter Kit -:::warning -请确保已经安装了 `sass` 依赖并将 `element-plus/packages/theme-chalk/src/base.scss` 文件在入口文件中引入 -::: +我们提供了通用的[项目模板](https://github.com/element-plus/element-plus-starter)，你可以直接使用，另外我们还提供了 +Vite [模板](https://github.com/element-plus/element-plus-vite-starter)。对于 +Laravel 用户，我们也准备了相应的[模板](https://github.com/element-plus/element-plus-in-laravel-starter)，同样可以直接下载使用。 -```js -import { defineConfig } from 'vite' -import vue from '@vitejs/plugin-vue' -import styleImport from 'vite-plugin-style-import' +## 全局配置 -export default defineConfig({ - plugins: [ - vue(), - styleImport({ - libs: [{ - libraryName: 'element-plus', - esModule: true, - ensureStyleFile: true, - resolveStyle: (name) => { - name = name.slice(3) - return `element-plus/packages/theme-chalk/src/${name}.scss`; - }, - resolveComponent: (name) => { - return `element-plus/lib/${name}`; - }, - }] - }) - ] -}) -``` +在引入 Element Plus 时，可以传入一个全局配置对象。该对象目前支持 `size` 与 `zIndex` 字段。`size` +用于改变组件的默认尺寸，`zIndex` 设置弹框的初始 z-index（默认值：2000）。按需引入 Element Plus 的方式，具体操作如下： -- 引入 `.css` 样式 +完整引入 ElementPlus： ```js -import { defineConfig } from 'vite' -import vue from '@vitejs/plugin-vue' -import styleImport from 'vite-plugin-style-import' +import { createApp } from 'vue' +import ElementPlus from 'element-plus'; +import App from './App.vue'; -export default defineConfig({ - plugins: [ - vue(), - styleImport({ - libs: [ - { - libraryName: 'element-plus', - esModule: true, - ensureStyleFile: true, - resolveStyle: (name) => { - return `element-plus/lib/theme-chalk/${name}.css`; - }, - resolveComponent: (name) => { - return `element-plus/lib/${name}`; - }, - } - ] - }) - ] -}) +const app = createApp(App) +app.use(ElementPlus, { size: 'small', zIndex: 3000 }); ``` -接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容： +按需引入 ElementPlus： -```javascript +```js import { createApp } from 'vue' -import { ElButton, ElSelect } from 'element-plus'; +import { ElButton } from 'element-plus'; import App from './App.vue'; -// 如果要使用.scss样式文件，则需要引入base.scss文件 -// import 'element-plus/packages/theme-chalk/src/base.scss' const app = createApp(App) -app.component(ElButton.name, ElButton); -app.component(ElSelect.name, ElSelect); - -/* or - * app.use(ElButton) - * app.use(ElSelect) - */ - -app.mount('#app') +app.config.globalProperties.$ELEMENT = option +app.use(ElButton); ``` -完整组件列表和引入方式（完整组件列表以 [reference](https://github.com/element-plus/element-plus/tree/dev/packages) 为准） +按照以上设置，项目中所有拥有 `size` 属性的组件的默认尺寸均为 'small'，弹框的初始 z-index 为 3000。 -```javascript -import { createApp } from 'vue' -import App from './App.vue'; -// 如果要使用.scss样式文件，则需要引入base.scss文件 -// import 'element-plus/packages/theme-chalk/src/base.scss' - -import { - ElAlert, - ElAside, - ElAutocomplete, - ElAvatar, - ElBacktop, - ElBadge, - ElBreadcrumb, - ElBreadcrumbItem, - ElButton, - ElButtonGroup, - ElCalendar, - ElCard, - ElCarousel, - ElCarouselItem, - ElCascader, - ElCascaderPanel, - ElCheckbox, - ElCheckboxButton, - ElCheckboxGroup, - ElCol, - ElCollapse, - ElCollapseItem, - ElCollapseTransition, - ElColorPicker, - ElContainer, - ElDatePicker, - ElDialog, - ElDivider, - ElDrawer, - ElDropdown, - ElDropdownItem, - ElDropdownMenu, - ElFooter, - ElForm, - ElFormItem, - ElHeader, - ElIcon, - ElImage, - ElInput, - ElInputNumber, - ElLink, - ElMain, - ElMenu, - ElMenuItem, - ElMenuItemGroup, - ElOption, - ElOptionGroup, - ElPageHeader, - ElPagination, - ElPopconfirm, - ElPopover, - ElPopper, - ElProgress, - ElRadio, - ElRadioButton, - ElRadioGroup, - ElRate, - ElRow, - ElScrollbar, - ElSelect, - ElSlider, - ElStep, - ElSteps, - ElSubmenu, - ElSwitch, - ElTabPane, - ElTable, - ElTableColumn, - ElTabs, - ElTag, - ElTimePicker, - ElTimeSelect, - ElTimeline, - ElTimelineItem, - ElTooltip, - ElTransfer, - ElTree, - ElUpload, - ElInfiniteScroll, - ElLoading, - ElMessage, - ElMessageBox, - ElNotification, -} from 'element-plus'; - -const components = [ - ElAlert, - ElAside, - ElAutocomplete, - ElAvatar, - ElBacktop, - ElBadge, - ElBreadcrumb, - ElBreadcrumbItem, - ElButton, - ElButtonGroup, - ElCalendar, - ElCard, - ElCarousel, - ElCarouselItem, - ElCascader, - ElCascaderPanel, - ElCheckbox, - ElCheckboxButton, - ElCheckboxGroup, - ElCol, - ElCollapse, - ElCollapseItem, - ElCollapseTransition, - ElColorPicker, - ElContainer, - ElDatePicker, - ElDialog, - ElDivider, - ElDrawer, - ElDropdown, - ElDropdownItem, - ElDropdownMenu, - ElFooter, - ElForm, - ElFormItem, - ElHeader, - ElIcon, - ElImage, - ElInput, - ElInputNumber, - ElLink, - ElMain, - ElMenu, - ElMenuItem, - ElMenuItemGroup, - ElOption, - ElOptionGroup, - ElPageHeader, - ElPagination, - ElPopconfirm, - ElPopover, - ElPopper, - ElProgress, - ElRadio, - ElRadioButton, - ElRadioGroup, - ElRate, - ElRow, - ElScrollbar, - ElSelect, - ElSlider, - ElStep, - ElSteps, - ElSubmenu, - ElSwitch, - ElTabPane, - ElTable, - ElTableColumn, - ElTabs, - ElTag, - ElTimePicker, - ElTimeSelect, - ElTimeline, - ElTimelineItem, - ElTooltip, - ElTransfer, - ElTree, - ElUpload, -] - -const plugins = [ - ElInfiniteScroll, - ElLoading, - ElMessage, - ElMessageBox, - ElNotification, -] +## 使用 Nuxt.js -const app = createApp(App) +我们还可以使用 [Nuxt.js](https://nuxtjs.org)： -components.forEach(component => { - app.component(component.name, component) -}) +
+ +
-plugins.forEach(plugin => { - app.use(plugin) -}) -``` +## 开始使用 -### 全局配置 +至此，一个基于 Vue 和 Element Plus 的开发环境已经搭建完毕，现在就可以编写代码了。各个组件的使用方法请参阅它们各自的文档。 -在引入 Element Plus 时，可以传入一个全局配置对象。该对象目前支持 `size` 与 `zIndex` 字段。`size` 用于改变组件的默认尺寸，`zIndex` 设置弹框的初始 z-index（默认值：2000）。按需引入 Element Plus 的方式，具体操作如下： +## 常见问题 -完整引入 Element： +### 我想同时按需引入组件和样式，我应该怎么做？ -```js -import { createApp } from 'vue' -import ElementPlus from 'element-plus'; -import App from './App.vue'; +#### 使用 vite 按需加载样式 -const app = createApp(App) -app.use(ElementPlus, { size: 'small', zIndex: 3000 }); +如果你使用 [vite](https://vitejs.dev) 作为构建打包工具，那么你需要先安装 `vite-plugin-element-plus` 来实现按需加载样式 + +```shell +yarn add vite-plugin-element-plus -D +# 或 +npm install vite-plugin-element-plus -D ``` -按需引入 Element： +然后将如下代码添加至 `vite.config.js` 文件中: -```js -import { createApp } from 'vue' -import { ElButton } from 'element-plus'; -import App from './App.vue'; -// 如果要使用.scss样式文件，则需要引入base.scss文件 -// import 'element-plus/packages/theme-chalk/src/base.scss' +```typescript +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import VitePluginElementPlus from 'vite-plugin-element-plus' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue(), + VitePluginElementPlus({ + // 如果你需要使用 [component name].scss 源文件，你需要把下面的注释取消掉。 + // 对于所有的 API 你可以参考 https://github.com/element-plus/vite-plugin-element-plus + // 的文档注释 + // useSource: true + }), + ], +}) -const app = createApp(App) -app.config.globalProperties.$ELEMENT = option -app.use(ElButton); ``` -按照以上设置，项目中所有拥有 `size` 属性的组件的默认尺寸均为 'small'，弹框的初始 z-index 为 3000。 +#### 使用 webpack 按需加载样式 -### 开始使用 +如果你使用 webpack 作为构建打包工具，那么你需要先安装 `babel-plugin-import` 来实现按需加载样式 -至此，一个基于 Vue 和 Element Plus 的开发环境已经搭建完毕，现在就可以编写代码了。各个组件的使用方法请参阅它们各自的文档。 +```shell +yarn add babel-plugin-import -D +# 或 +npm install babel-plugin-import -D +``` -### 使用 Nuxt.js +然后你需要将以下代码加入你的 `babel.config.js` 文件中。 -我们还可以使用 [Nuxt.js](https://nuxtjs.org)： +> babel.config.js -
- -
+```javascript +module.exports = { + plugins: [ + // ...others + [ + "import", + { + libraryName: 'element-plus', + customStyleName: (name) => { + name = name.slice(3) + // 如果你需要 [name].css 文件，你需要 return 下面这一行 + return `element-plus/es/${name}/style/css` + // 如果你需要 [name].scss 文件，那么你需要注释上一行代码并取消注释下一行代码 + // return `element-plus/es/${name}/style`; + }, + }, + ], + ], +}; +``` diff --git a/website/entry.js b/website/entry.js index ff8b6942d285f..c910414ceced8 100644 --- a/website/entry.js +++ b/website/entry.js @@ -10,6 +10,10 @@ import MainFooter from './components/footer' import MainHeader from './components/header' import SideNav from './components/side-nav' import FooterNav from './components/footer-nav' +import AppHeading from './components/heading' +import AppLink from './components/link' +import AppImg from './components/img' + import title from './i18n/title' import 'highlight.js/styles/color-brewer.css' import './demo-styles/index.scss' @@ -43,6 +47,9 @@ app.component('MainFooter', MainFooter) app.component('MainHeader', MainHeader) app.component('SideNav', SideNav) app.component('FooterNav', FooterNav) +app.component('AppHeading', AppHeading) +app.component('AppLink', AppLink) +app.component('AppImg', AppImg) const router = createRouter({ history: createWebHashHistory(), diff --git a/website/md-loader/config.js b/website/md-loader/config.js index 8289d3338063a..3021f2bee7ec7 100644 --- a/website/md-loader/config.js +++ b/website/md-loader/config.js @@ -5,17 +5,39 @@ const slugify = require('transliteration').slugify const hljs = require('highlight.js') const containers = require('./containers') const overWriteFenceRule = require('./fence') +const applyRules = require('./rules') const config = new Config() const highlight = (str, lang) => { if (!lang || !hljs.getLanguage(lang)) { - return '
' + str + '
' + return '
' + str + '' +
+      getLangMark(lang)
+      + '
' } const html = hljs.highlight(lang, str, true, undefined).value - return `
${html}
` + return `
${
+    html
+  }${
+    getLangMark(lang)
+  }
` } +slugify.config({ + replace: [ + ['.', '-'], + ['1', 'one'], + ['2', 'two'], + ['3', 'three'], + ['4', 'four'], + ['5', 'five'], + ['6', 'six'], + ['7', 'seven'], + ['8', 'eight'], + ['9', 'nine'], + ['0', 'zero'], + ], +}) config .options.html(true).highlight(highlight).end() @@ -24,13 +46,29 @@ config level: 2, slugify: slugify, permalink: true, - permalinkBefore: true, + permalinkSymbol: '', }, ]).end() .plugin('containers').use(containers).end() +function getLangMark(lang) { + switch (lang.toLowerCase()) { + case 'bash': + case 'zsh': + case 'shell': + return 'sh' + case 'javascript': + return 'js' + case 'typescript': + return 'ts' + default: + return lang + } +} + const md = config.toMd() overWriteFenceRule(md) +applyRules(md) module.exports = md diff --git a/website/md-loader/index.js b/website/md-loader/index.js index 3b4b4bc61827a..f9d3e2795f99b 100644 --- a/website/md-loader/index.js +++ b/website/md-loader/index.js @@ -14,7 +14,7 @@ module.exports = function(source) { const endTag = ':element-demo-->' const endTagLen = endTag.length - let componenetsString = '' + let componentsString = '' let id = 0 // demo 的 id let output = [] // 输出的内容 let start = 0 // 字符串开始位置 @@ -30,7 +30,7 @@ module.exports = function(source) { let demoComponentContent = genInlineComponentText(html, script) const demoComponentName = `element-demo${id}` output.push(``) - componenetsString += `${JSON.stringify(demoComponentName)}: ${demoComponentContent},` + componentsString += `${JSON.stringify(demoComponentName)}: ${demoComponentContent},` // 重新计算下一次的位置 id++ @@ -43,13 +43,13 @@ module.exports = function(source) { // todo: 优化这段逻辑 let pageScript = '' - if (componenetsString) { + if (componentsString) { pageScript = `` diff --git a/website/md-loader/rules.js b/website/md-loader/rules.js new file mode 100644 index 0000000000000..1777e2ce6b5db --- /dev/null +++ b/website/md-loader/rules.js @@ -0,0 +1,51 @@ +module.exports = md => { + const rules = { + link_open: (tokens, idx, options, env, self) => { + + const token = tokens[idx] + token.tag = 'app-link' + + return self.renderToken(tokens, idx, options) + }, + link_close: (tokens, idx, options, env, self) => { + const token = tokens[idx] + token.tag = 'app-link' + return self.renderToken(tokens, idx, options) + }, + heading_open: (tokens, idx, options, env, self) => { + const level = tokens[idx].markup.length + const next = tokens[idx + 1] + const children = next ? next.children : [] + + const [, href = ''] = children[2] + ? (children[2].attrs && children[2].attrs[1] || [] ) + : [] + const content = children[0].content + + tokens[idx].tag = 'app-heading' + tokens[idx].attrSet('content', content) + tokens[idx].attrSet('href', href) + tokens[idx].attrSet('level', level) + + return self.renderToken(tokens, idx, options) + }, + heading_close: (tokens, idx, options, env, self) => { + tokens[idx].tag = 'app-heading' + + return self.renderToken(tokens, idx, options) + }, + + image: (tokens, idx) => { + const token = tokens[idx] + const alt = token.content + const src = token.attrGet('src') + const title = token.attrGet('title') + + return `
` + }, + } + + Object.entries(rules).forEach(([key, val]) => { + md.renderer.rules[key] = val + }) +} diff --git a/website/pages/changelog.vue b/website/pages/changelog.vue index 269d06e2614f6..976043736c092 100644 --- a/website/pages/changelog.vue +++ b/website/pages/changelog.vue @@ -46,7 +46,7 @@ export default { let a = changeLogNodes[1].querySelector('a') a && a.remove() let release = changeLogNodes[1].textContent.trim() - let fragments = `

  • ${release}

    ` + let fragments = `

  • ${release}

    ` for (let len = changeLogNodes.length, i = 2; i < len; i++) { let node = changeLogNodes[i] @@ -55,8 +55,9 @@ export default { if (node.tagName !== 'H3') { fragments += changeLogNodes[i].outerHTML } else { - release = changeLogNodes[i].textContent.trim() - fragments += `

  • ${release}

    ` + // removing ¶ from the texts. + release = changeLogNodes[i].textContent.slice(2).trim() + fragments += `

  • ${release}

    ` } } fragments = fragments.replace(/#(\d+)/g, '#$1') diff --git a/website/pages/component.vue b/website/pages/component.vue index 1fec70b6f2a2d..1bbb8d71492fd 100644 --- a/website/pages/component.vue +++ b/website/pages/component.vue @@ -19,7 +19,7 @@ -