@duffcloudservices/site-forms 0.1.1 → 0.1.3

package/src/composables/useFormSubmission.ts

@@ -1,113 +1,113 @@
-import type {
-  DcsFormSubmitPayload,
-  DcsFormSubmitSuccess,
-  DcsFormSubmitError,
-} from '../types'
-
-export interface SubmitOptions {
-  apiBase: string
-  siteSlug: string
-  payload: DcsFormSubmitPayload
-  /** Number of retries on 5xx / network errors. Default 1. */
-  retries?: number
-  /** Optional fetch implementation override (tests). */
-  fetchImpl?: typeof fetch
-}
-
-/**
- * POSTs a form submission to
- * `${apiBase}/public/sites/{siteSlug}/form-submissions`.
- *
- * Uses JSON for plain values and `multipart/form-data` when any
- * value is a `File` (file-upload fields).
- */
-export async function submitFormValues(
-  opts: SubmitOptions,
-): Promise<DcsFormSubmitSuccess> {
-  const { apiBase, siteSlug, payload } = opts
-  const retries = opts.retries ?? 1
-  const fetchImpl = opts.fetchImpl ?? fetch
-  const url = `${apiBase.replace(/\/$/, '')}/public/sites/${encodeURIComponent(
-    siteSlug,
-  )}/form-submissions`
-
-  const hasFile = Object.values(payload.values).some(
-    (v) => typeof File !== 'undefined' && v instanceof File,
-  )
-
-  let lastError: Error | undefined
-  let lastStatus: number | undefined
-  for (let attempt = 0; attempt <= retries; attempt++) {
-    try {
-      const init: RequestInit = hasFile
-        ? { method: 'POST', body: buildFormData(payload) }
-        : {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(payload),
-          }
-      const res = await fetchImpl(url, init)
-      lastStatus = res.status
-      if (res.ok) {
-        const body = await safeJson(res)
-        return { payload, response: body }
-      }
-      // Retry only on 5xx
-      if (res.status < 500) {
-        const body = await safeText(res)
-        const err: DcsFormSubmitError = {
-          payload,
-          status: res.status,
-          error: new Error(`Submission failed (${res.status}): ${body}`),
-        }
-        throw err
-      }
-      lastError = new Error(`Server error ${res.status}`)
-    } catch (e) {
-      // If `e` is already a DcsFormSubmitError-shaped object, rethrow.
-      if (e && typeof e === 'object' && 'payload' in e && 'error' in e) {
-        throw e
-      }
-      lastError = e as Error
-    }
-  }
-
-  throw {
-    payload,
-    status: lastStatus,
-    error: lastError ?? new Error('Submission failed'),
-  } satisfies DcsFormSubmitError
-}
-
-function buildFormData(payload: DcsFormSubmitPayload): FormData {
-  const fd = new FormData()
-  fd.append('formId', payload.formId)
-  if (payload.captchaToken) fd.append('captchaToken', payload.captchaToken)
-  for (const [key, value] of Object.entries(payload.values)) {
-    if (value === undefined || value === null) continue
-    if (value instanceof File) {
-      fd.append(`values[${key}]`, value)
-    } else if (Array.isArray(value)) {
-      for (const item of value) fd.append(`values[${key}][]`, String(item))
-    } else {
-      fd.append(`values[${key}]`, String(value))
-    }
-  }
-  return fd
-}
-
-async function safeJson(res: Response): Promise<unknown> {
-  try {
-    return await res.json()
-  } catch {
-    return null
-  }
-}
-
-async function safeText(res: Response): Promise<string> {
-  try {
-    return await res.text()
-  } catch {
-    return ''
-  }
-}
+import type {
+  DcsFormSubmitPayload,
+  DcsFormSubmitSuccess,
+  DcsFormSubmitError,
+} from '../types'
+
+export interface SubmitOptions {
+  apiBase: string
+  siteSlug: string
+  payload: DcsFormSubmitPayload
+  /** Number of retries on 5xx / network errors. Default 1. */
+  retries?: number
+  /** Optional fetch implementation override (tests). */
+  fetchImpl?: typeof fetch
+}
+
+/**
+ * POSTs a form submission to
+ * `${apiBase}/sites/{siteSlug}/forms/{formId}/submissions`.
+ *
+ * Uses JSON for plain values and `multipart/form-data` when any
+ * value is a `File` (file-upload fields).
+ */
+export async function submitFormValues(
+  opts: SubmitOptions,
+): Promise<DcsFormSubmitSuccess> {
+  const { apiBase, siteSlug, payload } = opts
+  const retries = opts.retries ?? 1
+  const fetchImpl = opts.fetchImpl ?? fetch
+  const url = `${apiBase.replace(/\/$/, '')}/sites/${encodeURIComponent(
+    siteSlug,
+  )}/forms/${encodeURIComponent(payload.formId)}/submissions`
+
+  const hasFile = Object.values(payload.values).some(
+    (v) => typeof File !== 'undefined' && v instanceof File,
+  )
+
+  let lastError: Error | undefined
+  let lastStatus: number | undefined
+  for (let attempt = 0; attempt <= retries; attempt++) {
+    try {
+      const init: RequestInit = hasFile
+        ? { method: 'POST', body: buildFormData(payload) }
+        : {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(payload),
+          }
+      const res = await fetchImpl(url, init)
+      lastStatus = res.status
+      if (res.ok) {
+        const body = await safeJson(res)
+        return { payload, response: body }
+      }
+      // Retry only on 5xx
+      if (res.status < 500) {
+        const body = await safeText(res)
+        const err: DcsFormSubmitError = {
+          payload,
+          status: res.status,
+          error: new Error(`Submission failed (${res.status}): ${body}`),
+        }
+        throw err
+      }
+      lastError = new Error(`Server error ${res.status}`)
+    } catch (e) {
+      // If `e` is already a DcsFormSubmitError-shaped object, rethrow.
+      if (e && typeof e === 'object' && 'payload' in e && 'error' in e) {
+        throw e
+      }
+      lastError = e as Error
+    }
+  }
+
+  throw {
+    payload,
+    status: lastStatus,
+    error: lastError ?? new Error('Submission failed'),
+  } satisfies DcsFormSubmitError
+}
+
+function buildFormData(payload: DcsFormSubmitPayload): FormData {
+  const fd = new FormData()
+  fd.append('formId', payload.formId)
+  if (payload.captchaToken) fd.append('captchaToken', payload.captchaToken)
+  for (const [key, value] of Object.entries(payload.values)) {
+    if (value === undefined || value === null) continue
+    if (value instanceof File) {
+      fd.append(`values[${key}]`, value)
+    } else if (Array.isArray(value)) {
+      for (const item of value) fd.append(`values[${key}][]`, String(item))
+    } else {
+      fd.append(`values[${key}]`, String(value))
+    }
+  }
+  return fd
+}
+
+async function safeJson(res: Response): Promise<unknown> {
+  try {
+    return await res.json()
+  } catch {
+    return null
+  }
+}
+
+async function safeText(res: Response): Promise<string> {
+  try {
+    return await res.text()
+  } catch {
+    return ''
+  }
+}

package/src/composables/useFormValidation.ts

@@ -1,127 +1,128 @@
-import type {
-  PortalFormDefinition,
-  PortalFormField,
-  FormErrors,
-  FormValues,
-} from '../types'
-
-/**
- * Returns true iff `field` is currently visible given the form's
- * other values. Hidden fields are never validated and never sent.
- */
-export function isFieldVisible(
-  field: PortalFormField,
-  values: FormValues,
-): boolean {
-  if (!field.visibleIf) return true
-  const sibling = values[field.visibleIf.fieldId]
-  return sibling === field.visibleIf.equals
-}
-
-/**
- * Validates a single field's value. Returns an error string or
- * `undefined` if valid. Layout-only field types (section-heading,
- * html-block) and hidden fields never produce errors.
- */
-export function validateField(
-  field: PortalFormField,
-  value: unknown,
-): string | undefined {
-  if (
-    field.type === 'section-heading' ||
-    field.type === 'html-block' ||
-    field.type === 'hidden'
-  ) {
-    return undefined
-  }
-
-  const isEmpty =
-    value === undefined ||
-    value === null ||
-    value === '' ||
-    (Array.isArray(value) && value.length === 0)
-
-  if (field.required && isEmpty) {
-    return `${field.label} is required`
-  }
-  if (isEmpty) return undefined
-
-  // Type-specific built-ins
-  if (field.type === 'email' && typeof value === 'string') {
-    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
-      return `${field.label} must be a valid email address`
-    }
-  }
-
-  const v = field.validation
-  if (!v) return undefined
-
-  if (typeof value === 'string') {
-    if (v.minLength != null && value.length < v.minLength) {
-      return `${field.label} must be at least ${v.minLength} characters`
-    }
-    if (v.maxLength != null && value.length > v.maxLength) {
-      return `${field.label} must be at most ${v.maxLength} characters`
-    }
-    if (v.regex) {
-      try {
-        if (!new RegExp(v.regex).test(value)) {
-          return `${field.label} is invalid`
-        }
-      } catch {
-        // bad regex in the definition — treat as no rule
-      }
-    }
-  }
-
-  if (typeof value === 'number') {
-    if (v.min != null && value < v.min) {
-      return `${field.label} must be at least ${v.min}`
-    }
-    if (v.max != null && value > v.max) {
-      return `${field.label} must be at most ${v.max}`
-    }
-  }
-
-  if (field.type === 'file' && v.accept && v.accept.length > 0) {
-    const file = value as File | null
-    if (file && typeof File !== 'undefined' && file instanceof File) {
-      const accepted = v.accept.some((a) => {
-        if (a.startsWith('.')) {
-          return file.name.toLowerCase().endsWith(a.toLowerCase())
-        }
-        return file.type === a
-      })
-      if (!accepted) {
-        return `${field.label} must be one of: ${v.accept.join(', ')}`
-      }
-    }
-  }
-
-  return undefined
-}
-
-/**
- * Validates an entire form. Skips fields that are not visible.
- * If `fieldIds` is supplied, only those fields are validated
- * (used for per-step validation in multi-step forms).
- */
-export function validateForm(
-  def: PortalFormDefinition,
-  values: FormValues,
-  fieldIds?: string[],
-): FormErrors {
-  const errors: FormErrors = {}
-  const ids = fieldIds ? new Set(fieldIds) : null
-  for (const field of def.fields) {
-    if (ids && !ids.has(field.id)) continue
-    if (!isFieldVisible(field, values)) continue
-    const err = validateField(field, values[field.id])
-    if (err) errors[field.id] = err
-  }
-  return errors
-}
-
-export function hasErrors(errors: FormErrors): boolean {
-  return Object.values(errors).some((e) => !!e)
-}
+import type {
+  PortalFormDefinition,
+  PortalFormField,
+  FormErrors,
+  FormValues,
+} from '../types'
+
+/**
+ * Returns true iff `field` is currently visible given the form's
+ * other values. Hidden fields are never validated and never sent.
+ */
+export function isFieldVisible(
+  field: PortalFormField,
+  values: FormValues,
+): boolean {
+  if (!field.visibleIf) return true
+  const sibling = values[field.visibleIf.fieldId]
+  return sibling === field.visibleIf.equals
+}
+
+/**
+ * Validates a single field's value. Returns an error string or
+ * `undefined` if valid. Layout-only field types (section-heading,
+ * html-block) and hidden fields never produce errors.
+ */
+export function validateField(
+  field: PortalFormField,
+  value: unknown,
+): string | undefined {
+  if (
+    field.type === 'section-heading' ||
+    field.type === 'html-block' ||
+    field.type === 'hidden'
+  ) {
+    return undefined
+  }
+
+  const normalizedValue = typeof value === 'string' ? value.trim() : value
+  const isEmpty =
+    value === undefined ||
+    value === null ||
+    normalizedValue === '' ||
+    (Array.isArray(value) && value.length === 0)
+
+  if (field.required && isEmpty) {
+    return `${field.label} is required`
+  }
+  if (isEmpty) return undefined
+
+  // Type-specific built-ins
+  if (field.type === 'email' && typeof normalizedValue === 'string') {
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(normalizedValue)) {
+      return `${field.label} must be a valid email address`
+    }
+  }
+
+  const v = field.validation
+  if (!v) return undefined
+
+  if (typeof normalizedValue === 'string') {
+    if (v.minLength != null && normalizedValue.length < v.minLength) {
+      return `${field.label} must be at least ${v.minLength} characters`
+    }
+    if (v.maxLength != null && normalizedValue.length > v.maxLength) {
+      return `${field.label} must be at most ${v.maxLength} characters`
+    }
+    if (v.regex) {
+      try {
+        if (!new RegExp(v.regex).test(normalizedValue)) {
+          return `${field.label} is invalid`
+        }
+      } catch {
+        // bad regex in the definition — treat as no rule
+      }
+    }
+  }
+
+  if (typeof value === 'number') {
+    if (v.min != null && value < v.min) {
+      return `${field.label} must be at least ${v.min}`
+    }
+    if (v.max != null && value > v.max) {
+      return `${field.label} must be at most ${v.max}`
+    }
+  }
+
+  if (field.type === 'file' && v.accept && v.accept.length > 0) {
+    const file = value as File | null
+    if (file && typeof File !== 'undefined' && file instanceof File) {
+      const accepted = v.accept.some((a) => {
+        if (a.startsWith('.')) {
+          return file.name.toLowerCase().endsWith(a.toLowerCase())
+        }
+        return file.type === a
+      })
+      if (!accepted) {
+        return `${field.label} must be one of: ${v.accept.join(', ')}`
+      }
+    }
+  }
+
+  return undefined
+}
+
+/**
+ * Validates an entire form. Skips fields that are not visible.
+ * If `fieldIds` is supplied, only those fields are validated
+ * (used for per-step validation in multi-step forms).
+ */
+export function validateForm(
+  def: PortalFormDefinition,
+  values: FormValues,
+  fieldIds?: string[],
+): FormErrors {
+  const errors: FormErrors = {}
+  const ids = fieldIds ? new Set(fieldIds) : null
+  for (const field of def.fields) {
+    if (ids && !ids.has(field.id)) continue
+    if (!isFieldVisible(field, values)) continue
+    const err = validateField(field, values[field.id])
+    if (err) errors[field.id] = err
+  }
+  return errors
+}
+
+export function hasErrors(errors: FormErrors): boolean {
+  return Object.values(errors).some((e) => !!e)
+}

package/src/fields/DcsFormCheckbox.vue

@@ -1,35 +1,35 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { PortalFormField } from '../types'
-import DcsFormFieldWrapper from './DcsFormFieldWrapper.vue'
-
-const props = defineProps<{
-  field: PortalFormField
-  modelValue: boolean | undefined
-  error?: string
-}>()
-
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
-}>()
-
-const inputId = computed(() => `field-${props.field.id}`)
-</script>
-
-<template>
-  <DcsFormFieldWrapper :field="field" :error="error" :input-id="inputId">
-    <template #label><span class="sr-only">{{ field.label }}</span></template>
-    <label class="dcs-form-checkbox-single" :for="inputId">
-      <input
-        :id="inputId"
-        type="checkbox"
-        :name="field.id"
-        :checked="!!modelValue"
-        :required="field.required"
-        :aria-invalid="!!error"
-        @change="emit('update:modelValue', ($event.target as HTMLInputElement).checked)"
-      />
-      <span>{{ field.label }}<span v-if="field.required" aria-hidden="true"> *</span></span>
-    </label>
-  </DcsFormFieldWrapper>
-</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { PortalFormField } from '../types'
+import DcsFormFieldWrapper from './DcsFormFieldWrapper.vue'
+
+const props = defineProps<{
+  field: PortalFormField
+  modelValue: boolean | undefined
+  error?: string
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+const inputId = computed(() => `field-${props.field.id}`)
+</script>
+
+<template>
+  <DcsFormFieldWrapper :field="field" :error="error" :input-id="inputId">
+    <template #label><span class="sr-only">{{ field.label }}</span></template>
+    <label class="dcs-form-checkbox-single" :for="inputId">
+      <input
+        :id="inputId"
+        type="checkbox"
+        :name="field.id"
+        :checked="!!modelValue"
+        :required="field.required"
+        :aria-invalid="!!error"
+        @change="emit('update:modelValue', ($event.target as HTMLInputElement).checked)"
+      />
+      <span>{{ field.label }}<span v-if="field.required" aria-hidden="true"> *</span></span>
+    </label>
+  </DcsFormFieldWrapper>
+</template>

package/src/fields/DcsFormCheckboxGroup.vue

@@ -1,52 +1,52 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { PortalFormField } from '../types'
-import DcsFormFieldWrapper from './DcsFormFieldWrapper.vue'
-
-const props = defineProps<{
-  field: PortalFormField
-  modelValue: string[] | undefined
-  error?: string
-}>()
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string[]]
-}>()
-
-const inputId = computed(() => `field-${props.field.id}`)
-const options = computed(() => props.field.options ?? [])
-const current = computed(() => props.modelValue ?? [])
-
-function toggle(value: string, checked: boolean): void {
-  const set = new Set(current.value)
-  if (checked) set.add(value)
-  else set.delete(value)
-  emit('update:modelValue', Array.from(set))
-}
-</script>
-
-<template>
-  <DcsFormFieldWrapper :field="field" :error="error" :input-id="inputId">
-    <fieldset
-      class="dcs-form-checkbox-group"
-      :aria-required="field.required"
-      :aria-invalid="!!error"
-    >
-      <legend class="sr-only">{{ field.label }}</legend>
-      <label
-        v-for="opt in options"
-        :key="opt.value"
-        class="dcs-form-checkbox"
-      >
-        <input
-          type="checkbox"
-          :name="`${field.id}[]`"
-          :value="opt.value"
-          :checked="current.includes(opt.value)"
-          @change="toggle(opt.value, ($event.target as HTMLInputElement).checked)"
-        />
-        <span>{{ opt.label }}</span>
-      </label>
-    </fieldset>
-  </DcsFormFieldWrapper>
-</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { PortalFormField } from '../types'
+import DcsFormFieldWrapper from './DcsFormFieldWrapper.vue'
+
+const props = defineProps<{
+  field: PortalFormField
+  modelValue: string[] | undefined
+  error?: string
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string[]]
+}>()
+
+const inputId = computed(() => `field-${props.field.id}`)
+const options = computed(() => props.field.options ?? [])
+const current = computed(() => props.modelValue ?? [])
+
+function toggle(value: string, checked: boolean): void {
+  const set = new Set(current.value)
+  if (checked) set.add(value)
+  else set.delete(value)
+  emit('update:modelValue', Array.from(set))
+}
+</script>
+
+<template>
+  <DcsFormFieldWrapper :field="field" :error="error" :input-id="inputId">
+    <fieldset
+      class="dcs-form-checkbox-group"
+      :aria-required="field.required"
+      :aria-invalid="!!error"
+    >
+      <legend class="sr-only">{{ field.label }}</legend>
+      <label
+        v-for="opt in options"
+        :key="opt.value"
+        class="dcs-form-checkbox"
+      >
+        <input
+          type="checkbox"
+          :name="`${field.id}[]`"
+          :value="opt.value"
+          :checked="current.includes(opt.value)"
+          @change="toggle(opt.value, ($event.target as HTMLInputElement).checked)"
+        />
+        <span>{{ opt.label }}</span>
+      </label>
+    </fieldset>
+  </DcsFormFieldWrapper>
+</template>