Merge pull request #6 from devwiz1028/2-material_style

add material style

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/8ytDSmL.png">
+  <img src="https://i.imgur.com/Iram1NB.png">
 </p>
 
 ## Installation
@@ -34,6 +34,27 @@ new Vue({
 
 ```html
 <onoff-toggle v-model="checked" />
+
+<onoff-toggle v-model="checked" theme="ios" />
+
+<onoff-toggle v-model="checked" theme="material" />
+
+<onoff-toggle
+  v-model="checked"
+  onColor="#008F13"
+/>
+
+<onoff-toggle
+  v-model="checked"
+  theme="ios"
+  onColor="#008F13"
+/>
+
+<onoff-toggle
+  v-model="checked"
+  theme="material"
+  thumbColor="#008F13"
+/>
 ```
 
 
@@ -48,7 +69,7 @@ new Vue({
   <tbody>
     <tr>
       <td>theme</td>
-      <td>Theme to use. "default" and "ios" are available.</td>
+      <td>Theme to use. "default", "ios" and "material" are available.</td>
     </tr>
     <tr>
       <td>name</td>
@@ -68,7 +89,7 @@ new Vue({
     </tr>
     <tr>
       <td>thumbColor</td>
-      <td>Background color of the thumb</td>
+      <td>Background color of the thumb. For "material" theme, if you don't specify onColor, it will be thumbColor with opacity 0.5 by default</td>
     </tr>
     <tr>
       <td>borderColor</td>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-onoff-toggle",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "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

@@ -18,8 +18,11 @@
 </template>
 
 <script>
+const THEME_DEFAULT = 'default'
+const THEME_IOS = 'ios'
+const THEME_MATERIAL = 'material'
 const THEMES = {
-  'default': {
+  [THEME_DEFAULT]: {
     size: {
       width: 75,
       height: 40
@@ -31,7 +34,7 @@ const THEMES = {
     },
     margin: 6
   },
-  'ios': {
+  [THEME_IOS]: {
     size: {
       width: 60,
       height: 36
@@ -43,18 +46,29 @@ const THEMES = {
       thumb: '#ffffff'
     },
     margin: 2
+  },
+  [THEME_MATERIAL]: {
+    size: {
+      width: 34,
+      height: 14
+    },
+    color: {
+      on: 'rgba(25, 118, 210, 0.5)',
+      off: '#9f9f9f',
+      thumb: 'rgb(25, 118, 210)',
+      disabled: 'rgba(0, 0, 0, 0.12)'
+    },
+    margin: -3
   }
 }
 
-function px(num) {
-  return `${num}px`;
-}
+import { px, semiOpaqueColor } from './utils'
 
 export default {
   name: 'OnoffToggle',
   props: {
     value: { type: Boolean, default: false },
-    theme: { type: String, default: 'default' },
+    theme: { type: String, default: THEME_DEFAULT },
     name: { type: String },
     disabled: { type: Boolean, default: false },
     onColor: { type: String },
@@ -67,7 +81,7 @@ export default {
   },
   computed: {
     themeInfo() {
-      return THEMES[this.theme] || THEMES.default
+      return THEMES[this.theme] || THEMES[THEME_DEFAULT]
     },
     labelClass() {
       const classNames = [
@@ -89,33 +103,49 @@ export default {
       const offColor = this.offColor || this.themeInfo.color.off
       const margin = Number(this.margin) || this.themeInfo.margin || 0
       const borderColor = this.borderColor || this.themeInfo.color.border
+      const style = {
+        width: px(width),
+        height: px(height),
+        borderRadius: px(height / 2),
+        backgroundColor: this.value ? onColor : offColor
+      }
 
-      if (this.theme === 'ios') {
-        return {
-          width: px(width),
-          height: px(height),
-          borderRadius: px(height / 2),
+      if (this.theme === THEME_IOS) {
+        Object.assign(style, {
           backgroundColor: 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) {
+        if (this.disabled) {
+          Object.assign(style, {
+            backgroundColor: THEMES[THEME_MATERIAL].color.disabled,
+            opacity: 1
+          })
+        } else if (this.value && !this.onColor && this.thumbColor) {
+          style.backgroundColor = semiOpaqueColor(this.thumbColor, 0.5)
         }
       }
 
-      return {
-        width: px(width),
-        height: px(height),
-        borderRadius: px(height / 2),
-        backgroundColor: this.value ? onColor : offColor
-      }
+      return style
     },
     thumbStyle() {
       const margin = Number(this.margin) || this.themeInfo.margin || 0
       const size = this.bodyHeight - (margin * 2)
       const color = this.thumbColor || this.themeInfo.color.thumb
       const left = this.value ? (this.bodyWidth - size - margin) : margin
       const borderColor = this.borderColor || this.themeInfo.color.border
+      const style = {
+        width: px(size),
+        height: px(size),
+        left: px(left),
+        top: px(margin),
+        borderRadius: px(size / 2),
+        backgroundColor: color,
+        boxShadow: '0px 1px 3px 0px rgba(0, 0, 0, 0.1)'
+      }
 
-      if (this.theme === 'ios') {
-        return {
+      if (this.theme === THEME_IOS) {
+        Object.assign(style, {
           width: px(this.bodyHeight),
           height: px(this.bodyHeight),
           left: this.value ? `calc(100% - ${this.bodyHeight}px)` : px(0),
@@ -125,17 +155,19 @@ export default {
           boxShadow: this.value
             ? `0 0 0 ${margin}px transparent, 0 3px 3px rgba(0, 0, 0, 0.3)`
             : `0 3px 3px rgba(0, 0, 0, 0.2), 0 0 0 ${margin}px ${borderColor}`
+        })
+      } else if (this.theme === THEME_MATERIAL) {
+        Object.assign(style, {
+          backgroundColor: this.value ? color : '#ffffff',
+          transition: 'left 0.15s',
+          boxShadow: '0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)'
+        })
+        if (this.disabled) {
+          style.backgroundColor = '#bdbdbd'
         }
       }
 
-      return {
-        width: px(size),
-        height: px(size),
-        left: px(left),
-        top: px(margin),
-        borderRadius: px(size / 2),
-        backgroundColor: color
-      }
+      return style
     },
     bodyWidth() {
       return Number(this.width) || this.themeInfo.size.width
@@ -170,7 +202,4 @@ export default {
   position: absolute;
   transition: all 0.3s;
 }
-.v-toggle-default .v-toggle_thumb {
-  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
-}
 </style>

src/utils.js

@@ -0,0 +1,32 @@
+function parseColor(c) {
+  let cache
+  const p = parseInt,
+    color = c.replace(/\s/g,'')
+
+  if ((cache = /#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})/.exec(color))) {
+    cache = [p(cache[1], 16), p(cache[2], 16), p(cache[3], 16)]
+  } else if ((cache = /#([\da-fA-F])([\da-fA-F])([\da-fA-F])/.exec(color))) {
+    cache = [p(cache[1], 16) * 17, p(cache[2], 16) * 17, p(cache[3], 16) * 17]
+  } else if ((cache = /rgba\(([\d]+),([\d]+),([\d]+),([\d]+|[\d]*.[\d]+)\)/.exec(color))) {
+    cache = [+cache[1], +cache[2], +cache[3], +cache[4]]
+  } else if ((cache = /rgb\(([\d]+),([\d]+),([\d]+)\)/.exec(color))) {
+    cache = [+cache[1], +cache[2], +cache[3]]
+  } else {
+    cache = [0, 0, 0, 1]
+  }
+
+  if (isNaN(cache[3])) {
+    cache[3] = 1
+  }
+
+  return cache.slice(0, 4)
+}
+
+export function px(val) {
+  return (typeof val === 'number') ? `${val}px` : val
+}
+
+export function semiOpaqueColor(color, opacity) {
+  const rgba = parseColor(color)
+  return `rgba(${rgba[0]}, ${rgba[1]}, ${rgba[2]}, ${rgba[3] * opacity})`
+}