@a-vision-software/vue-input-components 1.4.20 → 1.4.22

package/package.json

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

package/src/components/List.vue

@@ -96,7 +96,7 @@
             }"
             @click="handleSort(column)"
           >
-            <div class="list__column-header">
+            <div class="list__column-header" :title="column.headerTooltip">
               <span>{{ column.label }}</span>
               <span
                 v-if="column.sortable"
@@ -219,7 +219,7 @@ import { ref, computed, watch } from 'vue'
 import TextInput from './TextInput.vue'
 import Action from './Action.vue'
 import Checkbox from './Checkbox.vue'
-import type { ListProps, ListEmits, ListColumn, ListAction } from '../types/list'
+import type { ListProps, ListEmits, ListColumn, ListAction, ListRowData } from '../types/list'
 import { config } from '../config'
 
 const props = withDefaults(defineProps<ListProps>(), {
@@ -341,6 +341,9 @@ const filteredData = computed(() => {
   if (filterableColumns.length === 0) return props.data
 
   return props.data.filter((row) => {
+    // Always include rows excluded from filtering
+    if (row.excludeFromFilter) return true
+
     return filterableColumns.some((column) => {
       const value = row[column.key]
       if (value == null) return false
@@ -364,36 +367,57 @@ const filteredData = computed(() => {
 })
 
 const sortedAndFilteredData = computed(() => {
-  if (!sortColumn.value) return filteredData.value
-
-  return [...filteredData.value].sort((a, b) => {
-    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 (dateA - dateB) * sortOrder
+  // Separate fixed rows (excluded from sorting) from sortable rows
+  const fixedRows: ListRowData[] = []
+  const sortableRows: ListRowData[] = []
+
+  filteredData.value.forEach((row) => {
+    if (row.excludeFromSort) {
+      fixedRows.push(row)
+    } else {
+      sortableRows.push(row)
     }
+  })
 
-    if (column.type === 'number') {
-      return (aValue - bValue) * sortOrder
-    }
+  // Sort only the sortable rows if sorting is active
+  let sortedRows = sortableRows
+  if (sortColumn.value) {
+    sortedRows = [...sortableRows].sort((a, b) => {
+      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 (dateA - dateB) * sortOrder
+      }
 
-    if (column.type === 'checkbox') {
-      const aChecked = aValue?.modelValue || false
-      const bChecked = bValue?.modelValue || false
-      return (aChecked - bChecked) * sortOrder
-    }
+      if (column.type === 'number') {
+        return (aValue - bValue) * sortOrder
+      }
 
-    // Default string comparison for text and other types
-    const stringA = String(aValue || '').toLowerCase()
-    const stringB = String(bValue || '').toLowerCase()
-    return stringA.localeCompare(stringB) * sortOrder
-  })
+      if (column.type === 'checkbox') {
+        const aChecked = aValue?.modelValue || false
+        const bChecked = bValue?.modelValue || false
+        return (aChecked - bChecked) * sortOrder
+      }
+
+      // Default string comparison for text and other types
+      const stringA = String(aValue || '').toLowerCase()
+      const stringB = String(bValue || '').toLowerCase()
+      return stringA.localeCompare(stringB) * sortOrder
+    })
+  }
+
+  // Separate fixed rows by their fixed position
+  const topFixedRows = fixedRows.filter((row) => row.fixed === 'top')
+  const bottomFixedRows = fixedRows.filter((row) => row.fixed === 'bottom')
+
+  // Return rows in order: top fixed, sorted, bottom fixed
+  return [...topFixedRows, ...sortedRows, ...bottomFixedRows]
 })
 
 defineExpose({

package/src/components/TextInput.vue

@@ -104,6 +104,9 @@
         :disabled="disabled"
         class="text-input__input"
         @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        @keydown="handleKeydown"
         ref="inputRef"
         :readonly="readonly"
       ></textarea>
@@ -156,6 +159,7 @@ const props = withDefaults(defineProps<TextInputProps>(), {
   maxHeight: '14rem',
   bgColor: 'var(--input-color, #ffffffee)',
   width: '100%',
+  autosaveOnBlur: true,
 })
 
 const emit = defineEmits<{
@@ -171,11 +175,12 @@ const id = ref<string>('')
 const showSaved = ref(false)
 const showChanged = ref(false)
 const isChanged = ref(false)
-const debounceTimer = ref<number | null>(null)
 const changedTimer = ref<number | null>(null)
 const inputRef = ref<HTMLInputElement | null>(null)
 const dateValue = ref<Date | null>(null)
 const isFocused = ref(false)
+const originalValue = ref<string | number>('')
+const originalDateValue = ref<Date | null>(null)
 
 const defaultCurrencyFormatter = new Intl.NumberFormat('en-NZ', {
   style: 'currency',
@@ -246,10 +251,7 @@ const handleAutosave = async (value: string) => {
   }
 }
 
-const debounceAutosave = (value: string) => {
-  if (debounceTimer.value) {
-    clearTimeout(debounceTimer.value)
-  }
+const showChangedIndicator = () => {
   if (changedTimer.value) {
     clearTimeout(changedTimer.value)
   }
@@ -262,10 +264,6 @@ const debounceAutosave = (value: string) => {
     emit('changed')
     isChanged.value = true
   }, 500)
-
-  debounceTimer.value = window.setTimeout(() => {
-    handleAutosave(value)
-  }, 1500)
 }
 
 const focusInput = () => {
@@ -300,11 +298,11 @@ const handleInput = (event: Event) => {
     const parsed = parseFloat(value)
     if (!Number.isNaN(parsed)) {
       emit('update:modelValue', parsed)
-      debounceAutosave(String(parsed))
+      showChangedIndicator()
     }
   } else {
     emit('update:modelValue', value)
-    debounceAutosave(value)
+    showChangedIndicator()
     if (props.type === 'textarea' && (event.target as HTMLTextAreaElement).tagName === 'TEXTAREA') {
       adjustHeight(event.target as HTMLTextAreaElement)
     }
@@ -313,6 +311,10 @@ const handleInput = (event: Event) => {
 
 const handleFocus = () => {
   isFocused.value = true
+  originalValue.value = props.modelValue
+  if (props.type === 'date') {
+    originalDateValue.value = dateValue.value
+  }
   emit('focus')
 }
 
@@ -328,9 +330,41 @@ const handleBlur = (event?: Event) => {
   }
   isFocused.value = false
   emit('blur')
+  
+  if (props.autosaveOnBlur && props.autosave) {
+    const value = String(props.modelValue)
+    handleAutosave(value)
+  }
 }
 
 const handleKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    emit('update:modelValue', originalValue.value)
+    if (props.type === 'date') {
+      dateValue.value = originalDateValue.value
+    }
+    if (changedTimer.value) {
+      clearTimeout(changedTimer.value)
+      changedTimer.value = null
+    }
+    showSaved.value = false
+    showChanged.value = false
+    inputRef.value?.blur()
+  }
+  
+  if (event.key === 'Enter') {
+    if (props.type === 'textarea') {
+      if (event.ctrlKey || event.shiftKey) {
+        event.preventDefault()
+        inputRef.value?.blur()
+      }
+    } else {
+      event.preventDefault()
+      inputRef.value?.blur()
+    }
+  }
+  
   emit('keydown', event)
 }
 
@@ -349,13 +383,10 @@ const handlePaste = (event: ClipboardEvent) => {
 const handleDateChange = (date: Date | null) => {
   const formattedDate = formatDateForModel(date)
   emit('update:modelValue', formattedDate)
-  debounceAutosave(formattedDate)
+  showChangedIndicator()
 }
 
 onUnmounted(() => {
-  if (debounceTimer.value) {
-    clearTimeout(debounceTimer.value)
-  }
   if (changedTimer.value) {
     clearTimeout(changedTimer.value)
   }

package/src/types/list.ts

@@ -38,6 +38,7 @@ interface ListColumn {
   minWidth?: string
   maxWidth?: string
   cellClasses?: conditionalClassList
+  headerTooltip?: string
 }
 
 interface ListFilter {
@@ -47,7 +48,7 @@ interface ListFilter {
 
 interface ListProps {
   columns: ListColumn[]
-  data: any[]
+  data: ListRowData[]
   actions?: ListActionProps[]
   CSVDownload?: string
   filter?: {
@@ -76,6 +77,15 @@ interface ListIconProps {
   color?: string
 }
 
+interface ListRowData {
+  excludeFromSort?: boolean
+  excludeFromFilter?: boolean
+  fixed?: 'top' | 'bottom'
+  selected?: boolean
+  class?: string
+  [key: string]: any
+}
+
 export type {
   ListPresentation,
   ListProps,
@@ -85,4 +95,5 @@ export type {
   ListIconProps,
   ListColumn,
   ListFilter,
+  ListRowData,
 }

package/src/types/textinput.ts

@@ -18,6 +18,7 @@ export type TextInputProps =
   bgColor?: string
   currencyFormatter?: Intl.NumberFormat
   autosave?: (value: string) => Promise<void>
+  autosaveOnBlur?: boolean
   error?: string
 } & (
   | {

package/src/views/ListTestView.vue

@@ -65,7 +65,13 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import List from '@/components/List.vue'
-import type { ListColumn, ListActionProps, ListCheckboxProps, ListIconProps } from '@/types'
+import type {
+  ListColumn,
+  ListActionProps,
+  ListCheckboxProps,
+  ListIconProps,
+  ListRowData,
+} from '@/types'
 
 const autosaveActive = (info: any) => {
   console.log('Autosave active', info)
@@ -130,6 +136,7 @@ const columns: ListColumn[] = [
     filterable: false,
     align: 'center',
     width: '4rem',
+    headerTooltip: 'User status indicator',
   },
   {
     key: 'name',
@@ -137,6 +144,7 @@ const columns: ListColumn[] = [
     type: 'text',
     sortable: true,
     filterable: true,
+    headerTooltip: 'The full name of the user',
   },
   {
     key: 'email',
@@ -144,6 +152,7 @@ const columns: ListColumn[] = [
     type: 'email',
     sortable: true,
     filterable: true,
+    headerTooltip: 'Contact email address',
     cellClasses: {
       lightredEmail: (value: any) => value.includes('bob'),
     },
@@ -154,6 +163,7 @@ const columns: ListColumn[] = [
     type: 'date',
     sortable: true,
     width: '6rem',
+    headerTooltip: 'Account creation date',
   },
   {
     key: 'active',
@@ -162,6 +172,7 @@ const columns: ListColumn[] = [
     align: 'center',
     sortable: true,
     width: '4rem',
+    headerTooltip: 'Account active status',
   },
   {
     key: 'actions',
@@ -172,7 +183,39 @@ const columns: ListColumn[] = [
   },
 ]
 
-const data = ref([
+const data = ref<ListRowData[]>([
+  {
+    // This row will always appear at the top when sorting
+    excludeFromSort: true,
+    fixed: 'top',
+    selected: false,
+    select: <ListCheckboxProps>{
+      modelValue: false,
+      disabled: false,
+      onCheckboxClick: selectClick,
+    },
+    status: <ListIconProps>{
+      icon: 'crown',
+      color: 'gold',
+    },
+    name: 'Current User (Fixed at Top)',
+    email: 'current@example.com',
+    joined: '2024-01-01',
+    active: {
+      modelValue: true,
+      disabled: false,
+      autosave: autosaveActive,
+      onCheckboxClick: selectClick,
+    },
+    actions: <ListActionProps[]>[
+      {
+        id: 'edit',
+        label: 'Edit',
+        icon: 'edit',
+        onActionClick: rowActionClick,
+      },
+    ],
+  },
   {
     class: 'testclass',
     selected: false,
@@ -390,6 +433,36 @@ const data = ref([
       },
     ],
   },
+  {
+    // This row will always appear at the bottom when sorting and is excluded from filtering
+    excludeFromSort: true,
+    excludeFromFilter: true,
+    fixed: 'bottom',
+    select: <ListCheckboxProps>{
+      modelValue: false,
+      disabled: false,
+      onCheckboxClick: selectClick,
+    },
+    status: <ListIconProps>{
+      icon: 'info-circle',
+      color: 'blue',
+    },
+    name: 'Footer Row (Fixed at Bottom)',
+    email: 'footer@example.com',
+    joined: '2024-12-31',
+    active: {
+      modelValue: true,
+      disabled: false,
+    },
+    actions: <ListActionProps[]>[
+      {
+        id: 'info',
+        label: 'Info',
+        icon: 'info',
+        onActionClick: rowActionClick,
+      },
+    ],
+  },
 ])
 </script>
 
@@ -431,4 +504,8 @@ const data = ref([
 :deep(.list-test__section .list__cell.lightredEmail) {
   background-color: rgba(255, 0, 0, 0.1);
 }
+
+:deep(.list-test__section .list__row--testclass) {
+  background-color: rgba(155, 155, 0, 0.1);
+}
 </style>