From 7f1917a894b3eae6757deb8412e67b2f1a00c4af Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Sun, 29 Sep 2019 19:07:16 +0800
Subject: [PATCH] feat(switch): light theme

---
 .../components/switch/enUS/basic.md           |  19 +++
 .../components/switch/enUS/event.md           |  21 ++++
 .../components/switch/enUS/index.md           |   5 +
 .../components/switch/index.entry             |   0
 .../components/switch/zhCN/index.md           |   0
 .../components/switchDemo/basicUsage.demo.vue |  35 ------
 .../switchDemo/changeEvent.demo.vue           |  37 ------
 .../components/switchDemo/index.vue           |  35 ------
 demo/init.js                                  |   2 +-
 demo/utils/ComponentDemo.vue                  |   9 +-
 packages/common/Switch/src/main.vue           |   7 +-
 packages/common/Tooltip/src/main.vue          |   4 +
 styles/Switch.scss                            | 117 ++++++++++--------
 styles/themes/dark/components/Switch.scss     |  13 ++
 styles/themes/dark/index.scss                 |   2 +
 styles/themes/light/components/Switch.scss    |  13 ++
 styles/themes/light/index.scss                |   2 +
 17 files changed, 161 insertions(+), 160 deletions(-)
 create mode 100644 demo/documentation/components/switch/enUS/basic.md
 create mode 100644 demo/documentation/components/switch/enUS/event.md
 create mode 100644 demo/documentation/components/switch/enUS/index.md
 create mode 100644 demo/documentation/components/switch/index.entry
 create mode 100644 demo/documentation/components/switch/zhCN/index.md
 delete mode 100644 demo/documentation/components/switchDemo/basicUsage.demo.vue
 delete mode 100644 demo/documentation/components/switchDemo/changeEvent.demo.vue
 delete mode 100644 demo/documentation/components/switchDemo/index.vue
 create mode 100644 styles/themes/dark/components/Switch.scss
 create mode 100644 styles/themes/light/components/Switch.scss

diff --git a/demo/documentation/components/switch/enUS/basic.md b/demo/documentation/components/switch/enUS/basic.md
new file mode 100644
index 000000000..1ae930152
--- /dev/null
+++ b/demo/documentation/components/switch/enUS/basic.md
@@ -0,0 +1,19 @@
+# Basic
+```html
+<n-switch
+  v-model="active"
+/>
+<n-switch
+  v-model="active"
+  disabled
+/>
+```
+```js
+export default {
+  data () {
+    return {
+      active: false
+    }
+  }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/switch/enUS/event.md b/demo/documentation/components/switch/enUS/event.md
new file mode 100644
index 000000000..7f71a5cc4
--- /dev/null
+++ b/demo/documentation/components/switch/enUS/event.md
@@ -0,0 +1,21 @@
+# Event
+```html
+<n-switch
+  v-model="active"
+  @change="handleChange"
+/>
+```
+```js
+export default {
+  data () {
+    return {
+      active: false
+    }
+  },
+  methods: {
+    handleChange (value) {
+      this.$NMessage.info(`Change Event: ${value}`)
+    }
+  }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/switch/enUS/index.md b/demo/documentation/components/switch/enUS/index.md
new file mode 100644
index 000000000..f77e82252
--- /dev/null
+++ b/demo/documentation/components/switch/enUS/index.md
@@ -0,0 +1,5 @@
+# Switch
+```demo
+basic
+event
+```
\ No newline at end of file
diff --git a/demo/documentation/components/switch/index.entry b/demo/documentation/components/switch/index.entry
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/documentation/components/switch/zhCN/index.md b/demo/documentation/components/switch/zhCN/index.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/documentation/components/switchDemo/basicUsage.demo.vue b/demo/documentation/components/switchDemo/basicUsage.demo.vue
deleted file mode 100644
index 280e0d40d..000000000
--- a/demo/documentation/components/switchDemo/basicUsage.demo.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Basic Usage
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="flex-wrap: nowrap;"
-    >
-      <!--EXAMPLE_START-->
-      <n-switch
-        v-model="isActive"
-      />
-      <n-switch
-        v-model="isActive"
-        disabled
-      />
-      <!--EXAMPLE_END-->
-    </div>
-    <pre class="n-doc-section__inspect">active: {{ isActive }}</pre>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      isActive: false
-    }
-  }
-}
-</script>
diff --git a/demo/documentation/components/switchDemo/changeEvent.demo.vue b/demo/documentation/components/switchDemo/changeEvent.demo.vue
deleted file mode 100644
index 6090db1e1..000000000
--- a/demo/documentation/components/switchDemo/changeEvent.demo.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Change Event
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="flex-wrap: nowrap;"
-    >
-      <!--EXAMPLE_START-->
-      <n-switch
-        v-model="isActive"
-        @change="handleChange"
-      />
-      <!--EXAMPLE_END-->
-    </div>
-    <pre class="n-doc-section__inspect">active: {{ isActive }}</pre>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      isActive: false
-    }
-  },
-  methods: {
-    handleChange (value) {
-      this.$NMessage.info(value)
-    }
-  }
-}
-</script>
diff --git a/demo/documentation/components/switchDemo/index.vue b/demo/documentation/components/switchDemo/index.vue
deleted file mode 100644
index bfee58bbf..000000000
--- a/demo/documentation/components/switchDemo/index.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <div
-    ref="doc"
-    class="n-doc"
-  >
-    <div class="n-doc-header">
-      <n-gradient-text :font-size="20">
-        Switch / n-switch
-      </n-gradient-text>
-    </div>
-    <div class="n-doc-body">
-      <basic-usage />
-      <change-event />
-    </div>
-  </div>
-</template>
-
-<script>
-import basicUsage from './basicUsage.demo.vue'
-import changeEvent from './changeEvent.demo.vue'
-
-export default {
-  components: {
-    basicUsage,
-    changeEvent
-  },
-  data () {
-    return {
-
-    }
-  },
-  methods: {
-  }
-}
-</script>
diff --git a/demo/init.js b/demo/init.js
index abfe4e71c..3d487e0e2 100644
--- a/demo/init.js
+++ b/demo/init.js
@@ -15,7 +15,7 @@ import gradientTextDemo from './documentation/components/gradientTextDemo'
 import iconDemo from './documentation/components/iconDemo'
 import checkboxDemo from './documentation/components/checkboxDemo'
 import buttonDemo from './documentation/components/buttonDemo'
-import switchDemo from './documentation/components/switchDemo'
+import switchDemo from './documentation/components/switch'
 import tableDemo from './documentation/components/tableDemo'
 import inputDemo from './documentation/components/inputDemo'
 import selectDemo from './documentation/components/selectDemo'
diff --git a/demo/utils/ComponentDemo.vue b/demo/utils/ComponentDemo.vue
index 0ef2e36df..c245f2271 100644
--- a/demo/utils/ComponentDemo.vue
+++ b/demo/utils/ComponentDemo.vue
@@ -26,6 +26,7 @@
         :delay="300"
         :placement="'top'"
         :arrow="true"
+        :controller="controller"
       >
         <template v-slot:activator>
           <n-button
@@ -68,12 +69,18 @@ export default {
     return {
       showCode: false,
       lightThemeCSSRef: null,
-      defaultThemeCSSRef: null
+      defaultThemeCSSRef: null,
+      controller: {}
     }
   },
   watch: {
     synthesizedTheme (value) {
 
+    },
+    showCode () {
+      this.$nextTick().then(() => {
+        this.controller.updatePosition()
+      })
     }
   },
   mounted () {
diff --git a/packages/common/Switch/src/main.vue b/packages/common/Switch/src/main.vue
index 156457b37..d7cee77c8 100644
--- a/packages/common/Switch/src/main.vue
+++ b/packages/common/Switch/src/main.vue
@@ -1,6 +1,9 @@
 <template>
   <div
     class="n-switch"
+    :class="{
+      [`n-${synthesizedTheme}-theme`]: synthesizedTheme
+    }"
     @click="handleClick"
   >
     <div
@@ -12,10 +15,12 @@
 
 <script>
 import Emitter from '../../../mixins/emitter'
+import withapp from '../../../mixins/withapp'
+import themeable from '../../../mixins/themeable'
 
 export default {
   name: 'NSwitch',
-  mixins: [ Emitter ],
+  mixins: [ withapp, themeable, Emitter ],
   inject: {
     formItem: {
       default: null
diff --git a/packages/common/Tooltip/src/main.vue b/packages/common/Tooltip/src/main.vue
index c28c74153..43aa2a0a2 100644
--- a/packages/common/Tooltip/src/main.vue
+++ b/packages/common/Tooltip/src/main.vue
@@ -55,6 +55,10 @@ export default {
     maxWidth: {
       type: Number,
       default: null
+    },
+    controller: {
+      type: Object,
+      default: null
     }
   },
   render (h, context) {
diff --git a/styles/Switch.scss b/styles/Switch.scss
index a3474158e..1c3335c51 100644
--- a/styles/Switch.scss
+++ b/styles/Switch.scss
@@ -1,62 +1,79 @@
 @import './mixins/mixins.scss';
 @import './themes/vars.scss';
 
-@include b(switch) {
-  display: inline-block;
-  @include e(rail) {
-    cursor: pointer;
-    position: relative;
-    height: 14px;
-    width: 30px;
-    border-radius: 7px;
-    background-color: rgba(148,151,155,0.4);
-    margin: 3px;
-    transition: background-color .2s $default-cubic-bezier;
-    &::before, &::after {
-      cursor: inherit;
-      content: "";
-      position: absolute;
-      height: 20px;
-      width: 24px;
-      max-width: 20px;
-      border-radius: 10px;
-      top: -3px;
-      left: -3px;
-      box-shadow:0px 2px 4px 0px rgba(0,0,0,0.4);
-      transition: left .2s $default-cubic-bezier, opacity .2s $default-cubic-bezier, max-width .2s $default-cubic-bezier;
+@include themes-mixin{
+  @include b(switch) {
+    @include once {
+      display: inline-block;
     }
-    @include not-m(disabled) {
-      &:active::before, &:active::after {
-        max-width: 24px;
-      }
-      @include m(active) {
-        &:active::before, &:active::after {
-          left: 9px;
+    @include e(rail) {
+      @include once {
+        cursor: pointer;
+        position: relative;
+        height: 14px;
+        width: 30px;
+        border-radius: 7px;
+        margin: 3px;
+        transition: background-color .2s $default-cubic-bezier;
+        &::before, &::after {
+          box-sizing: border-box;
+          cursor: inherit;
+          content: "";
+          position: absolute;
+          height: 20px;
+          width: 24px;
+          max-width: 20px;
+          border-radius: 10px;
+          top: -3px;
+          left: -3px;
+          // transition: left .2s $default-cubic-bezier, opacity .2s $default-cubic-bezier, max-width .2s $default-cubic-bezier;
+        }
+        &::before {
+          opacity: 1;
+        }
+        &::after {
+          opacity: 0;
+        }
+        @include not-m(disabled) {
+          &:active::before, &:active::after {
+            max-width: 24px;
+          }
+          @include m(active) {
+            &:active::before, &:active::after {
+              left: 9px;
+            }
+          }
+        }
+        @include m(active) {
+          &::before {
+            left: 13px;
+            opacity: 1;
+          }
+          &::after {
+            left: 13px;
+            opacity: 1;
+          }
         }
       }
-    }
-    &::before {
-      background-image: linear-gradient(52deg,rgba(148,151,155,1) 0%,rgba(148,151,155,1) 100%);
-      opacity: 1;
-    }
-    &::after {
-      background-image: linear-gradient(52deg,rgba(120,205,104,1) 0%,rgba(20,166,165,1) 100%);
-      opacity: 0;
-    }
-    @include m(active) {
-      background-color: rgba(97, 196, 118, .27);
+      &::before, &::after {
+        box-shadow: $--switch-switcher-box-shadow;
+        transition: $--switch-switcher-transition;
+        // border: $--switch-switcher-border;
+      }
+      background-color: map-get($map: $--switch-rail-background-color, $key: 'inactive');
       &::before {
-        left: 13px;
-        opacity: 0;
+        background-image: map-get($map: $--switch-switcher-color, $key: 'inactive');
       }
       &::after {
-        left: 13px;
-        opacity: 1;
+        background-image: map-get($map: $--switch-switcher-color, $key: 'active');
+      }
+      @include m(active) {
+        background-color: map-get($map: $--switch-rail-background-color, $key: 'active');
+      }
+      @include m(disabled) {
+        cursor: not-allowed;
+        opacity: .5;
       }
     }
-   @include m(disabled) {
-      cursor: not-allowed;
-      opacity: .5;
-    }
   }
-}
\ No newline at end of file
+}
diff --git a/styles/themes/dark/components/Switch.scss b/styles/themes/dark/components/Switch.scss
new file mode 100644
index 000000000..32188586e
--- /dev/null
+++ b/styles/themes/dark/components/Switch.scss
@@ -0,0 +1,13 @@
+@mixin setup-dark-switch {
+  $--switch-rail-background-color: (
+    "inactive": rgba(148,151,155,0.4),
+    "active": change-color($--n-primary-color, $alpha: .25)
+  )!global;
+  $--switch-switcher-color: (
+    "inactive": linear-gradient(52deg,rgba(148,151,155,1) 0%,rgba(148,151,155,1) 100%),
+    "active": linear-gradient(52deg,rgba(120,205,104,1) 0%,rgba(20,166,165,1) 100%)
+  ) !global;
+  $--switch-switcher-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.4) !global;
+  $--switch-switcher-border: 1px solid transparent !global;
+  $--switch-switcher-transition: (left .2s $default-cubic-bezier, opacity .2s $default-cubic-bezier, max-width .2s $default-cubic-bezier) !global;
+}
\ No newline at end of file
diff --git a/styles/themes/dark/index.scss b/styles/themes/dark/index.scss
index 840d8aa91..2d5b7ef1f 100644
--- a/styles/themes/dark/index.scss
+++ b/styles/themes/dark/index.scss
@@ -10,6 +10,7 @@
 @import "components/Popover.scss";
 @import "components/Tooltip.scss";
 @import "components/Confirm.scss";
+@import "components/Switch.scss";
 
 @mixin setup-dark-theme () {
   @include setup-dark-colors();
@@ -47,4 +48,5 @@
   @include setup-dark-popover;
   @include setup-dark-tooltip;
   @include setup-dark-confirm;
+  @include setup-dark-switch;
 }
\ No newline at end of file
diff --git a/styles/themes/light/components/Switch.scss b/styles/themes/light/components/Switch.scss
new file mode 100644
index 000000000..194295feb
--- /dev/null
+++ b/styles/themes/light/components/Switch.scss
@@ -0,0 +1,13 @@
+@mixin setup-light-switch {
+  $--switch-rail-background-color:(
+    "inactive":  $--n-divider-color,
+    "active": $--n-primary-color
+  ) !global;
+  $--switch-switcher-color: (
+    "inactive": linear-gradient(52deg,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 100%),
+    "active": linear-gradient(52deg,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 100%),
+  ) !global;
+  $--switch-switcher-box-shadow: (0px 1px 4px 0px rgba(0,0,0,0.35), inset 0px 0px 1px 0px rgba(0,0,0,0.05)) !global;
+  $--switch-switcher-border: 1px solid $--n-divider-color !global;
+  $--switch-switcher-transition: (left .2s $default-cubic-bezier, max-width .2s $default-cubic-bezier) !global;
+}
\ No newline at end of file
diff --git a/styles/themes/light/index.scss b/styles/themes/light/index.scss
index a5d69d722..b6f3cb1c0 100644
--- a/styles/themes/light/index.scss
+++ b/styles/themes/light/index.scss
@@ -10,6 +10,7 @@
 @import "components/Popover.scss";
 @import "components/Tooltip.scss";
 @import "components/Confirm.scss";
+@import "components/Switch.scss";
 
 @mixin setup-light-theme () {
   @include setup-light-colors();
@@ -43,4 +44,5 @@
   @include setup-light-popover;
   @include setup-light-tooltip;
   @include setup-light-confirm;
+  @include setup-light-switch;
 }
\ No newline at end of file