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

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.17",
+    "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/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/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
   }

package/src/views/ListTestView.vue

@@ -12,14 +12,15 @@
     <section class="list-test__section">
       <h2>Default Presentation</h2>
       <List :actions="listActions" :columns="columns" :data="data" :filter="{ placeholder: 'Search users...' }"
-        @row-click="handleRowClick" @row-dblclick="handleRowDblClick" />
+        @row-click="handleRowClick" @row-dblclick="handleRowDblClick" :CSVDownload="'users'" />
     </section>
 
     <!-- Minimal Presentation -->
     <section class="list-test__section">
       <h2>Minimal Presentation</h2>
       <List :actions="listActions" :columns="columns" :data="data" presentation="minimal" width="50em"
-        :filter="{ placeholder: 'Search users...' }" @row-click="handleRowClick" @row-dblclick="handleRowDblClick" />
+        :filter="{ placeholder: 'Search users...' }" @row-click="handleRowClick" @row-dblclick="handleRowDblClick"
+        :CSVDownload="'user-list'" />
     </section>
 
     <!-- Loading State -->
@@ -115,7 +116,7 @@ const columns: ListColumn[] = [
   {
     key: 'email',
     label: 'Email',
-    type: 'text',
+    type: 'email',
     sortable: true,
     filterable: true
   },
@@ -131,6 +132,7 @@ const columns: ListColumn[] = [
     label: 'Active',
     type: 'checkbox',
     align: 'center',
+    sortable: true,
     width: '4rem'
   },
   {