From 5d562b88b28d1936b06fe0da006b17f252a5906a Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Sat, 12 Dec 2020 00:51:53 +0800
Subject: [PATCH] refactor(tooltip): use style seperately from popover

---
 src/tooltip/src/main.js                    |  9 ++++--
 src/tooltip/src/styles/index.js            | 11 ++++++++
 src/tooltip/src/styles/themed-base.cssr.js | 32 ++++++++++++++++++++++
 src/tooltip/styles/_common.js              |  3 ++
 src/tooltip/styles/dark.js                 |  9 +++++-
 src/tooltip/styles/light.js                |  9 +++++-
 6 files changed, 68 insertions(+), 5 deletions(-)
 create mode 100644 src/tooltip/src/styles/index.js
 create mode 100644 src/tooltip/src/styles/themed-base.cssr.js
 create mode 100644 src/tooltip/styles/_common.js

diff --git a/src/tooltip/src/main.js b/src/tooltip/src/main.js
index afd8f2494..20beecb52 100644
--- a/src/tooltip/src/main.js
+++ b/src/tooltip/src/main.js
@@ -1,11 +1,14 @@
-/**
- * Tooltip: popover wearing waistcoat
- */
+// Tooltip: popover wearing waistcoat
 import { NPopover } from '../../popover'
 import { h } from 'vue'
+import { withCssr } from '../../_mixins'
+import styles from './styles'
 
 export default {
   name: 'Tooltip',
+  mixins: [
+    withCssr(styles)
+  ],
   props: {
     ...NPopover.props,
     showArrow: {
diff --git a/src/tooltip/src/styles/index.js b/src/tooltip/src/styles/index.js
new file mode 100644
index 000000000..af388e084
--- /dev/null
+++ b/src/tooltip/src/styles/index.js
@@ -0,0 +1,11 @@
+import themedBaseStyle from './themed-base.cssr.js'
+
+export default [
+  {
+    key: 'mergedTheme',
+    watch: [
+      'mergedTheme'
+    ],
+    CNode: themedBaseStyle
+  }
+]
diff --git a/src/tooltip/src/styles/themed-base.cssr.js b/src/tooltip/src/styles/themed-base.cssr.js
new file mode 100644
index 000000000..8eae893f1
--- /dev/null
+++ b/src/tooltip/src/styles/themed-base.cssr.js
@@ -0,0 +1,32 @@
+import { c, cTB, cB, cM } from '../../../_utils/cssr'
+
+export default c([
+  ({ props }) => {
+    const {
+      $local: {
+        borderRadius,
+        boxShadow,
+        padding,
+        color,
+        textColor
+      }
+    } = props
+    return cTB('popover', [
+      cM('tooltip', {
+        raw: `
+          padding: ${padding};
+          border-radius: ${borderRadius};
+          box-shadow: ${boxShadow};
+          background-color: ${color};
+          color: ${textColor};
+        `
+      }, [
+        cB('popover-arrow-wrapper', [
+          cB('popover-arrow', {
+            backgroundColor: color
+          })
+        ])
+      ])
+    ])
+  }
+])
diff --git a/src/tooltip/styles/_common.js b/src/tooltip/styles/_common.js
new file mode 100644
index 000000000..7dd8cc858
--- /dev/null
+++ b/src/tooltip/styles/_common.js
@@ -0,0 +1,3 @@
+export default {
+  padding: '8px 14px'
+}
diff --git a/src/tooltip/styles/dark.js b/src/tooltip/styles/dark.js
index d179a34bf..ba312a58f 100644
--- a/src/tooltip/styles/dark.js
+++ b/src/tooltip/styles/dark.js
@@ -1,6 +1,7 @@
 import create from '../../_styles/utils/create-component-base'
 import { baseDark } from '../../_styles/base'
 import { popoverDark } from '../../popover/styles'
+import commonVars from './_common'
 
 export default create({
   theme: 'dark',
@@ -10,6 +11,12 @@ export default create({
     popoverDark
   ],
   getLocalVars (vars) {
-    return {}
+    return {
+      ...commonVars,
+      borderRadius: vars.borderRadius,
+      boxShadow: vars.boxShadow2,
+      color: vars.popoverColor,
+      textColor: vars.textColor2Overlay
+    }
   }
 })
diff --git a/src/tooltip/styles/light.js b/src/tooltip/styles/light.js
index 3b082e87b..fc2c5ab3d 100644
--- a/src/tooltip/styles/light.js
+++ b/src/tooltip/styles/light.js
@@ -1,6 +1,7 @@
 import create from '../../_styles/utils/create-component-base'
 import { baseLight } from '../../_styles/base'
 import { popoverLight } from '../../popover/styles'
+import commonVars from './_common'
 
 export default create({
   theme: 'light',
@@ -10,6 +11,12 @@ export default create({
     popoverLight
   ],
   getLocalVars (vars) {
-    return {}
+    return {
+      ...commonVars,
+      borderRadius: vars.borderRadius,
+      boxShadow: vars.boxShadow2,
+      color: 'rgba(0, 0, 0, .85)',
+      textColor: vars.baseColor
+    }
   }
 })