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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-vision-software/vue-input-components",
-  "version": "1.4.20",
+  "version": "1.4.21",
   "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/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/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>