09 — Forms & v-model

<script setup>
// ── Pre-3.4: manual v-model contract ──────────────────
const props = defineProps({
  modelValue: { type: String, default: '' },
  modelModifiers: { default: () => ({}) },
})
const emit = defineEmits(['update:modelValue'])

function onInput(e) {
  let val = e.target.value
  if (props.modelModifiers.capitalize) {
    val = val.charAt(0).toUpperCase() + val.slice(1)
  }
  emit('update:modelValue', val)
}
</script>

<template>
  <input :value="modelValue" @input="onInput" />
</template>

import { reactive, computed, ref, type Ref } from 'vue'

// ── Type-safe form validation composable ────────────────
// Rules: each field has an array of validator functions.
// Validator returns: true (valid) | string (error message)

type Validator<T> = (value: T) => true | string

export function useForm<T extends Record<string, any>>(
  initial: T,
  rules: { [K in keyof T]?: Validator<T[K]>[] }
) {
  const form = reactive({ ...initial })
  const touched = reactive({} as Record<keyof T, boolean>)
  const submitting = ref(false)

  // ── Errors: computed — re-evaluates when form or touched change ──
  const errors = computed(() => {
    const result: Partial<Record<keyof T, string>> = {}
    for (const key in rules) {
      // Only validate fields the user has touched (UX: no errors on load)
      if (!touched[key]) continue
      for (const validator of rules[key] ?? []) {
        const res = validator(form[key])
        if (res !== true) {
          result[key] = res
          break  // first error wins — don't stack messages
        }
      }
    }
    return result
  })

  const isValid = computed(() => Object.keys(errors.value).length === 0)

  function touch(key: keyof T) { touched[key] = true }
  function touchAll() {
    (Object.keys(form) as (keyof T)[]).forEach(k => touched[k] = true)
  }

  async function submit(handler: (form: T) => Promise<void>) {
    touchAll()  // validate all fields on submit attempt
    if (!isValid.value) return false
    submitting.value = true
    try {
      await handler(form)
      return true
    } finally {
      submitting.value = false
    }
  }

  function reset() {
    Object.assign(form, initial)
    Object.keys(touched).forEach(k => touched[k] = false)
  }

  return { form, errors, isValid, submitting, touch, touchAll, submit, reset }
}

// ── Usage: ──────────────────────────────────────────────
// const { form, errors, submit } = useForm(
//   { email: '', password: '' },
//   {
//     email: [v => !!v || 'Required', v => /.+@.+/.test(v) || 'Invalid email'],
//     password: [v => v.length >= 8 || 'Min 8 characters'],
//   }
// )

<script setup>
import { ref, computed } from 'vue'

// ── Schema-driven form: render inputs from a config array ──
const schema = ref([
  { name: 'email', type: 'email', label: 'Email', required: true, placeholder: 'user@example.com' },
  { name: 'age', type: 'number', label: 'Age', min: 18, max: 120 },
  { name: 'bio', type: 'textarea', label: 'Bio', rows: 4 },
  { name: 'role', type: 'select', label: 'Role', options: ['admin', 'user', 'guest'] },
  { name: 'subscribe', type: 'checkbox', label: 'Subscribe to newsletter' },
])

const formData = ref({})

// ── Initialize form data from schema defaults ──
schema.value.forEach(field => {
  formData.value[field.name] = field.type === 'checkbox' ? false : ''
})

// ── Computed: map schema type → component ──
const fieldComponents = {
  text: 'input',
  email: 'input',
  number: 'input',
  textarea: 'textarea',
  select: 'select',
  checkbox: 'input',
}
</script>

<template>
  <form @submit.prevent>
    <div v-for="field in schema" :key="field.name">
      <label :for="field.name">{{ field.label }}</label>

      <!-- Text/Email/Number inputs -->
      <input
        v-if="['text', 'email', 'number'].includes(field.type)"
        :type="field.type"
        v-model="formData[field.name]"
        :placeholder="field.placeholder"
        :required="field.required"
      />

      <!-- Textarea -->
      <textarea
        v-else-if="field.type === 'textarea'"
        v-model="formData[field.name]"
        :rows="field.rows || 3"
      />

      <!-- Select -->
      <select v-else-if="field.type === 'select'" v-model="formData[field.name]">
        <option v-for="opt in field.options" :key="opt" :value="opt">{{ opt }}</option>
      </select>

      <!-- Checkbox -->
      <input
        v-else-if="field.type === 'checkbox'"
        type="checkbox"
        v-model="formData[field.name]"
      />
    </div>

    <button type="submit">Submit</button>
  </form>
</template>

<script setup>
import { ref, watch, customRef } from 'vue'

// ── Debounced ref factory: delays updates until typing pauses ──
function useDebouncedRef(initial, delay = 300) {
  let value = initial
  let timer
  return customRef((track, trigger) => ({
    get() { track(); return value },
    set(newVal) {
      clearTimeout(timer)
      timer = setTimeout(() => { value = newVal; trigger() }, delay)
    },
  }))
}

const search = useDebouncedRef('', 300)
const results = ref([])

// ── Watch fires 300ms after last keystroke, not on every keystroke ──
watch(search, async (q) => {
  if (!q) { results.value = []; return }
  const res = await fetch(`/api/search?q=${q}`)
  results.value = await res.json()
})
</script>

<template>
  <!-- Input updates immediately (user sees what they type),
       but the ref (and watchers) only update 300ms after typing stops. -->
  <input v-model="search" placeholder="Search…" />
  <ul>
    <li v-for="r in results" :key="r.id">{{ r.name }}</li>
  </ul>
</template>

<script setup>
import { computed } from 'vue'

// ── Two named v-models: one for email, one for password ──
// Parent: <RegistrationForm v-model:email="email" v-model:password="password" />
const email = defineModel<string>('email')
const password = defineModel<string>('password')

// ── Computed validation on each model ──
const emailError = computed(() => {
  if (!email.value) return ''
  return /.+@.+\..+/.test(email.value) ? '' : 'Invalid email'
})

const passwordError = computed(() => {
  if (!password.value) return ''
  return password.value.length >= 8 ? '' : 'Min 8 characters'
})

const isValid = computed(() =>
  !emailError.value && !passwordError.value && email.value && password.value
)
</script>

<template>
  <div>
    <input v-model="email" type="email" placeholder="Email" />
    <span v-if="emailError" class="error">{{ emailError }}</span>

    <input v-model="password" type="password" placeholder="Password" />
    <span v-if="passwordError" class="error">{{ passwordError }}</span>

    <button :disabled="!isValid">Register</button>
  </div>
</template>

// ── 1. .number edge case: parseFloat("abc") → NaN, keeps original string ──
// v-model.number on "abc" → ref stays "abc" (string), NOT NaN.
// Vue checks: if parsed is NaN, uses the original input value.

// ── 2. Checkbox v-model with true-value/false-value ──
// <input type="checkbox" v-model="agree" true-value="yes" false-value="no" />
// agree = "yes" when checked, "no" when unchecked (not true/false)

// ── 3. Radio button v-model binds to the value attribute ──
// <input type="radio" v-model="plan" value="pro" /> → plan = "pro" when selected

// ── 4. .lazy on checkboxes/selects is a no-op ──
// Checkboxes and selects fire 'change' natively, not 'input'.
// .lazy only matters for text inputs and textareas.

// ── 5. Form reset: use the form element's reset() method or reassign ──
// formRef.value?.reset()  → resets to initial HTML defaults
// Object.assign(formData, initialData)  → resets to reactive initial state

// ── 1. .number with type="number" vs type="text" ──
// type="number": browser may return "" for invalid input, .number keeps ""
// type="text" + .number: "42abc" → parseFloat("42abc") = 42 (partial parse!)
// Always use type="number" with .number for proper browser validation.

// ── 2. v-model on contenteditable elements is not supported ──
// Use a manual binding: :textContent + @input handler.
// Or use a library like vue-contenteditable.

// ── 3. v-model + v-for: each item needs its own model ref ──
// ❌ <input v-for="item in items" v-model="item" /> — binds to item reference
// ✅ <input v-for="item in items" v-model="item.value" /> — binds to a property

// ── 4. defineModel is writable — but parent owns the source ──
// Writing to model.value emits update:modelValue → parent updates its ref.
// The child's model.value reflects the parent's value after the round-trip.
// In the same tick, model.value may show the old value until parent updates.

// ── 5. .trim on number inputs strips whitespace but doesn't affect parsing ──
// v-model.trim.number="age" → trims, then parses.
// "  42  " → trim → "42" → number → 42. Works as expected.

// ── 6. Custom component v-model: modelValue must match exactly ──
// defineModel() → prop name is "modelValue", emit is "update:modelValue"
// defineModel('foo') → prop name is "foo", emit is "update:foo"
// Parent: v-model="x" → modelValue, v-model:foo="x" → foo

<script setup>
import { ref, watch } from 'vue'
const age = ref(0)
watch(age, (v) => console.log(typeof v, v))  // always logs "string"
</script>

<template>
  <!-- Missing .number modifier — v-model stores the raw string -->
  <input v-model="age" type="number" />
</template>