@a-vision-software/vue-input-components 1.4.17 → 1.4.19

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@a-vision-software/vue-input-components",
-    "version": "1.4.17",
+    "version": "1.4.19",
     "description": "A collection of reusable Vue 3 input components with TypeScript support",
     "author": "A-Vision Software",
     "license": "MIT",

package/src/components/Dropdown.vue

@@ -1,33 +1,46 @@
 <template>
-  <div class="dropdown" :class="{
-    'dropdown--open': isOpen,
-    'dropdown--disabled': disabled,
-    'dropdown--multiple': multiple,
-    'dropdown--large-icon': iconSize === 'large',
-    'dropdown--has-error': error,
-    [`label-${labelPosition}`]: label,
-    [`label-align-${labelAlign}`]: label,
-  }" :style="[
-    { width: width || '100%' },
-    labelStyle,
-    {
-      '--dropdown-color': error ? 'var(--danger-color)' : color,
-      '--dropdown-hover-color': hoverColor ? hoverColor : 'var(--dropdown-color)',
-      '--dropdown-active-color': activeColor ? activeColor : 'var(--dropdown-color)',
-      '--dropdown-disabled-color': disabledColor,
-      '--dropdown-background-color': backgroundColor,
-      '--dropdown-border-radius': borderRadius,
-      '--dropdown-padding': padding,
-      '--dropdown-max-height': maxHeight,
-    }
-  ]" @click="toggleDropdown" @keydown.esc="closeDropdown" @keydown.space.prevent="toggleDropdown"
-    @keydown.enter.prevent="toggleDropdown" tabindex="0">
+  <div
+    class="dropdown"
+    :class="{
+      'dropdown--open': isOpen,
+      'dropdown--disabled': disabled,
+      'dropdown--multiple': multiple,
+      'dropdown--large-icon': iconSize === 'large',
+      'dropdown--has-error': error,
+      [`label-${labelPosition}`]: label,
+      [`label-align-${labelAlign}`]: label,
+    }"
+    :style="[
+      { width: width || '100%' },
+      labelStyle,
+      {
+        '--dropdown-color': error ? 'var(--danger-color)' : color,
+        '--dropdown-hover-color': hoverColor ? hoverColor : 'var(--dropdown-color)',
+        '--dropdown-active-color': activeColor ? activeColor : 'var(--dropdown-color)',
+        '--dropdown-disabled-color': disabledColor,
+        '--dropdown-background-color': backgroundColor,
+        '--dropdown-border-radius': borderRadius,
+        '--dropdown-padding': padding,
+        '--dropdown-max-height': maxHeight,
+      },
+    ]"
+    @click="toggleDropdown"
+    @keydown.esc="closeDropdown"
+    @keydown.space.prevent="toggleDropdown"
+    @keydown.enter.prevent="toggleDropdown"
+    tabindex="0"
+  >
     <label v-if="label" :for="id" class="label">
       {{ label }}
     </label>
     <div class="dropdown__selected">
       <div v-if="icon" class="dropdown__icon">
-        <img v-if="icon.startsWith('img:')" :src="icon.substring(4)" :alt="placeholder" class="dropdown__icon-image" />
+        <img
+          v-if="icon.startsWith('img:')"
+          :src="icon.substring(4)"
+          :alt="placeholder"
+          class="dropdown__icon-image"
+        />
         <font-awesome-icon v-else :icon="icon" />
       </div>
       <div v-if="!hasSelection" class="dropdown__placeholder">
@@ -35,8 +48,12 @@
       </div>
       <div v-else class="dropdown__selected-items">
         <template v-if="multiple">
-          <div v-for="option in selectedOptions" :key="option.id" class="dropdown__selected-tag"
-            @click.stop="deselectOption(option)">
+          <div
+            v-for="option in selectedOptions"
+            :key="option.id"
+            class="dropdown__selected-tag"
+            @click.stop="deselectOption(option)"
+          >
             {{ option.label }}
             <font-awesome-icon icon="xmark" class="dropdown__selected-tag-remove" />
           </div>
@@ -46,12 +63,23 @@
         </template>
       </div>
       <div class="dropdown__icons">
-        <font-awesome-icon v-if="hasSelection && !multiple" icon="xmark" class="dropdown__clear"
-          @click.stop="clearSelection" />
-        <font-awesome-icon icon="chevron-down" class="dropdown__arrow" :class="{ 'dropdown__arrow--open': isOpen }" />
+        <font-awesome-icon
+          v-if="hasSelection && !multiple"
+          icon="xmark"
+          class="dropdown__clear"
+          @click.stop="clearSelection"
+        />
+        <font-awesome-icon
+          icon="chevron-down"
+          class="dropdown__arrow"
+          :class="{ 'dropdown__arrow--open': isOpen && !readonly }"
+        />
       </div>
-      <span v-if="required && !showSaved && !showChanged && !error"
-        class="status-indicator required-indicator">required</span>
+      <span
+        v-if="required && !showSaved && !showChanged && !error"
+        class="status-indicator required-indicator"
+        >required</span
+      >
       <transition name="fade">
         <span v-if="showSaved && !error" class="status-indicator saved-indicator">saved</span>
       </transition>
@@ -63,17 +91,34 @@
       </transition>
     </div>
 
-    <div v-if="isOpen" class="dropdown__content">
+    <div v-if="isOpen && !readonly" class="dropdown__content">
       <div v-if="filterable" class="dropdown__filter">
-        <input ref="filterInput" v-model="filterText" type="text" class="dropdown__filter-input"
-          placeholder="Type to filter..." @click.stop @keydown.stop />
+        <input
+          ref="filterInput"
+          v-model="filterText"
+          type="text"
+          class="dropdown__filter-input"
+          placeholder="Type to filter..."
+          @click.stop
+          @keydown.stop
+        />
       </div>
       <div class="dropdown__options">
-        <div v-for="option in filteredOptions" :key="option.id" class="dropdown__option" :class="{
-          'dropdown__option--selected': isSelected(option),
-          'dropdown__option--disabled': option.disabled,
-        }" @click.stop="toggleOption(option)">
-          <font-awesome-icon v-if="multiple && isSelected(option)" icon="check" class="dropdown__option-check" />
+        <div
+          v-for="option in filteredOptions"
+          :key="option.id"
+          class="dropdown__option"
+          :class="{
+            'dropdown__option--selected': isSelected(option),
+            'dropdown__option--disabled': option.disabled,
+          }"
+          @click.stop="toggleOption(option)"
+        >
+          <font-awesome-icon
+            v-if="multiple && isSelected(option)"
+            icon="check"
+            class="dropdown__option-check"
+          />
           {{ option.label }}
         </div>
       </div>
@@ -107,6 +152,7 @@ const props = withDefaults(defineProps<DropdownProps>(), {
   labelPosition: 'top',
   labelAlign: 'left',
   labelWidth: '',
+  readonly: false,
 })
 
 const emit = defineEmits<{
@@ -136,9 +182,7 @@ const hasSelection = computed(() => {
 const filteredOptions = computed(() => {
   if (!filterText.value) return props.options
   const searchText = filterText.value.toLowerCase()
-  return props.options.filter((option) =>
-    option.label.toLowerCase().includes(searchText)
-  )
+  return props.options.filter((option) => option.label.toLowerCase().includes(searchText))
 })
 
 const isSelected = (option: DropdownOption) => {

package/src/components/FileUpload.vue

@@ -1,28 +1,53 @@
 <template>
-  <div class="file-upload"
-    :class="{ 'label-position-top': labelPosition === 'top', 'label-position-left': labelPosition === 'left' }" :style="{
+  <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-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-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-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 v-if="icon" :icon="['fas', icon]" />
-        <p v-if="files.length === 0" v-text="placeholder || 'Drag & drop files here or click to select'"></p>
+        <p v-if="files.length === 0">
+          {{ placeholder || 'Drag & drop files here or click to select' }}
+          <div v-if="maxSize" class="max-size">(max size: {{ maxSize }}MB)</div>
+        </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">
@@ -39,8 +64,11 @@
         <div class="progress" :style="{ width: `${uploadProgress}%` }"></div>
       </div>
     </div>
-    <button v-if="files.length > 0 && !uploadUrl && !disabled && showUploadButton" class="upload-button"
-      @click="handleStartUpload">
+    <button
+      v-if="files.length > 0 && !uploadUrl && !disabled && showUploadButton"
+      class="upload-button"
+      @click="handleStartUpload"
+    >
       Upload Files
     </button>
   </div>
@@ -48,7 +76,12 @@
 
 <script setup lang="ts">
 import { ref, watch, onMounted } from 'vue'
-import type { FileUploadProps, FileUploadEmits, UploadStatus, UploadCallbackResponse } from '@/types/fileupload'
+import type {
+  FileUploadProps,
+  FileUploadEmits,
+  UploadStatus,
+  UploadCallbackResponse,
+} from '@/types/fileupload'
 
 const props = defineProps<FileUploadProps>()
 const emit = defineEmits<FileUploadEmits>()
@@ -65,7 +98,7 @@ const uploadStatus = ref<UploadStatus>({
 })
 
 onMounted(() => {
-  startUpload.value = props.doUpload;
+  startUpload.value = props.doUpload
 })
 
 const formatFileSize = (bytes: number): string => {
@@ -77,7 +110,7 @@ const formatFileSize = (bytes: number): string => {
 }
 
 const validateFileSize = (file: File): boolean => {
-  if (props.maxSize && file.size > props.maxSize) {
+  if (props.maxSize && file.size > props.maxSize * 1024 * 1024) {
     error.value = `File "${file.name}" exceeds the maximum size of ${props.maxSize}MB`
     return false
   }
@@ -129,12 +162,13 @@ const uploadFiles = () => {
   const formData = new FormData()
   files.value.forEach((file) => {
     formData.append('files', file)
-  });
+  })
 
   if (props.uploadCallback) {
-    props.uploadCallback(formData)
+    props
+      .uploadCallback(formData)
       .then((response: UploadCallbackResponse) => {
-        const { formData, headers } = response;
+        const { formData, headers } = response
         doUploadFiles(formData, headers)
       })
       .catch((err) => {
@@ -143,10 +177,11 @@ const uploadFiles = () => {
         uploadStatus.value = {
           type: 'error',
           message: errorMessage,
+          response: err,
         }
         emit('upload-complete', files.value)
         emit('upload-error', uploadStatus.value)
-      });
+      })
   } else {
     doUploadFiles(formData, {})
   }
@@ -172,24 +207,43 @@ const doUploadFiles = (formData: FormData, headers: Record<string, string>) => {
 
     xhr.addEventListener('load', () => {
       if (xhr.status >= 200 && xhr.status < 300) {
+        const response = JSON.parse(xhr.response)
         uploadStatus.value = {
           type: 'success',
           message: 'Upload completed successfully',
+          response: response,
         }
 
-        const response = JSON.parse(xhr.response)
-        emit('upload-complete', response)
+        emit('upload-complete', files.value)
         emit('upload-success', uploadStatus.value)
         files.value = []
         uploadProgress.value = 0
-        startUpload.value = false;
+        startUpload.value = false
       } else {
-        throw new Error(`Upload failed with status ${xhr.status}`)
+        const errorMessage = xhr.statusText || 'Upload failed'
+        error.value = errorMessage
+        uploadStatus.value = {
+          type: 'error',
+          message: errorMessage,
+          response: null,
+        }
+        emit('upload-complete', files.value)
+        emit('upload-error', uploadStatus.value)
+        files.value = []
+        uploadProgress.value = 0
+        startUpload.value = false
       }
     })
 
     xhr.addEventListener('error', () => {
-      throw new Error('Upload failed')
+      const errorMessage = xhr.statusText || 'Upload error'
+      uploadStatus.value = {
+        type: 'error',
+        message: errorMessage,
+        response: null,
+      }
+      emit('upload-complete', files.value)
+      emit('upload-error', uploadStatus.value)
     })
 
     xhr.open('POST', props.uploadUrl || '')
@@ -205,6 +259,7 @@ const doUploadFiles = (formData: FormData, headers: Record<string, string>) => {
     uploadStatus.value = {
       type: 'error',
       message: errorMessage,
+      response: err,
     }
     emit('upload-complete', files.value)
     emit('upload-error', uploadStatus.value)
@@ -226,20 +281,26 @@ watch(files, (newFiles) => {
   }
 })
 
-watch(() => props.doUpload, (newDoUpload) => {
-  if (files.value && newDoUpload) {
-    startUpload.value = newDoUpload;
-  } else {
-    emit('files-selected', files.value)
-    startUpload.value = false;
-  }
-})
+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()
-  }
-})
+watch(
+  () => startUpload.value,
+  (newStartUpload) => {
+    if (newStartUpload) {
+      uploadFiles()
+    }
+  },
+)
 </script>
 
 <style scoped>
@@ -253,7 +314,6 @@ watch(() => startUpload.value, (newStartUpload) => {
     grid-template-columns: 10em calc(100% - 10em);
     gap: 1rem;
   }
-
 }
 
 .upload-area {
@@ -299,6 +359,11 @@ watch(() => startUpload.value, (newStartUpload) => {
   grid-template-rows: 1fr 1fr;
   text-align: center;
   gap: 1rem;
+
+  .max-size {
+    font-size: 0.75rem;
+    color: var(--file-upload-color);
+  }
 }
 
 .upload-content :deep(svg) {