@duffcloudservices/site-forms 0.1.0 → 0.1.2

package/src/fields/DcsFormTextarea.vue

@@ -1,43 +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>
+<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

@@ -1,51 +1,53 @@
-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'
+import './style.css'
+
+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

@@ -1,51 +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
-}
+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
+}

package/src/schema/validate.ts

@@ -1,58 +1,58 @@
-/**
- * Validates a loaded form definition against the form-definition JSON
- * Schema emitted by `@dcs/contracts`. Dev-only — failures are logged
- * via `console.warn` rather than thrown so a malformed YAML never
- * takes down a customer site in production.
- *
- * Schema is bundled as a snapshot of
- * `contracts/dist/form-definition.schema.json` to avoid a runtime
- * dependency on the contracts build output.
- */
-import Ajv, { type ErrorObject, type ValidateFunction } from 'ajv'
-import addFormats from 'ajv-formats'
-import schema from './form-definition.schema.json'
-import type { PortalFormDefinition } from '../types'
-
-let validator: ValidateFunction | null = null
-
-function getValidator(): ValidateFunction {
-  if (validator) return validator
-  const ajv = new Ajv({
-    allErrors: true,
-    strict: false,
-    discriminator: false,
-  })
-  addFormats(ajv)
-  validator = ajv.compile(schema as object)
-  return validator
-}
-
-export interface SchemaValidationResult {
-  valid: boolean
-  errors: ErrorObject[]
-}
-
-export function validateFormDefinition(
-  def: PortalFormDefinition | unknown,
-): SchemaValidationResult {
-  const v = getValidator()
-  const valid = v(def) as boolean
-  return { valid, errors: valid ? [] : (v.errors ?? []) }
-}
-
-/** Logs a `console.warn` when invalid, but only when `import.meta.env.DEV`. */
-export function warnIfInvalid(
-  formId: string,
-  def: PortalFormDefinition | unknown,
-  isDev: boolean,
-): SchemaValidationResult {
-  const result = validateFormDefinition(def)
-  if (!result.valid && isDev) {
-    // eslint-disable-next-line no-console
-    console.warn(
-      `[@duffcloudservices/site-forms] Form "${formId}" failed schema validation:`,
-      result.errors,
-    )
-  }
-  return result
-}
+/**
+ * Validates a loaded form definition against the form-definition JSON
+ * Schema emitted by `@dcs/contracts`. Dev-only — failures are logged
+ * via `console.warn` rather than thrown so a malformed YAML never
+ * takes down a customer site in production.
+ *
+ * Schema is bundled as a snapshot of
+ * `contracts/dist/form-definition.schema.json` to avoid a runtime
+ * dependency on the contracts build output.
+ */
+import Ajv, { type ErrorObject, type ValidateFunction } from 'ajv'
+import addFormats from 'ajv-formats'
+import schema from './form-definition.schema.json'
+import type { PortalFormDefinition } from '../types'
+
+let validator: ValidateFunction | null = null
+
+function getValidator(): ValidateFunction {
+  if (validator) return validator
+  const ajv = new Ajv({
+    allErrors: true,
+    strict: false,
+    discriminator: false,
+  })
+  addFormats(ajv)
+  validator = ajv.compile(schema as object)
+  return validator
+}
+
+export interface SchemaValidationResult {
+  valid: boolean
+  errors: ErrorObject[]
+}
+
+export function validateFormDefinition(
+  def: PortalFormDefinition | unknown,
+): SchemaValidationResult {
+  const v = getValidator()
+  const valid = v(def) as boolean
+  return { valid, errors: valid ? [] : (v.errors ?? []) }
+}
+
+/** Logs a `console.warn` when invalid, but only when `import.meta.env.DEV`. */
+export function warnIfInvalid(
+  formId: string,
+  def: PortalFormDefinition | unknown,
+  isDev: boolean,
+): SchemaValidationResult {
+  const result = validateFormDefinition(def)
+  if (!result.valid && isDev) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      `[@duffcloudservices/site-forms] Form "${formId}" failed schema validation:`,
+      result.errors,
+    )
+  }
+  return result
+}

package/src/shims.d.ts

@@ -1,10 +1,10 @@
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, unknown>
-  export default component
-}
-
-declare module '*.json' {
-  const value: unknown
-  export default value
-}
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, unknown>
+  export default component
+}
+
+declare module '*.json' {
+  const value: unknown
+  export default value
+}

package/src/style.css

@@ -0,0 +1,221 @@
+.dcs-form {
+  display: grid;
+  gap: 1.5rem;
+  width: 100%;
+}
+
+.dcs-form__header {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.dcs-form__title {
+  margin: 0;
+  font-size: clamp(1.875rem, 2vw + 1.25rem, 2.5rem);
+  font-weight: 700;
+  line-height: 1.1;
+}
+
+.dcs-form__description {
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.6;
+}
+
+.dcs-form__progress {
+  font-size: 0.95rem;
+}
+
+.dcs-form__fields {
+  display: grid;
+  gap: 1rem;
+}
+
+.dcs-form-field {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.dcs-form-field__label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.2rem;
+  font-size: 0.95rem;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.dcs-form-field__required {
+  font-weight: 700;
+}
+
+.dcs-form-input {
+  width: 100%;
+  min-height: 3rem;
+  padding: 0.75rem 0.95rem;
+  font: inherit;
+  line-height: 1.5;
+  color: inherit;
+  background: rgba(255, 255, 255, 0.96);
+  border: 1px solid rgba(15, 23, 42, 0.16);
+  border-radius: 0.875rem;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease,
+    background-color 0.15s ease;
+}
+
+.dcs-form-input::placeholder {
+  color: rgba(71, 85, 105, 0.75);
+}
+
+.dcs-form-input:hover {
+  border-color: rgba(37, 99, 235, 0.38);
+}
+
+.dcs-form-input:focus,
+.dcs-form-input:focus-visible {
+  outline: none;
+  border-color: rgba(37, 99, 235, 0.75);
+  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18);
+}
+
+.dcs-form-input[aria-invalid='true'] {
+  border-color: rgba(220, 38, 38, 0.72);
+  box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.18);
+}
+
+.dcs-form-textarea {
+  min-height: 10rem;
+  resize: vertical;
+}
+
+.dcs-form-select {
+  appearance: none;
+}
+
+.dcs-form-field__help,
+.dcs-form-field__error,
+.dcs-form__submit-error {
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.dcs-form-field__error,
+.dcs-form__submit-error {
+  color: #b91c1c;
+}
+
+.dcs-form__submit-error {
+  padding: 0.85rem 1rem;
+  border: 1px solid rgba(220, 38, 38, 0.28);
+  border-radius: 0.875rem;
+  background: rgba(254, 242, 242, 0.92);
+}
+
+.dcs-form__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.dcs-form__btn {
+  appearance: none;
+  border: 0;
+  border-radius: 9999px;
+  padding: 0.85rem 1.5rem;
+  font: inherit;
+  font-weight: 700;
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    transform 0.15s ease,
+    box-shadow 0.15s ease,
+    opacity 0.15s ease;
+}
+
+.dcs-form__btn:hover {
+  transform: translateY(-1px);
+}
+
+.dcs-form__btn:focus,
+.dcs-form__btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.22);
+}
+
+.dcs-form__btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.dcs-form__btn--submit,
+.dcs-form__btn--next {
+  color: #fff;
+  background: linear-gradient(135deg, #1d4ed8, #2563eb);
+  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.22);
+}
+
+.dcs-form__btn--prev {
+  color: #0f172a;
+  background: rgba(255, 255, 255, 0.92);
+  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
+}
+
+.dcs-form-checkbox-group,
+.dcs-form-radio-group {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.dcs-form-checkbox,
+.dcs-form-radio,
+.dcs-form-checkbox-single {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.65rem;
+}
+
+.dcs-form-checkbox-single input,
+.dcs-form-checkbox input,
+.dcs-form-radio input {
+  margin-top: 0.2rem;
+}
+
+.dcs-form-section {
+  display: grid;
+  gap: 0.4rem;
+}
+
+.dcs-form-section__heading,
+.dcs-form-section__help,
+.dcs-form--missing p,
+.dcs-form--success p {
+  margin: 0;
+}
+
+@media (min-width: 768px) {
+  .dcs-form__fields {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1.25rem;
+  }
+
+  .dcs-form-field--width-half {
+    grid-column: span 1;
+  }
+
+  .dcs-form-field--width-full,
+  .dcs-form-field--width-auto,
+  .dcs-form-field--textarea,
+  .dcs-form-field--checkbox,
+  .dcs-form-field--checkbox-group,
+  .dcs-form-field--radio,
+  .dcs-form-field--section-heading,
+  .dcs-form-field--html-block,
+  .dcs-form-field--file {
+    grid-column: 1 / -1;
+  }
+}