Imlemented InputSwitch Component

src/AppMenu.vue

@@ -9,6 +9,7 @@
             <div :class="{'submenuhide': activeMenuIndex !== 0, 'submenushow': activeMenuIndex === 0}">
                 <div>
                     <router-link to="/checkbox">&#9679; Checkbox</router-link>
+                    <router-link to="/inputswitch">&#9679; InputSwitch</router-link>
                     <router-link to="/inputtext">&#9679; InputText</router-link>
                     <router-link to="/listbox">&#9679; Listbox</router-link>
                     <router-link to="/radiobutton">&#9679; RadioButton</router-link>

src/assets/styles/primevue.css

@@ -5,6 +5,7 @@
 @import '../../components/checkbox/Checkbox.css';
 @import '../../components/fieldset/Fieldset.css';
 @import '../../components/inputtext/InputText.css';
+@import '../../components/inputswitch/InputSwitch.css';
 @import '../../components/listbox/Listbox.css';
 @import '../../components/panel/Panel.css';
 @import '../../components/radiobutton/RadioButton.css';

src/components/inputswitch/InputSwitch.css

@@ -0,0 +1,36 @@
+.p-inputswitch {
+    position: relative;
+    display: inline-block;
+    width: 3em;
+    height: 1.75em;
+}
+
+.p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    -webkit-transition: .3s;
+    transition: .3s;
+    border-radius: 30px;
+}
+
+.p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    height: 1.250em;
+    width: 1.250em;
+    left: .25em;
+    bottom: .25em;
+    border-radius: 50%;
+    -webkit-transition: .3s;
+    transition: .3s;
+}
+
+.p-inputswitch-checked .p-inputswitch-slider:before {
+    -webkit-transform: translateX(1.250em);
+    -ms-transform: translateX(1.250em);
+    transform: translateX(1.250em);
+}

src/components/inputswitch/InputSwitch.vue

@@ -0,0 +1,54 @@
+<template>
+    <div :class="containerClass" @click="onClick($event)">
+        <div class="p-hidden-accessible">
+            <input ref="input" type="checkbox" :id="inputId" :name="name" :checked="value" :disabled="disabled" 
+                @focus="onFocus($event)" @blur="onBlur($event)" @keydown.enter.prevent="onClick($event)">
+        </div>
+        <span class="p-inputswitch-slider"></span>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        value: Boolean,
+        inputId: String,
+        name: String,
+        disabled: Boolean
+    },
+    data() {
+        return {
+            focused: false
+        }
+    },
+    methods: {
+        onClick(event) {
+            if (!this.disabled) {
+                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: {
+        containerClass() {
+            return [
+                'p-inputswitch p-component',
+                {
+                    'p-inputswitch-checked': this.value,
+                    'p-inputswitch-focus': this.focused
+                }
+            ];
+        }
+    }
+}
+</script>

src/main.js

@@ -6,6 +6,7 @@ import AccordionTab from './components/accordion/AccordionTab';
 import Button from './components/button/Button';
 import Card from './components/card/Card';
 import Checkbox from './components/checkbox/Checkbox';
+import InputSwitch from './components/inputswitch/InputSwitch';
 import InputText from './components/inputtext/InputText';
 import Fieldset from './components/fieldset/Fieldset';
 import Listbox from './components/listbox/Listbox';
@@ -30,6 +31,7 @@ Vue.component('p-accordionTab', AccordionTab);
 Vue.component('p-button', Button);
 Vue.component('p-card', Card);
 Vue.component('p-checkbox', Checkbox);
+Vue.component('p-inputSwitch', InputSwitch);
 Vue.component('p-inputtext', InputText);
 Vue.component('p-listbox', Listbox);
 Vue.component('p-fieldset', Fieldset);

src/router.js

@@ -41,6 +41,11 @@ export default new Router({
         name: 'flexgrid',
         component: () => import('./views/flexgrid/FlexGridDemo.vue')
     },
+    {
+        path: '/inputswitch',
+        name: 'inputswitch',
+        component: () => import('./views/inputswitch/InputSwitchDemo.vue')
+    },
     {
         path: '/inputtext',
         name: 'inputtext',

src/views/inputswitch/InputSwitchDemo.vue

@@ -0,0 +1,31 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>InputSwitch</h1>
+                <p>InputSwitch is used to select a boolean value.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <h3 class="first">Basic</h3>
+            <p-inputSwitch v-model="checked1" />
+            <p style="font-weight: bold">{{checked1}}</p>
+
+            <h3>Preselection</h3>
+            <p-inputSwitch v-model="checked2" />
+            <p style="font-weight: bold">{{checked2}}</p>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked1: false,
+            checked2: true
+        }
+    }
+}
+</script>