@duffcloudservices/site-forms 0.1.4 → 0.2.0

package/src/composables/useFormValidation.ts

@@ -1,4 +1,5 @@
 import type {
+  PortalFormAttachmentPolicy,
   PortalFormDefinition,
   PortalFormField,
   FormErrors,
@@ -26,6 +27,7 @@ export function isFieldVisible(
 export function validateField(
   field: PortalFormField,
   value: unknown,
+  attachmentPolicy?: PortalFormAttachmentPolicy,
 ): string | undefined {
   if (
     field.type === 'section-heading' ||
@@ -54,8 +56,7 @@ export function validateField(
     }
   }
 
-  const v = field.validation
-  if (!v) return undefined
+  const v: NonNullable<PortalFormField['validation']> = field.validation ?? {}
 
   if (typeof normalizedValue === 'string') {
     if (v.minLength != null && normalizedValue.length < v.minLength) {
@@ -84,17 +85,25 @@ export function validateField(
     }
   }
 
-  if (field.type === 'file' && v.accept && v.accept.length > 0) {
-    const file = value as File | null
-    if (file && typeof File !== 'undefined' && file instanceof File) {
-      const accepted = v.accept.some((a) => {
-        if (a.startsWith('.')) {
-          return file.name.toLowerCase().endsWith(a.toLowerCase())
-        }
-        return file.type === a
-      })
-      if (!accepted) {
-        return `${field.label} must be one of: ${v.accept.join(', ')}`
+  if (field.type === 'file') {
+    const files = filesFromValue(value)
+    const maxFiles = attachmentPolicy?.maxFiles
+    const maxFileSizeBytes = attachmentPolicy?.maxFileSizeBytes
+    const accept = v.accept && v.accept.length > 0 ? v.accept : attachmentPolicy?.accept
+
+    if (maxFiles != null && files.length > maxFiles) {
+      return `${field.label} accepts up to ${maxFiles} file${maxFiles === 1 ? '' : 's'}`
+    }
+    if (maxFileSizeBytes != null) {
+      const oversized = files.find((file) => file.size > maxFileSizeBytes)
+      if (oversized) {
+        return `${oversized.name} exceeds the ${formatBytes(maxFileSizeBytes)} limit`
+      }
+    }
+    if (accept && accept.length > 0) {
+      const rejected = files.find((file) => !isAcceptedFile(file, accept))
+      if (rejected) {
+        return `${rejected.name} must be one of: ${accept.join(', ')}`
       }
     }
   }
@@ -117,7 +126,7 @@ export function validateForm(
   for (const field of def.fields) {
     if (ids && !ids.has(field.id)) continue
     if (!isFieldVisible(field, values)) continue
-    const err = validateField(field, values[field.id])
+    const err = validateField(field, values[field.id], def.attachmentPolicy)
     if (err) errors[field.id] = err
   }
   return errors
@@ -126,3 +135,45 @@ export function validateForm(
 export function hasErrors(errors: FormErrors): boolean {
   return Object.values(errors).some((e) => !!e)
 }
+
+function filesFromValue(value: unknown): File[] {
+  if (typeof File === 'undefined') {
+    return []
+  }
+  if (value instanceof File) {
+    return [value]
+  }
+  if (Array.isArray(value)) {
+    return value.filter((item): item is File => item instanceof File)
+  }
+  return []
+}
+
+function isAcceptedFile(file: File, accept: string[]): boolean {
+  const name = file.name.toLowerCase()
+  const contentType = file.type.toLowerCase()
+
+  return accept.some((rule) => {
+    const normalized = rule.trim().toLowerCase()
+    if (normalized === '') {
+      return false
+    }
+    if (normalized.startsWith('.')) {
+      return name.endsWith(normalized)
+    }
+    if (normalized.endsWith('/*')) {
+      return contentType.startsWith(normalized.slice(0, -1))
+    }
+    return contentType === normalized
+  })
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) {
+    return `${bytes} B`
+  }
+  if (bytes < 1024 * 1024) {
+    return `${Math.round(bytes / 1024)} KB`
+  }
+  return `${Math.round(bytes / (1024 * 1024))} MB`
+}

package/src/fields/DcsFormFile.vue

@@ -1,38 +1,159 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import type { PortalFormField } from '../types'
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import type { PortalFormAttachmentPolicy, PortalFormField } from '../types'
 import DcsFormFieldWrapper from './DcsFormFieldWrapper.vue'
 
 const props = defineProps<{
   field: PortalFormField
-  modelValue: File | undefined
+  attachmentPolicy?: PortalFormAttachmentPolicy
+  modelValue: File | File[] | undefined
   error?: string
 }>()
 
 const emit = defineEmits<{
-  'update:modelValue': [value: File | undefined]
+  'update:modelValue': [value: File | File[] | undefined]
 }>()
 
 const inputId = computed(() => `field-${props.field.id}`)
-const accept = computed(() => (props.field.validation?.accept ?? []).join(','))
+const inputEl = ref<HTMLInputElement | null>(null)
+const accept = computed(() => (props.field.validation?.accept ?? props.attachmentPolicy?.accept ?? []).join(','))
+const maxFiles = computed(() => Math.max(1, Math.floor(props.attachmentPolicy?.maxFiles ?? 1)))
+const allowsMultiple = computed(() => maxFiles.value > 1)
+const selectedFiles = computed(() => normalizeFiles(props.modelValue))
+const previews = ref<Array<{ file: File; url: string; canPreview: boolean }>>([])
+
+function normalizeFiles(value: File | File[] | undefined): File[] {
+  if (Array.isArray(value)) {
+    return value.filter(Boolean)
+  }
+  return value ? [value] : []
+}
+
+function emitFiles(files: File[]): void {
+  const capped = files.slice(0, maxFiles.value)
+  emit('update:modelValue', allowsMultiple.value ? capped : capped[0])
+}
+
+function fileKey(file: File): string {
+  return [file.name, file.type, file.size, file.lastModified].join(':')
+}
+
+function uniqueFiles(files: File[]): File[] {
+  const seen = new Set<string>()
+  const out: File[] = []
+  for (const file of files) {
+    const key = fileKey(file)
+    if (seen.has(key)) {
+      continue
+    }
+    seen.add(key)
+    out.push(file)
+  }
+  return out
+}
 
 function onChange(e: Event): void {
   const target = e.target as HTMLInputElement
-  emit('update:modelValue', target.files?.[0])
+  const picked = Array.from(target.files ?? []).filter((file) => file.size > 0)
+  if (picked.length === 0) {
+    return
+  }
+  emitFiles(allowsMultiple.value ? uniqueFiles([...selectedFiles.value, ...picked]) : picked)
+  target.value = ''
+}
+
+function removeFile(index: number): void {
+  const next = selectedFiles.value.filter((_, i) => i !== index)
+  emitFiles(next)
+  if (next.length === 0 && inputEl.value) {
+    inputEl.value.value = ''
+  }
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) {
+    return `${bytes} B`
+  }
+  if (bytes < 1024 * 1024) {
+    return `${(bytes / 1024).toFixed(1)} KB`
+  }
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}
+
+function revokePreviews(): void {
+  for (const preview of previews.value) {
+    URL.revokeObjectURL(preview.url)
+  }
+  previews.value = []
 }
+
+watch(
+  selectedFiles,
+  (files) => {
+    revokePreviews()
+    previews.value = files.map((file) => ({
+      file,
+      url: URL.createObjectURL(file),
+      canPreview: file.type.toLowerCase().startsWith('image/'),
+    }))
+  },
+  { immediate: true },
+)
+
+onBeforeUnmount(revokePreviews)
 </script>
 
 <template>
   <DcsFormFieldWrapper :field="field" :error="error" :input-id="inputId">
     <input
+      ref="inputEl"
       :id="inputId"
       class="dcs-form-input dcs-form-file"
       type="file"
       :name="field.id"
+      :multiple="allowsMultiple"
       :required="field.required"
       :aria-invalid="!!error"
       :accept="accept || undefined"
       @change="onChange"
     />
+
+    <p v-if="allowsMultiple" class="dcs-form-file__status">
+      {{ selectedFiles.length }} of {{ maxFiles }} files selected
+    </p>
+
+    <div
+      v-if="previews.length > 0"
+      class="dcs-form-file-preview-grid"
+      aria-live="polite"
+    >
+      <div
+        v-for="(preview, index) in previews"
+        :key="fileKey(preview.file)"
+        class="dcs-form-file-preview"
+      >
+        <img
+          v-if="preview.canPreview"
+          class="dcs-form-file-preview__image"
+          :src="preview.url"
+          :alt="`${preview.file.name} preview`"
+        />
+        <div v-else class="dcs-form-file-preview__placeholder" aria-hidden="true">
+          File
+        </div>
+        <div class="dcs-form-file-preview__meta">
+          <span class="dcs-form-file-preview__name">{{ preview.file.name }}</span>
+          <span class="dcs-form-file-preview__size">{{ formatFileSize(preview.file.size) }}</span>
+        </div>
+        <button
+          type="button"
+          class="dcs-form-file-preview__remove"
+          :aria-label="`Remove ${preview.file.name}`"
+          @click="removeFile(index)"
+        >
+          Remove
+        </button>
+      </div>
+    </div>
   </DcsFormFieldWrapper>
 </template>

package/src/style.css

@@ -126,6 +126,102 @@
   opacity: 0.7;
 }
 
+.dcs-form-file__status {
+  margin: -0.15rem 0 0;
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  color: rgba(71, 85, 105, 0.82);
+  text-transform: uppercase;
+}
+
+.dcs-form-file-preview-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
+  gap: 0.85rem;
+}
+
+.dcs-form-file-preview {
+  position: relative;
+  overflow: hidden;
+  display: grid;
+  gap: 0.65rem;
+  padding: 0.65rem;
+  border: 1px solid rgba(15, 23, 42, 0.12);
+  border-radius: 1rem;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.9)),
+    radial-gradient(circle at top left, rgba(37, 99, 235, 0.1), transparent 40%);
+  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
+}
+
+.dcs-form-file-preview__image,
+.dcs-form-file-preview__placeholder {
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  border-radius: 0.75rem;
+  background: rgba(15, 23, 42, 0.08);
+}
+
+.dcs-form-file-preview__image {
+  object-fit: cover;
+}
+
+.dcs-form-file-preview__placeholder {
+  display: grid;
+  place-items: center;
+  font-size: 0.8rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  color: rgba(71, 85, 105, 0.8);
+  text-transform: uppercase;
+}
+
+.dcs-form-file-preview__meta {
+  min-width: 0;
+  display: grid;
+  gap: 0.1rem;
+}
+
+.dcs-form-file-preview__name {
+  overflow: hidden;
+  font-size: 0.85rem;
+  font-weight: 700;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dcs-form-file-preview__size {
+  font-size: 0.75rem;
+  color: rgba(71, 85, 105, 0.86);
+}
+
+.dcs-form-file-preview__remove {
+  appearance: none;
+  justify-self: start;
+  border: 1px solid rgba(185, 28, 28, 0.2);
+  border-radius: 9999px;
+  padding: 0.4rem 0.75rem;
+  font: inherit;
+  font-size: 0.75rem;
+  font-weight: 800;
+  line-height: 1;
+  color: #991b1b;
+  background: rgba(254, 242, 242, 0.95);
+  cursor: pointer;
+  transition:
+    transform 0.15s ease,
+    border-color 0.15s ease,
+    background-color 0.15s ease;
+}
+
+.dcs-form-file-preview__remove:hover {
+  transform: translateY(-1px);
+  border-color: rgba(185, 28, 28, 0.42);
+  background: #fff;
+}
+
 .dcs-form-select {
   appearance: none;
 }