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

package/src/views/ListTestView.vue

@@ -11,28 +11,53 @@
     <!-- Default Presentation -->
     <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" :CSVDownload="'users'" />
+      <List
+        :actions="listActions"
+        :columns="columns"
+        :data="data"
+        :filter="{ placeholder: 'Search users...' }"
+        @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"
-        :CSVDownload="'user-list'" />
+      <List
+        :actions="listActions"
+        :columns="columns"
+        :data="data"
+        presentation="minimal"
+        width="50em"
+        :filter="{ placeholder: 'Search users...' }"
+        @row-click="handleRowClick"
+        @row-dblclick="handleRowDblClick"
+        :CSVDownload="'user-list'"
+      />
     </section>
 
     <!-- Loading State -->
     <section class="list-test__section">
       <h2>Loading State</h2>
-      <List :columns="columns" :data="[]" :loading="true" :filter="{ placeholder: 'Search users...' }" />
+      <List
+        :columns="columns"
+        :data="[]"
+        :loading="true"
+        :filter="{ placeholder: 'Search users...' }"
+      />
     </section>
 
     <!-- Empty State -->
     <section class="list-test__section">
       <h2>Empty State</h2>
-      <List :columns="columns" :data="[]" empty-message="No users found" :filter="{ placeholder: 'Search users...' }" />
+      <List
+        :columns="columns"
+        :data="[]"
+        empty-message="No users found"
+        :filter="{ placeholder: 'Search users...' }"
+      />
     </section>
   </div>
 </template>
@@ -40,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)
@@ -83,8 +114,8 @@ const listActions = ref<ListActionProps[]>([
     label: 'New user',
     icon: 'add',
     color: 'var(--primary-color)',
-    onActionClick: listActionClick
-  }
+    onActionClick: listActionClick,
+  },
 ])
 
 const columns: ListColumn[] = [
@@ -95,7 +126,7 @@ const columns: ListColumn[] = [
     sortable: false,
     filterable: false,
     align: 'center',
-    width: '4rem'
+    width: '4rem',
   },
   {
     key: 'status',
@@ -104,28 +135,35 @@ const columns: ListColumn[] = [
     sortable: false,
     filterable: false,
     align: 'center',
-    width: '4rem'
+    width: '4rem',
+    headerTooltip: 'User status indicator',
   },
   {
     key: 'name',
     label: 'Name',
     type: 'text',
     sortable: true,
-    filterable: true
+    filterable: true,
+    headerTooltip: 'The full name of the user',
   },
   {
     key: 'email',
     label: 'Email',
     type: 'email',
     sortable: true,
-    filterable: true
+    filterable: true,
+    headerTooltip: 'Contact email address',
+    cellClasses: {
+      lightredEmail: (value: any) => value.includes('bob'),
+    },
   },
   {
     key: 'joined',
     label: 'Joined',
     type: 'date',
     sortable: true,
-    width: '6rem'
+    width: '6rem',
+    headerTooltip: 'Account creation date',
   },
   {
     key: 'active',
@@ -133,25 +171,58 @@ const columns: ListColumn[] = [
     type: 'checkbox',
     align: 'center',
     sortable: true,
-    width: '4rem'
+    width: '4rem',
+    headerTooltip: 'Account active status',
   },
   {
     key: 'actions',
     label: 'Actions',
     type: 'action',
     align: 'right',
-    width: '12rem'
-  }
+    width: '12rem',
+  },
 ]
 
-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,
     select: <ListCheckboxProps>{
       modelValue: false,
       disabled: false,
-      onCheckboxClick: selectClick
+      onCheckboxClick: selectClick,
     },
     status: <ListIconProps>{
       icon: 'star',
@@ -164,30 +235,30 @@ const data = ref([
       modelValue: true,
       disabled: false,
       autosave: autosaveActive,
-      onCheckboxClick: selectClick
+      onCheckboxClick: selectClick,
     },
     actions: <ListActionProps[]>[
       {
         id: 'edit',
         label: 'Edit',
         icon: 'edit',
-        onActionClick: rowActionClick
+        onActionClick: rowActionClick,
       },
       {
         id: 'delete',
         label: 'Delete',
         icon: 'trash',
         color: 'var(--danger-color)',
-        onActionClick: rowActionClick
-      }
-    ]
+        onActionClick: rowActionClick,
+      },
+    ],
   },
   {
     selected: false,
     select: <ListCheckboxProps>{
       modelValue: false,
       disabled: false,
-      onCheckboxClick: selectClick
+      onCheckboxClick: selectClick,
     },
     status: <ListIconProps>{
       icon: 'star',
@@ -199,51 +270,51 @@ const data = ref([
     active: <ListCheckboxProps>{
       modelValue: false,
       disabled: false,
-      autosave: autosaveActive
+      autosave: autosaveActive,
     },
     actions: <ListActionProps[]>[
       {
         id: 'edit',
         label: 'Edit',
         icon: 'edit',
-        onActionClick: rowActionClick
+        onActionClick: rowActionClick,
       },
       {
         id: 'delete',
         label: 'Delete',
         icon: 'trash',
-        onActionClick: rowActionClick
-      }
-    ]
+        onActionClick: rowActionClick,
+      },
+    ],
   },
   {
     select: <ListCheckboxProps>{
       modelValue: false,
       disabled: false,
-      onCheckboxClick: selectClick
+      onCheckboxClick: selectClick,
     },
     name: 'Alice Johnson',
     email: 'alice@example.com',
     joined: '2024-01-10',
     active: <ListCheckboxProps>{
       modelValue: true,
-      disabled: false
+      disabled: false,
     },
     actions: <ListActionProps[]>[
       {
         id: 'edit',
         label: 'Edit',
         icon: 'edit',
-        onActionClick: rowActionClick
+        onActionClick: rowActionClick,
       },
       {
         id: 'delete',
         label: 'Delete',
         icon: 'trash',
         disabled: true,
-        onActionClick: rowActionClick
-      }
-    ]
+        onActionClick: rowActionClick,
+      },
+    ],
   },
   {
     name: 'Bob Wilson',
@@ -251,119 +322,148 @@ const data = ref([
     joined: '2023-11-05',
     active: <ListCheckboxProps>{
       modelValue: true,
-      disabled: true
+      disabled: true,
     },
     actions: <ListActionProps[]>[
       {
         id: 'view',
         label: 'View',
         icon: 'eye',
-        onActionClick: rowActionClick
-      }
-    ]
+        onActionClick: rowActionClick,
+      },
+    ],
   },
   {
     select: <ListCheckboxProps>{
       modelValue: false,
       disabled: false,
-      onCheckboxClick: selectClick
+      onCheckboxClick: selectClick,
     },
     name: 'Carol Brown',
     email: 'carol@example.com',
     joined: '2023-08-30',
     active: <ListCheckboxProps>{
       modelValue: false,
-      disabled: false
+      disabled: false,
     },
     actions: <ListActionProps[]>[
       {
         id: 'edit',
         label: 'Edit',
         icon: 'edit',
-        onActionClick: rowActionClick
+        onActionClick: rowActionClick,
       },
       {
         id: 'delete',
         label: 'Delete',
         icon: 'trash',
-        onActionClick: rowActionClick
-      }
-    ]
+        onActionClick: rowActionClick,
+      },
+    ],
   },
   {
     select: <ListCheckboxProps>{
       modelValue: false,
       disabled: false,
-      onCheckboxClick: selectClick
+      onCheckboxClick: selectClick,
     },
     name: 'David Miller',
     email: 'david@example.com',
     joined: '2024-02-01',
     active: <ListCheckboxProps>{
       modelValue: true,
-      disabled: false
+      disabled: false,
     },
     actions: <ListActionProps[]>[
       {
         id: 'edit',
         label: 'Edit',
         icon: 'edit',
-        onActionClick: rowActionClick
+        onActionClick: rowActionClick,
       },
       {
         id: 'delete',
         label: 'Delete',
         icon: 'trash',
-        onActionClick: rowActionClick
-      }
-    ]
+        onActionClick: rowActionClick,
+      },
+    ],
   },
   {
     select: <ListCheckboxProps>{
       modelValue: false,
       disabled: false,
-      onCheckboxClick: selectClick
+      onCheckboxClick: selectClick,
     },
     name: 'Eva Garcia',
     email: 'eva@example.com',
     joined: '2023-05-15',
     active: {
       modelValue: true,
-      disabled: false
+      disabled: false,
     },
     actions: <ListActionProps[]>[
       {
         id: 'view',
         label: 'View',
         icon: 'eye',
-        onActionClick: rowActionClick
-      }
-    ]
+        onActionClick: rowActionClick,
+      },
+    ],
   },
   {
     select: <ListCheckboxProps>{
       modelValue: false,
       disabled: false,
-      onCheckboxClick: selectClick
+      onCheckboxClick: selectClick,
     },
     name: 'Frank Lee',
     email: 'frank@example.com',
     joined: '2023-12-20',
     active: {
       modelValue: false,
-      disabled: true
+      disabled: true,
     },
     actions: <ListActionProps[]>[
       {
         id: 'view',
         label: 'View',
         icon: 'eye',
-        onActionClick: rowActionClick
-      }
-    ]
-  }
+        onActionClick: rowActionClick,
+      },
+    ],
+  },
+  {
+    // 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>
 
 <style scoped>
@@ -400,4 +500,12 @@ const data = ref([
   margin-bottom: 1rem;
   color: var(--text-primary);
 }
+
+: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>