Merge pull request #744 from nucleogenesis/kcheckbox-unopinionated

KCheckbox: Remove local state management, rely on given props
learningequality · Sep 3, 2024 · 186b179 · 186b179
2 parents 4424aa9 + 49aaebe
commit 186b179
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 28 deletions.
diff --git a/docs/pages/kcheckbox.vue b/docs/pages/kcheckbox.vue
@@ -7,11 +7,13 @@
       <DocsShow>
         <KCheckbox
           label="Some label"
-          :checked="true"
+          :checked="checked1"
+          @change="checked1 = !checked1"
         />
         <KCheckbox
           label="Another label"
-          :checked="false"
+          :checked="checked2"
+          @change="checked2 = !checked2"
         />
       </DocsShow>
     </DocsPageSection>
@@ -39,7 +41,9 @@
       <DocsShow>
         <KCheckbox
           label="Topic is selected"
-          :indeterminate="true"
+          :indeterminate="indeterminate3"
+          :checked="checked3"
+          @change="handle3"
         />
       </DocsShow>
       <p>
@@ -53,11 +57,11 @@
       <!-- eslint-disable -->
       <!-- prevent prettier from changing indentation -->
       <DocsShowCode language="html">
-        <KCheckbox label="First lesson" />;
+        <KCheckbox label="First lesson" />
       </DocsShowCode>
       <!-- eslint-enable -->
       <DocsShow>
-        <KCheckbox label="First lesson" />
+        <KCheckbox label="First lesson" :checked="checked4" @change="checked4 = !checked4" />
       </DocsShow>
 
       In more complex situations, for example when another component is responsible for rendering the label, the default slot can be used:
@@ -71,7 +75,7 @@
       </DocsShowCode>
       <!-- eslint-enable -->
       <DocsShow>
-        <KCheckbox>
+        <KCheckbox :checked="checked5" @change="checked5 = !checked5">
           <KLabeledIcon icon="lesson" label="First lesson" />
         </KCheckbox>
       </DocsShow>
@@ -97,3 +101,27 @@
   </DocsPageTemplate>
 
 </template>
+
+
+<script>
+
+  export default {
+    data() {
+      return {
+        checked1: true,
+        checked2: false,
+        checked3: false,
+        indeterminate3: true,
+        checked4: false,
+        checked5: false,
+      };
+    },
+    methods: {
+      handle3() {
+        this.checked3 = !this.checked3;
+        this.indeterminate3 = false;
+      },
+    },
+  };
+
+</script>
diff --git a/lib/KCheckbox.vue b/lib/KCheckbox.vue
@@ -14,8 +14,8 @@
           type="checkbox"
           class="k-checkbox-input"
           :aria-checked="ariaChecked"
-          :checked="isCurrentlyChecked"
-          :indeterminate.prop="isCurrentlyIndeterminate"
+          :checked="checked"
+          :indeterminate.prop="indeterminate"
           :disabled="disabled"
           @click.stop="toggleCheck"
           @focus="isActive = true"
@@ -24,13 +24,13 @@
         >
 
         <KIcon
-          v-if="isCurrentlyIndeterminate"
+          v-if="indeterminate"
           :style="notBlank"
           class="checkbox-icon"
           icon="indeterminateCheck"
         />
         <KIcon
-          v-else-if="!isCurrentlyIndeterminate && isCurrentlyChecked"
+          v-else-if="!indeterminate && checked"
           :style="[ notBlank, activeOutline ]"
           class="checkbox-icon"
           icon="checked"
@@ -122,13 +122,11 @@
       },
     },
     data: () => ({
-      isCurrentlyChecked: false,
-      isCurrentlyIndeterminate: false,
       isActive: false,
     }),
     computed: {
       ariaChecked() {
-        return this.isCurrentlyIndeterminate ? 'mixed' : this.isCurrentlyChecked ? 'true' : 'false';
+        return this.indeterminate ? 'mixed' : this.checked ? 'true' : 'false';
       },
       id() {
         return `k-checkbox-${this._uid}`;
@@ -152,28 +150,14 @@
         };
       },
     },
-    watch: {
-      checked(newCheckedState) {
-        this.isCurrentlyChecked = newCheckedState;
-      },
-      indeterminate(newIndeterminateState) {
-        this.isCurrentlyIndeterminate = newIndeterminateState;
-      },
-    },
-    created() {
-      this.isCurrentlyChecked = this.checked;
-      this.isCurrentlyIndeterminate = this.indeterminate;
-    },
     methods: {
       toggleCheck(event) {
         if (!this.disabled) {
-          this.isCurrentlyChecked = !this.isCurrentlyChecked;
           this.$refs.kCheckboxInput.focus();
-          this.isCurrentlyIndeterminate = false;
           /**
            * Emits change event
            */
-          this.$emit('change', this.isCurrentlyChecked, event);
+          this.$emit('change', !this.checked, event);
         }
       },
       markInactive() {