Merge branch 'develop' of ***REMOVED*** into develop

CHANGELOG.en-US.md

@@ -1,4 +1,10 @@
 # CHANGELOG
+## 1.0.5 (2020-03-27)
+### Features
+- Change the data type of `n-data-table`'s filters from Array to Object.
+### Fixes
+- `n-data-table` cannot be filtered correctly when there are multiple filtered columns.
+
 ## 1.0.4 (2020-03-26)
 ### Features
 - Filter menu in `n-data-table` is scrollable when there are too many items.

CHANGELOG.zh-CN.md

@@ -1,4 +1,10 @@
 # CHANGELOG
+## 1.0.5 (2020-03-27)
+### Features
+- 改变 `n-data-table` 的 filters 的数据类型从数组改变成对象
+### Fixes
+- `n-data-table` 在有多列筛选的情况下数据不能被正确筛选
+
 ## 1.0.4 (2020-03-26)
 ### Features
 - 当选项过多时，`n-data-table` 过滤菜单的内容可以滚动

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

@@ -96,9 +96,8 @@ export default {
       this.addressColumn.filterOptionValues = []
     },
     handleFiltersChange (filters, sourceColumn) {
-      this.addressColumn.filterOptionValues = filters.filter(
-        filter => filter.columnKey === sourceColumn.key
-      ).map(filter => filter.filterOptionValue)
+      console.log(filters, sourceColumn)
+      this.addressColumn.filterOptionValues = filters[sourceColumn.key]
     }
   }
 }

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

@@ -55,8 +55,8 @@ These methods can help you control table in an uncontrolled manner. However, it'
 
 |Name|Type|Description|
 |-|-|-|
-|filters|`( columnKey: string \| number, filterOptionValue: string \| number } \| Array<{ columnKey: string \| number, filterOptionValue: string \| number }>)`||
-|sort|`(columnKey: string \| null, order: 'ascend' \| 'descend' \| false)`|If columnKey set to `null`, it is same as clearSorter|
+|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|
 |page|`(page: number) => void`||
 |clearFilters|`() => void`||
 |clearSorter|`() => void`||
@@ -65,7 +65,7 @@ These methods can help you control table in an uncontrolled manner. However, it'
 ## Events
 |Name|Parameters|Description|
 |-|-|-|
-|filters-change|`(Array<{ columnKey: string \| number, filterOptionValue: string \| number }>, initiatorColumn: object)`||
+|filters-change|`(filters: { [string \| number]: Array<string \| number> }, initiatorColumn: object)`||
 |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)`||

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

@@ -96,9 +96,8 @@ export default {
       this.addressColumn.filterOptionValues = []
     },
     handleFiltersChange (filters, sourceColumn) {
-      this.addressColumn.filterOptionValues = filters.filter(
-        filter => filter.columnKey === sourceColumn.key
-      ).map(filter => filter.filterOptionValue)
+      console.log(filters, sourceColumn)
+      this.addressColumn.filterOptionValues = filters[sourceColumn.key]
     }
   }
 }

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

@@ -55,8 +55,8 @@ ajaxUsage
 
 |名称|参数|说明|
 |-|-|-|
-|filters|`( columnKey: string \| number, filterOptionValue: string \| number } \| Array<{ columnKey: string \| number, filterOptionValue: string \| number }>)`||
-|sort|`(columnKey: string \| null, order: 'ascend' \| 'descend' \| false)`|如果 columnKey 设为 `null`，那它和 clearSorter 效果一致|
+|filters|`(filters: { [string \| number]: Array<string \| number> }) => void`| Key 是列的 key, value 是 filterOptionValues.|
+|sort|`(columnKey: string \| null, order: 'ascend' \| 'descend' \| false) => void`|如果 columnKey 设为 `null`，那它和 clearSorter 效果一致|
 |page|`(page: number) => void`||
 |clearFilters|`() => void`||
 |clearSorter|`() => void`||
@@ -65,7 +65,7 @@ ajaxUsage
 ## Events
 |名称|参数|说明|
 |-|-|-|
-|filters-change|`(Array<{ columnKey: string \| number, filterOptionValue: string \| number }>, initiatorColumn: object)`||
+|filters-change|`(filters: { [string \| number]: Array<string \| number> }, initiatorColumn: object)`||
 |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)`||

src/DataTable/src/DataTable.vue

@@ -68,11 +68,7 @@ import BaseTable from './BaseTable.vue'
 import NEmpty from '../../Empty'
 import NPagination from '../../Pagination'
 import formatLength from '../../_utils/css/formatLength'
-
-function createShallowClonedArray (array) {
-  if (Array.isArray(array)) return array.map(createShallowClonedObject)
-  return array
-}
+import isPlainObject from 'lodash-es/isPlainObject'
 
 function createShallowClonedObject (object) {
   if (!object) return object
@@ -213,7 +209,7 @@ export default {
       /** internal checked rows */
       internalCheckedRowKeys: [],
       /** internal filters state */
-      internalActiveFilters: [],
+      internalActiveFilters: {},
       /** internal sorter state */
       internalActiveSorter: null,
       /** internal pagination state */
@@ -271,9 +267,7 @@ export default {
       }
       return this.data ? this.data.filter(row => {
         for (const columnKey of Object.keys(row)) {
-          const activeFilterOptionValues = syntheticActiveFilters
-            .filter(filterInfo => filterInfo.columnKey === columnKey)
-            .map(filterInfo => filterInfo.filterOptionValue)
+          const activeFilterOptionValues = syntheticActiveFilters[columnKey] || []
           if (!activeFilterOptionValues.length) continue
           const columnToFilter = normalizedColumns.find(column => column.key === columnKey)
           /**
@@ -289,7 +283,7 @@ export default {
               }
             } else {
               if (activeFilterOptionValues.some(filterOptionValue => filter(filterOptionValue, row))) {
-                return true
+                continue
               } else {
                 return false
               }
@@ -307,20 +301,13 @@ export default {
       const columnsWithControlledFilter = this.normalizedColumns.filter(column => {
         return Array.isArray(column.filterOptionValues)
       })
-      const keyOfColumnsToFilter = columnsWithControlledFilter.map(column => column.key)
-      const controlledActiveFilters = []
+      const controlledActiveFilters = {}
       columnsWithControlledFilter.forEach(column => {
-        column.filterOptionValues.forEach(filterOptionValue => {
-          controlledActiveFilters.push({
-            columnKey: column.key,
-            filterOptionValue
-          })
-        })
+        controlledActiveFilters[column.key] = column.filterOptionValues
       })
-      const uncontrolledFilters = this.internalActiveFilters.filter(({
-        columnKey
-      }) => !keyOfColumnsToFilter.includes(columnKey))
-      const activeFilters = controlledActiveFilters.concat(uncontrolledFilters)
+      const activeFilters = Object.assign(
+        createShallowClonedObject(this.internalActiveFilters),
+        controlledActiveFilters)
       return activeFilters
     },
     syntheticActiveSorter () {
@@ -380,7 +367,7 @@ export default {
         this.$emit('change', {
           sorter: createShallowClonedObject(this.syntheticActiveSorter),
           pagination: createShallowClonedObject(this.syntheticPagination),
-          filters: createShallowClonedArray(this.syntheticActiveFilters)
+          filters: createShallowClonedObject(this.syntheticActiveFilters)
         })
         this.$emit('page-size-change')
       }
@@ -481,12 +468,7 @@ export default {
         }
       }
       if (column.filter && Array.isArray(column.defaultFilterOptionValues)) {
-        column.defaultFilterOptionValues.forEach(filterOptionValue => {
-          this.internalActiveFilters.push({
-            columnKey: column.key,
-            filterOptionValue
-          })
-        })
+        this.internalActiveFilters[column.key] = column.defaultFilterOptionValues
       }
     })
     this.internalCheckedRowKeys = this.defaultCheckedRowKeys
@@ -502,16 +484,13 @@ export default {
     },
     changeFilters (filters, sourceColumn) {
       if (!filters) {
-        this.internalActiveFilters = []
-        this.$emit('filters-change', [], createShallowClonedObject(sourceColumn))
+        this.internalActiveFilters = {}
+        this.$emit('filters-change', {}, createShallowClonedObject(sourceColumn))
+      } else if (isPlainObject(filters)) {
+        this.internalActiveFilters = filters
+        this.$emit('filters-change', createShallowClonedObject(filters), createShallowClonedObject(sourceColumn))
       } else {
-        if (Array.isArray(filters)) {
-          this.internalActiveFilters = filters
-          this.$emit('filters-change', createShallowClonedArray(filters), createShallowClonedObject(sourceColumn))
-        } else {
-          this.internalActiveFilters = [ filters ]
-          this.$emit('filters-change', [ filters ], sourceColumn)
-        }
+        console.error('[naive-ui/n-data-table]: filters is not an object')
       }
     },
     scrollMainTableBodyToTop () {
@@ -599,7 +578,7 @@ export default {
       this.clearFilters()
     },
     clearFilters () {
-      this.filters([])
+      this.filters({})
     },
     filters (filters) {
       this.filter(filters)

src/DataTable/src/HeaderButton/FilterButton.vue

@@ -40,22 +40,13 @@ import NDataTableFilterMenu from './FilterMenu'
 import NPopover from '../../../Popover'
 import funnel from '../../../_icons/funnel'
 
-function createFilterOptionValues (activeFilters, column) {
-  const activeFilterOptionValues = activeFilters
-    .filter(filter => filter.columnKey === column.key)
-    .map(filter => filter.filterOptionValue)
-  return activeFilterOptionValues
-}
-
-function createActiveFilters (allFilters, columnKey, filters) {
-  allFilters = allFilters.filter(filter => filter.columnKey !== columnKey)
-  if (!Array.isArray(filters)) {
-    filters = [filters]
+function createActiveFilters (allFilters, columnKey, filterOptionValues) {
+  if (!Array.isArray(filterOptionValues)) {
+    filterOptionValues = [filterOptionValues]
   }
-  return allFilters.concat(filters.map(filter => ({
-    columnKey,
-    filterOptionValue: filter
-  })))
+  const activeFilters = Object.assign({}, allFilters)
+  activeFilters[columnKey] = filterOptionValues
+  return activeFilters
 }
 
 export default {
@@ -91,7 +82,7 @@ export default {
       return this.NDataTable.syntheticActiveFilters
     },
     activeFilterOptionValues () {
-      return createFilterOptionValues(this.activeFilters, this.column)
+      return this.activeFilters[this.column.key]
     },
     active () {
       if (Array.isArray(this.activeFilterOptionValues)) {