From 5226ec968cb4763a79648f5f68bade384d788b36 Mon Sep 17 00:00:00 2001
From: Justineo <justice360@gmail.com>
Date: Wed, 24 Nov 2021 12:05:27 +0800
Subject: [PATCH] docs: improve docs and update api

---
 one/docs/components/anchor.md                 |  4 +-
 one/docs/components/autocomplete.md           | 36 ++++++++---
 one/docs/components/column.md                 |  1 +
 one/docs/components/pagination.md             | 23 +++----
 one/docs/components/table.md                  | 12 +++-
 one/docs/demo/directives/drag/sort-x.vue      |  5 +-
 .../{tooltip.vue => tooltip/default.vue}      |  0
 one/docs/demo/directives/tooltip/overflow.vue | 47 ++++++++++++++
 one/docs/demo/pagination/goto.vue             | 37 -----------
 one/docs/demo/pagination/parts.vue            | 60 +++++++++++++++++
 one/docs/demo/table/loading.vue               | 56 ++++++++--------
 one/docs/demo/table/tooltip.vue               | 64 +++++++++++++++++++
 one/docs/directives/v-drag.md                 |  5 --
 one/docs/directives/v-tooltip.md              | 13 +++-
 one/docs/en-US/components/column.md           |  2 +
 one/docs/en-US/components/pagination.md       | 22 +++++--
 one/docs/en-US/components/table.md            |  8 ++-
 package-lock.json                             | 14 ++--
 package.json                                  |  2 +-
 19 files changed, 297 insertions(+), 114 deletions(-)
 rename one/docs/demo/directives/{tooltip.vue => tooltip/default.vue} (100%)
 create mode 100644 one/docs/demo/directives/tooltip/overflow.vue
 delete mode 100644 one/docs/demo/pagination/goto.vue
 create mode 100644 one/docs/demo/pagination/parts.vue
 create mode 100644 one/docs/demo/table/tooltip.vue

diff --git a/one/docs/components/anchor.md b/one/docs/components/anchor.md
index 3fee1f2..20b6583 100644
--- a/one/docs/components/anchor.md
+++ b/one/docs/components/anchor.md
@@ -31,8 +31,8 @@
 | ``items`` | `Array<{value, label, children}>` | `[]` | [^items] |
 | ``sticky`` | `boolean=` | `false` | 是否有吸附效果。 |
 | ``container`` | `string | HTMLElement | Window=` | - | `Anchor` 吸附与判断锚点激活所参考的容器。 |
-| ``target-offset`` | `string | number=` | `0` | 当某个锚点处于到容器的 `target-offset` 位置，那么对应的锚点链接处于激活状态。 |
-| ``sticky-offset`` | `string | number=` | `0` | 对于 sticky `Anchor` 而言，当容器滚动到 `sticky-offset` 位置，那么该 `Anchor` 开始吸附。 |
+| ``target-offset`` | `string | number=` | `0` | 当某个锚点处于到容器的 `target-offset` 位置，那么对应的锚点链接处于激活状态。数值类型值为 `px` 值，也可以传入如 `'10%'` 的百分比字符串，将基于 `container` 对应容器的高度比例进行计算。 |
+| ``sticky-offset`` | `string | number=` | `0` | 对于 sticky `Anchor` 而言，当容器滚动到 `sticky-offset` 位置，那么该 `Anchor` 开始吸附。不同值类型含义同 [`target-offset`](#props-target-offset) 属性。 |
 
 ^^^items
 数据源数组，每个项目类型为 `{label, value, children, ...}`。
diff --git a/one/docs/components/autocomplete.md b/one/docs/components/autocomplete.md
index f6ef54b..d9085fa 100644
--- a/one/docs/components/autocomplete.md
+++ b/one/docs/components/autocomplete.md
@@ -32,17 +32,21 @@
 | -- | -- | -- | -- |
 | ``datasource`` | `Array<string | Object>=` | `[]` | [^datasource] |
 | ``value`` | `*` | - | [^prop-value] |
-| ``match`` | `(item, keyword, { ancestors }) => boolean | [number, number] | Array<[number, number]>` | - | 支持自定义高亮逻辑，默认进行大小写不敏感的子串匹配。 |
-| ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑。 |
-| ``strict`` | `boolean=` | `false` | 建议下拉面板关闭时，若输入值没有完全匹配建议值，那么会清空输入值。 |
-| ``suggest-trigger`` | `string | Array<string>=` | `'input'` | 触发建议下拉面板的时机，可用值有：`'input'`、`'focus'`。 |
-| ``placeholder`` | `string=` |  | 输入占位符。 |
-| ``select-on-focus`` | `boolean=` | `false` | 聚焦时是否自动选中输入框文本。 |
-| ``composition`` | `boolean=` | `false` | 是否感知输入法输入过程的值。 |
-| ``expanded`` | `boolean=` | `false` | [^expanded] |
-| ``clearable`` | `boolean=` | `false` | 是否显示清除按钮。 |
 | ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
 | ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
+| ``match`` | `(item, keyword, { ancestors }) => boolean | [number, number] | Array<[number, number]>` | - | 支持自定义高亮逻辑，默认进行大小写不敏感的子串匹配。 |
+| ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑。 |
+| ``suggest-trigger`` | `string | Array<string>=` | `'input'` | 触发建议下拉面板的时机，可用值有：`'input'`、`'focus'`。 |
+| ``expanded`` | `boolean=` | `false` | [^expanded] |
+| ``placeholder`` | `string=` | - | 输入占位符。 |
+| ``clearable`` | `boolean=` | `false` | 是否显示清除按钮。 |
+| ``composition`` | `boolean=` | `false` | 是否感知输入法输入过程的值。 |
+| ``select-on-focus`` | `boolean=` | `false` | 聚焦时是否自动选中输入框文本。 |
+| ``maxlength`` | `number=` | - | 输入字符串的长度限制。 |
+| ``strict`` | `boolean=` | `false` | 输入字符串到达长度限制以后是否禁止继续输入。 |
+| ``get-length`` | `function(string): number=` | 自定义的字符长度计算函数。 |
+| ``trim`` | `boolean | string=` | `false` | [^trim] |
+| ``autofocus`` | `boolean=` | `false` | 是否自动获取焦点。 |
 
 ^^^datasource
 数据源数组，项目为 `Object` 时字段为 `{label, value, children, ...}`。
@@ -72,6 +76,18 @@
 建议面板是否展开（如果 `suggestions` 中没有待选项，则即使为 `true` 时面板也会关闭）。
 ^^^
 
+^^^trim
+是否移除前后空格。当为 `true` 时，会移除前后空格，当为 `false` 时，不移除前后空格。设置为字符串时，按指定方式进行移除。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `both` | 移除两端空格。等同于 `true` 时的行为。 |
+| `start` | 移除开始空格。 |
+| `end` | 移除末尾空格。 |
++++
+^^^
+
 ### 插槽
 
 | 名称 | 描述 |
@@ -109,7 +125,7 @@
 | 名称  | 描述 |
 | -- | -- |
 | ``input`` | [^event-input] |
-| ``suggest`` | 采纳建议时触发，参数是当前值。 |
+| ``select`` | 采纳建议时触发，参数是当前值。 |
 | ``toggle`` | 提示面板展开状态切换时触发，回调参数为 `(expanded: boolean)`。`expanded` 表示操作将触发提示面板展开还是收起。 |
 | ``clear`` | 清除当前值时触发。 |
 
diff --git a/one/docs/components/column.md b/one/docs/components/column.md
index 92b80bd..fee2daa 100644
--- a/one/docs/components/column.md
+++ b/one/docs/components/column.md
@@ -26,6 +26,7 @@
 | ``filter-options`` | `Array<Object>` | - | 筛选选项列表，项目的类型为 `{label, value, options, disabled, ...}`，可参考 [`Select`](./select) 组件的 [`options`](./select#props-options) 属性。 |
 | ``filter-title`` | `string=` | - | 筛选下拉的标题。 |
 | ``allowed-orders`` | `Array` | `[false, 'desc', 'asc']` | [^allowed-orders] |
+| ``tooltip`` | `boolean | ((item: Object) => string)` | - | 是否当内容溢出时自动显示悬浮提示。默认显示所属 `Table` 组件 [`data`](./table#props-data) 属性数据项中 [`field`](#props-field) 属性对应的字段值。传入函数时，`item` 参数为整个 data 数据项，返回的字符串将作为提示内容展示。 |
 
 ^^^sortable
 本列是否支持排序。
diff --git a/one/docs/components/pagination.md b/one/docs/components/pagination.md
index 1eded77..96761b4 100644
--- a/one/docs/components/pagination.md
+++ b/one/docs/components/pagination.md
@@ -6,13 +6,6 @@
 
 [[ demo src="/demo/pagination/size.vue" ]]
 
-### 跳转到指定页
-
-使用 [`goto`](#props-goto) 属性开启跳转到指定页的功能。
-
-[[ demo src="/demo/pagination/goto.vue" ]]
-
-
 ### 每页个数
 
 使用 [`page-size`](#props-page-size) 属性来指定当前每页的个数。
@@ -21,6 +14,12 @@
 
 [[ demo src="/demo/pagination/pages.vue" ]]
 
+### 可选部分
+
+使用 [`show-total`](#props-show-total) / [`show-page-size`](#props-show-page-size) / [`show-goto`](#props-show-goto) 属性来分别控制是否显示项目总数/每页项目数选择器/跳转到指定页。
+
+[[ demo src="/demo/pagination/parts.vue" ]]
+
 ## API
 
 ### 属性
@@ -29,12 +28,14 @@
 | -- | -- | -- | -- |
 | ``ui`` | `string=` | - | [^ui] |
 | ``page`` | `number` | `1` | 当前页码（从 `1` 开始）。 |
-| ``total`` | `number` | - | 总页数。 |
+| ``total`` | `number` | - | 项目总数。 |
 | ``to`` | `string | Object` | `''` | [^to] |
 | ``native`` | `boolean` | `false` | 原生链接跳转。 |
 | ``page-size`` | `number` | `pagination.pageSize` | [^page-size] |
-| ``page-sizes`` | `Array` | `pagination.pageSizes` | 每页个数候选项。 |
-| ``goto`` | `boolean` | `false` | 是否显示直接跳转到页码。 |
+| ``page-sizes`` | `Array<number>` | `pagination.pageSizes` | 每页个数候选项。 |
+| ``show-goto`` | `boolean=` | `false` | 是否显示直接跳转到页码。 |
+| ``show-total`` | `boolean=` | `false` | 是否显示项目总数。 |
+| ``show-page-size`` | `boolean=` | `false` | 是否显示每页项目数选择器。 |
 
 ^^^ui
 预设样式。
@@ -64,7 +65,7 @@
 
 | 名称 | 描述 |
 | -- | -- |
-| ``pagesizechange`` | `page-size` 改变时触发，回调参数为 `(size: number)`。`size` 为新的 `page-size` 值。 |
+| ``pagesizechange`` | 每页显示项目被切换时触发，回调参数为 `(size: number)`。`size` 为新的每页显示项目数。 |
 | ``redirect`` | 链接跳转时触发，回调参数为 `(page: number, event: Object)`。`page` 为要跳转的目标页码。`event` 为原生的事件对象，在 `native` 为 `true` 时，调用 `event.preventDefault` 可阻止跳转。 |
 
 ### 全局配置
diff --git a/one/docs/components/table.md b/one/docs/components/table.md
index 217da6e..de74727 100644
--- a/one/docs/components/table.md
+++ b/one/docs/components/table.md
@@ -12,7 +12,7 @@
 
 [[ demo src="/demo/table/basic.vue" ]]
 
-### 高级
+### 选择模式与排序
 
 允许自定义唯一键、设定选择模式以及进行排序。
 
@@ -24,7 +24,7 @@
 
 [[ demo src="/demo/table/filter.vue" ]]
 
-### 内部滚动模式
+### 内部滚动
 
 允许启用内部滚动模式，以达到固定表头表底的效果。
 
@@ -44,7 +44,7 @@
 
 ### 表头描述
 
-使用 [`desc`](./column#props-desc) 属性或 [`desc`](./column#slots-desc) 插槽来为表头增加描述信息。
+使用 `Column` 组件的 [`desc`](./column#props-desc) 属性或 [`desc`](./column#slots-desc) 插槽来为表头增加描述信息。
 
 [[ demo src="/demo/table/desc.vue" ]]
 
@@ -64,6 +64,12 @@
 
 [[ demo src="/demo/table/loading.vue" ]]
 
+### 截断提示
+
+使用 `Column` 组件的 [`tooltip`](./column#props-tooltip) 属性来指定在内容截断时显示悬浮提示。
+
+[[ demo src="/demo/table/tooltip.vue" ]]
+
 ## API
 
 ### 属性
diff --git a/one/docs/demo/directives/drag/sort-x.vue b/one/docs/demo/directives/drag/sort-x.vue
index 3cbe2e0..9cba92f 100644
--- a/one/docs/demo/directives/drag/sort-x.vue
+++ b/one/docs/demo/directives/drag/sort-x.vue
@@ -19,7 +19,6 @@
       {{ item }}
     </div>
   </transition-group>
-  </section>
 </article>
 </template>
 
@@ -67,3 +66,7 @@ export default {
   transition: transform 200ms ease;
 }
 </style>
+
+<docs>
+可以通过 `v-drag.sort` 或 `v-drag="{ type: 'sort', ... }"` 来实现拖拽排序。
+</docs>
diff --git a/one/docs/demo/directives/tooltip.vue b/one/docs/demo/directives/tooltip/default.vue
similarity index 100%
rename from one/docs/demo/directives/tooltip.vue
rename to one/docs/demo/directives/tooltip/default.vue
diff --git a/one/docs/demo/directives/tooltip/overflow.vue b/one/docs/demo/directives/tooltip/overflow.vue
new file mode 100644
index 0000000..d068503
--- /dev/null
+++ b/one/docs/demo/directives/tooltip/overflow.vue
@@ -0,0 +1,47 @@
+<template>
+<article>
+  <section>
+    <div
+      v-tooltip.overflow="loremIpsum"
+      class="item"
+    >
+      {{ loremIpsum }}
+    </div>
+    <div
+      v-tooltip.overflow="loremIpsum"
+      class="item"
+    >
+      Lorem upsum.
+    </div>
+  </section>
+</article>
+</template>
+
+<script>
+import { tooltip } from 'veui'
+
+const loremIpsum = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos consequatur ad hic aspernatur maiores adipisci velit nostrum nobis, cum earum, incidunt repellendus ex! Fuga, fugit! Placeat quam ex minima laudantium.'
+
+export default {
+  directives: {
+    tooltip
+  },
+  data () {
+    return {
+      loremIpsum
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.item {
+  display: inline-block;
+  margin-right: 12px;
+  width: 200px;
+  border: 1px solid #ccc;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>
diff --git a/one/docs/demo/pagination/goto.vue b/one/docs/demo/pagination/goto.vue
deleted file mode 100644
index 03f1ae6..0000000
--- a/one/docs/demo/pagination/goto.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-<article>
-  <veui-pagination
-    :page="page"
-    :total="total"
-    :to="to"
-    goto
-  />
-</article>
-</template>
-
-<script>
-import { Pagination } from 'veui'
-
-export default {
-  components: {
-    'veui-pagination': Pagination
-  },
-  data () {
-    return {
-      to: './pagination?page=:page',
-      total: 10101
-    }
-  },
-  computed: {
-    page () {
-      return Number(this.$route.query.page) || 1
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-article {
-  text-align: right;
-}
-</style>
diff --git a/one/docs/demo/pagination/parts.vue b/one/docs/demo/pagination/parts.vue
new file mode 100644
index 0000000..d8cda57
--- /dev/null
+++ b/one/docs/demo/pagination/parts.vue
@@ -0,0 +1,60 @@
+<template>
+<article>
+  <section class="toggles">
+    <veui-checkbox v-model="showTotal">
+      Show total
+    </veui-checkbox>
+    <veui-checkbox v-model="showPageSize">
+      Show page size
+    </veui-checkbox>
+    <veui-checkbox v-model="showGoto">
+      Show goto
+    </veui-checkbox>
+  </section>
+  <section>
+    <veui-pagination
+      :page="page"
+      :total="total"
+      to="./pagination?page=:page"
+      :show-total="showTotal"
+      :show-goto="showGoto"
+      :show-page-size="showPageSize"
+    />
+  </section>
+</article>
+</template>
+
+<script>
+import { Pagination, Checkbox } from 'veui'
+
+export default {
+  components: {
+    'veui-pagination': Pagination,
+    'veui-checkbox': Checkbox
+  },
+  data () {
+    return {
+      to: '.',
+      total: 10101,
+      showTotal: true,
+      showGoto: true,
+      showPageSize: true
+    }
+  },
+  computed: {
+    page () {
+      return Number(this.$route.query.page) || 1
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.toggles {
+  margin-bottom: 20px;
+}
+
+.veui-checkbox + .veui-checkbox {
+  margin-left: 16px;
+}
+</style>
diff --git a/one/docs/demo/table/loading.vue b/one/docs/demo/table/loading.vue
index d4bfe95..4357103 100644
--- a/one/docs/demo/table/loading.vue
+++ b/one/docs/demo/table/loading.vue
@@ -1,34 +1,36 @@
 <template>
 <article>
   <section>
-    <div>loading：<veui-switch v-model="loading"/></div>
-    <veui-table
-      :data="data"
-      :loading="loading"
-      key-field="id"
-    >
-      <veui-table-column
-        field="id"
-        title="ID"
-        sortable
-      />
-      <veui-table-column
-        field="name"
-        title="Name"
-      />
-      <veui-table-column
-        field="bid"
-        title="Bid"
-        width="160"
-        align="right"
-        sortable
-      >
-        <template slot-scope="{ bid }">
-          {{ bid | currency }}
-        </template>
-      </veui-table-column>
-    </veui-table>
+    <veui-switch v-model="loading">
+      Loading
+    </veui-switch>
   </section>
+  <veui-table
+    :data="data"
+    :loading="loading"
+    key-field="id"
+  >
+    <veui-table-column
+      field="id"
+      title="ID"
+      sortable
+    />
+    <veui-table-column
+      field="name"
+      title="Name"
+    />
+    <veui-table-column
+      field="bid"
+      title="Bid"
+      width="160"
+      align="right"
+      sortable
+    >
+      <template slot-scope="{ bid }">
+        {{ bid | currency }}
+      </template>
+    </veui-table-column>
+  </veui-table>
 </article>
 </template>
 
diff --git a/one/docs/demo/table/tooltip.vue b/one/docs/demo/table/tooltip.vue
new file mode 100644
index 0000000..2c5b098
--- /dev/null
+++ b/one/docs/demo/table/tooltip.vue
@@ -0,0 +1,64 @@
+<template>
+<article>
+  <veui-table
+    :data="data"
+    key-field="id"
+  >
+    <veui-table-column
+      field="id"
+      title="ID"
+    />
+    <veui-table-column
+      field="name"
+      title="Name"
+    />
+    <veui-table-column
+      field="desc"
+      title="Description"
+      tooltip
+    />
+  </veui-table>
+</article>
+</template>
+
+<script>
+import { Table, Column } from 'veui'
+
+const long = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, quibusdam! Pariatur, laboriosam? Voluptatibus, sunt.'
+const short = 'Lorem ipsum.'
+
+export default {
+  components: {
+    'veui-table': Table,
+    'veui-table-column': Column
+  },
+  data () {
+    return {
+      density: 'normal',
+      size: 'm',
+      data: [
+        {
+          id: '3154',
+          name: 'Steve Rogers',
+          desc: long
+        },
+        {
+          id: '3155',
+          name: 'Thor Odinson',
+          desc: short
+        },
+        {
+          id: '3156',
+          name: 'Tony Stark',
+          desc: short
+        },
+        {
+          id: '3157',
+          name: 'Stephen Strange',
+          desc: long
+        }
+      ]
+    }
+  }
+}
+</script>
diff --git a/one/docs/directives/v-drag.md b/one/docs/directives/v-drag.md
index eddbf77..703b1c4 100644
--- a/one/docs/directives/v-drag.md
+++ b/one/docs/directives/v-drag.md
@@ -147,11 +147,6 @@
 <div v-drag:box1,box2></div>
 ```
 
-
-## 拖拽排序（v-drag.sort）
-
-可以通过 `v-drag.sort` 或 `v-drag="{ type: 'sort', ... }"` 来实现拖拽排序。
-
 ## 扩展
 
 可以通过继承 `BaseHandler` 扩展 `v-drag` 指令：
diff --git a/one/docs/directives/v-tooltip.md b/one/docs/directives/v-tooltip.md
index c3cc95a..de718b0 100644
--- a/one/docs/directives/v-tooltip.md
+++ b/one/docs/directives/v-tooltip.md
@@ -10,7 +10,13 @@ VEUI 对通过 `v-tooltip` 定义的全局浮层提示进行了统一的体验
 
 ## 示例
 
-[[ demo src="/demo/directives/tooltip.vue" ]]
+### 基本用法
+
+[[ demo src="/demo/directives/tooltip/default.vue" ]]
+
+### 溢出时显示
+
+[[ demo src="/demo/directives/tooltip/overflow.vue" ]]
 
 ## API
 
@@ -42,14 +48,15 @@ VEUI 对通过 `v-tooltip` 定义的全局浮层提示进行了统一的体验
 | -- | -- | -- | -- |
 | ``content`` | `string | VNode | Array<VNode>` | - | 提示信息字符串或通过渲染函数返回的虚拟节点（数组）。 |
 | ``position`` | `string` | - | 浮层提示的展示位置。参考 [`Tooltip`](../components/tooltip) 组件的 [`position`](../components/tooltip#props-position) 属性。 |
+| ``overflow`` | `boolean` | `false` | 是否仅在目标元素内容溢出容器时显示悬浮提示。 |
 | ``disabled`` | `boolean` | `false` | 是否禁用浮层提示。 |
 
 ### 修饰符
 
-对应 `Object` 类型绑定值中的 `position`。例如：
+对应 `Object` 类型绑定值中的 `position` / `overflow`。例如：
 
 ```html
-<button v-tooltip.bottom-end="添加">+</button>
+<span v-tooltip.bottom-end.overflow="添加">A paragraph of very long text...</span>
 ```
 
 ### 全局配置
diff --git a/one/docs/en-US/components/column.md b/one/docs/en-US/components/column.md
index 0fbae11..03a83b1 100644
--- a/one/docs/en-US/components/column.md
+++ b/one/docs/en-US/components/column.md
@@ -25,6 +25,8 @@ See [the demos of `Table`](./table#demos).
 | ``filter-multiple`` | `boolean=` | `false` | Whether the built-in filter is multi-select or not. |
 | ``filter-options`` | `Array<Object>` | - | The list of filter options, with items of type `{label, value, options, disabled, ...}`, see the [`options`](./select#options) prop of the [`Select`](./select) component. |
 | ``filter-title`` | `string=` | - | The title of the filter dropdown. |
+| ``allowed-orders`` | `Array` | `[false, 'desc', 'asc']` | [^allowed-orders] |
+| ``tooltip`` | `boolean | ((item: Object) => string)` | - | Whether to automatically show tooltips when content overflows. The tooltip displays the field corresponding to the [`field`](#props-field) prop of the [`data`](. /table#props-data) prop of `Table` component the current column belongs to. When being a function, the `item` argument is the entire data item and the returned string will be displayed as tooltip content. |
 
 ^^^sortable
 Whether current column is sortable.
diff --git a/one/docs/en-US/components/pagination.md b/one/docs/en-US/components/pagination.md
index 4698440..a8c189f 100644
--- a/one/docs/en-US/components/pagination.md
+++ b/one/docs/en-US/components/pagination.md
@@ -6,11 +6,19 @@
 
 [[ demo src="/demo/pagination/size.vue" ]]
 
-### Go to a specific page
+### Page size
 
-Use the [`goto`](#props-goto) prop to enable the go to page section.
+Use the [`page-size`](#props-page-size) prop to specify the current page size.
 
-[[ demo src="/demo/pagination/goto.vue" ]]
+Use the [`page-sizes`](#props-page-sizes) prop to specify the page size options.
+
+[[ demo src="/demo/pagination/pages.vue" ]]
+
+### Optional parts
+
+Use the [`show-total`](#props-show-total) / [`show-page-size`](#props-show-page-size) / [`show-goto`](#props-show-goto) props to control the visibility of the total items / page size selector / goto page parts.
+
+[[ demo src="/demo/pagination/parts.vue" ]]
 
 ## API
 
@@ -20,12 +28,14 @@ Use the [`goto`](#props-goto) prop to enable the go to page section.
 | -- | -- | -- | -- |
 | ``ui`` | `string=` | - | [^ui] |
 | ``page`` | `number` | `1` | Current page index (starts from `1`). |
-| ``total`` | `number` | - | Total page count. |
+| ``total`` | `number` | - | Total items count. |
 | ``to`` | `string | Object` | `''` | [^to] |
 | ``native`` | `boolean` | `false` | Use native links for navigation. |
 | ``page-size`` | `number` | `pagination.pageSize` | [^page-size] |
 | ``page-sizes`` | `Array` | `pagination.pageSizes` | The predefined available page sizes for users to select. |
-| ``goto`` | `boolean` | `false` | Whether to show “goto page number” section. |
+| ``show-goto`` | `boolean=` | `false` | Whether to show the go to page section. |
+| ``show-total`` | `boolean=` | `false` | Whether to show the total page count. |
+| ``show-page-size`` | `boolean=` | `false` | Whether to show the page size selection section. |
 
 ^^^ui
 Style variants.
@@ -55,7 +65,7 @@ The count of item in each page.
 
 | Name | Description |
 | -- | -- |
-| ``pagesizechange`` | Triggered when `page-size` is changed. The callback parameter list is `(size: number)`, with `size` being the new `page-size` value. |
+| ``pagesizechange`` | Triggered when page size is changed. The callback parameter list is `(size: number)`, with `size` being the new page size value. |
 | ``redirect`` | Triggered when page links are activated. The callback parameter list is `(page: number, event: Object)`. `page` is the number of the targe page. `event` is the native event object, calling `event.preventDefault` will stop navigation when `native` is `true`. |
 
 ### Configs
diff --git a/one/docs/en-US/components/table.md b/one/docs/en-US/components/table.md
index ae1e2f7..b7a3df7 100644
--- a/one/docs/en-US/components/table.md
+++ b/one/docs/en-US/components/table.md
@@ -12,7 +12,7 @@ Available density variants for the [`ui`](#props-ui) prop: `compact` / `loose`.
 
 [[ demo src="/demo/table/basic.vue" ]]
 
-### Advanced
+### Selection and sorting
 
 Supports specifying row keys, mode of selection, and sorting by values of specific column.
 
@@ -48,6 +48,12 @@ Use the [`desc`](./column#props-desc) prop or the [`desc`](./column#slots-desc)
 
 [[ demo src="/demo/table/desc.vue" ]]
 
+### Truncation tooltips
+
+Use the [`tooltip`](./column#props-tooltip) attribute of the `Column` component to specify that a hover tooltip is displayed when the content is truncated.
+
+[[ demo src="/demo/table/tooltip.vue" ]]]
+
 ## API
 
 ### Props
diff --git a/package-lock.json b/package-lock.json
index 2d67016..5d39399 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -79,7 +79,7 @@
         "veui-theme-dls-icons": "^2.3.0",
         "vue-awesome": "^4.1.0",
         "vue-i18n": "^8.16.0",
-        "vue-live": "^1.17.1",
+        "vue-live": "^1.17.2",
         "vue-windows": "^0.2.4"
       }
     },
@@ -24393,9 +24393,9 @@
       }
     },
     "node_modules/vue-live": {
-      "version": "1.17.1",
-      "resolved": "https://registry.npmjs.org/vue-live/-/vue-live-1.17.1.tgz",
-      "integrity": "sha512-UVymml4t84NCESH3o3ZtYfpGztj9+S1sZQ0camXI9m+WC5swzZViMpMcVteGcEz/y3Oo1uA8fZo05oDPB8LTjA==",
+      "version": "1.17.2",
+      "resolved": "https://registry.npmjs.org/vue-live/-/vue-live-1.17.2.tgz",
+      "integrity": "sha512-sy3fxQy57UQ5/p8bDGuGA82zHFO8UOJDESYBggWsjVwW9Yt1gixOO2KJrhJ0E0B4OznsXCY4P180Vm+o04mX1Q==",
       "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.11.2",
@@ -45313,9 +45313,9 @@
       }
     },
     "vue-live": {
-      "version": "1.17.1",
-      "resolved": "https://registry.npmjs.org/vue-live/-/vue-live-1.17.1.tgz",
-      "integrity": "sha512-UVymml4t84NCESH3o3ZtYfpGztj9+S1sZQ0camXI9m+WC5swzZViMpMcVteGcEz/y3Oo1uA8fZo05oDPB8LTjA==",
+      "version": "1.17.2",
+      "resolved": "https://registry.npmjs.org/vue-live/-/vue-live-1.17.2.tgz",
+      "integrity": "sha512-sy3fxQy57UQ5/p8bDGuGA82zHFO8UOJDESYBggWsjVwW9Yt1gixOO2KJrhJ0E0B4OznsXCY4P180Vm+o04mX1Q==",
       "dev": true,
       "requires": {
         "@babel/runtime": "^7.11.2",
diff --git a/package.json b/package.json
index b438267..8547e78 100644
--- a/package.json
+++ b/package.json
@@ -87,7 +87,7 @@
     "veui-theme-dls-icons": "^2.3.0",
     "vue-awesome": "^4.1.0",
     "vue-i18n": "^8.16.0",
-    "vue-live": "^1.17.1",
+    "vue-live": "^1.17.2",
     "vue-windows": "^0.2.4"
   },
   "dependencies": {