@duffcloudservices/site-forms 0.1.0

package/src/fields/DcsFormRadio.vue

@@ -0,0 +1,45 @@
+<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 ?? [])
+</script>
+
+<template>
+  <DcsFormFieldWrapper :field="field" :error="error" :input-id="inputId">
+    <fieldset
+      class="dcs-form-radio-group"
+      role="radiogroup"
+      :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-radio"
+      >
+        <input
+          type="radio"
+          :name="field.id"
+          :value="opt.value"
+          :checked="modelValue === opt.value"
+          @change="emit('update:modelValue', opt.value)"
+        />
+        <span>{{ opt.label }}</span>
+      </label>
+    </fieldset>
+  </DcsFormFieldWrapper>
+</template>

package/src/fields/DcsFormSection.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { PortalFormField } from '../types'
+
+defineProps<{
+  field: PortalFormField
+}>()
+</script>
+
+<template>
+  <div
+    class="dcs-form-section"
+    :data-form-field-key="field.id"
+  >
+    <slot>
+      <h3 class="dcs-form-section__heading">{{ field.label }}</h3>
+      <p v-if="field.helpText" class="dcs-form-section__help">{{ field.helpText }}</p>
+    </slot>
+  </div>
+</template>

package/src/fields/DcsFormSelect.vue

@@ -0,0 +1,62 @@
+<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 | string[] | undefined
+  error?: string
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | string[]]
+  blur: []
+}>()
+
+const inputId = computed(() => `field-${props.field.id}`)
+const isMulti = computed(() => props.field.type === 'multiselect')
+const options = computed(() => props.field.options ?? [])
+
+function onChange(e: Event): void {
+  const sel = e.target as HTMLSelectElement
+  if (isMulti.value) {
+    const values: string[] = []
+    for (const opt of Array.from(sel.selectedOptions)) values.push(opt.value)
+    emit('update:modelValue', values)
+  } else {
+    emit('update:modelValue', sel.value)
+  }
+}
+</script>
+
+<template>
+  <DcsFormFieldWrapper :field="field" :error="error" :input-id="inputId">
+    <slot
+      name="input"
+      :id="inputId"
+      :value="modelValue"
+      :options="options"
+      :on-change="onChange"
+    >
+      <select
+        :id="inputId"
+        class="dcs-form-input dcs-form-select"
+        :name="field.id"
+        :required="field.required"
+        :multiple="isMulti"
+        :aria-invalid="!!error"
+        :value="modelValue ?? (isMulti ? [] : '')"
+        @change="onChange"
+        @blur="emit('blur')"
+      >
+        <option v-if="!isMulti" value="" disabled>
+          {{ field.placeholder ?? 'Select…' }}
+        </option>
+        <option v-for="opt in options" :key="opt.value" :value="opt.value">
+          {{ opt.label }}
+        </option>
+      </select>
+    </slot>
+  </DcsFormFieldWrapper>
+</template>

package/src/fields/DcsFormText.vue

@@ -0,0 +1,54 @@
+<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 | number | undefined
+  error?: string
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  blur: []
+}>()
+
+const inputId = computed(() => `field-${props.field.id}`)
+const inputType = computed(() => {
+  switch (props.field.type) {
+    case 'email':
+      return 'email'
+    case 'tel':
+      return 'tel'
+    default:
+      return 'text'
+  }
+})
+</script>
+
+<template>
+  <DcsFormFieldWrapper :field="field" :error="error" :input-id="inputId">
+    <slot
+      name="input"
+      :id="inputId"
+      :value="modelValue"
+      :on-input="(e: Event) => emit('update:modelValue', (e.target as HTMLInputElement).value)"
+      :on-blur="() => emit('blur')"
+    >
+      <input
+        :id="inputId"
+        class="dcs-form-input"
+        :type="inputType"
+        :name="field.id"
+        :value="modelValue ?? ''"
+        :placeholder="field.placeholder"
+        :required="field.required"
+        :aria-invalid="!!error"
+        :aria-describedby="error ? `${inputId}-error` : undefined"
+        @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+        @blur="emit('blur')"
+      />
+    </slot>
+  </DcsFormFieldWrapper>
+</template>

package/src/fields/DcsFormTextarea.vue

@@ -0,0 +1,43 @@
+<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]
+  blur: []
+}>()
+
+const inputId = computed(() => `field-${props.field.id}`)
+</script>
+
+<template>
+  <DcsFormFieldWrapper :field="field" :error="error" :input-id="inputId">
+    <slot
+      name="input"
+      :id="inputId"
+      :value="modelValue"
+      :on-input="(e: Event) => emit('update:modelValue', (e.target as HTMLTextAreaElement).value)"
+      :on-blur="() => emit('blur')"
+    >
+      <textarea
+        :id="inputId"
+        class="dcs-form-input dcs-form-textarea"
+        :name="field.id"
+        :placeholder="field.placeholder"
+        :required="field.required"
+        :aria-invalid="!!error"
+        rows="5"
+        :value="modelValue ?? ''"
+        @input="emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
+        @blur="emit('blur')"
+      />
+    </slot>
+  </DcsFormFieldWrapper>
+</template>

package/src/index.ts

@@ -0,0 +1,51 @@
+export { default as DcsForm } from './DcsForm.vue'
+export { default as DcsFormText } from './fields/DcsFormText.vue'
+export { default as DcsFormTextarea } from './fields/DcsFormTextarea.vue'
+export { default as DcsFormSelect } from './fields/DcsFormSelect.vue'
+export { default as DcsFormRadio } from './fields/DcsFormRadio.vue'
+export { default as DcsFormCheckboxGroup } from './fields/DcsFormCheckboxGroup.vue'
+export { default as DcsFormCheckbox } from './fields/DcsFormCheckbox.vue'
+export { default as DcsFormDate } from './fields/DcsFormDate.vue'
+export { default as DcsFormFile } from './fields/DcsFormFile.vue'
+export { default as DcsFormHidden } from './fields/DcsFormHidden.vue'
+export { default as DcsFormSection } from './fields/DcsFormSection.vue'
+export { default as DcsFormHtmlBlock } from './fields/DcsFormHtmlBlock.vue'
+export { default as DcsFormFieldWrapper } from './fields/DcsFormFieldWrapper.vue'
+
+export { useDcsForm } from './composables/useDcsForm'
+export type { UseDcsFormOptions, UseDcsFormReturn } from './composables/useDcsForm'
+export {
+  validateField,
+  validateForm,
+  isFieldVisible,
+  hasErrors,
+} from './composables/useFormValidation'
+export { submitFormValues } from './composables/useFormSubmission'
+export type { SubmitOptions } from './composables/useFormSubmission'
+
+export { loadFormDefinitions, parseFormYaml } from './loaders/yaml'
+export {
+  validateFormDefinition,
+  warnIfInvalid,
+} from './schema/validate'
+export type { SchemaValidationResult } from './schema/validate'
+
+export type {
+  DcsFormSubmitPayload,
+  DcsFormSubmitSuccess,
+  DcsFormSubmitError,
+  FormErrors,
+  FormValues,
+  PortalFormDefinition,
+  PortalFormField,
+  PortalFormFieldType,
+  PortalFormFieldOption,
+  PortalFormFieldValidation,
+  PortalFormFieldVisibleIf,
+  PortalFormFieldWidth,
+  PortalFormStep,
+  PortalFormSubmissionConfig,
+  PortalFormSubmissionLeadConfig,
+  PortalFormSubmissionEmailConfig,
+  PortalFormSubmissionWebhookConfig,
+} from './types'

package/src/loaders/yaml.ts

@@ -0,0 +1,51 @@
+import yaml from 'js-yaml'
+import type { PortalFormDefinition } from '../types'
+
+/**
+ * Eagerly load every form YAML under `/.dcs/forms/*.yaml` from the
+ * consuming Vite app and parse them into PortalFormDefinition objects.
+ *
+ * Vite returns the modules as raw strings (when using `?raw` or the
+ * default text loader for unknown extensions) or as parsed objects
+ * (when `vite-plugin-yaml` is installed). This helper handles both.
+ */
+export function loadFormDefinitions(
+  modules: Record<string, unknown>,
+): Record<string, PortalFormDefinition> {
+  const out: Record<string, PortalFormDefinition> = {}
+  for (const [path, mod] of Object.entries(modules)) {
+    const formId = extractFormId(path)
+    const def = parseModule(mod)
+    if (def) {
+      out[def.formId ?? formId] = def
+    }
+  }
+  return out
+}
+
+function extractFormId(path: string): string {
+  const file = path.split('/').pop() ?? path
+  return file.replace(/\.ya?ml$/i, '')
+}
+
+function parseModule(mod: unknown): PortalFormDefinition | null {
+  if (!mod) return null
+  if (typeof mod === 'string') {
+    return yaml.load(mod) as PortalFormDefinition
+  }
+  if (typeof mod === 'object') {
+    // vite-plugin-yaml returns parsed objects, possibly wrapped in
+    // `{ default: ... }` when imported via `import: 'default'`.
+    const maybeDefault = (mod as { default?: unknown }).default
+    if (maybeDefault && typeof maybeDefault === 'object') {
+      return maybeDefault as PortalFormDefinition
+    }
+    return mod as PortalFormDefinition
+  }
+  return null
+}
+
+/** Parse a single raw YAML string into a PortalFormDefinition. */
+export function parseFormYaml(raw: string): PortalFormDefinition {
+  return yaml.load(raw) as PortalFormDefinition
+}