@duffcloudservices/site-forms 0.1.1 → 0.1.2

package/src/fields/DcsFormDate.vue

@@ -1,34 +1,34 @@
-<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">
-    <input
-      :id="inputId"
-      class="dcs-form-input dcs-form-date"
-      type="date"
-      :name="field.id"
-      :required="field.required"
-      :aria-invalid="!!error"
-      :value="modelValue ?? ''"
-      @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
-      @blur="emit('blur')"
-    />
-  </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">
+    <input
+      :id="inputId"
+      class="dcs-form-input dcs-form-date"
+      type="date"
+      :name="field.id"
+      :required="field.required"
+      :aria-invalid="!!error"
+      :value="modelValue ?? ''"
+      @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+      @blur="emit('blur')"
+    />
+  </DcsFormFieldWrapper>
+</template>

package/src/fields/DcsFormFieldWrapper.vue

@@ -1,39 +1,39 @@
-<script setup lang="ts">
-import type { PortalFormField } from '../types'
-
-defineProps<{
-  field: PortalFormField
-  error?: string
-  /** Optional id to use for the input — wrappers use it for label `for=`. */
-  inputId?: string
-}>()
-</script>
-
-<template>
-  <div
-    class="dcs-form-field"
-    :class="[`dcs-form-field--${field.type}`, `dcs-form-field--width-${field.width ?? 'full'}`]"
-    :data-form-field-key="field.id"
-  >
-    <slot name="label">
-      <label
-        v-if="field.type !== 'checkbox' && field.type !== 'hidden' && field.type !== 'section-heading' && field.type !== 'html-block'"
-        :for="inputId ?? `field-${field.id}`"
-        class="dcs-form-field__label"
-      >
-        {{ field.label }}
-        <span v-if="field.required" aria-hidden="true" class="dcs-form-field__required">*</span>
-      </label>
-    </slot>
-
-    <slot />
-
-    <slot name="help">
-      <p v-if="field.helpText" class="dcs-form-field__help">{{ field.helpText }}</p>
-    </slot>
-
-    <slot name="error">
-      <p v-if="error" class="dcs-form-field__error" role="alert">{{ error }}</p>
-    </slot>
-  </div>
-</template>
+<script setup lang="ts">
+import type { PortalFormField } from '../types'
+
+defineProps<{
+  field: PortalFormField
+  error?: string
+  /** Optional id to use for the input — wrappers use it for label `for=`. */
+  inputId?: string
+}>()
+</script>
+
+<template>
+  <div
+    class="dcs-form-field"
+    :class="[`dcs-form-field--${field.type}`, `dcs-form-field--width-${field.width ?? 'full'}`]"
+    :data-form-field-key="field.id"
+  >
+    <slot name="label">
+      <label
+        v-if="field.type !== 'checkbox' && field.type !== 'hidden' && field.type !== 'section-heading' && field.type !== 'html-block'"
+        :for="inputId ?? `field-${field.id}`"
+        class="dcs-form-field__label"
+      >
+        {{ field.label }}
+        <span v-if="field.required" aria-hidden="true" class="dcs-form-field__required">*</span>
+      </label>
+    </slot>
+
+    <slot />
+
+    <slot name="help">
+      <p v-if="field.helpText" class="dcs-form-field__help">{{ field.helpText }}</p>
+    </slot>
+
+    <slot name="error">
+      <p v-if="error" class="dcs-form-field__error" role="alert">{{ error }}</p>
+    </slot>
+  </div>
+</template>

package/src/fields/DcsFormFile.vue

@@ -1,38 +1,38 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { PortalFormField } from '../types'
-import DcsFormFieldWrapper from './DcsFormFieldWrapper.vue'
-
-const props = defineProps<{
-  field: PortalFormField
-  modelValue: File | undefined
-  error?: string
-}>()
-
-const emit = defineEmits<{
-  'update:modelValue': [value: File | undefined]
-}>()
-
-const inputId = computed(() => `field-${props.field.id}`)
-const accept = computed(() => (props.field.validation?.accept ?? []).join(','))
-
-function onChange(e: Event): void {
-  const target = e.target as HTMLInputElement
-  emit('update:modelValue', target.files?.[0])
-}
-</script>
-
-<template>
-  <DcsFormFieldWrapper :field="field" :error="error" :input-id="inputId">
-    <input
-      :id="inputId"
-      class="dcs-form-input dcs-form-file"
-      type="file"
-      :name="field.id"
-      :required="field.required"
-      :aria-invalid="!!error"
-      :accept="accept || undefined"
-      @change="onChange"
-    />
-  </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: File | undefined
+  error?: string
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: File | undefined]
+}>()
+
+const inputId = computed(() => `field-${props.field.id}`)
+const accept = computed(() => (props.field.validation?.accept ?? []).join(','))
+
+function onChange(e: Event): void {
+  const target = e.target as HTMLInputElement
+  emit('update:modelValue', target.files?.[0])
+}
+</script>
+
+<template>
+  <DcsFormFieldWrapper :field="field" :error="error" :input-id="inputId">
+    <input
+      :id="inputId"
+      class="dcs-form-input dcs-form-file"
+      type="file"
+      :name="field.id"
+      :required="field.required"
+      :aria-invalid="!!error"
+      :accept="accept || undefined"
+      @change="onChange"
+    />
+  </DcsFormFieldWrapper>
+</template>

package/src/fields/DcsFormHidden.vue

@@ -1,17 +1,17 @@
-<script setup lang="ts">
-import type { PortalFormField } from '../types'
-
-defineProps<{
-  field: PortalFormField
-  modelValue: string | number | undefined
-}>()
-</script>
-
-<template>
-  <input
-    type="hidden"
-    :name="field.id"
-    :value="modelValue ?? (field.defaultValue as string | number | undefined) ?? ''"
-    :data-form-field-key="field.id"
-  />
-</template>
+<script setup lang="ts">
+import type { PortalFormField } from '../types'
+
+defineProps<{
+  field: PortalFormField
+  modelValue: string | number | undefined
+}>()
+</script>
+
+<template>
+  <input
+    type="hidden"
+    :name="field.id"
+    :value="modelValue ?? (field.defaultValue as string | number | undefined) ?? ''"
+    :data-form-field-key="field.id"
+  />
+</template>

package/src/fields/DcsFormHtmlBlock.vue

@@ -1,19 +1,19 @@
-<script setup lang="ts">
-import type { PortalFormField } from '../types'
-
-defineProps<{
-  field: PortalFormField
-}>()
-</script>
-
-<template>
-  <!--
-    `html` is sanitized server-side per the schema; rendering with v-html
-    is intentional. Site authors must keep portal-side sanitization on.
-  -->
-  <div
-    class="dcs-form-html-block"
-    :data-form-field-key="field.id"
-    v-html="field.html ?? ''"
-  />
-</template>
+<script setup lang="ts">
+import type { PortalFormField } from '../types'
+
+defineProps<{
+  field: PortalFormField
+}>()
+</script>
+
+<template>
+  <!--
+    `html` is sanitized server-side per the schema; rendering with v-html
+    is intentional. Site authors must keep portal-side sanitization on.
+  -->
+  <div
+    class="dcs-form-html-block"
+    :data-form-field-key="field.id"
+    v-html="field.html ?? ''"
+  />
+</template>

package/src/fields/DcsFormRadio.vue

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

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

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

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