feat: update checkbox

Author: pgbross

Diff for: .vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": false
+  }
+}

Diff for: demo/components/checkbox/checkbox.js

@@ -4,7 +4,7 @@ export default {
       checked: false,
       indeterminate_: false,
       disabled: false,
-
+      checkedSolo: false,
       ids: [],
     };
   },

Diff for: demo/components/checkbox/demo.vue

@@ -1,14 +1,15 @@
 <template>
   <div class="my-demo">
-    <div class="mcw-demo--container">
-      <mcw-checkbox
-        v-model="checked"
-        v-model:indeterminate="indeterminate"
-        :disabled="disabled"
-        :label="checked ? 'Checked' : 'Unchecked'"
-      />
-
-      <div>
+    <div class="mcw-demo--wrapper">
+      <div class="mcw-demo--container">
+        <mcw-checkbox
+          v-model="checked"
+          v-model:indeterminate="indeterminate"
+          :disabled="disabled"
+          :label="checked ? 'Checked' : 'Unchecked'"
+        />
+      </div>
+      <div class="mcw-demo--wrapper-actions">
         <mcw-button outlined @click="onIndeterminate"
           >make indeterminate</mcw-button
         >
@@ -18,22 +19,32 @@
       </div>
     </div>
 
-    <div class="mcw-demo--container">
+    <div class="mcw-demo--wrapper">
       <div>Array selection</div>
-      <mcw-checkbox
-        value="abc"
-        label="one"
-        :model-value="ids"
-        @update:modelValue="onIds"
-      />
-      <mcw-checkbox
-        value="xyz"
-        label="two"
-        :model-value="ids"
-        @update:modelValue="onIds"
-      />
+      <div class="mcw-demo--container">
+        <mcw-checkbox
+          value="abc"
+          label="one"
+          :model-value="ids"
+          @update:modelValue="onIds"
+        />
+        <mcw-checkbox
+          value="xyz"
+          label="two"
+          :model-value="ids"
+          @update:modelValue="onIds"
+        />
+      </div>
+      <div class="mcw-demo--wrapper-label">Selected IDs: {{ ids }}</div>
+    </div>
+    <div class="mcw-demo--wrapper">
+      <div>Without label</div>
+      <div class="mcw-demo--container">
+        <mcw-checkbox v-model="checkedSolo" />
+      </div>
+
+      <div class="mcw-demo--wrapper-label">checked: {{ checkedSolo }}</div>
     </div>
-    <div>Selected IDs: {{ ids }}</div>
   </div>
 </template>
 
@@ -47,4 +58,19 @@
   margin-bottom: 1em;
   background-color: #f2f2f2;
 }
+
+.mcw-demo--wrapper {
+  margin-bottom: 1em;
+  background-color: #f2f2f2;
+}
+
+.mcw-demo--wrapper-actions {
+  display: flex;
+  justify-content: center;
+  margin-top: -2em;
+}
+
+.mcw-demo--wrapper .mcw-demo--wrapper-label {
+  margin-top: -1em;
+}
 </style>

Diff for: package-lock.json

@@ -141,6 +141,7 @@
     "postcss-loader": "^6.2.1",
     "postcss-preset-env": "^7.4.3",
     "prettier": "^2.6.1",
+    "prettier-plugin-organize-imports": "^2.3.4",
     "regenerator-runtime": "^0.13.9",
     "rollup": "^2.70.1",
     "rollup-plugin-cleaner": "^1.0.0",
@@ -199,15 +200,16 @@
       "browser": true
     },
     "rules": {
-      "vue/no-v-model-argument": "off",
-      "no-unused-vars": "error",
       "no-else-return": 1,
       "prefer-const": "error",
       "no-var": "error",
-      "no-nested-ternary": "off",
-      "unicorn/no-array-reduce": [
-        "off"
+      "no-unused-vars": [
+        "error",
+        {
+          "ignoreRestSiblings": true
+        }
       ],
+      "no-nested-ternary": "off",
       "unicorn/no-nested-ternary": [
         "off"
       ],

Diff for: package.json

@@ -0,0 +1,72 @@
+import { MDCFormFieldFoundation } from '@material/form-field/foundation.js';
+import { computed, h, onBeforeUnmount, onMounted, ref } from 'vue';
+
+export default {
+  props: {
+    activate: Function,
+    deactivate: Function,
+    alignEnd: Boolean,
+    checkboxId: String,
+  },
+  inheritAttrs: false,
+  setup(props, { slots }) {
+    const labelElement = ref();
+
+    let formField;
+
+    const hasLabel = !!slots.label;
+
+    const formFieldClasses = computed(() => {
+      return {
+        'mdc-form-field': hasLabel,
+        'mdc-form-field--align-end': hasLabel && props.alignEnd,
+      };
+    });
+
+    onMounted(() => {
+      if (props.hasLabel) {
+        formField = new MDCFormFieldFoundation({
+          registerInteractionHandler: (type, handler) => {
+            labelElement.value.addEventListener(type, handler);
+          },
+          deregisterInteractionHandler: (type, handler) => {
+            labelElement.value.removeEventListener(type, handler);
+          },
+          activateInputRipple: () => {
+            props?.activate();
+          },
+          deactivateInputRipple: () => {
+            props?.deactivate();
+          },
+        });
+        formField.init();
+      }
+    });
+
+    onBeforeUnmount(() => {
+      formField?.destroy();
+    });
+
+    return () => {
+      if (hasLabel) {
+        return h(
+          'div',
+          { class: { 'mdc-checkbox-wrapper': 1, ...formFieldClasses.value } },
+          [
+            slots.default?.(),
+            h(
+              'label',
+              {
+                for: props.checkboxId,
+                ref: labelElement,
+              },
+              [slots.label?.()],
+            ),
+          ],
+        );
+      }
+
+      return slots.default();
+    };
+  },
+};

Diff for: src/checkbox/checkbox-content.js

@@ -2,7 +2,6 @@ import { getCorrectEventName } from '@material/animation/index.js';
 import { MDCCheckboxFoundation } from '@material/checkbox/foundation.js';
 import { applyPassive } from '@material/dom/events.js';
 import { matches } from '@material/dom/ponyfill.js';
-import { MDCFormFieldFoundation } from '@material/form-field/foundation.js';
 import {
   computed,
   onBeforeUnmount,
@@ -14,6 +13,7 @@ import {
 } from 'vue';
 import { emitCustomEvent } from '../base/custom-event.js';
 import { useRipplePlugin } from '../ripple/ripple-plugin.js';
+import checkboxContent from './checkbox-content.js';
 
 const CB_PROTO_PROPS = ['checked', 'indeterminate'];
 let checkboxId_ = 0;
@@ -43,7 +43,6 @@ export default {
     });
 
     let foundation;
-    let formField;
     const checkboxId = `__mcw-checkbox-${checkboxId_++}`;
 
     const {
@@ -71,16 +70,8 @@ export default {
       return { ...rippleClasses.value, ...uiState.classes };
     });
 
-    const hasLabel = computed(() => {
-      return props.label ?? slots.default;
-    });
+    const hasLabel = computed(() => !!(props.label || slots.default));
 
-    const formFieldClasses = computed(() => {
-      return {
-        'mdc-form-field': hasLabel.value,
-        'mdc-form-field--align-end': hasLabel.value && props.alignEnd,
-      };
-    });
     const onChange = ({ target: { indeterminate, checked } }) => {
       // note indeterminate will not currently work with the array model
       emit('update:indeterminate', indeterminate);
@@ -116,7 +107,6 @@ export default {
       isChecked: () => uiState.control.checked,
       isIndeterminate: () => uiState.control.indeterminate,
       removeClass: className => {
-        // eslint-disable-next-line no-unused-vars
         const { [className]: removed, ...rest } = uiState.classes;
         uiState.classes = rest;
       },
@@ -217,23 +207,6 @@ export default {
       );
 
       installPropertyChangeHooks_();
-      if (hasLabel.value) {
-        formField = new MDCFormFieldFoundation({
-          registerInteractionHandler: (type, handler) => {
-            uiState.labelEl.addEventListener(type, handler);
-          },
-          deregisterInteractionHandler: (type, handler) => {
-            uiState.labelEl.removeEventListener(type, handler);
-          },
-          activateInputRipple: () => {
-            activate();
-          },
-          deactivateInputRipple: () => {
-            deactivate();
-          },
-        });
-        formField.init();
-      }
 
       foundation.init();
 
@@ -248,25 +221,26 @@ export default {
         handleAnimationEnd,
       );
 
-      formField?.destroy();
-
       uninstallPropertyChangeHooks_();
       foundation.destroy();
     });
 
     return {
       ...toRefs(uiState),
       rootClasses,
-      formFieldClasses,
       onChange,
       styles,
       hasLabel,
       setChecked,
       setIndeterminate,
       isChecked,
       checkboxId,
+      activate,
+      deactivate,
     };
   },
+
+  components: { checkboxContent },
 };
 
 // ===