Merge remote-tracking branch 'upstream/develop' into develop

CHANGELOG.en-US.md

@@ -1,4 +1,14 @@
 # CHANGELOG
+## 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.
+### Fixes
+- Fix the problem that `n-collpase-item` don't support `number` typed `name`.
+
+## 1.0.6 (2020-04-03)
+### Fixes
+- Fix the problem that all the `console` statements are stripped in the bundle.
+
 ## 1.0.5 (2020-03-27)
 ### Features
 - Change the data type of `n-data-table`'s filters from Array to Object.

CHANGELOG.zh-CN.md

@@ -1,9 +1,19 @@
 # CHANGELOG
+## 1.0.7 (2020-04-10)
+### Features
+- 为 `n-data-table` 的 `column` 增加了 `filter-option-value` 的属性来应对单选的情况
+### Fixes
+- 解决了 `n-collpase-item` 不支持 `number` 的问题
+
+## 1.0.6 (2020-04-03)
+### Fixes
+- 解决了所有的 `console` 语句都在打包中被删除了的问题
+
 ## 1.0.5 (2020-03-27)
 ### Features
-- 改变 `n-data-table` 的 filters 的数据类型, 从数组改变成对象.
+- 改变 `n-data-table` 的 filters 的数据类型从数组改变成对象
 ### Fixes
-- `n-data-table`在有多列筛选的情况下数据不能被正确筛选.
+- `n-data-table` 在有多列筛选的情况下数据不能被正确筛选
 
 ## 1.0.4 (2020-03-26)
 ### Features

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

@@ -17,7 +17,7 @@ const addressColumn = {
   title: 'Address',
   key: 'address',
   filterMultiple: false,
-  filterOptionValues: [],
+  filterOptionValue: null,
   sorter: 'default',
   filterOptions: [
     {
@@ -90,14 +90,14 @@ export default {
   },
   methods: {
     filterAddress () {
-      this.addressColumn.filterOptionValues = ['London']
+      this.addressColumn.filterOptionValue = 'London'
     },
     unfilterAddress () {
-      this.addressColumn.filterOptionValues = []
+      this.addressColumn.filterOptionValue = null
     },
     handleFiltersChange (filters, sourceColumn) {
       console.log(filters, sourceColumn)
-      this.addressColumn.filterOptionValues = filters[sourceColumn.key]
+      this.addressColumn.filterOptionValue = filters[sourceColumn.key]
     }
   }
 }

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

@@ -29,7 +29,7 @@ const columns = [
   {
     title: 'Address',
     key: 'address',
-    defaultFilterOptionValues: ['London', 'New York'],
+    defaultFilterOptionValues: [ 'London', 'New York' ],
     filterOptions: [
       {
         label: 'London',
@@ -84,8 +84,7 @@ export default {
   methods: {
     filterAddress () {
       this.$refs.table.filter({
-        columnKey: 'address',
-        filterOptionValue: 'London'
+        address: [ 'London' ]
       })
     },
     sortName () {

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

@@ -42,7 +42,7 @@ ajaxUsage
 |pagination|`false \| object`|`false`|See [Pagination props](n-pagination#Props)|
 |paging|`boolean`|If data-table do automatic paging. You may set it to `false` in async usage.|
 |row-class-name|`string \| (rowData: object, index : number) => string \| object`|`null`||
-|checked-row-keys|`Array<string \| number> \| null`|`null`||
+|checked-row-keys|`Array<string \| number> \| null`|`null`|The keys of checked rows.|
 |default-checked-row-keys|`Array<string \| number>`|`[]`||
 |row-key|`(rowData: object) => number \| string`|`null`|Generate the key of the row by row data (if you don't want to set the key)|
 |bordered|`boolean`|`true`||
@@ -55,8 +55,8 @@ These methods can help you control table in an uncontrolled manner. However, it'
 
 |Name|Type|Description|
 |-|-|-|
-|filters|`(filters: { [string \| number]: Array<string \| number> }) => void`|Key is the key of the column, value is the filterOptionValues.|
-|sort|`(columnKey: string \| null, order: 'ascend' \| 'descend' \| false) => void`|If columnKey set to `null`, it is same as clearSorter|
+|filters|`(filters: { [string \| number]: Array<string \| number> \| string \| number }) => void`|Set the active filters of the table.|
+|sort|`(columnKey: string \| null, order: 'ascend' \| 'descend' \| false) => void`|If columnKey set to `null`, it is the same as clearSorter.|
 |page|`(page: number) => void`||
 |clearFilters|`() => void`||
 |clearSorter|`() => void`||
@@ -65,15 +65,15 @@ These methods can help you control table in an uncontrolled manner. However, it'
 ## Events
 |Name|Parameters|Description|
 |-|-|-|
-|filters-change|`(filters: { [string \| number]: Array<string \| number> }, initiatorColumn: object)`||
+|filters-change|`(filters: { [string \| number]: Array<string \| number> }, initiatorColumn: Column)`||
 |sorter-change|`({ columnKey: string \| number, sorter: 'default' \| function \| boolean, order: 'ascend' \| 'descend' \| false } \| null)`|If there won't be a active sorter after change, sorter-change will emit `null`|
 |page-change|`(page: number)`||
 |page-size-change|`(pageSize: number)`||
 |checked-row-keys-change|`(keys: Array<string \| number>)`||
 
 ## API
-### Column
-|Property|Type|Default|Description|
+### Column Properties
+|Name|Type|Default|Description|
 |-|-|-|-|
 |render|`(h, rowData: object) => VNode \| Array<VNode>`|`null`|Render function of column row cell|
 |type|`'default' \| 'selection'`|`default`||
@@ -89,8 +89,10 @@ These methods can help you control table in an uncontrolled manner. However, it'
 |filter|`boolean \| (optionValue: string \| number, rowData: object) => boolean \| 'default'`|`false`|The filter of the column. If set to `true`, it will only display filter button on the column, which can be used in async status.|
 |filterMode|`'and' \| 'or'`|`'or'`||
 |filterOptions|`Array<{ label: string, value: string \| number}>`|`[]`||
-|filterOptionValues|`Array<string \| number> \| null`|`null`|The active filter option values in controlled manner. If set to `null`, the filter of the column works in an uncontrolled manner|
-|defaultFilterOptionValues|`Array<string \| number>`|`[]`|The default active filter option values in uncontrolled manner|
+|filterOptionValues|`Array<string \| number> \| null`|`undefined`|The active filter option values in controlled manner. If not set, the filter of the column works in an uncontrolled manner. (works when there are multiple filters)|
+|filterOptionValue|`string \| number \| null`|`undefined`|The active filter option value in controlled manner. If not set, the filter of the column works in an uncontrolled manner. (works when not using multiple filters)|
+|defaultFilterOptionValues|`Array<string \| number>`|`[]`|The default active filter option values in uncontrolled manner. (works when there are multiple filters)|
+|defaultFilterOptionValue|`string \| number`|`null`|The default active filter option value in uncontrolled manner. (works when not using multiple filters)|
 |filterMultiple|`boolean`|`true`||
 |fixed|`'left \| 'right' \| false`|`false`||
 |width|`number \| string`|`null`|Width of the column, **required** when fixed|

demo/documentation/components/dataTable/zhCN/controlledFilter.md

@@ -17,7 +17,7 @@ const addressColumn = {
   title: 'Address',
   key: 'address',
   filterMultiple: false,
-  filterOptionValues: [],
+  filterOptionValue: null,
   sorter: 'default',
   filterOptions: [
     {
@@ -90,14 +90,14 @@ export default {
   },
   methods: {
     filterAddress () {
-      this.addressColumn.filterOptionValues = ['London']
+      this.addressColumn.filterOptionValue = 'London'
     },
     unfilterAddress () {
-      this.addressColumn.filterOptionValues = []
+      this.addressColumn.filterOptionValue = null
     },
     handleFiltersChange (filters, sourceColumn) {
       console.log(filters, sourceColumn)
-      this.addressColumn.filterOptionValues = filters[sourceColumn.key]
+      this.addressColumn.filterOptionValue = filters[sourceColumn.key]
     }
   }
 }

demo/documentation/components/dataTable/zhCN/filterAndSorter.md

@@ -29,7 +29,7 @@ const columns = [
   {
     title: 'Address',
     key: 'address',
-    defaultFilterOptionValues: ['London', 'New York'],
+    defaultFilterOptionValues: [ 'London', 'New York' ],
     filterOptions: [
       {
         label: 'London',
@@ -84,8 +84,7 @@ export default {
   methods: {
     filterAddress () {
       this.$refs.table.filter({
-        columnKey: 'address',
-        filterOptionValue: 'London'
+        address: [ 'London' ]
       })
     },
     sortName () {

demo/documentation/components/dataTable/zhCN/index.md

@@ -42,7 +42,7 @@ ajaxUsage
 |pagination|`false \| object`|`false`|属性参考 [Pagination props](n-pagination#Props)|
 |paging|`boolean`|表格是否自动分页数据，在异步的状况下你可能需要把它设为 `false`|
 |row-class-name|`string \| (rowData: object, index : number) => string \| object`|`null`||
-|checked-row-keys|`Array<string \| number> \| null`|`null`||
+|checked-row-keys|`Array<string \| number> \| null`|`null`|被选中的列的 key|
 |default-checked-row-keys|`Array<string \| number>`|`[]`||
 |row-key|`(rowData: object) => number \| string`|`null`|通过行数据创建行的 key（如果你不想给每一行加上 key）|
 |bordered|`boolean`|`true`||
@@ -55,7 +55,7 @@ ajaxUsage
 
 |名称|参数|说明|
 |-|-|-|
-|filters|`(filters: { [string \| number]: Array<string \| number> }) => void`| Key 是列的 key, value 是 filterOptionValues.|
+|filters|`(filters: { [string \| number]: Array<string \| number> }) => void`|设定表格当前的过滤器|
 |sort|`(columnKey: string \| null, order: 'ascend' \| 'descend' \| false) => void`|如果 columnKey 设为 `null`，那它和 clearSorter 效果一致|
 |page|`(page: number) => void`||
 |clearFilters|`() => void`||
@@ -65,15 +65,15 @@ ajaxUsage
 ## Events
 |名称|参数|说明|
 |-|-|-|
-|filters-change|`(filters: { [string \| number]: Array<string \| number> }, initiatorColumn: object)`||
+|filters-change|`(filters: { [string \| number]: Array<string \| number> \| string \| number }, initiatorColumn: Column)`||
 |sorter-change|`({ columnKey: string \| number, sorter: 'default' \| function \| boolean, order: 'ascend' \| 'descend' \| false } \| null)`|如果在变动后没有激活的排序，那么 sorter-change 将发出 `null`|
 |page-change|`(page: number)`||
 |page-size-change|`(pageSize: number)`||
 |checked-row-keys-change|`(keys: Array<string \| number>)`||
 
 ## API
-### Column Type
-|属性|类型|默认值|说明|
+### Column Properties
+|名称|类型|默认值|说明|
 |-|-|-|-|
 |render|`(h, rowData: object) => VNode \| Array<VNode>`|`null`|渲染函数，渲染这一列的每一行的单元格|
 |type|`'default' \| 'selection'`|`default`||
@@ -89,8 +89,10 @@ ajaxUsage
 |filter|`boolean \| (optionValue: string \| number, rowData: object) => boolean \| 'default'`|`false`|这一列的过滤方法。如果设为 `true`，表格将只会在这列展示一个排序图标，在异步的时候可能有用。|
 |filterMode|`'and' \| 'or'`|`'or'`||
 |filterOptions|`Array<{ label: string, value: string \| number}>`|`[]`||
-|filterOptionValues|`Array<string \| number> \| null`|`null`|受控状态下，当前激活的过滤器选项值。如果设为 `null`，这一列的过滤行为将是非受控的|
-|defaultFilterOptionValues|`Array<string \| number>`|`[]`|非受控状态下默认的过滤器选项值|
+|filterOptionValues|`Array<string \| number> \| null`|`undefined`|受控状态下，当前激活的过滤器选项值数组。如果不做设定，这一列的过滤行为将是非受控的（过滤器多选时生效）|
+|filterOptionValue|`string \| number \| null`|`undefined`|受控状态下，当前激活的过滤器选项值。如果不做设定，这一列的过滤行为将是非受控的（过滤器单选时生效）|
+|defaultFilterOptionValues|`Array<string \| number>`|`[]`|非受控状态下默认的过滤器选项值（过滤器多选时生效）|
+|defaultFilterOptionValue|`string \| number`|`null`|非受控状态下默认的过滤器选项值（过滤器单选时生效）|
 |filterMultiple|`boolean`|`true`||
 |fixed|`'left \| 'right' \| false`|`false`||
 |width|`number \| string`|`null`|列的宽度，在列固定时是**必需**的|

demo/documentation/components/modal/enUS/index.md

@@ -23,6 +23,7 @@ preset-confirm-slot
 |show|`boolean`|`false`||
 |mask-closable|`boolean`|`true`|Whether to emit `hide` event when click mask.|
 |preset|`'card' \| 'confirm'`|`null`||
+|overlay-style|`object`|`null`|The content style when use `preset`.|
 
 ### Modal with Preset Card
 See [Card props](n-card#Props)

demo/documentation/components/modal/zhCN/index.md

@@ -27,6 +27,7 @@ dark4-debug
 |show|`boolean`|`false`||
 |mask-closable|`boolean`|`true`|点击遮罩时是否发出 `hide` 事件|
 |preset|`'card' \| 'confirm'`|`null`||
+|overlay-style|`object`|`null`|当使用 `preset` 时候内部内容的样式|
 
 ### Modal（Card 预设）
 参考 [Card props](n-card#Props)

package.json

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

rollup.config.js

@@ -1,6 +1,5 @@
 const vue = require('rollup-plugin-vue')
 const resolve = require('@rollup/plugin-node-resolve')
-const strip = require('@rollup/plugin-strip')
 const { terser } = require('rollup-plugin-terser')
 const naiveSCSSVariable = require('./build/naiveSCSSVarPlugin')
 
@@ -33,7 +32,6 @@ module.exports = {
       }
     }),
     naiveSCSSVariable(),
-    strip(),
     terser({
       mangle: false,
       output: {

src/Collapse/src/CollapseItem.vue

@@ -59,7 +59,7 @@ export default {
       default: null
     },
     name: {
-      type: String,
+      type: [ String, Number ],
       default: null
     }
   },

src/DataTable/src/DataTable.vue

@@ -99,9 +99,12 @@ function normalizeColumn (column) {
 
     filter: false,
     filterOptions: [],
-    filterOptionValues: null, // controlled
+    filterOptionValues: undefined, // controlled
+    filterOptionValue: undefined, // controlled
     filterMode: 'or',
-    defaultFilterOptionValues: [],
+    /** it is undefined due to compatibility */
+    defaultFilterOptionValues: undefined,
+    defaultFilterOptionValue: null,
     filterMultiple: true,
     fixed: false,
     width: null
@@ -153,7 +156,7 @@ export default {
       default: () => []
     },
     rowClassName: {
-      type: [String, Function],
+      type: [ String, Function ],
       default: ''
     },
     rowKey: {
@@ -169,7 +172,7 @@ export default {
       default: true
     },
     scrollX: {
-      type: [Number, String],
+      type: [ Number, String ],
       default: null
     },
     defaultCheckedRowKeys: {
@@ -265,10 +268,13 @@ export default {
       function createDefaultFilter (columnKey) {
         return (filterOptionValue, row) => ~String(row[columnKey]).indexOf(String(filterOptionValue))
       }
-      return this.data ? this.data.filter(row => {
+      const data = this.data
+      return data ? data.filter(row => {
         for (const columnKey of Object.keys(row)) {
-          const activeFilterOptionValues = syntheticActiveFilters[columnKey] || []
+          let activeFilterOptionValues = syntheticActiveFilters[columnKey]
+          if (activeFilterOptionValues == null) continue
           if (!activeFilterOptionValues.length) continue
+          if (!Array.isArray(activeFilterOptionValues)) activeFilterOptionValues = [activeFilterOptionValues]
           const columnToFilter = normalizedColumns.find(column => column.key === columnKey)
           /**
            * When async, filter won't be set, so data won't be filtered
@@ -299,15 +305,16 @@ export default {
     },
     syntheticActiveFilters () {
       const columnsWithControlledFilter = this.normalizedColumns.filter(column => {
-        return Array.isArray(column.filterOptionValues)
+        return column.filterOptionValues !== undefined || column.filterOptionValue !== undefined
       })
       const controlledActiveFilters = {}
       columnsWithControlledFilter.forEach(column => {
-        controlledActiveFilters[column.key] = column.filterOptionValues
+        controlledActiveFilters[column.key] = column.filterOptionValues || column.filterOptionValue || null
       })
       const activeFilters = Object.assign(
         createShallowClonedObject(this.internalActiveFilters),
-        controlledActiveFilters)
+        controlledActiveFilters
+      )
       return activeFilters
     },
     syntheticActiveSorter () {
@@ -467,8 +474,20 @@ export default {
           order: column.defaultSortOrder
         }
       }
-      if (column.filter && Array.isArray(column.defaultFilterOptionValues)) {
-        this.internalActiveFilters[column.key] = column.defaultFilterOptionValues
+      if (
+        column.filter
+      ) {
+        const defaultFilterOptionValues = column.defaultFilterOptionValues
+        if (column.filterMultiple) {
+          this.internalActiveFilters[column.key] = defaultFilterOptionValues || []
+        } else if (
+          defaultFilterOptionValues !== undefined
+        ) {
+          /** this branch is for compatibility, someone may use `values` in single filter mode */
+          this.internalActiveFilters[column.key] = defaultFilterOptionValues === null ? [] : defaultFilterOptionValues
+        } else {
+          this.internalActiveFilters[column.key] = column.defaultFilterOptionValue
+        }
       }
     })
     this.internalCheckedRowKeys = this.defaultCheckedRowKeys

src/DataTable/src/HeaderButton/FilterButton.vue

@@ -24,8 +24,9 @@
       <n-data-table-filter-menu
         :radio-group-name="column.key"
         :multiple="filterMultiple"
-        :value="activeFilterOptionValues"
+        :value="syntheticFilterValue"
         :options="options"
+        :column="column"
         @change="handleFilterChange"
         @cancel="handleFilterMenuCancel"
         @confirm="handleFilterMenuConfirm"
@@ -40,12 +41,9 @@ import NDataTableFilterMenu from './FilterMenu'
 import NPopover from '../../../Popover'
 import funnel from '../../../_icons/funnel'
 
-function createActiveFilters (allFilters, columnKey, filterOptionValues) {
-  if (!Array.isArray(filterOptionValues)) {
-    filterOptionValues = [filterOptionValues]
-  }
+function createActiveFilters (allFilters, columnKey, syntheticFilterValue) {
   const activeFilters = Object.assign({}, allFilters)
-  activeFilters[columnKey] = filterOptionValues
+  activeFilters[columnKey] = syntheticFilterValue
   return activeFilters
 }
 
@@ -81,25 +79,25 @@ export default {
     activeFilters () {
       return this.NDataTable.syntheticActiveFilters
     },
-    activeFilterOptionValues () {
+    syntheticFilterValue () {
       return this.activeFilters[this.column.key]
     },
     active () {
-      if (Array.isArray(this.activeFilterOptionValues)) {
-        return !!this.activeFilterOptionValues.length
+      if (Array.isArray(this.syntheticFilterValue)) {
+        return !!this.syntheticFilterValue.length
       }
-      return !!this.activeFilterOptionValues
+      return !!this.syntheticFilterValue
     },
     filterMultiple () {
       return this.column.filterMultiple !== false
     }
   },
   methods: {
-    handleFilterChange (filterOptionValues) {
+    handleFilterChange (syntheticFilterValue) {
       const nextActiveFilters = createActiveFilters(
         this.activeFilters,
         this.column.key,
-        filterOptionValues
+        syntheticFilterValue
       )
       this.NDataTable.changeFilters(nextActiveFilters, this.column)
     },

src/DataTable/src/HeaderButton/FilterMenu.vue

@@ -25,7 +25,7 @@
         :theme="theme"
         :name="radioGroupName"
         class="n-data-table-filter-menu__group"
-        :value="cachedValue && cachedValue[0]"
+        :value="radioGroupValue"
         @change="handleChange"
       >
         <n-radio
@@ -68,6 +68,7 @@ import NRadio from '../../../Radio/src/Radio'
 import NDivider from '../../../Divider'
 import NButton from '../../../Button'
 import NScrollbar from '../../../Scrollbar'
+import { shouldUseArrayInSingleMode } from '../utils'
 
 function isEqual (value, oldValue) {
   if (Array.isArray(value) && Array.isArray(oldValue)) {
@@ -95,6 +96,10 @@ export default {
     NScrollbar
   },
   props: {
+    column: {
+      type: Object,
+      required: true
+    },
     radioGroupName: {
       type: String,
       required: true
@@ -104,7 +109,7 @@ export default {
       required: true
     },
     value: {
-      type: Array,
+      type: [ Array, String, Number ],
       default: null
     },
     options: {
@@ -121,14 +126,29 @@ export default {
   computed: {
     theme () {
       return this.NDataTable.syntheticTheme
+    },
+    radioGroupValue () {
+      const cachedValue = this.cachedValue
+      if (
+        this.multiple ||
+        shouldUseArrayInSingleMode(this.column)
+      ) {
+        return (Array.isArray(cachedValue) && cachedValue.length && cachedValue[0]) || null
+      }
+      return cachedValue
     }
   },
   methods: {
     handleChange (value) {
       if (this.multiple) {
         this.cachedValue = value
+      } else if (
+        shouldUseArrayInSingleMode(this.column)
+      ) {
+        /** this branch is for compatibility */
+        this.cachedValue = [ value ]
       } else {
-        this.cachedValue = [value]
+        this.cachedValue = value
       }
     },
     handleConfirmClick (value) {
@@ -136,7 +156,14 @@ export default {
       this.$emit('confirm')
     },
     handleCancelClick () {
-      this.emitChangeEvent([])
+      if (
+        this.multiple ||
+        shouldUseArrayInSingleMode(this.column)
+      ) {
+        this.emitChangeEvent([])
+      } else {
+        this.emitChangeEvent(null)
+      }
       this.$emit('cancel')
     },
     emitChangeEvent (value) {

src/DataTable/src/utils.js

@@ -35,3 +35,13 @@ export function createRowKey (row, rowKey) {
   if (rowKey) return rowKey(row)
   return row.key
 }
+
+export function shouldUseArrayInSingleMode (column) {
+  return (
+    column.filterOptionValues !== undefined ||
+    (
+      column.filterOptionValue === undefined &&
+      column.defaultFilterOptionValues !== undefined
+    )
+  )
+}

src/Tree/src/Tree.js

@@ -152,7 +152,7 @@ export default {
     this.internalSelectedKeys = this.defaultSelectedKeys || []
     if (this.defaultExpandAll) {
       this.internalExpandedKeys = getAllKeys(this.data)
-      console.log('getAllKeys(this.data)', getAllKeys(this.data))
+      // console.log('getAllKeys(this.data)', getAllKeys(this.data))
     }
   },
   data () {
@@ -189,7 +189,7 @@ export default {
           this.filter
         )
         this.highlightKeys = highlightKeys
-        console.log(highlightKeys)
+        // console.log(highlightKeys)
         if (!this.hasExpandedKeys) {
           this.internalExpandedKeys = expandedKeysAfterChange
         }

styles/Button.scss

@@ -495,6 +495,15 @@
             }
           }
         }
+        @include m(warning-type) {
+          & + {
+            @include b(button) {
+              @include m(info-type) {
+                border-left-width: 0px;
+              }
+            }
+          }
+        }
       }
     }
   }
@@ -502,14 +511,14 @@
     display: inline-flex;
     flex-direction: column;
     @include b(button) {
-      &:first-child {
+      &:first-child:not(:last-child) {
         margin-bottom: 0!important;
         margin-left: 0!important;
         margin-right: 0!important;
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
       }
-      &:last-child {
+      &:last-child:not(:first-child) {
         margin-top: 0!important;
         margin-left: 0!important;
         margin-right: 0!important;