diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 5567c8215..11d021c4a 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -1,4 +1,13 @@ # CHANGELOG +## 1.0.9 (2020-04-23) +### Features +- Add `autofocus` prop on `n-input`. +- Add `closable` option on `NMessage`. +### Fixes +- Fix the problem that the default value of `n-tag` `closable` is set to `true`. +- Fix the problem that `n-data-table` can't use all `pagination`'s props. +- Fix the problem that `n-pagination`'s `on-page-size-change` prop doesn't work. + ## 1.0.7 (2020-04-10) ### Features - Add `filter-option-value` prop for `n-data-table`'s `column` to better deal with single filter mode. diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index b08ea01a9..d7e9dcf3a 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -1,4 +1,13 @@ # CHANGELOG +## 1.0.9 (2020-04-23) +### Features +- 为 `n-input` 增加了 `autofocus` 选项 +- 为 `NMessage` 增加了 `closable` 选项 +### Fixes +- 解决了 `n-tag` `closable` 默认值被设为 `true` 的问题 +- 解决了 `n-data-table` 不能使用全部 `pagination` prop 的问题 +- 解决了 `n-pagination` `on-page-size-change` 不生效的问题 + ## 1.0.7 (2020-04-10) ### Features - 为 `n-data-table` 的 `column` 增加了 `filter-option-value` 的属性来应对单选的情况 diff --git a/demo/documentation/components/dataTable/enUS/controlledPage.md b/demo/documentation/components/dataTable/enUS/controlledPage.md index cda7a1dc4..c2a9c46cc 100644 --- a/demo/documentation/components/dataTable/enUS/controlledPage.md +++ b/demo/documentation/components/dataTable/enUS/controlledPage.md @@ -1,5 +1,4 @@ # Controlled Pagination - ```html { - return ( - 5 ? 'warning' : 'default'} - > - {tagKey} - - ) - }) - return tags - } } ] -const data = [ - { - key: 0, - name: 'John Brown', - age: 32, - address: 'New York No. 1 Lake Park', - tags: ['nice', 'developer'] - }, - { - key: 1, - name: 'Jim Green', - age: 42, - address: 'London No. 1 Lake Park', - tags: ['loser'] - }, - { - key: 2, - name: 'Joe Black', - age: 32, - address: 'Sidney No. 1 Lake Park', - tags: ['cool', 'teacher'] - } -] +const data = Array.apply(null, { length: 46 }).map((_, index) => ({ + key: index, + name: `Edward King ${index}`, + age: 32, + address: `London, Park Lane no. ${index}` +})) + export default { data() { @@ -73,15 +39,16 @@ export default { columns, pagination: { page: 2, - pageCount: data.length, - pageSize: 1, + pageSize: 5, + showSizePicker: true, + pageSizes: [3, 5, 7], onChange: page => { this.pagination.page = page + }, + onPageSizeChange: pageSize => { + this.pagination.pageSize = pageSize } } } - }, - methods: { } -} -``` +} \ No newline at end of file diff --git a/demo/documentation/components/dataTable/zhCN/controlledPage.md b/demo/documentation/components/dataTable/zhCN/controlledPage.md index 6ed36ed99..6d312885f 100644 --- a/demo/documentation/components/dataTable/zhCN/controlledPage.md +++ b/demo/documentation/components/dataTable/zhCN/controlledPage.md @@ -22,49 +22,16 @@ const columns = [ { title: 'Address', key: 'address' - }, - { - title: 'Tags', - key: 'tags', - render (h, row) { - const tags = row.tags.map(tagKey => { - return ( - 5 ? 'warning' : 'default'} - > - {tagKey} - - ) - }) - return tags - } } ] -const data = [ - { - key: 0, - name: 'John Brown', - age: 32, - address: 'New York No. 1 Lake Park', - tags: ['nice', 'developer'] - }, - { - key: 1, - name: 'Jim Green', - age: 42, - address: 'London No. 1 Lake Park', - tags: ['loser'] - }, - { - key: 2, - name: 'Joe Black', - age: 32, - address: 'Sidney No. 1 Lake Park', - tags: ['cool', 'teacher'] - } -] +const data = Array.apply(null, { length: 46 }).map((_, index) => ({ + key: index, + name: `Edward King ${index}`, + age: 32, + address: `London, Park Lane no. ${index}` +})) + export default { data() { @@ -73,15 +40,17 @@ export default { columns, pagination: { page: 2, - pageCount: data.length, - pageSize: 1, + pageSize: 5, + showSizePicker: true, + pageSizes: [3, 5, 7], onChange: page => { this.pagination.page = page + }, + onPageSizeChange: pageSize => { + this.pagination.pageSize = pageSize } } } - }, - methods: { } } ``` diff --git a/demo/documentation/components/input/enUS/index.md b/demo/documentation/components/input/enUS/index.md index e8aaead6d..b1f28d351 100644 --- a/demo/documentation/components/input/enUS/index.md +++ b/demo/documentation/components/input/enUS/index.md @@ -41,6 +41,7 @@ passively-activated |seperator|`string`|`null`|The seperator bewteen pairwise inputs.| |placeholder|`string \| [string, string]`|`null`|Placeholder of input. When `pair` is `true`, placeholder is an array.| |passively-activated|`boolean`|`false`|| +|autofocus|`boolean`|`false`|| ## Slots ### Input Slots diff --git a/demo/documentation/components/input/zhCN/index.md b/demo/documentation/components/input/zhCN/index.md index b1752ffc7..3d06bc60a 100644 --- a/demo/documentation/components/input/zhCN/index.md +++ b/demo/documentation/components/input/zhCN/index.md @@ -41,6 +41,8 @@ passively-activated |seperator|`string`|`null`|成对的值中间的分隔符| |placeholder|`string \| [string, string]`|`null`|文本输入的占位符。如果是 `pair` 是 `true`，`placeholder`是一个数组| |passively-activated|`boolean`|`false`|| +|autofocus|`boolean`|`false`|| + ## Slots ### Input Slots diff --git a/demo/documentation/components/message/enUS/closable.md b/demo/documentation/components/message/enUS/closable.md new file mode 100644 index 000000000..c184523be --- /dev/null +++ b/demo/documentation/components/message/enUS/closable.md @@ -0,0 +1,23 @@ +# Closable +Set `closable` to make message closable by a click. +```html + + Open a Message + +``` + +```js +export default { + methods: { + emitInfo() { + this.$NMessage.success( + "I don't know why nobody told you how to unfold your love", + { + closable: true, + duration: 5000 + } + ) + } + } +} +``` \ No newline at end of file diff --git a/demo/documentation/components/message/enUS/index.md b/demo/documentation/components/message/enUS/index.md index f49132267..efec41800 100644 --- a/demo/documentation/components/message/enUS/index.md +++ b/demo/documentation/components/message/enUS/index.md @@ -5,6 +5,7 @@ Oracle from the top(always) of the browser. basic icon timing +closable modify-content manually-close about-theme @@ -26,6 +27,7 @@ about-theme |content|`string \|(() => VNode \| Array)`|Can be a render function| |icon|`() => VNode`|Can be a render function| |theme|`'light' \| 'dark'`|| +|closable|`boolean`|| |onHide|`function`|| |onAfterHide|`function`|| @@ -36,6 +38,7 @@ about-theme |content|`string \| (() => VNode \| Array)`|Can be a render function| |icon|`string \| (() => VNode)`|Can be a render function| |type|`'info' \| 'success' \| 'warning' \| 'error' \| 'loading'`|| +|closable|`boolean`|| |onHide|`function`|| |onAfterHide|`function`|| diff --git a/demo/documentation/components/message/zhCN/closable.md b/demo/documentation/components/message/zhCN/closable.md new file mode 100644 index 000000000..718f68182 --- /dev/null +++ b/demo/documentation/components/message/zhCN/closable.md @@ -0,0 +1,23 @@ +# 可关闭 +设定 `closable` 使 Message 可以通过点击关闭。 +```html + + 打开信息 + +``` + +```js +export default { + methods: { + emitInfo() { + this.$NMessage.info( + "I don't know why nobody told you how to unfold your love", + { + closable: true, + duration: 5000 + } + ) + } + } +} +``` \ No newline at end of file diff --git a/demo/documentation/components/message/zhCN/index.md b/demo/documentation/components/message/zhCN/index.md index c8eeba58a..912bbe137 100644 --- a/demo/documentation/components/message/zhCN/index.md +++ b/demo/documentation/components/message/zhCN/index.md @@ -5,6 +5,7 @@ basic icon timing +closable modify-content manually-close about-theme @@ -26,6 +27,7 @@ about-theme |content|`string \| (() => VNode \| Array)`|可以是 render 函数| |icon|`() => VNode`|可以是 render 函数| |theme|`'light' \| 'dark'`|| +|closable|`boolean`|| |onHide|`function`|| |onAfterHide|`function`|| @@ -36,6 +38,7 @@ about-theme |content|`string \| (() => VNode \| Array)`|可以是 render 函数| |icon|`string \| (() => VNode)`|可以是 render 函数| |type|`'info' \| 'success' \| 'warning' \| 'error' \| 'loading'`|| +|closable|`boolean`|| |onHide|`function`|| |onAfterHide|`function`|| diff --git a/demo/documentation/components/tabs/zhCN/basic.md b/demo/documentation/components/tabs/zhCN/basic.md index 6064f9540..91a71e8f5 100644 --- a/demo/documentation/components/tabs/zhCN/basic.md +++ b/demo/documentation/components/tabs/zhCN/basic.md @@ -31,7 +31,7 @@ > @@ -41,7 +41,7 @@ - 登陆 + 登录 @@ -42,7 +42,7 @@ - 登陆 + 登录 {}, onAfterHide: () => {} } @@ -31,14 +33,20 @@ export default { }, mounted () { if (this.duration) { - window.setTimeout(this.hide, this.duration) + this.timerId = window.setTimeout(this.hide, this.duration) } }, methods: { hide () { this.active = false + if (this.timerId) { + window.clearTimeout(this.timerId) + } this.onHide() }, + handleClose () { + this.hide() + }, deactivate () { this.hide() }, @@ -61,11 +69,15 @@ export default { [ this.active ? h(NMessage, { + on: { + close: this.handleClose + }, props: { theme: this.syntheticTheme, content: this.content, type: this.type, - icon: this.icon + icon: this.icon, + closable: this.closable } }) : null ] diff --git a/src/Message/src/MessagePlugin.js b/src/Message/src/MessagePlugin.js index d30839d8c..dfca70908 100644 --- a/src/Message/src/MessagePlugin.js +++ b/src/Message/src/MessagePlugin.js @@ -50,6 +50,7 @@ function updateMessage (instance, content, option) { instance.type = option.type instance.content = content instance.theme = option.theme + instance.closable = option.closable instance.inheritedTheme = option.inheritedTheme } diff --git a/src/Pagination/src/main.vue b/src/Pagination/src/main.vue index 25a4851cd..3f42d5a9c 100644 --- a/src/Pagination/src/main.vue +++ b/src/Pagination/src/main.vue @@ -87,7 +87,7 @@ :options="pageSizeOptions" :value="pageSize" :disabled="disabled" - @input="handleSizePickerInput" + @change="handleSizePickerChange" /> @@ -243,7 +243,7 @@ export default { const page = Math.max(this.page - (this.pageSlot - 4), 1) this.changeCurrentPage(page) }, - handleSizePickerInput (value) { + handleSizePickerChange (value) { this.changePageSize(value) }, handleQuickJumperKeyUp (e) { diff --git a/src/Tag/src/DynamicTags.vue b/src/Tag/src/DynamicTags.vue index fcb42857c..0ce372992 100644 --- a/src/Tag/src/DynamicTags.vue +++ b/src/Tag/src/DynamicTags.vue @@ -18,11 +18,12 @@ v-if="inputVisible" ref="tagInput" v-model="inputValue" + :force-focus="inputForceFocused" :theme="theme" :style="inputStyle" :size="inputSize" @keyup.enter.native="handleInputConfirm" - @blur="handleInputConfirm" + @blur="handleInputBlur" /> - + {{ localizedAdd }} + @@ -42,21 +47,34 @@ import asformitem from '../../_mixins/asformitem' import locale from '../../_mixins/locale' import NTag from './main' import commonProps from './commonProps' +import NIcon from '../../Icon' +import addOutline from '../../_icons/add-outline' export default { name: 'NDynamicTags', components: { - NTag + NTag, + NIcon, + addOutline }, - mixins: [withapp, themeable, locale('Tag'), asformitem({ - change: 'change' - })], + mixins: [ + withapp, + themeable, + locale('Tag'), + asformitem({ + change: 'change' + }) + ], model: { name: 'value', event: 'change' }, props: { ...commonProps, + closable: { + type: Boolean, + default: true + }, value: { type: Array, default: () => { @@ -67,8 +85,7 @@ export default { type: Object, default: () => { return { - marginRight: '5px', - marginBottom: '5px' + marginRight: '6px' } } }, @@ -76,7 +93,7 @@ export default { type: Object, default: () => { return { - width: '50px' + width: '64px' } } } @@ -84,7 +101,8 @@ export default { data () { return { inputValue: '', - inputVisible: false + inputVisible: false, + inputForceFocused: true } }, computed: { @@ -111,12 +129,17 @@ export default { this.$emit('change', tags) } this.inputVisible = false + this.inputForceFocused = true this.inputValue = '' }, + handleInputBlur () { + this.handleInputConfirm() + }, handleAddClick () { this.inputVisible = true this.$nextTick(() => { this.$refs.tagInput.focus() + this.inputForceFocused = false }) } } diff --git a/src/Tag/src/commonProps.js b/src/Tag/src/commonProps.js index 030f70d09..20f3fde12 100644 --- a/src/Tag/src/commonProps.js +++ b/src/Tag/src/commonProps.js @@ -17,7 +17,7 @@ export default { }, closable: { type: Boolean, - default: true + default: false }, disabled: { type: Boolean, diff --git a/styles/Message.scss b/styles/Message.scss index f5ba5ffc7..b422987d6 100644 --- a/styles/Message.scss +++ b/styles/Message.scss @@ -11,6 +11,23 @@ stroke: $--message-icon-color; } } + @if $type == 'loading' { + @include e(close) { + @include b(icon) { + cursor: pointer; + fill: map-get($--message-loading-close-color, 'default'); + stroke: map-get($--message-loading-close-color, 'default'); + &:hover { + fill: map-get($--message-loading-close-color, 'hover'); + stroke: map-get($--message-loading-close-color, 'hover'); + } + &:active { + fill: map-get($--message-loading-close-color, 'active'); + stroke: map-get($--message-loading-close-color, 'active'); + } + } + } + } } } @@ -81,6 +98,31 @@ font-size: 20px; } } + @include e(close) { + height: 40px; + display: flex; + align-items: center; + font-size: 19px; + margin-left: 12px; + } + } + @include e(close) { + @include b(icon) { + cursor: pointer; + fill: map-get($--message-close-color, 'default'); + stroke: map-get($--message-close-color, 'default'); + &:hover { + fill: map-get($--message-close-color, 'hover'); + stroke: map-get($--message-close-color, 'hover'); + } + &:active { + fill: map-get($--message-close-color, 'active'); + stroke: map-get($--message-close-color, 'active'); + } + } + } + @include m(closable) { + padding-right: 24px; } @include message-type-mixin('info'); @include message-type-mixin('success'); diff --git a/styles/Tag.scss b/styles/Tag.scss index 17ee2ed4f..ffd3b79dd 100644 --- a/styles/Tag.scss +++ b/styles/Tag.scss @@ -144,4 +144,8 @@ } } } +} + +@include b(dynamic-tags) { + display: inline-flex; } \ No newline at end of file diff --git a/styles/themes/dark/components/Message.scss b/styles/themes/dark/components/Message.scss index fb88ff718..c10b1f0d3 100644 --- a/styles/themes/dark/components/Message.scss +++ b/styles/themes/dark/components/Message.scss @@ -7,6 +7,16 @@ "loading": $--n-secondary-text-color ) !global; $--message-icon-color: rgba(255, 255, 255, .5) !global; + $--message-close-color: ( + "default": rgba(255, 255, 255, .5), + "hover": rgba(255, 255, 255, .6), + "active": rgba(255, 255, 255, .4) + ) !global; + $--message-loading-close-color: ( + "default": rgba(255, 255, 255, .5), + "hover": rgba(255, 255, 255, .6), + "active": rgba(255, 255, 255, .4) + ) !global; $--message-background-color: ( "info": $--n-info-hs-color, "success": $--n-success-hs-color, diff --git a/styles/themes/light/components/Message.scss b/styles/themes/light/components/Message.scss index 787b865af..e982309f5 100644 --- a/styles/themes/light/components/Message.scss +++ b/styles/themes/light/components/Message.scss @@ -7,6 +7,16 @@ "loading": $--n-secondary-text-color ) !global; $--message-icon-color: rgba(255, 255, 255, .45) !global; + $--message-close-color: ( + "default": rgba(255, 255, 255, .5), + "hover": rgba(255, 255, 255, .6), + "active": rgba(255, 255, 255, .4) + ) !global; + $--message-loading-close-color: ( + 'default': $--n-close-color, + 'hover': $--n-close-hover-color, + 'active': $--n-close-color + ) !global; $--message-background-color: ( "info": $--n-info-color, "success": $--n-success-color,