Add v-model support to KCheckbox

docs/pages/kcheckbox.vue

@@ -8,14 +8,12 @@
       <p>The checkbox is generally used to select one of two possible values in a form.</p>
       <DocsShow>
         <KCheckbox
+          v-model="checked1"
           label="Some label"
-          :checked="checked1"
-          @change="checked1 = !checked1"
         />
         <KCheckbox
+          v-model="checked2"
           label="Another label"
-          :checked="checked2"
-          @change="checked2 = !checked2"
         />
       </DocsShow>
     </DocsPageSection>
@@ -48,17 +46,17 @@
       title="States"
       anchor="#states"
     >
-      <p>The checked state represents an affirmative value.</p>
+      <p>The v-model checkbox state represents an affirmative value.</p>
       <p>
         Checkboxes can also have a "partially-checked" or "indeterminate" state used in cases where
         the value is neither true nor false, such as when a subset of a topic is selected:
       </p>
       <DocsShow>
         <KCheckbox
+          v-model="checked3"
           label="Topic is selected"
           :indeterminate="indeterminate3"
-          :checked="checked3"
-          @change="handle3"
+          @input="handle3"
         />
       </DocsShow>
       <p>
@@ -81,9 +79,8 @@
       <!-- eslint-enable -->
       <DocsShow>
         <KCheckbox
+          v-model="checked4"
           label="First lesson"
-          :checked="checked4"
-          @change="checked4 = !checked4"
         />
       </DocsShow>
 
@@ -102,10 +99,7 @@
       </DocsShowCode>
       <!-- eslint-enable -->
       <DocsShow>
-        <KCheckbox
-          :checked="checked5"
-          @change="checked5 = !checked5"
-        >
+        <KCheckbox v-model="checked5">
           <KLabeledIcon
             icon="lesson"
             label="First lesson"
@@ -137,6 +131,200 @@
         </template>
       </DocsDoNot>
     </DocsPageSection>
+
+    <DocsPageSection
+      title="Example: v-model"
+      anchor="#example-v-model"
+    >
+      <code>v-model</code> supports array, boolean, number, string, and object.
+
+      <h3>
+        Array
+        <DocsAnchorTarget anchor="#v-model-array" />
+      </h3>
+      <p>
+        Each <code>value</code> will be added/removed from the <code>selectedGroupIds</code> array
+        based on each checkbox state.
+      </p>
+      <!-- eslint-disable -->
+      <!-- prettier-ignore -->
+      <DocsShowCode language="html">
+        <KCheckbox
+          v-for="group in groups"
+          :key="group.id"
+          v-model="selectedGroupIds"
+          :label="group.name"
+          :value="group.id"
+        />
+      </DocsShowCode>
+      <!-- prettier-ignore -->
+      <DocsShowCode language="javascript">
+        export default {
+          data() {
+            return {
+              groups: [
+                { 'id': 'group-1', 'name': 'First group', },
+                { 'id': 'group-2', 'name': 'Second group' },
+                { 'id': 'group-3', 'name': 'Third group' }
+              ],
+              selectedGroupIds: ['group-1'],
+            };
+          },
+        };
+      </DocsShowCode>
+      <!-- eslint-enable -->
+      <DocsShow>
+        <KCheckbox
+          v-for="group in groups"
+          :key="group.id"
+          v-model="selectedGroupIds"
+          :label="group.name"
+          :value="group.id"
+        />
+      </DocsShow>
+
+      <h3>
+        Boolean
+        <DocsAnchorTarget anchor="#v-model-boolean" />
+      </h3>
+      <p>
+        If checked, <code>isSelected</code> will become <code>true</code>, otherwise
+        <code>false</code>. Note that here, <code>value</code> is not needed.
+      </p>
+      <!-- eslint-disable -->
+      <!-- prettier-ignore -->
+      <DocsShowCode language="html">
+        <KCheckbox
+          v-model="isSelected"
+          :label="`isSelected = ${isSelected}`"
+        />
+      </DocsShowCode>
+      <!-- prettier-ignore -->
+      <DocsShowCode language="javascript">
+        export default {
+          data() {
+            return {
+              isSelected: true,
+            };
+          },
+        };
+      </DocsShowCode>
+      <!-- eslint-enable -->
+      <DocsShow>
+        <KCheckbox
+          v-model="isSelected"
+          :label="`isSelected = ${isSelected}`"
+        />
+      </DocsShow>
+
+      <h3>
+        Number
+        <DocsAnchorTarget anchor="#v-model-number" />
+      </h3>
+      <p>
+        If checked, <code>selectedNumber</code> will be set to <code>value</code>, otherwise
+        <code>null</code>.
+      </p>
+      <!-- eslint-disable -->
+      <!-- prettier-ignore -->
+      <DocsShowCode language="html">
+        <KCheckbox
+          v-model="selectedNumber"
+          :label="`selectedNumber = ${selectedNumber}`"
+          :value="1"
+        />
+      </DocsShowCode>
+      <!-- prettier-ignore -->
+      <DocsShowCode language="javascript">
+        export default {
+          data() {
+            return {
+              selectedNumber: 1,
+            };
+          },
+        };
+      </DocsShowCode>
+      <!-- eslint-enable -->
+      <DocsShow>
+        <KCheckbox
+          v-model="selectedNumber"
+          :label="`selectedNumber = ${selectedNumber}`"
+          :value="1"
+        />
+      </DocsShow>
+
+      <h3>
+        String
+        <DocsAnchorTarget anchor="#v-model-string" />
+      </h3>
+      <p>
+        If checked, <code>selectedString</code> will be set to <code>value</code>, otherwise
+        <code>null</code>.
+      </p>
+      <!-- eslint-disable -->
+      <!-- prettier-ignore -->
+      <DocsShowCode language="html">
+        <KCheckbox
+          v-model="selectedString"
+          :label="`selectedString = ${selectedString}`"
+          :value="'String'"
+        />
+      </DocsShowCode>
+      <!-- prettier-ignore -->
+      <DocsShowCode language="javascript">
+        export default {
+          data() {
+            return {
+              selectedString: 'String',
+            };
+          },
+        };
+      </DocsShowCode>
+      <!-- eslint-enable -->
+      <DocsShow>
+        <KCheckbox
+          v-model="selectedString"
+          :label="`selectedString = ${selectedString}`"
+          :value="'String'"
+        />
+      </DocsShow>
+
+      <h3>
+        Object
+        <DocsAnchorTarget anchor="#v-model-object" />
+      </h3>
+      <p>
+        If checked, <code>selectedObject</code> will be set to <code>value</code>, otherwise
+        <code>null</code>.
+      </p>
+      <!-- eslint-disable -->
+      <!-- prettier-ignore -->
+      <DocsShowCode language="html">
+        <KCheckbox
+          v-model="selectedObject"
+          :label="`selectedObject = ${JSON.stringify(selectedObject)}`"
+          :value="{ id: 1, name: 'Name 1' }"
+        />
+      </DocsShowCode>
+      <!-- prettier-ignore -->
+      <DocsShowCode language="javascript">
+        export default {
+          data() {
+            return {
+              selectedObject: { id: 1, name: 'Name 1' },
+            };
+          },
+        };
+      </DocsShowCode>
+      <!-- eslint-enable -->
+      <DocsShow>
+        <KCheckbox
+          v-model="selectedObject"
+          :label="`selectedObject = ${JSON.stringify(selectedObject)}`"
+          :value="{ id: 1, name: 'Name 1' }"
+        />
+      </DocsShow>
+    </DocsPageSection>
   </DocsPageTemplate>
 
 </template>
@@ -153,11 +341,20 @@
         indeterminate3: true,
         checked4: false,
         checked5: false,
+        groups: [
+          { id: 'group-1', name: 'First group' },
+          { id: 'group-2', name: 'Second group' },
+          { id: 'group-3', name: 'Third group' },
+        ],
+        selectedGroupIds: ['group-1'],
+        isSelected: true,
+        selectedNumber: 1,
+        selectedString: 'String',
+        selectedObject: { id: 1, name: 'Name 1' },
       };
     },
     methods: {
       handle3() {
-        this.checked3 = !this.checked3;
         this.indeterminate3 = false;
       },
     },

examples/KCheckbox/Deselected.vue

@@ -1,8 +1,21 @@
 <template>
 
   <KCheckbox
+    v-model="inputValue"
     label="Deselected checkbox"
-    :checked="false"
   />
 
 </template>
+
+
+<script>
+
+  export default {
+    data() {
+      return {
+        inputValue: false,
+      };
+    },
+  };
+
+</script>

examples/KCheckbox/DeselectedDisabled.vue

@@ -1,9 +1,22 @@
 <template>
 
   <KCheckbox
+    v-model="inputValue"
     label="Deselected disabled checkbox"
-    :checked="false"
     :disabled="true"
   />
 
 </template>
+
+
+<script>
+
+  export default {
+    data() {
+      return {
+        inputValue: false,
+      };
+    },
+  };
+
+</script>

examples/KCheckbox/Indeterminate.vue

@@ -1,8 +1,22 @@
 <template>
 
   <KCheckbox
+    v-model="inputValue"
     label="Indeterminate checkbox"
     :indeterminate="true"
   />
 
 </template>
+
+
+<script>
+
+  export default {
+    data() {
+      return {
+        inputValue: false,
+      };
+    },
+  };
+
+</script>

examples/KCheckbox/IndeterminateDisabled.vue

@@ -1,9 +1,23 @@
 <template>
 
   <KCheckbox
+    v-model="inputValue"
     label="Indeterminate disabled checkbox"
     :indeterminate="true"
     :disabled="true"
   />
 
 </template>
+
+
+<script>
+
+  export default {
+    data() {
+      return {
+        inputValue: false,
+      };
+    },
+  };
+
+</script>