@a-vision-software/vue-input-components 1.4.16 → 1.4.18

package/package.json

@@ -1,91 +1,91 @@
 {
-  "name": "@a-vision-software/vue-input-components",
-  "version": "1.4.16",
-  "description": "A collection of reusable Vue 3 input components with TypeScript support",
-  "author": "A-Vision Software",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/a-vision/vue-input-components.git"
-  },
-  "homepage": "https://a-vision.github.io/vue-input-components/",
-  "keywords": [
-    "vue",
-    "vue3",
-    "components",
-    "input",
-    "form",
-    "typescript",
-    "file-upload",
-    "text-input",
-    "date-picker",
-    "dropdown",
-    "textarea"
-  ],
-  "type": "module",
-  "files": [
-    "src",
-    "types",
-    "dist"
-  ],
-  "main": "./dist/vue-input-components.cjs.js",
-  "module": "./dist/vue-input-components.es.js",
-  "types": "./dist/src/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/src/index.d.ts",
-      "import": "./dist/vue-input-components.es.js",
-      "require": "./dist/vue-input-components.cjs.js"
+    "name": "@a-vision-software/vue-input-components",
+    "version": "1.4.18",
+    "description": "A collection of reusable Vue 3 input components with TypeScript support",
+    "author": "A-Vision Software",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/a-vision/vue-input-components.git"
     },
-    "./global": {
-      "types": "./dist/src/global.d.ts"
+    "homepage": "https://a-vision.github.io/vue-input-components/",
+    "keywords": [
+        "vue",
+        "vue3",
+        "components",
+        "input",
+        "form",
+        "typescript",
+        "file-upload",
+        "text-input",
+        "date-picker",
+        "dropdown",
+        "textarea"
+    ],
+    "type": "module",
+    "files": [
+        "src",
+        "types",
+        "dist"
+    ],
+    "main": "./dist/vue-input-components.cjs.js",
+    "module": "./dist/vue-input-components.es.js",
+    "types": "./dist/src/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/src/index.d.ts",
+            "import": "./dist/vue-input-components.es.js",
+            "require": "./dist/vue-input-components.cjs.js"
+        },
+        "./global": {
+            "types": "./dist/src/global.d.ts"
+        },
+        "./dist/*": "./dist/*",
+        "./styles.css": "./dist/vue-input-components.css",
+        "./styles": "./dist/vue-input-components.css"
     },
-    "./dist/*": "./dist/*",
-    "./styles.css": "./dist/vue-input-components.css",
-    "./styles": "./dist/vue-input-components.css"
-  },
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "test": "vitest"
-  },
-  "peerDependencies": {
-    "vue": "^3.5.0"
-  },
-  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.7.0",
-    "@fortawesome/free-regular-svg-icons": "^6.7.0",
-    "@fortawesome/free-solid-svg-icons": "^6.7.0",
-    "@fortawesome/vue-fontawesome": "^3.0.0",
-    "@vuepic/vue-datepicker": "^11.0.2"
-  },
-  "devDependencies": {
-    "@tsconfig/node20": "^20.1.2",
-    "@types/node": "^20.11.0",
-    "@vitejs/plugin-vue": "^5.0.0",
-    "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/eslint-config-typescript": "^12.0.0",
-    "@vue/test-utils": "^2.4.0",
-    "@vue/tsconfig": "^0.5.1",
-    "eslint": "^8.56.0",
-    "eslint-plugin-vue": "^9.21.0",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^3.2.0",
-    "typescript": "~5.3.0",
-    "vite": "^5.0.0",
-    "vite-plugin-dts": "^3.7.0",
-    "vitest": "^1.2.0",
-    "vue-router": "^4.2.0",
-    "vue-tsc": "^1.8.0"
-  },
-  "engines": {
-    "node": ">=18.0.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
+    "sideEffects": [
+        "**/*.css"
+    ],
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "preview": "vite preview",
+        "test": "vitest"
+    },
+    "peerDependencies": {
+        "vue": "^3.5.0"
+    },
+    "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.7.0",
+        "@fortawesome/free-regular-svg-icons": "^6.7.0",
+        "@fortawesome/free-solid-svg-icons": "^6.7.0",
+        "@fortawesome/vue-fontawesome": "^3.0.0",
+        "@vuepic/vue-datepicker": "^11.0.2"
+    },
+    "devDependencies": {
+        "@tsconfig/node20": "^20.1.2",
+        "@types/node": "^20.11.0",
+        "@vitejs/plugin-vue": "^5.0.0",
+        "@vue/eslint-config-prettier": "^9.0.0",
+        "@vue/eslint-config-typescript": "^12.0.0",
+        "@vue/test-utils": "^2.4.0",
+        "@vue/tsconfig": "^0.5.1",
+        "eslint": "^8.56.0",
+        "eslint-plugin-vue": "^9.21.0",
+        "npm-run-all": "^4.1.5",
+        "prettier": "^3.2.0",
+        "typescript": "~5.3.0",
+        "vite": "^5.0.0",
+        "vite-plugin-dts": "^3.7.0",
+        "vitest": "^1.2.0",
+        "vue-router": "^4.2.0",
+        "vue-tsc": "^1.8.0"
+    },
+    "engines": {
+        "node": ">=18.0.0"
+    },
+    "publishConfig": {
+        "access": "public"
+    }
+}

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) {

package/src/components/List.vue

@@ -22,7 +22,16 @@
       <!-- Actions -->
       <div v-if="actions?.length" class="list__actions">
 
-        <Action v-for="(action, actionIndex) in actions" :key="actionIndex" v-bind="action"
+        <Action v-for="(action, actionIndex) in [
+          ...(props.CSVDownload !== undefined ? [{
+            id: 'csv-download',
+            label: 'Download',
+            icon: 'file-csv',
+            color: 'var(--primary-color)',
+            onActionClick: handleCSVDownload
+          }] : []),
+          ...actions
+        ]" :key="actionIndex" v-bind="action"
           :href="presentation === 'minimal' && !action.href ? `#/${action.id ? action.id : action.label?.toLowerCase()}` : action.href"
           @click.prevent="action.onActionClick ? action.onActionClick(undefined, action) : null"
           :size="presentation === 'minimal' ? 'small' : 'regular'" />
@@ -85,6 +94,11 @@
               <template v-if="column.type === 'text'">
                 {{ row[column.key] }}
               </template>
+              <template v-else-if="column.type === 'email'">
+                <a v-if="row['name']" :href="`mailto:${row['name']} <${row[column.key]}>`" @click.stop>{{
+                  row[column.key] }}</a>
+                <a v-else :href="`mailto:${row[column.key]}`" @click.stop>{{ row[column.key] }}</a>
+              </template>
               <template v-else-if="column.type === 'number'">
                 {{ row[column.key] }}
               </template>
@@ -154,6 +168,43 @@ watch(filterValue, (newValue) => {
   return () => clearTimeout(timeout)
 })
 
+const handleCSVDownload = () => {
+  const csv = [];
+  const headerRow = [];
+  const headerKeys = []
+  for (const column of props.columns) {
+    const dataType = typeof props.data[0][column.key];
+    if (dataType !== 'object') {
+      const columnName = column.label || column.key;
+      headerRow.push(columnName);
+      headerKeys.push(column.key);
+    }
+  }
+  csv.push(headerRow.join(','));
+
+  for (const row of props.data) {
+    const rowData: string[] = [];
+    headerKeys.forEach(key => {
+      const value = row[key];
+      if (value == null) {
+        rowData.push('');
+      } else {
+        rowData.push(value);
+      }
+    })
+    csv.push('"' + rowData.join('","') + '"');
+  }
+
+  const blob = new Blob([csv.join('\n')], { type: 'text/csv;charset=utf-8;' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  const downloadName = props.CSVDownload || 'data';
+  a.download = downloadName.toLowerCase().endsWith('.csv') ? downloadName : downloadName + '.csv'
+  a.click()
+  URL.revokeObjectURL(url)
+}
+
 const handleFilter = () => {
   // No need to do anything here as the watch handles the filtering
 }
@@ -203,16 +254,17 @@ const filteredData = computed(() => {
       const value = row[column.key]
       if (value == null) return false
 
+      const dateStr = formatDate(value)
+      const checkboxValue = value?.modelValue ? 'yes' : 'no'
+
       switch (column.type) {
         case 'text':
           return String(value).toLowerCase().includes(effectiveFilterValue.value)
         case 'number':
           return String(value).includes(effectiveFilterValue.value)
         case 'date':
-          const dateStr = formatDate(value)
           return dateStr.toLowerCase().includes(effectiveFilterValue.value)
         case 'checkbox':
-          const checkboxValue = value?.modelValue ? 'yes' : 'no'
           return checkboxValue.includes(effectiveFilterValue.value)
         default:
           return false
@@ -228,32 +280,29 @@ const sortedAndFilteredData = computed(() => {
     const column = sortColumn.value!
     const aValue = a[column.key]
     const bValue = b[column.key]
+    const sortOrder = sortDirection.value === 'asc' ? 1 : -1
 
     // Handle different data types
     if (column.type === 'date') {
       const dateA = new Date(aValue).getTime()
       const dateB = new Date(bValue).getTime()
-      return sortDirection.value === 'asc' ? dateA - dateB : dateB - dateA
+      return (dateA - dateB) * sortOrder
     }
 
     if (column.type === 'number') {
-      return sortDirection.value === 'asc' ? aValue - bValue : bValue - aValue
+      return (aValue - bValue) * sortOrder
     }
 
     if (column.type === 'checkbox') {
       const aChecked = aValue?.modelValue || false
       const bChecked = bValue?.modelValue || false
-      return sortDirection.value === 'asc'
-        ? (aChecked === bChecked ? 0 : aChecked ? 1 : -1)
-        : (aChecked === bChecked ? 0 : aChecked ? -1 : 1)
+      return (aChecked - bChecked) * sortOrder
     }
 
     // Default string comparison for text and other types
     const stringA = String(aValue || '').toLowerCase()
     const stringB = String(bValue || '').toLowerCase()
-    return sortDirection.value === 'asc'
-      ? stringA.localeCompare(stringB)
-      : stringB.localeCompare(stringA)
+    return stringA.localeCompare(stringB) * sortOrder
   })
 })
 

package/src/types/fileupload.ts

@@ -31,6 +31,7 @@ interface UploadCallbackResponse {
 interface UploadStatus {
   type: 'pending' | 'success' | 'error' | 'processing'
   message: string
+  response?: unknown
 }
 
 interface FileUploadEmits {

package/src/types/list.ts

@@ -2,7 +2,7 @@ import { ListActionProps } from './action'
 
 type ListPresentation = 'default' | 'minimal'
 
-type ListDataType = 'text' | 'number' | 'date' | 'action' | 'checkbox' | 'icon'
+type ListDataType = 'text' | 'number' | 'date' | 'action' | 'checkbox' | 'icon' | 'email'
 
 interface ListAction {
   id: string
@@ -35,6 +35,7 @@ interface ListProps {
   columns: ListColumn[]
   data: any[]
   actions?: ListActionProps[]
+  CSVDownload?: string
   filter?: {
     placeholder?: string
   }