chore(lib): update Checkbox

- Updates sufficient to render the documentation page of `Checkbox`
  are made.
- In `src/components/checkbox/Checkbox.vue`,
    - `required` is replaced with `requiredOrUndefined` because
      setting a boolean attribute `false` does not remove it on Vue 3.
- In `src/components/checkbox/CheckboxButton.vue`,
    - `disabled` is replaced with `disabledOrUndefined`, and
      `required` is replaced with `requiredOrUndefined` because
      setting a boolean attribute `false` does not remove it on Vue 3.
- In `src/utils/CheckRadioMixin.js`,
    - A new computed value `requiredOrUndefined` that becomes `true`
      or `undefined` is added. This computed value is intended to be
      specified to a boolean attribute.
- In `src/components/field/Field.vue`,
    - `vnode.tag` test is replaced with an `isTag` function call
      because VNode no longer has `tag` property.
- Common,
    - Automatic ESLint fix is applied.

src/components/checkbox/Checkbox.vue

@@ -20,7 +20,7 @@
             @click.stop
             :autocomplete="autocomplete"
             :disabled="disabledOrUndefined"
-            :required="required"
+            :required="requiredOrUndefined"
             :name="name"
             :value="nativeValue"
             :true-value="trueValue"

src/components/checkbox/CheckboxButton.vue

@@ -7,21 +7,23 @@
                 'is-disabled': disabled,
                 'is-focused': isFocused
             }]"
-            :disabled="disabled"
+            :disabled="disabledOrUndefined"
             @click="focus"
-            @keydown.prevent.enter="$refs.label.click()">
-            <slot/>
+            @keydown.prevent.enter="$refs.label.click()"
+        >
+            <slot />
             <input
                 v-model="computedValue"
                 type="checkbox"
                 ref="input"
                 @click.stop
-                :disabled="disabled"
-                :required="required"
+                :disabled="disabledOrUndefined"
+                :required="requiredOrUndefined"
                 :name="name"
                 :value="nativeValue"
                 @focus="isFocused = true"
-                @blur="isFocused = false">
+                @blur="isFocused = false"
+            >
         </label>
     </div>
 </template>

src/components/field/Field.vue

@@ -67,6 +67,7 @@
 
 <script>
 import config from '../../utils/config'
+import { isTag } from '../../utils/helpers'
 import FieldBody from './FieldBody.vue'
 
 export default {
@@ -259,7 +260,7 @@ export default {
         hasAddons() {
             let renderedNode = 0
             if (this.$slots.default) {
-                renderedNode = this.$slots.default().reduce((i, node) => node.tag ? i + 1 : i, 0)
+                renderedNode = this.$slots.default().reduce((i, node) => isTag(node) ? i + 1 : i, 0)
             }
             return (
                 renderedNode > 1 &&

src/utils/CheckRadioMixin.js

@@ -28,6 +28,11 @@ export default {
             // To remove it, `null` or `undefined` has to be given.
             // Setting `false` ends up with a grayed out component.
             return this.disabled || undefined
+        },
+        requiredOrUndefined() {
+            // On Vue 3, setting a boolean attribute `false` does not remove it,
+            // `null` or `undefined` has to be given to remove it.
+            return this.required || undefined
         }
     },
     watch: {

src/utils/helpers.js

@@ -1,4 +1,4 @@
-import { Fragment } from 'vue'
+import { Comment, Fragment, Static, Text } from 'vue'
 
 /**
  * +/- function to native math sign
@@ -313,3 +313,10 @@ export const isNil = (value) => value === null || value === undefined
 export function isFragment(vnode) {
     return vnode.type === Fragment
 }
+
+// TODO: replacement of vnode.tag test
+export function isTag(vnode) {
+    return vnode.type !== Comment &&
+        vnode.type !== Text &&
+        vnode.type !== Static
+}