From ee54eee5b068bc8fa4c485b3319f67e7ba8fc0da Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Sat, 15 Dec 2018 14:06:55 +0300
Subject: [PATCH] Implemented ToggleButton Component

---
 src/AppMenu.vue                              |  1 +
 src/components/togglebutton/ToggleButton.vue | 82 ++++++++++++++++++++
 src/main.js                                  |  2 +
 src/router.js                                |  5 ++
 src/views/togglebutton/ToggleButtonDemo.vue  | 35 +++++++++
 5 files changed, 125 insertions(+)
 create mode 100644 src/components/togglebutton/ToggleButton.vue
 create mode 100644 src/views/togglebutton/ToggleButtonDemo.vue

diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index f58341d70..ef0cb0bbd 100644
--- a/src/AppMenu.vue
+++ b/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>
 
diff --git a/src/components/togglebutton/ToggleButton.vue b/src/components/togglebutton/ToggleButton.vue
new file mode 100644
index 000000000..88c3501e2
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 9426eacf7..7d7d55594 100644
--- a/src/main.js
+++ b/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,
diff --git a/src/router.js b/src/router.js
index 31d6c3417..9b35e1c48 100644
--- a/src/router.js
+++ b/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',
diff --git a/src/views/togglebutton/ToggleButtonDemo.vue b/src/views/togglebutton/ToggleButtonDemo.vue
new file mode 100644
index 000000000..9bfb99bde
--- /dev/null
+++ b/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>