@a-vision-software/vue-input-components 1.4.11 → 1.4.13

package/package.json

@@ -1,12 +1,12 @@
 {
     "name": "@a-vision-software/vue-input-components",
-    "version": "1.4.11",
+    "version": "1.4.13",
     "description": "A collection of reusable Vue 3 input components with TypeScript support",
     "author": "A-Vision Software",
     "license": "MIT",
     "repository": {
         "type": "git",
-        "url": "https://github.com/a-vision/vue-input-components.git"
+        "url": "git+https://github.com/a-vision/vue-input-components.git"
     },
     "homepage": "https://a-vision.github.io/vue-input-components/",
     "keywords": [
@@ -88,4 +88,4 @@
     "publishConfig": {
         "access": "public"
     }
-}
+}

package/src/components/FileUpload.vue

@@ -1,18 +1,28 @@
 <template>
-  <div class="file-upload">
-    <div
-      class="upload-area"
-      :class="{ 'is-dragging': isDragging, 'has-files': files.length > 0 }"
-      @dragenter.prevent="handleDragEnter"
-      @dragleave.prevent="handleDragLeave"
-      @dragover.prevent
-      @drop.prevent="handleDrop"
-      @click="triggerFileInput"
-    >
-      <input ref="fileInput" type="file" multiple class="file-input" @change="handleFileSelect" />
+  <div class="file-upload"
+    :class="{ 'label-position-top': labelPosition === 'top', 'label-position-left': labelPosition === 'left' }" :style="{
+      '--file-upload-width': width || 'auto',
+      '--file-upload-height': height || 'auto',
+      '--file-upload-color': error ? 'var(--ui-error-text-color)' : (color || 'var(--ui-upload-text-color, #888888)'),
+      '--file-upload-disabled-color': 'color-mix(in srgb, var(--file-upload-color), white 70%)',
+      '--file-upload-background-color': bgColor || 'var(--ui-upload-bg-color, #ffffff)',
+      '--file-upload-background-active-color': activeColor || 'var(--ui-upload-active-bg-color, #cccccc)',
+      '--file-upload-border-color': borderColor || 'var(--ui-upload-border-color, #888888)',
+      '--file-upload-icon-color': iconColor || 'var(--file-upload-color, #888888)',
+      '--file-upload-progress-color': progressColor || 'var(--ui-progress-color, #4444aa)',
+      '--file-upload-error-color': 'var(--ui-error-text-color, #aa0000)',
+      '--file-upload-success-color': 'var(--ui-success-text-color, #00aa00)',
+    }">
+    <label class="file-upload-label" v-if="label" for="fileInput">{{ label }}</label>
+    <div class="upload-area"
+      :class="{ 'is-dragging': isDragging, 'has-files': files.length > 0, 'is-disabled': disabled }">
+      <input ref="fileInput" type="file" :multiple="multiple" class="file-input" @change="handleFileSelect"
+        :accept="accept" :required="required" :disabled="disabled" :placeholder="placeholder"
+        @dragenter.prevent="handleDragEnter" @dragleave.prevent="handleDragLeave" @dragover.prevent
+        @drop.prevent="handleDrop" />
       <div class="upload-content">
-        <font-awesome-icon :icon="['fas', icon || 'upload']" />
-        <p v-if="files.length === 0">Drag & drop files here or click to select</p>
+        <font-awesome-icon v-if="icon" :icon="['fas', icon]" />
+        <p v-if="files.length === 0" v-text="placeholder || 'Drag & drop files here or click to select'"></p>
         <div v-else class="selected-files">
           <p>{{ files.length }} file(s) selected</p>
           <div v-for="(file, index) in files" :key="index" class="file-info">
@@ -21,42 +31,42 @@
           </div>
         </div>
       </div>
+      <div v-if="error" class="error-message">{{ error }}</div>
+      <div v-if="uploadStatus" class="status-message" :class="uploadStatus.type">
+        {{ uploadStatus.message }}
+      </div>
+      <div v-if="uploadProgress > 0 && uploadProgress < 100" class="progress-bar">
+        <div class="progress" :style="{ width: `${uploadProgress}%` }"></div>
+      </div>
     </div>
-    <div v-if="error" class="error-message">{{ error }}</div>
-    <div v-if="uploadProgress > 0 && uploadProgress < 100" class="progress-bar">
-      <div class="progress" :style="{ width: `${uploadProgress}%` }"></div>
-    </div>
-    <div v-if="uploadStatus" class="status-message" :class="uploadStatus.type">
-      {{ uploadStatus.message }}
-    </div>
-    <button v-if="files.length > 0 && !uploadUrl" class="upload-button" @click="handleStartUpload">
+    <button v-if="files.length > 0 && !uploadUrl && !disabled && showUploadButton" class="upload-button"
+      @click="handleStartUpload">
       Upload Files
     </button>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
-
-const props = defineProps<{
-  icon?: string
-  uploadUrl?: string
-}>()
+import { ref, watch, onMounted } from 'vue'
+import type { FileUploadProps, FileUploadEmits, UploadStatus, UploadCallbackResponse } from '@/types/fileupload'
 
-const emit = defineEmits<{
-  (e: 'upload-complete', files: File[]): void
-  (e: 'upload-error', error: string): void
-  (e: 'files-selected', files: File[]): void
-  (e: 'start-upload', files: File[]): void
-}>()
+const props = defineProps<FileUploadProps>()
+const emit = defineEmits<FileUploadEmits>()
 
-const MAX_FILE_SIZE = 20 * 1024 * 1024 // 20MB in bytes
 const fileInput = ref<HTMLInputElement | null>(null)
 const files = ref<File[]>([])
 const isDragging = ref(false)
+const startUpload = ref(props.doUpload)
 const uploadProgress = ref(0)
 const error = ref('')
-const uploadStatus = ref<{ type: 'success' | 'error'; message: string } | null>(null)
+const uploadStatus = ref<UploadStatus>({
+  type: 'pending',
+  message: '',
+})
+
+onMounted(() => {
+  startUpload.value = props.doUpload;
+})
 
 const formatFileSize = (bytes: number): string => {
   if (bytes === 0) return '0 Bytes'
@@ -67,8 +77,8 @@ const formatFileSize = (bytes: number): string => {
 }
 
 const validateFileSize = (file: File): boolean => {
-  if (file.size > MAX_FILE_SIZE) {
-    error.value = `File "${file.name}" exceeds the maximum size of 20MB`
+  if (props.maxSize && file.size > props.maxSize) {
+    error.value = `File "${file.name}" exceeds the maximum size of ${props.maxSize}MB`
     return false
   }
   return true
@@ -93,10 +103,6 @@ const handleDrop = (e: DragEvent) => {
   }
 }
 
-const triggerFileInput = () => {
-  fileInput.value?.click()
-}
-
 const handleFileSelect = (e: Event) => {
   error.value = ''
   const input = e.target as HTMLInputElement
@@ -109,7 +115,7 @@ const handleFileSelect = (e: Event) => {
   input.value = ''
 }
 
-const uploadFiles = async () => {
+const uploadFiles = () => {
   if (!props.uploadUrl) {
     error.value = 'No upload URL provided'
     return
@@ -123,13 +129,45 @@ const uploadFiles = async () => {
   const formData = new FormData()
   files.value.forEach((file) => {
     formData.append('files', file)
-  })
+  });
+
+  if (props.uploadCallback) {
+    props.uploadCallback(formData)
+      .then((response: UploadCallbackResponse) => {
+        const { formData, headers } = response;
+        doUploadFiles(formData, headers)
+      })
+      .catch((err) => {
+        const errorMessage = err instanceof Error ? err.message : 'Upload failed'
+        error.value = errorMessage
+        uploadStatus.value = {
+          type: 'error',
+          message: errorMessage,
+        }
+        emit('upload-complete', files.value)
+        emit('upload-error', uploadStatus.value)
+      });
+  } else {
+    doUploadFiles(formData, {})
+  }
+}
 
+const doUploadFiles = (formData: FormData, headers: Record<string, string>) => {
   try {
     const xhr = new XMLHttpRequest()
+    console.log('doUploadFiles:', formData, headers)
+
     xhr.upload.addEventListener('progress', (e) => {
       if (e.lengthComputable) {
         uploadProgress.value = (e.loaded / e.total) * 100
+        emit('upload-progress', uploadProgress.value)
+
+        if (uploadProgress.value >= 100) {
+          uploadStatus.value = {
+            type: 'processing',
+            message: 'Please wait...',
+          }
+        }
       }
     })
 
@@ -140,8 +178,10 @@ const uploadFiles = async () => {
           message: 'Upload completed successfully',
         }
         emit('upload-complete', files.value)
+        emit('upload-success', uploadStatus.value)
         files.value = []
         uploadProgress.value = 0
+        startUpload.value = false;
       } else {
         throw new Error(`Upload failed with status ${xhr.status}`)
       }
@@ -151,7 +191,12 @@ const uploadFiles = async () => {
       throw new Error('Upload failed')
     })
 
-    xhr.open('POST', props.uploadUrl)
+    xhr.open('POST', props.uploadUrl || '')
+
+    Object.entries(headers).forEach(([key, value]) => {
+      xhr.setRequestHeader(key, value)
+    })
+
     xhr.send(formData)
   } catch (err) {
     const errorMessage = err instanceof Error ? err.message : 'Upload failed'
@@ -160,67 +205,105 @@ const uploadFiles = async () => {
       type: 'error',
       message: errorMessage,
     }
-    emit('upload-error', errorMessage)
+    emit('upload-complete', files.value)
+    emit('upload-error', uploadStatus.value)
   }
 }
 
 const handleStartUpload = () => {
-  emit('start-upload', files.value)
+  emit('upload-started', files.value)
 }
 
 // Watch for changes in files and automatically upload when files are selected
 watch(files, (newFiles) => {
   if (newFiles.length > 0) {
-    if (props.uploadUrl) {
+    if (props.uploadUrl && props.doUpload) {
       uploadFiles()
     } else {
       emit('files-selected', newFiles)
     }
   }
 })
+
+watch(() => props.doUpload, (newDoUpload) => {
+  if (files.value && newDoUpload) {
+    startUpload.value = newDoUpload;
+  } else {
+    emit('files-selected', files.value)
+    startUpload.value = false;
+  }
+})
+
+watch(() => startUpload.value, (newStartUpload) => {
+  if (newStartUpload) {
+    uploadFiles()
+  }
+})
 </script>
 
 <style scoped>
 .file-upload {
-  width: 100%;
-  max-width: 600px;
+  width: var(--file-upload-width);
+  height: var(--file-upload-height);
   margin: 0 auto;
+
+  &.label-position-left {
+    display: grid;
+    grid-template-columns: 10em calc(100% - 10em);
+    gap: 1rem;
+  }
+
 }
 
 .upload-area {
-  border: 2px dashed var(--upload-border-color);
+  position: relative;
+  border: 2px dashed var(--file-upload-border-color);
   border-radius: 0.75rem;
   padding: 2rem;
   text-align: center;
   cursor: pointer;
   transition: all 0.3s ease;
-  background-color: var(--upload-bg-color);
+  background-color: var(--file-upload-background-color);
 }
 
 .upload-area.is-dragging {
-  border-color: var(--upload-dragging-border-color);
-  background-color: var(--upload-dragging-bg-color);
+  background-color: var(--file-upload-background-active-color);
 }
 
 .upload-area.has-files {
-  border-color: var(--upload-has-files-border-color);
-  background-color: var(--upload-has-files-bg-color);
+  background-color: var(--file-upload-background-active-color);
+}
+
+.upload-area.is-disabled {
+  color: var(--file-upload-disabled-color);
+  border-color: var(--file-upload-disabled-color);
+  cursor: not-allowed;
 }
 
 .file-input {
-  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0;
+}
+
+.upload-area.is-disabled .file-input {
+  cursor: not-allowed;
 }
 
 .upload-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  text-align: center;
   gap: 1rem;
 }
 
 .upload-content :deep(svg) {
   font-size: 2rem;
-  color: var(--upload-icon-color);
+  color: var(--file-upload-icon-color);
+  margin: 0 auto;
 }
 
 .selected-files {
@@ -229,7 +312,7 @@ watch(files, (newFiles) => {
   max-height: 200px;
   overflow-y: auto;
   font-size: 0.75rem;
-  color: var(--upload-text-color);
+  color: var(--file-upload-color);
 }
 
 .file-info {
@@ -255,23 +338,51 @@ watch(files, (newFiles) => {
   flex-shrink: 0;
 }
 
+/*
+.label-position-left {
+  line-height: 2em;
+
+  .upload-area {
+    padding: 0;
+  }
+
+  .upload-content {
+    padding: 0;
+    grid-template-rows: 1fr;
+    grid-template-columns: 3em auto;
+  }
+}
+
+.label-position-left .upload-content :deep(svg) {
+  font-size: 1.25em;
+  margin-top: 0.25em;
+}
+*/
+
 .error-message {
-  color: var(--error-text-color);
+  color: var(--file-upload-error-color);
   margin-top: 1rem;
   font-size: 0.875rem;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
 }
 
 .progress-bar {
   height: 0.5rem;
-  background-color: var(--progress-bg-color);
   border-radius: 0.25rem;
   margin-top: 1rem;
   overflow: hidden;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
 }
 
 .progress {
   height: 100%;
-  background-color: var(--progress-color);
+  background-color: var(--file-upload-progress-color);
   transition: width 0.3s ease;
 }
 
@@ -280,22 +391,24 @@ watch(files, (newFiles) => {
   padding: 0.5rem;
   border-radius: 0.25rem;
   font-size: 0.875rem;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
 }
 
 .status-message.success {
-  background-color: var(--success-bg-color);
-  color: var(--success-text-color);
+  color: var(--file-upload-success-color);
 }
 
 .status-message.error {
-  background-color: var(--error-bg-color);
-  color: var(--error-text-color);
+  color: var(--file-upload-error-color);
 }
 
 .upload-button {
   margin-top: 1rem;
   padding: 0.5rem 1rem;
-  background-color: var(--primary-color);
+  background-color: var(--file-upload-color);
   color: white;
   border: none;
   border-radius: 0.25rem;
@@ -305,6 +418,6 @@ watch(files, (newFiles) => {
 }
 
 .upload-button:hover {
-  background-color: var(--primary-color-light);
+  background-color: var(--file-upload-color-light);
 }
 </style>

package/src/types/fileupload.ts

@@ -1,26 +1,45 @@
-export interface FileUploadProps {
-  modelValue: File[]
-  label?: string
-  placeholder?: string
-  error?: string
-  disabled?: boolean
-  required?: boolean
-  multiple?: boolean
-  accept?: string
-  maxSize?: number
-  uploadUrl?: string
+interface FileUploadProps {
+  width?: string // Width of the upload area.
+  height?: string // Height of the upload area.
+  label?: string // Label text displayed above the upload area.
+  labelPosition?: 'top' | 'left' // Position of the label.
+  icon?: string // Icon to display.
+  placeholder?: string // Placeholder text displayed when no files are selected.
+  error?: string // Error message to display when the upload fails.
+  disabled?: boolean // Whether to disable the upload.
+  required?: boolean // Whether to require the upload.
+  multiple?: boolean // Whether to allow multiple files to be selected.
+  accept?: string // File types to accept.
+  maxSize?: number // Maximum file size in MB.
+  uploadUrl?: string // URL to upload the files to.
+  showUploadButton?: boolean // Whether to show the upload button.
+  doUpload?: boolean // Whether to automatically upload files when selected. Also setting it from 'false' to 'true' will trigger the upload.
+  iconColor?: string // Icon color.
+  color?: string // Text color.
+  bgColor?: string // Background color.
+  borderColor?: string // Border color.
+  progressColor?: string // Progress color.
+  activeColor?: string // Active color.
+  uploadCallback?: (formData: FormData) => Promise<UploadCallbackResponse> // Callback function to handle the upload.
 }
 
-export interface FileUploadEmits {
-  (e: 'update:modelValue', files: File[]): void
-  (e: 'files-selected', files: File[]): void
-  (e: 'start-upload', files: File[]): void
-  (e: 'upload-progress', progress: number): void
-  (e: 'upload-success', response: any): void
-  (e: 'upload-error', error: Error): void
+interface UploadCallbackResponse {
+  formData: FormData
+  headers: Record<string, string>
 }
 
-export interface FileUploadComponent {
-  focus: () => void
-  blur: () => void
+interface UploadStatus {
+  type: 'pending' | 'success' | 'error' | 'processing'
+  message: string
 }
+
+interface FileUploadEmits {
+  (e: 'files-selected', files: File[]): void // Emitted when files are selected.
+  (e: 'upload-started', files: File[]): void // Emitted when the upload starts.
+  (e: 'upload-complete', files: File[]): void // Emitted when the upload completes.
+  (e: 'upload-progress', progress: number): void // Emitted when the upload progresses.
+  (e: 'upload-success', status: UploadStatus): void // Emitted when the upload succeeds.
+  (e: 'upload-error', status: UploadStatus): void // Emitted when the upload fails.
+}
+
+export type { FileUploadProps, FileUploadEmits, UploadStatus, UploadCallbackResponse }

package/src/views/FileUploadTestView.vue

@@ -10,30 +10,27 @@
     <div class="file-upload-grid">
       <div class="upload-section">
         <h2>Basic Upload</h2>
-        <FileUpload
-          icon="upload"
-          upload-url="https://httpbin.org/post"
-          @upload-complete="handleUploadComplete"
-          @upload-error="handleUploadError"
-        />
-        <div
-          v-if="uploadStatus.basic && uploadStatus.basic.message"
-          :class="['status-message', uploadStatus.basic.type]"
-        >
+        <FileUpload label="Upload a file" placeholder="Select one or more files" label-position="left" width="100%"
+          error="File upload failed" :disabled="false" :required="true" :multiple="true" icon="upload"
+          upload-url="https://httpbin.org/post" @upload-complete="handleUploadComplete"
+          @upload-error="handleUploadError" :do-upload="true" />
+        <div v-if="uploadStatus.basic && uploadStatus.basic.message && false"
+          :class="['status-message', uploadStatus.basic.type]">
           {{ uploadStatus.basic.message }}
         </div>
       </div>
       <div class="upload-section">
-        <h2>Image Upload</h2>
-        <FileUpload
-          icon="image"
-          @files-selected="handleFilesSelected"
-          @start-upload="handleStartUpload"
-        />
+        <h2>Multiple Image Upload (<span @click="imageDisabled = !imageDisabled"
+            v-text="imageDisabled ? 'disabled' : 'enabled'"></span>)</h2>
+        <FileUpload icon="image" accept="image/*" @start-upload="handleStartUpload" :disabled="imageDisabled"
+          upload-url="https://httpbin.org/post" :multiple="true" :do-upload="uploadImages"
+          @upload-complete="showImagesUpload = false" :upload-callback="handleUploadCallback"
+          @files-selected="showImagesUpload = true" />
+        <button @click="uploadImages = true" v-if="showImagesUpload">Upload Images</button>
       </div>
       <div class="upload-section">
         <h2>Document Upload</h2>
-        <FileUpload icon="file" />
+        <FileUpload icon="file" accept="application/pdf" :show-upload-button="true" />
       </div>
     </div>
   </div>
@@ -42,16 +39,32 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import FileUpload from '@/components/FileUpload.vue'
+import type { UploadStatus, UploadCallbackResponse } from '@/types/fileupload'
 
-interface UploadStatus {
-  type: 'success' | 'error'
-  message: string
-}
+const imageDisabled = ref(true);
+const uploadImages = ref(false);
+const showImagesUpload = ref(false);
+const imageUploadData = ref({ tag: 'test', type: 'image', name: 'test' });
 
 const uploadStatus = ref<Record<string, UploadStatus>>({
   basic: { type: 'success', message: '' },
 })
 
+const handleUploadCallback = (formData: FormData): Promise<UploadCallbackResponse> => {
+  return new Promise((resolve) => {
+    // Add imageUploadData to formData
+    Object.entries(imageUploadData.value).forEach(([key, value]) => {
+      formData.append(key, value)
+    })
+    resolve({
+      formData,
+      headers: {
+        'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIqInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvqG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ',
+      },
+    });
+  })
+}
+
 const handleUploadComplete = (files: File[]) => {
   uploadStatus.value.basic = {
     type: 'success',
@@ -63,10 +76,10 @@ const handleUploadComplete = (files: File[]) => {
   }, 3000)
 }
 
-const handleUploadError = (error: string) => {
+const handleUploadError = (status: UploadStatus) => {
   uploadStatus.value.basic = {
-    type: 'error',
-    message: error,
+    type: status.type,
+    message: status.message,
   }
   // Clear status after 3 seconds
   setTimeout(() => {
@@ -74,10 +87,6 @@ const handleUploadError = (error: string) => {
   }, 3000)
 }
 
-const handleFilesSelected = (files: File[]) => {
-  console.log('Files selected:', files)
-}
-
 const handleStartUpload = (files: File[]) => {
   console.log('Start upload:', files)
 }