@duffcloudservices/site-forms 0.1.1 → 0.1.3

package/src/__tests__/visible-if.test.ts

@@ -1,111 +1,110 @@
-import { describe, it, expect, vi } from 'vitest'
-import { mount, flushPromises } from '@vue/test-utils'
-import DcsForm from '../DcsForm.vue'
-import type { PortalFormDefinition } from '../types'
-
-const def: PortalFormDefinition = {
-  formId: 'gated',
-  title: 'Gated',
-  submission: { kind: 'lead' },
-  fields: [
-    {
-      id: 'kind',
-      type: 'radio',
-      label: 'Kind',
-      required: true,
-      options: [
-        { value: 'a', label: 'A' },
-        { value: 'b', label: 'B' },
-      ],
-    },
-    {
-      id: 'detail',
-      type: 'text',
-      label: 'Detail',
-      required: true,
-      visibleIf: { fieldId: 'kind', equals: 'b' },
-    },
-  ],
-}
-
-describe('visibleIf', () => {
-  it('skips validation and submission for hidden gated fields', async () => {
-    const fetchMock = vi.fn().mockResolvedValue({
-      ok: true,
-      status: 200,
-      json: async () => ({ id: '1' }),
-    })
-    // Stub global fetch
-    const originalFetch = globalThis.fetch
-    ;(globalThis as unknown as { fetch: typeof fetch }).fetch =
-      fetchMock as unknown as typeof fetch
-
-    const wrapper = mount(DcsForm, {
-      props: {
-        formId: 'gated',
-        siteSlug: 'site-x',
-        definitionOverride: def,
-        apiBase: 'https://api.test',
-      },
-    })
-
-    // detail field is hidden initially
-    expect(wrapper.find('[data-form-field-key="detail"]').exists()).toBe(false)
-
-    // Choose kind=a (does not reveal detail)
-    await wrapper.find('input[type="radio"][value="a"]').setChecked(true)
-    await wrapper.find('form').trigger('submit')
-    await flushPromises()
-
-    expect(fetchMock).toHaveBeenCalledTimes(1)
-    const [, init] = fetchMock.mock.calls[0]
-    const body = JSON.parse((init as RequestInit).body as string)
-    expect(body.values).toEqual({ kind: 'a' })
-    expect('detail' in body.values).toBe(false)
-
-    ;(globalThis as unknown as { fetch: typeof fetch }).fetch = originalFetch
-  })
-
-  it('validates and submits the gated field once visible', async () => {
-    const fetchMock = vi.fn().mockResolvedValue({
-      ok: true,
-      status: 200,
-      json: async () => ({}),
-    })
-    const originalFetch = globalThis.fetch
-    ;(globalThis as unknown as { fetch: typeof fetch }).fetch =
-      fetchMock as unknown as typeof fetch
-
-    const wrapper = mount(DcsForm, {
-      props: {
-        formId: 'gated',
-        siteSlug: 'site-x',
-        definitionOverride: def,
-        apiBase: 'https://api.test',
-      },
-    })
-    await wrapper.find('input[type="radio"][value="b"]').setChecked(true)
-    // detail should now be visible and required
-    expect(wrapper.find('[data-form-field-key="detail"]').exists()).toBe(true)
-
-    await wrapper.find('form').trigger('submit')
-    await flushPromises()
-    expect(fetchMock).not.toHaveBeenCalled()
-    expect(wrapper.text()).toContain('Detail is required')
-
-    await wrapper.find('[data-form-field-key="detail"] input').setValue('xyz')
-    await wrapper.find('form').trigger('submit')
-    await flushPromises()
-    expect(fetchMock).toHaveBeenCalledTimes(1)
-    const [url, init] = fetchMock.mock.calls[0]
-    expect(url).toBe('https://api.test/public/sites/site-x/form-submissions')
-    const body = JSON.parse((init as RequestInit).body as string)
-    expect(body).toEqual({
-      formId: 'gated',
-      values: { kind: 'b', detail: 'xyz' },
-      captchaToken: undefined,
-    })
-
-    ;(globalThis as unknown as { fetch: typeof fetch }).fetch = originalFetch
-  })
-})
+import { describe, it, expect, vi } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import DcsForm from '../DcsForm.vue'
+import type { PortalFormDefinition } from '../types'
+
+const def: PortalFormDefinition = {
+  formId: 'gated',
+  submission: { kind: 'lead' },
+  fields: [
+    {
+      id: 'kind',
+      type: 'radio',
+      label: 'Kind',
+      required: true,
+      options: [
+        { value: 'a', label: 'A' },
+        { value: 'b', label: 'B' },
+      ],
+    },
+    {
+      id: 'detail',
+      type: 'text',
+      label: 'Detail',
+      required: true,
+      visibleIf: { fieldId: 'kind', equals: 'b' },
+    },
+  ],
+}
+
+describe('visibleIf', () => {
+  it('skips validation and submission for hidden gated fields', async () => {
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      status: 200,
+      json: async () => ({ id: '1' }),
+    })
+    // Stub global fetch
+    const originalFetch = globalThis.fetch
+    ;(globalThis as unknown as { fetch: typeof fetch }).fetch =
+      fetchMock as unknown as typeof fetch
+
+    const wrapper = mount(DcsForm, {
+      props: {
+        formId: 'gated',
+        siteSlug: 'site-x',
+        definitionOverride: def,
+        apiBase: 'https://api.test',
+      },
+    })
+
+    // detail field is hidden initially
+    expect(wrapper.find('[data-form-field-key="detail"]').exists()).toBe(false)
+
+    // Choose kind=a (does not reveal detail)
+    await wrapper.find('input[type="radio"][value="a"]').setChecked(true)
+    await wrapper.find('form').trigger('submit')
+    await flushPromises()
+
+    expect(fetchMock).toHaveBeenCalledTimes(1)
+    const [, init] = fetchMock.mock.calls[0]
+    const body = JSON.parse((init as RequestInit).body as string)
+    expect(body.values).toEqual({ kind: 'a' })
+    expect('detail' in body.values).toBe(false)
+
+    ;(globalThis as unknown as { fetch: typeof fetch }).fetch = originalFetch
+  })
+
+  it('validates and submits the gated field once visible', async () => {
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      status: 200,
+      json: async () => ({}),
+    })
+    const originalFetch = globalThis.fetch
+    ;(globalThis as unknown as { fetch: typeof fetch }).fetch =
+      fetchMock as unknown as typeof fetch
+
+    const wrapper = mount(DcsForm, {
+      props: {
+        formId: 'gated',
+        siteSlug: 'site-x',
+        definitionOverride: def,
+        apiBase: 'https://api.test',
+      },
+    })
+    await wrapper.find('input[type="radio"][value="b"]').setChecked(true)
+    // detail should now be visible and required
+    expect(wrapper.find('[data-form-field-key="detail"]').exists()).toBe(true)
+
+    await wrapper.find('form').trigger('submit')
+    await flushPromises()
+    expect(fetchMock).not.toHaveBeenCalled()
+    expect(wrapper.text()).toContain('Detail is required')
+
+    await wrapper.find('[data-form-field-key="detail"] input').setValue('xyz')
+    await wrapper.find('form').trigger('submit')
+    await flushPromises()
+    expect(fetchMock).toHaveBeenCalledTimes(1)
+    const [url, init] = fetchMock.mock.calls[0]
+    expect(url).toBe('https://api.test/sites/site-x/forms/gated/submissions')
+    const body = JSON.parse((init as RequestInit).body as string)
+    expect(body).toEqual({
+      formId: 'gated',
+      values: { kind: 'b', detail: 'xyz' },
+      captchaToken: undefined,
+    })
+
+    ;(globalThis as unknown as { fetch: typeof fetch }).fetch = originalFetch
+  })
+})

package/src/composables/useDcsForm.ts

@@ -1,201 +1,201 @@
-import { computed, reactive, ref, type ComputedRef, type Ref } from 'vue'
-import type {
-  PortalFormDefinition,
-  PortalFormField,
-  PortalFormStep,
-  FormErrors,
-  FormValues,
-} from '../types'
-import {
-  hasErrors,
-  isFieldVisible,
-  validateForm,
-} from './useFormValidation'
-
-export interface UseDcsFormOptions {
-  definition: PortalFormDefinition
-}
-
-export interface UseDcsFormReturn {
-  values: FormValues
-  errors: Ref<FormErrors>
-  touched: Ref<Record<string, boolean>>
-  submitting: Ref<boolean>
-  submitted: Ref<boolean>
-  submitError: Ref<string | null>
-  /** All fields, with layout-only types preserved. */
-  fields: ComputedRef<PortalFormField[]>
-  /** Steps if multi-step, else null. */
-  steps: ComputedRef<PortalFormStep[] | null>
-  currentStepIndex: Ref<number>
-  currentStep: ComputedRef<PortalFormStep | null>
-  currentStepFields: ComputedRef<PortalFormField[]>
-  isFirstStep: ComputedRef<boolean>
-  isLastStep: ComputedRef<boolean>
-  visibleFields: ComputedRef<PortalFormField[]>
-  /** Sets a field value and clears that field's error. */
-  setValue: (id: string, value: unknown) => void
-  /** Marks a field as touched + revalidates only that field's row. */
-  touch: (id: string) => void
-  /** Validates the current step (multi-step) or the entire form. */
-  validateCurrentScope: () => boolean
-  validateAll: () => boolean
-  next: () => boolean
-  prev: () => void
-  reset: () => void
-  /** Returns the values that should actually be submitted (visible only). */
-  collectSubmissionValues: () => FormValues
-}
-
-function defaultsFor(def: PortalFormDefinition): FormValues {
-  const out: FormValues = {}
-  for (const f of def.fields) {
-    if (f.defaultValue !== undefined) {
-      out[f.id] = f.defaultValue as unknown
-    } else if (f.type === 'checkbox') {
-      out[f.id] = false
-    } else if (f.type === 'multiselect' || f.type === 'checkbox-group') {
-      out[f.id] = [] as string[]
-    } else {
-      out[f.id] = ''
-    }
-  }
-  return out
-}
-
-export function useDcsForm(opts: UseDcsFormOptions): UseDcsFormReturn {
-  const { definition } = opts
-  const values = reactive<FormValues>(defaultsFor(definition))
-  const errors = ref<FormErrors>({})
-  const touched = ref<Record<string, boolean>>({})
-  const submitting = ref(false)
-  const submitted = ref(false)
-  const submitError = ref<string | null>(null)
-  const currentStepIndex = ref(0)
-
-  const fields = computed(() => definition.fields)
-  const steps = computed<PortalFormStep[] | null>(() =>
-    definition.steps && definition.steps.length > 0 ? definition.steps : null,
-  )
-  const currentStep = computed<PortalFormStep | null>(() => {
-    const s = steps.value
-    return s ? (s[currentStepIndex.value] ?? null) : null
-  })
-  const currentStepFields = computed<PortalFormField[]>(() => {
-    const step = currentStep.value
-    if (!step) return definition.fields
-    const ids = new Set(step.fieldIds)
-    return definition.fields.filter((f) => ids.has(f.id))
-  })
-  const isFirstStep = computed(() => currentStepIndex.value === 0)
-  const isLastStep = computed(() => {
-    const s = steps.value
-    return !s || currentStepIndex.value >= s.length - 1
-  })
-  const visibleFields = computed(() =>
-    currentStepFields.value.filter((f) => isFieldVisible(f, values as FormValues)),
-  )
-
-  function setValue(id: string, value: unknown): void {
-    ;(values as FormValues)[id] = value
-    if (errors.value[id]) {
-      errors.value = { ...errors.value, [id]: undefined }
-    }
-  }
-
-  function touch(id: string): void {
-    touched.value = { ...touched.value, [id]: true }
-  }
-
-  function validateScope(scopeFieldIds?: string[]): boolean {
-    const next = validateForm(definition, values as FormValues, scopeFieldIds)
-    // Merge with existing errors but only for the validated scope so we
-    // don't wipe out errors from other steps.
-    if (scopeFieldIds) {
-      const merged = { ...errors.value }
-      for (const id of scopeFieldIds) {
-        merged[id] = next[id]
-      }
-      errors.value = merged
-    } else {
-      errors.value = next
-    }
-    return !hasErrors(errors.value)
-  }
-
-  function validateCurrentScope(): boolean {
-    const scope = currentStep.value?.fieldIds
-    return validateScope(scope)
-  }
-
-  function validateAll(): boolean {
-    return validateScope()
-  }
-
-  function next(): boolean {
-    if (!steps.value) return false
-    if (!validateCurrentScope()) return false
-    if (currentStepIndex.value < steps.value.length - 1) {
-      currentStepIndex.value++
-      return true
-    }
-    return false
-  }
-
-  function prev(): void {
-    if (currentStepIndex.value > 0) currentStepIndex.value--
-  }
-
-  function reset(): void {
-    const fresh = defaultsFor(definition)
-    for (const k of Object.keys(values as object)) {
-      delete (values as FormValues)[k]
-    }
-    Object.assign(values as FormValues, fresh)
-    errors.value = {}
-    touched.value = {}
-    submitting.value = false
-    submitted.value = false
-    submitError.value = null
-    currentStepIndex.value = 0
-  }
-
-  function collectSubmissionValues(): FormValues {
-    const out: FormValues = {}
-    for (const f of definition.fields) {
-      if (
-        f.type === 'section-heading' ||
-        f.type === 'html-block'
-      )
-        continue
-      if (!isFieldVisible(f, values as FormValues)) continue
-      out[f.id] = (values as FormValues)[f.id]
-    }
-    return out
-  }
-
-  return {
-    values: values as FormValues,
-    errors,
-    touched,
-    submitting,
-    submitted,
-    submitError,
-    fields,
-    steps,
-    currentStepIndex,
-    currentStep,
-    currentStepFields,
-    isFirstStep,
-    isLastStep,
-    visibleFields,
-    setValue,
-    touch,
-    validateCurrentScope,
-    validateAll,
-    next,
-    prev,
-    reset,
-    collectSubmissionValues,
-  }
-}
+import { computed, reactive, ref, type ComputedRef, type Ref } from 'vue'
+import type {
+  PortalFormDefinition,
+  PortalFormField,
+  PortalFormStep,
+  FormErrors,
+  FormValues,
+} from '../types'
+import {
+  hasErrors,
+  isFieldVisible,
+  validateForm,
+} from './useFormValidation'
+
+export interface UseDcsFormOptions {
+  definition: PortalFormDefinition
+}
+
+export interface UseDcsFormReturn {
+  values: FormValues
+  errors: Ref<FormErrors>
+  touched: Ref<Record<string, boolean>>
+  submitting: Ref<boolean>
+  submitted: Ref<boolean>
+  submitError: Ref<string | null>
+  /** All fields, with layout-only types preserved. */
+  fields: ComputedRef<PortalFormField[]>
+  /** Steps if multi-step, else null. */
+  steps: ComputedRef<PortalFormStep[] | null>
+  currentStepIndex: Ref<number>
+  currentStep: ComputedRef<PortalFormStep | null>
+  currentStepFields: ComputedRef<PortalFormField[]>
+  isFirstStep: ComputedRef<boolean>
+  isLastStep: ComputedRef<boolean>
+  visibleFields: ComputedRef<PortalFormField[]>
+  /** Sets a field value and clears that field's error. */
+  setValue: (id: string, value: unknown) => void
+  /** Marks a field as touched + revalidates only that field's row. */
+  touch: (id: string) => void
+  /** Validates the current step (multi-step) or the entire form. */
+  validateCurrentScope: () => boolean
+  validateAll: () => boolean
+  next: () => boolean
+  prev: () => void
+  reset: () => void
+  /** Returns the values that should actually be submitted (visible only). */
+  collectSubmissionValues: () => FormValues
+}
+
+function defaultsFor(def: PortalFormDefinition): FormValues {
+  const out: FormValues = {}
+  for (const f of def.fields) {
+    if (f.defaultValue !== undefined) {
+      out[f.id] = f.defaultValue as unknown
+    } else if (f.type === 'checkbox') {
+      out[f.id] = false
+    } else if (f.type === 'multiselect' || f.type === 'checkbox-group') {
+      out[f.id] = [] as string[]
+    } else {
+      out[f.id] = ''
+    }
+  }
+  return out
+}
+
+export function useDcsForm(opts: UseDcsFormOptions): UseDcsFormReturn {
+  const { definition } = opts
+  const values = reactive<FormValues>(defaultsFor(definition))
+  const errors = ref<FormErrors>({})
+  const touched = ref<Record<string, boolean>>({})
+  const submitting = ref(false)
+  const submitted = ref(false)
+  const submitError = ref<string | null>(null)
+  const currentStepIndex = ref(0)
+
+  const fields = computed(() => definition.fields)
+  const steps = computed<PortalFormStep[] | null>(() =>
+    definition.steps && definition.steps.length > 0 ? definition.steps : null,
+  )
+  const currentStep = computed<PortalFormStep | null>(() => {
+    const s = steps.value
+    return s ? (s[currentStepIndex.value] ?? null) : null
+  })
+  const currentStepFields = computed<PortalFormField[]>(() => {
+    const step = currentStep.value
+    if (!step) return definition.fields
+    const ids = new Set(step.fieldIds)
+    return definition.fields.filter((f) => ids.has(f.id))
+  })
+  const isFirstStep = computed(() => currentStepIndex.value === 0)
+  const isLastStep = computed(() => {
+    const s = steps.value
+    return !s || currentStepIndex.value >= s.length - 1
+  })
+  const visibleFields = computed(() =>
+    currentStepFields.value.filter((f) => isFieldVisible(f, values as FormValues)),
+  )
+
+  function setValue(id: string, value: unknown): void {
+    ;(values as FormValues)[id] = value
+    if (errors.value[id]) {
+      errors.value = { ...errors.value, [id]: undefined }
+    }
+  }
+
+  function touch(id: string): void {
+    touched.value = { ...touched.value, [id]: true }
+  }
+
+  function validateScope(scopeFieldIds?: string[]): boolean {
+    const next = validateForm(definition, values as FormValues, scopeFieldIds)
+    // Merge with existing errors but only for the validated scope so we
+    // don't wipe out errors from other steps.
+    if (scopeFieldIds) {
+      const merged = { ...errors.value }
+      for (const id of scopeFieldIds) {
+        merged[id] = next[id]
+      }
+      errors.value = merged
+    } else {
+      errors.value = next
+    }
+    return !hasErrors(errors.value)
+  }
+
+  function validateCurrentScope(): boolean {
+    const scope = currentStep.value?.fieldIds
+    return validateScope(scope)
+  }
+
+  function validateAll(): boolean {
+    return validateScope()
+  }
+
+  function next(): boolean {
+    if (!steps.value) return false
+    if (!validateCurrentScope()) return false
+    if (currentStepIndex.value < steps.value.length - 1) {
+      currentStepIndex.value++
+      return true
+    }
+    return false
+  }
+
+  function prev(): void {
+    if (currentStepIndex.value > 0) currentStepIndex.value--
+  }
+
+  function reset(): void {
+    const fresh = defaultsFor(definition)
+    for (const k of Object.keys(values as object)) {
+      delete (values as FormValues)[k]
+    }
+    Object.assign(values as FormValues, fresh)
+    errors.value = {}
+    touched.value = {}
+    submitting.value = false
+    submitted.value = false
+    submitError.value = null
+    currentStepIndex.value = 0
+  }
+
+  function collectSubmissionValues(): FormValues {
+    const out: FormValues = {}
+    for (const f of definition.fields) {
+      if (
+        f.type === 'section-heading' ||
+        f.type === 'html-block'
+      )
+        continue
+      if (!isFieldVisible(f, values as FormValues)) continue
+      out[f.id] = (values as FormValues)[f.id]
+    }
+    return out
+  }
+
+  return {
+    values: values as FormValues,
+    errors,
+    touched,
+    submitting,
+    submitted,
+    submitError,
+    fields,
+    steps,
+    currentStepIndex,
+    currentStep,
+    currentStepFields,
+    isFirstStep,
+    isLastStep,
+    visibleFields,
+    setValue,
+    touch,
+    validateCurrentScope,
+    validateAll,
+    next,
+    prev,
+    reset,
+    collectSubmissionValues,
+  }
+}