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

package/package.json

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

package/src/components/List.vue

@@ -169,10 +169,7 @@
                 {{ formatTime(row[column.key]) }}
               </template>
               <template v-else-if="column.type === 'action'">
-                <div
-                  class="list__row-actions"
-                  v-if="row[column.key]"
-                >
+                <div class="list__row-actions" v-if="row[column.key]">
                   <Action
                     v-for="(action, actionIndex) in row[column.key] as ListActionProps[]"
                     :key="actionIndex"
@@ -309,21 +306,54 @@ const handleSort = (column: ListColumn) => {
 }
 
 const formatDate = (date: string | Date) => {
-  const dateFormatter = new Intl.DateTimeFormat(config.dateFormat.locale, config.dateFormat.options)
-  return dateFormatter.format(new Date(date))
+  try {
+    const dateFormatter = new Intl.DateTimeFormat(
+      config.dateFormat.locale,
+      config.dateFormat.options,
+    )
+    if (typeof date === 'string' && !isNaN(Date.parse(date))) {
+      return dateFormatter.format(new Date(date))
+    } else if (date instanceof Date && !isNaN(date.getTime())) {
+      return dateFormatter.format(date)
+    }
+  } catch (e) {
+    console.error('Error formatting date:', e)
+  }
+  return '-'
 }
 
 const formatDatetime = (date: string | Date) => {
-  const dateFormatter = new Intl.DateTimeFormat(
-    config.datetimeFormat.locale,
-    config.datetimeFormat.options,
-  )
-  return dateFormatter.format(new Date(date))
+  try {
+    const dateFormatter = new Intl.DateTimeFormat(
+      config.datetimeFormat.locale,
+      config.datetimeFormat.options,
+    )
+    if (typeof date === 'string' && !isNaN(Date.parse(date))) {
+      return dateFormatter.format(new Date(date))
+    } else if (date instanceof Date && !isNaN(date.getTime())) {
+      return dateFormatter.format(date)
+    }
+  } catch (e) {
+    console.error('Error formatting datetime:', e)
+  }
+  return '-'
 }
 
 const formatTime = (date: string | Date) => {
-  const dateFormatter = new Intl.DateTimeFormat(config.timeFormat.locale, config.timeFormat.options)
-  return dateFormatter.format(new Date(date))
+  try {
+    const dateFormatter = new Intl.DateTimeFormat(
+      config.timeFormat.locale,
+      config.timeFormat.options,
+    )
+    if (typeof date === 'string' && !isNaN(Date.parse(date))) {
+      return dateFormatter.format(new Date(date))
+    } else if (date instanceof Date && !isNaN(date.getTime())) {
+      return dateFormatter.format(date)
+    }
+  } catch (e) {
+    console.error('Error formatting time:', e)
+  }
+  return '-'
 }
 
 const rowClassList = (row: any): Record<string, boolean> => {
@@ -395,10 +425,24 @@ const sortedAndFilteredData = computed(() => {
       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 (dateA - dateB) * sortOrder
+      if (column.type === 'date' || column.type === 'datetime' || column.type === 'time') {
+        if (
+          typeof aValue === 'string' &&
+          !isNaN(Date.parse(aValue)) &&
+          typeof bValue === 'string' &&
+          !isNaN(Date.parse(bValue))
+        ) {
+          const dateA = new Date(aValue).getTime()
+          const dateB = new Date(bValue).getTime()
+          return (dateA - dateB) * sortOrder
+        }
+        if (typeof aValue === 'string' && !isNaN(Date.parse(aValue))) {
+          return sortOrder
+        }
+        if (typeof bValue === 'string' && !isNaN(Date.parse(bValue))) {
+          return sortOrder * -1
+        }
+        return 0
       }
 
       if (column.type === 'number') {

package/src/components/TextInput.vue

@@ -44,13 +44,13 @@
         :max-date="max"
         :format="dateFormat"
         :enable-time-picker="type === 'datetime'"
-        :auto-apply="true"
-        :close-on-auto-apply="true"
         :clearable="true"
         :input-class-name="['text-input__input', { 'text-input__input--has-icon': icon }]"
         @update:model-value="handleDateChange"
         @focus="handleFocus"
         @blur="handleBlur"
+        text-input
+        :config="dpConfig"
       />
       <input
         v-else-if="type == 'money' && isFocused"
@@ -182,6 +182,8 @@ const isFocused = ref(false)
 const originalValue = ref<string | number>('')
 const originalDateValue = ref<Date | null>(null)
 
+const dpConfig = { setDateOnMenuClose: true }
+
 const defaultCurrencyFormatter = new Intl.NumberFormat('en-NZ', {
   style: 'currency',
   currency: 'NZD',

package/src/views/ListTestView.vue

@@ -165,7 +165,7 @@ const columns: ListColumn[] = [
     label: 'Joined',
     type: 'date',
     sortable: true,
-    width: '6rem',
+    width: '8rem',
     headerTooltip: 'Account creation date',
     cellTooltip: true,
   },
@@ -326,7 +326,6 @@ const data = ref<ListRowData[]>([
   {
     name: 'Bob Wilson',
     email: 'bob@example.com',
-    joined: '2023-11-05',
     active: <ListCheckboxProps>{
       modelValue: true,
       disabled: true,