ownego · tinhphantrong0612 · Mar 12, 2018 · Apr 19, 2018 · Apr 19, 2018 · Apr 19, 2018
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
@@ -0,0 +1 @@
+github: euvl
diff --git a/.gitignore b/.gitignore
@@ -5,3 +5,4 @@ yarn-error.log
 demo/dist
 *.map
 package-lock.json
+.vscode
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "arrowParens": "always",
+  "semi": false,
+  "trailingComma": "none",
+  "singleQuote": true
+}
diff --git a/README.md b/README.md
@@ -1,77 +1,107 @@
-[![npm version](https://badge.fury.io/js/vue-js-toggle-button.svg)](https://badge.fury.io/js/vue-js-toggle-button)
-[![npm](https://img.shields.io/npm/dm/vue-js-toggle-button.svg)](https://www.npmjs.com/package/vue-js-toggle-button)
-<br/>
-<a align="right" href="https://www.buymeacoffee.com/yev" target="_blank">
-  <img width="200" alt="screen shot 2018-03-01 at 10 33 39" src="https://user-images.githubusercontent.com/1577802/36840220-21beb89c-1d3c-11e8-98a4-45fc334842cf.png">
-</a>
-
-### Vue.js 2 toggle / switch button - simple, pretty, customizable.
-
-![Imgur](http://i.imgur.com/a2Hf7pm.png)
-
-Feel free to ask questions or propose features in the "Issues" section
+<span>
+  <img src="https://badge.fury.io/js/vue-js-toggle-button.svg">
+</span> <span>
+  <img src="https://img.shields.io/npm/dm/vue-js-toggle-button.svg">
+</span> 
+
+# Vue.js toggle/switch button.
+
+<p align="right">
+  <a href="https://www.buymeacoffee.com/yev" target="_blank">
+    <img
+         width="140"
+         alt="Get a coffee"
+         src="https://user-images.githubusercontent.com/1577802/36840220-21beb89c-1d3c-11e8-98a4-45fc334842cf.png">
+  </a>
+</p>
+
+<p align="center">
+  <img src="http://i.imgur.com/a2Hf7pm.png">
+</p>
 
 [Live demo here](http://vue-js-toggle-button.yev.io/)
 
-Install:
+### Install
+
 ```bash
 npm install vue-js-toggle-button --save
 ```
-Import:
+
+### Import
+
+Import plugin:
+
 ```javascript
 import ToggleButton from 'vue-js-toggle-button'
+
 Vue.use(ToggleButton)
 ```
-Use:
+**OR**
+
+Import component:
+
+```javascript
+import { ToggleButton } from 'vue-js-toggle-button'
+
+Vue.component('ToggleButton', ToggleButton)
+```
+
+### Use
+
 ```xml
 <toggle-button @change="onChangeEventHandler"/>
 
 <toggle-button v-model="myDataVariable"/>
 
-<toggle-button :value="false" 
-               color="#82C7EB" 
-               :sync="true" 
+<toggle-button :value="false"
+               color="#82C7EB"
+               :sync="true"
                :labels="true"/>
 
-<toggle-button :value="true" 
+<toggle-button :value="true"
                :labels="{checked: 'Foo', unchecked: 'Bar'}"/>
 ```
 
 ### Properties
 
-| Name      | Type              | Default     | Description                        |
-| ---       | ---               | ---         | ---                                |
-| value     | Boolean           | false       | Initial state of the toggle button |
-| sync      | Boolean           | false       | If set to `true`, will be watching changes in `value` property and overwrite the current state of the button whenever `value` prop. changes |
-| speed     | Number            | 300        | Transition time for the animation   |
-| disabled  | Boolean           | false      | Button does not react on mouse events |
-| color     | [String, Object]  | `#75C791`  | If `String` - color of the button when checked <br>If `Object` - colors for the button when checked/uncheked <br>Example: `{checked: '#00FF00', unchecked: '#FF0000'}`  |
-| cssColors | Boolean           | false      | If `true` - deactivates the setting of colors through inline styles in favor of using CSS styling |
-| labels    | [Boolean, Object] | false      | If `Boolean` - shows/hides default labels ("on" and "off") <br>If `Object` - sets custom labels for both states. <br>Example: `{checked: 'Foo', unchecked: 'Bar'}`   |
-| width     | Number            | 50         | Width of the button, default is 50 |
-| height    | Number            | 22         | Height of the button, default is 22 |
-
-`labels` object accepts HTML text (for example, you can use FontAwesome for checked/unchecked states).
+| Name            | Type              | Default     | Description                        |
+| ---             | ---               | ---         | ---                                |
+| value           | Boolean           | false       | Initial state of the toggle button |
+| sync            | Boolean           | false       | If set to `true`, will be watching changes in `value` property and overwrite the current state of the button whenever `value` prop changes |
+| speed           | Number            | 300        | Transition time for the animation   |
+| disabled        | Boolean           | false      | Button does not react on mouse events |
+| color           | [String, Object]  | `#75C791`  | If `String` - color of the button when checked <br>If `Object` - colors for the button when checked/unchecked or disabled<br>Example: `{checked: '#00FF00', unchecked: '#FF0000', disabled: '#CCCCCC'}`  |
+| css-colors       | Boolean           | false      | If `true` - deactivates the setting of colors through inline styles in favor of using CSS styling |
+| labels          | [Boolean, Object] | false      | If `Boolean` - shows/hides default labels ("on" and "off") <br>If `Object` - sets custom labels for both states. <br>Example: `{checked: 'Foo', unchecked: 'Bar'}`   |
+| switch-color     | [String, Object]  | `#BFCBD9`  | If `String` - color or background property of the switch when checked <br>If `Object` - colors or background property for the switch when checked/uncheked <br>Example: `{checked: '#25EF02', unchecked: 'linear-gradient(red, yellow)'}`   |
+| width           | Number            | 50         | Width of the button |
+| height          | Number            | 22         | Height of the button |
+| margin          | Number            | 3          | Space between the switch and background border |
+| name            | String            | undefined  | Name to attach to the generated input field |
+| font-size        | Number            | undefined  | Font size |
 
 ### Events
 
 | Name   | Description              |
 | ---    | ---                      |
 | change | Triggered whenever state of the component changes. <br>Contains: <br>`value` - state of the object <br>`srcEvent` - source click event |
+| input  | Input event for v-model |
 
 ### SSR
 
 Include plugin in your `nuxt.config.js` file:
+
 ```javascript
 module.exports = {
   plugins: ['~plugins/vue-js-toggle-button']
 }
 ```
+
 And your `plugins/vue-js-toggle-button.js` will look like:
 
 ```javascript
 import Vue from 'vue'
-import Button from 'vue-js-toggle-button/dist/ssr.index'
+import Button from 'vue-js-toggle-button'
 
 Vue.use(Button)
 ```
@@ -83,13 +113,3 @@ Vue.use(Button)
 * Safari: 10+
 * IE: 11+
 
-### Font size
-To change font size please use basic css:
-```css
-.vue-js-switch#changed-font {
-  font-size: 16px;
-}
-```
-```vue
-<toggle-button id="changed-font"/>
-```
diff --git a/demo/package.json b/demo/package.json
@@ -20,6 +20,9 @@
     "vue-loader": "^11.1.4",
     "vue-template-compiler": "^2.2.1",
     "webpack": "^2.2.0",
-    "webpack-dev-server": "^2.2.0"
+    "webpack-dev-server": "^2.2.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.8",
+    "@fortawesome/free-solid-svg-icons": "^5.5.0",
+    "@fortawesome/vue-fontawesome": "^0.1.2"
   }
 }
diff --git a/demo/src/App.vue b/demo/src/App.vue
@@ -12,6 +12,7 @@
         <toggle-button :labels="true" color="#82C7EB"/>
 
         <toggle-button :value="true"
+          name="phone"
           :labels="{checked: 'Android', unchecked: 'iPhone'}"
           :color="{checked: '#7DCE94', unchecked: '#82C7EB'}"
           :width="80"/>
@@ -30,10 +31,43 @@
 
         <toggle-button
           :value="false"
-          :width="110"
-          :color="{unchecked: '#FF6699'}"
-          :labels="{unchecked: 'Disabled button'}"
+          :width="80"
+          :labels="{unchecked: 'Disabled'}"
           :disabled="true"/>
+
+        <toggle-button
+          :value="false"
+          :width="140"
+          :color="{disabled: '#FF6699'}"
+          :labels="{unchecked: 'Custom disabled color'}"
+          :disabled="true"/>
+
+        <toggle-button :value="true"
+          :labels="{checked: 'Button', unchecked: 'Color'}"
+          :color="{checked: '#7DCE94', unchecked: '#82C7EB'}"
+          :width="80"
+          :switchColor="{checked: 'linear-gradient(red, yellow)', unchecked: '#F2C00B'}"/>
+
+        <toggle-button :labels="true">
+          <template slot="checked">
+            <fa icon='check'></fa>
+          </template>
+          <template slot="unchecked">
+            <fa icon='times'></fa>
+          </template>
+        </toggle-button>
+
+        <toggle-button :width="120" :labels="{checked: '', unchecked: 'FA Icon Support'}">
+          <template slot="checked">
+            <fa icon='check'></fa>
+          </template>
+        </toggle-button>
+
+        <toggle-button
+          :value="true"
+          :width="80"
+          :labels="{checked: 'Custom', unchecked: 'Margin'}"
+          :margin="7"/>
       </div>
       <div style="padding-top: 20px;">
         <toggle-button
@@ -50,7 +84,7 @@
     <div class="padding">
       <h2>And be programatically set/reset</h2>
       <div>
-        <span v-for="(item, i) in items" style="padding: 5px">
+        <span v-for="(item, i) in items" :key="i" style="padding: 5px">
           <toggle-button
             :value="item.value"
             :color="item.color"
@@ -71,20 +105,22 @@ export default {
     return {
       toggled: false,
       items: [
-        {color: '#E8D2AE', value: false},
-        {color: '#CB8589', value: false},
-        {color: '#796465', value: false},
-        {color: '#79BD8F', value: false},
-        {color: '#00A388', value: false}
+        { color: '#E8D2AE', value: false },
+        { color: '#CB8589', value: false },
+        { color: '#796465', value: false },
+        { color: '#79BD8F', value: false },
+        { color: '#00A388', value: false }
       ],
       hodor: false
     }
   },
   mounted () {
-    var i = 0;
+    var itemIndex = 0;
+
     setInterval(() => {
-      this.updateItemValue(i)
-      i = (i + 1) % this.items.length
+      this.updateItemValue(itemIndex)
+
+      itemIndex = (itemIndex + 1) % this.items.length
     }, 600)
   },
   methods: {

diff --git a/demo/src/main.js b/demo/src/main.js
@@ -1,6 +1,12 @@
 import Vue from 'vue'
 import App from './App.vue'
 import ToggleButton from 'plugin'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCheck, faTimes } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+library.add([faCheck, faTimes])
+Vue.component('fa', FontAwesomeIcon)
 
 Vue.use(ToggleButton)
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,3 +5,4 @@ yarn-error.log @@
     demo/dist
     *.map
     package-lock.json
+    .vscode