Implemented TriStateCheckbox Component

src/AppMenu.vue

@@ -15,6 +15,7 @@
                     <router-link to="/selectbutton">&#9679; SelectButton</router-link>
                     <router-link to="/textarea">&#9679; Textarea</router-link>
                     <router-link to="/togglebutton">&#9679; ToggleButton</router-link>
+                    <router-link to="/tristatecheckbox">&#9679; TriCheckbox</router-link>
                 </div>
             </div>
 

src/components/tristatecheckbox/TriStateCheckbox.vue

@@ -0,0 +1,88 @@
+<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', icon]"></span>
+        </div>
+    </div>
+</template>
+
+<script>
+import ObjectUtils from '../utils/ObjectUtils';
+
+export default {
+    props: {
+         value: null,
+         name: String,
+         inputId: String,
+         autofocus: Boolean,
+         autocomplete: String,
+         disabled: Boolean
+    },
+    data() {
+        return {
+            focused: false
+        };
+    },
+    methods: {
+        onClick(event) {
+            if (!this.disabled) {
+                let newValue;
+
+                switch (this.value) {
+                    case true:
+                        newValue = false;
+                    break;
+
+                    case false:
+                        newValue = null;
+                    break;
+
+                    case null:
+                        newValue = true;
+                    break;
+                }
+
+                this.$emit('click', event);
+                this.$emit('input', newValue);
+                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.value === true;
+        },
+        icon() {
+            let icon;
+            switch (this.value) {
+                case true:
+                    icon = 'pi pi-check';
+                break;
+
+                case false:
+                    icon = 'pi pi-times';
+                break;
+
+                case null:
+                    icon = null;
+                break;
+            }
+
+            return icon;
+        }
+    }
+}
+</script>

src/main.js

@@ -17,6 +17,7 @@ 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 TriStateCheckbox from './components/tristatecheckbox/TriStateCheckbox';
 
 import './assets/styles/primevue.css';
 import 'primeflex/primeflex.css';
@@ -40,6 +41,7 @@ Vue.component('p-tabPanel', TabPanel);
 Vue.component('p-textarea', Textarea);
 Vue.component('p-toolbar', Toolbar);
 Vue.component('p-toggleButton', ToggleButton);
+Vue.component('p-triStateCheckbox', TriStateCheckbox);
 
 new Vue({
   router,

src/router.js

@@ -85,6 +85,11 @@ export default new Router({
         path: '/toolbar',
         name: 'toolbar',
         component: () => import('./views/toolbar/ToolbarDemo.vue')
+    },
+    {
+        path: '/tristatecheckbox',
+        name: 'tristatecheckbox',
+        component: () => import('./views/tristatecheckbox/TriStateCheckboxDemo.vue')
     }
   ]
 });

src/views/tristatecheckbox/TriStateCheckboxDemo.vue

@@ -0,0 +1,29 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>TriStateCheckbox</h1>
+                <p>TriStateCheckbox is used to select either "true", "false" or "null" as the value.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <p-triStateCheckbox v-model="value" />
+            <p>Value: <span style="font-weight: bold">{{value == null ? 'null' : value}}</span></p>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>