docs: improve docs and update api

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>

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>

one/docs/demo/pagination/goto.vue

@@ -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>

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>

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>
 

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>