From 1d4527b65a66a9a57ea71ae1082e5c96e8fecd37 Mon Sep 17 00:00:00 2001
From: Liz Browne <liz.browne@forgerock.com>
Date: Thu, 15 Nov 2018 16:12:34 -0800
Subject: [PATCH] Adds the ability to use slots for labels, useful for the use
 of Vue components for labels.

---
 demo/package.json |  5 ++++-
 demo/src/App.vue  | 16 ++++++++++++++++
 demo/src/main.js  |  6 ++++++
 src/Button.vue    | 15 +++++++++++----
 4 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/demo/package.json b/demo/package.json
index b9ec79b..b9289de 100644
--- 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
index a1d47a4..2964d4e 100644
--- a/demo/src/App.vue
+++ b/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
diff --git a/demo/src/main.js b/demo/src/main.js
index e5b2262..683b6a1 100644
--- 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)
 
diff --git a/src/Button.vue b/src/Button.vue
index 49f1cc5..9924f62 100644
--- a/src/Button.vue
+++ b/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>