Binary selection support for Checkbox

src/components/checkbox/Checkbox.vue

@@ -37,11 +37,16 @@ export default {
             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]; 
-                    
+                if (Array.isArray(this.modelValue)) {
+                    if (this.checked)
+                        newModelValue = this.modelValue.filter(val => !ObjectUtils.equals(val, this.value));
+                    else
+                        newModelValue = this.modelValue ? [...this.modelValue, this.value] : [this.value]; 
+                }
+                else {
+                    newModelValue = !this.modelValue;
+                }
+
                 this.$emit('click', event);
                 this.$emit('input', newModelValue);
                 this.$emit('change', event);
@@ -59,7 +64,7 @@ export default {
     },
     computed: {
         checked() {
-            return this.modelValue != null && ObjectUtils.contains(this.value, this.modelValue);
+            return Array.isArray(this.modelValue) ? ObjectUtils.contains(this.value, this.modelValue) : this.modelValue;
         }
     }
 }

src/views/checkbox/CheckboxDemo.vue

@@ -9,6 +9,10 @@
 
         <div class="content-section implementation">
             <h3 class="first">Basic</h3>
+            <p-checkbox inputId="binary" v-model="checked" />
+            <label for="binary" class="p-checkbox-label">{{checked}}</label>
+
+            <h3>Multiple</h3>
             <div class="p-grid">
                 <div class="p-col-12">
                     <p-checkbox inputId="city1" name="city" value="Chicago" v-model="cities" />
@@ -29,7 +33,7 @@
             </div>
             Selected Cities : {{cities}}
 
-            <h3>Advanced with Preselection, Value Binding and Disabled Option</h3>
+            <h3>Dynamic Values, 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" />
@@ -57,14 +61,10 @@
 export default {
     data() {
         return {
+            checked: false,
             cities: [],
             themes: [{brand: 'Serenity', key: 'S'}, {brand: 'Apollo', key: 'A'}]
         }
-    },
-    methods: {
-        onChange() {
-            console.log('change');
-        }
     }
 }
 </script>