1.0.5 update image, add shadow effect

Author: devwiz1028

README.md

@@ -3,7 +3,7 @@
 A simple, lightweight on/off toggle component made with Vue.js. Provides multiple themes with default configurations. You can also customize size, color and borders.
 
 <p align="center">
-  <img src="https://i.imgur.com/Iram1NB.png">
+  <img src="https://i.imgur.com/pVI4GIB.png">
 </p>
 
 ## Installation
@@ -42,6 +42,7 @@ new Vue({
 <onoff-toggle
   v-model="checked"
   onColor="#008F13"
+  :shadow="false"
 />
 
 <onoff-toggle
@@ -107,6 +108,10 @@ new Vue({
       <td>margin</td>
       <td>Space around the thumb</td>
     </tr>
+    <tr>
+      <td>shadow</td>
+      <td>Only works on default theme. When set to true, a glow effect will be added around the toggle.</td>
+    </tr>
   </tbody>
 </table>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-onoff-toggle",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "A smart, lightweight and easy-to-use on/off toggle component for Vue.js with multiple themes.",
   "main": "src/onoff-toggle.vue",
   "keywords": [

src/onoff-toggle.vue

@@ -77,7 +77,8 @@ export default {
     borderColor: { type: String },
     width: { type: [Number, String] },
     height: { type: [Number, String] },
-    margin: { type: [Number, String] }
+    margin: { type: [Number, String] },
+    shadow: { type: Boolean, default: true }
   },
   computed: {
     themeInfo() {
@@ -112,7 +113,7 @@ export default {
 
       if (this.theme === THEME_IOS) {
         Object.assign(style, {
-          backgroundColor: offColor,
+          backgroundColor: this.value ? onColor : offColor,
           boxShadow: `inset 0 0 0 ${this.value ? height / 2 : 0}px ${onColor}, 0 0 0 ${margin}px ${this.value ? onColor : borderColor}`
         })
       } else if (this.theme === THEME_MATERIAL) {
@@ -124,6 +125,8 @@ export default {
         } else if (this.value && !this.onColor && this.thumbColor) {
           style.backgroundColor = semiOpaqueColor(this.thumbColor, 0.5)
         }
+      } else if (this.theme === THEME_DEFAULT && this.shadow) {
+        style.boxShadow = `0px 4px 10px 0px ${semiOpaqueColor(this.value ? onColor : offColor, 0.4)}`
       }
 
       return style