fix(checkbox): HTMLElement is not defined in Nuxt 3 (#483)

* fix: 'No projects matched the filters' for Nuxt playground"

* fix: checkbox 'HTMLElement is not defined' in nuxt

* fix: another issue when restarting dev server

Author: Cr0zy07

packages/components/checkbox/src/checkbox.ts

@@ -1,4 +1,4 @@
-import { computed, defineComponent, h, mergeProps, reactive, ref, toRefs, useModel, watchEffect } from 'vue'
+import { computed, defineComponent, h, mergeProps, onMounted, reactive, ref, toRefs, useModel, watchEffect } from 'vue'
 import { reactiveOmit, useComposedRefs, useControllable, useForwardRef, useListeners } from '@oku-ui/use-composable'
 import { composeEventHandlers } from '@oku-ui/utils'
 import { Primitive } from '@oku-ui/primitive'
@@ -40,7 +40,13 @@ const Checkbox = defineComponent({
     const composedRefs = useComposedRefs(forwardedRef, buttonRef)
     const hasConsumerStoppedPropagationRef = ref(false)
     // We set this to true by default so that events bubble to forms without JS (SSR)
-    const isFormControl = computed(() => buttonRef.value instanceof HTMLElement ? Boolean(buttonRef.value.closest('form')) : false)
+    const isFormControl = ref<boolean>(false)
+    onMounted(() => {
+      isFormControl.value = buttonRef.value
+        ? typeof buttonRef.value.closest === 'function'
+        && Boolean(buttonRef.value.closest('form'))
+        : true
+    })
 
     const modelValue = useModel(props, 'modelValue')
     const proxyChecked = computed({

packages/components/checkbox/src/props.ts

@@ -135,7 +135,7 @@ export const bubbleInputProps = {
       required: true,
     },
     control: {
-      type: [HTMLElement, null] as PropType<BubbleInputProps['control']>,
+      type: Object as PropType<BubbleInputProps['control']>,
       default: null,
       required: true,
     },

playground/nuxt3/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "nuxt3-playground",
+  "name": "nuxt3",
   "type": "module",
   "private": true,
   "scripts": {