Compare commits

..

118 Commits

Author SHA1 Message Date
iamkun
bf534d977e [release] 2.13.2 2020-05-18 17:45:09 +08:00
iamkun
d6107fe33f [build] 2.13.2 2020-05-18 17:45:08 +08:00
iamkun
d6f9adf5f7 chore: update changelog (#19442)
* chore: update changelog

* chore: update changelog style
2020-05-18 17:40:53 +08:00
Diego Mengarda
6d6df13e56 locale: Update Brazilian Portuguese translation (#19374) 2020-05-18 17:00:41 +08:00
therour
e6785d6e3d locale: Update locale Indonesia (id.js) (#19320) 2020-05-18 16:59:46 +08:00
Ismail D
a4c3ec847d locale: Update Catalan and Spanish translations (#19296) 2020-05-18 16:58:06 +08:00
Quang LN
3bc2d2b4db locale: Fix vi translation (#19244) 2020-05-18 16:57:10 +08:00
Philip Solovyev
abb16771a5 locale: Fix ru-RU popconfirm translation (#19220) 2020-05-18 16:54:19 +08:00
刘宏玺
f89fa65442 fix: Image update error status 2020-05-18 16:52:40 +08:00
三咲智子
49d367e993 Autocomplete: fix change event bug (#19200) 2020-04-23 16:49:06 +08:00
iamkun
d578b018b9 [release] 2.13.1 2020-04-13 14:53:32 +08:00
iamkun
2b6111338b [build] 2.13.1 2020-04-13 14:53:31 +08:00
luckyCao
d9f71dcd57 Chore: Update Changelog (#19162) 2020-04-13 14:07:47 +08:00
Haoran Yu
4b869fbe41 Docs: fix a type error in document of steps component. (#17555) 2020-04-13 10:49:33 +08:00
luckyCao
f3c76ee0ad Image: Fix shortcut key not work at second time issue (#18983) (#19156)
* Image: fix shortcut key not work at second time issue (#18983)

* fix test case

* fix test case

Co-authored-by: cl199793 <cl199793@alibaba-inc.com>
2020-04-13 10:15:17 +08:00
iamkun
3235daa363 chore: remove index intro (#19155) 2020-04-10 17:40:35 +08:00
luckyCao
7259a83852 Image: Fix preview dose not show when preview list not contain src issue (#18975) (#19130) 2020-04-10 17:25:18 +08:00
inooNgt
bc7dcc6281 Image: don't show image-viewer when preview is false (#18967) 2020-04-10 17:19:07 +08:00
Roojay
624c1e90ff Autocomplete: fix suggestion error when textarea (#18478) 2020-04-10 16:46:06 +08:00
三咲智子
3b7f95a308 Autocomplete: add change event (#17913) 2020-04-10 16:43:53 +08:00
张超杰
73de4b655d doc: fix step-strictly docs typo (#18705) 2020-04-10 16:39:34 +08:00
IceFox
b903a87ce9 Carousel: fix console typo bug (#18264) 2020-04-10 16:34:45 +08:00
iamkun
590d7b8356 doc: Popconfirm doc update (#18324) 2020-04-10 16:32:59 +08:00
ashuser-pendo
091f63ad78 [Input Number] Correctly compute inputNumberDisabled (#18439) 2020-04-10 16:29:50 +08:00
Hanx
7122ddb9e5 Transfer: fix incorrect line-height of el-transfer's first list item when it was used with el-form-item (#18917) 2020-04-10 16:17:10 +08:00
iamkun
6ec5f8e900 [release] 2.13.0 2019-11-26 18:24:03 +08:00
iamkun
be23628822 [build] 2.13.0 2019-11-26 18:24:03 +08:00
iamkun
bf9743271f Chore: Update Changelog (#18200)
* change log

* update sub folder
2019-11-26 18:18:13 +08:00
iamkun
2919e5769b fix: FF scroll bar width (#18091) 2019-11-25 12:05:55 +08:00
vimvinter
5491e52391 Docs: delete Input repeat change event (#18085) 2019-11-18 12:19:45 +08:00
vimvinter
f3c1666ac8 Docs: add input event in input Events Table (#18061)
* docs: Input Events Table add input event

update input doc, add input event
the issue is #7592

* docs: update input docs and add input event

* docs: update input docs and add input event
2019-11-15 16:26:45 +08:00
luckyCao
57e9007893 Select: Fix tag show value or empty issue (17199) (#17396)
* Select: Fix tag show value or empty issue

* update docs
2019-11-12 15:33:34 +08:00
jeremywu
068b3ad1b0 Drawer: bugfix/drawer-append-to-body-not-working (#16953)
- 修复了 AppendToBody API 不管用的问题.
- 修复了展开动画会出现滚动条的问题
- 新增了一个新的 API `withHeader` 来控制是否显示 Header 栏
- 动画流畅度的一个小改动
- 对应文档的改动
- 对应单元测试的改动
2019-11-01 15:06:56 +08:00
Emil Ahlbäck
7bf3924b29 I18n: Update sv-SE.js (#17926) 2019-10-31 18:09:19 +08:00
hetech
fa7bdd42be Table: fix header table not display (#17341) 2019-10-31 15:17:48 +08:00
luckyCao
fcaec91eb9 Image: Fix shield the page when preview big image (#16796) (#16997)
* Image: Fix shield the page when preview big image

* refine

* Image:fix page scroll when use image-viewer by keyup and keydown

* add notes
2019-10-31 15:16:30 +08:00
luckyCao
6ff305cbbe Avatar: recover removed css-property (#17372)
This reverts commit 10592d12ea.
2019-10-31 15:15:43 +08:00
luckyCao
cf27c7664d Image: Perfect picture preview behavior (#16985) (#17375)
* Perfect picture preview function

* update test
2019-10-31 15:14:04 +08:00
iamkun
6f62feed3d InfiniteScroll: Skip trigger event on invisible element (#17553)
* InfiniteScroll: Do not trigger event on invisible element

* InfiniteScroll: Do not trigger event on invisible element2
2019-10-31 15:08:52 +08:00
iamkun
0c31a0a48b Progress: add strokeLinecap prop (#17552)
* Progress: add strokeLinecap prop

* update docs
2019-10-31 15:08:07 +08:00
iamkun
42e74d1d65 Chore: SSR test (#16797)
* init ssr test

* ssr test
2019-10-31 15:06:51 +08:00
iamkun
05ca2d1bae Dropdown: update type file (#17550) 2019-10-31 15:06:04 +08:00
iamkun
2842399eb7 Popconfirm: Add popconfirm component (#17548)
* init

* init

* init docs

* init docs2

* init type

* update test

* update naming
2019-10-31 15:05:41 +08:00
iamkun
df3562d905 Menu: fix router NavigationDuplicated error when using vue-router@^3.1.0 (#17269)
* Menu: fix router NavigationDuplicated error when using vue-router@^3.1.0

* Better fix

* comment

* fix
2019-10-31 15:03:29 +08:00
Carter Li
d15b778826 Cascader: fix TypeScript 3.7 compatibility (#17881)
Fix error: 导入声明与“CascaderOption”的局部声明冲突
2019-10-30 17:43:07 +08:00
Carter Li
5558398411 Form: callback of validateField should be optional (#17314) 2019-10-30 17:42:23 +08:00
Baptiste Lombard
ed73a1bef9 I18n: Update avatar component fr doc (#17762) 2019-10-30 15:29:32 +08:00
Gong
7f4d7b0c8d Message: fix close instace offsetHeight(#17564) (#17852) 2019-10-30 14:53:56 +08:00
Weiqi Wu
a78f4b9e5a Docs: Fix Loading demo (#17862) (#17863) 2019-10-30 14:27:11 +08:00
任立欣
096966a4c8 Doc: Fix Changelog typo (#17874) 2019-10-30 14:24:26 +08:00
iamkun
2830c04783 Chore: update readme Dingtalk QR code (#17656) 2019-10-10 11:49:50 +08:00
Bryan Matthews
45c0ef46f2 TimePicker: Set the selection range after scrolling up or down (#16868) 2019-09-17 10:51:58 +08:00
Gonzalo Nandez
059448bf7d i18n: update locale es.js (#17419) 2019-09-12 11:24:48 +08:00
Geass
4db58f39e7 MessageBox: fix icon position error (#17410) 2019-09-12 11:23:54 +08:00
MASONGZHI
c002304a8e Calendar: import el-button and el-button-group (#17376) 2019-09-12 10:50:43 +08:00
Gonzalo Nandez
de3c38f7b1 Docs: update Spanish changelog 2.12.0 (#17364) 2019-09-11 16:02:27 +08:00
hetech
3864d86732 update webpack config (#17373) 2019-09-10 10:06:05 +08:00
Cr
069d96a857 Table: fixed row-style with display not work (#17002) 2019-09-06 15:46:25 +08:00
hetech
90c5d74fd3 Table: fix table header height after filter (#17348) 2019-09-06 12:17:05 +08:00
hetech
5480fb1dda Table: update table header cell style (#17284) 2019-09-06 11:13:39 +08:00
hetech
3807b54ab2 Table: column header can be costumed (#17291) 2019-09-03 16:45:51 +08:00
不得不错
10592d12ea Avatar: remove no-used css-property (#16975) 2019-09-02 12:09:13 +08:00
spengjie
957d645121 add font-size for the style of tree empty-text (#17094) 2019-09-02 12:03:19 +08:00
Haoran Yu
89dc71584e Docs: fix Drawer attribute accepted value typo in es (#17122) 2019-09-02 11:58:08 +08:00
wurong
b6b9aaecce Merge pull request #17057 from cnlon/optimize/scrolling-of-backtop
BackTop: use requestAnimationFrame and cubic bezier for scrolling
2019-09-02 11:55:34 +08:00
0xflotus
c9f4e8fd0d README: fix typo (#16952) 2019-09-02 11:34:24 +08:00
msidolphin
1793e7ad0b [Select]: fix select test cases 2019-09-02 11:00:52 +08:00
Kerwin Ch
3f7d98b629 DatePicker: fix bug of only select min date of date range problem (#17191) (#17207) 2019-09-02 10:58:03 +08:00
Jiewei Qian
b9eacfeb9b doc: fix time-select typo (#17250) 2019-09-02 10:35:07 +08:00
ziyoung
45cb58aafa [release] 2.12.0 2019-08-29 15:15:29 +08:00
ziyoung
2e2428289d [build] 2.12.0 2019-08-29 15:15:29 +08:00
hetech
6ed76994c2 chore: update folder (#17220) 2019-08-29 15:08:35 +08:00
hetech
59a57a5a00 changelog for 2.12.0 (#17218) 2019-08-29 15:00:34 +08:00
luckyCao
3270276c3c Select: not toggle dropdown when filtering (#17205) 2019-08-29 13:28:08 +08:00
hetech
70f6384257 Table: fix expand-row-keys not work when data is loaded asynchronously (#16899) 2019-08-29 13:15:59 +08:00
hetech
eddf85271e Table: fix setCurrentRow unable to clear highlight row (#16879) 2019-08-29 11:29:02 +08:00
dependabot[bot]
f7e3103513 Chore(deps): Bump mixin-deep from 1.3.1 to 1.3.2 (#17211) 2019-08-29 11:24:55 +08:00
iamkun
8d74c67bb1 Transfer: fix style error 2019-08-28 19:11:10 +08:00
iamkun
b12695fff4 Calendar: fix locale error 2019-08-28 19:10:55 +08:00
luckyCao
474ad25153 Docs: Update input-number document about change event (#16316) (#16966) 2019-08-28 17:41:15 +08:00
Haoran Yu
79a1b498e4 Dialog: update sass var (#16365) 2019-08-28 16:53:22 +08:00
hetech
da7aec9ce9 Table: set toggleAllSelection as instance property (#17137) 2019-08-27 14:36:00 +08:00
Cr
c3a2d417f4 Table: not trigger sort-change event when mounted (#17113) 2019-08-27 10:31:33 +08:00
Zhi Cun
747334f06e Divider: Support custom classes (#17078) 2019-08-23 11:24:10 +08:00
Inside
625b4e9262 Table: not throw error when calling toggleExpansion (#16304) 2019-08-22 19:50:42 +08:00
Geass
fc822fe810 RadioGroup: not produce invalid HTML in table if "is" attribute is specify (#17070) 2019-08-20 16:12:58 +08:00
Geass
77c77efb33 Tabs: fix activated tab is out of visual range bug (#17033) 2019-08-19 17:12:21 +08:00
lon
d961d9d5c6 BackTop: use cubic bezier scrolling 2019-08-16 14:02:46 +08:00
Cr
91297a9761 Input: the click event of clear button is not trigger when using v-loading (#16576) 2019-08-15 17:22:09 +08:00
Inside
27398103c4 Cascader: Fix disable status and close button issue (#16209) 2019-08-14 19:55:24 +08:00
zhangHongEn
0bff072fa7 Cascader: fix display errors (#16665) 2019-08-14 16:20:17 +08:00
luckyCao
75f0eb81ab Table: fix chrome crash when set thead css display to none (#16956) 2019-08-14 10:52:47 +08:00
Maksim Koryukov
a907d3922b i18n: add Esperanto translation (#16955) 2019-08-12 10:26:54 +08:00
Gonzalo Nandez
4680e55b96 DOC: update spanish doc 2.11.1 (#16961)
* update spanish doc 2.11

* update spanish doc 2.11

* update spanish doc 2.11

* DOC: update spanish doc 2.11

* DOC: update spanish doc 2.11

* DOC: update spanish doc 2.11

* DOC: update spanish doc 2.11
2019-08-10 20:17:11 +08:00
iamkun
ab32ec0a44 Docs: Update custom theme (#16983) 2019-08-10 20:11:56 +08:00
Tyler Trotter
58b544e55e Checkbox: Improve screen reader experience (#16575) 2019-08-10 16:08:34 +08:00
iamkun
f29f49a17d Chore: Theme Extension (#16686) 2019-08-09 17:53:49 +08:00
hetech
8b8a1a2e87 Table: fix wrong empty block height (#16861) 2019-08-08 14:49:25 +08:00
Moonhyuk Im
e9c5e469c1 Input: Fix Korean composition event (#15069) 2019-08-08 14:03:48 +08:00
LachlanStuart
465c38bfaa Popover: add close-delay prop (#16671) 2019-08-07 11:12:00 +08:00
SeongYeob Jeong
0734dc7960 Calendar : Fix weekdays i18n issue (#16772) 2019-08-06 16:15:47 +08:00
winkay
b8e96b35a1 Docs: fix typo in Drawer docs (#16848) 2019-08-05 15:26:43 +08:00
咸fish
27d4e0ac66 Tab: fix tabs-item's padding cause active-bar's width and transform err( … #15355) (#16520)
* Tab: Refactor tabs-item's padding with dynamic value
2019-08-01 20:19:51 +08:00
hetech
6105a75595 Table: prevent click handler after drag (#16850) 2019-08-01 18:35:28 +08:00
jesse-li
744bad1f96 DateTimePicker: fix time-spinner not scroll to right position 2019-08-01 18:31:39 +08:00
Cr
31cb7d3036 Test: refactor unit test to use data-uri instead (#16847) 2019-08-01 17:31:06 +08:00
Hazlank
64d0acec80 Tree: Increase css weight (#16799) 2019-08-01 16:34:45 +08:00
Jeff Wen
8dbc66aefe docs: Update contributing guide (#14800) 2019-07-31 12:41:33 +08:00
luckyCao
6cc6bc4feb Fix: httprequest type (#16633) 2019-07-31 12:08:38 +08:00
iamkun
be71239990 Date-Picker: add className picker option (#16632)
* add classname

* add docs

* add test

* add range picker

* update api name

* update api name

* update test
2019-07-31 12:03:12 +08:00
Lukas
c80e77f942 I18n: Update ar.js (#16653) 2019-07-31 11:55:00 +08:00
王浩
e26e70fe4d Test: correct spelling error (#16672) 2019-07-31 11:52:38 +08:00
iamkun
ec3326e0bc Notification: Fix modifying incoming option object (#16704) 2019-07-31 11:51:08 +08:00
iamkun
484a033a66 Carousel: Fix onChange emit value (#16705) 2019-07-31 11:49:08 +08:00
Gonzalo Nandez
a08cc0f19d I18n: Update spanish changelog 2.10.0 and 2.10.1 (#16548) 2019-07-31 11:39:07 +08:00
Faizal Andyka
f4df252253 Icon: Adding font-display to @font-face declaration (#16805) 2019-07-31 11:24:21 +08:00
Oscar Albareda
54887e5b61 I18n: Remove translation of 'year' in catalan language as in the other languages (#14722)
Remove translation of 'year' in catalan language as in the other languages.
2019-07-30 17:35:07 +08:00
Simona
2a32b84fb4 docs: update changelog (#16773) 2019-07-29 11:28:53 +08:00
238 changed files with 3418 additions and 645 deletions

View File

@@ -1,6 +1,7 @@
{
"globals": {
"ga": true
"ga": true,
"chrome": true
},
"plugins": ["html", "json"],
"extends": "elemefe",

View File

@@ -43,7 +43,7 @@ npm run dev
# open http://localhost:8085
```
> **Notice**: modify `examples/play/index.vue` file, use the component you contribute, then run `npm run dev:play`, go ahead http://localhost:8085, get result, more quickly and friendly.
> **Notice**: modify `examples/play/index.vue` file, use the component you contribute, then run `npm run dev:play`, go ahead [http://localhost:8085](http://localhost:8085), get result, more quickly and friendly.
To build:

View File

@@ -47,7 +47,7 @@ npm run dev
# abra http://localhost:8085
```
> **Notice**: modify `examples/play/index.vue` file, use the component you contribute, then run `npm run dev:play`, go ahead http://localhost:8085, get result, more quickly and friendly.
> **Notice**: modify `examples/play/index.vue` file, use the component you contribute, then run `npm run dev:play`, go ahead [http://localhost:8085](http://localhost:8085), get result, more quickly and friendly.
Para armar:

View File

@@ -43,7 +43,7 @@ npm run dev
# open http://localhost:8085
```
> **Remarque** : modifiez le fichier `examples/play/index.vue`, utilisez le composant auquel vous contribuez, puis lancez `npm run dev:play`, allez sur http://localhost:8085, regardez le résultat rapidement et facilement.
> **Remarque** : modifiez le fichier `examples/play/index.vue`, utilisez le composant auquel vous contribuez, puis lancez `npm run dev:play`, allez sur [http://localhost:8085](http://localhost:8085), regardez le résultat rapidement et facilement.
Pour le build:

View File

@@ -41,7 +41,7 @@ npm run dev
# open http://localhost:8085
```
> **提示**:可以运行 `npm run dev:play`,修改 `examples/play/index.vue` 文件,调用你修改后的组件,仍然访问 http://localhost:8085查看修改效果更快更方便。
> **提示**:可以运行 `npm run dev:play`,修改 `examples/play/index.vue` 文件,调用你修改后的组件,仍然访问 [http://localhost:8085](http://localhost:8085),查看修改效果,更快更方便。
打包代码:

View File

@@ -1,5 +1,202 @@
## Changelog
### 2.13.2
*2020-05-18*
#### Bug fixes
- Autocomplete
- Fix change event bug (#19200 by @sxzz)
- Image
- Update error status (#19194 by @lhx6538665)
#### Optimization
- I18n
- Update ru-RU popconfirm translation (#19220 by @Opppex)
- Update vi translation (#19244 by @quangln2810)
- Update Catalan and Spanish translations (#19296 by @Ismaaa)
- Update Indonesia translation (#19320) by @therour)
- Update Brazilian Portuguese translation (#19374 by @diegomengarda)
### 2.13.1
*2020-04-13*
#### New features
- Autocomplete
- Add change event (#17913 by @sxzz)
#### Bug fixes
- Autocomplete
- Fix suggestion error when textarea (#18478 by @Roojay)
- Carousel
- Fix console typo bug (#18264 by @IceFox)
- Image
- Fix preview dose not show when preview list not contain src issue (#18975) (#19130 by @luckyCao)
- Fix shortcut key not work at second time issue (#18983) (#19156 by @luckyCao)
- Don't show image-viewer when preview is false (#18967 by @inooNgt)
- Transfer
- Fix incorrect line-height of el-transfer's first list item when it was used with el-form-item (#18917 by @Hanx)
- InputNumber
- Correctly compute inputNumberDisabled (#18439 by @ashuser-pendo)
- Chore
- Remove index intro (#19155 by @iamkun)
- Doc
- Popconfirm doc update (#18324 by @iamkun)
- Fix step-strictly docs typo (#18705 by @dream2023)
- Fix a type error in document of steps component (#17555 by @haoranyu)
### 2.13.0
*2019-11-26*
#### New features
- Popconfirm
- Add popconfirm component (#17548 by @iamkun)
#### Bug fixes
- BackTop
- Use cubic bezier scrolling (by @lon)
- DatePicker
- Fix bug of only select min date of date range problem (#17191 by @smk0621)
- Select
- Fix select test cases by (@msidolphin)
- Tree
- Add font-size for the style of tree empty-text (#17094 by @spengjie)
- Table
- Column header can be costumed (#17291 by @ziyoung)
- Update table header cell style (#17284 by @ziyoung)
- Fix table header height after filter (#17348 by @ziyoung)
- Fixed row-style with display not work (#17002 by @a631807682)
- Fix header table not display (#17341 by @ziyoung)
- Calendar
- Import el-button and el-button-group (#17376 by @masongzhi)
- MessageBox
- Fix icon position error (#17410 by @nullptru)
- TimePicker
- Set the selection range after scrolling up or down (#16868 by @mattheyan)
- Message
- Fix close instace offsetHeight#17564 (#17852 by @gzwgq222)
- Form
- Callback of validateField should be optional (#17314 by @CarterLi)
- Cascader
- Fix TypeScript 3.7 compatibility (#17881 by @CarterLi)
- Menu
- Fix router NavigationDuplicated error when using vue-router@^3.1.0 (#17269 by @iamkun)
- Dropdown
- Update type file (#17550 by @iamkun)
- Progress
- Add strokeLinecap prop (#17552 by @iamkun)
- InfiniteScroll
- Skip trigger event on invisible element (#17553 by @iamkun)
- Image
- Perfect picture preview behavior (#16985 by @luckyCao)
- Fix shield the page when preview big image (#16796 by @luckyCao)
- Drawer
- Bugfix drawer-append-to-body-not-working (#16953 by @JeremyWuuuuu)
- Select
- Fix tag show value or empty issue (17199 by @luckyCao)
- Scrollbar
- Fix FireFox scroll bar width (#18091 by @iamkun)
#### Optimization
- I18n
- Update sv-SE.js (#17926 by @FOLLGAD)
- Update avatar component fr doc (#17762 by @blombard)
- Docs
- Fix time-select typo (#17250 by @wacky6)
- Fix Drawer attribute accepted value typo in es (#17122 by @haoranyu)
- Update Spanish changelog 2.12.0 (#17364 by @Gonzalo2310)
- Fix Changelog typo (#17874 by @renlixin)
- Fix Loading demo (#17862 by @MBearo)
- Add input event in input Events Table (#18061 by @zhouxinyong)
- Delete Input repeat change event (#18085 by @zhouxinyong)
### 2.12.0
*2019-08-29*
#### New features
- Popover
- Add close-delay prop (#16671 by @LachlanStuart)
- Theme
- Add Chrome Extension: Element Theme Extension (#16686 by @iamkun)
- Icon
- Add font-display to @font-face declaration (#16805 by @iamfaizalandyka)
#### Bug fixes
- Carousel
- Fix onChange emit value (#16705 by @iamkun)
- Notification
- Fix modifying incoming option object (#16704 by @iamkun)
- DatePicker
- Add className for picker option (#16632 by @iamkun)
- DateTimePicker
- Fix time-spinner not scroll to right position (#16854 by @jesse-li)
- Table
- Prevent click handler after drag (#16850 by @ziyoung)
- Fix chrome crash when set thead css display to none (#16956 by @luckyCao)
- Fix wrong empty block height (#16861 by @ziyoung)
- Not throw error when calling toggleExpansion (#16304 by @yyjjqq94)
- Not trigger sort-change event when mounted (#17113 by @a631807682)
- Fix setCurrentRow unable to clear highlight row (#16879 by @ziyoung)
- Fix expand-row-keys not work when data is loaded asynchronously (#16899 by @ziyoung)
- set toggleAllSelection as instance property (#17137 by @ziyoung)
- Tree
- Fix distance between label and checkbox (#16799 by @Hazlank)
- Tabs
- Fix incorrect TabItem's position (#16520 by @victorting)
- Fix activated tab is out of visual range bug (#17033 by @nullptru)
- Calendar
- Fix weekdays i18n issue (#16772 by @ubitoffee)
- fix locale error (#17208 by @iamkun)
- Cascader
- Fix CascaderPanel display error (#16716 by @zhangHongEn)
- Fix disable status and close button issue (#16224 by @yyjjqq94)
- Input
- Fix Korean composition event (#15069 by @MoonHyuk)
- Fix click event of clear button not trigger when using v-loading (#16576 by @a631807682)
- Select
- Not toggle dropdown when filtering (#17205 by @luckyCao)
- Transfer
- Fix style error (#17206 by @iamkun)
- Dialog
- update sass var (#16365 by @haoranyu)
- RadioGroup
- Not produce invalid HTML in table if "is" attribute is specify (#17070 by @nullptru)
- Divider
- Support custom classes (#17078 by @island205)
#### Optimization
- Checkbox
- Improve screen reader experience (#16575 by @tylertrotter)
- Docs
- Update changelog (#16773 by @SimonaliaChen)
- Update contributing guide (#14800 by @sinchang)
- Fix typo in Drawer docs (#16848 by @winkay)
- Update custom theme (#16983 by @iamkun)
- Add Esperanto translation (#16955 by @maxkoryukov)
- Update input-number document about change event (#16316 by @luckyCao)
- Update spanish doc 2.11.1 (#16961 by @Gonzalo2310)
- I18n
- Remove translation of 'year' in catalan language as in the other languages (#14722 by @oscaralbareda)
- Update spanish changelog 2.10.0 and 2.10.1 (#16548 by @Gonzalo2310)
- Update ar.js (#16653 by @l3op)
- Test
- Correct spelling error (#16672 by @boomler)
- Refactor unit test to use data-uri (#16847 by @a631807682)
- Types
- Fix httprequest type (#16633 by @luckyCao)
### 2.11.1
*2019-07-26*
@@ -9,7 +206,7 @@
- Image
- Fix Image component SSR compatibility (#16737 by @luckyCao)
- Chore
- Update dart-sass compatibility by @LewisChennnnn)
- Update dart-sass compatibility (#16744 by @LewisChennnnn)
### 2.11.0
@@ -31,10 +228,11 @@
- Fix split-button caret default color (#15931 by @JuniorTour)
- Cascader
- Fix level 1 children is empty update problem (#16399 by @luckyCao)
- Display correct header when range is specified (#16354 by @ziyoung)
- Add sets default values when lazy is true (#16420 by @luckyCao)
- Fix display errors (#15935 by @junyiz)
- Fix display errors when node value is duplicate (#15935 by @junyiz)
- Expose getCheckedNodes and fix options change bug (#16709 by @SimonaliaChen)
- Calendar
- Display correct header when range is specified (#16354 by @ziyoung)
- Submenu
- Fix prop append-to-body (#16289 by @a631807682)
- Table

View File

@@ -1,170 +1,368 @@
## Changelog
### 2.13.2
*2020-05-18*
#### Bug fixes
- Autocomplete
- Fix change event bug (#19200 by @sxzz)
- Image
- Update error status (#19194 by @lhx6538665)
#### Optimization
- I18n
- Update ru-RU popconfirm translation (#19220 by @Opppex)
- Update vi translation (#19244 by @quangln2810)
- Update Catalan and Spanish translations (#19296 by @Ismaaa)
- Update Indonesia translation (#19320) by @therour)
- Update Brazilian Portuguese translation (#19374 by @diegomengarda)
### 2.13.1
*2020-04-13*
#### New features
- Autocomplete
- Add change event (#17913 by @sxzz)
#### Bug fixes
- Autocomplete
- Fix suggestion error when textarea (#18478 by @Roojay)
- Carousel
- Fix console typo bug (#18264 by @IceFox)
- Image
- Fix preview dose not show when preview list not contain src issue (#18975) (#19130 by @luckyCao)
- Fix shortcut key not work at second time issue (#18983) (#19156 by @luckyCao)
- Don't show image-viewer when preview is false (#18967 by @inooNgt)
- Transfer
- Fix incorrect line-height of el-transfer's first list item when it was used with el-form-item (#18917 by @Hanx)
- InputNumber
- Correctly compute inputNumberDisabled (#18439 by @ashuser-pendo)
- Chore
- Remove index intro (#19155 by @iamkun)
- Doc
- Popconfirm doc update (#18324 by @iamkun)
- Fix step-strictly docs typo (#18705 by @dream2023)
- Fix a type error in document of steps component (#17555 by @haoranyu)
### 2.13.0
*2019-11-26*
#### New features
- Popconfirm
- Add popconfirm component (#17548 by @iamkun)
#### Bug fixes
- BackTop
- Use cubic bezier scrolling (by @lon)
- DatePicker
- Fix bug of only select min date of date range problem (#17191 by @smk0621)
- Select
- Fix select test cases by (@msidolphin)
- Tree
- Add font-size for the style of tree empty-text (#17094 by @spengjie)
- Table
- Column header can be costumed (#17291 by @ziyoung)
- Update table header cell style (#17284 by @ziyoung)
- Fix table header height after filter (#17348 by @ziyoung)
- Fixed row-style with display not work (#17002 by @a631807682)
- Fix header table not display (#17341 by @ziyoung)
- Calendar
- Import el-button and el-button-group (#17376 by @masongzhi)
- MessageBox
- Fix icon position error (#17410 by @nullptru)
- TimePicker
- Set the selection range after scrolling up or down (#16868 by @mattheyan)
- Message
- Fix close instace offsetHeight#17564 (#17852 by @gzwgq222)
- Form
- Callback of validateField should be optional (#17314 by @CarterLi)
- Cascader
- Fix TypeScript 3.7 compatibility (#17881 by @CarterLi)
- Menu
- Fix router NavigationDuplicated error when using vue-router@^3.1.0 (#17269 by @iamkun)
- Dropdown
- Update type file (#17550 by @iamkun)
- Progress
- Add strokeLinecap prop (#17552 by @iamkun)
- InfiniteScroll
- Skip trigger event on invisible element (#17553 by @iamkun)
- Image
- Perfect picture preview behavior (#16985 by @luckyCao)
- Fix shield the page when preview big image (#16796 by @luckyCao)
- Drawer
- Bugfix drawer-append-to-body-not-working (#16953 by @JeremyWuuuuu)
- Select
- Fix tag show value or empty issue (17199 by @luckyCao)
- Scrollbar
- Fix FireFox scroll bar width (#18091 by @iamkun)
#### Optimization
- I18n
- Update sv-SE.js (#17926 by @FOLLGAD)
- Update avatar component fr doc (#17762 by @blombard)
- Docs
- Fix time-select typo (#17250 by @wacky6)
- Fix Drawer attribute accepted value typo in es (#17122 by @haoranyu)
- Update Spanish changelog 2.12.0 (#17364 by @Gonzalo2310)
- Fix Changelog typo (#17874 by @renlixin)
- Fix Loading demo (#17862 by @MBearo)
- Add input event in input Events Table (#18061 by @zhouxinyong)
- Delete Input repeat change event (#18085 by @zhouxinyong)
### 2.12.0
*2019-08-29*
#### Nuevas características
- Popover
- Agregada la prop close-delay (#16671 by @LachlanStuart)
- Theme
- Añadida la extensión Chrome: Element Theme Extensión (#16686 by @iamkun)
- Icon
- Añadido font-display a la declaración @font-face (#16805 by @iamfaizalandyka)
#### Corrección de errores
- Carousel
- Corregido el valor emitido por onChange (#16705 by @iamkun)
- Notification
- Corrección de la modificación del objeto de opción entrante (#16704 by @iamkun)
- DatePicker
- Agregado el className para la opción picker (#16632 by @iamkun)
- DateTimePicker
- Corrección del time-spinner que no se desplazaba a la posición correcta (#16854 by @jesse-li)
- Table
- Evitar la propagación del click después del arrastre (#16850 by @ziyoung)
- Corregido una error en chrome que se producía cuando el css de thead tenia display: none (#16956 by @luckyCao)
- Corregida la altura incorrecta de los bloques vacíos (#16861 by @ziyoung)
- No hay lanzamiento de error cuando se llama a toggleExpansion (#16304 by @yyjjqq94)
- No se lanza el evento sort-change cuando esta montado (#17113 by @a631807682)
- Corregido que el setCurrentRow no borraba la linea resaltada (#16879 by @ziyoung)
- Corregido que expand-row-keys no funcionaba cuando los datos eran cargados asincrónicamente (#16899 by @ziyoung)
- Establecido toggleAllSelection como propiedad instanciada (#17137 by @ziyoung)
- Tree
- Corregida la distancia entre label y checkbox (#16799 by @Hazlank)
- Tabs
- Corregida la posición incorrecta de los item's del Tab (#16520 by @victorting)
- Corregido el error de que la pestaña activada estaba fuera del rango visual (#17033 by @nullptru)
- Calendar
- Arreglado el problema de los días de la semana con i18n (#16772 by @ubitoffee)
- Corregido el error de localización (#17208 by @iamkun)
- Cascader
- Corregido un error de visualización del CascaderPanel (#16716 by @zhangHongEn)
- Corregido el problema de disable status y close button (#16224 by @yyjjqq94)
- Input
- Arreglado el evento de composición coreana (#15069 by @MoonHyuk)
- Arreglado el evento click del botón clear que no se lanzaba cuando se usaba v-loading (#16576 by @a631807682)
- Select
- No cambiaba el dropdown cuando se filtraba (#17205 by @luckyCao)
- Transfer
- Arreglado un error de estilo (#17206 by @iamkun)
- Dialog
- Actualizada las variables Sass (#16365 by @haoranyu)
- RadioGroup
- No produce HTML invalido en la tabla si el atributo 'is' es especificado (#17070 by @nullptru)
- Divider
- Soporta clases personalizadas (#17078 by @island205)
#### Optimización
- Checkbox
- Mejorada la experiencia del lector de pantalla (#16575 by @tylertrotter)
- Docs
- Actualizado changelog (#16773 by @SimonaliaChen)
- Actualizada la guía de contribución (#14800 by @sinchang)
- Arreglado typo en la documentación de Drawer (#16848 by @winkay)
- Actualizado el tema personalizado (#16983 by @iamkun)
- Agregada traducción en Esperanto (#16955 by @maxkoryukov)
- Actualizada la documentación de input-number sobre el evento change (#16316 by @luckyCao)
- Actualizada la documentación en Español 2.11.1 (#16961 by @Gonzalo2310)
- I18n
- Eliminada la traducción de 'year' en idioma Catalán como en otros idiomas (#14722 by @oscaralbareda)
- Actualizado el changelog de las versiones 2.10.0 y 2.10.1 en Español (#16548 by @Gonzalo2310)
- Actualizado ar.js (#16653 by @l3op)
- Test
- Corregir error ortográfico (#16672 by @boomler)
- Refractorizacion del unit test para usar data-uri (#16847 by @a631807682)
- Types
- Corrección del tipo httprequest (#16633 by @luckyCao)
### 2.11.1
*2019-07-26*
#### Bug fixes
#### Corrección de errores
- Image
- Fix Image component SSR compatibility (#16737 by @luckyCao)
- Chore
- Update dart-sass compatibility by @LewisChennnnn)
- Corregido el componente Image para compatibilidad SSR (#16737 by @luckyCao)
- Tarea
- Actualizado para compatibilidad con dart-sass by @LewisChennnnn)
### 2.11.0
*2019-07-25*
#### New features
#### Nuevas características
- Drawer
- Add drawer component (#16577 by @JeremyWuuuuu)
- Agregado componente drawer (#16577 by @JeremyWuuuuu)
#### Bug fixes
#### Corrección de errores
- Checkbox
- Enhance css selector (#16006 by @Hazlank)
- Mejora del selector css (#16006 by @Hazlank)
- Tree
- Make el-tree generic (#15934 by @JeremyWuuuuu)
- Set isCurrent prop to False (#15870 by @kkkisme)
- Establecido el el-tree como genérico (#15934 by @JeremyWuuuuu)
- Establecido la prop isCurrent como False (#15870 by @kkkisme)
- Dropdown
- Fix split-button caret default color (#15931 by @JuniorTour)
- Corregido el color predeterminado de los split-button (#15931 by @JuniorTour)
- Cascader
- Fix level 1 children is empty update problem (#16399 by @luckyCao)
- Display correct header when range is specified (#16354 by @ziyoung)
- Add sets default values when lazy is true (#16420 by @luckyCao)
- Fix display errors (#15935 by @junyiz)
- Expose getCheckedNodes and fix options change bug (#16709 by @SimonaliaChen)
- Corregido un problema de actualización cuando el nivel 1 de children estaba vació (#16399 by @luckyCao)
- Ahora se muestra correctamente header cuando range esta especificado (#16354 by @ziyoung)
- Agregados valores por defecto cuando lazy es true (#16420 by @luckyCao)
- Solucionado problemas de visualización (#15935 by @junyiz)
- Expuestos los getCheckedNodes y corrección de errores en el cambio de opciones (#16709 by @SimonaliaChen)
- Submenu
- Fix prop append-to-body (#16289 by @a631807682)
- Corregida la prop append-to-body (#16289 by @a631807682)
- Table
- Fix tree table when updating data (#16481 by @island205)
- Arreglado un fallo en la actualizacion de los datos de tree table (#16481 by @island205)
- Select
- Fix memory leak issue (#16463 by @island205)
- Arreglado un problema de fuga de memoria (#16463 by @island205)
- InfiniteScroll
- Update naming & doc (#16698 by @iamkun)
- Actualizada la nomenclatura y la documentacion (#16698 by @iamkun)
- Avatar
- Fix image not center vertically issue (#16489 by @luckyCao)
- Arreglado que la imagen no se centraba verticalmente (#16489 by @luckyCao)
- Dialog
- Add destroyOnClose attribute (#16455 by @ziyoung)
- Agregado el atributo destroyOnClosee (#16455 by @ziyoung)
- Image
- Add big Image preview feature (#16333 by @luckyCao)
- Agregada la función de vista previa grande de imágenes (#16333 by @luckyCao)
#### Optimization
#### Optimización
- Docs
- Fix dropdown demo (#16193 by @webxmsj)
- Fix typo in table documents (#15971 by @howiefh)
- Documentación
- Arreglada la demo de dropdown (#16193 by @webxmsj)
- Corrección de errores tipográficos en las tablas de documentos (#15971 by @howiefh)
- I18n
- Update translation of Thai language (#16689 by @ponkrit)
- Chore
- Update theme base api (#16607 by @iamkun)
- Add form theme token (#16699 by @iamkun)
- Mark ali inner user's access (#16609 by @iamkun)
- Fix doc anchor bug (#16692 by @iamkun)
- Actualizada la traduccion del lenguage Thai (#16689 by @ponkrit)
- Tareas
- Actualizada la api base del tema (#16607 by @iamkun)
- Añadido token del formulario del tema (#16699 by @iamkun)
- Marcar todos los accesos internos del usuario (#16609 by @iamkun)
- Corrección del error de anclaje del documento (#16692 by @iamkun)
### 2.10.1
*2019-07-02*
#### Bug fixes
#### Corrección de errores
- Table
- Fix sort icon (#15439 by @bezany)
- Fix layout breaks when append slot exists (#16332 by @ziyoung)
- Fix showOverflowTooltip not reactive (#16295 by @a631807682)
- Register scrollbar in filter-panel (#16246 by @ziyoung)
- Chore
- Fix 2.9 docs (#16233 by @ziyoung)
- Fix index page theme intro english css style issue (#16254 by @iamkun)
- Corregido el icono de ordenación (#15439 by @bezany)
- Corregidas las rupturas del layout cuando existía un slot (#16332 by @ziyoung)
- Corregido showOverflowTooltip no era reactivo (#16295 by @a631807682)
- Registrada la scrollbar en el panel de filtro (#16246 by @ziyoung)
- Tareas
- Arreglada la documentación 2.9 (#16233 by @ziyoung)
- Corregido el índice de la página de introducción del tema en inglés que tenia un error en los estilos css (#16254 by @iamkun)
#### Optimization
#### Optimización
- Tag
- Compatible with IE (#16334 by @ziyoung)
- Chore
- Update Dingtalk Group QR image (#16236 by @iamkun)
- Compatible con IE (#16334 by @ziyoung)
- Tarea
- Actualizada la imagen QR de Dingtalk Group (#16236 by @iamkun)
- Doc
- Update online theme roller doc (#16244 by @iamkun)
- Actualizada la documentación online del theme roller (#16244 by @iamkun)
### 2.10.0
*2019-06-25*
#### New features
#### Nuevas características
- I18n
- Added Uzbek language (#15796 by @ogabek96)
- Añadido idioma Uzbeko (#15796 by @ogabek96)
- Calendar
- Add first-day-of-week attribute (#16047 by @ziyoung)
- Añadido el atributo del primer día de la semana (#16047 by @ziyoung)
- Avatar
- Add avatar component (#16144 by @luckyCao)
- Agregado componente Avatar (#16144 by @luckyCao)
- Upload:
- Add capability to customize thumbnail template (#13192 by @victorzhuk)
- Añade capacidad para personalizar la plantilla de miniaturas (#13192 by @victorzhuk)
#### Bug fixes
#### Corrección de errores
- Tree
- Not highlight tree node when currentKey is null (#15668 by @yyjjqq94)
- Fix issue #15538 caused by two Tree sharing the same data. (#15615 by @VanMess)
- No resaltar el nodo de árbol cuando currentKey es nulo (#15668 by @yyjjqq94)
- Solucionado el problema #15538 causado por dos Tree que compartian los mismos datos.(#15615 by @VanMess)
- Upload
- Update the parameter `fileList` type (#15716 by @underfin)
- Actualizado el tipo del parámetro `fileList` (#15716 by @underfin)
- Table
- Fix loading icon not display (#15868 by @ziyoung)
- Fix background color of complex table when hovering (#15504 by @cnlon)
- Fix current-row-key and select event bug (#15983 by @ziyoung)
- Height accepts more units (#16013 by @ziyoung)
- Fix reserve-selection not work (#16135 by @ziyoung)
- Solucionado que el icono de loading no se mostraba (#15868 by @ziyoung)
- Corregido el color de fondo de una tabla compleja cuando se desplaza el cursor (#15504 by @cnlon)
- Corregido current-row-key y el bug del evento select (#15983 by @ziyoung)
- Height acepta más unidades (#16013 by @ziyoung)
- Solucionado reserve-selection no funcionaba (#16135 by @ziyoung)
- Docs
- Fix Divider attribute type in zh-cn (#15889 by @haoranyu)
- Corregido el tipo de atributo Divider en zh-cn (#15889 by @haoranyu)
- Se elimina una etiqueta html de cierre incorrecta y el código de bloque vacío (#16194 por @Alexeykhr)
- Menu
- Fixed submenu hidden bug after adding popper-append-to-body (#15391 by @PanJiaChen)
- Corregido un error oculto en el submenú después de añadir popper-append-to-body (#15391 by @PanJiaChen)
- Select
- Fix initialInputHeight (#15989 by @yyjjqq94)
- Fix default-first-option behavior when typing Chinese (#15431 by @VanMess)
- fix double import problem (#16215 by @lengband)
- Arreglado initialInputHeight (#15989 by @yyjjqq94)
- Corregido el comportamiento de default-first-option cuando se escribe chino (#15431 by @VanMess)
- Corregido el problema de importación doble (#16215 by @lengband)
- Message
- Add type def for offset option (#16027 by @matjaz)
- Añadida la opción type def para offset (#16027 by @matjaz)
- Timeline
- Fix reverse broken (#16091 by @ziyoung)
- Arreglado reverso roto (#16091 by @ziyoung)
- Slider
- Fix #15545 by adding explains about "input" event in Chinese (#15588 by @VanMess)
- Corregido #15545 agregando explicaciones sobre el evento "input" en chino (#15588 by @VanMess)
- InfiniteScroll
- Update package name (#16125 by @iamkun)
- Actualización del nombre del paquete (#16125 by @iamkun)
- MessageBox
- Fix  distinguishCancelAndClose action not same as docs bug (#15438 by @qingdengyue)
- Arreglado el bug de distinguishCancelAndClose, la acción no era la misma que la documentada (#15438 by @qingdengyue)
- PopupManager
- Fix z-index cannot be rewritten at first using (#15738 by @luckyCao)
- Docs
- Delete an incorrect closing html tag and empty block code (#16194 by @Alexeykhr)
- Chore
- Update test api host (#15807 by @iamkun)
- Arreglado que el z-index no podía ser reescrito la primera vez que se usaba (#15738 by @luckyCao)
- Tarea
- Actualizado el test del api host (#15807 by @iamkun)
#### Optimization
#### Optimizacion
- Tree
- Modify loop conditions to improve performance (#15699 by @KingJeason)
- Modificar las condiciones del bucle para mejorar el rendimiento (#15699 by @KingJeason)
- Theme
- Refine GA track & Update footer link forward to online theme roller (#16007 by @island205)
- Refinado GA track & actualizado el link del pie que lleva al theme roller online (#16007 by @island205)
- Badge
- Update badge prop check (#16198 by @iamkun)
- Actualizado el check del prop badge (#16198 by @iamkun)
- Avatar
- Update theme config var (#16202 by @luckyCao)
- Actualizado el var del config del theme (#16202 by @luckyCao)
- I18n
- Update pt-br.js (#15776 by @gigioSouza)
- Update Farsi translation (#15881 by @pamenary)
- Actualizada la traducción del portugués (#15776 by @gigioSouza)
- Actualizada la traducción del idioma Farsi (#15881 by @pamenary)
- Docs
- Add missing components in quickstart (#16063 by @pape2016)
- Update french translation (#16208 by @blombard)
- Add description $slots.default (#15444 by @Alexeykhr)
- Update Spanish Doc 2.9.1 (#15840 by @Gonzalo2310)
- Fix spelling mistakes in fr (#15837 by @blombard)
- Update changelog 2.9.2 Spanish (#16185 by @Gonzalo2310)
- Agregado componentes faltantes en el quick start (#16063 by @pape2016)
- Actualizada la traducción al francés (#16208 by @blombard)
- Agregada descripción $slots.default (#15444 by @Alexeykhr)
- Actualizada la Doc en Español 2.9.1 (#15840 by @Gonzalo2310)
- Corrección de errores ortográficos en fr (#15837 by @blombard)
- Actualizado el changelog 2.9.2 en español (#16185 by @Gonzalo2310)
#### Breaking changes
- Form
- Remove success status (#16159 by @ziyoung)
- Eliminado el estado success (#16159 by @ziyoung)
### 2.9.2

View File

@@ -1,5 +1,203 @@
## Changelog
### 2.13.2
*2020-05-18*
#### Bug fixes
- Autocomplete
- Fix change event bug (#19200 by @sxzz)
- Image
- Update error status (#19194 by @lhx6538665)
#### Optimization
- I18n
- Update ru-RU popconfirm translation (#19220 by @Opppex)
- Update vi translation (#19244 by @quangln2810)
- Update Catalan and Spanish translations (#19296 by @Ismaaa)
- Update Indonesia translation (#19320) by @therour)
- Update Brazilian Portuguese translation (#19374 by @diegomengarda)
### 2.13.1
*2020-04-13*
#### New features
- Autocomplete
- Add change event (#17913 by @sxzz)
#### Bug fixes
- Autocomplete
- Fix suggestion error when textarea (#18478 by @Roojay)
- Carousel
- Fix console typo bug (#18264 by @IceFox)
- Image
- Fix preview dose not show when preview list not contain src issue (#18975) (#19130 by @luckyCao)
- Fix shortcut key not work at second time issue (#18983) (#19156 by @luckyCao)
- Don't show image-viewer when preview is false (#18967 by @inooNgt)
- Transfer
- Fix incorrect line-height of el-transfer's first list item when it was used with el-form-item (#18917 by @Hanx)
- InputNumber
- Correctly compute inputNumberDisabled (#18439 by @ashuser-pendo)
- Chore
- Remove index intro (#19155 by @iamkun)
- Doc
- Popconfirm doc update (#18324 by @iamkun)
- Fix step-strictly docs typo (#18705 by @dream2023)
- Fix a type error in document of steps component (#17555 by @haoranyu)
### 2.13.0
*2019-11-26*
#### New features
- Popconfirm
- Add popconfirm component (#17548 by @iamkun)
#### Bug fixes
- BackTop
- Use cubic bezier scrolling (by @lon)
- DatePicker
- Fix bug of only select min date of date range problem (#17191 by @smk0621)
- Select
- Fix select test cases (by @msidolphin)
- Tree
- Add font-size for the style of tree empty-text (#17094 by @spengjie)
- Table
- Column header can be costumed (#17291 by @ziyoung)
- Update table header cell style (#17284 by @ziyoung)
- Fix table header height after filter (#17348 by @ziyoung)
- Fixed row-style with display not work (#17002 by @a631807682)
- Fix header table not display (#17341 by @ziyoung)
- Calendar
- Import el-button and el-button-group (#17376 by @masongzhi)
- MessageBox
- Fix icon position error (#17410 by @nullptru)
- TimePicker
- Set the selection range after scrolling up or down (#16868 by @mattheyan)
- Message
- Fix close instace offsetHeight#17564 (#17852 by @gzwgq222)
- Form
- Callback of validateField should be optional (#17314 by @CarterLi)
- Cascader
- Fix TypeScript 3.7 compatibility (#17881 by @CarterLi)
- Menu
- Fix router NavigationDuplicated error when using vue-router@^3.1.0 (#17269 by @iamkun)
- Dropdown
- Update type file (#17550 by @iamkun)
- Progress
- Add strokeLinecap prop (#17552 by @iamkun)
- InfiniteScroll
- Skip trigger event on invisible element (#17553 by @iamkun)
- Image
- Perfect picture preview behavior (#16985 by @luckyCao)
- Fix shield the page when preview big image (#16796 by @luckyCao)
- Drawer
- Bugfix drawer-append-to-body-not-working (#16953 by @JeremyWuuuuu)
- Select
- Fix tag show value or empty issue (17199 by @luckyCao)
- Scrollbar
- Fix FireFox scroll bar width (#18091 by @iamkun)
#### Optimization
- I18n
- Update sv-SE.js (#17926 by @FOLLGAD)
- Update avatar component fr doc (#17762 by @blombard)
- Docs
- Fix time-select typo (#17250 by @wacky6)
- Fix Drawer attribute accepted value typo in es (#17122 by @haoranyu)
- Update Spanish changelog 2.12.0 (#17364 by @Gonzalo2310)
- Fix Changelog typo (#17874 by @renlixin)
- Fix Loading demo (#17862 by @MBearo)
- Add input event in input Events Table (#18061 by @zhouxinyong)
- Delete Input repeat change event (#18085 by @zhouxinyong)
### 2.12.0
*2019-08-29*
#### New features
- Popover
- Add close-delay prop (#16671 by @LachlanStuart)
- Theme
- Add Chrome Extension: Element Theme Extension (#16686 by @iamkun)
- Icon
- Add font-display to @font-face declaration (#16805 by @iamfaizalandyka)
#### Bug fixes
- Carousel
- Fix onChange emit value (#16705 by @iamkun)
- Notification
- Fix modifying incoming option object (#16704 by @iamkun)
- DatePicker
- Add className for picker option (#16632 by @iamkun)
- DateTimePicker
- Fix time-spinner not scroll to right position (#16854 by @jesse-li)
- Table
- Prevent click handler after drag (#16850 by @ziyoung)
- Fix chrome crash when set thead css display to none (#16956 by @luckyCao)
- Fix wrong empty block height (#16861 by @ziyoung)
- Not throw error when calling toggleExpansion (#16304 by @yyjjqq94)
- Not trigger sort-change event when mounted (#17113 by @a631807682)
- Fix setCurrentRow unable to clear highlight row (#16879 by @ziyoung)
- Fix expand-row-keys not work when data is loaded asynchronously (#16899 by @ziyoung)
- set toggleAllSelection as instance property (#17137 by @ziyoung)
- Tree
- Fix distance between label and checkbox (#16799 by @Hazlank)
- Tabs
- Fix incorrect TabItem's position (#16520 by @victorting)
- Fix activated tab is out of visual range bug (#17033 by @nullptru)
- Calendar
- Fix weekdays i18n issue (#16772 by @ubitoffee)
- fix locale error by (#17208 by @iamkun)
- Cascader
- Fix CascaderPanel display error (#16716 by @zhangHongEn)
- Fix disable status and close button issue (#16224 by @yyjjqq94)
- Input
- Fix Korean composition event (#15069 by @MoonHyuk)
- Fix click event of clear button not trigger when using v-loading (#16576 by @a631807682)
- Select
- Not toggle dropdown when filtering (#17205 by @luckyCao)
- Transfer
- Fix style error (#17206 by @iamkun)
- Dialog
- update sass var (#16365 by @haoranyu)
- RadioGroup
- Not produce invalid HTML in table if "is" attribute is specify (#17070 by @nullptru)
- Divider
- Support custom classes (#17078 by @island205)
#### Optimization
- Checkbox
- Improve screen reader experience (#16575 by @tylertrotter)
- Docs
- Update changelog (#16773 by @SimonaliaChen)
- Update contributing guide (#14800 by @sinchang)
- Fix typo in Drawer docs (#16848 by @winkay)
- Update custom theme (#16983 by @iamkun)
- Add Esperanto translation (#16955 by @maxkoryukov)
- Update input-number document about change event (#16316 by @luckyCao)
- Update spanish doc 2.11.1 (#16961 by @Gonzalo2310)
- I18n
- Remove translation of 'year' in catalan language as in the other languages (#14722 by @oscaralbareda)
- Update spanish changelog 2.10.0 and 2.10.1 (#16548 by @Gonzalo2310)
- Update ar.js (#16653 by @l3op)
- Test
- Correct spelling error (#16672 by @boomler)
- Refactor unit test to use data-uri (#16847 by @a631807682)
- Types
- Fix httprequest type (#16633 by @luckyCao)
### 2.11.1
*2019-07-26*
@@ -9,7 +207,7 @@
- Image
- Fix Image component SSR compatibility (#16737 by @luckyCao)
- Chore
- Update dart-sass compatibility by @LewisChennnnn)
- Update dart-sass compatibility (#16744 by @LewisChennnnn)
### 2.11.0
@@ -31,10 +229,11 @@
- Fix split-button caret default color (#15931 by @JuniorTour)
- Cascader
- Fix level 1 children is empty update problem (#16399 by @luckyCao)
- Display correct header when range is specified (#16354 by @ziyoung)
- Add sets default values when lazy is true (#16420 by @luckyCao)
- Fix display errors (#15935 by @junyiz)
- Fix display errors when node value is duplicate (#15935 by @junyiz)
- Expose getCheckedNodes and fix options change bug (#16709 by @SimonaliaChen)
- Calendar
- Display correct header when range is specified (#16354 by @ziyoung)
- Submenu
- Fix prop append-to-body (#16289 by @a631807682)
- Table

View File

@@ -1,5 +1,202 @@
## 更新日志
### 2.13.2
*2020-05-18*
#### Bug 修复
- Autocomplete
- 修复 'change event' 错误 (#19200 by @sxzz)
- Image
- 更新错误状态 (#19194 by @lhx6538665)
#### Optimization
- I18n
- 更新 ru-RU popconfirm 翻译 (#19220 by @Opppex)
- 更新 vi 翻译 (#19244 by @quangln2810)
- 更新 Catalan 和 Spanish 翻译 (#19296 by @Ismaaa)
- 更新 Indonesia 翻译 (#19320) by @therour)
- 更新 Brazilian Portuguese 翻译 (#19374 by @diegomengarda)
### 2.13.1
*2020-04-13*
#### 新特性
- Autocomplete
- 添加 change 事件 (#17913 by @sxzz)
#### Bug 修复
- Autocomplete
- 修复类型为 textarea 时建议错误问题 (#18478 by @Roojay)
- Carousel
- 修复 console.warn 文案拼写错误 (#18264 by @IceFox)
- Image
- 修复当 preview-src-list 属性不包含 src 时图片预览大图展示为空的问题 (#18975) (#19130 by @luckyCao)
- 修复第二次图片预览时快捷键失效问题 (#18983) (#19156 by @luckyCao)
- 修复 preview-src-list 为空时点击图片会给 body 添加 overflow: scroll 的问题 (#18967 by @inooNgt)
- Transfer
- 修复和 Form 组件一起使用时错误的行高问题 (#18917 by @Hanx)
- InputNumber
- 正确计算 inputNumberDisabled (#18439 by @ashuser-pendo)
- Chore
- 更新首页文案 (#19155 by @iamkun)
- Doc
- 更新 Popconfirm 文档 (#18324 by @iamkun)
- 修复 step-strictly 文档拼写问题 (#18705 by @dream2023)
- 修复 Steps 组件文档问题 (#17555 by @haoranyu)
### 2.13.0
*2019-11-26*
#### 新特性
- Popconfirm
- 新增 Popconfirm 组件 (#17548 by @iamkun)
#### Bug fixes
- BackTop
- 平滑过渡动画 (by @lon)
- DatePicker
- 修复选择最小日期的 bug (#17191 by @smk0621)
- Select
- 修复测试用例 (by @msidolphin)
- Tree
- 增加 font-size 样式 (#17094 by @spengjie)
- Table
- 头部可自定义 (#17291 by @ziyoung)
- 更新头部样式 (#17284 by @ziyoung)
- 修复时候 filter 之后高度问题 (#17348 by @ziyoung)
- 修复 row-style 失效的 bug (#17002 by @a631807682)
- 修复头部消失的 bug (#17341 by @ziyoung)
- Calendar
- 导入 el-button 和 el-button-group (#17376 by @masongzhi)
- MessageBox
- 修复图表位置 (#17410 by @nullptru)
- TimePicker
- 滚动后设置正确的位置 (#16868 by @mattheyan)
- Message
- 修复关闭的 offsetHeight#17564 (#17852 by @gzwgq222)
- Form
- ValidateField 的回调应为可选项 (#17314 by @CarterLi)
- Cascader
- 修复 TypeScript 3.7 的兼容问题 (#17881 by @CarterLi)
- Menu
- 修复 NavigationDuplicated 在 vue-router@^3.1.0 的报错 (#17269 by @iamkun)
- Dropdown
- 更新类型文件 (#17550 by @iamkun)
- Progress
- 增加 strokeLinecap 属性 (#17552 by @iamkun)
- InfiniteScroll
- 跳过不可见元素触发 (#17553 by @iamkun)
- Image
- 优化用户体验 (#16985 by @luckyCao)
- 优化大图片展示问题 (#16796 by @luckyCao)
- Drawer
- 修复 drawer-append-to-body 失效的 bug (#16953 by @JeremyWuuuuu)
- Select
- 修复空 tag 的 bug (17199 by @luckyCao)
- Scrollbar
- 修复 FireFox 双滚动条的 bug (#18091 by @iamkun)
#### Optimization
- I18n
- 更新 sv-SE.js (#17926 by @FOLLGAD)
- 更新 avatar 组件法语文档 (#17762 by @blombard)
- Docs
- 修复 time-select 文档错误 (#17250 by @wacky6)
- 修复 Drawer 文档错误 (#17122 by @haoranyu)
- 更新 Spanish changelog 2.12.0 (#17364 by @Gonzalo2310)
- 修复 Changelog 文档错误 (#17874 by @renlixin)
- 修复 Loading 示例 (#17862 by @MBearo)
- 增加 input event 相关文档 (#18061 by @zhouxinyong)
- 移除 Input repeat change event 相关文档 (#18085 by @zhouxinyong)
### 2.12.0
*2019-08-29*
#### 新特性
- Popover
- 添加 close-delay 属性 (#16671 by @LachlanStuart)
- Theme
- 增加 Chrome 插件: Element Theme Extension (#16686 by @iamkun)
- Icon
- 支持 font-display 属性的配置 (#16805 by @iamfaizalandyka)
#### Bug fixes
- Table
- 在表头拖拽后阻止 click 事件的触发 (#16850 by @ziyoung)
- 修复表头 display 为 none 造成浏览器崩溃的问题 (#16956 by @luckyCao)
- 修复没有数据的时表格高度问题 (#16861 by @ziyoung)
- 调用 toggleExpansion 不再抛出异常 (#16304 by @yyjjqq94)
- 挂载时不再触发 sort-change 事件 (#17113 by @a631807682)
- 修复 setCurrentRow 方法不生效的问题 (#16879 by @ziyoung)
- 修复当数据异步加载时expand-row-keys 不生效的问题 (#16899 by @ziyoung)
- 把 toggleAllSelection 设置为 Table 示例的属性 (#17137 by @ziyoung)
- Tree
- 修复文字与复选框之间的距离 (#16799 by @Hazlank)
- Tabs
- 修复 TabItem 位置不正确的问题 (#16520 by @victorting)
- 修复高亮的 Tab 不在可视区的问题 (#17033 by @nullptru)
- Calendar
- 修复日期的显示问题 (#16772 by @ubitoffee)
- 修复在夏令时的显示问题 (#17208 by @iamkun)
- Cascader
- 修复 CascaderPanel 的显示问题 (#16716 by @zhangHongEn)
- 禁用状态下,关闭按钮不显示 (#16224 by @yyjjqq94)
- Input
- 修复韩语输入问题 (#15069 by @MoonHyuk)
- 触发清除按钮的点击事件 (#16576 by @a631807682)
- Select
- 过滤时,不收起下拉框 (#17205 by @luckyCao)
- Transfer
- 修复样式问题 (#17206 by @iamkun)
- Dialog
- 添加 SCSS 变量 (#16365 by @haoranyu)
- RadioGroup
- is 指定时,不产生非法的 HTML 片段 (#17070 by @nullptru)
- Divider
- 支持自定义类 (#17078 by @island205)
- Carousel
- 修复 change 的触发时机 (#16705 by @iamkun)
- Notification
- 不修改传入的 option (#16704 by @iamkun)
- DatePicker
- 给 picker-option 添加 className 属性 (#16632 by @iamkun)
- DateTimePicker
- 修复时间选择滚动条的问题 (#16854 by @jesse-li)
#### Optimization
- Checkbox
- 提高可访问性 (#16575 by @tylertrotter)
- Docs
- 更新 changelog (#16773 by @SimonaliaChen)
- 更新贡献指南 (#14800 by @sinchang)
- 修复 Drawer 文档中的拼写错误 (#16848 by @winkay)
- 更新自定义主题 (#16983 by @iamkun)
- 新增 Esperanto 翻译 (#16955 by @maxkoryukov)
- 更新 input-number 文档 (#16316 by @luckyCao)
- 更新 Spanish 文档 (#16961 #16548 by @Gonzalo2310)
- I18n
- 更新加泰罗尼亚语翻译 (#14722 by @oscaralbareda)
- 更新阿拉伯语翻译 (#16653 by @l3op)
- Test
- 修复拼写错误 (#16672 by @boomler)
- 优化 image 的单元测试 (#16847 by @a631807682)
- Types
- 修复 httprequest 的类型 (#16633 by @luckyCao)
### 2.11.1
*2019-07-26*
@@ -9,7 +206,7 @@
- Image
- 修复 Image 组件 SSR 兼容性 (#16737 by @luckyCao)
- Chore
- 更新 dart-sass 的兼容性 by @LewisChennnnn)
- 更新 dart-sass 的兼容性 (#16744 by @LewisChennnnn)
### 2.11.0
@@ -31,10 +228,11 @@
- 更新 split-button 默认颜色 (#15931 by @JuniorTour)
- Cascader
- 修复一级菜单更新问题 (#16399 by @luckyCao)
- 更新显示正确的 header 的逻辑 (#16354 by @ziyoung)
- 懒加载时设默认值 (#16420 by @luckyCao)
- 修复显示问题 (#15935 by @junyiz)
- 对外暴露 getCheckedNodes 和修复 option 问题 (#16709 by @SimonaliaChen)
- 修复当节点值重复时的显示问题 (#15935 by @junyiz)
- 对外暴露 getCheckedNodes 和修复 options 改变会影响选中的问题 (#16709 by @SimonaliaChen)
- Calendar
- 更新显示正确的 header 的逻辑 (#16354 by @ziyoung)
- Submenu
- 修复 append-to-body 问题 (#16289 by @a631807682)
- Table

View File

@@ -233,11 +233,11 @@ Become a sponsor and get your logo on our README on Github with a link to your s
<a href="https://opencollective.com/element/sponsor/28/website" target="_blank"><img src="https://opencollective.com/element/sponsor/28/avatar.svg"></a>
<a href="https://opencollective.com/element/sponsor/29/website" target="_blank"><img src="https://opencollective.com/element/sponsor/29/avatar.svg"></a>
## Join Discusion Group
## Join Discussion Group
Scan the QR code using [Dingtalk App](https://www.dingtalk.com/) to join in discusion group :
Scan the QR code using [Dingtalk App](https://www.dingtalk.com/) to join in discussion group :
<img alt="Join Discusion Group" src="https://user-images.githubusercontent.com/17680888/60150281-95183f80-980a-11e9-88a8-d324c5e8d83b.png" width="300">
<img alt="Join Discusion Group" src="https://user-images.githubusercontent.com/17680888/66537329-9a4b9100-eb52-11e9-9d99-65469cfdae58.jpeg" width="300">
## LICENSE

View File

@@ -1,6 +1,6 @@
var fs = require('fs');
var path = require('path');
var version = process.env.VERSION || require('../../package.json').version;
var content = { '1.4.13': '1.4', '2.0.11': '2.0', '2.1.0': '2.1', '2.2.2': '2.2', '2.3.9': '2.3', '2.4.11': '2.4', '2.5.4': '2.5', '2.6.3': '2.6', '2.7.2': '2.7', '2.8.2': '2.8', '2.9.2': '2.9', '2.10.1': '2.10' };
if (!content[version]) content[version] = '2.11';
var content = { '1.4.13': '1.4', '2.0.11': '2.0', '2.1.0': '2.1', '2.2.2': '2.2', '2.3.9': '2.3', '2.4.11': '2.4', '2.5.4': '2.5', '2.6.3': '2.6', '2.7.2': '2.7', '2.8.2': '2.8', '2.9.2': '2.9', '2.10.1': '2.10', '2.11.1': '2.11', '2.12.0': '2.12' };
if (!content[version]) content[version] = '2.13';
fs.writeFileSync(path.resolve(__dirname, '../../examples/versions.json'), JSON.stringify(content));

View File

@@ -40,7 +40,7 @@ if [ "$TRAVIS_TAG" ]; then
# build sub folder
echo $TRAVIS_TAG
SUB_FOLDER='2.11'
SUB_FOLDER='2.13'
mkdir $SUB_FOLDER
rm -rf *.js *.css *.map static
rm -rf $SUB_FOLDER/**

View File

@@ -6,7 +6,7 @@ cd temp_web
git clone --depth 1 -b gh-pages --single-branch https://github.com/ElemeFE/element.git && cd element
# build sub folder
SUB_FOLDER='2.11'
SUB_FOLDER='2.13'
mkdir -p $SUB_FOLDER
rm -rf *.js *.css *.map static
rm -rf $SUB_FOLDER/**

View File

@@ -15,6 +15,9 @@ then
# build
VERSION=$VERSION npm run dist
# ssr test
node test/ssr/require.test.js
# publish theme
echo "Releasing theme-chalk $VERSION ..."
cd packages/theme-chalk

View File

@@ -16,8 +16,7 @@ const isPlay = !!process.env.PLAY_ENV;
const webpackConfig = {
mode: process.env.NODE_ENV,
entry: isProd ? {
docs: './examples/entry.js',
'element-ui': './src/index.js'
docs: './examples/entry.js'
} : (isPlay ? './examples/play.js' : './examples/entry.js'),
output: {
path: path.resolve(process.cwd(), './examples/element-ui/'),
@@ -148,6 +147,16 @@ if (isProd) {
}),
new OptimizeCSSAssetsPlugin({})
);
// https://webpack.js.org/configuration/optimization/#optimizationsplitchunks
webpackConfig.optimization.splitChunks = {
cacheGroups: {
vendor: {
test: /\/src\//,
name: 'element-ui',
chunks: 'all'
}
}
};
webpackConfig.devtool = false;
}

View File

@@ -0,0 +1,33 @@
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const demoConfig = require('./webpack.demo');
const webpack = require('webpack');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
demoConfig.entry = {
background: path.join(process.cwd(), './examples/extension/src/background'),
entry: path.join(process.cwd(), './examples/extension/src/entry')
};
demoConfig.output = {
path: path.join(process.cwd(), './examples/extension/dist'),
filename: '[name].js'
};
demoConfig.plugins = [
new CopyWebpackPlugin([
{ from: 'examples/extension/src/manifest.json' },
{ from: 'examples/extension/src/icon.png' }
]),
new VueLoaderPlugin(),
new ProgressBarPlugin(),
new webpack.LoaderOptionsPlugin({
vue: {
compilerOptions: {
preserveWhitespace: false
}
}
}),
new webpack.HotModuleReplacementPlugin()
];
demoConfig.module.rules.find(a => a.loader === 'url-loader').query = {};
module.exports = demoConfig;

View File

@@ -79,5 +79,6 @@
"page-header": "./packages/page-header/index.js",
"cascader-panel": "./packages/cascader-panel/index.js",
"avatar": "./packages/avatar/index.js",
"drawer": "./packages/drawer/index.js"
"drawer": "./packages/drawer/index.js",
"popconfirm": "./packages/popconfirm/index.js"
}

View File

@@ -1,7 +1,7 @@
<template>
<section class="config" :key="displayName">
<div class="config-label">
<el-tooltip :content="displayName">
<el-tooltip :content="displayName" placement="top">
<span>{{displayKeyName}}</span>
</el-tooltip>
</div>

View File

@@ -1,7 +1,7 @@
<template>
<section class="config" :key="displayName">
<div class="config-label">
<el-tooltip :content="displayName">
<el-tooltip :content="displayName" placement="top">
<span>{{displayKeyName}}</span>
</el-tooltip>
<el-button

View File

@@ -1,7 +1,7 @@
<template>
<section class="config" :key="displayName">
<div class="config-label">
<el-tooltip :content="displayName">
<el-tooltip :content="displayName" placement="top">
<span>{{displayKeyName}}</span>
</el-tooltip>
</div>

View File

@@ -1,7 +1,7 @@
<template>
<section class="config" :key="displayName">
<div class="config-label">
<el-tooltip :content="displayName">
<el-tooltip :content="displayName" placement="top">
<span>{{displayKeyName}}</span>
</el-tooltip>
</div>

View File

@@ -1,7 +1,7 @@
<template>
<section class="config" :key="displayName">
<div class="config-label">
<el-tooltip :content="displayName">
<el-tooltip :content="displayName" placement="top">
<span>{{displayKeyName}}</span>
</el-tooltip>
</div>

View File

@@ -1,7 +1,7 @@
<template>
<section class="config" :key="displayName">
<div class="config-label">
<el-tooltip :content="displayName">
<el-tooltip :content="displayName" placement="top">
<span>{{displayKeyName}}</span>
</el-tooltip>
</div>

View File

@@ -1,7 +1,7 @@
<template>
<section class="config" :key="displayName">
<div class="config-label">
<el-tooltip :content="displayName">
<el-tooltip :content="displayName" placement="top">
<span>{{displayKeyName}}</span>
</el-tooltip>
</div>

View File

@@ -102,7 +102,7 @@ export default {
defaultConfig = res;
})
.catch(err => {
this.onError(err);
this.onError && this.onError(err);
})
.then(() => {
setTimeout(() => {

View File

@@ -1,5 +1,5 @@
<template>
<div class="main" ref="mainPanel">
<div class="editor-main" ref="mainPanel">
<!-- <span>{{configName}}</span> -->
<div v-for="(config, key) in configByOrder" :key="key">
<span
@@ -22,7 +22,7 @@
</template>
<style>
.main {
.editor-main {
padding: 0 18px 15px;
overflow-y: auto;
}

View File

@@ -260,7 +260,8 @@ export default {
base: {
type: String,
default: ''
}
},
from: String
},
data() {
return {
@@ -308,6 +309,10 @@ export default {
switch (e) {
case 'preview':
case 'edit':
if (this.from) {
this.$emit('action', e, this.config);
return;
}
const { name, theme } = this.config;
savePreviewToLocal({
type: this.type,

View File

@@ -1,10 +1,12 @@
## Custom theme
Element uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea. We provide four ways to change the style variables.
### Online Theme Roller
### Theme Roller
Use [Online Theme Roller](./#/en-US/theme) to customize all Design Tokens of global variables and componentsand preview the new theme in real-time.and it can generate a complete style package based on the new theme for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' part of this section).
<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 70%;margin: 30px auto 0;display: block;">
Also, use [Theme Roller Chrome Extension](https://chrome.google.com/webstore/detail/element-theme-roller/lifkjlojflekabbmlddfccdkphlelmim)to customize theme and preview in real-time on any website developed by Element.
<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 100%;margin: 30px auto 0;display: block;">
### Changing theme color
If you just want to change the theme color of Element, the [theme preview website](https://elementui.github.io/theme-chalk-preview/#/en-US) is recommended. The theme color of Element is bright and friendly blue. By changing it, you can make Element more visually connected to specific projects.

View File

@@ -462,6 +462,7 @@ When picking a date range, you can assign the time part for start date and end d
|---------- |-------------- |---------- |-------------------------------- |-------- |
| shortcuts | a { text, onClick } object array to set shortcut options, check the table below | object[] | — | — |
| disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
| cellClassName | set custom className | Function(Date) | — | — |
| firstDayOfWeek | first day of week | Number | 1 to 7 | 7 |
| onPick | a callback that triggers when the selected date is changed. Only for `daterange` and `datetimerange`. | Function({ maxDate, minDate }) | - | - |

View File

@@ -219,6 +219,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
|---------- |-------------- |---------- |-------------------------------- |-------- |
| shortcuts | a { text, onClick } object array to set shortcut options, check the table below | object[] | — | — |
| disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
| cellClassName | set custom className | Function(Date) | — | — |
| firstDayOfWeek | first day of week | Number | 1 to 7 | 7 |
### shortcuts

View File

@@ -50,6 +50,36 @@ Callout a temporary drawer, from multiple direction
```
:::
### No Title
When you no longer need a title, you can remove title from drawer.
:::demo Set the `withHeader` attribute to **false**, you can remove the title from drawer, thus your drawer can have more space on screen. If you want to be accessible, make sure to set the `title` attribute.
```html
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
open
</el-button>
<el-drawer
title="I am the title"
:visible.sync="drawer"
:with-header="false">
<span>Hi there!</span>
</el-drawer>
<script>
export default {
data() {
return {
drawer: false,
};
}
};
</script>
```
:::
### Customization Content
Like `Dialog`, `Drawer` can do many diverse interaction as you wanted.
@@ -92,7 +122,7 @@ Like `Dialog`, `Drawer` can do many diverse interaction as you wanted.
</el-form-item>
</el-form>
<div class="demo-drawer__footer">
<el-button @click="dialog = false">Cancel</el-button>
<el-button @click="cancelForm">Cancel</el-button>
<el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? 'Submitting ...' : 'Submit' }}</el-button>
</div>
</div>
@@ -132,20 +162,32 @@ export default {
resource: '',
desc: ''
},
formLabelWidth: '80px'
formLabelWidth: '80px',
timer: null,
};
},
methods: {
handleClose(done) {
if (this.loading) {
return;
}
this.$confirm('Do you want to submit?')
.then(_ => {
this.loading = true;
setTimeout(() => {
this.loading = false;
this.timer = setTimeout(() => {
done();
// animation takes time
setTimeout(() => {
this.loading = false;
}, 400);
}, 2000);
})
.catch(_ => {});
},
cancelForm() {
this.loading = false;
this.dialog = false;
clearTimeout(this.timer);
}
}
}
@@ -232,12 +274,13 @@ If the variable bound to `visible` is managed in Vuex store, the `.sync` can not
| destroy-on-close | Indicates whether children should be destroyed after Drawer closed | boolean | - | false |
| modal | Should show shadowing layer | boolean | — | true |
| modal-append-to-body | Indicates should shadowing layer be insert into DocumentBody element | boolean | — | true |
| direction | Drawer's opening direction | Direction | rtl / ltr / ttb / tbb | rtl |
| direction | Drawer's opening direction | Direction | rtl / ltr / ttb / btt | rtl |
| show-close | Should show close button at the top right of Drawer | boolean | — | true |
| size | Drawer's size, if Drawer is horizontal mode, it effects the width property, otherwise it effects the height property, when size is `number` type, it describes the size by unit of pixels; when size is `string` type, it should be used with `x%` notation, other wise it will be interpreted to pixel unit | number / string | - | '30%' |
| title | Drawer's title, can also be set by named slot, detailed descriptions can be found in the slot form | string | — | — |
| visible | Should Drawer be displayed, also support the `.sync` notation | boolean | — | false |
| wrapperClosable | Indicates whether user can close Drawer by clicking the shadowing layer. | boolean | - | true |
| withHeader | Flag that controls the header section's existance, default to true, when withHeader set to false, both `title attribute` and `title slot` won't work | boolean | - | true |
### Drawer Slot

View File

@@ -220,6 +220,7 @@ Currently Element ships with the following languages:
<li>Kyrgyz (kg)</li>
<li>Armenian (hy)</li>
<li>Croatian (hr)</li>
<li>Esperanto (eo)</li>
</ul>
If your target language is not included, you are more than welcome to contribute: just add another language config [here](https://github.com/ElemeFE/element/tree/dev/src/locale/lang) and create a pull request.

View File

@@ -174,7 +174,7 @@ Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
|min | the minimum allowed value | number | — | `-Infinity` |
|max | the maximum allowed value | number | — | `Infinity` |
|step | incremental step | number | — | 1 |
|step-strictly | whether input value can only be multiple of step | number | — | false |
|step-strictly | whether input value can only be multiple of step | boolean | — | false |
|precision | precision of input value | number | — | — |
|size | size of the component | string | large/small| — |
|disabled| whether the component is disabled | boolean | — | false |
@@ -188,7 +188,7 @@ Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
| Event Name | Description | Parameters |
|----| ---- | -----|
|change | triggers when the value changes | value after change |
|change | triggers when the value changes | currentValue, oldValue |
| blur | triggers when Input blurs | (event: Event) |
| focus | triggers when Input focuses | (event: Event) |

View File

@@ -604,7 +604,8 @@ export default {
|----| ----| ----|
| blur | triggers when Input blurs | (event: Event) |
| focus | triggers when Input focuses | (event: Event) |
| change | triggers when the icon inside Input value change | (value: string \| number) |
| change | triggers only when the input box loses focus or the user presses Enter | (value: string \| number) |
| input | triggers when the Input value change | (value: string \| number) |
| clear | triggers when the Input is cleared by clicking the clear button | — |
### Input Methods
@@ -658,6 +659,7 @@ Attribute | Description | Type | Options | Default
| Event Name | Description | Parameters |
|----| ----| ----|
|select | triggers when a suggestion is clicked | suggestion being clicked |
| change | triggers when the icon inside Input value change | (value: string \| number) |
### Autocomplete Methods

View File

@@ -128,13 +128,13 @@ Show a full screen animation while loading data.
<template>
<el-button
type="primary"
@click="openFullScreen"
@click="openFullScreen1"
v-loading.fullscreen.lock="fullscreenLoading">
As a directive
</el-button>
<el-button
type="primary"
@click="openFullScreen">
@click="openFullScreen2">
As a service
</el-button>
</template>
@@ -147,13 +147,13 @@ Show a full screen animation while loading data.
}
},
methods: {
openFullScreen() {
openFullScreen1() {
this.fullscreenLoading = true;
setTimeout(() => {
this.fullscreenLoading = false;
}, 2000);
},
openFullScreen() {
openFullScreen2() {
const loading = this.$loading({
lock: true,
text: 'Loading',

View File

@@ -0,0 +1,60 @@
## Popconfirm
A simple confirmation dialog of an element click action.
### Basic usage
Popconfirm is similar to Popover. So for some duplicated attributes, please refer to the documentation of Popover.
:::demo Only `title` attribute is avaliable in Popconfirm, `content` will be ignored.
```html
<template>
<el-popconfirm
title="Are you sure to delete this?"
>
<el-button slot="reference">Delete</el-button>
</el-popconfirm>
</template>
````
:::
### Customise
You can customise Popconfirm like:
:::demo
```html
<template>
<el-popconfirm
confirmButtonText='OK'
cancelButtonText='No, Thanks'
icon="el-icon-info"
iconColor="red"
title="Are you sure to delete this?"
>
<el-button slot="reference">Delete</el-button>
</el-popconfirm>
</template>
```
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| title | Title | String | — | — |
| confirmButtonText | Confirm button text | String | — | — |
| cancelButtonText | Cancel button text | String | — | — |
| confirmButtonType | Confirm button type | String | — | Primary |
| cancelButtonType | Cancel button type | String | — | Text |
| icon | Icon | String | — | el-icon-question |
| iconColor | Icon color | String | — | #f90 |
| hideIcon | is hide Icon | Boolean | — | false |
### Slot
| Name | Description |
|--- | ---|
| reference | HTML element that triggers Popconfirm |
### Events
| Event Name | Description | Parameters |
|---------|--------|---------|
| onConfirm | triggers when click confirm button | — |
| onCancel | triggers when click cancel button | — |

View File

@@ -151,7 +151,8 @@ Of course, you can nest other operations. It's more light-weight than using a di
| visible-arrow | whether a tooltip arrow is displayed or not. For more info, please refer to [Vue-popper](https://github.com/element-component/vue-popper) | boolean | — | true |
| popper-options | parameters for [popper.js](https://popper.js.org/documentation.html) | object | please refer to [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| popper-class | custom class name for popover | string | — | — |
| open-delay | delay of appearance when `trigger` is hover, in milliseconds | number | — | — |
| open-delay | delay before appearing when `trigger` is hover, in milliseconds | number | — | — |
| close-delay | delay before disappearing when `trigger` is hover, in milliseconds | number | — | 200 |
| tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Popover | number | — | 0 |
### Slot

View File

@@ -170,3 +170,4 @@ You also can specify `type` attribute to `dashboard` to use dashboard progress b
| color | background color of progress bar. Overrides `status` prop | string/function/array | — | '' |
| width | the canvas width of circle progress bar | number | — | 126 |
| show-text | whether to show percentage | boolean | — | true |
| stroke-linecap | circle/dashboard type shape at the end path | string | butt/round/square | round |

View File

@@ -453,7 +453,7 @@ Enter keywords and search data from server.
},
mounted() {
this.list = this.states.map(item => {
return { value: item, label: item };
return { value: `value:${item}`, label: `label:${item}` };
});
},
methods: {

View File

@@ -6,7 +6,7 @@ Guide the user to complete tasks in accordance with the process. Its steps can b
Simple step bar.
:::demo Set `active` attribute with `Number` type, which indicates the index of steps and starts from 0. You can set `space` attribute when the width of the step needs to be fixed which accepts `Boolean` type. The unit of the `space` attribute is `px`. If not set, it is responsive. Setting the `finish-status` attribute can change the state of the steps that have been completed.
:::demo Set `active` attribute with `Number` type, which indicates the index of steps and starts from 0. You can set `space` attribute when the width of the step needs to be fixed which accepts `Number` type. The unit of the `space` attribute is `px`. If not set, it is responsive. Setting the `finish-status` attribute can change the state of the steps that have been completed.
```html
<el-steps :active="active" finish-status="success">
@@ -50,7 +50,7 @@ Shows the status of the step for each step.
```
:::
### Center
### Center
Title and desription can be centered.

View File

@@ -1,10 +1,10 @@
## Avatar avatar
## Avatar
Avatars can be used to represent people or objects. It supports images, Icons, or characters.
Los avatares pueden utilizarse para representar personas u objetos. Soporta imágenes, iconos o caracteres.
### Basic
### Básico
use `shape` and `size` prop to set avatar's shape and size
Use los props `shape` y `size` para establecer la forma y el tamaño del avatar
:::demo
```html
@@ -45,9 +45,9 @@ use `shape` and `size` prop to set avatar's shape and size
```
:::
### Types
### Tipos
It supports images, Icons, or characters
Soporta imágenes, iconos o caracteres.
:::demo
```html
@@ -67,9 +67,9 @@ It supports images, Icons, or characters
```
:::
### Fallback when image load error
### Fallback cuando se produce un error de carga de imagen
fallback when image load error
Fallback cuando se produce un error de carga de imagen
:::demo
```html
@@ -93,9 +93,9 @@ fallback when image load error
```
:::
### How the image fit its container
### Cómo encaja la imagen en su contenedor
Set how the image fit its container for an image avatar, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
Establezca cómo la imagen se ajusta a su contenedor para un avatar de imagen, igual que [object-fit](https://developer.mozilla.org/es/docs/Web/CSS/object-fit).
:::demo
```html
@@ -121,25 +121,26 @@ Set how the image fit its container for an image avatar, same as [object-fit](ht
```
:::
### Attributes
### Atributos
| Attribute | Description | Type | Accepted Values | Default |
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| ----------------- | -------------------------------- | --------------- | ------ | ------ |
| icon | set representation type to Icon, more info on Icon Component | string | | |
| size | set avatar size | number/string | number / large / medium / small | large |
| shape | set avatar shape | string | circle / square | circle |
| src | the address of the image for an image avatar | string | | |
| srcSet | A list of one or more strings separated by commas indicating a set of possible image sources for the user agent to use | string | | |
| alt | This attribute defines an alternative text description of the image | string | | |
| fit | set how the image fit its container for an image avatar | string | fill / contain / cover / none / scale-down | cover |
| icon | establece el tipo de representación a Icono, más información en Componente Icon | string | | |
| size | Establece el tamaño del avatar | number/string | number / large / medium / small | large |
| shape | establece la forma del avatar | string | circle / square | circle |
| src | la dirección de la imagen para un avatar de imagen | string | | |
| srcSet | Una lista de una o más cadenas separadas por comas que indica un conjunto de posibles fuentes de imágenes para que el agente de usuario las utilice. | string | | |
| alt | Este atributo define una descripción de texto alternativo de la imagen | string | | |
| fit | establece cómo encaja la imagen en su contenedor para un avatar de imagen | string | fill / contain / cover / none / scale-down | cover |
### Events
### Eventos
| Event Name | Description | Parameters |
| Nombre | Descripción | Parámetros |
| ------ | ------------------ | -------- |
| error | handler when img load error, return false to prevent default fallback behavior |(e: Event) |
| error | cuando se produce un error de carga de img, devuelve false para evitar el comportamiento de repliegue predeterminado |(e: Event) |
### Slot
| Slot Name | Description |
| default | customize avatar content |
| Nombre | Descripción |
| default | personalice el contenido del avatar |

View File

@@ -1,10 +1,12 @@
## Tema personalizado
Element utiliza la metodología BEM en CSS con la finalidad de que puedas sobrescribir los estilos fácilmente. Pero, si necesita remplazar estilos a gran escala, por ejemplo, cambiar el color del tema de azul a naranja o verde, quizás reemplazarlos uno a uno no sea lo más adecuado, para ello hay 4 maneras de modificar los estilos.
### Online Theme Roller
### Theme Roller
Use [Online Theme Roller](./#/es/theme) to customize all Design Tokens of global variables and componentsand preview the new theme in real-time.and it can generate a complete style package based on the new theme for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' or part of this section).
<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 70%;margin: 30px auto 0;display: block;">
Also, use [Theme Roller Chrome Extension](https://chrome.google.com/webstore/detail/element-theme-roller/lifkjlojflekabbmlddfccdkphlelmim)to customize theme and preview in real-time on any website developed by Element.
<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 100%;margin: 30px auto 0;display: block;">
### Cambiando el color del tema
Si lo que se busca es cambiar el color del tema de Element, se recomienda utilizar el [sitio de visualización de temas](https://elementui.github.io/theme-chalk-preview/#/en-US). Element utiliza un color azul brillante y amigable como tema principal. Al cambiarlo, puede hacer que Element este más conectado visualmente a proyectos específicos.

View File

@@ -462,6 +462,7 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in
| -------------- | ------------------------------------------------------------ | ------------------------------ | ----------------- | ----------- |
| shortcuts | { text, onClick } un array de objetos para establecer opciones de acceso directo, verifique la tabla siguiente | object[] | — | — |
| disabledDate | una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un valor booleano | function | — | — |
| cellClassName | establecer nombre de clase personalizado | Function(Date) | — | — |
| firstDayOfWeek | primer día de la semana | Number | 1 to 7 | 7 |
| onPick | una función que se dispara cuando se cambia la fecha seleccionada. Solamente para `daterange` y `datetimerange`. | Function({ maxDate, minDate }) | - | - |

View File

@@ -221,6 +221,7 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
| -------------- | ---------------------------------------- | -------- | ----------------- | ----------- |
| shortcuts | un array de objetos { text, onClick } para establecer las opciones de acceso directo, verifique la tabla debajo | objeto[] | — | — |
| disabledDate | una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un booleano | función | — | — |
| cellClassName | establecer nombre de clase personalizado | Function(Date) | — | — |
| firstDayOfWeek | primera día de semana | Número | 1 to 7 | 7 |
### Accesos directos

View File

@@ -229,7 +229,7 @@ Si la variable ligada a `visible` se gestiona en el Vuex store, el `.sync` no pu
| show-close | si mostrar un botón de cerrar | boolean | — | true |
| before-close | una devolución de llamada antes de que se cierre el cuadro de diálogo, y evitar cerrar el cuadro de diálogo | función(done) `done`se usa para cerrar el diálog | — | — |
| center | si alinear el encabezado y el pie de página en el centro | boolean | — | false |
| destroy-on-close | Destroy elements in Dialog when closed | boolean | — | false |
| destroy-on-close | Destruir elementos en Dialog cuando se cierra | boolean | — | false |
### Slots

View File

@@ -1,12 +1,12 @@
## Drawer
Sometimes, `Dialog` does not always satisfy our requirements, let's say you have a massive form, or you need space to display something like `terms & conditions`, `Drawer` has almost identical API with `Dialog`, but it introduces different user experience.
A veces, `Dialog` no siempre satisface nuestros requisitos, digamos que tiene un formulario masivo, o necesita espacio para mostrar algo como `terminos & condiciones`, `Drawer` tiene una API casi idéntica a `Dialog`, pero introduce una experiencia de usuario diferente.
### Basic Usage
### Uso básico
Callout a temporary drawer, from multiple direction
Llamada de un drawer temporal, desde varias direcciones
:::demo You must set `visible` for `Drawer` like `Dialog` does to control the visibility of `Drawer` itself, it's `boolean` type. `Drawer` has to parts: `title` & `body`, the `title` is a named slot, you can also set the title through attribute named `title`, default to an empty string, the `body` part is the main area of `Drawer`, which contains user defined content. When opening, `Drawer` expand itself from the **right corner to left** which size is **30%** of the browser window by default. You can change that default behavior by setting `direction` and `size` attribute. This show case also demonstrated how to use the `before-close` API, check the Attribute section for more detail
:::demo Debe establecer `visible` para `Drawer` como lo hace `Dialog` para controlar la visibilidad. `visible` es del tipo `boolean`. `Drawer` tiene partes: `title` & `body`, el `title` es un slot con nombre, también puede establecer el título a través de un atributo llamado `title`, por defecto a una cadena vacía, la parte `body` es el área principal de `Drawer`, que contiene contenido definido por el usuario. Al abrir, `Drawer` se expande desde la **esquina derecha a la izquierda** cuyo tamaño es **30%** de la ventana del navegador por defecto. Puede cambiar ese comportamiento predeterminado estableciendo los atributos `direction` y `size`. Este caso de demostración también muestra cómo utilizar la API `before-close`, consulte la sección Atributos para obtener más detalles.
```html
<el-radio-group v-model="direction">
@@ -50,9 +50,39 @@ Callout a temporary drawer, from multiple direction
```
:::
### Customization Content
### No Title
Like `Dialog`, `Drawer` can do many diverse interaction as you wanted.
When you no longer need a title, you can remove title from drawer.
:::demo Set the `withHeader` attribute to **false**, you can remove the title from drawer, thus your drawer can have more space on screen. If you want to be accessible, make sure to set the `title` attribute.
```html
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
open
</el-button>
<el-drawer
title="I am the title"
:visible.sync="drawer"
:with-header="false">
<span>Hi there!</span>
</el-drawer>
<script>
export default {
data() {
return {
drawer: false,
};
}
};
</script>
```
:::
### Personalizar el contenido
Al igual que `Dialog`, `Drawer` puede hacer muchas interacciones diversas.
:::demo
@@ -92,7 +122,7 @@ Like `Dialog`, `Drawer` can do many diverse interaction as you wanted.
</el-form-item>
</el-form>
<div class="demo-drawer__footer">
<el-button @click="dialog = false">Cancel</el-button>
<el-button @click="cancelForm">Cancel</el-button>
<el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? 'Submitting ...' : 'Submit' }}</el-button>
</div>
</div>
@@ -132,20 +162,32 @@ export default {
resource: '',
desc: ''
},
formLabelWidth: '80px'
formLabelWidth: '80px',
timer: null,
};
},
methods: {
handleClose(done) {
if (this.loading) {
return;
}
this.$confirm('Do you want to submit?')
.then(_ => {
this.loading = true;
setTimeout(() => {
this.loading = false;
this.timer = setTimeout(() => {
done();
// animation takes time
setTimeout(() => {
this.loading = false;
}, 400);
}, 2000);
})
.catch(_ => {});
},
cancelForm() {
this.loading = false;
this.dialog = false;
clearTimeout(this.timer);
}
}
}
@@ -153,10 +195,10 @@ export default {
```
:::
### Nested Drawer
### Drawer anidados
You can also have multiple layer of `Drawer` just like `Dialog`.
:::demo If you need multiple Drawer in different layer, you must set the `append-to-body` attribute to **true**
También puede tener varias capas de `Drawer` al igual que con `Dialog`.
:::demo Si necesita varios drawer en diferentes capas, debe establecer el atributo `append-to-body` en **true**
```html
@@ -205,58 +247,59 @@ You can also have multiple layer of `Drawer` just like `Dialog`.
:::tip
The content inside Drawer should be lazy rendered, which means that the content inside Drawer will not impact the initial render performance, therefore any DOM operation should be performed through `ref` or after `open` event emitted.
El contenido dentro del Drawer debe ser renderizado de forma perezosa, lo que significa que el contenido dentro del Drawer no afectará al rendimiento inicial del renderizado, por lo que cualquier operación DOM debe realizarse a través de `ref' o después de que se emita el evento `open'.
:::
:::tip
Drawer provides an API called `destroyOnClose`, which is a flag variable that indicates should destroy the children content inside Drawer after Drawer was closed. You can use this API when you need your `mounted` life cycle to be called every time the Drawer opens.
El Drawer proporciona una API llamada "destroyOnClose", que es una variable de bandera que indica que debe destruir el contenido hijo dentro del Drawer después de que se haya cerrado. Puede utilizar esta API cuando necesite que su ciclo de vida "mounted" sea llamado cada vez que se abra el Cajón.
:::
:::tip
If the variable bound to `visible` is managed in Vuex store, the `.sync` can not work properly. In this case, please remove the `.sync` modifier, listen to `open` and `close` events of Dialog, and commit Vuex mutations to update the value of that variable in the event handlers.
Si la variable `visible` se gestiona en el almacén de Vuex, el `.sync` no puede funcionar correctamente. En este caso, elimine el modificador `.sync`, escuche los eventos `open` y `close` de Drawer, y envíe mutaciones Vuex para actualizar el valor de esa variable en los manejadores de eventos.
:::
### Drawer Attributes
### Atributos de Drawer
| Parameter| Description | Type | Acceptable Values | Defaults |
| Parámetros | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| append-to-body | Controls should Drawer be inserted to DocumentBody Element, nested Drawer must assign this param to **true**| boolean | — | false |
| before-close | If set, closing procedure will be halted | function(done), done is function type that accepts a boolean as parameter, calling done with true or without parameter will abort the close procedure | — | — |
| close-on-press-escape | Indicates whether Drawer can be closed by pressing ESC | boolean | — | true |
| custom-class | Extra class names for Drawer | string | — | — |
| destroy-on-close | Indicates whether children should be destroyed after Drawer closed | boolean | - | false |
| modal | Should show shadowing layer | boolean | — | true |
| modal-append-to-body | Indicates should shadowing layer be insert into DocumentBody element | boolean | — | true |
| direction | Drawer's opening direction | Direction | rtl / ltr / ttb / tbb | rtl |
| show-close | Should show close button at the top right of Drawer | boolean | — | true |
| size | Drawer's size, if Drawer is horizontal mode, it effects the width property, otherwise it effects the height property, when size is `number` type, it describes the size by unit of pixels; when size is `string` type, it should be used with `x%` notation, other wise it will be interpreted to pixel unit | number / string | - | '30%' |
| title | Drawer's title, can also be set by named slot, detailed descriptions can be found in the slot form | string | — | — |
| visible | Should Drawer be displayed, also support the `.sync` notation | boolean | — | false |
| wrapperClosable | Indicates whether user can close Drawer by clicking the shadowing layer. | boolean | - | true |
| append-to-body | Los controles deberían insertar Drawer en el elemento DocumentBody, los Drawer anidados deben asignar este parámetro a **true** | boolean | — | false |
| before-close | Si está configurado, el procedimiento de cierre se detendrá. | function(done), done es un tipo de función que acepta un booleano como parámetro, una llamada hecha con true o sin parámetro abortará el procedimiento de cierre. | — | — |
| close-on-press-escape | Indica si el Drawer puede cerrarse pulsando ESC | boolean | — | true |
| custom-class | Nombre extra de clase para Drawer | string | — | — |
| destroy-on-close | Indica si los children deben ser destruidos después de cerrar el Drawer. | boolean | - | false |
| modal | Mostrará una capa de sombra | boolean | — | true |
| modal-append-to-body | Indica si se debe insertar una capa de sombreado en el elemento DocumentBody | boolean | — | true |
| direction | Dirección de apertura del Drawer | Direction | rtl / ltr / ttb / btt | rtl |
| show-close | Se mostrará el botón de cerrar en la parte superior derecha del Drawer | boolean | — | true |
| size | Tamaño del Drawer. Si el Drawer está en modo horizontal, afecta a la propiedad width, de lo contrario afecta a la propiedad height, cuando el tamaño es tipo `number`, describe el tamaño por unidad de píxeles; cuando el tamaño es tipo `string`, se debe usar con notación `x%`, de lo contrario se interpretará como unidad de píxeles. | number / string | - | '30%' |
| title | El título del Drawer, también se puede establecer por slot con nombre, las descripciones detalladas se pueden encontrar en el formulario de slot. | string | — | — |
| visible | Si se muestra el Drawer, también soporta la notación `.sync` | boolean | — | false |
| wrapperClosable | Indica si el usuario puede cerrar el Drawer haciendo clic en la capa de sombreado. | boolean | - | true |
| withHeader | Flag that controls the header section's existance, default to true, when withHeader set to false, both `title attribute` and `title slot` won't work | boolean | - | true |
### Drawer Slot
### Drawer Slot's
| Name | Description |
| Nombre | Descripción |
|------|--------|
| — | Drawer's Content |
| title | Drawer Title Section |
| — | El contenido del Drawer |
| title | El titulo de la sección del Drawer |
### Drawer Methods
### Métodos Drawer
| Name | Description |
| Nombre | Descripción |
| ---- | --- |
| closeDrawer | In order to close Drawer, this method will call `before-close`. |
| closeDrawer | Para cerrar el Drawer, este método llamará `before-close`. |
### Drawer Events
### Eventos Drawer
| Event Name | Description | Parameter |
| Nombre | Descripción | Parámetros |
|---------- |-------- |---------- |
| open | Triggered before Drawer opening animation begins | — |
| opened | Triggered after Drawer opening animation ended | — |
| close | Triggered before Drawer closing animation begins | — |
| closed | Triggered after Drawer closing animation ended | — |
| open | Se activa antes de que comience la animación de apertura del Drawer. | — |
| opened | Se activa cuando finaliza la animación de apertura del Drawer. | — |
| close | Se activa antes de que comience la animación de cierre del Drawer. | — |
| closed | Se activa después de que finaliza la animación de cierre del Drawer. | — |

View File

@@ -220,6 +220,7 @@ Actualmente Element está disponible en los siguientes idiomas:
<li>Kirguizstán (kg)</li>
<li>Armenio (hy)</li>
<li>Croatian (hr)</li>
<li>Esperanto (eo)</li>
</ul>
Si su idioma de destino no está incluido, puede contribuir: simplemente añada [aqui](https://github.com/ElemeFE/element/tree/dev/src/locale/lang) otra configuración de idioma y cree un pull request.

View File

@@ -110,9 +110,9 @@ Además de las características nativas de img, soporte de carga perezosa, marca
```
:::
### Image Preview
### Vista previa de la imagen
:::demo allow big image preview by setting `previewSrcList` prop.
:::demo permitir una vista previa grande de la imagen configurando la prop `previewSrcList`.
```html
<div class="demo-image__preview">
<el-image
@@ -147,8 +147,8 @@ Además de las características nativas de img, soporte de carga perezosa, marca
| referrer-policy | referrerPolicy nativo | string | - | - |
| lazy | si se usara lazy load | boolean | — | false |
| scroll-container | El contenedor para añadir el scroll listener cuando se utiliza lazy load | string / HTMLElement | — | El contenedor padre más cercano cuya propiedad de desbordamiento es auto o scroll |
| preview-src-list | allow big image preview | Array | — | - |
| z-index | set image preview z-index | Number | — | 2000 |
| preview-src-list | permitir una vista previa grande de la imagen | Array | — | - |
| z-index | establecer el z-index de la vista previa de la imagen | Number | — | 2000 |
### Eventos
| Nombre del evento | Descripción | Parámetros |

View File

@@ -176,7 +176,7 @@ Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `s
| min | el valor mínimo permitido | number | — | `-Infinity` |
| max | el valor maximo permitido | number | — | `Infinity` |
| step | incremento (salto) | number | — | 1 |
| step-strictly | si el valor del input puede ser solo un multiplo de step | number | — | false |
| step-strictly | si el valor del input puede ser solo un multiplo de step | boolean | — | false |
| precision | precisión del valor del input | number | — | — |
| size | tamaño del componente | string | large/small | — |
| disabled | si el componente esta deshabilitado | boolean | — | false |
@@ -190,7 +190,7 @@ Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `s
| Nombre | Descripción | Parámetros |
| ------ | ---------------------------------------- | ------------------ |
| change | se produce cuando el valor cambia | value after change |
| change | se produce cuando el valor cambia | currentValue, oldValue |
| blur | se produce cuando el componente pierde el foco | (event: Event) |
| focus | se produce cuando el componente obtiene el foco | (event: Event) |

View File

@@ -618,6 +618,8 @@ export default {
| blur | Se dispara cuando se pierde el foco | (event: Event) |
| focus | Se dispara cuando se obtiene el foco | (event: Event) |
| change | se activa cuando cambia el valor de entrada | (value: string \| number) |
| change | se activa solo cuando el cuadro de entrada pierde el foco o el usuario presiona Enter | (value: string \| number) |
| input | se activa cuando cambia el valor de entrada | (value: string \| number) |
| clear | se dispara cuando la entrada es borrada por el botón generado por el atributo `clearable`. | — |
### Input Metodo
@@ -672,6 +674,7 @@ export default {
| Nombre | Descripción | Parametros |
| ------ | ----------------------------------------------- | ------------------------------------------ |
| select | se dispara cuando se hace clic a una sugerencia | sugerencia en la que se está haciendo clic |
| change | se activa cuando cambia el valor de entrada | (value: string \| number) |
### Autocomplete Metodo

View File

@@ -128,13 +128,13 @@ Muestra una animación de pantalla completa mientras se cargan los datos
<template>
<el-button
type="primary"
@click="openFullScreen"
@click="openFullScreen1"
v-loading.fullscreen.lock="fullscreenLoading">
Como directiva
</el-button>
<el-button
type="primary"
@click="openFullScreen">
@click="openFullScreen2">
Como servicio
</el-button>
</template>
@@ -147,13 +147,13 @@ Muestra una animación de pantalla completa mientras se cargan los datos
}
},
methods: {
openFullScreen() {
openFullScreen1() {
this.fullscreenLoading = true;
setTimeout(() => {
this.fullscreenLoading = false;
}, 2000);
},
openFullScreen() {
openFullScreen2() {
const loading = this.$loading({
lock: true,
text: 'Loading',

View File

@@ -0,0 +1,60 @@
## Popconfirm
A simple confirmation dialog of an element click action.
### Basic usage
Popconfirm is similar to Popover. So for some duplicated attributes, please refer to the documentation of Popover.
:::demo Only `title` attribute is avaliable in Popconfirm, `content` will be ignored.
```html
<template>
<el-popconfirm
title="Are you sure to delete this?"
>
<el-button slot="reference">Delete</el-button>
</el-popconfirm>
</template>
````
:::
### Customise
You can customise Popconfirm like:
:::demo
```html
<template>
<el-popconfirm
confirmButtonText='OK'
cancelButtonText='No, Thanks'
icon="el-icon-info"
iconColor="red"
title="Are you sure to delete this?"
>
<el-button slot="reference">Delete</el-button>
</el-popconfirm>
</template>
```
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| title | Title | String | — | — |
| confirmButtonText | Confirm button text | String | — | — |
| cancelButtonText | Cancel button text | String | — | — |
| confirmButtonType | Confirm button type | String | — | Primary |
| cancelButtonType | Cancel button type | String | — | Text |
| icon | Icon | String | — | el-icon-question |
| iconColor | Icon color | String | — | #f90 |
| hideIcon | is hide Icon | Boolean | — | false |
### Slot
| Name | Description |
|--- | ---|
| reference | HTML element that triggers Popconfirm |
### Events
| Event Name | Description | Parameters |
|---------|--------|---------|
| onConfirm | triggers when click confirm button | — |
| onCancel | triggers when click cancel button | — |

View File

@@ -151,6 +151,7 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d
| popper-options | parámetros para [popper.js](https://popper.js.org/documentation.html) | object | por favor, refiérase a [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| popper-class | clase propia para popover | string | — | — |
| open-delay | retraso de la aparición cuando `trigger` es hover, en milisegundos | number | — | — |
| close-delay | Retraso antes de desaparecer cuando el `trigger` es hover, en milisegundos. | number | — | 200 |
| tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) de Popover | number | — | 0 |
### Slot

View File

@@ -168,3 +168,4 @@ Puede utilizar el atributo `color` para establecer el color de la barra de progr
| color | color de fondo de la barra de progreso. Sobreescribe la propiedad `status` | string/function/array | — | '' |
| width | ancho del canvas que contiene la barra de progreso circula | number | — | 126 |
| show-text | mostrar porcentaje | boolean | — | true |
| stroke-linecap | circle/dashboard type shape at the end path | string | butt/round/square | round |

View File

@@ -457,7 +457,7 @@ Introduzca palabras y datos para buscar desde el servidor.
},
mounted() {
this.list = this.states.map(item => {
return { value: item, label: item };
return { value: `value:${item}`, label: `label:${item}` };
});
},
methods: {

View File

@@ -6,7 +6,7 @@ Guía al usuario para completar tareas de acuerdo con el proceso. Sus pasos pued
Barra de pasos simple.
:::demo Defina el atributo `active` con un valor de tipo `Number`, que indica el índice de pasos y comienza desde 0. Puede definir el atributo `space` cuando es necesario fijar el ancho del paso que acepta el tipo `Boolean`. La unidad del atributo `space` es px. Si no está configurado, es responsive. La configuración del atributo `finish-status` puede cambiar el estado de los pasos completados.
:::demo Defina el atributo `active` con un valor de tipo `Number`, que indica el índice de pasos y comienza desde 0. Puede definir el atributo `space` cuando es necesario fijar el ancho del paso que acepta el tipo `Number`. La unidad del atributo `space` es px. Si no está configurado, es responsive. La configuración del atributo `finish-status` puede cambiar el estado de los pasos completados.
```html
<el-steps :active="active" finish-status="success">
@@ -50,7 +50,7 @@ Muestra el estado del step para cada paso.
```
:::
### Centrado
### Centrado
El título y la descripción pueden estar centrados.

View File

@@ -1,17 +1,18 @@
## Avatar avatar
Avatars can be used to represent people or objects. It supports images, Icons, or characters.
Les avatars peuvent être utilisés pour représenter des personnes ou des objets. Les images, icônes et les caractères sont supportés.
### Basic
use `shape` and `size` prop to set avatar's shape and size
utilisez les prop `shape` et` size` pour définir la forme et la taille de l'avatar
:::demo
```html
<template>
<el-row class="demo-avatar demo-basic">
<el-col :span="12">
<div class="sub-title">circle</div>
<div class="sub-title">cercle</div>
<div class="demo-basic--circle">
<div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
<div class="block" v-for="size in sizeList" :key="size">
@@ -20,14 +21,14 @@ use `shape` and `size` prop to set avatar's shape and size
</div>
</el-col>
<el-col :span="12">
<div class="sub-title">square</div>
<div class="sub-title">carré</div>
<div class="demo-basic--circle">
<div class="block"><el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar></div>
<div class="block" v-for="size in sizeList" :key="size">
<el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>
</div>
</div>
</el-col>
</el-col>
</el-row>
</template>
<script>
@@ -47,7 +48,7 @@ use `shape` and `size` prop to set avatar's shape and size
### Types
It supports images, Icons, or characters
Les images, icônes et les caractères sont supportés.
:::demo
```html
@@ -67,9 +68,9 @@ It supports images, Icons, or characters
```
:::
### Fallback when image load error
### fallback en cas d'erreur de chargement d'image
fallback when image load error
fallback en cas d'erreur de chargement d'image
:::demo
```html
@@ -93,9 +94,9 @@ fallback when image load error
```
:::
### How the image fit its container
### Comment l'image s'adapte à son conteneur
Set how the image fit its container for an image avatar, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
Défini comment l'image s'adapte à son conteneur, pareil que [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
:::demo
```html
@@ -123,23 +124,23 @@ Set how the image fit its container for an image avatar, same as [object-fit](ht
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Attribute | Description | Type | Valeurs acceptées | Default |
| ----------------- | -------------------------------- | --------------- | ------ | ------ |
| icon | set representation type to Icon, more info on Icon Component | string | | |
| size | set avatar size | number/string | number / large / medium / small | large |
| shape | set avatar shape | string | circle / square | circle |
| src | the address of the image for an image avatar | string | | |
| srcSet | A list of one or more strings separated by commas indicating a set of possible image sources for the user agent to use | string | | |
| alt | This attribute defines an alternative text description of the image | string | | |
| fit | set how the image fit its container for an image avatar | string | fill / contain / cover / none / scale-down | cover |
| icon | Défini le type de représentation sur Icon, plus dinformations sur le composant Icon | string | | |
| size | Défini la taille de l'avatar | number/string | number / large / medium / small | large |
| shape | Défini la forme de l'avatar | string | circle / square | circle |
| src | L'adresse de l'image pour un avatar image | string | | |
| srcSet | Une liste d'un ou plusieurs string séparés par des virgules indiquant un ensemble de sources d'images possibles que le user agent peut utiliser | string | | |
| alt | Cet attribut définit une description textuelle alternative de l'image | string | | |
| fit | Défini comment l'image s'adapte à son conteneur | string | fill / contain / cover / none / scale-down | cover |
### Events
### Évènements
| Event Name | Description | Parameters |
| Event Name | Description | Paramètres |
| ------ | ------------------ | -------- |
| error | handler when img load error, return false to prevent default fallback behavior |(e: Event) |
| error | handler en cas d'erreur de chargement de l'image, renvoie false pour éviter le fallback par défaut |(e: Event) |
### Slot
| Slot Name | Description |
| default | customize avatar content |
| Slot Name | Description |
| default | personnalise le contenu de l'avatar |

View File

@@ -1,4 +1,4 @@
| Se## Cascader
## Cascader
Si les options ont une structure hiérarchique claire, Le composant Cascader peut être utilisé pour les afficher et les sélectionner.

View File

@@ -1,10 +1,12 @@
## Thème
Element utilise le style BEM pour le CSS afin que vous puissiez écraser les règles prédéfinies facilement. Mais si vous avez besoin de remplacer des styles à une plus grande échelle , e.g. changer le thème de bleu à orange ou vert, les modifier une par une serait fastidieux. Nous fournissons ttrtois méthodes pour changer les variables de style.
### Online Theme Roller
### Theme Roller
Utilisez [Online Theme Roller](./#/fr-FR/theme) pour personnaliser les Design Tokens des variables globales et des composants, et prévisualisez le nouveau thème en temps réel. Il peut générer un package de style complet basé sur le nouveau thème que vous pouvez télécharger directement (pour importer de nouveaux fichiers de style dans votre projet, veuillez vous reporter à la partie 'Importer un thème personnalisé'' de cette section).
<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 70%;margin: 30px auto 0;display: block;">
Also, use [Theme Roller Chrome Extension](https://chrome.google.com/webstore/detail/element-theme-roller/lifkjlojflekabbmlddfccdkphlelmim)to customize theme and preview in real-time on any website developed by Element.
<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 100%;margin: 30px auto 0;display: block;">
### Changer la couleur du thème
Si vous avez juste besoin de changer la couleur du thème, le [générateur de thème en ligne](https://elementui.github.io/theme-chalk-preview/#/en-US) est recommandé. La couleur du thème d'Element est un bleu clair et agréable. En le changeant, vous rendez Element visuellement plus adapté à vos projets.

View File

@@ -1,4 +1,3 @@
## DatePicker
Utilisez DatePicker pour les champs de dates.
@@ -463,6 +462,7 @@ Lorsque vous choisissez une plage de dates, vous pouvez assigner l'horaire de d
|---------- |-------------- |---------- |-------------------------------- |-------- |
| shortcuts | Un tableau d'objets { text, onClick } pour configurer les raccourcis, voir table ci-dessous. | object[] | — | — |
| disabledDate | Une fonction qui détermine si une date est désactivée ou pas, avec cette date en paramètre. Doit retourner un booléen. | function | — | — |
| cellClassName | set custom className | Function(Date) | — | — |
| firstDayOfWeek | Premier jour du mois. | Number | 1 to 7 | 7 |
| onPick | Callback se déclenchant quand la date sélectionnée change. Uniquement pour `daterange` et `datetimerange`. | Function({ maxDate, minDate }) | - | - |

View File

@@ -219,6 +219,7 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
|---------- |-------------- |---------- |-------------------------------- |-------- |
| shortcuts | Un tableau d'objets { text, onClick } pour mettre en place des raccourcis, vérifier le tableau ci-dessous | object[] | — | — |
| disabledDate | Une fonction déterminant si une date est désactivée avec cette date en paramètre. Retourne un Boolean | function | — | — |
| cellClassName | set custom className | Function(Date) | — | — |
| firstDayOfWeek | Le premier jour de la semaine | Number | 1 à 7 | 7 |
### Raccourcis

View File

@@ -50,6 +50,36 @@ Callout a temporary drawer, from multiple direction
```
:::
### No Title
When you no longer need a title, you can remove title from drawer.
:::demo Set the `withHeader` attribute to **false**, you can remove the title from drawer, thus your drawer can have more space on screen. If you want to be accessible, make sure to set the `title` attribute.
```html
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
open
</el-button>
<el-drawer
title="I am the title"
:visible.sync="drawer"
:with-header="false">
<span>Hi there!</span>
</el-drawer>
<script>
export default {
data() {
return {
drawer: false,
};
}
};
</script>
```
:::
### Customization Content
Like `Dialog`, `Drawer` can do many diverse interaction as you wanted.
@@ -92,7 +122,7 @@ Like `Dialog`, `Drawer` can do many diverse interaction as you wanted.
</el-form-item>
</el-form>
<div class="demo-drawer__footer">
<el-button @click="dialog = false">Cancel</el-button>
<el-button @click="cancelForm">Cancel</el-button>
<el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? 'Submitting ...' : 'Submit' }}</el-button>
</div>
</div>
@@ -132,20 +162,32 @@ export default {
resource: '',
desc: ''
},
formLabelWidth: '80px'
formLabelWidth: '80px',
timer: null,
};
},
methods: {
handleClose(done) {
if (this.loading) {
return;
}
this.$confirm('Do you want to submit?')
.then(_ => {
this.loading = true;
setTimeout(() => {
this.loading = false;
this.timer = setTimeout(() => {
done();
// animation takes time
setTimeout(() => {
this.loading = false;
}, 400);
}, 2000);
})
.catch(_ => {});
},
cancelForm() {
this.loading = false;
this.dialog = false;
clearTimeout(this.timer);
}
}
}
@@ -232,12 +274,13 @@ If the variable bound to `visible` is managed in Vuex store, the `.sync` can not
| destroy-on-close | Indicates whether children should be destroyed after Drawer closed | boolean | - | false |
| modal | Should show shadowing layer | boolean | — | true |
| modal-append-to-body | Indicates should shadowing layer be insert into DocumentBody element | boolean | — | true |
| direction | Drawer's opening direction | Direction | rtl / ltr / ttb / tbb | rtl |
| direction | Drawer's opening direction | Direction | rtl / ltr / ttb / btt | rtl |
| show-close | Should show close button at the top right of Drawer | boolean | — | true |
| size | Drawer's size, if Drawer is horizontal mode, it effects the width property, otherwise it effects the height property, when size is `number` type, it describes the size by unit of pixels; when size is `string` type, it should be used with `x%` notation, other wise it will be interpreted to pixel unit | number / string | - | '30%' |
| title | Drawer's title, can also be set by named slot, detailed descriptions can be found in the slot form | string | — | — |
| visible | Should Drawer be displayed, also support the `.sync` notation | boolean | — | false |
| wrapperClosable | Indicates whether user can close Drawer by clicking the shadowing layer. | boolean | - | true |
| withHeader | Flag that controls the header section's existance, default to true, when withHeader set to false, both `title attribute` and `title slot` won't work | boolean | - | true |
### Drawer Slot

View File

@@ -223,6 +223,7 @@ Actuellement, Element supporte les langues suivantes:
<li>Kirghize (kg)</li>
<li>Croate (hr)</li>
<li>Arménien (hy)</li>
<li>Espéranto (eo)</li>
</ul>
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/ElemeFE/element/tree/dev/src/locale/lang) et créez une pull request.

View File

@@ -174,7 +174,7 @@ Utilisez l'attribut `size` pour régler la taille avec `medium`, `small` ou `min
| min | La valeur minimale autorisée. | number | — | `-Infinity` |
| max | La valeur maximale autorisée. | number | — | `Infinity` |
| step | Le pas pour l'incrémentation. | number | — | 1 |
| step-strictly | Si la valeur ne peut être qu'un multiple du pas. | number | — | false |
| step-strictly | Si la valeur ne peut être qu'un multiple du pas. | boolean | — | false |
| precision | La précision de la valeur. | number | — | — |
| size | La taille du composant. | string | large/small| — |
| disabled| Si le composant est désactivé. | boolean | — | false |
@@ -188,7 +188,7 @@ Utilisez l'attribut `size` pour régler la taille avec `medium`, `small` ou `min
| Nom | Description | Paramètres |
|----| ---- | -----|
| change | Se déclenche quand la valeur change. | La nouvelle valeur. |
| change | Se déclenche quand la valeur change. | currentValue, oldValue |
| blur | Se déclenche quand le champ perds le focus. | (event: Event) |
| focus | Se déclenche quand le champ a le focus. | (event: Event) |

View File

@@ -604,6 +604,8 @@ export default {
| blur | Se déclenche quand Input perds le focus. | (event: Event) |
| focus | Se déclenche quand Input a le focus. | (event: Event) |
| change | Se déclenche quand la valeur change. | (value: string \ number) |
| change | Déclenché uniquement lorsque la zone de saisie perd le focus ou que l'utilisateur appuie sur Entrée. | (value: string \| number) |
| input | Déclenché lorsque la valeur d'entrée change. | (value: string \| number) |
| clear | Se déclenche quand le champ est effacé par le bouton de reset. | — |
### Méthodes de l'Input
@@ -658,6 +660,7 @@ export default {
| Nom | Description | Paramètres |
|----| ----| ----|
| select | Se déclenche quand une suggestion est cliquée. | La suggestion sélectionnée. |
| change | Se déclenche quand la valeur change. | (value: string \ number) |
### Méthodes de l'autocomplétion

View File

@@ -128,13 +128,13 @@ Affichez une animation en plein écran quand vous charger des données.
<template>
<el-button
type="primary"
@click="openFullScreen"
@click="openFullScreen1"
v-loading.fullscreen.lock="fullscreenLoading">
Comme directive
</el-button>
<el-button
type="primary"
@click="openFullScreen">
@click="openFullScreen2">
Comme service
</el-button>
</template>
@@ -147,13 +147,13 @@ Affichez une animation en plein écran quand vous charger des données.
}
},
methods: {
openFullScreen() {
openFullScreen1() {
this.fullscreenLoading = true;
setTimeout(() => {
this.fullscreenLoading = false;
}, 2000);
},
openFullScreen() {
openFullScreen2() {
const loading = this.$loading({
lock: true,
text: 'Loading',

View File

@@ -0,0 +1,60 @@
## Popconfirm
A simple confirmation dialog of an element click action.
### Basic usage
Popconfirm is similar to Popover. So for some duplicated attributes, please refer to the documentation of Popover.
:::demo Only `title` attribute is avaliable in Popconfirm, `content` will be ignored.
```html
<template>
<el-popconfirm
title="Are you sure to delete this?"
>
<el-button slot="reference">Delete</el-button>
</el-popconfirm>
</template>
````
:::
### Customise
You can customise Popconfirm like:
:::demo
```html
<template>
<el-popconfirm
confirmButtonText='OK'
cancelButtonText='No, Thanks'
icon="el-icon-info"
iconColor="red"
title="Are you sure to delete this?"
>
<el-button slot="reference">Delete</el-button>
</el-popconfirm>
</template>
```
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| title | Title | String | — | — |
| confirmButtonText | Confirm button text | String | — | — |
| cancelButtonText | Cancel button text | String | — | — |
| confirmButtonType | Confirm button type | String | — | Primary |
| cancelButtonType | Cancel button type | String | — | Text |
| icon | Icon | String | — | el-icon-question |
| iconColor | Icon color | String | — | #f90 |
| hideIcon | is hide Icon | Boolean | — | false |
### Slot
| Name | Description |
|--- | ---|
| reference | HTML element that triggers Popconfirm |
### Events
| Event Name | Description | Parameters |
|---------|--------|---------|
| onConfirm | triggers when click confirm button | — |
| onCancel | triggers when click cancel button | — |

View File

@@ -153,6 +153,7 @@ Vous pouvez aussi imbriquer des opérations. Procéder ainsi est plus léger que
| popper-options | Paramètres pour [popper.js](https://popper.js.org/documentation.html). | object | Référez-vous à [popper.js](https://popper.js.org/documentation.html). | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| popper-class | Classe du popover. | string | — | — |
| open-delay | Délai d'affichage, lorsque `trigger` est 'hover', en millisecondes. | number | — | — |
| close-delay | delay before disappearing when `trigger` is hover, in milliseconds | number | — | 200 |
| tabindex | [tabindex](https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/tabindex) de Popover | number | — | 0 |
### Slot

View File

@@ -171,3 +171,4 @@ Vous pouvez également spécifier l'attribut `type` de `dashboard` pour utiliser
| color | La couleur de fon de la barre. Écrase `status`. | string/function/array | — | '' |
| width | La largeur du canvas dans le cas d'une barre circulaire. | number | — | 126 |
| show-text | Si le pourcentage doit être affiché. | boolean | — | true |
| stroke-linecap | circle/dashboard type shape at the end path | string | butt/round/square | round |

View File

@@ -453,7 +453,7 @@ Vous pouvez aller chercher les options sur le serveur de manière dynamique.
},
mounted() {
this.list = this.states.map(item => {
return { value: item, label: item };
return { value: `value:${item}`, label: `label:${item}` };
});
},
methods: {

View File

@@ -6,7 +6,7 @@ Permet de guider l'utilisateur dans l'accomplissement de toutes les taches d'un
Voici une barre d'étapes basique.
:::demo Réglez l'attribut `active` avec une variable `Number`, qui indique l'index des étapes et commence à 0. L'attribut `space` permet de déterminer si l'espace entre les étapes doit être fixe à l'aide d'un `Boolean`. L'unité de `space` est `px`. Si cet attribut est absent, la barre sera responsive. L'attribut `finish-status` change le statut d'accomplissement des étapes.
:::demo Réglez l'attribut `active` avec une variable `Number`, qui indique l'index des étapes et commence à 0. L'attribut `space` permet de déterminer si l'espace entre les étapes doit être fixe à l'aide d'un `Number`. L'unité de `space` est `px`. Si cet attribut est absent, la barre sera responsive. L'attribut `finish-status` change le statut d'accomplissement des étapes.
```html
<el-steps :active="active" finish-status="success">

View File

@@ -1,10 +1,12 @@
## 自定义主题
Element 默认提供一套主题CSS 命名采用 BEM 的风格,方便使用者覆盖样式。我们提供了四种方法,可以进行不同程度的样式自定义。
### 在线主题编辑器
### 主题编辑器
使用[在线主题编辑器](./#/zh-CN/theme),可以修改定制 Element 所有全局和组件的 Design Tokens并可以方便地实时预览样式改变后的视觉。同时它还可以基于新的定制样式生成完整的样式文件包供直接下载使用关于如何使用下载的主题包请参考本节「引入自定义主题」部分
<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 70%;margin: 30px auto 0;display: block;">
也可以使用[主题编辑器 Chrome 插件](https://chrome.google.com/webstore/detail/element-theme-roller/lifkjlojflekabbmlddfccdkphlelmim),在任何使用 Element 开发的网站上配置并实时预览主题。
<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 100%;margin: 30px auto 0;display: block;">
### 仅替换主题色
如果仅希望更换 Element 的主题色,推荐使用[在线主题生成工具](https://elementui.github.io/theme-chalk-preview)。Element 默认的主题色是鲜艳、友好的蓝色。通过替换主题色,能够让 Element 的视觉更加符合具体项目的定位。

View File

@@ -415,6 +415,7 @@
|---------- |-------------- |---------- |-------------------------------- |-------- |
| shortcuts | 设置快捷选项,需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | — | — |
| disabledDate | 设置禁用状态,参数为当前日期,要求返回 Boolean | Function | — | — |
| cellClassName | 设置日期的 className | Function(Date) | — | — |
| firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 |
| onPick | 选中日期后会执行的回调,只有当 `daterange``datetimerange` 才生效 | Function({ maxDate, minDate }) | — | — |

View File

@@ -218,6 +218,7 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生,`Picker Options` 或者其
|---------- |-------------- |---------- |-------------------------------- |-------- |
| shortcuts | 设置快捷选项,需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | — | — |
| disabledDate | 设置禁用状态,参数为当前日期,要求返回 Boolean | Function | — | — |
| cellClassName | 设置日期的 className | Function(Date) | — | — |
| firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 |
### Shortcuts

View File

@@ -50,6 +50,37 @@
```
:::
### 不添加 Title
当你不需要标题到时候, 你还可以去掉标题
:::demo 当遇到不需要 title 的场景时, 可以通过 `withHeader` 这个属性来关闭掉 title 的显示, 这样可以留出更大的空间给到用户, 为了用户的可访问性, 请务必设定 `title` 的值
```html
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
点我打开
</el-button>
<el-drawer
title="我是标题"
:visible.sync="drawer"
:with-header="false">
<span>我来啦!</span>
</el-drawer>
<script>
export default {
data() {
return {
drawer: false,
};
}
};
</script>
```
:::
### 自定义内容
`Dialog` 组件一样, `Drawer` 同样可以在其内部嵌套各种丰富的操作
@@ -92,7 +123,7 @@
</el-form-item>
</el-form>
<div class="demo-drawer__footer">
<el-button @click="dialog = false">取 消</el-button>
<el-button @click="cancelForm">取 消</el-button>
<el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
</div>
</div>
@@ -132,20 +163,32 @@ export default {
resource: '',
desc: ''
},
formLabelWidth: '80px'
formLabelWidth: '80px',
timer: null,
};
},
methods: {
handleClose(done) {
if (this.loading) {
return;
}
this.$confirm('确定要提交表单吗?')
.then(_ => {
this.loading = true;
setTimeout(() => {
this.loading = false;
this.timer = setTimeout(() => {
done();
// 动画关闭需要一定的时间
setTimeout(() => {
this.loading = false;
}, 400);
}, 2000);
})
.catch(_ => {});
},
cancelForm() {
this.loading = false;
this.dialog = false;
clearTimeout(this.timer);
}
}
}
@@ -233,12 +276,13 @@ Drawer 提供一个 `destroyOnClose` API, 用来在关闭 Drawer 时销毁子组
| destroy-on-close | 控制是否在关闭 Drawer 之后将子元素全部销毁 | boolean | - | false |
| modal | 是否需要遮罩层 | boolean | — | true |
| modal-append-to-body | 遮罩层是否插入至 body 元素上,若为 false则遮罩层会插入至 Drawer 的父元素上 | boolean | — | true |
| direction | Drawer 打开的方向 | Direction | rtl / ltr / ttb / tbb | rtl |
| direction | Drawer 打开的方向 | Direction | rtl / ltr / ttb / btt | rtl |
| show-close | 是否显示关闭按钮 | boolean | — | true |
| size | Drawer 窗体的大小, 当使用 `number` 类型时, 以像素为单位, 当使用 `string` 类型时, 请传入 'x%', 否则便会以 `number` 类型解释 | number / string | - | '30%' |
| title | Drawer 的标题,也可通过具名 slot (见下表)传入 | string | — | — |
| visible | 是否显示 Drawer支持 .sync 修饰符 | boolean | — | false |
| wrapperClosable | 点击遮罩层是否可以关闭 Drawer | boolean | - | true |
| withHeader | 控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title attribute 和 title slot 均不生效 | boolean | - | true |
### Drawer Slot

View File

@@ -222,6 +222,7 @@ ElementLocale.i18n((key, value) => i18n.t(key, value))
<li>吉尔吉斯语kg</li>
<li>亚美尼亚语 (hy)</li>
<li>克罗地亚 (hr)</li>
<li>世界语 (eo)</li>
</ul>
如果你需要使用其他的语言,欢迎贡献 PR只需在 [这里](https://github.com/ElemeFE/element/tree/dev/src/locale/lang) 添加一个语言配置文件即可。

View File

@@ -172,7 +172,7 @@
| min | 设置计数器允许的最小值 | number | — | -Infinity |
| max | 设置计数器允许的最大值 | number | — | Infinity |
| step | 计数器步长 | number | — | 1 |
| step-strictly | 是否只能输入 step 的倍数 | number | — | false |
| step-strictly | 是否只能输入 step 的倍数 | boolean | — | false |
| precision| 数值精度 | number | — | — |
| size | 计数器尺寸 | string | large, small | — |
| disabled | 是否禁用计数器 | boolean | — | false |
@@ -185,7 +185,7 @@
### Events
| 事件名称 | 说明 | 回调参数 |
|---------|--------|---------|
| change | 绑定值被改变时触发 | 最后变更的值 |
| change | 绑定值被改变时触发 | currentValue, oldValue |
| blur | 在组件 Input 失去焦点时触发 | (event: Event) |
| focus | 在组件 Input 获得焦点时触发 | (event: Event) |

View File

@@ -719,7 +719,8 @@ export default {
|---------|--------|---------|
| blur | 在 Input 失去焦点时触发 | (event: Event) |
| focus | 在 Input 获得焦点时触发 | (event: Event) |
| change | 在 Input 值改变时触发 | (value: string \| number) |
| change | 仅在输入框失去焦点或用户按下回车时触发 | (value: string \| number) |
| input | 在 Input 值改变时触发 | (value: string \| number) |
| clear | 在点击由 `clearable` 属性生成的清空按钮时触发 | — |
### Input Methods
@@ -768,6 +769,7 @@ export default {
| 事件名称 | 说明 | 回调参数 |
|---------|--------|---------|
| select | 点击选中建议项时触发 | 选中建议项 |
| change | 在 Input 值改变时触发 | (value: string \| number) |
### Autocomplete Methods
| 方法名 | 说明 | 参数 |

View File

@@ -127,13 +127,13 @@
<template>
<el-button
type="primary"
@click="openFullScreen"
@click="openFullScreen1"
v-loading.fullscreen.lock="fullscreenLoading">
指令方式
</el-button>
<el-button
type="primary"
@click="openFullScreen">
@click="openFullScreen2">
服务方式
</el-button>
</template>
@@ -146,13 +146,13 @@
}
},
methods: {
openFullScreen() {
openFullScreen1() {
this.fullscreenLoading = true;
setTimeout(() => {
this.fullscreenLoading = false;
}, 2000);
},
openFullScreen() {
openFullScreen2() {
const loading = this.$loading({
lock: true,
text: 'Loading',

View File

@@ -0,0 +1,60 @@
## Popconfirm 气泡确认框
点击元素,弹出气泡确认框。
### 基础用法
Popconfirm 的属性与 Popover 很类似,因此对于重复属性,请参考 Popover 的文档,在此文档中不做详尽解释。
:::demo 在 Popconfirm 中,只有 `title` 属性可用,`content` 属性不会被展示。
```html
<template>
<el-popconfirm
title="这是一段内容确定删除吗?"
>
<el-button slot="reference">删除</el-button>
</el-popconfirm>
</template>
````
:::
### 自定义
可以在 Popconfirm 中自定义内容。
:::demo
```html
<template>
<el-popconfirm
confirmButtonText='好的'
cancelButtonText='不用了'
icon="el-icon-info"
iconColor="red"
title="这是一段内容确定删除吗?"
>
<el-button slot="reference">删除</el-button>
</el-popconfirm>
</template>
```
:::
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| title | 标题 | String | — | — |
| confirmButtonText | 确认按钮文字 | String | — | — |
| cancelButtonText | 取消按钮文字 | String | — | — |
| confirmButtonType | 确认按钮类型 | String | — | Primary |
| cancelButtonType | 取消按钮类型 | String | — | Text |
| icon | Icon | String | — | el-icon-question |
| iconColor | Icon 颜色 | String | — | #f90 |
| hideIcon | 是否隐藏 Icon | Boolean | — | false |
### Slot
| 参数 | 说明 |
|--- | ---|
| reference | 触发 Popconfirm 显示的 HTML 元素 |
### Events
| 事件名称 | 说明 | 回调参数 |
|---------|--------|---------|
| onConfirm | 点击确认按钮时触发 | — |
| onCancel | 点击取消按钮时触发 | — |

View File

@@ -149,6 +149,7 @@ Popover 的属性与 Tooltip 很类似,它们都是基于`Vue-popper`开发的
| popper-options | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| popper-class | 为 popper 添加类名 | String | — | — |
| open-delay | 触发方式为 hover 时的显示延迟,单位为毫秒 | Number | — | — |
| close-delay | 触发方式为 hover 时的隐藏延迟,单位为毫秒 | number | — | 200 |
| tabindex | Popover 组件的 [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | — | 0 |
### Slot

View File

@@ -174,3 +174,4 @@ Progress 组件可通过 `type` 属性来指定使用环形进度条,在环形
| color | 进度条背景色(会覆盖 status 状态颜色) | string/function/array | — | '' |
| width | 环形进度条画布宽度(只在 type 为 circle 或 dashboard 时可用) | number | | 126 |
| show-text | 是否显示进度条文字内容 | boolean | — | true |
| stroke-linecap | circle/dashboard 类型路径两端的形状 | string | butt/round/square | round |

View File

@@ -448,7 +448,7 @@
},
mounted() {
this.list = this.states.map(item => {
return { value: item, label: item };
return { value: `value:${item}`, label: `label:${item}` };
});
},
methods: {

View File

@@ -5,7 +5,7 @@
简单的步骤条。
:::demo 设置`active`属性,接受一个`Number`,表明步骤的 index从 0 开始。需要定宽的步骤条时,设置`space`属性即可,它接受`Boolean`,单位为`px`,如果不设置,则为自适应。设置`finish-status`属性可以改变已经完成的步骤的状态。
:::demo 设置`active`属性,接受一个`Number`,表明步骤的 index从 0 开始。需要定宽的步骤条时,设置`space`属性即可,它接受`Number`,单位为`px`,如果不设置,则为自适应。设置`finish-status`属性可以改变已经完成的步骤的状态。
```html
<el-steps :active="active" finish-status="success">
<el-step title="步骤 1"></el-step>

View File

@@ -6,7 +6,7 @@
提供几个固定的时间点供用户选择
:::demo 使用 el-time-select 标签,分别通过`star``end``step`指定可选的起始时间、结束时间和步长
:::demo 使用 el-time-select 标签,分别通过`start``end``step`指定可选的起始时间、结束时间和步长
```html
<el-time-select
v-model="value"

1
examples/extension/.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
dist

View File

@@ -0,0 +1,18 @@
import Vue from 'vue';
import App from './editor/index';
import Element from 'main/index.js';
import 'packages/theme-chalk/src/index.scss';
export default () => {
Vue.use(Element, { zIndex: 100000 });
const root = document.createElement('div');
document.body.appendChild(root);
window.ga = function() {
console.log(arguments);
};
new Vue({ // eslint-disable-line
render: h => h(App)
}).$mount(root);
};

View File

@@ -0,0 +1,6 @@
chrome.browserAction.onClicked.addListener(tab => {
chrome.tabs.executeScript(tab.id, {
file: 'entry.js'
});
})
;

View File

@@ -0,0 +1,212 @@
<template>
<div class="ext-panel" :class="{moving : moving}" :style="{top: `${top}px`, left: `${left}px`}" ref="editor" >
<img class="entrance touch-icon" src="./icon-entrance.png" v-show="!showSidebar" @click="toggleSidebar" />
<img class="close touch-icon" src="./icon-close.png" v-show="showSidebar" @click="toggleSidebar" />
<div class="editor" :style="{height: `${height}px`}" v-show="showSidebar">
<el-tabs v-model="activeTab" @tab-click="onTabClick">
<el-tab-pane label="Config" name="config">
<theme-configurator
:themeConfig="themeConfig"
:previewConfig="previewConfig"
:onUserConfigUpdate="onUserConfigUpdate"
from="extension"
></theme-configurator>
</el-tab-pane>
<el-tab-pane label="Gallery" name="gallery">
<gallery
ref='gallery'
:height="height"
:width="width - 7"
@action="onGalleryAction"
/>
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script>
import ThemeConfigurator from '../../../components/theme-configurator';
import themeLoader from '../../../components/theme/loader';
import gallery from './gallery';
import { loadUserThemeFromLocal, saveUserThemeToLocal } from './utils';
import bus from '../../../bus.js';
import {
ACTION_APPLY_THEME
} from '../../../components/theme/constant.js';
let initX;
let initY;
let leftX = 0;
let topY = 25;
export default {
mixins: [themeLoader],
components: {
ThemeConfigurator,
gallery
},
data() {
return {
showSidebar: true,
previewConfig: {},
themeConfig: {},
top: topY,
left: leftX,
height: window.innerHeight - 30 * 2,
width: 0,
moving: false,
activeTab: 'config',
themeName: '',
userTheme: []
};
},
mounted() {
const editor = this.$refs.editor;
this.width = editor.offsetWidth;
leftX = window.innerWidth - 20 - this.width;
this.left = leftX;
editor.addEventListener('mousedown', e => {
initX = e.clientX;
initY = e.clientY;
leftX = this.left;
topY = this.top;
document.addEventListener('mousemove', this.moveFunc);
});
document.addEventListener('mouseup', e => {
document.removeEventListener('mousemove', this.moveFunc);
setTimeout(() => {this.moving = false;}, 0);
});
// chrome.storage.local.remove('ELEMENT_THEME_USER_CONFIG');
loadUserThemeFromLocal()
.then((result) => {
if (result) {
this.activeTab = 'gallery';
this.userTheme = result;
}
});
},
methods: {
checkLocalThemeConfig() {}, // disable mixin auto loading
toggleSidebar() {
if (this.moving) return;
this.showSidebar = !this.showSidebar;
if (!this.showSidebar) {
const windowWidth = window.innerWidth;
if (this.left + this.width * 0.5 < windowWidth * 0.5) {
this.left = 0;
} else {
this.left = windowWidth - 50;
}
} else {
this.moveEditor(this.left, this.top);
}
},
moveFunc(e) {
e.preventDefault();
const deltaX = initX - e.clientX;
const deltaY = initY - e.clientY;
if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {
this.moving = true;
}
this.moveEditor(leftX - deltaX, topY - deltaY);
},
moveEditor(x, y) {
const showSidebar = this.showSidebar;
let nextTop = y;
if (nextTop < 0) nextTop = 0;
const maxTop = window.innerHeight - (showSidebar ? (this.height + 5) : 50);
if (nextTop > maxTop) nextTop = maxTop;
this.top = nextTop;
let nextLeft = x;
if (nextLeft < 0) nextLeft = 0;
const maxLeft = window.innerWidth - (showSidebar ? (this.width + 5) : 50);
if (nextLeft > maxLeft) nextLeft = maxLeft;
this.left = nextLeft;
},
onGalleryAction(key, value) {
switch (key) {
case 'edit':
this.themeName = value.name;
this.themeConfig = JSON.parse(value.theme);
bus.$emit(ACTION_APPLY_THEME, this.themeConfig);
this.activeTab = 'config';
break;
default:
return;
}
},
onTabClick(e) {
if (e && e.name === 'gallery') {
this.$refs.gallery.init();
}
},
onUserConfigUpdate(userConfig) {
if (this.themeName) {
this.userTheme.forEach((config) => {
if (config.name === this.themeName) {
config.update = Date.now();
config.theme = JSON.stringify(userConfig);
}
});
} else {
this.themeName = `Theme-${Date.now()}`;
this.userTheme.push({
update: Date.now(),
name: this.themeName,
theme: JSON.stringify(userConfig)
});
}
saveUserThemeToLocal(this.userTheme);
}
}
};
</script>
<style scoped>
.ext-panel {
position: fixed;
background: transparent;
user-select: none;
z-index: 100000;
}
.ext-panel.moving{
cursor: move;
}
.ext-panel.moving .touch-icon{
cursor: move;
}
.ext-panel .touch-icon{
cursor: pointer;
}
.ext-panel .close {
position: absolute;
right: 0;
top: 0;
height: 20px;
width: 20px;
z-index: 100001;
}
.ext-panel .entrance {
height: 50px;
width: 50px;
}
.ext-panel .editor {
overflow: hidden;
background: #f5f7fa;
border: 1px solid #ebeef5;
border-radius: 5px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
margin: 5px 5px 0 0;
min-width: 261px;
}
</style>
<style>
.ext-panel .editor .el-tabs__content, .ext-panel .editor .el-tabs--top, .ext-panel .editor .el-tab-pane {
height: 100%;
}
.ext-panel .el-tabs__nav-scroll >div {
transform: translateX(60px)!important;
}
.ext-panel .editor-main {
padding: 0 18px 70px;
}
</style>

View File

@@ -0,0 +1,185 @@
<template>
<div :style="{
height: `${height}px`,
width: `${width}px`
}"
class="main"
>
<ul
class="theme-card-list"
>
<li class="theme-card" v-for="item in userTheme" :key="item.name">
<theme-card type="user" :config="item" @action="onAction" from="extension"></theme-card>
</li>
<li class="theme-card">
<theme-card type="upload" :config="{name: 'upload'}" @action="onAction"></theme-card>
</li>
</ul>
<el-dialog :visible.sync="copyDialogVisible" :modal-append-to-body="false">
<el-form :model="copyForm" ref="copyForm" :rules="copyFormRule">
<el-form-item label="主题名称" prop="name">
<el-input v-model="copyForm.name"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="closeCopyForm">取消</el-button>
<el-button type="primary" @click="copyToUser">确认</el-button>
</div>
</el-dialog>
</div>
</template>
<style scoped>
ul, li {
padding: 0;
margin: 0;
}
.main {
overflow: auto;
}
.theme-card-list {
padding-bottom: 50px;
width: 90%;
margin: 0 auto;
}
.theme-card {
display: inline-block;
height: 140px;
height: 15vw;
width: 100%;
max-height: 230px;
flex: 0 0 24%;
cursor: default;
vertical-align: bottom;
}
</style>
<style>
.theme-card .theme-card-item {
margin-top: 0;
}
.theme-card .theme-card-item.is-upload {
height: 80%
}
</style>
<script>
import ThemeCard from '../../../components/theme/theme-card.vue';
import { loadUserThemeFromLocal, saveUserThemeToLocal } from './utils';
export default {
props: {
height: Number,
width: Number
},
data() {
return {
userTheme: [],
copyDialogVisible: false,
copyForm: {},
copyFormRule: {
name: [{
validator: this.validateCopyName,
trigger: 'blur'
}]
}
};
},
components: {
ThemeCard
},
mounted() {
this.init();
},
methods: {
init() {
loadUserThemeFromLocal().then(result => {
if (!result) return;
this.userTheme = result;
});
},
onAction(key, value) {
switch (key) {
case 'copy':
this.openCopyForm(value.theme);
break;
case 'upload':
this.openCopyForm(value);
break;
case 'delete':
this.$confirm('确定要删除这个主题?', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.deleteUserThemeByName(value.name);
}).catch(() => {});
break;
case 'rename':
this.openRenameForm(value.name);
break;
default:
this.$emit('action', key, value);
return;
}
},
openCopyForm(theme) {
this.copyForm.theme = theme;
this.copyDialogVisible = true;
},
openRenameForm(name) {
this.copyForm.oldname = name;
this.copyDialogVisible = true;
},
closeCopyForm() {
this.copyDialogVisible = false;
this.$nextTick(() => {
this.copyForm = {};
});
},
validateCopyName(rule, value, callback) {
if (!value) {
callback(new Error('主题名称是必填项'));
} else if (this.filterUserThemeByName(value).length > 0) {
callback(new Error('主题名称重复'));
} else {
callback();
}
},
copyToUser() {
this.$refs.copyForm.validate((valid) => {
if (valid) {
const { theme, name, oldname } = this.copyForm;
if (theme) {
// copy
this.userTheme.push({
update: Date.now(),
name,
theme
});
} else {
// rename
this.userTheme.forEach((config) => {
if (config.name === oldname) {
config.update = Date.now();
config.name = name;
}
});
}
this.saveToLocal();
this.closeCopyForm();
}
});
},
filterUserThemeByName(name, include = true) {
return this.userTheme.filter((theme) => (include ? theme.name === name : theme.name !== name));
},
saveToLocal() {
saveUserThemeToLocal(this.userTheme);
},
deleteUserThemeByName(name) {
this.userTheme = this.filterUserThemeByName(name, false);
this.saveToLocal();
}
}
};
</script>

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

View File

@@ -0,0 +1,13 @@
<template>
<editor />
</template>
<script>
import editor from './editor';
export default {
components: {
editor
}
};
</script>

View File

@@ -0,0 +1,18 @@
const ELEMENT_THEME_USER_CONFIG = 'ELEMENT_THEME_USER_CONFIG';
export const loadFromLocal = (key) => {
return new window.Promise((resolve) => {
chrome.storage.local.get([key], (result) => {
resolve(result[key]);
});
});
};
export const saveToLocal = (key, value) => {
chrome.storage.local.set({[key]: value});
};
export const loadUserThemeFromLocal = () => {
return loadFromLocal(ELEMENT_THEME_USER_CONFIG);
};
export const saveUserThemeToLocal = (value) => {
saveToLocal(ELEMENT_THEME_USER_CONFIG, value);
};

View File

@@ -0,0 +1,7 @@
import init from './app';
if (!window.ElementThemeRollerInit) {
window.ElementThemeRollerInit = true;
init();
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

View File

@@ -0,0 +1,27 @@
{
"name": "Element Theme Roller",
"version": "0.0.9",
"description": "Customize all Design Tokens of Element UI and preview in real-time",
"web_accessible_resources": ["entry.js"],
"background": {
"scripts": [
"background.js"
],
"persistent": true
},
"icons": {
"128": "icon.png"
},
"browser_action": {
"default_icon": "icon.png",
"default_title": "Element Theme Roller"
},
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"manifest_version": 2,
"permissions": [
"activeTab",
"storage",
"https://*.ele.me/",
"https://*.elenet.me/"
]
}

View File

@@ -248,6 +248,10 @@
"path": "/popover",
"title": "Popover 弹出框"
},
{
"path": "/popconfirm",
"title": "Popconfirm 气泡确认框"
},
{
"path": "/card",
"title": "Card 卡片"
@@ -538,6 +542,10 @@
"path": "/popover",
"title": "Popover"
},
{
"path": "/popconfirm",
"title": "Popconfirm"
},
{
"path": "/card",
"title": "Card"
@@ -832,6 +840,10 @@
"path": "/popover",
"title": "Popover"
},
{
"path": "/popconfirm",
"title": "Popconfirm"
},
{
"path": "/card",
"title": "Card"
@@ -1126,6 +1138,10 @@
"path": "/popover",
"title": "Popover"
},
{
"path": "/popconfirm",
"title": "Popconfirm"
},
{
"path": "/card",
"title": "Card"

View File

@@ -179,7 +179,7 @@
}
}
fragments = fragments.replace(/#(\d+)/g, '<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>');
fragments = fragments.replace(/@(\w+)/g, '<a href="https://github.com/$1" target="_blank">@$1</a>');
fragments = fragments.replace(/@([\w-]+)/g, '<a href="https://github.com/$1" target="_blank">@$1</a>');
this.$refs.timeline.innerHTML = `${fragments}</li>`;
changeLog.$el.remove();

View File

@@ -366,40 +366,10 @@
</li>
</ul>
</div>
<div class="theme-intro-a" v-if="showIntroA" @click="hideIntroA">
<div class="intro-banner">
<img src="~examples/assets/images/theme-intro.png" alt="">
<div class="intro-text">
<p><%= 12 ></p>
</div>
</div>
<div class="mask"></div>
</div>
<div
class="theme-intro-b"
@click="hideIntroB"
v-if="showIntroB"
>
<div class="intro-banner"
:style="{
left: introBX + 'px',
top: introBY + 'px'
}"
>
<img src="~examples/assets/images/intro-theme-b.png" alt="">
<div class="title">
<div>
<p><%= 13 ></p>
<p><%= 14 ></p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import throttle from 'throttle-debounce/throttle';
import { addClass, removeClass } from 'element-ui/src/utils/dom';
export default {
created() {
@@ -416,28 +386,12 @@
if (calHeight < 0) calHeight = 0;
if (calHeight > eleHeight) calHeight = eleHeight;
this.mainImgOffset = calHeight;
},
hideIntroB() {
removeClass(document.body, 'el-loading-parent--hidden');
localStorage.setItem('KNOW_THEME', 'true');
this.showIntroB = false;
},
hideIntroA() {
const themeTab = document.querySelector('.nav-item-theme');
this.introBX = themeTab.offsetLeft + (themeTab.clientWidth * 0.5) - (300 / 2);
this.introBY = themeTab.offsetTop + 40;
this.showIntroA = false;
this.showIntroB = true;
}
},
data() {
return {
lang: this.$route.meta.lang,
mainImgOffset: 0,
showIntroA: false,
showIntroB: false,
introBY: 0,
introBX: 0
mainImgOffset: 0
};
},
beforeDestroy() {
@@ -445,9 +399,6 @@
},
mounted() {
window.addEventListener('scroll', this.throttledHandleScroll);
if (localStorage.getItem('KNOW_THEME')) return;
this.showIntroA = true;
addClass(document.body, 'el-loading-parent--hidden');
}
};
</script>

Some files were not shown because too many files have changed in this diff Show More