feat(comp:table): redesign api of filter (#720)

* feat(comp:table): redesign api of filter

* refactor(comp:dropdown): move less variable

packages/components/config/src/defaultConfig.ts

@@ -254,6 +254,7 @@ const table: TableConfig = {
   columnBase: {
     align: 'start',
     sortable: { nextTooltip: false, orders: ['ascend', 'descend'] },
+    filterable: { multiple: true, footer: true },
   },
   columnExpandable: { icon: ['plus-square', 'minus-square'] },
 }

packages/components/config/src/types.ts

@@ -261,6 +261,7 @@ export interface TableConfig {
 export interface TableColumnBaseConfig {
   align: TableColumnAlign
   sortable: { nextTooltip: boolean; orders: TableColumnSortOrder[] }
+  filterable: { multiple: boolean; footer: true }
 }
 
 export interface TableColumnExpandableConfig {

packages/components/dropdown/style/index.less

@@ -2,7 +2,11 @@
 @import '../../style/motion/fade.less';
 
 .@{dropdown-prefix} {
-  .reset-component();
+  z-index: @dropdown-overlay-zindex;
+  min-width: @dropdown-overlay-min-width;
+  background-color: @dropdown-bg-color;
+  border-radius: @dropdown-overlay-border-radius;
+  box-shadow: @dropdown-overlay-box-shadow;
 
   &-trigger {
     cursor: pointer;
@@ -12,3 +16,44 @@
     color: @dropdown-background-color;
   }
 }
+
+.@{menu-prefix} {
+
+  &&-dropdown {
+    &.@{menu-prefix}-vertical,
+    &.@{menu-prefix}-inline {
+      .@{menu-prefix}-item {
+
+        &-selected {
+
+          &::after {
+            transform: scaleY(0);
+            opacity: 0;
+          }
+        }
+      }
+    }
+
+    &.@{menu-prefix}-horizontal {
+      .@{menu-prefix}-item,
+      .@{menu-prefix}-sub {
+
+        &:hover,
+        &-expanded,
+        &-selected {
+          border-color: transparent;
+        }
+      }
+    }
+  }
+}
+
+.@{menu-prefix}-dropdown {
+  .@{menu-prefix}-item,
+  .@{menu-prefix}-sub-title,
+  .@{menu-prefix}-item-group .@{menu-prefix}-item-group-title {
+    height: @dropdown-menu-item-height;
+    line-height: @dropdown-menu-item-height;
+    margin: @dropdown-menu-item-margin;
+  }
+}

packages/components/dropdown/style/themes/default.less

@@ -1,3 +1,2 @@
-@import '../../../style/themes/default.less';
 @import './default.variable.less';
 @import '../index.less';

packages/components/dropdown/style/themes/default.variable.less

@@ -1,3 +1,12 @@
+@import '../../../style/themes/default.less';
+@import '../../../menu/style/themes/default.variable.less';
+
 @dropdown-menu-item-height: @height-md;
 @dropdown-menu-item-margin: 0;
 @dropdown-background-color: @background-color-component;
+
+@dropdown-overlay-zindex: @menu-overlay-zindex;
+@dropdown-overlay-min-width: @menu-overlay-min-width;
+@dropdown-bg-color: @menu-bg-color;
+@dropdown-overlay-border-radius: @menu-overlay-border-radius;
+@dropdown-overlay-box-shadow: @menu-overlay-box-shadow;

packages/components/menu/style/index.less

@@ -5,7 +5,6 @@
 @import './menu.less';
 @import './dark.less';
 @import './collapsed.less';
-@import './dropdown.less';
 
 .@{menu-prefix} {
   .reset-component();

packages/components/menu/style/themes/default.less

@@ -1,4 +1,2 @@
-@import '../../../style/themes/default.less';
-@import '../../../dropdown/style/themes/default.variable.less';
 @import '../index.less';
 @import './default.variable.less';

packages/components/menu/style/themes/default.variable.less

@@ -1,3 +1,5 @@
+@import '../../../style/themes/default.less';
+
 @menu-text-color: @text-color;
 @menu-bg-color: @background-color-component;
 @menu-highlight-color: @color-primary;

packages/components/table/demo/Filterable.md

@@ -2,7 +2,7 @@
 title:
   zh: 可筛选
   en: Filterable
-order: 52
+order: 45
 ---
 
 ## zh

packages/components/table/demo/Filterable.vue

@@ -30,18 +30,14 @@ const columns: TableColumn<Data>[] = [
       sorter: (curr, next) => curr.age - next.age,
     },
     filterable: {
-      filters: [
-        {
-          text: 'over 19',
-          value: (age: number) => age > 19,
-        },
-        {
-          text: 'below 21',
-          value: (age: number) => age < 21,
-        },
+      menus: [
+        { key: 'over', label: 'Over 19' },
+        { key: 'under', label: 'Under 21' },
       ],
-      filter(currentFilterBy, record) {
-        return currentFilterBy.every(filterBy => filterBy(record.age))
+      multiple: false,
+      filter: (currentFilterBy, record) => {
+        const isOver = currentFilterBy.includes('over')
+        return isOver ? record.age > 19 : record.age < 21
       },
     },
   },
@@ -53,18 +49,12 @@ const columns: TableColumn<Data>[] = [
     title: 'Address',
     dataKey: 'address',
     filterable: {
-      filters: [
-        {
-          text: 'Sidney',
-          value: 'Sidney',
-        },
-        {
-          text: 'New York',
-          value: 'New York',
-        },
+      menus: [
+        { key: 'Sidney', label: 'Sidney' },
+        { key: 'New York', label: 'New York' },
       ],
-      filter(currentFilterBy, record) {
-        return currentFilterBy.every(filterBy => record.address.includes(filterBy))
+      filter: (currentFilterBy, record) => {
+        return currentFilterBy.some(filterBy => record.address.includes(filterBy as string))
       },
     },
   },

packages/components/table/demo/FilterableFilterBy.md

@@ -2,13 +2,13 @@
 title:
   zh: 受控的筛选
   en: Controlled filterable
-order: 53
+order: 46
 ---
 
 ## zh
 
-如果设置了 `filterable` 的 `filterby`，表格列的筛选将为受控状态。
+如果设置了 `filterable` 的 `filterBy`，表格列的筛选将为受控状态。
 
 ## en
 
-If `filterby` of `filterable` is set, the filtering of the column will be in a controlled state.
+If `filterBy` of `filterable` is set, the filtering of the column will be in a controlled state.

packages/components/table/demo/FilterableFilterBy.vue

@@ -24,50 +24,38 @@ interface Data {
   address: string
 }
 
-type AgeFilter = (age: number) => boolean
-
-const ageFilterable: TableColumnFilterable<Data, AgeFilter> = reactive({
-  filters: [
-    {
-      text: 'over 19',
-      value: (age: number) => age > 19,
-    },
-    {
-      text: 'below 21',
-      value: (age: number) => age < 21,
-    },
+const ageFilterable: TableColumnFilterable<Data> = reactive({
+  menus: [
+    { key: 'over', label: 'Over 19' },
+    { key: 'under', label: 'Under 21' },
   ],
-  filter(currentFilterBy, record) {
-    return currentFilterBy.every(filterBy => filterBy(record.age))
+  multiple: false,
+  filter: (currentFilterBy, record) => {
+    const isOver = currentFilterBy.includes('over')
+    return isOver ? record.age > 19 : record.age < 21
   },
   filterBy: [],
-  onChange(currentFilterBy) {
+  onChange: currentFilterBy => {
     ageFilterable.filterBy = currentFilterBy
   },
 })
 
-const addressFilterable: TableColumnFilterable<Data, string> = reactive({
-  filters: [
-    {
-      text: 'Sidney',
-      value: 'Sidney',
-    },
-    {
-      text: 'New York',
-      value: 'New York',
-    },
+const addressFilterable: TableColumnFilterable<Data> = reactive({
+  menus: [
+    { key: 'Sidney', label: 'Sidney' },
+    { key: 'New York', label: 'New York' },
   ],
-  filter(currentFilterBy, record) {
-    return currentFilterBy.every(filterBy => record.address.includes(filterBy))
+  filter: (currentFilterBy, record) => {
+    return currentFilterBy.some(filterBy => record.address.includes(filterBy as string))
   },
   filterBy: [],
-  onChange(currentFilterBy) {
+  onChange: currentFilterBy => {
     addressFilterable.filterBy = currentFilterBy
   },
 })
 
 const filterByAge19 = () => {
-  ageFilterable.filterBy = [ageFilterable.filters[0].value]
+  ageFilterable.filterBy = ['over']
   addressFilterable.filterBy = []
 }
 
@@ -94,7 +82,7 @@ const columns: TableColumn<Data>[] = [
       sorter: (curr, next) => curr.age - next.age,
     },
     filterable: ageFilterable,
-  } as TableColumn<Data, AgeFilter>,
+  },
   {
     title: 'Grade',
     dataKey: 'grade',
@@ -103,7 +91,7 @@ const columns: TableColumn<Data>[] = [
     title: 'Address',
     dataKey: 'address',
     filterable: addressFilterable,
-  } as TableColumn<Data, string>,
+  },
 ]
 
 const data: Data[] = [

packages/components/table/demo/Tree.vue

@@ -62,24 +62,14 @@ const columns: TableColumn<Data>[] = [
           return h(IxTag, { color }, { default: () => tag.toUpperCase() })
         }),
     },
-
     filterable: {
-      filters: [
-        {
-          text: 'attack',
-          value: 'attack',
-        },
-        {
-          text: 'damage',
-          value: 'damage',
-        },
-        {
-          text: 'infiltrate',
-          value: 'infiltrate',
-        },
+      menus: [
+        { key: 'attack', label: 'Attack' },
+        { key: 'damage', label: 'Damage' },
+        { key: 'infiltrate', label: 'Infiltrate' },
       ],
-      filter(tags, record) {
-        return tags.every(tag => record.tags.includes(tag))
+      filter: (tags, record) => {
+        return tags.some(tag => record.tags.includes(tag as string))
       },
     },
   },

packages/components/table/docs/Index.zh.md

@@ -108,7 +108,7 @@ export interface TableColumnExpandableSlots<T = any, V = any> {
   // 自定义展开内容
   expand?: string | ((data: { record: T; rowIndex: number }) => VNodeChild)
   // 自定义展开图标
-  icon?: string | ((data: { expanded: boolean; record: T; onExpand: () => void }) => VNodeChild)
+  icon?: string | ((data: { expanded: boolean; record: T }) => VNodeChild)
 }
 ```
 

packages/components/table/index.ts

@@ -8,12 +8,13 @@
 import type { TableComponent } from './src/types'
 
 import Table from './src/Table'
-import { TableColumn } from './src/tableColumn'
+import { TableColumn } from './src/column'
+import { TABLE_TOKEN } from './src/token'
 
 const IxTable = Table as unknown as TableComponent
 const IxTableColumn = TableColumn
 
-export { IxTable, IxTableColumn }
+export { IxTable, IxTableColumn, TABLE_TOKEN }
 
 export type {
   TableInstance,