@a-vision-software/vue-input-components 1.4.31 → 2.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-vision-software/vue-input-components",
-  "version": "1.4.31",
+  "version": "2.0.2",
   "description": "A collection of reusable Vue 3 input components with TypeScript support",
   "author": "A-Vision Software",
   "license": "MIT",
@@ -54,8 +54,8 @@
     "test": "vitest"
   },
   "peerDependencies": {
-    "vue": "^3.5.0",
-    "floating-vue": "^5.2.2"
+    "floating-vue": "^5.2.2",
+    "vue": "^3.5.0"
   },
   "peerDependenciesMeta": {
     "floating-vue": {
@@ -63,34 +63,35 @@
     }
   },
   "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",
-    "floating-vue": "^5.2.2"
+    "@fortawesome/fontawesome-svg-core": "^7.2.0",
+    "@fortawesome/free-regular-svg-icons": "^7.2.0",
+    "@fortawesome/free-solid-svg-icons": "^7.2.0",
+    "@fortawesome/vue-fontawesome": "^3.1.3",
+    "@vuepic/vue-datepicker": "^12.1.0",
+    "floating-vue": "^5.2.2",
+    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"
   },
   "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",
+    "@tsconfig/node20": "^20.1.9",
+    "@types/node": "^25.5.0",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.7.0",
+    "@vue/test-utils": "^2.4.6",
+    "@vue/tsconfig": "^0.9.0",
+    "eslint": "^10.0.3",
+    "eslint-plugin-vue": "^10.8.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"
+    "prettier": "^3.8.1",
+    "typescript": "~5.9.3",
+    "vite": "^8.0.0",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.1.0",
+    "vue-router": "^5.0.3",
+    "vue-tsc": "^3.2.6"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": "^20.19.0 || >=22.12.0"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Dropdown.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    ref="dropdownRef"
     class="dropdown"
     :class="{
       'dropdown--open': isOpen,
@@ -81,7 +82,9 @@
         >required</span
       >
       <transition name="fade">
-        <span v-if="showSaved && !error" class="status-indicator saved-indicator">saved</span>
+        <span v-if="showSaved && !showChanged && !error" class="status-indicator saved-indicator"
+          >saved</span
+        >
       </transition>
       <transition name="fade">
         <span v-if="showChanged && !error" class="status-indicator changed-indicator">changed</span>
@@ -161,6 +164,7 @@ const emit = defineEmits<{
   (e: 'saved'): void
 }>()
 
+const dropdownRef = ref<HTMLElement | null>(null)
 const isOpen = ref(false)
 const filterText = ref('')
 const filterInput = ref<HTMLInputElement | null>(null)
@@ -230,18 +234,19 @@ const deselectOption = (option: DropdownOption) => {
   if (props.multiple && Array.isArray(props.modelValue)) {
     const newValue = props.modelValue.filter((id) => id !== option.id)
     emit('update:modelValue', newValue)
+    debounceAutosave(newValue)
   }
 }
 
 const clearSelection = () => {
   if (props.disabled) return
   emit('update:modelValue', props.multiple ? [] : '')
+  debounceAutosave(props.multiple ? [] : '')
 }
 
 // Close dropdown when clicking outside
 const handleClickOutside = (event: MouseEvent) => {
-  const target = event.target as HTMLElement
-  if (!target.closest('.dropdown')) {
+  if (dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
     closeDropdown()
   }
 }
@@ -288,7 +293,7 @@ const debounceAutosave = (value: string | string[]) => {
   }
 
   // Show changed indicator immediately
-  if (!props.error) {
+  if (!props.error && props.autosave) {
     showChanged.value = true
   }
 

package/src/components/List.vue

@@ -47,6 +47,17 @@
                   },
                 ]
               : []),
+            ...(props.XLSXDownload !== undefined
+              ? [
+                  {
+                    id: 'xlsx-download',
+                    label: 'Download',
+                    icon: 'file-excel',
+                    color: 'var(--primary-color)',
+                    onActionClick: handleXLSXDownload,
+                  },
+                ]
+              : []),
             ...(actions || []),
           ]"
           :key="actionIndex"
@@ -224,6 +235,7 @@ import Checkbox from './Checkbox.vue'
 import type { ListProps, ListEmits, ListColumn, ListRowData } from '../types/list'
 import type { ListActionProps } from '../types/action'
 import { config } from '../config'
+import { utils, writeFileXLSX } from 'xlsx'
 
 const props = withDefaults(defineProps<ListProps>(), {
   presentation: 'default',
@@ -258,8 +270,7 @@ const handleCSVDownload = () => {
   const headerRow = []
   const headerKeys = []
   for (const column of props.columns) {
-    const dataType = typeof props.data[0][column.key]
-    if (dataType !== 'object') {
+    if (['checkbox', 'icon', 'action'].indexOf(column.type as string) === -1) {
       const columnName = column.label || column.key
       headerRow.push(columnName)
       headerKeys.push(column.key)
@@ -290,6 +301,53 @@ const handleCSVDownload = () => {
   URL.revokeObjectURL(url)
 }
 
+const handleXLSXDownload = () => {
+  if (!props.XLSXDownload) return
+
+  const downloadName = props.XLSXDownload || 'data'
+  const fileName = downloadName.toLowerCase().endsWith('.xlsx')
+    ? downloadName
+    : downloadName + '.xlsx'
+
+  const workbook = utils.book_new()
+
+  const columns = []
+  for (const column of props.columns) {
+    if (['checkbox', 'icon', 'action'].indexOf(column.type as string) === -1) {
+      columns.push({
+        field: column.key,
+        label: column.label || column.key,
+      })
+    }
+  }
+
+  const rows = []
+  for (const row of props.data) {
+    const rowData: any = {}
+    columns.forEach((column) => {
+      const value = row[column.field]
+      if (value == null) {
+        rowData[column.field] = ''
+      } else {
+        rowData[column.field] = value
+      }
+    })
+    rows.push(rowData)
+  }
+
+  const sheetName =
+    downloadName.lastIndexOf('.') !== -1
+      ? downloadName.substring(0, downloadName.lastIndexOf('.')) || 'Sheet1'
+      : downloadName
+  const worksheet = utils.json_to_sheet(rows)
+  utils.book_append_sheet(
+    workbook,
+    worksheet,
+    sheetName.length > 31 ? sheetName.substring(0, 31) : sheetName,
+  )
+  writeFileXLSX(workbook, fileName)
+}
+
 const handleFilter = () => {
   // No need to do anything here as the watch handles the filtering
 }

package/src/components/TextInput.vue

@@ -33,7 +33,7 @@
       <div v-if="icon" class="text-input__icon" @click="focusInput">
         <font-awesome-icon :icon="icon" />
       </div>
-      <Datepicker
+      <VueDatePicker
         v-if="type === 'date' || type === 'datetime'"
         :id="id"
         v-model="dateValue"
@@ -42,7 +42,7 @@
         :readonly="readonly"
         :min-date="min"
         :max-date="max"
-        :format="dateFormat"
+        :formats="dateFormat"
         :enable-time-picker="type === 'datetime'"
         :clearable="true"
         :input-class-name="['text-input__input', { 'text-input__input--has-icon': icon }]"
@@ -137,7 +137,7 @@
 <script setup lang="ts">
 import { computed, ref, onUnmounted, onMounted, watch, nextTick } from 'vue'
 import { TextInputProps } from '../types/textinput'
-import Datepicker from '@vuepic/vue-datepicker'
+import { VueDatePicker } from '@vuepic/vue-datepicker'
 import '@vuepic/vue-datepicker/dist/main.css'
 
 const props = withDefaults(defineProps<TextInputProps>(), {
@@ -160,6 +160,7 @@ const props = withDefaults(defineProps<TextInputProps>(), {
   bgColor: 'var(--input-color, #ffffffee)',
   width: '100%',
   autosaveOnBlur: true,
+  dateformat: null,
 })
 
 const emit = defineEmits<{
@@ -211,7 +212,17 @@ const formattedMoney = computed(() => {
 })
 
 const dateFormat = computed(() => {
-  return props.type === 'datetime' ? 'dd/MM/yyyy HH:mm' : 'dd/MM/yyyy'
+  return props.dateformat
+    ? props.dateformat
+    : props.type === 'datetime'
+      ? {
+          input: 'dd/MM/yyyy HH:mm',
+          display: 'dd/MM/yyyy HH:mm',
+        }
+      : {
+          input: 'dd/MM/yyyy',
+          display: 'dd/MM/yyyy',
+        }
 })
 
 const labelStyle = computed(() => {

package/src/types/list.ts

@@ -52,6 +52,7 @@ interface ListProps {
   data: ListRowData[]
   actions?: ListActionProps[]
   CSVDownload?: string
+  XLSXDownload?: string
   filter?: {
     placeholder?: string
   }

package/src/types/textinput.ts

@@ -1,3 +1,5 @@
+import { FormatsConfig } from '@vuepic/vue-datepicker'
+
 export type TextInputProps = {
   required?: boolean
   placeholder?: string
@@ -16,6 +18,7 @@ export type TextInputProps = {
   maxHeight?: string
   bgColor?: string
   currencyFormatter?: Intl.NumberFormat
+  dateformat?: FormatsConfig | null
   autosave?: (value: string) => Promise<void>
   autosaveOnBlur?: boolean
   error?: string

package/src/views/ListTestView.vue

@@ -19,6 +19,7 @@
         @row-click="handleRowClick"
         @row-dblclick="handleRowDblClick"
         :CSVDownload="'users'"
+        :XLSXDownload="'users'"
       />
     </section>
 
@@ -35,6 +36,7 @@
         @row-click="handleRowClick"
         @row-dblclick="handleRowDblClick"
         :CSVDownload="'user-list'"
+        :XLSXDownload="'user-list.xlsx'"
       />
     </section>