fix(vue): handle input without vmodel

fix(vue): handle input without vmodel

Author: Shyrro

.changeset/fast-ravens-enjoy.md

@@ -0,0 +1,5 @@
+---
+'@polymorphic-factory/vue': patch
+---
+
+fix polymorphic input

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
 
@@ -59,15 +59,11 @@ 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>
-      )
+      return () => <Component {...componentAttrs.value}>{() => slots?.default?.()}</Component>
     },
   }) as ComponentWithAs<never>
 }

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

@@ -1,59 +1,76 @@
-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,
-    )
+function 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,
+  )
+}
+
+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 })
 
-  if (formElements.includes(elementTag)) {
-    let val: Record<string, unknown> = { value: modelValue }
+  // 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>