Implemented ToggleButton Component

src/AppMenu.vue

@@ -13,6 +13,7 @@
                     <router-link to="/listbox">&#9679; Listbox</router-link>
                     <router-link to="/radiobutton">&#9679; RadioButton</router-link>
                     <router-link to="/textarea">&#9679; Textarea</router-link>
+                    <router-link to="/togglebutton">&#9679; ToggleButton</router-link>
                 </div>
             </div>
 

src/components/togglebutton/ToggleButton.vue

@@ -0,0 +1,82 @@
+<template>
+    <div :class="buttonClass" @click="onClick($event)">
+        <div class="p-hidden-accessible">
+            <input ref="input" type="checkbox" :id="inputId" :name="name" :checked="value" @focus="onFocus($event)" @blur="onBlur($event)">
+        </div>
+        <span v-if="hasIcon" :class="iconClass"></span>
+        <span class="p-button-text p-unselectable-text p-c">{{label}}</span>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        value: Boolean,
+        onLabel: String,
+        offLabel: String,
+        onIcon: String,
+        offIcon: String,
+        offIcon: String,
+        inputId: String,
+        name: String,
+        iconPos: {
+            type: String,
+            default: 'left'
+        },
+        disabled: Boolean
+    },
+    data() {
+        return {
+            focused: false
+        }
+    },
+    methods: {
+        onClick(event) {
+            this.$emit('click', event);
+            this.$emit('input', !this.value);
+            this.$emit('change', event);
+            this.$refs.input.focus();
+        },
+        onFocus(event) {
+            this.focused = true;
+            this.$emit('focus', event);
+        },
+        onBlur() {
+            this.focused = false;
+            this.$emit('blur', event);
+        }
+    },
+    computed: {
+        buttonClass() {
+            return {
+                'p-button p-togglebutton p-component': true,
+                'p-button-icon-only': this.hasIcon && !this.hasLabel,
+                'p-button-text-icon-left': this.hasIcon && this.hasLabel && this.iconPos === 'left',
+                'p-button-text-icon-right': this.hasIcon && this.hasLabel && this.iconPos === 'right',
+                'p-button-text-only': !this.hasIcon && this.hasLabel,
+                'p-disabled': this.disabled,
+                'p-focus': this.focused,
+                'p-highlight': this.value === true
+            }
+        },
+        iconClass() {
+            return [
+                this.value ? this.onIcon: this.offIcon,
+                {
+                    'p-button-icon-left': this.iconPos === 'left', 
+                    'p-button-icon-right': this.iconPos === 'right'
+                }
+            ]
+        },
+        hasLabel() {
+            return this.onLabel && this.onLabel.length > 0 && this.offLabel && this.offLabel.length > 0;
+        },
+        hasIcon() {
+            return this.onIcon && this.onIcon.length > 0 && this.offIcon && this.offIcon.length > 0;
+        },
+        label() {
+            return this.hasLabel ? (this.value ? this.onLabel : this.offLabel): 'p-btn';
+        }
+    }
+}
+</script>

src/main.js

@@ -14,6 +14,7 @@ import Textarea from './components/textarea/Textarea';
 import Toolbar from './components/toolbar/Toolbar';
 import TabView from './components/tabview/TabView';
 import TabPanel from './components/tabview/TabPanel';
+import ToggleButton from './components/togglebutton/ToggleButton';
 
 import './assets/styles/primevue.css';
 import 'primeflex/primeflex.css';
@@ -34,6 +35,7 @@ Vue.component('p-tabView', TabView);
 Vue.component('p-tabPanel', TabPanel);
 Vue.component('p-textarea', Textarea);
 Vue.component('p-toolbar', Toolbar);
+Vue.component('p-toggleButton', ToggleButton);
 
 new Vue({
   router,

src/router.js

@@ -66,6 +66,11 @@ export default new Router({
         name: 'tabview',
         component: () => import('./views/tabview/TabViewDemo.vue')
     },
+    {
+        path: '/togglebutton',
+        name: 'togglebutton',
+        component: () => import('./views/togglebutton/ToggleButtonDemo.vue')
+    },
     {
         path: '/toolbar',
         name: 'toolbar',

src/views/togglebutton/ToggleButtonDemo.vue

@@ -0,0 +1,35 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>ToggleButton</h1>
+                <p>ToggleButton is used to select a boolean value using a button.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <h3 class="first">Basic</h3>
+            <p-toggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times"/>
+            <p>{{checked1}}</p>
+
+            <h3>Customized</h3>
+            <p-toggleButton v-model="checked2" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" style="width: 10em"/>
+            <p>{{checked2}}</p>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked1: false,
+            checked2: true
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>