From 87e976bb7e2ddb313827638e88ea8ba4e28b3944 Mon Sep 17 00:00:00 2001
From: Justineo <justice360@gmail.com>
Date: Mon, 18 Oct 2021 16:51:32 +0800
Subject: [PATCH] feat: add tooltip `aim-center` and refine position demo

---
 one/docs/components/tooltip.md       |   7 +-
 one/docs/demo/popover/position.vue   | 331 +++++++++++----------------
 one/docs/demo/tooltip/position.vue   | 331 +++++++++++----------------
 one/docs/en-US/components/tooltip.md |   1 +
 4 files changed, 263 insertions(+), 407 deletions(-)

diff --git a/one/docs/components/tooltip.md b/one/docs/components/tooltip.md
index d4bb566..2581ee5 100644
--- a/one/docs/components/tooltip.md
+++ b/one/docs/components/tooltip.md
@@ -28,13 +28,14 @@
 | -- | -- | -- | -- |
 | `ui` | `string=` | - | [^ui] |
 | `open` | `boolean` | `false` | [^open] |
-| `target` | `string|Vue|Node` | - | 参考 [`Overlay`](./overlay) 组件的 `target` 属性。 |
+| `target` | `string | Vue | Node` | - | 参考 [`Overlay`](./overlay) 组件的 `target` 属性。 |
 | `position` | `string` | `'top'` | [^position] |
+| `aim-center` | `boolean` | `false` | 指定浮层提示箭头是否始终指向目标元素中心。 |
 | `trigger` | `string` | `'hover'` | [^trigger] |
 | `interactive` | `boolean` | `true` | 浮层内容是否允许交互。如果为 `false` 则在 `target` 外满足 `trigger` 指定的条件浮层即自动关闭。 |
 | `hide-delay` | `number` | `tooltip.hideDelays` | 触发关闭条件满足后延迟关闭等待时间的毫秒数。可以用来防止光标移出 `target` 后移入浮层进行交互前已经自动关闭。 |
-| `overlay-class` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#属性) 属性。 |
-| `overlay-style` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#属性) 属性。 |
+| `overlay-class` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#属性) 属性。 |
+| `overlay-style` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#属性) 属性。 |
 
 ^^^ui
 预设样式。
diff --git a/one/docs/demo/popover/position.vue b/one/docs/demo/popover/position.vue
index 5db6f0d..a0ae5e9 100644
--- a/one/docs/demo/popover/position.vue
+++ b/one/docs/demo/popover/position.vue
@@ -1,224 +1,151 @@
 <template>
 <article>
-  <veui-grid-container :columns="5">
-    <veui-grid-row>
-      <veui-grid-column
-        :span="1"
-        :offset="1"
-      >
-        <span
-          ref="ts"
-          class="target"
-        >top-start</span>
-        <veui-popover
-          target="ts"
-          position="top-start"
-        >
-          Hello.
-        </veui-popover>
-      </veui-grid-column>
-      <veui-grid-column :span="1">
-        <span
-          ref="t"
-          class="target"
-        >top</span>
-        <veui-popover
-          target="t"
-          position="top"
-        >
-          Hello.
-        </veui-popover>
-      </veui-grid-column>
-      <veui-grid-column :span="1">
-        <span
-          ref="te"
-          class="target"
-        >top-end</span>
-        <veui-popover
-          target="te"
-          position="top-end"
-        >
-          Hello.
-        </veui-popover>
-      </veui-grid-column>
-    </veui-grid-row>
-    <veui-grid-row>
-      <veui-grid-column :span="1">
-        <span
-          ref="ls"
-          class="target"
-        >left-start</span>
-        <veui-popover
-          target="ls"
-          position="left-start"
-        >
-          Hello.
-        </veui-popover>
-      </veui-grid-column>
-      <veui-grid-column
-        :span="1"
-        :offset="3"
-      >
-        <span
-          ref="rs"
-          class="target"
-        >right-start</span>
-        <veui-popover
-          target="rs"
-          position="right-start"
-        >
-          Hello.
-        </veui-popover>
-      </veui-grid-column>
-    </veui-grid-row>
-    <veui-grid-row>
-      <veui-grid-column :span="1">
-        <span
-          ref="l"
-          class="target"
-        >left</span>
-        <veui-popover
-          target="l"
-          position="left"
-        >
-          Hello.
-        </veui-popover>
-      </veui-grid-column>
-      <veui-grid-column
-        :span="1"
-        :offset="3"
-      >
-        <span
-          ref="r"
-          class="target"
-        >right</span>
-        <veui-popover
-          target="r"
-          position="right"
-        >
-          Hello.
-        </veui-popover>
-      </veui-grid-column>
-    </veui-grid-row>
-    <veui-grid-row>
-      <veui-grid-column :span="1">
-        <span
-          ref="le"
-          class="target"
-        >left-end</span>
-        <veui-popover
-          target="le"
-          position="left-end"
-        >
-          Hello.
-        </veui-popover>
-      </veui-grid-column>
-      <veui-grid-column
-        :span="1"
-        :offset="3"
-      >
-        <span
-          ref="re"
-          class="target"
-        >right-end</span>
-        <veui-popover
-          target="re"
-          position="right-end"
-        >
-          Hello.
-        </veui-popover>
-      </veui-grid-column>
-    </veui-grid-row>
-    <veui-grid-row>
-      <veui-grid-column
-        :span="1"
-        :offset="1"
-      >
-        <span
-          ref="bs"
-          class="target"
-        >bottom-start</span>
-        <veui-popover
-          target="bs"
-          position="bottom-start"
-        >
-          Hello.
-        </veui-popover>
-      </veui-grid-column>
-      <veui-grid-column :span="1">
-        <span
-          ref="b"
-          class="target"
-        >bottom</span>
-        <veui-popover
-          target="b"
-          position="bottom"
-        >
-          Hello.
-        </veui-popover>
-      </veui-grid-column>
-      <veui-grid-column :span="1">
-        <span
-          ref="be"
-          class="target"
-        >bottom-end</span>
-        <veui-popover
-          target="be"
-          position="bottom-end"
-        >
-          Hello.
-        </veui-popover>
-      </veui-grid-column>
-    </veui-grid-row>
-  </veui-grid-container>
+  <section>
+    <veui-checkbox
+      v-model="aimCenter"
+      ui="s"
+    >
+      Aim center
+    </veui-checkbox>
+  </section>
+  <section class="grid">
+    <veui-popover
+      :open.sync="open"
+      :target="target"
+      :position="position"
+      :aim-center="aimCenter"
+    >
+      Hello.
+    </veui-popover>
+    <veui-button
+      ref="top-start"
+      style="grid-area: 1 / 2"
+      @mouseenter="show('top-start')"
+    >
+      top-start
+    </veui-button>
+    <veui-button
+      ref="top"
+      style="grid-area: 1 / 3"
+      @mouseenter="show('top')"
+    >
+      top
+    </veui-button>
+    <veui-button
+      ref="top-end"
+      style="grid-area: 1 / 4"
+      @mouseenter="show('top-end')"
+    >
+      top-end
+    </veui-button>
+    <veui-button
+      ref="right-start"
+      style="grid-area: 2 / 5"
+      @mouseenter="show('right-start')"
+    >
+      right-start
+    </veui-button>
+    <veui-button
+      ref="right"
+      style="grid-area: 3 / 5"
+      @mouseenter="show('right')"
+    >
+      right
+    </veui-button>
+    <veui-button
+      ref="right-end"
+      style="grid-area: 4 / 5"
+      @mouseenter="show('right-end')"
+    >
+      right-end
+    </veui-button>
+    <veui-button
+      ref="bottom-start"
+      style="grid-area: 5 / 2"
+      @mouseenter="show('bottom-start')"
+    >
+      bottom-start
+    </veui-button>
+    <veui-button
+      ref="bottom"
+      style="grid-area: 5 / 3"
+      @mouseenter="show('bottom')"
+    >
+      bottom
+    </veui-button>
+    <veui-button
+      ref="bottom-end"
+      style="grid-area: 5 / 4"
+      @mouseenter="show('bottom-end')"
+    >
+      bottom-end
+    </veui-button>
+    <veui-button
+      ref="left-start"
+      style="grid-area: 2 / 1"
+      @mouseenter="show('left-start')"
+    >
+      left-start
+    </veui-button>
+    <veui-button
+      ref="left"
+      style="grid-area: 3 / 1"
+      @mouseenter="show('left')"
+    >
+      left
+    </veui-button>
+    <veui-button
+      ref="left-end"
+      style="grid-area: 4 / 1"
+      @mouseenter="show('left-end')"
+    >
+      left-end
+    </veui-button>
+  </section>
 </article>
 </template>
 
 <script>
-import { GridContainer, GridRow, GridColumn, Popover } from 'veui'
+import { Popover, Button, Checkbox } from 'veui'
 
 export default {
   components: {
-    'veui-grid-container': GridContainer,
-    'veui-grid-row': GridRow,
-    'veui-grid-column': GridColumn,
-    'veui-popover': Popover
+    'veui-popover': Popover,
+    'veui-button': Button,
+    'veui-checkbox': Checkbox
   },
   data () {
     return {
-      ui: null
+      target: null,
+      position: null,
+      open: false,
+      aimCenter: false
+    }
+  },
+  methods: {
+    show (position) {
+      this.target = this.$refs[position]
+      this.position = position
+      this.open = true
     }
   }
 }
 </script>
 
 <style lang="less" scoped>
-.veui-grid-container {
-  width: 80%;
-  min-width: 600px;
+section + section {
+  margin-top: 20px;
 }
 
-.veui-grid-row {
-  margin-bottom: 20px;
-}
-
-.veui-grid-column {
-  text-align: center;
-  vertical-align: middle;
-  line-height: 2;
-}
-
-.target {
-  display: inline-block;
-  width: 100%;
-  padding: 0.5em 0;
-  border: 1px solid #999;
-  border-radius: 2px;
-  transition: background-color 0.3s;
-  cursor: pointer;
-
-  &:hover {
-    background-color: #f7f7f7;
-  }
+.grid {
+  display: grid;
+  grid-template-columns: auto auto auto auto auto;
+  grid-gap: 12px;
+  justify-content: center;
+  align-items: center;
 }
 </style>
+
+<docs>
+使用 `aim-center` 属性来设置浮层提示箭头始终对准目标元素中心，适合用于目标元素较小的场景。
+</docs>
diff --git a/one/docs/demo/tooltip/position.vue b/one/docs/demo/tooltip/position.vue
index 3bfd515..c68feb7 100644
--- a/one/docs/demo/tooltip/position.vue
+++ b/one/docs/demo/tooltip/position.vue
@@ -1,224 +1,151 @@
 <template>
 <article>
-  <veui-grid-container :columns="5">
-    <veui-grid-row>
-      <veui-grid-column
-        :span="1"
-        :offset="1"
-      >
-        <span
-          ref="ts"
-          class="target"
-        >top-start</span>
-        <veui-tooltip
-          target="ts"
-          position="top-start"
-        >
-          Hello.
-        </veui-tooltip>
-      </veui-grid-column>
-      <veui-grid-column :span="1">
-        <span
-          ref="t"
-          class="target"
-        >top</span>
-        <veui-tooltip
-          target="t"
-          position="top"
-        >
-          Hello.
-        </veui-tooltip>
-      </veui-grid-column>
-      <veui-grid-column :span="1">
-        <span
-          ref="te"
-          class="target"
-        >top-end</span>
-        <veui-tooltip
-          target="te"
-          position="top-end"
-        >
-          Hello.
-        </veui-tooltip>
-      </veui-grid-column>
-    </veui-grid-row>
-    <veui-grid-row>
-      <veui-grid-column :span="1">
-        <span
-          ref="ls"
-          class="target"
-        >left-start</span>
-        <veui-tooltip
-          target="ls"
-          position="left-start"
-        >
-          Hello.
-        </veui-tooltip>
-      </veui-grid-column>
-      <veui-grid-column
-        :span="1"
-        :offset="3"
-      >
-        <span
-          ref="rs"
-          class="target"
-        >right-start</span>
-        <veui-tooltip
-          target="rs"
-          position="right-start"
-        >
-          Hello.
-        </veui-tooltip>
-      </veui-grid-column>
-    </veui-grid-row>
-    <veui-grid-row>
-      <veui-grid-column :span="1">
-        <span
-          ref="l"
-          class="target"
-        >left</span>
-        <veui-tooltip
-          target="l"
-          position="left"
-        >
-          Hello.
-        </veui-tooltip>
-      </veui-grid-column>
-      <veui-grid-column
-        :span="1"
-        :offset="3"
-      >
-        <span
-          ref="r"
-          class="target"
-        >right</span>
-        <veui-tooltip
-          target="r"
-          position="right"
-        >
-          Hello.
-        </veui-tooltip>
-      </veui-grid-column>
-    </veui-grid-row>
-    <veui-grid-row>
-      <veui-grid-column :span="1">
-        <span
-          ref="le"
-          class="target"
-        >left-end</span>
-        <veui-tooltip
-          target="le"
-          position="left-end"
-        >
-          Hello.
-        </veui-tooltip>
-      </veui-grid-column>
-      <veui-grid-column
-        :span="1"
-        :offset="3"
-      >
-        <span
-          ref="re"
-          class="target"
-        >right-end</span>
-        <veui-tooltip
-          target="re"
-          position="right-end"
-        >
-          Hello.
-        </veui-tooltip>
-      </veui-grid-column>
-    </veui-grid-row>
-    <veui-grid-row>
-      <veui-grid-column
-        :span="1"
-        :offset="1"
-      >
-        <span
-          ref="bs"
-          class="target"
-        >bottom-start</span>
-        <veui-tooltip
-          target="bs"
-          position="bottom-start"
-        >
-          Hello.
-        </veui-tooltip>
-      </veui-grid-column>
-      <veui-grid-column :span="1">
-        <span
-          ref="b"
-          class="target"
-        >bottom</span>
-        <veui-tooltip
-          target="b"
-          position="bottom"
-        >
-          Hello.
-        </veui-tooltip>
-      </veui-grid-column>
-      <veui-grid-column :span="1">
-        <span
-          ref="be"
-          class="target"
-        >bottom-end</span>
-        <veui-tooltip
-          target="be"
-          position="bottom-end"
-        >
-          Hello.
-        </veui-tooltip>
-      </veui-grid-column>
-    </veui-grid-row>
-  </veui-grid-container>
+  <section>
+    <veui-checkbox
+      v-model="aimCenter"
+      ui="s"
+    >
+      Aim center
+    </veui-checkbox>
+  </section>
+  <section class="grid">
+    <veui-tooltip
+      :open.sync="open"
+      :target="target"
+      :position="position"
+      :aim-center="aimCenter"
+    >
+      Hello.
+    </veui-tooltip>
+    <veui-button
+      ref="top-start"
+      style="grid-area: 1 / 2"
+      @mouseenter="show('top-start')"
+    >
+      top-start
+    </veui-button>
+    <veui-button
+      ref="top"
+      style="grid-area: 1 / 3"
+      @mouseenter="show('top')"
+    >
+      top
+    </veui-button>
+    <veui-button
+      ref="top-end"
+      style="grid-area: 1 / 4"
+      @mouseenter="show('top-end')"
+    >
+      top-end
+    </veui-button>
+    <veui-button
+      ref="right-start"
+      style="grid-area: 2 / 5"
+      @mouseenter="show('right-start')"
+    >
+      right-start
+    </veui-button>
+    <veui-button
+      ref="right"
+      style="grid-area: 3 / 5"
+      @mouseenter="show('right')"
+    >
+      right
+    </veui-button>
+    <veui-button
+      ref="right-end"
+      style="grid-area: 4 / 5"
+      @mouseenter="show('right-end')"
+    >
+      right-end
+    </veui-button>
+    <veui-button
+      ref="bottom-start"
+      style="grid-area: 5 / 2"
+      @mouseenter="show('bottom-start')"
+    >
+      bottom-start
+    </veui-button>
+    <veui-button
+      ref="bottom"
+      style="grid-area: 5 / 3"
+      @mouseenter="show('bottom')"
+    >
+      bottom
+    </veui-button>
+    <veui-button
+      ref="bottom-end"
+      style="grid-area: 5 / 4"
+      @mouseenter="show('bottom-end')"
+    >
+      bottom-end
+    </veui-button>
+    <veui-button
+      ref="left-start"
+      style="grid-area: 2 / 1"
+      @mouseenter="show('left-start')"
+    >
+      left-start
+    </veui-button>
+    <veui-button
+      ref="left"
+      style="grid-area: 3 / 1"
+      @mouseenter="show('left')"
+    >
+      left
+    </veui-button>
+    <veui-button
+      ref="left-end"
+      style="grid-area: 4 / 1"
+      @mouseenter="show('left-end')"
+    >
+      left-end
+    </veui-button>
+  </section>
 </article>
 </template>
 
 <script>
-import { GridContainer, GridRow, GridColumn, Tooltip } from 'veui'
+import { Tooltip, Button, Checkbox } from 'veui'
 
 export default {
   components: {
-    'veui-grid-container': GridContainer,
-    'veui-grid-row': GridRow,
-    'veui-grid-column': GridColumn,
-    'veui-tooltip': Tooltip
+    'veui-tooltip': Tooltip,
+    'veui-button': Button,
+    'veui-checkbox': Checkbox
   },
   data () {
     return {
-      ui: null
+      target: null,
+      position: null,
+      open: false,
+      aimCenter: false
+    }
+  },
+  methods: {
+    show (position) {
+      this.target = this.$refs[position]
+      this.position = position
+      this.open = true
     }
   }
 }
 </script>
 
 <style lang="less" scoped>
-.veui-grid-container {
-  width: 80%;
-  min-width: 600px;
+section + section {
+  margin-top: 20px;
 }
 
-.veui-grid-row {
-  margin-bottom: 20px;
-}
-
-.veui-grid-column {
-  text-align: center;
-  vertical-align: middle;
-  line-height: 2;
-}
-
-.target {
-  display: inline-block;
-  width: 100%;
-  padding: 0.5em 0;
-  border: 1px solid #999;
-  border-radius: 2px;
-  transition: background-color 0.3s;
-  cursor: pointer;
-
-  &:hover {
-    background-color: #f7f7f7;
-  }
+.grid {
+  display: grid;
+  grid-template-columns: auto auto auto auto auto;
+  grid-gap: 12px;
+  justify-content: center;
+  align-items: center;
 }
 </style>
+
+<docs>
+使用 `aim-center` 属性来设置浮层提示箭头始终对准目标元素中心，适合用于目标元素较小的场景。
+</docs>
diff --git a/one/docs/en-US/components/tooltip.md b/one/docs/en-US/components/tooltip.md
index 98da04e..d79e5e1 100644
--- a/one/docs/en-US/components/tooltip.md
+++ b/one/docs/en-US/components/tooltip.md
@@ -30,6 +30,7 @@ Use the `trigger` prop to specify when to show/hide the tooltip.
 | `open` | `boolean` | `false` | [^open] |
 | `target` | `string|Vue|Node` | - | See the [`target` prop](./overlay#props) of thh [`Overlay`](./overlay) component. |
 | `position` | `string` | `'top'` | [^position] |
+| `aim-center` | `boolean` | `false` | Whether the tooltip arrow always points to the center of the target element. |
 | `trigger` | `string` | `'hover'` | [^trigger] |
 | `interactive` | `boolean` | `true` | Whether the tooltip content is interactive. When set to `false`, the tooltip will be automatically hidden after the event specified by `trigger` is triggered outside the `target`. |
 | `hide-delay` | `number` | `tooltip.hideDelays` | Time (in milliseconds) to wait before hiding the tooltip after the close trigger is triggered. Can be used to prevent the tooltip being immediately closed after pointer leaves the `target` element and before it enters the tooltip itself. |