Adds the ability to use slots for labels, useful for the use of Vue components for labels. (#94)

Author: AsclepiLiz

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"
   }
 }

demo/src/App.vue

@@ -47,6 +47,22 @@
           :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>
+
       </div>
       <div style="padding-top: 20px;">
         <toggle-button

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)
 

src/Button.vue

@@ -13,12 +13,19 @@
   <template v-if="labels">
     <span class="v-switch-label v-left"
           :style="labelStyle"
-          v-if="toggled"
-          v-html="labelChecked"/>
+          v-if="toggled">
+      <slot name="checked">
+        <template>{{labelChecked}}</template>
+      </slot>
+    </span>
+
     <span class="v-switch-label v-right"
           :style="labelStyle"
-          v-else
-          v-html="labelUnchecked"/>
+          v-else>
+      <slot name="unchecked">
+        <template>{{labelUnchecked}}</template>
+      </slot>
+    </span>
   </template>
 </label>
 </template>