feat(components): optimize popup & tooltip components

onu-ui · Apr 23, 2023 · 72c031f · 72c031f
1 parent 04a2bbd
commit 72c031f
Show file tree

Hide file tree

Showing 16 changed files with 341 additions and 8 deletions.
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -117,6 +117,10 @@ const components = [
         text: 'Popup',
         link: '/components/popup',
       },
+      {
+        text: 'ToolTip',
+        link: '/components/tooltip',
+      },
       {
         text: 'Collapse',
         link: '/components/collapse',

diff --git a/docs/components/tooltip.md b/docs/components/tooltip.md
@@ -0,0 +1,80 @@
+---
+title: ToolTip
+lang: en-US
+---
+
+# ToolTip <new-badge/>
+
+Tooltip can be used to show a message when hovering over an element.
+
+
+## Basic
+
+Move the mouse in or click to pop up bubbles, which can operate on the elements on the floating layer, and carry complex content and operations.
+
+<demo src="../example/tooltip/basic.vue"></demo>
+
+## Theme
+
+Tooltip has two built-in themes: `Dark` and `Light`.
+
+Set `type` to modify theme, the default is `Dark`.
+
+<demo src="../example/tooltip/type.vue"></demo>
+
+
+## Trigger
+
+By setting `trigger`, you can specify different trigger methods.
+
+They are: `hover` | `click` | `focus` | `context-menu`.
+
+<demo src="../example/tooltip/trigger.vue"></demo>
+
+
+## Position
+
+`Tooltip` supports 12 different positions. They are: `top` `left` `right` `bottom` `top-left` `top-right` `bottom-left` `bottom-right` `left-top` `left-bottom` `right-top` `right-bottom`.
+
+<demo src="../example/tooltip/position.vue"></demo>
+
+## Custom Background Color
+
+Customize the background color through the `background-color` property.
+
+<demo src="../example/tooltip/bg.vue"></demo>
+
+
+
+## Tooltip Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| popup-visible / v-model | `boolean` | `undefined` | Whether the ToolTip is visible. |
+| default-popup-visible | `boolean` | `false` | Whether the ToolTip is visible by default (`uncontrolled mode`). |
+| content | `string`|`undefined`| Content. |
+| type | `'Dark' \| 'Light'` | `'Dark'` | ToolTip type. |
+| trigger | `'hover' \| 'click' \| 'focus' \| 'contextMenu'`|`'hover'` | `'hover'` | Trigger method. |
+| position | `'top' \| 'top-left' \| 'top-right' \| 'bottom' \| 'bottom-left' \| 'bottom-right' \| 'left' \| 'left-top' \| 'left-bottom' \| 'right' \| 'right-top' \| 'right-bottom'`|`'top'` | ToolTip position. |
+| background-color | `string` | `undefined` | The backgroundColor of the ToolTip content. |
+| content-class | `string` | `undefined` | The class name of the ToolTip content. |
+| content-style | `CSSProperties` | `undefined` | The style of the ToolTip content. |
+| arrow-class | `string` | `undefined` | The class name of the ToolTip arrow. |
+| arrow-style | `CSSProperties` | `undefined` | The style of the ToolTip arrow. |
+| popup-container | `string \| HTMLElement  \| undefined` | `undefined` | Mount container for ToolTip box. |
+
+
+## Tooltip Slots
+
+
+| Name | Parameters | Description | 
+| --- | --- | --- |
+| content | `()` | Custom ToolTip content. |
+
+## Tooltip Methods
+
+| Name | Parameters | Description | 
+| --- | --- | --- |
+| popup-visible-change | `(visible: boolean) => void` | Triggered when the text bubble display status changes. |
+
+
diff --git a/docs/example/tooltip/basic.vue b/docs/example/tooltip/basic.vue
@@ -0,0 +1,11 @@
+<template>
+  <div space-y-2>
+    <div fscw gap-2>
+      <o-tool-tip content="Here is the text content">
+        <o-button type="primary">
+          Hover
+        </o-button>
+      </o-tool-tip>
+    </div>
+  </div>
+</template>
diff --git a/docs/example/tooltip/bg.vue b/docs/example/tooltip/bg.vue
@@ -0,0 +1,11 @@
+<template>
+  <div space-y-2>
+    <div fscw gap-2>
+      <OToolTip content="Here is the text content" background-color="#722ED1">
+        <o-button type="secondary">
+          Custom
+        </o-button>
+      </OToolTip>
+    </div>
+  </div>
+</template>
diff --git a/docs/example/tooltip/position.vue b/docs/example/tooltip/position.vue
@@ -0,0 +1,100 @@
+<template>
+  <div grid="~ gap-3 cols-1 md:cols-2 xl:cols-3" mx-auto>
+    <OToolTip position="top-left">
+      <o-button type="success">
+        top-left
+      </o-button>
+      <template #content>
+        Here is the text content
+      </template>
+    </OToolTip>
+    <OToolTip position="top">
+      <o-button type="success">
+        top
+      </o-button>
+      <template #content>
+        Here is the text content
+      </template>
+    </OToolTip>
+    <OToolTip position="top-right">
+      <o-button type="success">
+        top-right
+      </o-button>
+      <template #content>
+        Here is the text content
+      </template>
+    </OToolTip>
+    <OToolTip position="bottom-left">
+      <o-button type="success">
+        bottom-left
+      </o-button>
+      <template #content>
+        Here is the text content
+      </template>
+    </OToolTip>
+    <OToolTip position="bottom">
+      <o-button type="success">
+        bottom
+      </o-button>
+      <template #content>
+        Here is the text content
+      </template>
+    </OToolTip>
+    <OToolTip position="bottom-right">
+      <o-button type="success">
+        bottom-right
+      </o-button>
+      <template #content>
+        Here is the text content
+      </template>
+    </OToolTip>
+    <OToolTip position="left-top">
+      <o-button type="success">
+        left-top
+      </o-button>
+      <template #content>
+        Here is the text content
+      </template>
+    </OToolTip>
+    <OToolTip position="left">
+      <o-button type="success">
+        left
+      </o-button>
+      <template #content>
+        Here is the text content
+      </template>
+    </OToolTip>
+    <OToolTip position="left-bottom">
+      <o-button type="success">
+        left-bottom
+      </o-button>
+      <template #content>
+        Here is the text content
+      </template>
+    </OToolTip>
+    <OToolTip position="right-top">
+      <o-button type="success">
+        right-top
+      </o-button>
+      <template #content>
+        Here is the text content
+      </template>
+    </OToolTip>
+    <OToolTip position="right">
+      <o-button type="success">
+        right
+      </o-button>
+      <template #content>
+        Here is the text content
+      </template>
+    </OToolTip>
+    <OToolTip position="right-bottom">
+      <o-button type="success">
+        right-bottom
+      </o-button>
+      <template #content>
+        Here is the text content
+      </template>
+    </OToolTip>
+  </div>
+</template>
diff --git a/docs/example/tooltip/trigger.vue b/docs/example/tooltip/trigger.vue
@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+const handleVisibleChange = (visible: boolean) => {
+  // eslint-disable-next-line no-console
+  console.log(visible)
+}
+</script>
+
+<template>
+  <div space-y-2>
+    <div fscw gap-2>
+      <OToolTip>
+        <o-button type="error">
+          Hover
+        </o-button>
+        <template #content>
+          Here is the text content
+        </template>
+      </OToolTip>
+      <OToolTip trigger="click">
+        <o-button type="secondary">
+          Click
+        </o-button>
+        <template #content>
+          Here is the text content
+        </template>
+      </OToolTip>
+      <OToolTip trigger="context-menu">
+        <o-button type="success">
+          Context-menu
+        </o-button>
+        <template #content>
+          Here is the text content
+        </template>
+      </OToolTip>
+      <OToolTip
+        trigger="focus"
+        @popup-visible-change="handleVisibleChange"
+      >
+        <o-button type="warning">
+          Focus
+        </o-button>
+        <template #content>
+          Here is the text content
+        </template>
+      </OToolTip>
+    </div>
+  </div>
+</template>
diff --git a/docs/example/tooltip/type.vue b/docs/example/tooltip/type.vue
@@ -0,0 +1,16 @@
+<template>
+  <div space-y-2>
+    <div fscw gap-2>
+      <o-tool-tip content="Here is the text content" type="Dark">
+        <o-button>
+          Dark
+        </o-button>
+      </o-tool-tip>
+      <o-tool-tip content="Here is the text content" type="Light">
+        <o-button>
+          Light
+        </o-button>
+      </o-tool-tip>
+    </div>
+  </div>
+</template>
diff --git a/docs/guide/components.ts b/docs/guide/components.ts
@@ -139,6 +139,12 @@ export const Components: ComponentListItem[] = [
         link: '/components/popup.html',
         icon: '/svgs/popup.svg',
       },
+      {
+        name: 'ToolTip',
+        description: 'Tooltip can be used to show a message when hovering over an element.',
+        link: '/components/tooltip.html',
+        icon: '/svgs/tooltip.svg',
+      },
       {
         name: 'Collapse',
         description: 'Collapse is used for showing and hiding content.',

diff --git a/example/src/components/TheToolTip.vue b/example/src/components/TheToolTip.vue
@@ -146,6 +146,29 @@
           </OToolTip>
         </div>
       </OCard>
+      <OCard title="backgroundColor" description="Custom BackgroundColor">
+        <div fsc gap-2>
+          <OToolTip content="Here is the text content" background-color="#722ED1">
+            <o-button type="secondary">
+              backgroundColor
+            </o-button>
+          </OToolTip>
+        </div>
+      </OCard>
+      <OCard title="Type" description="ToolTip Type">
+        <div fsc gap-2>
+          <OToolTip content="Here is the text content" type="Light">
+            <o-button>
+              Light
+            </o-button>
+          </OToolTip>
+          <OToolTip content="Here is the text content" type="Dark">
+            <o-button type="info">
+              Dark
+            </o-button>
+          </OToolTip>
+        </div>
+      </OCard>
     </div>
   </o-card>
 </template>
diff --git a/packages/components/tooltip/src/index.vue b/packages/components/tooltip/src/index.vue
@@ -1,15 +1,37 @@
 <script setup lang='ts' name="OToolTip">
+import type { CSSProperties } from 'vue'
 import OTrigger from '../../trigger/src/index'
 import { toolTipEmits, toolTipProps } from './props'
 
 const props = defineProps(toolTipProps)
 const emit = defineEmits(toolTipEmits)
 
 const _popupVisible = ref(props.defaultPopupVisible)
+
 const computedPopupVisible = computed(
   () => props.popupVisible ?? _popupVisible.value,
 )
 
+const computedContentStyle = computed<CSSProperties | undefined>(() => {
+  if (props.backgroundColor || props.contentStyle) {
+    return {
+      backgroundColor: props.backgroundColor,
+      ...props.contentStyle,
+    }
+  }
+  return undefined
+})
+
+const computedArrowStyle = computed<CSSProperties | undefined>(() => {
+  if (props.backgroundColor || props.arrowStyle) {
+    return {
+      backgroundColor: props.backgroundColor,
+      borderColor: props.backgroundColor,
+      ...props.arrowStyle,
+    }
+  }
+})
+
 const handlePopupVisibleChange = (visible: boolean) => {
   _popupVisible.value = visible
   emit('update:popupVisible', visible)
@@ -25,10 +47,10 @@ const handlePopupVisibleChange = (visible: boolean) => {
     :popup-visible="computedPopupVisible"
     show-arrow
     :popup-offset="10"
-    :content-class="['o-trigger-popup-content', contentClass]"
-    :content-style="contentStyle"
-    :arrow-class="['o-trigger-popup-arrow', arrowClass]"
-    :arrow-style="arrowStyle"
+    :content-class="['o-trigger-popup-content o-trigger-popup-tooltip', `${type === 'Dark' ? 'o-trigger-popup-darker' : 'o-trigger-popup-lighter'}`, contentClass]"
+    :content-style="computedContentStyle"
+    :arrow-class="['o-trigger-popup-arrow', `${type === 'Dark' ? 'o-trigger-popup-arrow-darker' : 'o-trigger-popup-arrow-lighter'}`, arrowClass]"
+    :arrow-style="computedArrowStyle"
     animation-name="o-fade-in-fade-out"
     auto-fit-transform-origin
     @popup-visible-change="handlePopupVisibleChange"

diff --git a/packages/components/tooltip/src/props.ts b/packages/components/tooltip/src/props.ts
@@ -12,6 +12,10 @@ export const toolTipProps = {
     type: Boolean,
     default: false,
   },
+  type: {
+    type: String as PropType<'Dark' | 'Light'>,
+    default: 'Dark',
+  },
   content: String,
   /** trigger type: 'hover','click','focus','contextMenu' */
   trigger: {
@@ -51,6 +55,7 @@ export const toolTipProps = {
   contentStyle: {
     type: Object as PropType<CSSProperties>,
   },
+  backgroundColor: String,
   /**
    * The class name of the popup arrow
    */

diff --git a/packages/onu-ui/src/style.css b/packages/onu-ui/src/style.css