From 96f81ee0dbbd6346ba2841c0e36638a7288abb24 Mon Sep 17 00:00:00 2001
From: Justineo <justice360@gmail.com>
Date: Wed, 23 Dec 2020 10:31:54 +0800
Subject: [PATCH] docs: add table filter doc & demo

---
 one/docs/components/table.md       |   6 ++
 one/docs/demo/table/filter.vue     | 155 +++++++++++++++++++++++++++++
 one/docs/en-US/components/table.md |   6 ++
 package-lock.json                  |  14 +++
 package.json                       |   1 +
 5 files changed, 182 insertions(+)
 create mode 100644 one/docs/demo/table/filter.vue

diff --git a/one/docs/components/table.md b/one/docs/components/table.md
index 2838219..7629e10 100644
--- a/one/docs/components/table.md
+++ b/one/docs/components/table.md
@@ -18,6 +18,12 @@
 
 [[ demo src="/demo/table/advanced.vue" ]]
 
+### 筛选
+
+使用 `filter` 插槽来开启自定义筛选功能。
+
+[[ demo src="/demo/table/filter.vue" ]]
+
 ### 内部滚动模式
 
 允许启用内部滚动模式，以达到固定表头表底的效果。
diff --git a/one/docs/demo/table/filter.vue b/one/docs/demo/table/filter.vue
new file mode 100644
index 0000000..d8bdb59
--- /dev/null
+++ b/one/docs/demo/table/filter.vue
@@ -0,0 +1,155 @@
+<template>
+<article>
+  <section>
+    <h4>Layout</h4>
+    <veui-checkbox v-model="crowded">
+      Crowded layout
+    </veui-checkbox>
+  </section>
+  <section>
+    <veui-table
+      :ui="crowded ? 'crowded' : null"
+      :data="filteredData"
+      key-field="id"
+    >
+      <veui-table-column
+        field="id"
+        title="ID"
+      />
+      <veui-table-column
+        field="name"
+        title="Name"
+      />
+      <veui-table-column
+        field="bid"
+        title="Bid"
+        width="160"
+        align="right"
+        :filter-value="filtered"
+      >
+        <template #default="{ bid }">
+          {{ bid | currency }}
+        </template>
+        <template #filter="{ close }">
+          <veui-checkbox v-model="filtered">
+            &gt;800
+          </veui-checkbox>
+        </template>
+      </veui-table-column>
+      <veui-table-column
+        field="updateDate"
+        title="Last updated"
+        align="center"
+      >
+        <template #default="{ updateDate }">
+          {{ updateDate | date }}
+        </template>
+      </veui-table-column>
+      <veui-table-column
+        field="operation"
+        title="Operations"
+      >
+        <template #default="{ index }">
+          <veui-button
+            ui="text"
+            @click="remove(index)"
+          >
+            Remove
+          </veui-button>
+        </template>
+      </veui-table-column>
+    </veui-table>
+  </section>
+</article>
+</template>
+
+<script>
+import { Table, Column, Checkbox, Button } from 'veui'
+
+export default {
+  components: {
+    'veui-table': Table,
+    'veui-table-column': Column,
+    'veui-checkbox': Checkbox,
+    'veui-button': Button
+  },
+  filters: {
+    currency (value) {
+      return '¥' + value.toFixed(2)
+    },
+    date (value) {
+      let [, ...parts] = value.match(/(\d{4})(\d{2})(\d{2})/) || []
+      return parts.join('-')
+    }
+  },
+  data () {
+    return {
+      data: [
+        {
+          id: '3154',
+          name: 'Steve Rogers',
+          bid: 1024,
+          updateDate: '20131117'
+        },
+        {
+          id: '3155',
+          name: 'Thor Odinson',
+          bid: 598,
+          updateDate: '20140214'
+        },
+        {
+          id: '3156',
+          name: 'Tony Stark',
+          bid: 820,
+          updateDate: '20170610'
+        },
+        {
+          id: '3157',
+          name: 'Stephen Strange',
+          bid: 736,
+          updateDate: '20180109'
+        }
+      ],
+      crowded: false,
+      filtered: false
+    }
+  },
+  computed: {
+    filteredData () {
+      if (!this.filtered) {
+        return this.data
+      }
+      return this.data.filter(({ bid }) => bid > 800)
+    }
+  },
+  methods: {
+    remove (index) {
+      this.data.splice(index, 1)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.veui-checkbox {
+  margin: 8px 16px;
+}
+</style>
+
+<style lang="less" scoped docs>
+section {
+  margin-bottom: 20px;
+}
+
+h4 {
+  margin-top: 0;
+}
+</style>
+
+<docs>
+可以使用 `crowded` 这个 `ui` 属性值来在需要展示很多列的布局下默认隐藏筛选按钮。
+</docs>
+
+<docs locale="en-US">
+You can use the `ui` prop value `crowded` to hide filter button by default when there are too many columns to be displayed.
+</docs>
diff --git a/one/docs/en-US/components/table.md b/one/docs/en-US/components/table.md
index 1d4a4f9..e3d8469 100644
--- a/one/docs/en-US/components/table.md
+++ b/one/docs/en-US/components/table.md
@@ -18,6 +18,12 @@ Supports specifying row keys, mode of selection, and sorting by values of specif
 
 [[ demo src="/demo/table/advanced.vue" ]]
 
+### Filter
+
+Use the `filter` slot to enable custom column filter dropdown.
+
+[[ demo src="/demo/table/filter.vue" ]]
+
 ### Scroll inside
 
 Allow table content to be scrollable inside the table body, i.e. the effect of fixed head/foot.
diff --git a/package-lock.json b/package-lock.json
index 92795e1..926588b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3436,6 +3436,20 @@
         }
       }
     },
+    "babel-eslint": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
+      "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.0.0",
+        "@babel/parser": "^7.7.0",
+        "@babel/traverse": "^7.7.0",
+        "@babel/types": "^7.7.0",
+        "eslint-visitor-keys": "^1.0.0",
+        "resolve": "^1.12.0"
+      }
+    },
     "babel-loader": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.1.0.tgz",
diff --git a/package.json b/package.json
index 0dcb922..f556bb4 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "update:veui": "npm i -D {veui-loader,veui,veui-theme-dls,babel-plugin-veui,veui-theme-dls-icons}@latest"
   },
   "devDependencies": {
+    "babel-eslint": "^10.1.0",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-veui": "^2.0.0-beta.24",
     "dls-icons-vue": "^0.14.0",