@duffcloudservices/site-forms 0.1.1 → 0.1.3

package/src/DcsForm.vue

@@ -1,303 +1,295 @@
-<script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue'
-import type {
-  DcsFormSubmitError,
-  DcsFormSubmitSuccess,
-  PortalFormDefinition,
-  PortalFormField,
-} from './types'
-import { useDcsForm } from './composables/useDcsForm'
-import { submitFormValues } from './composables/useFormSubmission'
-import { warnIfInvalid } from './schema/validate'
-import { loadFormDefinitions } from './loaders/yaml'
-
-import DcsFormText from './fields/DcsFormText.vue'
-import DcsFormTextarea from './fields/DcsFormTextarea.vue'
-import DcsFormSelect from './fields/DcsFormSelect.vue'
-import DcsFormRadio from './fields/DcsFormRadio.vue'
-import DcsFormCheckboxGroup from './fields/DcsFormCheckboxGroup.vue'
-import DcsFormCheckbox from './fields/DcsFormCheckbox.vue'
-import DcsFormDate from './fields/DcsFormDate.vue'
-import DcsFormFile from './fields/DcsFormFile.vue'
-import DcsFormHidden from './fields/DcsFormHidden.vue'
-import DcsFormSection from './fields/DcsFormSection.vue'
-import DcsFormHtmlBlock from './fields/DcsFormHtmlBlock.vue'
-
-interface Props {
-  /** Kebab-case form id; matches `.dcs/forms/<formId>.yaml`. */
-  formId: string
-  /** Site slug used for the submission endpoint path. */
-  siteSlug?: string
-  /** Override the loaded definition (used by the portal preview iframe). */
-  definitionOverride?: PortalFormDefinition
-  /** Override the API base URL; defaults to `VITE_DCS_PUBLIC_API`. */
-  apiBase?: string
-  /** Optional captcha token, attached to the submission payload. */
-  captchaToken?: string
-  /**
-   * Optional override for the YAML modules map. Mostly for tests; in
-   * real apps the build-time `import.meta.glob` call below is used.
-   */
-  formsModules?: Record<string, unknown>
-}
-
-const props = defineProps<Props>()
-
-const emit = defineEmits<{
-  'submit-success': [event: DcsFormSubmitSuccess]
-  'submit-error': [event: DcsFormSubmitError]
-  'validation-error': [errors: Record<string, string | undefined>]
-}>()
-
-// Eager glob — Vite inlines every site form at build time. Customer
-// sites should configure `vite-plugin-yaml` so YAML is parsed to an
-// object; without it the loader falls back to parsing raw strings.
-const eagerFormsModules = (import.meta as unknown as {
-  glob: (
-    pattern: string,
-    opts: { eager: true; import: string; query?: string },
-  ) => Record<string, unknown>
-}).glob('/.dcs/forms/*.yaml', { eager: true, import: 'default' })
-
-const definitions = computed(() =>
-  loadFormDefinitions(props.formsModules ?? eagerFormsModules),
-)
-
-const definition = computed<PortalFormDefinition | null>(() => {
-  if (props.definitionOverride) return props.definitionOverride
-  return definitions.value[props.formId] ?? null
-})
-
-const isDev = !!(import.meta as unknown as { env?: { DEV?: boolean } }).env?.DEV
-
-watch(
-  definition,
-  (def) => {
-    if (def) warnIfInvalid(props.formId, def, isDev)
-  },
-  { immediate: true },
-)
-
-// We always call useDcsForm with *some* definition so hooks render
-// stably; if the form is missing we'll show an error state instead.
-const safeDefinition = computed<PortalFormDefinition>(
-  () =>
-    definition.value ?? {
-      formId: props.formId,
-      title: '',
-      submission: { kind: 'lead' },
-      fields: [],
-    },
-)
-
-const form = useDcsForm({ definition: safeDefinition.value })
-
-// If the resolved definition changes (e.g. preview iframe updates),
-// re-create derived state by resetting.
-watch(
-  () => safeDefinition.value,
-  () => form.reset(),
-)
-
-const apiBase = computed(
-  () =>
-    props.apiBase ??
-    (import.meta as unknown as { env?: { VITE_DCS_PUBLIC_API?: string } }).env
-      ?.VITE_DCS_PUBLIC_API ??
-    '',
-)
-
-const resolvedSiteSlug = computed(
-  () =>
-    props.siteSlug ??
-    (import.meta as unknown as { env?: { VITE_DCS_SITE_SLUG?: string } }).env
-      ?.VITE_DCS_SITE_SLUG ??
-    '',
-)
-
-const submitLabel = computed(
-  () => safeDefinition.value.submitLabel ?? 'Send',
-)
-
-function fieldComponent(field: PortalFormField) {
-  switch (field.type) {
-    case 'text':
-    case 'email':
-    case 'tel':
-      return DcsFormText
-    case 'textarea':
-      return DcsFormTextarea
-    case 'select':
-    case 'multiselect':
-      return DcsFormSelect
-    case 'radio':
-      return DcsFormRadio
-    case 'checkbox-group':
-      return DcsFormCheckboxGroup
-    case 'checkbox':
-      return DcsFormCheckbox
-    case 'date':
-      return DcsFormDate
-    case 'file':
-      return DcsFormFile
-    case 'hidden':
-      return DcsFormHidden
-    case 'section-heading':
-      return DcsFormSection
-    case 'html-block':
-      return DcsFormHtmlBlock
-    default:
-      return DcsFormText
-  }
-}
-
-const formEl = ref<HTMLFormElement | null>(null)
-
-async function onSubmit(e: Event): Promise<void> {
-  e.preventDefault()
-  if (!definition.value) return
-  const ok = form.validateAll()
-  if (!ok) {
-    emit('validation-error', form.errors.value)
-    return
-  }
-  form.submitting.value = true
-  form.submitError.value = null
-  const payload = {
-    formId: props.formId,
-    values: form.collectSubmissionValues(),
-    captchaToken: props.captchaToken,
-  }
-  try {
-    const result = await submitFormValues({
-      apiBase: apiBase.value,
-      siteSlug: resolvedSiteSlug.value,
-      payload,
-    })
-    form.submitted.value = true
-    emit('submit-success', result)
-  } catch (err) {
-    const e2 = err as DcsFormSubmitError
-    form.submitError.value = e2.error?.message ?? 'Submission failed'
-    emit('submit-error', e2)
-  } finally {
-    form.submitting.value = false
-  }
-}
-
-onMounted(() => {
-  if (!definition.value) {
-    // eslint-disable-next-line no-console
-    console.warn(
-      `[@duffcloudservices/site-forms] No form definition found for "${props.formId}". ` +
-        `Expected a YAML at .dcs/forms/${props.formId}.yaml. ` +
-        `In customer-site repos the YAML lives above the Vite root, so the ` +
-        `internal auto-glob will not find it — pass formsModules explicitly: ` +
-        `<DcsForm form-id="${props.formId}" :forms-modules="dcsFormsModules" />. ` +
-        `See @duffcloudservices/site-forms README "Vite setup" section.`,
-    )
-  }
-})
-</script>
-
-<template>
-  <div v-if="!definition" class="dcs-form dcs-form--missing" :data-form-key="formId">
-    <slot name="missing" :form-id="formId">
-      <p>Form &ldquo;{{ formId }}&rdquo; is not configured.</p>
-    </slot>
-  </div>
-
-  <div v-else-if="form.submitted.value" class="dcs-form dcs-form--success" :data-form-key="formId">
-    <slot name="success" :definition="definition">
-      <p>{{ definition.successMessage ?? 'Thanks — we received your message.' }}</p>
-    </slot>
-  </div>
-
-  <form
-    v-else
-    ref="formEl"
-    class="dcs-form"
-    :data-form-key="formId"
-    novalidate
-    @submit="onSubmit"
-  >
-    <slot name="header" :definition="definition">
-      <header class="dcs-form__header">
-        <h2 class="dcs-form__title">{{ definition.title }}</h2>
-        <p v-if="definition.description" class="dcs-form__description">
-          {{ definition.description }}
-        </p>
-      </header>
-    </slot>
-
-    <div v-if="form.steps.value" class="dcs-form__progress" aria-live="polite">
-      <slot
-        name="progress"
-        :current="form.currentStepIndex.value"
-        :total="form.steps.value.length"
-        :step="form.currentStep.value"
-      >
-        <p>
-          Step {{ form.currentStepIndex.value + 1 }} of
-          {{ form.steps.value.length }}
-          <template v-if="form.currentStep.value">
-            — {{ form.currentStep.value.title }}
-          </template>
-        </p>
-      </slot>
-    </div>
-
-    <div class="dcs-form__fields">
-      <component
-        :is="fieldComponent(field)"
-        v-for="field in form.visibleFields.value"
-        :key="field.id"
-        :field="field"
-        :model-value="form.values[field.id]"
-        :error="form.errors.value[field.id]"
-        @update:model-value="(v: unknown) => form.setValue(field.id, v)"
-        @blur="form.touch(field.id)"
-      />
-    </div>
-
-    <div v-if="form.submitError.value" class="dcs-form__submit-error" role="alert">
-      {{ form.submitError.value }}
-    </div>
-
-    <div class="dcs-form__actions">
-      <slot
-        name="actions"
-        :is-first-step="form.isFirstStep.value"
-        :is-last-step="form.isLastStep.value"
-        :submitting="form.submitting.value"
-        :prev="form.prev"
-        :next="form.next"
-      >
-        <button
-          v-if="form.steps.value && !form.isFirstStep.value"
-          type="button"
-          class="dcs-form__btn dcs-form__btn--prev"
-          @click="form.prev()"
-        >
-          Previous
-        </button>
-        <button
-          v-if="form.steps.value && !form.isLastStep.value"
-          type="button"
-          class="dcs-form__btn dcs-form__btn--next"
-          @click="form.next()"
-        >
-          Next
-        </button>
-        <button
-          v-if="!form.steps.value || form.isLastStep.value"
-          type="submit"
-          class="dcs-form__btn dcs-form__btn--submit"
-          :disabled="form.submitting.value"
-        >
-          {{ form.submitting.value ? 'Sending…' : submitLabel }}
-        </button>
-      </slot>
-    </div>
-  </form>
-</template>
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import type {
+  DcsFormSubmitError,
+  DcsFormSubmitSuccess,
+  PortalFormDefinition,
+  PortalFormField,
+} from './types'
+import { useDcsForm } from './composables/useDcsForm'
+import { submitFormValues } from './composables/useFormSubmission'
+import { warnIfInvalid } from './schema/validate'
+import { loadFormDefinitions } from './loaders/yaml'
+
+import DcsFormText from './fields/DcsFormText.vue'
+import DcsFormTextarea from './fields/DcsFormTextarea.vue'
+import DcsFormSelect from './fields/DcsFormSelect.vue'
+import DcsFormRadio from './fields/DcsFormRadio.vue'
+import DcsFormCheckboxGroup from './fields/DcsFormCheckboxGroup.vue'
+import DcsFormCheckbox from './fields/DcsFormCheckbox.vue'
+import DcsFormDate from './fields/DcsFormDate.vue'
+import DcsFormFile from './fields/DcsFormFile.vue'
+import DcsFormHidden from './fields/DcsFormHidden.vue'
+import DcsFormSection from './fields/DcsFormSection.vue'
+import DcsFormHtmlBlock from './fields/DcsFormHtmlBlock.vue'
+
+interface Props {
+  /** Kebab-case form id; matches `.dcs/forms/<formId>.yaml`. */
+  formId: string
+  /** Site slug used for the submission endpoint path. */
+  siteSlug?: string
+  /** Override the loaded definition (used by the portal preview iframe). */
+  definitionOverride?: PortalFormDefinition
+  /** Override the API base URL; defaults to `VITE_DCS_PUBLIC_API`. */
+  apiBase?: string
+  /** Optional captcha token, attached to the submission payload. */
+  captchaToken?: string
+  /**
+   * Optional override for the YAML modules map. Mostly for tests; in
+   * real apps the build-time `import.meta.glob` call below is used.
+   */
+  formsModules?: Record<string, unknown>
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'submit-success': [event: DcsFormSubmitSuccess]
+  'submit-error': [event: DcsFormSubmitError]
+  'validation-error': [errors: Record<string, string | undefined>]
+}>()
+
+// Eager glob — Vite inlines every site form at build time. Customer
+// sites should configure `vite-plugin-yaml` so YAML is parsed to an
+// object; without it the loader falls back to parsing raw strings.
+const eagerFormsModules = (import.meta as unknown as {
+  glob: (
+    pattern: string,
+    opts: { eager: true; import: string; query?: string },
+  ) => Record<string, unknown>
+}).glob('/.dcs/forms/*.yaml', { eager: true, import: 'default' })
+
+const definitions = computed(() =>
+  loadFormDefinitions(props.formsModules ?? eagerFormsModules),
+)
+
+const definition = computed<PortalFormDefinition | null>(() => {
+  if (props.definitionOverride) return props.definitionOverride
+  return definitions.value[props.formId] ?? null
+})
+
+const isDev = !!(import.meta as unknown as { env?: { DEV?: boolean } }).env?.DEV
+
+watch(
+  definition,
+  (def) => {
+    if (def) warnIfInvalid(props.formId, def, isDev)
+  },
+  { immediate: true },
+)
+
+// We always call useDcsForm with *some* definition so hooks render
+// stably; if the form is missing we'll show an error state instead.
+const safeDefinition = computed<PortalFormDefinition>(
+  () =>
+    definition.value ?? {
+      formId: props.formId,
+      submission: { kind: 'lead' },
+      fields: [],
+    },
+)
+
+const form = useDcsForm({ definition: safeDefinition.value })
+
+// If the resolved definition changes (e.g. preview iframe updates),
+// re-create derived state by resetting.
+watch(
+  () => safeDefinition.value,
+  () => form.reset(),
+)
+
+const apiBase = computed(
+  () =>
+    props.apiBase ??
+    (import.meta as unknown as { env?: { VITE_DCS_PUBLIC_API?: string } }).env
+      ?.VITE_DCS_PUBLIC_API ??
+    '',
+)
+
+const resolvedSiteSlug = computed(
+  () =>
+    props.siteSlug ??
+    (import.meta as unknown as { env?: { VITE_DCS_SITE_SLUG?: string } }).env
+      ?.VITE_DCS_SITE_SLUG ??
+    '',
+)
+
+const submitLabel = computed(
+  () => safeDefinition.value.submitLabel ?? 'Send',
+)
+
+function fieldComponent(field: PortalFormField) {
+  switch (field.type) {
+    case 'text':
+    case 'email':
+    case 'tel':
+      return DcsFormText
+    case 'textarea':
+      return DcsFormTextarea
+    case 'select':
+    case 'multiselect':
+      return DcsFormSelect
+    case 'radio':
+      return DcsFormRadio
+    case 'checkbox-group':
+      return DcsFormCheckboxGroup
+    case 'checkbox':
+      return DcsFormCheckbox
+    case 'date':
+      return DcsFormDate
+    case 'file':
+      return DcsFormFile
+    case 'hidden':
+      return DcsFormHidden
+    case 'section-heading':
+      return DcsFormSection
+    case 'html-block':
+      return DcsFormHtmlBlock
+    default:
+      return DcsFormText
+  }
+}
+
+const formEl = ref<HTMLFormElement | null>(null)
+
+async function onSubmit(e: Event): Promise<void> {
+  e.preventDefault()
+  if (!definition.value) return
+  const ok = form.validateAll()
+  if (!ok) {
+    emit('validation-error', form.errors.value)
+    return
+  }
+  form.submitting.value = true
+  form.submitError.value = null
+  const payload = {
+    formId: props.formId,
+    values: form.collectSubmissionValues(),
+    captchaToken: props.captchaToken,
+  }
+  try {
+    const result = await submitFormValues({
+      apiBase: apiBase.value,
+      siteSlug: resolvedSiteSlug.value,
+      payload,
+    })
+    form.submitted.value = true
+    emit('submit-success', result)
+  } catch (err) {
+    const e2 = err as DcsFormSubmitError
+    form.submitError.value = e2.error?.message ?? 'Submission failed'
+    emit('submit-error', e2)
+  } finally {
+    form.submitting.value = false
+  }
+}
+
+onMounted(() => {
+  if (!definition.value) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      `[@duffcloudservices/site-forms] No form definition found for "${props.formId}". ` +
+        `Expected a YAML at .dcs/forms/${props.formId}.yaml. ` +
+        `In customer-site repos the YAML lives above the Vite root, so the ` +
+        `internal auto-glob will not find it — pass formsModules explicitly: ` +
+        `<DcsForm form-id="${props.formId}" :forms-modules="dcsFormsModules" />. ` +
+        `See @duffcloudservices/site-forms README "Vite setup" section.`,
+    )
+  }
+})
+</script>
+
+<template>
+  <div v-if="!definition" class="dcs-form dcs-form--missing" :data-form-key="formId">
+    <slot name="missing" :form-id="formId">
+      <p>Form &ldquo;{{ formId }}&rdquo; is not configured.</p>
+    </slot>
+  </div>
+
+  <div v-else-if="form.submitted.value" class="dcs-form dcs-form--success" :data-form-key="formId">
+    <slot name="success" :definition="definition">
+      <p>{{ definition.successMessage ?? 'Thanks — we received your message.' }}</p>
+    </slot>
+  </div>
+
+  <form
+    v-else
+    ref="formEl"
+    class="dcs-form"
+    :data-form-key="formId"
+    novalidate
+    @submit="onSubmit"
+  >
+    <slot name="header" :definition="definition" />
+
+    <div v-if="form.steps.value" class="dcs-form__progress" aria-live="polite">
+      <slot
+        name="progress"
+        :current="form.currentStepIndex.value"
+        :total="form.steps.value.length"
+        :step="form.currentStep.value"
+      >
+        <p>
+          Step {{ form.currentStepIndex.value + 1 }} of
+          {{ form.steps.value.length }}
+          <template v-if="form.currentStep.value">
+            — {{ form.currentStep.value.title }}
+          </template>
+        </p>
+      </slot>
+    </div>
+
+    <div class="dcs-form__fields">
+      <component
+        :is="fieldComponent(field)"
+        v-for="field in form.visibleFields.value"
+        :key="field.id"
+        :field="field"
+        :model-value="form.values[field.id]"
+        :error="form.errors.value[field.id]"
+        @update:model-value="(v: unknown) => form.setValue(field.id, v)"
+        @blur="form.touch(field.id)"
+      />
+    </div>
+
+    <div v-if="form.submitError.value" class="dcs-form__submit-error" role="alert">
+      {{ form.submitError.value }}
+    </div>
+
+    <div class="dcs-form__actions">
+      <slot
+        name="actions"
+        :is-first-step="form.isFirstStep.value"
+        :is-last-step="form.isLastStep.value"
+        :submitting="form.submitting.value"
+        :prev="form.prev"
+        :next="form.next"
+      >
+        <button
+          v-if="form.steps.value && !form.isFirstStep.value"
+          type="button"
+          class="dcs-form__btn dcs-form__btn--prev"
+          @click="form.prev()"
+        >
+          Previous
+        </button>
+        <button
+          v-if="form.steps.value && !form.isLastStep.value"
+          type="button"
+          class="dcs-form__btn dcs-form__btn--next"
+          @click="form.next()"
+        >
+          Next
+        </button>
+        <button
+          v-if="!form.steps.value || form.isLastStep.value"
+          type="submit"
+          class="dcs-form__btn dcs-form__btn--submit"
+          :disabled="form.submitting.value"
+        >
+          {{ form.submitting.value ? 'Sending…' : submitLabel }}
+        </button>
+      </slot>
+    </div>
+  </form>
+</template>