fix(vue): handle input without vmodel

Signed-off-by: Shyrro <[email protected]>

Author: Shyrro

packages/vue/src/polymorphic-factory.tsx

@@ -10,7 +10,7 @@ import {
   computed,
 } from 'vue'
 import type { IntrinsicElementAttributes } from './dom.types'
-import { useVModel } from './use-v-model'
+import { getAttributes } from './use-v-model'
 
 export type DOMElements = keyof IntrinsicElementAttributes
 
@@ -20,17 +20,17 @@ export type ComponentWithAs<
   Component extends ElementType,
   P extends Record<string, unknown> = Record<never, never>,
 > = {
-  new (): {
+  new(): {
     $props: AllowedComponentProps &
-      ComponentCustomProps &
-      VNodeProps &
-      ExtractPropTypes<Component> &
-      (Component extends keyof IntrinsicElementAttributes
-        ? IntrinsicElementAttributes[Component]
-        : Record<never, never>) &
-      P & {
-        as?: ElementType
-      }
+    ComponentCustomProps &
+    VNodeProps &
+    ExtractPropTypes<Component> &
+    (Component extends keyof IntrinsicElementAttributes
+      ? IntrinsicElementAttributes[Component]
+      : Record<never, never>) &
+    P & {
+      as?: ElementType
+    }
   }
 }
 
@@ -59,13 +59,13 @@ function defaultStyled(originalComponent: ElementType) {
     emits: ['update:modelValue', 'input', 'change'],
     setup(props, { slots, attrs, emit }) {
       const Component = props.as || originalComponent
-      const vmodelAttrs = computed(() =>
-        useVModel(Component as string, props.modelValue, emit, attrs),
+      const componentAttrs = computed(() =>
+        getAttributes(Component as string, props.modelValue, emit, attrs),
       )
 
       return () => (
-        <Component {...vmodelAttrs.value} {...attrs}>
-          {slots?.default?.()}
+        <Component {...componentAttrs.value}>
+          {() => slots?.default?.()}
         </Component>
       )
     },

packages/vue/src/use-v-model.ts

@@ -1,59 +1,80 @@
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 
 const formElements = ['input', 'select', 'textarea', 'fieldset', 'datalist', 'option', 'optgroup']
 
-export const useVModel = (
-  elementTag: string,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  modelValue: any,
-  emit: CallableFunction,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  attrs: any,
-) => {
-  let vmodelAttrs = {}
-  const handleMultipleCheckbox = (value: unknown) => {
-    const currentModelValue = [...modelValue]
-    if (currentModelValue.includes(value)) {
-      currentModelValue.splice(currentModelValue.indexOf(value), 1)
-      return currentModelValue
-    } else {
-      return [...currentModelValue, value]
-    }
-  }
-  const handleInput = (e: Event) => {
-    emit(
-      'update:modelValue',
-      attrs.type === 'checkbox' && Array.isArray(modelValue)
-        ? handleMultipleCheckbox((e?.currentTarget as HTMLInputElement)?.value)
-        : typeof modelValue === 'boolean'
-        ? (e?.currentTarget as HTMLInputElement)?.checked
-        : (e?.currentTarget as HTMLInputElement)?.value,
-    )
-    emit('input', e, (e?.currentTarget as HTMLInputElement)?.value)
-    emit(
-      'change',
-      e,
-      typeof modelValue === 'boolean'
-        ? (e?.currentTarget as HTMLInputElement)?.checked
-        : (e?.currentTarget as HTMLInputElement)?.value,
-    )
+const handleMultipleCheckbox = <TModelValue extends Array<any>>(value: unknown, modelValue: TModelValue) => {
+  const currentModelValue = [...modelValue]
+  // If the value is already checked, uncheck it
+  // else, add it to the checked array.
+  if (currentModelValue.includes(value)) {
+    currentModelValue.splice(currentModelValue.indexOf(value), 1)
+    return currentModelValue
+  } else {
+    return [...currentModelValue, value]
   }
+}
+
+/**
+ * Function that emits the right events when using v-model.
+ */
+function handleInput<
+  TEmit extends CallableFunction, 
+  TModelValue extends Array<any>,
+  TAttrs extends Record<string, unknown>
+>(e: Event, emit: TEmit, modelValue: TModelValue, attrs: TAttrs) {
+  emit(
+    'update:modelValue',
+    attrs.type === 'checkbox' && Array.isArray(modelValue)
+      ? handleMultipleCheckbox((e?.currentTarget as HTMLInputElement)?.value, modelValue)
+      : typeof modelValue === 'boolean'
+      ? (e?.currentTarget as HTMLInputElement)?.checked
+      : (e?.currentTarget as HTMLInputElement)?.value,
+  )
+  emit('input', e, (e?.currentTarget as HTMLInputElement)?.value)
+  emit(
+    'change',
+    e,
+    typeof modelValue === 'boolean'
+      ? (e?.currentTarget as HTMLInputElement)?.checked
+      : (e?.currentTarget as HTMLInputElement)?.value,
+  )
+}
 
-  if (formElements.includes(elementTag)) {
-    let val: Record<string, unknown> = { value: modelValue }
+export function getAttributes<
+  TModelValue extends Array<any>, 
+  TEmit extends CallableFunction, 
+  TAttrs extends Record<string, unknown>>
+(
+  elementTag: string,
+  modelValue: TModelValue,
+  emit: TEmit,
+  attrs: TAttrs,
+) {
+  
+  const val = ref<Record<string, unknown>>({ value: modelValue })
+  const attributes = ref({ ...attrs })
+
+  // Only do this if v-model directive is provided, otherwise return user props
+  if (formElements.includes(elementTag) && (modelValue !== null || modelValue !== undefined)) {
+    
     if (elementTag === 'input' && (attrs.type === 'checkbox' || attrs.type === 'radio')) {
       const isChecked = computed(() =>
+        // If it's a boolean, it's probably a single checkbox or a radio button
+        // If it's not, it's multiple checkboxes
         typeof modelValue === 'boolean' ? modelValue : modelValue.includes(attrs.value),
       )
-      val = {
+
+      val.value = {
         checked: isChecked.value,
       }
     }
-    vmodelAttrs = {
-      ...val,
-      onInput: handleInput,
+
+    attributes.value = {
+      ...val.value,
+      onInput: (e: Event) => handleInput(e, emit, modelValue, attrs),
+      ...attrs
     }
   }
-
-  return vmodelAttrs
+  
+  return attributes.value
 }

packages/vue/test/poly-test.vue

@@ -20,9 +20,9 @@ const singleCheckbox = ref(true)
   <poly.p>selected : {{ selectValue }}</poly.p>
 
   <poly.div>
-    <poly.input type="radio" v-model="radioValue" value="vue"></poly.input>
-    <poly.input type="radio" value="react" v-model="radioValue" data-testid="react-radio"></poly.input>
-    <poly.input type="radio" value="angular" v-model="radioValue"></poly.input>
+    <poly.input name="framework" type="radio" v-model="radioValue" value="vue"></poly.input>
+    <poly.input name="framework" type="radio" value="react" v-model="radioValue" data-testid="react-radio"></poly.input>
+    <poly.input name="framework" type="radio" value="angular" v-model="radioValue"></poly.input>
   </poly.div>
   <poly.p>Radio: {{ radioValue }}</poly.p>