Implemented Checkbox Component

src/AppMenu.vue

@@ -8,6 +8,7 @@
             </a>
             <div :class="{'submenuhide': activeMenuIndex !== 0, 'submenushow': activeMenuIndex === 0}">
                 <div>
+                    <router-link to="/checkbox">&#9679; Checkbox</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

@@ -1,10 +1,12 @@
 @import '../../components/common/Common.css';
 @import '../../components/accordion/Accordion.css';
+@import '../../components/button/Button.css';
+@import '../../components/checkbox/Checkbox.css';
+@import '../../components/fieldset/Fieldset.css';
 @import '../../components/inputtext/InputText.css';
 @import '../../components/listbox/Listbox.css';
-@import '../../components/button/Button.css';
 @import '../../components/panel/Panel.css';
-@import '../../components/fieldset/Fieldset.css';
+@import '../../components/radiobutton/RadioButton.css';
 @import '../../components/tabview/TabView.css';
 @import '../../components/textarea/Textarea.css';
 @import '../../components/toolbar/Toolbar.css';

src/components/checkbox/Checkbox.css

@@ -0,0 +1,31 @@
+.p-checkbox {
+    display: inline-block;
+    cursor: pointer;
+    vertical-align: middle;
+    margin-right: .25em;
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+}
+
+.p-checkbox .p-checkbox-box {
+    width: 1.125em;
+    height: 1.125em;
+    line-height: 1.125em;
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
+    text-align: center;
+}
+
+.p-checkbox .p-checkbox-icon {
+    display: block;
+}
+
+.p-checkbox-label {
+    vertical-align: middle;  
+}
+
+.p-checkbox + label {
+    vertical-align: middle;
+}

src/components/checkbox/Checkbox.vue

@@ -0,0 +1,66 @@
+<template>
+   <div class="p-checkbox p-component" @click="onClick($event)">
+       <div class="p-hidden-accessible">
+           <input ref="input" :id="inputId" type="checkbox" :name="name" :checked="checked" :disabled="disabled" @focus="onFocus()" @blur="onBlur()"
+                    :autocomplete="autocomplete" :autofocus="autofocus">
+        </div>
+        <div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused}]">
+            <span :class="['p-checkbox-icon p-c', {'pi pi-check': checked}]"></span>
+        </div>
+    </div>
+</template>
+
+<script>
+import ObjectUtils from '../utils/ObjectUtils';
+
+export default {
+    props: {
+         value: null,
+         modelValue: null,
+         name: String,
+         inputId: String,
+         autofocus: Boolean,
+         autocomplete: String,
+         disabled: Boolean
+    },
+    model: {
+        prop: 'modelValue',
+        event: 'input'
+    },
+    data() {
+        return {
+            focused: false
+        };
+    },
+    methods: {
+        onClick(event) {
+            if (!this.disabled) {
+                let newModelValue;
+                
+                if (this.checked)
+                    newModelValue = this.modelValue.filter(val => !ObjectUtils.equals(val, this.value));
+                else
+                    newModelValue = this.modelValue ? [...this.modelValue, this.value] : [this.value]; 
+                    
+                this.$emit('click', event);
+                this.$emit('input', newModelValue);
+                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: {
+        checked() {
+            return this.modelValue != null && ObjectUtils.contains(this.value, this.modelValue);
+        }
+    }
+}
+</script>

src/components/utils/ObjectUtils.js

@@ -120,6 +120,17 @@ export default class ObjectUtils {
         return index;
     }
 
+    static contains(value, list) {
+        if (value != null && list && list.length) {
+            for (let val of list) {
+                if (this.equals(value, val))
+                    return true;
+            }
+        }
+
+        return false;
+    }
+
     static filterConstraints = {
 
         startsWith(value, filter) {

src/main.js

@@ -4,6 +4,7 @@ import router from './router';
 import Accordion from './components/accordion/Accordion';
 import AccordionTab from './components/accordion/AccordionTab';
 import Button from './components/button/Button';
+import Checkbox from './components/checkbox/Checkbox';
 import InputText from './components/inputtext/InputText';
 import Fieldset from './components/fieldset/Fieldset';
 import Listbox from './components/listbox/Listbox';
@@ -23,6 +24,7 @@ Vue.config.productionTip = false;
 Vue.component('p-accordion', Accordion);
 Vue.component('p-accordionTab', AccordionTab);
 Vue.component('p-button', Button);
+Vue.component('p-checkbox', Checkbox);
 Vue.component('p-inputtext', InputText);
 Vue.component('p-listbox', Listbox);
 Vue.component('p-fieldset', Fieldset);

src/router.js

@@ -21,6 +21,11 @@ export default new Router({
         name: 'button',
         component: () => import('./views/button/ButtonDemo.vue')
     },
+    {
+        path: '/checkbox',
+        name: 'checkbox',
+        component: () => import('./views/checkbox/CheckboxDemo.vue')
+    },
     {
         path: '/fieldset',
         name: 'fieldset',

src/views/checkbox/CheckboxDemo.vue

@@ -0,0 +1,74 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Checkbox</h1>
+                <p>Checkbox is an extension to standard checkbox element with theming.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <h3 class="first">Basic</h3>
+            <div class="p-grid">
+                <div class="p-col-12">
+                    <p-checkbox inputId="city1" name="city" value="Chicago" v-model="cities" />
+                    <label for="city1" class="p-checkbox-label">Chicago</label>
+                </div>
+                <div class="p-col-12">
+                    <p-checkbox inputId="city2" name="city" value="Los Angeles" v-model="cities" />
+                    <label for="city2" class="p-checkbox-label">Los Angeles</label>
+                </div>
+                <div class="p-col-12">
+                    <p-checkbox inputId="city3" name="city" value="New York" v-model="cities" />
+                    <label for="city3" class="p-checkbox-label">New York</label>
+                </div>
+                <div class="p-col-12">
+                    <p-checkbox inputId="city4" name="city" value="San Francisco" v-model="cities" />
+                    <label for="city4" class="p-checkbox-label">San Francisco</label>
+                </div>
+            </div>
+            Selected Cities : {{cities}}
+
+            <h3>Advanced with Preselection, Value Binding and Disabled Option</h3>
+            <div class="p-grid">
+                <div class="p-col-12">
+                    <p-checkbox inputId="theme1" name="template" :value="{brand: 'Ultima', key: 'U'}" v-model="themes" />
+                    <label for="theme1" class="p-checkbox-label">Ultima</label>
+                </div>
+                <div class="p-col-12">
+                    <p-checkbox inputId="theme2" name="template" :value="{brand: 'Serenity', key: 'S'}" v-model="themes" />
+                    <label for="theme2" class="p-checkbox-label">Serenity</label>
+                </div>
+                <div class="p-col-12">
+                    <p-checkbox inputId="theme3" name="template" :value="{brand: 'Apollo', key: 'A'}" v-model="themes" />
+                    <label for="theme3" class="p-checkbox-label">Apollo</label>
+                </div>
+                <div class="p-col-12">
+                    <p-checkbox inputId="theme4" name="template" :value="{brand: 'Babylon', key: 'B'}" v-model="themes" :disabled="true"/>
+                    <label for="theme4" class="p-checkbox-label">Babylon</label>
+                </div>
+            </div>
+            Selected Themes : {{this.themes}}
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            cities: [],
+            themes: [{brand: 'Serenity', key: 'S'}, {brand: 'Apollo', key: 'A'}]
+        }
+    },
+    methods: {
+        onChange() {
+            console.log('change');
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>