Merge pull request #114 from TuSimple/freestyle

Freestyle

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.

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` 的属性来应对单选的情况

demo/documentation/components/dataTable/enUS/controlledPage.md

@@ -1,5 +1,4 @@
 # Controlled Pagination
-
 ```html
 <n-data-table
   ref="table"
@@ -22,49 +21,16 @@ const columns = [
   {
     title: 'Address',
     key: 'address'
-  },
-  {
-    title: 'Tags',
-    key: 'tags',
-    render (h, row) {
-      const tags = row.tags.map(tagKey => {
-        return (
-          <n-tag
-            style='margin-right:5px'
-            type={tagKey.length > 5 ? 'warning' : 'default'}
-          >
-            {tagKey}
-          </n-tag>
-        )
-      })
-      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: {
   }
-}
-```
+}

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 (
-          <n-tag
-            style='margin-right:5px'
-            type={tagKey.length > 5 ? 'warning' : 'default'}
-          >
-            {tagKey}
-          </n-tag>
-        )
-      })
-      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: {
   }
 }
 ```

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

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

demo/documentation/components/message/enUS/closable.md

@@ -0,0 +1,23 @@
+# Closable
+Set `closable` to make message closable by a click.
+```html
+<n-button @click="emitInfo">
+  Open a Message
+</n-button>
+```
+
+```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
+        }
+      )
+    }
+  }
+}
+```

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<VNode>)`|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<VNode>)`|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`||
 

demo/documentation/components/message/zhCN/closable.md

@@ -0,0 +1,23 @@
+# 可关闭
+设定 `closable` 使 Message 可以通过点击关闭。
+```html
+<n-button @click="emitInfo">
+  打开信息
+</n-button>
+```
+
+```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
+        }
+      )
+    }
+  }
+}
+```

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<VNode>)`|可以是 render 函数|
 |icon|`() => VNode`|可以是 render 函数|
 |theme|`'light' \| 'dark'`||
+|closable|`boolean`||
 |onHide|`function`||
 |onAfterHide|`function`||
 
@@ -36,6 +38,7 @@ about-theme
 |content|`string \| (() => VNode \| Array<VNode>)`|可以是 render 函数|
 |icon|`string \| (() => VNode)`|可以是 render 函数|
 |type|`'info' \| 'success' \| 'warning' \| 'error' \| 'loading'`||
+|closable|`boolean`||
 |onHide|`function`||
 |onAfterHide|`function`||
 

demo/documentation/components/tabs/zhCN/basic.md

@@ -31,7 +31,7 @@
   >
     <n-tab-pane
       name="signin"
-      label="登陆"
+      label="登录"
     >
       <n-form>
         <n-form-item-row label="用户名">
@@ -41,7 +41,7 @@
           <n-input />
         </n-form-item-row>
       </n-form>
-      <n-button type="primary" block>登陆</n-button>
+      <n-button type="primary" block>登录</n-button>
     </n-tab-pane>
     <n-tab-pane
       name="signup"

demo/documentation/components/tabs/zhCN/flexLabel.md

@@ -32,7 +32,7 @@
   >
     <n-tab-pane
       name="signin"
-      label="登陆"
+      label="登录"
     >
       <n-form>
         <n-form-item-row label="用户名">
@@ -42,7 +42,7 @@
           <n-input />
         </n-form-item-row>
       </n-form>
-      <n-button type="primary" block>登陆</n-button>
+      <n-button type="primary" block>登录</n-button>
     </n-tab-pane>
     <n-tab-pane
       name="signup"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "A Vue UI Framework. Caring About Styles, Themed, Batteries Included.",
   "main": "lib/index.js",
   "module": "es/index.js",

src/DataTable/src/DataTable.vue

@@ -48,7 +48,10 @@
           :theme="syntheticTheme"
           :page="syntheticPagination.page"
           :page-count="syntheticPagination.pageCount"
+          :page-size="syntheticPagination.pageSize"
           :page-slot="pagination.pageSlot"
+          :page-sizes="pagination.pageSizes"
+          :show-size-picker="pagination.showSizePicker"
           :show-quick-jumper="!!pagination.showQuickJumper"
           :disabled="!!pagination.disabled"
           :on-change="syntheticOnPageChange"
@@ -371,11 +374,11 @@ export default {
         this.pagination.onPageSizeChange && this.pagination.onPageSizeChange(pageSize)
         // eslint-disable-next-line vue/no-side-effects-in-computed-properties
         this.internalPageSize = pageSize
-        this.$emit('change', {
-          sorter: createShallowClonedObject(this.syntheticActiveSorter),
-          pagination: createShallowClonedObject(this.syntheticPagination),
-          filters: createShallowClonedObject(this.syntheticActiveFilters)
-        })
+        // this.$emit('change', {
+        //   sorter: createShallowClonedObject(this.syntheticActiveSorter),
+        //   pagination: createShallowClonedObject(this.syntheticPagination),
+        //   filters: createShallowClonedObject(this.syntheticActiveFilters)
+        // })
         this.$emit('page-size-change')
       }
     },

src/Input/src/Input.vue

@@ -38,6 +38,7 @@
       :class="{
         'n-input__textarea--autosize': autosize
       }"
+      :autofocus="autofocus"
       :rows="rows"
       :placeholder="placeholder"
       :value="value"
@@ -64,6 +65,7 @@
         :minlength="minlength"
         :value="pair ? (value && value[0]) : value"
         :readonly="readonly"
+        :autofocus="autofocus"
         @blur="handleInputBlur"
         @focus="handleInputFocus"
         @input="handleInput($event, 0)"
@@ -249,6 +251,10 @@ export default {
     deactivateOnEnter: {
       type: Boolean,
       default: false
+    },
+    autofocus: {
+      type: Boolean,
+      default: false
     }
   },
   data () {

src/Message/src/Message.vue

@@ -4,6 +4,7 @@ import mdCheckmarkCircle from '../../_icons/md-checkmark-circle'
 import mdAlert from '../../_icons/md-alert'
 import mdInformationCircle from '../../_icons/md-information-circle'
 import mdCloseCircle from '../../_icons/md-close-circle'
+import mdClose from '../../_icons/md-close'
 import NBaseLoading from '../../_base/Loading'
 import IconSwitchTransition from '../../_transition/IconSwitchTransition'
 import render from '../../_utils/vue/render'
@@ -25,11 +26,20 @@ export default {
       type: [String, Function],
       default: null
     },
+    closable: {
+      type: Boolean,
+      default: false
+    },
     theme: {
       type: String,
       default: null
     }
   },
+  methods: {
+    handleCloseClick () {
+      this.$emit('close')
+    }
+  },
   render (h) {
     let icon = null
     if (this.icon) {
@@ -63,6 +73,7 @@ export default {
     return h('div', {
       staticClass: 'n-message',
       class: {
+        'n-message--closable': this.closable,
         [`n-message--${this.type}-type`]: true,
         [`n-${this.theme}-theme`]: this.theme
       }
@@ -88,7 +99,20 @@ export default {
             render: this.content
           }
         })
-      ])
+      ]),
+      this.closable
+        ? h('div', {
+          staticClass: 'n-message__close'
+        }, [
+          h(NIcon, {
+            nativeOn: {
+              click: this.handleCloseClick
+            }
+          }, [
+            h(mdClose)
+          ])
+        ])
+        : null
     ])
   }
 }

src/Message/src/MessageEnvironment.vue

@@ -14,12 +14,14 @@ export default {
   },
   data () {
     return {
+      timerId: null,
       active: true,
       inheritedTheme: null,
       theme: null,
       content: null,
       type: null,
       icon: null,
+      closable: false,
       onHide: () => {},
       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
       ]

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
 }
 

src/Pagination/src/main.vue

@@ -87,7 +87,7 @@
       :options="pageSizeOptions"
       :value="pageSize"
       :disabled="disabled"
-      @input="handleSizePickerInput"
+      @change="handleSizePickerChange"
     />
   </div>
 </template>
@@ -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) {

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"
     />
     <n-button
       v-else
@@ -30,7 +31,11 @@
       :size="inputSize"
       @click="handleAddClick"
     >
-      + {{ localizedAdd }}
+      <template v-slot:icon>
+        <n-icon>
+          <add-outline />
+        </n-icon>
+      </template>
     </n-button>
   </div>
 </template>
@@ -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
       })
     }
   }

src/Tag/src/commonProps.js

@@ -17,7 +17,7 @@ export default {
   },
   closable: {
     type: Boolean,
-    default: true
+    default: false
   },
   disabled: {
     type: Boolean,

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');

styles/Tag.scss

@@ -144,4 +144,8 @@
       }
     }
   }
+}
+
+@include b(dynamic-tags) {
+  display: inline-flex;
 }

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,

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,